---初始化后台管理web页面项目

src/layouts/default/sider/DragBar.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="getClass" :style="getDragBarStyle"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
+  export default defineComponent({
+    name: 'DargBar',
+    props: {
+      mobile: Boolean,
+    },
+    setup(props) {
+      const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
+
+      const { prefixCls } = useDesign('darg-bar');
+      const getDragBarStyle = computed(() => {
+        if (unref(getCollapsed)) {
+          return { left: `${unref(getMiniWidthNumber)}px` };
+        }
+        return {};
+      });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
+          },
+        ];
+      });
+
+      return {
+        prefixCls,
+        getDragBarStyle,
+        getClass,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-darg-bar';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    z-index: @side-drag-z-index;
+    width: 2px;
+    height: 100%;
+    cursor: col-resize;
+    border-top: none;
+    border-bottom: none;
+
+    &--hide {
+      display: none;
+    }
+
+    &:hover {
+      background-color: @primary-color;
+      box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+    }
+  }
+</style>