From 07d33388edb8459f5dac60a5cda7bb202a7db88b Mon Sep 17 00:00:00 2001
From: zhengshunjin <2667579369@qq.com>
Date: Sun, 10 May 2026 21:16:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=B7=BB=E5=8A=A0=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E6=8A=98=E5=8F=A0=E7=8A=B6=E6=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 counter store 中新增 isCollapseStore 状态管理
- 使用 Pinia 的 storeToRefs 替代 props 传递方式
- 实现侧边栏宽度动态切换逻辑，支持折叠展开
- 移除组件间 props 传递，统一使用全局状态管理
- 配置 ESLint 规则禁用单词组件名检查
- 优化布局组件的状态管理架构
---
 .../src/layout/components/Sidebar/index.vue   | 20 +++++++++----------
 flask-ui/src/layout/index.vue                 |  9 ++++++---
 flask-ui/src/stores/counter.ts                | 13 +++++++++---
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/flask-ui/src/layout/components/Sidebar/index.vue b/flask-ui/src/layout/components/Sidebar/index.vue
index c1c3a3c..1f2fc0a 100644
--- a/flask-ui/src/layout/components/Sidebar/index.vue
+++ b/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";
-
-defineProps<{
-  isCollapse: boolean
-}>()
-
-const iconComponent = ref("location")
+import {useIsCollapseStore} from "@/stores/counter.ts";
+import {storeToRefs} from "pinia";
 
+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 {
-  width: 200px;
-}
+//.el-aside {
+//  width: 200px;
+//}
 :deep(.el-menu.el-menu--vertical) {
   min-height: calc(100vh - 60px);
 }
diff --git a/flask-ui/src/layout/index.vue b/flask-ui/src/layout/index.vue
index da01d98..a07a3c0 100644
--- a/flask-ui/src/layout/index.vue
+++ b/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>
diff --git a/flask-ui/src/stores/counter.ts b/flask-ui/src/stores/counter.ts
index b6757ba..5be74fd 100644
--- a/flask-ui/src/stores/counter.ts
+++ b/flask-ui/src/stores/counter.ts
@@ -1,12 +1,19 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import {ref, computed} from 'vue'
+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
+  })
 })