From b8ffecf5008c46bcd174f48373b4790eb0bfe746 Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Fri, 27 Feb 2026 23:41:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=89=8D=E7=AB=AF/=E5=85=81?=
 =?UTF-8?q?=E8=AE=B8=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/package.json                        |   2 +-
 .../src/components/chat/StandaloneChat.vue    | 480 +++++-----
 .../src/i18n/locales/en-US/core/header.json   |   3 +-
 .../i18n/locales/en-US/features/settings.json |   5 +
 .../src/i18n/locales/zh-CN/core/header.json   |   3 +-
 .../i18n/locales/zh-CN/features/settings.json |   5 +
 .../full/vertical-header/VerticalHeader.vue   | 872 ++++++++++++------
 dashboard/src/views/Settings.vue              |  26 +-
 8 files changed, 884 insertions(+), 512 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 7b4a7f071..63fdcb181 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -64,7 +64,7 @@
     "sass": "1.66.1",
     "sass-loader": "13.3.2",
     "typescript": "5.1.6",
-    "vite": "4.4.9",
+    "vite": "^7.3.1",
     "vue-cli-plugin-vuetify": "2.5.8",
     "vue-tsc": "1.8.8",
     "vuetify-loader": "^2.0.0-alpha.9"
diff --git a/dashboard/src/components/chat/StandaloneChat.vue b/dashboard/src/components/chat/StandaloneChat.vue
index 69fac13f9..ba0cd4eeb 100644
--- a/dashboard/src/components/chat/StandaloneChat.vue
+++ b/dashboard/src/components/chat/StandaloneChat.vue
@@ -1,165 +1,177 @@
 <template>
-    <v-card class="standalone-chat-card" elevation="0" rounded="0">
-        <v-card-text class="standalone-chat-container">
-            <div class="chat-layout">
-                <!-- 聊天内容区域 -->
-                <div class="chat-content-panel">
-                    <MessageList v-if="messages && messages.length > 0" :messages="messages" :isDark="isDark"
-                        :isStreaming="isStreaming || isConvRunning" @openImagePreview="openImagePreview"
-                        ref="messageList" />
-                    <div class="welcome-container fade-in" v-else>
-                        <div class="welcome-title">
-                            <span>Hello, I'm</span>
-                            <span class="bot-name">AstrBot ⭐</span>
-                        </div>
-                        <p class="text-caption text-medium-emphasis mt-2">
-                            测试配置: {{ configId || 'default' }}
-                        </p>
-                    </div>
-
-                    <!-- 输入区域 -->
-                    <ChatInput
-                        v-model:prompt="prompt"
-                        :stagedImagesUrl="stagedImagesUrl"
-                        :stagedAudioUrl="stagedAudioUrl"
-                        :disabled="isStreaming"
-                        :is-running="isStreaming || isConvRunning"
-                        :enableStreaming="enableStreaming"
-                        :isRecording="isRecording"
-                        :session-id="currSessionId || null"
-                        :current-session="getCurrentSession"
-                        :config-id="configId"
-                        @send="handleSendMessage"
-                        @stop="handleStopMessage"
-                        @toggleStreaming="toggleStreaming"
-                        @removeImage="removeImage"
-                        @removeAudio="removeAudio"
-                        @startRecording="handleStartRecording"
-                        @stopRecording="handleStopRecording"
-                        @pasteImage="handlePaste"
-                        @fileSelect="handleFileSelect"
-                        @openLiveMode=""
-                        ref="chatInputRef"
-                    />
-                </div>
+  <v-card class="standalone-chat-card" elevation="0" rounded="0">
+    <v-card-text class="standalone-chat-container">
+      <div class="chat-layout">
+        <!-- 聊天内容区域 -->
+        <div class="chat-content-panel">
+          <MessageList
+            v-if="messages && messages.length > 0"
+            :messages="messages"
+            :isDark="isDark"
+            :isStreaming="isStreaming || isConvRunning"
+            @openImagePreview="openImagePreview"
+            ref="messageList"
+          />
+          <div class="welcome-container fade-in" v-else>
+            <div class="welcome-title">
+              <span>Hello, I'm</span>
+              <span class="bot-name">AstrBot ⭐</span>
             </div>
-        </v-card-text>
-    </v-card>
+            <p class="text-caption text-medium-emphasis mt-2">
+              测试配置: {{ configId || "default" }}
+            </p>
+          </div>
 
-    <!-- 图片预览对话框 -->
-    <v-dialog v-model="imagePreviewDialog" max-width="90vw" max-height="90vh">
-        <v-card class="image-preview-card" elevation="8">
-            <v-card-title class="d-flex justify-space-between align-center pa-4">
-                <span>{{ t('core.common.imagePreview') }}</span>
-                <v-btn icon="mdi-close" variant="text" @click="imagePreviewDialog = false" />
-            </v-card-title>
-            <v-card-text class="text-center pa-4">
-                <img :src="previewImageUrl" class="preview-image-large" />
-            </v-card-text>
-        </v-card>
-    </v-dialog>
+          <!-- 输入区域 -->
+          <ChatInput
+            v-model:prompt="prompt"
+            :stagedImagesUrl="stagedImagesUrl"
+            :stagedAudioUrl="stagedAudioUrl"
+            :disabled="isStreaming"
+            :is-running="isStreaming || isConvRunning"
+            :enableStreaming="enableStreaming"
+            :isRecording="isRecording"
+            :session-id="currSessionId || null"
+            :current-session="getCurrentSession"
+            :config-id="configId"
+            @send="handleSendMessage"
+            @stop="handleStopMessage"
+            @toggleStreaming="toggleStreaming"
+            @removeImage="removeImage"
+            @removeAudio="removeAudio"
+            @startRecording="handleStartRecording"
+            @stopRecording="handleStopRecording"
+            @pasteImage="handlePaste"
+            @fileSelect="handleFileSelect"
+            @openLiveMode=""
+            ref="chatInputRef"
+          />
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+
+  <!-- 图片预览对话框 -->
+  <v-dialog v-model="imagePreviewDialog" max-width="90vw" max-height="90vh">
+    <v-card class="image-preview-card" elevation="8">
+      <v-card-title class="d-flex justify-space-between align-center pa-4">
+        <span>{{ t("core.common.imagePreview") }}</span>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          @click="imagePreviewDialog = false"
+        />
+      </v-card-title>
+      <v-card-text class="text-center pa-4">
+        <img :src="previewImageUrl" class="preview-image-large" />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import axios from 'axios';
-import { useCustomizerStore } from '@/stores/customizer';
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import { useTheme } from 'vuetify';
-import MessageList from '@/components/chat/MessageList.vue';
-import ChatInput from '@/components/chat/ChatInput.vue';
-import { useMessages } from '@/composables/useMessages';
-import { useMediaHandling } from '@/composables/useMediaHandling';
-import { useRecording } from '@/composables/useRecording';
-import { useToast } from '@/utils/toast';
-import { buildWebchatUmoDetails } from '@/utils/chatConfigBinding';
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
+import axios from "axios";
+import { useCustomizerStore } from "@/stores/customizer";
+import { useI18n, useModuleI18n } from "@/i18n/composables";
+import { useTheme } from "vuetify";
+import MessageList from "@/components/chat/MessageList.vue";
+import ChatInput from "@/components/chat/ChatInput.vue";
+import { useMessages } from "@/composables/useMessages";
+import { useMediaHandling } from "@/composables/useMediaHandling";
+import { useRecording } from "@/composables/useRecording";
+import { useToast } from "@/utils/toast";
+import { buildWebchatUmoDetails } from "@/utils/chatConfigBinding";
 
 interface Props {
-    configId?: string | null;
+  configId?: string | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    configId: null
+  configId: null,
 });
 
 const { t } = useI18n();
 const { error: showError } = useToast();
 
-
 // UI 状态
 const imagePreviewDialog = ref(false);
-const previewImageUrl = ref('');
+const previewImageUrl = ref("");
 
 // 会话管理（不使用 useSessions 避免路由跳转）
