From 093e176cf5a8c9205782e81d210a269f82110b17 Mon Sep 17 00:00:00 2001
From: Lexcubia <lexcubia@gmail.com>
Date: Tue, 8 Apr 2025 09:03:24 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E7=BB=93=E6=9E=84=EF=BC=8C=E7=BB=86=E5=8C=96=E6=8B=86?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/ContainerLayout.vue             |  9 +++
 src/layouts/FooterLayout.vue                | 17 ++++++
 src/layouts/HeaderLayout.vue                | 26 ++++++++
 src/layouts/LeftDrawerLayout.vue            | 17 ++++++
 src/layouts/MainLayout.vue                  | 67 ++++-----------------
 src/layouts/RightDrawerLayout.vue           | 17 ++++++
 src/layouts/TabsLayout.vue                  | 11 ++++
 src/stores/index.ts                         |  2 +-
 src/stores/{setting-store.ts => setting.ts} | 10 ++-
 9 files changed, 119 insertions(+), 57 deletions(-)
 create mode 100644 src/layouts/ContainerLayout.vue
 create mode 100644 src/layouts/FooterLayout.vue
 create mode 100644 src/layouts/HeaderLayout.vue
 create mode 100644 src/layouts/LeftDrawerLayout.vue
 create mode 100644 src/layouts/RightDrawerLayout.vue
 create mode 100644 src/layouts/TabsLayout.vue
 rename src/stores/{setting-store.ts => setting.ts} (69%)

diff --git a/src/layouts/ContainerLayout.vue b/src/layouts/ContainerLayout.vue
new file mode 100644
index 0000000..ed300c9
--- /dev/null
+++ b/src/layouts/ContainerLayout.vue
@@ -0,0 +1,9 @@
+<template>
+  <q-page-container>
+    <router-view />
+  </q-page-container>
+</template>
+
+<script lang="ts" setup>
+// 无额外逻辑
+</script>
\ No newline at end of file
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
new file mode 100644
index 0000000..6b23f1c
--- /dev/null
+++ b/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>
diff --git a/src/layouts/HeaderLayout.vue b/src/layouts/HeaderLayout.vue
new file mode 100644
index 0000000..c59ba1d
--- /dev/null
+++ b/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>
diff --git a/src/layouts/LeftDrawerLayout.vue b/src/layouts/LeftDrawerLayout.vue
new file mode 100644
index 0000000..01f6010
--- /dev/null
+++ b/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>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 893ae83..f8db4fd 100644
--- a/src/layouts/MainLayout.vue
+++ b/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">
-      <q-toolbar>
-        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
-
-        <q-toolbar-title>
-          <!-- <q-avatar>
-            <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>
+    <HeaderLayout />
+    <TabsLayout />
+    <LeftDrawerLayout />
+    <RightDrawerLayout />
+    <ContainerLayout />
+    <FooterLayout />
   </q-layout>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-const leftDrawerOpen = ref(false)
-const rightDrawerOpen = ref(false)
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value
-}
-function toggleRightDrawer() {
-  rightDrawerOpen.value = !rightDrawerOpen.value
-}
-</script>
+import HeaderLayout from './HeaderLayout.vue'
+import TabsLayout from './TabsLayout.vue'
+import LeftDrawerLayout from './LeftDrawerLayout.vue'
+import RightDrawerLayout from './RightDrawerLayout.vue'
+import FooterLayout from './FooterLayout.vue'
+import ContainerLayout from './ContainerLayout.vue'
+</script>
\ No newline at end of file
diff --git a/src/layouts/RightDrawerLayout.vue b/src/layouts/RightDrawerLayout.vue
new file mode 100644
index 0000000..1680918
--- /dev/null
+++ b/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>
diff --git a/src/layouts/TabsLayout.vue b/src/layouts/TabsLayout.vue
new file mode 100644
index 0000000..b2e65d8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 0b72811..276e02c 100644
--- a/src/stores/index.ts
+++ b/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
diff --git a/src/stores/setting-store.ts b/src/stores/setting.ts
similarity index 69%
rename from src/stores/setting-store.ts
rename to src/stores/setting.ts
index de04424..84872c2 100644
--- a/src/stores/setting-store.ts
+++ b/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
+    },
   },
 })