diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index 54785df237..d0a4a57686 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 247 icons */
+/* Auto-generated MDI subset – 252 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -316,6 +316,10 @@
   content: "\F164B";
 }
 
+.mdi-database-import::before {
+  content: "\F095D";
+}
+
 .mdi-database-off::before {
   content: "\F1640";
 }
@@ -352,6 +356,10 @@
   content: "\F01DA";
 }
 
+.mdi-earth::before {
+  content: "\F01E7";
+}
+
 .mdi-emoticon::before {
   content: "\F0C68";
 }
@@ -652,6 +660,10 @@
   content: "\F0375";
 }
 
+.mdi-moon-waning-crescent::before {
+  content: "\F0F65";
+}
+
 .mdi-music-note-outline::before {
   content: "\F0F74";
 }
@@ -696,6 +708,10 @@
   content: "\F0601";
 }
 
+.mdi-palette::before {
+  content: "\F03D8";
+}
+
 .mdi-paperclip::before {
   content: "\F03E2";
 }
@@ -900,6 +916,10 @@
   content: "\F060D";
 }
 
+.mdi-sync::before {
+  content: "\F04E6";
+}
+
 .mdi-text::before {
   content: "\F09A8";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index b5c8cefd74..354f467b9e 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index 74e05e5454..a0a8293e45 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/components/chat/Chat.vue b/dashboard/src/components/chat/Chat.vue
index b24aeed044..15f93a1da0 100644
--- a/dashboard/src/components/chat/Chat.vue
+++ b/dashboard/src/components/chat/Chat.vue
@@ -267,7 +267,7 @@
                 }}</v-icon>
               </template>
               <v-list-item-title>{{
-                isDark ? tm("modes.lightMode") : tm("modes.darkMode")
+                isDark ? tm("modes.light") : tm("modes.dark")
               }}</v-list-item-title>
             </v-list-item>
           </div>
@@ -848,7 +848,7 @@ watch(transportMode, (mode) => {
   localStorage.setItem("chat.transportMode", mode);
 });
 
-const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
+const isDark = computed(() => customizer.isDarkTheme);
 const canSend = computed(
   () =>
     Boolean(draft.value.trim() || stagedFiles.value.length) && !sending.value,
@@ -1394,7 +1394,7 @@ async function stopCurrentSession() {
 }
 
 function toggleTheme() {
-  customizer.SET_UI_THEME(isDark.value ? "PurpleTheme" : "PurpleThemeDark");
+  customizer.TOGGLE_DARK_MODE();
 }
 
 function formatTime(value: string) {
diff --git a/dashboard/src/components/chat/ChatInput.vue b/dashboard/src/components/chat/ChatInput.vue
index 7f2117377e..37ed1d23ef 100644
--- a/dashboard/src/components/chat/ChatInput.vue
+++ b/dashboard/src/components/chat/ChatInput.vue
@@ -365,9 +365,8 @@ const emit = defineEmits<{
 }>();
 
 const { tm } = useModuleI18n("features/chat");
-const isDark = computed(
-  () => useCustomizerStore().uiTheme === "PurpleThemeDark",
-);
+const customizer = useCustomizerStore();
+const isDark = computed(() => customizer.isDarkTheme);
 
 const inputField = ref<HTMLTextAreaElement | null>(null);
 const imageInputRef = ref<HTMLInputElement | null>(null);
diff --git a/dashboard/src/components/chat/LiveMode.vue b/dashboard/src/components/chat/LiveMode.vue
index 2740459d96..01d0d23f6f 100644
--- a/dashboard/src/components/chat/LiveMode.vue
+++ b/dashboard/src/components/chat/LiveMode.vue
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onBeforeUnmount, watch } from 'vue';
-import { useTheme } from 'vuetify';
+import { useCustomizerStore } from '@/stores/customizer';
 import { useVADRecording } from '@/composables/useVADRecording';
 import SiriOrb from './LiveOrb.vue';
 
@@ -62,8 +62,8 @@ const emit = defineEmits<{
     'close': [];
 }>();
 
-const theme = useTheme();
-const isDark = computed(() => theme.global.current.value.dark);
+const customizer = useCustomizerStore();
+const isDark = computed(() => customizer.isDarkTheme);
 
 // 使用 VAD Recording composable
 const vadRecording = useVADRecording();
diff --git a/dashboard/src/components/chat/StandaloneChat.vue b/dashboard/src/components/chat/StandaloneChat.vue
index 22787248cf..f8aa257e0f 100644
--- a/dashboard/src/components/chat/StandaloneChat.vue
+++ b/dashboard/src/components/chat/StandaloneChat.vue
@@ -217,7 +217,7 @@ const messagesContainer = ref<HTMLElement | null>(null);
 const inputRef = ref<InstanceType<typeof ChatInput> | null>(null);
 const imagePreview = reactive({ visible: false, url: "" });
 
-const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
+const isDark = computed(() => customizer.isDarkTheme);
 const customMarkdownTags = ["ref"];
 
 const {
diff --git a/dashboard/src/components/shared/ReadmeDialog.vue b/dashboard/src/components/shared/ReadmeDialog.vue
index 63fb8359d5..87ac08b0a1 100644
--- a/dashboard/src/components/shared/ReadmeDialog.vue
+++ b/dashboard/src/components/shared/ReadmeDialog.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, computed, onUnmounted } from "vue";
-import { useTheme } from "vuetify";
+import { useCustomizerStore } from "@/stores/customizer";
 import MarkdownIt from "markdown-it";
 import axios from "axios";
 import DOMPurify from "dompurify";
@@ -46,7 +46,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:show"]);
 const { t, locale } = useI18n();
-const theme = useTheme();
 
 const content = ref(null);
 const error = ref(null);
@@ -57,7 +56,8 @@ const lastRequestId = ref(0);
 const lastRenderId = ref(0);
 const scrollContainer = ref(null);
 const renderedHtml = ref("");
-const isDark = computed(() => theme.global.current.value.dark);
+const customizer = useCustomizerStore();
+const isDark = computed(() => customizer.isDarkTheme);
 
 const MARKDOWN_SANITIZE_OPTIONS = {
   ALLOWED_TAGS: [
diff --git a/dashboard/src/components/shared/ThemeCustomizer.vue b/dashboard/src/components/shared/ThemeCustomizer.vue
new file mode 100644
index 0000000000..451027d75a
--- /dev/null
+++ b/dashboard/src/components/shared/ThemeCustomizer.vue
@@ -0,0 +1,178 @@
+<template>
+  <!-- Row 1: Preset selector + theme mode -->
+  <div class="d-flex flex-wrap align-center ga-4 mb-4 ml-3">
+    <v-select v-model="selectedThemePreset" :items="presetOptions" :label="tm('theme.customize.preset')" hide-details
+      variant="outlined" density="compact" style="min-width: 200px; max-width: 280px"
+      @update:model-value="applyThemePreset" />
+    <v-btn-toggle v-model="themeMode" mandatory density="compact" color="primary">
+      <v-btn value="light" size="small">
+        <v-icon class="mr-1" size="18">mdi-white-balance-sunny</v-icon>
+        {{ tm("theme.customize.light") }}
+      </v-btn>
+      <v-btn value="dark" size="small">
+        <v-icon class="mr-1" size="18">mdi-moon-waning-crescent</v-icon>
+        {{ tm("theme.customize.dark") }}
+      </v-btn>
+      <v-btn value="auto" size="small">
+        <v-icon class="mr-1" size="18">mdi-sync</v-icon>
+        {{ tm("theme.customize.auto") }}
+      </v-btn>
+    </v-btn-toggle>
+    <v-tooltip location="top">
+      <template #activator="{ props }">
+        <v-icon v-bind="props" size="16" color="primary" class="ml-1">mdi-help-circle-outline</v-icon>
+      </template>
+      <span>{{ tm("theme.customize.autoSwitchDesc") }}</span>
+    </v-tooltip>
+  </div>
+
+  <!-- Row 2: Color pickers + reset -->
+  <v-card variant="outlined" class="pa-3">
+    <div class="text-body-2 text-medium-emphasis mb-3">
+      {{ tm("theme.customize.colors") }}
+    </div>
+    <div class="d-flex flex-wrap align-center ga-4">
+      <div class="d-flex align-center ga-3">
+        <v-text-field v-model="primaryColor" type="color" :label="tm('theme.customize.primary')" hide-details
+          variant="outlined" density="compact" style="width: 140px" />
+        <div class="color-preview" :style="{ backgroundColor: primaryColor }" />
+      </div>
+      <div class="d-flex align-center ga-3">
+        <v-text-field v-model="secondaryColor" type="color" :label="tm('theme.customize.secondary')" hide-details
+          variant="outlined" density="compact" style="width: 140px" />
+        <div class="color-preview" :style="{ backgroundColor: secondaryColor }" />
+      </div>
+      <v-btn size="small" variant="tonal" color="primary" @click="resetThemeColors">
+        <v-icon class="mr-1" size="16">mdi-restore</v-icon>
+        {{ tm("theme.customize.reset") }}
+      </v-btn>
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useModuleI18n } from "@/i18n/composables";
+import { useTheme } from "vuetify";
+import { PurpleTheme } from "@/theme/LightTheme";
+import {
+  LIGHT_THEME_NAME,
+  DARK_THEME_NAME,
+  themePresets,
+} from "@/theme/constants";
+import type { ThemeMode } from "@/types/theme";
+import { useToastStore } from "@/stores/toast";
+import { useCustomizerStore } from "@/stores/customizer";
+
+
+const { tm } = useModuleI18n("features/settings");
+const toastStore = useToastStore();
+const theme = useTheme();
+const customizer = useCustomizerStore();
+
+// Theme mode toggle (light/dark/auto)
+const themeMode = computed({
+  get() {
+    if (customizer.autoSwitchTheme) return "auto";
+    return customizer.isDarkTheme ? "dark" : "light";
+  },
+  set(mode: ThemeMode) {
+    if (mode === "auto") {
+      customizer.SET_AUTO_SYNC(true);
+      customizer.APPLY_SYSTEM_THEME();
+      return;
+    }
+
+    customizer.SET_AUTO_SYNC(false);
+    const newTheme = mode === "dark" ? DARK_THEME_NAME : LIGHT_THEME_NAME;
+    customizer.SET_UI_THEME(newTheme);
+  },
+});
+
+const getStoredColor = (key: string, fallback: string) => {
+  const stored =
+    typeof window !== "undefined" ? localStorage.getItem(key) : null;
+  return stored || fallback;
+};
+
+const primaryColor = ref(
+  getStoredColor("themePrimary", PurpleTheme.colors.primary),
+);
+const secondaryColor = ref(
+  getStoredColor("themeSecondary", PurpleTheme.colors.secondary),
+);
+
+// Get stored preset or default to blue-business name
+const selectedThemePreset = ref(
+  localStorage.getItem("themePreset") || themePresets[0].name,
+);
+
+// Simple array for dropdown display
+const presetOptions = themePresets.map((p) => p.name);
+
+const applyThemePreset = (presetName: string) => {
+  const preset = themePresets.find((p) => p.name === presetName);
+  if (!preset) return;
+
+  // Store the preset selection (store by name for display consistency)
+  localStorage.setItem("themePreset", presetName);
+  selectedThemePreset.value = presetName;
+
+  // Update primary and secondary colors
+  primaryColor.value = preset.primary;
+  secondaryColor.value = preset.secondary;
+  localStorage.setItem("themePrimary", preset.primary);
+  localStorage.setItem("themeSecondary", preset.secondary);
+
+  // Apply to themes
+  applyThemeColors(preset.primary, preset.secondary);
+
+  toastStore.add({
+    message: tm("theme.customize.presetApplied") || "主题已应用",
+    color: "success",
+  });
+};
+
+const resolveThemes = () => {
+  if (theme?.themes?.value) return theme.themes.value as Record<string, any>;
+  return null;
+};
+
+const applyThemeColors = (primary: string, secondary: string) => {
+  const themes = resolveThemes();
+  if (!themes) return;
+  [LIGHT_THEME_NAME, DARK_THEME_NAME].forEach((name) => {
+    const themeDef = themes[name];
+    if (!themeDef?.colors) return;
+    if (primary) themeDef.colors.primary = primary;
+    if (secondary) themeDef.colors.secondary = secondary;
+    if (primary && themeDef.colors.darkprimary)
+      themeDef.colors.darkprimary = primary;
+    if (secondary && themeDef.colors.darksecondary)
+      themeDef.colors.darksecondary = secondary;
+  });
+};
+
+applyThemeColors(primaryColor.value, secondaryColor.value);
+
+watch(primaryColor, (value) => {
+  if (!value) return;
+  localStorage.setItem("themePrimary", value);
+  applyThemeColors(value, secondaryColor.value);
+});
+
+watch(secondaryColor, (value) => {
+  if (!value) return;
+  localStorage.setItem("themeSecondary", value);
+  applyThemeColors(primaryColor.value, value);
+});
+
+const resetThemeColors = () => {
+  primaryColor.value = PurpleTheme.colors.primary;
+  secondaryColor.value = PurpleTheme.colors.secondary;
+  localStorage.removeItem("themePrimary");
+  localStorage.removeItem("themeSecondary");
+  applyThemeColors(primaryColor.value, secondaryColor.value);
+};
+
+</script>
diff --git a/dashboard/src/i18n/locales/en-US/features/auth.json b/dashboard/src/i18n/locales/en-US/features/auth.json
index 5c44558a03..f51384229c 100644
--- a/dashboard/src/i18n/locales/en-US/features/auth.json
+++ b/dashboard/src/i18n/locales/en-US/features/auth.json
@@ -8,7 +8,7 @@
     "subtitle": "Welcome"
   },
   "theme": {
-    "switchToDark": "Switch to Dark Theme",
-    "switchToLight": "Switch to Light Theme"
+    "light": "Light Mode",
+    "dark": "Dark Mode"
   }
 } 
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/en-US/features/chat.json b/dashboard/src/i18n/locales/en-US/features/chat.json
index 4b87cc8abc..19a27a3497 100644
--- a/dashboard/src/i18n/locales/en-US/features/chat.json
+++ b/dashboard/src/i18n/locales/en-US/features/chat.json
@@ -73,8 +73,8 @@
     "confirmDelete": "Are you sure you want to delete \"{name}\"? This action cannot be undone."
   },
   "modes": {
-    "darkMode": "Switch to Dark Mode",
-    "lightMode": "Switch to Light Mode"
+    "light": "Light Mode",
+    "dark": "Dark Mode"
   },
   "shortcuts": {
     "help": "Get Help",
diff --git a/dashboard/src/i18n/locales/en-US/features/settings.json b/dashboard/src/i18n/locales/en-US/features/settings.json
index b497659ee4..0e24547168 100644
--- a/dashboard/src/i18n/locales/en-US/features/settings.json
+++ b/dashboard/src/i18n/locales/en-US/features/settings.json
@@ -1,6 +1,24 @@
 {
   "network": {
     "title": "Network",
+    "proxy": {
+      "title": "Proxy",
+      "subtitle": "Configure proxy for network requests"
+    },
+    "server": {
+      "title": "Server Address",
+      "subtitle": "Configure backend API URL",
+      "label": "API Base URL",
+      "placeholder": "e.g. http://localhost:6185",
+      "hint": "Empty for default (relative path)",
+      "save": "Save & Reload",
+      "presets": "Presets",
+      "preset": {
+        "add": "Add Preset",
+        "name": "Name",
+        "url": "URL"
+      }
+    },
     "githubProxy": {
       "title": "GitHub Proxy Address",
       "subtitle": "Set the GitHub proxy address used when downloading plugins or updating AstrBot. This is effective in mainland China's network environment. Can be customized, input takes effect in real time. All addresses do not guarantee stability. If errors occur when updating plugins/projects, please first check if the proxy address is working properly.",
@@ -21,11 +39,23 @@
     "subtitle": "Customize theme primary and secondary colors. Changes apply immediately and are stored locally in your browser.",
     "customize": {
       "title": "Theme Colors",
+      "colors": "Custom Colors",
+      "preset": "Color Scheme",
       "primary": "Primary Color",
       "secondary": "Secondary Color",
-      "reset": "Reset to Default"
+      "reset": "Reset to Default",
+      "presetApplied": "Theme applied",
+      "light": "Light Mode",
+      "dark": "Dark Mode",
+      "auto": "System Mode",
+      "autoSwitchDesc": "Theme will automatically switch based on your browser's appearance setting when enable system mode"
     }
   },
+  "reset": {
+    "title": "Reset to Default",
+    "subtitle": "Reset theme colors to default settings",
+    "button": "Reset"
+  },
   "system": {
     "title": "System",
     "restart": {
@@ -33,6 +63,11 @@
       "subtitle": "Restart AstrBot",
       "button": "Restart"
     },
+    "logout": {
+      "title": "Log Out",
+      "subtitle": "Log out of the current account",
+      "button": "Log Out"
+    },
     "migration": {
       "title": "Data Migration to v4.0.0",
       "subtitle": "If you encounter data compatibility issues, you can manually start the database migration assistant",
@@ -89,6 +124,10 @@
     }
   },
   "backup": {
+    "title": "Backup",
+    "subtitle": "Manage data backups",
+    "operate": "Backup Operations",
+    "open": "Open Backup Manager",
     "dialog": {
       "title": "Backup Manager"
     },
@@ -169,6 +208,14 @@
     "subtitle": "Create API keys for external developers to call open HTTP APIs.",
     "name": "Key Name",
     "expiresInDays": "Expiration",
+    "expiry": {
+      "7days": "7 days",
+      "30days": "30 days",
+      "90days": "90 days",
+      "180days": "180 days",
+      "365days": "365 days",
+      "permanent": "Permanent"
+    },
     "expiryOptions": {
       "day1": "1 day",
       "day7": "7 days",
diff --git a/dashboard/src/i18n/locales/ru-RU/features/auth.json b/dashboard/src/i18n/locales/ru-RU/features/auth.json
index d6ba05dc3b..2363943b3d 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/auth.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/auth.json
@@ -8,7 +8,7 @@
         "subtitle": "Добро пожаловать"
     },
     "theme": {
-        "switchToDark": "Перейти на темную тему",
-        "switchToLight": "Перейти на светлую тему"
+        "light": "Светла тема",
+        "dark": "Темная тема"
     }
 }
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/ru-RU/features/chat.json b/dashboard/src/i18n/locales/ru-RU/features/chat.json
index cf574a1a0e..638b7e79c6 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/chat.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/chat.json
@@ -73,8 +73,8 @@
     "confirmDelete": "Вы уверены, что хотите удалить «{name}»? Это действие необратимо."
   },
   "modes": {
-    "darkMode": "Темная тема",
-    "lightMode": "Светлая тема"
+    "light": "Светлая тема",
+    "dark": "Темная тема"
   },
   "shortcuts": {
     "help": "Справка",
diff --git a/dashboard/src/i18n/locales/ru-RU/features/settings.json b/dashboard/src/i18n/locales/ru-RU/features/settings.json
index d1100435f4..5aa686fad0 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/settings.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/settings.json
@@ -1,4 +1,4 @@
-{
+{
     "network": {
         "title": "Сеть",
         "githubProxy": {
@@ -21,9 +21,14 @@
         "subtitle": "Настройка основных и дополнительных цветов. Изменения вступают в силу немедленно и сохраняются в браузере.",
         "customize": {
             "title": "Цвета темы",
+            "preset": "Цветовая схема",
             "primary": "Основной",
             "secondary": "Дополнительный",
-            "reset": "Сбросить"
+            "reset": "Сбросить",
+            "presetApplied": "Тема применена",
+            "light": "Светла тема",
+            "dark": "Темная тема",
+            "auto": "Автоматическая тема"
         }
     },
     "system": {
diff --git a/dashboard/src/i18n/locales/zh-CN/features/auth.json b/dashboard/src/i18n/locales/zh-CN/features/auth.json
index d6da999430..e5390d35ff 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/auth.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/auth.json
@@ -8,7 +8,7 @@
     "subtitle": "欢迎使用"
   },
   "theme": {
-    "switchToDark": "切换到深色主题",
-    "switchToLight": "切换到浅色主题"
+    "light": "浅色主题",
+    "dark": "深色主题"
   }
 } 
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/zh-CN/features/chat.json b/dashboard/src/i18n/locales/zh-CN/features/chat.json
index 0bb669382a..683735f031 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/chat.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/chat.json
@@ -73,8 +73,8 @@
     "confirmDelete": "确定要删除“{name}”吗？此操作无法撤销。"
   },
   "modes": {
-    "darkMode": "切换到夜间模式",
-    "lightMode": "切换到日间模式"
+    "light": "浅色模式",
+    "dark": "深色模式"
   },
   "shortcuts": {
     "help": "获取帮助",
diff --git a/dashboard/src/i18n/locales/zh-CN/features/settings.json b/dashboard/src/i18n/locales/zh-CN/features/settings.json
index 092b4a5d9b..59f10f7ac2 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/settings.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/settings.json
@@ -1,6 +1,24 @@
 {
   "network": {
     "title": "网络",
+    "proxy": {
+      "title": "代理设置",
+      "subtitle": "配置网络请求代理"
+    },
+    "server": {
+      "title": "服务器地址",
+      "subtitle": "配置后端 API 地址",
+      "label": "API 基础地址",
+      "placeholder": "例如：http://localhost:6185",
+      "hint": "留空以使用默认设置（相对路径）",
+      "save": "保存并刷新",
+      "presets": "预设列表",
+      "preset": {
+        "add": "添加预设",
+        "name": "名称",
+        "url": "URL"
+      }
+    },
     "githubProxy": {
       "title": "GitHub 加速地址",
       "subtitle": "设置下载插件或者更新 AstrBot 时所用的 GitHub 加速地址。这在中国大陆的网络环境有效。可以自定义，输入结果实时生效。所有地址均不保证稳定性，如果在更新插件/项目时出现报错，请首先检查加速地址是否能正常使用。",
@@ -21,11 +39,23 @@
     "subtitle": "自定义主题主色与辅助色。修改后立即生效，并保存在浏览器本地。",
     "customize": {
       "title": "主题颜色",
+      "colors": "自定义颜色",
+      "preset": "配色方案",
       "primary": "主色",
       "secondary": "辅助色",
-      "reset": "恢复默认"
+      "reset": "恢复默认",
+      "presetApplied": "主题已应用",
+      "light": "浅色",
+      "dark": "深色",
+      "auto": "系统",
+      "autoSwitchDesc": "应用系统主题后，主题将根据您的浏览器外观设置自动切换"
     }
   },
+  "reset": {
+    "title": "恢复默认",
+    "subtitle": "恢复主题颜色为默认设置",
+    "button": "恢复默认"
+  },
   "system": {
     "title": "系统",
     "restart": {
@@ -33,6 +63,11 @@
       "subtitle": "重启 AstrBot",
       "button": "重启"
     },
+    "logout": {
+      "title": "退出登录",
+      "subtitle": "退出当前账号，回到登录界面",
+      "button": "退出登录"
+    },
     "migration": {
       "title": "数据迁移到 v4.0.0 格式",
       "subtitle": "如果您遇到数据兼容性问题，可以手动启动数据库迁移助手",
@@ -89,6 +124,10 @@
     }
   },
   "backup": {
+    "title": "备份",
+    "subtitle": "管理数据备份",
+    "operate": "备份操作",
+    "open": "打开备份管理",
     "dialog": {
       "title": "备份管理"
     },
@@ -169,6 +208,14 @@
     "subtitle": "为外部开发者创建 API Key，用于调用开放 HTTP API。",
     "name": "Key 名称",
     "expiresInDays": "有效期",
+    "expiry": {
+      "7days": "7 天",
+      "30days": "30 天",
+      "90days": "90 天",
+      "180days": "180 天",
+      "365days": "365 天",
+      "permanent": "永久"
+    },
     "expiryOptions": {
       "day1": "1 天",
       "day7": "7 天",
diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
index bfd501ccc3..438b15e3fe 100644
--- a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
+++ b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -12,7 +12,6 @@ import 'katex/dist/katex.min.css';
 import { useI18n } from '@/i18n/composables';
 import { router } from '@/router';
 import { useRoute } from 'vue-router';
-import { useTheme } from 'vuetify';
 import StyledMenu from '@/components/shared/StyledMenu.vue';
 import { useLanguageSwitcher } from '@/i18n/composables';
 import type { Locale } from '@/i18n/types';
@@ -23,7 +22,6 @@ enableKatex();
 enableMermaid();
 
 const customizer = useCustomizerStore();
-const theme = useTheme();
 const { t } = useI18n();
 const route = useRoute();
 const LAST_BOT_ROUTE_KEY = 'astrbot:last_bot_route';
@@ -369,12 +367,35 @@ function updateDashboard() {
     });
 }
 
-function toggleDarkMode() {
-  const newTheme = customizer.uiTheme === 'PurpleThemeDark' ? 'PurpleTheme' : 'PurpleThemeDark';
-  customizer.SET_UI_THEME(newTheme);
-  theme.global.name.value = newTheme;
+function toggleTheme() {
+  customizer.TOGGLE_DARK_MODE();
 }
 
+function autoSwitchTheme() {
+  // 根据浏览器主题同步页面主题
+  customizer.APPLY_SYSTEM_THEME();
+}
+
+function autoSwitchThemeListener(e: MediaQueryListEvent) {
+  if (customizer.autoSwitchTheme) {
+    autoSwitchTheme();
+  }
+}
+
+// 通过 watch 变量来添加和移除监听器
+watch(() => customizer.autoSwitchTheme, (isAuto) => {
+  if (typeof window === 'undefined') return;
+
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  if (isAuto) {
+    autoSwitchTheme();
+    mediaQuery.addEventListener('change', autoSwitchThemeListener);
+  } else {
+    mediaQuery.removeEventListener('change', autoSwitchThemeListener);
+  }
+}, { immediate: true });
+
 function openReleaseNotesDialog(body: string, tag: string) {
   selectedReleaseNotes.value = body;
   selectedReleaseTag.value = tag;
@@ -680,17 +701,17 @@ onMounted(async () => {
 
       <!-- 主题切换 -->
       <v-list-item
-        @click="toggleDarkMode()"
+        @click="toggleTheme()"
         class="styled-menu-item"
         rounded="md"
       >
         <template v-slot:prepend>
           <v-icon>
-            {{ useCustomizerStore().uiTheme === 'PurpleThemeDark' ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}
+            {{ customizer.isDarkTheme ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}
           </v-icon>
         </template>
         <v-list-item-title>
-          {{ useCustomizerStore().uiTheme === 'PurpleThemeDark' ? t('core.header.buttons.theme.light') : t('core.header.buttons.theme.dark') }}
+          {{ customizer.isDarkTheme ? t('core.header.buttons.theme.light') : t('core.header.buttons.theme.dark') }}
         </v-list-item-title>
       </v-list-item>
 
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index e2636d211a..2266a690d0 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, shallowRef, computed, onMounted, onUnmounted, watch } from 'vue';
-import { useTheme } from 'vuetify';
-import { useCustomizerStore } from '../../../stores/customizer';
+import { useCustomizerStore } from '@/stores/customizer';
 import { useI18n } from '@/i18n/composables';
 import sidebarItems from './sidebarItem';
 import NavItem from './NavItem.vue';
@@ -11,7 +10,6 @@ import ChangelogDialog from '@/components/shared/ChangelogDialog.vue';
 const { t, locale } = useI18n();
 
 const customizer = useCustomizerStore();
-const theme = useTheme();
 
 function collectGroupValues(items, values = new Set()) {
   items.forEach((item) => {
@@ -86,7 +84,7 @@ const minSidebarWidth = 200;
 const maxSidebarWidth = 300;
 const isResizing = ref(false);
 
-const isDark = computed(() => customizer.uiTheme === 'PurpleThemeDark');
+const isDark = computed(() => customizer.isDarkTheme);
 const themeColors = computed(() => theme.current.value.colors);
 const iframeBackground = computed(() => isDark.value ? themeColors.value.surface || 'white' : 'white');
 const dragHeaderBackground = computed(() => isDark.value ? themeColors.value.mcpCardBg || themeColors.value.surface || 'white' : '#f0f0f0');
diff --git a/dashboard/src/stores/customizer.ts b/dashboard/src/stores/customizer.ts
index 82d46ce505..ea0403e3ea 100644
--- a/dashboard/src/stores/customizer.ts
+++ b/dashboard/src/stores/customizer.ts
@@ -1,5 +1,7 @@
-import { defineStore } from 'pinia';
-import config from '@/config';
+import { defineStore } from "pinia";
+import config from "@/config";
+import { LIGHT_THEME_NAME, DARK_THEME_NAME } from "@/theme/constants";
+import vuetify from "@/plugins/vuetify";
 
 export const useCustomizerStore = defineStore("customizer", {
   state: () => ({
@@ -9,10 +11,14 @@ export const useCustomizerStore = defineStore("customizer", {
     fontTheme: "Poppins",
     uiTheme: config.uiTheme,
     inputBg: config.inputBg,
-    chatSidebarOpen: false // chat mode mobile sidebar state
+    viewMode: (localStorage.getItem("viewMode") as "bot" | "chat") || "bot", // 'bot' 或 'chat'
+    chatSidebarOpen: false, // chat mode mobile sidebar state
+    autoSwitchTheme: localStorage.getItem("autoSwitchTheme") === "true", // 自动同步主题
   }),
 
-  getters: {},
+  getters: {
+    isDarkTheme: (state) => state.uiTheme === DARK_THEME_NAME,
+  },
   actions: {
     SET_SIDEBAR_DRAWER() {
       this.Sidebar_drawer = !this.Sidebar_drawer;
@@ -26,13 +32,40 @@ export const useCustomizerStore = defineStore("customizer", {
     SET_UI_THEME(payload: string) {
       this.uiTheme = payload;
       localStorage.setItem("uiTheme", payload);
-    },
 
+      if (typeof (vuetify.theme as any).change === "function") {
+        (vuetify.theme as any).change(payload);
+      } else if (vuetify.theme?.global) {
+        vuetify.theme.global.name.value = payload;
+      }
+    },
+    SET_VIEW_MODE(payload: "bot" | "chat") {
+      this.viewMode = payload;
+      localStorage.setItem("viewMode", payload);
+    },
+    SET_AUTO_SYNC(payload: boolean) {
+      this.autoSwitchTheme = payload;
+      localStorage.setItem("autoSwitchTheme", String(payload));
+    },
+    // 手动切换主题（同时关闭自动同步）
+    TOGGLE_DARK_MODE() {
+      this.SET_AUTO_SYNC(false);
+      const newTheme = this.isDarkTheme ? LIGHT_THEME_NAME : DARK_THEME_NAME;
+      this.SET_UI_THEME(newTheme);
+    },
+    // 应用系统主题（用于自动同步）
+    APPLY_SYSTEM_THEME() {
+      if (typeof window === "undefined") return;
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      this.SET_UI_THEME(prefersDark ? DARK_THEME_NAME : LIGHT_THEME_NAME);
+    },
     TOGGLE_CHAT_SIDEBAR() {
       this.chatSidebarOpen = !this.chatSidebarOpen;
     },
     SET_CHAT_SIDEBAR(payload: boolean) {
       this.chatSidebarOpen = payload;
     },
-  }
+  },
 });
diff --git a/dashboard/src/theme/DarkTheme.ts b/dashboard/src/theme/DarkTheme.ts
index d1cedf4b51..8ceee8a7f8 100644
--- a/dashboard/src/theme/DarkTheme.ts
+++ b/dashboard/src/theme/DarkTheme.ts
@@ -1,4 +1,4 @@
-import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
+import type { ThemeTypes } from '@/types/theme';
 
 const PurpleThemeDark: ThemeTypes = {
   name: 'PurpleThemeDark',
diff --git a/dashboard/src/theme/LightTheme.ts b/dashboard/src/theme/LightTheme.ts
index b88f05c28c..30486e13e8 100644
--- a/dashboard/src/theme/LightTheme.ts
+++ b/dashboard/src/theme/LightTheme.ts
@@ -1,4 +1,4 @@
-import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
+import type { ThemeTypes } from '@/types/theme';
 
 const PurpleTheme: ThemeTypes = {
   name: 'PurpleTheme',
diff --git a/dashboard/src/theme/constants.ts b/dashboard/src/theme/constants.ts
new file mode 100644
index 0000000000..a59eb26106
--- /dev/null
+++ b/dashboard/src/theme/constants.ts
@@ -0,0 +1,56 @@
+import type { ThemePreset } from "@/types/theme";
+
+export const LIGHT_THEME_NAME = "PurpleTheme";
+export const DARK_THEME_NAME = "PurpleThemeDark";
+
+// Theme presets based on MD3 color system
+export const themePresets: ThemePreset[] = [
+  {
+    id: "blue-business",
+    name: "活力商务蓝",
+    nameEn: "Business Blue",
+    primary: "#005FB0",
+    secondary: "#565E71",
+    tertiary: "#006B5B",
+  },
+  {
+    id: "purple-default",
+    name: "优雅紫",
+    nameEn: "Elegant Purple",
+    primary: "#6750A4",
+    secondary: "#625B71",
+    tertiary: "#7D5260",
+  },
+  {
+    id: "teal-fresh",
+    name: "自然清新绿",
+    nameEn: "Nature Green",
+    primary: "#386A20",
+    secondary: "#55624C",
+    tertiary: "#19686A",
+  },
+  {
+    id: "orange-warm",
+    name: "温暖橙棕",
+    nameEn: "Warm Orange",
+    primary: "#9C4323",
+    secondary: "#77574E",
+    tertiary: "#6C5D2F",
+  },
+  {
+    id: "ocean-breeze",
+    name: "海洋清风",
+    nameEn: "Ocean Breeze",
+    primary: "#0077B6",
+    secondary: "#4A5568",
+    tertiary: "#00B4D8",
+  },
+  {
+    id: "rose-romantic",
+    name: "浪漫玫瑰",
+    nameEn: "Romantic Rose",
+    primary: "#BE185D",
+    secondary: "#9F1239",
+    tertiary: "#DB2777",
+  },
+];
diff --git a/dashboard/src/types/api.ts b/dashboard/src/types/api.ts
new file mode 100644
index 0000000000..efa99e99e7
--- /dev/null
+++ b/dashboard/src/types/api.ts
@@ -0,0 +1,37 @@
+// API Key related types
+export interface ApiKey {
+  key_id: string;
+  name: string;
+  key_prefix: string;
+  scopes: string[];
+  is_revoked: boolean;
+  is_expired: boolean;
+  last_used_at: string | null;
+  created_at: string;
+  expires_at: string | null;
+}
+
+export type ApiKeyExpiresDays = 1 | 7 | 30 | 90 | "permanent";
+
+export interface ApiKeyCreatePayload {
+  name: string;
+  scopes: string[];
+  expires_in_days?: number;
+}
+
+export interface ApiKeyListResponse {
+  status: "ok" | "error";
+  data: ApiKey[];
+  message?: string;
+}
+
+export interface ApiKeyCreateResponse {
+  status: "ok" | "error";
+  data?: ApiKey & { api_key: string }; // Include the full API key in the response
+  message?: string;
+}
+
+export interface ApiKeyActionResponse {
+  status: "ok" | "error";
+  message?: string;
+}
diff --git a/dashboard/src/types/themeTypes/ThemeType.ts b/dashboard/src/types/theme.ts
similarity index 79%
rename from dashboard/src/types/themeTypes/ThemeType.ts
rename to dashboard/src/types/theme.ts
index 8d27600443..0dc2092fd9 100644
--- a/dashboard/src/types/themeTypes/ThemeType.ts
+++ b/dashboard/src/types/theme.ts
@@ -1,10 +1,21 @@
+export type ThemeMode = "light" | "dark" | "auto";
+
+export interface ThemePreset {
+  id: string;
+  name: string;
+  nameEn: string;
+  primary: string;
+  secondary: string;
+  tertiary: string;
+}
+
 export type ThemeTypes = {
   name: string;
   dark: boolean;
   variables?: object;
   colors: {
-    primary?: string;
-    secondary?: string;
+    primary: string;
+    secondary: string;
     info?: string;
     success?: string;
     accent?: string;
diff --git a/dashboard/src/views/ConversationPage.vue b/dashboard/src/views/ConversationPage.vue
index 95a7c90e8a..8b36cfcc81 100644
--- a/dashboard/src/views/ConversationPage.vue
+++ b/dashboard/src/views/ConversationPage.vue
@@ -248,7 +248,7 @@
                         </div>
 
                         <!-- 消息列表组件 -->
-                        <MessageList v-else :messages="formattedMessages" :isDark="isDark" />
+                        <MessageList v-else :messages="formattedMessages" :isDark="customizerStore.isDarkTheme" />
                     </div>
                 </v-card-text>
 
@@ -530,12 +530,6 @@ export default {
             };
         },
 
-        // 检测是否为暗色模式
-        isDark() {
-            console.log('isDark', this.customizerStore.uiTheme);
-            return this.customizerStore.uiTheme === 'PurpleThemeDark';
-        },
-
         // 将对话历史转换为 MessageList 组件期望的格式
         formattedMessages() {
             return this.conversationHistory.map(msg => {
diff --git a/dashboard/src/views/CronJobPage.vue b/dashboard/src/views/CronJobPage.vue
index dbc8f410e7..978959b144 100644
--- a/dashboard/src/views/CronJobPage.vue
+++ b/dashboard/src/views/CronJobPage.vue
@@ -232,13 +232,13 @@
 <script setup lang="ts">
 import axios from 'axios'
 import { computed, onMounted, ref } from 'vue'
-import { useTheme } from 'vuetify'
+import { useCustomizerStore } from '@/stores/customizer'
 import { useModuleI18n } from '@/i18n/composables'
 
 const { tm } = useModuleI18n('features/cron')
-const theme = useTheme()
+const customizerStore = useCustomizerStore()
 
-const isDark = computed(() => theme.global.current.value.dark)
+const isDark = computed(() => customizerStore.isDarkTheme)
 const loading = ref(false)
 const jobs = ref<any[]>([])
 const proactivePlatforms = ref<{ id: string; name: string; display_name?: string }[]>([])
diff --git a/dashboard/src/views/Settings.vue b/dashboard/src/views/Settings.vue
index 9ddb4e1fec..bbed8a82f9 100644
--- a/dashboard/src/views/Settings.vue
+++ b/dashboard/src/views/Settings.vue
@@ -1,493 +1,552 @@
 <template>
-
-    <div style="background-color: var(--v-theme-surface, #fff); padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 24px;">
-
-        <v-list lines="two">
-            <v-list-subheader>{{ tm('network.title') }}</v-list-subheader>
-
-            <v-list-item>
-                <ProxySelector></ProxySelector>
-            </v-list-item>
-
-            <v-list-subheader>{{ tm('sidebar.title') }}</v-list-subheader>
-
-            <v-list-item :subtitle="tm('sidebar.customize.subtitle')" :title="tm('sidebar.customize.title')">
-                <SidebarCustomizer></SidebarCustomizer>
-            </v-list-item>
-
-            <v-list-subheader>{{ tm('theme.title') }}</v-list-subheader>
-
-            <v-list-item :subtitle="tm('theme.subtitle')" :title="tm('theme.customize.title')">
-                <v-row class="mt-2" dense>
-                    <v-col cols="4" sm="2">
-                        <v-text-field
-                            v-model="primaryColor"
-                            type="color"
-                            :label="tm('theme.customize.primary')"
-                            hide-details
-                            variant="outlined"
-                            density="compact"
-                            style="max-width: 220px;"
-                        />
-                    </v-col>
-                    <v-col cols="4" sm="2   ">
-                        <v-text-field
-                            v-model="secondaryColor"
-                            type="color"
-                            :label="tm('theme.customize.secondary')"
-                            hide-details
-                            variant="outlined"
-                            density="compact"
-                            style="max-width: 220px;"
-                        />
-                    </v-col>
-                    <v-col cols="12">
-                        <v-btn size="small" variant="tonal" color="primary" @click="resetThemeColors">
-                            <v-icon class="mr-2">mdi-restore</v-icon>
-                            {{ tm('theme.customize.reset') }}
-                        </v-btn>
-                    </v-col>
-                </v-row>
-            </v-list-item>
-
-            <v-list-subheader>{{ tm('system.title') }}</v-list-subheader>
-
-            <v-list-item :subtitle="tm('system.backup.subtitle')" :title="tm('system.backup.title')">
-                <v-btn style="margin-top: 16px;" color="primary" @click="openBackupDialog">
-                    <v-icon class="mr-2">mdi-backup-restore</v-icon>
-                    {{ tm('system.backup.button') }}
+  <div class="settings-page">
+    <!-- Network Card -->
+    <v-card class="mb-4" variant="flat">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" size="20">mdi-earth</v-icon>
+        {{ tm("network.title") }}
+      </v-card-title>
+      <v-card-text>
+        <ProxySelector />
+      </v-card-text>
+    </v-card>
+
+    <!-- Sidebar Card -->
+    <v-card class="mb-4" variant="flat">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" size="20">mdi-menu</v-icon>
+        {{ tm("sidebar.title") }}
+      </v-card-title>
+      <v-card-subtitle>{{ tm("sidebar.customize.subtitle") }}</v-card-subtitle>
+      <v-card-text>
+        <SidebarCustomizer />
+      </v-card-text>
+    </v-card>
+
+    <!-- Theme Card -->
+    <v-card class="mb-4" variant="flat">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" size="20">mdi-palette</v-icon>
+        {{ tm("theme.customize.title") }}
+      </v-card-title>
+      <v-card-subtitle>{{ tm("theme.subtitle") }}</v-card-subtitle>
+      <v-card-text>
+        <ThemeCustomizer />
+      </v-card-text>
+    </v-card>
+
+    <!-- System Card -->
+    <v-card class="mb-4" variant="flat">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" size="20">mdi-cog</v-icon>
+        {{ tm("system.title") }}
+      </v-card-title>
+      <v-card-text>
+        <div class="d-flex flex-wrap ga-3 mb-4">
+          <div>
+            <div class="text-body-2 mb-1">{{ tm("system.backup.title") }}</div>
+            <div class="text-caption text-medium-emphasis mb-2">
+              {{ tm("system.backup.subtitle") }}
+            </div>
+            <v-btn color="primary" size="small" @click="openBackupDialog">
+              <v-icon class="mr-1" size="16">mdi-backup-restore</v-icon>
+              {{ tm("system.backup.button") }}
+            </v-btn>
+          </div>
+          <v-divider vertical class="mx-2 mx-md-4" />
+          <div>
+            <div class="text-body-2 mb-1">{{ tm("system.restart.title") }}</div>
+            <div class="text-caption text-medium-emphasis mb-2">
+              {{ tm("system.restart.subtitle") }}
+            </div>
+            <v-btn color="error" size="small" @click="restartAstrBot">
+              <v-icon class="mr-1" size="16">mdi-restart</v-icon>
+              {{ tm("system.restart.button") }}
+            </v-btn>
+          </div>
+          <v-divider vertical class="mx-2 mx-md-4" />
+          <div>
+            <div class="text-body-2 mb-1">
+              {{ tm("system.migration.title") }}
+            </div>
+            <div class="text-caption text-medium-emphasis mb-2">
+              {{ tm("system.migration.subtitle") }}
+            </div>
+            <v-btn
+              color="primary"
+              size="small"
+              variant="outlined"
+              @click="startMigration"
+            >
+              <v-icon class="mr-1" size="16">mdi-database-import</v-icon>
+              {{ tm("system.migration.button") }}
+            </v-btn>
+          </div>
+        </div>
+        <StorageCleanupPanel />
+      </v-card-text>
+    </v-card>
+
+    <!-- API Key Card -->
+    <v-card class="mb-4" variant="flat">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" size="20">mdi-key</v-icon>
+        {{ tm("apiKey.manageTitle") }}
+        <v-tooltip location="top">
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              icon
+              size="x-small"
+              variant="text"
+              class="ml-2"
+              :aria-label="tm('apiKey.docsLink')"
+              href="https://docs.astrbot.app/dev/openapi.html"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <v-icon size="18">mdi-help-circle-outline</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ tm("apiKey.docsLink") }}</span>
+        </v-tooltip>
+      </v-card-title>
+      <v-card-subtitle>{{ tm("apiKey.subtitle") }}</v-card-subtitle>
+      <v-card-text>
+        <v-row density="compact">
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="newApiKeyName"
+              :label="tm('apiKey.name')"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="newApiKeyExpiresInDays"
+              :items="apiKeyExpiryOptions"
+              :label="tm('apiKey.expiresInDays')"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+          </v-col>
+          <v-col cols="12" md="5" class="d-flex align-center">
+            <v-btn
+              color="primary"
+              :loading="apiKeyCreating"
+              @click="createApiKey"
+            >
+              <v-icon class="mr-2">mdi-key-plus</v-icon>
+              {{ tm("apiKey.create") }}
+            </v-btn>
+          </v-col>
+          <v-col v-if="newApiKeyExpiresInDays === 'permanent'" cols="12">
+            <v-alert type="warning" variant="tonal" density="comfortable">
+              {{ tm("apiKey.permanentWarning") }}
+            </v-alert>
+          </v-col>
+          <v-col cols="12">
+            <div class="text-caption text-medium-emphasis mb-2">
+              {{ tm("apiKey.scopes") }}
+            </div>
+            <v-chip-group v-model="newApiKeyScopes" multiple>
+              <v-chip
+                v-for="scope in availableScopes"
+                :key="scope.value"
+                :value="scope.value"
+                :color="
+                  newApiKeyScopes.includes(scope.value) ? 'primary' : undefined
+                "
+                :variant="
+                  newApiKeyScopes.includes(scope.value) ? 'flat' : 'tonal'
+                "
+              >
+                {{ scope.label }}
+              </v-chip>
+            </v-chip-group>
+          </v-col>
+          <v-col v-if="createdApiKeyPlaintext" cols="12">
+            <v-alert type="warning" variant="tonal">
+              <div class="d-flex align-center justify-space-between flex-wrap">
+                <span>{{ tm("apiKey.plaintextHint") }}</span>
+                <v-btn
+                  size="small"
+                  variant="text"
+                  color="primary"
+                  @click="copyCreatedApiKey"
+                >
+                  <v-icon class="mr-1">mdi-content-copy</v-icon>
+                  {{ tm("apiKey.copy") }}
                 </v-btn>
-            </v-list-item>
-
-            <v-list-item :subtitle="tm('system.restart.subtitle')" :title="tm('system.restart.title')">
-                <v-btn style="margin-top: 16px;" color="error" @click="restartAstrBot">{{ tm('system.restart.button') }}</v-btn>
-            </v-list-item>
-
-            <v-list-item class="py-2">
-                <StorageCleanupPanel />
-            </v-list-item>
-
-            <v-list-subheader>{{ tm('apiKey.title') }}</v-list-subheader>
-
-            <v-list-item :subtitle="tm('apiKey.subtitle')">
-                <template #title>
-                    <div class="d-flex align-center">
-                        <span>{{ tm('apiKey.manageTitle') }}</span>
-                        <v-tooltip location="top">
-                            <template #activator="{ props }">
-                                <v-btn
-                                    v-bind="props"
-                                    icon
-                                    size="x-small"
-                                    variant="text"
-                                    class="ml-2"
-                                    :aria-label="tm('apiKey.docsLink')"
-                                    href="https://docs.astrbot.app/dev/openapi.html"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <v-icon size="18">mdi-help-circle-outline</v-icon>
-                                </v-btn>
-                            </template>
-                            <span>{{ tm('apiKey.docsLink') }}</span>
-                        </v-tooltip>
-                    </div>
-                </template>
-                <v-row class="mt-2" dense>
-                    <v-col cols="12" md="4">
-                        <v-text-field
-                            v-model="newApiKeyName"
-                            :label="tm('apiKey.name')"
-                            variant="outlined"
-                            density="compact"
-                            hide-details
-                        />
-                    </v-col>
-                    <v-col cols="12" md="3">
-                        <v-select
-                            v-model="newApiKeyExpiresInDays"
-                            :items="apiKeyExpiryOptions"
-                            :label="tm('apiKey.expiresInDays')"
-                            variant="outlined"
-                            density="compact"
-                            hide-details
-                        />
-                    </v-col>
-                    <v-col v-if="newApiKeyExpiresInDays === 'permanent'" cols="12">
-                        <v-alert type="warning" variant="tonal" density="comfortable">
-                            {{ tm('apiKey.permanentWarning') }}
-                        </v-alert>
-                    </v-col>
-                    <v-col cols="12" md="5" class="d-flex align-center">
-                        <v-btn color="primary" :loading="apiKeyCreating" @click="createApiKey">
-                            <v-icon class="mr-2">mdi-key-plus</v-icon>
-                            {{ tm('apiKey.create') }}
-                        </v-btn>
-                    </v-col>
-
-                    <v-col cols="12">
-                        <div class="text-caption text-medium-emphasis mb-1">{{ tm('apiKey.scopes') }}</div>
-                        <v-chip-group v-model="newApiKeyScopes" multiple>
-                            <v-chip
-                                v-for="scope in availableScopes"
-                                :key="scope.value"
-                                :value="scope.value"
-                                :color="newApiKeyScopes.includes(scope.value) ? 'primary' : undefined"
-                                :variant="newApiKeyScopes.includes(scope.value) ? 'flat' : 'tonal'"
-                            >
-                                {{ scope.label }}
-                            </v-chip>
-                        </v-chip-group>
-                    </v-col>
-
-                    <v-col v-if="createdApiKeyPlaintext" cols="12">
-                        <v-alert type="warning" variant="tonal">
-                            <div class="d-flex align-center justify-space-between flex-wrap">
-                                <span>{{ tm('apiKey.plaintextHint') }}</span>
-                                <v-btn size="small" variant="text" color="primary" @click="copyCreatedApiKey">
-                                    <v-icon class="mr-1">mdi-content-copy</v-icon>{{ tm('apiKey.copy') }}
-                                </v-btn>
-                            </div>
-                            <code style="word-break: break-all;">{{ createdApiKeyPlaintext }}</code>
-                        </v-alert>
-                    </v-col>
-
-                    <v-col cols="12">
-                        <v-table density="compact">
-                            <thead>
-                                <tr>
-                                    <th>{{ tm('apiKey.table.name') }}</th>
-                                    <th>{{ tm('apiKey.table.prefix') }}</th>
-                                    <th>{{ tm('apiKey.table.scopes') }}</th>
-                                    <th>{{ tm('apiKey.table.status') }}</th>
-                                    <th>{{ tm('apiKey.table.lastUsed') }}</th>
-                                    <th>{{ tm('apiKey.table.createdAt') }}</th>
-                                    <th>{{ tm('apiKey.table.actions') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="item in apiKeys" :key="item.key_id">
-                                    <td>{{ item.name }}</td>
-                                    <td><code>{{ item.key_prefix }}</code></td>
-                                    <td>{{ (item.scopes || []).join(', ') }}</td>
-                                    <td>
-                                        <v-chip
-                                            size="small"
-                                            :color="item.is_revoked || item.is_expired ? 'error' : 'success'"
-                                            variant="tonal"
-                                        >
-                                            {{ item.is_revoked || item.is_expired ? tm('apiKey.status.inactive') : tm('apiKey.status.active') }}
-                                        </v-chip>
-                                    </td>
-                                    <td>{{ formatDate(item.last_used_at) }}</td>
-                                    <td>{{ formatDate(item.created_at) }}</td>
-                                    <td>
-                                        <v-btn
-                                            v-if="!item.is_revoked"
-                                            size="x-small"
-                                            color="warning"
-                                            variant="tonal"
-                                            class="mr-2"
-                                            @click="revokeApiKey(item.key_id)"
-                                        >
-                                            {{ tm('apiKey.revoke') }}
-                                        </v-btn>
-                                        <v-btn
-                                            size="x-small"
-                                            color="error"
-                                            variant="tonal"
-                                            @click="deleteApiKey(item.key_id)"
-                                        >
-                                            {{ tm('apiKey.delete') }}
-                                        </v-btn>
-                                    </td>
-                                </tr>
-                                <tr v-if="apiKeys.length === 0">
-                                    <td colspan="7" class="text-center text-medium-emphasis">
-                                        {{ tm('apiKey.empty') }}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </v-table>
-                    </v-col>
-                </v-row>
-            </v-list-item>
-        </v-list>
-
-            <v-list-item :subtitle="tm('system.migration.subtitle')" :title="tm('system.migration.title')">
-                <v-btn style="margin-top: 16px;" color="primary" @click="startMigration">{{ tm('system.migration.button') }}</v-btn>
-            </v-list-item>
-
-    </div>
-
-    <WaitingForRestart ref="wfr"></WaitingForRestart>
-    <MigrationDialog ref="migrationDialog"></MigrationDialog>
-    <BackupDialog ref="backupDialog"></BackupDialog>
-
+              </div>
+              <code style="word-break: break-all">{{
+                createdApiKeyPlaintext
+              }}</code>
+            </v-alert>
+          </v-col>
+          <v-col cols="12">
+            <v-table density="compact">
+              <thead>
+                <tr>
+                  <th>{{ tm("apiKey.table.name") }}</th>
+                  <th>{{ tm("apiKey.table.prefix") }}</th>
+                  <th>{{ tm("apiKey.table.scopes") }}</th>
+                  <th>{{ tm("apiKey.table.status") }}</th>
+                  <th>{{ tm("apiKey.table.lastUsed") }}</th>
+                  <th>{{ tm("apiKey.table.createdAt") }}</th>
+                  <th>{{ tm("apiKey.table.actions") }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="item in apiKeys" :key="item.key_id">
+                  <td>{{ item.name }}</td>
+                  <td>
+                    <code>{{ item.key_prefix }}</code>
+                  </td>
+                  <td>{{ (item.scopes || []).join(", ") }}</td>
+                  <td>
+                    <v-chip
+                      size="small"
+                      :color="
+                        item.is_revoked || item.is_expired ? 'error' : 'success'
+                      "
+                      variant="tonal"
+                    >
+                      {{
+                        item.is_revoked || item.is_expired
+                          ? tm("apiKey.status.inactive")
+                          : tm("apiKey.status.active")
+                      }}
+                    </v-chip>
+                  </td>
+                  <td>{{ formatDate(item.last_used_at) }}</td>
+                  <td>{{ formatDate(item.created_at) }}</td>
+                  <td>
+                    <v-btn
+                      v-if="!item.is_revoked"
+                      size="x-small"
+                      color="warning"
+                      variant="tonal"
+                      class="mr-2"
+                      @click="revokeApiKey(item.key_id)"
+                    >
+                      {{ tm("apiKey.revoke") }}
+                    </v-btn>
+                    <v-btn
+                      size="x-small"
+                      color="error"
+                      variant="tonal"
+                      @click="deleteApiKey(item.key_id)"
+                    >
+                      {{ tm("apiKey.delete") }}
+                    </v-btn>
+                  </td>
+                </tr>
+                <tr v-if="apiKeys.length === 0">
+                  <td colspan="7" class="text-center text-medium-emphasis">
+                    {{ tm("apiKey.empty") }}
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+
+  <WaitingForRestart ref="wfr" />
+  <MigrationDialog ref="migrationDialog" />
+  <BackupDialog ref="backupDialog" />
 </template>
 
-<script setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import axios from 'axios';
-import WaitingForRestart from '@/components/shared/WaitingForRestart.vue';
-import ProxySelector from '@/components/shared/ProxySelector.vue';
-import MigrationDialog from '@/components/shared/MigrationDialog.vue';
-import SidebarCustomizer from '@/components/shared/SidebarCustomizer.vue';
-import BackupDialog from '@/components/shared/BackupDialog.vue';
-import StorageCleanupPanel from '@/components/shared/StorageCleanupPanel.vue';
-import { restartAstrBot as restartAstrBotRuntime } from '@/utils/restartAstrBot';
-import { useModuleI18n } from '@/i18n/composables';
-import { useTheme } from 'vuetify';
-import { PurpleTheme } from '@/theme/LightTheme';
-import { useToastStore } from '@/stores/toast';
-
-const { tm } = useModuleI18n('features/settings');
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import axios, { AxiosError } from 'axios';
+import WaitingForRestart from "@/components/shared/WaitingForRestart.vue";
+import ProxySelector from "@/components/shared/ProxySelector.vue";
+import SidebarCustomizer from "@/components/shared/SidebarCustomizer.vue";
+import ThemeCustomizer from "@/components/shared/ThemeCustomizer.vue";
+import MigrationDialog from "@/components/shared/MigrationDialog.vue";
+import BackupDialog from "@/components/shared/BackupDialog.vue";
+import StorageCleanupPanel from "@/components/shared/StorageCleanupPanel.vue";
+import { restartAstrBot as restartAstrBotRuntime } from "@/utils/restartAstrBot";
+import { useModuleI18n } from "@/i18n/composables";
+import { useToastStore } from "@/stores/toast";
+import type {
+  ApiKey,
+  ApiKeyActionResponse,
+  ApiKeyCreatePayload,
+  ApiKeyCreateResponse,
+  ApiKeyExpiresDays,
+  ApiKeyListResponse,
+} from "@/types/api";
+
+const { tm } = useModuleI18n("features/settings");
 const toastStore = useToastStore();
-const theme = useTheme();
-
-const getStoredColor = (key, fallback) => {
-    const stored = typeof window !== 'undefined' ? localStorage.getItem(key) : null;
-    return stored || fallback;
-};
-
-const primaryColor = ref(getStoredColor('themePrimary', PurpleTheme.colors.primary));
-const secondaryColor = ref(getStoredColor('themeSecondary', PurpleTheme.colors.secondary));
-
-const resolveThemes = () => {
-    if (theme?.themes?.value) return theme.themes.value;
-    if (theme?.global?.themes?.value) return theme.global.themes.value;
-    return null;
-};
-
-const applyThemeColors = (primary, secondary) => {
-    const themes = resolveThemes();
-    if (!themes) return;
-    ['PurpleTheme', 'PurpleThemeDark'].forEach((name) => {
-        const themeDef = themes[name];
-        if (!themeDef?.colors) return;
-        if (primary) themeDef.colors.primary = primary;
-        if (secondary) themeDef.colors.secondary = secondary;
-        if (primary && themeDef.colors.darkprimary) themeDef.colors.darkprimary = primary;
-        if (secondary && themeDef.colors.darksecondary) themeDef.colors.darksecondary = secondary;
-    });
-};
-
-applyThemeColors(primaryColor.value, secondaryColor.value);
-
-watch(primaryColor, (value) => {
-    if (!value) return;
-    localStorage.setItem('themePrimary', value);
-    applyThemeColors(value, secondaryColor.value);
-});
 
-watch(secondaryColor, (value) => {
-    if (!value) return;
-    localStorage.setItem('themeSecondary', value);
-    applyThemeColors(primaryColor.value, value);
-});
-
-const wfr = ref(null);
-const migrationDialog = ref(null);
-const backupDialog = ref(null);
-const apiKeys = ref([]);
+const wfr = ref<any>(null);
+const migrationDialog = ref<any>(null);
+const backupDialog = ref<any>(null);
+const apiKeys = ref<ApiKey[]>([]);
 const apiKeyCreating = ref(false);
-const newApiKeyName = ref('');
-const newApiKeyExpiresInDays = ref(30);
-const newApiKeyScopes = ref(['chat', 'config', 'file', 'im']);
-const createdApiKeyPlaintext = ref('');
+const newApiKeyName = ref("");
+const newApiKeyExpiresInDays = ref<ApiKeyExpiresDays>(30);
+const newApiKeyScopes = ref(["chat", "config", "file", "im"]);
+const createdApiKeyPlaintext = ref("");
 const apiKeyExpiryOptions = computed(() => [
-    { title: tm('apiKey.expiryOptions.day1'), value: 1 },
-    { title: tm('apiKey.expiryOptions.day7'), value: 7 },
-    { title: tm('apiKey.expiryOptions.day30'), value: 30 },
-    { title: tm('apiKey.expiryOptions.day90'), value: 90 },
-    { title: tm('apiKey.expiryOptions.permanent'), value: 'permanent' }
+  { title: tm("apiKey.expiryOptions.day1"), value: 1 },
+  { title: tm("apiKey.expiryOptions.day7"), value: 7 },
+  { title: tm("apiKey.expiryOptions.day30"), value: 30 },
+  { title: tm("apiKey.expiryOptions.day90"), value: 90 },
+  { title: tm("apiKey.expiryOptions.permanent"), value: "permanent" },
 ]);
 
 const availableScopes = [
-    { value: 'chat', label: 'chat' },
-    { value: 'config', label: 'config' },
-    { value: 'file', label: 'file' },
-    { value: 'im', label: 'im' }
+  { value: "chat", label: "chat" },
+  { value: "config", label: "config" },
+  { value: "file", label: "file" },
+  { value: "im", label: "im" },
 ];
 
-const showToast = (message, color = 'success') => {
-    toastStore.add({
-        message,
-        color,
-        timeout: 3000
-    });
+const showToast = (message: string, color = "success") => {
+  toastStore.add({
+    message,
+    color,
+    timeout: 3000,
+  });
 };
 
-const formatDate = (value) => {
-    if (!value) return '-';
-    const dt = new Date(value);
-    if (Number.isNaN(dt.getTime())) return '-';
-    return dt.toLocaleString();
+const formatDate = (value: string | null) => {
+  if (!value) return "-";
+  const dt = new Date(value);
+  if (Number.isNaN(dt.getTime())) return "-";
+  return dt.toLocaleString();
 };
 
 const loadApiKeys = async () => {
-    try {
-        const res = await axios.get('/api/apikey/list');
-        if (res.data.status !== 'ok') {
-            showToast(res.data.message || tm('apiKey.messages.loadFailed'), 'error');
-            return;
-        }
-        apiKeys.value = res.data.data || [];
-    } catch (e) {
-        showToast(e?.response?.data?.message || tm('apiKey.messages.loadFailed'), 'error');
+  try {
+    const res = await axios.get<ApiKeyListResponse>("/api/apikey/list");
+    if (res.data.status !== "ok") {
+      showToast(res.data.message || tm("apiKey.messages.loadFailed"), "error");
+      return;
     }
+    apiKeys.value = res.data.data;
+  } catch (e: unknown) {
+    if (e instanceof AxiosError) {
+      showToast(
+        e?.response?.data?.message || tm("apiKey.messages.loadFailed"),
+        "error",
+      );
+    } else {
+      console.error("An unexpected error occurred while loading API keys:", e);
+      showToast(tm("apiKey.messages.loadFailed"), "error");
+    }
+  }
 };
 
-const tryExecCommandCopy = (text) => {
-    let textArea = null;
+const tryExecCommandCopy = (text: string): boolean => {
+  let textArea: HTMLTextAreaElement | null = null;
+  try {
+    if (typeof document === "undefined" || !document.body) return false;
+    textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.setAttribute("readonly", "");
+    textArea.style.position = "fixed";
+    textArea.style.opacity = "0";
+    textArea.style.pointerEvents = "none";
+    textArea.style.left = "-9999px";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    textArea.setSelectionRange(0, text.length);
+    // Fallback to deprecated execCommand for older browsers
+    return document.execCommand("copy");
+  } catch (_) {
+    return false;
+  } finally {
     try {
-        if (typeof document === 'undefined' || !document.body) return false;
-        textArea = document.createElement('textarea');
-        textArea.value = text;
-        textArea.setAttribute('readonly', '');
-        textArea.style.position = 'fixed';
-        textArea.style.opacity = '0';
-        textArea.style.pointerEvents = 'none';
-        textArea.style.left = '-9999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        textArea.setSelectionRange(0, text.length);
-        return document.execCommand('copy');
+      if (textArea?.parentNode) {
+        textArea.parentNode.removeChild(textArea);
+      }
     } catch (_) {
-        return false;
-    } finally {
-        try {
-            if (textArea?.parentNode) {
-                textArea.parentNode.removeChild(textArea);
-            }
-        } catch (_) {
-            // ignore cleanup errors
-        }
+      // ignore cleanup errors
     }
+  }
 };
 
-const copyTextToClipboard = async (text) => {
-    if (!text) return false;
-    if (tryExecCommandCopy(text)) return true;
-    if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) return false;
+const copyTextToClipboard = async (text: string): Promise<boolean> => {
+  if (!text) return false;
+
+  // 由于execCommand被弃用，改用推荐的Clipboard API，但仍保留execCommand作为兼容性回退
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
     try {
-        await navigator.clipboard.writeText(text);
-        return true;
+      await navigator.clipboard.writeText(text);
+      return true;
     } catch (_) {
-        return false;
+      // Clipboard API failed, try fallback method
     }
+  }
+
+  // 回退到execCommand方法，兼容不支持Clipboard API的环境
+  return tryExecCommandCopy(text);
 };
 
 const copyCreatedApiKey = async () => {
-    if (!createdApiKeyPlaintext.value) return;
-    const ok = await copyTextToClipboard(createdApiKeyPlaintext.value);
-    if (ok) {
-        showToast(tm('apiKey.messages.copySuccess'), 'success');
-    } else {
-        showToast(tm('apiKey.messages.copyFailed'), 'error');
-    }
+  if (!createdApiKeyPlaintext.value) return;
+  const ok = await copyTextToClipboard(createdApiKeyPlaintext.value);
+  if (ok) {
+    showToast(tm("apiKey.messages.copySuccess"), "success");
+  } else {
+    showToast(tm("apiKey.messages.copyFailed"), "error");
+  }
 };
 
 const createApiKey = async () => {
-    const selectedScopes = availableScopes
-        .map((scope) => scope.value)
-        .filter((scope) => newApiKeyScopes.value.includes(scope));
-
-    if (selectedScopes.length === 0) {
-        showToast(tm('apiKey.messages.scopeRequired'), 'warning');
-        return;
+  const selectedScopes = availableScopes
+    .map((scope) => scope.value)
+    .filter((scope) => newApiKeyScopes.value.includes(scope));
+
+  if (selectedScopes.length === 0) {
+    showToast(tm("apiKey.messages.scopeRequired"), "warning");
+    return;
+  }
+  apiKeyCreating.value = true;
+  try {
+    const payload: ApiKeyCreatePayload = {
+      name: newApiKeyName.value,
+      scopes: selectedScopes,
+    };
+    if (newApiKeyExpiresInDays.value !== "permanent") {
+      payload.expires_in_days = Number(newApiKeyExpiresInDays.value);
     }
-    apiKeyCreating.value = true;
-    try {
-        const payload = {
-            name: newApiKeyName.value,
-            scopes: selectedScopes
-        };
-        if (newApiKeyExpiresInDays.value !== 'permanent') {
-            payload.expires_in_days = Number(newApiKeyExpiresInDays.value);
-        }
-        const res = await axios.post('/api/apikey/create', payload);
-        if (res.data.status !== 'ok') {
-            showToast(res.data.message || tm('apiKey.messages.createFailed'), 'error');
-            return;
-        }
-        createdApiKeyPlaintext.value = res.data.data?.api_key || '';
-        newApiKeyName.value = '';
-        newApiKeyExpiresInDays.value = 30;
-        showToast(tm('apiKey.messages.createSuccess'), 'success');
-        await loadApiKeys();
-    } catch (e) {
-        showToast(e?.response?.data?.message || tm('apiKey.messages.createFailed'), 'error');
-    } finally {
-        apiKeyCreating.value = false;
+    const res = await axios.post<ApiKeyCreateResponse>(
+      "/api/apikey/create",
+      payload,
+    );
+    if (res.data.status !== "ok") {
+      showToast(
+        res.data.message || tm("apiKey.messages.createFailed"),
+        "error",
+      );
+      return;
     }
+    createdApiKeyPlaintext.value = res.data.data?.api_key || "";
+    newApiKeyName.value = "";
+    newApiKeyExpiresInDays.value = 30;
+    showToast(tm("apiKey.messages.createSuccess"), "success");
+    await loadApiKeys();
+  } catch (e: unknown) {
+    if (e instanceof AxiosError) {
+      showToast(
+        e?.response?.data?.message || tm("apiKey.messages.createFailed"),
+        "error",
+      );
+    } else {
+      console.error("An unexpected error occurred while creating API key:", e);
+      showToast(tm("apiKey.messages.createFailed"), "error");
+    }
+  } finally {
+    apiKeyCreating.value = false;
+  }
 };
 
-const revokeApiKey = async (keyId) => {
-    try {
-        const res = await axios.post('/api/apikey/revoke', { key_id: keyId });
-        if (res.data.status !== 'ok') {
-            showToast(res.data.message || tm('apiKey.messages.revokeFailed'), 'error');
-            return;
-        }
-        showToast(tm('apiKey.messages.revokeSuccess'), 'success');
-        await loadApiKeys();
-    } catch (e) {
-        showToast(e?.response?.data?.message || tm('apiKey.messages.revokeFailed'), 'error');
+const revokeApiKey = async (keyId: string) => {
+  try {
+    const res = await axios.post<ApiKeyActionResponse>("/api/apikey/revoke", {
+      key_id: keyId,
+    });
+    if (res.data.status !== "ok") {
+      showToast(
+        res.data.message || tm("apiKey.messages.revokeFailed"),
+        "error",
+      );
+      return;
     }
+    showToast(tm("apiKey.messages.revokeSuccess"), "success");
+    await loadApiKeys();
+  } catch (e: unknown) {
+    if (e instanceof AxiosError) {
+      showToast(
+        e?.response?.data?.message || tm("apiKey.messages.revokeFailed"),
+        "error",
+      );
+    } else {
+      console.error("An unexpected error occurred while revoking API key:", e);
+      showToast(tm("apiKey.messages.revokeFailed"), "error");
+    }
+  }
 };
 
-const deleteApiKey = async (keyId) => {
-    try {
-        const res = await axios.post('/api/apikey/delete', { key_id: keyId });
-        if (res.data.status !== 'ok') {
-            showToast(res.data.message || tm('apiKey.messages.deleteFailed'), 'error');
-            return;
-        }
-        showToast(tm('apiKey.messages.deleteSuccess'), 'success');
-        await loadApiKeys();
-    } catch (e) {
-        showToast(e?.response?.data?.message || tm('apiKey.messages.deleteFailed'), 'error');
+const deleteApiKey = async (keyId: string) => {
+  try {
+    const res = await axios.post<ApiKeyActionResponse>("/api/apikey/delete", {
+      key_id: keyId,
+    });
+    if (res.data.status !== "ok") {
+      showToast(
+        res.data.message || tm("apiKey.messages.deleteFailed"),
+        "error",
+      );
+      return;
     }
+    showToast(tm("apiKey.messages.deleteSuccess"), "success");
+    await loadApiKeys();
+  } catch (e: unknown) {
+    if (e instanceof AxiosError) {
+      showToast(
+        e?.response?.data?.message || tm("apiKey.messages.deleteFailed"),
+        "error",
+      );
+    } else {
+      console.error("An unexpected error occurred while deleting API key:", e);
+      showToast(tm("apiKey.messages.deleteFailed"), "error");
+    }
+  }
 };
 
 const restartAstrBot = async () => {
-    try {
-        await restartAstrBotRuntime(wfr.value);
-    } catch (error) {
-        console.error(error);
+  try {
+    await restartAstrBotRuntime(wfr.value);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      showToast(
+        error?.response?.data?.message || tm("apiKey.messages.restartFailed"),
+        "error",
+      );
+    } else {
+      console.error(
+        "An unexpected error occurred while restarting AstrBot:",
+        error,
+      );
+      showToast(tm("apiKey.messages.restartFailed"), "error");
     }
-}
+  }
+};
 
 const startMigration = async () => {
-    if (migrationDialog.value) {
-        try {
-            const result = await migrationDialog.value.open();
-            if (result.success) {
-                console.log('Migration completed successfully:', result.message);
-            }
-        } catch (error) {
-            console.error('Migration dialog error:', error);
-        }
+  if (migrationDialog.value) {
+    try {
+      const result = await migrationDialog.value.open();
+      if (result.success) {
+        console.info("Migration completed successfully:", result.message);
+      }
+    } catch (error) {
+      console.error("Migration dialog error:", error);
     }
-}
+  }
+};
 
 const openBackupDialog = () => {
-    if (backupDialog.value) {
-        backupDialog.value.open();
-    }
-}
-
-const resetThemeColors = () => {
-    primaryColor.value = PurpleTheme.colors.primary;
-    secondaryColor.value = PurpleTheme.colors.secondary;
-    localStorage.removeItem('themePrimary');
-    localStorage.removeItem('themeSecondary');
-    applyThemeColors(primaryColor.value, secondaryColor.value);
+  if (backupDialog.value) {
+    backupDialog.value.open();
+  }
 };
 
 onMounted(() => {
-    loadApiKeys();
+  loadApiKeys();
 });
 </script>
diff --git a/dashboard/src/views/SubAgentPage.vue b/dashboard/src/views/SubAgentPage.vue
index 4f71ddf78a..562b750bdf 100644
--- a/dashboard/src/views/SubAgentPage.vue
+++ b/dashboard/src/views/SubAgentPage.vue
@@ -214,7 +214,7 @@
 import axios from 'axios'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
-import { useTheme } from 'vuetify'
+import { useCustomizerStore } from '@/stores/customizer'
 import PersonaQuickPreview from '@/components/shared/PersonaQuickPreview.vue'
 import PersonaSelector from '@/components/shared/PersonaSelector.vue'
 import ProviderSelector from '@/components/shared/ProviderSelector.vue'
@@ -237,12 +237,12 @@ type SubAgentConfig = {
 }
 
 const { tm } = useModuleI18n('features/subagent')
-const theme = useTheme()
+const customizerStore = useCustomizerStore()
 const confirmDialog = useConfirmDialog()
 
 const loading = ref(false)
 const saving = ref(false)
-const isDark = computed(() => theme.global.current.value.dark)
+const isDark = computed(() => customizerStore.isDarkTheme)
 
 const snackbar = ref({
   show: false,
diff --git a/dashboard/src/views/authentication/auth/LoginPage.vue b/dashboard/src/views/authentication/auth/LoginPage.vue
index acd1e798a2..a3fbba84de 100644
--- a/dashboard/src/views/authentication/auth/LoginPage.vue
+++ b/dashboard/src/views/authentication/auth/LoginPage.vue
@@ -6,20 +6,16 @@ import { useAuthStore } from '@/stores/auth';
 import { useRouter } from 'vue-router';
 import { useCustomizerStore } from "@/stores/customizer";
 import { useModuleI18n } from '@/i18n/composables';
-import { useTheme } from 'vuetify';
 
 const cardVisible = ref(false);
 const router = useRouter();
 const authStore = useAuthStore();
 const customizer = useCustomizerStore();
 const { tm: t } = useModuleI18n('features/auth');
-const theme = useTheme();
 
 // 主题切换函数
 function toggleTheme() {
-  const newTheme = customizer.uiTheme === 'PurpleThemeDark' ? 'PurpleTheme' : 'PurpleThemeDark';
-  customizer.SET_UI_THEME(newTheme);
-  theme.global.name.value = newTheme;
+  customizer.TOGGLE_DARK_MODE();
 }
 
 onMounted(async () => {
@@ -53,10 +49,10 @@ onMounted(async () => {
               style="height: 24px !important; opacity: 0.9 !important; align-self: center !important; border-color: rgba(var(--v-theme-primary), 0.45) !important;"></v-divider>
             <v-btn @click="toggleTheme" class="theme-toggle-btn" icon variant="text" size="small">
               <v-icon size="18" :color="'rgb(var(--v-theme-primary))'">
-                {{ customizer.uiTheme === 'PurpleThemeDark' ? 'mdi-white-balance-sunny' : 'mdi-weather-night' }}
+                {{ customizer.isDarkTheme ? 'mdi-white-balance-sunny' : 'mdi-weather-night' }}
               </v-icon>
               <v-tooltip activator="parent" location="top">
-                {{ customizer.uiTheme === 'PurpleThemeDark' ? t('theme.switchToLight') : t('theme.switchToDark') }}
+                {{ customizer.isDarkTheme ? t('theme.light') : t('theme.dark') }}
               </v-tooltip>
             </v-btn>
           </div>
diff --git a/dashboard/src/views/stats/StatsPage.vue b/dashboard/src/views/stats/StatsPage.vue
index cb0a358c69..a3662c2e8b 100644
--- a/dashboard/src/views/stats/StatsPage.vue
+++ b/dashboard/src/views/stats/StatsPage.vue
@@ -207,8 +207,10 @@
 import type { ApexOptions } from 'apexcharts'
 import axios from 'axios'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useTheme } from 'vuetify'
 import { useI18n, useModuleI18n } from '@/i18n/composables'
+import { useTheme } from 'vuetify';
+import { useCustomizerStore } from '@/stores/customizer';
+import type { ThemeTypes } from '@/types/theme';
 
 type TokenRange = 1 | 3 | 7
 type ChartSeries = Array<{
@@ -278,29 +280,16 @@ interface ProviderTokenStatsResponse {
 
 const { locale } = useI18n()
 const { tm: t } = useModuleI18n('features/stats')
-const theme = useTheme()
+const theme = useTheme();
+const customizer = useCustomizerStore()
 const loading = ref(true)
 const errorMessage = ref('')
 const baseStats = ref<BaseStatsResponse | null>(null)
 const providerStats = ref<ProviderTokenStatsResponse | null>(null)
 const selectedRange = ref<TokenRange>(1)
 const lastUpdatedAt = ref<Date | null>(null)
-const isDark = computed(() => theme.global.current.value.dark)
-const themePalette = computed(() => {
-  const colors = theme.global.current.value.colors as Record<string, string>
-  return {
-    primary: colors.primary,
-    secondary: colors.secondary,
-    info: colors.info,
-    success: colors.success,
-    warning: colors.warning,
-    accent: colors.accent,
-    border: colors.border ?? colors.borderLight ?? colors.primary,
-    mutedText: colors.secondaryText ?? colors.primaryText ?? colors.primary,
-    lightPrimary: colors.lightprimary ?? colors.surface ?? colors.background,
-    lightSecondary: colors.lightsecondary ?? colors.surface ?? colors.background
-  }
-})
+const isDark = computed(() => customizer.isDarkTheme)
+const themeColors = computed(() => theme.current.value.colors as ThemeTypes['colors'])
 
 let refreshTimer: number | null = null
 
@@ -537,29 +526,20 @@ const startTimeLabel = computed(() =>
   formatDateTime(baseStats.value?.start_time ?? 0)
 )
 
-const providerChartColors = computed(() =>
-  isDark.value
-    ? [
-        '#6F8FAF',
-        '#7E9A73',
-        '#A78468',
-        '#8A78A8',
-        '#6B9995',
-        '#B07A87',
-        '#8C8F62',
-        '#7C8798'
-      ]
-    : [
-        '#5F7E9B',
-        '#708865',
-        '#9A7557',
-        '#786696',
-        '#5D8985',
-        '#9C6674',
-        '#80844F',
-        '#69788D'
-      ]
-)
+const providerChartColors = computed(() => {
+  const colors = theme.current.value.colors;
+  // A harmonious palette derived from theme colors
+  return [
+    colors.primary,
+    colors.secondary,
+    colors.info,
+    colors.success,
+    colors.warning,
+    colors.accent ?? '#FFAB91',
+    (colors as any).darkprimary ?? colors.primary,
+    (colors as any).darksecondary ?? colors.secondary,
+  ];
+})
 
 const messageChartOptions = computed<ApexOptions>(() => ({
   chart: {
@@ -571,7 +551,7 @@ const messageChartOptions = computed<ApexOptions>(() => ({
   theme: {
     mode: isDark.value ? 'dark' : 'light'
   },
-  colors: [themePalette.value.primary],
+  colors: [themeColors.value.primary],
   stroke: {
     curve: 'smooth',
     width: 2.4
@@ -581,7 +561,7 @@ const messageChartOptions = computed<ApexOptions>(() => ({
     opacity: 0.12
   },
   grid: {
-    borderColor: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26),
+    borderColor: hexToRgba(themeColors.value.border ?? themeColors.value.borderLight ?? themeColors.value.primary, isDark.value ? 0.4 : 0.26),
     strokeDashArray: 0
   },
   dataLabels: { enabled: false },
@@ -589,15 +569,15 @@ const messageChartOptions = computed<ApexOptions>(() => ({
     type: 'datetime',
     labels: {
       datetimeUTC: false,
-      style: { colors: themePalette.value.mutedText }
+      style: { colors: themeColors.value.secondaryText ?? themeColors.value.primaryText ?? themeColors.value.primary }
     },
-    axisBorder: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) },
-    axisTicks: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) }
+    axisBorder: { color: hexToRgba(themeColors.value.border ?? themeColors.value.borderLight ?? themeColors.value.primary, isDark.value ? 0.4 : 0.26) },
+    axisTicks: { color: hexToRgba(themeColors.value.border ?? themeColors.value.borderLight ?? themeColors.value.primary, isDark.value ? 0.4 : 0.26) }
   },
   yaxis: {
     labels: {
       formatter: (value) => formatCompactNumber(Number(value)),
-      style: { colors: themePalette.value.mutedText }
+      style: { colors: themeColors.value.secondaryText ?? themeColors.value.primaryText ?? themeColors.value.primary }
     }
   },
   tooltip: {
@@ -630,21 +610,21 @@ const providerChartOptions = computed<ApexOptions>(() => ({
   colors: providerChartColors.value,
   dataLabels: { enabled: false },
   grid: {
-    borderColor: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26)
+    borderColor: hexToRgba(themeColors.value.border ?? themeColors.value.borderLight ?? themeColors.value.primary, isDark.value ? 0.4 : 0.26)
   },
   xaxis: {
     type: 'datetime',
     labels: {
       datetimeUTC: false,
-      style: { colors: themePalette.value.mutedText }
+      style: { colors: themeColors.value.secondaryText ?? themeColors.value.primaryText ?? themeColors.value.primary }
     },
-    axisBorder: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) },
-    axisTicks: { color: hexToRgba(themePalette.value.border, isDark.value ? 0.4 : 0.26) }
+    axisBorder: { color: hexToRgba(themeColors.value.border ?? themeColors.value.borderLight ?? themeColors.value.primary, isDark.value ? 0.4 : 0.26) },
+    axisTicks: { color: hexToRgba(themeColors.value.border ?? themeColors.value.borderLight ?? themeColors.value.primary, isDark.value ? 0.4 : 0.26) }
   },
   yaxis: {
     labels: {
       formatter: (value) => formatCompactNumber(Number(value)),
-      style: { colors: themePalette.value.mutedText }
+      style: { colors: themeColors.value.secondaryText ?? themeColors.value.primaryText ?? themeColors.value.primary }
     }
   },
   tooltip: {
@@ -657,7 +637,7 @@ const providerChartOptions = computed<ApexOptions>(() => ({
     position: 'top',
     horizontalAlign: 'left',
     labels: {
-      colors: themePalette.value.mutedText
+      colors: themeColors.value.secondaryText ?? themeColors.value.primaryText ?? themeColors.value.primary
     }
   }
 }))