-const currSessionId = ref('');
+const currSessionId = ref("");
 const getCurrentSession = computed(() => null); // 独立测试模式不需要会话信息
 
 async function bindConfigToSession(sessionId: string) {
-    const confId = (props.configId || '').trim();
-    if (!confId || confId === 'default') {
-        return;
-    }
+  const confId = (props.configId || "").trim();
+  if (!confId || confId === "default") {
+    return;
+  }
 
-    const umoDetails = buildWebchatUmoDetails(sessionId, false);
+  const umoDetails = buildWebchatUmoDetails(sessionId, false);
 
-    await axios.post('/api/config/umo_abconf_route/update', {
-        umo: umoDetails.umo,
-        conf_id: confId
-    });
+  await axios.post("/api/config/umo_abconf_route/update", {
+    umo: umoDetails.umo,
+    conf_id: confId,
+  });
 }
 
 async function newSession() {
+  try {
+    const response = await axios.get("/api/chat/new_session");
+    const sessionId = response.data.data.session_id;
+
     try {
-        const response = await axios.get('/api/chat/new_session');
-        const sessionId = response.data.data.session_id;
-
-        try {
-            await bindConfigToSession(sessionId);
-        } catch (err) {
-            console.error('Failed to bind config to session', err);
-        }
-
-        currSessionId.value = sessionId;
-
-        return sessionId;
+      await bindConfigToSession(sessionId);
     } catch (err) {
-        console.error(err);
-        throw err;
+      console.error("Failed to bind config to session", err);
     }
+
+    currSessionId.value = sessionId;
+
+    return sessionId;
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
 }
 
 function updateSessionTitle(sessionId: string, title: string) {
-    // 独立模式不需要更新会话标题
+  // 独立模式不需要更新会话标题
 }
 
 function getSessions() {
-    // 独立模式不需要加载会话列表
+  // 独立模式不需要加载会话列表
 }
 
 const {
-    stagedImagesUrl,
-    stagedAudioUrl,
-    stagedFiles,
-    getMediaFile,
-    processAndUploadImage,
-    handlePaste,
-    removeImage,
-    removeAudio,
-    clearStaged,
-    cleanupMediaCache
+  stagedImagesUrl,
+  stagedAudioUrl,
+  stagedFiles,
+  getMediaFile,
+  processAndUploadImage,
+  handlePaste,
+  removeImage,
+  removeAudio,
+  clearStaged,
+  cleanupMediaCache,
 } = useMediaHandling();
 
-const { isRecording, startRecording: startRec, stopRecording: stopRec } = useRecording();
+const {
+  isRecording,
+  startRecording: startRec,
+  stopRecording: stopRec,
+} = useRecording();
 
 const {
-    messages,
-    isStreaming,
-    isConvRunning,
-    enableStreaming,
-    getSessionMessages: getSessionMsg,
-    sendMessage: sendMsg,
-    stopMessage: stopMsg,
-    toggleStreaming
+  messages,
+  isStreaming,
+  isConvRunning,
+  enableStreaming,
+  getSessionMessages: getSessionMsg,
+  sendMessage: sendMsg,
+  stopMessage: stopMsg,
+  toggleStreaming,
 } = useMessages(currSessionId, getMediaFile, updateSessionTitle, getSessions);
 
 // 组件引用
@@ -167,190 +179,196 @@ const messageList = ref<InstanceType<typeof MessageList> | null>(null);
 const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
 
 // 输入状态
-const prompt = ref('');
+const prompt = ref("");
 
-const isDark = computed(() => useCustomizerStore().uiTheme === 'PurpleThemeDark');
+const isDark = computed(
+  () => useCustomizerStore().uiTheme === "PurpleThemeDark",
+);
 
 function openImagePreview(imageUrl: string) {
-    previewImageUrl.value = imageUrl;
-    imagePreviewDialog.value = true;
+  previewImageUrl.value = imageUrl;
+  imagePreviewDialog.value = true;
 }
 
 async function handleStartRecording() {
-    await startRec();
+  await startRec();
 }
 
 async function handleStopRecording() {
-    const audioFilename = await stopRec();
-    stagedAudioUrl.value = audioFilename;
+  const audioFilename = await stopRec();
+  stagedAudioUrl.value = audioFilename;
 }
 
 async function handleFileSelect(files: FileList) {
-    for (const file of files) {
-        await processAndUploadImage(file);
-    }
+  for (const file of Array.from(files)) {
+    await processAndUploadImage(file);
+  }
 }
 
 async function handleSendMessage() {
-    if (!prompt.value.trim() && stagedFiles.value.length === 0 && !stagedAudioUrl.value) {
-        return;
+  if (
+    !prompt.value.trim() &&
+    stagedFiles.value.length === 0 &&
+    !stagedAudioUrl.value
+  ) {
+    return;
+  }
+
+  try {
+    if (!currSessionId.value) {
+      await newSession();
     }
 
-    try {
-        if (!currSessionId.value) {
-            await newSession();
-        }
+    const promptToSend = prompt.value.trim();
+    const audioNameToSend = stagedAudioUrl.value;
+    const filesToSend = stagedFiles.value.map((f) => ({
+      attachment_id: f.attachment_id,
+      url: f.url,
+      original_name: f.original_name,
+      type: f.type,
+    }));
 
-        const promptToSend = prompt.value.trim();
-        const audioNameToSend = stagedAudioUrl.value;
-        const filesToSend = stagedFiles.value.map(f => ({
-            attachment_id: f.attachment_id,
-            url: f.url,
-            original_name: f.original_name,
-            type: f.type
-        }));
+    // 清空输入和附件
+    prompt.value = "";
+    clearStaged();
 
-        // 清空输入和附件
-        prompt.value = '';
-        clearStaged();
+    // 获取选择的提供商和模型
+    const selection = chatInputRef.value?.getCurrentSelection();
+    const selectedProviderId = selection?.providerId || "";
+    const selectedModelName = selection?.modelName || "";
 
-        // 获取选择的提供商和模型
-        const selection = chatInputRef.value?.getCurrentSelection();
-        const selectedProviderId = selection?.providerId || '';
-        const selectedModelName = selection?.modelName || '';
+    await sendMsg(
+      promptToSend,
+      filesToSend,
+      audioNameToSend,
+      selectedProviderId,
+      selectedModelName,
+    );
 
-        await sendMsg(
-            promptToSend,
-            filesToSend,
-            audioNameToSend,
-            selectedProviderId,
-            selectedModelName
-        );
-
-        // 滚动到底部
-        nextTick(() => {
-            messageList.value?.scrollToBottom();
-        });
-    } catch (err) {
-        console.error('Failed to send message:', err);
-        showError(t('features.chat.errors.sendMessageFailed'));
-        // 恢复输入内容，让用户可以重试
-        // 注意：附件已经上传到服务器，所以不恢复附件
-    }
+    // 滚动到底部
+    nextTick(() => {
+      messageList.value?.scrollToBottom();
+    });
+  } catch (err) {
+    console.error("Failed to send message:", err);
+    showError(t("features.chat.errors.sendMessageFailed"));
+    // 恢复输入内容，让用户可以重试
+    // 注意：附件已经上传到服务器，所以不恢复附件
+  }
 }
 
 async function handleStopMessage() {
-    await stopMsg();
+  await stopMsg();
 }
 
 onMounted(async () => {
-    // 独立模式在挂载时创建新会话
-    try {
-        await newSession();
-    } catch (err) {
-        console.error('Failed to create initial session:', err);
-        showError(t('features.chat.errors.createSessionFailed'));
-    }
+  // 独立模式在挂载时创建新会话
+  try {
+    await newSession();
+  } catch (err) {
+    console.error("Failed to create initial session:", err);
+    showError(t("features.chat.errors.createSessionFailed"));
+  }
 });
 
 onBeforeUnmount(() => {
-    cleanupMediaCache();
+  cleanupMediaCache();
 });
 </script>
 
 <style scoped>
 /* 基础动画 */
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .standalone-chat-card {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
 }
 
 .standalone-chat-container {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    padding: 0;
-    overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: 0;
+  overflow: hidden;
 }
 
 .chat-layout {
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    overflow: hidden;
+  height: 100%;
+  max-height: 100%;
+  display: flex;
+  overflow: hidden;
 }
 
 .chat-content-panel {
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .conversation-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px;
-    padding-left: 16px;
-    border-bottom: 1px solid var(--v-theme-border);
-    width: 100%;
-    padding-right: 32px;
-    flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  padding-left: 16px;
+  border-bottom: 1px solid var(--v-theme-border);
+  width: 100%;
+  padding-right: 32px;
+  flex-shrink: 0;
 }
 
 .conversation-header-info h4 {
-    margin: 0;
-    font-weight: 500;
+  margin: 0;
+  font-weight: 500;
 }
 
 .conversation-header-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
 
 .welcome-container {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .welcome-title {
-    font-size: 28px;
-    margin-bottom: 8px;
+  font-size: 28px;
+  margin-bottom: 8px;
 }
 
 .bot-name {
-    font-weight: 700;
-    margin-left: 8px;
-    color: var(--v-theme-secondary);
+  font-weight: 700;
+  margin-left: 8px;
+  color: var(--v-theme-secondary);
 }
 
 .fade-in {
-    animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 .preview-image-large {
-    max-width: 100%;
-    max-height: 70vh;
-    object-fit: contain;
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
 }
 </style>
diff --git a/dashboard/src/i18n/locales/en-US/core/header.json b/dashboard/src/i18n/locales/en-US/core/header.json
index 4da98b8dd..a4593d2a2 100644
--- a/dashboard/src/i18n/locales/en-US/core/header.json
+++ b/dashboard/src/i18n/locales/en-US/core/header.json
@@ -10,7 +10,8 @@
     "theme": {
       "light": "Light Mode",
       "dark": "Dark Mode"
-    }
+    },
+    "logout": "Log Out"
   },
   "updateDialog": {
     "title": "Update AstrBot",
diff --git a/dashboard/src/i18n/locales/en-US/features/settings.json b/dashboard/src/i18n/locales/en-US/features/settings.json
index 6216a2675..27a6c2b76 100644
--- a/dashboard/src/i18n/locales/en-US/features/settings.json
+++ b/dashboard/src/i18n/locales/en-US/features/settings.json
@@ -65,6 +65,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",
diff --git a/dashboard/src/i18n/locales/zh-CN/core/header.json b/dashboard/src/i18n/locales/zh-CN/core/header.json
index 3bb985033..8823e0f7d 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/header.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/header.json
@@ -10,7 +10,8 @@
     "theme": {
       "light": "浅色模式",
       "dark": "深色模式"
-    }
+    },
+    "logout": "退出登录"
   },
   "updateDialog": {
     "title": "更新 AstrBot",
diff --git a/dashboard/src/i18n/locales/zh-CN/features/settings.json b/dashboard/src/i18n/locales/zh-CN/features/settings.json
index c9745569f..e80eae4e9 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/settings.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/settings.json
@@ -65,6 +65,11 @@
       "subtitle": "重启 AstrBot",
       "button": "重启"
     },
+    "logout": {
+      "title": "退出登录",
+      "subtitle": "退出当前账号，回到登录界面",
+      "button": "退出登录"
+    },
     "migration": {
       "title": "数据迁移到 v4.0.0 格式",
       "subtitle": "如果您遇到数据兼容性问题，可以手动启动数据库迁移助手",
diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
index 47905d4ff..9ec2d8945 100644
--- a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
+++ b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -1,72 +1,73 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
-import { useCustomizerStore } from '@/stores/customizer';
-import axios from 'axios';
-import Logo from '@/components/shared/Logo.vue';
-import { md5 } from 'js-md5';
-import { useAuthStore } from '@/stores/auth';
-import { useCommonStore } from '@/stores/common';
-import { MarkdownRender, enableKatex, enableMermaid } from 'markstream-vue';
-import 'markstream-vue/index.css';
-import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/github.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';
-import AboutPage from '@/views/AboutPage.vue';
-import { getDesktopRuntimeInfo } from '@/utils/desktopRuntime';
+import { ref, computed, watch, onMounted } from "vue";
+import { useCustomizerStore } from "@/stores/customizer";
+import axios from "axios";
+import Logo from "@/components/shared/Logo.vue";
+import { md5 } from "js-md5";
+import { useAuthStore } from "@/stores/auth";
+import { useCommonStore } from "@/stores/common";
+import { MarkdownRender, enableKatex, enableMermaid } from "markstream-vue";
+import "markstream-vue/index.css";
+import "katex/dist/katex.min.css";
+import "highlight.js/styles/github.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";
+import AboutPage from "@/views/AboutPage.vue";
+import { getDesktopRuntimeInfo } from "@/utils/desktopRuntime";
 
 enableKatex();
 enableMermaid();
 
 const customizer = useCustomizerStore();
+const authStore = useAuthStore();
 const theme = useTheme();
 const { t } = useI18n();
 const route = useRoute();
 let dialog = ref(false);
-let accountWarning = ref(false)
+let accountWarning = ref(false);
 let updateStatusDialog = ref(false);
 let aboutDialog = ref(false);
-const username = localStorage.getItem('user');
-let password = ref('');
-let newPassword = ref('');
-let confirmPassword = ref('');
-let newUsername = ref('');
-let status = ref('');
-let updateStatus = ref('')
-let releaseMessage = ref('');
+const username = localStorage.getItem("user");
+let password = ref("");
+let newPassword = ref("");
+let confirmPassword = ref("");
+let newUsername = ref("");
+let status = ref("");
+let updateStatus = ref("");
+let releaseMessage = ref("");
 let hasNewVersion = ref(false);
-let botCurrVersion = ref('');
+let botCurrVersion = ref("");
 let dashboardHasNewVersion = ref(false);
-let dashboardCurrentVersion = ref('');
-let version = ref('');
+let dashboardCurrentVersion = ref("");
+let version = ref("");
 let releases = ref([]);
 let updatingDashboardLoading = ref(false);
 let installLoading = ref(false);
 const isDesktopReleaseMode = ref(
-  typeof window !== 'undefined' && !!window.astrbotDesktop?.isDesktop
+  typeof window !== "undefined" && !!window.astrbotDesktop?.isDesktop,
 );
 const desktopUpdateDialog = ref(false);
 const desktopUpdateChecking = ref(false);
 const desktopUpdateInstalling = ref(false);
 const desktopUpdateHasNewVersion = ref(false);
-const desktopUpdateCurrentVersion = ref('-');
-const desktopUpdateLatestVersion = ref('-');
-const desktopUpdateStatus = ref('');
+const desktopUpdateCurrentVersion = ref("-");
+const desktopUpdateLatestVersion = ref("-");
+const desktopUpdateStatus = ref("");
 
 const getAppUpdaterBridge = (): AstrBotAppUpdaterBridge | null => {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return null;
   }
   const bridge = window.astrbotAppUpdater;
   if (
     bridge &&
-    typeof bridge.checkForAppUpdate === 'function' &&
-    typeof bridge.installAppUpdate === 'function'
+    typeof bridge.checkForAppUpdate === "function" &&
+    typeof bridge.installAppUpdate === "function"
   ) {
     return bridge;
   }
@@ -82,28 +83,43 @@ const getSelectedGitHubProxy = () => {
 
 // Release Notes Modal
 let releaseNotesDialog = ref(false);
-let selectedReleaseNotes = ref('');
-let selectedReleaseTag = ref('');
+let selectedReleaseNotes = ref("");
+let selectedReleaseTag = ref("");
 
 const releasesHeader = computed(() => [
-  { title: t('core.header.updateDialog.table.tag'), key: 'tag_name' },
-  { title: t('core.header.updateDialog.table.publishDate'), key: 'published_at' },
-  { title: t('core.header.updateDialog.table.content'), key: 'body' },
-  { title: t('core.header.updateDialog.table.sourceUrl'), key: 'zipball_url' },
-  { title: t('core.header.updateDialog.table.actions'), key: 'switch' }
+  { title: t("core.header.updateDialog.table.tag"), key: "tag_name" },
+  {
+    title: t("core.header.updateDialog.table.publishDate"),
+    key: "published_at",
+  },
+  { title: t("core.header.updateDialog.table.content"), key: "body" },
+  { title: t("core.header.updateDialog.table.sourceUrl"), key: "zipball_url" },
+  { title: t("core.header.updateDialog.table.actions"), key: "switch" },
 ]);
 // Form validation
 const formValid = ref(true);
 const passwordRules = computed(() => [
-  (v: string) => !!v || t('core.header.accountDialog.validation.passwordRequired'),
-  (v: string) => v.length >= 8 || t('core.header.accountDialog.validation.passwordMinLength')
+  (v: string) =>
+    !!v || t("core.header.accountDialog.validation.passwordRequired"),
+  (v: string) =>
+    v.length >= 8 ||
+    t("core.header.accountDialog.validation.passwordMinLength"),
 ]);
 const confirmPasswordRules = computed(() => [
-  (v: string) => !newPassword.value || !!v || t('core.header.accountDialog.validation.passwordRequired'),
-  (v: string) => !newPassword.value || v === newPassword.value || t('core.header.accountDialog.validation.passwordMatch')
+  (v: string) =>
+    !newPassword.value ||
+    !!v ||
+    t("core.header.accountDialog.validation.passwordRequired"),
+  (v: string) =>
+    !newPassword.value ||
+    v === newPassword.value ||
+    t("core.header.accountDialog.validation.passwordMatch"),
 ]);
 const usernameRules = computed(() => [
-  (v: string) => !v || v.length >= 3 || t('core.header.accountDialog.validation.usernameMinLength')
+  (v: string) =>
+    !v ||
+    v.length >= 3 ||
+    t("core.header.accountDialog.validation.usernameMinLength"),
 ]);
 
 // 显示密码相关
@@ -116,7 +132,7 @@ const accountEditStatus = ref({
   loading: false,
   success: false,
   error: false,
-  message: ''
+  message: "",
 });
 
 function cancelDesktopUpdate() {
@@ -131,38 +147,42 @@ async function openDesktopUpdateDialog() {
   desktopUpdateChecking.value = true;
   desktopUpdateInstalling.value = false;
   desktopUpdateHasNewVersion.value = false;
-  desktopUpdateCurrentVersion.value = '-';
-  desktopUpdateLatestVersion.value = '-';
-  desktopUpdateStatus.value = t('core.header.updateDialog.desktopApp.checking');
+  desktopUpdateCurrentVersion.value = "-";
+  desktopUpdateLatestVersion.value = "-";
+  desktopUpdateStatus.value = t("core.header.updateDialog.desktopApp.checking");
 
   const bridge = getAppUpdaterBridge();
   if (!bridge) {
     desktopUpdateChecking.value = false;
-    desktopUpdateStatus.value = t('core.header.updateDialog.desktopApp.checkFailed');
+    desktopUpdateStatus.value = t(
+      "core.header.updateDialog.desktopApp.checkFailed",
+    );
     return;
   }
 
   try {
     const result = await bridge.checkForAppUpdate();
     if (!result?.ok) {
-      desktopUpdateCurrentVersion.value = result?.currentVersion || '-';
+      desktopUpdateCurrentVersion.value = result?.currentVersion || "-";
       desktopUpdateLatestVersion.value =
-        result?.latestVersion || result?.currentVersion || '-';
+        result?.latestVersion || result?.currentVersion || "-";
       desktopUpdateStatus.value =
-        result?.reason || t('core.header.updateDialog.desktopApp.checkFailed');
+        result?.reason || t("core.header.updateDialog.desktopApp.checkFailed");
       return;
     }
 
-    desktopUpdateCurrentVersion.value = result.currentVersion || '-';
+    desktopUpdateCurrentVersion.value = result.currentVersion || "-";
     desktopUpdateLatestVersion.value =
-      result.latestVersion || result.currentVersion || '-';
+      result.latestVersion || result.currentVersion || "-";
     desktopUpdateHasNewVersion.value = !!result.hasUpdate;
     desktopUpdateStatus.value = result.hasUpdate
-      ? t('core.header.updateDialog.desktopApp.hasNewVersion')
-      : t('core.header.updateDialog.desktopApp.isLatest');
+      ? t("core.header.updateDialog.desktopApp.hasNewVersion")
+      : t("core.header.updateDialog.desktopApp.isLatest");
   } catch (error) {
     console.error(error);
-    desktopUpdateStatus.value = t('core.header.updateDialog.desktopApp.checkFailed');
+    desktopUpdateStatus.value = t(
+      "core.header.updateDialog.desktopApp.checkFailed",
+    );
   } finally {
     desktopUpdateChecking.value = false;
   }
@@ -175,12 +195,16 @@ async function confirmDesktopUpdate() {
 
   const bridge = getAppUpdaterBridge();
   if (!bridge) {
-    desktopUpdateStatus.value = t('core.header.updateDialog.desktopApp.installFailed');
+    desktopUpdateStatus.value = t(
+      "core.header.updateDialog.desktopApp.installFailed",
+    );
     return;
   }
 
   desktopUpdateInstalling.value = true;
-  desktopUpdateStatus.value = t('core.header.updateDialog.desktopApp.installing');
+  desktopUpdateStatus.value = t(
+    "core.header.updateDialog.desktopApp.installing",
+  );
 
   try {
     const result = await bridge.installAppUpdate();
@@ -189,10 +213,12 @@ async function confirmDesktopUpdate() {
       return;
     }
     desktopUpdateStatus.value =
-      result?.reason || t('core.header.updateDialog.desktopApp.installFailed');
+      result?.reason || t("core.header.updateDialog.desktopApp.installFailed");
   } catch (error) {
     console.error(error);
-    desktopUpdateStatus.value = t('core.header.updateDialog.desktopApp.installFailed');
+    desktopUpdateStatus.value = t(
+      "core.header.updateDialog.desktopApp.installFailed",
+    );
   } finally {
     desktopUpdateInstalling.value = false;
   }
@@ -210,34 +236,44 @@ function handleUpdateClick() {
 
 // 检测是否为预发布版本
 const isPreRelease = (version: string) => {
-  const preReleaseKeywords = ['alpha', 'beta', 'rc', 'pre', 'preview', 'dev'];
+  const preReleaseKeywords = ["alpha", "beta", "rc", "pre", "preview", "dev"];
   const lowerVersion = version.toLowerCase();
-  return preReleaseKeywords.some(keyword => lowerVersion.includes(keyword));
+  return preReleaseKeywords.some((keyword) => lowerVersion.includes(keyword));
 };
 
+// 退出登录
+function handleLogout() {
+  if (confirm(t("core.common.dialog.confirmMessage"))) {
+    authStore.logout();
+  }
+}
+
 // 账户修改
 function accountEdit() {
   accountEditStatus.value.loading = true;
   accountEditStatus.value.error = false;
   accountEditStatus.value.success = false;
 
-  const passwordHash = password.value ? md5(password.value) : '';
-  const newPasswordHash = newPassword.value ? md5(newPassword.value) : '';
-  const confirmPasswordHash = confirmPassword.value ? md5(confirmPassword.value) : '';
+  const passwordHash = password.value ? md5(password.value) : "";
+  const newPasswordHash = newPassword.value ? md5(newPassword.value) : "";
+  const confirmPasswordHash = confirmPassword.value
+    ? md5(confirmPassword.value)
+    : "";
 
-  axios.post('/api/auth/account/edit', {
-    password: passwordHash,
-    new_password: newPasswordHash,
-    confirm_password: confirmPasswordHash,
-    new_username: newUsername.value ? newUsername.value : username
-  })
+  axios
+    .post("/api/auth/account/edit", {
+      password: passwordHash,
+      new_password: newPasswordHash,
+      confirm_password: confirmPasswordHash,
+      new_username: newUsername.value ? newUsername.value : username,
+    })
     .then((res) => {
-      if (res.data.status == 'error') {
+      if (res.data.status == "error") {
         accountEditStatus.value.error = true;
         accountEditStatus.value.message = res.data.message;
-        password.value = '';
-        newPassword.value = '';
-        confirmPassword.value = '';
+        password.value = "";
+        newPassword.value = "";
+        confirmPassword.value = "";
         return;
       }
       accountEditStatus.value.success = true;
@@ -251,10 +287,13 @@ function accountEdit() {
     .catch((err) => {
       console.log(err);
       accountEditStatus.value.error = true;
-      accountEditStatus.value.message = typeof err === 'string' ? err : t('core.header.accountDialog.messages.updateFailed');
-      password.value = '';
-      newPassword.value = '';
-      confirmPassword.value = '';
+      accountEditStatus.value.message =
+        typeof err === "string"
+          ? err
+          : t("core.header.accountDialog.messages.updateFailed");
+      password.value = "";
+      newPassword.value = "";
+      confirmPassword.value = "";
     })
     .finally(() => {
       accountEditStatus.value.loading = false;
@@ -262,7 +301,8 @@ function accountEdit() {
 }
 
 function getVersion() {
-  axios.get('/api/stat/version')
+  axios
+    .get("/api/stat/version")
     .then((res) => {
       botCurrVersion.value = "v" + res.data.data.version;
       dashboardCurrentVersion.value = res.data.data?.dashboard_version;
@@ -270,9 +310,9 @@ function getVersion() {
       if (change_pwd_hint) {
         dialog.value = true;
         accountWarning.value = true;
-        localStorage.setItem('change_pwd_hint', 'true');
+        localStorage.setItem("change_pwd_hint", "true");
       } else {
-        localStorage.removeItem('change_pwd_hint');
+        localStorage.removeItem("change_pwd_hint");
       }
     })
     .catch((err) => {
@@ -281,14 +321,15 @@ function getVersion() {
 }
 
 function checkUpdate() {
-  updateStatus.value = t('core.header.updateDialog.status.checking');
-  axios.get('/api/update/check')
+  updateStatus.value = t("core.header.updateDialog.status.checking");
+  axios
+    .get("/api/update/check")
     .then((res) => {
       hasNewVersion.value = res.data.data.has_new_version;
 
       if (res.data.data.has_new_version) {
         releaseMessage.value = res.data.message;
-        updateStatus.value = t('core.header.version.hasNewVersion');
+        updateStatus.value = t("core.header.version.hasNewVersion");
       } else {
         updateStatus.value = res.data.message;
       }
@@ -304,35 +345,35 @@ function checkUpdate() {
         return;
       }
       console.log(err);
-      updateStatus.value = err
+      updateStatus.value = err;
     });
 }
 
 function getReleases() {
-  return axios.get('/api/update/releases')
+  return axios
+    .get("/api/update/releases")
     .then((res) => {
       releases.value = res.data.data.map((item: any) => {
         item.published_at = new Date(item.published_at).toLocaleString();
         return item;
-      })
+      });
     })
     .catch((err) => {
       console.log(err);
     });
 }
 
-
-
 function switchVersion(version: string) {
-  updateStatus.value = t('core.header.updateDialog.status.switching');
+  updateStatus.value = t("core.header.updateDialog.status.switching");
   installLoading.value = true;
-  axios.post('/api/update/do', {
-    version: version,
-    proxy: getSelectedGitHubProxy()
-  })
+  axios
+    .post("/api/update/do", {
+      version: version,
+      proxy: getSelectedGitHubProxy(),
+    })
     .then((res) => {
       updateStatus.value = res.data.message;
-      if (res.data.status == 'ok') {
+      if (res.data.status == "ok") {
         setTimeout(() => {
           window.location.reload();
         }, 1000);
@@ -340,19 +381,21 @@ function switchVersion(version: string) {
     })
     .catch((err) => {
       console.log(err);
-      updateStatus.value = err
-    }).finally(() => {
+      updateStatus.value = err;
+    })
+    .finally(() => {
       installLoading.value = false;
     });
 }
 
 function updateDashboard() {
   updatingDashboardLoading.value = true;
-  updateStatus.value = t('core.header.updateDialog.status.updating');
-  axios.post('/api/update/dashboard')
+  updateStatus.value = t("core.header.updateDialog.status.updating");
+  axios
+    .post("/api/update/dashboard")
     .then((res) => {
       updateStatus.value = res.data.message;
-      if (res.data.status == 'ok') {
+      if (res.data.status == "ok") {
         setTimeout(() => {
           window.location.reload();
         }, 1000);
@@ -360,14 +403,18 @@ function updateDashboard() {
     })
     .catch((err) => {
       console.log(err);
-      updateStatus.value = err
-    }).finally(() => {
+      updateStatus.value = err;
+    })
+    .finally(() => {
       updatingDashboardLoading.value = false;
     });
 }
 
 function toggleDarkMode() {
-  const newTheme = customizer.uiTheme === 'PurpleThemeDark' ? 'PurpleTheme' : 'PurpleThemeDark';
+  const newTheme =
+    customizer.uiTheme === "PurpleThemeDark"
+      ? "PurpleTheme"
+      : "PurpleThemeDark";
   customizer.SET_UI_THEME(newTheme);
   theme.global.name.value = newTheme;
 }
@@ -379,10 +426,10 @@ function openReleaseNotesDialog(body: string, tag: string) {
 }
 
 function handleLogoClick() {
-  if (customizer.viewMode === 'chat') {
+  if (customizer.viewMode === "chat") {
     aboutDialog.value = true;
   } else {
-    router.push('/about');
+    router.push("/about");
   }
 }
 
@@ -396,20 +443,23 @@ commonStore.getStartTime();
 // 视图模式切换
 const viewMode = computed({
   get: () => customizer.viewMode,
-  set: (value: 'bot' | 'chat') => {
+  set: (value: "bot" | "chat") => {
     customizer.SET_VIEW_MODE(value);
-  }
+  },
 });
 
 // 监听 viewMode 变化，切换到 bot 模式时跳转到首页
-watch(() => customizer.viewMode, (newMode, oldMode) => {
-  if (newMode === 'bot' && oldMode === 'chat') {
-    // 从 chat 模式切换到 bot 模式时，跳转到首页
-    if (route.path !== '/') {
-      router.push('/');
+watch(
+  () => customizer.viewMode,
+  (newMode, oldMode) => {
+    if (newMode === "bot" && oldMode === "chat") {
+      // 从 chat 模式切换到 bot 模式时，跳转到首页
+      if (route.path !== "/") {
+        router.push("/");
+      }
     }
-  }
-});
+  },
+);
 
 // Merry Christmas! 🎄
 const isChristmas = computed(() => {
@@ -420,13 +470,14 @@ const isChristmas = computed(() => {
 });
 
 // 语言切换相关
-const { languageOptions, currentLanguage, switchLanguage, locale } = useLanguageSwitcher();
-const languages = computed(() => 
-  languageOptions.value.map(lang => ({
+const { languageOptions, currentLanguage, switchLanguage, locale } =
+  useLanguageSwitcher();
+const languages = computed(() =>
+  languageOptions.value.map((lang) => ({
     code: lang.value,
     name: lang.label,
-    flag: lang.flag
-  }))
+    flag: lang.flag,
+  })),
 );
 const currentLocale = computed(() => locale.value);
 const changeLanguage = async (langCode: string) => {
@@ -440,54 +491,100 @@ onMounted(async () => {
     dashboardHasNewVersion.value = false;
   }
 });
-
 </script>
 
 <template>
   <v-app-bar elevation="0" height="50" class="top-header">
-
     <!-- 桌面端 menu 按钮 - 仅在 bot 模式下显示 -->
-    <v-btn v-if="customizer.viewMode === 'bot' && useCustomizerStore().uiTheme === 'PurpleTheme'" style="margin-left: 16px;"
-      class="hidden-md-and-down"  icon rounded="sm" variant="flat"
-      @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)">
+    <v-btn
+      v-if="
+        customizer.viewMode === 'bot' &&
+        useCustomizerStore().uiTheme === 'PurpleTheme'
+      "
+      style="margin-left: 16px"
+      class="hidden-md-and-down"
+      icon
+      rounded="sm"
+      variant="flat"
+      @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
+    >
       <v-icon>mdi-menu</v-icon>
     </v-btn>
-    <v-btn v-else-if="customizer.viewMode === 'bot'"
-      style="margin-left: 22px;"
-      class="hidden-md-and-down" icon rounded="sm" variant="flat"
-      @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)">
+    <v-btn
+      v-else-if="customizer.viewMode === 'bot'"
+      style="margin-left: 22px"
+      class="hidden-md-and-down"
+      icon
+      rounded="sm"
+      variant="flat"
+      @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
+    >
       <v-icon>mdi-menu</v-icon>
     </v-btn>
     <!-- 移动端 menu 按钮 - 仅在 bot 模式下显示 -->
-    <v-btn v-if="customizer.viewMode === 'bot' && useCustomizerStore().uiTheme === 'PurpleTheme'" class="hidden-lg-and-up ms-3"
-      icon rounded="sm" variant="flat" @click.stop="customizer.SET_SIDEBAR_DRAWER">
+    <v-btn
+      v-if="
+        customizer.viewMode === 'bot' &&
+        useCustomizerStore().uiTheme === 'PurpleTheme'
+      "
+      class="hidden-lg-and-up ms-3"
+      icon
+      rounded="sm"
+      variant="flat"
+      @click.stop="customizer.SET_SIDEBAR_DRAWER"
+    >
       <v-icon>mdi-menu</v-icon>
     </v-btn>
-    <v-btn v-else-if="customizer.viewMode === 'bot'" class="hidden-lg-and-up ms-3" icon rounded="sm" variant="flat"
-      @click.stop="customizer.SET_SIDEBAR_DRAWER">
+    <v-btn
+      v-else-if="customizer.viewMode === 'bot'"
+      class="hidden-lg-and-up ms-3"
+      icon
+      rounded="sm"
+      variant="flat"
+      @click.stop="customizer.SET_SIDEBAR_DRAWER"
+    >
       <v-icon>mdi-menu</v-icon>
     </v-btn>
 
-    <div class="logo-container" :class="{ 'mobile-logo': $vuetify.display.xs, 'chat-mode-logo': customizer.viewMode === 'chat' }" @click="handleLogoClick">
-      <span class="logo-text Outfit">Astr<span class="logo-text bot-text-wrapper">Bot
-        <img v-if="isChristmas" src="@/assets/images/xmas-hat.png" alt="Christmas hat" class="xmas-hat" />
-      </span></span>
-      <span class="logo-text logo-text-light Outfit" style="color: grey;" v-if="customizer.viewMode === 'chat'">ChatUI</span>
+    <div
+      class="logo-container"
+      :class="{
+        'mobile-logo': $vuetify.display.xs,
+        'chat-mode-logo': customizer.viewMode === 'chat',
+      }"
+      @click="handleLogoClick"
+    >
+      <span class="logo-text Outfit"
+        >Astr<span class="logo-text bot-text-wrapper"
+          >Bot
+          <img
+            v-if="isChristmas"
+            src="@/assets/images/xmas-hat.png"
+            alt="Christmas hat"
+            class="xmas-hat"
+          /> </span
+      ></span>
+      <span
+        class="logo-text logo-text-light Outfit"
+        style="color: grey"
+        v-if="customizer.viewMode === 'chat'"
+        >ChatUI</span
+      >
       <span class="version-text hidden-xs">{{ botCurrVersion }}</span>
     </div>
 
-  <v-spacer />
+    <v-spacer />
 
     <!-- 版本提示信息 - 在手机上隐藏 -->
     <div class="mr-4 hidden-xs">
       <small v-if="hasNewVersion">
-        {{ t('core.header.version.hasNewVersion') }}
+        {{ t("core.header.version.hasNewVersion") }}
       </small>
       <small v-else-if="dashboardHasNewVersion && !isDesktopReleaseMode">
-        {{ t('core.header.version.dashboardHasNewVersion') }}
+        {{ t("core.header.version.dashboardHasNewVersion") }}
       </small>
     </div>
-    
+
     <!-- Bot/Chat 模式切换按钮 -->
     <v-btn-toggle
       v-model="viewMode"
@@ -507,7 +604,6 @@ onMounted(async () => {
       </v-btn>
     </v-btn-toggle>
 
-
     <!-- 功能菜单 -->
     <StyledMenu offset="12" location="bottom end">
       <template v-slot:activator="{ props: activatorProps }">
@@ -548,11 +644,19 @@ onMounted(async () => {
       >
         <template v-slot:prepend>
           <v-icon>
-            {{ useCustomizerStore().uiTheme === 'PurpleThemeDark' ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}
+            {{
+              useCustomizerStore().uiTheme === "PurpleThemeDark"
+                ? "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') }}
+          {{
+            useCustomizerStore().uiTheme === "PurpleThemeDark"
+              ? t("core.header.buttons.theme.light")
+              : t("core.header.buttons.theme.dark")
+          }}
         </v-list-item-title>
       </v-list-item>
 
@@ -565,131 +669,242 @@ onMounted(async () => {
         <template v-slot:prepend>
           <v-icon>mdi-arrow-up-circle</v-icon>
         </template>
-        <v-list-item-title>{{ t('core.header.updateDialog.title') }}</v-list-item-title>
-        <template v-slot:append v-if="hasNewVersion || (dashboardHasNewVersion && !isDesktopReleaseMode)">
-          <v-chip size="x-small" color="primary" variant="tonal" class="ml-2">!</v-chip>
+        <v-list-item-title>{{
+          t("core.header.updateDialog.title")
+        }}</v-list-item-title>
+        <template
+          v-slot:append
+          v-if="
+            hasNewVersion || (dashboardHasNewVersion && !isDesktopReleaseMode)
+          "
+        >
+          <v-chip size="x-small" color="primary" variant="tonal" class="ml-2"
+            >!</v-chip
+          >
         </template>
       </v-list-item>
 
       <!-- 账户按钮 -->
-      <v-list-item
-        @click="dialog = true"
-        class="styled-menu-item"
-        rounded="md"
-      >
+      <v-list-item @click="dialog = true" class="styled-menu-item" rounded="md">
         <template v-slot:prepend>
           <v-icon>mdi-account</v-icon>
         </template>
-        <v-list-item-title>{{ t('core.header.accountDialog.title') }}</v-list-item-title>
+        <v-list-item-title>{{
+          t("core.header.accountDialog.title")
+        }}</v-list-item-title>
+      </v-list-item>
+
+      <!-- 退出登录 -->
+      <v-list-item @click="handleLogout" class="styled-menu-item" rounded="md">
+        <template v-slot:prepend>
+          <v-icon>mdi-logout</v-icon>
+        </template>
+        <v-list-item-title>{{
+          t("core.header.buttons.logout")
+        }}</v-list-item-title>
       </v-list-item>
     </StyledMenu>
 
     <!-- 更新对话框 -->
-    <v-dialog v-model="updateStatusDialog" :width="$vuetify.display.smAndDown ? '100%' : '1200'"
-      :fullscreen="$vuetify.display.xs">
+    <v-dialog
+      v-model="updateStatusDialog"
+      :width="$vuetify.display.smAndDown ? '100%' : '1200'"
+      :fullscreen="$vuetify.display.xs"
+    >
       <v-card>
         <v-card-title class="mobile-card-title">
-          <span class="text-h5">{{ t('core.header.updateDialog.title') }}</span>
-          <v-btn v-if="$vuetify.display.xs" icon @click="updateStatusDialog = false">
+          <span class="text-h5">{{ t("core.header.updateDialog.title") }}</span>
+          <v-btn
+            v-if="$vuetify.display.xs"
+            icon
+            @click="updateStatusDialog = false"
+          >
             <v-icon>mdi-close</v-icon>
           </v-btn>
         </v-card-title>
         <v-card-text>
           <v-container>
-            <v-progress-linear v-show="installLoading" class="mb-4" indeterminate color="primary"></v-progress-linear>
+            <v-progress-linear
+              v-show="installLoading"
+              class="mb-4"
+              indeterminate
+              color="primary"
+            ></v-progress-linear>
 
             <div>
-              <h1 style="display:inline-block;">{{ botCurrVersion }}</h1>
-              <small style="margin-left: 4px;">{{ updateStatus }}</small>
+              <h1 style="display: inline-block">{{ botCurrVersion }}</h1>
+              <small style="margin-left: 4px">{{ updateStatus }}</small>
             </div>
 
-            <div v-if="releaseMessage"
-              style="background-color: #646cff24; padding: 16px; border-radius: 10px; font-size: 14px; max-height: 400px; overflow-y: auto;">
-              <MarkdownRender :content="releaseMessage" :typewriter="false" class="markdown-content" />
+            <div
+              v-if="releaseMessage"
+              style="
+                background-color: #646cff24;
+                padding: 16px;
+                border-radius: 10px;
+                font-size: 14px;
+                max-height: 400px;
+                overflow-y: auto;
+              "
+            >
+              <MarkdownRender
+                :content="releaseMessage"
+                :typewriter="false"
+                class="markdown-content"
+              />
             </div>
 
             <div class="mb-4 mt-4">
-              <small>{{ t('core.header.updateDialog.tip') }}
-                {{ t('core.header.updateDialog.tipContinue') }}</small>
+              <small
+                >{{ t("core.header.updateDialog.tip") }}
+                {{ t("core.header.updateDialog.tipContinue") }}</small
+              >
             </div>
 
             <!-- 发行版 -->
             <div>
-                <div class="mb-4">
-                  <small>{{ t('core.header.updateDialog.dockerTip') }} <a
-                      href="https://containrrr.dev/watchtower/usage-overview/">{{
-                        t('core.header.updateDialog.dockerTipLink')
-                      }}</a> {{ t('core.header.updateDialog.dockerTipContinue') }}</small>
+              <div class="mb-4">
+                <small
+                  >{{ t("core.header.updateDialog.dockerTip") }}
+                  <a href="https://containrrr.dev/watchtower/usage-overview/">{{
+                    t("core.header.updateDialog.dockerTipLink")
+                  }}</a>
+                  {{ t("core.header.updateDialog.dockerTipContinue") }}</small
+                >
+              </div>
+
+              <v-alert
+                v-if="
+                  releases.some((item: any) => isPreRelease(item['tag_name']))
+                "
+                type="warning"
+                variant="tonal"
+                border="start"
+              >
+                <template v-slot:prepend>
+                  <v-icon>mdi-alert-circle-outline</v-icon>
+                </template>
+                <div class="text-body-2">
+                  <strong>{{
+                    t("core.header.updateDialog.preReleaseWarning.title")
+                  }}</strong>
+                  <br />
+                  {{
+                    t("core.header.updateDialog.preReleaseWarning.description")
+                  }}
+                  <a
+                    href="https://github.com/AstrBotDevs/AstrBot/issues"
+                    target="_blank"
+                    class="text-decoration-none"
+                  >
+                    {{
+                      t("core.header.updateDialog.preReleaseWarning.issueLink")
+                    }}
+                  </a>
                 </div>
+              </v-alert>
 
-                <v-alert v-if="releases.some((item: any) => isPreRelease(item['tag_name']))" type="warning" variant="tonal"
-                  border="start">
-                  <template v-slot:prepend>
-                    <v-icon>mdi-alert-circle-outline</v-icon>
-                  </template>
-                  <div class="text-body-2">
-                    <strong>{{ t('core.header.updateDialog.preReleaseWarning.title') }}</strong>
-                    <br>
-                    {{ t('core.header.updateDialog.preReleaseWarning.description') }}
-                    <a href="https://github.com/AstrBotDevs/AstrBot/issues" target="_blank" class="text-decoration-none">
-                      {{ t('core.header.updateDialog.preReleaseWarning.issueLink') }}
-                    </a>
+              <v-data-table
+                :headers="releasesHeader"
+                :items="releases"
+                item-key="name"
+                :items-per-page="8"
+              >
+                <template v-slot:item.tag_name="{ item }: { item: any }">
+                  <div class="d-flex align-center">
+                    <span>{{ item.tag_name }}</span>
+                    <v-chip
+                      v-if="isPreRelease(item.tag_name)"
+                      size="x-small"
+                      color="warning"
+                      variant="tonal"
+                      class="ml-2"
+                    >
+                      {{ t("core.header.updateDialog.preRelease") }}
+                    </v-chip>
                   </div>
-                </v-alert>
-
-                <v-data-table :headers="releasesHeader" :items="releases" item-key="name" :items-per-page="8">
-                  <template v-slot:item.tag_name="{ item }: { item: any }">
-                    <div class="d-flex align-center">
-                      <span>{{ item.tag_name }}</span>
-                      <v-chip v-if="isPreRelease(item.tag_name)" size="x-small" color="warning" variant="tonal"
-                        class="ml-2">
-                        {{ t('core.header.updateDialog.preRelease') }}
-                      </v-chip>
-                    </div>
-                  </template>
-                  <template v-slot:item.body="{ item }: { item: { body: string; tag_name: string } }">
-                    <v-btn @click="openReleaseNotesDialog(item.body, item.tag_name)" rounded="xl" variant="tonal"
-                      color="primary" size="x-small">{{
-                        t('core.header.updateDialog.table.view') }}</v-btn>
-                  </template>
-                  <template v-slot:item.switch="{ item }: { item: { tag_name: string } }">
-                    <v-btn @click="switchVersion(item.tag_name)" rounded="xl" variant="plain" color="primary">
-                      {{ t('core.header.updateDialog.table.switch') }}
-                    </v-btn>
-                  </template>
-                </v-data-table>
+                </template>
+                <template
+                  v-slot:item.body="{
+                    item,
+                  }: {
+                    item: { body: string; tag_name: string };
+                  }"
+                >
+                  <v-btn
+                    @click="openReleaseNotesDialog(item.body, item.tag_name)"
+                    rounded="xl"
+                    variant="tonal"
+                    color="primary"
+                    size="x-small"
+                    >{{ t("core.header.updateDialog.table.view") }}</v-btn
+                  >
+                </template>
+                <template
+                  v-slot:item.switch="{ item }: { item: { tag_name: string } }"
+                >
+                  <v-btn
+                    @click="switchVersion(item.tag_name)"
+                    rounded="xl"
+                    variant="plain"
+                    color="primary"
+                  >
+                    {{ t("core.header.updateDialog.table.switch") }}
+                  </v-btn>
+                </template>
+              </v-data-table>
             </div>
 
             <v-divider class="mt-4 mb-4"></v-divider>
-            <div style="margin-top: 16px;">
-              <h3 class="mb-4">{{ t('core.header.updateDialog.dashboardUpdate.title') }}</h3>
+            <div style="margin-top: 16px">
+              <h3 class="mb-4">
+                {{ t("core.header.updateDialog.dashboardUpdate.title") }}
+              </h3>
               <div class="mb-4">
-                <small>{{ t('core.header.updateDialog.dashboardUpdate.currentVersion') }} {{ dashboardCurrentVersion
-                  }}</small>
-                <br>
-
+                <small
+                  >{{
+                    t("core.header.updateDialog.dashboardUpdate.currentVersion")
+                  }}
+                  {{ dashboardCurrentVersion }}</small
+                >
+                <br />
               </div>
 
               <div class="mb-4">
                 <p v-if="dashboardHasNewVersion">
-                  {{ t('core.header.updateDialog.dashboardUpdate.hasNewVersion') }}
+                  {{
+                    t("core.header.updateDialog.dashboardUpdate.hasNewVersion")
+                  }}
                 </p>
                 <p v-else="dashboardHasNewVersion">
-                  {{ t('core.header.updateDialog.dashboardUpdate.isLatest') }}
+                  {{ t("core.header.updateDialog.dashboardUpdate.isLatest") }}
                 </p>
               </div>
 
-              <v-btn color="primary" style="border-radius: 10px;" @click="updateDashboard()"
-                :disabled="!dashboardHasNewVersion" :loading="updatingDashboardLoading">
-                {{ t('core.header.updateDialog.dashboardUpdate.downloadAndUpdate') }}
+              <v-btn
+                color="primary"
+                style="border-radius: 10px"
+                @click="updateDashboard()"
+                :disabled="!dashboardHasNewVersion"
+                :loading="updatingDashboardLoading"
+              >
+                {{
+                  t(
+                    "core.header.updateDialog.dashboardUpdate.downloadAndUpdate",
+                  )
+                }}
               </v-btn>
             </div>
           </v-container>
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="blue-darken-1" variant="text" @click="updateStatusDialog = false">
-            {{ t('core.common.close') }}
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="updateStatusDialog = false"
+          >
+            {{ t("core.common.close") }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -699,16 +914,26 @@ onMounted(async () => {
     <v-dialog v-model="releaseNotesDialog" max-width="800">
       <v-card>
         <v-card-title class="text-h5">
-          {{ t('core.header.updateDialog.releaseNotes.title') }}: {{ selectedReleaseTag }}
+          {{ t("core.header.updateDialog.releaseNotes.title") }}:
+          {{ selectedReleaseTag }}
         </v-card-title>
         <v-card-text
-          style="font-size: 14px; max-height: 400px; overflow-y: auto;">
-          <MarkdownRender :content="selectedReleaseNotes" :typewriter="false" class="markdown-content" />
+          style="font-size: 14px; max-height: 400px; overflow-y: auto"
+        >
+          <MarkdownRender
+            :content="selectedReleaseNotes"
+            :typewriter="false"
+            class="markdown-content"
+          />
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="blue-darken-1" variant="text" @click="releaseNotesDialog = false">
-            {{ t('core.common.close') }}
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="releaseNotesDialog = false"
+          >
+            {{ t("core.common.close") }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -717,21 +942,29 @@ onMounted(async () => {
     <v-dialog v-model="desktopUpdateDialog" max-width="460">
       <v-card>
         <v-card-title class="text-h3 pa-4 pl-6 pb-0">
-          {{ t('core.header.updateDialog.desktopApp.title') }}
+          {{ t("core.header.updateDialog.desktopApp.title") }}
         </v-card-title>
         <v-card-text>
           <div class="mb-3">
-            {{ t('core.header.updateDialog.desktopApp.message') }}
+            {{ t("core.header.updateDialog.desktopApp.message") }}
           </div>
           <v-alert type="info" variant="tonal" density="compact">
             <div>
-              {{ t('core.header.updateDialog.desktopApp.currentVersion') }}
+              {{ t("core.header.updateDialog.desktopApp.currentVersion") }}
               <strong>{{ desktopUpdateCurrentVersion }}</strong>
             </div>
             <div>
-              {{ t('core.header.updateDialog.desktopApp.latestVersion') }}
-              <strong v-if="!desktopUpdateChecking">{{ desktopUpdateLatestVersion }}</strong>
-              <v-progress-circular v-else indeterminate size="16" width="2" class="ml-1" />
+              {{ t("core.header.updateDialog.desktopApp.latestVersion") }}
+              <strong v-if="!desktopUpdateChecking">{{
+                desktopUpdateLatestVersion
+              }}</strong>
+              <v-progress-circular
+                v-else
+                indeterminate
+                size="16"
+                width="2"
+                class="ml-1"
+              />
             </div>
           </v-alert>
           <div class="text-caption mt-3">
@@ -740,63 +973,139 @@ onMounted(async () => {
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="grey" variant="text" @click="cancelDesktopUpdate" :disabled="desktopUpdateInstalling">
-            {{ t('core.common.dialog.cancelButton') }}
+          <v-btn
+            color="grey"
+            variant="text"
+            @click="cancelDesktopUpdate"
+            :disabled="desktopUpdateInstalling"
+          >
+            {{ t("core.common.dialog.cancelButton") }}
           </v-btn>
-          <v-btn color="primary" variant="flat" @click="confirmDesktopUpdate"
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="confirmDesktopUpdate"
             :loading="desktopUpdateInstalling"
-            :disabled="desktopUpdateChecking || desktopUpdateInstalling || !desktopUpdateHasNewVersion">
-            {{ t('core.common.dialog.confirmButton') }}
+            :disabled="
+              desktopUpdateChecking ||
+              desktopUpdateInstalling ||
+              !desktopUpdateHasNewVersion
+            "
+          >
+            {{ t("core.common.dialog.confirmButton") }}
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- 账户对话框 -->
-    <v-dialog v-model="dialog" persistent :max-width="$vuetify.display.xs ? '90%' : '500'">
+    <v-dialog
+      v-model="dialog"
+      persistent
+      :max-width="$vuetify.display.xs ? '90%' : '500'"
+    >
       <v-card class="account-dialog">
         <v-card-text class="py-6">
           <div class="d-flex flex-column align-center mb-6">
-            <logo :title="t('core.header.logoTitle')" :subtitle="t('core.header.accountDialog.title')"></logo>
+            <logo
+              :title="t('core.header.logoTitle')"
+              :subtitle="t('core.header.accountDialog.title')"
+            ></logo>
           </div>
-          <v-alert v-if="accountWarning" type="warning" variant="tonal" border="start" class="mb-4">
-            <strong>{{ t('core.header.accountDialog.securityWarning') }}</strong>
+          <v-alert
+            v-if="accountWarning"
+            type="warning"
+            variant="tonal"
+            border="start"
+            class="mb-4"
+          >
+            <strong>{{
+              t("core.header.accountDialog.securityWarning")
+            }}</strong>
           </v-alert>
 
-          <v-alert v-if="accountEditStatus.success" type="success" variant="tonal" border="start" class="mb-4">
+          <v-alert
+            v-if="accountEditStatus.success"
+            type="success"
+            variant="tonal"
+            border="start"
+            class="mb-4"
+          >
             {{ accountEditStatus.message }}
           </v-alert>
 
-          <v-alert v-if="accountEditStatus.error" type="error" variant="tonal" border="start" class="mb-4">
+          <v-alert
+            v-if="accountEditStatus.error"
+            type="error"
+            variant="tonal"
+            border="start"
+            class="mb-4"
+          >
             {{ accountEditStatus.message }}
           </v-alert>
 
           <v-form v-model="formValid" @submit.prevent="accountEdit">
-            <v-text-field v-model="password" :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
-              :type="showPassword ? 'text' : 'password'" :label="t('core.header.accountDialog.form.currentPassword')"
-              variant="outlined" required clearable @click:append-inner="showPassword = !showPassword"
-              prepend-inner-icon="mdi-lock-outline" hide-details="auto" class="mb-4"></v-text-field>
+            <v-text-field
+              v-model="password"
+              :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+              :type="showPassword ? 'text' : 'password'"
+              :label="t('core.header.accountDialog.form.currentPassword')"
+              variant="outlined"
+              required
+              clearable
+              @click:append-inner="showPassword = !showPassword"
+              prepend-inner-icon="mdi-lock-outline"
+              hide-details="auto"
+              class="mb-4"
+            ></v-text-field>
 
-            <v-text-field v-model="newPassword" :append-inner-icon="showNewPassword ? 'mdi-eye-off' : 'mdi-eye'"
-              :type="showNewPassword ? 'text' : 'password'" :rules="passwordRules"
-              :label="t('core.header.accountDialog.form.newPassword')" variant="outlined" clearable
-              @click:append-inner="showNewPassword = !showNewPassword" prepend-inner-icon="mdi-lock-plus-outline"
-              :hint="t('core.header.accountDialog.form.passwordHint')" persistent-hint class="mb-4"></v-text-field>
+            <v-text-field
+              v-model="newPassword"
+              :append-inner-icon="showNewPassword ? 'mdi-eye-off' : 'mdi-eye'"
+              :type="showNewPassword ? 'text' : 'password'"
+              :rules="passwordRules"
+              :label="t('core.header.accountDialog.form.newPassword')"
+              variant="outlined"
+              clearable
+              @click:append-inner="showNewPassword = !showNewPassword"
+              prepend-inner-icon="mdi-lock-plus-outline"
+              :hint="t('core.header.accountDialog.form.passwordHint')"
+              persistent-hint
+              class="mb-4"
+            ></v-text-field>
 
-            <v-text-field v-model="confirmPassword" :append-inner-icon="showConfirmPassword ? 'mdi-eye-off' : 'mdi-eye'"
-              :type="showConfirmPassword ? 'text' : 'password'" :rules="confirmPasswordRules"
-              :label="t('core.header.accountDialog.form.confirmPassword')" variant="outlined" clearable
-              @click:append-inner="showConfirmPassword = !showConfirmPassword" prepend-inner-icon="mdi-lock-check-outline"
-              :hint="t('core.header.accountDialog.form.confirmPasswordHint')" persistent-hint class="mb-4"></v-text-field>
+            <v-text-field
+              v-model="confirmPassword"
+              :append-inner-icon="
+                showConfirmPassword ? 'mdi-eye-off' : 'mdi-eye'
+              "
+              :type="showConfirmPassword ? 'text' : 'password'"
+              :rules="confirmPasswordRules"
+              :label="t('core.header.accountDialog.form.confirmPassword')"
+              variant="outlined"
+              clearable
+              @click:append-inner="showConfirmPassword = !showConfirmPassword"
+              prepend-inner-icon="mdi-lock-check-outline"
+              :hint="t('core.header.accountDialog.form.confirmPasswordHint')"
+              persistent-hint
+              class="mb-4"
+            ></v-text-field>
 
-            <v-text-field v-model="newUsername" :rules="usernameRules"
-              :label="t('core.header.accountDialog.form.newUsername')" variant="outlined" clearable
-              prepend-inner-icon="mdi-account-edit-outline" :hint="t('core.header.accountDialog.form.usernameHint')"
-              persistent-hint class="mb-3"></v-text-field>
+            <v-text-field
+              v-model="newUsername"
+              :rules="usernameRules"
+              :label="t('core.header.accountDialog.form.newUsername')"
+              variant="outlined"
+              clearable
+              prepend-inner-icon="mdi-account-edit-outline"
+              :hint="t('core.header.accountDialog.form.usernameHint')"
+              persistent-hint
+              class="mb-3"
+            ></v-text-field>
           </v-form>
 
           <div class="text-caption text-medium-emphasis mt-2">
-            {{ t('core.header.accountDialog.form.defaultCredentials') }}
+            {{ t("core.header.accountDialog.form.defaultCredentials") }}
           </div>
         </v-card-text>
 
@@ -804,23 +1113,32 @@ onMounted(async () => {
 
         <v-card-actions class="pa-4">
           <v-spacer></v-spacer>
-          <v-btn v-if="!accountWarning" variant="tonal" color="secondary" @click="dialog = false"
-            :disabled="accountEditStatus.loading">
-            {{ t('core.header.accountDialog.actions.cancel') }}
+          <v-btn
+            v-if="!accountWarning"
+            variant="tonal"
+            color="secondary"
+            @click="dialog = false"
+            :disabled="accountEditStatus.loading"
+          >
+            {{ t("core.header.accountDialog.actions.cancel") }}
           </v-btn>
-          <v-btn color="primary" @click="accountEdit" :loading="accountEditStatus.loading" :disabled="!formValid"
-            prepend-icon="mdi-content-save">
-            {{ t('core.header.accountDialog.actions.save') }}
+          <v-btn
+            color="primary"
+            @click="accountEdit"
+            :loading="accountEditStatus.loading"
+            :disabled="!formValid"
+            prepend-icon="mdi-content-save"
+          >
+            {{ t("core.header.accountDialog.actions.save") }}
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- About 对话框 - 仅在 chat mode 下使用 -->
-    <v-dialog v-model="aboutDialog"
-      width="600">
+    <v-dialog v-model="aboutDialog" width="600">
       <v-card>
-        <v-card-text style="overflow-y: auto;">
+        <v-card-text style="overflow-y: auto">
           <AboutPage />
         </v-card-text>
       </v-card>
diff --git a/dashboard/src/views/Settings.vue b/dashboard/src/views/Settings.vue
index 6d20b8d17..e8b93a831 100644
--- a/dashboard/src/views/Settings.vue
+++ b/dashboard/src/views/Settings.vue
@@ -22,7 +22,7 @@
         </div> -->
         <v-row class="mt-2">
           <v-col cols="12">
-            <div class="d-flex align-center">
+            <div>
               <!-- <v-text-field
                 v-model="apiBaseUrl"
                 :label="tm('network.server.label')"
@@ -425,6 +425,22 @@
           </v-btn>
         </div>
       </v-list-item>
+
+      <v-list-item
+        :subtitle="tm('system.logout.subtitle')"
+        :title="tm('system.logout.title')"
+      >
+        <div class="d-flex align-center mt-2">
+          <v-btn
+            color="error"
+            variant="tonal"
+            prepend-icon="mdi-logout"
+            @click="logout"
+          >
+            {{ tm("system.logout.button") }}
+          </v-btn>
+        </div>
+      </v-list-item>
     </v-list>
   </div>
 
@@ -439,6 +455,7 @@ import { useTheme } from "vuetify";
 import { useCustomizerStore } from "@/stores/customizer";
 import { useCommonStore } from "@/stores/common";
 import { useApiStore } from "@/stores/api";
+import { useAuthStore } from "@/stores/auth";
 import ProxySelector from "@/components/shared/ProxySelector.vue";
 import SidebarCustomizer from "@/components/shared/SidebarCustomizer.vue";
 import WaitingForRestart from "@/components/shared/WaitingForRestart.vue";
@@ -474,6 +491,7 @@ const toastStore = useToast();
 
 const theme = useTheme();
 const apiStore = useApiStore();
+const authStore = useAuthStore();
 
 const apiBaseUrl = ref(apiStore.apiBaseUrl);
 
@@ -725,6 +743,12 @@ const restartAstrBot = async () => {
   wfr.value.dialog = true;
 };
 
+const logout = () => {
+  if (confirm(t("core.common.dialog.confirmMessage"))) {
+    authStore.logout();
+  }
+};
+
 const startMigration = async () => {
   if (migrationDialog.value) {
     const result = await migrationDialog.value.open();