feat: 侧边栏宽度拖拽改为composable实现，同时修复tabbar.ts文件lint报错

packages/@core/composables/src/index.ts

@@ -2,6 +2,7 @@ export * from './use-is-mobile';
 export * from './use-layout-style';
 export * from './use-namespace';
 export * from './use-priority-value';
+export * from './use-resizable';
 export * from './use-scroll-lock';
 export * from './use-simple-locale';
 export * from './use-sortable';

packages/@core/composables/src/use-resizable.ts

@@ -0,0 +1,72 @@
+import { onUnmounted, ref } from 'vue';
+
+interface ResizableOptions {
+  max?: number;
+  min?: number;
+  onChange?: (newWidth: number) => void;
+}
+
+export function useResizable(options: ResizableOptions = {}) {
+  const { min = 0, max = 999, onChange } = options;
+
+  const isDragging = ref(false);
+
+  let cleanup: (() => void) | null = null;
+
+  let userSelect = '';
+  let cursor = '';
+
+  const startDrag = (e: MouseEvent, width: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    isDragging.value = true;
+    const startX = e.clientX;
+    const startWidth = width;
+
+    userSelect = document.body.style.userSelect;
+    cursor = document.body.style.cursor;
+
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      if (!isDragging.value) return;
+
+      const deltaX = moveEvent.clientX - startX;
+      let newWidth = startWidth + deltaX;
+
+      newWidth = Math.min(max, Math.max(min, newWidth));
+
+      onChange?.(newWidth);
+    };
+
+    const onMouseUp = () => {
+      if (!isDragging.value) return;
+      cleanup?.();
+    };
+
+    document.addEventListener('mousemove', onMouseMove, { passive: true });
+    document.addEventListener('mouseup', onMouseUp);
+
+    cleanup = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+
+      document.body.style.userSelect = userSelect;
+      document.body.style.cursor = cursor;
+
+      isDragging.value = false;
+      cleanup = null;
+    };
+  };
+
+  onUnmounted(() => {
+    cleanup?.();
+  });
+
+  return {
+    isDragging,
+    startDrag,
+  };
+}

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
 
-import { computed, ref, shallowRef, useSlots, watchEffect } from 'vue';
+import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
+import { useResizable } from '@vben-core/composables';
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
 
 import { useScrollLock } from '@vueuse/core';
@@ -255,31 +256,18 @@ function handleMouseleave() {
   extraVisible.value = false;
 }
 
-const isDragging = ref(false);
-
-function handleDragSidebar(e: MouseEvent) {
-  e.preventDefault();
-
-  isDragging.value = true;
-
-  const startX = e.clientX;
-  const startWidth = props.width;
-
-  function onMouseMove(moveEvent: MouseEvent) {
-    const deltaX = moveEvent.clientX - startX;
-    const newWidth = Math.min(320, Math.max(160, startWidth + deltaX));
+const { isDragging, startDrag } = useResizable({
+  min: 160,
+  max: 320,
+  onChange: (newWidth) => {
     emit('update:width', newWidth);
-  }
+  },
+});
 
-  function onMouseUp() {
-    isDragging.value = false;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
-  }
-
-  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', onMouseUp);
-}
+const handleDragSidebar = (e: MouseEvent) => {
+  const { width } = props;
+  startDrag(e, width);
+};
 </script>
 
 <template>

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -484,10 +484,6 @@ function handleHeaderToggle() {
 }
 
 const idMainContent = ELEMENT_ID_MAIN_CONTENT;
-
-function handleUpdateSidebarWidth(val: number) {
-  emit('update:sidebar-width', val);
-}
 </script>
 
 <template>
@@ -515,7 +511,7 @@ function handleUpdateSidebarWidth(val: number) {
       :width="getSidebarWidth"
       :z-index="sidebarZIndex"
       @leave="() => emit('sideMouseLeave')"
-      @update:width="handleUpdateSidebarWidth"
+      @update:width="(val) => emit('update:sidebar-width', val)"
     >
       <template v-if="isSideMode && !isMixedNav" #logo>
         <slot name="logo"></slot>