feat(layout): 添加侧边栏折叠状态管理功能

- 在 counter store 中新增 isCollapseStore 状态管理
- 使用 Pinia 的 storeToRefs 替代 props 传递方式
- 实现侧边栏宽度动态切换逻辑，支持折叠展开
- 移除组件间 props 传递，统一使用全局状态管理
- 配置 ESLint 规则禁用单词组件名检查
- 优化布局组件的状态管理架构

flask-ui/src/layout/components/Sidebar/index.vue

@@ -1,16 +1,14 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import {ref} from "vue";
+import {useIsCollapseStore} from "@/stores/counter.ts";
-
+import {storeToRefs} from "pinia";
-defineProps<{
-  isCollapse: boolean
-}>()
-
-const iconComponent = ref("location")
 
+const isCollapseStore = useIsCollapseStore()
+const {isCollapse} = storeToRefs(isCollapseStore)
 </script>
 
 <template>
-  <el-aside>
+  <el-aside :width="!isCollapse?'200px':'auto'">
     <el-scrollbar>
       <el-menu
         default-active="2"
@@ -47,9 +45,9 @@ const iconComponent = ref("location")
 </template>
 
 <style scoped lang="scss">
-.el-aside {
+//.el-aside {
-  width: 200px;
+//  width: 200px;
-}
+//}
 :deep(.el-menu.el-menu--vertical) {
   min-height: calc(100vh - 60px);
 }

flask-ui/src/layout/index.vue

@@ -1,9 +1,12 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import {ref} from 'vue'
 import AppMain from "@/layout/components/AppMain.vue"
 import Sidebar from "@/layout/components/Sidebar/index.vue"
+import {useIsCollapseStore} from "@/stores/counter.ts";
+import {storeToRefs} from "pinia";
 
-let isCollapse = ref(false);
+const isCollapseStore = useIsCollapseStore()
+const {isCollapse} = storeToRefs(isCollapseStore)
 </script>
 
 <template>
@@ -17,7 +20,7 @@ let isCollapse = ref(false);
       </template>
     </el-header>
     <el-container>
-      <Sidebar :isCollapse="isCollapse"></Sidebar>
+      <Sidebar></Sidebar>
       <AppMain></AppMain>
     </el-container>
   </el-container>

flask-ui/src/stores/counter.ts

@@ -1,12 +1,19 @@
-import { ref, computed } from 'vue'
+import {ref, computed} from 'vue'
-import { defineStore } from 'pinia'
+import {defineStore, mapState} from 'pinia'
 
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0)
   const doubleCount = computed(() => count.value * 2)
+
   function increment() {
     count.value++
   }
 
-  return { count, doubleCount, increment }
+  return {count, doubleCount, increment}
+})
+
+export const useIsCollapseStore = defineStore('isCollapse', {
+  state: () => ({
+    isCollapse: false
+  })
 })