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

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>