fix: 侧边菜单栏拖拽优化 (#7606)

* fix: 拖拽使用遮罩层实现，使得拖拽到min或max临界值时cursor显示not-allowed，同时拖拽线条颜色变浅，类似于disabled，提升用户体验

* fix: 修复代码审查建议；修复lint和test报错

* fix: 修复遮罩层挡住hover:bg-primary视觉效果问题

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
 
-import { computed, shallowRef, useSlots, watchEffect } from 'vue';
+import { computed, onUnmounted, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
 
@@ -262,20 +262,18 @@ function handleMouseleave() {
   extraVisible.value = false;
 }
 
-const { startDrag } = useSidebarDrag();
+const { startDrag, endDrag } = useSidebarDrag();
 
 const handleDragSidebar = (e: MouseEvent) => {
-  const { isSidebarMixed, collapseWidth, extraWidth, width } = props;
+  const { isSidebarMixed, collapseWidth, width } = props;
   const minLimit = isSidebarMixed ? width + collapseWidth : collapseWidth;
   const maxLimit = isSidebarMixed ? width + 320 : 320;
-  const startWidth = isSidebarMixed ? width + extraWidth : width;
 
   startDrag(
     e,
     {
       min: minLimit,
       max: maxLimit,
-      startWidth,
     },
     {
       target: asideRef.value,
@@ -293,6 +291,10 @@ const handleDragSidebar = (e: MouseEvent) => {
     },
   );
 };
+
+onUnmounted(() => {
+  endDrag();
+});
 </script>
 
 <template>