From 965f36cbf504e1a725261c36e04061c848c55045 Mon Sep 17 00:00:00 2001
From: SunWuyuan <sun@wuyuan.dev>
Date: Sat, 5 Jul 2025 09:00:38 +0800
Subject: [PATCH] Enhance settings page with responsive navigation drawer.
 Implement drawer state management based on device type, ensuring a better
 user experience on mobile devices. Update related methods and properties for
 improved functionality.

---
 src/pages/settings.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index ad67a0f..84365b2 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -2,17 +2,27 @@
   <div class="settings-page">
     <v-app-bar elevation="1">
       <template #prepend>
+
         <v-btn
           icon="mdi-arrow-left"
           variant="text"
           @click="$router.push('/')"
+        /> <v-btn
+          icon="mdi-menu"
+          variant="text"
+          @click="drawer = !drawer"
+          class="d-md-none"
         />
       </template>
       <v-app-bar-title class="text-h6">设置</v-app-bar-title>
     </v-app-bar>
 
     <v-container fluid>
-      <v-navigation-drawer>
+      <v-navigation-drawer
+        v-model="drawer"
+        :permanent="!isMobile"
+        :temporary="isMobile"
+      >
         <v-list>
           <v-list-item
             v-for="tab in settingsTabs"
@@ -391,6 +401,7 @@ export default {
           value: "about",
         },
       ],
+      drawer: false,
     };
   },
 
@@ -401,6 +412,12 @@ export default {
       },
       deep: true,
     },
+    isMobile: {
+      handler(newValue) {
+        this.drawer = !newValue;
+      },
+      immediate: true
+    },
     studentData: {
       handler(newData) {
         // 只检查是否有未保存的更改
@@ -420,6 +437,8 @@ export default {
     this.unwatchSettings = watchSettings(() => {
       this.loadAllSettings();
     });
+    // 初始化抽屉状态，在非移动设备上默认打开
+    this.drawer = !this.isMobile;
   },
 
   beforeUnmount() {