feat: 拖拽侧边栏宽度

src/stores/modules/baseLayout.ts

@@ -1,6 +1,13 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
+/** 侧边栏最小宽度 */
+export const MIN_SIDEBAR_WIDTH = 200
+/** 侧边栏最大宽度 */
+export const MAX_SIDEBAR_WIDTH = 650
+/** 侧边栏默认宽度 */
+export const DEFAULT_SIDEBAR_WIDTH = 400
+
 export const useBaseLayoutStore = defineStore(
   'baseLayout',
   () => {
@@ -12,6 +19,8 @@ export const useBaseLayoutStore = defineStore(
     const activeGameIcon = ref<string>('🐍')
     /** 当前选中的游戏名称 */
     const activeGameName = ref<string>('贪吃蛇')
+    /** 侧边栏当前宽度 */
+    const sidebarWidth = ref<number>(DEFAULT_SIDEBAR_WIDTH)
 
     /**
      * 设置顶部导航栏标题
@@ -33,13 +42,23 @@ export const useBaseLayoutStore = defineStore(
       activeGameName.value = name
     }
 
+    /**
+     * 设置侧边栏宽度，自动约束在最小和最大值之间
+     * @param width - 新宽度（px）
+     */
+    const setSidebarWidth = (width: number): void => {
+      sidebarWidth.value = Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH)
+    }
+
     return {
       topbarTitle,
       activeGameId,
       activeGameIcon,
       activeGameName,
+      sidebarWidth,
       setTopbarTitle,
-      setActiveGame
+      setActiveGame,
+      setSidebarWidth
     }
   },
   {