refactor: 优化布局结构，细化拆分

src/layouts/ContainerLayout.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-page-container>
+    <router-view />
+  </q-page-container>
+</template>
+
+<script lang="ts" setup>
+// 无额外逻辑
+</script>

src/layouts/FooterLayout.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-footer elevated class="bg-grey-8 text-white">
+    <q-toolbar>
+      <q-btn dense flat round icon="menu" @click="settingStore.toggleLeftDrawer" />
+      <q-toolbar-title>
+        <div>页脚</div>
+      </q-toolbar-title>
+      <q-btn dense flat round icon="menu" @click="settingStore.toggleRightDrawer" />
+    </q-toolbar>
+  </q-footer>
+</template>
+
+<script lang="ts" setup>
+import { useSettingStore } from 'stores/setting'
+
+const settingStore = useSettingStore()
+</script>

src/layouts/HeaderLayout.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-header reveal elevated class="bg-primary text-white" height-hint="98">
+    <q-toolbar>
+      <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+      <q-toolbar-title>标题</q-toolbar-title>
+      <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
+    </q-toolbar>
+    <q-tabs align="left">
+      <q-route-tab to="/page1" label="Page One" />
+      <q-route-tab to="/page2" label="Page Two" />
+      <q-route-tab to="/page3" label="Page Three" />
+    </q-tabs>
+  </q-header>
+</template>
+
+<script lang="ts" setup>
+import { useSettingStore } from 'stores/setting'
+
+const settingStore = useSettingStore()
+const toggleLeftDrawer = () => {
+  settingStore.toggleLeftDrawer()
+}
+const toggleRightDrawer = () => {
+  settingStore.toggleRightDrawer()
+}
+</script>

src/layouts/LeftDrawerLayout.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-drawer
+    show-if-above
+    v-model="settingStore.leftDrawerOpen"
+    side="left"
+    elevated
+  >
+    <!-- 左侧抽屉菜单 -->
+    左栏
+  </q-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useSettingStore } from 'stores/setting'
+
+const settingStore = useSettingStore()
+</script>

src/layouts/MainLayout.vue

@@ -1,60 +1,19 @@
 <template>
   <q-layout view="hHh lpR lff">
-    <q-header reveal elevated class="bg-primary text-white" height-hint="98">
+    <HeaderLayout />
-      <q-toolbar>
+    <TabsLayout />
-        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+    <LeftDrawerLayout />
-
+    <RightDrawerLayout />
-        <q-toolbar-title>
+    <ContainerLayout />
-          <!-- <q-avatar>
+    <FooterLayout />
-            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
-          </q-avatar> -->
-          标题
-        </q-toolbar-title>
-
-        <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
-      </q-toolbar>
-
-      <q-tabs align="left">
-        <q-route-tab to="/page1" label="Page One" />
-        <q-route-tab to="/page2" label="Page Two" />
-        <q-route-tab to="/page3" label="Page Three" />
-      </q-tabs>
-    </q-header>
-
-    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" elevated>
-      <!-- drawer content -->
-      左栏
-    </q-drawer>
-
-    <q-drawer show-if-above v-model="rightDrawerOpen" side="right" elevated>
-      <!-- drawer content -->
-      右栏
-    </q-drawer>
-
-    <q-page-container>
-      <router-view />
-    </q-page-container>
-
-    <q-footer elevated class="bg-grey-8 text-white">
-      <q-toolbar>
-        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
-        <q-toolbar-title>
-          <div>页脚</div>
-        </q-toolbar-title>
-        <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
-      </q-toolbar>
-    </q-footer>
   </q-layout>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import HeaderLayout from './HeaderLayout.vue'
-const leftDrawerOpen = ref(false)
+import TabsLayout from './TabsLayout.vue'
-const rightDrawerOpen = ref(false)
+import LeftDrawerLayout from './LeftDrawerLayout.vue'
-function toggleLeftDrawer() {
+import RightDrawerLayout from './RightDrawerLayout.vue'
-  leftDrawerOpen.value = !leftDrawerOpen.value
+import FooterLayout from './FooterLayout.vue'
-}
+import ContainerLayout from './ContainerLayout.vue'
-function toggleRightDrawer() {
-  rightDrawerOpen.value = !rightDrawerOpen.value
-}
 </script>

src/layouts/RightDrawerLayout.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-drawer
+    show-if-above
+    v-model="settingStore.rightDrawerOpen"
+    side="right"
+    elevated
+  >
+    <!-- 右侧抽屉内容 -->
+    右栏
+  </q-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useSettingStore } from 'stores/setting'
+
+const settingStore = useSettingStore()
+</script>

src/layouts/TabsLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <q-tabs align="left">
+    <q-route-tab to="/page1" label="Page One" />
+    <q-route-tab to="/page2" label="Page Two" />
+    <q-route-tab to="/page3" label="Page Three" />
+  </q-tabs>
+</template>
+
+<script lang="ts" setup>
+// 无额外逻辑
+</script>

src/stores/index.ts

@@ -1,7 +1,7 @@
 import { defineStore } from '#q-app/wrappers'
 import { createPinia } from 'pinia'
 import { useCounterStore } from './example-store'
-import { useSettingStore } from './setting-store' // 确保 setting-store 被导入
+import { useSettingStore } from './setting' // 确保 setting-store 被导入
 
 /*
  * When adding new properties to stores, you should also

src/stores/setting.ts

@@ -4,12 +4,12 @@ export const useSettingStore = defineStore('setting', {
   state: () => ({
     theme: 'light',
     language: 'en-US',
+    leftDrawerOpen: false,
+    rightDrawerOpen: false,
   }),
-
   getters: {
     isDarkTheme: (state) => state.theme === 'dark',
   },
-
   actions: {
     setTheme(theme: string) {
       this.theme = theme
@@ -17,6 +17,12 @@ export const useSettingStore = defineStore('setting', {
     setLanguage(language: string) {
       this.language = language
     },
+    toggleLeftDrawer() {
+      this.leftDrawerOpen = !this.leftDrawerOpen
+    },
+    toggleRightDrawer() {
+      this.rightDrawerOpen = !this.rightDrawerOpen
+    },
   },
 })