feat: 拖拽侧边栏宽度

src/layouts/BaseLayout.vue

@@ -11,7 +11,7 @@
     <!-- 主体区域 -->
     <div class="base-layout__main">
       <!-- 侧边栏 -->
-      <div class="base-layout__sidebar">
+      <div class="base-layout__sidebar" :style="{ width: sidebarWidth + 'px' }">
         <!-- 侧边栏内容 -->
         <div class="base-layout__sidebar-content">
           <GameList />
@@ -23,7 +23,7 @@
           </div>
         </div>
         <!-- 拖拽调整宽度的手柄 -->
-        <div class="base-layout__resize-handle"></div>
+        <div class="base-layout__resize-handle" @mousedown="onResizeMouseDown"></div>
       </div>
 
       <!-- 主内容区域 -->
@@ -40,9 +40,16 @@ import GameList from '@/components/baseLayouts/GameList.vue'
 import Lobby from '@/components/baseLayouts/Lobby.vue'
 import { useBaseLayoutStore } from '@/stores'
 import { storeToRefs } from 'pinia'
+import { useResizeHandle } from '@/common/hooks/useResizeHandle'
 
 const baseLayoutStore = useBaseLayoutStore()
-const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
+const { activeGameIcon, activeGameName, sidebarWidth } = storeToRefs(baseLayoutStore)
+
+/** 拖拽手柄事件处理器 */
+const { onMouseDown: onResizeMouseDown } = useResizeHandle({
+  width: sidebarWidth,
+  onWidthChange: (width) => baseLayoutStore.setSidebarWidth(width)
+})
 </script>
 
 <style scoped lang="scss">