1

src/App.vue

@@ -10,7 +10,17 @@
 </template>
 
 <script setup>
-  //
+import { onMounted } from 'vue';
+import { useTheme } from 'vuetify';
+import { getSetting } from '@/utils/settings';
+
+const theme = useTheme();
+
+onMounted(() => {
+  // 应用保存的主题设置
+  const savedTheme = getSetting('theme.mode');
+  theme.global.name.value = savedTheme;
+});
 </script>
 <style>
 

src/components/settings/cards/ThemeSettingsCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <settings-card title="主题设置" icon="mdi-palette">
+    <v-list>
+      <v-list-item>
+        <template #prepend>
+          <v-icon icon="mdi-theme-light-dark" class="mr-3" />
+        </template>
+        <v-list-item-title>主题模式</v-list-item-title>
+        <v-list-item-subtitle>选择明亮或暗黑主题</v-list-item-subtitle>
+        <template #append>
+          <v-btn-toggle
+            v-model="localTheme"
+            density="comfortable"
+            color="primary"
+          >
+            <v-btn value="light">
+              <v-icon icon="mdi-white-balance-sunny" class="mr-2" />
+              明亮
+            </v-btn>
+            <v-btn value="dark">
+              <v-icon icon="mdi-moon-waning-crescent" class="mr-2" />
+              暗黑
+            </v-btn>
+          </v-btn-toggle>
+        </template>
+      </v-list-item>
+    </v-list>
+  </settings-card>
+</template>
+
+<script>
+import SettingsCard from '@/components/SettingsCard.vue';
+import { getSetting, setSetting } from '@/utils/settings';
+import { useTheme } from 'vuetify';
+
+export default {
+  name: 'ThemeSettingsCard',
+  components: { SettingsCard },
+
+  data() {
+    return {
+      localTheme: getSetting('theme.mode')
+    };
+  },
+
+  watch: {
+    localTheme(newValue) {
+      setSetting('theme.mode', newValue);
+      this.updateTheme(newValue);
+    }
+  },
+
+  setup() {
+    const theme = useTheme();
+    return { theme };
+  },
+
+  methods: {
+    updateTheme(mode) {
+      this.theme.global.name.value = mode;
+    }
+  }
+};
+</script>

src/pages/settings.vue

@@ -37,6 +37,11 @@
           <display-settings-card @saved="onSettingsSaved" border/>
         </v-col>
 
+        <!-- 添加主题设置卡片 -->
+        <v-col cols="12" md="6">
+          <theme-settings-card border />
+        </v-col>
+
         <!-- 开发者选项卡片 -->
         <v-col :cols="12" :md="settings.developer.enabled ? 12 : 6">
           <settings-card
@@ -146,6 +151,7 @@ import EditSettingsCard from '@/components/settings/cards/EditSettingsCard.vue';
 import RefreshSettingsCard from '@/components/settings/cards/RefreshSettingsCard.vue';
 import DisplaySettingsCard from '@/components/settings/cards/DisplaySettingsCard.vue';
 import DataProviderSettingsCard from '@/components/settings/cards/DataProviderSettingsCard.vue';
+import ThemeSettingsCard from '@/components/settings/cards/ThemeSettingsCard.vue';
 import {
   getSetting,
   setSetting,
@@ -170,7 +176,8 @@ export default {
     SettingsCard,
     StudentListCard,
     AboutCard,
-    DataProviderSettingsCard
+    DataProviderSettingsCard,
+    ThemeSettingsCard
   },
   setup() {
     const { mobile } = useDisplay();

src/utils/settings.js

@@ -102,7 +102,7 @@ const settingsDefinitions = {
   "server.domain": {
     type: "string",
     default: "",
-    validate: value => {
+    validate: (value) => {
       // 如果不是服务器模式或值为空，直接通过
       if (!value) return true;
       // 验证URL格式
@@ -110,7 +110,7 @@ const settingsDefinitions = {
         new URL(value);
         return true;
       } catch (e) {
-        console.error('域名格式无效:', e);
+        console.error("域名格式无效:", e);
         return false;
       }
     },
@@ -222,6 +222,14 @@ const settingsDefinitions = {
     description: "是否保存消息历史记录",
     requireDeveloper: true,
   },
+
+  // 主题设置
+  "theme.mode": {
+    type: "string",
+    default: "dark",
+    validate: (value) => ["light", "dark"].includes(value),
+    description: "主题模式",
+  },
 };
 
 // 内存中缓存的设置值