From 1b9820af44998df275fd11e6e6ac3297bd70fcf8 Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Wed, 18 Mar 2026 20:12:22 +0800
Subject: [PATCH] feat: update dashboard

---
 astrbot/dashboard/server.py                   |    4 +-
 dashboard/.eslintignore                       |   29 +
 dashboard/.eslintrc.cjs                       |  149 +
 dashboard/src/App.vue                         |   26 +-
 dashboard/src/components/ConfirmDialog.vue    |   25 +-
 dashboard/src/components/chat/Chat.vue        |  465 +--
 dashboard/src/components/chat/ChatInput.vue   |  406 ++-
 .../src/components/chat/ConfigSelector.vue    |  175 +-
 .../components/chat/ConversationSidebar.vue   |  725 +++--
 dashboard/src/components/chat/LiveMode.vue    |   83 +-
 dashboard/src/components/chat/LiveOrb.vue     |  144 +-
 dashboard/src/components/chat/MessageList.vue | 2611 +++++++++--------
 .../src/components/chat/ProjectDialog.vue     |   76 +-
 dashboard/src/components/chat/ProjectList.vue |  118 +-
 dashboard/src/components/chat/ProjectView.vue |  113 +-
 .../components/chat/ProviderConfigDialog.vue  |  228 +-
 .../src/components/chat/ProviderModelMenu.vue |  169 +-
 .../src/components/chat/StandaloneChat.vue    |   46 +-
 dashboard/src/components/chat/WelcomeView.vue |   51 +-
 .../chat/message_list_comps/ActionRef.vue     |   51 +-
 .../message_list_comps/IPythonToolBlock.vue   |   51 +-
 .../MessagePartsRenderer.vue                  |  307 +-
 .../message_list_comps/ReasoningBlock.vue     |   45 +-
 .../chat/message_list_comps/RefNode.vue       |   32 +-
 .../chat/message_list_comps/RefsSidebar.vue   |   80 +-
 .../chat/message_list_comps/ToolCallCard.vue  |  148 +-
 .../chat/message_list_comps/ToolCallItem.vue  |   35 +-
 .../config/AstrBotCoreConfigWrapper.vue       |  108 +-
 .../config/UnsavedChangesConfirmDialog.vue    |   33 +-
 .../components/extension/MarketPluginCard.vue |   63 +-
 .../extension/McpServersSection.vue           |  344 ++-
 .../extension/PluginSortControl.vue           |   17 +-
 .../components/extension/SkillsSection.vue    |  240 +-
 .../components/CommandFilters.vue             |   67 +-
 .../components/CommandTable.vue               |  133 +-
 .../components/DetailsDialog.vue              |   82 +-
 .../components/RenameDialog.vue               |   54 +-
 .../componentPanel/components/ToolTable.vue   |  120 +-
 .../composables/useComponentData.ts           |    2 +-
 .../extension/componentPanel/index.vue        |  113 +-
 .../folder/BaseCreateFolderDialog.vue         |   81 +-
 .../folder/BaseFolderBreadcrumb.vue           |   49 +-
 .../src/components/folder/BaseFolderCard.vue  |  129 +-
 .../folder/BaseFolderItemSelector.vue         |  473 ++-
 .../src/components/folder/BaseFolderTree.vue  |  192 +-
 .../components/folder/BaseFolderTreeNode.vue  |   89 +-
 .../components/folder/BaseMoveTargetNode.vue  |   75 +-
 .../folder/BaseMoveToFolderDialog.vue         |  124 +-
 .../components/platform/AddNewPlatform.vue    |  502 +++-
 .../components/provider/AddNewProvider.vue    |  200 +-
 .../provider/ProviderModelsPanel.vue          |  234 +-
 .../provider/ProviderSourcesPanel.vue         |  112 +-
 .../src/components/shared/AstrBotConfig.vue   |  155 +-
 .../src/components/shared/AstrBotConfigV4.vue |  132 +-
 .../src/components/shared/BackupDialog.vue    | 1014 ++++---
 .../src/components/shared/ChangelogDialog.vue |   72 +-
 .../components/shared/ConfigItemRenderer.vue  |  118 +-
 .../components/shared/ConsoleDisplayer.vue    |   49 +-
 .../src/components/shared/ExtensionCard.vue   |  180 +-
 .../src/components/shared/FileConfigItem.vue  |  109 +-
 dashboard/src/components/shared/ItemCard.vue  |   87 +-
 .../src/components/shared/ItemCardGrid.vue    |   69 +-
 .../shared/KnowledgeBaseSelector.vue          |  116 +-
 .../components/shared/LanguageSwitcher.vue    |   16 +-
 .../src/components/shared/ListConfigItem.vue  |  175 +-
 dashboard/src/components/shared/Logo.vue      |   16 +-
 .../src/components/shared/MigrationDialog.vue |  288 +-
 .../src/components/shared/ObjectEditor.vue    |  193 +-
 .../src/components/shared/PersonaForm.vue     |  861 ++++--
 .../components/shared/PersonaQuickPreview.vue |   74 +-
 .../src/components/shared/PersonaSelector.vue |    5 +-
 .../components/shared/PluginPlatformChip.vue  |   52 +-
 .../components/shared/PluginSetSelector.vue   |  102 +-
 .../components/shared/ProviderSelector.vue    |  126 +-
 .../src/components/shared/ProxySelector.vue   |  247 +-
 .../src/components/shared/ReadmeDialog.vue    |   88 +-
 .../components/shared/SidebarCustomizer.vue   |   57 +-
 .../src/components/shared/StyledMenu.vue      |   25 +-
 .../components/shared/T2ITemplateEditor.vue   |  181 +-
 .../components/shared/TemplateListEditor.vue  |   87 +-
 .../src/components/shared/TraceDisplayer.vue  |  112 +-
 .../shared/UninstallConfirmDialog.vue         |   34 +-
 .../components/shared/WaitingForRestart.vue   |   23 +-
 dashboard/src/composables/useConversations.ts |    2 +-
 dashboard/src/composables/useMessages.ts      |   14 +-
 dashboard/src/composables/useSessions.ts      |    2 +-
 dashboard/src/i18n/tools/index.ts             |    2 +-
 dashboard/src/i18n/validator.ts               |    4 +-
 dashboard/src/layouts/full/FullLayout.vue     |   21 +-
 .../full/vertical-header/VerticalHeader.vue   |  269 +-
 .../layouts/full/vertical-sidebar/NavItem.vue |   75 +-
 .../full/vertical-sidebar/VerticalSidebar.vue |   92 +-
 dashboard/src/main.ts                         |    2 +-
 dashboard/src/stores/auth.ts                  |    1 -
 dashboard/src/stores/common.js                |    3 +-
 dashboard/src/utils/pluginSearch.js           |    6 +-
 dashboard/src/views/AboutPage.vue             |   51 +-
 dashboard/src/views/AlkaidPage.vue            |   77 +-
 dashboard/src/views/ChatBoxPage.vue           |   20 +-
 dashboard/src/views/ChatPage.vue              |    6 +-
 dashboard/src/views/ConfigPage.vue            |  429 ++-
 dashboard/src/views/ConsolePage.vue           |   46 +-
 dashboard/src/views/ConversationPage.vue      |  887 ++++--
 dashboard/src/views/CronJobPage.vue           |  222 +-
 dashboard/src/views/ExtensionPage.vue         |  536 +++-
 dashboard/src/views/PersonaPage.vue           |   42 +-
 dashboard/src/views/PlatformPage.vue          |  233 +-
 dashboard/src/views/ProviderPage.vue          |  359 ++-
 dashboard/src/views/SessionManagementPage.vue | 1046 +++++--
 dashboard/src/views/Settings.vue              |  152 +-
 dashboard/src/views/SubAgentPage.vue          |  133 +-
 dashboard/src/views/TracePage.vue             |    8 +-
 dashboard/src/views/WelcomePage.vue           |   68 +-
 dashboard/src/views/alkaid/KnowledgeBase.vue  | 1209 +++++---
 dashboard/src/views/alkaid/LongTermMemory.vue |  368 ++-
 dashboard/src/views/alkaid/Other.vue          |   15 +-
 .../views/authentication/auth/LoginPage.vue   |   88 +-
 .../authentication/authForms/AuthLogin.vue    |   60 +-
 .../dashboards/default/DefaultDashboard.vue   |   48 +-
 .../default/components/MemoryUsage.vue        |   32 +-
 .../default/components/MessageStat.vue        |   85 +-
 .../default/components/OnlinePlatform.vue     |   22 +-
 .../default/components/OnlineTime.vue         |   65 +-
 .../default/components/PlatformStat.vue       |   85 +-
 .../default/components/RunningTime.vue        |   22 +-
 .../default/components/TotalMessage.vue       |   29 +-
 .../views/extension/InstalledPluginsTab.vue   | 1076 +++----
 .../src/views/extension/MarketPluginsTab.vue  |  416 +--
 .../src/views/extension/useExtensionPage.js   |    1 +
 .../views/knowledge-base/DocumentDetail.vue   |  176 +-
 .../src/views/knowledge-base/KBDetail.vue     |  128 +-
 dashboard/src/views/knowledge-base/KBList.vue |  293 +-
 .../components/DocumentsTab.vue               |  414 ++-
 .../components/RetrievalTab.vue               |  188 +-
 .../knowledge-base/components/SettingsTab.vue |   97 +-
 .../components/TavilyKeyDialog.vue            |   24 +-
 dashboard/src/views/knowledge-base/index.vue  |   10 +-
 .../src/views/persona/CreateFolderDialog.vue  |    9 +-
 .../src/views/persona/FolderBreadcrumb.vue    |   49 +-
 dashboard/src/views/persona/FolderCard.vue    |  129 +-
 dashboard/src/views/persona/FolderTree.vue    |  316 +-
 .../src/views/persona/FolderTreeNode.vue      |   20 +-
 .../src/views/persona/MoveTargetNode.vue      |    9 +-
 .../src/views/persona/MoveToFolderDialog.vue  |  124 +-
 dashboard/src/views/persona/PersonaCard.vue   |  210 +-
 .../src/views/persona/PersonaManager.vue      |  818 ++++--
 dashboard/tsconfig.eslint.json                |   26 +
 dashboard/vite.config.ts                      |    3 +-
 148 files changed, 17917 insertions(+), 8446 deletions(-)
 create mode 100644 dashboard/.eslintignore
 create mode 100644 dashboard/.eslintrc.cjs
 create mode 100644 dashboard/tsconfig.eslint.json

diff --git a/astrbot/dashboard/server.py b/astrbot/dashboard/server.py
index 2b6040aa3..c7e7be3c0 100644
--- a/astrbot/dashboard/server.py
+++ b/astrbot/dashboard/server.py
@@ -151,7 +151,7 @@ class AstrBotDashboard:
         @self.app.route("/")
         async def index():
             if not self.enable_webui:
-                return "WebUI is disabled."
+                return "Buildin WebUI is disabled."
             try:
                 return await self.app.send_static_file("index.html")
             except werkzeug.exceptions.NotFound:
@@ -161,7 +161,7 @@ class AstrBotDashboard:
         @self.app.errorhandler(404)
         async def not_found(e):
             if not self.enable_webui:
-                return "WebUI is disabled."
+                return "Buildin WebUI is disabled."
             if request.path.startswith("/api/"):
                 return jsonify(Response().error("Not Found").to_json()), 404
             try:
diff --git a/dashboard/.eslintignore b/dashboard/.eslintignore
new file mode 100644
index 000000000..3e7871a3a
--- /dev/null
+++ b/dashboard/.eslintignore
@@ -0,0 +1,29 @@
+# ESLint ignore file for AstrBot dashboard
+# Skip dependency directories and build artifacts
+
+node_modules/
+dist/
+build/
+public/
+coverage/
+.vite/
+.cache/
+*.min.js
+*.bundle.js
+*.map
+
+# Dashboard-specific artifacts (when lint is run from repo root using --prefix)
+dashboard/dist/
+dashboard/node_modules/
+
+# Generated TypeScript declaration used by environment - can cause parser issues in some setups
+env.d.ts
+
+# Scripts and tooling files (often use newer syntax or are run in node env)
+scripts/**/*.mjs
+scripts/**/*.cjs
+
+# Misc
+*.log
+.idea/
+.vscode/
diff --git a/dashboard/.eslintrc.cjs b/dashboard/.eslintrc.cjs
new file mode 100644
index 000000000..28944a0f4
--- /dev/null
+++ b/dashboard/.eslintrc.cjs
@@ -0,0 +1,149 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+
+  // Use vue-eslint-parser so .vue SFCs are parsed correctly.
+  parser: "vue-eslint-parser",
+
+  parserOptions: {
+    // vue-eslint-parser will forward the script content to this parser
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: "latest",
+    sourceType: "module",
+    extraFileExtensions: [".vue"],
+    ecmaFeatures: {
+      jsx: true,
+    },
+    // NOTE: Intentionally NO `project` here to avoid requiring type-aware linting.
+    // This keeps eslint fast and avoids the TSConfig inclusion errors.
+  },
+
+  plugins: ["vue", "@typescript-eslint"],
+
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:@typescript-eslint/recommended",
+    // Intentionally not extending type-aware or prettier-requiring configs.
+  ],
+
+  settings: {
+    // Allow using Vue compiler macros like defineProps/defineEmits in templates
+    "vue/setup-compiler-macros": true,
+  },
+
+  // Avoid linting build artifacts and generated files
+  ignorePatterns: [
+    "dist/",
+    "build/",
+    "node_modules/",
+    "public/",
+    "dashboard/dist/",
+    "dashboard/node_modules/",
+    "env.d.ts",
+    "scripts/**/*.mjs",
+    ".vite/",
+    ".cache/",
+  ],
+
+  rules: {
+    // Keep console/debug permissible but warned
+    "no-console": ["warn", { allow: ["warn", "error", "info"] }],
+    "no-debugger": "warn",
+
+    // TypeScript rules (relaxed)
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+
+    // Vue rules adjustments — relax a few rules that generate a lot of noise
+    // These are intentionally relaxed to allow incremental, safe fixes of template code.
+    "vue/multi-word-component-names": "off",
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          void: "never",
+          normal: "always",
+          component: "always",
+        },
+        svg: "always",
+        math: "always",
+      },
+    ],
+
+    // Reduce template noise for legacy / Vuetify patterns used across this codebase
+    "vue/valid-v-slot": "off",
+    "vue/v-on-event-hyphenation": "off",
+    "vue/no-unused-components": "off",
+    // Broadly disable unused vars detection for templates to avoid false positives from compiled/generated template usage
+    "vue/no-unused-vars": "off",
+    "vue/require-default-prop": "off",
+    // Keep v-html as a warn so security-sensitive usage is highlighted
+    "vue/no-v-html": "warn",
+  },
+
+  overrides: [
+    // Vue Single File Components
+    {
+      files: ["*.vue", "src/**/*.vue"],
+      parser: "vue-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".vue"],
+        ecmaVersion: "latest",
+        sourceType: "module",
+        // Enable type-aware rules for script blocks inside .vue files
+        project: "./tsconfig.eslint.json",
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        // Component/template specific overrides can go here
+      },
+    },
+
+    // TypeScript files (no project required)
+    {
+      files: ["*.ts", "*.tsx", "src/**/*.ts", "src/**/*.tsx"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        // Use type-aware linting for TS files via the dedicated tsconfig for ESLint
+        project: "./tsconfig.eslint.json",
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        // Project-specific relaxations for TS files
+      },
+    },
+
+    // Node scripts / tooling
+    {
+      files: ["scripts/**/*.mjs", "scripts/**/*.cjs", "*.cjs"],
+      env: { node: true },
+      parserOptions: { sourceType: "module" },
+    },
+    // Disable strict v-slot validation for extension component panels where shorthand slots are used
+    {
+      files: [
+        "src/components/extension/componentPanel/**",
+        "src/components/extension/**",
+      ],
+      rules: {
+        "vue/valid-v-slot": "off",
+      },
+    },
+  ],
+};
diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
index 4822d8489..12c622e4a 100644
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@@ -1,14 +1,28 @@
 <template>
-  <RouterView></RouterView>
+  <RouterView />
   <WaitingForRestart ref="globalWaitingRef" />
 
   <!-- 全局唯一 snackbar -->
-  <v-snackbar v-if="toastStore.current" v-model="snackbarShow" :color="toastStore.current.color"
-    :timeout="toastStore.current.timeout" :multi-line="toastStore.current.multiLine"
-    :location="toastStore.current.location" close-on-back>
+  <v-snackbar
+    v-if="toastStore.current"
+    v-model="snackbarShow"
+    :color="toastStore.current.color"
+    :timeout="toastStore.current.timeout"
+    :multi-line="toastStore.current.multiLine"
+    :location="toastStore.current.location"
+    close-on-back
+  >
     {{ toastStore.current.message }}
-    <template #actions v-if="toastStore.current.closable">
-      <v-btn variant="text" @click="snackbarShow = false">关闭</v-btn>
+    <template
+      v-if="toastStore.current.closable"
+      #actions
+    >
+      <v-btn
+        variant="text"
+        @click="snackbarShow = false"
+      >
+        关闭
+      </v-btn>
     </template>
   </v-snackbar>
 </template>
diff --git a/dashboard/src/components/ConfirmDialog.vue b/dashboard/src/components/ConfirmDialog.vue
index 9b77a6b6b..32695fa06 100644
--- a/dashboard/src/components/ConfirmDialog.vue
+++ b/dashboard/src/components/ConfirmDialog.vue
@@ -1,12 +1,27 @@
 <template>
-  <v-dialog v-model="isOpen" max-width="400">
+  <v-dialog
+    v-model="isOpen"
+    max-width="400"
+  >
     <v-card>
-      <v-card-title class="text-h6">{{ title }}</v-card-title>
+      <v-card-title class="text-h6">
+        {{ title }}
+      </v-card-title>
       <v-card-text>{{ message }}</v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="gray" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
-        <v-btn color="red" @click="handleConfirm">{{ t('core.common.dialog.confirmButton') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="gray"
+          @click="handleCancel"
+        >
+          {{ t('core.common.dialog.cancelButton') }}
+        </v-btn>
+        <v-btn
+          color="red"
+          @click="handleConfirm"
+        >
+          {{ t('core.common.dialog.confirmButton') }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/components/chat/Chat.vue b/dashboard/src/components/chat/Chat.vue
index eaa4cb620..b81b6dc57 100644
--- a/dashboard/src/components/chat/Chat.vue
+++ b/dashboard/src/components/chat/Chat.vue
@@ -1,208 +1,279 @@
 <template>
-    <v-card class="chat-page-card" elevation="0" rounded="0">
-        <v-card-text class="chat-page-container">
-            <!-- 遮罩层 (手机端) -->
-            <div class="mobile-overlay" v-if="isMobile && mobileMenuOpen" @click="closeMobileSidebar"></div>
+  <v-card
+    class="chat-page-card"
+    elevation="0"
+    rounded="0"
+  >
+    <v-card-text class="chat-page-container">
+      <!-- 遮罩层 (手机端) -->
+      <div
+        v-if="isMobile && mobileMenuOpen"
+        class="mobile-overlay"
+        @click="closeMobileSidebar"
+      />
 
-            <div class="chat-layout">
-                <ConversationSidebar
-                    :sessions="sessions"
-                    :selectedSessions="selectedSessions"
-                    :currSessionId="currSessionId"
-                    :selectedProjectId="selectedProjectId"
-                    :transportMode="transportMode"
-                    :sendShortcut="sendShortcut"
-                    :isDark="isDark"
-                    :chatboxMode="chatboxMode"
-                    :isMobile="isMobile"
-                    :mobileMenuOpen="mobileMenuOpen"
-                    :projects="projects"
-                    @newChat="handleNewChat"
-                    @selectConversation="handleSelectConversation"
-                    @editTitle="showEditTitleDialog"
-                    @deleteConversation="handleDeleteConversation"
-                    @batchDeleteConversations="handleBatchDeleteConversations"
-                    @closeMobileSidebar="closeMobileSidebar"
-                    @toggleTheme="toggleTheme"
-                    @toggleFullscreen="toggleFullscreen"
-                    @selectProject="handleSelectProject"
-                    @createProject="showCreateProjectDialog"
-                    @editProject="showEditProjectDialog"
-                    @deleteProject="handleDeleteProject"
-                    @updateTransportMode="setTransportMode"
-                    @updateSendShortcut="setSendShortcut"
-                />
+      <div class="chat-layout">
+        <ConversationSidebar
+          :sessions="sessions"
+          :selected-sessions="selectedSessions"
+          :curr-session-id="currSessionId"
+          :selected-project-id="selectedProjectId"
+          :transport-mode="transportMode"
+          :send-shortcut="sendShortcut"
+          :is-dark="isDark"
+          :chatbox-mode="chatboxMode"
+          :is-mobile="isMobile"
+          :mobile-menu-open="mobileMenuOpen"
+          :projects="projects"
+          @newChat="handleNewChat"
+          @selectConversation="handleSelectConversation"
+          @editTitle="showEditTitleDialog"
+          @deleteConversation="handleDeleteConversation"
+          @batchDeleteConversations="handleBatchDeleteConversations"
+          @closeMobileSidebar="closeMobileSidebar"
+          @toggleTheme="toggleTheme"
+          @toggleFullscreen="toggleFullscreen"
+          @selectProject="handleSelectProject"
+          @createProject="showCreateProjectDialog"
+          @editProject="showEditProjectDialog"
+          @deleteProject="handleDeleteProject"
+          @updateTransportMode="setTransportMode"
+          @updateSendShortcut="setSendShortcut"
+        />
 
-                <!-- 右侧聊天内容区域 -->
-                <div class="chat-content-panel">
-                    <!-- Live Mode -->
-                    <LiveMode v-if="liveModeOpen" @close="closeLiveMode" />
+        <!-- 右侧聊天内容区域 -->
+        <div class="chat-content-panel">
+          <!-- Live Mode -->
+          <LiveMode
+            v-if="liveModeOpen"
+            @close="closeLiveMode"
+          />
 
-                    <!-- 正常聊天界面 -->
-                    <template v-else>
-
-                        <div v-if="currentSessionProject && messages && messages.length > 0" class="breadcrumb-container">
-                            <div class="breadcrumb-content">
-                                <span class="breadcrumb-emoji">{{ currentSessionProject.emoji || '📁' }}</span>
-                                <span class="breadcrumb-project" @click="handleSelectProject(currentSessionProject.project_id)">{{ currentSessionProject.title }}</span>
-                                <v-icon size="small" class="breadcrumb-separator">mdi-chevron-right</v-icon>
-                                <span class="breadcrumb-session">{{ getCurrentSession?.display_name || tm('conversation.newConversation') }}</span>
-                            </div>
-                        </div>
-
-                        <div class="message-list-wrapper" v-if="currSessionId && !selectedProjectId">
-                            <MessageList :messages="messages" :isDark="isDark"
-                                :isStreaming="isStreaming || isConvRunning" 
-                                :isLoadingMessages="isLoadingMessages"
-                                @openImagePreview="openImagePreview"
-                                @replyMessage="handleReplyMessage"
-                                @replyWithText="handleReplyWithText"
-                                @openRefs="handleOpenRefs"
-                                ref="messageList" />
-                            <div class="message-list-fade" :class="{ 'fade-dark': isDark }"></div>
-                        </div>
-                        <ProjectView 
-                            v-else-if="selectedProjectId"
-                            :project="currentProject"
-                            :sessions="projectSessions"
-                            @selectSession="(sessionId) => handleSelectConversation([sessionId])"
-                            @editSessionTitle="showEditTitleDialog"
-                            @deleteSession="handleDeleteConversation"
-                        >
-                            <ChatInput
-                                v-model:prompt="prompt"
-                                :stagedImagesUrl="stagedImagesUrl"
-                                :stagedAudioUrl="stagedAudioUrl"
-                                :stagedFiles="stagedNonImageFiles"
-                                :disabled="false"
-                                :is-running="isStreaming || isConvRunning"
-                                :enableStreaming="enableStreaming"
-                                :isRecording="isRecording"
-                                :session-id="currSessionId || null"
-                                :current-session="getCurrentSession"
-                                :replyTo="replyTo"
-                                :send-shortcut="sendShortcut"
-                                @send="handleSendMessage"
-                                @stop="handleStopMessage"
-                                @toggleStreaming="toggleStreaming"
-                                @removeImage="removeImage"
-                                @removeAudio="removeAudio"
-                                @removeFile="removeFile"
-                                @startRecording="handleStartRecording"
-                                @stopRecording="handleStopRecording"
-                            @pasteImage="handlePaste"
-                            @fileSelect="handleFileSelect"
-                            @clearReply="clearReply"
-                            @openLiveMode="openLiveMode"
-                            ref="chatInputRef"
-                        />
-                        </ProjectView>
-                        <WelcomeView 
-                            v-else
-                            :isLoading="isLoadingMessages"
-                        >
-                            <ChatInput
-                                v-model:prompt="prompt"
-                                :stagedImagesUrl="stagedImagesUrl"
-                                :stagedAudioUrl="stagedAudioUrl"
-                                :stagedFiles="stagedNonImageFiles"
-                                :disabled="false"
-                                :is-running="isStreaming || isConvRunning"
-                                :enableStreaming="enableStreaming"
-                                :isRecording="isRecording"
-                                :session-id="currSessionId || null"
-                                :current-session="getCurrentSession"
-                                :replyTo="replyTo"
-                                :send-shortcut="sendShortcut"
-                                @send="handleSendMessage"
-                                @stop="handleStopMessage"
-                                @toggleStreaming="toggleStreaming"
-                                @removeImage="removeImage"
-                                @removeAudio="removeAudio"
-                                @removeFile="removeFile"
-                                @startRecording="handleStartRecording"
-                                @stopRecording="handleStopRecording"
-                                @pasteImage="handlePaste"
-                                @fileSelect="handleFileSelect"
-                                @clearReply="clearReply"
-                                @openLiveMode="openLiveMode"
-                                ref="chatInputRef"
-                            />
-                        </WelcomeView>
-
-                        <!-- 输入区域 -->
-                        <ChatInput
-                            v-if="currSessionId && !selectedProjectId"
-                            v-model:prompt="prompt"
-                            :stagedImagesUrl="stagedImagesUrl"
-                            :stagedAudioUrl="stagedAudioUrl"
-                            :stagedFiles="stagedNonImageFiles"
-                            :disabled="false"
-                            :is-running="isStreaming || isConvRunning"
-                            :enableStreaming="enableStreaming"
-                            :isRecording="isRecording"
-                            :session-id="currSessionId || null"
-                            :current-session="getCurrentSession"
-                            :replyTo="replyTo"
-                            :send-shortcut="sendShortcut"
-                            @send="handleSendMessage"
-                            @stop="handleStopMessage"
-                            @toggleStreaming="toggleStreaming"
-                            @removeImage="removeImage"
-                            @removeAudio="removeAudio"
-                            @removeFile="removeFile"
-                            @startRecording="handleStartRecording"
-                            @stopRecording="handleStopRecording"
-                            @pasteImage="handlePaste"
-                            @fileSelect="handleFileSelect"
-                            @clearReply="clearReply"
-                            @openLiveMode="openLiveMode"
-                            ref="chatInputRef"
-                        />
-                    </template>
-                </div>
-
-                <!-- Refs Sidebar -->
-                <RefsSidebar v-model="refsSidebarOpen" :refs="refsSidebarRefs" />
+          <!-- 正常聊天界面 -->
+          <template v-else>
+            <div
+              v-if="currentSessionProject && messages && messages.length > 0"
+              class="breadcrumb-container"
+            >
+              <div class="breadcrumb-content">
+                <span class="breadcrumb-emoji">{{ currentSessionProject.emoji || '📁' }}</span>
+                <span
+                  class="breadcrumb-project"
+                  @click="handleSelectProject(currentSessionProject.project_id)"
+                >{{ currentSessionProject.title }}</span>
+                <v-icon
+                  size="small"
+                  class="breadcrumb-separator"
+                >
+                  mdi-chevron-right
+                </v-icon>
+                <span class="breadcrumb-session">{{ getCurrentSession?.display_name || tm('conversation.newConversation') }}</span>
+              </div>
             </div>
-        </v-card-text>
-    </v-card>
+
+            <div
+              v-if="currSessionId && !selectedProjectId"
+              class="message-list-wrapper"
+            >
+              <MessageList
+                ref="messageList"
+                :messages="messages"
+                :is-dark="isDark" 
+                :is-streaming="isStreaming || isConvRunning"
+                :is-loading-messages="isLoadingMessages"
+                @openImagePreview="openImagePreview"
+                @replyMessage="handleReplyMessage"
+                @replyWithText="handleReplyWithText"
+                @openRefs="handleOpenRefs"
+              />
+              <div
+                class="message-list-fade"
+                :class="{ 'fade-dark': isDark }"
+              />
+            </div>
+            <ProjectView 
+              v-else-if="selectedProjectId"
+              :project="currentProject"
+              :sessions="projectSessions"
+              @selectSession="(sessionId) => handleSelectConversation([sessionId])"
+              @editSessionTitle="showEditTitleDialog"
+              @deleteSession="handleDeleteConversation"
+            >
+              <ChatInput
+                ref="chatInputRef"
+                v-model:prompt="prompt"
+                :staged-images-url="stagedImagesUrl"
+                :staged-audio-url="stagedAudioUrl"
+                :staged-files="stagedNonImageFiles"
+                :disabled="false"
+                :is-running="isStreaming || isConvRunning"
+                :enable-streaming="enableStreaming"
+                :is-recording="isRecording"
+                :session-id="currSessionId || null"
+                :current-session="getCurrentSession"
+                :reply-to="replyTo"
+                :send-shortcut="sendShortcut"
+                @send="handleSendMessage"
+                @stop="handleStopMessage"
+                @toggleStreaming="toggleStreaming"
+                @removeImage="removeImage"
+                @removeAudio="removeAudio"
+                @removeFile="removeFile"
+                @startRecording="handleStartRecording"
+                @stopRecording="handleStopRecording"
+                @pasteImage="handlePaste"
+                @fileSelect="handleFileSelect"
+                @clearReply="clearReply"
+                @openLiveMode="openLiveMode"
+              />
+            </ProjectView>
+            <WelcomeView 
+              v-else
+              :is-loading="isLoadingMessages"
+            >
+              <ChatInput
+                ref="chatInputRef"
+                v-model:prompt="prompt"
+                :staged-images-url="stagedImagesUrl"
+                :staged-audio-url="stagedAudioUrl"
+                :staged-files="stagedNonImageFiles"
+                :disabled="false"
+                :is-running="isStreaming || isConvRunning"
+                :enable-streaming="enableStreaming"
+                :is-recording="isRecording"
+                :session-id="currSessionId || null"
+                :current-session="getCurrentSession"
+                :reply-to="replyTo"
+                :send-shortcut="sendShortcut"
+                @send="handleSendMessage"
+                @stop="handleStopMessage"
+                @toggleStreaming="toggleStreaming"
+                @removeImage="removeImage"
+                @removeAudio="removeAudio"
+                @removeFile="removeFile"
+                @startRecording="handleStartRecording"
+                @stopRecording="handleStopRecording"
+                @pasteImage="handlePaste"
+                @fileSelect="handleFileSelect"
+                @clearReply="clearReply"
+                @openLiveMode="openLiveMode"
+              />
+            </WelcomeView>
+
+            <!-- 输入区域 -->
+            <ChatInput
+              v-if="currSessionId && !selectedProjectId"
+              ref="chatInputRef"
+              v-model:prompt="prompt"
+              :staged-images-url="stagedImagesUrl"
+              :staged-audio-url="stagedAudioUrl"
+              :staged-files="stagedNonImageFiles"
+              :disabled="false"
+              :is-running="isStreaming || isConvRunning"
+              :enable-streaming="enableStreaming"
+              :is-recording="isRecording"
+              :session-id="currSessionId || null"
+              :current-session="getCurrentSession"
+              :reply-to="replyTo"
+              :send-shortcut="sendShortcut"
+              @send="handleSendMessage"
+              @stop="handleStopMessage"
+              @toggleStreaming="toggleStreaming"
+              @removeImage="removeImage"
+              @removeAudio="removeAudio"
+              @removeFile="removeFile"
+              @startRecording="handleStartRecording"
+              @stopRecording="handleStopRecording"
+              @pasteImage="handlePaste"
+              @fileSelect="handleFileSelect"
+              @clearReply="clearReply"
+              @openLiveMode="openLiveMode"
+            />
+          </template>
+        </div>
+
+        <!-- Refs Sidebar -->
+        <RefsSidebar
+          v-model="refsSidebarOpen"
+          :refs="refsSidebarRefs"
+        />
+      </div>
+    </v-card-text>
+  </v-card>
     
-    <!-- 编辑对话标题对话框 -->
-    <v-dialog v-model="editTitleDialog" max-width="400">
-        <v-card>
-            <v-card-title class="dialog-title">{{ tm('actions.editTitle') }}</v-card-title>
-            <v-card-text>
-                <v-text-field v-model="editingTitle" :label="tm('conversation.newConversation')" variant="outlined"
-                    hide-details class="mt-2" @keyup.enter="handleSaveTitle" autofocus />
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn variant="text" @click="editTitleDialog = false" color="grey-darken-1">{{ t('core.common.cancel') }}</v-btn>
-                <v-btn variant="text" @click="handleSaveTitle" color="primary">{{ t('core.common.save') }}</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+  <!-- 编辑对话标题对话框 -->
+  <v-dialog
+    v-model="editTitleDialog"
+    max-width="400"
+  >
+    <v-card>
+      <v-card-title class="dialog-title">
+        {{ tm('actions.editTitle') }}
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model="editingTitle"
+          :label="tm('conversation.newConversation')"
+          variant="outlined"
+          hide-details
+          class="mt-2"
+          autofocus
+          @keyup.enter="handleSaveTitle"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          color="grey-darken-1"
+          @click="editTitleDialog = false"
+        >
+          {{ t('core.common.cancel') }}
+        </v-btn>
+        <v-btn
+          variant="text"
+          color="primary"
+          @click="handleSaveTitle"
+        >
+          {{ t('core.common.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 
-    <!-- 图片预览对话框 -->
-    <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>
+  <!-- 图片预览对话框 -->
+  <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>
 
-    <!-- 创建/编辑项目对话框 -->
-    <ProjectDialog
-        v-model="projectDialog"
-        :project="editingProject"
-        @save="handleSaveProject"
-    />
+  <!-- 创建/编辑项目对话框 -->
+  <ProjectDialog
+    v-model="projectDialog"
+    :project="editingProject"
+    @save="handleSaveProject"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/ChatInput.vue b/dashboard/src/components/chat/ChatInput.vue
index d34e5f940..6f34da79c 100644
--- a/dashboard/src/components/chat/ChatInput.vue
+++ b/dashboard/src/components/chat/ChatInput.vue
@@ -1,82 +1,166 @@
 <template>
-    <div class="input-area fade-in" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave"
-        @drop.prevent="handleDrop">
-        <div class="input-container" :style="{
-            width: '85%',
-            maxWidth: '900px',
-            margin: '0 auto',
-            border: isDark ? 'none' : '1px solid #e0e0e0',
-            borderRadius: '24px',
-            boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
-            backgroundColor: isDark ? '#2d2d2d' : 'transparent',
-            position: 'relative'
-        }">
-            <!-- 拖拽上传遮罩 -->
-            <transition name="fade">
-                <div v-if="isDragging" class="drop-overlay">
-                    <div class="drop-overlay-content">
-                        <v-icon size="48" color="primary">mdi-cloud-upload</v-icon>
-                        <span class="drop-text">{{ tm('input.dropToUpload') }}</span>
-                    </div>
-                </div>
-            </transition>
-            <!-- 引用预览区 -->
-            <transition name="slideReply" @after-leave="handleReplyAfterLeave">
-                <div class="reply-preview" v-if="props.replyTo && !isReplyClosing">
-                    <div class="reply-content">
-                        <v-icon size="small" class="reply-icon">mdi-reply</v-icon>
-                        "<span class="reply-text">{{ props.replyTo.selectedText }}</span>"
-                    </div>
-                    <v-btn @click="handleClearReply" class="remove-reply-btn" icon="mdi-close" size="x-small"
-                        color="grey" variant="text" />
-                </div>
-            </transition>
-            <textarea ref="inputField" v-model="localPrompt" @keydown="handleKeyDown" :disabled="disabled"
-                placeholder="Ask AstrBot..." class="chat-textarea"
-                autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="false"
-                style="width: 100%; resize: none; outline: none; border: 1px solid var(--v-theme-border); border-radius: 12px; padding: 16px 20px; min-height: 40px; max-height: 200px; overflow-y: auto; font-family: inherit; font-size: 16px; background-color: var(--v-theme-surface);"></textarea>
-            <div style="display: flex; justify-content: space-between; align-items: center; padding: 6px 14px;">
-                <div
-                    style="display: flex; justify-content: flex-start; margin-top: 4px; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden;">
-                    <!-- Settings Menu -->
-                    <StyledMenu offset="8" location="top start" :close-on-content-click="false">
-                        <template v-slot:activator="{ props: activatorProps }">
-                            <v-btn v-bind="activatorProps" icon="mdi-plus" variant="text" color="primary" />
-                        </template>
+  <div
+    class="input-area fade-in"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <div
+      class="input-container"
+      :style="{
+        width: '85%',
+        maxWidth: '900px',
+        margin: '0 auto',
+        border: isDark ? 'none' : '1px solid #e0e0e0',
+        borderRadius: '24px',
+        boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
+        backgroundColor: isDark ? '#2d2d2d' : 'transparent',
+        position: 'relative'
+      }"
+    >
+      <!-- 拖拽上传遮罩 -->
+      <transition name="fade">
+        <div
+          v-if="isDragging"
+          class="drop-overlay"
+        >
+          <div class="drop-overlay-content">
+            <v-icon
+              size="48"
+              color="primary"
+            >
+              mdi-cloud-upload
+            </v-icon>
+            <span class="drop-text">{{ tm('input.dropToUpload') }}</span>
+          </div>
+        </div>
+      </transition>
+      <!-- 引用预览区 -->
+      <transition
+        name="slideReply"
+        @after-leave="handleReplyAfterLeave"
+      >
+        <div
+          v-if="props.replyTo && !isReplyClosing"
+          class="reply-preview"
+        >
+          <div class="reply-content">
+            <v-icon
+              size="small"
+              class="reply-icon"
+            >
+              mdi-reply
+            </v-icon>
+            "<span class="reply-text">{{ props.replyTo.selectedText }}</span>"
+          </div>
+          <v-btn
+            class="remove-reply-btn"
+            icon="mdi-close"
+            size="x-small"
+            color="grey"
+            variant="text"
+            @click="handleClearReply"
+          />
+        </div>
+      </transition>
+      <textarea
+        ref="inputField"
+        v-model="localPrompt"
+        :disabled="disabled"
+        placeholder="Ask AstrBot..."
+        class="chat-textarea"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="sentences"
+        spellcheck="false"
+        style="width: 100%; resize: none; outline: none; border: 1px solid var(--v-theme-border); border-radius: 12px; padding: 16px 20px; min-height: 40px; max-height: 200px; overflow-y: auto; font-family: inherit; font-size: 16px; background-color: var(--v-theme-surface);"
+        @keydown="handleKeyDown"
+      />
+      <div style="display: flex; justify-content: space-between; align-items: center; padding: 6px 14px;">
+        <div
+          style="display: flex; justify-content: flex-start; margin-top: 4px; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden;"
+        >
+          <!-- Settings Menu -->
+          <StyledMenu
+            offset="8"
+            location="top start"
+            :close-on-content-click="false"
+          >
+            <template #activator="{ props: activatorProps }">
+              <v-btn
+                v-bind="activatorProps"
+                icon="mdi-plus"
+                variant="text"
+                color="primary"
+              />
+            </template>
 
-                        <!-- Upload Files -->
-                        <v-list-item class="styled-menu-item" rounded="md" @click="triggerImageInput">
-                            <template v-slot:prepend>
-                                <v-icon icon="mdi-file-upload-outline" size="small"></v-icon>
-                            </template>
-                            <v-list-item-title>
-                                {{ tm('input.upload') }}
-                            </v-list-item-title>
-                        </v-list-item>
+            <!-- Upload Files -->
+            <v-list-item
+              class="styled-menu-item"
+              rounded="md"
+              @click="triggerImageInput"
+            >
+              <template #prepend>
+                <v-icon
+                  icon="mdi-file-upload-outline"
+                  size="small"
+                />
+              </template>
+              <v-list-item-title>
+                {{ tm('input.upload') }}
+              </v-list-item-title>
+            </v-list-item>
 
-                        <!-- Config Selector in Menu -->
-                        <ConfigSelector :session-id="sessionId || null" :platform-id="sessionPlatformId"
-                            :is-group="sessionIsGroup" :initial-config-id="props.configId"
-                            @config-changed="handleConfigChange" />
+            <!-- Config Selector in Menu -->
+            <ConfigSelector
+              :session-id="sessionId || null"
+              :platform-id="sessionPlatformId"
+              :is-group="sessionIsGroup"
+              :initial-config-id="props.configId"
+              @config-changed="handleConfigChange"
+            />
 
-                        <!-- Streaming Toggle in Menu -->
-                        <v-list-item class="styled-menu-item" rounded="md" @click="$emit('toggleStreaming')">
-                            <template v-slot:prepend>
-                                <v-icon :icon="enableStreaming ? 'mdi-flash' : 'mdi-flash-off'" size="small"></v-icon>
-                            </template>
-                            <v-list-item-title>
-                                {{ enableStreaming ? tm('streaming.enabled') : tm('streaming.disabled') }}
-                            </v-list-item-title>
-                        </v-list-item>
-                    </StyledMenu>
+            <!-- Streaming Toggle in Menu -->
+            <v-list-item
+              class="styled-menu-item"
+              rounded="md"
+              @click="$emit('toggleStreaming')"
+            >
+              <template #prepend>
+                <v-icon
+                  :icon="enableStreaming ? 'mdi-flash' : 'mdi-flash-off'"
+                  size="small"
+                />
+              </template>
+              <v-list-item-title>
+                {{ enableStreaming ? tm('streaming.enabled') : tm('streaming.disabled') }}
+              </v-list-item-title>
+            </v-list-item>
+          </StyledMenu>
 
-                    <!-- Provider/Model Selector Menu -->
-                    <ProviderModelMenu v-if="showProviderSelector" ref="providerModelMenuRef" />
-                </div>
-                <div style="display: flex; justify-content: flex-end; margin-top: 8px; align-items: center; flex-shrink: 0;">
-                    <input type="file" ref="imageInputRef" @change="handleFileSelect" style="display: none" multiple />
-                    <v-progress-circular v-if="disabled && !mobile" indeterminate size="16" class="mr-1" width="1.5" />
-                    <!-- <v-btn @click="$emit('openLiveMode')"
+          <!-- Provider/Model Selector Menu -->
+          <ProviderModelMenu
+            v-if="showProviderSelector"
+            ref="providerModelMenuRef"
+          />
+        </div>
+        <div style="display: flex; justify-content: flex-end; margin-top: 8px; align-items: center; flex-shrink: 0;">
+          <input
+            ref="imageInputRef"
+            type="file"
+            style="display: none"
+            multiple
+            @change="handleFileSelect"
+          >
+          <v-progress-circular
+            v-if="disabled && !mobile"
+            indeterminate
+            size="16"
+            class="mr-1"
+            width="1.5"
+          />
+          <!-- <v-btn @click="$emit('openLiveMode')"
                         icon
                         variant="text"
                         color="purple" 
@@ -87,54 +171,136 @@
                             {{ tm('voice.liveMode') }}
                         </v-tooltip>
                     </v-btn> -->
-                    <v-btn @click="handleRecordClick" icon variant="text" :color="isRecording ? 'error' : 'primary'"
-                        class="record-btn">
-                        <v-icon :icon="isRecording ? 'mdi-stop-circle' : 'mdi-microphone'" variant="text"
-                            plain></v-icon>
-                        <v-tooltip activator="parent" location="top">
-                            {{ isRecording ? tm('voice.speaking') : tm('voice.startRecording') }}
-                        </v-tooltip>
-                    </v-btn>
-                    <v-btn icon v-if="isRunning && !canSend" @click="$emit('stop')" variant="tonal" color="primary" class="send-btn">
-                        <v-icon icon="mdi-stop" variant="text" plain></v-icon>
-                        <v-tooltip activator="parent" location="top">
-                            {{ tm('input.stopGenerating') }}
-                        </v-tooltip>
-                    </v-btn>
-                    <v-btn v-else @click="$emit('send')" icon="mdi-send" variant="tonal" color="primary"
-                        :disabled="!canSend" class="send-btn" />
-                </div>
-            </div>
-        </div>
-
-        <!-- 附件预览区 -->
-        <div class="attachments-preview"
-            v-if="stagedImagesUrl.length > 0 || stagedAudioUrl || (stagedFiles && stagedFiles.length > 0)">
-            <div v-for="(img, index) in stagedImagesUrl" :key="'img-' + index" class="image-preview">
-                <img :src="img" class="preview-image" />
-                <v-btn @click="$emit('removeImage', index)" class="remove-attachment-btn" icon="mdi-close" size="small"
-                    color="error" variant="text" />
-            </div>
-
-            <div v-if="stagedAudioUrl" class="audio-preview">
-                <v-chip color="primary" variant="tonal" class="audio-chip">
-                    <v-icon start icon="mdi-microphone" size="small"></v-icon>
-                    {{ tm('voice.recording') }}
-                </v-chip>
-                <v-btn @click="$emit('removeAudio')" class="remove-attachment-btn" icon="mdi-close" size="small"
-                    color="error" variant="text" />
-            </div>
-
-            <div v-for="(file, index) in stagedFiles" :key="'file-' + index" class="file-preview">
-                <v-chip color="primary" variant="tonal" class="file-chip">
-                    <v-icon start icon="mdi-file-document-outline" size="small"></v-icon>
-                    <span class="file-name-preview">{{ file.original_name }}</span>
-                </v-chip>
-                <v-btn @click="$emit('removeFile', index)" class="remove-attachment-btn" icon="mdi-close" size="small"
-                    color="error" variant="text" />
-            </div>
+          <v-btn
+            icon
+            variant="text"
+            :color="isRecording ? 'error' : 'primary'"
+            class="record-btn"
+            @click="handleRecordClick"
+          >
+            <v-icon
+              :icon="isRecording ? 'mdi-stop-circle' : 'mdi-microphone'"
+              variant="text"
+              plain
+            />
+            <v-tooltip
+              activator="parent"
+              location="top"
+            >
+              {{ isRecording ? tm('voice.speaking') : tm('voice.startRecording') }}
+            </v-tooltip>
+          </v-btn>
+          <v-btn
+            v-if="isRunning && !canSend"
+            icon
+            variant="tonal"
+            color="primary"
+            class="send-btn"
+            @click="$emit('stop')"
+          >
+            <v-icon
+              icon="mdi-stop"
+              variant="text"
+              plain
+            />
+            <v-tooltip
+              activator="parent"
+              location="top"
+            >
+              {{ tm('input.stopGenerating') }}
+            </v-tooltip>
+          </v-btn>
+          <v-btn
+            v-else
+            icon="mdi-send"
+            variant="tonal"
+            color="primary"
+            :disabled="!canSend"
+            class="send-btn"
+            @click="$emit('send')"
+          />
         </div>
+      </div>
     </div>
+
+    <!-- 附件预览区 -->
+    <div
+      v-if="stagedImagesUrl.length > 0 || stagedAudioUrl || (stagedFiles && stagedFiles.length > 0)"
+      class="attachments-preview"
+    >
+      <div
+        v-for="(img, index) in stagedImagesUrl"
+        :key="'img-' + index"
+        class="image-preview"
+      >
+        <img
+          :src="img"
+          class="preview-image"
+        >
+        <v-btn
+          class="remove-attachment-btn"
+          icon="mdi-close"
+          size="small"
+          color="error"
+          variant="text"
+          @click="$emit('removeImage', index)"
+        />
+      </div>
+
+      <div
+        v-if="stagedAudioUrl"
+        class="audio-preview"
+      >
+        <v-chip
+          color="primary"
+          variant="tonal"
+          class="audio-chip"
+        >
+          <v-icon
+            start
+            icon="mdi-microphone"
+            size="small"
+          />
+          {{ tm('voice.recording') }}
+        </v-chip>
+        <v-btn
+          class="remove-attachment-btn"
+          icon="mdi-close"
+          size="small"
+          color="error"
+          variant="text"
+          @click="$emit('removeAudio')"
+        />
+      </div>
+
+      <div
+        v-for="(file, index) in stagedFiles"
+        :key="'file-' + index"
+        class="file-preview"
+      >
+        <v-chip
+          color="primary"
+          variant="tonal"
+          class="file-chip"
+        >
+          <v-icon
+            start
+            icon="mdi-file-document-outline"
+            size="small"
+          />
+          <span class="file-name-preview">{{ file.original_name }}</span>
+        </v-chip>
+        <v-btn
+          class="remove-attachment-btn"
+          icon="mdi-close"
+          size="small"
+          color="error"
+          variant="text"
+          @click="$emit('removeFile', index)"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/ConfigSelector.vue b/dashboard/src/components/chat/ConfigSelector.vue
index d53e3ed77..b809e93d5 100644
--- a/dashboard/src/components/chat/ConfigSelector.vue
+++ b/dashboard/src/components/chat/ConfigSelector.vue
@@ -1,75 +1,112 @@
 <template>
-    <div>
-        <v-list-item
-            class="styled-menu-item"
-            rounded="md"
-            @click="openDialog"
-            :disabled="loadingConfigs || saving"
-        >
-            <template v-slot:prepend>
-                <v-icon icon="mdi-cog-outline" size="small"></v-icon>
-            </template>
-            <v-list-item-title>
-                {{ tm('config.title') }}
-            </v-list-item-title>
-            <v-list-item-subtitle class="text-caption">
-                {{ selectedConfigLabel }}
-            </v-list-item-subtitle>
-            <template v-slot:append>
-                <v-icon icon="mdi-chevron-right" size="small" class="text-medium-emphasis"></v-icon>
-            </template>
-        </v-list-item>
+  <div>
+    <v-list-item
+      class="styled-menu-item"
+      rounded="md"
+      :disabled="loadingConfigs || saving"
+      @click="openDialog"
+    >
+      <template #prepend>
+        <v-icon
+          icon="mdi-cog-outline"
+          size="small"
+        />
+      </template>
+      <v-list-item-title>
+        {{ tm('config.title') }}
+      </v-list-item-title>
+      <v-list-item-subtitle class="text-caption">
+        {{ selectedConfigLabel }}
+      </v-list-item-subtitle>
+      <template #append>
+        <v-icon
+          icon="mdi-chevron-right"
+          size="small"
+          class="text-medium-emphasis"
+        />
+      </template>
+    </v-list-item>
 
-        <v-dialog v-model="dialog" max-width="480">
-            <v-card>
-                <v-card-title class="d-flex align-center justify-space-between">
-                    <span>选择配置文件</span>
-                    <v-btn icon variant="text" @click="closeDialog">
-                        <v-icon>mdi-close</v-icon>
-                    </v-btn>
-                </v-card-title>
-                <v-card-text>
-                    <div v-if="loadingConfigs" class="text-center py-6">
-                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
-                    </div>
+    <v-dialog
+      v-model="dialog"
+      max-width="480"
+    >
+      <v-card>
+        <v-card-title class="d-flex align-center justify-space-between">
+          <span>选择配置文件</span>
+          <v-btn
+            icon
+            variant="text"
+            @click="closeDialog"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          <div
+            v-if="loadingConfigs"
+            class="text-center py-6"
+          >
+            <v-progress-circular
+              indeterminate
+              color="primary"
+            />
+          </div>
 
-                    <v-list v-else class="config-list" density="comfortable">
-                        <v-list-item
-                            v-for="config in configOptions"
-                            :key="config.id"
-                            :active="tempSelectedConfig === config.id"
-                            rounded="lg"
-                            variant="text"
-                            @click="tempSelectedConfig = config.id"
-                        >
-                            <v-list-item-title>{{ config.name }}</v-list-item-title>
-                            <v-list-item-subtitle class="text-caption text-grey">
-                                {{ config.id }}
-                            </v-list-item-subtitle>
-                            <template #append>
-                                <v-icon v-if="tempSelectedConfig === config.id" color="primary">mdi-check</v-icon>
-                            </template>
-                        </v-list-item>
-                        <div v-if="configOptions.length === 0" class="text-center text-body-2 text-medium-emphasis">
-                            暂无可选配置，请先在配置页创建。
-                        </div>
-                    </v-list>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn variant="text" @click="closeDialog">取消</v-btn>
-                    <v-btn
-                        color="primary"
-                        @click="confirmSelection"
-                        :disabled="!tempSelectedConfig"
-                        :loading="saving"
-                    >
-                        应用
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </div>
+          <v-list
+            v-else
+            class="config-list"
+            density="comfortable"
+          >
+            <v-list-item
+              v-for="config in configOptions"
+              :key="config.id"
+              :active="tempSelectedConfig === config.id"
+              rounded="lg"
+              variant="text"
+              @click="tempSelectedConfig = config.id"
+            >
+              <v-list-item-title>{{ config.name }}</v-list-item-title>
+              <v-list-item-subtitle class="text-caption text-grey">
+                {{ config.id }}
+              </v-list-item-subtitle>
+              <template #append>
+                <v-icon
+                  v-if="tempSelectedConfig === config.id"
+                  color="primary"
+                >
+                  mdi-check
+                </v-icon>
+              </template>
+            </v-list-item>
+            <div
+              v-if="configOptions.length === 0"
+              class="text-center text-body-2 text-medium-emphasis"
+            >
+              暂无可选配置，请先在配置页创建。
+            </div>
+          </v-list>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="closeDialog"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="primary"
+            :disabled="!tempSelectedConfig"
+            :loading="saving"
+            @click="confirmSelection"
+          >
+            应用
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/ConversationSidebar.vue b/dashboard/src/components/chat/ConversationSidebar.vue
index 8045fd8d1..8970a747d 100644
--- a/dashboard/src/components/chat/ConversationSidebar.vue
+++ b/dashboard/src/components/chat/ConversationSidebar.vue
@@ -1,301 +1,456 @@
 <template>
-    <div class="sidebar-panel" 
-        :class="{ 
-            'sidebar-collapsed': sidebarCollapsed && !isMobile,
-            'mobile-sidebar-open': isMobile && mobileMenuOpen,
-            'mobile-sidebar': isMobile
-        }"
-        :style="{ backgroundColor: sidebarCollapsed && !isMobile ? 'rgb(var(--v-theme-surface))' : 'rgb(var(--v-theme-mcpCardBg))' }">
+  <div
+    class="sidebar-panel" 
+    :class="{ 
+      'sidebar-collapsed': sidebarCollapsed && !isMobile,
+      'mobile-sidebar-open': isMobile && mobileMenuOpen,
+      'mobile-sidebar': isMobile
+    }"
+    :style="{ backgroundColor: sidebarCollapsed && !isMobile ? 'rgb(var(--v-theme-surface))' : 'rgb(var(--v-theme-mcpCardBg))' }"
+  >
+    <div
+      v-if="!isMobile"
+      class="sidebar-collapse-btn-container"
+    >
+      <v-btn
+        icon
+        class="sidebar-collapse-btn"
+        variant="text"
+        color="deep-purple"
+        @click="toggleSidebar"
+      >
+        <v-icon>{{ sidebarCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
+      </v-btn>
+    </div>
 
-        <div class="sidebar-collapse-btn-container" v-if="!isMobile">
-            <v-btn icon class="sidebar-collapse-btn" @click="toggleSidebar" variant="text" color="deep-purple">
-                <v-icon>{{ sidebarCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
-            </v-btn>
-        </div>
+    <div
+      v-if="isMobile"
+      class="sidebar-collapse-btn-container"
+    >
+      <v-btn
+        icon
+        class="sidebar-collapse-btn"
+        variant="text"
+        color="deep-purple"
+        @click="$emit('closeMobileSidebar')"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </div>
 
-        <div class="sidebar-collapse-btn-container" v-if="isMobile">
-            <v-btn icon class="sidebar-collapse-btn" @click="$emit('closeMobileSidebar')" variant="text"
-                color="deep-purple">
-                <v-icon>mdi-close</v-icon>
-            </v-btn>
-        </div>
+    <div style="padding: 8px; opacity: 0.6;">
+      <div
+        v-if="!sidebarCollapsed || isMobile"
+        class="new-chat-row"
+      >
+        <v-btn
+          block
+          variant="text"
+          class="new-chat-btn"
+          :disabled="!currSessionId && !selectedProjectId"
+          prepend-icon="mdi-square-edit-outline"
+          @click="$emit('newChat')"
+        >
+          {{ tm('actions.newChat') }}
+        </v-btn>
+        <v-btn
+          v-if="sessions.length > 0"
+          icon
+          size="small"
+          variant="text"
+          :color="batchMode ? 'primary' : undefined"
+          @click="toggleBatchMode"
+        >
+          <v-icon>mdi-checkbox-multiple-marked-outline</v-icon>
+        </v-btn>
+      </div>
+      <v-btn
+        v-if="sidebarCollapsed && !isMobile"
+        icon="mdi-square-edit-outline"
+        rounded="xl"
+        :disabled="!currSessionId && !selectedProjectId"
+        elevation="0"
+        @click="$emit('newChat')"
+      />
+    </div>
 
-        <div style="padding: 8px; opacity: 0.6;">
-            <div class="new-chat-row" v-if="!sidebarCollapsed || isMobile">
-                <v-btn block variant="text" class="new-chat-btn" @click="$emit('newChat')" :disabled="!currSessionId && !selectedProjectId"
-                    prepend-icon="mdi-square-edit-outline">{{ tm('actions.newChat') }}</v-btn>
-                <v-btn v-if="sessions.length > 0" icon size="small" variant="text" @click="toggleBatchMode"
-                    :color="batchMode ? 'primary' : undefined">
-                    <v-icon>mdi-checkbox-multiple-marked-outline</v-icon>
-                </v-btn>
-            </div>
-            <v-btn icon="mdi-square-edit-outline" rounded="xl" @click="$emit('newChat')" :disabled="!currSessionId && !selectedProjectId"
-                v-if="sidebarCollapsed && !isMobile" elevation="0"></v-btn>
-        </div>
+    <!-- Batch action bar -->
+    <div
+      v-if="batchMode && (!sidebarCollapsed || isMobile)"
+      class="batch-action-bar"
+    >
+      <v-btn
+        size="x-small"
+        variant="text"
+        @click="toggleSelectAll"
+      >
+        {{ isAllSelected ? tm('batch.deselectAll') : tm('batch.selectAll') }}
+      </v-btn>
+      <span class="batch-selected-count">{{ tm('batch.selected', { count: batchSelected.length }) }}</span>
+      <v-spacer />
+      <v-btn
+        size="x-small"
+        variant="text"
+        color="error"
+        :disabled="batchSelected.length === 0"
+        @click="handleBatchDelete"
+      >
+        {{ tm('batch.delete') }}
+      </v-btn>
+    </div>
 
-        <!-- Batch action bar -->
-        <div v-if="batchMode && (!sidebarCollapsed || isMobile)" class="batch-action-bar">
-            <v-btn size="x-small" variant="text" @click="toggleSelectAll">
-                {{ isAllSelected ? tm('batch.deselectAll') : tm('batch.selectAll') }}
-            </v-btn>
-            <span class="batch-selected-count">{{ tm('batch.selected', { count: batchSelected.length }) }}</span>
-            <v-spacer />
-            <v-btn size="x-small" variant="text" color="error" :disabled="batchSelected.length === 0"
-                @click="handleBatchDelete">
-                {{ tm('batch.delete') }}
-            </v-btn>
-        </div>
+    <!-- 项目列表组件 -->
+    <ProjectList
+      v-if="!sidebarCollapsed || isMobile"
+      :projects="projects"
+      @selectProject="$emit('selectProject', $event)"
+      @createProject="$emit('createProject')"
+      @editProject="$emit('editProject', $event)"
+      @deleteProject="$emit('deleteProject', $event)"
+    />
 
-        <!-- 项目列表组件 -->
-        <ProjectList
-            v-if="!sidebarCollapsed || isMobile"
-            :projects="projects"
-            @selectProject="$emit('selectProject', $event)"
-            @createProject="$emit('createProject')"
-            @editProject="$emit('editProject', $event)"
-            @deleteProject="$emit('deleteProject', $event)"
-        />
+    <div
+      v-if="!sidebarCollapsed || isMobile"
+      style="overflow-y: auto; flex-grow: 1; overscroll-behavior-y: contain;"
+    >
+      <v-card
+        v-if="sessions.length > 0"
+        flat
+        style="background-color: transparent;"
+      >
+        <v-list
+          density="compact"
+          nav
+          class="conversation-list"
+          style="background-color: transparent;"
+          :selected="batchMode ? [] : selectedSessions"
+          @update:selected="handleListSelect"
+        >
+          <v-list-item
+            v-for="item in sessions"
+            :key="item.session_id"
+            :value="item.session_id"
+            rounded="lg"
+            class="conversation-item"
+            active-color="secondary"
+            @click="batchMode ? toggleBatchItem(item.session_id) : undefined"
+          >
+            <template #prepend>
+              <div
+                class="batch-checkbox-slot"
+                :class="{ 'batch-checkbox-slot--active': batchMode }"
+              >
+                <v-checkbox-btn
+                  :model-value="batchSelected.includes(item.session_id)"
+                  density="compact"
+                  hide-details
+                  class="batch-checkbox"
+                  @update:model-value="toggleBatchItem(item.session_id)"
+                  @click.stop
+                />
+              </div>
+            </template>
 
-        <div style="overflow-y: auto; flex-grow: 1; overscroll-behavior-y: contain;"
-            v-if="!sidebarCollapsed || isMobile">
-            <v-card v-if="sessions.length > 0" flat style="background-color: transparent;">
-                <v-list density="compact" nav class="conversation-list"
-                    style="background-color: transparent;" :selected="batchMode ? [] : selectedSessions"
-                    @update:selected="handleListSelect">
-                    <v-list-item v-for="item in sessions" :key="item.session_id" :value="item.session_id"
-                        rounded="lg" class="conversation-item" active-color="secondary"
-                        @click="batchMode ? toggleBatchItem(item.session_id) : undefined">
-
-                        <template v-slot:prepend>
-                            <div class="batch-checkbox-slot" :class="{ 'batch-checkbox-slot--active': batchMode }">
-                                <v-checkbox-btn
-                                    :model-value="batchSelected.includes(item.session_id)"
-                                    @update:model-value="toggleBatchItem(item.session_id)"
-                                    @click.stop
-                                    density="compact"
-                                    hide-details
-                                    class="batch-checkbox"
-                                />
-                            </div>
-                        </template>
-
-                        <v-list-item-title v-if="!sidebarCollapsed || isMobile" class="conversation-title"
-                            :style="{ color: 'rgb(var(--v-theme-primaryText))' }">
-                            {{ item.display_name || tm('conversation.newConversation') }}
-                        </v-list-item-title>
-                        <!-- <v-list-item-subtitle v-if="!sidebarCollapsed || isMobile" class="timestamp">
+            <v-list-item-title
+              v-if="!sidebarCollapsed || isMobile"
+              class="conversation-title"
+              :style="{ color: 'rgb(var(--v-theme-primaryText))' }"
+            >
+              {{ item.display_name || tm('conversation.newConversation') }}
+            </v-list-item-title>
+            <!-- <v-list-item-subtitle v-if="!sidebarCollapsed || isMobile" class="timestamp">
                             {{ new Date(item.updated_at).toLocaleString() }}
                         </v-list-item-subtitle> -->
 
-                        <template v-if="!batchMode && (!sidebarCollapsed || isMobile)" v-slot:append>
-                            <div class="conversation-actions">
-                                <v-btn icon="mdi-pencil" size="x-small" variant="text"
-                                    class="edit-title-btn"
-                                    @click.stop="$emit('editTitle', item.session_id, item.display_name ?? '')" />
-                                <v-btn icon="mdi-delete" size="x-small" variant="text"
-                                    class="delete-conversation-btn" color="error"
-                                    @click.stop="handleDeleteConversation(item)" />
-                            </div>
-                        </template>
-                    </v-list-item>
-                </v-list>
-            </v-card>
+            <template
+              v-if="!batchMode && (!sidebarCollapsed || isMobile)"
+              #append
+            >
+              <div class="conversation-actions">
+                <v-btn
+                  icon="mdi-pencil"
+                  size="x-small"
+                  variant="text"
+                  class="edit-title-btn"
+                  @click.stop="$emit('editTitle', item.session_id, item.display_name ?? '')"
+                />
+                <v-btn
+                  icon="mdi-delete"
+                  size="x-small"
+                  variant="text"
+                  class="delete-conversation-btn"
+                  color="error"
+                  @click.stop="handleDeleteConversation(item)"
+                />
+              </div>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card>
 
-            <v-fade-transition>
-                <div class="no-conversations" v-if="sessions.length === 0">
-                    <v-icon icon="mdi-message-text-outline" size="large" color="grey-lighten-1"></v-icon>
-                    <div class="no-conversations-text" v-if="!sidebarCollapsed || isMobile">
-                        {{ tm('conversation.noHistory') }}
-                    </div>
-                </div>
-            </v-fade-transition>
+      <v-fade-transition>
+        <div
+          v-if="sessions.length === 0"
+          class="no-conversations"
+        >
+          <v-icon
+            icon="mdi-message-text-outline"
+            size="large"
+            color="grey-lighten-1"
+          />
+          <div
+            v-if="!sidebarCollapsed || isMobile"
+            class="no-conversations-text"
+          >
+            {{ tm('conversation.noHistory') }}
+          </div>
         </div>
-
-        <!-- 收起时的占位元素 -->
-        <div class="sidebar-spacer" v-if="sidebarCollapsed && !isMobile"></div>
-
-        <!-- 底部设置按钮 -->
-        <div class="sidebar-footer">
-            <StyledMenu location="top" :close-on-content-click="false">
-                <template v-slot:activator="{ props: menuProps }">
-                    <v-btn 
-                        v-bind="menuProps"
-                        :icon="sidebarCollapsed && !isMobile"
-                        :block="!sidebarCollapsed || isMobile"
-                        variant="text" 
-                        class="settings-btn"
-                        :class="{ 'settings-btn-collapsed': sidebarCollapsed && !isMobile }"
-                        :prepend-icon="(!sidebarCollapsed || isMobile) ? 'mdi-cog-outline' : undefined"
-                    >
-                        <v-icon v-if="sidebarCollapsed && !isMobile">mdi-cog-outline</v-icon>
-                        <template v-if="!sidebarCollapsed || isMobile">{{ t('core.common.settings') }}</template>
-                    </v-btn>
-                </template>
-                
-                <!-- 语言切换（分组） -->
-                <v-menu
-                    :open-on-hover="!isMobile"
-                    :open-on-click="isMobile"
-                    :open-delay="!isMobile ? 60 : 0"
-                    :close-delay="!isMobile ? 120 : 0"
-                    :location="isMobile ? 'bottom' : 'end center'"
-                    offset="8"
-                    close-on-content-click
-                >
-                    <template v-slot:activator="{ props: languageMenuProps }">
-                        <v-list-item
-                            v-bind="languageMenuProps"
-                            class="styled-menu-item chat-settings-group-trigger"
-                            rounded="md"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon>mdi-translate</v-icon>
-                            </template>
-                            <v-list-item-title>{{ t('core.common.language') }}</v-list-item-title>
-                            <template v-slot:append>
-                                <span class="chat-settings-group-current">{{ currentLanguage?.flag }}</span>
-                                <v-icon size="18" class="chat-settings-group-arrow">mdi-chevron-right</v-icon>
-                            </template>
-                        </v-list-item>
-                    </template>
-
-                    <v-card class="styled-menu-card" style="min-width: 180px;" elevation="8" rounded="lg">
-                        <v-list density="compact" class="styled-menu-list pa-1">
-                            <v-list-item
-                                v-for="lang in languages"
-                                :key="lang.code"
-                                :value="lang.code"
-                                @click="changeLanguage(lang.code)"
-                                :class="{ 'styled-menu-item-active': currentLocale === lang.code }"
-                                class="styled-menu-item"
-                                rounded="md"
-                            >
-                                <template v-slot:prepend>
-                                    <span class="language-flag">{{ lang.flag }}</span>
-                                </template>
-                                <v-list-item-title>{{ lang.name }}</v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card>
-                </v-menu>
-                
-                <!-- 主题切换 -->
-                <v-list-item class="styled-menu-item" @click="$emit('toggleTheme')">
-                    <template v-slot:prepend>
-                        <v-icon>{{ isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}</v-icon>
-                    </template>
-                    <v-list-item-title>{{ isDark ? tm('modes.lightMode') : tm('modes.darkMode') }}</v-list-item-title>
-                </v-list-item>
-
-                <!-- 通信传输模式（分组） -->
-                <v-menu
-                    :open-on-hover="!isMobile"
-                    :open-on-click="isMobile"
-                    :open-delay="!isMobile ? 60 : 0"
-                    :close-delay="!isMobile ? 120 : 0"
-                    :location="isMobile ? 'bottom' : 'end center'"
-                    offset="8"
-                    close-on-content-click
-                >
-                    <template v-slot:activator="{ props: transportMenuProps }">
-                        <v-list-item
-                            v-bind="transportMenuProps"
-                            class="styled-menu-item chat-settings-group-trigger"
-                            rounded="md"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon>mdi-lan-connect</v-icon>
-                            </template>
-                            <v-list-item-title>{{ tm('transport.title') }}</v-list-item-title>
-                            <template v-slot:append>
-                                <span class="chat-settings-group-current chat-settings-transport-current">{{ currentTransportLabel }}</span>
-                                <v-icon size="18" class="chat-settings-group-arrow">mdi-chevron-right</v-icon>
-                            </template>
-                        </v-list-item>
-                    </template>
-
-                    <v-card class="styled-menu-card" style="min-width: 220px;" elevation="8" rounded="lg">
-                        <v-list density="compact" class="styled-menu-list pa-1">
-                            <v-list-item
-                                v-for="opt in transportOptions"
-                                :key="opt.value"
-                                :value="opt.value"
-                                @click="handleTransportModeChange(opt.value)"
-                                :class="{ 'styled-menu-item-active': transportMode === opt.value }"
-                                class="styled-menu-item"
-                                rounded="md"
-                            >
-                                <v-list-item-title>{{ opt.label }}</v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card>
-                </v-menu>
-
-                <!-- 发送快捷键（分组） -->
-                <v-menu
-                    :open-on-hover="!isMobile"
-                    :open-on-click="isMobile"
-                    :open-delay="!isMobile ? 60 : 0"
-                    :close-delay="!isMobile ? 120 : 0"
-                    :location="isMobile ? 'bottom' : 'end center'"
-                    offset="8"
-                    close-on-content-click
-                >
-                    <template v-slot:activator="{ props: sendShortcutMenuProps }">
-                        <v-list-item
-                            v-bind="sendShortcutMenuProps"
-                            class="styled-menu-item chat-settings-group-trigger"
-                            rounded="md"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon>mdi-keyboard-outline</v-icon>
-                            </template>
-                            <v-list-item-title>{{ tm('shortcuts.sendKey.title') }}</v-list-item-title>
-                            <template v-slot:append>
-                                <span class="chat-settings-group-current chat-settings-transport-current">{{ currentSendShortcutLabel }}</span>
-                                <v-icon size="18" class="chat-settings-group-arrow">mdi-chevron-right</v-icon>
-                            </template>
-                        </v-list-item>
-                    </template>
-
-                    <v-card class="styled-menu-card" style="min-width: 220px;" elevation="8" rounded="lg">
-                        <v-list density="compact" class="styled-menu-list pa-1">
-                            <v-list-item
-                                v-for="opt in sendShortcutOptions"
-                                :key="opt.value"
-                                :value="opt.value"
-                                @click="handleSendShortcutChange(opt.value)"
-                                :class="{ 'styled-menu-item-active': props.sendShortcut === opt.value }"
-                                class="styled-menu-item"
-                                rounded="md"
-                            >
-                                <v-list-item-title>{{ opt.label }}</v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card>
-                </v-menu>
-
-                <!-- 全屏/退出全屏 -->
-                <v-list-item class="styled-menu-item" @click="$emit('toggleFullscreen')">
-                    <template v-slot:prepend>
-                        <v-icon>{{ chatboxMode ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
-                    </template>
-                    <v-list-item-title>{{ chatboxMode ? tm('actions.exitFullscreen') : tm('actions.fullscreen') }}</v-list-item-title>
-                </v-list-item>
-
-                <!-- 提供商配置 -->
-                <v-list-item class="styled-menu-item" @click="showProviderConfigDialog = true">
-                    <template v-slot:prepend>
-                        <v-icon>mdi-creation</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('actions.providerConfig') }}</v-list-item-title>
-                </v-list-item>
-            </StyledMenu>
-        </div>
-
-        <!-- 提供商配置对话框 -->
-        <ProviderConfigDialog v-model="showProviderConfigDialog" />
+      </v-fade-transition>
     </div>
+
+    <!-- 收起时的占位元素 -->
+    <div
+      v-if="sidebarCollapsed && !isMobile"
+      class="sidebar-spacer"
+    />
+
+    <!-- 底部设置按钮 -->
+    <div class="sidebar-footer">
+      <StyledMenu
+        location="top"
+        :close-on-content-click="false"
+      >
+        <template #activator="{ props: menuProps }">
+          <v-btn 
+            v-bind="menuProps"
+            :icon="sidebarCollapsed && !isMobile"
+            :block="!sidebarCollapsed || isMobile"
+            variant="text" 
+            class="settings-btn"
+            :class="{ 'settings-btn-collapsed': sidebarCollapsed && !isMobile }"
+            :prepend-icon="(!sidebarCollapsed || isMobile) ? 'mdi-cog-outline' : undefined"
+          >
+            <v-icon v-if="sidebarCollapsed && !isMobile">
+              mdi-cog-outline
+            </v-icon>
+            <template v-if="!sidebarCollapsed || isMobile">
+              {{ t('core.common.settings') }}
+            </template>
+          </v-btn>
+        </template>
+                
+        <!-- 语言切换（分组） -->
+        <v-menu
+          :open-on-hover="!isMobile"
+          :open-on-click="isMobile"
+          :open-delay="!isMobile ? 60 : 0"
+          :close-delay="!isMobile ? 120 : 0"
+          :location="isMobile ? 'bottom' : 'end center'"
+          offset="8"
+          close-on-content-click
+        >
+          <template #activator="{ props: languageMenuProps }">
+            <v-list-item
+              v-bind="languageMenuProps"
+              class="styled-menu-item chat-settings-group-trigger"
+              rounded="md"
+            >
+              <template #prepend>
+                <v-icon>mdi-translate</v-icon>
+              </template>
+              <v-list-item-title>{{ t('core.common.language') }}</v-list-item-title>
+              <template #append>
+                <span class="chat-settings-group-current">{{ currentLanguage?.flag }}</span>
+                <v-icon
+                  size="18"
+                  class="chat-settings-group-arrow"
+                >
+                  mdi-chevron-right
+                </v-icon>
+              </template>
+            </v-list-item>
+          </template>
+
+          <v-card
+            class="styled-menu-card"
+            style="min-width: 180px;"
+            elevation="8"
+            rounded="lg"
+          >
+            <v-list
+              density="compact"
+              class="styled-menu-list pa-1"
+            >
+              <v-list-item
+                v-for="lang in languages"
+                :key="lang.code"
+                :value="lang.code"
+                :class="{ 'styled-menu-item-active': currentLocale === lang.code }"
+                class="styled-menu-item"
+                rounded="md"
+                @click="changeLanguage(lang.code)"
+              >
+                <template #prepend>
+                  <span class="language-flag">{{ lang.flag }}</span>
+                </template>
+                <v-list-item-title>{{ lang.name }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+                
+        <!-- 主题切换 -->
+        <v-list-item
+          class="styled-menu-item"
+          @click="$emit('toggleTheme')"
+        >
+          <template #prepend>
+            <v-icon>{{ isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}</v-icon>
+          </template>
+          <v-list-item-title>{{ isDark ? tm('modes.lightMode') : tm('modes.darkMode') }}</v-list-item-title>
+        </v-list-item>
+
+        <!-- 通信传输模式（分组） -->
+        <v-menu
+          :open-on-hover="!isMobile"
+          :open-on-click="isMobile"
+          :open-delay="!isMobile ? 60 : 0"
+          :close-delay="!isMobile ? 120 : 0"
+          :location="isMobile ? 'bottom' : 'end center'"
+          offset="8"
+          close-on-content-click
+        >
+          <template #activator="{ props: transportMenuProps }">
+            <v-list-item
+              v-bind="transportMenuProps"
+              class="styled-menu-item chat-settings-group-trigger"
+              rounded="md"
+            >
+              <template #prepend>
+                <v-icon>mdi-lan-connect</v-icon>
+              </template>
+              <v-list-item-title>{{ tm('transport.title') }}</v-list-item-title>
+              <template #append>
+                <span class="chat-settings-group-current chat-settings-transport-current">{{ currentTransportLabel }}</span>
+                <v-icon
+                  size="18"
+                  class="chat-settings-group-arrow"
+                >
+                  mdi-chevron-right
+                </v-icon>
+              </template>
+            </v-list-item>
+          </template>
+
+          <v-card
+            class="styled-menu-card"
+            style="min-width: 220px;"
+            elevation="8"
+            rounded="lg"
+          >
+            <v-list
+              density="compact"
+              class="styled-menu-list pa-1"
+            >
+              <v-list-item
+                v-for="opt in transportOptions"
+                :key="opt.value"
+                :value="opt.value"
+                :class="{ 'styled-menu-item-active': transportMode === opt.value }"
+                class="styled-menu-item"
+                rounded="md"
+                @click="handleTransportModeChange(opt.value)"
+              >
+                <v-list-item-title>{{ opt.label }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+
+        <!-- 发送快捷键（分组） -->
+        <v-menu
+          :open-on-hover="!isMobile"
+          :open-on-click="isMobile"
+          :open-delay="!isMobile ? 60 : 0"
+          :close-delay="!isMobile ? 120 : 0"
+          :location="isMobile ? 'bottom' : 'end center'"
+          offset="8"
+          close-on-content-click
+        >
+          <template #activator="{ props: sendShortcutMenuProps }">
+            <v-list-item
+              v-bind="sendShortcutMenuProps"
+              class="styled-menu-item chat-settings-group-trigger"
+              rounded="md"
+            >
+              <template #prepend>
+                <v-icon>mdi-keyboard-outline</v-icon>
+              </template>
+              <v-list-item-title>{{ tm('shortcuts.sendKey.title') }}</v-list-item-title>
+              <template #append>
+                <span class="chat-settings-group-current chat-settings-transport-current">{{ currentSendShortcutLabel }}</span>
+                <v-icon
+                  size="18"
+                  class="chat-settings-group-arrow"
+                >
+                  mdi-chevron-right
+                </v-icon>
+              </template>
+            </v-list-item>
+          </template>
+
+          <v-card
+            class="styled-menu-card"
+            style="min-width: 220px;"
+            elevation="8"
+            rounded="lg"
+          >
+            <v-list
+              density="compact"
+              class="styled-menu-list pa-1"
+            >
+              <v-list-item
+                v-for="opt in sendShortcutOptions"
+                :key="opt.value"
+                :value="opt.value"
+                :class="{ 'styled-menu-item-active': props.sendShortcut === opt.value }"
+                class="styled-menu-item"
+                rounded="md"
+                @click="handleSendShortcutChange(opt.value)"
+              >
+                <v-list-item-title>{{ opt.label }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+
+        <!-- 全屏/退出全屏 -->
+        <v-list-item
+          class="styled-menu-item"
+          @click="$emit('toggleFullscreen')"
+        >
+          <template #prepend>
+            <v-icon>{{ chatboxMode ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
+          </template>
+          <v-list-item-title>{{ chatboxMode ? tm('actions.exitFullscreen') : tm('actions.fullscreen') }}</v-list-item-title>
+        </v-list-item>
+
+        <!-- 提供商配置 -->
+        <v-list-item
+          class="styled-menu-item"
+          @click="showProviderConfigDialog = true"
+        >
+          <template #prepend>
+            <v-icon>mdi-creation</v-icon>
+          </template>
+          <v-list-item-title>{{ tm('actions.providerConfig') }}</v-list-item-title>
+        </v-list-item>
+      </StyledMenu>
+    </div>
+
+    <!-- 提供商配置对话框 -->
+    <ProviderConfigDialog v-model="showProviderConfigDialog" />
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/LiveMode.vue b/dashboard/src/components/chat/LiveMode.vue
index 54b01f4d9..5cddb34d2 100644
--- a/dashboard/src/components/chat/LiveMode.vue
+++ b/dashboard/src/components/chat/LiveMode.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="live-mode-container">
     <div class="header-controls">
-      <v-btn icon="mdi-close" @click="handleClose" flat variant="text" />
+      <v-btn
+        icon="mdi-close"
+        flat
+        variant="text"
+        @click="handleClose"
+      />
       <v-btn
         :icon="isCodeMode ? 'mdi-code-tags-check' : 'mdi-code-tags'"
-        @click="toggleCodeMode"
         flat
         variant="text"
         :color="isCodeMode ? 'primary' : ''"
+        @click="toggleCodeMode"
       />
       <v-btn
         :icon="
@@ -15,22 +20,26 @@
             ? 'mdi-emoticon-confused'
             : 'mdi-emoticon-confused-outline'
         "
-        @click="toggleNervousMode"
         flat
         variant="text"
         :color="isNervousMode ? 'primary' : ''"
+        @click="toggleNervousMode"
       />
     </div>
 
-    <span style="color: gray; padding-left: 16px"
-      >We're developing Astr Live Mode on ChatUI & Desktop right now. Stay
-      tuned!</span
-    >
+    <span style="color: gray; padding-left: 16px">We're developing Astr Live Mode on ChatUI & Desktop right now. Stay
+      tuned!</span>
 
     <div class="live-mode-content">
-      <div class="center-circle-container" @click="handleCircleClick">
+      <div
+        class="center-circle-container"
+        @click="handleCircleClick"
+      >
         <!-- 爆炸效果层 -->
-        <div v-if="isExploding" class="explosion-wave"></div>
+        <div
+          v-if="isExploding"
+          class="explosion-wave"
+        />
 
         <SiriOrb
           :energy="orbEnergy"
@@ -44,7 +53,10 @@
       <div class="status-text">
         {{ statusText }}
       </div>
-      <div class="messages-container" v-if="messages.length > 0">
+      <div
+        v-if="messages.length > 0"
+        class="messages-container"
+      >
         <div
           v-for="(msg, index) in messages"
           :key="index"
@@ -57,40 +69,27 @@
         </div>
       </div>
 
-      <div class="metrics-container" v-if="Object.keys(metrics).length > 0">
-        <span v-if="metrics.wav_assemble_time"
-          >WAV Assemble:
-          {{ (metrics.wav_assemble_time * 1000).toFixed(0) }}ms</span
-        >
-        <span v-if="metrics.llm_ttft"
-          >LLM First Token Latency:
-          {{ (metrics.llm_ttft * 1000).toFixed(0) }}ms</span
-        >
-        <span v-if="metrics.llm_total_time"
-          >LLM Total Latency:
-          {{ (metrics.llm_total_time * 1000).toFixed(0) }}ms</span
-        >
-        <span v-if="metrics.tts_first_frame_time"
-          >TTS First Frame Latency:
-          {{ (metrics.tts_first_frame_time * 1000).toFixed(0) }}ms</span
-        >
-        <span v-if="metrics.tts_total_time"
-          >TTS Total Larency:
-          {{ (metrics.tts_total_time * 1000).toFixed(0) }}ms</span
-        >
-        <span v-if="metrics.speak_to_first_frame"
-          >Speak -> First TTS Frame:
-          {{ (metrics.speak_to_first_frame * 1000).toFixed(0) }}ms</span
-        >
-        <span v-if="metrics.wav_to_tts_total_time"
-          >Speak -> End:
-          {{ (metrics.wav_to_tts_total_time * 1000).toFixed(0) }}ms</span
-        >
+      <div
+        v-if="Object.keys(metrics).length > 0"
+        class="metrics-container"
+      >
+        <span v-if="metrics.wav_assemble_time">WAV Assemble:
+          {{ (metrics.wav_assemble_time * 1000).toFixed(0) }}ms</span>
+        <span v-if="metrics.llm_ttft">LLM First Token Latency:
+          {{ (metrics.llm_ttft * 1000).toFixed(0) }}ms</span>
+        <span v-if="metrics.llm_total_time">LLM Total Latency:
+          {{ (metrics.llm_total_time * 1000).toFixed(0) }}ms</span>
+        <span v-if="metrics.tts_first_frame_time">TTS First Frame Latency:
+          {{ (metrics.tts_first_frame_time * 1000).toFixed(0) }}ms</span>
+        <span v-if="metrics.tts_total_time">TTS Total Larency:
+          {{ (metrics.tts_total_time * 1000).toFixed(0) }}ms</span>
+        <span v-if="metrics.speak_to_first_frame">Speak -> First TTS Frame:
+          {{ (metrics.speak_to_first_frame * 1000).toFixed(0) }}ms</span>
+        <span v-if="metrics.wav_to_tts_total_time">Speak -> End:
+          {{ (metrics.wav_to_tts_total_time * 1000).toFixed(0) }}ms</span>
         <span v-if="metrics.stt">STT Provider: {{ metrics.stt }}</span>
         <span v-if="metrics.tts">TTS Provider: {{ metrics.tts }}</span>
-        <span v-if="metrics.chat_model"
-          >Chat Model: {{ metrics.chat_model }}</span
-        >
+        <span v-if="metrics.chat_model">Chat Model: {{ metrics.chat_model }}</span>
       </div>
     </div>
   </div>
diff --git a/dashboard/src/components/chat/LiveOrb.vue b/dashboard/src/components/chat/LiveOrb.vue
index 175f18c29..533e6dc28 100644
--- a/dashboard/src/components/chat/LiveOrb.vue
+++ b/dashboard/src/components/chat/LiveOrb.vue
@@ -1,53 +1,111 @@
 <template>
-    <div class="live-orb-container" ref="containerRef" :class="{ 'dark': isDark }" :style="styleVars">
-        <div class="live-orb">
+  <div
+    ref="containerRef"
+    class="live-orb-container"
+    :class="{ 'dark': isDark }"
+    :style="styleVars"
+  >
+    <div class="live-orb" />
+    <div class="eyes-container">
+      <div
+        class="eye"
+        :class="{ 'blink': isBlinking, 'nervous': nervousMode }"
+      >
+        <!-- Nervous Mode > -->
+        <div
+          v-if="nervousMode"
+          class="nervous-eye-content"
+        >
+          <svg
+            viewBox="0 0 30 60"
+            width="100%"
+            height="100%"
+          >
+            <path
+              d="M 0 10 L 30 30 L 0 50"
+              fill="none"
+              stroke="#7d80e4"
+              stroke-width="8"
+            />
+          </svg>
         </div>
-        <div class="eyes-container">
-            <div class="eye" :class="{ 'blink': isBlinking, 'nervous': nervousMode }">
-                <!-- Nervous Mode > -->
-                <div v-if="nervousMode" class="nervous-eye-content">
-                    <svg viewBox="0 0 30 60" width="100%" height="100%">
-                        <path d="M 0 10 L 30 30 L 0 50" fill="none" stroke="#7d80e4" stroke-width="8" />
-                    </svg>
-                </div>
 
-                <!-- Code Mode Layer -->
-                <transition name="fade">
-                    <div v-if="codeMode && !nervousMode" class="code-rain-container">
-                        <div v-for="(col, i) in codeColumns" :key="i" class="code-column" :style="col.style">
-                            {{ col.content }}
-                        </div>
-                    </div>
-                </transition>
+        <!-- Code Mode Layer -->
+        <transition name="fade">
+          <div
+            v-if="codeMode && !nervousMode"
+            class="code-rain-container"
+          >
+            <div
+              v-for="(col, i) in codeColumns"
+              :key="i"
+              class="code-column"
+              :style="col.style"
+            >
+              {{ col.content }}
             </div>
-            <div class="eye" :class="{ 'blink': isBlinking, 'nervous': nervousMode }">
-                <!-- Nervous Mode < -->
-                <div v-if="nervousMode" class="nervous-eye-content">
-                    <svg viewBox="0 0 30 60" width="100%" height="100%">
-                        <path d="M 30 10 L 0 30 L 30 50" fill="none" stroke="#7d80e4" stroke-width="8" />
-                    </svg>
-                </div>
+          </div>
+        </transition>
+      </div>
+      <div
+        class="eye"
+        :class="{ 'blink': isBlinking, 'nervous': nervousMode }"
+      >
+        <!-- Nervous Mode < -->
+        <div
+          v-if="nervousMode"
+          class="nervous-eye-content"
+        >
+          <svg
+            viewBox="0 0 30 60"
+            width="100%"
+            height="100%"
+          >
+            <path
+              d="M 30 10 L 0 30 L 30 50"
+              fill="none"
+              stroke="#7d80e4"
+              stroke-width="8"
+            />
+          </svg>
+        </div>
 
-                <!-- Code Mode Layer -->
-                <transition name="fade">
-                    <div v-if="codeMode && !nervousMode" class="code-rain-container">
-                        <div v-for="(col, i) in codeColumns" :key="i" class="code-column" :style="col.style">
-                            {{ col.content }}
-                        </div>
-                    </div>
-                </transition>
+        <!-- Code Mode Layer -->
+        <transition name="fade">
+          <div
+            v-if="codeMode && !nervousMode"
+            class="code-rain-container"
+          >
+            <div
+              v-for="(col, i) in codeColumns"
+              :key="i"
+              class="code-column"
+              :style="col.style"
+            >
+              {{ col.content }}
             </div>
-        </div>
-
-        <!-- Hair Accessory Star -->
-        <div class="accessory-star">
-            <svg viewBox="0 0 24 24" width="100%" height="100%">
-                <path d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z"
-                    fill="rgba(125, 128, 228, 0.4)" stroke="rgba(180, 182, 255, 0.6)" stroke-width="3"
-                    stroke-linejoin="round" />
-            </svg>
-        </div>
+          </div>
+        </transition>
+      </div>
     </div>
+
+    <!-- Hair Accessory Star -->
+    <div class="accessory-star">
+      <svg
+        viewBox="0 0 24 24"
+        width="100%"
+        height="100%"
+      >
+        <path
+          d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z"
+          fill="rgba(125, 128, 228, 0.4)"
+          stroke="rgba(180, 182, 255, 0.6)"
+          stroke-width="3"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/MessageList.vue b/dashboard/src/components/chat/MessageList.vue
index ca86331a8..a71df43d9 100644
--- a/dashboard/src/components/chat/MessageList.vue
+++ b/dashboard/src/components/chat/MessageList.vue
@@ -1,1460 +1,1715 @@
 <template>
-    <div class="messages-container" ref="messageContainer" :class="{ 'is-dark': isDark }">
-        <!-- 加载指示器 -->
-        <div v-if="isLoadingMessages" class="loading-overlay" :class="{ 'is-dark': isDark }">
-            <v-progress-circular indeterminate size="48" width="4" color="primary"></v-progress-circular>
+  <div
+    ref="messageContainer"
+    class="messages-container"
+    :class="{ 'is-dark': isDark }"
+  >
+    <!-- 加载指示器 -->
+    <div
+      v-if="isLoadingMessages"
+      class="loading-overlay"
+      :class="{ 'is-dark': isDark }"
+    >
+      <v-progress-circular
+        indeterminate
+        size="48"
+        width="4"
+        color="primary"
+      />
+    </div>
+    <!-- 聊天消息列表 -->
+    <div
+      class="message-list"
+      :class="{ 'loading-blur': isLoadingMessages }"
+      @mouseup="handleTextSelection"
+    >
+      <div
+        v-for="(msg, index) in messages"
+        :key="index"
+        class="message-item fade-in"
+      >
+        <!-- 用户消息 -->
+        <div
+          v-if="msg.content.type == 'user'"
+          class="user-message"
+        >
+          <div
+            class="message-bubble user-bubble"
+            :class="{ 'has-audio': hasAudio(msg.content.message) }"
+            :style="{ backgroundColor: isDark ? '#2d2e30' : '#e7ebf4' }"
+          >
+            <!-- 遍历 message parts -->
+            <template
+              v-for="(part, partIndex) in msg.content.message"
+              :key="partIndex"
+            >
+              <!-- 引用消息 -->
+              <div
+                v-if="part.type === 'reply'"
+                class="reply-quote"
+                @click="scrollToMessage(part.message_id)"
+              >
+                <v-icon
+                  size="small"
+                  class="reply-quote-icon"
+                >
+                  mdi-reply
+                </v-icon>
+                <span class="reply-quote-text">{{
+                  getReplyContent(part.message_id)
+                }}</span>
+              </div>
+
+              <!-- 纯文本 -->
+              <pre
+                v-else-if="part.type === 'plain' && part.text"
+                style="
+                  font-family: inherit;
+                  white-space: pre-wrap;
+                  word-wrap: break-word;
+                "
+              >{{ part.text }}</pre>
+
+              <!-- 图片附件 -->
+              <div
+                v-else-if="part.type === 'image' && part.embedded_url"
+                class="image-attachments"
+              >
+                <div class="image-attachment">
+                  <img
+                    :src="part.embedded_url"
+                    class="attached-image"
+                    @click="openImagePreview(part.embedded_url)"
+                  >
+                </div>
+              </div>
+
+              <!-- 音频附件 -->
+              <div
+                v-else-if="part.type === 'record' && part.embedded_url"
+                class="audio-attachment"
+              >
+                <audio
+                  controls
+                  class="audio-player"
+                >
+                  <source
+                    :src="part.embedded_url"
+                    type="audio/wav"
+                  >
+                  {{ t("messages.errors.browser.audioNotSupported") }}
+                </audio>
+              </div>
+
+              <!-- 文件附件 -->
+              <div
+                v-else-if="part.type === 'file' && part.embedded_file"
+                class="file-attachments"
+              >
+                <div class="file-attachment">
+                  <a
+                    v-if="part.embedded_file.url"
+                    :href="part.embedded_file.url"
+                    :download="part.embedded_file.filename"
+                    class="file-link"
+                    :class="{ 'is-dark': isDark }"
+                    :style="
+                      isDark
+                        ? {
+                          backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                          borderColor: 'rgba(255, 255, 255, 0.1)',
+                          color: 'var(--v-theme-secondary)',
+                        }
+                        : {}
+                    "
+                  >
+                    <v-icon
+                      size="small"
+                      class="file-icon"
+                      :style="
+                        isDark ? { color: 'var(--v-theme-secondary)' } : {}
+                      "
+                    >mdi-file-document-outline</v-icon>
+                    <span class="file-name">{{
+                      part.embedded_file.filename
+                    }}</span>
+                  </a>
+                  <a
+                    v-else
+                    class="file-link file-link-download"
+                    :class="{ 'is-dark': isDark }"
+                    :style="
+                      isDark
+                        ? {
+                          backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                          borderColor: 'rgba(255, 255, 255, 0.1)',
+                          color: 'var(--v-theme-secondary)',
+                        }
+                        : {}
+                    "
+                    @click="downloadFile(part.embedded_file)"
+                  >
+                    <v-icon
+                      size="small"
+                      class="file-icon"
+                      :style="
+                        isDark ? { color: 'var(--v-theme-secondary)' } : {}
+                      "
+                    >mdi-file-document-outline</v-icon>
+                    <span class="file-name">{{
+                      part.embedded_file.filename
+                    }}</span>
+                    <v-icon
+                      v-if="
+                        downloadingFiles.has(part.embedded_file.attachment_id)
+                      "
+                      size="small"
+                      class="download-icon"
+                    >mdi-loading mdi-spin</v-icon>
+                    <v-icon
+                      v-else
+                      size="small"
+                      class="download-icon"
+                    >mdi-download</v-icon>
+                  </a>
+                </div>
+              </div>
+            </template>
+          </div>
         </div>
-        <!-- 聊天消息列表 -->
-        <div class="message-list" :class="{ 'loading-blur': isLoadingMessages }" @mouseup="handleTextSelection">
-            <div class="message-item fade-in" v-for="(msg, index) in messages" :key="index">
-                <!-- 用户消息 -->
-                <div v-if="msg.content.type == 'user'" class="user-message">
-                    <div class="message-bubble user-bubble" :class="{ 'has-audio': hasAudio(msg.content.message) }"
-                        :style="{ backgroundColor: isDark ? '#2d2e30' : '#e7ebf4' }">
-                        <!-- 遍历 message parts -->
-                        <template v-for="(part, partIndex) in msg.content.message" :key="partIndex">
-                            <!-- 引用消息 -->
-                            <div v-if="part.type === 'reply'" class="reply-quote"
-                                @click="scrollToMessage(part.message_id)">
-                                <v-icon size="small" class="reply-quote-icon">mdi-reply</v-icon>
-                                <span class="reply-quote-text">{{ getReplyContent(part.message_id) }}</span>
-                            </div>
 
-                            <!-- 纯文本 -->
-                            <pre v-else-if="part.type === 'plain' && part.text"
-                                style="font-family: inherit; white-space: pre-wrap; word-wrap: break-word;">{{ part.text }}</pre>
+        <!-- Bot Messages -->
+        <div
+          v-else
+          class="bot-message"
+        >
+          <v-avatar
+            class="bot-avatar"
+            size="36"
+          >
+            <v-progress-circular
+              v-if="isStreaming && index === messages.length - 1"
+              :index="index"
+              indeterminate
+              size="28"
+              width="2"
+            />
+            <v-icon
+              v-else-if="messages[index - 1]?.content.type !== 'bot'"
+              size="64"
+              color="#8fb6d2"
+            >
+              mdi-star-four-points-small
+            </v-icon>
+          </v-avatar>
+          <div class="bot-message-content">
+            <div class="message-bubble bot-bubble">
+              <!-- Loading state -->
+              <div
+                v-if="msg.content.isLoading"
+                class="loading-container"
+              >
+                <span class="loading-text">{{ tm("message.loading") }}</span>
+              </div>
 
-                            <!-- 图片附件 -->
-                            <div v-else-if="part.type === 'image' && part.embedded_url" class="image-attachments">
-                                <div class="image-attachment">
-                                    <img :src="part.embedded_url" class="attached-image"
-                                        @click="openImagePreview(part.embedded_url)" />
-                                </div>
-                            </div>
+              <template v-else>
+                <!-- Reasoning Block (Collapsible) - 放在最前面 -->
+                <ReasoningBlock
+                  v-if="msg.content.reasoning && msg.content.reasoning.trim()"
+                  :reasoning="msg.content.reasoning"
+                  :is-dark="isDark"
+                  class="mt-2"
+                  :initial-expanded="isReasoningExpanded(index)"
+                />
 
-                            <!-- 音频附件 -->
-                            <div v-else-if="part.type === 'record' && part.embedded_url" class="audio-attachment">
-                                <audio controls class="audio-player">
-                                    <source :src="part.embedded_url" type="audio/wav">
-                                    {{ t('messages.errors.browser.audioNotSupported') }}
-                                </audio>
-                            </div>
-
-                            <!-- 文件附件 -->
-                            <div v-else-if="part.type === 'file' && part.embedded_file" class="file-attachments">
-                                <div class="file-attachment">
-                                    <a v-if="part.embedded_file.url" :href="part.embedded_file.url"
-                                        :download="part.embedded_file.filename" class="file-link"
-                                        :class="{ 'is-dark': isDark }" :style="isDark ? {
-                                            backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                                            borderColor: 'rgba(255, 255, 255, 0.1)',
-                                            color: 'var(--v-theme-secondary)'
-                                        } : {}">
-                                        <v-icon size="small" class="file-icon"
-                                            :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}">mdi-file-document-outline</v-icon>
-                                        <span class="file-name">{{ part.embedded_file.filename }}</span>
-                                    </a>
-                                    <a v-else @click="downloadFile(part.embedded_file)"
-                                        class="file-link file-link-download" :class="{ 'is-dark': isDark }" :style="isDark ? {
-                                            backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                                            borderColor: 'rgba(255, 255, 255, 0.1)',
-                                            color: 'var(--v-theme-secondary)'
-                                        } : {}">
-                                        <v-icon size="small" class="file-icon"
-                                            :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}">mdi-file-document-outline</v-icon>
-                                        <span class="file-name">{{ part.embedded_file.filename }}</span>
-                                        <v-icon v-if="downloadingFiles.has(part.embedded_file.attachment_id)"
-                                            size="small" class="download-icon">mdi-loading mdi-spin</v-icon>
-                                        <v-icon v-else size="small" class="download-icon">mdi-download</v-icon>
-                                    </a>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-
-                <!-- Bot Messages -->
-                <div v-else class="bot-message">
-                    <v-avatar class="bot-avatar" size="36">
-                        <v-progress-circular :index="index" v-if="isStreaming && index === messages.length - 1"
-                            indeterminate size="28" width="2"></v-progress-circular>
-                        <v-icon v-else-if="messages[index - 1]?.content.type !== 'bot'" size="64"
-                            color="#8fb6d2">mdi-star-four-points-small</v-icon>
-                    </v-avatar>
-                    <div class="bot-message-content">
-                        <div class="message-bubble bot-bubble">
-                            <!-- Loading state -->
-                            <div v-if="msg.content.isLoading" class="loading-container">
-                                <span class="loading-text">{{ tm('message.loading') }}</span>
-                            </div>
-
-                            <template v-else>
-                                <!-- Reasoning Block (Collapsible) - 放在最前面 -->
-                                <ReasoningBlock v-if="msg.content.reasoning && msg.content.reasoning.trim()"
-                                    :reasoning="msg.content.reasoning" :is-dark="isDark"
-                                    class="mt-2"
-                                    :initial-expanded="isReasoningExpanded(index)" />
-
-                                <MessagePartsRenderer :parts="msg.content.message" :is-dark="isDark"
-                                    :current-time="currentTime" :downloading-files="downloadingFiles"
-                                    @open-image-preview="openImagePreview" @download-file="downloadFile" />
-                            </template>
-                        </div>
-                        <div class="message-actions" v-if="!msg.content.isLoading || index === messages.length - 1">
-                            <span class="message-time" v-if="msg.created_at">{{ formatMessageTime(msg.created_at)
-                                }}</span>
-                            <!-- Agent Stats Menu -->
-                            <v-menu v-if="msg.content.agentStats" location="bottom" open-on-hover
-                                :close-on-content-click="false">
-                                <template v-slot:activator="{ props }">
-                                    <v-icon v-bind="props" size="x-small"
-                                        class="stats-info-icon">mdi-information-outline</v-icon>
-                                </template>
-                                <v-card class="stats-menu-card" variant="elevated" elevation="3">
-                                    <v-card-text class="stats-menu-content">
-                                        <div class="stats-menu-row">
-                                            <span class="stats-menu-label">{{ tm('stats.inputTokens') }}</span>
-                                            <span class="stats-menu-value">{{
-                                                getInputTokens(msg.content.agentStats.token_usage) }}</span>
-                                        </div>
-                                        <div class="stats-menu-row">
-                                            <span class="stats-menu-label">{{ tm('stats.outputTokens') }}</span>
-                                            <span class="stats-menu-value">{{ msg.content.agentStats.token_usage.output
-                                                || 0 }}</span>
-                                        </div>
-                                        <div class="stats-menu-row"
-                                            v-if="msg.content.agentStats.token_usage.input_cached > 0">
-                                            <span class="stats-menu-label">{{ tm('stats.cachedTokens') }}</span>
-                                            <span class="stats-menu-value">{{
-                                                msg.content.agentStats.token_usage.input_cached }}</span>
-                                        </div>
-                                        <div class="stats-menu-row"
-                                            v-if="msg.content.agentStats.time_to_first_token > 0">
-                                            <span class="stats-menu-label">{{ tm('stats.ttft') }}</span>
-                                            <span class="stats-menu-value">{{
-                                                formatTTFT(msg.content.agentStats.time_to_first_token) }}</span>
-                                        </div>
-                                        <div class="stats-menu-row">
-                                            <span class="stats-menu-label">{{ tm('stats.duration') }}</span>
-                                            <span class="stats-menu-value">{{
-                                                formatAgentDuration(msg.content.agentStats) }}</span>
-                                        </div>
-                                    </v-card-text>
-                                </v-card>
-                            </v-menu>
-                            <v-btn :icon="getCopyIcon(index)" size="x-small" variant="text" class="copy-message-btn"
-                                :class="{ 'copy-success': isCopySuccess(index), 'copy-failed': isCopyFailure(index) }"
-                                @click="copyBotMessage(msg.content.message, index)" :title="getCopyTitle(index)" />
-                            <v-btn icon="mdi-reply-outline" size="x-small" variant="text" class="reply-message-btn"
-                                @click="$emit('replyMessage', msg, index)" :title="tm('actions.reply')" />
-                            
-                            <!-- Refs Visualization -->
-                            <ActionRef :refs="msg.content.refs" @open-refs="openRefsSidebar" />
-                        </div>
-                    </div>
-                </div>
+                <MessagePartsRenderer
+                  :parts="msg.content.message"
+                  :is-dark="isDark"
+                  :current-time="currentTime"
+                  :downloading-files="downloadingFiles"
+                  @open-image-preview="openImagePreview"
+                  @download-file="downloadFile"
+                />
+              </template>
             </div>
-        </div>
+            <div
+              v-if="!msg.content.isLoading || index === messages.length - 1"
+              class="message-actions"
+            >
+              <span
+                v-if="msg.created_at"
+                class="message-time"
+              >{{
+                formatMessageTime(msg.created_at)
+              }}</span>
+              <!-- Agent Stats Menu -->
+              <v-menu
+                v-if="msg.content.agentStats"
+                location="bottom"
+                open-on-hover
+                :close-on-content-click="false"
+              >
+                <template #activator="{ props }">
+                  <v-icon
+                    v-bind="props"
+                    size="x-small"
+                    class="stats-info-icon"
+                  >
+                    mdi-information-outline
+                  </v-icon>
+                </template>
+                <v-card
+                  class="stats-menu-card"
+                  variant="elevated"
+                  elevation="3"
+                >
+                  <v-card-text class="stats-menu-content">
+                    <div class="stats-menu-row">
+                      <span class="stats-menu-label">{{
+                        tm("stats.inputTokens")
+                      }}</span>
+                      <span class="stats-menu-value">{{
+                        getInputTokens(msg.content.agentStats.token_usage)
+                      }}</span>
+                    </div>
+                    <div class="stats-menu-row">
+                      <span class="stats-menu-label">{{
+                        tm("stats.outputTokens")
+                      }}</span>
+                      <span class="stats-menu-value">{{
+                        msg.content.agentStats.token_usage.output || 0
+                      }}</span>
+                    </div>
+                    <div
+                      v-if="msg.content.agentStats.token_usage.input_cached > 0"
+                      class="stats-menu-row"
+                    >
+                      <span class="stats-menu-label">{{
+                        tm("stats.cachedTokens")
+                      }}</span>
+                      <span class="stats-menu-value">{{
+                        msg.content.agentStats.token_usage.input_cached
+                      }}</span>
+                    </div>
+                    <div
+                      v-if="msg.content.agentStats.time_to_first_token > 0"
+                      class="stats-menu-row"
+                    >
+                      <span class="stats-menu-label">{{
+                        tm("stats.ttft")
+                      }}</span>
+                      <span class="stats-menu-value">{{
+                        formatTTFT(msg.content.agentStats.time_to_first_token)
+                      }}</span>
+                    </div>
+                    <div class="stats-menu-row">
+                      <span class="stats-menu-label">{{
+                        tm("stats.duration")
+                      }}</span>
+                      <span class="stats-menu-value">{{
+                        formatAgentDuration(msg.content.agentStats)
+                      }}</span>
+                    </div>
+                  </v-card-text>
+                </v-card>
+              </v-menu>
+              <v-btn
+                :icon="getCopyIcon(index)"
+                size="x-small"
+                variant="text"
+                class="copy-message-btn"
+                :class="{
+                  'copy-success': isCopySuccess(index),
+                  'copy-failed': isCopyFailure(index),
+                }"
+                :title="getCopyTitle(index)"
+                @click="copyBotMessage(msg.content.message, index)"
+              />
+              <v-btn
+                icon="mdi-reply-outline"
+                size="x-small"
+                variant="text"
+                class="reply-message-btn"
+                :title="tm('actions.reply')"
+                @click="$emit('replyMessage', msg, index)"
+              />
 
-        <!-- 浮动引用按钮 -->
-        <div v-if="selectedText.content && selectedText.messageIndex !== null" class="selection-quote-button" :style="{
-            top: selectedText.position.top + 'px',
-            left: selectedText.position.left + 'px',
-            position: 'fixed'
-        }">
-            <v-btn size="large" rounded="xl" @click="handleQuoteSelected" class="quote-btn"
-                :class="{ 'dark-mode': isDark }">
-                <v-icon left small>mdi-reply</v-icon>
-                引用
-            </v-btn>
+              <!-- Refs Visualization -->
+              <ActionRef
+                :refs="msg.content.refs"
+                @open-refs="openRefsSidebar"
+              />
+            </div>
+          </div>
         </div>
+      </div>
     </div>
 
-    <!-- 图片预览 Overlay -->
-    <v-overlay v-model="imagePreview.show" class="image-preview-overlay" @click="closeImagePreview">
-        <div class="image-preview-container" @click.stop>
-            <img :src="imagePreview.url" class="preview-image" @click="closeImagePreview" />
-        </div>
-    </v-overlay>
+    <!-- 浮动引用按钮 -->
+    <div
+      v-if="selectedText.content && selectedText.messageIndex !== null"
+      class="selection-quote-button"
+      :style="{
+        top: selectedText.position.top + 'px',
+        left: selectedText.position.left + 'px',
+        position: 'fixed',
+      }"
+    >
+      <v-btn
+        size="large"
+        rounded="xl"
+        class="quote-btn"
+        :class="{ 'dark-mode': isDark }"
+        @click="handleQuoteSelected"
+      >
+        <v-icon
+          left
+          small
+        >
+          mdi-reply
+        </v-icon>
+        引用
+      </v-btn>
+    </div>
+  </div>
+
+  <!-- 图片预览 Overlay -->
+  <v-overlay
+    v-model="imagePreview.show"
+    class="image-preview-overlay"
+    @click="closeImagePreview"
+  >
+    <div
+      class="image-preview-container"
+      @click.stop
+    >
+      <img
+        :src="imagePreview.url"
+        class="preview-image"
+        @click="closeImagePreview"
+      >
+    </div>
+  </v-overlay>
 </template>
 
 <script>
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import { enableKatex, enableMermaid, MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue'
-import 'markstream-vue/index.css'
-import 'katex/dist/katex.min.css'
-import 'highlight.js/styles/github.css';
-import axios from 'axios';
-import { useToast } from '@/utils/toast'
-import ReasoningBlock from './message_list_comps/ReasoningBlock.vue';
-import MessagePartsRenderer from './message_list_comps/MessagePartsRenderer.vue';
-import RefNode from './message_list_comps/RefNode.vue';
-import ActionRef from './message_list_comps/ActionRef.vue';
+import { useI18n, useModuleI18n } from "@/i18n/composables";
+import {
+  enableKatex,
+  enableMermaid,
+  MarkdownCodeBlockNode,
+  setCustomComponents,
+} from "markstream-vue";
+import "markstream-vue/index.css";
+import "katex/dist/katex.min.css";
+import "highlight.js/styles/github.css";
+import axios from "axios";
+import { useToast } from "@/utils/toast";
+import ReasoningBlock from "./message_list_comps/ReasoningBlock.vue";
+import MessagePartsRenderer from "./message_list_comps/MessagePartsRenderer.vue";
+import RefNode from "./message_list_comps/RefNode.vue";
+import ActionRef from "./message_list_comps/ActionRef.vue";
 
 enableKatex();
 enableMermaid();
 
-// 注册 message-list 专用组件：引用节点 + Shiki 代码块渲染
-setCustomComponents('message-list', {
-    ref: RefNode,
-    code_block: MarkdownCodeBlockNode
+// 注册 message-list 专用组件：Shiki 代码块渲染（RefNode 映射已移除，若需要引用节点请在模板中直接使用组件）
+setCustomComponents("message-list", {
+  code_block: MarkdownCodeBlockNode,
 });
 
 export default {
-    name: 'MessageList',
-    components: {
-        ReasoningBlock,
-        MessagePartsRenderer,
-        RefNode,
-        ActionRef
+  name: "MessageList",
+  components: {
+    ReasoningBlock,
+    MessagePartsRenderer,
+    ActionRef,
+  },
+  provide() {
+    return {
+      isDark: this.isDark,
+      webSearchResults: () => this.webSearchResults,
+    };
+  },
+  props: {
+    messages: {
+      type: Array,
+      required: true,
     },
-    props: {
-        messages: {
-            type: Array,
-            required: true
-        },
-        isDark: {
-            type: Boolean,
-            default: false
-        },
-        isStreaming: {
-            type: Boolean,
-            default: false
-        },
-        isLoadingMessages: {
-            type: Boolean,
-            default: false
-        }
+    isDark: {
+      type: Boolean,
+      default: false,
     },
-    emits: ['openImagePreview', 'replyMessage', 'replyWithText', 'openRefs'],
-    setup() {
-        const { t } = useI18n();
-        const { tm } = useModuleI18n('features/chat');
-        const toast = useToast()
-
-        return {
-            t,
-            tm,
-            toast
-        };
+    isStreaming: {
+      type: Boolean,
+      default: false,
     },
-    provide() {
-        return {
-            isDark: this.isDark,
-            webSearchResults: () => this.webSearchResults
-        };
+    isLoadingMessages: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-        return {
-            copiedMessages: new Set(),
-            copyFailedMessages: new Set(),
-            isUserNearBottom: true,
-            scrollThreshold: 1,
-            scrollTimer: null,
-            expandedReasoning: new Set(), // Track which reasoning blocks are expanded
-            downloadingFiles: new Set(), // Track which files are being downloaded
-            elapsedTimeTimer: null, // Timer for updating elapsed time
-            currentTime: Date.now() / 1000, // Current time for elapsed time calculation
-            // 选中文本相关状态
-            selectedText: {
-                content: '',
-                messageIndex: null,
-                position: { top: 0, left: 0 }
-            },
-            // 图片预览
-            imagePreview: {
-                show: false,
-                url: ''
-            },
-            // Web search results mapping: { 'uuid.idx': { url, title, snippet } }
-            webSearchResults: {}
-        };
-    },
-    async mounted() {
-        this.initCodeCopyButtons();
-        this.initImageClickEvents();
-        this.addScrollListener();
-        this.scrollToBottom();
-        this.startElapsedTimeTimer();
-        this.extractWebSearchResults();
-    },
-    updated() {
-        this.initCodeCopyButtons();
-        this.initImageClickEvents();
-        if (this.isUserNearBottom) {
-            this.scrollToBottom();
-        }
-        this.extractWebSearchResults();
-    },
-    methods: {
-        // 从消息中提取 web_search_tavily 的搜索结果
-        extractWebSearchResults() {
-            const results = {};
-            
-            this.messages.forEach(msg => {
-                if (msg.content.type !== 'bot' || !Array.isArray(msg.content.message)) {
-                    return;
-                }
-                
-                msg.content.message.forEach(part => {
-                    if (part.type !== 'tool_call' || !Array.isArray(part.tool_calls)) {
-                        return;
-                    }
-                    
-                    part.tool_calls.forEach(toolCall => {
-                        // 检查是否是 web_search_tavily 工具调用
-                        if (toolCall.name !== 'web_search_tavily' || !toolCall.result) {
-                            return;
-                        }
-                        
-                        try {
-                            // 解析工具调用结果
-                            const resultData = typeof toolCall.result === 'string' 
-                                ? JSON.parse(toolCall.result) 
-                                : toolCall.result;
-                            
-                            if (resultData.results && Array.isArray(resultData.results)) {
-                                resultData.results.forEach(item => {
-                                    if (item.index) {
-                                        results[item.index] = {
-                                            url: item.url,
-                                            title: item.title,
-                                            snippet: item.snippet
-                                        };
-                                    }
-                                });
-                            }
-                        } catch (e) {
-                            console.error('Failed to parse web search result:', e);
-                        }
-                    });
-                });
-            });
-            
-            this.webSearchResults = results;
-        },
-        
-        // 处理文本选择
-        handleTextSelection() {
-            const selection = window.getSelection();
-            const selectedText = selection.toString();
-
-            if (!selectedText.trim()) {
-                // 清除选中状态
-                this.selectedText.content = '';
-                this.selectedText.messageIndex = null;
-                return;
-            }
-
-            // 获取被选中的元素，找到对应的message-item
-            const range = selection.getRangeAt(0);
-            const startContainer = range.startContainer;
-            let messageItem = null;
-            let node = startContainer.parentElement;
-
-            // 遍历DOM树向上查找message-item
-            while (node && !node.classList.contains('message-item')) {
-                node = node.parentElement;
-            }
-
-            messageItem = node;
-
-            if (!messageItem) {
-                this.selectedText.content = '';
-                this.selectedText.messageIndex = null;
-                return;
-            }
-
-            // 获取message-item在messages数组中的索引
-            const messageItems = this.$refs.messageContainer?.querySelectorAll('.message-item');
-            let messageIndex = -1;
-            if (messageItems) {
-                for (let i = 0; i < messageItems.length; i++) {
-                    if (messageItems[i] === messageItem) {
-                        messageIndex = i;
-                        break;
-                    }
-                }
-            }
-
-            if (messageIndex === -1) {
-                this.selectedText.content = '';
-                this.selectedText.messageIndex = null;
-                return;
-            }
-
-            // 获取选中文本的位置（相对于viewport）
-            const rect = selection.getRangeAt(0).getBoundingClientRect();
-
-            this.selectedText.content = selectedText;
-            this.selectedText.messageIndex = messageIndex;
-            this.selectedText.position = {
-                top: Math.max(0, rect.bottom + 5),
-                left: Math.max(0, (rect.left + rect.right) / 2)
-            };
-        },
-
-        // 处理引用选中的文本
-        handleQuoteSelected() {
-            if (this.selectedText.messageIndex === null) return;
-
-            const msg = this.messages[this.selectedText.messageIndex];
-            if (!msg || !msg.id) return;
-
-            // 触发replyWithText事件，传递选中的文本内容
-            this.$emit('replyWithText', {
-                messageId: msg.id,
-                selectedText: this.selectedText.content,
-                messageIndex: this.selectedText.messageIndex
-            });
-
-            // 清除选中状态
-            this.selectedText.content = '';
-            this.selectedText.messageIndex = null;
-            window.getSelection().removeAllRanges();
-        },
-
-        // 检查 message 中是否有音频
-        hasAudio(messageParts) {
-            if (!Array.isArray(messageParts)) return false;
-            return messageParts.some(part => part.type === 'record' && part.embedded_url);
-        },
-
-        // 获取被引用消息的内容
-        getReplyContent(messageId) {
-            const replyMsg = this.messages.find(m => m.id === messageId);
-            if (!replyMsg) {
-                return this.tm('reply.notFound');
-            }
-            let content = '';
-            if (Array.isArray(replyMsg.content.message)) {
-                const textParts = replyMsg.content.message
-                    .filter(part => part.type === 'plain' && part.text)
-                    .map(part => part.text);
-                content = textParts.join('');
-            }
-            // 截断过长内容
-            if (content.length > 50) {
-                content = content.substring(0, 50) + '...';
-            }
-            return content || '[媒体内容]';
-        },
-
-        // 滚动到指定消息
-        scrollToMessage(messageId) {
-            const msgIndex = this.messages.findIndex(m => m.id === messageId);
-            if (msgIndex === -1) return;
-
-            const container = this.$refs.messageContainer;
-            const messageItems = container?.querySelectorAll('.message-item');
-            if (messageItems && messageItems[msgIndex]) {
-                messageItems[msgIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
-                // 高亮一下
-                messageItems[msgIndex].classList.add('highlight-message');
-                setTimeout(() => {
-                    messageItems[msgIndex].classList.remove('highlight-message');
-                }, 2000);
-            }
-        },
-
-        // Toggle reasoning expansion state
-        toggleReasoning(messageIndex) {
-            if (this.expandedReasoning.has(messageIndex)) {
-                this.expandedReasoning.delete(messageIndex);
-            } else {
-                this.expandedReasoning.add(messageIndex);
-            }
-            // Force reactivity
-            this.expandedReasoning = new Set(this.expandedReasoning);
-        },
-
-        // Check if reasoning is expanded
-        isReasoningExpanded(messageIndex) {
-            return this.expandedReasoning.has(messageIndex);
-        },
-
-        // 下载文件
-        async downloadFile(file) {
-            if (!file.attachment_id) return;
-
-            // 标记为下载中
-            this.downloadingFiles.add(file.attachment_id);
-            this.downloadingFiles = new Set(this.downloadingFiles);
-
-            try {
-                const response = await axios.get(`/api/chat/get_attachment?attachment_id=${file.attachment_id}`, {
-                    responseType: 'blob'
-                });
-
-                const url = URL.createObjectURL(response.data);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = file.filename || 'file';
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                setTimeout(() => URL.revokeObjectURL(url), 100);
-            } catch (err) {
-                console.error('Download file failed:', err);
-            } finally {
-                this.downloadingFiles.delete(file.attachment_id);
-                this.downloadingFiles = new Set(this.downloadingFiles);
-            }
-        },
-
-        // 复制代码到剪贴板
-        tryExecCommandCopy(text) {
-            let textArea = null;
-            try {
-                textArea = document.createElement('textarea');
-                textArea.value = text;
-                document.body.appendChild(textArea);
-                textArea.focus();
-                textArea.select();
-                const ok = document.execCommand('copy');
-                return ok;
-            } catch (_) {
-                return false;
-            } finally {
-                try {
-                    textArea?.remove?.();
-                } catch (_) {
-                    // ignore cleanup errors
-                }
-            }
-        },
-
-        async copyTextToClipboard(text) {
-            // 优先使用同步复制，尽量保留用户手势上下文；
-            // 在非安全来源（例如通过局域网 IP + vite --host）时成功率更高。
-            if (this.tryExecCommandCopy(text)) {
-                return { ok: true, method: 'execCommand' };
-            }
-
-            if (navigator.clipboard?.writeText) {
-                try {
-                    await navigator.clipboard.writeText(text);
-                    return { ok: true, method: 'clipboard' };
-                } catch (error) {
-                    return { ok: false, method: 'clipboard', error };
-                }
-            }
-
-            return { ok: false, method: 'unavailable' };
-        },
-
-        async copyWithFeedback(text, messageIndex = null) {
-            const result = await this.copyTextToClipboard(text);
-            const ok = !!result?.ok;
-
-            if (messageIndex !== null && messageIndex !== undefined) {
-                if (ok) this.showCopySuccess(messageIndex);
-                else this.showCopyFailure(messageIndex);
-            }
-
-            if (ok) {
-                this.toast?.success?.(this.t('core.common.copied'));
-            } else {
-                this.toast?.error?.(this.t('core.common.copyFailed'));
-            }
-
-            return result;
-        },
-
-        buildCopyTextFromParts(messageParts) {
-            if (typeof messageParts === 'string') {
-                return messageParts.trim();
-            }
-            if (!Array.isArray(messageParts)) {
-                return '';
-            }
-
-            const textContents = messageParts
-                .filter(part => part && typeof part === 'object' && part.type === 'plain' && part.text)
-                .map(part => part.text);
-
-            let textToCopy = textContents.join('\n');
-
-            const imageCount = messageParts.filter(part => part?.type === 'image' && part.embedded_url).length;
-            if (imageCount > 0) {
-                if (textToCopy) textToCopy += '\n\n';
-                textToCopy += `[包含 ${imageCount} 张图片]`;
-            }
-
-            const hasAudio = messageParts.some(part => part?.type === 'record' && part.embedded_url);
-            if (hasAudio) {
-                if (textToCopy) textToCopy += '\n\n';
-                textToCopy += '[包含音频内容]';
-            }
-
-            return String(textToCopy || '').trim();
-        },
-
-        async copyCodeToClipboard(code) {
-            const text = String(code ?? '');
-            if (!text) return { ok: false, method: 'empty' };
-            return await this.copyWithFeedback(text, null);
-        },
-
-        // 复制bot消息到剪贴板
-        async copyBotMessage(messageParts, messageIndex) {
-            let textToCopy = this.buildCopyTextFromParts(messageParts);
-            if (!textToCopy) textToCopy = '[媒体内容]';
-            await this.copyWithFeedback(textToCopy, messageIndex);
-        },
-
-        // 显示复制成功提示
-        showCopySuccess(messageIndex) {
-            if (this.copyFailedMessages.has(messageIndex)) {
-                this.copyFailedMessages.delete(messageIndex);
-                this.copyFailedMessages = new Set(this.copyFailedMessages);
-            }
-            this.copiedMessages.add(messageIndex);
-            this.copiedMessages = new Set(this.copiedMessages);
-
-            // 2秒后移除成功状态
-            setTimeout(() => {
-                this.copiedMessages.delete(messageIndex);
-                this.copiedMessages = new Set(this.copiedMessages);
-            }, 2000);
-        },
-
-        // 显示复制失败提示
-        showCopyFailure(messageIndex) {
-            if (this.copiedMessages.has(messageIndex)) {
-                this.copiedMessages.delete(messageIndex);
-                this.copiedMessages = new Set(this.copiedMessages);
-            }
-            this.copyFailedMessages.add(messageIndex);
-            this.copyFailedMessages = new Set(this.copyFailedMessages);
-
-            setTimeout(() => {
-                this.copyFailedMessages.delete(messageIndex);
-                this.copyFailedMessages = new Set(this.copyFailedMessages);
-            }, 2000);
-        },
-
-        // 获取复制按钮图标
-        getCopyIcon(messageIndex) {
-            if (this.copiedMessages.has(messageIndex)) return 'mdi-check';
-            if (this.copyFailedMessages.has(messageIndex)) return 'mdi-alert-circle-outline';
-            return 'mdi-content-copy';
-        },
-
-        // 检查是否为复制成功状态
-        isCopySuccess(messageIndex) {
-            return this.copiedMessages.has(messageIndex);
-        },
-
-        // 检查是否为复制失败状态
-        isCopyFailure(messageIndex) {
-            return this.copyFailedMessages.has(messageIndex);
-        },
-
-        // 获取复制按钮提示文本
-        getCopyTitle(messageIndex) {
-            if (this.isCopySuccess(messageIndex)) return this.t('core.common.copied');
-            if (this.isCopyFailure(messageIndex)) return this.t('core.common.copyFailed');
-            return this.t('core.common.copy');
-        },
-
-        // 获取复制图标SVG
-        getCopyIconSvg() {
-            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
-        },
-
-        // 获取成功图标SVG
-        getSuccessIconSvg() {
-            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"></polyline></svg>';
-        },
-
-        // 获取失败图标SVG
-        getErrorIconSvg() {
-            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="13"></line><circle cx="12" cy="16.5" r="1"></circle></svg>';
-        },
-
-        // 初始化代码块复制按钮
-        initCodeCopyButtons() {
-            this.$nextTick(() => {
-                const codeBlocks = this.$refs.messageContainer?.querySelectorAll('pre code') || [];
-                codeBlocks.forEach((codeBlock, index) => {
-                    const pre = codeBlock.parentElement;
-                    if (pre && !pre.querySelector('.copy-code-btn')) {
-                        const button = document.createElement('button');
-                        button.className = 'copy-code-btn';
-                        button.innerHTML = this.getCopyIconSvg();
-                        button.title = this.t('core.common.copy');
-                        button.addEventListener('click', async () => {
-                            const res = await this.copyCodeToClipboard(codeBlock.textContent || '');
-                            const ok = !!res?.ok;
-                            button.innerHTML = ok ? this.getSuccessIconSvg() : this.getErrorIconSvg();
-                            button.style.color = ok
-                                ? 'rgb(var(--v-theme-success))'
-                                : 'rgb(var(--v-theme-error))';
-                            button.setAttribute("title", this.t(`core.common.${ok ? "copied" : "copyFailed"}`));
-                            setTimeout(() => {
-                                button.innerHTML = this.getCopyIconSvg();
-                                button.style.color = '';
-                                button.setAttribute("title", this.t('core.common.copy'));
-                            }, 2000);
-                        });
-                        pre.style.position = 'relative';
-                        pre.appendChild(button);
-                    }
-                });
-            });
-        },
-
-        initImageClickEvents() {
-            this.$nextTick(() => {
-                // 查找所有动态生成的图片（在markdown-content中）
-                const images = document.querySelectorAll('.markdown-content img');
-                images.forEach((img) => {
-                    if (!img.hasAttribute('data-click-enabled')) {
-                        img.style.cursor = 'pointer';
-                        img.setAttribute('data-click-enabled', 'true');
-                        img.onclick = () => this.openImagePreview(img.src);
-                    }
-                });
-            });
-        },
-
-        scrollToBottom() {
-            this.$nextTick(() => {
-                const container = this.$refs.messageContainer;
-                if (container) {
-                    container.scrollTop = container.scrollHeight;
-                    this.isUserNearBottom = true; // 程序滚动到底部后标记用户在底部
-                }
-            });
-        },
-
-        // 添加滚动事件监听器
-        addScrollListener() {
-            const container = this.$refs.messageContainer;
-            if (container) {
-                container.addEventListener('scroll', this.throttledHandleScroll);
-            }
-        },
-
-        // 节流处理滚动事件
-        throttledHandleScroll() {
-            if (this.scrollTimer) return;
-
-            this.scrollTimer = setTimeout(() => {
-                this.handleScroll();
-                this.scrollTimer = null;
-            }, 50); // 50ms 节流
-        },
-
-        // 处理滚动事件
-        handleScroll() {
-            const container = this.$refs.messageContainer;
-            if (container) {
-                const { scrollTop, scrollHeight, clientHeight } = container;
-                const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
-
-                // 判断用户是否在底部附近
-                this.isUserNearBottom = distanceFromBottom <= this.scrollThreshold;
-            }
-        },
-
-        // 组件销毁时移除监听器
-        beforeUnmount() {
-            const container = this.$refs.messageContainer;
-            if (container) {
-                container.removeEventListener('scroll', this.throttledHandleScroll);
-            }
-            // 清理定时器
-            if (this.scrollTimer) {
-                clearTimeout(this.scrollTimer);
-                this.scrollTimer = null;
-            }
-            // 清理 elapsed time 计时器
-            if (this.elapsedTimeTimer) {
-                clearInterval(this.elapsedTimeTimer);
-                this.elapsedTimeTimer = null;
-            }
-        },
-
-        // 格式化消息时间，支持别名显示
-        formatMessageTime(dateStr) {
-            if (!dateStr) return '';
-
-            const date = new Date(dateStr);
-            const now = new Date();
-
-            // 获取本地时间的日期部分
-            const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-            const todayDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-            const yesterdayDay = new Date(todayDay);
-            yesterdayDay.setDate(yesterdayDay.getDate() - 1);
-
-            // 格式化时间 HH:MM
-            const hours = date.getHours().toString().padStart(2, '0');
-            const minutes = date.getMinutes().toString().padStart(2, '0');
-            const timeStr = `${hours}:${minutes}`;
-
-            // 判断是今天、昨天还是更早
-            if (dateDay.getTime() === todayDay.getTime()) {
-                return `${this.tm('time.today')} ${timeStr}`;
-            } else if (dateDay.getTime() === yesterdayDay.getTime()) {
-                return `${this.tm('time.yesterday')} ${timeStr}`;
-            } else {
-                // 更早的日期显示完整格式
-                const month = (date.getMonth() + 1).toString().padStart(2, '0');
-                const day = date.getDate().toString().padStart(2, '0');
-                return `${month}-${day} ${timeStr}`;
-            }
-        },
-
-        // Start timer for updating elapsed time
-        startElapsedTimeTimer() {
-            // Update every 12ms for sub-second precision, then every second after 1s
-            let fastUpdateCount = 0;
-            const fastUpdateInterval = 12;
-            const slowUpdateInterval = 1000;
-
-            const updateTime = () => {
-                this.currentTime = Date.now() / 1000;
-
-                // Check if there are any running tool calls
-                const hasRunningToolCalls = this.messages.some(msg =>
-                    Array.isArray(msg.content.message) && msg.content.message.some(part =>
-                        part.type === 'tool_call' && part.tool_calls?.some(tc => !tc.finished_ts)
-                    )
-                );
-
-                if (hasRunningToolCalls) {
-                    // Check if any running tool call is under 1 second
-                    const hasSubSecondToolCall = this.messages.some(msg =>
-                        Array.isArray(msg.content.message) && msg.content.message.some(part =>
-                            part.type === 'tool_call' && part.tool_calls?.some(tc =>
-                                !tc.finished_ts && (this.currentTime - tc.ts) < 1
-                            )
-                        )
-                    );
-
-                    if (hasSubSecondToolCall) {
-                        fastUpdateCount++;
-                        this.elapsedTimeTimer = setTimeout(updateTime, fastUpdateInterval);
-                    } else {
-                        this.elapsedTimeTimer = setTimeout(updateTime, slowUpdateInterval);
-                    }
-                } else {
-                    // No running tool calls, check again after 1 second
-                    this.elapsedTimeTimer = setTimeout(updateTime, slowUpdateInterval);
-                }
-            };
-
-            updateTime();
-        },
-
-        // Get elapsed time string for a tool call
-        getElapsedTime(startTs) {
-            const elapsed = this.currentTime - startTs;
-            return this.formatDuration(elapsed);
-        },
-
-        // Format duration in seconds to human readable string
-        formatDuration(seconds) {
-            if (seconds < 1) {
-                return `${Math.round(seconds * 1000)}ms`;
-            } else if (seconds < 60) {
-                return `${seconds.toFixed(1)}s`;
-            } else {
-                const minutes = Math.floor(seconds / 60);
-                const secs = Math.round(seconds % 60);
-                return `${minutes}m ${secs}s`;
-            }
-        },
-
-        // Get input tokens (input_other + input_cached)
-        getInputTokens(tokenUsage) {
-            if (!tokenUsage) return 0;
-            return (tokenUsage.input_other || 0) + (tokenUsage.input_cached || 0);
-        },
-
-        // Format agent duration
-        formatAgentDuration(agentStats) {
-            if (!agentStats) return '';
-            const duration = agentStats.end_time - agentStats.start_time;
-            return this.formatDuration(duration);
-        },
-
-        // Format time to first token
-        formatTTFT(ttft) {
-            if (!ttft || ttft <= 0) return '';
-            return this.formatDuration(ttft);
-        },
-
-        // 打开图片预览
-        openImagePreview(url) {
-            this.imagePreview.url = url;
-            this.imagePreview.show = true;
-        },
-
-        // 关闭图片预览
-        closeImagePreview() {
-            this.imagePreview.show = false;
-            setTimeout(() => {
-                this.imagePreview.url = '';
-            }, 300);
-        },
-
-        // Open refs sidebar
-        openRefsSidebar(refs) {
-            this.$emit('openRefs', refs);
-        }
+  },
+  emits: ["openImagePreview", "replyMessage", "replyWithText", "openRefs"],
+  setup() {
+    const { t } = useI18n();
+    const { tm } = useModuleI18n("features/chat");
+    const toast = useToast();
+
+    return {
+      t,
+      tm,
+      toast,
+    };
+  },
+  data() {
+    return {
+      copiedMessages: new Set(),
+      copyFailedMessages: new Set(),
+      isUserNearBottom: true,
+      scrollThreshold: 1,
+      scrollTimer: null,
+      expandedReasoning: new Set(), // Track which reasoning blocks are expanded
+      downloadingFiles: new Set(), // Track which files are being downloaded
+      elapsedTimeTimer: null, // Timer for updating elapsed time
+      currentTime: Date.now() / 1000, // Current time for elapsed time calculation
+      // 选中文本相关状态
+      selectedText: {
+        content: "",
+        messageIndex: null,
+        position: { top: 0, left: 0 },
+      },
+      // 图片预览
+      imagePreview: {
+        show: false,
+        url: "",
+      },
+      // Web search results mapping: { 'uuid.idx': { url, title, snippet } }
+      webSearchResults: {},
+    };
+  },
+  async mounted() {
+    this.initCodeCopyButtons();
+    this.initImageClickEvents();
+    this.addScrollListener();
+    this.scrollToBottom();
+    this.startElapsedTimeTimer();
+    this.extractWebSearchResults();
+  },
+  updated() {
+    this.initCodeCopyButtons();
+    this.initImageClickEvents();
+    if (this.isUserNearBottom) {
+      this.scrollToBottom();
     }
-}
+    this.extractWebSearchResults();
+  },
+  methods: {
+    // 从消息中提取 web_search_tavily 的搜索结果
+    extractWebSearchResults() {
+      const results = {};
+
+      this.messages.forEach((msg) => {
+        if (msg.content.type !== "bot" || !Array.isArray(msg.content.message)) {
+          return;
+        }
+
+        msg.content.message.forEach((part) => {
+          if (part.type !== "tool_call" || !Array.isArray(part.tool_calls)) {
+            return;
+          }
+
+          part.tool_calls.forEach((toolCall) => {
+            // 检查是否是 web_search_tavily 工具调用
+            if (toolCall.name !== "web_search_tavily" || !toolCall.result) {
+              return;
+            }
+
+            try {
+              // 解析工具调用结果
+              const resultData =
+                typeof toolCall.result === "string"
+                  ? JSON.parse(toolCall.result)
+                  : toolCall.result;
+
+              if (resultData.results && Array.isArray(resultData.results)) {
+                resultData.results.forEach((item) => {
+                  if (item.index) {
+                    results[item.index] = {
+                      url: item.url,
+                      title: item.title,
+                      snippet: item.snippet,
+                    };
+                  }
+                });
+              }
+            } catch (e) {
+              console.error("Failed to parse web search result:", e);
+            }
+          });
+        });
+      });
+
+      this.webSearchResults = results;
+    },
+
+    // 处理文本选择
+    handleTextSelection() {
+      const selection = window.getSelection();
+      const selectedText = selection.toString();
+
+      if (!selectedText.trim()) {
+        // 清除选中状态
+        this.selectedText.content = "";
+        this.selectedText.messageIndex = null;
+        return;
+      }
+
+      // 获取被选中的元素，找到对应的message-item
+      const range = selection.getRangeAt(0);
+      const startContainer = range.startContainer;
+      let messageItem = null;
+      let node = startContainer.parentElement;
+
+      // 遍历DOM树向上查找message-item
+      while (node && !node.classList.contains("message-item")) {
+        node = node.parentElement;
+      }
+
+      messageItem = node;
+
+      if (!messageItem) {
+        this.selectedText.content = "";
+        this.selectedText.messageIndex = null;
+        return;
+      }
+
+      // 获取message-item在messages数组中的索引
+      const messageItems =
+        this.$refs.messageContainer?.querySelectorAll(".message-item");
+      let messageIndex = -1;
+      if (messageItems) {
+        for (let i = 0; i < messageItems.length; i++) {
+          if (messageItems[i] === messageItem) {
+            messageIndex = i;
+            break;
+          }
+        }
+      }
+
+      if (messageIndex === -1) {
+        this.selectedText.content = "";
+        this.selectedText.messageIndex = null;
+        return;
+      }
+
+      // 获取选中文本的位置（相对于viewport）
+      const rect = selection.getRangeAt(0).getBoundingClientRect();
+
+      this.selectedText.content = selectedText;
+      this.selectedText.messageIndex = messageIndex;
+      this.selectedText.position = {
+        top: Math.max(0, rect.bottom + 5),
+        left: Math.max(0, (rect.left + rect.right) / 2),
+      };
+    },
+
+    // 处理引用选中的文本
+    handleQuoteSelected() {
+      if (this.selectedText.messageIndex === null) return;
+
+      const msg = this.messages[this.selectedText.messageIndex];
+      if (!msg || !msg.id) return;
+
+      // 触发replyWithText事件，传递选中的文本内容
+      this.$emit("replyWithText", {
+        messageId: msg.id,
+        selectedText: this.selectedText.content,
+        messageIndex: this.selectedText.messageIndex,
+      });
+
+      // 清除选中状态
+      this.selectedText.content = "";
+      this.selectedText.messageIndex = null;
+      window.getSelection().removeAllRanges();
+    },
+
+    // 检查 message 中是否有音频
+    hasAudio(messageParts) {
+      if (!Array.isArray(messageParts)) return false;
+      return messageParts.some(
+        (part) => part.type === "record" && part.embedded_url,
+      );
+    },
+
+    // 获取被引用消息的内容
+    getReplyContent(messageId) {
+      const replyMsg = this.messages.find((m) => m.id === messageId);
+      if (!replyMsg) {
+        return this.tm("reply.notFound");
+      }
+      let content = "";
+      if (Array.isArray(replyMsg.content.message)) {
+        const textParts = replyMsg.content.message
+          .filter((part) => part.type === "plain" && part.text)
+          .map((part) => part.text);
+        content = textParts.join("");
+      }
+      // 截断过长内容
+      if (content.length > 50) {
+        content = content.substring(0, 50) + "...";
+      }
+      return content || "[媒体内容]";
+    },
+
+    // 滚动到指定消息
+    scrollToMessage(messageId) {
+      const msgIndex = this.messages.findIndex((m) => m.id === messageId);
+      if (msgIndex === -1) return;
+
+      const container = this.$refs.messageContainer;
+      const messageItems = container?.querySelectorAll(".message-item");
+      if (messageItems && messageItems[msgIndex]) {
+        messageItems[msgIndex].scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+        // 高亮一下
+        messageItems[msgIndex].classList.add("highlight-message");
+        setTimeout(() => {
+          messageItems[msgIndex].classList.remove("highlight-message");
+        }, 2000);
+      }
+    },
+
+    // Toggle reasoning expansion state
+    toggleReasoning(messageIndex) {
+      if (this.expandedReasoning.has(messageIndex)) {
+        this.expandedReasoning.delete(messageIndex);
+      } else {
+        this.expandedReasoning.add(messageIndex);
+      }
+      // Force reactivity
+      this.expandedReasoning = new Set(this.expandedReasoning);
+    },
+
+    // Check if reasoning is expanded
+    isReasoningExpanded(messageIndex) {
+      return this.expandedReasoning.has(messageIndex);
+    },
+
+    // 下载文件
+    async downloadFile(file) {
+      if (!file.attachment_id) return;
+
+      // 标记为下载中
+      this.downloadingFiles.add(file.attachment_id);
+      this.downloadingFiles = new Set(this.downloadingFiles);
+
+      try {
+        const response = await axios.get(
+          `/api/chat/get_attachment?attachment_id=${file.attachment_id}`,
+          {
+            responseType: "blob",
+          },
+        );
+
+        const url = URL.createObjectURL(response.data);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = file.filename || "file";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+      } catch (err) {
+        console.error("Download file failed:", err);
+      } finally {
+        this.downloadingFiles.delete(file.attachment_id);
+        this.downloadingFiles = new Set(this.downloadingFiles);
+      }
+    },
+
+    // 复制代码到剪贴板
+    tryExecCommandCopy(text) {
+      let textArea = null;
+      try {
+        textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        const ok = document.execCommand("copy");
+        return ok;
+      } catch (_) {
+        return false;
+      } finally {
+        try {
+          textArea?.remove?.();
+        } catch (_) {
+          // ignore cleanup errors
+        }
+      }
+    },
+
+    async copyTextToClipboard(text) {
+      // 优先使用同步复制，尽量保留用户手势上下文；
+      // 在非安全来源（例如通过局域网 IP + vite --host）时成功率更高。
+      if (this.tryExecCommandCopy(text)) {
+        return { ok: true, method: "execCommand" };
+      }
+
+      if (navigator.clipboard?.writeText) {
+        try {
+          await navigator.clipboard.writeText(text);
+          return { ok: true, method: "clipboard" };
+        } catch (error) {
+          return { ok: false, method: "clipboard", error };
+        }
+      }
+
+      return { ok: false, method: "unavailable" };
+    },
+
+    async copyWithFeedback(text, messageIndex = null) {
+      const result = await this.copyTextToClipboard(text);
+      const ok = !!result?.ok;
+
+      if (messageIndex !== null && messageIndex !== undefined) {
+        if (ok) this.showCopySuccess(messageIndex);
+        else this.showCopyFailure(messageIndex);
+      }
+
+      if (ok) {
+        this.toast?.success?.(this.t("core.common.copied"));
+      } else {
+        this.toast?.error?.(this.t("core.common.copyFailed"));
+      }
+
+      return result;
+    },
+
+    buildCopyTextFromParts(messageParts) {
+      if (typeof messageParts === "string") {
+        return messageParts.trim();
+      }
+      if (!Array.isArray(messageParts)) {
+        return "";
+      }
+
+      const textContents = messageParts
+        .filter(
+          (part) =>
+            part &&
+            typeof part === "object" &&
+            part.type === "plain" &&
+            part.text,
+        )
+        .map((part) => part.text);
+
+      let textToCopy = textContents.join("\n");
+
+      const imageCount = messageParts.filter(
+        (part) => part?.type === "image" && part.embedded_url,
+      ).length;
+      if (imageCount > 0) {
+        if (textToCopy) textToCopy += "\n\n";
+        textToCopy += `[包含 ${imageCount} 张图片]`;
+      }
+
+      const hasAudio = messageParts.some(
+        (part) => part?.type === "record" && part.embedded_url,
+      );
+      if (hasAudio) {
+        if (textToCopy) textToCopy += "\n\n";
+        textToCopy += "[包含音频内容]";
+      }
+
+      return String(textToCopy || "").trim();
+    },
+
+    async copyCodeToClipboard(code) {
+      const text = String(code ?? "");
+      if (!text) return { ok: false, method: "empty" };
+      return await this.copyWithFeedback(text, null);
+    },
+
+    // 复制bot消息到剪贴板
+    async copyBotMessage(messageParts, messageIndex) {
+      let textToCopy = this.buildCopyTextFromParts(messageParts);
+      if (!textToCopy) textToCopy = "[媒体内容]";
+      await this.copyWithFeedback(textToCopy, messageIndex);
+    },
+
+    // 显示复制成功提示
+    showCopySuccess(messageIndex) {
+      if (this.copyFailedMessages.has(messageIndex)) {
+        this.copyFailedMessages.delete(messageIndex);
+        this.copyFailedMessages = new Set(this.copyFailedMessages);
+      }
+      this.copiedMessages.add(messageIndex);
+      this.copiedMessages = new Set(this.copiedMessages);
+
+      // 2秒后移除成功状态
+      setTimeout(() => {
+        this.copiedMessages.delete(messageIndex);
+        this.copiedMessages = new Set(this.copiedMessages);
+      }, 2000);
+    },
+
+    // 显示复制失败提示
+    showCopyFailure(messageIndex) {
+      if (this.copiedMessages.has(messageIndex)) {
+        this.copiedMessages.delete(messageIndex);
+        this.copiedMessages = new Set(this.copiedMessages);
+      }
+      this.copyFailedMessages.add(messageIndex);
+      this.copyFailedMessages = new Set(this.copyFailedMessages);
+
+      setTimeout(() => {
+        this.copyFailedMessages.delete(messageIndex);
+        this.copyFailedMessages = new Set(this.copyFailedMessages);
+      }, 2000);
+    },
+
+    // 获取复制按钮图标
+    getCopyIcon(messageIndex) {
+      if (this.copiedMessages.has(messageIndex)) return "mdi-check";
+      if (this.copyFailedMessages.has(messageIndex))
+        return "mdi-alert-circle-outline";
+      return "mdi-content-copy";
+    },
+
+    // 检查是否为复制成功状态
+    isCopySuccess(messageIndex) {
+      return this.copiedMessages.has(messageIndex);
+    },
+
+    // 检查是否为复制失败状态
+    isCopyFailure(messageIndex) {
+      return this.copyFailedMessages.has(messageIndex);
+    },
+
+    // 获取复制按钮提示文本
+    getCopyTitle(messageIndex) {
+      if (this.isCopySuccess(messageIndex)) return this.t("core.common.copied");
+      if (this.isCopyFailure(messageIndex))
+        return this.t("core.common.copyFailed");
+      return this.t("core.common.copy");
+    },
+
+    // 获取复制图标SVG
+    getCopyIconSvg() {
+      return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+    },
+
+    // 获取成功图标SVG
+    getSuccessIconSvg() {
+      return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"></polyline></svg>';
+    },
+
+    // 获取失败图标SVG
+    getErrorIconSvg() {
+      return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="13"></line><circle cx="12" cy="16.5" r="1"></circle></svg>';
+    },
+
+    // 初始化代码块复制按钮
+    initCodeCopyButtons() {
+      this.$nextTick(() => {
+        const codeBlocks =
+          this.$refs.messageContainer?.querySelectorAll("pre code") || [];
+        codeBlocks.forEach((codeBlock, index) => {
+          const pre = codeBlock.parentElement;
+          if (pre && !pre.querySelector(".copy-code-btn")) {
+            const button = document.createElement("button");
+            button.className = "copy-code-btn";
+            button.innerHTML = this.getCopyIconSvg();
+            button.title = this.t("core.common.copy");
+            button.addEventListener("click", async () => {
+              const res = await this.copyCodeToClipboard(
+                codeBlock.textContent || "",
+              );
+              const ok = !!res?.ok;
+              button.innerHTML = ok
+                ? this.getSuccessIconSvg()
+                : this.getErrorIconSvg();
+              button.style.color = ok
+                ? "rgb(var(--v-theme-success))"
+                : "rgb(var(--v-theme-error))";
+              button.setAttribute(
+                "title",
+                this.t(`core.common.${ok ? "copied" : "copyFailed"}`),
+              );
+              setTimeout(() => {
+                button.innerHTML = this.getCopyIconSvg();
+                button.style.color = "";
+                button.setAttribute("title", this.t("core.common.copy"));
+              }, 2000);
+            });
+            pre.style.position = "relative";
+            pre.appendChild(button);
+          }
+        });
+      });
+    },
+
+    initImageClickEvents() {
+      this.$nextTick(() => {
+        // 查找所有动态生成的图片（在markdown-content中）
+        const images = document.querySelectorAll(".markdown-content img");
+        images.forEach((img) => {
+          if (!img.hasAttribute("data-click-enabled")) {
+            img.style.cursor = "pointer";
+            img.setAttribute("data-click-enabled", "true");
+            img.onclick = () => this.openImagePreview(img.src);
+          }
+        });
+      });
+    },
+
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const container = this.$refs.messageContainer;
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+          this.isUserNearBottom = true; // 程序滚动到底部后标记用户在底部
+        }
+      });
+    },
+
+    // 添加滚动事件监听器
+    addScrollListener() {
+      const container = this.$refs.messageContainer;
+      if (container) {
+        container.addEventListener("scroll", this.throttledHandleScroll);
+      }
+    },
+
+    // 节流处理滚动事件
+    throttledHandleScroll() {
+      if (this.scrollTimer) return;
+
+      this.scrollTimer = setTimeout(() => {
+        this.handleScroll();
+        this.scrollTimer = null;
+      }, 50); // 50ms 节流
+    },
+
+    // 处理滚动事件
+    handleScroll() {
+      const container = this.$refs.messageContainer;
+      if (container) {
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+
+        // 判断用户是否在底部附近
+        this.isUserNearBottom = distanceFromBottom <= this.scrollThreshold;
+      }
+    },
+
+    // 组件销毁时移除监听器
+    beforeUnmount() {
+      const container = this.$refs.messageContainer;
+      if (container) {
+        container.removeEventListener("scroll", this.throttledHandleScroll);
+      }
+      // 清理定时器
+      if (this.scrollTimer) {
+        clearTimeout(this.scrollTimer);
+        this.scrollTimer = null;
+      }
+      // 清理 elapsed time 计时器
+      if (this.elapsedTimeTimer) {
+        clearInterval(this.elapsedTimeTimer);
+        this.elapsedTimeTimer = null;
+      }
+    },
+
+    // 格式化消息时间，支持别名显示
+    formatMessageTime(dateStr) {
+      if (!dateStr) return "";
+
+      const date = new Date(dateStr);
+      const now = new Date();
+
+      // 获取本地时间的日期部分
+      const dateDay = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+      );
+      const todayDay = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate(),
+      );
+      const yesterdayDay = new Date(todayDay);
+      yesterdayDay.setDate(yesterdayDay.getDate() - 1);
+
+      // 格式化时间 HH:MM
+      const hours = date.getHours().toString().padStart(2, "0");
+      const minutes = date.getMinutes().toString().padStart(2, "0");
+      const timeStr = `${hours}:${minutes}`;
+
+      // 判断是今天、昨天还是更早
+      if (dateDay.getTime() === todayDay.getTime()) {
+        return `${this.tm("time.today")} ${timeStr}`;
+      } else if (dateDay.getTime() === yesterdayDay.getTime()) {
+        return `${this.tm("time.yesterday")} ${timeStr}`;
+      } else {
+        // 更早的日期显示完整格式
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const day = date.getDate().toString().padStart(2, "0");
+        return `${month}-${day} ${timeStr}`;
+      }
+    },
+
+    // Start timer for updating elapsed time
+    startElapsedTimeTimer() {
+      // Update every 12ms for sub-second precision, then every second after 1s
+      let fastUpdateCount = 0;
+      const fastUpdateInterval = 12;
+      const slowUpdateInterval = 1000;
+
+      const updateTime = () => {
+        this.currentTime = Date.now() / 1000;
+
+        // Check if there are any running tool calls
+        const hasRunningToolCalls = this.messages.some(
+          (msg) =>
+            Array.isArray(msg.content.message) &&
+            msg.content.message.some(
+              (part) =>
+                part.type === "tool_call" &&
+                part.tool_calls?.some((tc) => !tc.finished_ts),
+            ),
+        );
+
+        if (hasRunningToolCalls) {
+          // Check if any running tool call is under 1 second
+          const hasSubSecondToolCall = this.messages.some(
+            (msg) =>
+              Array.isArray(msg.content.message) &&
+              msg.content.message.some(
+                (part) =>
+                  part.type === "tool_call" &&
+                  part.tool_calls?.some(
+                    (tc) => !tc.finished_ts && this.currentTime - tc.ts < 1,
+                  ),
+              ),
+          );
+
+          if (hasSubSecondToolCall) {
+            fastUpdateCount++;
+            this.elapsedTimeTimer = setTimeout(updateTime, fastUpdateInterval);
+          } else {
+            this.elapsedTimeTimer = setTimeout(updateTime, slowUpdateInterval);
+          }
+        } else {
+          // No running tool calls, check again after 1 second
+          this.elapsedTimeTimer = setTimeout(updateTime, slowUpdateInterval);
+        }
+      };
+
+      updateTime();
+    },
+
+    // Get elapsed time string for a tool call
+    getElapsedTime(startTs) {
+      const elapsed = this.currentTime - startTs;
+      return this.formatDuration(elapsed);
+    },
+
+    // Format duration in seconds to human readable string
+    formatDuration(seconds) {
+      if (seconds < 1) {
+        return `${Math.round(seconds * 1000)}ms`;
+      } else if (seconds < 60) {
+        return `${seconds.toFixed(1)}s`;
+      } else {
+        const minutes = Math.floor(seconds / 60);
+        const secs = Math.round(seconds % 60);
+        return `${minutes}m ${secs}s`;
+      }
+    },
+
+    // Get input tokens (input_other + input_cached)
+    getInputTokens(tokenUsage) {
+      if (!tokenUsage) return 0;
+      return (tokenUsage.input_other || 0) + (tokenUsage.input_cached || 0);
+    },
+
+    // Format agent duration
+    formatAgentDuration(agentStats) {
+      if (!agentStats) return "";
+      const duration = agentStats.end_time - agentStats.start_time;
+      return this.formatDuration(duration);
+    },
+
+    // Format time to first token
+    formatTTFT(ttft) {
+      if (!ttft || ttft <= 0) return "";
+      return this.formatDuration(ttft);
+    },
+
+    // 打开图片预览
+    openImagePreview(url) {
+      this.imagePreview.url = url;
+      this.imagePreview.show = true;
+    },
+
+    // 关闭图片预览
+    closeImagePreview() {
+      this.imagePreview.show = false;
+      setTimeout(() => {
+        this.imagePreview.url = "";
+      }, 300);
+    },
+
+    // Open refs sidebar
+    openRefsSidebar(refs) {
+      this.$emit("openRefs", refs);
+    },
+  },
+};
 </script>
 
 <style scoped>
 :deep(.hr-node) {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-    opacity: 0.5;
-    border-top-width: .3px;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  opacity: 0.5;
+  border-top-width: 0.3px;
 }
 
 :deep(.paragraph-node) {
-    margin: .5rem 0;
-    line-height: 1.7;
-    margin-block: 1rem;
+  margin: 0.5rem 0;
+  line-height: 1.7;
+  margin-block: 1rem;
 }
 
 :deep(.list-node) {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 :deep(.mermaid-block-header) {
-    gap: 8px;
+  gap: 8px;
 }
 
 :deep(code.bg-secondary) {
-    background-color: #ececec !important;
-    color: #0d0d0d !important;
+  background-color: #ececec !important;
+  color: #0d0d0d !important;
 }
 
 :deep(code.rounded) {
-    border-radius: 6px !important;
+  border-radius: 6px !important;
 }
 
 .messages-container.is-dark :deep(code.bg-secondary) {
-    background-color: #424242 !important;
-    color: #ffffff !important;
+  background-color: #424242 !important;
+  color: #ffffff !important;
 }
 
 .messages-container.is-dark :deep(.code-block-container) {
-    background-color: #1f1f1f !important;
+  background-color: #1f1f1f !important;
 }
 
 /* 基础动画 */
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(0);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .messages-container {
-    height: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-    overscroll-behavior-y: contain;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    position: relative;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
 }
 
 .loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10;
-    background-color: rgba(255, 255, 255, 0.7);
-    transition: opacity 0.3s ease;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  background-color: rgba(255, 255, 255, 0.7);
+  transition: opacity 0.3s ease;
 }
 
 .loading-overlay.is-dark {
-    background-color: rgba(30, 30, 30, 0.7);
+  background-color: rgba(30, 30, 30, 0.7);
 }
 
 .message-list.loading-blur {
-    opacity: 0.5;
-    transition: opacity 0.3s ease;
-    pointer-events: none;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
 }
 
 .message-bubble {
-    padding: 2px 16px;
-    border-radius: 12px;
+  padding: 2px 16px;
+  border-radius: 12px;
 }
 
 .loading-container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px 0;
-    margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  margin-top: 8px;
 }
 
 .loading-text {
-    font-size: 14px;
-    color: var(--v-theme-secondaryText);
-    animation: pulse 1.5s ease-in-out infinite;
+  font-size: 14px;
+  color: var(--v-theme-secondaryText);
+  animation: pulse 1.5s ease-in-out infinite;
 }
 
 @keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
 
-    0%,
-    100% {
-        opacity: 0.6;
-    }
-
-    50% {
-        opacity: 1;
-    }
+  50% {
+    opacity: 1;
+  }
 }
 
-
-
 @media (max-width: 768px) {
-    .messages-container {
-        padding: 8px;
-    }
+  .messages-container {
+    padding: 8px;
+  }
 
-    .message-list {
-        max-width: 100%;
-    }
+  .message-list {
+    max-width: 100%;
+  }
 
-    .message-item {
-        padding: 0;
-    }
+  .message-item {
+    padding: 0;
+  }
 
-    .message-bubble {
-        padding: 2px 12px;
-    }
+  .message-bubble {
+    padding: 2px 12px;
+  }
 
-    .bot-message {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-        width: 100%;
-    }
+  .bot-message {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    width: 100%;
+  }
 
-    .bot-message-content {
-        max-width: 100% !important;
-        width: 100% !important;
-    }
+  .bot-message-content {
+    max-width: 100% !important;
+    width: 100% !important;
+  }
 
-    .bot-bubble {
-        width: 100% !important;
-        max-width: 100% !important;
-    }
+  .bot-bubble {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
 
-    .bot-avatar {
-        margin-left: 4px;
-    }
+  .bot-avatar {
+    margin-left: 4px;
+  }
 }
 
 /* 消息列表样式 */
 .message-list {
-    max-width: 900px;
-    margin: 0 auto;
-    width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .message-item {
-    margin-bottom: 12px;
-    animation: fadeIn 0.3s ease-out;
+  margin-bottom: 12px;
+  animation: fadeIn 0.3s ease-out;
 }
 
 .user-message {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    gap: 12px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 .bot-message {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 12px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 .bot-message-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 80%;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 80%;
+  position: relative;
 }
 
 .message-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    margin-left: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  margin-left: 16px;
 }
 
 /* 最后一条消息始终显示操作按钮 */
 .message-item:last-child .message-actions {
-    opacity: 1;
+  opacity: 1;
 }
 
 .message-time {
-    font-size: 12px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.7;
-    white-space: nowrap;
+  font-size: 12px;
+  color: var(--v-theme-secondaryText);
+  opacity: 0.7;
+  white-space: nowrap;
 }
 
 /* Agent Stats Info Icon */
 .stats-info-icon {
-    margin-left: 6px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.6;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
+  margin-left: 6px;
+  color: var(--v-theme-secondaryText);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
 }
 
 .stats-info-icon:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .bot-message:hover .message-actions {
-    opacity: 1;
+  opacity: 1;
 }
 
 .copy-message-btn {
-    opacity: 0.6;
-    transition: all 0.2s ease;
-    color: var(--v-theme-secondary);
+  opacity: 0.6;
+  transition: all 0.2s ease;
+  color: var(--v-theme-secondary);
 }
 
 .copy-message-btn:hover {
-    opacity: 1;
-    background-color: rgba(103, 58, 183, 0.1);
+  opacity: 1;
+  background-color: rgba(103, 58, 183, 0.1);
 }
 
 .copy-message-btn.copy-success {
-    color: rgb(var(--v-theme-success));
-    opacity: 1;
+  color: rgb(var(--v-theme-success));
+  opacity: 1;
 }
 
 .copy-message-btn.copy-success:hover {
-    color: rgb(var(--v-theme-success));
-    background-color: rgba(var(--v-theme-success), 0.1);
+  color: rgb(var(--v-theme-success));
+  background-color: rgba(var(--v-theme-success), 0.1);
 }
 
 .copy-message-btn.copy-failed {
-    color: rgb(var(--v-theme-error));
-    opacity: 1;
+  color: rgb(var(--v-theme-error));
+  opacity: 1;
 }
 
 .copy-message-btn.copy-failed:hover {
-    color: rgb(var(--v-theme-error));
-    background-color: rgba(var(--v-theme-error), 0.1);
+  color: rgb(var(--v-theme-error));
+  background-color: rgba(var(--v-theme-error), 0.1);
 }
 
 .reply-message-btn {
-    opacity: 0.6;
-    transition: all 0.2s ease;
-    color: var(--v-theme-secondary);
+  opacity: 0.6;
+  transition: all 0.2s ease;
+  color: var(--v-theme-secondary);
 }
 
 .reply-message-btn:hover {
-    opacity: 1;
-    background-color: rgba(103, 58, 183, 0.1);
+  opacity: 1;
+  background-color: rgba(103, 58, 183, 0.1);
 }
 
 /* 引用消息显示样式 */
 .reply-quote {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
-    margin-bottom: 8px;
-    background-color: rgba(103, 58, 183, 0.08);
-    border-left: 3px solid var(--v-theme-secondary);
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  margin-bottom: 8px;
+  background-color: rgba(103, 58, 183, 0.08);
+  border-left: 3px solid var(--v-theme-secondary);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
 
 .reply-quote:hover {
-    background-color: rgba(103, 58, 183, 0.15);
+  background-color: rgba(103, 58, 183, 0.15);
 }
 
 .reply-quote-icon {
-    color: var(--v-theme-secondary);
-    flex-shrink: 0;
+  color: var(--v-theme-secondary);
+  flex-shrink: 0;
 }
 
 .reply-quote-text {
-    font-size: 13px;
-    color: var(--v-theme-secondaryText);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  font-size: 13px;
+  color: var(--v-theme-secondaryText);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* 消息高亮动画 */
 .highlight-message {
-    animation: highlightPulse 2s ease-out;
+  animation: highlightPulse 2s ease-out;
 }
 
 @keyframes highlightPulse {
-    0% {
-        background-color: rgba(103, 58, 183, 0.3);
-    }
+  0% {
+    background-color: rgba(103, 58, 183, 0.3);
+  }
 
-    100% {
-        background-color: transparent;
-    }
+  100% {
+    background-color: transparent;
+  }
 }
 
-
 .user-bubble {
-    color: var(--v-theme-primaryText);
-    padding: 12px 18px;
-    font-size: 15px;
-    max-width: 60%;
-    border-radius: 1.5rem;
+  color: var(--v-theme-primaryText);
+  padding: 12px 18px;
+  font-size: 15px;
+  max-width: 60%;
+  border-radius: 1.5rem;
 }
 
 .bot-bubble {
-    border: 1px solid var(--v-theme-border);
-    color: var(--v-theme-primaryText);
-    font-size: 16px;
-    max-width: 100%;
-    padding-left: 12px;
+  border: 1px solid var(--v-theme-border);
+  color: var(--v-theme-primaryText);
+  font-size: 16px;
+  max-width: 100%;
+  padding-left: 12px;
 }
 
 .user-avatar,
 .bot-avatar {
-    align-self: flex-start;
-    margin-top: 12px;
+  align-self: flex-start;
+  margin-top: 12px;
 }
 
 /* 附件样式 */
 .image-attachments {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    flex-wrap: wrap;
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
 }
 
 .image-attachment {
-    position: relative;
-    display: inline-block;
+  position: relative;
+  display: inline-block;
 }
 
 .attached-image {
-    width: 120px;
-    height: 120px;
-    object-fit: cover;
-    border-radius: 12px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease;
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
 }
 
 .audio-attachment {
-    margin-top: 8px;
-    min-width: 250px;
+  margin-top: 8px;
+  min-width: 250px;
 }
 
 /* 包含音频的消息气泡最小宽度 */
 .message-bubble.has-audio {
-    min-width: 280px;
+  min-width: 280px;
 }
 
 .audio-player {
-    width: 100%;
-    height: 36px;
-    border-radius: 18px;
+  width: 100%;
+  height: 36px;
+  border-radius: 18px;
 }
 
 /* 文件附件样式 */
 .file-attachments,
 .embedded-files {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .file-attachment,
 .embedded-file {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .file-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    background-color: rgba(var(--v-theme-primary), 0.08);
-    border: 1px solid rgba(var(--v-theme-primary), 0.2);
-    border-radius: 8px;
-    color: rgb(var(--v-theme-primary));
-    text-decoration: none;
-    font-size: 14px;
-    transition: all 0.2s ease;
-    max-width: 300px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  border: 1px solid rgba(var(--v-theme-primary), 0.2);
+  border-radius: 8px;
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  max-width: 300px;
 }
 
 .file-link-download {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .download-icon {
-    margin-left: 4px;
-    opacity: 0.7;
+  margin-left: 4px;
+  opacity: 0.7;
 }
 
 .file-icon {
-    flex-shrink: 0;
-    color: rgb(var(--v-theme-primary));
+  flex-shrink: 0;
+  color: rgb(var(--v-theme-primary));
 }
 
 .file-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .file-link.is-dark:hover {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-    border-color: rgba(255, 255, 255, 0.2) !important;
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.2) !important;
 }
 
 /* 动画类 */
 .fade-in {
-    animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 /* 浮动引用按钮样式 */
 .selection-quote-button {
-    position: fixed;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    pointer-events: all;
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: all;
 }
 
 .quote-btn {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    font-size: 14px;
-    padding: 4px 24px;
-    background-color: #f6f4fa !important;
-    color: #333333 !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  padding: 4px 24px;
+  background-color: #f6f4fa !important;
+  color: #333333 !important;
 }
 
 .quote-btn:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    background-color: #f6f4fa !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  background-color: #f6f4fa !important;
 }
 
 /* 深色主题 */
 .quote-btn.dark-mode {
-    background-color: #2d2d2d !important;
-    color: #ffffff !important;
+  background-color: #2d2d2d !important;
+  color: #ffffff !important;
 }
-
-
-
 </style>
 
 <style>
 .markdown-content {
-    max-width: 100%;
-    line-height: 1.6;
+  max-width: 100%;
+  line-height: 1.6;
 }
 
-
 /* Stats Menu 样式 */
 .stats-menu-card {
-    border-radius: 8px !important;
-    min-width: 160px;
+  border-radius: 8px !important;
+  min-width: 160px;
 }
 
 .stats-menu-content {
-    padding: 12px 16px !important;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+  padding: 12px 16px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .stats-menu-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
 }
 
 .stats-menu-label {
-    font-size: 13px;
-    color: var(--v-theme-secondaryText);
+  font-size: 13px;
+  color: var(--v-theme-secondaryText);
 }
 
 .stats-menu-value {
-    font-size: 13px;
-    font-weight: 600;
-    font-family: 'Fira Code', 'Consolas', monospace;
-    color: var(--v-theme-primaryText);
+  font-size: 13px;
+  font-weight: 600;
+  font-family: "Fira Code", "Consolas", monospace;
+  color: var(--v-theme-primaryText);
 }
 
 /* 图片预览样式 */
 .image-preview-overlay {
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-preview-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
 .preview-image {
-    max-width: 90vw;
-    max-height: 90vh;
-    object-fit: contain;
-    border-radius: 8px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
 }
 
 .close-preview-btn {
-    position: fixed;
-    top: 20px;
-    right: 20px;
+  position: fixed;
+  top: 20px;
+  right: 20px;
 }
 </style>
diff --git a/dashboard/src/components/chat/ProjectDialog.vue b/dashboard/src/components/chat/ProjectDialog.vue
index 187a70146..2f9cf031f 100644
--- a/dashboard/src/components/chat/ProjectDialog.vue
+++ b/dashboard/src/components/chat/ProjectDialog.vue
@@ -1,22 +1,62 @@
 <template>
-    <v-dialog v-model="isOpen" max-width="500" @update:model-value="handleDialogChange">
-        <v-card>
-            <v-card-title class="dialog-title">
-                {{ isEditing ? tm('project.edit') : tm('project.create') }}
-            </v-card-title>
-            <v-card-text>
-                <v-text-field v-model="form.emoji" :label="tm('project.emoji')" flat variant="solo-filled" hide-details class="mb-3" />
-                <v-text-field v-model="form.title" :label="tm('project.name')" flat variant="solo-filled" hide-details class="mb-3" autofocus
-                    @keyup.enter="handleSave" />
-                <v-textarea v-model="form.description" :label="tm('project.description')" flat variant="solo-filled" hide-details rows="3" rounded="lg" />
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn variant="text" @click="handleCancel" color="grey-darken-1">{{ t('core.common.cancel') }}</v-btn>
-                <v-btn variant="text" @click="handleSave" color="primary" :disabled="!form.title.trim()">{{ t('core.common.save') }}</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+  <v-dialog
+    v-model="isOpen"
+    max-width="500"
+    @update:model-value="handleDialogChange"
+  >
+    <v-card>
+      <v-card-title class="dialog-title">
+        {{ isEditing ? tm('project.edit') : tm('project.create') }}
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model="form.emoji"
+          :label="tm('project.emoji')"
+          flat
+          variant="solo-filled"
+          hide-details
+          class="mb-3"
+        />
+        <v-text-field
+          v-model="form.title"
+          :label="tm('project.name')"
+          flat
+          variant="solo-filled"
+          hide-details
+          class="mb-3"
+          autofocus
+          @keyup.enter="handleSave"
+        />
+        <v-textarea
+          v-model="form.description"
+          :label="tm('project.description')"
+          flat
+          variant="solo-filled"
+          hide-details
+          rows="3"
+          rounded="lg"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          color="grey-darken-1"
+          @click="handleCancel"
+        >
+          {{ t('core.common.cancel') }}
+        </v-btn>
+        <v-btn
+          variant="text"
+          color="primary"
+          :disabled="!form.title.trim()"
+          @click="handleSave"
+        >
+          {{ t('core.common.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/ProjectList.vue b/dashboard/src/components/chat/ProjectList.vue
index 34491c529..793e317d7 100644
--- a/dashboard/src/components/chat/ProjectList.vue
+++ b/dashboard/src/components/chat/ProjectList.vue
@@ -1,44 +1,84 @@
 <template>
-    <div>
-        <!-- 项目按钮 -->
-        <div style="padding: 0 8px 0px 8px; opacity: 0.6;">
-            <v-btn block variant="text" class="project-btn" @click="toggleExpanded" prepend-icon="mdi-folder-outline">
-                {{ tm('project.title') }}
-                <template v-slot:append>
-                    <v-icon size="small">{{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-                </template>
-            </v-btn>
-        </div>
-
-        <!-- 项目列表 -->
-        <v-expand-transition>
-            <div v-show="expanded" style="padding: 0 8px;">
-                <v-list density="compact" nav class="project-list" style="background-color: transparent;">
-                    <v-list-item @click="$emit('createProject')" class="create-project-item" rounded="lg">
-                        <template v-slot:prepend>
-                            <span class="project-emoji"><v-icon size="small">mdi-plus</v-icon></span>
-                        </template>
-                        <v-list-item-title style="font-size: 13px;">{{ tm('project.create') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item v-for="project in projects" :key="project.project_id"
-                        @click="$emit('selectProject', project.project_id)" rounded="lg" class="project-item">
-                        <template v-slot:prepend>
-                            <span class="project-emoji">{{ project.emoji || '📁' }}</span>
-                        </template>
-                        <v-list-item-title class="project-title">{{ project.title }}</v-list-item-title>
-                        <template v-slot:append>
-                            <div class="project-actions">
-                                <v-btn icon="mdi-pencil" size="x-small" variant="text" class="edit-project-btn"
-                                    @click.stop="$emit('editProject', project)" />
-                                <v-btn icon="mdi-delete" size="x-small" variant="text" class="delete-project-btn"
-                                    color="error" @click.stop="handleDeleteProject(project)" />
-                            </div>
-                        </template>
-                    </v-list-item>
-                </v-list>
-            </div>
-        </v-expand-transition>
+  <div>
+    <!-- 项目按钮 -->
+    <div style="padding: 0 8px 0px 8px; opacity: 0.6;">
+      <v-btn
+        block
+        variant="text"
+        class="project-btn"
+        prepend-icon="mdi-folder-outline"
+        @click="toggleExpanded"
+      >
+        {{ tm('project.title') }}
+        <template #append>
+          <v-icon size="small">
+            {{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+          </v-icon>
+        </template>
+      </v-btn>
     </div>
+
+    <!-- 项目列表 -->
+    <v-expand-transition>
+      <div
+        v-show="expanded"
+        style="padding: 0 8px;"
+      >
+        <v-list
+          density="compact"
+          nav
+          class="project-list"
+          style="background-color: transparent;"
+        >
+          <v-list-item
+            class="create-project-item"
+            rounded="lg"
+            @click="$emit('createProject')"
+          >
+            <template #prepend>
+              <span class="project-emoji"><v-icon size="small">mdi-plus</v-icon></span>
+            </template>
+            <v-list-item-title style="font-size: 13px;">
+              {{ tm('project.create') }}
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            v-for="project in projects"
+            :key="project.project_id"
+            rounded="lg"
+            class="project-item"
+            @click="$emit('selectProject', project.project_id)"
+          >
+            <template #prepend>
+              <span class="project-emoji">{{ project.emoji || '📁' }}</span>
+            </template>
+            <v-list-item-title class="project-title">
+              {{ project.title }}
+            </v-list-item-title>
+            <template #append>
+              <div class="project-actions">
+                <v-btn
+                  icon="mdi-pencil"
+                  size="x-small"
+                  variant="text"
+                  class="edit-project-btn"
+                  @click.stop="$emit('editProject', project)"
+                />
+                <v-btn
+                  icon="mdi-delete"
+                  size="x-small"
+                  variant="text"
+                  class="delete-project-btn"
+                  color="error"
+                  @click.stop="handleDeleteProject(project)"
+                />
+              </div>
+            </template>
+          </v-list-item>
+        </v-list>
+      </div>
+    </v-expand-transition>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/ProjectView.vue b/dashboard/src/components/chat/ProjectView.vue
index 2358b34af..d9c0b02c2 100644
--- a/dashboard/src/components/chat/ProjectView.vue
+++ b/dashboard/src/components/chat/ProjectView.vue
@@ -1,47 +1,76 @@
 <template>
-    <div class="project-sessions-container fade-in">
-        <div class="project-header">
-            <div class="project-header-info">
-                <span class="project-header-emoji">{{ project?.emoji || '📁' }}</span>
-                <h2 class="project-header-title">{{ project?.title }}</h2>
-            </div>
-            <p class="project-header-description" v-if="project?.description">
-                {{ project.description }}
-            </p>
-        </div>
-
-        <div class="project-input-slot">
-            <slot></slot>
-        </div>
-
-        <v-card flat class="project-sessions-list">
-            <v-list v-if="sessions.length > 0">
-                <v-list-item v-for="session in sessions" :key="session.session_id"
-                    @click="$emit('selectSession', session.session_id)" class="project-session-item" rounded="lg">
-                    <v-list-item-title>
-                        {{ session.display_name || tm('conversation.newConversation') }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                        {{ formatDate(session.updated_at) }}
-                    </v-list-item-subtitle>
-                    <template v-slot:append>
-                        <div class="session-actions">
-                            <v-btn icon="mdi-pencil" size="x-small" variant="text"
-                                class="edit-session-btn"
-                                @click.stop="$emit('editSessionTitle', session.session_id, session.display_name ?? '')" />
-                            <v-btn icon="mdi-delete" size="x-small" variant="text"
-                                class="delete-session-btn" color="error"
-                                @click.stop="handleDeleteSession(session)" />
-                        </div>
-                    </template>
-                </v-list-item>
-            </v-list>
-            <div v-else class="no-sessions-in-project">
-                <v-icon icon="mdi-message-off-outline" size="large" color="grey-lighten-1"></v-icon>
-                <p>{{ tm('project.noSessions') }}</p>
-            </div>
-        </v-card>
+  <div class="project-sessions-container fade-in">
+    <div class="project-header">
+      <div class="project-header-info">
+        <span class="project-header-emoji">{{ project?.emoji || '📁' }}</span>
+        <h2 class="project-header-title">
+          {{ project?.title }}
+        </h2>
+      </div>
+      <p
+        v-if="project?.description"
+        class="project-header-description"
+      >
+        {{ project.description }}
+      </p>
     </div>
+
+    <div class="project-input-slot">
+      <slot />
+    </div>
+
+    <v-card
+      flat
+      class="project-sessions-list"
+    >
+      <v-list v-if="sessions.length > 0">
+        <v-list-item
+          v-for="session in sessions"
+          :key="session.session_id"
+          class="project-session-item"
+          rounded="lg"
+          @click="$emit('selectSession', session.session_id)"
+        >
+          <v-list-item-title>
+            {{ session.display_name || tm('conversation.newConversation') }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ formatDate(session.updated_at) }}
+          </v-list-item-subtitle>
+          <template #append>
+            <div class="session-actions">
+              <v-btn
+                icon="mdi-pencil"
+                size="x-small"
+                variant="text"
+                class="edit-session-btn"
+                @click.stop="$emit('editSessionTitle', session.session_id, session.display_name ?? '')"
+              />
+              <v-btn
+                icon="mdi-delete"
+                size="x-small"
+                variant="text"
+                class="delete-session-btn"
+                color="error"
+                @click.stop="handleDeleteSession(session)"
+              />
+            </div>
+          </template>
+        </v-list-item>
+      </v-list>
+      <div
+        v-else
+        class="no-sessions-in-project"
+      >
+        <v-icon
+          icon="mdi-message-off-outline"
+          size="large"
+          color="grey-lighten-1"
+        />
+        <p>{{ tm('project.noSessions') }}</p>
+      </div>
+    </v-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/ProviderConfigDialog.vue b/dashboard/src/components/chat/ProviderConfigDialog.vue
index 51ff37677..6ea262aa1 100644
--- a/dashboard/src/components/chat/ProviderConfigDialog.vue
+++ b/dashboard/src/components/chat/ProviderConfigDialog.vue
@@ -1,80 +1,161 @@
 <template>
-  <v-dialog v-model="dialog" :max-width="isMobile ? undefined : '1400'" :fullscreen="isMobile" scrollable>
-    <v-card class="provider-config-dialog" :class="{ 'mobile-dialog': isMobile }">
+  <v-dialog
+    v-model="dialog"
+    :max-width="isMobile ? undefined : '1400'"
+    :fullscreen="isMobile"
+    scrollable
+  >
+    <v-card
+      class="provider-config-dialog"
+      :class="{ 'mobile-dialog': isMobile }"
+    >
       <v-card-title class="d-flex align-center justify-space-between pa-4 pb-0">
         <div class="d-flex align-center ga-2">
           <span class="text-h2 font-weight-bold">{{ tm('title') }}</span>
         </div>
-        <v-btn icon variant="text" @click="closeDialog">
+        <v-btn
+          icon
+          variant="text"
+          @click="closeDialog"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
 
-      <v-card-text class="pa-4 pt-0" :class="{ 'mobile-content': isMobile }"
-        :style="isMobile ? {} : { height: 'calc(100vh - 200px); max-height: 800px;' }">
-        <div :class="isMobile ? 'mobile-layout' : 'd-flex'" :style="isMobile ? {} : { height: '100%' }">
+      <v-card-text
+        class="pa-4 pt-0"
+        :class="{ 'mobile-content': isMobile }"
+        :style="isMobile ? {} : { height: 'calc(100vh - 200px); max-height: 800px;' }"
+      >
+        <div
+          :class="isMobile ? 'mobile-layout' : 'd-flex'"
+          :style="isMobile ? {} : { height: '100%' }"
+        >
           <!-- 左侧：Provider Sources 列表 -->
-          <div class="provider-sources-column" :class="{ 'mobile-sources': isMobile }"
-            :style="isMobile ? {} : { width: '320px', minWidth: '320px', borderRight: '1px solid rgba(var(--v-border-color), var(--v-border-opacity))', overflowY: 'auto' }">
-            <ProviderSourcesPanel :displayed-provider-sources="displayedProviderSources"
-              :selected-provider-source="selectedProviderSource" :available-source-types="availableSourceTypes" :tm="tm"
-              :resolve-source-icon="resolveSourceIcon" :get-source-display-name="getSourceDisplayName"
-              @add-provider-source="addProviderSource" @select-provider-source="selectProviderSource"
-              @delete-provider-source="deleteProviderSource" />
+          <div
+            class="provider-sources-column"
+            :class="{ 'mobile-sources': isMobile }"
+            :style="isMobile ? {} : { width: '320px', minWidth: '320px', borderRight: '1px solid rgba(var(--v-border-color), var(--v-border-opacity))', overflowY: 'auto' }"
+          >
+            <ProviderSourcesPanel
+              :displayed-provider-sources="displayedProviderSources"
+              :selected-provider-source="selectedProviderSource"
+              :available-source-types="availableSourceTypes"
+              :tm="tm"
+              :resolve-source-icon="resolveSourceIcon"
+              :get-source-display-name="getSourceDisplayName"
+              @add-provider-source="addProviderSource"
+              @select-provider-source="selectProviderSource"
+              @delete-provider-source="deleteProviderSource"
+            />
           </div>
 
           <!-- 右侧：配置和模型 -->
-          <div class="provider-config-column" :class="{ 'mobile-config': isMobile }"
-            :style="isMobile ? {} : { flex: 1, overflowY: 'auto', minWidth: 0 }">
-            <div v-if="selectedProviderSource" class="pa-4">
+          <div
+            class="provider-config-column"
+            :class="{ 'mobile-config': isMobile }"
+            :style="isMobile ? {} : { flex: 1, overflowY: 'auto', minWidth: 0 }"
+          >
+            <div
+              v-if="selectedProviderSource"
+              class="pa-4"
+            >
               <!-- Provider Source 配置 -->
               <div class="mb-4">
                 <div class="d-flex align-center justify-space-between mb-3">
                   <div>
-                    <div class="text-h5 font-weight-bold">{{ selectedProviderSource.id }}</div>
-                    <div class="text-caption text-medium-emphasis">{{ selectedProviderSource.api_base || 'N/A' }}</div>
+                    <div class="text-h5 font-weight-bold">
+                      {{ selectedProviderSource.id }}
+                    </div>
+                    <div class="text-caption text-medium-emphasis">
+                      {{ selectedProviderSource.api_base || 'N/A' }}
+                    </div>
                   </div>
-                  <v-btn color="success" prepend-icon="mdi-check" :loading="savingSource" :disabled="!isSourceModified"
-                    @click="saveProviderSource" variant="flat">
+                  <v-btn
+                    color="success"
+                    prepend-icon="mdi-check"
+                    :loading="savingSource"
+                    :disabled="!isSourceModified"
+                    variant="flat"
+                    @click="saveProviderSource"
+                  >
                     {{ tm('providerSources.save') }}
                   </v-btn>
                 </div>
 
                 <!-- 基础配置 -->
                 <div class="mb-4">
-                  <AstrBotConfig v-if="basicSourceConfig" :iterable="basicSourceConfig" :metadata="configSchema"
-                    metadataKey="provider" :is-editing="true" />
+                  <AstrBotConfig
+                    v-if="basicSourceConfig"
+                    :iterable="basicSourceConfig"
+                    :metadata="configSchema"
+                    metadata-key="provider"
+                    :is-editing="true"
+                  />
                 </div>
 
                 <!-- 高级配置 -->
-                <v-expansion-panels variant="accordion" class="mb-4">
-                  <v-expansion-panel elevation="0" class="border rounded-lg">
+                <v-expansion-panels
+                  variant="accordion"
+                  class="mb-4"
+                >
+                  <v-expansion-panel
+                    elevation="0"
+                    class="border rounded-lg"
+                  >
                     <v-expansion-panel-title>
                       <span class="font-weight-medium">{{ tm('providerSources.advancedConfig') }}</span>
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
-                      <AstrBotConfig v-if="advancedSourceConfig" :iterable="advancedSourceConfig"
-                        :metadata="configSchema" metadataKey="provider" :is-editing="true" />
+                      <AstrBotConfig
+                        v-if="advancedSourceConfig"
+                        :iterable="advancedSourceConfig"
+                        :metadata="configSchema"
+                        metadata-key="provider"
+                        :is-editing="true"
+                      />
                     </v-expansion-panel-text>
                   </v-expansion-panel>
                 </v-expansion-panels>
 
                 <!-- 模型配置 -->
-                <ProviderModelsPanel :entries="filteredMergedModelEntries" :available-count="availableModels.length"
-                  v-model:model-search="modelSearch" :loading-models="loadingModels"
-                  :is-source-modified="isSourceModified" :supports-image-input="supportsImageInput"
-                  :supports-tool-call="supportsToolCall" :supports-reasoning="supportsReasoning"
-                  :format-context-limit="formatContextLimit" :testing-providers="testingProviders" :tm="tm"
-                  @fetch-models="fetchAvailableModels" @open-manual-model="openManualModelDialog"
-                  @open-provider-edit="openProviderEdit" @toggle-provider-enable="toggleProviderEnable"
-                  @test-provider="testProvider" @delete-provider="deleteProvider"
-                  @add-model-provider="addModelProvider" />
+                <ProviderModelsPanel
+                  v-model:model-search="modelSearch"
+                  :entries="filteredMergedModelEntries"
+                  :available-count="availableModels.length"
+                  :loading-models="loadingModels"
+                  :is-source-modified="isSourceModified"
+                  :supports-image-input="supportsImageInput"
+                  :supports-tool-call="supportsToolCall"
+                  :supports-reasoning="supportsReasoning"
+                  :format-context-limit="formatContextLimit"
+                  :testing-providers="testingProviders"
+                  :tm="tm"
+                  @fetch-models="fetchAvailableModels"
+                  @open-manual-model="openManualModelDialog"
+                  @open-provider-edit="openProviderEdit"
+                  @toggle-provider-enable="toggleProviderEnable"
+                  @test-provider="testProvider"
+                  @delete-provider="deleteProvider"
+                  @add-model-provider="addModelProvider"
+                />
               </div>
             </div>
-            <div v-else class="d-flex align-center justify-center" style="height: 100%;">
+            <div
+              v-else
+              class="d-flex align-center justify-center"
+              style="height: 100%;"
+            >
               <div class="text-center text-medium-emphasis">
-                <v-icon size="64" color="grey-lighten-1">mdi-cursor-default-click</v-icon>
-                <p class="mt-4 text-h6">{{ tm('providerSources.selectHint') }}</p>
+                <v-icon
+                  size="64"
+                  color="grey-lighten-1"
+                >
+                  mdi-cursor-default-click
+                </v-icon>
+                <p class="mt-4 text-h6">
+                  {{ tm('providerSources.selectHint') }}
+                </p>
               </div>
             </div>
           </div>
@@ -83,38 +164,77 @@
     </v-card>
 
     <!-- 手动添加模型对话框 -->
-    <v-dialog v-model="showManualModelDialog" max-width="400">
+    <v-dialog
+      v-model="showManualModelDialog"
+      max-width="400"
+    >
       <v-card :title="tm('models.manualDialogTitle')">
         <v-card-text class="py-4">
-          <v-text-field v-model="manualModelId" :label="tm('models.manualDialogModelLabel')" flat variant="solo-filled"
-            autofocus clearable></v-text-field>
-          <v-text-field :model-value="manualProviderId" flat variant="solo-filled"
-            :label="tm('models.manualDialogPreviewLabel')" persistent-hint
-            :hint="tm('models.manualDialogPreviewHint')"></v-text-field>
+          <v-text-field
+            v-model="manualModelId"
+            :label="tm('models.manualDialogModelLabel')"
+            flat
+            variant="solo-filled"
+            autofocus
+            clearable
+          />
+          <v-text-field
+            :model-value="manualProviderId"
+            flat
+            variant="solo-filled"
+            :label="tm('models.manualDialogPreviewLabel')"
+            persistent-hint
+            :hint="tm('models.manualDialogPreviewHint')"
+          />
         </v-card-text>
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="showManualModelDialog = false">取消</v-btn>
-          <v-btn color="primary" @click="confirmManualModel">添加</v-btn>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="showManualModelDialog = false"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="primary"
+            @click="confirmManualModel"
+          >
+            添加
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- 已配置模型编辑对话框 -->
-    <v-dialog v-model="showProviderEditDialog" width="800">
+    <v-dialog
+      v-model="showProviderEditDialog"
+      width="800"
+    >
       <v-card :title="providerEditData?.id || tm('dialogs.config.editTitle')">
         <v-card-text class="py-4">
           <small style="color: gray;">不建议修改 ID，可能会导致指向该模型的相关配置（如默认模型、插件相关配置等）失效。</small>
-          <AstrBotConfig v-if="providerEditData" :iterable="providerEditData" :metadata="configSchema"
-            metadataKey="provider" :is-editing="true" />
+          <AstrBotConfig
+            v-if="providerEditData"
+            :iterable="providerEditData"
+            :metadata="configSchema"
+            metadata-key="provider"
+            :is-editing="true"
+          />
         </v-card-text>
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="showProviderEditDialog = false"
-            :disabled="savingProviders.includes(providerEditData?.id)">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="savingProviders.includes(providerEditData?.id)"
+            @click="showProviderEditDialog = false"
+          >
             {{ tm('dialogs.config.cancel') }}
           </v-btn>
-          <v-btn color="primary" @click="saveEditedProvider" :loading="savingProviders.includes(providerEditData?.id)">
+          <v-btn
+            color="primary"
+            :loading="savingProviders.includes(providerEditData?.id)"
+            @click="saveEditedProvider"
+          >
             {{ tm('dialogs.config.save') }}
           </v-btn>
         </v-card-actions>
diff --git a/dashboard/src/components/chat/ProviderModelMenu.vue b/dashboard/src/components/chat/ProviderModelMenu.vue
index 946fba3f8..cce568eb0 100644
--- a/dashboard/src/components/chat/ProviderModelMenu.vue
+++ b/dashboard/src/components/chat/ProviderModelMenu.vue
@@ -1,60 +1,117 @@
 <template>
-    <v-menu v-model="menuOpen" :close-on-content-click="false" location="top" @update:model-value="handleMenuToggle">
-        <template v-slot:activator="{ props: menuProps }">
-            <v-chip v-bind="menuProps" class="text-none provider-chip" variant="tonal" :size="chipSize">
-                <v-icon start size="14">mdi-creation</v-icon>
-                <span v-if="selectedProviderId">
-                    {{ selectedProviderId }}
-                </span>
-                <span v-else>Model</span>
-            </v-chip>
-        </template>
-        <v-card class="provider-menu-card" min-width="280" max-width="400">
-            <v-card-text class="pa-2">
-                <v-text-field
-                    v-model="searchQuery"
-                    placeholder="Search..."
-                    hide-details
-                    variant="plain"
-                    flat
-                    density="compact"
-                    prepend-inner-icon="mdi-magnify"
-                    class="ml-2 mb-2 mr-2"
-                    clearable
-                />
-                <v-list density="compact" nav class="provider-menu-list">
-                    <v-list-item v-for="provider in filteredProviders" :key="provider.id"
-                        :active="selectedProviderId === provider.id" @click="selectProvider(provider)" rounded="lg"
-                        class="provider-menu-item">
-                        <v-list-item-title class="text-body-2">{{ provider.id }}</v-list-item-title>
-                        <v-list-item-subtitle class="provider-subtitle">
-                            <span class="model-name">{{ provider.model }}</span>
-                            <span class="meta-icons">
-                                <v-tooltip text="支持图像输入" location="top" v-if="supportsImageInput(provider)">
-                                    <template v-slot:activator="{ props: tipProps }">
-                                        <v-icon v-bind="tipProps" size="12" color="grey">mdi-eye-outline</v-icon>
-                                    </template>
-                                </v-tooltip>
-                                <v-tooltip text="支持工具调用" location="top" v-if="supportsToolCall(provider)">
-                                    <template v-slot:activator="{ props: tipProps }">
-                                        <v-icon v-bind="tipProps" size="12" color="grey">mdi-wrench</v-icon>
-                                    </template>
-                                </v-tooltip>
-                                <v-tooltip text="支持推理" location="top" v-if="supportsReasoning(provider)">
-                                    <template v-slot:activator="{ props: tipProps }">
-                                        <v-icon v-bind="tipProps" size="12" color="grey">mdi-brain</v-icon>
-                                    </template>
-                                </v-tooltip>
-                            </span>
-                        </v-list-item-subtitle>
-                    </v-list-item>
-                </v-list>
-                <div v-if="providerConfigs.length === 0" class="empty-hint">
-                    No available models
-                </div>
-            </v-card-text>
-        </v-card>
-    </v-menu>
+  <v-menu
+    v-model="menuOpen"
+    :close-on-content-click="false"
+    location="top"
+    @update:model-value="handleMenuToggle"
+  >
+    <template #activator="{ props: menuProps }">
+      <v-chip
+        v-bind="menuProps"
+        class="text-none provider-chip"
+        variant="tonal"
+        :size="chipSize"
+      >
+        <v-icon
+          start
+          size="14"
+        >
+          mdi-creation
+        </v-icon>
+        <span v-if="selectedProviderId">
+          {{ selectedProviderId }}
+        </span>
+        <span v-else>Model</span>
+      </v-chip>
+    </template>
+    <v-card
+      class="provider-menu-card"
+      min-width="280"
+      max-width="400"
+    >
+      <v-card-text class="pa-2">
+        <v-text-field
+          v-model="searchQuery"
+          placeholder="Search..."
+          hide-details
+          variant="plain"
+          flat
+          density="compact"
+          prepend-inner-icon="mdi-magnify"
+          class="ml-2 mb-2 mr-2"
+          clearable
+        />
+        <v-list
+          density="compact"
+          nav
+          class="provider-menu-list"
+        >
+          <v-list-item
+            v-for="provider in filteredProviders"
+            :key="provider.id"
+            :active="selectedProviderId === provider.id"
+            rounded="lg"
+            class="provider-menu-item"
+            @click="selectProvider(provider)"
+          >
+            <v-list-item-title class="text-body-2">
+              {{ provider.id }}
+            </v-list-item-title>
+            <v-list-item-subtitle class="provider-subtitle">
+              <span class="model-name">{{ provider.model }}</span>
+              <span class="meta-icons">
+                <v-tooltip
+                  v-if="supportsImageInput(provider)"
+                  text="支持图像输入"
+                  location="top"
+                >
+                  <template #activator="{ props: tipProps }">
+                    <v-icon
+                      v-bind="tipProps"
+                      size="12"
+                      color="grey"
+                    >mdi-eye-outline</v-icon>
+                  </template>
+                </v-tooltip>
+                <v-tooltip
+                  v-if="supportsToolCall(provider)"
+                  text="支持工具调用"
+                  location="top"
+                >
+                  <template #activator="{ props: tipProps }">
+                    <v-icon
+                      v-bind="tipProps"
+                      size="12"
+                      color="grey"
+                    >mdi-wrench</v-icon>
+                  </template>
+                </v-tooltip>
+                <v-tooltip
+                  v-if="supportsReasoning(provider)"
+                  text="支持推理"
+                  location="top"
+                >
+                  <template #activator="{ props: tipProps }">
+                    <v-icon
+                      v-bind="tipProps"
+                      size="12"
+                      color="grey"
+                    >mdi-brain</v-icon>
+                  </template>
+                </v-tooltip>
+              </span>
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+        <div
+          v-if="providerConfigs.length === 0"
+          class="empty-hint"
+        >
+          No available models
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-menu>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/StandaloneChat.vue b/dashboard/src/components/chat/StandaloneChat.vue
index 7ea417103..754413efc 100644
--- a/dashboard/src/components/chat/StandaloneChat.vue
+++ b/dashboard/src/components/chat/StandaloneChat.vue
@@ -1,18 +1,25 @@
 <template>
-  <v-card class="standalone-chat-card" elevation="0" rounded="0">
+  <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"
+            :messages="messages"
+            :is-dark="isDark"
+            :is-streaming="isStreaming || isConvRunning"
+            @openImagePreview="openImagePreview"
           />
-          <div class="welcome-container fade-in" v-else>
+          <div
+            v-else
+            class="welcome-container fade-in"
+          >
             <div class="welcome-title">
               <span>Hello, I'm</span>
               <span class="bot-name">AstrBot ⭐</span>
@@ -24,13 +31,14 @@
 
           <!-- 输入区域 -->
           <ChatInput
+            ref="chatInputRef"
             v-model:prompt="prompt"
-            :stagedImagesUrl="stagedImagesUrl"
-            :stagedAudioUrl="stagedAudioUrl"
+            :staged-images-url="stagedImagesUrl"
+            :staged-audio-url="stagedAudioUrl"
             :disabled="isStreaming"
             :is-running="isStreaming || isConvRunning"
-            :enableStreaming="enableStreaming"
-            :isRecording="isRecording"
+            :enable-streaming="enableStreaming"
+            :is-recording="isRecording"
             :session-id="currSessionId || null"
             :current-session="getCurrentSession"
             :config-id="configId"
@@ -43,8 +51,6 @@
             @stopRecording="handleStopRecording"
             @pasteImage="handlePaste"
             @fileSelect="handleFileSelect"
-            @openLiveMode=""
-            ref="chatInputRef"
           />
         </div>
       </div>
@@ -52,8 +58,15 @@
   </v-card>
 
   <!-- 图片预览对话框 -->
-  <v-dialog v-model="imagePreviewDialog" max-width="90vw" max-height="90vh">
-    <v-card class="image-preview-card" elevation="8">
+  <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
@@ -63,7 +76,10 @@
         />
       </v-card-title>
       <v-card-text class="text-center pa-4">
-        <img :src="previewImageUrl" class="preview-image-large" />
+        <img
+          :src="previewImageUrl"
+          class="preview-image-large"
+        >
       </v-card-text>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/components/chat/WelcomeView.vue b/dashboard/src/components/chat/WelcomeView.vue
index 29565bd5c..c8fa47965 100644
--- a/dashboard/src/components/chat/WelcomeView.vue
+++ b/dashboard/src/components/chat/WelcomeView.vue
@@ -1,29 +1,32 @@
 <template>
-    <div class="welcome-container fade-in">
-        <div v-if="isLoading" class="loading-overlay-welcome">
-            <v-progress-circular
-                indeterminate
-                size="48"
-                width="4"
-                color="primary"
-            ></v-progress-circular>
-        </div>
-        <template v-else>
-            <div class="welcome-content">
-                <div class="welcome-title">
-                    <span class="bot-name-container">
-                        <span class="bot-name-text">
-                            Hello, I'm <span class="highlight-name">AstrBot</span>
-                        </span>
-                        <span class="bot-name-star">⭐</span>
-                    </span>
-                </div>
-            </div>
-            <div class="welcome-input">
-                <slot></slot>
-            </div>
-        </template>
+  <div class="welcome-container fade-in">
+    <div
+      v-if="isLoading"
+      class="loading-overlay-welcome"
+    >
+      <v-progress-circular
+        indeterminate
+        size="48"
+        width="4"
+        color="primary"
+      />
     </div>
+    <template v-else>
+      <div class="welcome-content">
+        <div class="welcome-title">
+          <span class="bot-name-container">
+            <span class="bot-name-text">
+              Hello, I'm <span class="highlight-name">AstrBot</span>
+            </span>
+            <span class="bot-name-star">⭐</span>
+          </span>
+        </div>
+      </div>
+      <div class="welcome-input">
+        <slot />
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/chat/message_list_comps/ActionRef.vue b/dashboard/src/components/chat/message_list_comps/ActionRef.vue
index ef096c2ed..596f779d0 100644
--- a/dashboard/src/components/chat/message_list_comps/ActionRef.vue
+++ b/dashboard/src/components/chat/message_list_comps/ActionRef.vue
@@ -1,20 +1,41 @@
 <template>
-    <div v-if="refs && refs.used && refs.used.length > 0" class="refs-container" @click="handleClick">
-        <div class="refs-avatars">
-            <div v-for="(ref, refIdx) in refs.used.slice(0, 3)" :key="refIdx" class="ref-avatar"
-                :style="{ zIndex: 3 - refIdx }">
-                <img v-if="ref.favicon" :src="ref.favicon" class="ref-favicon"
-                    @error="(e) => e.target.style.display = 'none'" />
-                <span v-else class="ref-initial">{{ getRefInitial(ref.title) }}</span>
-            </div>
-            <span v-if="refs.used.length > 3" class="refs-more">
-                +{{ refs.used.length - 3 }}
-            </span>
-            <span class="ml-2" style="color: gray;">
-                {{ tm('refs.sources') }}
-            </span>
-        </div>
+  <div
+    v-if="refs && refs.used && refs.used.length > 0"
+    class="refs-container"
+    @click="handleClick"
+  >
+    <div class="refs-avatars">
+      <div
+        v-for="(ref, refIdx) in refs.used.slice(0, 3)"
+        :key="refIdx"
+        class="ref-avatar"
+        :style="{ zIndex: 3 - refIdx }"
+      >
+        <img
+          v-if="ref.favicon"
+          :src="ref.favicon"
+          class="ref-favicon"
+          @error="(e) => e.target.style.display = 'none'"
+        >
+        <span
+          v-else
+          class="ref-initial"
+        >{{ getRefInitial(ref.title) }}</span>
+      </div>
+      <span
+        v-if="refs.used.length > 3"
+        class="refs-more"
+      >
+        +{{ refs.used.length - 3 }}
+      </span>
+      <span
+        class="ml-2"
+        style="color: gray;"
+      >
+        {{ tm('refs.sources') }}
+      </span>
     </div>
+  </div>
 </template>
 
 <script>
diff --git a/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
index 5ff9469a0..e9b689447 100644
--- a/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
@@ -1,24 +1,41 @@
 <template>
-    <div class="ipython-tool-block" :class="{ compact: !showHeader }">
-        <div v-if="displayExpanded" class="py-3 animate-fade-in">
-            <!-- Code Section -->
-            <div class="code-section">
-                <div v-if="shikiReady && code" class="code-highlighted"
-                    v-html="highlightedCode"></div>
-                <pre v-else class="code-fallback"
-                    :class="{ 'dark-theme': isDark }">{{ code || 'No code available' }}</pre>
-            </div>
+  <div
+    class="ipython-tool-block"
+    :class="{ compact: !showHeader }"
+  >
+    <div
+      v-if="displayExpanded"
+      class="py-3 animate-fade-in"
+    >
+      <!-- Code Section -->
+      <div class="code-section">
+        <div
+          v-if="shikiReady && code"
+          class="code-highlighted"
+          v-html="highlightedCode"
+        />
+        <pre
+          v-else
+          class="code-fallback"
+          :class="{ 'dark-theme': isDark }"
+        >{{ code || 'No code available' }}</pre>
+      </div>
 
-            <!-- Result Section -->
-            <div v-if="result" class="result-section">
-                <div class="result-label">
-                    {{ tm('ipython.output') }}:
-                </div>
-                <pre class="result-content"
-                    :class="{ 'dark-theme': isDark }">{{ formattedResult }}</pre>
-            </div>
+      <!-- Result Section -->
+      <div
+        v-if="result"
+        class="result-section"
+      >
+        <div class="result-label">
+          {{ tm('ipython.output') }}:
         </div>
+        <pre
+          class="result-content"
+          :class="{ 'dark-theme': isDark }"
+        >{{ formattedResult }}</pre>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue b/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
index fde69aabf..0eb963be2 100644
--- a/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
+++ b/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
@@ -1,118 +1,207 @@
 <template>
-    <template v-for="(renderPart, renderIndex) in getRenderParts(parts)" :key="renderPart.key">
-        <!-- Grouped Tool Calls (consecutive tool_call parts) -->
-        <div v-if="renderPart.type === 'tool_group'" class="tool-call-compact">
-            <transition-group name="tool-call-item" tag="div" class="tool-call-items">
-                <ToolCallItem v-for="(toolCall, tcIndex) in renderPart.toolCalls" :key="toolCall.id" :is-dark="isDark">
-                    <template #label="{ expanded }">
-                        <v-icon size="x-small" v-if="toolCall.name.includes('web_search') || toolCall.name.includes('tavily')">
-                            mdi-web
-                        </v-icon>
-                        <v-icon size="x-small" v-else-if="toolCall.name === 'astrbot_execute_shell'">
-                            mdi-console-line
-                        </v-icon>
-                        <v-icon size="x-small" v-else>
-                            mdi-wrench
-                        </v-icon>
-                        {{ tm('actions.toolCallUsed', { name: toolCall.name }) }}
-                        <span style="opacity: 0.6;">{{ toolCall.finished_ts ? formatDuration(toolCall.finished_ts -
-                            toolCall.ts) : getElapsedTime(toolCall.ts) }}</span>
-                        <v-icon size="x-small" class="tool-call-chevron" :class="{ rotated: expanded }">
-                            mdi-chevron-right
-                        </v-icon>
-                    </template>
-                    <template #details>
-                        <div class="tool-call-detail-row">
-                            <span class="detail-label">ID:</span>
-                            <code class="detail-value">{{ toolCall.id }}</code>
-                        </div>
-                        <div class="tool-call-detail-row">
-                            <span class="detail-label">Args:</span>
-                            <pre class="detail-value detail-json">{{ formatToolArgs(toolCall.args) }}</pre>
-                        </div>
-                        <div v-if="toolCall.result" class="tool-call-detail-row">
-                            <span class="detail-label">Result:</span>
-                            <pre
-                                class="detail-value detail-json detail-result">{{ formatToolResult(toolCall.result) }}</pre>
-                        </div>
-                    </template>
-                </ToolCallItem>
-            </transition-group>
-        </div>
-
-        <!-- iPython Tool Block -->
-        <ToolCallItem v-else-if="renderPart.type === 'ipython'" :is-dark="isDark" style="margin: 8px 0 4px;">
-            <template #label="{ expanded }">
-                <v-icon size="x-small">
-                    mdi-code-json
-                </v-icon>
-                <span class="ipython-label">{{ tm('actions.pythonCodeAnalysis') }}</span>
-                <span style="opacity: 0.6;">{{ renderPart.toolCall.finished_ts ?
-                    formatDuration(renderPart.toolCall.finished_ts -
-                        renderPart.toolCall.ts) : getElapsedTime(renderPart.toolCall.ts) }}</span>
-                <v-icon size="small" class="ipython-icon" :class="{ rotated: expanded }">
-                    mdi-chevron-right
-                </v-icon>
-            </template>
-            <template #details>
-                <IPythonToolBlock :tool-call="renderPart.toolCall" :is-dark="isDark" :show-header="false"
-                    :force-expanded="true" />
-            </template>
+  <template
+    v-for="(renderPart, renderIndex) in getRenderParts(parts)"
+    :key="renderPart.key"
+  >
+    <!-- Grouped Tool Calls (consecutive tool_call parts) -->
+    <div
+      v-if="renderPart.type === 'tool_group'"
+      class="tool-call-compact"
+    >
+      <transition-group
+        name="tool-call-item"
+        tag="div"
+        class="tool-call-items"
+      >
+        <ToolCallItem
+          v-for="(toolCall, tcIndex) in renderPart.toolCalls"
+          :key="toolCall.id"
+          :is-dark="isDark"
+        >
+          <template #label="{ expanded }">
+            <v-icon
+              v-if="toolCall.name.includes('web_search') || toolCall.name.includes('tavily')"
+              size="x-small"
+            >
+              mdi-web
+            </v-icon>
+            <v-icon
+              v-else-if="toolCall.name === 'astrbot_execute_shell'"
+              size="x-small"
+            >
+              mdi-console-line
+            </v-icon>
+            <v-icon
+              v-else
+              size="x-small"
+            >
+              mdi-wrench
+            </v-icon>
+            {{ tm('actions.toolCallUsed', { name: toolCall.name }) }}
+            <span style="opacity: 0.6;">{{ toolCall.finished_ts ? formatDuration(toolCall.finished_ts -
+              toolCall.ts) : getElapsedTime(toolCall.ts) }}</span>
+            <v-icon
+              size="x-small"
+              class="tool-call-chevron"
+              :class="{ rotated: expanded }"
+            >
+              mdi-chevron-right
+            </v-icon>
+          </template>
+          <template #details>
+            <div class="tool-call-detail-row">
+              <span class="detail-label">ID:</span>
+              <code class="detail-value">{{ toolCall.id }}</code>
+            </div>
+            <div class="tool-call-detail-row">
+              <span class="detail-label">Args:</span>
+              <pre class="detail-value detail-json">{{ formatToolArgs(toolCall.args) }}</pre>
+            </div>
+            <div
+              v-if="toolCall.result"
+              class="tool-call-detail-row"
+            >
+              <span class="detail-label">Result:</span>
+              <pre
+                class="detail-value detail-json detail-result"
+              >{{ formatToolResult(toolCall.result) }}</pre>
+            </div>
+          </template>
         </ToolCallItem>
+      </transition-group>
+    </div>
 
-        <!-- Text (Markdown) -->
-        <MarkdownRender
-            v-else-if="renderPart.part.type === 'plain' && renderPart.part.text && renderPart.part.text.trim()"
-            :key="`${renderPart.key}-${isDark ? 'dark' : 'light'}`"
-            custom-id="message-list" :custom-html-tags="['ref']" :content="renderPart.part.text" :typewriter="false"
-            class="markdown-content" :is-dark="isDark" />
+    <!-- iPython Tool Block -->
+    <ToolCallItem
+      v-else-if="renderPart.type === 'ipython'"
+      :is-dark="isDark"
+      style="margin: 8px 0 4px;"
+    >
+      <template #label="{ expanded }">
+        <v-icon size="x-small">
+          mdi-code-json
+        </v-icon>
+        <span class="ipython-label">{{ tm('actions.pythonCodeAnalysis') }}</span>
+        <span style="opacity: 0.6;">{{ renderPart.toolCall.finished_ts ?
+          formatDuration(renderPart.toolCall.finished_ts -
+            renderPart.toolCall.ts) : getElapsedTime(renderPart.toolCall.ts) }}</span>
+        <v-icon
+          size="small"
+          class="ipython-icon"
+          :class="{ rotated: expanded }"
+        >
+          mdi-chevron-right
+        </v-icon>
+      </template>
+      <template #details>
+        <IPythonToolBlock
+          :tool-call="renderPart.toolCall"
+          :is-dark="isDark"
+          :show-header="false"
+          :force-expanded="true"
+        />
+      </template>
+    </ToolCallItem>
 
-        <!-- Image -->
-        <div v-else-if="renderPart.part.type === 'image' && renderPart.part.embedded_url" class="embedded-images">
-            <div class="embedded-image">
-                <img :src="renderPart.part.embedded_url" class="bot-embedded-image"
-                    @click="emitOpenImage(renderPart.part.embedded_url)" />
-            </div>
-        </div>
+    <!-- Text (Markdown) -->
+    <MarkdownRender
+      v-else-if="renderPart.part.type === 'plain' && renderPart.part.text && renderPart.part.text.trim()"
+      :key="`${renderPart.key}-${isDark ? 'dark' : 'light'}`"
+      custom-id="message-list"
+      :custom-html-tags="['ref']"
+      :content="renderPart.part.text"
+      :typewriter="false"
+      class="markdown-content"
+      :is-dark="isDark"
+    />
 
-        <!-- Audio -->
-        <div v-else-if="renderPart.part.type === 'record' && renderPart.part.embedded_url" class="embedded-audio">
-            <audio controls class="audio-player">
-                <source :src="renderPart.part.embedded_url" type="audio/wav">
-                {{ t('messages.errors.browser.audioNotSupported') }}
-            </audio>
-        </div>
+    <!-- Image -->
+    <div
+      v-else-if="renderPart.part.type === 'image' && renderPart.part.embedded_url"
+      class="embedded-images"
+    >
+      <div class="embedded-image">
+        <img
+          :src="renderPart.part.embedded_url"
+          class="bot-embedded-image"
+          @click="emitOpenImage(renderPart.part.embedded_url)"
+        >
+      </div>
+    </div>
 
-        <!-- Files -->
-        <div v-else-if="renderPart.part.type === 'file' && renderPart.part.embedded_file" class="embedded-files">
-            <div class="embedded-file">
-                <a v-if="renderPart.part.embedded_file.url" :href="renderPart.part.embedded_file.url"
-                    :download="renderPart.part.embedded_file.filename" class="file-link" :class="{ 'is-dark': isDark }"
-                    :style="isDark ? {
-                        backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                        borderColor: 'rgba(255, 255, 255, 0.1)',
-                        color: 'var(--v-theme-secondary)'
-                    } : {}">
-                    <v-icon size="small" class="file-icon"
-                        :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}">mdi-file-document-outline</v-icon>
-                    <span class="file-name">{{ renderPart.part.embedded_file.filename }}</span>
-                </a>
-                <a v-else @click="emitDownloadFile(renderPart.part.embedded_file)" class="file-link file-link-download"
-                    :class="{ 'is-dark': isDark }" :style="isDark ? {
-                        backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                        borderColor: 'rgba(255, 255, 255, 0.1)',
-                        color: 'var(--v-theme-secondary)'
-                    } : {}">
-                    <v-icon size="small" class="file-icon"
-                        :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}">mdi-file-document-outline</v-icon>
-                    <span class="file-name">{{ renderPart.part.embedded_file.filename }}</span>
-                    <v-icon v-if="downloadingFiles?.has(renderPart.part.embedded_file.attachment_id)" size="small"
-                        class="download-icon">mdi-loading mdi-spin</v-icon>
-                    <v-icon v-else size="small" class="download-icon">mdi-download</v-icon>
-                </a>
-            </div>
-        </div>
-    </template>
+    <!-- Audio -->
+    <div
+      v-else-if="renderPart.part.type === 'record' && renderPart.part.embedded_url"
+      class="embedded-audio"
+    >
+      <audio
+        controls
+        class="audio-player"
+      >
+        <source
+          :src="renderPart.part.embedded_url"
+          type="audio/wav"
+        >
+        {{ t('messages.errors.browser.audioNotSupported') }}
+      </audio>
+    </div>
+
+    <!-- Files -->
+    <div
+      v-else-if="renderPart.part.type === 'file' && renderPart.part.embedded_file"
+      class="embedded-files"
+    >
+      <div class="embedded-file">
+        <a
+          v-if="renderPart.part.embedded_file.url"
+          :href="renderPart.part.embedded_file.url"
+          :download="renderPart.part.embedded_file.filename"
+          class="file-link"
+          :class="{ 'is-dark': isDark }"
+          :style="isDark ? {
+            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            borderColor: 'rgba(255, 255, 255, 0.1)',
+            color: 'var(--v-theme-secondary)'
+          } : {}"
+        >
+          <v-icon
+            size="small"
+            class="file-icon"
+            :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}"
+          >mdi-file-document-outline</v-icon>
+          <span class="file-name">{{ renderPart.part.embedded_file.filename }}</span>
+        </a>
+        <a
+          v-else
+          class="file-link file-link-download"
+          :class="{ 'is-dark': isDark }"
+          :style="isDark ? {
+            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            borderColor: 'rgba(255, 255, 255, 0.1)',
+            color: 'var(--v-theme-secondary)'
+          } : {}"
+          @click="emitDownloadFile(renderPart.part.embedded_file)"
+        >
+          <v-icon
+            size="small"
+            class="file-icon"
+            :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}"
+          >mdi-file-document-outline</v-icon>
+          <span class="file-name">{{ renderPart.part.embedded_file.filename }}</span>
+          <v-icon
+            v-if="downloadingFiles?.has(renderPart.part.embedded_file.attachment_id)"
+            size="small"
+            class="download-icon"
+          >mdi-loading mdi-spin</v-icon>
+          <v-icon
+            v-else
+            size="small"
+            class="download-icon"
+          >mdi-download</v-icon>
+        </a>
+      </div>
+    </div>
+  </template>
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
index 42e5971de..d90f9190a 100644
--- a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
@@ -1,18 +1,37 @@
 <template>
-    <div class="reasoning-block" :class="{ 'reasoning-block--dark': isDark }">
-        <div class="reasoning-header" @click="toggleExpanded">
-            <v-icon size="small" class="reasoning-icon" :class="{ 'rotate-90': isExpanded }">
-                mdi-chevron-right
-            </v-icon>
-            <span class="reasoning-title">
-                {{ tm('reasoning.thinking') }}
-            </span>
-        </div>
-        <div v-if="isExpanded" class="reasoning-content animate-fade-in">
-            <MarkdownRender :key="`reasoning-${isDark ? 'dark' : 'light'}`" :content="reasoning" class="reasoning-text markdown-content"
-                :typewriter="false" :is-dark="isDark" :style="isDark ? { opacity: '0.85' } : {}" />
-        </div>
+  <div
+    class="reasoning-block"
+    :class="{ 'reasoning-block--dark': isDark }"
+  >
+    <div
+      class="reasoning-header"
+      @click="toggleExpanded"
+    >
+      <v-icon
+        size="small"
+        class="reasoning-icon"
+        :class="{ 'rotate-90': isExpanded }"
+      >
+        mdi-chevron-right
+      </v-icon>
+      <span class="reasoning-title">
+        {{ tm('reasoning.thinking') }}
+      </span>
     </div>
+    <div
+      v-if="isExpanded"
+      class="reasoning-content animate-fade-in"
+    >
+      <MarkdownRender
+        :key="`reasoning-${isDark ? 'dark' : 'light'}`"
+        :content="reasoning"
+        class="reasoning-text markdown-content"
+        :typewriter="false"
+        :is-dark="isDark"
+        :style="isDark ? { opacity: '0.85' } : {}"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/chat/message_list_comps/RefNode.vue b/dashboard/src/components/chat/message_list_comps/RefNode.vue
index 2c41008ed..45a83a6ba 100644
--- a/dashboard/src/components/chat/message_list_comps/RefNode.vue
+++ b/dashboard/src/components/chat/message_list_comps/RefNode.vue
@@ -1,12 +1,28 @@
 <template>
-    <v-chip v-if="domain" class="ref-chip" size="x-small" variant="flat"
-        :style="chipStyle" :href="url"
-        target="_blank" clickable>
-        <v-icon start size="x-small" color>mdi-link-variant</v-icon>
-        <span>{{ domain }}</span>
-
-    </v-chip>
-    <span v-else class="ref-fallback" :style="fallbackStyle">{{ 'site' }}</span>
+  <v-chip
+    v-if="domain"
+    class="ref-chip"
+    size="x-small"
+    variant="flat"
+    :style="chipStyle"
+    :href="url"
+    target="_blank"
+    clickable
+  >
+    <v-icon
+      start
+      size="x-small"
+      color
+    >
+      mdi-link-variant
+    </v-icon>
+    <span>{{ domain }}</span>
+  </v-chip>
+  <span
+    v-else
+    class="ref-fallback"
+    :style="fallbackStyle"
+  >{{ 'site' }}</span>
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue b/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue
index c4dd37e09..c263b0fa1 100644
--- a/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue
+++ b/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue
@@ -1,28 +1,66 @@
 <template>
-    <transition name="slide-left">
-        <div v-if="isOpen" class="refs-sidebar">
-            <div class="sidebar-header">
-                <h3 class="sidebar-title">{{ tm('refs.title') }}</h3>
-                <v-btn icon="mdi-close" size="small" variant="text" @click="close"></v-btn>
-            </div>
+  <transition name="slide-left">
+    <div
+      v-if="isOpen"
+      class="refs-sidebar"
+    >
+      <div class="sidebar-header">
+        <h3 class="sidebar-title">
+          {{ tm('refs.title') }}
+        </h3>
+        <v-btn
+          icon="mdi-close"
+          size="small"
+          variant="text"
+          @click="close"
+        />
+      </div>
 
-            <div class="refs-list">
-                <div v-for="(ref, index) in refs?.used || []" :key="index" class="ref-item" @click="openLink(ref.url)">
-                    <div class="ref-item-icon">
-                        <img v-if="ref.favicon" :src="ref.favicon" class="ref-item-favicon"
-                            @error="(e) => e.target.style.display = 'none'" />
-                        <div v-else class="ref-item-initial">{{ getRefInitial(ref.title) }}</div>
-                    </div>
-                    <div class="ref-item-content">
-                        <div class="ref-item-title">{{ ref.title }}</div>
-                        <div class="ref-item-url">{{ formatUrl(ref.url) }}</div>
-                        <div v-if="ref.snippet" class="ref-item-snippet">{{ ref.snippet }}</div>
-                    </div>
-                    <v-icon size="small" class="ref-item-arrow">mdi-open-in-new</v-icon>
-                </div>
+      <div class="refs-list">
+        <div
+          v-for="(ref, index) in refs?.used || []"
+          :key="index"
+          class="ref-item"
+          @click="openLink(ref.url)"
+        >
+          <div class="ref-item-icon">
+            <img
+              v-if="ref.favicon"
+              :src="ref.favicon"
+              class="ref-item-favicon"
+              @error="(e) => e.target.style.display = 'none'"
+            >
+            <div
+              v-else
+              class="ref-item-initial"
+            >
+              {{ getRefInitial(ref.title) }}
             </div>
+          </div>
+          <div class="ref-item-content">
+            <div class="ref-item-title">
+              {{ ref.title }}
+            </div>
+            <div class="ref-item-url">
+              {{ formatUrl(ref.url) }}
+            </div>
+            <div
+              v-if="ref.snippet"
+              class="ref-item-snippet"
+            >
+              {{ ref.snippet }}
+            </div>
+          </div>
+          <v-icon
+            size="small"
+            class="ref-item-arrow"
+          >
+            mdi-open-in-new
+          </v-icon>
         </div>
-    </transition>
+      </div>
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue b/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
index 2429eed10..fe401419b 100644
--- a/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
+++ b/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
@@ -1,59 +1,99 @@
 <template>
-    <div class="tool-call-card" :class="{ 'is-dark': isDark, 'expanded': isExpanded }" :style="isDark ? {
-        backgroundColor: 'rgba(40, 60, 100, 0.4)',
-        borderColor: 'rgba(100, 140, 200, 0.4)'
-    } : {}">
-        <!-- Header -->
-        <div class="tool-call-header" :class="{ 'is-dark': isDark }" @click="toggleExpanded">
-            <v-icon size="small" class="tool-call-expand-icon" :class="{ 'expanded': isExpanded }">
-                mdi-chevron-right
-            </v-icon>
-            <v-icon size="small" class="tool-call-icon">mdi-wrench-outline</v-icon>
-            <div class="tool-call-info">
-                <span class="tool-call-name">{{ toolCall.name }}</span>
-            </div>
-            <span class="tool-call-status"
-                :class="{ 'status-running': !toolCall.finished_ts, 'status-finished': toolCall.finished_ts }">
-                <template v-if="toolCall.finished_ts">
-                    <v-icon size="x-small" class="status-icon">mdi-check-circle</v-icon>
-                    {{ formatDuration(toolCall.finished_ts - toolCall.ts) }}
-                </template>
-                <template v-else>
-                    <v-icon size="x-small" class="status-icon spinning">mdi-loading</v-icon>
-                    {{ elapsedTime }}
-                </template>
-            </span>
-        </div>
-
-        <!-- Details -->
-        <div v-if="isExpanded" class="tool-call-details" :style="isDark ? {
-            borderTopColor: 'rgba(100, 140, 200, 0.3)',
-            backgroundColor: 'rgba(30, 45, 70, 0.5)'
-        } : {}">
-            <!-- ID -->
-            <div class="tool-call-detail-row">
-                <span class="detail-label">ID:</span>
-                <code class="detail-value" :style="isDark ? { backgroundColor: 'transparent' } : {}">
-            {{ toolCall.id }}
-        </code>
-            </div>
-
-            <!-- Args -->
-            <div class="tool-call-detail-row">
-                <span class="detail-label">Args:</span>
-                <pre class="detail-value detail-json" :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
-                    JSON.stringify(toolCall.args, null, 2) }}</pre>
-            </div>
-
-            <!-- Result -->
-            <div v-if="toolCall.result" class="tool-call-detail-row">
-                <span class="detail-label">Result:</span>
-                <pre class="detail-value detail-json detail-result"
-                    :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
-            formattedResult }}</pre>
-            </div>
-        </div>
+  <div
+    class="tool-call-card"
+    :class="{ 'is-dark': isDark, 'expanded': isExpanded }"
+    :style="isDark ? {
+      backgroundColor: 'rgba(40, 60, 100, 0.4)',
+      borderColor: 'rgba(100, 140, 200, 0.4)'
+    } : {}"
+  >
+    <!-- Header -->
+    <div
+      class="tool-call-header"
+      :class="{ 'is-dark': isDark }"
+      @click="toggleExpanded"
+    >
+      <v-icon
+        size="small"
+        class="tool-call-expand-icon"
+        :class="{ 'expanded': isExpanded }"
+      >
+        mdi-chevron-right
+      </v-icon>
+      <v-icon
+        size="small"
+        class="tool-call-icon"
+      >
+        mdi-wrench-outline
+      </v-icon>
+      <div class="tool-call-info">
+        <span class="tool-call-name">{{ toolCall.name }}</span>
+      </div>
+      <span
+        class="tool-call-status"
+        :class="{ 'status-running': !toolCall.finished_ts, 'status-finished': toolCall.finished_ts }"
+      >
+        <template v-if="toolCall.finished_ts">
+          <v-icon
+            size="x-small"
+            class="status-icon"
+          >mdi-check-circle</v-icon>
+          {{ formatDuration(toolCall.finished_ts - toolCall.ts) }}
+        </template>
+        <template v-else>
+          <v-icon
+            size="x-small"
+            class="status-icon spinning"
+          >mdi-loading</v-icon>
+          {{ elapsedTime }}
+        </template>
+      </span>
     </div>
+
+    <!-- Details -->
+    <div
+      v-if="isExpanded"
+      class="tool-call-details"
+      :style="isDark ? {
+        borderTopColor: 'rgba(100, 140, 200, 0.3)',
+        backgroundColor: 'rgba(30, 45, 70, 0.5)'
+      } : {}"
+    >
+      <!-- ID -->
+      <div class="tool-call-detail-row">
+        <span class="detail-label">ID:</span>
+        <code
+          class="detail-value"
+          :style="isDark ? { backgroundColor: 'transparent' } : {}"
+        >
+          {{ toolCall.id }}
+        </code>
+      </div>
+
+      <!-- Args -->
+      <div class="tool-call-detail-row">
+        <span class="detail-label">Args:</span>
+        <pre
+          class="detail-value detail-json"
+          :style="isDark ? { backgroundColor: 'transparent' } : {}"
+        >{{
+        JSON.stringify(toolCall.args, null, 2) }}</pre>
+      </div>
+
+      <!-- Result -->
+      <div
+        v-if="toolCall.result"
+        class="tool-call-detail-row"
+      >
+        <span class="detail-label">Result:</span>
+        <pre
+          class="detail-value detail-json detail-result"
+          :style="isDark ? { backgroundColor: 'transparent' } : {}"
+        >{{
+        formattedResult }}</pre>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/chat/message_list_comps/ToolCallItem.vue b/dashboard/src/components/chat/message_list_comps/ToolCallItem.vue
index f3755da8a..9f2fc6168 100644
--- a/dashboard/src/components/chat/message_list_comps/ToolCallItem.vue
+++ b/dashboard/src/components/chat/message_list_comps/ToolCallItem.vue
@@ -1,17 +1,28 @@
 <template>
-    <div class="tool-call-item">
-        <div class="tool-call-line" role="button" tabindex="0"
-            @click="toggleExpanded"
-            @keydown.enter="toggleExpanded"
-            @keydown.space.prevent="toggleExpanded">
-            <slot name="label" :expanded="isExpanded" />
-        </div>
-        <transition name="tool-call-fade">
-            <div v-if="isExpanded" class="tool-call-inline-details" :class="{ 'is-dark': isDark }">
-                <slot name="details" />
-            </div>
-        </transition>
+  <div class="tool-call-item">
+    <div
+      class="tool-call-line"
+      role="button"
+      tabindex="0"
+      @click="toggleExpanded"
+      @keydown.enter="toggleExpanded"
+      @keydown.space.prevent="toggleExpanded"
+    >
+      <slot
+        name="label"
+        :expanded="isExpanded"
+      />
     </div>
+    <transition name="tool-call-fade">
+      <div
+        v-if="isExpanded"
+        class="tool-call-inline-details"
+        :class="{ 'is-dark': isDark }"
+      >
+        <slot name="details" />
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue b/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue
index 88029a25a..3c55f8c79 100644
--- a/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue
+++ b/dashboard/src/components/config/AstrBotCoreConfigWrapper.vue
@@ -1,45 +1,75 @@
 <template>
-    <div :class="$vuetify.display.mobile ? '' : 'd-flex'">
-        <v-tabs v-model="tab" :direction="$vuetify.display.mobile ? 'horizontal' : 'vertical'"
-            :align-tabs="$vuetify.display.mobile ? 'left' : 'start'" color="deep-purple-accent-4" class="config-tabs">
-            <v-tab v-for="section in visibleSections" :key="section.key" :value="section.key"
-                style="font-weight: 1000; font-size: 15px">
-                {{ tm(section.value['name']) }}
-            </v-tab>
-        </v-tabs>
-        <v-tabs-window v-model="tab" class="config-tabs-window" :style="readonly ? 'pointer-events: none; opacity: 0.6;' : ''">
-            <v-tabs-window-item v-for="section in visibleSections" :key="section.key" :value="section.key">
-                <v-container fluid>
-                    <div v-for="(val2, key2, index2) in section.value['metadata']" :key="key2">
-                        <!-- Support both traditional and JSON selector metadata -->
-                        <AstrBotConfigV4
-                            :metadata="{ [key2]: section.value['metadata'][key2] }"
-                            :iterable="config_data"
-                            :metadataKey="key2"
-                            :search-keyword="searchKeyword"
-                        >
-                        </AstrBotConfigV4>
-                    </div>
-                </v-container>
-            </v-tabs-window-item>
+  <div :class="$vuetify.display.mobile ? '' : 'd-flex'">
+    <v-tabs
+      v-model="tab"
+      :direction="$vuetify.display.mobile ? 'horizontal' : 'vertical'"
+      :align-tabs="$vuetify.display.mobile ? 'left' : 'start'"
+      color="deep-purple-accent-4"
+      class="config-tabs"
+    >
+      <v-tab
+        v-for="section in visibleSections"
+        :key="section.key"
+        :value="section.key"
+        style="font-weight: 1000; font-size: 15px"
+      >
+        {{ tm(section.value['name']) }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-window
+      v-model="tab"
+      class="config-tabs-window"
+      :style="readonly ? 'pointer-events: none; opacity: 0.6;' : ''"
+    >
+      <v-tabs-window-item
+        v-for="section in visibleSections"
+        :key="section.key"
+        :value="section.key"
+      >
+        <v-container fluid>
+          <div
+            v-for="(val2, key2, index2) in section.value['metadata']"
+            :key="key2"
+          >
+            <!-- Support both traditional and JSON selector metadata -->
+            <AstrBotConfigV4
+              :metadata="{ [key2]: section.value['metadata'][key2] }"
+              :iterable="config_data"
+              :metadata-key="key2"
+              :search-keyword="searchKeyword"
+            />
+          </div>
+        </v-container>
+      </v-tabs-window-item>
 
 
-            <div style="margin-left: 16px; padding-bottom: 16px">
-                <small>{{ tm('help.helpPrefix') }}
-                    <a href="https://astrbot.app/" target="_blank">{{ tm('help.documentation') }}</a>
-                    {{ tm('help.helpMiddle') }}
-                    <a href="https://qm.qq.com/cgi-bin/qm/qr?k=EYGsuUTfe00_iOu9JTXS7_TEpMkXOvwv&jump_from=webapi&authKey=uUEMKCROfsseS+8IzqPjzV3y1tzy4AkykwTib2jNkOFdzezF9s9XknqnIaf3CDft"
-                        target="_blank">{{ tm('help.support') }}</a>{{ tm('help.helpSuffix') }}
-                </small>
-            </div>
-
-        </v-tabs-window>
-    </div>
-    <v-container v-if="visibleSections.length === 0" fluid class="px-0">
-        <v-alert type="info" variant="tonal">
-            {{ tm('search.noResult') }}
-        </v-alert>
-    </v-container>
+      <div style="margin-left: 16px; padding-bottom: 16px">
+        <small>{{ tm('help.helpPrefix') }}
+          <a
+            href="https://astrbot.app/"
+            target="_blank"
+          >{{ tm('help.documentation') }}</a>
+          {{ tm('help.helpMiddle') }}
+          <a
+            href="https://qm.qq.com/cgi-bin/qm/qr?k=EYGsuUTfe00_iOu9JTXS7_TEpMkXOvwv&jump_from=webapi&authKey=uUEMKCROfsseS+8IzqPjzV3y1tzy4AkykwTib2jNkOFdzezF9s9XknqnIaf3CDft"
+            target="_blank"
+          >{{ tm('help.support') }}</a>{{ tm('help.helpSuffix') }}
+        </small>
+      </div>
+    </v-tabs-window>
+  </div>
+  <v-container
+    v-if="visibleSections.length === 0"
+    fluid
+    class="px-0"
+  >
+    <v-alert
+      type="info"
+      variant="tonal"
+    >
+      {{ tm('search.noResult') }}
+    </v-alert>
+  </v-container>
 </template>
 
 <script>
diff --git a/dashboard/src/components/config/UnsavedChangesConfirmDialog.vue b/dashboard/src/components/config/UnsavedChangesConfirmDialog.vue
index f81f1167f..51ecde501 100644
--- a/dashboard/src/components/config/UnsavedChangesConfirmDialog.vue
+++ b/dashboard/src/components/config/UnsavedChangesConfirmDialog.vue
@@ -1,12 +1,22 @@
 <template>
-  <v-dialog v-model="isOpen" max-width="480" persistent>
+  <v-dialog
+    v-model="isOpen"
+    max-width="480"
+    persistent
+  >
     <v-card>
       <v-card-title class="dialog-title d-flex align-center justify-space-between">
         <span>{{ title }}</span>
-        <v-btn icon="mdi-close" variant="text" @click="handleClose"></v-btn>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          @click="handleClose"
+        />
       </v-card-title>
       <v-card-text>
-        <div class="message-text">{{ message }}</div>
+        <div class="message-text">
+          {{ message }}
+        </div>
         <div class="action-hints">
           <span class="hint-item">{{ confirmHint }}</span>
           <span class="hint-item">{{ cancelHint }}</span>
@@ -14,9 +24,20 @@
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="gray" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
-        <v-btn color="red" @click="handleConfirm" class="confirm-button">{{ t('core.common.dialog.confirmButton') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="gray"
+          @click="handleCancel"
+        >
+          {{ t('core.common.dialog.cancelButton') }}
+        </v-btn>
+        <v-btn
+          color="red"
+          class="confirm-button"
+          @click="handleConfirm"
+        >
+          {{ t('core.common.dialog.confirmButton') }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/components/extension/MarketPluginCard.vue b/dashboard/src/components/extension/MarketPluginCard.vue
index edae9227d..3f03fe3f9 100644
--- a/dashboard/src/components/extension/MarketPluginCard.vue
+++ b/dashboard/src/components/extension/MarketPluginCard.vue
@@ -81,7 +81,7 @@ const handleInstall = (plugin) => {
             border-radius: 8px;
             object-fit: cover;
           "
-        />
+        >
       </div>
 
       <div
@@ -108,23 +108,25 @@ const handleInstall = (plugin) => {
               plugin.display_name?.length
                 ? plugin.display_name
                 : showPluginFullName
-                ? plugin.name
-                : plugin.trimmedName
+                  ? plugin.name
+                  : plugin.trimmedName
             }}
           </span>
         </div>
 
-        <div class="d-flex align-center" style="gap: 4px; margin-bottom: 6px">
+        <div
+          class="d-flex align-center"
+          style="gap: 4px; margin-bottom: 6px"
+        >
           <v-icon
             icon="mdi-account"
             size="x-small"
             style="color: rgba(var(--v-theme-on-surface), 0.5)"
-          ></v-icon>
+          />
           <a
             v-if="plugin?.social_link"
             :href="plugin.social_link"
             target="_blank"
-            @click.stop
             class="text-subtitle-2 font-weight-medium"
             style="
               text-decoration: none;
@@ -133,6 +135,7 @@ const handleInstall = (plugin) => {
               overflow: hidden;
               text-overflow: ellipsis;
             "
+            @click.stop
           >
             {{ plugin.author }}
           </a>
@@ -156,7 +159,7 @@ const handleInstall = (plugin) => {
               icon="mdi-source-branch"
               size="x-small"
               style="margin-right: 2px"
-            ></v-icon>
+            />
             <span>{{ plugin.version }}</span>
           </div>
         </div>
@@ -186,7 +189,10 @@ const handleInstall = (plugin) => {
           />
         </div>
 
-        <div class="d-flex align-center" style="gap: 8px; margin-top: auto">
+        <div
+          class="d-flex align-center"
+          style="gap: 8px; margin-top: auto"
+        >
           <div
             v-if="plugin.stars !== undefined"
             class="d-flex align-center text-subtitle-2"
@@ -196,7 +202,7 @@ const handleInstall = (plugin) => {
               icon="mdi-star"
               size="x-small"
               style="margin-right: 2px"
-            ></v-icon>
+            />
             <span>{{ plugin.stars }}</span>
           </div>
           <div
@@ -208,7 +214,7 @@ const handleInstall = (plugin) => {
               icon="mdi-clock-outline"
               size="x-small"
               style="margin-right: 2px"
-            ></v-icon>
+            />
             <span>{{ new Date(plugin.updated_at).toLocaleString() }}</span>
           </div>
         </div>
@@ -229,8 +235,12 @@ const handleInstall = (plugin) => {
       >
         {{ tag === "danger" ? tm("tags.danger") : tag }}
       </v-chip>
-      <v-menu v-if="plugin.tags && plugin.tags.length > 2" open-on-hover offset-y>
-        <template v-slot:activator="{ props: menuProps }">
+      <v-menu
+        v-if="plugin.tags && plugin.tags.length > 2"
+        open-on-hover
+        offset-y
+      >
+        <template #activator="{ props: menuProps }">
           <v-chip
             v-bind="menuProps"
             color="grey"
@@ -242,14 +252,21 @@ const handleInstall = (plugin) => {
           </v-chip>
         </template>
         <v-list density="compact">
-          <v-list-item v-for="tag in plugin.tags.slice(2)" :key="tag">
-            <v-chip :color="tag === 'danger' ? 'error' : 'primary'" label size="small">
+          <v-list-item
+            v-for="tag in plugin.tags.slice(2)"
+            :key="tag"
+          >
+            <v-chip
+              :color="tag === 'danger' ? 'error' : 'primary'"
+              label
+              size="small"
+            >
               {{ tag === "danger" ? tm("tags.danger") : tag }}
             </v-chip>
           </v-list-item>
         </v-list>
       </v-menu>
-      <v-spacer></v-spacer>
+      <v-spacer />
       <v-btn
         v-if="plugin?.repo"
         color="secondary"
@@ -260,21 +277,31 @@ const handleInstall = (plugin) => {
         target="_blank"
         style="height: 32px"
       >
-        <v-icon icon="mdi-github" start size="small"></v-icon>
+        <v-icon
+          icon="mdi-github"
+          start
+          size="small"
+        />
         {{ tm("buttons.viewRepo") }}
       </v-btn>
       <v-btn
         v-if="!plugin?.installed"
         color="primary"
         size="small"
-        @click="handleInstall(plugin)"
         variant="flat"
         class="market-action-btn"
         style="height: 32px"
+        @click="handleInstall(plugin)"
       >
         {{ tm("buttons.install") }}
       </v-btn>
-      <v-chip v-else color="success" size="x-small" label style="height: 20px">
+      <v-chip
+        v-else
+        color="success"
+        size="x-small"
+        label
+        style="height: 20px"
+      >
         ✓ {{ tm("status.installed") }}
       </v-chip>
     </v-card-actions>
diff --git a/dashboard/src/components/extension/McpServersSection.vue b/dashboard/src/components/extension/McpServersSection.vue
index d24bcec58..0b2c84863 100644
--- a/dashboard/src/components/extension/McpServersSection.vue
+++ b/dashboard/src/components/extension/McpServersSection.vue
@@ -1,62 +1,130 @@
 <template>
   <div class="tools-page">
-    <v-container fluid class="pa-0" elevation="0">
+    <v-container
+      fluid
+      class="pa-0"
+      elevation="0"
+    >
       <!-- 页面标题 -->
       <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-8">
         <div>
-          <v-btn color="success" prepend-icon="mdi-plus" class="me-2" variant="tonal"
-            @click="showMcpServerDialog = true" >
+          <v-btn
+            color="success"
+            prepend-icon="mdi-plus"
+            class="me-2"
+            variant="tonal"
+            @click="showMcpServerDialog = true"
+          >
             {{ tm('mcpServers.buttons.add') }}
           </v-btn>
-          <v-btn color="success" prepend-icon="mdi-refresh" variant="tonal" @click="showSyncMcpServerDialog = true"
-            >
+          <v-btn
+            color="success"
+            prepend-icon="mdi-refresh"
+            variant="tonal"
+            @click="showSyncMcpServerDialog = true"
+          >
             {{ tm('mcpServers.buttons.sync') }}
           </v-btn>
         </div>
       </v-row>
 
       <!-- MCP 服务器部分 -->
-      <div v-if="mcpServers.length === 0" class="text-center pa-8">
-        <v-icon size="64" color="grey-lighten-1">mdi-server-off</v-icon>
-        <p class="text-grey mt-4">{{ tm('mcpServers.empty') }}</p>
+      <div
+        v-if="mcpServers.length === 0"
+        class="text-center pa-8"
+      >
+        <v-icon
+          size="64"
+          color="grey-lighten-1"
+        >
+          mdi-server-off
+        </v-icon>
+        <p class="text-grey mt-4">
+          {{ tm('mcpServers.empty') }}
+        </p>
       </div>
 
       <v-row v-else>
-        <v-col v-for="(server, index) in mcpServers || []" :key="index" cols="12" md="6" lg="4" xl="3">
-          <item-card style="background-color: rgb(var(--v-theme-mcpCardBg));" :item="server" title-field="name"
-            enabled-field="active" @toggle-enabled="updateServerStatus" @delete="deleteServer" @edit="editServer">
-            <template v-slot:item-details="{ item }">
+        <v-col
+          v-for="(server, index) in mcpServers || []"
+          :key="index"
+          cols="12"
+          md="6"
+          lg="4"
+          xl="3"
+        >
+          <item-card
+            style="background-color: rgb(var(--v-theme-mcpCardBg));"
+            :item="server"
+            title-field="name"
+            enabled-field="active"
+            @toggle-enabled="updateServerStatus"
+            @delete="deleteServer"
+            @edit="editServer"
+          >
+            <template #item-details="{ item }">
               <div class="d-flex align-center mb-2">
-                <v-icon size="small" color="grey" class="me-2">mdi-file-code</v-icon>
-                <span class="text-caption text-medium-emphasis text-truncate" :title="getServerConfigSummary(item)">
+                <v-icon
+                  size="small"
+                  color="grey"
+                  class="me-2"
+                >
+                  mdi-file-code
+                </v-icon>
+                <span
+                  class="text-caption text-medium-emphasis text-truncate"
+                  :title="getServerConfigSummary(item)"
+                >
                   {{ getServerConfigSummary(item) }}
                 </span>
               </div>
 
-              <div class="d-flex" style="gap: 8px;">
+              <div
+                class="d-flex"
+                style="gap: 8px;"
+              >
                 <div>
                   <div v-if="item.tools && item.tools.length > 0">
                     <div class="d-flex align-center mb-1">
-                      <v-icon size="small" color="grey" class="me-2">mdi-tools</v-icon>
+                      <v-icon
+                        size="small"
+                        color="grey"
+                        class="me-2"
+                      >
+                        mdi-tools
+                      </v-icon>
                       <v-dialog max-width="600px">
-                        <template v-slot:activator="{ props: listToolsProps }">
-                          <span class="text-caption text-medium-emphasis cursor-pointer" v-bind="listToolsProps"
-                            style="text-decoration: underline;">
+                        <template #activator="{ props: listToolsProps }">
+                          <span
+                            class="text-caption text-medium-emphasis cursor-pointer"
+                            v-bind="listToolsProps"
+                            style="text-decoration: underline;"
+                          >
                             {{ tm('mcpServers.status.availableTools', { count: item.tools.length }) }} ({{ item.tools.length }})
                           </span>
                         </template>
-                        <template v-slot:default="{ isActive }">
+                        <template #default="{ isActive }">
                           <v-card style="padding: 16px;">
                             <v-card-title class="d-flex align-center">
                               <span>{{ tm('mcpServers.status.availableTools') }}</span>
                             </v-card-title>
                             <v-card-text>
                               <ul>
-                                <li v-for="(tool, idx) in item.tools" :key="idx" style="margin: 8px 0px;">{{ tool }}</li>
+                                <li
+                                  v-for="(tool, idx) in item.tools"
+                                  :key="idx"
+                                  style="margin: 8px 0px;"
+                                >
+                                  {{ tool }}
+                                </li>
                               </ul>
                             </v-card-text>
                             <v-card-actions class="d-flex justify-end">
-                              <v-btn variant="text" color="primary" @click="isActive.value = false">
+                              <v-btn
+                                variant="text"
+                                color="primary"
+                                @click="isActive.value = false"
+                              >
                                 Close
                               </v-btn>
                             </v-card-actions>
@@ -65,13 +133,29 @@
                       </v-dialog>
                     </div>
                   </div>
-                  <div v-else class="text-caption text-medium-emphasis">
-                    <v-icon size="small" color="warning" class="me-1">mdi-alert-circle</v-icon>
+                  <div
+                    v-else
+                    class="text-caption text-medium-emphasis"
+                  >
+                    <v-icon
+                      size="small"
+                      color="warning"
+                      class="me-1"
+                    >
+                      mdi-alert-circle
+                    </v-icon>
                     {{ tm('mcpServers.status.noTools') }}
                   </div>
                 </div>
-                <div v-if="mcpServerUpdateLoaders[item.name]" class="text-caption text-medium-emphasis">
-                  <v-progress-circular indeterminate color="primary" size="16"></v-progress-circular>
+                <div
+                  v-if="mcpServerUpdateLoaders[item.name]"
+                  class="text-caption text-medium-emphasis"
+                >
+                  <v-progress-circular
+                    indeterminate
+                    color="primary"
+                    size="16"
+                  />
                 </div>
               </div>
             </template>
@@ -81,69 +165,129 @@
     </v-container>
 
     <!-- 添加/编辑 MCP 服务器对话框 -->
-    <v-dialog v-model="showMcpServerDialog" max-width="750px">
+    <v-dialog
+      v-model="showMcpServerDialog"
+      max-width="750px"
+    >
       <v-card>
         <v-card-title class="pa-4 pl-6">
-          <v-icon class="me-2">{{ isEditMode ? 'mdi-pencil' : 'mdi-plus' }}</v-icon>
+          <v-icon class="me-2">
+            {{ isEditMode ? 'mdi-pencil' : 'mdi-plus' }}
+          </v-icon>
           <span>{{ isEditMode ? tm('dialogs.addServer.editTitle') : tm('dialogs.addServer.title') }}</span>
         </v-card-title>
 
         <v-card-text class="py-4">
-          <v-form @submit.prevent="saveServer" ref="form">
-            <v-text-field v-model="currentServer.name" :label="tm('dialogs.addServer.fields.name')" variant="outlined"
-              :rules="[v => !!v || tm('dialogs.addServer.fields.nameRequired')]" required class="mb-3"></v-text-field>
+          <v-form
+            ref="form"
+            @submit.prevent="saveServer"
+          >
+            <v-text-field
+              v-model="currentServer.name"
+              :label="tm('dialogs.addServer.fields.name')"
+              variant="outlined"
+              :rules="[v => !!v || tm('dialogs.addServer.fields.nameRequired')]"
+              required
+              class="mb-3"
+            />
 
             <div class="mb-2 d-flex align-center">
               <span class="text-subtitle-1">{{ tm('dialogs.addServer.fields.config') }}</span>
-              <v-spacer></v-spacer>
-              <v-btn size="small" color="primary" variant="tonal" @click="setConfigTemplate('stdio')" class="me-1">
+              <v-spacer />
+              <v-btn
+                size="small"
+                color="primary"
+                variant="tonal"
+                class="me-1"
+                @click="setConfigTemplate('stdio')"
+              >
                 {{ tm('mcpServers.buttons.useTemplateStdio') }}
               </v-btn>
-              <v-btn size="small" color="primary" variant="tonal" @click="setConfigTemplate('streamable_http')"
-                class="me-1">
+              <v-btn
+                size="small"
+                color="primary"
+                variant="tonal"
+                class="me-1"
+                @click="setConfigTemplate('streamable_http')"
+              >
                 {{ tm('mcpServers.buttons.useTemplateStreamableHttp') }}
               </v-btn>
-              <v-btn size="small" color="primary" variant="tonal" @click="setConfigTemplate('sse')" class="me-1">
+              <v-btn
+                size="small"
+                color="primary"
+                variant="tonal"
+                class="me-1"
+                @click="setConfigTemplate('sse')"
+              >
                 {{ tm('mcpServers.buttons.useTemplateSse') }}
               </v-btn>
             </div>
 
             <small style="color: grey">*{{ tm('dialogs.addServer.tips.timeoutConfig') }}</small>
 
-            <div class="monaco-container" style="margin-top: 16px;">
-              <VueMonacoEditor v-model:value="serverConfigJson" theme="vs-dark" language="json" :options="{
-                minimap: {
-                  enabled: false
-                },
-                scrollBeyondLastLine: false,
-                automaticLayout: true,
-                lineNumbers: 'on',
-                roundedSelection: true,
-                tabSize: 2
-              }" @change="validateJson" />
+            <div
+              class="monaco-container"
+              style="margin-top: 16px;"
+            >
+              <VueMonacoEditor
+                v-model:value="serverConfigJson"
+                theme="vs-dark"
+                language="json"
+                :options="{
+                  minimap: {
+                    enabled: false
+                  },
+                  scrollBeyondLastLine: false,
+                  automaticLayout: true,
+                  lineNumbers: 'on',
+                  roundedSelection: true,
+                  tabSize: 2
+                }"
+                @change="validateJson"
+              />
             </div>
 
-            <div v-if="jsonError" class="mt-2 text-error">
-              <v-icon color="error" size="small" class="me-1">mdi-alert-circle</v-icon>
+            <div
+              v-if="jsonError"
+              class="mt-2 text-error"
+            >
+              <v-icon
+                color="error"
+                size="small"
+                class="me-1"
+              >
+                mdi-alert-circle
+              </v-icon>
               <span>{{ jsonError }}</span>
             </div>
-
           </v-form>
           <div style="margin-top: 8px;">
             <small>{{ addServerDialogMessage }}</small>
           </div>
-
         </v-card-text>
 
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="closeServerDialog" :disabled="loading">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeServerDialog"
+          >
             {{ tm('dialogs.addServer.buttons.cancel') }}
           </v-btn>
-          <v-btn variant="text" @click="testServerConnection" :disabled="loading">
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="testServerConnection"
+          >
             {{ tm('dialogs.addServer.buttons.testConnection') }}
           </v-btn>
-          <v-btn color="primary" @click="saveServer" :loading="loading" :disabled="!isServerFormValid">
+          <v-btn
+            color="primary"
+            :loading="loading"
+            :disabled="!isServerFormValid"
+            @click="saveServer"
+          >
             {{ tm('dialogs.addServer.buttons.save') }}
           </v-btn>
         </v-card-actions>
@@ -151,43 +295,82 @@
     </v-dialog>
 
     <!-- 同步 MCP 服务器对话框 -->
-    <v-dialog v-model="showSyncMcpServerDialog" max-width="500px" persistent>
+    <v-dialog
+      v-model="showSyncMcpServerDialog"
+      max-width="500px"
+      persistent
+    >
       <v-card>
         <v-card-title class="bg-primary text-white py-3">
           <span>同步外部平台 MCP 服务器</span>
         </v-card-title>
 
         <v-card-text class="py-4">
-          <v-select v-model="selectedMcpServerProvider" :items="mcpServerProviderList"
-            label="选择平台" variant="outlined" required></v-select>
+          <v-select
+            v-model="selectedMcpServerProvider"
+            :items="mcpServerProviderList"
+            label="选择平台"
+            variant="outlined"
+            required
+          />
           <div v-if="selectedMcpServerProvider === 'modelscope'">
-            <v-timeline align="start" side="end">
-              <v-timeline-item icon="mdi-numeric-1" icon-color="rgb(var(--v-theme-background))">
+            <v-timeline
+              align="start"
+              side="end"
+            >
+              <v-timeline-item
+                icon="mdi-numeric-1"
+                icon-color="rgb(var(--v-theme-background))"
+              >
                 <div>
-                  <div class="text-h4">发现 MCP 服务器</div>
+                  <div class="text-h4">
+                    发现 MCP 服务器
+                  </div>
                   <p class="mt-2">
-                    访问 <a href="https://www.modelscope.cn/mcp" target="_blank">ModelScope 平台</a> 浏览需要的 MCP 服务器。
+                    访问 <a
+                      href="https://www.modelscope.cn/mcp"
+                      target="_blank"
+                    >ModelScope 平台</a> 浏览需要的 MCP 服务器。
                   </p>
                 </div>
               </v-timeline-item>
 
-              <v-timeline-item icon="mdi-numeric-2" icon-color="rgb(var(--v-theme-background))">
+              <v-timeline-item
+                icon="mdi-numeric-2"
+                icon-color="rgb(var(--v-theme-background))"
+              >
                 <div>
-                  <div class="text-h4">获取访问令牌</div>
+                  <div class="text-h4">
+                    获取访问令牌
+                  </div>
                   <p class="mt-2">
-                    从<a href="https://modelscope.cn/my/myaccesstoken" target="_blank">账户设置</a>中获取个人访问令牌。
+                    从<a
+                      href="https://modelscope.cn/my/myaccesstoken"
+                      target="_blank"
+                    >账户设置</a>中获取个人访问令牌。
                   </p>
                 </div>
               </v-timeline-item>
 
-              <v-timeline-item icon="mdi-numeric-3" icon-color="rgb(var(--v-theme-background))">
+              <v-timeline-item
+                icon="mdi-numeric-3"
+                icon-color="rgb(var(--v-theme-background))"
+              >
                 <div>
-                  <div class="text-h4">输入您的访问令牌</div>
+                  <div class="text-h4">
+                    输入您的访问令牌
+                  </div>
                   <p class="mt-2">
                     输入您的访问令牌以同步 MCP 服务器。
                   </p>
-                  <v-text-field v-model="mcpProviderToken" type="password" variant="outlined"
-                    label="访问令牌" class="mt-2" hide-details/>
+                  <v-text-field
+                    v-model="mcpProviderToken"
+                    type="password"
+                    variant="outlined"
+                    label="访问令牌"
+                    class="mt-2"
+                    hide-details
+                  />
                 </div>
               </v-timeline-item>
             </v-timeline>
@@ -195,11 +378,20 @@
         </v-card-text>
 
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="showSyncMcpServerDialog = false" :disabled="loading">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="showSyncMcpServerDialog = false"
+          >
             {{ tm('dialogs.addServer.buttons.cancel') }}
           </v-btn>
-          <v-btn color="primary" @click="syncMcpServers" :loading="loading" :disabled="loading">
+          <v-btn
+            color="primary"
+            :loading="loading"
+            :disabled="loading"
+            @click="syncMcpServers"
+          >
             {{ tm('dialogs.addServer.buttons.sync') }}
           </v-btn>
         </v-card-actions>
@@ -207,7 +399,13 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack" location="top">
+    <v-snackbar
+      v-model="save_message_snack"
+      :timeout="3000"
+      elevation="24"
+      :color="save_message_success"
+      location="top"
+    >
       {{ save_message }}
     </v-snackbar>
   </div>
diff --git a/dashboard/src/components/extension/PluginSortControl.vue b/dashboard/src/components/extension/PluginSortControl.vue
index 4596424a7..87410066d 100644
--- a/dashboard/src/components/extension/PluginSortControl.vue
+++ b/dashboard/src/components/extension/PluginSortControl.vue
@@ -54,7 +54,9 @@ const toggleOrder = () => {
       @update:model-value="updateSortBy"
     >
       <template #prepend-inner>
-        <v-icon size="small">mdi-sort</v-icon>
+        <v-icon size="small">
+          mdi-sort
+        </v-icon>
       </template>
     </v-select>
 
@@ -65,10 +67,15 @@ const toggleOrder = () => {
       density="compact"
       @click="toggleOrder"
     >
-      <v-icon>{{
-        order === "desc" ? "mdi-arrow-down-thin" : "mdi-arrow-up-thin"
-      }}</v-icon>
-      <v-tooltip activator="parent" location="top">
+      <v-icon>
+        {{
+          order === "desc" ? "mdi-arrow-down-thin" : "mdi-arrow-up-thin"
+        }}
+      </v-icon>
+      <v-tooltip
+        activator="parent"
+        location="top"
+      >
         {{ order === "desc" ? descendingLabel : ascendingLabel }}
       </v-tooltip>
     </v-btn>
diff --git a/dashboard/src/components/extension/SkillsSection.vue b/dashboard/src/components/extension/SkillsSection.vue
index b46b4e296..afba3fe3b 100644
--- a/dashboard/src/components/extension/SkillsSection.vue
+++ b/dashboard/src/components/extension/SkillsSection.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="skills-page">
-    <v-container fluid class="pa-0" elevation="0">
+    <v-container
+      fluid
+      class="pa-0"
+      elevation="0"
+    >
       <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-4">
         <div>
           <v-btn
@@ -22,15 +26,30 @@
             {{ tm("skills.refresh") }}
           </v-btn>
         </div>
-        <v-btn-toggle v-model="mode" mandatory divided density="comfortable">
-          <v-btn value="local">{{ tm("skills.modeLocal") }}</v-btn>
-          <v-btn value="neo" :disabled="!neoEnabled">{{
-            tm("skills.modeNeo")
-          }}</v-btn>
+        <v-btn-toggle
+          v-model="mode"
+          mandatory
+          divided
+          density="comfortable"
+        >
+          <v-btn value="local">
+            {{ tm("skills.modeLocal") }}
+          </v-btn>
+          <v-btn
+            value="neo"
+            :disabled="!neoEnabled"
+          >
+            {{
+              tm("skills.modeNeo")
+            }}
+          </v-btn>
         </v-btn-toggle>
       </v-row>
 
-      <div v-if="mode === 'local'" class="px-2 pb-2 d-flex flex-column ga-2">
+      <div
+        v-if="mode === 'local'"
+        class="px-2 pb-2 d-flex flex-column ga-2"
+      >
         <small style="color: grey">{{ tm("skills.runtimeHint") }}</small>
         <v-alert
           v-if="runtime === 'sandbox' && !sandboxCache.ready"
@@ -43,7 +62,10 @@
         </v-alert>
       </div>
 
-      <div v-if="mode === 'neo' && !neoEnabled" class="px-3 pb-3">
+      <div
+        v-if="mode === 'neo' && !neoEnabled"
+        class="px-3 pb-3"
+      >
         <v-alert
           type="warning"
           variant="tonal"
@@ -59,15 +81,28 @@
           v-if="loading"
           indeterminate
           color="primary"
-        ></v-progress-linear>
+        />
 
-        <div v-else-if="skills.length === 0" class="text-center pa-8">
-          <v-icon size="64" color="grey-lighten-1">mdi-folder-open</v-icon>
-          <p class="text-grey mt-4">{{ tm("skills.empty") }}</p>
+        <div
+          v-else-if="skills.length === 0"
+          class="text-center pa-8"
+        >
+          <v-icon
+            size="64"
+            color="grey-lighten-1"
+          >
+            mdi-folder-open
+          </v-icon>
+          <p class="text-grey mt-4">
+            {{ tm("skills.empty") }}
+          </p>
           <small class="text-grey">{{ tm("skills.emptyHint") }}</small>
         </div>
 
-        <v-row v-else align="stretch">
+        <v-row
+          v-else
+          align="stretch"
+        >
           <v-col
             v-for="skill in skills"
             :key="skill.name"
@@ -100,12 +135,22 @@
                   <div
                     class="text-caption text-medium-emphasis skill-description"
                   >
-                    <v-icon size="small" class="me-1">mdi-text</v-icon>
+                    <v-icon
+                      size="small"
+                      class="me-1"
+                    >
+                      mdi-text
+                    </v-icon>
                     {{ item.description || tm("skills.noDescription") }}
                   </div>
                 </div>
                 <div class="text-caption text-medium-emphasis skill-path">
-                  <v-icon size="small" class="me-1">mdi-file-document</v-icon>
+                  <v-icon
+                    size="small"
+                    class="me-1"
+                  >
+                    mdi-file-document
+                  </v-icon>
                   {{ tm("skills.path") }}: {{ item.path }}
                 </div>
               </template>
@@ -117,8 +162,8 @@
                   rounded="xl"
                   :disabled="
                     itemLoading[item.name] ||
-                    false ||
-                    isSandboxPresetSkill(item)
+                      false ||
+                      isSandboxPresetSkill(item)
                   "
                   @click="downloadSkill(item)"
                 >
@@ -131,12 +176,17 @@
       </template>
 
       <template v-else-if="mode === 'neo' && neoEnabled">
-        <v-card class="mx-3 mb-4 pa-4 neo-filter-card" variant="outlined">
+        <v-card
+          class="mx-3 mb-4 pa-4 neo-filter-card"
+          variant="outlined"
+        >
           <div
             class="d-flex flex-wrap justify-space-between align-center ga-2 mb-3"
           >
             <div>
-              <div class="text-subtitle-1 font-weight-bold">Neo Skills</div>
+              <div class="text-subtitle-1 font-weight-bold">
+                Neo Skills
+              </div>
               <div class="text-caption text-medium-emphasis">
                 {{ tm("skills.neoFilterHint") }}
               </div>
@@ -152,7 +202,10 @@
           </div>
 
           <v-row class="ga-md-0 ga-2">
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="neoFilters.skill_key"
                 :label="tm('skills.neoSkillKey')"
@@ -162,7 +215,10 @@
                 variant="outlined"
               />
             </v-col>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-select
                 v-model="neoFilters.status"
                 :label="tm('skills.neoStatus')"
@@ -175,7 +231,10 @@
                 variant="outlined"
               />
             </v-col>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-select
                 v-model="neoFilters.stage"
                 :label="tm('skills.neoStage')"
@@ -195,24 +254,41 @@
           v-if="neoLoading"
           indeterminate
           color="primary"
-        ></v-progress-linear>
+        />
 
         <div class="mx-3 mb-3 d-flex flex-wrap ga-2">
-          <v-chip size="small" color="primary" variant="tonal"
-            >Candidates: {{ neoCandidates.length }}</v-chip
+          <v-chip
+            size="small"
+            color="primary"
+            variant="tonal"
           >
-          <v-chip size="small" color="indigo" variant="tonal"
-            >Releases: {{ neoReleases.length }}</v-chip
+            Candidates: {{ neoCandidates.length }}
+          </v-chip>
+          <v-chip
+            size="small"
+            color="indigo"
+            variant="tonal"
           >
-          <v-chip size="small" color="success" variant="tonal"
-            >Active: {{ activeReleaseCount }}</v-chip
+            Releases: {{ neoReleases.length }}
+          </v-chip>
+          <v-chip
+            size="small"
+            color="success"
+            variant="tonal"
           >
+            Active: {{ activeReleaseCount }}
+          </v-chip>
         </div>
 
-        <v-card class="mx-3 mb-4 neo-table-card" variant="outlined">
-          <v-card-title class="text-subtitle-1 font-weight-bold">{{
-            tm("skills.neoCandidates")
-          }}</v-card-title>
+        <v-card
+          class="mx-3 mb-4 neo-table-card"
+          variant="outlined"
+        >
+          <v-card-title class="text-subtitle-1 font-weight-bold">
+            {{
+              tm("skills.neoCandidates")
+            }}
+          </v-card-title>
           <v-data-table
             :headers="candidateHeaders"
             :items="neoCandidates"
@@ -282,10 +358,15 @@
           </v-data-table>
         </v-card>
 
-        <v-card class="mx-3 mb-4 neo-table-card" variant="outlined">
-          <v-card-title class="text-subtitle-1 font-weight-bold">{{
-            tm("skills.neoReleases")
-          }}</v-card-title>
+        <v-card
+          class="mx-3 mb-4 neo-table-card"
+          variant="outlined"
+        >
+          <v-card-title class="text-subtitle-1 font-weight-bold">
+            {{
+              tm("skills.neoReleases")
+            }}
+          </v-card-title>
           <v-data-table
             :headers="releaseHeaders"
             :items="neoReleases"
@@ -339,7 +420,11 @@
       </template>
     </v-container>
 
-    <v-dialog v-model="uploadDialog" max-width="880px" :persistent="uploading">
+    <v-dialog
+      v-model="uploadDialog"
+      max-width="880px"
+      :persistent="uploading"
+    >
       <v-card class="skills-upload-dialog">
         <v-card-title class="skills-upload-dialog__header px-6 pt-6 pb-2">
           <div class="skills-upload-dialog__heading">
@@ -364,26 +449,34 @@
           </p>
 
           <div class="skills-upload-structure-note">
-            <v-icon size="18">mdi-information-outline</v-icon>
+            <v-icon size="18">
+              mdi-information-outline
+            </v-icon>
             <span>{{ tm("skills.structureRequirement") }}</span>
           </div>
 
           <div class="skills-upload-capabilities">
             <div class="skills-upload-capability">
               <div class="skills-upload-capability__icon">
-                <v-icon size="18">mdi-layers-outline</v-icon>
+                <v-icon size="18">
+                  mdi-layers-outline
+                </v-icon>
               </div>
               <span>{{ tm("skills.abilityMultiple") }}</span>
             </div>
             <div class="skills-upload-capability">
               <div class="skills-upload-capability__icon">
-                <v-icon size="18">mdi-shield-check-outline</v-icon>
+                <v-icon size="18">
+                  mdi-shield-check-outline
+                </v-icon>
               </div>
               <span>{{ tm("skills.abilityValidate") }}</span>
             </div>
             <div class="skills-upload-capability">
               <div class="skills-upload-capability__icon">
-                <v-icon size="18">mdi-skip-next-circle-outline</v-icon>
+                <v-icon size="18">
+                  mdi-skip-next-circle-outline
+                </v-icon>
               </div>
               <span>{{ tm("skills.abilitySkip") }}</span>
             </div>
@@ -403,7 +496,9 @@
             @drop.prevent="handleUploadDrop"
           >
             <div class="skills-dropzone__icon">
-              <v-icon size="34">mdi-folder-zip-outline</v-icon>
+              <v-icon size="34">
+                mdi-folder-zip-outline
+              </v-icon>
             </div>
             <div class="text-h6 font-weight-medium">
               {{ tm("skills.dropzoneTitle") }}
@@ -421,10 +516,13 @@
               hidden
               accept=".zip"
               @change="handleUploadSelection"
-            />
+            >
           </div>
 
-          <div v-if="uploadItems.length > 0" class="skills-upload-summary">
+          <div
+            v-if="uploadItems.length > 0"
+            class="skills-upload-summary"
+          >
             <v-chip
               size="small"
               variant="flat"
@@ -479,7 +577,10 @@
             </v-chip>
           </div>
 
-          <div v-if="uploadItems.length > 0" class="skills-upload-list">
+          <div
+            v-if="uploadItems.length > 0"
+            class="skills-upload-list"
+          >
             <div class="skills-upload-list__header">
               <span>{{ tm("skills.fileListTitle") }}</span>
             </div>
@@ -489,7 +590,9 @@
               class="skills-upload-row"
             >
               <div class="skills-upload-row__meta">
-                <div class="skills-upload-row__name">{{ item.name }}</div>
+                <div class="skills-upload-row__name">
+                  {{ item.name }}
+                </div>
                 <div class="skills-upload-row__size">
                   {{ formatFileSize(item.size) }}
                 </div>
@@ -515,7 +618,10 @@
               </div>
             </div>
           </div>
-          <div v-else class="skills-upload-empty">
+          <div
+            v-else
+            class="skills-upload-empty"
+          >
             {{ tm("skills.fileListEmpty") }}
           </div>
         </v-card-text>
@@ -546,31 +652,51 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="deleteDialog" max-width="400px">
+    <v-dialog
+      v-model="deleteDialog"
+      max-width="400px"
+    >
       <v-card>
         <v-card-title>{{ tm("skills.deleteTitle") }}</v-card-title>
         <v-card-text>{{ tm("skills.deleteMessage") }}</v-card-text>
         <v-card-actions class="d-flex justify-end">
-          <v-btn variant="text" @click="deleteDialog = false">{{
-            tm("skills.cancel")
-          }}</v-btn>
-          <v-btn color="error" :loading="deleting" @click="deleteSkill">
+          <v-btn
+            variant="text"
+            @click="deleteDialog = false"
+          >
+            {{
+              tm("skills.cancel")
+            }}
+          </v-btn>
+          <v-btn
+            color="error"
+            :loading="deleting"
+            @click="deleteSkill"
+          >
             {{ t("core.common.itemCard.delete") }}
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="payloadDialog.show" max-width="820px">
+    <v-dialog
+      v-model="payloadDialog.show"
+      max-width="820px"
+    >
       <v-card>
         <v-card-title>{{ tm("skills.neoPayloadTitle") }}</v-card-title>
         <v-card-text>
           <pre class="payload-preview">{{ payloadDialog.content }}</pre>
         </v-card-text>
         <v-card-actions class="d-flex justify-end">
-          <v-btn variant="text" @click="payloadDialog.show = false">{{
-            tm("skills.cancel")
-          }}</v-btn>
+          <v-btn
+            variant="text"
+            @click="payloadDialog.show = false"
+          >
+            {{
+              tm("skills.cancel")
+            }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/dashboard/src/components/extension/componentPanel/components/CommandFilters.vue b/dashboard/src/components/extension/componentPanel/components/CommandFilters.vue
index 15a6be180..5c3fd74f6 100644
--- a/dashboard/src/components/extension/componentPanel/components/CommandFilters.vue
+++ b/dashboard/src/components/extension/componentPanel/components/CommandFilters.vue
@@ -58,49 +58,68 @@ const statusItems = [
 
 <template>
   <!-- 过滤器行 -->
-  <v-row class="mb-4" align="center">
-    <v-col cols="12" sm="6" md="3">
+  <v-row
+    class="mb-4"
+    align="center"
+  >
+    <v-col
+      cols="12"
+      sm="6"
+      md="3"
+    >
       <v-select
         :model-value="pluginFilter"
-        @update:model-value="emit('update:pluginFilter', $event)"
         :items="pluginItems"
         :label="tm('filters.byPlugin')"
         density="compact"
         variant="outlined"
         hide-details
+        @update:model-value="emit('update:pluginFilter', $event)"
       />
     </v-col>
-    <v-col cols="12" sm="6" md="2">
+    <v-col
+      cols="12"
+      sm="6"
+      md="2"
+    >
       <v-select
         :model-value="typeFilter"
-        @update:model-value="emit('update:typeFilter', $event)"
         :items="typeItems"
         :label="tm('filters.byType')"
         density="compact"
         variant="outlined"
         hide-details
+        @update:model-value="emit('update:typeFilter', $event)"
       />
     </v-col>
-    <v-col cols="12" sm="6" md="2">
+    <v-col
+      cols="12"
+      sm="6"
+      md="2"
+    >
       <v-select
         :model-value="permissionFilter"
-        @update:model-value="emit('update:permissionFilter', $event)"
         :items="permissionItems"
         :label="tm('filters.byPermission')"
         density="compact"
         variant="outlined"
         hide-details
+        @update:model-value="emit('update:permissionFilter', $event)"
       />
     </v-col>
-    <v-col cols="12" sm="6" md="2">
+    <v-col
+      cols="12"
+      sm="6"
+      md="2"
+    >
       <v-select
         :model-value="statusFilter"
-        @update:model-value="emit('update:statusFilter', $event)"
         :items="statusItems"
         :label="tm('filters.byStatus')"
         density="compact"
         variant="outlined"
         hide-details
+        @update:model-value="emit('update:statusFilter', $event)"
       />
     </v-col>
   </v-row>
@@ -110,7 +129,6 @@ const statusItems = [
     <div style="min-width: 200px; max-width: 350px; flex: 1; border: 1px solid #B9B9B9; border-radius: 16px;">
       <v-text-field
         :model-value="searchQuery"
-        @update:model-value="emit('update:searchQuery', normalizeTextInput($event))"
         density="compact"
         :label="tm('search.placeholder')"
         prepend-inner-icon="mdi-magnify"
@@ -119,25 +137,40 @@ const statusItems = [
         flat
         hide-details
         single-line
+        @update:model-value="emit('update:searchQuery', normalizeTextInput($event))"
       />
     </div>
     <div class="d-flex align-center ga-4">
-      <slot name="stats"></slot>
-      <v-divider vertical class="mx-1" style="height: 20px;" />
+      <slot name="stats" />
+      <v-divider
+        vertical
+        class="mx-1"
+        style="height: 20px;"
+      />
       <v-checkbox
         :model-value="effectiveShowSystemPlugins"
-        @update:model-value="emit('update:showSystemPlugins', !!$event)"
         :label="tm('filters.showSystemPlugins')"
         density="compact"
         hide-details
         :disabled="hasSystemPluginConflict"
         class="system-plugin-checkbox"
+        @update:model-value="emit('update:showSystemPlugins', !!$event)"
       >
-        <template v-slot:label>
+        <template #label>
           <span class="text-body-2">{{ tm('filters.showSystemPlugins') }}</span>
-          <v-tooltip v-if="hasSystemPluginConflict" location="top">
-            <template v-slot:activator="{ props: tooltipProps }">
-              <v-icon v-bind="tooltipProps" size="16" color="warning" class="ml-1">mdi-alert-circle</v-icon>
+          <v-tooltip
+            v-if="hasSystemPluginConflict"
+            location="top"
+          >
+            <template #activator="{ props: tooltipProps }">
+              <v-icon
+                v-bind="tooltipProps"
+                size="16"
+                color="warning"
+                class="ml-1"
+              >
+                mdi-alert-circle
+              </v-icon>
             </template>
             {{ tm('filters.systemPluginConflictHint') }}
           </v-tooltip>
diff --git a/dashboard/src/components/extension/componentPanel/components/CommandTable.vue b/dashboard/src/components/extension/componentPanel/components/CommandTable.vue
index 32eebb746..eb9c35025 100644
--- a/dashboard/src/components/extension/componentPanel/components/CommandTable.vue
+++ b/dashboard/src/components/extension/componentPanel/components/CommandTable.vue
@@ -102,7 +102,7 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
       :row-props="getRowProps"
       :loading="props.loading"
     >
-      <template v-slot:item.effective_command="{ item }">
+      <template #item.effective_command="{ item }">
         <div class="d-flex align-center py-2">
           <!-- 展开/折叠按钮（针对指令组） -->
           <v-btn
@@ -113,10 +113,15 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
             class="mr-1"
             @click.stop="emit('toggle-expand', item)"
           >
-            <v-icon size="18">{{ isGroupExpanded(item) ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
+            <v-icon size="18">
+              {{ isGroupExpanded(item) ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
+            </v-icon>
           </v-btn>
           <!-- 子指令缩进 -->
-          <div v-else-if="item.type === 'sub_command'" class="ml-6"></div>
+          <div
+            v-else-if="item.type === 'sub_command'"
+            class="ml-6"
+          />
           <div>
             <div class="text-subtitle-1 font-weight-medium">
               <code :class="{ 'sub-command-code': item.type === 'sub_command' }">{{ item.effective_command }}</code>
@@ -125,30 +130,40 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
         </div>
       </template>
 
-      <template v-slot:item.type="{ item }">
+      <template #item.type="{ item }">
         <v-chip
           :color="getTypeInfo(item.type).color"
           size="small"
           variant="tonal"
         >
-          <v-icon start size="14">{{ getTypeInfo(item.type).icon }}</v-icon>
+          <v-icon
+            start
+            size="14"
+          >
+            {{ getTypeInfo(item.type).icon }}
+          </v-icon>
           {{ getTypeInfo(item.type).text }}{{ item.is_group && item.sub_commands?.length > 0 ? `(${item.sub_commands.length})` : '' }}
         </v-chip>
       </template>
 
-      <template v-slot:item.plugin="{ item }">
-        <div class="text-body-2">{{ item.plugin_display_name || item.plugin }}</div>
+      <template #item.plugin="{ item }">
+        <div class="text-body-2">
+          {{ item.plugin_display_name || item.plugin }}
+        </div>
       </template>
 
-      <template v-slot:item.description="{ item }">
-        <div class="text-body-2 text-medium-emphasis" style="max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+      <template #item.description="{ item }">
+        <div
+          class="text-body-2 text-medium-emphasis"
+          style="max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+        >
           {{ item.description || '-' }}
         </div>
       </template>
 
-      <template v-slot:item.permission="{ item }">
+      <template #item.permission="{ item }">
         <v-menu location="bottom">
-          <template v-slot:activator="{ props }">
+          <template #activator="{ props }">
             <v-chip
               v-bind="props"
               :color="getPermissionColor(item.permission)"
@@ -157,21 +172,26 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
               link
             >
               {{ getPermissionLabel(item.permission) }}
-              <v-icon end size="14">mdi-chevron-down</v-icon>
+              <v-icon
+                end
+                size="14"
+              >
+                mdi-chevron-down
+              </v-icon>
             </v-chip>
           </template>
           <v-list density="compact">
             <v-list-item
               :value="'member'"
-              @click="$emit('update-permission', item, 'member')"
               :active="item.permission !== 'admin'"
+              @click="$emit('update-permission', item, 'member')"
             >
               <v-list-item-title>{{ tm('permission.everyone') }}</v-list-item-title>
             </v-list-item>
             <v-list-item
               :value="'admin'"
-              @click="$emit('update-permission', item, 'admin')"
               :active="item.permission === 'admin'"
+              @click="$emit('update-permission', item, 'admin')"
             >
               <v-list-item-title>{{ tm('permission.admin') }}</v-list-item-title>
             </v-list-item>
@@ -179,7 +199,7 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
         </v-menu>
       </template>
 
-      <template v-slot:item.enabled="{ item }">
+      <template #item.enabled="{ item }">
         <v-chip
           :color="getStatusInfo(item).color"
           size="small"
@@ -190,9 +210,13 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
         </v-chip>
       </template>
 
-      <template v-slot:item.actions="{ item }">
+      <template #item.actions="{ item }">
         <div class="d-flex align-center">
-          <v-btn-group density="default" variant="text" color="primary">
+          <v-btn-group
+            density="default"
+            variant="text"
+            color="primary"
+          >
             <v-btn
               v-if="!item.enabled"
               icon
@@ -200,8 +224,15 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
               color="success"
               @click="emit('toggle-command', item)"
             >
-              <v-icon size="22">mdi-play</v-icon>
-              <v-tooltip activator="parent" location="top">{{ tm('tooltips.enable') }}</v-tooltip>
+              <v-icon size="22">
+                mdi-play
+              </v-icon>
+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
+                {{ tm('tooltips.enable') }}
+              </v-tooltip>
             </v-btn>
             <v-btn
               v-else
@@ -210,28 +241,68 @@ const getRowProps = ({ item }: { item: CommandItem }) => {
               color="error"
               @click="emit('toggle-command', item)"
             >
-              <v-icon size="22">mdi-pause</v-icon>
-              <v-tooltip activator="parent" location="top">{{ tm('tooltips.disable') }}</v-tooltip>
+              <v-icon size="22">
+                mdi-pause
+              </v-icon>
+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
+                {{ tm('tooltips.disable') }}
+              </v-tooltip>
             </v-btn>
 
-            <v-btn icon size="small" color="warning" @click="emit('rename', item)">
-              <v-icon size="22">mdi-pencil</v-icon>
-              <v-tooltip activator="parent" location="top">{{ tm('tooltips.rename') }}</v-tooltip>
+            <v-btn
+              icon
+              size="small"
+              color="warning"
+              @click="emit('rename', item)"
+            >
+              <v-icon size="22">
+                mdi-pencil
+              </v-icon>
+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
+                {{ tm('tooltips.rename') }}
+              </v-tooltip>
             </v-btn>
 
-            <v-btn icon size="small" @click="emit('view-details', item)">
-              <v-icon size="22">mdi-information</v-icon>
-              <v-tooltip activator="parent" location="top">{{ tm('tooltips.viewDetails') }}</v-tooltip>
+            <v-btn
+              icon
+              size="small"
+              @click="emit('view-details', item)"
+            >
+              <v-icon size="22">
+                mdi-information
+              </v-icon>
+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
+                {{ tm('tooltips.viewDetails') }}
+              </v-tooltip>
             </v-btn>
           </v-btn-group>
         </div>
       </template>
 
-      <template v-slot:no-data>
+      <template #no-data>
         <div class="text-center pa-8">
-          <v-icon size="64" color="info" class="mb-4">mdi-console-line</v-icon>
-          <div class="text-h5 mb-2">{{ tm('empty.noCommands') }}</div>
-          <div class="text-body-1 mb-4">{{ tm('empty.noCommandsDesc') }}</div>
+          <v-icon
+            size="64"
+            color="info"
+            class="mb-4"
+          >
+            mdi-console-line
+          </v-icon>
+          <div class="text-h5 mb-2">
+            {{ tm('empty.noCommands') }}
+          </div>
+          <div class="text-body-1 mb-4">
+            {{ tm('empty.noCommandsDesc') }}
+          </div>
         </div>
       </template>
     </v-data-table>
diff --git a/dashboard/src/components/extension/componentPanel/components/DetailsDialog.vue b/dashboard/src/components/extension/componentPanel/components/DetailsDialog.vue
index 6d9188374..247031551 100644
--- a/dashboard/src/components/extension/componentPanel/components/DetailsDialog.vue
+++ b/dashboard/src/components/extension/componentPanel/components/DetailsDialog.vue
@@ -46,54 +46,86 @@ const getPermissionLabel = (permission: string): string => {
 </script>
 
 <template>
-  <v-dialog :model-value="show" @update:model-value="emit('update:show', $event)" max-width="500">
+  <v-dialog
+    :model-value="show"
+    max-width="500"
+    @update:model-value="emit('update:show', $event)"
+  >
     <v-card v-if="command">
-      <v-card-title class="text-h5">{{ tm('dialogs.details.title') }}</v-card-title>
+      <v-card-title class="text-h5">
+        {{ tm('dialogs.details.title') }}
+      </v-card-title>
       <v-card-text>
         <v-list density="compact">
           <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.type') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.type') }}
+            </v-list-item-title>
             <v-list-item-subtitle>
               <v-chip
                 :color="getTypeInfo(command.type).color"
                 size="small"
                 variant="tonal"
               >
-                <v-icon start size="14">{{ getTypeInfo(command.type).icon }}</v-icon>
+                <v-icon
+                  start
+                  size="14"
+                >
+                  {{ getTypeInfo(command.type).icon }}
+                </v-icon>
                 {{ getTypeInfo(command.type).text }}
               </v-chip>
             </v-list-item-subtitle>
           </v-list-item>
           <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.handler') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.handler') }}
+            </v-list-item-title>
             <v-list-item-subtitle><code>{{ command.handler_name }}</code></v-list-item-subtitle>
           </v-list-item>
           <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.module') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.module') }}
+            </v-list-item-title>
             <v-list-item-subtitle><code>{{ command.module_path }}</code></v-list-item-subtitle>
           </v-list-item>
           <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.originalCommand') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.originalCommand') }}
+            </v-list-item-title>
             <v-list-item-subtitle><code>{{ command.original_command }}</code></v-list-item-subtitle>
           </v-list-item>
           <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.effectiveCommand') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.effectiveCommand') }}
+            </v-list-item-title>
             <v-list-item-subtitle><code>{{ command.effective_command }}</code></v-list-item-subtitle>
           </v-list-item>
           <v-list-item v-if="command.parent_signature">
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.parentGroup') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.parentGroup') }}
+            </v-list-item-title>
             <v-list-item-subtitle><code>{{ command.parent_signature }}</code></v-list-item-subtitle>
           </v-list-item>
           <v-list-item v-if="command.aliases.length > 0">
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.aliases') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.aliases') }}
+            </v-list-item-title>
             <v-list-item-subtitle>
-              <v-chip v-for="alias in command.aliases" :key="alias" size="small" class="mr-1">
+              <v-chip
+                v-for="alias in command.aliases"
+                :key="alias"
+                size="small"
+                class="mr-1"
+              >
                 {{ alias }}
               </v-chip>
             </v-list-item-subtitle>
           </v-list-item>
           <v-list-item v-if="command.is_group && command.sub_commands?.length > 0">
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.subCommands') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.subCommands') }}
+            </v-list-item-title>
             <v-list-item-subtitle>
               <div class="d-flex flex-wrap ga-1 mt-1">
                 <v-chip 
@@ -108,24 +140,40 @@ const getPermissionLabel = (permission: string): string => {
             </v-list-item-subtitle>
           </v-list-item>
           <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.permission') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.permission') }}
+            </v-list-item-title>
             <v-list-item-subtitle>
-              <v-chip :color="getPermissionColor(command.permission)" size="small">
+              <v-chip
+                :color="getPermissionColor(command.permission)"
+                size="small"
+              >
                 {{ getPermissionLabel(command.permission) }}
               </v-chip>
             </v-list-item-subtitle>
           </v-list-item>
           <v-list-item v-if="command.has_conflict">
-            <v-list-item-title class="font-weight-bold">{{ tm('dialogs.details.conflictStatus') }}</v-list-item-title>
+            <v-list-item-title class="font-weight-bold">
+              {{ tm('dialogs.details.conflictStatus') }}
+            </v-list-item-title>
             <v-list-item-subtitle>
-              <v-chip color="warning" size="small">{{ tm('status.conflict') }}</v-chip>
+              <v-chip
+                color="warning"
+                size="small"
+              >
+                {{ tm('status.conflict') }}
+              </v-chip>
             </v-list-item-subtitle>
           </v-list-item>
         </v-list>
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="primary" variant="text" @click="emit('update:show', false)">
+        <v-btn
+          color="primary"
+          variant="text"
+          @click="emit('update:show', false)"
+        >
           {{ t('core.actions.close') }}
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/components/extension/componentPanel/components/RenameDialog.vue b/dashboard/src/components/extension/componentPanel/components/RenameDialog.vue
index bd88c02e4..39aa39544 100644
--- a/dashboard/src/components/extension/componentPanel/components/RenameDialog.vue
+++ b/dashboard/src/components/extension/componentPanel/components/RenameDialog.vue
@@ -57,21 +57,31 @@ watch(showAliasEditor, (open) => {
 </script>
 
 <template>
-  <v-dialog :model-value="show" @update:model-value="emit('update:show', $event)" max-width="500">
+  <v-dialog
+    :model-value="show"
+    max-width="500"
+    @update:model-value="emit('update:show', $event)"
+  >
     <v-card>
-      <v-card-title class="text-h5">{{ tm('dialogs.rename.title') }}</v-card-title>
+      <v-card-title class="text-h5">
+        {{ tm('dialogs.rename.title') }}
+      </v-card-title>
       <v-card-text>
         <v-text-field
           :model-value="newName"
-          @update:model-value="emit('update:newName', $event)"
           :label="tm('dialogs.rename.newName')"
           variant="outlined"
           density="compact"
           autofocus
           class="mb-2"
+          @update:model-value="emit('update:newName', $event)"
         />
 
-        <v-card variant="outlined" class="mt-2" elevation="0">
+        <v-card
+          variant="outlined"
+          class="mt-2"
+          elevation="0"
+        >
           <div
             class="d-flex align-center justify-space-between px-4 py-3"
             role="button"
@@ -80,22 +90,40 @@ watch(showAliasEditor, (open) => {
             @keydown.enter.prevent="showAliasEditor = !showAliasEditor"
             @keydown.space.prevent="showAliasEditor = !showAliasEditor"
           >
-            <div class="text-subtitle-1">{{ tm('dialogs.rename.aliases') }}</div>
-            <v-icon size="20">{{ showAliasEditor ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+            <div class="text-subtitle-1">
+              {{ tm('dialogs.rename.aliases') }}
+            </div>
+            <v-icon size="20">
+              {{ showAliasEditor ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+            </v-icon>
           </div>
           <v-divider v-if="showAliasEditor" />
           <v-slide-y-transition>
-            <div v-if="aliasEditorEverOpened" v-show="showAliasEditor" class="px-4 py-3">
-              <div v-for="(alias, index) in aliases" :key="index" class="d-flex align-center mb-2">
+            <div
+              v-if="aliasEditorEverOpened"
+              v-show="showAliasEditor"
+              class="px-4 py-3"
+            >
+              <div
+                v-for="(alias, index) in aliases"
+                :key="index"
+                class="d-flex align-center mb-2"
+              >
                 <v-text-field
                   :model-value="alias"
-                  @update:model-value="updateAlias(index, $event)"
                   variant="outlined"
                   density="compact"
                   hide-details
                   class="flex-grow-1 mr-2"
+                  @update:model-value="updateAlias(index, $event)"
+                />
+                <v-btn
+                  icon="mdi-delete"
+                  variant="text"
+                  color="error"
+                  density="compact"
+                  @click="removeAlias(index)"
                 />
-                <v-btn icon="mdi-delete" variant="text" color="error" density="compact" @click="removeAlias(index)" />
               </div>
               <v-btn
                 prepend-icon="mdi-plus"
@@ -114,7 +142,11 @@ watch(showAliasEditor, (open) => {
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="grey" variant="text" @click="emit('update:show', false)">
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="emit('update:show', false)"
+        >
           {{ tm('dialogs.rename.cancel') }}
         </v-btn>
         <v-btn
diff --git a/dashboard/src/components/extension/componentPanel/components/ToolTable.vue b/dashboard/src/components/extension/componentPanel/components/ToolTable.vue
index fb2d29b76..2d885338a 100644
--- a/dashboard/src/components/extension/componentPanel/components/ToolTable.vue
+++ b/dashboard/src/components/extension/componentPanel/components/ToolTable.vue
@@ -40,39 +40,71 @@ const isInternal = (tool: ToolItem) => tool.source === 'internal';
       :loading="props.loading"
     >
       <template #item.name="{ item }">
-        <div class="d-flex align-center py-2" :class="{ 'internal-tool-row': isInternal(item) }">
-          <v-icon :color="isInternal(item) ? 'grey' : 'primary'" class="mr-2" size="18">
+        <div
+          class="d-flex align-center py-2"
+          :class="{ 'internal-tool-row': isInternal(item) }"
+        >
+          <v-icon
+            :color="isInternal(item) ? 'grey' : 'primary'"
+            class="mr-2"
+            size="18"
+          >
             {{ isInternal(item) ? 'mdi-lock-outline' : (item.name.includes(':') ? 'mdi-server-network' : 'mdi-function-variant') }}
           </v-icon>
           <div>
-            <div class="text-subtitle-1 font-weight-medium">{{ item.name }}</div>
+            <div class="text-subtitle-1 font-weight-medium">
+              {{ item.name }}
+            </div>
           </div>
         </div>
       </template>
 
       <template #item.description="{ item }">
-        <div class="text-body-2 text-medium-emphasis" style="max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+        <div
+          class="text-body-2 text-medium-emphasis"
+          style="max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+        >
           {{ item.description || '-' }}
         </div>
       </template>
 
       <template #item.origin="{ item }">
-        <v-chip size="small" variant="tonal" color="info" class="text-caption font-weight-medium">
+        <v-chip
+          size="small"
+          variant="tonal"
+          color="info"
+          class="text-caption font-weight-medium"
+        >
           {{ item.origin || '-' }}
         </v-chip>
       </template>
 
       <template #item.origin_name="{ item }">
-        <div class="text-body-2 text-medium-emphasis" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+        <div
+          class="text-body-2 text-medium-emphasis"
+          style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+        >
           {{ item.origin_name || '-' }}
         </div>
       </template>
 
       <template #item.active="{ item }">
-        <v-chip v-if="isInternal(item)" color="grey" size="small" class="font-weight-medium" variant="tonal">
+        <v-chip
+          v-if="isInternal(item)"
+          color="grey"
+          size="small"
+          class="font-weight-medium"
+          variant="tonal"
+        >
           内置
         </v-chip>
-        <v-chip v-else :color="item.active ? 'success' : 'error'" size="small" class="font-weight-medium" :variant="item.active ? 'flat' : 'outlined'">
+        <v-chip
+          v-else
+          :color="item.active ? 'success' : 'error'"
+          size="small"
+          class="font-weight-medium"
+          :variant="item.active ? 'flat' : 'outlined'"
+        >
           {{ item.active ? tmCommand('status.enabled') : tmCommand('status.disabled') }}
         </v-chip>
       </template>
@@ -87,23 +119,47 @@ const isInternal = (tool: ToolItem) => tool.source === 'internal';
           inset
           @update:model-value="emit('toggle-tool', item)"
         />
-        <span v-else class="text-caption text-grey">—</span>
+        <span
+          v-else
+          class="text-caption text-grey"
+        >—</span>
       </template>
 
       <template #no-data>
         <div class="text-center pa-8">
-          <v-icon size="64" color="info" class="mb-4">mdi-function-variant</v-icon>
-          <div class="text-h5 mb-2">{{ tmTool('functionTools.empty') }}</div>
+          <v-icon
+            size="64"
+            color="info"
+            class="mb-4"
+          >
+            mdi-function-variant
+          </v-icon>
+          <div class="text-h5 mb-2">
+            {{ tmTool('functionTools.empty') }}
+          </div>
         </div>
       </template>
 
       <template #expanded-row="{ item }">
-        <td :colspan="toolHeaders.length + 1" class="pa-4">
+        <td
+          :colspan="toolHeaders.length + 1"
+          class="pa-4"
+        >
           <div class="d-flex align-start ga-4">
-            <v-icon size="20" color="primary">mdi-code-json</v-icon>
+            <v-icon
+              size="20"
+              color="primary"
+            >
+              mdi-code-json
+            </v-icon>
             <div class="flex-1">
-              <div class="text-subtitle-2 font-weight-medium mb-2">{{ tmTool('functionTools.parameters') }}</div>
-              <div v-if="parameterEntries(item).length === 0" class="text-caption text-medium-emphasis">
+              <div class="text-subtitle-2 font-weight-medium mb-2">
+                {{ tmTool('functionTools.parameters') }}
+              </div>
+              <div
+                v-if="parameterEntries(item).length === 0"
+                class="text-caption text-medium-emphasis"
+              >
                 {{ tmTool('functionTools.noParameters') }}
               </div>
               <v-table
@@ -113,20 +169,40 @@ const isInternal = (tool: ToolItem) => tool.source === 'internal';
               >
                 <thead>
                   <tr>
-                    <th class="text-left text-caption text-medium-emphasis">{{ tmTool('functionTools.table.paramName') }}</th>
-                    <th class="text-left text-caption text-medium-emphasis" style="width: 140px;">{{ tmTool('functionTools.table.type') }}</th>
-                    <th class="text-left text-caption text-medium-emphasis">{{ tmTool('functionTools.table.description') }}</th>
+                    <th class="text-left text-caption text-medium-emphasis">
+                      {{ tmTool('functionTools.table.paramName') }}
+                    </th>
+                    <th
+                      class="text-left text-caption text-medium-emphasis"
+                      style="width: 140px;"
+                    >
+                      {{ tmTool('functionTools.table.type') }}
+                    </th>
+                    <th class="text-left text-caption text-medium-emphasis">
+                      {{ tmTool('functionTools.table.description') }}
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="([paramName, param]) in parameterEntries(item)" :key="paramName">
-                    <td class="font-weight-medium text-body-2">{{ paramName }}</td>
+                  <tr
+                    v-for="([paramName, param]) in parameterEntries(item)"
+                    :key="paramName"
+                  >
+                    <td class="font-weight-medium text-body-2">
+                      {{ paramName }}
+                    </td>
                     <td class="text-body-2">
-                      <v-chip size="x-small" color="primary" class="text-caption">
+                      <v-chip
+                        size="x-small"
+                        color="primary"
+                        class="text-caption"
+                      >
                         {{ param?.type || '-' }}
                       </v-chip>
                     </td>
-                    <td class="text-body-2 text-medium-emphasis">{{ param?.description || '-' }}</td>
+                    <td class="text-body-2 text-medium-emphasis">
+                      {{ param?.description || '-' }}
+                    </td>
                   </tr>
                 </tbody>
               </v-table>
diff --git a/dashboard/src/components/extension/componentPanel/composables/useComponentData.ts b/dashboard/src/components/extension/componentPanel/composables/useComponentData.ts
index 291ba53c4..bcabee271 100644
--- a/dashboard/src/components/extension/componentPanel/composables/useComponentData.ts
+++ b/dashboard/src/components/extension/componentPanel/composables/useComponentData.ts
@@ -24,7 +24,7 @@ export function useComponentData() {
   /**
    * 显示 Toast 消息
    */
-  const toast = (message: string, color: string = 'success') => {
+  const toast = (message: string, color = 'success') => {
     snackbar.message = message;
     snackbar.color = color;
     snackbar.show = true;
diff --git a/dashboard/src/components/extension/componentPanel/index.vue b/dashboard/src/components/extension/componentPanel/index.vue
index 552e67476..50f2072bd 100644
--- a/dashboard/src/components/extension/componentPanel/index.vue
+++ b/dashboard/src/components/extension/componentPanel/index.vue
@@ -155,16 +155,35 @@ watch(viewMode, async (mode) => {
 <template>
   <v-row>
     <v-col cols="12">
-      <v-card variant="flat" style="background-color: transparent">
+      <v-card
+        variant="flat"
+        style="background-color: transparent"
+      >
         <v-card-text style="padding: 20px 12px; padding-top: 0px;">
           <div class="d-flex justify-space-between align-center mb-6 flex-wrap ga-3">
-            <v-btn-toggle v-model="viewMode" color="primary" variant="outlined" density="comfortable" mandatory>
+            <v-btn-toggle
+              v-model="viewMode"
+              color="primary"
+              variant="outlined"
+              density="comfortable"
+              mandatory
+            >
               <v-btn value="commands">
-                <v-icon size="18" class="mr-1">mdi-console-line</v-icon>
+                <v-icon
+                  size="18"
+                  class="mr-1"
+                >
+                  mdi-console-line
+                </v-icon>
                 {{ tm('type.command') }}
               </v-btn>
               <v-btn value="tools">
-                <v-icon size="18" class="mr-1">mdi-function-variant</v-icon>
+                <v-icon
+                  size="18"
+                  class="mr-1"
+                >
+                  mdi-function-variant
+                </v-icon>
                 {{ tmTool('functionTools.title') }}
               </v-btn>
             </v-btn-toggle>
@@ -185,30 +204,46 @@ watch(viewMode, async (mode) => {
           <div v-if="viewMode === 'commands'">
             <CommandFilters
               :plugin-filter="pluginFilter"
-              @update:plugin-filter="pluginFilter = $event"
               :type-filter="typeFilter"
-              @update:type-filter="typeFilter = $event"
               :permission-filter="permissionFilter"
-              @update:permission-filter="permissionFilter = $event"
               :status-filter="statusFilter"
-              @update:status-filter="statusFilter = $event"
               :show-system-plugins="showSystemPlugins"
-              @update:show-system-plugins="showSystemPlugins = $event"
               :search-query="searchQuery"
-              @update:search-query="searchQuery = $event"
               :available-plugins="availablePlugins"
               :has-system-plugin-conflict="hasSystemPluginConflict"
               :effective-show-system-plugins="effectiveShowSystemPlugins"
+              @update:plugin-filter="pluginFilter = $event"
+              @update:type-filter="typeFilter = $event"
+              @update:permission-filter="permissionFilter = $event"
+              @update:status-filter="statusFilter = $event"
+              @update:show-system-plugins="showSystemPlugins = $event"
+              @update:search-query="searchQuery = $event"
             >
               <template #stats>
                 <div class="d-flex align-center">
-                  <v-icon size="18" color="primary" class="mr-1">mdi-console-line</v-icon>
+                  <v-icon
+                    size="18"
+                    color="primary"
+                    class="mr-1"
+                  >
+                    mdi-console-line
+                  </v-icon>
                   <span class="text-body-2 text-medium-emphasis mr-1">{{ tm('summary.total') }}:</span>
                   <span class="text-body-1 font-weight-bold text-primary">{{ filteredCommands.length }}</span>
                 </div>
-                <v-divider vertical class="mx-1" style="height: 20px;" />
+                <v-divider
+                  vertical
+                  class="mx-1"
+                  style="height: 20px;"
+                />
                 <div class="d-flex align-center">
-                  <v-icon size="18" color="error" class="mr-1">mdi-close-circle-outline</v-icon>
+                  <v-icon
+                    size="18"
+                    color="error"
+                    class="mr-1"
+                  >
+                    mdi-close-circle-outline
+                  </v-icon>
                   <span class="text-body-2 text-medium-emphasis mr-1">{{ tm('summary.disabled') }}:</span>
                   <span class="text-body-1 font-weight-bold text-error">{{ summary.disabled }}</span>
                 </div>
@@ -223,8 +258,10 @@ watch(viewMode, async (mode) => {
               prominent
               border="start"
             >
-              <template v-slot:prepend>
-                <v-icon size="28">mdi-alert-circle</v-icon>
+              <template #prepend>
+                <v-icon size="28">
+                  mdi-alert-circle
+                </v-icon>
               </template>
               <v-alert-title class="text-subtitle-1 font-weight-bold">
                 {{ tm('conflictAlert.title') }}
@@ -233,7 +270,12 @@ watch(viewMode, async (mode) => {
                 {{ tm('conflictAlert.description', { count: summary.conflicts }) }}
               </div>
               <div class="text-body-2 mt-2">
-                <v-icon size="16" class="mr-1">mdi-lightbulb-outline</v-icon>
+                <v-icon
+                  size="16"
+                  class="mr-1"
+                >
+                  mdi-lightbulb-outline
+                </v-icon>
                 {{ tm('conflictAlert.hint') }}
               </div>
             </v-alert>
@@ -255,24 +297,40 @@ watch(viewMode, async (mode) => {
               <div style="min-width: 240px; max-width: 380px; flex: 1;">
                 <v-text-field
                   :model-value="toolSearch"
-                  @update:model-value="toolSearch = normalizeTextInput($event)"
                   prepend-inner-icon="mdi-magnify"
                   :label="tmTool('functionTools.search')"
                   variant="outlined"
                   density="compact"
                   hide-details
                   clearable
+                  @update:model-value="toolSearch = normalizeTextInput($event)"
                 />
               </div>
               <div class="d-flex align-center ga-2">
                 <div class="d-flex align-center">
-                  <v-icon size="18" color="primary" class="mr-1">mdi-function-variant</v-icon>
+                  <v-icon
+                    size="18"
+                    color="primary"
+                    class="mr-1"
+                  >
+                    mdi-function-variant
+                  </v-icon>
                   <span class="text-body-2 text-medium-emphasis mr-1">{{ tm('summary.total') }}:</span>
                   <span class="text-body-1 font-weight-bold text-primary">{{ filteredTools.length }}</span>
                 </div>
-                <v-divider vertical class="mx-1" style="height: 20px;" />
+                <v-divider
+                  vertical
+                  class="mx-1"
+                  style="height: 20px;"
+                />
                 <div class="d-flex align-center">
-                  <v-icon size="18" color="success" class="mr-1">mdi-check-circle-outline</v-icon>
+                  <v-icon
+                    size="18"
+                    color="success"
+                    class="mr-1"
+                  >
+                    mdi-check-circle-outline
+                  </v-icon>
                   <span class="text-body-2 text-medium-emphasis mr-1">{{ tm('status.enabled') }}:</span>
                   <span class="text-body-1 font-weight-bold text-success">{{ filteredTools.filter(t => t.active).length }}</span>
                 </div>
@@ -293,25 +351,30 @@ watch(viewMode, async (mode) => {
   <!-- 重命名对话框 -->
   <RenameDialog
     :show="renameDialog.show"
-    @update:show="renameDialog.show = $event"
     :new-name="renameDialog.newName"
-    @update:new-name="renameDialog.newName = $event"
     :aliases="renameDialog.aliases"
-    @update:aliases="renameDialog.aliases = $event"
     :command="renameDialog.command"
     :loading="renameDialog.loading"
+    @update:show="renameDialog.show = $event"
+    @update:new-name="renameDialog.newName = $event"
+    @update:aliases="renameDialog.aliases = $event"
     @confirm="handleConfirmRename"
   />
 
   <!-- 详情对话框 -->
   <DetailsDialog
     :show="detailsDialog.show"
-    @update:show="detailsDialog.show = $event"
     :command="detailsDialog.command"
+    @update:show="detailsDialog.show = $event"
   />
 
   <!-- Snackbar -->
-  <v-snackbar :timeout="2000" elevation="24" :color="snackbar.color" v-model="snackbar.show">
+  <v-snackbar
+    v-model="snackbar.show"
+    :timeout="2000"
+    elevation="24"
+    :color="snackbar.color"
+  >
     {{ snackbar.message }}
   </v-snackbar>
 </template>
diff --git a/dashboard/src/components/folder/BaseCreateFolderDialog.vue b/dashboard/src/components/folder/BaseCreateFolderDialog.vue
index 59075f06f..23e1181d5 100644
--- a/dashboard/src/components/folder/BaseCreateFolderDialog.vue
+++ b/dashboard/src/components/folder/BaseCreateFolderDialog.vue
@@ -1,31 +1,60 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="450px">
-        <v-card>
-            <v-card-title>
-                <v-icon class="mr-2">mdi-folder-plus</v-icon>
-                {{ labels.title }}
-            </v-card-title>
-            <v-card-text>
-                <v-form ref="form" v-model="formValid">
-                    <v-text-field v-model="formData.name" :label="mergedLabels.nameLabel"
-                        :rules="[(v: any) => !!v || mergedLabels.nameRequired]" variant="outlined"
-                        density="comfortable" autofocus class="mb-3" />
+  <v-dialog
+    v-model="showDialog"
+    max-width="450px"
+  >
+    <v-card>
+      <v-card-title>
+        <v-icon class="mr-2">
+          mdi-folder-plus
+        </v-icon>
+        {{ labels.title }}
+      </v-card-title>
+      <v-card-text>
+        <v-form
+          ref="form"
+          v-model="formValid"
+        >
+          <v-text-field
+            v-model="formData.name"
+            :label="mergedLabels.nameLabel"
+            :rules="[(v: any) => !!v || mergedLabels.nameRequired]"
+            variant="outlined"
+            density="comfortable"
+            autofocus
+            class="mb-3"
+          />
 
-                    <v-textarea v-model="formData.description" :label="labels.descriptionLabel" variant="outlined"
-                        rows="3" density="comfortable" hide-details />
-                </v-form>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer />
-                <v-btn variant="text" @click="closeDialog">
-                    {{ labels.cancelButton }}
-                </v-btn>
-                <v-btn color="primary" variant="flat" @click="submitForm" :loading="loading" :disabled="!formValid">
-                    {{ labels.createButton }}
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+          <v-textarea
+            v-model="formData.description"
+            :label="labels.descriptionLabel"
+            variant="outlined"
+            rows="3"
+            density="comfortable"
+            hide-details
+          />
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog"
+        >
+          {{ labels.cancelButton }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="loading"
+          :disabled="!formValid"
+          @click="submitForm"
+        >
+          {{ labels.createButton }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseFolderBreadcrumb.vue b/dashboard/src/components/folder/BaseFolderBreadcrumb.vue
index 037d0ff2f..2bec50e18 100644
--- a/dashboard/src/components/folder/BaseFolderBreadcrumb.vue
+++ b/dashboard/src/components/folder/BaseFolderBreadcrumb.vue
@@ -1,19 +1,38 @@
 <template>
-    <v-breadcrumbs :items="computedItems" class="base-folder-breadcrumb pa-0">
-        <template v-slot:prepend>
-            <v-icon size="small" class="mr-1">mdi-folder-outline</v-icon>
-        </template>
-        <template v-slot:item="{ item }">
-            <v-breadcrumbs-item :disabled="(item as any).disabled" @click="!(item as any).disabled && handleClick((item as any).folderId)"
-                :class="{ 'breadcrumb-link': !(item as any).disabled }">
-                <v-icon v-if="(item as any).isRoot" size="small" class="mr-1">mdi-home</v-icon>
-                {{ (item as any).title }}
-            </v-breadcrumbs-item>
-        </template>
-        <template v-slot:divider>
-            <v-icon size="small">mdi-chevron-right</v-icon>
-        </template>
-    </v-breadcrumbs>
+  <v-breadcrumbs
+    :items="computedItems"
+    class="base-folder-breadcrumb pa-0"
+  >
+    <template #prepend>
+      <v-icon
+        size="small"
+        class="mr-1"
+      >
+        mdi-folder-outline
+      </v-icon>
+    </template>
+    <template #item="{ item }">
+      <v-breadcrumbs-item
+        :disabled="(item as any).disabled"
+        :class="{ 'breadcrumb-link': !(item as any).disabled }"
+        @click="!(item as any).disabled && handleClick((item as any).folderId)"
+      >
+        <v-icon
+          v-if="(item as any).isRoot"
+          size="small"
+          class="mr-1"
+        >
+          mdi-home
+        </v-icon>
+        {{ (item as any).title }}
+      </v-breadcrumbs-item>
+    </template>
+    <template #divider>
+      <v-icon size="small">
+        mdi-chevron-right
+      </v-icon>
+    </template>
+  </v-breadcrumbs>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseFolderCard.vue b/dashboard/src/components/folder/BaseFolderCard.vue
index eddda9b62..f7323974b 100644
--- a/dashboard/src/components/folder/BaseFolderCard.vue
+++ b/dashboard/src/components/folder/BaseFolderCard.vue
@@ -1,48 +1,89 @@
 <template>
-    <v-card class="base-folder-card" :class="{ 'drag-over': isDragOver }" rounded="lg" @click="$emit('click')" @contextmenu.prevent="$emit('contextmenu', $event)"
-        elevation="1" hover @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
-        <v-card-text class="d-flex align-center pa-3">
-            <v-icon size="40" color="amber-darken-2" class="mr-3">mdi-folder</v-icon>
-            <div class="folder-info flex-grow-1 overflow-hidden">
-                <div class="text-subtitle-1 font-weight-medium text-truncate">{{ folder.name }}</div>
-                <div v-if="folder.description" class="text-body-2 text-medium-emphasis text-truncate">
-                    {{ folder.description }}
-                </div>
-            </div>
-            <v-menu offset-y>
-                <template v-slot:activator="{ props }">
-                    <v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
-                </template>
-                <v-list density="compact">
-                    <v-list-item @click.stop="$emit('open')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-open</v-icon>
-                        </template>
-                        <v-list-item-title>{{ labels.open }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('rename')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-pencil</v-icon>
-                        </template>
-                        <v-list-item-title>{{ labels.rename }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('move')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-move</v-icon>
-                        </template>
-                        <v-list-item-title>{{ labels.moveTo }}</v-list-item-title>
-                    </v-list-item>
-                    <v-divider class="my-1" />
-                    <v-list-item @click.stop="$emit('delete')" class="text-error">
-                        <template v-slot:prepend>
-                            <v-icon size="small" color="error">mdi-delete</v-icon>
-                        </template>
-                        <v-list-item-title>{{ labels.delete }}</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
-        </v-card-text>
-    </v-card>
+  <v-card
+    class="base-folder-card"
+    :class="{ 'drag-over': isDragOver }"
+    rounded="lg"
+    elevation="1"
+    hover
+    @click="$emit('click')"
+    @contextmenu.prevent="$emit('contextmenu', $event)"
+    @dragover.prevent="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <v-card-text class="d-flex align-center pa-3">
+      <v-icon
+        size="40"
+        color="amber-darken-2"
+        class="mr-3"
+      >
+        mdi-folder
+      </v-icon>
+      <div class="folder-info flex-grow-1 overflow-hidden">
+        <div class="text-subtitle-1 font-weight-medium text-truncate">
+          {{ folder.name }}
+        </div>
+        <div
+          v-if="folder.description"
+          class="text-body-2 text-medium-emphasis text-truncate"
+        >
+          {{ folder.description }}
+        </div>
+      </div>
+      <v-menu offset-y>
+        <template #activator="{ props }">
+          <v-btn
+            icon="mdi-dots-vertical"
+            variant="text"
+            size="small"
+            v-bind="props"
+            @click.stop
+          />
+        </template>
+        <v-list density="compact">
+          <v-list-item @click.stop="$emit('open')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-folder-open
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ labels.open }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click.stop="$emit('rename')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-pencil
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ labels.rename }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click.stop="$emit('move')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-folder-move
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ labels.moveTo }}</v-list-item-title>
+          </v-list-item>
+          <v-divider class="my-1" />
+          <v-list-item
+            class="text-error"
+            @click.stop="$emit('delete')"
+          >
+            <template #prepend>
+              <v-icon
+                size="small"
+                color="error"
+              >
+                mdi-delete
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ labels.delete }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseFolderItemSelector.vue b/dashboard/src/components/folder/BaseFolderItemSelector.vue
index 4b4b4f1c4..0a421b6a1 100644
--- a/dashboard/src/components/folder/BaseFolderItemSelector.vue
+++ b/dashboard/src/components/folder/BaseFolderItemSelector.vue
@@ -1,165 +1,318 @@
 <template>
-    <div class="folder-item-selector">
-        <!-- 触发按钮区域 -->
-        <div class="d-flex align-center justify-space-between">
-            <span v-if="!modelValue" style="color: rgb(var(--v-theme-primaryText));">
-                {{ labels.notSelected || '未选择' }}
-            </span>
-            <span v-else>
-                {{ displayValue }}
-            </span>
-            <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
-                {{ labels.buttonText || '选择...' }}
-            </v-btn>
-        </div>
-
-        <!-- 选择对话框 -->
-        <v-dialog v-model="dialog" max-width="1000px" min-width="800px">
-            <v-card class="selector-dialog-card">
-                <v-card-title class="dialog-title d-flex align-center py-4 px-5">
-                    <v-icon class="mr-3" color="primary">mdi-account-circle</v-icon>
-                    <span>{{ labels.dialogTitle || '选择项目' }}</span>
-                </v-card-title>
-
-                <v-divider />
-
-                <v-card-text class="pa-0" style="height: 600px; max-height: 80vh; overflow: hidden;">
-                    <div class="selector-layout">
-                        <!-- 左侧文件夹树 -->
-                        <div class="folder-sidebar">
-                            <div class="sidebar-header pa-3 pb-2">
-                                <span class="text-caption text-medium-emphasis font-weight-medium">
-                                    <v-icon size="small" class="mr-1">mdi-folder-multiple</v-icon>
-                                    文件夹
-                                </span>
-                            </div>
-                            <v-list density="compact" nav class="tree-list pa-2" bg-color="transparent">
-                                <!-- 根目录 -->
-                                <v-list-item :active="currentFolderId === null" @click="navigateToFolder(null)"
-                                    rounded="lg" class="mb-1 root-item">
-                                    <template v-slot:prepend>
-                                        <v-icon size="20" :color="currentFolderId === null ? 'primary' : ''">mdi-home</v-icon>
-                                    </template>
-                                    <v-list-item-title class="text-body-2">{{ labels.rootFolder || '根目录' }}</v-list-item-title>
-                                </v-list-item>
-
-                                <!-- 文件夹树 -->
-                                <template v-if="!treeLoading">
-                                    <BaseMoveTargetNode v-for="folder in folderTree" :key="folder.folder_id"
-                                        :folder="folder" :depth="0" :selected-folder-id="currentFolderId"
-                                        :disabled-folder-ids="[]" @select="navigateToFolder" />
-                                </template>
-
-                                <div v-if="treeLoading" class="text-center pa-4">
-                                    <v-progress-circular indeterminate size="20" color="primary" />
-                                </div>
-                            </v-list>
-                        </div>
-
-                        <!-- 右侧项目列表 -->
-                        <div class="items-panel">
-                            <!-- 面包屑导航 -->
-                            <div class="breadcrumb-bar px-4 py-3">
-                                <v-breadcrumbs :items="breadcrumbItems" density="compact" class="pa-0">
-                                    <template v-slot:item="{ item }">
-                                        <v-breadcrumbs-item :disabled="(item as any).disabled"
-                                            @click="!(item as any).disabled && navigateToFolder((item as any).folderId)"
-                                            :class="{ 'breadcrumb-link': !(item as any).disabled }">
-                                            <v-icon v-if="(item as any).isRoot" size="small"
-                                                class="mr-1">mdi-home</v-icon>
-                                            {{ item.title }}
-                                        </v-breadcrumbs-item>
-                                    </template>
-                                    <template v-slot:divider>
-                                        <v-icon size="small" color="grey">mdi-chevron-right</v-icon>
-                                    </template>
-                                </v-breadcrumbs>
-                            </div>
-
-                            <v-divider />
-
-                            <!-- 项目列表 -->
-                            <div class="items-list">
-                                <v-progress-linear v-if="itemsLoading" indeterminate
-                                    color="primary" height="2"></v-progress-linear>
-
-                                <!-- 子文件夹 -->
-                                <v-list v-if="!itemsLoading" lines="two" class="pa-3 items-content">
-                                    <template v-if="currentSubFolders.length > 0">
-                                        <div class="section-label text-caption text-medium-emphasis mb-2 px-2">子文件夹</div>
-                                        <v-list-item v-for="folder in currentSubFolders" :key="'folder-' + folder.folder_id"
-                                            @click="navigateToFolder(folder.folder_id)" rounded="lg" class="mb-1 folder-item">
-                                            <template v-slot:prepend>
-                                                <v-avatar size="36" color="amber-lighten-4" class="mr-3">
-                                                    <v-icon color="amber-darken-2" size="20">mdi-folder</v-icon>
-                                                </v-avatar>
-                                            </template>
-                                            <v-list-item-title class="font-weight-medium">{{ folder.name }}</v-list-item-title>
-                                            <template v-slot:append>
-                                                <v-icon size="20" color="grey">mdi-chevron-right</v-icon>
-                                            </template>
-                                        </v-list-item>
-                                    </template>
-
-                                    <!-- 项目列表 -->
-                                    <template v-if="currentItems.length > 0">
-                                        <div class="section-label text-caption text-medium-emphasis mb-2 px-2" :class="{ 'mt-4': currentSubFolders.length > 0 }">可选项目</div>
-                                        <v-list-item v-for="item in currentItems" :key="'item-' + getItemId(item)"
-                                            :value="getItemId(item)" @click="selectItem(item)"
-                                            :active="selectedItemId === getItemId(item)" rounded="lg" class="mb-1 persona-item"
-                                            :class="{ 'selected-item': selectedItemId === getItemId(item) }">
-                                            <template v-slot:prepend>
-                                                <v-avatar size="36" :color="selectedItemId === getItemId(item) ? 'primary-lighten-4' : 'grey-lighten-3'" class="mr-3">
-                                                    <v-icon :color="selectedItemId === getItemId(item) ? 'primary' : 'grey-darken-1'" size="20">mdi-account</v-icon>
-                                                </v-avatar>
-                                            </template>
-                                            <v-list-item-title class="font-weight-medium">{{ getItemName(item) }}</v-list-item-title>
-                                            <v-list-item-subtitle v-if="getItemDescription(item)" class="text-truncate">
-                                                {{ truncateText(getItemDescription(item), 80) }}
-                                            </v-list-item-subtitle>
-
-                                            <template v-slot:append>
-                                                <div class="d-flex align-center ga-1">
-                                                    <v-btn v-if="showEditButton && !isDefaultItem(item)"
-                                                        icon="mdi-pencil"
-                                                        size="small"
-                                                        variant="text"
-                                                        @click.stop="handleEditItem(item)"
-                                                        :title="labels.editButton || 'Edit'"
-                                                    />
-                                                    <v-icon v-if="selectedItemId === getItemId(item)"
-                                                        color="primary" size="22">mdi-check-circle</v-icon>
-                                                </div>
-                                            </template>
-                                        </v-list-item>
-                                    </template>
-
-                                    <!-- 空状态 -->
-                                    <div v-if="currentSubFolders.length === 0 && currentItems.length === 0"
-                                        class="empty-state text-center py-12">
-                                        <v-icon size="64" color="grey-lighten-2">mdi-folder-open-outline</v-icon>
-                                        <p class="text-grey mt-4 text-body-2">{{ labels.emptyFolder || labels.noItems || '此文件夹为空' }}</p>
-                                    </div>
-                                </v-list>
-                            </div>
-                        </div>
-                    </div>
-                </v-card-text>
-
-                <v-card-actions class="pa-4">
-                    <v-btn v-if="showCreateButton" variant="text" color="primary" prepend-icon="mdi-plus"
-                        @click="$emit('create')">
-                        {{ labels.createButton || '新建' }}
-                    </v-btn>
-                    <v-spacer></v-spacer>
-                    <v-btn variant="text" @click="cancelSelection">{{ labels.cancelButton || '取消' }}</v-btn>
-                    <v-btn color="primary" @click="confirmSelection" :disabled="!selectedItemId">
-                        {{ labels.confirmButton || '确认' }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
+  <div class="folder-item-selector">
+    <!-- 触发按钮区域 -->
+    <div class="d-flex align-center justify-space-between">
+      <span
+        v-if="!modelValue"
+        style="color: rgb(var(--v-theme-primaryText));"
+      >
+        {{ labels.notSelected || '未选择' }}
+      </span>
+      <span v-else>
+        {{ displayValue }}
+      </span>
+      <v-btn
+        size="small"
+        color="primary"
+        variant="tonal"
+        @click="openDialog"
+      >
+        {{ labels.buttonText || '选择...' }}
+      </v-btn>
     </div>
+
+    <!-- 选择对话框 -->
+    <v-dialog
+      v-model="dialog"
+      max-width="1000px"
+      min-width="800px"
+    >
+      <v-card class="selector-dialog-card">
+        <v-card-title class="dialog-title d-flex align-center py-4 px-5">
+          <v-icon
+            class="mr-3"
+            color="primary"
+          >
+            mdi-account-circle
+          </v-icon>
+          <span>{{ labels.dialogTitle || '选择项目' }}</span>
+        </v-card-title>
+
+        <v-divider />
+
+        <v-card-text
+          class="pa-0"
+          style="height: 600px; max-height: 80vh; overflow: hidden;"
+        >
+          <div class="selector-layout">
+            <!-- 左侧文件夹树 -->
+            <div class="folder-sidebar">
+              <div class="sidebar-header pa-3 pb-2">
+                <span class="text-caption text-medium-emphasis font-weight-medium">
+                  <v-icon
+                    size="small"
+                    class="mr-1"
+                  >mdi-folder-multiple</v-icon>
+                  文件夹
+                </span>
+              </div>
+              <v-list
+                density="compact"
+                nav
+                class="tree-list pa-2"
+                bg-color="transparent"
+              >
+                <!-- 根目录 -->
+                <v-list-item
+                  :active="currentFolderId === null"
+                  rounded="lg"
+                  class="mb-1 root-item"
+                  @click="navigateToFolder(null)"
+                >
+                  <template #prepend>
+                    <v-icon
+                      size="20"
+                      :color="currentFolderId === null ? 'primary' : ''"
+                    >
+                      mdi-home
+                    </v-icon>
+                  </template>
+                  <v-list-item-title class="text-body-2">
+                    {{ labels.rootFolder || '根目录' }}
+                  </v-list-item-title>
+                </v-list-item>
+
+                <!-- 文件夹树 -->
+                <template v-if="!treeLoading">
+                  <BaseMoveTargetNode
+                    v-for="folder in folderTree"
+                    :key="folder.folder_id"
+                    :folder="folder"
+                    :depth="0"
+                    :selected-folder-id="currentFolderId"
+                    :disabled-folder-ids="[]"
+                    @select="navigateToFolder"
+                  />
+                </template>
+
+                <div
+                  v-if="treeLoading"
+                  class="text-center pa-4"
+                >
+                  <v-progress-circular
+                    indeterminate
+                    size="20"
+                    color="primary"
+                  />
+                </div>
+              </v-list>
+            </div>
+
+            <!-- 右侧项目列表 -->
+            <div class="items-panel">
+              <!-- 面包屑导航 -->
+              <div class="breadcrumb-bar px-4 py-3">
+                <v-breadcrumbs
+                  :items="breadcrumbItems"
+                  density="compact"
+                  class="pa-0"
+                >
+                  <template #item="{ item }">
+                    <v-breadcrumbs-item
+                      :disabled="(item as any).disabled"
+                      :class="{ 'breadcrumb-link': !(item as any).disabled }"
+                      @click="!(item as any).disabled && navigateToFolder((item as any).folderId)"
+                    >
+                      <v-icon
+                        v-if="(item as any).isRoot"
+                        size="small"
+                        class="mr-1"
+                      >
+                        mdi-home
+                      </v-icon>
+                      {{ item.title }}
+                    </v-breadcrumbs-item>
+                  </template>
+                  <template #divider>
+                    <v-icon
+                      size="small"
+                      color="grey"
+                    >
+                      mdi-chevron-right
+                    </v-icon>
+                  </template>
+                </v-breadcrumbs>
+              </div>
+
+              <v-divider />
+
+              <!-- 项目列表 -->
+              <div class="items-list">
+                <v-progress-linear
+                  v-if="itemsLoading"
+                  indeterminate
+                  color="primary"
+                  height="2"
+                />
+
+                <!-- 子文件夹 -->
+                <v-list
+                  v-if="!itemsLoading"
+                  lines="two"
+                  class="pa-3 items-content"
+                >
+                  <template v-if="currentSubFolders.length > 0">
+                    <div class="section-label text-caption text-medium-emphasis mb-2 px-2">
+                      子文件夹
+                    </div>
+                    <v-list-item
+                      v-for="folder in currentSubFolders"
+                      :key="'folder-' + folder.folder_id"
+                      rounded="lg"
+                      class="mb-1 folder-item"
+                      @click="navigateToFolder(folder.folder_id)"
+                    >
+                      <template #prepend>
+                        <v-avatar
+                          size="36"
+                          color="amber-lighten-4"
+                          class="mr-3"
+                        >
+                          <v-icon
+                            color="amber-darken-2"
+                            size="20"
+                          >
+                            mdi-folder
+                          </v-icon>
+                        </v-avatar>
+                      </template>
+                      <v-list-item-title class="font-weight-medium">
+                        {{ folder.name }}
+                      </v-list-item-title>
+                      <template #append>
+                        <v-icon
+                          size="20"
+                          color="grey"
+                        >
+                          mdi-chevron-right
+                        </v-icon>
+                      </template>
+                    </v-list-item>
+                  </template>
+
+                  <!-- 项目列表 -->
+                  <template v-if="currentItems.length > 0">
+                    <div
+                      class="section-label text-caption text-medium-emphasis mb-2 px-2"
+                      :class="{ 'mt-4': currentSubFolders.length > 0 }"
+                    >
+                      可选项目
+                    </div>
+                    <v-list-item
+                      v-for="item in currentItems"
+                      :key="'item-' + getItemId(item)"
+                      :value="getItemId(item)"
+                      :active="selectedItemId === getItemId(item)"
+                      rounded="lg"
+                      class="mb-1 persona-item"
+                      :class="{ 'selected-item': selectedItemId === getItemId(item) }"
+                      @click="selectItem(item)"
+                    >
+                      <template #prepend>
+                        <v-avatar
+                          size="36"
+                          :color="selectedItemId === getItemId(item) ? 'primary-lighten-4' : 'grey-lighten-3'"
+                          class="mr-3"
+                        >
+                          <v-icon
+                            :color="selectedItemId === getItemId(item) ? 'primary' : 'grey-darken-1'"
+                            size="20"
+                          >
+                            mdi-account
+                          </v-icon>
+                        </v-avatar>
+                      </template>
+                      <v-list-item-title class="font-weight-medium">
+                        {{ getItemName(item) }}
+                      </v-list-item-title>
+                      <v-list-item-subtitle
+                        v-if="getItemDescription(item)"
+                        class="text-truncate"
+                      >
+                        {{ truncateText(getItemDescription(item), 80) }}
+                      </v-list-item-subtitle>
+
+                      <template #append>
+                        <div class="d-flex align-center ga-1">
+                          <v-btn
+                            v-if="showEditButton && !isDefaultItem(item)"
+                            icon="mdi-pencil"
+                            size="small"
+                            variant="text"
+                            :title="labels.editButton || 'Edit'"
+                            @click.stop="handleEditItem(item)"
+                          />
+                          <v-icon
+                            v-if="selectedItemId === getItemId(item)"
+                            color="primary"
+                            size="22"
+                          >
+                            mdi-check-circle
+                          </v-icon>
+                        </div>
+                      </template>
+                    </v-list-item>
+                  </template>
+
+                  <!-- 空状态 -->
+                  <div
+                    v-if="currentSubFolders.length === 0 && currentItems.length === 0"
+                    class="empty-state text-center py-12"
+                  >
+                    <v-icon
+                      size="64"
+                      color="grey-lighten-2"
+                    >
+                      mdi-folder-open-outline
+                    </v-icon>
+                    <p class="text-grey mt-4 text-body-2">
+                      {{ labels.emptyFolder || labels.noItems || '此文件夹为空' }}
+                    </p>
+                  </div>
+                </v-list>
+              </div>
+            </div>
+          </div>
+        </v-card-text>
+
+        <v-card-actions class="pa-4">
+          <v-btn
+            v-if="showCreateButton"
+            variant="text"
+            color="primary"
+            prepend-icon="mdi-plus"
+            @click="$emit('create')"
+          >
+            {{ labels.createButton || '新建' }}
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="cancelSelection"
+          >
+            {{ labels.cancelButton || '取消' }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            :disabled="!selectedItemId"
+            @click="confirmSelection"
+          >
+            {{ labels.confirmButton || '确认' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseFolderTree.vue b/dashboard/src/components/folder/BaseFolderTree.vue
index 1fe924153..fae45386f 100644
--- a/dashboard/src/components/folder/BaseFolderTree.vue
+++ b/dashboard/src/components/folder/BaseFolderTree.vue
@@ -1,74 +1,136 @@
 <template>
-    <div class="base-folder-tree">
-        <!-- 搜索框 -->
-        <v-text-field v-model="searchQuery" :placeholder="labels.searchPlaceholder" prepend-inner-icon="mdi-magnify"
-            variant="outlined" density="compact" hide-details clearable class="mb-3" />
+  <div class="base-folder-tree">
+    <!-- 搜索框 -->
+    <v-text-field
+      v-model="searchQuery"
+      :placeholder="labels.searchPlaceholder"
+      prepend-inner-icon="mdi-magnify"
+      variant="outlined"
+      density="compact"
+      hide-details
+      clearable
+      class="mb-3"
+    />
 
-        <!-- 根目录节点 -->
-        <v-list density="compact" nav class="tree-list" bg-color="transparent">
-            <v-list-item :active="currentFolderId === null" @click="handleFolderClick(null)" rounded="lg"
-                :class="['root-item', { 'drag-over': isRootDragOver }]"
-                @dragover.prevent="handleRootDragOver" @dragleave="handleRootDragLeave" @drop.prevent="handleRootDrop">
-                <template v-slot:prepend>
-                    <v-icon>mdi-home</v-icon>
-                </template>
-                <v-list-item-title>{{ labels.rootFolder }}</v-list-item-title>
-            </v-list-item>
+    <!-- 根目录节点 -->
+    <v-list
+      density="compact"
+      nav
+      class="tree-list"
+      bg-color="transparent"
+    >
+      <v-list-item
+        :active="currentFolderId === null"
+        rounded="lg"
+        :class="['root-item', { 'drag-over': isRootDragOver }]"
+        @click="handleFolderClick(null)"
+        @dragover.prevent="handleRootDragOver"
+        @dragleave="handleRootDragLeave"
+        @drop.prevent="handleRootDrop"
+      >
+        <template #prepend>
+          <v-icon>mdi-home</v-icon>
+        </template>
+        <v-list-item-title>{{ labels.rootFolder }}</v-list-item-title>
+      </v-list-item>
 
-            <!-- 文件夹树 -->
-            <template v-if="!treeLoading">
-                <BaseFolderTreeNode v-for="folder in filteredFolderTree" :key="folder.folder_id" :folder="folder"
-                    :depth="0" :current-folder-id="currentFolderId" :search-query="searchQuery"
-                    :expanded-folder-ids="expandedFolderIds" :accept-drop-types="acceptDropTypes"
-                    @folder-click="handleFolderClick" @folder-context-menu="handleContextMenu"
-                    @item-dropped="$emit('item-dropped', $event)"
-                    @toggle-expansion="$emit('toggle-expansion', $event)"
-                    @set-expansion="$emit('set-expansion', $event)" />
-            </template>
+      <!-- 文件夹树 -->
+      <template v-if="!treeLoading">
+        <BaseFolderTreeNode
+          v-for="folder in filteredFolderTree"
+          :key="folder.folder_id"
+          :folder="folder"
+          :depth="0"
+          :current-folder-id="currentFolderId"
+          :search-query="searchQuery"
+          :expanded-folder-ids="expandedFolderIds"
+          :accept-drop-types="acceptDropTypes"
+          @folder-click="handleFolderClick"
+          @folder-context-menu="handleContextMenu"
+          @item-dropped="$emit('item-dropped', $event)"
+          @toggle-expansion="$emit('toggle-expansion', $event)"
+          @set-expansion="$emit('set-expansion', $event)"
+        />
+      </template>
 
-            <!-- 加载状态 -->
-            <div v-if="treeLoading" class="text-center pa-4">
-                <v-progress-circular indeterminate size="24" />
-            </div>
+      <!-- 加载状态 -->
+      <div
+        v-if="treeLoading"
+        class="text-center pa-4"
+      >
+        <v-progress-circular
+          indeterminate
+          size="24"
+        />
+      </div>
 
-            <!-- 空状态 -->
-            <div v-if="!treeLoading && folderTree.length === 0" class="text-center pa-4 text-medium-emphasis">
-                <v-icon size="32" class="mb-2">mdi-folder-outline</v-icon>
-                <div class="text-body-2">{{ labels.noFolders }}</div>
-            </div>
-        </v-list>
+      <!-- 空状态 -->
+      <div
+        v-if="!treeLoading && folderTree.length === 0"
+        class="text-center pa-4 text-medium-emphasis"
+      >
+        <v-icon
+          size="32"
+          class="mb-2"
+        >
+          mdi-folder-outline
+        </v-icon>
+        <div class="text-body-2">
+          {{ labels.noFolders }}
+        </div>
+      </div>
+    </v-list>
 
-        <!-- 右键菜单 -->
-        <v-menu v-model="contextMenu.show" :target="contextMenu.target as any" location="end" :close-on-content-click="true">
-            <v-list density="compact">
-                <v-list-item @click="openFolder">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-folder-open</v-icon>
-                    </template>
-                    <v-list-item-title>{{ mergedLabels.contextMenu.open }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="$emit('rename-folder', contextMenu.folder)">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-pencil</v-icon>
-                    </template>
-                    <v-list-item-title>{{ mergedLabels.contextMenu.rename }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="$emit('move-folder', contextMenu.folder)">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-folder-move</v-icon>
-                    </template>
-                    <v-list-item-title>{{ mergedLabels.contextMenu.moveTo }}</v-list-item-title>
-                </v-list-item>
-                <v-divider class="my-1" />
-                <v-list-item @click="$emit('delete-folder', contextMenu.folder)" class="text-error">
-                    <template v-slot:prepend>
-                        <v-icon size="small" color="error">mdi-delete</v-icon>
-                    </template>
-                    <v-list-item-title>{{ mergedLabels.contextMenu.delete }}</v-list-item-title>
-                </v-list-item>
-            </v-list>
-        </v-menu>
-    </div>
+    <!-- 右键菜单 -->
+    <v-menu
+      v-model="contextMenu.show"
+      :target="contextMenu.target as any"
+      location="end"
+      :close-on-content-click="true"
+    >
+      <v-list density="compact">
+        <v-list-item @click="openFolder">
+          <template #prepend>
+            <v-icon size="small">
+              mdi-folder-open
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ mergedLabels.contextMenu.open }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="$emit('rename-folder', contextMenu.folder)">
+          <template #prepend>
+            <v-icon size="small">
+              mdi-pencil
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ mergedLabels.contextMenu.rename }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="$emit('move-folder', contextMenu.folder)">
+          <template #prepend>
+            <v-icon size="small">
+              mdi-folder-move
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ mergedLabels.contextMenu.moveTo }}</v-list-item-title>
+        </v-list-item>
+        <v-divider class="my-1" />
+        <v-list-item
+          class="text-error"
+          @click="$emit('delete-folder', contextMenu.folder)"
+        >
+          <template #prepend>
+            <v-icon
+              size="small"
+              color="error"
+            >
+              mdi-delete
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ mergedLabels.contextMenu.delete }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseFolderTreeNode.vue b/dashboard/src/components/folder/BaseFolderTreeNode.vue
index b02cd3c2c..9319900e2 100644
--- a/dashboard/src/components/folder/BaseFolderTreeNode.vue
+++ b/dashboard/src/components/folder/BaseFolderTreeNode.vue
@@ -1,36 +1,63 @@
 <template>
-    <div class="base-folder-tree-node">
-        <v-list-item :active="currentFolderId === folder.folder_id" @click.stop="$emit('folder-click', folder.folder_id)"
-            @contextmenu.prevent="handleContextMenu" rounded="lg" :style="{ paddingLeft: `${(depth + 1) * 16}px` }"
-            :class="['folder-item', { 'drag-over': isDragOver }]"
-            @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
-            <template v-slot:prepend>
-                <v-btn v-if="hasChildren" icon variant="text" size="x-small" @click.stop="toggleExpand"
-                    class="expand-btn">
-                    <v-icon size="16">{{ isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
-                </v-btn>
-                <div v-else class="expand-placeholder"></div>
-                <v-icon :color="currentFolderId === folder.folder_id ? 'primary' : ''">
-                    {{ isExpanded ? 'mdi-folder-open' : 'mdi-folder' }}
-                </v-icon>
-            </template>
-            <v-list-item-title class="text-truncate">{{ folder.name }}</v-list-item-title>
-        </v-list-item>
+  <div class="base-folder-tree-node">
+    <v-list-item
+      :active="currentFolderId === folder.folder_id"
+      rounded="lg"
+      :style="{ paddingLeft: `${(depth + 1) * 16}px` }"
+      :class="['folder-item', { 'drag-over': isDragOver }]"
+      @click.stop="$emit('folder-click', folder.folder_id)"
+      @contextmenu.prevent="handleContextMenu"
+      @dragover.prevent="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop.prevent="handleDrop"
+    >
+      <template #prepend>
+        <v-btn
+          v-if="hasChildren"
+          icon
+          variant="text"
+          size="x-small"
+          class="expand-btn"
+          @click.stop="toggleExpand"
+        >
+          <v-icon size="16">
+            {{ isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
+          </v-icon>
+        </v-btn>
+        <div
+          v-else
+          class="expand-placeholder"
+        />
+        <v-icon :color="currentFolderId === folder.folder_id ? 'primary' : ''">
+          {{ isExpanded ? 'mdi-folder-open' : 'mdi-folder' }}
+        </v-icon>
+      </template>
+      <v-list-item-title class="text-truncate">
+        {{ folder.name }}
+      </v-list-item-title>
+    </v-list-item>
 
-        <!-- 子文件夹 -->
-        <v-expand-transition>
-            <div v-show="isExpanded && hasChildren">
-                <BaseFolderTreeNode v-for="child in folder.children" :key="child.folder_id" :folder="child" :depth="depth + 1"
-                    :current-folder-id="currentFolderId" :search-query="searchQuery"
-                    :expanded-folder-ids="expandedFolderIds" :accept-drop-types="acceptDropTypes"
-                    @folder-click="$emit('folder-click', $event)"
-                    @folder-context-menu="$emit('folder-context-menu', $event)"
-                    @item-dropped="$emit('item-dropped', $event)"
-                    @toggle-expansion="$emit('toggle-expansion', $event)"
-                    @set-expansion="$emit('set-expansion', $event)" />
-            </div>
-        </v-expand-transition>
-    </div>
+    <!-- 子文件夹 -->
+    <v-expand-transition>
+      <div v-show="isExpanded && hasChildren">
+        <BaseFolderTreeNode
+          v-for="child in folder.children"
+          :key="child.folder_id"
+          :folder="child"
+          :depth="depth + 1"
+          :current-folder-id="currentFolderId"
+          :search-query="searchQuery"
+          :expanded-folder-ids="expandedFolderIds"
+          :accept-drop-types="acceptDropTypes"
+          @folder-click="$emit('folder-click', $event)"
+          @folder-context-menu="$emit('folder-context-menu', $event)"
+          @item-dropped="$emit('item-dropped', $event)"
+          @toggle-expansion="$emit('toggle-expansion', $event)"
+          @set-expansion="$emit('set-expansion', $event)"
+        />
+      </div>
+    </v-expand-transition>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseMoveTargetNode.vue b/dashboard/src/components/folder/BaseMoveTargetNode.vue
index 330947be0..25bea3be7 100644
--- a/dashboard/src/components/folder/BaseMoveTargetNode.vue
+++ b/dashboard/src/components/folder/BaseMoveTargetNode.vue
@@ -1,30 +1,55 @@
 <template>
-    <div class="base-move-target-node">
-        <v-list-item :active="selectedFolderId === folder.folder_id" :disabled="isDisabled"
-            @click.stop="!isDisabled && $emit('select', folder.folder_id)" rounded="lg"
-            :style="{ paddingLeft: `${(depth + 1) * 16}px` }" class="folder-item">
-            <template v-slot:prepend>
-                <v-btn v-if="hasChildren" icon variant="text" size="x-small" @click.stop="toggleExpand"
-                    class="expand-btn" :disabled="isDisabled">
-                    <v-icon size="16">{{ isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
-                </v-btn>
-                <div v-else class="expand-placeholder"></div>
-                <v-icon :color="isDisabled ? 'grey' : (selectedFolderId === folder.folder_id ? 'primary' : '')">
-                    {{ isExpanded ? 'mdi-folder-open' : 'mdi-folder' }}
-                </v-icon>
-            </template>
-            <v-list-item-title class="text-truncate">{{ folder.name }}</v-list-item-title>
-        </v-list-item>
+  <div class="base-move-target-node">
+    <v-list-item
+      :active="selectedFolderId === folder.folder_id"
+      :disabled="isDisabled"
+      rounded="lg"
+      :style="{ paddingLeft: `${(depth + 1) * 16}px` }"
+      class="folder-item"
+      @click.stop="!isDisabled && $emit('select', folder.folder_id)"
+    >
+      <template #prepend>
+        <v-btn
+          v-if="hasChildren"
+          icon
+          variant="text"
+          size="x-small"
+          class="expand-btn"
+          :disabled="isDisabled"
+          @click.stop="toggleExpand"
+        >
+          <v-icon size="16">
+            {{ isExpanded ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
+          </v-icon>
+        </v-btn>
+        <div
+          v-else
+          class="expand-placeholder"
+        />
+        <v-icon :color="isDisabled ? 'grey' : (selectedFolderId === folder.folder_id ? 'primary' : '')">
+          {{ isExpanded ? 'mdi-folder-open' : 'mdi-folder' }}
+        </v-icon>
+      </template>
+      <v-list-item-title class="text-truncate">
+        {{ folder.name }}
+      </v-list-item-title>
+    </v-list-item>
 
-        <!-- 子文件夹 -->
-        <v-expand-transition>
-            <div v-show="isExpanded && hasChildren">
-                <BaseMoveTargetNode v-for="child in folder.children" :key="child.folder_id" :folder="child" :depth="depth + 1"
-                    :selected-folder-id="selectedFolderId" :disabled-folder-ids="disabledFolderIds"
-                    @select="$emit('select', $event)" />
-            </div>
-        </v-expand-transition>
-    </div>
+    <!-- 子文件夹 -->
+    <v-expand-transition>
+      <div v-show="isExpanded && hasChildren">
+        <BaseMoveTargetNode
+          v-for="child in folder.children"
+          :key="child.folder_id"
+          :folder="child"
+          :depth="depth + 1"
+          :selected-folder-id="selectedFolderId"
+          :disabled-folder-ids="disabledFolderIds"
+          @select="$emit('select', $event)"
+        />
+      </div>
+    </v-expand-transition>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/folder/BaseMoveToFolderDialog.vue b/dashboard/src/components/folder/BaseMoveToFolderDialog.vue
index de2686798..8e8344969 100644
--- a/dashboard/src/components/folder/BaseMoveToFolderDialog.vue
+++ b/dashboard/src/components/folder/BaseMoveToFolderDialog.vue
@@ -1,52 +1,86 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="500px" persistent>
-        <v-card>
-            <v-card-title>
-                <v-icon class="mr-2">mdi-folder-move</v-icon>
-                {{ labels.title }}
-            </v-card-title>
-            <v-card-text>
-                <p class="text-body-2 text-medium-emphasis mb-4">
-                    {{ labels.description }}
-                </p>
+  <v-dialog
+    v-model="showDialog"
+    max-width="500px"
+    persistent
+  >
+    <v-card>
+      <v-card-title>
+        <v-icon class="mr-2">
+          mdi-folder-move
+        </v-icon>
+        {{ labels.title }}
+      </v-card-title>
+      <v-card-text>
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          {{ labels.description }}
+        </p>
 
-                <!-- 文件夹选择树 -->
-                <div class="folder-select-tree">
-                    <v-list density="compact" nav class="tree-list">
-                        <!-- 根目录选项 -->
-                        <v-list-item :active="selectedFolderId === null" @click="selectFolder(null)" rounded="lg"
-                            class="mb-1">
-                            <template v-slot:prepend>
-                                <v-icon>mdi-home</v-icon>
-                            </template>
-                            <v-list-item-title>{{ labels.rootFolder }}</v-list-item-title>
-                        </v-list-item>
+        <!-- 文件夹选择树 -->
+        <div class="folder-select-tree">
+          <v-list
+            density="compact"
+            nav
+            class="tree-list"
+          >
+            <!-- 根目录选项 -->
+            <v-list-item
+              :active="selectedFolderId === null"
+              rounded="lg"
+              class="mb-1"
+              @click="selectFolder(null)"
+            >
+              <template #prepend>
+                <v-icon>mdi-home</v-icon>
+              </template>
+              <v-list-item-title>{{ labels.rootFolder }}</v-list-item-title>
+            </v-list-item>
 
-                        <!-- 文件夹树 -->
-                        <template v-if="!treeLoading">
-                            <BaseMoveTargetNode v-for="folder in folderTree" :key="folder.folder_id" :folder="folder"
-                                :depth="0" :selected-folder-id="selectedFolderId" :disabled-folder-ids="disabledFolderIds"
-                                @select="selectFolder" />
-                        </template>
+            <!-- 文件夹树 -->
+            <template v-if="!treeLoading">
+              <BaseMoveTargetNode
+                v-for="folder in folderTree"
+                :key="folder.folder_id"
+                :folder="folder"
+                :depth="0"
+                :selected-folder-id="selectedFolderId"
+                :disabled-folder-ids="disabledFolderIds"
+                @select="selectFolder"
+              />
+            </template>
 
-                        <!-- 加载状态 -->
-                        <div v-if="treeLoading" class="text-center pa-4">
-                            <v-progress-circular indeterminate size="24" />
-                        </div>
-                    </v-list>
-                </div>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer />
-                <v-btn variant="text" @click="closeDialog">
-                    {{ labels.cancelButton }}
-                </v-btn>
-                <v-btn color="primary" variant="flat" @click="submitMove" :loading="loading">
-                    {{ labels.moveButton }}
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+            <!-- 加载状态 -->
+            <div
+              v-if="treeLoading"
+              class="text-center pa-4"
+            >
+              <v-progress-circular
+                indeterminate
+                size="24"
+              />
+            </div>
+          </v-list>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog"
+        >
+          {{ labels.cancelButton }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="loading"
+          @click="submitMove"
+        >
+          {{ labels.moveButton }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/components/platform/AddNewPlatform.vue b/dashboard/src/components/platform/AddNewPlatform.vue
index e771a56e5..f2d61b1d1 100644
--- a/dashboard/src/components/platform/AddNewPlatform.vue
+++ b/dashboard/src/components/platform/AddNewPlatform.vue
@@ -1,11 +1,27 @@
 <template>
-  <v-dialog v-model="showDialog" max-width="800px" max-height="90%" @after-enter="prepareData">
+  <v-dialog
+    v-model="showDialog"
+    max-width="800px"
+    max-height="90%"
+    @after-enter="prepareData"
+  >
     <v-card
-      :title="updatingMode ? `${tm('dialog.edit')} ${updatingPlatformConfig.id} ${tm('dialog.adapter')}` : tm('dialog.addPlatform')">
-  <v-card-text ref="dialogScrollContainer" class="pa-4 ml-2" style="overflow-y: auto;">
-        <div class="d-flex align-start" style="width: 100%;">
+      :title="updatingMode ? `${tm('dialog.edit')} ${updatingPlatformConfig.id} ${tm('dialog.adapter')}` : tm('dialog.addPlatform')"
+    >
+      <v-card-text
+        ref="dialogScrollContainer"
+        class="pa-4 ml-2"
+        style="overflow-y: auto;"
+      >
+        <div
+          class="d-flex align-start"
+          style="width: 100%;"
+        >
           <div>
-            <v-icon icon="mdi-numeric-1-circle" class="mr-3"></v-icon>
+            <v-icon
+              icon="mdi-numeric-1-circle"
+              class="mr-3"
+            />
           </div>
           <div style="flex: 1;">
             <h3>
@@ -13,52 +29,87 @@
             </h3>
             <small style="color: grey;">{{ tm('createDialog.step1Hint') }}</small>
             <div>
-
               <div v-if="!updatingMode">
-                <v-select v-model="selectedPlatformType" :items="Object.keys(platformTemplates)" item-title="name"
-                  item-value="name" :label="tm('createDialog.platformTypeLabel')" variant="outlined" rounded="md" dense hide-details class="mt-6"
-                  style="max-width: 30%; min-width: 300px;">
-
-                  <template v-slot:item="{ props: itemProps, item }">
+                <v-select
+                  v-model="selectedPlatformType"
+                  :items="Object.keys(platformTemplates)"
+                  item-title="name"
+                  item-value="name"
+                  :label="tm('createDialog.platformTypeLabel')"
+                  variant="outlined"
+                  rounded="md"
+                  dense
+                  hide-details
+                  class="mt-6"
+                  style="max-width: 30%; min-width: 300px;"
+                >
+                  <template #item="{ props: itemProps, item }">
                     <v-list-item v-bind="itemProps">
-                      <template v-slot:prepend>
-                        <img :src="getPlatformIcon(platformTemplates[item.raw].type)"
-                          style="width: 32px; height: 32px; object-fit: contain; margin-right: 16px;" />
+                      <template #prepend>
+                        <img
+                          :src="getPlatformIcon(platformTemplates[item.raw].type)"
+                          style="width: 32px; height: 32px; object-fit: contain; margin-right: 16px;"
+                        >
                       </template>
                     </v-list-item>
                   </template>
-
                 </v-select>
-                <div class="mt-3" v-if="selectedPlatformConfig">
-                  <v-btn color="info" variant="tonal" @click="openTutorial" class="mt-2">
-                    <v-icon start>mdi-book-open-variant</v-icon>
+                <div
+                  v-if="selectedPlatformConfig"
+                  class="mt-3"
+                >
+                  <v-btn
+                    color="info"
+                    variant="tonal"
+                    class="mt-2"
+                    @click="openTutorial"
+                  >
+                    <v-icon start>
+                      mdi-book-open-variant
+                    </v-icon>
                     {{ tm('dialog.viewTutorial') }}
                   </v-btn>
                   <div class="mt-2">
-                    <AstrBotConfig :iterable="selectedPlatformConfig" :metadata="metadata['platform_group']?.metadata"
-                      metadataKey="platform" />
+                    <AstrBotConfig
+                      :iterable="selectedPlatformConfig"
+                      :metadata="metadata['platform_group']?.metadata"
+                      metadata-key="platform"
+                    />
                   </div>
                 </div>
               </div>
               <div v-else>
-                <v-text-field :label="tm('createDialog.platformTypeLabel')" variant="outlined" rounded="md" dense hide-details class="mt-6"
-                  style="max-width: 30%; min-width: 300px;" v-model="updatingPlatformConfig.type"
-                  disabled></v-text-field>
+                <v-text-field
+                  :model-value="updatingPlatformConfig.type"
+                  :label="tm('createDialog.platformTypeLabel')"
+                  variant="outlined"
+                  rounded="md"
+                  dense
+                  hide-details
+                  class="mt-6"
+                  style="max-width: 30%; min-width: 300px;"
+                  disabled
+                />
                 <div class="mt-3">
                   <div class="mt-2">
-                    <AstrBotConfig :iterable="updatingPlatformConfig" :metadata="metadata['platform_group']?.metadata"
-                      metadataKey="platform" />
+                    <AstrBotConfig
+                      :iterable="updatingPlatformConfig"
+                      :metadata="metadata['platform_group']?.metadata"
+                      metadata-key="platform"
+                    />
                   </div>
                 </div>
               </div>
-
             </div>
           </div>
         </div>
 
         <div class="d-flex align-start mt-6">
           <div>
-            <v-icon icon="mdi-numeric-2-circle" class="mr-3"></v-icon>
+            <v-icon
+              icon="mdi-numeric-2-circle"
+              class="mr-3"
+            />
           </div>
           <div style="flex: 1;">
             <div class="d-flex align-center justify-space-between">
@@ -67,46 +118,93 @@
                   <h3>
                     {{ tm('createDialog.configFileTitle') }}
                   </h3>
-                  <v-chip size="x-small" color="primary" variant="tonal" rounded="sm" class="ml-2"
-                    v-if="!updatingMode">{{ tm('createDialog.optional') }}</v-chip>
+                  <v-chip
+                    v-if="!updatingMode"
+                    size="x-small"
+                    color="primary"
+                    variant="tonal"
+                    rounded="sm"
+                    class="ml-2"
+                  >
+                    {{ tm('createDialog.optional') }}
+                  </v-chip>
                 </div>
                 <small style="color: grey;">{{ tm('createDialog.configHint') }}</small>
-                <small style="color: grey;" v-if="!updatingMode">{{ tm('createDialog.configDefaultHint') }}</small>
+                <small
+                  v-if="!updatingMode"
+                  style="color: grey;"
+                >{{ tm('createDialog.configDefaultHint') }}</small>
               </div>
               <div>
-                <v-btn variant="plain" icon @click="toggleConfigSection" class="mt-2">
+                <v-btn
+                  variant="plain"
+                  icon
+                  class="mt-2"
+                  @click="toggleConfigSection"
+                >
                   <v-icon>{{ showConfigSection ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                 </v-btn>
               </div>
-
             </div>
 
             <div v-if="showConfigSection">
               <div v-if="!updatingMode">
-                <v-radio-group class="mt-2" v-model="aBConfigRadioVal" hide-details="true">
+                <v-radio-group
+                  v-model="aBConfigRadioVal"
+                  class="mt-2"
+                  hide-details="true"
+                >
                   <v-radio value="0">
-                    <template v-slot:label>
+                    <template #label>
                       <span>{{ tm('createDialog.useExistingConfig') }}</span>
                     </template>
                   </v-radio>
-                  <div class="d-flex align-center ml-10 my-2" v-if="aBConfigRadioVal === '0'">
-                    <v-select v-model="selectedAbConfId" :items="configInfoList" item-title="name"
-                      item-value="id" :label="tm('createDialog.selectConfigLabel')" variant="outlined" rounded="md" dense hide-details
-                      style="max-width: 30%; min-width: 200px;">
-                    </v-select>
-                    <v-btn icon variant="text" density="comfortable" class="ml-2"
-                      :disabled="!selectedAbConfId" @click="openConfigDrawer(selectedAbConfId)">
+                  <div
+                    v-if="aBConfigRadioVal === '0'"
+                    class="d-flex align-center ml-10 my-2"
+                  >
+                    <v-select
+                      v-model="selectedAbConfId"
+                      :items="configInfoList"
+                      item-title="name"
+                      item-value="id"
+                      :label="tm('createDialog.selectConfigLabel')"
+                      variant="outlined"
+                      rounded="md"
+                      dense
+                      hide-details
+                      style="max-width: 30%; min-width: 200px;"
+                    />
+                    <v-btn
+                      icon
+                      variant="text"
+                      density="comfortable"
+                      class="ml-2"
+                      :disabled="!selectedAbConfId"
+                      @click="openConfigDrawer(selectedAbConfId)"
+                    >
                       <v-icon>mdi-arrow-top-right-thick</v-icon>
                     </v-btn>
                   </div>
-                  <v-radio value="1" :label="tm('createDialog.createNewConfig')">
-                  </v-radio>
-                  <div class="d-flex align-center" v-if="aBConfigRadioVal === '1'">
-                    <v-text-field v-model="selectedAbConfId" :label="tm('createDialog.newConfigNameLabel')" variant="outlined" rounded="md" dense
-                      hide-details style="max-width: 30%; min-width: 200px;" class="ml-10 my-2">
-                    </v-text-field>
+                  <v-radio
+                    value="1"
+                    :label="tm('createDialog.createNewConfig')"
+                  />
+                  <div
+                    v-if="aBConfigRadioVal === '1'"
+                    class="d-flex align-center"
+                  >
+                    <v-text-field
+                      v-model="selectedAbConfId"
+                      :label="tm('createDialog.newConfigNameLabel')"
+                      variant="outlined"
+                      rounded="md"
+                      dense
+                      hide-details
+                      style="max-width: 30%; min-width: 200px;"
+                      class="ml-10 my-2"
+                    />
                   </div>
-
                 </v-radio-group>
 
                 <!-- 现有配置文件预览区域 -->
@@ -126,132 +224,268 @@
                 </div> -->
 
                 <!-- 新配置文件编辑区域 -->
-                <div v-if="aBConfigRadioVal === '1'" class="mt-4">
-                  <div v-if="newConfigLoading" class="d-flex justify-center py-4">
-                    <v-progress-circular indeterminate color="primary"></v-progress-circular>
+                <div
+                  v-if="aBConfigRadioVal === '1'"
+                  class="mt-4"
+                >
+                  <div
+                    v-if="newConfigLoading"
+                    class="d-flex justify-center py-4"
+                  >
+                    <v-progress-circular
+                      indeterminate
+                      color="primary"
+                    />
                   </div>
-                  <div v-else-if="newConfigData && newConfigMetadata" class="config-preview-container">
-                    <h4 class="mb-3">{{ tm('createDialog.newConfigTitle') }}</h4>
-                    <AstrBotCoreConfigWrapper :metadata="newConfigMetadata" :config_data="newConfigData" />
+                  <div
+                    v-else-if="newConfigData && newConfigMetadata"
+                    class="config-preview-container"
+                  >
+                    <h4 class="mb-3">
+                      {{ tm('createDialog.newConfigTitle') }}
+                    </h4>
+                    <AstrBotCoreConfigWrapper
+                      :metadata="newConfigMetadata"
+                      :config_data="newConfigData"
+                    />
                   </div>
-                  <div v-else class="text-center py-4 text-grey">
+                  <div
+                    v-else
+                    class="text-center py-4 text-grey"
+                  >
                     <v-icon>mdi-information-outline</v-icon>
-                    <p class="mt-2">{{ tm('createDialog.newConfigLoadFailed') }}</p>
+                    <p class="mt-2">
+                      {{ tm('createDialog.newConfigLoadFailed') }}
+                    </p>
                   </div>
                 </div>
-
               </div>
 
               <div v-else>
                 <div class="mb-3 d-flex align-center justify-space-between">
                   <div>
-                    <v-btn v-if="isEditingRoutes" color="primary" variant="tonal" @click="addNewRoute" size="small">
-                      <v-icon start>mdi-plus</v-icon>
+                    <v-btn
+                      v-if="isEditingRoutes"
+                      color="primary"
+                      variant="tonal"
+                      size="small"
+                      @click="addNewRoute"
+                    >
+                      <v-icon start>
+                        mdi-plus
+                      </v-icon>
                       {{ tm('createDialog.addRouteRule') }}
                     </v-btn>
                   </div>
-                  <v-btn :color="isEditingRoutes ? 'grey' : 'primary'" variant="tonal" size="small"
-                    @click="toggleEditMode">
-                    <v-icon start>{{ isEditingRoutes ? 'mdi-eye' : 'mdi-pencil' }}</v-icon>
+                  <v-btn
+                    :color="isEditingRoutes ? 'grey' : 'primary'"
+                    variant="tonal"
+                    size="small"
+                    @click="toggleEditMode"
+                  >
+                    <v-icon start>
+                      {{ isEditingRoutes ? 'mdi-eye' : 'mdi-pencil' }}
+                    </v-icon>
                     {{ isEditingRoutes ? tm('createDialog.viewMode') : tm('createDialog.editMode') }}
                   </v-btn>
                 </div>
 
-                <v-data-table :headers="routeTableHeaders" :items="platformRoutes" item-value="umop"
-                  :no-data-text="tm('createDialog.noRouteRules')" hide-default-footer :items-per-page="-1" class="mt-2"
-                  variant="outlined">
-
-                  <template v-slot:item.source="{ item }">
-                    <div class="d-flex align-center" style="min-width: 250px;">
-                      <v-select v-if="isEditingRoutes" v-model="item.messageType" :items="messageTypeOptions"
-                        item-title="label" item-value="value" variant="outlined" density="compact" hide-details
-                        style="max-width: 140px;">
-                      </v-select>
+                <v-data-table
+                  :headers="routeTableHeaders"
+                  :items="platformRoutes"
+                  item-value="umop"
+                  :no-data-text="tm('createDialog.noRouteRules')"
+                  hide-default-footer
+                  :items-per-page="-1"
+                  class="mt-2"
+                  variant="outlined"
+                >
+                  <template #item.source="{ item }">
+                    <div
+                      class="d-flex align-center"
+                      style="min-width: 250px;"
+                    >
+                      <v-select
+                        v-if="isEditingRoutes"
+                        v-model="item.messageType"
+                        :items="messageTypeOptions"
+                        item-title="label"
+                        item-value="value"
+                        variant="outlined"
+                        density="compact"
+                        hide-details
+                        style="max-width: 140px;"
+                      />
                       <small v-else>{{ getMessageTypeLabel(item.messageType) }}</small>
                       <small class="mx-1">:</small>
-                      <v-text-field v-if="isEditingRoutes" v-model="item.sessionId" variant="outlined" density="compact"
-                        hide-details :placeholder="tm('createDialog.sessionIdPlaceholder')">
-                      </v-text-field>
+                      <v-text-field
+                        v-if="isEditingRoutes"
+                        v-model="item.sessionId"
+                        variant="outlined"
+                        density="compact"
+                        hide-details
+                        :placeholder="tm('createDialog.sessionIdPlaceholder')"
+                      />
                       <small v-else>{{ item.sessionId === '*' ? tm('createDialog.allSessions') : item.sessionId }}</small>
                     </div>
                   </template>
 
-                  <template v-slot:item.configId="{ item }">
+                  <template #item.configId="{ item }">
                     <div class="d-flex align-center">
-                      <v-select v-if="isEditingRoutes" v-model="item.configId" :items="configInfoList"
-                        item-title="name" item-value="id" variant="outlined" density="compact"
-                        style="min-width: 200px;" hide-details>
-                      </v-select>
+                      <v-select
+                        v-if="isEditingRoutes"
+                        v-model="item.configId"
+                        :items="configInfoList"
+                        item-title="name"
+                        item-value="id"
+                        variant="outlined"
+                        density="compact"
+                        style="min-width: 200px;"
+                        hide-details
+                      />
                       <div v-else>
                         <small>{{ getConfigName(item.configId) }}</small>
                       </div>
-                      <v-btn icon variant="text" density="compact" class="ml-2"
-                        :disabled="!item.configId" @click="openConfigDrawer(item.configId)">
-                        <v-icon size="18">mdi-arrow-top-right-thick</v-icon>
+                      <v-btn
+                        icon
+                        variant="text"
+                        density="compact"
+                        class="ml-2"
+                        :disabled="!item.configId"
+                        @click="openConfigDrawer(item.configId)"
+                      >
+                        <v-icon size="18">
+                          mdi-arrow-top-right-thick
+                        </v-icon>
                       </v-btn>
                     </div>
-                    <small v-if="configInfoList.findIndex(c => c.id === item.configId) === -1" style="color: red;"
-                      class="ml-2">{{ tm('createDialog.configMissing') }}</small>
+                    <small
+                      v-if="configInfoList.findIndex(c => c.id === item.configId) === -1"
+                      style="color: red;"
+                      class="ml-2"
+                    >{{ tm('createDialog.configMissing') }}</small>
                   </template>
 
-                  <template v-slot:item.actions="{ item, index }">
-                    <div v-if="isEditingRoutes" class="d-flex align-center">
-                      <v-btn icon size="x-small" variant="text" @click="moveRouteUp(index)" :disabled="index === 0">
+                  <template #item.actions="{ item, index }">
+                    <div
+                      v-if="isEditingRoutes"
+                      class="d-flex align-center"
+                    >
+                      <v-btn
+                        icon
+                        size="x-small"
+                        variant="text"
+                        :disabled="index === 0"
+                        @click="moveRouteUp(index)"
+                      >
                         <v-icon>mdi-arrow-up</v-icon>
                       </v-btn>
-                      <v-btn icon size="x-small" variant="text" @click="moveRouteDown(index)"
-                        :disabled="index === platformRoutes.length - 1">
+                      <v-btn
+                        icon
+                        size="x-small"
+                        variant="text"
+                        :disabled="index === platformRoutes.length - 1"
+                        @click="moveRouteDown(index)"
+                      >
                         <v-icon>mdi-arrow-down</v-icon>
                       </v-btn>
-                      <v-btn icon size="x-small" variant="text" color="error" @click="deleteRoute(index)">
+                      <v-btn
+                        icon
+                        size="x-small"
+                        variant="text"
+                        color="error"
+                        @click="deleteRoute(index)"
+                      >
                         <v-icon>mdi-delete</v-icon>
                       </v-btn>
                     </div>
-                    <span v-else class="text-grey">-</span>
+                    <span
+                      v-else
+                      class="text-grey"
+                    >-</span>
                   </template>
-
                 </v-data-table>
-                <small class="ml-2 mt-2 d-block" style="color: grey">{{ tm('createDialog.routeHint') }}</small>
+                <small
+                  class="ml-2 mt-2 d-block"
+                  style="color: grey"
+                >{{ tm('createDialog.routeHint') }}</small>
               </div>
             </div>
-
-
           </div>
         </div>
-
       </v-card-text>
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn text @click="closeDialog">{{ tm('dialog.cancel') }}</v-btn>
-        <v-btn :disabled="!canSave" color="primary" v-if="!updatingMode" @click="newPlatform" :loading="loading">{{
-          tm('dialog.save') }}</v-btn>
-        <v-btn :disabled="!selectedAbConfId" color="primary" v-else @click="newPlatform" :loading="loading">{{
-          tm('dialog.save') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          text
+          @click="closeDialog"
+        >
+          {{ tm('dialog.cancel') }}
+        </v-btn>
+        <v-btn
+          v-if="!updatingMode"
+          :disabled="!canSave"
+          color="primary"
+          :loading="loading"
+          @click="newPlatform"
+        >
+          {{
+            tm('dialog.save') }}
+        </v-btn>
+        <v-btn
+          v-else
+          :disabled="!selectedAbConfId"
+          color="primary"
+          :loading="loading"
+          @click="newPlatform"
+        >
+          {{
+            tm('dialog.save') }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- ID冲突确认对话框 -->
-  <v-dialog v-model="showIdConflictDialog" max-width="450" persistent>
+  <v-dialog
+    v-model="showIdConflictDialog"
+    max-width="450"
+    persistent
+  >
     <v-card>
       <v-card-title class="text-h6 bg-warning d-flex align-center">
-        <v-icon start class="me-2">mdi-alert-circle-outline</v-icon>
+        <v-icon
+          start
+          class="me-2"
+        >
+          mdi-alert-circle-outline
+        </v-icon>
         {{ tm('dialog.idConflict.title') }}
       </v-card-title>
       <v-card-text class="py-4 text-body-1 text-medium-emphasis">
         {{ tm('dialog.idConflict.message', { id: conflictId }) }}
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="grey" variant="text" @click="handleIdConflictConfirm(false)">{{ tm('dialog.idConflict.confirm')
-        }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="handleIdConflictConfirm(false)"
+        >
+          {{ tm('dialog.idConflict.confirm')
+          }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- 安全警告对话框 -->
-  <v-dialog v-model="showOneBotEmptyTokenWarnDialog" max-width="600" persistent>
+  <v-dialog
+    v-model="showOneBotEmptyTokenWarnDialog"
+    max-width="600"
+    persistent
+  >
     <v-card>
       <v-card-title>
         {{ tm('dialog.securityWarning.title') }}
@@ -259,15 +493,22 @@
       <v-card-text class="py-4">
         <p>{{ tm('dialog.securityWarning.aiocqhttpTokenMissing') }}</p>
         <span><a
-            href="https://docs.astrbot.app/deploy/platform/aiocqhttp/napcat.html#%E9%99%84%E5%BD%95-%E5%A2%9E%E5%BC%BA%E8%BF%9E%E6%8E%A5%E5%AE%89%E5%85%A8%E6%80%A7"
-            target="_blank">{{ tm('dialog.securityWarning.learnMore') }}</a></span>
+          href="https://docs.astrbot.app/deploy/platform/aiocqhttp/napcat.html#%E9%99%84%E5%BD%95-%E5%A2%9E%E5%BC%BA%E8%BF%9E%E6%8E%A5%E5%AE%89%E5%85%A8%E6%80%A7"
+          target="_blank"
+        >{{ tm('dialog.securityWarning.learnMore') }}</a></span>
       </v-card-text>
       <v-card-actions class="px-4 pb-4">
-        <v-spacer></v-spacer>
-        <v-btn color="error" @click="handleOneBotEmptyTokenWarningDismiss(true)">
+        <v-spacer />
+        <v-btn
+          color="error"
+          @click="handleOneBotEmptyTokenWarningDismiss(true)"
+        >
           {{ tm('createDialog.warningContinue') }}
         </v-btn>
-        <v-btn color="primary" @click="handleOneBotEmptyTokenWarningDismiss(false)">
+        <v-btn
+          color="primary"
+          @click="handleOneBotEmptyTokenWarningDismiss(false)"
+        >
           {{ tm('createDialog.warningEditAgain') }}
         </v-btn>
       </v-card-actions>
@@ -282,21 +523,34 @@
     :scrim="true"
     @click:outside="closeConfigDrawer"
   >
-    <v-card class="config-drawer-card" elevation="12">
+    <v-card
+      class="config-drawer-card"
+      elevation="12"
+    >
       <div class="config-drawer-header">
         <div>
           <span class="text-h6">{{ tm('createDialog.configDrawerTitle') }}</span>
-          <div v-if="configDrawerTargetId" class="text-caption text-grey">
+          <div
+            v-if="configDrawerTargetId"
+            class="text-caption text-grey"
+          >
             {{ tm('createDialog.configDrawerIdLabel') }}: {{ configDrawerTargetId }}
           </div>
         </div>
-        <v-btn icon variant="text" @click="closeConfigDrawer">
+        <v-btn
+          icon
+          variant="text"
+          @click="closeConfigDrawer"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </div>
-      <v-divider></v-divider>
+      <v-divider />
       <div class="config-drawer-content">
-        <ConfigPage v-if="showConfigDrawer" :initial-config-id="configDrawerTargetId" />
+        <ConfigPage
+          v-if="showConfigDrawer"
+          :initial-config-id="configDrawerTargetId"
+        />
       </div>
     </v-card>
   </v-overlay>
@@ -314,7 +568,6 @@ import ConfigPage from '@/views/ConfigPage.vue';
 export default {
   name: 'AddNewPlatform',
   components: { AstrBotConfig, AstrBotCoreConfigWrapper, ConfigPage },
-  emits: ['update:show', 'show-toast', 'refresh-config'],
   props: {
     show: {
       type: Boolean,
@@ -337,6 +590,11 @@ export default {
       default: null
     }
   },
+  emits: ['update:show', 'show-toast', 'refresh-config'],
+  setup() {
+    const { tm } = useModuleI18n('features/platform');
+    return { tm };
+  },
   data() {
     return {
       selectedPlatformType: null,
@@ -384,10 +642,6 @@ export default {
       originalUpdatingPlatformId: null,
     };
   },
-  setup() {
-    const { tm } = useModuleI18n('features/platform');
-    return { tm };
-  },
   computed: {
     showDialog: {
       get() {
diff --git a/dashboard/src/components/provider/AddNewProvider.vue b/dashboard/src/components/provider/AddNewProvider.vue
index dfef836ab..67f756fc7 100644
--- a/dashboard/src/components/provider/AddNewProvider.vue
+++ b/dashboard/src/components/provider/AddNewProvider.vue
@@ -1,72 +1,138 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="1100px" min-height="95%">
-        <v-card :title="tm('dialogs.addProvider.title')">
-            <v-card-text style="overflow-y: auto;">
-                <v-tabs v-model="activeProviderTab" grow>
-                    <v-tab value="agent_runner" class="font-weight-medium px-3">
-                        <v-icon start>mdi-cogs</v-icon>
-                        {{ tm('dialogs.addProvider.tabs.agentRunner') }}
-                    </v-tab>
-                    <v-tab value="speech_to_text" class="font-weight-medium px-3">
-                        <v-icon start>mdi-microphone-message</v-icon>
-                        {{ tm('dialogs.addProvider.tabs.speechToText') }}
-                    </v-tab>
-                    <v-tab value="text_to_speech" class="font-weight-medium px-3">
-                        <v-icon start>mdi-volume-high</v-icon>
-                        {{ tm('dialogs.addProvider.tabs.textToSpeech') }}
-                    </v-tab>
-                    <v-tab value="embedding" class="font-weight-medium px-3">
-                        <v-icon start>mdi-code-json</v-icon>
-                        {{ tm('dialogs.addProvider.tabs.embedding') }}
-                    </v-tab>
-                    <v-tab value="rerank" class="font-weight-medium px-3">
-                        <v-icon start>mdi-compare-vertical</v-icon>
-                        {{ tm('dialogs.addProvider.tabs.rerank') }}
-                    </v-tab>
-                </v-tabs>
+  <v-dialog
+    v-model="showDialog"
+    max-width="1100px"
+    min-height="95%"
+  >
+    <v-card :title="tm('dialogs.addProvider.title')">
+      <v-card-text style="overflow-y: auto;">
+        <v-tabs
+          v-model="activeProviderTab"
+          grow
+        >
+          <v-tab
+            value="agent_runner"
+            class="font-weight-medium px-3"
+          >
+            <v-icon start>
+              mdi-cogs
+            </v-icon>
+            {{ tm('dialogs.addProvider.tabs.agentRunner') }}
+          </v-tab>
+          <v-tab
+            value="speech_to_text"
+            class="font-weight-medium px-3"
+          >
+            <v-icon start>
+              mdi-microphone-message
+            </v-icon>
+            {{ tm('dialogs.addProvider.tabs.speechToText') }}
+          </v-tab>
+          <v-tab
+            value="text_to_speech"
+            class="font-weight-medium px-3"
+          >
+            <v-icon start>
+              mdi-volume-high
+            </v-icon>
+            {{ tm('dialogs.addProvider.tabs.textToSpeech') }}
+          </v-tab>
+          <v-tab
+            value="embedding"
+            class="font-weight-medium px-3"
+          >
+            <v-icon start>
+              mdi-code-json
+            </v-icon>
+            {{ tm('dialogs.addProvider.tabs.embedding') }}
+          </v-tab>
+          <v-tab
+            value="rerank"
+            class="font-weight-medium px-3"
+          >
+            <v-icon start>
+              mdi-compare-vertical
+            </v-icon>
+            {{ tm('dialogs.addProvider.tabs.rerank') }}
+          </v-tab>
+        </v-tabs>
 
-                <v-window v-model="activeProviderTab" class="mt-4">
-                    <v-window-item
-                        v-for="tabType in ['chat_completion', 'agent_runner', 'speech_to_text', 'text_to_speech', 'embedding', 'rerank']"
-                        :key="tabType" :value="tabType">
-                        <v-row class="mt-1">
-                            <v-col v-for="(template, name) in getTemplatesByType(tabType)" :key="name" cols="12" sm="6"
-                                md="4">
-                                <v-card variant="outlined" hover class="provider-card"
-                                    @click="selectProviderTemplate(name)">
-                                    <div class="provider-card-content">
-                                        <div class="provider-card-text">
-                                            <v-card-title class="provider-card-title">{{ name }}</v-card-title>
-                                            <v-card-text
-                                                class="text-caption text-medium-emphasis provider-card-description">
-                                                {{ getProviderDescription(template, name) }}
-                                            </v-card-text>
-                                        </div>
-                                        <div class="provider-card-logo">
-                                            <img :src="getProviderIcon(template.provider)"
-                                                v-if="getProviderIcon(template.provider)" class="provider-logo-img">
-                                            <div v-else class="provider-logo-fallback">
-                                                {{ name[0].toUpperCase() }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </v-card>
-                            </v-col>
-                            <v-col v-if="Object.keys(getTemplatesByType(tabType)).length === 0" cols="12">
-                                <v-alert type="info" variant="tonal">
-                                    {{ tm('dialogs.addProvider.noTemplates') }}
-                                </v-alert>
-                            </v-col>
-                        </v-row>
-                    </v-window-item>
-                </v-window>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn text @click="closeDialog">{{ tm('dialogs.config.cancel') }}</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+        <v-window
+          v-model="activeProviderTab"
+          class="mt-4"
+        >
+          <v-window-item
+            v-for="tabType in ['chat_completion', 'agent_runner', 'speech_to_text', 'text_to_speech', 'embedding', 'rerank']"
+            :key="tabType"
+            :value="tabType"
+          >
+            <v-row class="mt-1">
+              <v-col
+                v-for="(template, name) in getTemplatesByType(tabType)"
+                :key="name"
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <v-card
+                  variant="outlined"
+                  hover
+                  class="provider-card"
+                  @click="selectProviderTemplate(name)"
+                >
+                  <div class="provider-card-content">
+                    <div class="provider-card-text">
+                      <v-card-title class="provider-card-title">
+                        {{ name }}
+                      </v-card-title>
+                      <v-card-text
+                        class="text-caption text-medium-emphasis provider-card-description"
+                      >
+                        {{ getProviderDescription(template, name) }}
+                      </v-card-text>
+                    </div>
+                    <div class="provider-card-logo">
+                      <img
+                        v-if="getProviderIcon(template.provider)"
+                        :src="getProviderIcon(template.provider)"
+                        class="provider-logo-img"
+                      >
+                      <div
+                        v-else
+                        class="provider-logo-fallback"
+                      >
+                        {{ name[0].toUpperCase() }}
+                      </div>
+                    </div>
+                  </div>
+                </v-card>
+              </v-col>
+              <v-col
+                v-if="Object.keys(getTemplatesByType(tabType)).length === 0"
+                cols="12"
+              >
+                <v-alert
+                  type="info"
+                  variant="tonal"
+                >
+                  {{ tm('dialogs.addProvider.noTemplates') }}
+                </v-alert>
+              </v-col>
+            </v-row>
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          text
+          @click="closeDialog"
+        >
+          {{ tm('dialogs.config.cancel') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
diff --git a/dashboard/src/components/provider/ProviderModelsPanel.vue b/dashboard/src/components/provider/ProviderModelsPanel.vue
index d26049ec2..425dc2dab 100644
--- a/dashboard/src/components/provider/ProviderModelsPanel.vue
+++ b/dashboard/src/components/provider/ProviderModelsPanel.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="mt-4">
     <div class="d-flex align-center ga-2 mb-2">
-      <h3 class="text-h5 font-weight-bold mb-0">{{ tm('models.configured') }}</h3>
-      <small style="color: grey;" v-if="availableCount">{{ tm('models.available') }} {{ availableCount }}</small>
+      <h3 class="text-h5 font-weight-bold mb-0">
+        {{ tm('models.configured') }}
+      </h3>
+      <small
+        v-if="availableCount"
+        style="color: grey;"
+      >{{ tm('models.available') }} {{ availableCount }}</small>
       <v-text-field
         v-model="modelSearchProxy"
         density="compact"
@@ -15,14 +20,14 @@
         style="max-width: 240px;"
         :placeholder="tm('models.searchPlaceholder')"
       />
-      <v-spacer></v-spacer>
+      <v-spacer />
       <v-btn
         color="primary"
         prepend-icon="mdi-download"
         :loading="loadingModels"
-        @click="emit('fetch-models')"
         variant="tonal"
         size="small"
+        @click="emit('fetch-models')"
       >
         {{ isSourceModified ? tm('providerSources.saveAndFetchModels') : tm('providerSources.fetchModels') }}
       </v-btn>
@@ -44,8 +49,15 @@
       style="max-height: 520px; overflow-y: auto; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"
     >
       <template v-if="entries.length > 0">
-        <template v-for="entry in entries" :key="entry.type === 'configured' ? `provider-${entry.provider.id}` : `model-${entry.model}`">
-          <v-tooltip location="top" max-width="400" v-if="entry.type === 'configured'">
+        <template
+          v-for="entry in entries"
+          :key="entry.type === 'configured' ? `provider-${entry.provider.id}` : `model-${entry.model}`"
+        >
+          <v-tooltip
+            v-if="entry.type === 'configured'"
+            location="top"
+            max-width="400"
+          >
             <template #activator="{ props }">
               <v-list-item
                 v-bind="props"
@@ -55,63 +67,93 @@
                 <v-list-item-title class="font-weight-medium text-truncate">
                   {{ entry.provider.id }}
                 </v-list-item-title>
-            <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1" style="font-family: monospace;">
-              <span>{{ entry.provider.model }}</span>
-              <v-icon v-if="supportsImageInput(entry.metadata)" size="14" color="grey">
-                mdi-eye-outline
-              </v-icon>
-              <v-icon v-if="supportsToolCall(entry.metadata)" size="14" color="grey">
-                mdi-wrench
-              </v-icon>
-              <v-icon v-if="supportsReasoning(entry.metadata)" size="14" color="grey">
-                mdi-brain
-              </v-icon>
-              <span v-if="formatContextLimit(entry.metadata)">
-                {{ formatContextLimit(entry.metadata) }}
-              </span>
-            </v-list-item-subtitle>
-            <template #append>
-              <div class="d-flex align-center ga-1" @click.stop>
-                <v-switch
-                  v-model="entry.provider.enable"
-                  density="compact"
-                  inset
-                  hide-details
-                  color="primary"
-                  class="mr-1"
-                  @update:modelValue="emit('toggle-provider-enable', entry.provider, $event)"
-                ></v-switch>
-                <v-tooltip location="top" max-width="300">
-                  {{ tm('availability.test') }}
-                  <template #activator="{ props }">
+                <v-list-item-subtitle
+                  class="text-caption text-grey d-flex align-center ga-1"
+                  style="font-family: monospace;"
+                >
+                  <span>{{ entry.provider.model }}</span>
+                  <v-icon
+                    v-if="supportsImageInput(entry.metadata)"
+                    size="14"
+                    color="grey"
+                  >
+                    mdi-eye-outline
+                  </v-icon>
+                  <v-icon
+                    v-if="supportsToolCall(entry.metadata)"
+                    size="14"
+                    color="grey"
+                  >
+                    mdi-wrench
+                  </v-icon>
+                  <v-icon
+                    v-if="supportsReasoning(entry.metadata)"
+                    size="14"
+                    color="grey"
+                  >
+                    mdi-brain
+                  </v-icon>
+                  <span v-if="formatContextLimit(entry.metadata)">
+                    {{ formatContextLimit(entry.metadata) }}
+                  </span>
+                </v-list-item-subtitle>
+                <template #append>
+                  <div
+                    class="d-flex align-center ga-1"
+                    @click.stop
+                  >
+                    <v-switch
+                      v-model="entry.provider.enable"
+                      density="compact"
+                      inset
+                      hide-details
+                      color="primary"
+                      class="mr-1"
+                      @update:modelValue="emit('toggle-provider-enable', entry.provider, $event)"
+                    />
+                    <v-tooltip
+                      location="top"
+                      max-width="300"
+                    >
+                      {{ tm('availability.test') }}
+                      <template #activator="{ props }">
+                        <v-btn
+                          icon="mdi-connection"
+                          size="small"
+                          variant="text"
+                          :disabled="!entry.provider.enable"
+                          :loading="isProviderTesting(entry.provider.id)"
+                          v-bind="props"
+                          @click.stop="emit('test-provider', entry.provider)"
+                        />
+                      </template>
+                    </v-tooltip>
+
+                    <v-tooltip
+                      location="top"
+                      max-width="300"
+                    >
+                      {{ tm('models.configure') }}
+                      <template #activator="{ props }">
+                        <v-btn
+                          icon="mdi-cog"
+                          size="small"
+                          variant="text"
+                          v-bind="props"
+                          @click.stop="emit('open-provider-edit', entry.provider)"
+                        />
+                      </template>
+                    </v-tooltip>
+
                     <v-btn
-                      icon="mdi-connection"
+                      icon="mdi-delete"
                       size="small"
                       variant="text"
-                      :disabled="!entry.provider.enable"
-                      :loading="isProviderTesting(entry.provider.id)"
-                      v-bind="props"
-                      @click.stop="emit('test-provider', entry.provider)"
-                    ></v-btn>
-                  </template>
-                </v-tooltip>
-
-                <v-tooltip location="top" max-width="300">
-                  {{ tm('models.configure') }}
-                  <template #activator="{ props }">
-                    <v-btn
-                      icon="mdi-cog"
-                      size="small"
-                      variant="text"
-                      v-bind="props"
-                      @click.stop="emit('open-provider-edit', entry.provider)"
-                    ></v-btn>
-                  </template>
-                </v-tooltip>
-
-                <v-btn icon="mdi-delete" size="small" variant="text" color="error" @click.stop="emit('delete-provider', entry.provider)"></v-btn>
-              </div>
-            </template>
+                      color="error"
+                      @click.stop="emit('delete-provider', entry.provider)"
+                    />
+                  </div>
+                </template>
               </v-list-item>
             </template>
             <div>
@@ -120,27 +162,52 @@
             </div>
           </v-tooltip>
 
-          <v-tooltip location="top" max-width="400" v-else>
+          <v-tooltip
+            v-else
+            location="top"
+            max-width="400"
+          >
             <template #activator="{ props }">
-              <v-list-item v-bind="props" class="cursor-pointer" @click="emit('add-model-provider', entry.model)">
+              <v-list-item
+                v-bind="props"
+                class="cursor-pointer"
+                @click="emit('add-model-provider', entry.model)"
+              >
                 <v-list-item-title>{{ entry.model }}</v-list-item-title>
-            <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1">
-              <span>{{ entry.model }}</span>
-              <v-icon v-if="supportsImageInput(entry.metadata)" size="14" color="grey">
-                mdi-eye-outline
-              </v-icon>
-              <v-icon v-if="supportsToolCall(entry.metadata)" size="14" color="grey">
-                mdi-wrench
-              </v-icon>
-              <v-icon v-if="supportsReasoning(entry.metadata)" size="14" color="grey">
-                mdi-brain
-              </v-icon>
-              <span v-if="formatContextLimit(entry.metadata)">
-                {{ formatContextLimit(entry.metadata) }}
-              </span>
-            </v-list-item-subtitle>
+                <v-list-item-subtitle class="text-caption text-grey d-flex align-center ga-1">
+                  <span>{{ entry.model }}</span>
+                  <v-icon
+                    v-if="supportsImageInput(entry.metadata)"
+                    size="14"
+                    color="grey"
+                  >
+                    mdi-eye-outline
+                  </v-icon>
+                  <v-icon
+                    v-if="supportsToolCall(entry.metadata)"
+                    size="14"
+                    color="grey"
+                  >
+                    mdi-wrench
+                  </v-icon>
+                  <v-icon
+                    v-if="supportsReasoning(entry.metadata)"
+                    size="14"
+                    color="grey"
+                  >
+                    mdi-brain
+                  </v-icon>
+                  <span v-if="formatContextLimit(entry.metadata)">
+                    {{ formatContextLimit(entry.metadata) }}
+                  </span>
+                </v-list-item-subtitle>
                 <template #append>
-                  <v-btn icon="mdi-plus" size="small" variant="text" color="primary"></v-btn>
+                  <v-btn
+                    icon="mdi-plus"
+                    size="small"
+                    variant="text"
+                    color="primary"
+                  />
                 </template>
               </v-list-item>
             </template>
@@ -152,8 +219,15 @@
       </template>
       <template v-else>
         <div class="text-center pa-4 text-medium-emphasis">
-          <v-icon size="48" color="grey-lighten-1">mdi-package-variant</v-icon>
-          <p class="text-grey mt-2">{{ tm('models.empty') }}</p>
+          <v-icon
+            size="48"
+            color="grey-lighten-1"
+          >
+            mdi-package-variant
+          </v-icon>
+          <p class="text-grey mt-2">
+            {{ tm('models.empty') }}
+          </p>
         </div>
       </template>
     </v-list>
diff --git a/dashboard/src/components/provider/ProviderSourcesPanel.vue b/dashboard/src/components/provider/ProviderSourcesPanel.vue
index 8d230d4bc..9b011bd4f 100644
--- a/dashboard/src/components/provider/ProviderSourcesPanel.vue
+++ b/dashboard/src/components/provider/ProviderSourcesPanel.vue
@@ -1,8 +1,13 @@
 <template>
-  <v-card class="provider-sources-panel h-100" elevation="0">
+  <v-card
+    class="provider-sources-panel h-100"
+    elevation="0"
+  >
     <div class="d-flex align-center justify-space-between px-4 pt-4 pb-2">
       <div class="d-flex align-center ga-2">
-        <h3 class="mb-0">{{ tm('providerSources.title') }}</h3>
+        <h3 class="mb-0">
+          {{ tm('providerSources.title') }}
+        </h3>
       </div>
       <StyledMenu>
         <template #activator="{ props }">
@@ -24,9 +29,23 @@
           @click="emitAddSource(sourceType.value)"
         >
           <template #prepend>
-            <v-avatar size="18" rounded="0" class="me-2">
-              <v-img v-if="sourceType.icon" :src="sourceType.icon" alt="provider icon" cover></v-img>
-              <v-icon v-else size="16">mdi-shape-outline</v-icon>
+            <v-avatar
+              size="18"
+              rounded="0"
+              class="me-2"
+            >
+              <v-img
+                v-if="sourceType.icon"
+                :src="sourceType.icon"
+                alt="provider icon"
+                cover
+              />
+              <v-icon
+                v-else
+                size="16"
+              >
+                mdi-shape-outline
+              </v-icon>
             </v-avatar>
           </template>
           <v-list-item-title>{{ sourceType.label }}</v-list-item-title>
@@ -34,7 +53,10 @@
       </StyledMenu>
     </div>
 
-    <div v-if="isMobile && displayedProviderSources.length > 0" class="px-4 pb-3">
+    <div
+      v-if="isMobile && displayedProviderSources.length > 0"
+      class="px-4 pb-3"
+    >
       <div class="d-flex align-center ga-2">
         <v-select
           :model-value="selectedId"
@@ -52,9 +74,23 @@
           <template #item="{ props: itemProps, item }">
             <v-list-item v-bind="itemProps">
               <template #prepend>
-                <v-avatar size="18" rounded="0" class="me-2">
-                  <v-img v-if="item.raw.icon" :src="item.raw.icon" alt="provider icon" cover></v-img>
-                  <v-icon v-else size="16">mdi-shape-outline</v-icon>
+                <v-avatar
+                  size="18"
+                  rounded="0"
+                  class="me-2"
+                >
+                  <v-img
+                    v-if="item.raw.icon"
+                    :src="item.raw.icon"
+                    alt="provider icon"
+                    cover
+                  />
+                  <v-icon
+                    v-else
+                    size="16"
+                  >
+                    mdi-shape-outline
+                  </v-icon>
                 </v-avatar>
               </template>
             </v-list-item>
@@ -67,12 +103,17 @@
           size="small"
           color="error"
           @click.stop="emitDeleteSource(selectedProviderSource)"
-        ></v-btn>
+        />
       </div>
     </div>
 
     <div v-else-if="displayedProviderSources.length > 0">
-      <v-list class="provider-source-list" nav density="compact" lines="two">
+      <v-list
+        class="provider-source-list"
+        nav
+        density="compact"
+        lines="two"
+      >
         <v-list-item
           v-for="source in displayedProviderSources"
           :key="source.isPlaceholder ? `template-${source.templateKey}` : source.id"
@@ -83,13 +124,34 @@
           @click="emitSelectSource(source)"
         >
           <template #prepend>
-            <v-avatar size="32" class="bg-grey-lighten-4" rounded="0">
-              <v-img v-if="source?.provider" :src="resolveSourceIcon(source)" alt="logo" cover></v-img>
-              <v-icon v-else size="32">mdi-creation</v-icon>
+            <v-avatar
+              size="32"
+              class="bg-grey-lighten-4"
+              rounded="0"
+            >
+              <v-img
+                v-if="source?.provider"
+                :src="resolveSourceIcon(source)"
+                alt="logo"
+                cover
+              />
+              <v-icon
+                v-else
+                size="32"
+              >
+                mdi-creation
+              </v-icon>
             </v-avatar>
           </template>
-          <v-list-item-title class="font-weight-bold mb-1" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">{{ getSourceDisplayName(source) }}</v-list-item-title>
-          <v-list-item-subtitle class="text-truncate">{{ source.api_base || 'N/A' }}</v-list-item-subtitle>
+          <v-list-item-title
+            class="font-weight-bold mb-1"
+            style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"
+          >
+            {{ getSourceDisplayName(source) }}
+          </v-list-item-title>
+          <v-list-item-subtitle class="text-truncate">
+            {{ source.api_base || 'N/A' }}
+          </v-list-item-subtitle>
           <template #append>
             <div class="d-flex align-center ga-1">
               <v-btn
@@ -99,15 +161,25 @@
                 size="x-small"
                 color="error"
                 @click.stop="emitDeleteSource(source)"
-              ></v-btn>
+              />
             </div>
           </template>
         </v-list-item>
       </v-list>
     </div>
-    <div v-else class="text-center py-8 px-4">
-      <v-icon size="48" color="grey-lighten-1">mdi-api-off</v-icon>
-      <p class="text-grey mt-2">{{ tm('providerSources.empty') }}</p>
+    <div
+      v-else
+      class="text-center py-8 px-4"
+    >
+      <v-icon
+        size="48"
+        color="grey-lighten-1"
+      >
+        mdi-api-off
+      </v-icon>
+      <p class="text-grey mt-2">
+        {{ tm('providerSources.empty') }}
+      </p>
     </div>
   </v-card>
 </template>
diff --git a/dashboard/src/components/shared/AstrBotConfig.vue b/dashboard/src/components/shared/AstrBotConfig.vue
index bc1c86bdf..e67504c1f 100644
--- a/dashboard/src/components/shared/AstrBotConfig.vue
+++ b/dashboard/src/components/shared/AstrBotConfig.vue
@@ -155,6 +155,10 @@ function getItemPath(key) {
   return props.pathPrefix ? `${props.pathPrefix}.${key}` : key
 }
 
+function setIterableValue(key, value) {
+  Reflect.set(props.iterable, key, value)
+}
+
 function hasVisibleItemsAfter(items, currentIndex) {
   const itemEntries = Object.entries(items)
 
@@ -172,19 +176,28 @@ function hasVisibleItemsAfter(items, currentIndex) {
 </script>
 
 <template>
-  <div class="config-section" v-if="iterable && metadata[metadataKey]?.type === 'object'">
+  <div
+    v-if="iterable && metadata[metadataKey]?.type === 'object'"
+    class="config-section"
+  >
     <v-list-item-title class="config-title">
       {{ translateIfKey(metadata[metadataKey]?.description) }} <span class="metadata-key">({{ metadataKey }})</span>
     </v-list-item-title>
     <v-list-item-subtitle class="config-hint">
-      <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint" class="important-hint">‼️</span>
+      <span
+        v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint"
+        class="important-hint"
+      >‼️</span>
       {{ translateIfKey(metadata[metadataKey]?.hint) }}
     </v-list-item-subtitle>
   </div>
 
   <v-card-text class="px-0 py-1">
     <!-- Object Type Configuration -->
-    <div v-if="metadata[metadataKey]?.type === 'object' || metadata[metadataKey]?.config_template" class="object-config">
+    <div
+      v-if="metadata[metadataKey]?.type === 'object' || metadata[metadataKey]?.config_template"
+      class="object-config"
+    >
       <!-- Provider-level hint -->
       <v-alert
         v-if="providerHint"
@@ -197,26 +210,41 @@ function hasVisibleItemsAfter(items, currentIndex) {
         {{ translateIfKey(providerHint) }}
       </v-alert>
 
-      <div v-for="(val, key, index) in filteredIterable" :key="key" class="config-item">
+      <div
+        v-for="(val, key, index) in filteredIterable"
+        :key="key"
+        class="config-item"
+      >
         <!-- Nested Object -->
-        <div v-if="metadata[metadataKey].items[key]?.type === 'object'" class="nested-object">
-          <div v-if="metadata[metadataKey].items[key] && !metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)" class="nested-container">
+        <div
+          v-if="metadata[metadataKey].items[key]?.type === 'object'"
+          class="nested-object"
+        >
+          <div
+            v-if="metadata[metadataKey].items[key] && !metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)"
+            class="nested-container"
+          >
             <v-expand-transition>
               <AstrBotConfig
                 :metadata="metadata[metadataKey].items"
                 :iterable="iterable[key]"
-                :metadataKey="key"
-                :pluginName="pluginName"
-                :pathPrefix="getItemPath(key)"
-              >
-              </AstrBotConfig>
+                :metadata-key="key"
+                :plugin-name="pluginName"
+                :path-prefix="getItemPath(key)"
+              />
             </v-expand-transition>
           </div>
         </div>
 
         <!-- Template List -->
-        <div v-else-if="metadata[metadataKey].items[key]?.type === 'template_list'" class="nested-object w-100">
-          <div v-if="!metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)" class="nested-container">
+        <div
+          v-else-if="metadata[metadataKey].items[key]?.type === 'template_list'"
+          class="nested-object w-100"
+        >
+          <div
+            v-if="!metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)"
+            class="nested-container"
+          >
             <div class="config-section mb-2">
               <v-list-item-title class="config-title">
                 <span v-if="metadata[metadataKey].items[key]?.description">
@@ -226,22 +254,34 @@ function hasVisibleItemsAfter(items, currentIndex) {
                 <span v-else>{{ key }}</span>
               </v-list-item-title>
               <v-list-item-subtitle class="config-hint">
-                <span v-if="metadata[metadataKey].items[key]?.obvious_hint && metadata[metadataKey].items[key]?.hint" class="important-hint">‼️</span>
+                <span
+                  v-if="metadata[metadataKey].items[key]?.obvious_hint && metadata[metadataKey].items[key]?.hint"
+                  class="important-hint"
+                >‼️</span>
                 {{ translateIfKey(metadata[metadataKey].items[key]?.hint) }}
               </v-list-item-subtitle>
             </div>
+            <!-- eslint-disable-next-line vue/no-mutating-props -->
             <TemplateListEditor
-              v-model="iterable[key]"
+              :model-value="iterable[key]"
               :templates="metadata[metadataKey].items[key]?.templates || {}"
               class="config-field"
+              @update:model-value="setIterableValue(key, $event)"
             />
           </div>
         </div>
 
         <!-- Regular Property -->
         <template v-else>
-          <v-row v-if="!metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)" class="config-row">
-            <v-col cols="12" sm="6" class="property-info">
+          <v-row
+            v-if="!metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)"
+            class="config-row"
+          >
+            <v-col
+              cols="12"
+              sm="6"
+              class="property-info"
+            >
               <v-list-item density="compact">
                 <v-list-item-title class="property-name">
                   <span v-if="metadata[metadataKey].items[key]?.description">
@@ -252,21 +292,29 @@ function hasVisibleItemsAfter(items, currentIndex) {
                 </v-list-item-title>
 
                 <v-list-item-subtitle class="property-hint">
-                  <span v-if="metadata[metadataKey].items[key]?.obvious_hint && getItemHint(key, metadata[metadataKey].items[key])"
-                        class="important-hint">‼️</span>
+                  <span
+                    v-if="metadata[metadataKey].items[key]?.obvious_hint && getItemHint(key, metadata[metadataKey].items[key])"
+                    class="important-hint"
+                  >‼️</span>
                   {{ translateIfKey(getItemHint(key, metadata[metadataKey].items[key])) }}
                 </v-list-item-subtitle>
               </v-list-item>
             </v-col>
 
-            <v-col cols="12" sm="6" class="config-input">
+            <v-col
+              cols="12"
+              sm="6"
+              class="config-input"
+            >
+              <!-- eslint-disable-next-line vue/no-mutating-props -->
               <ConfigItemRenderer
-                v-model="iterable[key]"
+                :model-value="iterable[key]"
                 :item-meta="metadata[metadataKey].items[key] || null"
                 :plugin-name="pluginName"
                 :config-key="getItemPath(key)"
                 :loading="loadingEmbeddingDim"
                 :show-fullscreen-btn="!!metadata[metadataKey].items[key]?.editor_mode"
+                @update:model-value="setIterableValue(key, $event)"
                 @get-embedding-dim="getEmbeddingDimensions(iterable)"
                 @open-fullscreen="openEditorDialog(key, iterable, metadata[metadataKey].items[key]?.editor_theme, metadata[metadataKey].items[key]?.editor_language)"
               />
@@ -276,15 +324,22 @@ function hasVisibleItemsAfter(items, currentIndex) {
           <v-divider
             v-if="hasVisibleItemsAfter(filteredIterable, index) && !metadata[metadataKey].items[key]?.invisible && shouldShowItem(metadata[metadataKey].items[key], key)"
             class="config-divider"
-          ></v-divider>
+          />
         </template>
       </div>
     </div>
 
     <!-- Simple Value Configuration -->
-    <div v-else class="simple-config">
+    <div
+      v-else
+      class="simple-config"
+    >
       <v-row class="config-row">
-        <v-col cols="12" sm="7" class="property-info">
+        <v-col
+          cols="12"
+          sm="7"
+          class="property-info"
+        >
           <v-list-item density="compact">
             <v-list-item-title class="property-name">
               {{ metadata[metadataKey]?.description }}
@@ -292,54 +347,80 @@ function hasVisibleItemsAfter(items, currentIndex) {
             </v-list-item-title>
 
             <v-list-item-subtitle class="property-hint">
-              <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint" class="important-hint">‼️</span>
+              <span
+                v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint"
+                class="important-hint"
+              >‼️</span>
               {{ metadata[metadataKey]?.hint }}
             </v-list-item-subtitle>
           </v-list-item>
         </v-col>
 
-        <v-col cols="12" sm="5" class="config-input">
+        <v-col
+          cols="12"
+          sm="5"
+          class="config-input"
+        >
+          <!-- eslint-disable-next-line vue/no-mutating-props -->
           <TemplateListEditor
             v-if="metadata[metadataKey]?.type === 'template_list' && !metadata[metadataKey]?.invisible"
-            v-model="iterable[metadataKey]"
+            :model-value="iterable[metadataKey]"
             :templates="metadata[metadataKey]?.templates || {}"
             class="config-field"
+            @update:model-value="setIterableValue(metadataKey, $event)"
           />
+          <!-- eslint-disable-next-line vue/no-mutating-props -->
           <ConfigItemRenderer
             v-else
-            v-model="iterable[metadataKey]"
+            :model-value="iterable[metadataKey]"
             :item-meta="metadata[metadataKey]"
             :plugin-name="pluginName"
             :config-key="getItemPath(metadataKey)"
+            @update:model-value="setIterableValue(metadataKey, $event)"
           />
         </v-col>
       </v-row>
 
-      <v-divider class="my-2 config-divider"></v-divider>
+      <v-divider class="my-2 config-divider" />
     </div>
   </v-card-text>
 
   <!-- Full Screen Editor Dialog -->
-  <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" scrollable>
+  <v-dialog
+    v-model="dialog"
+    fullscreen
+    transition="dialog-bottom-transition"
+    scrollable
+  >
     <v-card>
-      <v-toolbar color="primary" dark>
-        <v-btn icon @click="dialog = false">
+      <v-toolbar
+        color="primary"
+        dark
+      >
+        <v-btn
+          icon
+          @click="dialog = false"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
         <v-toolbar-title>{{ t('core.common.editor.editingTitle') }} - {{ currentEditingKey }}</v-toolbar-title>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-toolbar-items>
-          <v-btn variant="text" @click="saveEditedContent">{{ t('core.common.save') }}</v-btn>
+          <v-btn
+            variant="text"
+            @click="saveEditedContent"
+          >
+            {{ t('core.common.save') }}
+          </v-btn>
         </v-toolbar-items>
       </v-toolbar>
       <v-card-text class="pa-0">
         <VueMonacoEditor
+          v-model:value="currentEditingKeyIterable[currentEditingKey]"
           :theme="currentEditingTheme"
           :language="currentEditingLanguage"
           style="height: calc(100vh - 64px);"
-          v-model:value="currentEditingKeyIterable[currentEditingKey]"
-        >
-        </VueMonacoEditor>
+        />
       </v-card-text>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/components/shared/AstrBotConfigV4.vue b/dashboard/src/components/shared/AstrBotConfigV4.vue
index 9c86c419a..ca7e35d70 100644
--- a/dashboard/src/components/shared/AstrBotConfigV4.vue
+++ b/dashboard/src/components/shared/AstrBotConfigV4.vue
@@ -206,28 +206,51 @@ function getSpecialSubtype(value) {
 </script>
 
 <template>
-
-
-  <v-card v-if="shouldShowSection()" style="margin-bottom: 16px; padding-bottom: 8px; background-color: rgb(var(--v-theme-background));"
-    rounded="md" variant="outlined">
-    <v-card-text class="config-section" v-if="metadata[metadataKey]?.type === 'object'" style="padding-bottom: 8px;">
+  <v-card
+    v-if="shouldShowSection()"
+    style="margin-bottom: 16px; padding-bottom: 8px; background-color: rgb(var(--v-theme-background));"
+    rounded="md"
+    variant="outlined"
+  >
+    <v-card-text
+      v-if="metadata[metadataKey]?.type === 'object'"
+      class="config-section"
+      style="padding-bottom: 8px;"
+    >
       <v-list-item-title class="config-title">
         {{ translateIfKey(metadata[metadataKey]?.description) }}
       </v-list-item-title>
       <v-list-item-subtitle class="config-hint">
-        <span v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint" class="important-hint">‼️</span>
-        <span v-html="renderHint(metadata[metadataKey]?.hint)"></span>
+        <span
+          v-if="metadata[metadataKey]?.obvious_hint && metadata[metadataKey]?.hint"
+          class="important-hint"
+        >‼️</span>
+        <span v-html="renderHint(metadata[metadataKey]?.hint)" />
       </v-list-item-subtitle>
     </v-card-text>
 
     <!-- Object Type Configuration with JSON Selector Support -->
-    <div v-if="metadata[metadataKey]?.type === 'object'" class="object-config">
-      <div v-for="(itemMeta, itemKey, index) in metadata[metadataKey].items" :key="itemKey" class="config-item">
+    <div
+      v-if="metadata[metadataKey]?.type === 'object'"
+      class="object-config"
+    >
+      <div
+        v-for="(itemMeta, itemKey, index) in metadata[metadataKey].items"
+        :key="itemKey"
+        class="config-item"
+      >
         <!-- Check if itemKey is a JSON selector -->
         <template v-if="shouldShowItem(itemMeta, itemKey)">
           <!-- JSON Selector Property -->
-          <v-row v-if="!itemMeta?.invisible" class="config-row">
-            <v-col cols="12" sm="6" class="property-info">
+          <v-row
+            v-if="!itemMeta?.invisible"
+            class="config-row"
+          >
+            <v-col
+              cols="12"
+              sm="6"
+              class="property-info"
+            >
               <v-list-item density="compact">
                 <v-list-item-title class="property-name">
                   {{ translateIfKey(itemMeta?.description) || itemKey }}
@@ -235,12 +258,19 @@ function getSpecialSubtype(value) {
                 </v-list-item-title>
 
                 <v-list-item-subtitle class="property-hint">
-                  <span v-if="itemMeta?.obvious_hint && itemMeta?.hint" class="important-hint">‼️</span>
-                  <span v-html="renderHint(itemMeta?.hint)"></span>
+                  <span
+                    v-if="itemMeta?.obvious_hint && itemMeta?.hint"
+                    class="important-hint"
+                  >‼️</span>
+                  <span v-html="renderHint(itemMeta?.hint)" />
                 </v-list-item-subtitle>
               </v-list-item>
             </v-col>
-            <v-col cols="12" sm="6" class="config-input">
+            <v-col
+              cols="12"
+              sm="6"
+              class="config-input"
+            >
               <TemplateListEditor
                 v-if="itemMeta?.type === 'template_list'"
                 v-model="createSelectorModel(itemKey).value"
@@ -258,17 +288,30 @@ function getSpecialSubtype(value) {
           </v-row>
 
           <!-- Plugin Set Selector 全宽显示区域 -->
-          <v-row v-if="!itemMeta?.invisible && itemMeta?._special === 'select_plugin_set'"
-            class="plugin-set-display-row">
-            <v-col cols="12" class="plugin-set-display">
-              <div v-if="createSelectorModel(itemKey).value && createSelectorModel(itemKey).value.length > 0"
-                class="selected-plugins-full-width">
+          <v-row
+            v-if="!itemMeta?.invisible && itemMeta?._special === 'select_plugin_set'"
+            class="plugin-set-display-row"
+          >
+            <v-col
+              cols="12"
+              class="plugin-set-display"
+            >
+              <div
+                v-if="createSelectorModel(itemKey).value && createSelectorModel(itemKey).value.length > 0"
+                class="selected-plugins-full-width"
+              >
                 <div class="plugins-header">
                   <small class="text-grey">{{ t('core.shared.pluginSetSelector.selectedPluginsLabel') }}</small>
                 </div>
                 <div class="d-flex flex-wrap ga-2 mt-2">
-                  <v-chip v-for="plugin in (createSelectorModel(itemKey).value || [])" :key="plugin" size="small" label
-                    color="primary" variant="outlined">
+                  <v-chip
+                    v-for="plugin in (createSelectorModel(itemKey).value || [])"
+                    :key="plugin"
+                    size="small"
+                    label
+                    color="primary"
+                    variant="outlined"
+                  >
                     {{ plugin === '*' ? t('core.shared.pluginSetSelector.allPluginsLabel') : plugin }}
                   </v-chip>
                 </div>
@@ -281,35 +324,58 @@ function getSpecialSubtype(value) {
             v-if="!itemMeta?.invisible && itemMeta?._special === 'select_persona' && itemKey === 'provider_settings.default_personality'"
             class="persona-preview-row"
           >
-            <v-col cols="12" class="persona-preview-display">
+            <v-col
+              cols="12"
+              class="persona-preview-display"
+            >
               <PersonaQuickPreview :model-value="createSelectorModel(itemKey).value" />
             </v-col>
           </v-row>
         </template>
-        <v-divider class="config-divider"
-          v-if="shouldShowItem(itemMeta, itemKey) && hasVisibleItemsAfter(metadata[metadataKey].items, index)"></v-divider>
+        <v-divider
+          v-if="shouldShowItem(itemMeta, itemKey) && hasVisibleItemsAfter(metadata[metadataKey].items, index)"
+          class="config-divider"
+        />
       </div>
-
     </div>
   </v-card>
 
   <!-- Full Screen Editor Dialog -->
-  <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" scrollable>
+  <v-dialog
+    v-model="dialog"
+    fullscreen
+    transition="dialog-bottom-transition"
+    scrollable
+  >
     <v-card>
-      <v-toolbar color="primary" dark>
-        <v-btn icon @click="dialog = false">
+      <v-toolbar
+        color="primary"
+        dark
+      >
+        <v-btn
+          icon
+          @click="dialog = false"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
         <v-toolbar-title>{{ t('core.common.editor.editingTitle') }} - {{ currentEditingKey }}</v-toolbar-title>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-toolbar-items>
-          <v-btn variant="text" @click="saveEditedContent">{{ t('core.common.save') }}</v-btn>
+          <v-btn
+            variant="text"
+            @click="saveEditedContent"
+          >
+            {{ t('core.common.save') }}
+          </v-btn>
         </v-toolbar-items>
       </v-toolbar>
       <v-card-text class="pa-0">
-        <VueMonacoEditor :theme="currentEditingTheme" :language="currentEditingLanguage"
-          style="height: calc(100vh - 64px);" v-model:value="currentEditingKeyIterable[currentEditingKey]">
-        </VueMonacoEditor>
+        <VueMonacoEditor
+          v-model:value="currentEditingKeyIterable[currentEditingKey]"
+          :theme="currentEditingTheme"
+          :language="currentEditingLanguage"
+          style="height: calc(100vh - 64px);"
+        />
       </v-card-text>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/components/shared/BackupDialog.vue b/dashboard/src/components/shared/BackupDialog.vue
index c69aa4464..6164e2afd 100644
--- a/dashboard/src/components/shared/BackupDialog.vue
+++ b/dashboard/src/components/shared/BackupDialog.vue
@@ -1,369 +1,681 @@
 <template>
-    <v-dialog v-model="isOpen" persistent max-width="700" scrollable>
-        <v-card>
-            <v-card-title class="d-flex align-center">
-                <v-icon class="mr-2">mdi-backup-restore</v-icon>
-                {{ t('features.settings.backup.dialog.title') }}
-            </v-card-title>
+  <v-dialog
+    v-model="isOpen"
+    persistent
+    max-width="700"
+    scrollable
+  >
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2">
+          mdi-backup-restore
+        </v-icon>
+        {{ t('features.settings.backup.dialog.title') }}
+      </v-card-title>
 
-            <v-card-text class="pa-6">
-                <!-- 选项卡 -->
-                <v-tabs v-model="activeTab" color="primary" class="mb-4">
-                    <v-tab value="export">
-                        <v-icon class="mr-2">mdi-export</v-icon>
-                        {{ t('features.settings.backup.tabs.export') }}
-                    </v-tab>
-                    <v-tab value="import">
-                        <v-icon class="mr-2">mdi-import</v-icon>
-                        {{ t('features.settings.backup.tabs.import') }}
-                    </v-tab>
-                    <v-tab value="list">
-                        <v-icon class="mr-2">mdi-format-list-bulleted</v-icon>
-                        {{ t('features.settings.backup.tabs.list') }}
-                    </v-tab>
-                </v-tabs>
+      <v-card-text class="pa-6">
+        <!-- 选项卡 -->
+        <v-tabs
+          v-model="activeTab"
+          color="primary"
+          class="mb-4"
+        >
+          <v-tab value="export">
+            <v-icon class="mr-2">
+              mdi-export
+            </v-icon>
+            {{ t('features.settings.backup.tabs.export') }}
+          </v-tab>
+          <v-tab value="import">
+            <v-icon class="mr-2">
+              mdi-import
+            </v-icon>
+            {{ t('features.settings.backup.tabs.import') }}
+          </v-tab>
+          <v-tab value="list">
+            <v-icon class="mr-2">
+              mdi-format-list-bulleted
+            </v-icon>
+            {{ t('features.settings.backup.tabs.list') }}
+          </v-tab>
+        </v-tabs>
 
-                <v-window v-model="activeTab">
-                    <!-- 导出标签页 -->
-                    <v-window-item value="export">
-                        <div v-if="exportStatus === 'idle'" class="text-center py-8">
-                            <v-icon size="64" color="primary" class="mb-4">mdi-cloud-upload</v-icon>
-                            <h3 class="mb-4">{{ t('features.settings.backup.export.title') }}</h3>
-                            <p class="mb-4 text-grey">{{ t('features.settings.backup.export.description') }}</p>
-                            <v-alert type="info" variant="tonal" class="mb-4 text-left">
-                                <template v-slot:prepend>
-                                    <v-icon>mdi-information</v-icon>
-                                </template>
-                                {{ t('features.settings.backup.export.includes') }}
-                            </v-alert>
-                            <v-btn color="primary" size="large" @click="startExport" :loading="exportStatus === 'processing'">
-                                <v-icon class="mr-2">mdi-export</v-icon>
-                                {{ t('features.settings.backup.export.button') }}
-                            </v-btn>
-                        </div>
+        <v-window v-model="activeTab">
+          <!-- 导出标签页 -->
+          <v-window-item value="export">
+            <div
+              v-if="exportStatus === 'idle'"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="primary"
+                class="mb-4"
+              >
+                mdi-cloud-upload
+              </v-icon>
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.export.title') }}
+              </h3>
+              <p class="mb-4 text-grey">
+                {{ t('features.settings.backup.export.description') }}
+              </p>
+              <v-alert
+                type="info"
+                variant="tonal"
+                class="mb-4 text-left"
+              >
+                <template #prepend>
+                  <v-icon>mdi-information</v-icon>
+                </template>
+                {{ t('features.settings.backup.export.includes') }}
+              </v-alert>
+              <v-btn
+                color="primary"
+                size="large"
+                :loading="exportStatus === 'processing'"
+                @click="startExport"
+              >
+                <v-icon class="mr-2">
+                  mdi-export
+                </v-icon>
+                {{ t('features.settings.backup.export.button') }}
+              </v-btn>
+            </div>
 
-                        <div v-else-if="exportStatus === 'processing'" class="text-center py-8">
-                            <v-progress-circular indeterminate color="primary" size="64" class="mb-4"></v-progress-circular>
-                            <h3 class="mb-4">{{ t('features.settings.backup.export.processing') }}</h3>
-                            <p class="text-grey">{{ exportProgress.message || t('features.settings.backup.export.wait') }}</p>
-                            <v-progress-linear :model-value="exportProgress.current" :max="exportProgress.total" class="mt-4" color="primary"></v-progress-linear>
-                        </div>
+            <div
+              v-else-if="exportStatus === 'processing'"
+              class="text-center py-8"
+            >
+              <v-progress-circular
+                indeterminate
+                color="primary"
+                size="64"
+                class="mb-4"
+              />
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.export.processing') }}
+              </h3>
+              <p class="text-grey">
+                {{ exportProgress.message || t('features.settings.backup.export.wait') }}
+              </p>
+              <v-progress-linear
+                :model-value="exportProgress.current"
+                :max="exportProgress.total"
+                class="mt-4"
+                color="primary"
+              />
+            </div>
 
-                        <div v-else-if="exportStatus === 'completed'" class="text-center py-8">
-                            <v-icon size="64" color="success" class="mb-4">mdi-check-circle</v-icon>
-                            <h3 class="mb-4">{{ t('features.settings.backup.export.completed') }}</h3>
-                            <p class="mb-4">{{ exportResult?.filename }}</p>
-                            <v-btn color="primary" @click="downloadBackup(exportResult?.filename)" class="mr-2">
-                                <v-icon class="mr-2">mdi-download</v-icon>
-                                {{ t('features.settings.backup.export.download') }}
-                            </v-btn>
-                            <v-btn color="grey" variant="text" @click="resetExport">
-                                {{ t('features.settings.backup.export.another') }}
-                            </v-btn>
-                        </div>
+            <div
+              v-else-if="exportStatus === 'completed'"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="success"
+                class="mb-4"
+              >
+                mdi-check-circle
+              </v-icon>
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.export.completed') }}
+              </h3>
+              <p class="mb-4">
+                {{ exportResult?.filename }}
+              </p>
+              <v-btn
+                color="primary"
+                class="mr-2"
+                @click="downloadBackup(exportResult?.filename)"
+              >
+                <v-icon class="mr-2">
+                  mdi-download
+                </v-icon>
+                {{ t('features.settings.backup.export.download') }}
+              </v-btn>
+              <v-btn
+                color="grey"
+                variant="text"
+                @click="resetExport"
+              >
+                {{ t('features.settings.backup.export.another') }}
+              </v-btn>
+            </div>
 
-                        <div v-else-if="exportStatus === 'failed'" class="text-center py-8">
-                            <v-icon size="64" color="error" class="mb-4">mdi-alert-circle</v-icon>
-                            <h3 class="mb-4">{{ t('features.settings.backup.export.failed') }}</h3>
-                            <v-alert type="error" variant="tonal" class="mb-4">
-                                {{ exportError }}
-                            </v-alert>
-                            <v-btn color="primary" @click="resetExport">
-                                {{ t('features.settings.backup.export.retry') }}
-                            </v-btn>
-                        </div>
-                    </v-window-item>
+            <div
+              v-else-if="exportStatus === 'failed'"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="error"
+                class="mb-4"
+              >
+                mdi-alert-circle
+              </v-icon>
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.export.failed') }}
+              </h3>
+              <v-alert
+                type="error"
+                variant="tonal"
+                class="mb-4"
+              >
+                {{ exportError }}
+              </v-alert>
+              <v-btn
+                color="primary"
+                @click="resetExport"
+              >
+                {{ t('features.settings.backup.export.retry') }}
+              </v-btn>
+            </div>
+          </v-window-item>
 
-                    <!-- 导入标签页 -->
-                    <v-window-item value="import">
-                        <!-- 步骤1: 选择文件 -->
-                        <div v-if="importStatus === 'idle'" class="py-4">
-                            <v-alert type="warning" variant="tonal" class="mb-4">
-                                <template v-slot:prepend>
-                                    <v-icon>mdi-alert</v-icon>
-                                </template>
-                                {{ t('features.settings.backup.import.warning') }}
-                            </v-alert>
+          <!-- 导入标签页 -->
+          <v-window-item value="import">
+            <!-- 步骤1: 选择文件 -->
+            <div
+              v-if="importStatus === 'idle'"
+              class="py-4"
+            >
+              <v-alert
+                type="warning"
+                variant="tonal"
+                class="mb-4"
+              >
+                <template #prepend>
+                  <v-icon>mdi-alert</v-icon>
+                </template>
+                {{ t('features.settings.backup.import.warning') }}
+              </v-alert>
 
-                            <v-file-input
-                                v-model="importFile"
-                                :label="t('features.settings.backup.import.selectFile')"
-                                accept=".zip"
-                                prepend-icon="mdi-file-upload"
-                                show-size
-                                class="mb-4"
-                            ></v-file-input>
+              <v-file-input
+                v-model="importFile"
+                :label="t('features.settings.backup.import.selectFile')"
+                accept=".zip"
+                prepend-icon="mdi-file-upload"
+                show-size
+                class="mb-4"
+              />
 
-                            <div class="d-flex justify-center">
-                                <v-btn
-                                    color="primary"
-                                    size="large"
-                                    @click="uploadAndCheck"
-                                    :disabled="!importFile"
-                                    :loading="importStatus === 'uploading'"
-                                >
-                                    <v-icon class="mr-2">mdi-upload</v-icon>
-                                    {{ t('features.settings.backup.import.uploadAndCheck') }}
-                                </v-btn>
-                            </div>
-                        </div>
-
-                        <!-- 步骤1.5: 上传中 -->
-                        <div v-else-if="importStatus === 'uploading'" class="text-center py-8">
-                            <v-icon size="64" color="primary" class="mb-4">mdi-cloud-upload</v-icon>
-                            <h3 class="mb-4">{{ t('features.settings.backup.import.uploading') }}</h3>
-                            <p class="text-grey mb-2">
-                                {{ uploadProgress.message || t('features.settings.backup.import.uploadWait') }}
-                            </p>
-                            <p class="text-grey-darken-1 mb-4">
-                                {{ formatFileSize(uploadProgress.uploaded) }} / {{ formatFileSize(uploadProgress.total) }}
-                                ({{ uploadProgress.percent }}%)
-                            </p>
-                            <v-progress-linear
-                                :model-value="uploadProgress.percent"
-                                :max="100"
-                                class="mt-2"
-                                color="primary"
-                                height="8"
-                                rounded
-                            ></v-progress-linear>
-                        </div>
-
-                        <!-- 步骤2: 确认导入 -->
-                        <div v-else-if="importStatus === 'confirm'" class="py-4">
-                            <v-alert
-                                :type="versionAlertType"
-                                variant="tonal"
-                                class="mb-4"
-                            >
-                                <template v-slot:prepend>
-                                    <v-icon>{{ versionAlertIcon }}</v-icon>
-                                </template>
-                                <div class="confirm-message">
-                                    <div class="text-h6 mb-2">{{ versionAlertTitle }}</div>
-                                    <div class="mb-2">
-                                        <strong>{{ t('features.settings.backup.import.version.backupVersion') }}:</strong> {{ checkResult?.backup_version }}<br>
-                                        <strong>{{ t('features.settings.backup.import.version.currentVersion') }}:</strong> {{ checkResult?.current_version }}
-                                    </div>
-                                    <div v-if="checkResult?.backup_time && checkResult?.backup_time !== '未知'" class="mb-2">
-                                        <strong>{{ t('features.settings.backup.import.version.backupTime') }}:</strong> {{ formatISODate(checkResult?.backup_time) }}
-                                    </div>
-                                    <div class="mt-3" style="white-space: pre-line;">{{ versionAlertMessage }}</div>
-                                </div>
-                            </v-alert>
-
-                            <!-- 备份摘要 -->
-                            <v-card variant="outlined" class="mb-4" v-if="checkResult?.backup_summary">
-                                <v-card-title class="text-subtitle-1">
-                                    <v-icon class="mr-2">mdi-package-variant</v-icon>
-                                    {{ t('features.settings.backup.import.backupContents') }}
-                                </v-card-title>
-                                <v-card-text>
-                                    <div class="d-flex flex-wrap ga-2">
-                                        <v-chip v-if="checkResult.backup_summary.tables?.length" size="small" color="primary" variant="tonal" :ripple="false" class="non-interactive-chip">
-                                            {{ checkResult.backup_summary.tables.length }} {{ t('features.settings.backup.import.tables') }}
-                                        </v-chip>
-                                        <v-chip v-if="checkResult.backup_summary.has_knowledge_bases" size="small" color="success" variant="tonal" :ripple="false" class="non-interactive-chip">
-                                            {{ t('features.settings.backup.import.knowledgeBases') }}
-                                        </v-chip>
-                                        <v-chip v-if="checkResult.backup_summary.has_config" size="small" color="info" variant="tonal" :ripple="false" class="non-interactive-chip">
-                                            {{ t('features.settings.backup.import.configFiles') }}
-                                        </v-chip>
-                                        <v-chip v-for="dir in (checkResult.backup_summary.directories || [])" :key="dir" size="small" color="warning" variant="tonal" :ripple="false" class="non-interactive-chip">
-                                            {{ dir }}
-                                        </v-chip>
-                                    </div>
-                                </v-card-text>
-                            </v-card>
-
-                            <!-- 警告信息 -->
-                            <v-alert v-if="checkResult?.warnings?.length" type="warning" variant="tonal" class="mb-4">
-                                <div v-for="(warning, idx) in checkResult.warnings" :key="idx">{{ warning }}</div>
-                            </v-alert>
-
-                            <div class="d-flex justify-center align-center mt-4" style="gap: 16px;">
-                                <v-btn
-                                    color="grey-darken-1"
-                                    variant="outlined"
-                                    size="large"
-                                    @click="resetImport"
-                                >
-                                    <v-icon class="mr-2">mdi-close</v-icon>
-                                    {{ t('core.common.cancel') }}
-                                </v-btn>
-                                <v-btn
-                                    v-if="checkResult?.can_import"
-                                    color="error"
-                                    size="large"
-                                    variant="flat"
-                                    @click="confirmImport"
-                                >
-                                    <v-icon class="mr-2">mdi-alert</v-icon>
-                                    {{ t('features.settings.backup.import.confirmImport') }}
-                                </v-btn>
-                            </div>
-                        </div>
-
-                        <!-- 步骤3: 导入进行中 -->
-                        <div v-else-if="importStatus === 'processing'" class="text-center py-8">
-                            <v-progress-circular indeterminate color="primary" size="64" class="mb-4"></v-progress-circular>
-                            <h3 class="mb-4">{{ t('features.settings.backup.import.processing') }}</h3>
-                            <p class="text-grey">{{ importProgress.message || t('features.settings.backup.import.wait') }}</p>
-                            <v-progress-linear :model-value="importProgress.current" :max="importProgress.total" class="mt-4" color="primary"></v-progress-linear>
-                        </div>
-
-                        <div v-else-if="importStatus === 'completed'" class="text-center py-8">
-                            <v-icon size="64" color="success" class="mb-4">mdi-check-circle</v-icon>
-                            <h3 class="mb-4">{{ t('features.settings.backup.import.completed') }}</h3>
-                            <v-alert type="info" variant="tonal" class="mb-4">
-                                {{ t('features.settings.backup.import.restartRequired') }}
-                            </v-alert>
-                            <v-btn color="primary" @click="restartAstrBot" class="mr-2">
-                                <v-icon class="mr-2">mdi-restart</v-icon>
-                                {{ t('features.settings.backup.import.restartNow') }}
-                            </v-btn>
-                            <v-btn color="grey" variant="text" @click="resetImport">
-                                {{ t('core.common.close') }}
-                            </v-btn>
-                        </div>
-
-                        <div v-else-if="importStatus === 'failed'" class="text-center py-8">
-                            <v-icon size="64" color="error" class="mb-4">mdi-alert-circle</v-icon>
-                            <h3 class="mb-4">{{ t('features.settings.backup.import.failed') }}</h3>
-                            <v-alert type="error" variant="tonal" class="mb-4">
-                                {{ importError }}
-                            </v-alert>
-                            <v-btn color="primary" @click="resetImport">
-                                {{ t('features.settings.backup.import.retry') }}
-                            </v-btn>
-                        </div>
-                    </v-window-item>
-
-                    <!-- 备份列表标签页 -->
-                    <v-window-item value="list">
-                        <div v-if="loadingList" class="text-center py-8">
-                            <v-progress-circular indeterminate color="primary"></v-progress-circular>
-                        </div>
-
-                        <div v-else-if="backupList.length === 0" class="text-center py-8">
-                            <v-icon size="64" color="grey" class="mb-4">mdi-folder-open-outline</v-icon>
-                            <p class="text-grey">{{ t('features.settings.backup.list.empty') }}</p>
-                        </div>
-
-                        <v-list v-else lines="two">
-                            <v-list-item
-                                v-for="backup in backupList"
-                                :key="backup.filename"
-                            >
-                                <template v-slot:prepend>
-                                    <v-icon :color="backup.type === 'uploaded' ? 'orange' : 'primary'">
-                                        {{ backup.type === 'uploaded' ? 'mdi-upload' : 'mdi-zip-box' }}
-                                    </v-icon>
-                                </template>
-
-                                <v-list-item-title>{{ backup.filename }}</v-list-item-title>
-                                <v-list-item-subtitle>
-                                    {{ formatFileSize(backup.size) }} · {{ formatDate(backup.created_at) }}
-                                    <v-chip size="x-small" color="primary" variant="tonal" class="ml-2">
-                                        v{{ backup.astrbot_version }}
-                                    </v-chip>
-                                    <v-chip v-if="backup.type === 'uploaded'" size="x-small" color="orange" variant="tonal" class="ml-1">
-                                        {{ t('features.settings.backup.list.uploaded') }}
-                                    </v-chip>
-                                </v-list-item-subtitle>
-
-                                <template v-slot:append>
-                                    <v-btn
-                                        icon="mdi-restore"
-                                        variant="text"
-                                        size="small"
-                                        color="success"
-                                        :title="t('features.settings.backup.list.restore')"
-                                        @click="restoreFromList(backup.filename)"
-                                    ></v-btn>
-                                    <v-btn
-                                        icon="mdi-pencil"
-                                        variant="text"
-                                        size="small"
-                                        :title="t('features.settings.backup.list.rename')"
-                                        @click="openRenameDialog(backup.filename)"
-                                    ></v-btn>
-                                    <v-btn icon="mdi-download" variant="text" size="small" @click="downloadBackup(backup.filename)"></v-btn>
-                                    <v-btn icon="mdi-delete" variant="text" size="small" color="error" @click="deleteBackup(backup.filename)"></v-btn>
-                                </template>
-                            </v-list-item>
-                        </v-list>
-
-                        <div class="d-flex justify-center mt-4">
-                            <v-btn color="primary" variant="text" @click="loadBackupList">
-                                <v-icon class="mr-2">mdi-refresh</v-icon>
-                                {{ t('features.settings.backup.list.refresh') }}
-                            </v-btn>
-                        </div>
-
-                        <!-- 提示信息 -->
-                        <p class="text-caption text-grey text-center mt-4">
-                            <v-icon size="small" class="mr-1">mdi-information-outline</v-icon>
-                            {{ t('features.settings.backup.list.ftpHint') }}
-                        </p>
-                    </v-window-item>
-                </v-window>
-            </v-card-text>
-
-            <v-card-actions class="px-6 py-4">
-                <v-spacer></v-spacer>
-                <v-btn color="grey" variant="text" @click="handleClose" :disabled="isProcessing">
-                    {{ t('core.common.close') }}
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-
-    <!-- 重命名对话框 -->
-    <v-dialog v-model="renameDialogOpen" max-width="450" persistent>
-        <v-card>
-            <v-card-title>
-                <v-icon class="mr-2">mdi-pencil</v-icon>
-                {{ t('features.settings.backup.list.renameTitle') }}
-            </v-card-title>
-            <v-card-text>
-                <v-text-field
-                    v-model="renameNewName"
-                    :label="t('features.settings.backup.list.newName')"
-                    :rules="[renameValidationRule]"
-                    :error-messages="renameError"
-                    variant="outlined"
-                    density="comfortable"
-                    autofocus
-                    @keyup.enter="confirmRename"
+              <div class="d-flex justify-center">
+                <v-btn
+                  color="primary"
+                  size="large"
+                  :disabled="!importFile"
+                  :loading="importStatus === 'uploading'"
+                  @click="uploadAndCheck"
                 >
-                    <template v-slot:append-inner>
-                        <span class="text-grey">.zip</span>
-                    </template>
-                </v-text-field>
-                <p class="text-caption text-grey mt-1">
-                    {{ t('features.settings.backup.list.renameHint') }}
-                </p>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="grey" variant="text" @click="closeRenameDialog">
-                    {{ t('core.common.cancel') }}
+                  <v-icon class="mr-2">
+                    mdi-upload
+                  </v-icon>
+                  {{ t('features.settings.backup.import.uploadAndCheck') }}
+                </v-btn>
+              </div>
+            </div>
+
+            <!-- 步骤1.5: 上传中 -->
+            <div
+              v-else-if="importStatus === 'uploading'"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="primary"
+                class="mb-4"
+              >
+                mdi-cloud-upload
+              </v-icon>
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.import.uploading') }}
+              </h3>
+              <p class="text-grey mb-2">
+                {{ uploadProgress.message || t('features.settings.backup.import.uploadWait') }}
+              </p>
+              <p class="text-grey-darken-1 mb-4">
+                {{ formatFileSize(uploadProgress.uploaded) }} / {{ formatFileSize(uploadProgress.total) }}
+                ({{ uploadProgress.percent }}%)
+              </p>
+              <v-progress-linear
+                :model-value="uploadProgress.percent"
+                :max="100"
+                class="mt-2"
+                color="primary"
+                height="8"
+                rounded
+              />
+            </div>
+
+            <!-- 步骤2: 确认导入 -->
+            <div
+              v-else-if="importStatus === 'confirm'"
+              class="py-4"
+            >
+              <v-alert
+                :type="versionAlertType"
+                variant="tonal"
+                class="mb-4"
+              >
+                <template #prepend>
+                  <v-icon>{{ versionAlertIcon }}</v-icon>
+                </template>
+                <div class="confirm-message">
+                  <div class="text-h6 mb-2">
+                    {{ versionAlertTitle }}
+                  </div>
+                  <div class="mb-2">
+                    <strong>{{ t('features.settings.backup.import.version.backupVersion') }}:</strong> {{ checkResult?.backup_version }}<br>
+                    <strong>{{ t('features.settings.backup.import.version.currentVersion') }}:</strong> {{ checkResult?.current_version }}
+                  </div>
+                  <div
+                    v-if="checkResult?.backup_time && checkResult?.backup_time !== '未知'"
+                    class="mb-2"
+                  >
+                    <strong>{{ t('features.settings.backup.import.version.backupTime') }}:</strong> {{ formatISODate(checkResult?.backup_time) }}
+                  </div>
+                  <div
+                    class="mt-3"
+                    style="white-space: pre-line;"
+                  >
+                    {{ versionAlertMessage }}
+                  </div>
+                </div>
+              </v-alert>
+
+              <!-- 备份摘要 -->
+              <v-card
+                v-if="checkResult?.backup_summary"
+                variant="outlined"
+                class="mb-4"
+              >
+                <v-card-title class="text-subtitle-1">
+                  <v-icon class="mr-2">
+                    mdi-package-variant
+                  </v-icon>
+                  {{ t('features.settings.backup.import.backupContents') }}
+                </v-card-title>
+                <v-card-text>
+                  <div class="d-flex flex-wrap ga-2">
+                    <v-chip
+                      v-if="checkResult.backup_summary.tables?.length"
+                      size="small"
+                      color="primary"
+                      variant="tonal"
+                      :ripple="false"
+                      class="non-interactive-chip"
+                    >
+                      {{ checkResult.backup_summary.tables.length }} {{ t('features.settings.backup.import.tables') }}
+                    </v-chip>
+                    <v-chip
+                      v-if="checkResult.backup_summary.has_knowledge_bases"
+                      size="small"
+                      color="success"
+                      variant="tonal"
+                      :ripple="false"
+                      class="non-interactive-chip"
+                    >
+                      {{ t('features.settings.backup.import.knowledgeBases') }}
+                    </v-chip>
+                    <v-chip
+                      v-if="checkResult.backup_summary.has_config"
+                      size="small"
+                      color="info"
+                      variant="tonal"
+                      :ripple="false"
+                      class="non-interactive-chip"
+                    >
+                      {{ t('features.settings.backup.import.configFiles') }}
+                    </v-chip>
+                    <v-chip
+                      v-for="dir in (checkResult.backup_summary.directories || [])"
+                      :key="dir"
+                      size="small"
+                      color="warning"
+                      variant="tonal"
+                      :ripple="false"
+                      class="non-interactive-chip"
+                    >
+                      {{ dir }}
+                    </v-chip>
+                  </div>
+                </v-card-text>
+              </v-card>
+
+              <!-- 警告信息 -->
+              <v-alert
+                v-if="checkResult?.warnings?.length"
+                type="warning"
+                variant="tonal"
+                class="mb-4"
+              >
+                <div
+                  v-for="(warning, idx) in checkResult.warnings"
+                  :key="idx"
+                >
+                  {{ warning }}
+                </div>
+              </v-alert>
+
+              <div
+                class="d-flex justify-center align-center mt-4"
+                style="gap: 16px;"
+              >
+                <v-btn
+                  color="grey-darken-1"
+                  variant="outlined"
+                  size="large"
+                  @click="resetImport"
+                >
+                  <v-icon class="mr-2">
+                    mdi-close
+                  </v-icon>
+                  {{ t('core.common.cancel') }}
                 </v-btn>
                 <v-btn
-                    color="primary"
-                    variant="flat"
-                    @click="confirmRename"
-                    :loading="renameLoading"
-                    :disabled="!renameNewName || !!renameError"
+                  v-if="checkResult?.can_import"
+                  color="error"
+                  size="large"
+                  variant="flat"
+                  @click="confirmImport"
                 >
-                    {{ t('core.common.confirm') }}
+                  <v-icon class="mr-2">
+                    mdi-alert
+                  </v-icon>
+                  {{ t('features.settings.backup.import.confirmImport') }}
                 </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+              </div>
+            </div>
 
-    <WaitingForRestart ref="wfr"></WaitingForRestart>
+            <!-- 步骤3: 导入进行中 -->
+            <div
+              v-else-if="importStatus === 'processing'"
+              class="text-center py-8"
+            >
+              <v-progress-circular
+                indeterminate
+                color="primary"
+                size="64"
+                class="mb-4"
+              />
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.import.processing') }}
+              </h3>
+              <p class="text-grey">
+                {{ importProgress.message || t('features.settings.backup.import.wait') }}
+              </p>
+              <v-progress-linear
+                :model-value="importProgress.current"
+                :max="importProgress.total"
+                class="mt-4"
+                color="primary"
+              />
+            </div>
+
+            <div
+              v-else-if="importStatus === 'completed'"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="success"
+                class="mb-4"
+              >
+                mdi-check-circle
+              </v-icon>
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.import.completed') }}
+              </h3>
+              <v-alert
+                type="info"
+                variant="tonal"
+                class="mb-4"
+              >
+                {{ t('features.settings.backup.import.restartRequired') }}
+              </v-alert>
+              <v-btn
+                color="primary"
+                class="mr-2"
+                @click="restartAstrBot"
+              >
+                <v-icon class="mr-2">
+                  mdi-restart
+                </v-icon>
+                {{ t('features.settings.backup.import.restartNow') }}
+              </v-btn>
+              <v-btn
+                color="grey"
+                variant="text"
+                @click="resetImport"
+              >
+                {{ t('core.common.close') }}
+              </v-btn>
+            </div>
+
+            <div
+              v-else-if="importStatus === 'failed'"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="error"
+                class="mb-4"
+              >
+                mdi-alert-circle
+              </v-icon>
+              <h3 class="mb-4">
+                {{ t('features.settings.backup.import.failed') }}
+              </h3>
+              <v-alert
+                type="error"
+                variant="tonal"
+                class="mb-4"
+              >
+                {{ importError }}
+              </v-alert>
+              <v-btn
+                color="primary"
+                @click="resetImport"
+              >
+                {{ t('features.settings.backup.import.retry') }}
+              </v-btn>
+            </div>
+          </v-window-item>
+
+          <!-- 备份列表标签页 -->
+          <v-window-item value="list">
+            <div
+              v-if="loadingList"
+              class="text-center py-8"
+            >
+              <v-progress-circular
+                indeterminate
+                color="primary"
+              />
+            </div>
+
+            <div
+              v-else-if="backupList.length === 0"
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="grey"
+                class="mb-4"
+              >
+                mdi-folder-open-outline
+              </v-icon>
+              <p class="text-grey">
+                {{ t('features.settings.backup.list.empty') }}
+              </p>
+            </div>
+
+            <v-list
+              v-else
+              lines="two"
+            >
+              <v-list-item
+                v-for="backup in backupList"
+                :key="backup.filename"
+              >
+                <template #prepend>
+                  <v-icon :color="backup.type === 'uploaded' ? 'orange' : 'primary'">
+                    {{ backup.type === 'uploaded' ? 'mdi-upload' : 'mdi-zip-box' }}
+                  </v-icon>
+                </template>
+
+                <v-list-item-title>{{ backup.filename }}</v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ formatFileSize(backup.size) }} · {{ formatDate(backup.created_at) }}
+                  <v-chip
+                    size="x-small"
+                    color="primary"
+                    variant="tonal"
+                    class="ml-2"
+                  >
+                    v{{ backup.astrbot_version }}
+                  </v-chip>
+                  <v-chip
+                    v-if="backup.type === 'uploaded'"
+                    size="x-small"
+                    color="orange"
+                    variant="tonal"
+                    class="ml-1"
+                  >
+                    {{ t('features.settings.backup.list.uploaded') }}
+                  </v-chip>
+                </v-list-item-subtitle>
+
+                <template #append>
+                  <v-btn
+                    icon="mdi-restore"
+                    variant="text"
+                    size="small"
+                    color="success"
+                    :title="t('features.settings.backup.list.restore')"
+                    @click="restoreFromList(backup.filename)"
+                  />
+                  <v-btn
+                    icon="mdi-pencil"
+                    variant="text"
+                    size="small"
+                    :title="t('features.settings.backup.list.rename')"
+                    @click="openRenameDialog(backup.filename)"
+                  />
+                  <v-btn
+                    icon="mdi-download"
+                    variant="text"
+                    size="small"
+                    @click="downloadBackup(backup.filename)"
+                  />
+                  <v-btn
+                    icon="mdi-delete"
+                    variant="text"
+                    size="small"
+                    color="error"
+                    @click="deleteBackup(backup.filename)"
+                  />
+                </template>
+              </v-list-item>
+            </v-list>
+
+            <div class="d-flex justify-center mt-4">
+              <v-btn
+                color="primary"
+                variant="text"
+                @click="loadBackupList"
+              >
+                <v-icon class="mr-2">
+                  mdi-refresh
+                </v-icon>
+                {{ t('features.settings.backup.list.refresh') }}
+              </v-btn>
+            </div>
+
+            <!-- 提示信息 -->
+            <p class="text-caption text-grey text-center mt-4">
+              <v-icon
+                size="small"
+                class="mr-1"
+              >
+                mdi-information-outline
+              </v-icon>
+              {{ t('features.settings.backup.list.ftpHint') }}
+            </p>
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+
+      <v-card-actions class="px-6 py-4">
+        <v-spacer />
+        <v-btn
+          color="grey"
+          variant="text"
+          :disabled="isProcessing"
+          @click="handleClose"
+        >
+          {{ t('core.common.close') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- 重命名对话框 -->
+  <v-dialog
+    v-model="renameDialogOpen"
+    max-width="450"
+    persistent
+  >
+    <v-card>
+      <v-card-title>
+        <v-icon class="mr-2">
+          mdi-pencil
+        </v-icon>
+        {{ t('features.settings.backup.list.renameTitle') }}
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model="renameNewName"
+          :label="t('features.settings.backup.list.newName')"
+          :rules="[renameValidationRule]"
+          :error-messages="renameError"
+          variant="outlined"
+          density="comfortable"
+          autofocus
+          @keyup.enter="confirmRename"
+        >
+          <template #append-inner>
+            <span class="text-grey">.zip</span>
+          </template>
+        </v-text-field>
+        <p class="text-caption text-grey mt-1">
+          {{ t('features.settings.backup.list.renameHint') }}
+        </p>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="closeRenameDialog"
+        >
+          {{ t('core.common.cancel') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="renameLoading"
+          :disabled="!renameNewName || !!renameError"
+          @click="confirmRename"
+        >
+          {{ t('core.common.confirm') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <WaitingForRestart ref="wfr" />
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/shared/ChangelogDialog.vue b/dashboard/src/components/shared/ChangelogDialog.vue
index d046bd9ed..87d1e4d5d 100644
--- a/dashboard/src/components/shared/ChangelogDialog.vue
+++ b/dashboard/src/components/shared/ChangelogDialog.vue
@@ -139,15 +139,19 @@ getCurrentVersion();
 <template>
   <v-dialog 
     :model-value="dialog" 
-    @update:model-value="dialog = $event"
     :width="$vuetify.display.smAndDown ? '100%' : '800'"
-    :fullscreen="$vuetify.display.xs" 
-    max-width="1000"
+    :fullscreen="$vuetify.display.xs"
+    max-width="1000" 
+    @update:model-value="dialog = $event"
   >
     <v-card>
       <v-card-title class="d-flex justify-space-between align-center">
         <span class="text-h3">{{ t('core.navigation.changelogDialog.title') }}</span>
-        <v-btn icon @click="dialog = false" flat>
+        <v-btn
+          icon
+          flat
+          @click="dialog = false"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
@@ -163,16 +167,26 @@ getCurrentVersion();
             density="compact"
             @update:model-value="onVersionChange"
           >
-            <template v-slot:item="{ item, props }">
-              <v-list-item v-bind="props" :title="`v${item.value}`">
-                <template v-slot:append v-if="item.value === changelogVersion">
-                  <v-chip size="x-small" color="primary" variant="tonal">
+            <template #item="{ item, props }">
+              <v-list-item
+                v-bind="props"
+                :title="`v${item.value}`"
+              >
+                <template
+                  v-if="item.value === changelogVersion"
+                  #append
+                >
+                  <v-chip
+                    size="x-small"
+                    color="primary"
+                    variant="tonal"
+                  >
                     {{ t('core.navigation.changelogDialog.current') }}
                   </v-chip>
                 </template>
               </v-list-item>
             </template>
-            <template v-slot:selection="{ item }">
+            <template #selection="{ item }">
               <span>v{{ item.value }}</span>
             </template>
           </v-select>
@@ -180,21 +194,45 @@ getCurrentVersion();
         
         <!-- 更新日志内容 -->
         <div style="max-height: 70vh; overflow-y: auto;">
-          <div v-if="changelogLoading" class="text-center py-8">
-            <v-progress-circular indeterminate color="primary"></v-progress-circular>
-            <div class="mt-4">{{ t('core.navigation.changelogDialog.loading') }}</div>
+          <div
+            v-if="changelogLoading"
+            class="text-center py-8"
+          >
+            <v-progress-circular
+              indeterminate
+              color="primary"
+            />
+            <div class="mt-4">
+              {{ t('core.navigation.changelogDialog.loading') }}
+            </div>
           </div>
-          <v-alert v-else-if="changelogError" type="error" variant="tonal" border="start">
+          <v-alert
+            v-else-if="changelogError"
+            type="error"
+            variant="tonal"
+            border="start"
+          >
             {{ changelogError }}
           </v-alert>
-          <div v-else-if="changelogContent" class="changelog-content">
-            <MarkdownRender :content="changelogContent" :typewriter="false" class="markdown-content" />
+          <div
+            v-else-if="changelogContent"
+            class="changelog-content"
+          >
+            <MarkdownRender
+              :content="changelogContent"
+              :typewriter="false"
+              class="markdown-content"
+            />
           </div>
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="blue-darken-1" variant="text" @click="dialog = false">
+        <v-spacer />
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="dialog = false"
+        >
           {{ t('core.common.close') }}
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/components/shared/ConfigItemRenderer.vue b/dashboard/src/components/shared/ConfigItemRenderer.vue
index 3c3262064..23ab3a17e 100644
--- a/dashboard/src/components/shared/ConfigItemRenderer.vue
+++ b/dashboard/src/components/shared/ConfigItemRenderer.vue
@@ -2,45 +2,74 @@
   <div class="w-100">
     <!-- Special handling for specific metadata types -->
     <template v-if="itemMeta?._special === 'select_provider'">
-      <ProviderSelector :model-value="modelValue" @update:model-value="emitUpdate" :provider-type="'chat_completion'" />
+      <ProviderSelector
+        :model-value="modelValue"
+        :provider-type="'chat_completion'"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'select_provider_stt'">
-      <ProviderSelector :model-value="modelValue" @update:model-value="emitUpdate" :provider-type="'speech_to_text'" />
+      <ProviderSelector
+        :model-value="modelValue"
+        :provider-type="'speech_to_text'"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'select_provider_tts'">
-      <ProviderSelector :model-value="modelValue" @update:model-value="emitUpdate" :provider-type="'text_to_speech'" />
+      <ProviderSelector
+        :model-value="modelValue"
+        :provider-type="'text_to_speech'"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'select_providers'">
       <ProviderSelector
         :model-value="modelValue"
-        @update:model-value="emitUpdate"
         :provider-type="'chat_completion'"
         :multiple="true"
+        @update:model-value="emitUpdate"
       />
     </template>
     <template v-else-if="getSpecialName(itemMeta?._special) === 'select_agent_runner_provider'">
       <ProviderSelector
         :model-value="modelValue"
-        @update:model-value="emitUpdate"
         :provider-type="'agent_runner'"
         :provider-subtype="getSpecialSubtype(itemMeta?._special)"
+        @update:model-value="emitUpdate"
       />
     </template>
     <template v-else-if="itemMeta?._special === 'provider_pool'">
-      <ProviderSelector :model-value="modelValue" @update:model-value="emitUpdate" :provider-type="'chat_completion'"
-        :button-text="t('core.shared.providerSelector.selectProviderPool')" />
+      <ProviderSelector
+        :model-value="modelValue"
+        :provider-type="'chat_completion'"
+        :button-text="t('core.shared.providerSelector.selectProviderPool')"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'select_persona'">
-      <PersonaSelector :model-value="modelValue" @update:model-value="emitUpdate" />
+      <PersonaSelector
+        :model-value="modelValue"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'persona_pool'">
-      <PersonaSelector :model-value="modelValue" @update:model-value="emitUpdate" :button-text="t('core.shared.personaSelector.selectPersonaPool')" />
+      <PersonaSelector
+        :model-value="modelValue"
+        :button-text="t('core.shared.personaSelector.selectPersonaPool')"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'select_knowledgebase'">
-      <KnowledgeBaseSelector :model-value="modelValue" @update:model-value="emitUpdate" />
+      <KnowledgeBaseSelector
+        :model-value="modelValue"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 'select_plugin_set'">
-      <PluginSetSelector :model-value="modelValue" @update:model-value="emitUpdate" />
+      <PluginSetSelector
+        :model-value="modelValue"
+        @update:model-value="emitUpdate"
+      />
     </template>
     <template v-else-if="itemMeta?._special === 't2i_template'">
       <T2ITemplateEditor />
@@ -49,20 +78,20 @@
       <div class="d-flex align-center gap-2">
         <v-text-field
           :model-value="modelValue"
-          @update:model-value="emitUpdate"
           density="compact"
           variant="outlined"
           class="config-field"
           type="number"
           hide-details
-        ></v-text-field>
+          @update:model-value="emitUpdate"
+        />
         <v-btn
           color="primary"
           variant="tonal"
           size="small"
-          @click="$emit('get-embedding-dim')"
           :loading="loading"
           class="ml-2"
+          @click="$emit('get-embedding-dim')"
         >
           {{ t('core.common.autoDetect') }}
         </v-btn>
@@ -77,19 +106,18 @@
         v-for="(option, optionIndex) in itemMeta.options"
         :key="optionIndex"
         :model-value="modelValue"
-        @update:model-value="emitUpdate"
         :label="getLabel(itemMeta, optionIndex, option)"
         :value="option"
         class="mr-2"
         color="primary"
         hide-details
-      ></v-checkbox>
+        @update:model-value="emitUpdate"
+      />
     </div>
 
     <v-combobox
       v-else-if="itemMeta?.type === 'list' && itemMeta?.options"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       :items="itemMeta.options"
       :disabled="itemMeta?.readonly"
       density="compact"
@@ -98,32 +126,42 @@
       hide-details
       chips
       multiple
-    ></v-combobox>
+      @update:model-value="emitUpdate"
+    />
 
     <v-select
       v-else-if="itemMeta?.options"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       :items="getSelectItems(itemMeta)"
       :disabled="itemMeta?.readonly"
       density="compact"
       variant="outlined"
       class="config-field"
       hide-details
-    ></v-select>
+      @update:model-value="emitUpdate"
+    />
 
-    <div v-else-if="itemMeta?.editor_mode" class="editor-container">
+    <div
+      v-else-if="itemMeta?.editor_mode"
+      class="editor-container"
+    >
       <VueMonacoEditor
         :theme="itemMeta?.editor_theme || 'vs-light'"
         :language="itemMeta?.editor_language || 'json'"
         style="min-height: 100px; flex-grow: 1; border: 1px solid rgba(0, 0, 0, 0.1);"
         :value="modelValue"
         @update:value="emitUpdate"
-      >
-      </VueMonacoEditor>
-      <v-btn v-if="showFullscreenBtn" icon size="small" variant="text" color="primary" class="editor-fullscreen-btn"
+      />
+      <v-btn
+        v-if="showFullscreenBtn"
+        icon
+        size="small"
+        variant="text"
+        color="primary"
+        class="editor-fullscreen-btn"
+        :title="t('core.common.editor.fullscreen')"
         @click="$emit('open-fullscreen')"
-        :title="t('core.common.editor.fullscreen')">
+      >
         <v-icon>mdi-fullscreen</v-icon>
       </v-btn>
     </div>
@@ -131,12 +169,12 @@
     <v-text-field
       v-else-if="itemMeta?.type === 'string'"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       density="compact"
       variant="outlined"
       class="config-field"
       hide-details
-    ></v-text-field>
+      @update:model-value="emitUpdate"
+    />
 
     <div
       v-else-if="itemMeta?.type === 'int' || itemMeta?.type === 'float'"
@@ -145,7 +183,6 @@
       <v-slider
         v-if="itemMeta?.slider"
         :model-value="toNumber(modelValue)"
-        @update:model-value="val => emitUpdate(toNumber(val))"
         :min="itemMeta?.slider?.min ?? 0"
         :max="itemMeta?.slider?.max ?? 100"
         :step="itemMeta?.slider?.step ?? 1"
@@ -153,38 +190,39 @@
         density="compact"
         hide-details
         style="flex: 1"
-      ></v-slider>
+        @update:model-value="val => emitUpdate(toNumber(val))"
+      />
       <v-text-field
         :model-value="modelValue"
-        @update:model-value="val => emitUpdate(toNumber(val))"
         density="compact"
         variant="outlined"
         class="config-field"
         type="number"
         hide-details
         style="flex: 1"
-      ></v-text-field>
+        @update:model-value="val => emitUpdate(toNumber(val))"
+      />
     </div>
 
     <v-textarea
       v-else-if="itemMeta?.type === 'text'"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       variant="outlined"
       rows="3"
       class="config-field"
       hide-details
-    ></v-textarea>
+      @update:model-value="emitUpdate"
+    />
 
     <v-switch
       v-else-if="itemMeta?.type === 'bool'"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       color="primary"
       inset
       density="compact"
       hide-details
-    ></v-switch>
+      @update:model-value="emitUpdate"
+    />
 
     <FileConfigItem
       v-else-if="itemMeta?.type === 'file'"
@@ -192,34 +230,34 @@
       :item-meta="itemMeta"
       :plugin-name="pluginName"
       :config-key="configKey"
-      @update:model-value="emitUpdate"
       class="config-field"
+      @update:model-value="emitUpdate"
     />
 
     <ListConfigItem
       v-else-if="itemMeta?.type === 'list'"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       class="config-field"
+      @update:model-value="emitUpdate"
     />
 
     <ObjectEditor
       v-else-if="itemMeta?.type === 'dict'"
       :model-value="modelValue"
       :item-meta="itemMeta"
-      @update:model-value="emitUpdate"
       class="config-field"
+      @update:model-value="emitUpdate"
     />
 
     <v-text-field
       v-else
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
       density="compact"
       variant="outlined"
       class="config-field"
       hide-details
-    ></v-text-field>
+      @update:model-value="emitUpdate"
+    />
   </div>
 </template>
 
diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue
index f4fd9ec96..926498d95 100644
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -6,23 +6,50 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
 
 <template>
   <div>
-    <div class="filter-controls mb-2" v-if="showLevelBtns">
-      <v-chip-group v-model="selectedLevels" column multiple>
-        <v-chip v-for="level in logLevels" :key="level" :color="getLevelColor(level)" filter variant="flat" size="small"
-          :text-color="level === 'DEBUG' || level === 'INFO' ? 'black' : 'white'" class="font-weight-medium">
+    <div
+      v-if="showLevelBtns"
+      class="filter-controls mb-2"
+    >
+      <v-chip-group
+        v-model="selectedLevels"
+        column
+        multiple
+      >
+        <v-chip
+          v-for="level in logLevels"
+          :key="level"
+          :color="getLevelColor(level)"
+          filter
+          variant="flat"
+          size="small"
+          :text-color="level === 'DEBUG' || level === 'INFO' ? 'black' : 'white'"
+          class="font-weight-medium"
+        >
           {{ level }}
         </v-chip>
       </v-chip-group>
     </div>
 
-    <div id="term" style="background-color: #1e1e1e; padding: 16px; border-radius: 8px; overflow-y:auto; height: 100%">
-    </div>
+    <div
+      id="term"
+      style="background-color: #1e1e1e; padding: 16px; border-radius: 8px; overflow-y:auto; height: 100%"
+    />
   </div>
 </template>
 
 <script>
 export default {
   name: 'ConsoleDisplayer',
+  props: {
+    historyNum: {
+      type: String,
+      default: "-1"
+    },
+    showLevelBtns: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       autoScroll: true,
@@ -59,16 +86,6 @@ export default {
       return useCommonStore();
     },
   },
-  props: {
-    historyNum: {
-      type: String,
-      default: "-1"
-    },
-    showLevelBtns: {
-      type: Boolean,
-      default: true
-    }
-  },
   watch: {
     selectedLevels: {
       handler() {
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index 1e2cea2fe..49f330a09 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -165,13 +165,16 @@ const viewChangelog = () => {
                 location="top"
                 :text="
                   extension.display_name?.length &&
-                  extension.display_name !== extension.name
+                    extension.display_name !== extension.name
                     ? `${extension.display_name} (${extension.name})`
                     : extension.name
                 "
               >
-                <template v-slot:activator="{ props: titleTooltipProps }">
-                  <span v-bind="titleTooltipProps" class="extension-title__text">{{
+                <template #activator="{ props: titleTooltipProps }">
+                  <span
+                    v-bind="titleTooltipProps"
+                    class="extension-title__text"
+                  >{{
                     extension.display_name?.length
                       ? extension.display_name
                       : extension.name
@@ -179,10 +182,10 @@ const viewChangelog = () => {
                 </template>
               </v-tooltip>
               <v-tooltip
-                location="top"
                 v-if="extension?.has_update && !marketMode"
+                location="top"
               >
-                <template v-slot:activator="{ props: tooltipProps }">
+                <template #activator="{ props: tooltipProps }">
                   <v-icon
                     v-bind="tooltipProps"
                     color="warning"
@@ -191,19 +194,21 @@ const viewChangelog = () => {
                     size="small"
                     style="cursor: pointer"
                     @click.stop="updateExtension"
-                  ></v-icon>
+                  />
                 </template>
-                <span
-                  >{{ tm("card.status.hasUpdate") }}:
-                  {{ extension.online_version }}</span
-                >
+                <span>{{ tm("card.status.hasUpdate") }}:
+                  {{ extension.online_version }}</span>
               </v-tooltip>
             </p>
 
             <template v-if="!marketMode">
               <v-tooltip location="left">
-                <template v-slot:activator="{ props: tooltipProps }">
-                  <div v-bind="tooltipProps" class="extension-switch-wrap" @click.stop>
+                <template #activator="{ props: tooltipProps }">
+                  <div
+                    v-bind="tooltipProps"
+                    class="extension-switch-wrap"
+                    @click.stop
+                  >
                     <v-switch
                       :model-value="extension.activated"
                       color="success"
@@ -211,7 +216,7 @@ const viewChangelog = () => {
                       hide-details
                       inset
                       @update:model-value="toggleActivation"
-                    ></v-switch>
+                    />
                   </div>
                 </template>
                 <span>{{
@@ -222,27 +227,32 @@ const viewChangelog = () => {
             <template v-else>
               <div class="extension-market-menu-wrap">
                 <v-menu offset-y>
-                  <template v-slot:activator="{ props: menuProps }">
+                  <template #activator="{ props: menuProps }">
                     <v-btn
+                      v-if="extension?.repo"
                       icon
                       variant="text"
                       aria-label="more"
-                      v-if="extension?.repo"
                       :href="extension?.repo"
                       target="_blank"
                     >
-                      <v-icon icon="mdi-github"></v-icon>
+                      <v-icon icon="mdi-github" />
                     </v-btn>
-                    <v-btn v-bind="menuProps" icon variant="text" aria-label="more">
-                      <v-icon icon="mdi-dots-vertical"></v-icon>
+                    <v-btn
+                      v-bind="menuProps"
+                      icon
+                      variant="text"
+                      aria-label="more"
+                    >
+                      <v-icon icon="mdi-dots-vertical" />
                     </v-btn>
                   </template>
 
                   <v-list>
                     <v-list-item @click="viewReadme">
-                      <v-list-item-title
-                        >📄 {{ tm("buttons.viewDocs") }}</v-list-item-title
-                      >
+                      <v-list-item-title>
+                        📄 {{ tm("buttons.viewDocs") }}
+                      </v-list-item-title>
                     </v-list-item>
 
                     <v-list-item
@@ -250,14 +260,16 @@ const viewChangelog = () => {
                       @click="installExtension"
                     >
                       <v-list-item-title>
-                        {{ tm("buttons.install") }}</v-list-item-title
-                      >
+                        {{ tm("buttons.install") }}
+                      </v-list-item-title>
                     </v-list-item>
 
                     <v-list-item v-if="marketMode && extension?.installed">
-                      <v-list-item-title class="text--disabled">{{
-                        tm("status.installed")
-                      }}</v-list-item-title>
+                      <v-list-item-title class="text--disabled">
+                        {{
+                          tm("status.installed")
+                        }}
+                      </v-list-item-title>
                     </v-list-item>
                   </v-list>
                 </v-menu>
@@ -272,13 +284,20 @@ const viewChangelog = () => {
                 :alt="extension.name"
                 class="extension-logo"
                 @error="logoLoadFailed = true"
-              />
+              >
             </div>
 
             <div class="extension-meta-group">
               <div class="extension-chip-group d-flex flex-wrap">
-                <v-chip color="primary" label size="small">
-                  <v-icon icon="mdi-source-branch" start></v-icon>
+                <v-chip
+                  color="primary"
+                  label
+                  size="small"
+                >
+                  <v-icon
+                    icon="mdi-source-branch"
+                    start
+                  />
                   {{ extension.version }}
                 </v-chip>
                 <v-chip
@@ -289,7 +308,10 @@ const viewChangelog = () => {
                   style="cursor: pointer"
                   @click="updateExtension"
                 >
-                  <v-icon icon="mdi-arrow-up-bold" start></v-icon>
+                  <v-icon
+                    icon="mdi-arrow-up-bold"
+                    start
+                  />
                   {{ extension.online_version }}
                 </v-chip>
                 <v-chip
@@ -297,10 +319,13 @@ const viewChangelog = () => {
                   color="primary"
                   label
                   size="small"
-                  @click="viewHandlers"
                   style="cursor: pointer"
+                  @click="viewHandlers"
                 >
-                  <v-icon icon="mdi-cogs" start></v-icon>
+                  <v-icon
+                    icon="mdi-cogs"
+                    start
+                  />
                   {{ extension.handlers?.length
                   }}{{ tm("card.status.handlersCount") }}
                 </v-chip>
@@ -337,11 +362,17 @@ const viewChangelog = () => {
       </div>
     </v-card-text>
 
-    <v-card-actions class="extension-actions" @click.stop>
+    <v-card-actions
+      class="extension-actions"
+      @click.stop
+    >
       <template v-if="!marketMode">
-        <v-spacer></v-spacer>
-        <v-tooltip location="top" :text="tm('buttons.viewDocs')">
-          <template v-slot:activator="{ props: actionProps }">
+        <v-spacer />
+        <v-tooltip
+          location="top"
+          :text="tm('buttons.viewDocs')"
+        >
+          <template #activator="{ props: actionProps }">
             <v-btn
               v-bind="actionProps"
               icon="mdi-book-open-page-variant"
@@ -349,12 +380,15 @@ const viewChangelog = () => {
               variant="tonal"
               color="info"
               @click="viewReadme"
-            ></v-btn>
+            />
           </template>
         </v-tooltip>
 
-        <v-tooltip location="top" :text="tm('card.actions.pluginConfig')">
-          <template v-slot:activator="{ props: actionProps }">
+        <v-tooltip
+          location="top"
+          :text="tm('card.actions.pluginConfig')"
+        >
+          <template #activator="{ props: actionProps }">
             <v-btn
               v-bind="actionProps"
               icon="mdi-cog"
@@ -362,12 +396,16 @@ const viewChangelog = () => {
               variant="tonal"
               color="primary"
               @click="configure"
-            ></v-btn>
+            />
           </template>
         </v-tooltip>
 
-        <v-tooltip v-if="extension?.repo" location="top" :text="tm('buttons.viewRepo')">
-          <template v-slot:activator="{ props: actionProps }">
+        <v-tooltip
+          v-if="extension?.repo"
+          location="top"
+          :text="tm('buttons.viewRepo')"
+        >
+          <template #activator="{ props: actionProps }">
             <v-btn
               v-bind="actionProps"
               icon="mdi-github"
@@ -376,12 +414,15 @@ const viewChangelog = () => {
               color="secondary"
               :href="extension.repo"
               target="_blank"
-            ></v-btn>
+            />
           </template>
         </v-tooltip>
 
-        <v-tooltip location="top" :text="tm('card.actions.reloadPlugin')">
-          <template v-slot:activator="{ props: actionProps }">
+        <v-tooltip
+          location="top"
+          :text="tm('card.actions.reloadPlugin')"
+        >
+          <template #activator="{ props: actionProps }">
             <v-btn
               v-bind="actionProps"
               icon="mdi-refresh"
@@ -389,11 +430,14 @@ const viewChangelog = () => {
               variant="tonal"
               color="primary"
               @click="reloadExtension"
-            ></v-btn>
+            />
           </template>
         </v-tooltip>
 
-        <StyledMenu location="top end" offset="8">
+        <StyledMenu
+          location="top end"
+          offset="8"
+        >
           <template #activator="{ props: menuProps }">
             <v-btn
               v-bind="menuProps"
@@ -401,28 +445,48 @@ const viewChangelog = () => {
               size="small"
               variant="tonal"
               color="secondary"
-            ></v-btn>
+            />
           </template>
 
-          <v-list-item class="styled-menu-item" prepend-icon="mdi-information" @click="viewHandlers">
+          <v-list-item
+            class="styled-menu-item"
+            prepend-icon="mdi-information"
+            @click="viewHandlers"
+          >
             <v-list-item-title>{{ tm("buttons.viewInfo") }}</v-list-item-title>
           </v-list-item>
 
-          <v-list-item class="styled-menu-item" prepend-icon="mdi-update" @click="updateExtension">
-            <v-list-item-title>{{
-              extension.has_update
-                ? tm("card.actions.updateTo") + " " + extension.online_version
-                : tm("card.actions.reinstall")
-            }}</v-list-item-title>
+          <v-list-item
+            class="styled-menu-item"
+            prepend-icon="mdi-update"
+            @click="updateExtension"
+          >
+            <v-list-item-title>
+              {{
+                extension.has_update
+                  ? tm("card.actions.updateTo") + " " + extension.online_version
+                  : tm("card.actions.reinstall")
+              }}
+            </v-list-item-title>
           </v-list-item>
 
-          <v-list-item class="styled-menu-item" prepend-icon="mdi-delete" @click="uninstallExtension">
-            <v-list-item-title class="text-error">{{ tm("card.actions.uninstallPlugin") }}</v-list-item-title>
+          <v-list-item
+            class="styled-menu-item"
+            prepend-icon="mdi-delete"
+            @click="uninstallExtension"
+          >
+            <v-list-item-title class="text-error">
+              {{ tm("card.actions.uninstallPlugin") }}
+            </v-list-item-title>
           </v-list-item>
         </StyledMenu>
       </template>
       <template v-else>
-        <v-btn color="primary" size="small" @click="viewReadme">
+        <v-btn
+          color="primary"
+          size="small"
+          @click="viewReadme"
+        >
           {{ tm("buttons.viewDocs") }}
         </v-btn>
       </template>
diff --git a/dashboard/src/components/shared/FileConfigItem.vue b/dashboard/src/components/shared/FileConfigItem.vue
index 71e232696..5938c2466 100644
--- a/dashboard/src/components/shared/FileConfigItem.vue
+++ b/dashboard/src/components/shared/FileConfigItem.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="file-config-item">
     <div class="d-flex align-center gap-2">
-      <v-btn size="small" color="primary" variant="tonal" @click="dialog = true">
+      <v-btn
+        size="small"
+        color="primary"
+        variant="tonal"
+        @click="dialog = true"
+      >
         {{ tm('fileUpload.button') }}
       </v-btn>
       <span class="text-caption text-medium-emphasis ml-2">
@@ -9,61 +14,123 @@
       </span>
     </div>
 
-    <v-dialog v-model="dialog" max-width="700">
-      <v-card class="file-dialog-card" variant="flat">
+    <v-dialog
+      v-model="dialog"
+      max-width="700"
+    >
+      <v-card
+        class="file-dialog-card"
+        variant="flat"
+      >
         <v-card-title class="d-flex align-center">
           <span class="text-h3">{{ tm('fileUpload.dialogTitle') }}</span>
           <v-spacer />
-          <v-btn icon="mdi-close" variant="text" @click="dialog = false" />
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            @click="dialog = false"
+          />
         </v-card-title>
 
         <v-card-text class="file-dialog-body">
-          <div v-if="mergedFileItems.length === 0" class="empty-text">
+          <div
+            v-if="mergedFileItems.length === 0"
+            class="empty-text"
+          >
             {{ tm('fileUpload.empty') }}
           </div>
 
-          <v-list density="compact" lines="one">
-            <v-list-item v-for="item in mergedFileItems" :key="item.path">
+          <v-list
+            density="compact"
+            lines="one"
+          >
+            <v-list-item
+              v-for="item in mergedFileItems"
+              :key="item.path"
+            >
               <template #prepend>
-                <v-icon size="18">mdi-file</v-icon>
+                <v-icon size="18">
+                  mdi-file
+                </v-icon>
               </template>
               <v-list-item-title class="file-name">
                 {{ getDisplayName(item.path) }}
               </v-list-item-title>
               <template #append>
                 <div class="d-flex align-center gap-1">
-                  <v-chip v-if="item.status !== 'ok'" size="x-small" :color="getStatusColor(item.status)"
-                    variant="tonal">
+                  <v-chip
+                    v-if="item.status !== 'ok'"
+                    size="x-small"
+                    :color="getStatusColor(item.status)"
+                    variant="tonal"
+                  >
                     {{ getStatusText(item.status) }}
                   </v-chip>
-                  <v-btn v-if="item.status === 'unconfigured'" icon="mdi-plus" size="x-small" variant="text"
-                    @click="addToConfig(item.path)" />
-                  <v-btn icon="mdi-delete" size="x-small" variant="text"
-                    @click="item.status === 'unconfigured' ? deletePhysicalFile(item.path) : deleteFile(item.path)" />
+                  <v-btn
+                    v-if="item.status === 'unconfigured'"
+                    icon="mdi-plus"
+                    size="x-small"
+                    variant="text"
+                    @click="addToConfig(item.path)"
+                  />
+                  <v-btn
+                    icon="mdi-delete"
+                    size="x-small"
+                    variant="text"
+                    @click="item.status === 'unconfigured' ? deletePhysicalFile(item.path) : deleteFile(item.path)"
+                  />
                 </div>
               </template>
             </v-list-item>
 
-            <v-divider v-if="mergedFileItems.length > 0" class="my-2" />
+            <v-divider
+              v-if="mergedFileItems.length > 0"
+              class="my-2"
+            />
 
-            <v-list-item class="upload-item" :class="{ dragover: isDragging }" @drop.prevent="handleDrop"
-              @dragover.prevent="isDragging = true" @dragleave="isDragging = false" @click="openFilePicker">
+            <v-list-item
+              class="upload-item"
+              :class="{ dragover: isDragging }"
+              @drop.prevent="handleDrop"
+              @dragover.prevent="isDragging = true"
+              @dragleave="isDragging = false"
+              @click="openFilePicker"
+            >
               <template #prepend>
-                <v-icon size="18" color="primary">mdi-plus</v-icon>
+                <v-icon
+                  size="18"
+                  color="primary"
+                >
+                  mdi-plus
+                </v-icon>
               </template>
               <v-list-item-title>{{ tm('fileUpload.dropzone') }}</v-list-item-title>
-              <v-list-item-subtitle v-if="allowedTypesText" class="upload-hint">
+              <v-list-item-subtitle
+                v-if="allowedTypesText"
+                class="upload-hint"
+              >
                 {{ tm('fileUpload.allowedTypes', { types: allowedTypesText }) }}
               </v-list-item-subtitle>
             </v-list-item>
           </v-list>
 
-          <input ref="fileInput" type="file" multiple hidden :accept="acceptAttr" @change="handleFileSelect" />
+          <input
+            ref="fileInput"
+            type="file"
+            multiple
+            hidden
+            :accept="acceptAttr"
+            @change="handleFileSelect"
+          >
         </v-card-text>
 
         <v-card-actions class="file-dialog-actions">
           <v-spacer />
-          <v-btn color="primary" variant="elevated" @click="dialog = false">
+          <v-btn
+            color="primary"
+            variant="elevated"
+            @click="dialog = false"
+          >
             {{ tm('fileUpload.done') }}
           </v-btn>
         </v-card-actions>
diff --git a/dashboard/src/components/shared/ItemCard.vue b/dashboard/src/components/shared/ItemCard.vue
index 37745c991..b241f4139 100644
--- a/dashboard/src/components/shared/ItemCard.vue
+++ b/dashboard/src/components/shared/ItemCard.vue
@@ -1,9 +1,16 @@
 <template>
-  <v-card class="item-card hover-elevation" style="padding: 4px;" elevation="0">
+  <v-card
+    class="item-card hover-elevation"
+    style="padding: 4px;"
+    elevation="0"
+  >
     <v-card-title class="d-flex justify-space-between align-center pb-1 pt-3">
-      <span class="text-h2 text-truncate" :title="getItemTitle()">{{ getItemTitle() }}</span>
+      <span
+        class="text-h2 text-truncate"
+        :title="getItemTitle()"
+      >{{ getItemTitle() }}</span>
       <v-tooltip location="top">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <v-switch
             color="primary"
             hide-details
@@ -13,38 +20,41 @@
             :disabled="loading || disableToggle"
             v-bind="props"
             @update:model-value="toggleEnabled"
-          ></v-switch>
+          />
         </template>
         <span>{{ getItemEnabled() ? t('core.common.itemCard.enabled') : t('core.common.itemCard.disabled') }}</span>
       </v-tooltip>
     </v-card-title>
 
     <v-card-text>
-      <slot name="item-details" :item="item"></slot>
+      <slot
+        name="item-details"
+        :item="item"
+      />
     </v-card-text>
 
-  <v-card-actions style="margin: 8px;">
-    <v-btn
-      variant="outlined"
-      color="error"
-      size="small"
-      rounded="xl"
-      :disabled="loading || disableDelete"
-      @click="$emit('delete', item)"
-    >
-      {{ t('core.common.itemCard.delete') }}
-    </v-btn>
-    <v-btn
-      v-if="showEditButton"
-      variant="tonal"
-      color="primary"
-      size="small"
-      rounded="xl"
-      :disabled="loading"
-      @click="$emit('edit', item)"
-    >
-      {{ t('core.common.itemCard.edit') }}
-    </v-btn>
+    <v-card-actions style="margin: 8px;">
+      <v-btn
+        variant="outlined"
+        color="error"
+        size="small"
+        rounded="xl"
+        :disabled="loading || disableDelete"
+        @click="$emit('delete', item)"
+      >
+        {{ t('core.common.itemCard.delete') }}
+      </v-btn>
+      <v-btn
+        v-if="showEditButton"
+        variant="tonal"
+        color="primary"
+        size="small"
+        rounded="xl"
+        :disabled="loading"
+        @click="$emit('edit', item)"
+      >
+        {{ t('core.common.itemCard.edit') }}
+      </v-btn>
       <v-btn
         v-if="showCopyButton"
         variant="tonal"
@@ -56,17 +66,24 @@
       >
         {{ t('core.common.itemCard.copy') }}
       </v-btn>
-      <slot name="actions" :item="item"></slot>
-      <v-spacer></v-spacer>
+      <slot
+        name="actions"
+        :item="item"
+      />
+      <v-spacer />
     </v-card-actions>
 
-    <div class="d-flex justify-end align-center" style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;" v-if="bglogo">
+    <div
+      v-if="bglogo"
+      class="d-flex justify-end align-center"
+      style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;"
+    >
       <v-img
         :src="bglogo"
         contain
         width="120"
         height="120"
-      ></v-img>
+      />
     </div>
   </v-card>
 </template>
@@ -76,10 +93,6 @@ import { useI18n } from '@/i18n/composables';
 
 export default {
   name: 'ItemCard',
-  setup() {
-    const { t } = useI18n();
-    return { t };
-  },
   props: {
     item: {
       type: Object,
@@ -119,6 +132,10 @@ export default {
     }
   },
   emits: ['toggle-enabled', 'delete', 'edit', 'copy'],
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
   methods: {
     getItemTitle() {
       return this.item[this.titleField];
diff --git a/dashboard/src/components/shared/ItemCardGrid.vue b/dashboard/src/components/shared/ItemCardGrid.vue
index 5176c186b..b9ecdc19a 100644
--- a/dashboard/src/components/shared/ItemCardGrid.vue
+++ b/dashboard/src/components/shared/ItemCardGrid.vue
@@ -1,20 +1,47 @@
 <template>
   <div>
     <v-row v-if="items.length === 0">
-      <v-col cols="12" class="text-center pa-8">
-        <v-icon size="64" color="grey-lighten-1">{{ emptyIcon }}</v-icon>
-        <p class="text-grey mt-4">{{ displayEmptyText }}</p>
+      <v-col
+        cols="12"
+        class="text-center pa-8"
+      >
+        <v-icon
+          size="64"
+          color="grey-lighten-1"
+        >
+          {{ emptyIcon }}
+        </v-icon>
+        <p class="text-grey mt-4">
+          {{ displayEmptyText }}
+        </p>
       </v-col>
     </v-row>
 
     <v-row v-else>
-      <v-col v-for="(item, index) in items" :key="index" cols="12" md="6" lg="4" xl="3">
-        <v-card class="item-card hover-elevation" style="padding: 4px;" elevation="0">
-          <div class="item-status-indicator" :class="{'active': getItemEnabled(item)}"></div>
+      <v-col
+        v-for="(item, index) in items"
+        :key="index"
+        cols="12"
+        md="6"
+        lg="4"
+        xl="3"
+      >
+        <v-card
+          class="item-card hover-elevation"
+          style="padding: 4px;"
+          elevation="0"
+        >
+          <div
+            class="item-status-indicator"
+            :class="{'active': getItemEnabled(item)}"
+          />
           <v-card-title class="d-flex justify-space-between align-center pb-1 pt-3">
-            <span class="text-h2 text-truncate" :title="getItemTitle(item)">{{ getItemTitle(item) }}</span>
+            <span
+              class="text-h2 text-truncate"
+              :title="getItemTitle(item)"
+            >{{ getItemTitle(item) }}</span>
             <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
+              <template #activator="{ props }">
                 <v-switch 
                   color="primary" 
                   hide-details 
@@ -22,14 +49,17 @@
                   :model-value="getItemEnabled(item)"
                   v-bind="props" 
                   @update:model-value="toggleEnabled(item)"
-                ></v-switch>
+                />
               </template>
               <span>{{ getItemEnabled(item) ? t('core.common.itemCard.enabled') : t('core.common.itemCard.disabled') }}</span>
             </v-tooltip>
           </v-card-title>
           
           <v-card-text>
-            <slot name="item-details" :item="item"></slot>
+            <slot
+              name="item-details"
+              :item="item"
+            />
           </v-card-text>
           
           <v-card-actions style="margin: 8px;">
@@ -49,19 +79,22 @@
             >
               {{ t('core.common.itemCard.edit') }}
             </v-btn>
-            <v-spacer></v-spacer>
+            <v-spacer />
           </v-card-actions>
 
-          <div class="d-flex justify-end align-center" style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;" v-if="bglogo">
+          <div
+            v-if="bglogo"
+            class="d-flex justify-end align-center"
+            style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;"
+          >
             <v-img
               :src="bglogo"
               contain
               width="120"
               height="120"
               class="rounded-circle"
-            ></v-img>
+            />
           </div>
-
         </v-card>
       </v-col>
     </v-row>
@@ -73,10 +106,6 @@ import { useI18n } from '@/i18n/composables';
 
 export default {
   name: 'ItemCardGrid',
-  setup() {
-    const { t } = useI18n();
-    return { t };
-  },
   props: {
     items: {
       type: Array,
@@ -104,6 +133,10 @@ export default {
     }
   },
   emits: ['toggle-enabled', 'delete', 'edit'],
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
   computed: {
     displayEmptyText() {
       return this.emptyText || this.t('core.common.itemCard.noData');
diff --git a/dashboard/src/components/shared/KnowledgeBaseSelector.vue b/dashboard/src/components/shared/KnowledgeBaseSelector.vue
index 43a2b6fc4..0439eb7cf 100644
--- a/dashboard/src/components/shared/KnowledgeBaseSelector.vue
+++ b/dashboard/src/components/shared/KnowledgeBaseSelector.vue
@@ -1,11 +1,19 @@
 <template>
-  <div class="d-flex align-center justify-space-between" style="gap: 8px;">
+  <div
+    class="d-flex align-center justify-space-between"
+    style="gap: 8px;"
+  >
     <div style="flex: 1; min-width: 0; overflow: hidden;">
-      <span v-if="!modelValue || (Array.isArray(modelValue) && modelValue.length === 0)" 
-            style="color: rgb(var(--v-theme-primaryText));">
+      <span
+        v-if="!modelValue || (Array.isArray(modelValue) && modelValue.length === 0)" 
+        style="color: rgb(var(--v-theme-primaryText));"
+      >
         {{ tm('knowledgeBaseSelector.notSelected') }}
       </span>
-      <div v-else class="d-flex flex-wrap gap-1">
+      <div
+        v-else
+        class="d-flex flex-wrap gap-1"
+      >
         <v-chip 
           v-for="name in modelValue" 
           :key="name" 
@@ -13,39 +21,66 @@
           color="primary" 
           variant="tonal"
           closable
+          style="max-width: 100%;"
           @click:close="removeKnowledgeBase(name)"
-          style="max-width: 100%;">
-          <span class="text-truncate" style="max-width: 200px;">{{ name }}</span>
+        >
+          <span
+            class="text-truncate"
+            style="max-width: 200px;"
+          >{{ name }}</span>
         </v-chip>
       </div>
     </div>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog" style="flex-shrink: 0;">
+    <v-btn
+      size="small"
+      color="primary"
+      variant="tonal"
+      style="flex-shrink: 0;"
+      @click="openDialog"
+    >
       {{ buttonText || tm('knowledgeBaseSelector.buttonText') }}
     </v-btn>
   </div>
 
   <!-- Knowledge Base Selection Dialog -->
-  <v-dialog v-model="dialog" max-width="600px">
+  <v-dialog
+    v-model="dialog"
+    max-width="600px"
+  >
     <v-card>
-      <v-card-title class="text-h3 py-4" style="font-weight: normal;">
+      <v-card-title
+        class="text-h3 py-4"
+        style="font-weight: normal;"
+      >
         {{ tm('knowledgeBaseSelector.dialogTitle') }}
       </v-card-title>
       
-      <v-card-text class="pa-0" style="max-height: 400px; overflow-y: auto;">
-        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
+      <v-card-text
+        class="pa-0"
+        style="max-height: 400px; overflow-y: auto;"
+      >
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          color="primary"
+        />
         
         <!-- 知识库列表 -->
-        <v-list v-if="!loading" density="compact">
+        <v-list
+          v-if="!loading"
+          density="compact"
+        >
           <!-- 知识库选项 -->
           <v-list-item
             v-for="kb in knowledgeBaseList"
             :key="kb.kb_id"
             :value="kb.kb_name"
-            @click="selectKnowledgeBase(kb.kb_name)"
             :active="isSelected(kb.kb_name)"
             rounded="md"
-            class="ma-1">
-            <template v-slot:prepend>
+            class="ma-1"
+            @click="selectKnowledgeBase(kb.kb_name)"
+          >
+            <template #prepend>
               <span class="emoji-icon">{{ kb.emoji || '📚' }}</span>
             </template>
             <v-list-item-title>{{ kb.kb_name }}</v-list-item-title>
@@ -55,21 +90,41 @@
               <span v-if="kb.chunk_count !== undefined"> - {{ tm('knowledgeBaseSelector.chunkCount', { count: kb.chunk_count }) }}</span>
             </v-list-item-subtitle>
             
-            <template v-slot:append>
-              <v-icon v-if="isSelected(kb.kb_name)" color="primary">
+            <template #append>
+              <v-icon
+                v-if="isSelected(kb.kb_name)"
+                color="primary"
+              >
                 mdi-checkbox-marked
               </v-icon>
-              <v-icon v-else color="grey-lighten-1">
+              <v-icon
+                v-else
+                color="grey-lighten-1"
+              >
                 mdi-checkbox-blank-outline
               </v-icon>
             </template>
           </v-list-item>
           
           <!-- 当没有知识库时显示创建提示 -->
-          <div v-if="knowledgeBaseList.length === 0" class="text-center py-8">
-            <v-icon size="64" color="grey-lighten-1">mdi-database-off</v-icon>
-            <p class="text-grey mt-4 mb-4">{{ tm('knowledgeBaseSelector.noKnowledgeBases') }}</p>
-            <v-btn color="primary" variant="tonal" @click="goToKnowledgeBasePage">
+          <div
+            v-if="knowledgeBaseList.length === 0"
+            class="text-center py-8"
+          >
+            <v-icon
+              size="64"
+              color="grey-lighten-1"
+            >
+              mdi-database-off
+            </v-icon>
+            <p class="text-grey mt-4 mb-4">
+              {{ tm('knowledgeBaseSelector.noKnowledgeBases') }}
+            </p>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              @click="goToKnowledgeBasePage"
+            >
               {{ tm('knowledgeBaseSelector.createKnowledgeBase') }}
             </v-btn>
           </div>
@@ -77,14 +132,23 @@
       </v-card-text>
       
       <v-card-actions class="pa-4">
-        <div v-if="selectedKnowledgeBases.length > 0" class="text-caption text-grey">
+        <div
+          v-if="selectedKnowledgeBases.length > 0"
+          class="text-caption text-grey"
+        >
           {{ tm('knowledgeBaseSelector.selectedCount', { count: selectedKnowledgeBases.length }) }}
         </div>
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelSelection">{{ tm('knowledgeBaseSelector.cancelSelection') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancelSelection"
+        >
+          {{ tm('knowledgeBaseSelector.cancelSelection') }}
+        </v-btn>
         <v-btn 
           color="primary" 
-          @click="confirmSelection">
+          @click="confirmSelection"
+        >
           {{ tm('knowledgeBaseSelector.confirmSelection') }}
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/components/shared/LanguageSwitcher.vue b/dashboard/src/components/shared/LanguageSwitcher.vue
index 33a9335ef..c0cff648b 100644
--- a/dashboard/src/components/shared/LanguageSwitcher.vue
+++ b/dashboard/src/components/shared/LanguageSwitcher.vue
@@ -1,6 +1,9 @@
 <template>
-  <StyledMenu offset="12" location="bottom center">
-    <template v-slot:activator="{ props: activatorProps }">
+  <StyledMenu
+    offset="12"
+    location="bottom center"
+  >
+    <template #activator="{ props: activatorProps }">
       <v-btn
         v-bind="activatorProps"
         :variant="(props.variant === 'header' || props.variant === 'chatbox') ? 'flat' : 'text'"
@@ -16,7 +19,10 @@
         >
           mdi-translate
         </v-icon>
-        <v-tooltip activator="parent" location="top">
+        <v-tooltip
+          activator="parent"
+          location="top"
+        >
           {{ t('core.common.language') }}
         </v-tooltip>
       </v-btn>
@@ -26,12 +32,12 @@
       v-for="lang in languages"
       :key="lang.code"
       :value="lang.code"
-      @click="changeLanguage(lang.code)"
       :class="{ 'styled-menu-item-active': currentLocale === lang.code }"
       class="styled-menu-item"
       rounded="md"
+      @click="changeLanguage(lang.code)"
     >
-      <template v-slot:prepend>
+      <template #prepend>
         <span class="language-flag">{{ lang.flag }}</span>
       </template>
       <v-list-item-title>{{ lang.name }}</v-list-item-title>
diff --git a/dashboard/src/components/shared/ListConfigItem.vue b/dashboard/src/components/shared/ListConfigItem.vue
index be81255af..6748de932 100644
--- a/dashboard/src/components/shared/ListConfigItem.vue
+++ b/dashboard/src/components/shared/ListConfigItem.vue
@@ -1,36 +1,67 @@
 <template>
   <div class="d-flex align-center justify-space-between ga-2">
-    <div v-if="isSingleItemMode" class="flex-grow-1 d-flex align-center ga-2">
+    <div
+      v-if="isSingleItemMode"
+      class="flex-grow-1 d-flex align-center ga-2"
+    >
       <v-text-field
         v-model="singleItemValue"
         hide-details
         variant="outlined"
         density="compact"
         class="flex-grow-1"
-      ></v-text-field>
+      />
     </div>
     <div v-else>
-      <span v-if="!modelValue || modelValue.length === 0" style="color: rgb(var(--v-theme-primaryText));">
+      <span
+        v-if="!modelValue || modelValue.length === 0"
+        style="color: rgb(var(--v-theme-primaryText));"
+      >
         {{ t('core.common.list.noItems') }}
       </span>
-      <div v-else class="d-flex flex-wrap ga-2">
-        <v-chip v-for="item in displayItems" :key="item" size="x-small" label color="primary">
+      <div
+        v-else
+        class="d-flex flex-wrap ga-2"
+      >
+        <v-chip
+          v-for="item in displayItems"
+          :key="item"
+          size="x-small"
+          label
+          color="primary"
+        >
           {{ item.length > 20 ? item.slice(0, 20) + '...' : item }}
         </v-chip>
-        <v-chip v-if="modelValue.length > maxDisplayItems" size="x-small" label color="grey-lighten-1">
+        <v-chip
+          v-if="modelValue.length > maxDisplayItems"
+          size="x-small"
+          label
+          color="grey-lighten-1"
+        >
           +{{ modelValue.length - maxDisplayItems }}
         </v-chip>
       </div>
     </div>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
+    <v-btn
+      size="small"
+      color="primary"
+      variant="tonal"
+      @click="openDialog"
+    >
       {{ preferSingleItem ? t('core.common.list.addMore') : (buttonText || t('core.common.list.modifyButton')) }}
     </v-btn>
   </div>
 
   <!-- List Management Dialog -->
-  <v-dialog v-model="dialog" max-width="600px">
+  <v-dialog
+    v-model="dialog"
+    max-width="600px"
+  >
     <v-card>
-      <v-card-title class="text-h3 py-4" style="font-weight: normal;">
+      <v-card-title
+        class="text-h3 py-4"
+        style="font-weight: normal;"
+      >
         {{ dialogTitle || t('core.common.list.editTitle') }}
       </v-card-title>
       
@@ -40,42 +71,56 @@
           <v-text-field 
             v-model="newItem" 
             :label="t('core.common.list.addItemPlaceholder')" 
-            @keyup.enter="addItem" 
             clearable 
-            hide-details
-            variant="outlined" 
+            hide-details 
+            variant="outlined"
             density="compact" 
-            :placeholder="t('core.common.list.inputPlaceholder')"
-            class="flex-grow-1">
-          </v-text-field>
+            :placeholder="t('core.common.list.inputPlaceholder')" 
+            class="flex-grow-1"
+            @keyup.enter="addItem"
+          />
           <v-btn
-            @click="addItem"
             variant="tonal"
             color="primary"
             size="small"
-            :disabled="!newItem.trim()">
+            :disabled="!newItem.trim()"
+            @click="addItem"
+          >
             {{ t('core.common.list.addButton') }}
           </v-btn>
           <v-btn 
-            @click="showBatchImport = true" 
             variant="tonal" 
-            color="primary"
-            size="small">
-            <v-icon size="small">mdi-import</v-icon>
+            color="primary" 
+            size="small"
+            @click="showBatchImport = true"
+          >
+            <v-icon size="small">
+              mdi-import
+            </v-icon>
             {{ t('core.common.list.batchImport') }}
           </v-btn>
         </div>
       </v-card-text>
 
-      <v-card-text class="pa-0" style="max-height: 400px; overflow-y: auto;">
-        <v-list v-if="localItems.length > 0" density="compact">
+      <v-card-text
+        class="pa-0"
+        style="max-height: 400px; overflow-y: auto;"
+      >
+        <v-list
+          v-if="localItems.length > 0"
+          density="compact"
+        >
           <v-list-item
             v-for="(item, index) in localItems"
             :key="index"
             rounded="md"
             class="ma-1 list-item-clickable"
-            @click="startEdit(index, item)">
-            <v-list-item-title v-if="editIndex !== index" class="item-text">
+            @click="startEdit(index, item)"
+          >
+            <v-list-item-title
+              v-if="editIndex !== index"
+              class="item-text"
+            >
               {{ item }}
             </v-list-item-title>
             <v-text-field 
@@ -84,29 +129,31 @@
               hide-details 
               variant="outlined" 
               density="compact"
-              @keyup.enter="saveEdit" 
+              autofocus 
+              @keyup.enter="saveEdit"
               @keyup.esc="cancelEdit"
               @click.stop
-              autofocus
-            ></v-text-field>
+            />
             
-            <template v-slot:append>
+            <template #append>
               <div class="d-flex">
                 <v-btn 
                   v-if="editIndex === index"
-                  @click.stop="saveEdit" 
                   variant="plain" 
                   color="success" 
                   icon 
-                  size="small">
+                  size="small" 
+                  @click.stop="saveEdit"
+                >
                   <v-icon>mdi-check</v-icon>
                 </v-btn>
                 <v-btn 
-                  @click.stop="editIndex === index ? cancelEdit() : removeItem(index)" 
                   variant="plain" 
-                  :color="editIndex === index ? 'error' : 'default'"
-                  icon 
-                  size="small">
+                  :color="editIndex === index ? 'error' : 'default'" 
+                  icon
+                  size="small" 
+                  @click.stop="editIndex === index ? cancelEdit() : removeItem(index)"
+                >
                   <v-icon>mdi-close</v-icon>
                 </v-btn>
               </div>
@@ -114,24 +161,50 @@
           </v-list-item>
         </v-list>
         
-        <div v-else class="text-center py-8">
-          <v-icon size="64" color="grey-lighten-1">mdi-format-list-bulleted</v-icon>
-          <p class="text-grey mt-4">{{ t('core.common.list.noItemsHint') }}</p>
+        <div
+          v-else
+          class="text-center py-8"
+        >
+          <v-icon
+            size="64"
+            color="grey-lighten-1"
+          >
+            mdi-format-list-bulleted
+          </v-icon>
+          <p class="text-grey mt-4">
+            {{ t('core.common.list.noItemsHint') }}
+          </p>
         </div>
       </v-card-text>
 
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelDialog">{{ t('core.common.cancel') }}</v-btn>
-        <v-btn color="primary" @click="confirmDialog">{{ t('core.common.confirm') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancelDialog"
+        >
+          {{ t('core.common.cancel') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="confirmDialog"
+        >
+          {{ t('core.common.confirm') }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- Batch Import Dialog -->
-  <v-dialog v-model="showBatchImport" max-width="600px">
+  <v-dialog
+    v-model="showBatchImport"
+    max-width="600px"
+  >
     <v-card>
-      <v-card-title class="text-h3 py-4" style="font-weight: normal;">
+      <v-card-title
+        class="text-h3 py-4"
+        style="font-weight: normal;"
+      >
         {{ t('core.common.list.batchImportTitle') }}
       </v-card-title>
       
@@ -144,13 +217,21 @@
           variant="outlined"
           :hint="t('core.common.list.batchImportHint')"
           persistent-hint
-        ></v-textarea>
+        />
       </v-card-text>
 
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelBatchImport">{{ t('core.common.cancel') }}</v-btn>
-        <v-btn color="primary" @click="confirmBatchImport">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancelBatchImport"
+        >
+          {{ t('core.common.cancel') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="confirmBatchImport"
+        >
           {{ t('core.common.list.batchImportButton', { count: batchImportPreviewCount }) }}
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/components/shared/Logo.vue b/dashboard/src/components/shared/Logo.vue
index 4ff5889e2..312519473 100644
--- a/dashboard/src/components/shared/Logo.vue
+++ b/dashboard/src/components/shared/Logo.vue
@@ -2,16 +2,24 @@
   <div class="logo-container">
     <div class="logo-content">
       <div class="logo-image">
-        <img width="110" src="@/assets/images/astrbot_logo_mini.webp" alt="AstrBot Logo">
+        <img
+          width="110"
+          src="@/assets/images/astrbot_logo_mini.webp"
+          alt="AstrBot Logo"
+        >
       </div>
       <div class="logo-text">
         <h2 
           :style="{ color: 'rgb(var(--v-theme-primary))' }"
           v-html="formatTitle(title || t('core.header.logoTitle'))"
-        ></h2>
+        />
         <!-- 父子组件传递css变量可能会出错，暂时使用十六进制颜色值 -->
-        <h4 :style="{ color: 'rgba(var(--v-theme-on-surface), 0.72)' }"
-            class="hint-text">{{ subtitle || t('core.header.accountDialog.title') }}</h4>
+        <h4
+          :style="{ color: 'rgba(var(--v-theme-on-surface), 0.72)' }"
+          class="hint-text"
+        >
+          {{ subtitle || t('core.header.accountDialog.title') }}
+        </h4>
       </div>
     </div>
   </div>
diff --git a/dashboard/src/components/shared/MigrationDialog.vue b/dashboard/src/components/shared/MigrationDialog.vue
index 9716d8d1a..897c9bcef 100644
--- a/dashboard/src/components/shared/MigrationDialog.vue
+++ b/dashboard/src/components/shared/MigrationDialog.vue
@@ -1,112 +1,208 @@
 <template>
-    <v-dialog v-model="isOpen" persistent max-width="600" max-height="80vh" scrollable>
-        <v-card>
-            <v-card-title>
-                {{ t('features.migration.dialog.title') }}
-            </v-card-title>
+  <v-dialog
+    v-model="isOpen"
+    persistent
+    max-width="600"
+    max-height="80vh"
+    scrollable
+  >
+    <v-card>
+      <v-card-title>
+        {{ t('features.migration.dialog.title') }}
+      </v-card-title>
 
-            <v-card-text class="pa-6">
-                <p class="mb-4">{{ t('features.migration.dialog.warning') }}</p>
+      <v-card-text class="pa-6">
+        <p class="mb-4">
+          {{ t('features.migration.dialog.warning') }}
+        </p>
 
 
-                <div v-if="migrationCompleted" class="text-center py-8">
-                    <v-icon size="64" color="success" class="mb-4">mdi-check-circle</v-icon>
-                    <h3 class="mb-4">{{ t('features.migration.dialog.completed') }}</h3>
-                    <p class="mb-4">{{ migrationResult?.message || t('features.migration.dialog.success') }}</p>
-                    <v-alert type="info" variant="tonal" class="mb-4">
-                        <template v-slot:prepend>
-                            <v-icon>mdi-information</v-icon>
-                        </template>
-                        {{ t('features.migration.dialog.restartRecommended') }}
-                    </v-alert>
-                </div>
+        <div
+          v-if="migrationCompleted"
+          class="text-center py-8"
+        >
+          <v-icon
+            size="64"
+            color="success"
+            class="mb-4"
+          >
+            mdi-check-circle
+          </v-icon>
+          <h3 class="mb-4">
+            {{ t('features.migration.dialog.completed') }}
+          </h3>
+          <p class="mb-4">
+            {{ migrationResult?.message || t('features.migration.dialog.success') }}
+          </p>
+          <v-alert
+            type="info"
+            variant="tonal"
+            class="mb-4"
+          >
+            <template #prepend>
+              <v-icon>mdi-information</v-icon>
+            </template>
+            {{ t('features.migration.dialog.restartRecommended') }}
+          </v-alert>
+        </div>
 
-                <div v-else-if="migrating" class="migration-in-progress">
-                    <div class="text-center py-4">
-                        <v-progress-circular indeterminate color="primary" class="mb-4"></v-progress-circular>
-                        <h3 class="mb-4">{{ t('features.migration.dialog.migrating') }}</h3>
-                        <p class="mb-4">{{ t('features.migration.dialog.migratingSubtitle') }}</p>
-                    </div>
-                    <div class="console-container">
-                        <ConsoleDisplayer ref="consoleDisplayer" :showLevelBtns="false" style="height: 300px;" />
-                    </div>
-                </div>
+        <div
+          v-else-if="migrating"
+          class="migration-in-progress"
+        >
+          <div class="text-center py-4">
+            <v-progress-circular
+              indeterminate
+              color="primary"
+              class="mb-4"
+            />
+            <h3 class="mb-4">
+              {{ t('features.migration.dialog.migrating') }}
+            </h3>
+            <p class="mb-4">
+              {{ t('features.migration.dialog.migratingSubtitle') }}
+            </p>
+          </div>
+          <div class="console-container">
+            <ConsoleDisplayer
+              ref="consoleDisplayer"
+              :show-level-btns="false"
+              style="height: 300px;"
+            />
+          </div>
+        </div>
 
-                <div v-else-if="loading" class="text-center py-8">
-                    <v-progress-circular indeterminate color="primary" class="mb-4"></v-progress-circular>
-                    <p>{{ t('features.migration.dialog.loading') }}</p>
-                </div>
+        <div
+          v-else-if="loading"
+          class="text-center py-8"
+        >
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            class="mb-4"
+          />
+          <p>{{ t('features.migration.dialog.loading') }}</p>
+        </div>
 
-                <div v-else-if="error" class="text-center py-4">
-                    <v-alert type="error" variant="tonal" class="mb-4">
-                        <template v-slot:prepend>
-                            <v-icon>mdi-alert</v-icon>
-                        </template>
-                        {{ error }}
-                    </v-alert>
-                    <v-btn color="primary" @click="loadPlatforms">
-                        {{ t('features.migration.dialog.retry') }}
-                    </v-btn>
-                </div>
+        <div
+          v-else-if="error"
+          class="text-center py-4"
+        >
+          <v-alert
+            type="error"
+            variant="tonal"
+            class="mb-4"
+          >
+            <template #prepend>
+              <v-icon>mdi-alert</v-icon>
+            </template>
+            {{ error }}
+          </v-alert>
+          <v-btn
+            color="primary"
+            @click="loadPlatforms"
+          >
+            {{ t('features.migration.dialog.retry') }}
+          </v-btn>
+        </div>
 
-                <div v-else>
-                    <div v-if="platformGroups.length === 0" class="text-center py-4">
-                        <v-alert type="info" variant="tonal">
-                            <template v-slot:prepend>
-                                <v-icon>mdi-information</v-icon>
-                            </template>
-                            {{ t('features.migration.dialog.noPlatforms') }}
-                        </v-alert>
-                    </div>
+        <div v-else>
+          <div
+            v-if="platformGroups.length === 0"
+            class="text-center py-4"
+          >
+            <v-alert
+              type="info"
+              variant="tonal"
+            >
+              <template #prepend>
+                <v-icon>mdi-information</v-icon>
+              </template>
+              {{ t('features.migration.dialog.noPlatforms') }}
+            </v-alert>
+          </div>
 
-                    <div v-else>
-                        <div v-for="group in platformGroups" :key="group.type" class="mb-6">
-                            <v-card variant="outlined" v-if="group.platforms.length > 1">
-                                <v-card-subtitle class="py-2">
-                                    {{ group.type }}
-                                </v-card-subtitle>
+          <div v-else>
+            <div
+              v-for="group in platformGroups"
+              :key="group.type"
+              class="mb-6"
+            >
+              <v-card
+                v-if="group.platforms.length > 1"
+                variant="outlined"
+              >
+                <v-card-subtitle class="py-2">
+                  {{ group.type }}
+                </v-card-subtitle>
 
-                                <v-divider></v-divider>
+                <v-divider />
 
-                                <v-card-text style="padding: 16px;">
-                                    <small>请选择该平台类型下您主要使用的平台适配器。</small>
-                                    <v-radio-group v-model="selectedPlatforms[group.type]" :key="group.type"
-                                        hide-details>
-                                        <v-radio v-for="platform in group.platforms" :key="platform.id"
-                                            :value="platform.id" :label="getPlatformLabel(platform)" color="primary"
-                                            class="mb-1"></v-radio>
-                                    </v-radio-group>
-                                </v-card-text>
-                            </v-card>
-                        </div>
-                    </div>
-                </div>
-            </v-card-text>
+                <v-card-text style="padding: 16px;">
+                  <small>请选择该平台类型下您主要使用的平台适配器。</small>
+                  <v-radio-group
+                    :key="group.type"
+                    v-model="selectedPlatforms[group.type]"
+                    hide-details
+                  >
+                    <v-radio
+                      v-for="platform in group.platforms"
+                      :key="platform.id"
+                      :value="platform.id"
+                      :label="getPlatformLabel(platform)"
+                      color="primary"
+                      class="mb-1"
+                    />
+                  </v-radio-group>
+                </v-card-text>
+              </v-card>
+            </div>
+          </div>
+        </div>
+      </v-card-text>
 
-            <v-card-actions class="px-6 py-4">
-                <v-spacer></v-spacer>
-                <template v-if="migrationCompleted">
-                    <v-btn color="grey" variant="text" @click="handleClose">
-                        {{ t('core.common.close') }}
-                    </v-btn>
-                    <v-btn color="primary" variant="elevated" @click="restartAstrBot">
-                        {{ t('features.migration.dialog.restartNow') }}
-                    </v-btn>
-                </template>
-                <template v-else>
-                    <v-btn color="grey" variant="text" @click="handleCancel" :disabled="migrating">
-                        {{ t('core.common.cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" variant="elevated" @click="handleMigration" :disabled="!canMigrate || migrating"
-                        :loading="migrating">
-                        {{ t('features.migration.dialog.startMigration') }}
-                    </v-btn>
-                </template>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+      <v-card-actions class="px-6 py-4">
+        <v-spacer />
+        <template v-if="migrationCompleted">
+          <v-btn
+            color="grey"
+            variant="text"
+            @click="handleClose"
+          >
+            {{ t('core.common.close') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="elevated"
+            @click="restartAstrBot"
+          >
+            {{ t('features.migration.dialog.restartNow') }}
+          </v-btn>
+        </template>
+        <template v-else>
+          <v-btn
+            color="grey"
+            variant="text"
+            :disabled="migrating"
+            @click="handleCancel"
+          >
+            {{ t('core.common.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="elevated"
+            :disabled="!canMigrate || migrating"
+            :loading="migrating"
+            @click="handleMigration"
+          >
+            {{ t('features.migration.dialog.startMigration') }}
+          </v-btn>
+        </template>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
     
-    <WaitingForRestart ref="wfr"></WaitingForRestart>
+  <WaitingForRestart ref="wfr" />
 </template>
 
 <script setup>
diff --git a/dashboard/src/components/shared/ObjectEditor.vue b/dashboard/src/components/shared/ObjectEditor.vue
index 3247d1d22..326db56f4 100644
--- a/dashboard/src/components/shared/ObjectEditor.vue
+++ b/dashboard/src/components/shared/ObjectEditor.vue
@@ -1,35 +1,74 @@
 <template>
   <div class="d-flex align-center justify-space-between">
     <div>
-      <span v-if="!modelValue || Object.keys(modelValue).length === 0" style="color: rgb(var(--v-theme-primaryText));">
+      <span
+        v-if="!modelValue || Object.keys(modelValue).length === 0"
+        style="color: rgb(var(--v-theme-primaryText));"
+      >
         {{ t('core.common.objectEditor.noItems') }}
       </span>
-      <div v-else class="d-flex flex-wrap ga-2">
-        <v-chip v-for="key in displayKeys" :key="key" size="x-small" label color="primary">
+      <div
+        v-else
+        class="d-flex flex-wrap ga-2"
+      >
+        <v-chip
+          v-for="key in displayKeys"
+          :key="key"
+          size="x-small"
+          label
+          color="primary"
+        >
           {{ key.length > 20 ? key.slice(0, 20) + '...' : key }}
         </v-chip>
-        <v-chip v-if="Object.keys(modelValue).length > maxDisplayItems" size="x-small" label color="grey-lighten-1">
+        <v-chip
+          v-if="Object.keys(modelValue).length > maxDisplayItems"
+          size="x-small"
+          label
+          color="grey-lighten-1"
+        >
           +{{ Object.keys(modelValue).length - maxDisplayItems }}
         </v-chip>
       </div>
     </div>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
+    <v-btn
+      size="small"
+      color="primary"
+      variant="tonal"
+      @click="openDialog"
+    >
       {{ resolveButtonText }}
     </v-btn>
   </div>
 
   <!-- Key-Value Management Dialog -->
-  <v-dialog v-model="dialog" max-width="600px">
+  <v-dialog
+    v-model="dialog"
+    max-width="600px"
+  >
     <v-card>
-      <v-card-title class="text-h3 py-4" style="font-weight: normal;">
+      <v-card-title
+        class="text-h3 py-4"
+        style="font-weight: normal;"
+      >
         {{ resolveDialogTitle }}
       </v-card-title>
 
-      <v-card-text class="pa-4" style="max-height: 400px; overflow-y: auto;">
+      <v-card-text
+        class="pa-4"
+        style="max-height: 400px; overflow-y: auto;"
+      >
         <!-- Regular key-value pairs (non-template) -->
         <div v-if="nonTemplatePairs.length > 0">
-          <div v-for="(pair, index) in nonTemplatePairs" :key="index" class="key-value-pair">
-            <v-row no-gutters align="center" class="mb-2">
+          <div
+            v-for="(pair, index) in nonTemplatePairs"
+            :key="index"
+            class="key-value-pair"
+          >
+            <v-row
+              no-gutters
+              align="center"
+              class="mb-2"
+            >
               <v-col cols="4">
                 <v-text-field
                   v-model="pair.key"
@@ -38,9 +77,12 @@
                   hide-details
                   :placeholder="t('core.common.objectEditor.placeholders.keyName')"
                   @blur="updateKey(index, pair.key)"
-                ></v-text-field>
+                />
               </v-col>
-              <v-col cols="7" class="pl-2 d-flex align-center justify-end">
+              <v-col
+                cols="7"
+                class="pl-2 d-flex align-center justify-end"
+              >
                 <v-text-field
                   v-if="pair.type === 'string'"
                   v-model="pair.value"
@@ -48,12 +90,14 @@
                   variant="outlined"
                   hide-details
                   :placeholder="t('core.common.objectEditor.placeholders.stringValue')"
-                ></v-text-field>
-                <div v-else-if="pair.type === 'number' || pair.type === 'float' || pair.type === 'int'" class="d-flex align-center gap-2 flex-grow-1">
+                />
+                <div
+                  v-else-if="pair.type === 'number' || pair.type === 'float' || pair.type === 'int'"
+                  class="d-flex align-center gap-2 flex-grow-1"
+                >
                   <v-slider
                     v-if="pair.slider"
                     :model-value="Number(pair.value) || 0"
-                    @update:model-value="pair.value = $event"
                     :min="pair.slider.min"
                     :max="pair.slider.max"
                     :step="pair.slider.step"
@@ -61,7 +105,8 @@
                     density="compact"
                     hide-details
                     class="flex-grow-1"
-                  ></v-slider>
+                    @update:model-value="pair.value = $event"
+                  />
                   <v-text-field
                     v-model.number="pair.value"
                     type="number"
@@ -70,7 +115,7 @@
                     hide-details
                     :placeholder="t('core.common.objectEditor.placeholders.numberValue')"
                     :style="pair.slider ? 'max-width: 120px;' : ''"
-                  ></v-text-field>
+                  />
                 </div>
                 <v-switch
                   v-else-if="pair.type === 'boolean'"
@@ -78,7 +123,7 @@
                   density="compact"
                   hide-details
                   color="primary"
-                ></v-switch>
+                />
                 <v-text-field
                   v-if="pair.type === 'json'"
                   v-model="pair.value"
@@ -86,11 +131,14 @@
                   variant="outlined"
                   hide-details="auto"
                   :placeholder="t('core.common.objectEditor.placeholders.jsonValue')"
-                  @blur="updateJSON(index, pair.value)"
                   :error-messages="pair.jsonError"
-                ></v-text-field>
+                  @blur="updateJSON(index, pair.value)"
+                />
               </v-col>
-              <v-col cols="1" class="pl-2">
+              <v-col
+                cols="1"
+                class="pl-2"
+              >
                 <v-btn
                   icon
                   variant="text"
@@ -106,32 +154,55 @@
         </div>
 
         <!-- Template schema fields -->
-        <div v-if="hasTemplateSchema" class="mt-4">
-          <v-divider class="mb-3"></v-divider>
-          <div class="text-caption text-grey mb-2">{{ t('core.common.objectEditor.presets') }}</div>
-          <div v-for="(template, templateKey) in templateSchema" :key="templateKey" class="template-field" :class="{ 'template-field-inactive': !isTemplateKeyAdded(templateKey) }">
-            <v-row no-gutters align="center" class="mb-2">
+        <div
+          v-if="hasTemplateSchema"
+          class="mt-4"
+        >
+          <v-divider class="mb-3" />
+          <div class="text-caption text-grey mb-2">
+            {{ t('core.common.objectEditor.presets') }}
+          </div>
+          <div
+            v-for="(template, templateKey) in templateSchema"
+            :key="templateKey"
+            class="template-field"
+            :class="{ 'template-field-inactive': !isTemplateKeyAdded(templateKey) }"
+          >
+            <v-row
+              no-gutters
+              align="center"
+              class="mb-2"
+            >
               <v-col cols="4">
                 <div class="d-flex flex-column">
                   <span class="text-caption font-weight-medium">{{ getTemplateTitle(template, templateKey) }}</span>
-                  <span v-if="template.hint" class="text-caption text-grey" style="font-size: 0.7rem;">{{ translateIfKey(template.hint) }}</span>
+                  <span
+                    v-if="template.hint"
+                    class="text-caption text-grey"
+                    style="font-size: 0.7rem;"
+                  >{{ translateIfKey(template.hint) }}</span>
                 </div>
               </v-col>
-              <v-col cols="7" class="pl-2 d-flex align-center justify-end">
+              <v-col
+                cols="7"
+                class="pl-2 d-flex align-center justify-end"
+              >
                 <v-text-field
                   v-if="template.type === 'string'"
                   :model-value="getTemplateValue(templateKey)"
-                  @update:model-value="updateTemplateValue(templateKey, $event)"
                   density="compact"
                   variant="outlined"
                   hide-details
                   :placeholder="t('core.common.objectEditor.placeholders.stringValue')"
-                ></v-text-field>
-                <div v-else-if="template.type === 'number' || template.type === 'float' || template.type === 'int'" class="d-flex align-center ga-4 flex-grow-1">
+                  @update:model-value="updateTemplateValue(templateKey, $event)"
+                />
+                <div
+                  v-else-if="template.type === 'number' || template.type === 'float' || template.type === 'int'"
+                  class="d-flex align-center ga-4 flex-grow-1"
+                >
                   <v-slider
                     v-if="template.slider"
                     :model-value="Number(getTemplateValue(templateKey)) || 0"
-                    @update:model-value="updateTemplateValue(templateKey, $event)"
                     :min="template.slider.min"
                     :max="template.slider.max"
                     :step="template.slider.step"
@@ -139,28 +210,32 @@
                     density="compact"
                     hide-details
                     class="flex-grow-1"
-                  ></v-slider>
+                    @update:model-value="updateTemplateValue(templateKey, $event)"
+                  />
                   <v-text-field
                     :model-value="getTemplateValue(templateKey)"
-                    @update:model-value="updateTemplateValue(templateKey, $event)"
                     type="number"
                     density="compact"
                     variant="outlined"
                     hide-details
                     :placeholder="t('core.common.objectEditor.placeholders.numberValue')"
                     :style="template.slider ? 'max-width: 120px;' : ''"
-                  ></v-text-field>
+                    @update:model-value="updateTemplateValue(templateKey, $event)"
+                  />
                 </div>
                 <v-switch
                   v-else-if="template.type === 'boolean' || template.type === 'bool'"
                   :model-value="getTemplateValue(templateKey)"
-                  @update:model-value="updateTemplateValue(templateKey, $event)"
                   density="compact"
                   hide-details
                   color="primary"
-                ></v-switch>
+                  @update:model-value="updateTemplateValue(templateKey, $event)"
+                />
               </v-col>
-              <v-col cols="1" class="pl-2">
+              <v-col
+                cols="1"
+                class="pl-2"
+              >
                 <v-btn
                   v-if="isTemplateKeyAdded(templateKey)"
                   icon
@@ -176,9 +251,19 @@
           </div>
         </div>
 
-        <div v-if="localKeyValuePairs.length === 0 && !hasTemplateSchema" class="text-center py-8">
-          <v-icon size="64" color="grey-lighten-1">mdi-code-json</v-icon>
-          <p class="text-grey mt-4">{{ t('core.common.objectEditor.noParams') }}</p>
+        <div
+          v-if="localKeyValuePairs.length === 0 && !hasTemplateSchema"
+          class="text-center py-8"
+        >
+          <v-icon
+            size="64"
+            color="grey-lighten-1"
+          >
+            mdi-code-json
+          </v-icon>
+          <p class="text-grey mt-4">
+            {{ t('core.common.objectEditor.noParams') }}
+          </p>
         </div>
       </v-card-text>
 
@@ -192,7 +277,7 @@
             variant="outlined"
             hide-details
             class="flex-grow-1"
-          ></v-text-field>
+          />
           <v-select
             v-model="newValueType"
             :items="['string', 'number', 'boolean', 'json']"
@@ -201,8 +286,12 @@
             variant="outlined"
             hide-details
             style="max-width: 120px;"
-          ></v-select>
-          <v-btn @click="addKeyValuePair" variant="tonal" color="primary">
+          />
+          <v-btn
+            variant="tonal"
+            color="primary"
+            @click="addKeyValuePair"
+          >
             <v-icon>mdi-plus</v-icon>
             {{ t('core.common.add') }}
           </v-btn>
@@ -210,9 +299,19 @@
       </v-card-text>
 
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelDialog">{{ t('core.common.cancel') }}</v-btn>
-        <v-btn color="primary" @click="confirmDialog">{{ t('core.common.confirm') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancelDialog"
+        >
+          {{ t('core.common.cancel') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="confirmDialog"
+        >
+          {{ t('core.common.confirm') }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/components/shared/PersonaForm.vue b/dashboard/src/components/shared/PersonaForm.vue
index 19865feb6..16e0e1e9f 100644
--- a/dashboard/src/components/shared/PersonaForm.vue
+++ b/dashboard/src/components/shared/PersonaForm.vue
@@ -1,325 +1,584 @@
 <template>
-    <v-dialog v-model="showDialog" :max-width="$vuetify.display.smAndDown ? undefined : '1200px'" scrollable>
-        <v-card class="persona-form-card" :class="{ 'persona-form-card-mobile': $vuetify.display.smAndDown }">
-            <v-card-title class="persona-form-title text-h2 px-6 pt-6 pl-6">
-                {{ editingPersona ? tm('dialog.edit.title') : tm('dialog.create.title') }}
-            </v-card-title>
+  <v-dialog
+    v-model="showDialog"
+    :max-width="$vuetify.display.smAndDown ? undefined : '1200px'"
+    scrollable
+  >
+    <v-card
+      class="persona-form-card"
+      :class="{ 'persona-form-card-mobile': $vuetify.display.smAndDown }"
+    >
+      <v-card-title class="persona-form-title text-h2 px-6 pt-6 pl-6">
+        {{ editingPersona ? tm('dialog.edit.title') : tm('dialog.create.title') }}
+      </v-card-title>
 
-            <v-card-text class="persona-form-content">
-                <!-- 创建位置提示 -->
-                <v-alert v-if="!editingPersona" type="info" variant="tonal" density="compact" class="mb-4"
-                    icon="mdi-folder-outline">
-                    {{ tm('form.createInFolder', { folder: folderDisplayName }) }}
-                </v-alert>
+      <v-card-text class="persona-form-content">
+        <!-- 创建位置提示 -->
+        <v-alert
+          v-if="!editingPersona"
+          type="info"
+          variant="tonal"
+          density="compact"
+          class="mb-4"
+          icon="mdi-folder-outline"
+        >
+          {{ tm('form.createInFolder', { folder: folderDisplayName }) }}
+        </v-alert>
 
-                <v-form ref="personaForm" v-model="formValid">
-                    <v-row class="persona-form-layout">
-                        <v-col cols="12" md="6" class="persona-basic-col">
-                            <v-text-field v-model="personaForm.persona_id" :label="tm('form.personaId')"
-                                :rules="personaIdRules" :disabled="editingPersona" variant="outlined"
-                                density="comfortable" class="mb-4" />
+        <v-form
+          ref="personaForm"
+          v-model="formValid"
+        >
+          <v-row class="persona-form-layout">
+            <v-col
+              cols="12"
+              md="6"
+              class="persona-basic-col"
+            >
+              <v-text-field
+                v-model="personaForm.persona_id"
+                :label="tm('form.personaId')"
+                :rules="personaIdRules"
+                :disabled="editingPersona"
+                variant="outlined"
+                density="comfortable"
+                class="mb-4"
+              />
 
-                            <v-textarea v-model="personaForm.system_prompt" :label="tm('form.systemPrompt')"
-                                :rules="systemPromptRules" variant="outlined" rows="16" class="mb-4" />
+              <v-textarea
+                v-model="personaForm.system_prompt"
+                :label="tm('form.systemPrompt')"
+                :rules="systemPromptRules"
+                variant="outlined"
+                rows="16"
+                class="mb-4"
+              />
 
-                            <v-textarea
-                                v-model="personaForm.custom_error_message"
-                                :label="tm('form.customErrorMessage')"
-                                :hint="tm('form.customErrorMessageHelp')"
-                                variant="outlined"
-                                rows="4"
-                                persistent-hint
-                                clearable
-                                class="mb-4"
-                            />
-                        </v-col>
+              <v-textarea
+                v-model="personaForm.custom_error_message"
+                :label="tm('form.customErrorMessage')"
+                :hint="tm('form.customErrorMessageHelp')"
+                variant="outlined"
+                rows="4"
+                persistent-hint
+                clearable
+                class="mb-4"
+              />
+            </v-col>
 
-                        <v-col cols="12" md="6" class="persona-panels-col">
-                            <v-expansion-panels v-model="expandedPanels" multiple>
-                        <!-- 工具选择面板 -->
-                        <v-expansion-panel value="tools">
-                            <v-expansion-panel-title>
-                                <v-icon class="mr-2">mdi-tools</v-icon>
-                                {{ tm('form.tools') }}
-                                <v-chip v-if="Array.isArray(personaForm.tools) && personaForm.tools.length > 0"
-                                    size="small" color="primary" variant="tonal" class="ml-2">
-                                    {{ personaForm.tools.length }}
+            <v-col
+              cols="12"
+              md="6"
+              class="persona-panels-col"
+            >
+              <v-expansion-panels
+                v-model="expandedPanels"
+                multiple
+              >
+                <!-- 工具选择面板 -->
+                <v-expansion-panel value="tools">
+                  <v-expansion-panel-title>
+                    <v-icon class="mr-2">
+                      mdi-tools
+                    </v-icon>
+                    {{ tm('form.tools') }}
+                    <v-chip
+                      v-if="Array.isArray(personaForm.tools) && personaForm.tools.length > 0"
+                      size="small"
+                      color="primary"
+                      variant="tonal"
+                      class="ml-2"
+                    >
+                      {{ personaForm.tools.length }}
+                    </v-chip>
+                  </v-expansion-panel-title>
+
+                  <v-expansion-panel-text>
+                    <div class="mb-3">
+                      <p class="text-body-2 text-medium-emphasis">
+                        {{ tm('form.toolsHelp') }}
+                      </p>
+                    </div>
+
+                    <v-radio-group
+                      v-model="toolSelectValue"
+                      class="mt-2"
+                      hide-details="true"
+                    >
+                      <v-radio
+                        label="默认使用全部函数工具"
+                        value="0"
+                      />
+                      <v-radio
+                        label="选择指定函数工具"
+                        value="1"
+                      />
+                    </v-radio-group>
+
+                    <div
+                      v-if="toolSelectValue === '1'"
+                      class="mt-3 selected-config-area"
+                    >
+                      <!-- 工具搜索 -->
+                      <v-text-field
+                        v-model="toolSearch"
+                        :label="tm('form.searchTools')"
+                        prepend-inner-icon="mdi-magnify"
+                        variant="outlined"
+                        density="compact"
+                        hide-details
+                        clearable
+                        class="mb-3"
+                      />
+
+
+                      <!-- MCP 服务器 -->
+                      <div
+                        v-if="mcpServers.length > 0"
+                        class="mb-4"
+                      >
+                        <h4 class="text-subtitle-2 mb-2">
+                          {{ tm('form.mcpServersQuickSelect') }}
+                        </h4>
+                        <div class="d-flex flex-wrap ga-2">
+                          <v-chip
+                            v-for="server in mcpServers"
+                            :key="server.name"
+                            :color="isServerSelected(server) ? 'primary' : 'default'"
+                            :variant="isServerSelected(server) ? 'flat' : 'outlined'"
+                            size="small"
+                            clickable
+                            :disabled="!server.tools || server.tools.length === 0"
+                            @click="toggleMcpServer(server)"
+                          >
+                            <v-icon
+                              start
+                              size="small"
+                            >
+                              mdi-server
+                            </v-icon>
+                            {{ server.name }}
+                            <v-chip-text
+                              v-if="server.tools"
+                              class="ml-1"
+                            >
+                              ({{ server.tools.length }})
+                            </v-chip-text>
+                          </v-chip>
+                        </div>
+                      </div>
+
+                      <!-- 工具选择列表 -->
+                      <div
+                        v-if="filteredTools.length > 0"
+                        class="tools-selection"
+                      >
+                        <v-virtual-scroll
+                          :items="filteredTools"
+                          height="300"
+                          item-height="72"
+                        >
+                          <template #default="{ item }">
+                            <v-list-item
+                              :key="item.name"
+                              density="comfortable"
+                              @click="toggleTool(item.name)"
+                            >
+                              <template #prepend>
+                                <v-checkbox-btn
+                                  :model-value="isToolSelected(item.name)"
+                                  @click.stop="toggleTool(item.name)"
+                                />
+                              </template>
+
+                              <v-list-item-title>
+                                {{ item.name }}
+
+                                <v-chip
+                                  v-if="item.origin"
+                                  size="x-small"
+                                  color="info"
+                                  class="mr-2"
+                                  variant="tonal"
+                                >
+                                  {{ item.origin }}
                                 </v-chip>
-                            </v-expansion-panel-title>
-
-                            <v-expansion-panel-text>
-                                <div class="mb-3">
-                                    <p class="text-body-2 text-medium-emphasis">
-                                        {{ tm('form.toolsHelp') }}
-                                    </p>
-                                </div>
-
-                                <v-radio-group class="mt-2" v-model="toolSelectValue" hide-details="true">
-                                    <v-radio label="默认使用全部函数工具" value="0"></v-radio>
-                                    <v-radio label="选择指定函数工具" value="1">
-                                    </v-radio>
-                                </v-radio-group>
-
-                                <div v-if="toolSelectValue === '1'" class="mt-3 selected-config-area">
-
-                                    <!-- 工具搜索 -->
-                                    <v-text-field v-model="toolSearch" :label="tm('form.searchTools')"
-                                        prepend-inner-icon="mdi-magnify" variant="outlined" density="compact"
-                                        hide-details clearable class="mb-3" />
-
-
-                                    <!-- MCP 服务器 -->
-                                    <div v-if="mcpServers.length > 0" class="mb-4">
-                                        <h4 class="text-subtitle-2 mb-2">{{ tm('form.mcpServersQuickSelect') }}</h4>
-                                        <div class="d-flex flex-wrap ga-2">
-                                            <v-chip v-for="server in mcpServers" :key="server.name"
-                                                :color="isServerSelected(server) ? 'primary' : 'default'"
-                                                :variant="isServerSelected(server) ? 'flat' : 'outlined'" size="small"
-                                                clickable @click="toggleMcpServer(server)"
-                                                :disabled="!server.tools || server.tools.length === 0">
-                                                <v-icon start size="small">mdi-server</v-icon>
-                                                {{ server.name }}
-                                                <v-chip-text v-if="server.tools" class="ml-1">
-                                                    ({{ server.tools.length }})
-                                                </v-chip-text>
-                                            </v-chip>
-                                        </div>
-                                    </div>
-
-                                    <!-- 工具选择列表 -->
-                                    <div v-if="filteredTools.length > 0" class="tools-selection">
-                                        <v-virtual-scroll :items="filteredTools" height="300" item-height="72">
-                                            <template v-slot:default="{ item }">
-                                                <v-list-item :key="item.name" density="comfortable"
-                                                    @click="toggleTool(item.name)">
-                                                    <template v-slot:prepend>
-                                                        <v-checkbox-btn :model-value="isToolSelected(item.name)"
-                                                            @click.stop="toggleTool(item.name)" />
-                                                    </template>
-
-                                                    <v-list-item-title>
-                                                        {{ item.name }}
-
-                                                        <v-chip v-if="item.origin" size="x-small" color="info" class="mr-2"
-                                                            variant="tonal">
-                                                            {{ item.origin }}
-                                                        </v-chip>
-                                                        <v-chip v-if="item.origin_name" size="x-small" color="info"
-                                                            variant="outlined">
-                                                            {{ item.origin_name }}
-                                                        </v-chip>
-
-                                                    </v-list-item-title>
-
-                                                    <v-list-item-subtitle v-if="item.description">
-                                                        {{ truncateText(item.description, 100) }}
-                                                    </v-list-item-subtitle>
-                                                </v-list-item>
-                                            </template>
-                                        </v-virtual-scroll>
-                                    </div>
-
-                                    <div v-else-if="!loadingTools && availableTools.length === 0"
-                                        class="text-center pa-4">
-                                        <v-icon size="48" color="grey-lighten-2" class="mb-2">mdi-tools</v-icon>
-                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noToolsAvailable')
-                                        }}
-                                        </p>
-                                    </div>
-
-                                    <div v-else-if="!loadingTools && filteredTools.length === 0"
-                                        class="text-center pa-4">
-                                        <v-icon size="48" color="grey-lighten-2" class="mb-2">mdi-magnify</v-icon>
-                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noToolsFound') }}
-                                        </p>
-                                    </div>
-
-                                    <!-- 加载状态 -->
-                                    <div v-if="loadingTools" class="text-center pa-4">
-                                        <v-progress-circular indeterminate color="primary" />
-                                        <p class="text-body-2 text-medium-emphasis mt-2">{{ tm('form.loadingTools')
-                                        }}
-                                        </p>
-                                    </div>
-
-                                    <!-- 已选择的工具 -->
-                                    <div class="mt-4">
-                                        <h4 class="text-subtitle-2 mb-2">
-                                            {{ tm('form.selectedTools') }}
-                                            <span v-if="personaForm.tools === null" class="text-success">
-                                                ({{ tm('form.allSelected') }})
-                                            </span>
-                                            <span v-else-if="Array.isArray(personaForm.tools)">
-                                                ({{ personaForm.tools.length }})
-                                            </span>
-                                        </h4>
-                                        <div v-if="Array.isArray(personaForm.tools) && personaForm.tools.length > 0"
-                                            class="d-flex flex-wrap ga-1" style="max-height: 100px; overflow-y: auto;">
-                                            <v-chip v-for="toolName in personaForm.tools" :key="toolName" size="small"
-                                                color="primary" variant="tonal" closable
-                                                @click:close="removeTool(toolName)">
-                                                {{ toolName }}
-                                            </v-chip>
-                                        </div>
-                                        <div v-else class="text-body-2 text-medium-emphasis">
-                                            {{ tm('form.noToolsSelected') }}
-                                        </div>
-                                    </div>
-                                </div>
-
-                            </v-expansion-panel-text>
-                        </v-expansion-panel>
-
-                        <!-- Skills 选择面板 -->
-                        <v-expansion-panel value="skills">
-                            <v-expansion-panel-title>
-                                <v-icon class="mr-2">mdi-lightning-bolt</v-icon>
-                                {{ tm('form.skills') }}
-                                <v-chip v-if="Array.isArray(personaForm.skills) && personaForm.skills.length > 0"
-                                    size="small" color="primary" variant="tonal" class="ml-2">
-                                    {{ personaForm.skills.length }}
+                                <v-chip
+                                  v-if="item.origin_name"
+                                  size="x-small"
+                                  color="info"
+                                  variant="outlined"
+                                >
+                                  {{ item.origin_name }}
                                 </v-chip>
-                            </v-expansion-panel-title>
+                              </v-list-item-title>
 
-                            <v-expansion-panel-text>
-                                <div class="mb-3">
-                                    <p class="text-body-2 text-medium-emphasis">
-                                        {{ tm('form.skillsHelp') }}
-                                    </p>
-                                </div>
+                              <v-list-item-subtitle v-if="item.description">
+                                {{ truncateText(item.description, 100) }}
+                              </v-list-item-subtitle>
+                            </v-list-item>
+                          </template>
+                        </v-virtual-scroll>
+                      </div>
 
-                                <v-radio-group class="mt-2" v-model="skillSelectValue" hide-details="true">
-                                    <v-radio :label="tm('form.skillsAllAvailable')" value="0"></v-radio>
-                                    <v-radio :label="tm('form.skillsSelectSpecific')" value="1"></v-radio>
-                                </v-radio-group>
+                      <div
+                        v-else-if="!loadingTools && availableTools.length === 0"
+                        class="text-center pa-4"
+                      >
+                        <v-icon
+                          size="48"
+                          color="grey-lighten-2"
+                          class="mb-2"
+                        >
+                          mdi-tools
+                        </v-icon>
+                        <p class="text-body-2 text-medium-emphasis">
+                          {{ tm('form.noToolsAvailable')
+                          }}
+                        </p>
+                      </div>
 
-                                <div v-if="skillSelectValue === '1'" class="mt-3 selected-config-area">
-                                    <v-text-field v-model="skillSearch" :label="tm('form.searchSkills')"
-                                        prepend-inner-icon="mdi-magnify" variant="outlined" density="compact"
-                                        hide-details clearable class="mb-3" />
+                      <div
+                        v-else-if="!loadingTools && filteredTools.length === 0"
+                        class="text-center pa-4"
+                      >
+                        <v-icon
+                          size="48"
+                          color="grey-lighten-2"
+                          class="mb-2"
+                        >
+                          mdi-magnify
+                        </v-icon>
+                        <p class="text-body-2 text-medium-emphasis">
+                          {{ tm('form.noToolsFound') }}
+                        </p>
+                      </div>
 
-                                    <div v-if="filteredSkills.length > 0" class="skills-selection">
-                                        <v-virtual-scroll :items="filteredSkills" height="240" item-height="48">
-                                            <template v-slot:default="{ item }">
-                                                <v-list-item :key="item.name" density="comfortable"
-                                                    @click="toggleSkill(item.name)">
-                                                    <template v-slot:prepend>
-                                                        <v-checkbox-btn :model-value="isSkillSelected(item.name)"
-                                                            @click.stop="toggleSkill(item.name)" />
-                                                    </template>
-                                                    <v-list-item-title>
-                                                        {{ item.name }}
-                                                    </v-list-item-title>
-                                                    <v-list-item-subtitle v-if="item.description">
-                                                        {{ truncateText(item.description, 100) }}
-                                                    </v-list-item-subtitle>
-                                                </v-list-item>
-                                            </template>
-                                        </v-virtual-scroll>
-                                    </div>
+                      <!-- 加载状态 -->
+                      <div
+                        v-if="loadingTools"
+                        class="text-center pa-4"
+                      >
+                        <v-progress-circular
+                          indeterminate
+                          color="primary"
+                        />
+                        <p class="text-body-2 text-medium-emphasis mt-2">
+                          {{ tm('form.loadingTools')
+                          }}
+                        </p>
+                      </div>
 
-                                    <div v-else-if="!loadingSkills && availableSkills.length === 0"
-                                        class="text-center pa-4">
-                                        <v-icon size="48" color="grey-lighten-2"
-                                            class="mb-2">mdi-lightning-bolt</v-icon>
-                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noSkillsAvailable') }}
-                                        </p>
-                                    </div>
+                      <!-- 已选择的工具 -->
+                      <div class="mt-4">
+                        <h4 class="text-subtitle-2 mb-2">
+                          {{ tm('form.selectedTools') }}
+                          <span
+                            v-if="personaForm.tools === null"
+                            class="text-success"
+                          >
+                            ({{ tm('form.allSelected') }})
+                          </span>
+                          <span v-else-if="Array.isArray(personaForm.tools)">
+                            ({{ personaForm.tools.length }})
+                          </span>
+                        </h4>
+                        <div
+                          v-if="Array.isArray(personaForm.tools) && personaForm.tools.length > 0"
+                          class="d-flex flex-wrap ga-1"
+                          style="max-height: 100px; overflow-y: auto;"
+                        >
+                          <v-chip
+                            v-for="toolName in personaForm.tools"
+                            :key="toolName"
+                            size="small"
+                            color="primary"
+                            variant="tonal"
+                            closable
+                            @click:close="removeTool(toolName)"
+                          >
+                            {{ toolName }}
+                          </v-chip>
+                        </div>
+                        <div
+                          v-else
+                          class="text-body-2 text-medium-emphasis"
+                        >
+                          {{ tm('form.noToolsSelected') }}
+                        </div>
+                      </div>
+                    </div>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
 
-                                    <div v-else-if="!loadingSkills && filteredSkills.length === 0"
-                                        class="text-center pa-4">
-                                        <v-icon size="48" color="grey-lighten-2" class="mb-2">mdi-magnify</v-icon>
-                                        <p class="text-body-2 text-medium-emphasis">{{ tm('form.noSkillsFound') }}
-                                        </p>
-                                    </div>
+                <!-- Skills 选择面板 -->
+                <v-expansion-panel value="skills">
+                  <v-expansion-panel-title>
+                    <v-icon class="mr-2">
+                      mdi-lightning-bolt
+                    </v-icon>
+                    {{ tm('form.skills') }}
+                    <v-chip
+                      v-if="Array.isArray(personaForm.skills) && personaForm.skills.length > 0"
+                      size="small"
+                      color="primary"
+                      variant="tonal"
+                      class="ml-2"
+                    >
+                      {{ personaForm.skills.length }}
+                    </v-chip>
+                  </v-expansion-panel-title>
 
-                                    <div v-if="loadingSkills" class="text-center pa-4">
-                                        <v-progress-circular indeterminate color="primary" />
-                                        <p class="text-body-2 text-medium-emphasis mt-2">{{ tm('form.loadingSkills') }}
-                                        </p>
-                                    </div>
+                  <v-expansion-panel-text>
+                    <div class="mb-3">
+                      <p class="text-body-2 text-medium-emphasis">
+                        {{ tm('form.skillsHelp') }}
+                      </p>
+                    </div>
 
-                                    <div class="mt-4">
-                                        <h4 class="text-subtitle-2 mb-2">
-                                            {{ tm('form.selectedSkills') }}
-                                            <span v-if="personaForm.skills === null" class="text-success">
-                                                ({{ tm('form.allSelected') }})
-                                            </span>
-                                            <span v-else-if="Array.isArray(personaForm.skills)">
-                                                ({{ personaForm.skills.length }})
-                                            </span>
-                                        </h4>
-                                        <div v-if="Array.isArray(personaForm.skills) && personaForm.skills.length > 0"
-                                            class="d-flex flex-wrap ga-1" style="max-height: 100px; overflow-y: auto;">
-                                            <v-chip v-for="skillName in personaForm.skills" :key="skillName"
-                                                size="small" color="primary" variant="tonal" closable
-                                                @click:close="removeSkill(skillName)">
-                                                {{ skillName }}
-                                            </v-chip>
-                                        </div>
-                                        <div v-else class="text-body-2 text-medium-emphasis">
-                                            {{ tm('form.noSkillsSelected') }}
-                                        </div>
-                                    </div>
-                                </div>
-                            </v-expansion-panel-text>
-                        </v-expansion-panel>
+                    <v-radio-group
+                      v-model="skillSelectValue"
+                      class="mt-2"
+                      hide-details="true"
+                    >
+                      <v-radio
+                        :label="tm('form.skillsAllAvailable')"
+                        value="0"
+                      />
+                      <v-radio
+                        :label="tm('form.skillsSelectSpecific')"
+                        value="1"
+                      />
+                    </v-radio-group>
 
-                        <!-- 预设对话面板 -->
-                        <v-expansion-panel value="dialogs">
-                            <v-expansion-panel-title>
-                                <v-icon class="mr-2">mdi-chat</v-icon>
-                                {{ tm('form.presetDialogs') }}
-                                <v-chip v-if="personaForm.begin_dialogs.length > 0" size="small" color="primary"
-                                    variant="tonal" class="ml-2">
-                                    {{ personaForm.begin_dialogs.length / 2 }}
-                                </v-chip>
-                            </v-expansion-panel-title>
+                    <div
+                      v-if="skillSelectValue === '1'"
+                      class="mt-3 selected-config-area"
+                    >
+                      <v-text-field
+                        v-model="skillSearch"
+                        :label="tm('form.searchSkills')"
+                        prepend-inner-icon="mdi-magnify"
+                        variant="outlined"
+                        density="compact"
+                        hide-details
+                        clearable
+                        class="mb-3"
+                      />
 
-                            <v-expansion-panel-text>
-                                <div class="mb-3">
-                                    <p class="text-body-2 text-medium-emphasis">
-                                        {{ tm('form.presetDialogsHelp') }}
-                                    </p>
-                                </div>
+                      <div
+                        v-if="filteredSkills.length > 0"
+                        class="skills-selection"
+                      >
+                        <v-virtual-scroll
+                          :items="filteredSkills"
+                          height="240"
+                          item-height="48"
+                        >
+                          <template #default="{ item }">
+                            <v-list-item
+                              :key="item.name"
+                              density="comfortable"
+                              @click="toggleSkill(item.name)"
+                            >
+                              <template #prepend>
+                                <v-checkbox-btn
+                                  :model-value="isSkillSelected(item.name)"
+                                  @click.stop="toggleSkill(item.name)"
+                                />
+                              </template>
+                              <v-list-item-title>
+                                {{ item.name }}
+                              </v-list-item-title>
+                              <v-list-item-subtitle v-if="item.description">
+                                {{ truncateText(item.description, 100) }}
+                              </v-list-item-subtitle>
+                            </v-list-item>
+                          </template>
+                        </v-virtual-scroll>
+                      </div>
 
-                                <div v-for="(dialog, index) in personaForm.begin_dialogs" :key="index" class="mb-3">
-                                    <v-textarea v-model="personaForm.begin_dialogs[index]"
-                                        :label="index % 2 === 0 ? tm('form.userMessage') : tm('form.assistantMessage')"
-                                        :rules="getDialogRules(index)" variant="outlined" rows="2"
-                                        density="comfortable">
-                                        <template v-slot:append>
-                                            <v-btn icon="mdi-delete" variant="text" size="small" color="error"
-                                                @click="removeDialog(index)" />
-                                        </template>
-                                    </v-textarea>
-                                </div>
+                      <div
+                        v-else-if="!loadingSkills && availableSkills.length === 0"
+                        class="text-center pa-4"
+                      >
+                        <v-icon
+                          size="48"
+                          color="grey-lighten-2"
+                          class="mb-2"
+                        >
+                          mdi-lightning-bolt
+                        </v-icon>
+                        <p class="text-body-2 text-medium-emphasis">
+                          {{ tm('form.noSkillsAvailable') }}
+                        </p>
+                      </div>
 
-                                <v-btn variant="outlined" prepend-icon="mdi-plus" @click="addDialogPair" block>
-                                    {{ tm('buttons.addDialogPair') }}
-                                </v-btn>
-                            </v-expansion-panel-text>
-                        </v-expansion-panel>
-                            </v-expansion-panels>
-                        </v-col>
-                    </v-row>
-                </v-form>
-            </v-card-text>
+                      <div
+                        v-else-if="!loadingSkills && filteredSkills.length === 0"
+                        class="text-center pa-4"
+                      >
+                        <v-icon
+                          size="48"
+                          color="grey-lighten-2"
+                          class="mb-2"
+                        >
+                          mdi-magnify
+                        </v-icon>
+                        <p class="text-body-2 text-medium-emphasis">
+                          {{ tm('form.noSkillsFound') }}
+                        </p>
+                      </div>
 
-            <v-card-actions class="persona-form-actions">
-                <v-btn v-if="editingPersona" color="error" variant="text" @click="deletePersona">
-                    {{ tm('buttons.delete') }}
-                </v-btn>
-                <v-spacer />
-                <v-btn color="grey" variant="text" @click="closeDialog">
-                    {{ tm('buttons.cancel') }}
-                </v-btn>
-                <v-btn color="primary" variant="flat" @click="savePersona" :loading="saving" :disabled="!formValid">
-                    {{ tm('buttons.save') }}
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+                      <div
+                        v-if="loadingSkills"
+                        class="text-center pa-4"
+                      >
+                        <v-progress-circular
+                          indeterminate
+                          color="primary"
+                        />
+                        <p class="text-body-2 text-medium-emphasis mt-2">
+                          {{ tm('form.loadingSkills') }}
+                        </p>
+                      </div>
+
+                      <div class="mt-4">
+                        <h4 class="text-subtitle-2 mb-2">
+                          {{ tm('form.selectedSkills') }}
+                          <span
+                            v-if="personaForm.skills === null"
+                            class="text-success"
+                          >
+                            ({{ tm('form.allSelected') }})
+                          </span>
+                          <span v-else-if="Array.isArray(personaForm.skills)">
+                            ({{ personaForm.skills.length }})
+                          </span>
+                        </h4>
+                        <div
+                          v-if="Array.isArray(personaForm.skills) && personaForm.skills.length > 0"
+                          class="d-flex flex-wrap ga-1"
+                          style="max-height: 100px; overflow-y: auto;"
+                        >
+                          <v-chip
+                            v-for="skillName in personaForm.skills"
+                            :key="skillName"
+                            size="small"
+                            color="primary"
+                            variant="tonal"
+                            closable
+                            @click:close="removeSkill(skillName)"
+                          >
+                            {{ skillName }}
+                          </v-chip>
+                        </div>
+                        <div
+                          v-else
+                          class="text-body-2 text-medium-emphasis"
+                        >
+                          {{ tm('form.noSkillsSelected') }}
+                        </div>
+                      </div>
+                    </div>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+
+                <!-- 预设对话面板 -->
+                <v-expansion-panel value="dialogs">
+                  <v-expansion-panel-title>
+                    <v-icon class="mr-2">
+                      mdi-chat
+                    </v-icon>
+                    {{ tm('form.presetDialogs') }}
+                    <v-chip
+                      v-if="personaForm.begin_dialogs.length > 0"
+                      size="small"
+                      color="primary"
+                      variant="tonal"
+                      class="ml-2"
+                    >
+                      {{ personaForm.begin_dialogs.length / 2 }}
+                    </v-chip>
+                  </v-expansion-panel-title>
+
+                  <v-expansion-panel-text>
+                    <div class="mb-3">
+                      <p class="text-body-2 text-medium-emphasis">
+                        {{ tm('form.presetDialogsHelp') }}
+                      </p>
+                    </div>
+
+                    <div
+                      v-for="(dialog, index) in personaForm.begin_dialogs"
+                      :key="index"
+                      class="mb-3"
+                    >
+                      <v-textarea
+                        v-model="personaForm.begin_dialogs[index]"
+                        :label="index % 2 === 0 ? tm('form.userMessage') : tm('form.assistantMessage')"
+                        :rules="getDialogRules(index)"
+                        variant="outlined"
+                        rows="2"
+                        density="comfortable"
+                      >
+                        <template #append>
+                          <v-btn
+                            icon="mdi-delete"
+                            variant="text"
+                            size="small"
+                            color="error"
+                            @click="removeDialog(index)"
+                          />
+                        </template>
+                      </v-textarea>
+                    </div>
+
+                    <v-btn
+                      variant="outlined"
+                      prepend-icon="mdi-plus"
+                      block
+                      @click="addDialogPair"
+                    >
+                      {{ tm('buttons.addDialogPair') }}
+                    </v-btn>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-card-actions class="persona-form-actions">
+        <v-btn
+          v-if="editingPersona"
+          color="error"
+          variant="text"
+          @click="deletePersona"
+        >
+          {{ tm('buttons.delete') }}
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="closeDialog"
+        >
+          {{ tm('buttons.cancel') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="saving"
+          :disabled="!formValid"
+          @click="savePersona"
+        >
+          {{ tm('buttons.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
diff --git a/dashboard/src/components/shared/PersonaQuickPreview.vue b/dashboard/src/components/shared/PersonaQuickPreview.vue
index c8ce6d51a..ce927c2aa 100644
--- a/dashboard/src/components/shared/PersonaQuickPreview.vue
+++ b/dashboard/src/components/shared/PersonaQuickPreview.vue
@@ -4,24 +4,46 @@
       <small>{{ tm('personaQuickPreview.title') }}</small>
     </div>
 
-    <div v-if="loading" class="preview-loading">
-      <v-progress-circular indeterminate size="18" width="2" color="primary" class="mr-2" />
+    <div
+      v-if="loading"
+      class="preview-loading"
+    >
+      <v-progress-circular
+        indeterminate
+        size="18"
+        width="2"
+        color="primary"
+        class="mr-2"
+      />
       <small class="text-grey">{{ tm('personaQuickPreview.loading') }}</small>
     </div>
 
-    <div v-else-if="!modelValue" class="preview-empty">
+    <div
+      v-else-if="!modelValue"
+      class="preview-empty"
+    >
       <small class="text-grey">{{ tm('personaQuickPreview.noPersonaSelected') }}</small>
     </div>
 
-    <div v-else-if="!personaData" class="preview-empty">
+    <div
+      v-else-if="!personaData"
+      class="preview-empty"
+    >
       <small class="text-grey">{{ tm('personaQuickPreview.personaNotFound') }}</small>
     </div>
 
-    <div v-else class="preview-content">
-      <div class="section-title">{{ tm('personaQuickPreview.systemPromptLabel') }}</div>
+    <div
+      v-else
+      class="preview-content"
+    >
+      <div class="section-title">
+        {{ tm('personaQuickPreview.systemPromptLabel') }}
+      </div>
       <pre class="prompt-content">{{ personaData.system_prompt || '' }}</pre>
 
-      <div class="section-title mt-3">{{ tm('personaQuickPreview.toolsLabel') }}</div>
+      <div class="section-title mt-3">
+        {{ tm('personaQuickPreview.toolsLabel') }}
+      </div>
       <div class="chip-wrap tools-wrap">
         <v-chip
           v-if="personaData.tools === null"
@@ -32,7 +54,12 @@
         >
           {{ tm('personaQuickPreview.allToolsWithCount', { count: allToolsCount }) }}
         </v-chip>
-        <div v-for="tool in resolvedTools" v-else :key="tool.name" class="tool-item">
+        <div
+          v-for="tool in resolvedTools"
+          v-else
+          :key="tool.name"
+          class="tool-item"
+        >
           <v-chip
             size="small"
             :color="tool.active === false ? 'warning' : 'primary'"
@@ -41,25 +68,39 @@
           >
             {{ tool.name }}
           </v-chip>
-          <v-tooltip v-if="tool.active === false" location="top">
-            <template v-slot:activator="{ props: tooltipProps }">
-              <small class="text-warning tool-inactive" v-bind="tooltipProps">
+          <v-tooltip
+            v-if="tool.active === false"
+            location="top"
+          >
+            <template #activator="{ props: tooltipProps }">
+              <small
+                class="text-warning tool-inactive"
+                v-bind="tooltipProps"
+              >
                 {{ tm('personaQuickPreview.toolInactive') }}
               </small>
             </template>
             {{ tm('personaQuickPreview.toolInactiveTooltip') }}
           </v-tooltip>
-          <small v-if="tool.origin || tool.origin_name" class="text-grey tool-meta">
+          <small
+            v-if="tool.origin || tool.origin_name"
+            class="text-grey tool-meta"
+          >
             <span v-if="tool.origin">{{ tm('personaQuickPreview.originLabel') }}: {{ tool.origin }}</span>
             <span v-if="tool.origin_name"> | {{ tm('personaQuickPreview.originNameLabel') }}: {{ tool.origin_name }}</span>
           </small>
         </div>
-        <small v-if="personaData.tools !== null && normalizedTools.length === 0" class="text-grey">
+        <small
+          v-if="personaData.tools !== null && normalizedTools.length === 0"
+          class="text-grey"
+        >
           {{ tm('personaQuickPreview.noTools') }}
         </small>
       </div>
 
-      <div class="section-title mt-3">{{ tm('personaQuickPreview.skillsLabel') }}</div>
+      <div class="section-title mt-3">
+        {{ tm('personaQuickPreview.skillsLabel') }}
+      </div>
       <div class="chip-wrap">
         <v-chip
           v-if="personaData.skills === null"
@@ -81,7 +122,10 @@
         >
           {{ skillName }}
         </v-chip>
-        <small v-if="personaData.skills !== null && normalizedSkills.length === 0" class="text-grey">
+        <small
+          v-if="personaData.skills !== null && normalizedSkills.length === 0"
+          class="text-grey"
+        >
           {{ tm('personaQuickPreview.noSkills') }}
         </small>
       </div>
diff --git a/dashboard/src/components/shared/PersonaSelector.vue b/dashboard/src/components/shared/PersonaSelector.vue
index 53eaf3bfd..85b808259 100644
--- a/dashboard/src/components/shared/PersonaSelector.vue
+++ b/dashboard/src/components/shared/PersonaSelector.vue
@@ -1,7 +1,6 @@
 <template>
   <BaseFolderItemSelector
     :model-value="modelValue"
-    @update:model-value="handleUpdate"
     :folder-tree="folderTree"
     :items="currentPersonas as any"
     :tree-loading="treeLoading"
@@ -14,6 +13,7 @@
     item-name-field="persona_id"
     item-description-field="system_prompt"
     :display-value-formatter="formatDisplayValue"
+    @update:model-value="handleUpdate"
     @navigate="handleNavigate"
     @create="openCreatePersona"
     @edit="openEditPersona"
@@ -26,7 +26,8 @@
     :current-folder-id="currentFolderId ?? undefined"
     :current-folder-name="currentFolderName ?? undefined"
     @saved="handlePersonaSaved"
-    @error="handleError" />
+    @error="handleError"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/dashboard/src/components/shared/PluginPlatformChip.vue b/dashboard/src/components/shared/PluginPlatformChip.vue
index c8aece25a..1adb23d49 100644
--- a/dashboard/src/components/shared/PluginPlatformChip.vue
+++ b/dashboard/src/components/shared/PluginPlatformChip.vue
@@ -45,9 +45,15 @@ const platformDetails = computed(() => {
       :style="{ cursor: 'pointer', ...chipStyle }"
       @click.stop="showMenu = !showMenu"
     >
-      <div class="d-flex align-center" style="gap: 2px">
+      <div
+        class="d-flex align-center"
+        style="gap: 2px"
+      >
         <!-- 显示图标，最多 5 个 -->
-        <div class="d-flex align-center mr-1" v-if="platformDetails.some(p => p.icon)">
+        <div
+          v-if="platformDetails.some(p => p.icon)"
+          class="d-flex align-center mr-1"
+        >
           <v-avatar
             v-for="(platform, index) in platformDetails.slice(0, 5)"
             :key="index"
@@ -55,8 +61,15 @@ const platformDetails = computed(() => {
             class="platform-mini-icon"
             :style="{ marginLeft: index > 0 ? '-4px' : '0', zIndex: 10 - index }"
           >
-            <v-img v-if="platform.icon" :src="platform.icon"></v-img>
-            <v-icon v-else icon="mdi-circle-small" :size="size === 'x-small' ? 8 : 10"></v-icon>
+            <v-img
+              v-if="platform.icon"
+              :src="platform.icon"
+            />
+            <v-icon
+              v-else
+              icon="mdi-circle-small"
+              :size="size === 'x-small' ? 8 : 10"
+            />
           </v-avatar>
         </div>
 
@@ -72,7 +85,7 @@ const platformDetails = computed(() => {
           :icon="showMenu ? 'mdi-chevron-up' : 'mdi-chevron-down'"
           :size="size === 'x-small' ? 14 : 16"
           class="ml-n1"
-        ></v-icon>
+        />
       </div>
 
       <v-menu
@@ -83,20 +96,37 @@ const platformDetails = computed(() => {
         transition="scale-transition"
         open-on-hover
       >
-        <v-list density="compact" border elevation="12" class="rounded-lg pa-1">
+        <v-list
+          density="compact"
+          border
+          elevation="12"
+          class="rounded-lg pa-1"
+        >
           <v-list-item
             v-for="platform in platformDetails"
             :key="platform.name"
             min-height="24"
             class="px-2"
           >
-            <template v-slot:prepend>
-              <v-avatar size="14" class="mr-2" v-if="platform.icon">
-                <v-img :src="platform.icon"></v-img>
+            <template #prepend>
+              <v-avatar
+                v-if="platform.icon"
+                size="14"
+                class="mr-2"
+              >
+                <v-img :src="platform.icon" />
               </v-avatar>
-              <v-icon v-else icon="mdi-platform" size="12" class="mr-2"></v-icon>
+              <v-icon
+                v-else
+                icon="mdi-platform"
+                size="12"
+                class="mr-2"
+              />
             </template>
-            <v-list-item-title class="text-caption font-weight-bold" style="font-size: 0.75rem !important">
+            <v-list-item-title
+              class="text-caption font-weight-bold"
+              style="font-size: 0.75rem !important"
+            >
               {{ platform.name }}
             </v-list-item-title>
           </v-list-item>
diff --git a/dashboard/src/components/shared/PluginSetSelector.vue b/dashboard/src/components/shared/PluginSetSelector.vue
index 78d1b53c3..212735c95 100644
--- a/dashboard/src/components/shared/PluginSetSelector.vue
+++ b/dashboard/src/components/shared/PluginSetSelector.vue
@@ -3,73 +3,113 @@
     <!-- 顶部操作区域 -->
     <div class="d-flex align-center justify-space-between mb-2">
       <div class="flex-grow-1">
-        <span v-if="!modelValue || modelValue.length === 0" style="color: rgb(var(--v-theme-primaryText));">
+        <span
+          v-if="!modelValue || modelValue.length === 0"
+          style="color: rgb(var(--v-theme-primaryText));"
+        >
           {{ tm('pluginSetSelector.notSelected') }}
         </span>
-        <span v-else-if="isAllPlugins" style="color: rgb(var(--v-theme-primaryText));">
+        <span
+          v-else-if="isAllPlugins"
+          style="color: rgb(var(--v-theme-primaryText));"
+        >
           {{ tm('pluginSetSelector.allPlugins') }}
         </span>
-        <span v-else style="color: rgb(var(--v-theme-primaryText));">
+        <span
+          v-else
+          style="color: rgb(var(--v-theme-primaryText));"
+        >
           {{ tm('pluginSetSelector.selectedCount', { count: modelValue.length }) }}
         </span>
       </div>
-      <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
+      <v-btn
+        size="small"
+        color="primary"
+        variant="tonal"
+        @click="openDialog"
+      >
         {{ buttonText || tm('pluginSetSelector.buttonText') }}
       </v-btn>
     </div>
   </div>
 
   <!-- Plugin Set Selection Dialog -->
-  <v-dialog v-model="dialog" max-width="700px">
+  <v-dialog
+    v-model="dialog"
+    max-width="700px"
+  >
     <v-card>
-      <v-card-title class="text-h3 py-4" style="font-weight: normal;">
+      <v-card-title
+        class="text-h3 py-4"
+        style="font-weight: normal;"
+      >
         {{ tm('pluginSetSelector.dialogTitle') }}
       </v-card-title>
       
       <v-card-text class="pa-4">
-        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          color="primary"
+        />
         
         <div v-if="!loading">
           <!-- 预设选项 -->
-          <v-radio-group v-model="selectionMode" class="mb-4" hide-details>
+          <v-radio-group
+            v-model="selectionMode"
+            class="mb-4"
+            hide-details
+          >
             <v-radio 
               value="all" 
               :label="tm('pluginSetSelector.enableAll')" 
               color="primary"
-            ></v-radio>
+            />
             <v-radio 
               value="none" 
               :label="tm('pluginSetSelector.enableNone')" 
               color="primary"
-            ></v-radio>
+            />
             <v-radio 
               value="custom" 
               :label="tm('pluginSetSelector.customSelect')" 
               color="primary"
-            ></v-radio>
+            />
           </v-radio-group>
 
           <!-- 自定义选择时显示插件列表 -->
-          <div v-if="selectionMode === 'custom'" style="max-height: 300px; overflow-y: auto;">
-            <v-list v-if="pluginList.length > 0" density="compact">
+          <div
+            v-if="selectionMode === 'custom'"
+            style="max-height: 300px; overflow-y: auto;"
+          >
+            <v-list
+              v-if="pluginList.length > 0"
+              density="compact"
+            >
               <v-list-item
                 v-for="plugin in pluginList"
                 :key="plugin.name"
                 rounded="md"
-                class="ma-1">
-                <template v-slot:prepend>
+                class="ma-1"
+              >
+                <template #prepend>
                   <v-checkbox
                     v-model="selectedPlugins"
                     :value="plugin.name"
                     color="primary"
                     hide-details
-                  ></v-checkbox>
+                  />
                 </template>
                 
                 <v-list-item-title>{{ plugin.name }}</v-list-item-title>
                 <v-list-item-subtitle>
                   {{ plugin.desc || tm('pluginSetSelector.noDescription') }}
-                  <v-chip v-if="!plugin.activated" size="x-small" color="grey" class="ml-1">
+                  <v-chip
+                    v-if="!plugin.activated"
+                    size="x-small"
+                    color="grey"
+                    class="ml-1"
+                  >
                     {{ tm('pluginSetSelector.notActivated') }}
                   </v-chip>
                 </v-list-item-subtitle>
@@ -80,20 +120,36 @@
               </div>
             </v-list>
 
-            <div v-else class="text-center py-8">
-              <v-icon size="64" color="grey-lighten-1">mdi-puzzle-outline</v-icon>
-              <p class="text-grey mt-4">{{ tm('pluginSetSelector.noPlugins') }}</p>
+            <div
+              v-else
+              class="text-center py-8"
+            >
+              <v-icon
+                size="64"
+                color="grey-lighten-1"
+              >
+                mdi-puzzle-outline
+              </v-icon>
+              <p class="text-grey mt-4">
+                {{ tm('pluginSetSelector.noPlugins') }}
+              </p>
             </div>
           </div>
         </div>
       </v-card-text>
             
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelSelection">{{ tm('pluginSetSelector.cancelSelection') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancelSelection"
+        >
+          {{ tm('pluginSetSelector.cancelSelection') }}
+        </v-btn>
         <v-btn 
           color="primary" 
-          @click="confirmSelection">
+          @click="confirmSelection"
+        >
           {{ tm('pluginSetSelector.confirmSelection') }}
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/components/shared/ProviderSelector.vue b/dashboard/src/components/shared/ProviderSelector.vue
index 7ffbeb6ea..228f19b05 100644
--- a/dashboard/src/components/shared/ProviderSelector.vue
+++ b/dashboard/src/components/shared/ProviderSelector.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="d-flex align-center justify-space-between">
-    <span v-if="!hasSelection" style="color: rgb(var(--v-theme-primaryText));">
+    <span
+      v-if="!hasSelection"
+      style="color: rgb(var(--v-theme-primaryText));"
+    >
       {{ tm('providerSelector.notSelected') }}
     </span>
-    <span v-else class="provider-name-text">
+    <span
+      v-else
+      class="provider-name-text"
+    >
       <template v-if="multiple">
         {{ tm('providerSelector.selectedCount', { count: selectedProviders.length }) }}
       </template>
@@ -11,12 +17,20 @@
         {{ modelValue }}
       </template>
     </span>
-    <v-btn size="small" color="primary" variant="tonal" @click="openDialog">
+    <v-btn
+      size="small"
+      color="primary"
+      variant="tonal"
+      @click="openDialog"
+    >
       {{ buttonText || tm('providerSelector.buttonText') }}
     </v-btn>
   </div>
 
-  <div v-if="multiple && selectedProviders.length > 0" class="selected-preview mt-2">
+  <div
+    v-if="multiple && selectedProviders.length > 0"
+    class="selected-preview mt-2"
+  >
     <v-chip
       v-for="providerId in selectedProviders"
       :key="`preview-${providerId}`"
@@ -31,7 +45,10 @@
   </div>
 
   <!-- Provider Selection Dialog -->
-  <v-dialog v-model="dialog" max-width="600px">
+  <v-dialog
+    v-model="dialog"
+    max-width="600px"
+  >
     <v-card>
       <v-card-title
         class="text-h3 py-4 d-flex align-center justify-space-between gap-4 flex-wrap"
@@ -49,14 +66,27 @@
         </v-btn>
       </v-card-title>
       
-      <v-card-text class="pa-0" style="max-height: 400px; overflow-y: auto;">
-        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
+      <v-card-text
+        class="pa-0"
+        style="max-height: 400px; overflow-y: auto;"
+      >
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          color="primary"
+        />
 
-        <div v-if="multiple && selectedProviders.length > 0" class="pa-3">
+        <div
+          v-if="multiple && selectedProviders.length > 0"
+          class="pa-3"
+        >
           <div class="text-caption text-medium-emphasis mb-2">
             {{ tm('providerSelector.selectedCount', { count: selectedProviders.length }) }}
           </div>
-          <v-list density="compact" class="selected-order-list">
+          <v-list
+            density="compact"
+            class="selected-order-list"
+          >
             <v-list-item
               v-for="(providerId, index) in selectedProviders"
               :key="`selected-${providerId}-${index}`"
@@ -90,63 +120,94 @@
               </template>
             </v-list-item>
           </v-list>
-          <v-divider class="ma-1"></v-divider>
+          <v-divider class="ma-1" />
         </div>
         
-        <v-list v-if="!loading && providerList.length > 0" density="compact">
+        <v-list
+          v-if="!loading && providerList.length > 0"
+          density="compact"
+        >
           <!-- 不选择选项 -->
           <v-list-item
             v-if="!multiple"
             key="none"
             value=""
-            @click="selectProvider({ id: '' })"
             :active="selectedProvider === ''"
             rounded="md"
-            class="ma-1">
+            class="ma-1"
+            @click="selectProvider({ id: '' })"
+          >
             <v-list-item-title>{{ tm('providerSelector.clearSelection') }}</v-list-item-title>
             <v-list-item-subtitle>{{ tm('providerSelector.clearSelectionSubtitle') }}</v-list-item-subtitle>
             
-            <template v-slot:append>
-              <v-icon v-if="selectedProvider === ''" color="primary">mdi-check-circle</v-icon>
+            <template #append>
+              <v-icon
+                v-if="selectedProvider === ''"
+                color="primary"
+              >
+                mdi-check-circle
+              </v-icon>
             </template>
           </v-list-item>
           
-          <v-divider class="ma-1"></v-divider>
+          <v-divider class="ma-1" />
           
           <v-list-item
             v-for="provider in providerList"
             :key="provider.id"
             :value="provider.id"
-            @click="selectProvider(provider)"
             :active="isProviderSelected(provider.id)"
             rounded="md"
-            class="ma-1">
+            class="ma-1"
+            @click="selectProvider(provider)"
+          >
             <v-list-item-title>{{ provider.id }}</v-list-item-title>
             <v-list-item-subtitle>
               {{ provider.type || provider.provider_type || tm('providerSelector.unknownType') }}
               <span v-if="provider.model">- {{ provider.model }}</span>
             </v-list-item-subtitle>
             
-            <template v-slot:append>
-              <v-icon v-if="isProviderSelected(provider.id)" color="primary">mdi-check-circle</v-icon>
+            <template #append>
+              <v-icon
+                v-if="isProviderSelected(provider.id)"
+                color="primary"
+              >
+                mdi-check-circle
+              </v-icon>
             </template>
           </v-list-item>
         </v-list>
         
-        <div v-else-if="!loading && providerList.length === 0" class="text-center py-8">
-          <v-icon size="64" color="grey-lighten-1">mdi-api-off</v-icon>
-          <p class="text-grey mt-4">{{ tm('providerSelector.noProviders') }}</p>
+        <div
+          v-else-if="!loading && providerList.length === 0"
+          class="text-center py-8"
+        >
+          <v-icon
+            size="64"
+            color="grey-lighten-1"
+          >
+            mdi-api-off
+          </v-icon>
+          <p class="text-grey mt-4">
+            {{ tm('providerSelector.noProviders') }}
+          </p>
         </div>
       </v-card-text>
       
-      <v-divider></v-divider>
+      <v-divider />
       
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="cancelSelection">{{ tm('providerSelector.cancelSelection') }}</v-btn>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="cancelSelection"
+        >
+          {{ tm('providerSelector.cancelSelection') }}
+        </v-btn>
         <v-btn 
           color="primary" 
-          @click="confirmSelection">
+          @click="confirmSelection"
+        >
           {{ tm('providerSelector.confirmSelection') }}
         </v-btn>
       </v-card-actions>
@@ -161,9 +222,16 @@
     :scrim="true"
     @click:outside="closeProviderDrawer"
   >
-    <v-card class="provider-drawer-card" elevation="12">
+    <v-card
+      class="provider-drawer-card"
+      elevation="12"
+    >
       <div class="provider-drawer-header">
-        <v-btn icon variant="text" @click="closeProviderDrawer">
+        <v-btn
+          icon
+          variant="text"
+          @click="closeProviderDrawer"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </div>
diff --git a/dashboard/src/components/shared/ProxySelector.vue b/dashboard/src/components/shared/ProxySelector.vue
index 8cf69a542..d205bf599 100644
--- a/dashboard/src/components/shared/ProxySelector.vue
+++ b/dashboard/src/components/shared/ProxySelector.vue
@@ -1,51 +1,90 @@
 <template>
-    <h5>{{ tm('network.proxySelector.title') }}</h5>
-    <v-radio-group class="mt-2" v-model="radioValue" hide-details="true">
-        <v-radio :label="tm('network.proxySelector.noProxy')" value="0"></v-radio>
-        <v-radio value="1">
-            <template v-slot:label>
-                <span>{{ tm('network.proxySelector.useProxy') }}</span>
-                <v-btn v-if="radioValue === '1'" class="ml-2" @click="testAllProxies" size="x-small"
-                    variant="tonal" :loading="loadingTestingConnection">
-                    {{ tm('network.proxySelector.testConnection') }}
-                </v-btn>
-            </template>
+  <h5>{{ tm('network.proxySelector.title') }}</h5>
+  <v-radio-group
+    v-model="radioValue"
+    class="mt-2"
+    hide-details="true"
+  >
+    <v-radio
+      :label="tm('network.proxySelector.noProxy')"
+      value="0"
+    />
+    <v-radio value="1">
+      <template #label>
+        <span>{{ tm('network.proxySelector.useProxy') }}</span>
+        <v-btn
+          v-if="radioValue === '1'"
+          class="ml-2"
+          size="x-small"
+          variant="tonal"
+          :loading="loadingTestingConnection"
+          @click="testAllProxies"
+        >
+          {{ tm('network.proxySelector.testConnection') }}
+        </v-btn>
+      </template>
+    </v-radio>
+  </v-radio-group>
+  <v-expand-transition>
+    <div
+      v-if="radioValue === '1'"
+      style="margin-left: 16px;"
+    >
+      <v-radio-group
+        v-model="githubProxyRadioControl"
+        class="mt-2"
+        hide-details="true"
+      >
+        <v-radio
+          v-for="(proxy, idx) in githubProxies"
+          :key="proxy"
+          color="success"
+          :value="String(idx)"
+        >
+          <template #label>
+            <div class="d-flex align-center">
+              <span class="mr-2">{{ proxy }}</span>
+              <div v-if="proxyStatus[idx]">
+                <v-chip
+                  :color="proxyStatus[idx].available ? 'success' : 'error'"
+                  size="x-small"
+                  class="mr-1"
+                >
+                  {{ proxyStatus[idx].available ? tm('network.proxySelector.available') : tm('network.proxySelector.unavailable') }}
+                </v-chip>
+                <v-chip
+                  v-if="proxyStatus[idx].available"
+                  color="info"
+                  size="x-small"
+                >
+                  {{ proxyStatus[idx].latency }}ms
+                </v-chip>
+              </div>
+            </div>
+          </template>
         </v-radio>
-    </v-radio-group>
-    <v-expand-transition>
-        <div v-if="radioValue === '1'" style="margin-left: 16px;">
-            <v-radio-group v-model="githubProxyRadioControl" class="mt-2" hide-details="true">
-                <v-radio color="success" v-for="(proxy, idx) in githubProxies" :key="proxy" :value="String(idx)">
-                    <template v-slot:label>
-                        <div class="d-flex align-center">
-                            <span class="mr-2">{{ proxy }}</span>
-                            <div v-if="proxyStatus[idx]">
-                                <v-chip
-                                    :color="proxyStatus[idx].available ? 'success' : 'error'"
-                                    size="x-small"
-                                    class="mr-1">
-                                    {{ proxyStatus[idx].available ? tm('network.proxySelector.available') : tm('network.proxySelector.unavailable') }}
-                                </v-chip>
-                                <v-chip
-                                    v-if="proxyStatus[idx].available"
-                                    color="info"
-                                    size="x-small">
-                                    {{ proxyStatus[idx].latency }}ms
-                                </v-chip>
-                            </div>
-                        </div>
-                    </template>
-                </v-radio>
-                <v-radio color="primary" value="-1" :label="tm('network.proxySelector.custom')">
-                    <template v-slot:label v-if="String(githubProxyRadioControl) === '-1'">
-                        <v-text-field density="compact" v-model="selectedGitHubProxy" variant="outlined"
-                            style="width: 100vw;" :placeholder="tm('network.proxySelector.custom')" hide-details="true">
-                        </v-text-field>
-                    </template>
-                </v-radio>
-            </v-radio-group>
-        </div>
-    </v-expand-transition>
+        <v-radio
+          color="primary"
+          value="-1"
+          :label="tm('network.proxySelector.custom')"
+        >
+          <template
+            v-if="String(githubProxyRadioControl) === '-1'"
+            #label
+          >
+            <v-text-field
+              v-model="selectedGitHubProxy"
+              density="compact"
+              variant="outlined"
+              style="width: 100vw;"
+              :placeholder="tm('network.proxySelector.custom')"
+              hide-details="true"
+            />
+          </template>
+        </v-radio>
+      </v-radio-group>
+    </div>
+  </v-expand-transition>
 </template>
 
 
@@ -75,6 +114,64 @@ export default {
             initializing: true,
         }
     },
+    watch: {
+        selectedGitHubProxy: function (newVal, oldVal) {
+            if (this.initializing) {
+                return;
+            }
+            if (!newVal) {
+                newVal = ""
+            }
+            localStorage.setItem('selectedGitHubProxy', newVal);
+        },
+        radioValue: function (newVal) {
+            if (this.initializing) {
+                return;
+            }
+            localStorage.setItem('githubProxyRadioValue', newVal);
+            if (String(newVal) === "0") {
+                this.selectedGitHubProxy = "";
+            } else if (String(this.githubProxyRadioControl) !== "-1") {
+                this.selectedGitHubProxy = this.getProxyByControl(this.githubProxyRadioControl);
+            }
+        },
+        githubProxyRadioControl: function (newVal) {
+            if (this.initializing) {
+                return;
+            }
+            const normalizedVal = String(newVal);
+            localStorage.setItem('githubProxyRadioControl', normalizedVal);
+            if (String(this.radioValue) !== "1") {
+                this.selectedGitHubProxy = "";
+                return;
+            }
+            if (normalizedVal !== "-1") {
+                this.selectedGitHubProxy = this.getProxyByControl(normalizedVal);
+            }
+        }
+    },
+    mounted() {
+        this.initializing = true;
+
+        const savedProxy = localStorage.getItem('selectedGitHubProxy') || "";
+        const savedRadio = localStorage.getItem('githubProxyRadioValue') || "0";
+        const savedControl = String(localStorage.getItem('githubProxyRadioControl') || "0");
+
+        this.radioValue = savedRadio;
+        this.githubProxyRadioControl = savedControl;
+
+        if (savedRadio === "1") {
+            if (savedControl !== "-1") {
+                this.selectedGitHubProxy = this.getProxyByControl(savedControl);
+            } else {
+                this.selectedGitHubProxy = savedProxy;
+            }
+        } else {
+            this.selectedGitHubProxy = "";
+        }
+
+        this.initializing = false;
+    },
     methods: {
         getProxyByControl(control) {
             const normalizedControl = String(control);
@@ -128,64 +225,6 @@ export default {
             await Promise.all(promises);
             this.loadingTestingConnection = false;
         },
-    },
-    mounted() {
-        this.initializing = true;
-
-        const savedProxy = localStorage.getItem('selectedGitHubProxy') || "";
-        const savedRadio = localStorage.getItem('githubProxyRadioValue') || "0";
-        const savedControl = String(localStorage.getItem('githubProxyRadioControl') || "0");
-
-        this.radioValue = savedRadio;
-        this.githubProxyRadioControl = savedControl;
-
-        if (savedRadio === "1") {
-            if (savedControl !== "-1") {
-                this.selectedGitHubProxy = this.getProxyByControl(savedControl);
-            } else {
-                this.selectedGitHubProxy = savedProxy;
-            }
-        } else {
-            this.selectedGitHubProxy = "";
-        }
-
-        this.initializing = false;
-    },
-    watch: {
-        selectedGitHubProxy: function (newVal, oldVal) {
-            if (this.initializing) {
-                return;
-            }
-            if (!newVal) {
-                newVal = ""
-            }
-            localStorage.setItem('selectedGitHubProxy', newVal);
-        },
-        radioValue: function (newVal) {
-            if (this.initializing) {
-                return;
-            }
-            localStorage.setItem('githubProxyRadioValue', newVal);
-            if (String(newVal) === "0") {
-                this.selectedGitHubProxy = "";
-            } else if (String(this.githubProxyRadioControl) !== "-1") {
-                this.selectedGitHubProxy = this.getProxyByControl(this.githubProxyRadioControl);
-            }
-        },
-        githubProxyRadioControl: function (newVal) {
-            if (this.initializing) {
-                return;
-            }
-            const normalizedVal = String(newVal);
-            localStorage.setItem('githubProxyRadioControl', normalizedVal);
-            if (String(this.radioValue) !== "1") {
-                this.selectedGitHubProxy = "";
-                return;
-            }
-            if (normalizedVal !== "-1") {
-                this.selectedGitHubProxy = this.getProxyByControl(normalizedVal);
-            }
-        }
     }
 }
 </script>
diff --git a/dashboard/src/components/shared/ReadmeDialog.vue b/dashboard/src/components/shared/ReadmeDialog.vue
index f7c2d2faf..1e7873c7c 100644
--- a/dashboard/src/components/shared/ReadmeDialog.vue
+++ b/dashboard/src/components/shared/ReadmeDialog.vue
@@ -71,31 +71,30 @@ onUnmounted(() => {
   if (copyFeedbackTimer.value) clearTimeout(copyFeedbackTimer.value);
 });
 
-// 渲染后的 HTML
-const renderedHtml = computed(() => {
-  // 强制依赖 locale，确保语言切换时重新渲染
-  const _ = locale?.value;
-  if (!content.value) return "";
+md.renderer.rules.fence = (tokens, idx) => {
+  const token = tokens[idx];
+  const lang = token.info.trim() || "";
+  const code = token.content;
 
-  // 设置 fence 规则，直接使用当前作用域的 t 函数
-  md.renderer.rules.fence = (tokens, idx) => {
-    const token = tokens[idx];
-    const lang = token.info.trim() || "";
-    const code = token.content;
+  const highlighted =
+    lang && hljs.getLanguage(lang)
+      ? hljs.highlight(code, { language: lang }).value
+      : md.utils.escapeHtml(code);
 
-    const highlighted =
-      lang && hljs.getLanguage(lang)
-        ? hljs.highlight(code, { language: lang }).value
-        : md.utils.escapeHtml(code);
-
-    return `<div class="code-block-wrapper">
+  return `<div class="code-block-wrapper">
       ${lang ? `<span class="code-lang-label">${lang}</span>` : ""}
       <button class="copy-code-btn" title="${t("core.common.copy")}">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
       </button>
       <pre class="hljs"><code class="language-${lang}">${highlighted}</code></pre>
     </div>`;
-  };
+};
+
+// 渲染后的 HTML
+const renderedHtml = computed(() => {
+  // 强制依赖 locale，确保语言切换时重新渲染
+  const _ = locale?.value;
+  if (!content.value) return "";
 
   const rawHtml = md.render(content.value);
 
@@ -365,16 +364,29 @@ const showActionArea = computed(() => {
 </script>
 
 <template>
-  <v-dialog v-model="_show" width="800">
+  <v-dialog
+    v-model="_show"
+    width="800"
+  >
     <v-card>
       <v-card-title class="d-flex justify-space-between align-center">
         <span class="text-h2 pa-2">{{ modeConfig.title }}</span>
-        <v-btn icon @click="_show = false" variant="text">
+        <v-btn
+          icon
+          variant="text"
+          @click="_show = false"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
-      <v-card-text ref="scrollContainer" style="overflow-y: auto">
-        <div v-if="showActionArea" class="d-flex justify-space-between mb-4">
+      <v-card-text
+        ref="scrollContainer"
+        style="overflow-y: auto"
+      >
+        <div
+          v-if="showActionArea"
+          class="d-flex justify-space-between mb-4"
+        >
           <v-btn
             v-if="modeConfig.showGithubButton && repoUrl"
             color="primary"
@@ -403,25 +415,31 @@ const showActionArea = computed(() => {
             color="primary"
             size="64"
             class="mb-4"
-          ></v-progress-circular>
-          <p class="text-body-1 text-center">{{ modeConfig.loading }}</p>
+          />
+          <p class="text-body-1 text-center">
+            {{ modeConfig.loading }}
+          </p>
         </div>
 
         <div
           v-else-if="renderedHtml"
           class="markdown-body"
-          v-html="renderedHtml"
           @click="handleContainerClick"
-        ></div>
+          v-html="renderedHtml"
+        />
 
         <div
           v-else-if="error"
           class="d-flex flex-column align-center justify-center"
           style="height: 100%"
         >
-          <v-icon size="64" color="error" class="mb-4"
-            >mdi-alert-circle-outline</v-icon
+          <v-icon
+            size="64"
+            color="error"
+            class="mb-4"
           >
+            mdi-alert-circle-outline
+          </v-icon>
           <p class="text-body-1 text-center mb-2">
             {{ t("core.common.error") }}
           </p>
@@ -435,9 +453,13 @@ const showActionArea = computed(() => {
           class="d-flex flex-column align-center justify-center"
           style="height: 100%"
         >
-          <v-icon size="64" color="warning" class="mb-4"
-            >mdi-file-question-outline</v-icon
+          <v-icon
+            size="64"
+            color="warning"
+            class="mb-4"
           >
+            mdi-file-question-outline
+          </v-icon>
           <p class="text-body-1 text-center mb-2">
             {{ modeConfig.emptyTitle }}
           </p>
@@ -447,8 +469,12 @@ const showActionArea = computed(() => {
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="primary" variant="tonal" @click="_show = false">
+        <v-spacer />
+        <v-btn
+          color="primary"
+          variant="tonal"
+          @click="_show = false"
+        >
           {{ t("core.common.close") }}
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/components/shared/SidebarCustomizer.vue b/dashboard/src/components/shared/SidebarCustomizer.vue
index 098f32f46..925eb5d05 100644
--- a/dashboard/src/components/shared/SidebarCustomizer.vue
+++ b/dashboard/src/components/shared/SidebarCustomizer.vue
@@ -4,13 +4,16 @@
       color="primary" 
       variant="outlined"
       size="small"
-      @click="openDialog"
       style="margin-bottom: 8px;"
+      @click="openDialog"
     >
       {{ t('features.settings.sidebar.customize.title') }}
     </v-btn>
 
-    <v-dialog v-model="dialog" max-width="700px">
+    <v-dialog
+      v-model="dialog"
+      max-width="700px"
+    >
       <v-card>
         <v-card-title class="d-flex justify-space-between align-center">
           <span>{{ t('features.settings.sidebar.customize.title') }}</span>
@@ -18,15 +21,22 @@
             icon="mdi-close"
             variant="text"
             @click="dialog = false"
-          ></v-btn>
+          />
         </v-card-title>
         
         <v-card-text>
-          <p class="text-body-2 mb-4">{{ t('features.settings.sidebar.customize.subtitle') }}</p>
+          <p class="text-body-2 mb-4">
+            {{ t('features.settings.sidebar.customize.subtitle') }}
+          </p>
           
           <v-row>
-            <v-col cols="12" md="6">
-              <div class="mb-2 font-weight-medium">{{ t('features.settings.sidebar.customize.mainItems') }}</div>
+            <v-col
+              cols="12"
+              md="6"
+            >
+              <div class="mb-2 font-weight-medium">
+                {{ t('features.settings.sidebar.customize.mainItems') }}
+              </div>
               <v-list 
                 density="compact"
                 class="custom-list"
@@ -42,24 +52,33 @@
                   @dragover.prevent
                   @drop.stop="handleDrop($event, 'main', index)"
                 >
-                  <template v-slot:prepend>
-                    <v-icon :icon="item.icon" size="small" class="mr-2"></v-icon>
+                  <template #prepend>
+                    <v-icon
+                      :icon="item.icon"
+                      size="small"
+                      class="mr-2"
+                    />
                   </template>
                   <v-list-item-title>{{ t(item.title) }}</v-list-item-title>
-                  <template v-slot:append>
+                  <template #append>
                     <v-btn
                       icon="mdi-arrow-right"
                       variant="text"
                       size="x-small"
                       @click="moveToMore(index)"
-                    ></v-btn>
+                    />
                   </template>
                 </v-list-item>
               </v-list>
             </v-col>
             
-            <v-col cols="12" md="6">
-              <div class="mb-2 font-weight-medium">{{ t('features.settings.sidebar.customize.moreItems') }}</div>
+            <v-col
+              cols="12"
+              md="6"
+            >
+              <div class="mb-2 font-weight-medium">
+                {{ t('features.settings.sidebar.customize.moreItems') }}
+              </div>
               <v-list 
                 density="compact"
                 class="custom-list"
@@ -75,17 +94,21 @@
                   @dragover.prevent
                   @drop.stop="handleDrop($event, 'more', index)"
                 >
-                  <template v-slot:prepend>
-                    <v-icon :icon="item.icon" size="small" class="mr-2"></v-icon>
+                  <template #prepend>
+                    <v-icon
+                      :icon="item.icon"
+                      size="small"
+                      class="mr-2"
+                    />
                   </template>
                   <v-list-item-title>{{ t(item.title) }}</v-list-item-title>
-                  <template v-slot:append>
+                  <template #append>
                     <v-btn
                       icon="mdi-arrow-left"
                       variant="text"
                       size="x-small"
                       @click="moveToMain(index)"
-                    ></v-btn>
+                    />
                   </template>
                 </v-list-item>
               </v-list>
@@ -101,7 +124,7 @@
           >
             {{ t('features.settings.sidebar.customize.reset') }}
           </v-btn>
-          <v-spacer></v-spacer>
+          <v-spacer />
           <v-btn
             color="primary"
             @click="saveCustomization"
diff --git a/dashboard/src/components/shared/StyledMenu.vue b/dashboard/src/components/shared/StyledMenu.vue
index 9f755422a..cd6b06a42 100644
--- a/dashboard/src/components/shared/StyledMenu.vue
+++ b/dashboard/src/components/shared/StyledMenu.vue
@@ -1,12 +1,25 @@
 <template>
-  <v-menu v-bind="$attrs" :close-on-content-click="closeOnContentClick">
-    <template v-slot:activator="{ props: activatorProps }">
-      <slot name="activator" :props="activatorProps"></slot>
+  <v-menu
+    v-bind="$attrs"
+    :close-on-content-click="closeOnContentClick"
+  >
+    <template #activator="{ props: activatorProps }">
+      <slot
+        name="activator"
+        :props="activatorProps"
+      />
     </template>
     
-    <v-card class="styled-menu-card" elevation="8" rounded="lg">
-      <v-list density="compact" class="styled-menu-list pa-1">
-        <slot></slot>
+    <v-card
+      class="styled-menu-card"
+      elevation="8"
+      rounded="lg"
+    >
+      <v-list
+        density="compact"
+        class="styled-menu-list pa-1"
+      >
+        <slot />
       </v-list>
     </v-card>
   </v-menu>
diff --git a/dashboard/src/components/shared/T2ITemplateEditor.vue b/dashboard/src/components/shared/T2ITemplateEditor.vue
index feb0b50e1..0b3a1dcab 100644
--- a/dashboard/src/components/shared/T2ITemplateEditor.vue
+++ b/dashboard/src/components/shared/T2ITemplateEditor.vue
@@ -1,6 +1,11 @@
 <template>
-  <v-dialog v-model="dialog" max-width="1400px" persistent scrollable>
-    <template v-slot:activator="{ props }">
+  <v-dialog
+    v-model="dialog"
+    max-width="1400px"
+    persistent
+    scrollable
+  >
+    <template #activator="{ props }">
       <v-btn
         v-bind="props"
         variant="outlined"
@@ -15,8 +20,11 @@
     <v-card>
       <v-card-title class="d-flex align-center justify-space-between">
         <span>{{ tm('t2iTemplateEditor.dialogTitle') }}</span>
-        <v-spacer></v-spacer>
-        <div class="d-flex align-center gap-2" style="width: 60%">
+        <v-spacer />
+        <div
+          class="d-flex align-center gap-2"
+          style="width: 60%"
+        >
           <v-text-field
             v-if="isCreatingNew"
             v-model="editingName"
@@ -27,7 +35,7 @@
             class="flex-grow-1"
             autofocus
             :rules="[v => !!v || tm('t2iTemplateEditor.nameRequired')]"
-          ></v-text-field>
+          />
           <v-select
             v-else
             v-model="selectedTemplate"
@@ -41,9 +49,12 @@
             class="flex-grow-1"
             :loading="loading"
           >
-            <template v-slot:item="{ props, item }">
-              <v-list-item v-bind="props" :title="item.raw.name">
-                <template v-slot:append>
+            <template #item="{ props, item }">
+              <v-list-item
+                v-bind="props"
+                :title="item.raw.name"
+              >
+                <template #append>
                   <v-chip
                     v-if="item.raw.name === activeTemplate"
                     color="success"
@@ -59,8 +70,8 @@
                     color="primary"
                     size="small"
                     class="ml-2"
-                    @click.stop="setActiveTemplate(item.raw.name)"
                     :loading="applyLoading"
+                    @click.stop="setActiveTemplate(item.raw.name)"
                   >
                     {{ tm('t2iTemplateEditor.apply') }}
                   </v-btn>
@@ -79,55 +90,80 @@
       </v-card-title>
 
       <v-card-text class="pa-0">
-        <v-row no-gutters style="height: 70vh;">
+        <v-row
+          no-gutters
+          style="height: 70vh;"
+        >
           <!-- 左侧编辑器 -->
-          <v-col cols="6" class="d-flex flex-column">
-            <v-toolbar density="compact" color="surface-variant">
-              <v-toolbar-title class="text-subtitle-2">{{ tm('t2iTemplateEditor.templateEditor') }}</v-toolbar-title>
-              <v-spacer></v-spacer>
-              <div class="d-flex align-center pa-1" style="border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
+          <v-col
+            cols="6"
+            class="d-flex flex-column"
+          >
+            <v-toolbar
+              density="compact"
+              color="surface-variant"
+            >
+              <v-toolbar-title class="text-subtitle-2">
+                {{ tm('t2iTemplateEditor.templateEditor') }}
+              </v-toolbar-title>
+              <v-spacer />
+              <div
+                class="d-flex align-center pa-1"
+                style="border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;"
+              >
                 <v-btn
                   variant="text"
                   size="small"
-                  @click="newTemplate"
                   color="success"
+                  @click="newTemplate"
                 >
-                  <v-icon left>mdi-plus</v-icon>
+                  <v-icon left>
+                    mdi-plus
+                  </v-icon>
                   {{ tm('t2iTemplateEditor.new') }}
                 </v-btn>
-                <v-divider vertical class="mx-1"></v-divider>
+                <v-divider
+                  vertical
+                  class="mx-1"
+                />
                 <v-btn
                   variant="text"
                   size="small"
-                  @click="resetToDefault"
                   :loading="resetLoading"
                   color="warning"
+                  @click="resetToDefault"
                 >
                   {{ tm('t2iTemplateEditor.resetBase') }}
                 </v-btn>
                 <v-btn
                   variant="text"
                   size="small"
-                  @click="promptDelete"
                   color="error"
                   :disabled="isCreatingNew || selectedTemplate === 'base' || !selectedTemplate"
+                  @click="promptDelete"
                 >
                   {{ tm('t2iTemplateEditor.delete') }}
                 </v-btn>
-                <v-divider vertical class="mx-1"></v-divider>
+                <v-divider
+                  vertical
+                  class="mx-1"
+                />
                 <v-btn
                   variant="text"
                   size="small"
-                  @click="saveTemplate"
                   :loading="saveLoading"
                   color="primary"
                   :disabled="(isCreatingNew && !editingName) || (!isCreatingNew && !selectedTemplate)"
+                  @click="saveTemplate"
                 >
                   {{ tm('t2iTemplateEditor.save') }}
                 </v-btn>
               </div>
             </v-toolbar>
-            <div class="flex-grow-1" style="border-right: 1px solid rgba(0,0,0,0.1);">
+            <div
+              class="flex-grow-1"
+              style="border-right: 1px solid rgba(0,0,0,0.1);"
+            >
               <VueMonacoEditor
                 v-model:value="templateContent"
                 :theme="editorTheme"
@@ -139,15 +175,23 @@
           </v-col>
 
           <!-- 右侧预览 -->
-          <v-col cols="6" class="d-flex flex-column">
-            <v-toolbar density="compact" color="surface-variant">
-              <v-toolbar-title class="text-subtitle-2">{{ tm('t2iTemplateEditor.livePreview') }}</v-toolbar-title>
-              <v-spacer></v-spacer>
+          <v-col
+            cols="6"
+            class="d-flex flex-column"
+          >
+            <v-toolbar
+              density="compact"
+              color="surface-variant"
+            >
+              <v-toolbar-title class="text-subtitle-2">
+                {{ tm('t2iTemplateEditor.livePreview') }}
+              </v-toolbar-title>
+              <v-spacer />
               <v-btn
                 variant="text"
                 size="small"
-                @click="refreshPreview"
                 :loading="previewLoading"
+                @click="refreshPreview"
               >
                 {{ tm('t2iTemplateEditor.refreshPreview') }}
               </v-btn>
@@ -164,10 +208,18 @@
       </v-card-text>
 
       <v-card-actions class="px-6 py-4">
-        <v-row no-gutters class="align-center">
+        <v-row
+          no-gutters
+          class="align-center"
+        >
           <v-col>
             <div class="text-caption text-grey">
-              <v-icon size="16" class="mr-1">mdi-information</v-icon>
+              <v-icon
+                size="16"
+                class="mr-1"
+              >
+                mdi-information
+              </v-icon>
               {{ tm('t2iTemplateEditor.syntaxHint') }}
             </div>
           </v-col>
@@ -180,9 +232,9 @@
             </v-btn>
             <v-btn
               color="primary"
-              @click="promptApplyAndClose"
               :loading="saveLoading"
               :disabled="isCreatingNew || !selectedTemplate"
+              @click="promptApplyAndClose"
             >
               {{ tm('t2iTemplateEditor.saveAndApply') }}
             </v-btn>
@@ -192,50 +244,91 @@
     </v-card>
 
     <!-- 确认重置对话框 -->
-    <v-dialog v-model="resetDialog" max-width="400px">
+    <v-dialog
+      v-model="resetDialog"
+      max-width="400px"
+    >
       <v-card>
         <v-card-title>{{ tm('t2iTemplateEditor.confirmReset') }}</v-card-title>
         <v-card-text>
           {{ tm('t2iTemplateEditor.confirmResetMessage') }}
         </v-card-text>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn text @click="resetDialog = false">{{ t('core.common.cancel') }}</v-btn>
-          <v-btn color="warning" @click="confirmReset" :loading="resetLoading">{{ tm('t2iTemplateEditor.confirmResetButton') }}</v-btn>
+          <v-spacer />
+          <v-btn
+            text
+            @click="resetDialog = false"
+          >
+            {{ t('core.common.cancel') }}
+          </v-btn>
+          <v-btn
+            color="warning"
+            :loading="resetLoading"
+            @click="confirmReset"
+          >
+            {{ tm('t2iTemplateEditor.confirmResetButton') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- 删除确认对话框 -->
-    <v-dialog v-model="deleteDialog" max-width="400px">
+    <v-dialog
+      v-model="deleteDialog"
+      max-width="400px"
+    >
       <v-card>
         <v-card-title>{{ tm('t2iTemplateEditor.confirmDelete') }}</v-card-title>
         <v-card-text>
           {{ tm('t2iTemplateEditor.confirmDeleteMessage', { name: selectedTemplate }) }}
         </v-card-text>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn text @click="deleteDialog = false">{{ t('core.common.cancel') }}</v-btn>
-          <v-btn color="error" @click="confirmDelete" :loading="saveLoading">{{ tm('t2iTemplateEditor.confirmDeleteButton') }}</v-btn>
+          <v-spacer />
+          <v-btn
+            text
+            @click="deleteDialog = false"
+          >
+            {{ t('core.common.cancel') }}
+          </v-btn>
+          <v-btn
+            color="error"
+            :loading="saveLoading"
+            @click="confirmDelete"
+          >
+            {{ tm('t2iTemplateEditor.confirmDeleteButton') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- 保存并应用确认对话框 -->
-    <v-dialog v-model="applyAndCloseDialog" max-width="500px">
+    <v-dialog
+      v-model="applyAndCloseDialog"
+      max-width="500px"
+    >
       <v-card>
         <v-card-title>{{ tm('t2iTemplateEditor.confirmAction') }}</v-card-title>
         <v-card-text>
           {{ tm('t2iTemplateEditor.confirmApplyMessage', { name: selectedTemplate }) }}
         </v-card-text>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn text @click="applyAndCloseDialog = false">{{ t('core.common.cancel') }}</v-btn>
-          <v-btn color="primary" @click="confirmApplyAndClose" :loading="saveLoading">{{ t('core.common.confirm') }}</v-btn>
+          <v-spacer />
+          <v-btn
+            text
+            @click="applyAndCloseDialog = false"
+          >
+            {{ t('core.common.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            :loading="saveLoading"
+            @click="confirmApplyAndClose"
+          >
+            {{ t('core.common.confirm') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
-
   </v-dialog>
 </template>
 
diff --git a/dashboard/src/components/shared/TemplateListEditor.vue b/dashboard/src/components/shared/TemplateListEditor.vue
index 9cc49d9a9..42868eebd 100644
--- a/dashboard/src/components/shared/TemplateListEditor.vue
+++ b/dashboard/src/components/shared/TemplateListEditor.vue
@@ -20,7 +20,9 @@
             @click="addEntry(option.value)"
           >
             <v-list-item-title>{{ translateIfKey(option.label) }}</v-list-item-title>
-            <v-list-item-subtitle v-if="option.hint">{{ translateIfKey(option.hint) }}</v-list-item-subtitle>
+            <v-list-item-subtitle v-if="option.hint">
+              {{ translateIfKey(option.hint) }}
+            </v-list-item-subtitle>
           </v-list-item>
         </v-list>
       </v-menu>
@@ -56,25 +58,54 @@
             <v-icon>{{ expandedEntries[entryIndex] ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
           </v-btn>
           <div class="d-flex flex-column">
-            <v-list-item-title class="property-name">{{ templateLabel(entry.__template_key) }}</v-list-item-title>
-            <v-list-item-subtitle class="property-hint" v-if="getTemplate(entry)?.hint || getTemplate(entry)?.description">
+            <v-list-item-title class="property-name">
+              {{ templateLabel(entry.__template_key) }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              v-if="getTemplate(entry)?.hint || getTemplate(entry)?.description"
+              class="property-hint"
+            >
               {{ translateIfKey(getTemplate(entry)?.hint || getTemplate(entry)?.description) }}
             </v-list-item-subtitle>
           </div>
         </div>
         <div class="d-flex align-center ga-1">
-          <v-btn icon size="small" variant="text" color="error" @click.stop="removeEntry(entryIndex)">
+          <v-btn
+            icon
+            size="small"
+            variant="text"
+            color="error"
+            @click.stop="removeEntry(entryIndex)"
+          >
             <v-icon>mdi-delete</v-icon>
           </v-btn>
         </div>
       </v-card-title>
       <v-expand-transition>
-        <v-card-text v-show="expandedEntries[entryIndex]" class="px-0 py-1">
-          <div v-if="!getTemplate(entry)" class="px-4 py-2">
-            <v-alert type="error" variant="tonal" density="compact">{{ t('core.common.templateList.missingTemplate') || '找不到对应模板，请删除后重新添加。' }}</v-alert>
+        <v-card-text
+          v-show="expandedEntries[entryIndex]"
+          class="px-0 py-1"
+        >
+          <div
+            v-if="!getTemplate(entry)"
+            class="px-4 py-2"
+          >
+            <v-alert
+              type="error"
+              variant="tonal"
+              density="compact"
+            >
+              {{ t('core.common.templateList.missingTemplate') || '找不到对应模板，请删除后重新添加。' }}
+            </v-alert>
           </div>
-          <div v-else class="template-entry-body">
-            <template v-for="(itemMeta, itemKey, metaIndex) in getTemplate(entry).items" :key="itemKey">
+          <div
+            v-else
+            class="template-entry-body"
+          >
+            <template
+              v-for="(itemMeta, itemKey, metaIndex) in getTemplate(entry).items"
+              :key="itemKey"
+            >
               <!-- Nested Object -->
               <div
                 v-if="itemMeta?.type === 'object' && !itemMeta?.invisible && shouldShowItem(itemMeta, entry)"
@@ -84,14 +115,24 @@
                   <v-list-item-title class="config-title">
                     {{ translateIfKey(itemMeta?.description) || itemKey }}
                   </v-list-item-title>
-                  <v-list-item-subtitle class="config-hint" v-if="itemMeta?.hint">
+                  <v-list-item-subtitle
+                    v-if="itemMeta?.hint"
+                    class="config-hint"
+                  >
                     {{ translateIfKey(itemMeta.hint) }}
                   </v-list-item-subtitle>
                 </div>
-                <div v-for="(childMeta, childKey, childIndex) in itemMeta.items" :key="childKey">
+                <div
+                  v-for="(childMeta, childKey, childIndex) in itemMeta.items"
+                  :key="childKey"
+                >
                   <template v-if="!childMeta?.invisible && shouldShowItem(childMeta, entry)">
                     <v-row class="config-row">
-                      <v-col cols="12" sm="6" class="property-info">
+                      <v-col
+                        cols="12"
+                        sm="6"
+                        class="property-info"
+                      >
                         <v-list-item density="compact">
                           <v-list-item-title class="property-name">
                             {{ translateIfKey(childMeta?.description) || childKey }}
@@ -101,7 +142,11 @@
                           </v-list-item-subtitle>
                         </v-list-item>
                       </v-col>
-                      <v-col cols="12" sm="6" class="config-input">
+                      <v-col
+                        cols="12"
+                        sm="6"
+                        class="config-input"
+                      >
                         <ConfigItemRenderer
                           v-model="entry[itemKey][childKey]"
                           :item-meta="childMeta"
@@ -111,7 +156,7 @@
                     <v-divider
                       v-if="hasVisibleItemsAfter(Object.entries(itemMeta.items), childIndex, entry)"
                       class="config-divider"
-                    ></v-divider>
+                    />
                   </template>
                 </div>
               </div>
@@ -119,7 +164,11 @@
               <!-- Regular Property -->
               <template v-else-if="!itemMeta?.invisible && shouldShowItem(itemMeta, entry)">
                 <v-row class="config-row">
-                  <v-col cols="12" sm="6" class="property-info">
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    class="property-info"
+                  >
                     <v-list-item density="compact">
                       <v-list-item-title class="property-name">
                         <span v-if="itemMeta?.description">{{ translateIfKey(itemMeta?.description) }} <span class="property-key">({{ itemKey }})</span></span>
@@ -130,7 +179,11 @@
                       </v-list-item-subtitle>
                     </v-list-item>
                   </v-col>
-                  <v-col cols="12" sm="6" class="config-input">
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    class="config-input"
+                  >
                     <ConfigItemRenderer
                       v-model="entry[itemKey]"
                       :item-meta="itemMeta"
@@ -140,7 +193,7 @@
                 <v-divider
                   v-if="hasVisibleItemsAfter(Object.entries(getTemplate(entry).items), metaIndex, entry)"
                   class="config-divider"
-                ></v-divider>
+                />
               </template>
             </template>
           </div>
diff --git a/dashboard/src/components/shared/TraceDisplayer.vue b/dashboard/src/components/shared/TraceDisplayer.vue
index 62c57ef47..cea6c8dba 100644
--- a/dashboard/src/components/shared/TraceDisplayer.vue
+++ b/dashboard/src/components/shared/TraceDisplayer.vue
@@ -5,27 +5,52 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
 
 <template>
   <div class="trace-wrapper">
-    <div class="trace-table" ref="scrollEl" :style="{ height: tableHeight }">
+    <div
+      ref="scrollEl"
+      class="trace-table"
+      :style="{ height: tableHeight }"
+    >
       <div class="trace-row trace-header">
-        <div class="trace-cell time">Time</div>
-        <div class="trace-cell span">Event ID</div>
-        <div class="trace-cell umo">UMO</div>
+        <div class="trace-cell time">
+          Time
+        </div>
+        <div class="trace-cell span">
+          Event ID
+        </div>
+        <div class="trace-cell umo">
+          UMO
+        </div>
         <!-- <div class="trace-cell count">Records</div> -->
         <!-- <div class="trace-cell last">Last</div> -->
-        <div class="trace-cell sender">Sender</div>
-        <div class="trace-cell outline">Outline</div>
-        <div class="trace-cell fields"></div>
+        <div class="trace-cell sender">
+          Sender
+        </div>
+        <div class="trace-cell outline">
+          Outline
+        </div>
+        <div class="trace-cell fields" />
       </div>
-      <div class="trace-group" :class="{ highlight: highlightMap[event.span_id] }" v-for="event in events"
-        :key="event.span_id">
+      <div
+        v-for="event in events"
+        :key="event.span_id"
+        class="trace-group"
+        :class="{ highlight: highlightMap[event.span_id] }"
+      >
         <div class="trace-row trace-event">
-          <div class="trace-cell time">{{ formatTime(event.first_time) }}</div>
-          <div class="trace-cell span" :title="event.span_id">
+          <div class="trace-cell time">
+            {{ formatTime(event.first_time) }}
+          </div>
+          <div
+            class="trace-cell span"
+            :title="event.span_id"
+          >
             <div class="event-title">
               {{ shortSpan(event.span_id) }}
             </div>
           </div>
-          <div class="trace-cell umo">{{ event.umo }}</div>
+          <div class="trace-cell umo">
+            {{ event.umo }}
+          </div>
           <!-- <div class="trace-cell count">
             <div class="event-meta">{{ event.records.length }}</div>
           </div> -->
@@ -33,33 +58,72 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
             <div class="event-meta">{{ formatTime(event.last_time) }}</div>
           </div> -->
           <div class="trace-cell sender">
-            <div class="event-sub" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{
-              event.sender_name || '-' }}</div>
+            <div
+              class="event-sub"
+              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+            >
+              {{
+                event.sender_name || '-' }}
+            </div>
           </div>
           <div class="trace-cell outline">
-            <div class="event-sub outline">{{ event.message_outline || '-' }}</div>
+            <div class="event-sub outline">
+              {{ event.message_outline || '-' }}
+            </div>
           </div>
           <div class="trace-cell fields event-controls">
-            <v-btn size="x-small" variant="text" color="primary" @click="toggleEvent(event.span_id)">
+            <v-btn
+              size="x-small"
+              variant="text"
+              color="primary"
+              @click="toggleEvent(event.span_id)"
+            >
               {{ event.collapsed ? 'Expand' : 'Collapse' }}
-              <span v-if="event.hasAgentPrepare" class="agent-dot" />
+              <span
+                v-if="event.hasAgentPrepare"
+                class="agent-dot"
+              />
             </v-btn>
           </div>
         </div>
-        <div class="trace-records" v-if="!event.collapsed">
-          <div class="trace-record" v-for="record in getVisibleRecords(event)" :key="record.key">
-            <div class="trace-record-time">{{ record.timeLabel }}</div>
-            <div class="trace-record-action">{{ record.action }}</div>
+        <div
+          v-if="!event.collapsed"
+          class="trace-records"
+        >
+          <div
+            v-for="record in getVisibleRecords(event)"
+            :key="record.key"
+            class="trace-record"
+          >
+            <div class="trace-record-time">
+              {{ record.timeLabel }}
+            </div>
+            <div class="trace-record-action">
+              {{ record.action }}
+            </div>
             <pre class="trace-record-fields">{{ record.fieldsText }}</pre>
           </div>
-          <div class="event-more" v-if="event.visibleCount < event.records.length">
-            <v-btn size="x-small" variant="tonal" color="primary" @click="showMore(event.span_id)">
+          <div
+            v-if="event.visibleCount < event.records.length"
+            class="event-more"
+          >
+            <v-btn
+              size="x-small"
+              variant="tonal"
+              color="primary"
+              @click="showMore(event.span_id)"
+            >
               Show more
             </v-btn>
           </div>
         </div>
       </div>
-      <div v-if="events.length === 0" class="trace-empty">No trace data yet.</div>
+      <div
+        v-if="events.length === 0"
+        class="trace-empty"
+      >
+        No trace data yet.
+      </div>
     </div>
   </div>
 </template>
diff --git a/dashboard/src/components/shared/UninstallConfirmDialog.vue b/dashboard/src/components/shared/UninstallConfirmDialog.vue
index a6784d2a1..22d206596 100644
--- a/dashboard/src/components/shared/UninstallConfirmDialog.vue
+++ b/dashboard/src/components/shared/UninstallConfirmDialog.vue
@@ -15,9 +15,11 @@
           {{ tm('dialogs.uninstall.message') }}
         </div>
         
-        <v-divider class="my-4"></v-divider>
+        <v-divider class="my-4" />
         
-        <div class="text-subtitle-2 mb-3">{{ t('core.common.actions') }}:</div>
+        <div class="text-subtitle-2 mb-3">
+          {{ t('core.common.actions') }}:
+        </div>
         
         <v-checkbox
           v-model="deleteConfig"
@@ -26,10 +28,16 @@
           hide-details
           class="mb-2"
         >
-          <template v-slot:append>
+          <template #append>
             <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props" size="small" color="grey">mdi-information-outline</v-icon>
+              <template #activator="{ props }">
+                <v-icon
+                  v-bind="props"
+                  size="small"
+                  color="grey"
+                >
+                  mdi-information-outline
+                </v-icon>
               </template>
               <span>{{ tm('dialogs.uninstall.configHint') }}</span>
             </v-tooltip>
@@ -42,10 +50,16 @@
           color="error"
           hide-details
         >
-          <template v-slot:append>
+          <template #append>
             <v-tooltip location="top">
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props" size="small" color="grey">mdi-information-outline</v-icon>
+              <template #activator="{ props }">
+                <v-icon
+                  v-bind="props"
+                  size="small"
+                  color="grey"
+                >
+                  mdi-information-outline
+                </v-icon>
               </template>
               <span>{{ tm('dialogs.uninstall.dataHint') }}</span>
             </v-tooltip>
@@ -59,7 +73,7 @@
           density="compact"
           class="mt-4"
         >
-          <template v-slot:prepend>
+          <template #prepend>
             <v-icon>mdi-alert</v-icon>
           </template>
           {{ t('messages.validation.operation_cannot_be_undone') }}
@@ -67,7 +81,7 @@
       </v-card-text>
       
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="grey"
           variant="text"
diff --git a/dashboard/src/components/shared/WaitingForRestart.vue b/dashboard/src/components/shared/WaitingForRestart.vue
index 41ce9ece2..86354ce1f 100644
--- a/dashboard/src/components/shared/WaitingForRestart.vue
+++ b/dashboard/src/components/shared/WaitingForRestart.vue
@@ -1,12 +1,19 @@
 <template>
-    <v-dialog v-model="visible" persistent max-width="400">
-        <v-card>
-            <v-card-title>{{ t('core.common.restart.waiting') }}</v-card-title>
-            <v-card-text>
-                <v-progress-linear indeterminate color="primary"></v-progress-linear>
-            </v-card-text>
-        </v-card>
-    </v-dialog>
+  <v-dialog
+    v-model="visible"
+    persistent
+    max-width="400"
+  >
+    <v-card>
+      <v-card-title>{{ t('core.common.restart.waiting') }}</v-card-title>
+      <v-card-text>
+        <v-progress-linear
+          indeterminate
+          color="primary"
+        />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
diff --git a/dashboard/src/composables/useConversations.ts b/dashboard/src/composables/useConversations.ts
index cf86246c8..1a02d1c1a 100644
--- a/dashboard/src/composables/useConversations.ts
+++ b/dashboard/src/composables/useConversations.ts
@@ -8,7 +8,7 @@ export interface Conversation {
     updated_at: number;
 }
 
-export function useConversations(chatboxMode: boolean = false) {
+export function useConversations(chatboxMode = false) {
     const router = useRouter();
     const conversations = ref<Conversation[]>([]);
     const selectedConversations = ref<string[]>([]);
diff --git a/dashboard/src/composables/useMessages.ts b/dashboard/src/composables/useMessages.ts
index c593fb283..32dfbf48d 100644
--- a/dashboard/src/composables/useMessages.ts
+++ b/dashboard/src/composables/useMessages.ts
@@ -628,7 +628,7 @@ export function useMessages(
         // 如果 message 是字符串 (旧格式)，转换为数组格式
         if (typeof message === 'string') {
             const parts: MessagePart[] = [];
-            let text = message;
+            const text = message;
 
             // 处理旧格式的特殊标记
             if (text.startsWith('[IMAGE]')) {
@@ -695,7 +695,7 @@ export function useMessages(
 
             const response = await axios.get('/api/chat/get_session?session_id=' + sessionId);
             isConvRunning.value = response.data.data.is_running || false;
-            let history = response.data.data.history;
+            const history = response.data.data.history;
 
             // 保存项目信息（如果存在）
             currentSessionProject.value = response.data.data.project || null;
@@ -714,7 +714,7 @@ export function useMessages(
 
             // 处理历史消息
             for (let i = 0; i < history.length; i++) {
-                let content = history[i].content;
+                const content = history[i].content;
                 await parseMessageContent(content);
             }
 
@@ -750,7 +750,7 @@ export function useMessages(
             const partType = f.type === 'image' ? 'image' :
                 f.type === 'record' ? 'record' : 'file';
             parts.push({
-                type: partType as 'image' | 'record' | 'file',
+                type: partType ,
                 attachment_id: f.attachment_id
             });
         }
@@ -793,7 +793,7 @@ export function useMessages(
 
         isStreaming.value = true;
 
-        while (true) {
+        for (;;) {
             try {
                 const { done, value } = await reader.read();
                 if (done) {
@@ -807,7 +807,7 @@ export function useMessages(
                 const lines = chunk.split('\n\n');
 
                 for (let i = 0; i < lines.length; i++) {
-                    let line = lines[i].trim();
+                    const line = lines[i].trim();
                     if (!line) continue;
 
                     let chunkJson: StreamChunk;
@@ -917,7 +917,7 @@ export function useMessages(
             const embeddedUrl = await getAttachment(f.attachment_id);
 
             userMessageParts.push({
-                type: partType as 'image' | 'record' | 'file',
+                type: partType ,
                 attachment_id: f.attachment_id,
                 filename: f.original_name,
                 embedded_url: partType !== 'file' ? embeddedUrl : undefined,
diff --git a/dashboard/src/composables/useSessions.ts b/dashboard/src/composables/useSessions.ts
index a38fc0362..8bf39d3ea 100644
--- a/dashboard/src/composables/useSessions.ts
+++ b/dashboard/src/composables/useSessions.ts
@@ -13,7 +13,7 @@ export interface Session {
     created_at: string;
 }
 
-export function useSessions(chatboxMode: boolean = false) {
+export function useSessions(chatboxMode = false) {
     const router = useRouter();
     const sessions = ref<Session[]>([]);
     const selectedSessions = ref<string[]>([]);
diff --git a/dashboard/src/i18n/tools/index.ts b/dashboard/src/i18n/tools/index.ts
index f62267ce0..88f3514c5 100644
--- a/dashboard/src/i18n/tools/index.ts
+++ b/dashboard/src/i18n/tools/index.ts
@@ -10,7 +10,7 @@ export function generateMissingKeys(
 ): string[] {
   const missing: string[] = [];
   
-  function traverse(source: any, target: any, path: string = '') {
+  function traverse(source: any, target: any, path = '') {
     for (const key in source) {
       const currentPath = path ? `${path}.${key}` : key;
       
diff --git a/dashboard/src/i18n/validator.ts b/dashboard/src/i18n/validator.ts
index 462be1ec1..9aff2c896 100644
--- a/dashboard/src/i18n/validator.ts
+++ b/dashboard/src/i18n/validator.ts
@@ -6,7 +6,7 @@
 import type { ValidationResult, ValidationError, UsageReport, TranslationStats } from './types';
 
 export class I18nValidator {
-  private baseLocale: string = 'zh-CN';
+  private baseLocale = 'zh-CN';
   private supportedLocales: string[] = ['zh-CN', 'en-US'];
 
   /**
@@ -232,7 +232,7 @@ export class I18nValidator {
   /**
    * 获取对象的所有键路径
    */
-  private getAllKeys(obj: any, prefix: string = ''): string[] {
+  private getAllKeys(obj: any, prefix = ''): string[] {
     const keys: string[] = [];
 
     for (const [key, value] of Object.entries(obj)) {
diff --git a/dashboard/src/layouts/full/FullLayout.vue b/dashboard/src/layouts/full/FullLayout.vue
index af7011d12..cacc2a7e1 100644
--- a/dashboard/src/layouts/full/FullLayout.vue
+++ b/dashboard/src/layouts/full/FullLayout.vue
@@ -96,7 +96,8 @@ onMounted(() => {
 
 <template>
   <v-locale-provider>
-    <v-app :theme="useCustomizerStore().uiTheme"
+    <v-app
+      :theme="useCustomizerStore().uiTheme"
       :class="[customizer.fontTheme, customizer.mini_sidebar ? 'mini-sidebar' : '', customizer.inputBg ? 'inputWithbg' : '']"
     >
       <v-progress-linear
@@ -110,10 +111,12 @@ onMounted(() => {
       />
       <VerticalHeaderVue />
       <VerticalSidebarVue v-if="showSidebar" />
-      <v-main :style="{
-        height: showChatPage ? 'calc(100vh - 55px)' : undefined,
-        overflow: showChatPage ? 'hidden' : undefined
-      }">
+      <v-main
+        :style="{
+          height: showChatPage ? 'calc(100vh - 55px)' : undefined,
+          overflow: showChatPage ? 'hidden' : undefined
+        }"
+      >
         <v-container
           fluid
           class="page-wrapper"
@@ -122,9 +125,13 @@ onMounted(() => {
             height: showChatPage ? '100%' : 'calc(100% - 8px)',
             padding: (isChatPage || showChatPage) ? '0' : undefined,
             minHeight: showChatPage ? 'unset' : undefined
-          }">
+          }"
+        >
           <div :style="{ height: '100%', width: '100%', overflow: showChatPage ? 'hidden' : undefined }">
-            <div v-if="showChatPage" style="height: 100%; width: 100%; overflow: hidden;">
+            <div
+              v-if="showChatPage"
+              style="height: 100%; width: 100%; overflow: hidden;"
+            >
               <Chat />
             </div>
             <RouterView v-else />
diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
index 681091cf7..706454e4f 100644
--- a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
+++ b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -76,7 +76,7 @@ const desktopUpdateCurrentVersion = ref("-");
 const desktopUpdateLatestVersion = ref("-");
 const desktopUpdateStatus = ref("");
 
-const getAppUpdaterBridge = (): AstrBotAppUpdaterBridge | null => {
+const getAppUpdaterBridge = (): NonNullable<Window["astrbotAppUpdater"]> | null => {
   if (typeof window === "undefined") {
     return null;
   }
@@ -533,7 +533,13 @@ const isChristmas = computed(() => {
 </script>
 
 <template>
-  <v-app-bar elevation="0" :priority="0" height="70" class="px-0" app>
+  <v-app-bar
+    elevation="0"
+    :priority="0"
+    height="70"
+    class="px-0"
+    app
+  >
     <div class="fill-height d-flex align-center w-100 px-4">
       <!-- 桌面端标题栏拖拽区域 -->
       <div
@@ -547,7 +553,7 @@ const isChristmas = computed(() => {
           height: 30px;
           z-index: 9999;
         "
-      ></div>
+      />
 
       <div class="d-flex align-center">
         <!-- 桌面端 menu 按钮 - 仅在 bot 模式下显示 -->
@@ -582,22 +588,18 @@ const isChristmas = computed(() => {
         }"
         @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 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
+          v-if="customizer.viewMode === 'chat'"
           class="logo-text logo-text-light Outfit"
           style="color: grey"
-          v-if="customizer.viewMode === 'chat'"
-          >ChatUI</span
-        >
+        >ChatUI</span>
         <span class="version-text hidden-xs">{{ botCurrVersion }}</span>
       </div>
 
@@ -612,10 +614,18 @@ const isChristmas = computed(() => {
           group
           density="compact"
         >
-          <v-btn value="chat" prepend-icon="mdi-chat-processing-outline">
+          <v-btn
+            value="chat"
+            prepend-icon="mdi-chat-processing-outline"
+          >
             Chat
           </v-btn>
-          <v-btn value="bot" prepend-icon="mdi-robot-outline"> Bot </v-btn>
+          <v-btn
+            value="bot"
+            prepend-icon="mdi-robot-outline"
+          >
+            Bot
+          </v-btn>
         </v-btn-toggle>
       </div>
 
@@ -633,8 +643,11 @@ const isChristmas = computed(() => {
       </div>
 
       <!-- 功能菜单 -->
-      <StyledMenu offset="12" location="bottom end">
-        <template v-slot:activator="{ props: activatorProps }">
+      <StyledMenu
+        offset="12"
+        location="bottom end"
+      >
+        <template #activator="{ props: activatorProps }">
           <v-btn
             v-bind="activatorProps"
             size="small"
@@ -659,12 +672,22 @@ const isChristmas = computed(() => {
               color="primary"
               class="mobile-mode-toggle"
             >
-              <v-btn value="bot" size="small">
-                <v-icon start>mdi-robot</v-icon>
+              <v-btn
+                value="bot"
+                size="small"
+              >
+                <v-icon start>
+                  mdi-robot
+                </v-icon>
                 Bot
               </v-btn>
-              <v-btn value="chat" size="small">
-                <v-icon start>mdi-chat</v-icon>
+              <v-btn
+                value="chat"
+                size="small"
+              >
+                <v-icon start>
+                  mdi-chat
+                </v-icon>
                 Chat
               </v-btn>
             </v-btn-toggle>
@@ -681,25 +704,30 @@ const isChristmas = computed(() => {
           :location="$vuetify.display.xs ? 'bottom' : 'start center'"
           offset="8"
         >
-          <template v-slot:activator="{ props: languageMenuProps }">
+          <template #activator="{ props: languageMenuProps }">
             <v-list-item
               v-bind="languageMenuProps"
               class="styled-menu-item language-group-trigger"
               rounded="md"
             >
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon>mdi-translate</v-icon>
               </template>
-              <v-list-item-title>{{
-                t("core.common.language")
-              }}</v-list-item-title>
-              <template v-slot:append>
+              <v-list-item-title>
+                {{
+                  t("core.common.language")
+                }}
+              </v-list-item-title>
+              <template #append>
                 <span class="language-group-current">{{
                   currentLanguage?.flag
                 }}</span>
-                <v-icon size="18" class="language-group-arrow"
-                  >mdi-chevron-right</v-icon
+                <v-icon
+                  size="18"
+                  class="language-group-arrow"
                 >
+                  mdi-chevron-right
+                </v-icon>
               </template>
             </v-list-item>
           </template>
@@ -710,19 +738,22 @@ const isChristmas = computed(() => {
             elevation="8"
             rounded="lg"
           >
-            <v-list density="compact" class="styled-menu-list pa-1">
+            <v-list
+              density="compact"
+              class="styled-menu-list pa-1"
+            >
               <v-list-item
                 v-for="lang in languages"
                 :key="lang.code"
                 :value="lang.code"
-                @click="changeLanguage(lang.code)"
                 :class="{
                   'styled-menu-item-active': currentLocale === lang.code,
                 }"
                 class="styled-menu-item"
                 rounded="md"
+                @click="changeLanguage(lang.code)"
               >
-                <template v-slot:prepend>
+                <template #prepend>
                   <span class="language-flag">{{ lang.flag }}</span>
                 </template>
                 <v-list-item-title>{{ lang.name }}</v-list-item-title>
@@ -733,11 +764,11 @@ const isChristmas = computed(() => {
 
         <!-- 主题切换 -->
         <v-list-item
-          @click="toggleTheme()"
           class="styled-menu-item"
           rounded="md"
+          @click="toggleTheme()"
         >
-          <template v-slot:prepend>
+          <template #prepend>
             <v-icon>
               {{
                 useCustomizerStore().isDarkTheme
@@ -757,54 +788,65 @@ const isChristmas = computed(() => {
 
         <!-- 更新按钮 -->
         <v-list-item
-          @click="handleUpdateClick"
           class="styled-menu-item"
           rounded="md"
+          @click="handleUpdateClick"
         >
-          <template v-slot:prepend>
+          <template #prepend>
             <v-icon>mdi-arrow-up-circle</v-icon>
           </template>
-          <v-list-item-title>{{
-            t("core.header.updateDialog.title")
-          }}</v-list-item-title>
+          <v-list-item-title>
+            {{
+              t("core.header.updateDialog.title")
+            }}
+          </v-list-item-title>
           <template
-            v-slot:append
             v-if="
               hasNewVersion || (dashboardHasNewVersion && !isDesktopReleaseMode)
             "
+            #append
           >
-            <v-chip size="x-small" color="primary" variant="tonal" class="ml-2"
-              >!</v-chip
+            <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"
+          @click="dialog = true"
         >
-          <template v-slot:prepend>
+          <template #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"
+          @click="handleLogout"
         >
-          <template v-slot:prepend>
+          <template #prepend>
             <v-icon>mdi-logout</v-icon>
           </template>
-          <v-list-item-title>{{
-            t("core.header.buttons.logout")
-          }}</v-list-item-title>
+          <v-list-item-title>
+            {{
+              t("core.header.buttons.logout")
+            }}
+          </v-list-item-title>
         </v-list-item>
       </StyledMenu>
     </div>
@@ -834,10 +876,12 @@ const isChristmas = computed(() => {
             class="mb-4"
             indeterminate
             color="primary"
-          ></v-progress-linear>
+          />
 
           <div>
-            <h1 style="display: inline-block">{{ botCurrVersion }}</h1>
+            <h1 style="display: inline-block">
+              {{ botCurrVersion }}
+            </h1>
             <small style="margin-left: 4px">{{ updateStatus }}</small>
           </div>
 
@@ -860,22 +904,18 @@ const isChristmas = computed(() => {
           </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") }}
+              <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
-              >
+                {{ t("core.header.updateDialog.dockerTipContinue") }}</small>
             </div>
 
             <v-alert
@@ -886,14 +926,14 @@ const isChristmas = computed(() => {
               variant="tonal"
               border="start"
             >
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon>mdi-alert-circle-outline</v-icon>
               </template>
               <div class="text-body-2">
                 <strong>{{
                   t("core.header.updateDialog.preReleaseWarning.title")
                 }}</strong>
-                <br />
+                <br>
                 {{
                   t("core.header.updateDialog.preReleaseWarning.description")
                 }}
@@ -915,7 +955,7 @@ const isChristmas = computed(() => {
               item-key="name"
               :items-per-page="8"
             >
-              <template v-slot:item.tag_name="{ item }: { item: any }">
+              <template #item.tag_name="{ item }: { item: any }">
                 <div class="d-flex align-center">
                   <span>{{ item.tag_name }}</span>
                   <v-chip
@@ -930,29 +970,30 @@ const isChristmas = computed(() => {
                 </div>
               </template>
               <template
-                v-slot:item.body="{
+                #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
+                  @click="openReleaseNotesDialog(item.body, item.tag_name)"
                 >
+                  {{ t("core.header.updateDialog.table.view") }}
+                </v-btn>
               </template>
               <template
-                v-slot:item.switch="{ item }: { item: { tag_name: string } }"
+                #item.switch="{ item }: { item: { tag_name: string } }"
               >
                 <v-btn
-                  @click="switchVersion(item.tag_name)"
                   rounded="xl"
                   variant="plain"
                   color="primary"
+                  @click="switchVersion(item.tag_name)"
                 >
                   {{ t("core.header.updateDialog.table.switch") }}
                 </v-btn>
@@ -960,19 +1001,17 @@ const isChristmas = computed(() => {
             </v-data-table>
           </div>
 
-          <v-divider class="mt-4 mb-4"></v-divider>
+          <v-divider class="mt-4 mb-4" />
           <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">
@@ -981,7 +1020,7 @@ const isChristmas = computed(() => {
                   t("core.header.updateDialog.dashboardUpdate.hasNewVersion")
                 }}
               </p>
-              <p v-else="dashboardHasNewVersion">
+              <p v-else>
                 {{ t("core.header.updateDialog.dashboardUpdate.isLatest") }}
               </p>
             </div>
@@ -989,9 +1028,9 @@ const isChristmas = computed(() => {
             <v-btn
               color="primary"
               style="border-radius: 10px"
-              @click="updateDashboard()"
               :disabled="!dashboardHasNewVersion"
               :loading="updatingDashboardLoading"
+              @click="updateDashboard()"
             >
               {{
                 t("core.header.updateDialog.dashboardUpdate.downloadAndUpdate")
@@ -1001,7 +1040,7 @@ const isChristmas = computed(() => {
         </v-container>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="blue-darken-1"
           variant="text"
@@ -1014,7 +1053,10 @@ const isChristmas = computed(() => {
   </v-dialog>
 
   <!-- Release Notes Modal -->
-  <v-dialog v-model="releaseNotesDialog" max-width="800">
+  <v-dialog
+    v-model="releaseNotesDialog"
+    max-width="800"
+  >
     <v-card>
       <v-card-title class="text-h5">
         {{ t("core.header.updateDialog.releaseNotes.title") }}:
@@ -1028,7 +1070,7 @@ const isChristmas = computed(() => {
         />
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="blue-darken-1"
           variant="text"
@@ -1040,7 +1082,10 @@ const isChristmas = computed(() => {
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="desktopUpdateDialog" max-width="460">
+  <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") }}
@@ -1049,7 +1094,11 @@ const isChristmas = computed(() => {
         <div class="mb-3">
           {{ t("core.header.updateDialog.desktopApp.message") }}
         </div>
-        <v-alert type="info" variant="tonal" density="compact">
+        <v-alert
+          type="info"
+          variant="tonal"
+          density="compact"
+        >
           <div>
             {{ t("core.header.updateDialog.desktopApp.currentVersion") }}
             <strong>{{ desktopUpdateCurrentVersion }}</strong>
@@ -1073,25 +1122,25 @@ const isChristmas = computed(() => {
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="grey"
           variant="text"
-          @click="cancelDesktopUpdate"
           :disabled="desktopUpdateInstalling"
+          @click="cancelDesktopUpdate"
         >
           {{ t("core.common.dialog.cancelButton") }}
         </v-btn>
         <v-btn
           color="primary"
           variant="flat"
-          @click="confirmDesktopUpdate"
           :loading="desktopUpdateInstalling"
           :disabled="
             desktopUpdateChecking ||
-            desktopUpdateInstalling ||
-            !desktopUpdateHasNewVersion
+              desktopUpdateInstalling ||
+              !desktopUpdateHasNewVersion
           "
+          @click="confirmDesktopUpdate"
         >
           {{ t("core.common.dialog.confirmButton") }}
         </v-btn>
@@ -1111,7 +1160,7 @@ const isChristmas = computed(() => {
           <Logo
             :title="t('core.header.logoTitle')"
             :subtitle="t('core.header.accountDialog.title')"
-          ></Logo>
+          />
         </div>
         <v-alert
           v-if="accountWarning"
@@ -1143,7 +1192,10 @@ const isChristmas = computed(() => {
           {{ accountEditStatus.message }}
         </v-alert>
 
-        <v-form v-model="formValid" @submit.prevent="accountEdit">
+        <v-form
+          v-model="formValid"
+          @submit.prevent="accountEdit"
+        >
           <v-text-field
             v-model="password"
             :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
@@ -1152,11 +1204,11 @@ const isChristmas = computed(() => {
             variant="outlined"
             required
             clearable
-            @click:append-inner="showPassword = !showPassword"
             prepend-inner-icon="mdi-lock-outline"
             hide-details="auto"
             class="mb-4"
-          ></v-text-field>
+            @click:append-inner="showPassword = !showPassword"
+          />
 
           <v-text-field
             v-model="newPassword"
@@ -1166,12 +1218,12 @@ const isChristmas = computed(() => {
             :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>
+            @click:append-inner="showNewPassword = !showNewPassword"
+          />
 
           <v-text-field
             v-model="confirmPassword"
@@ -1181,12 +1233,12 @@ const isChristmas = computed(() => {
             :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>
+            @click:append-inner="showConfirmPassword = !showConfirmPassword"
+          />
 
           <v-text-field
             v-model="newUsername"
@@ -1198,7 +1250,7 @@ const isChristmas = computed(() => {
             :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">
@@ -1206,25 +1258,25 @@ const isChristmas = computed(() => {
         </div>
       </v-card-text>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           v-if="!accountWarning"
           variant="tonal"
           color="secondary"
-          @click="dialog = false"
           :disabled="accountEditStatus.loading"
+          @click="dialog = false"
         >
           {{ t("core.header.accountDialog.actions.cancel") }}
         </v-btn>
         <v-btn
           color="primary"
-          @click="accountEdit"
           :loading="accountEditStatus.loading"
           :disabled="!formValid"
           prepend-icon="mdi-content-save"
+          @click="accountEdit"
         >
           {{ t("core.header.accountDialog.actions.save") }}
         </v-btn>
@@ -1233,7 +1285,10 @@ const isChristmas = computed(() => {
   </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">
         <AboutPage />
diff --git a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
index 4051ccecd..f996d36bf 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/NavItem.vue
@@ -27,10 +27,20 @@ const isItemActive = computed(() => {
 </script>
 
 <template>
-  <v-list-group v-if="item.children" :value="item.title" :class="{ 'group-bordered': customizer.mini_sidebar }">
-    <template v-slot:activator="{ props }">
-      <v-list-item v-bind="props" rounded class="mb-1" color="secondary" :prepend-icon="item.icon"
-        :style="{ '--indent-padding': '0px' }">
+  <v-list-group
+    v-if="item.children"
+    :value="item.title"
+    :class="{ 'group-bordered': customizer.mini_sidebar }"
+  >
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        rounded
+        class="mb-1"
+        color="secondary"
+        :prepend-icon="item.icon"
+        :style="{ '--indent-padding': '0px' }"
+      >
         <v-list-item-title style="font-size: 14px; font-weight: 500; line-height: 1.2; word-break: break-word;">
           {{ t(item.title) }}
         </v-list-item-title>
@@ -38,24 +48,57 @@ const isItemActive = computed(() => {
     </template>
 
     <!-- children -->
-    <template v-for="(child, index) in item.children" :key="child.title || child.to || `child-${index}`">
-      <NavItem :item="child" :level="(level || 0) + 1" />
+    <template
+      v-for="(child, index) in item.children"
+      :key="child.title || child.to || `child-${index}`"
+    >
+      <NavItem
+        :item="child"
+        :level="(level || 0) + 1"
+      />
     </template>
   </v-list-group>
 
-  <v-list-item v-else :to="item.type === 'external' ? '' : item.to" :href="item.type === 'external' ? item.to : ''"
-    :active="isItemActive" rounded class="mb-1" color="secondary" :disabled="item.disabled"
-    :target="item.type === 'external' ? '_blank' : ''" :style="itemStyle">
-    <template v-slot:prepend>
-      <v-icon v-if="item.icon" :size="item.iconSize" class="hide-menu" :icon="item.icon"></v-icon>
+  <v-list-item
+    v-else
+    :to="item.type === 'external' ? '' : item.to"
+    :href="item.type === 'external' ? item.to : ''"
+    :active="isItemActive"
+    rounded
+    class="mb-1"
+    color="secondary"
+    :disabled="item.disabled"
+    :target="item.type === 'external' ? '_blank' : ''"
+    :style="itemStyle"
+  >
+    <template #prepend>
+      <v-icon
+        v-if="item.icon"
+        :size="item.iconSize"
+        class="hide-menu"
+        :icon="item.icon"
+      />
     </template>
-    <v-list-item-title style="font-size: 14px;">{{ t(item.title) }}</v-list-item-title>
-    <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
+    <v-list-item-title style="font-size: 14px;">
+      {{ t(item.title) }}
+    </v-list-item-title>
+    <v-list-item-subtitle
+      v-if="item.subCaption"
+      class="text-caption mt-n1 hide-menu"
+    >
       {{ item.subCaption }}
     </v-list-item-subtitle>
-    <template v-slot:append v-if="item.chip">
-      <v-chip :color="item.chipColor" class="sidebarchip hide-menu" :size="item.chipIcon ? 'small' : 'default'"
-        :variant="item.chipVariant" :prepend-icon="item.chipIcon">
+    <template
+      v-if="item.chip"
+      #append
+    >
+      <v-chip
+        :color="item.chipColor"
+        class="sidebarchip hide-menu"
+        :size="item.chipIcon ? 'small' : 'default'"
+        :variant="item.chipVariant"
+        :prepend-icon="item.chipIcon"
+      >
         {{ item.chip }}
       </v-chip>
     </template>
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index a2ec91d37..8d2cbeca0 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -278,8 +278,8 @@ function openChangelogDialog() {
 
 <template>
   <v-navigation-drawer
-    left
     v-model="customizer.Sidebar_drawer"
+    left
     elevation="0"
     rail-width="80"
     app
@@ -288,37 +288,79 @@ function openChangelogDialog() {
     :rail="customizer.mini_sidebar"
   >
     <div class="sidebar-container">
-      <v-list :class="['pa-4', 'listitem', 'flex-grow-1', { 'hidden-scrollbar': customizer.mini_sidebar }]" v-model:opened="openedItems" :open-strategy="'multiple'">
-        <template v-for="(item, i) in sidebarMenu" :key="item.title || item.to || `sidebar-item-${i}`">
-          <NavItem :item="item" class="leftPadding" />
+      <v-list
+        v-model:opened="openedItems"
+        :class="['pa-4', 'listitem', 'flex-grow-1', { 'hidden-scrollbar': customizer.mini_sidebar }]"
+        :open-strategy="'multiple'"
+      >
+        <template
+          v-for="(item, i) in sidebarMenu"
+          :key="item.title || item.to || `sidebar-item-${i}`"
+        >
+          <NavItem
+            :item="item"
+            class="leftPadding"
+          />
         </template>
       </v-list>
-      <div class="sidebar-footer" v-if="!customizer.mini_sidebar">
-        <v-btn class="sidebar-footer-btn" size="small" variant="tonal" color="primary" to="/settings" prepend-icon="mdi-cog">
+      <div
+        v-if="!customizer.mini_sidebar"
+        class="sidebar-footer"
+      >
+        <v-btn
+          class="sidebar-footer-btn"
+          size="small"
+          variant="tonal"
+          color="primary"
+          to="/settings"
+          prepend-icon="mdi-cog"
+        >
           {{ t('core.navigation.settings') }}
         </v-btn>
-        <v-btn class="sidebar-footer-btn" size="small" variant="text" prepend-icon="mdi-note-text-outline"
-          @click="openChangelogDialog">
+        <v-btn
+          class="sidebar-footer-btn"
+          size="small"
+          variant="text"
+          prepend-icon="mdi-note-text-outline"
+          @click="openChangelogDialog"
+        >
           {{ t('core.navigation.changelog') }}
         </v-btn>
-        <v-btn class="sidebar-footer-btn" size="small" variant="text" prepend-icon="mdi-book-open-variant"
-          @click="toggleIframe">
+        <v-btn
+          class="sidebar-footer-btn"
+          size="small"
+          variant="text"
+          prepend-icon="mdi-book-open-variant"
+          @click="toggleIframe"
+        >
           {{ t('core.navigation.documentation') }}
         </v-btn>
-        <v-btn class="sidebar-footer-btn" size="small" variant="text" prepend-icon="mdi-frequently-asked-questions"
-          @click="openFaqLink">
+        <v-btn
+          class="sidebar-footer-btn"
+          size="small"
+          variant="text"
+          prepend-icon="mdi-frequently-asked-questions"
+          @click="openFaqLink"
+        >
           {{ t('core.navigation.faq') }}
         </v-btn>
-        <v-btn class="sidebar-footer-btn" size="small" variant="text" prepend-icon="mdi-github"
-          @click="openIframeLink('https://github.com/AstrBotDevs/AstrBot')">
+        <v-btn
+          class="sidebar-footer-btn"
+          size="small"
+          variant="text"
+          prepend-icon="mdi-github"
+          @click="openIframeLink('https://github.com/AstrBotDevs/AstrBot')"
+        >
           {{ t('core.navigation.github') }}
-           <v-chip
+          <v-chip
             v-if="starCount"
             size="x-small"
             variant="outlined"
             class="ml-2"
             style="font-weight: normal;"
-          >{{ formatNumber(starCount) }}</v-chip>
+          >
+            {{ formatNumber(starCount) }}
+          </v-chip>
         </v-btn>
       </div>
     </div>
@@ -326,10 +368,9 @@ function openChangelogDialog() {
     <div 
       v-if="!customizer.mini_sidebar && customizer.Sidebar_drawer"
       class="sidebar-resize-handle"
-      @mousedown="startSidebarResize"
       :class="{ 'resizing': isResizing }"
-    >
-    </div>
+      @mousedown="startSidebarResize"
+    />
   </v-navigation-drawer>
   
   <div
@@ -337,8 +378,11 @@ function openChangelogDialog() {
     id="draggable-iframe"
     :style="iframeStyle"
   >
-
-    <div :style="dragHeaderStyle" @mousedown="onMouseDown" @touchstart="onTouchStart">
+    <div
+      :style="dragHeaderStyle"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+    >
       <div style="display: flex; align-items: center;">
         <v-icon icon="mdi-cursor-move" />
         <span style="margin-left: 8px;">{{ t('core.navigation.drag') }}</span>
@@ -346,17 +390,17 @@ function openChangelogDialog() {
       <div style="display: flex; gap: 8px;">
         <v-btn
           icon
+          style="border-radius: 8px; border: 1px solid #ccc;"
           @click.stop="openIframeLink('https://astrbot.app')"
           @mousedown.stop
-          style="border-radius: 8px; border: 1px solid #ccc;"
         >
           <v-icon icon="mdi-open-in-new" />
         </v-btn>
         <v-btn
           icon
+          style="border-radius: 8px; border: 1px solid #ccc;"
           @click.stop="toggleIframe"
           @mousedown.stop
-          style="border-radius: 8px; border: 1px solid #ccc;"
         >
           <v-icon icon="mdi-close" />
         </v-btn>
@@ -365,7 +409,7 @@ function openChangelogDialog() {
     <iframe
       src="https://astrbot.app"
       style="width: 100%; height: calc(100% - 66px); border: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;"
-      ></iframe>
+    />
   </div>
 
   <!-- 更新日志对话框 -->
diff --git a/dashboard/src/main.ts b/dashboard/src/main.ts
index e7117d00e..79d5a2a44 100644
--- a/dashboard/src/main.ts
+++ b/dashboard/src/main.ts
@@ -118,7 +118,7 @@ async function initApp() {
     const headers = new Headers(
       init?.headers ||
         (typeof input !== "string" && "headers" in input
-          ? (input as Request).headers
+          ? (input ).headers
           : undefined),
     );
     if (token && !headers.has("Authorization")) {
diff --git a/dashboard/src/stores/auth.ts b/dashboard/src/stores/auth.ts
index d99c2df5c..308e0195c 100644
--- a/dashboard/src/stores/auth.ts
+++ b/dashboard/src/stores/auth.ts
@@ -5,7 +5,6 @@ import axios from 'axios';
 export const useAuthStore = defineStore({
   id: 'auth',
   state: () => ({
-    // @ts-ignore
     username: '',
     returnUrl: null
   }),
diff --git a/dashboard/src/stores/common.js b/dashboard/src/stores/common.js
index 1356fe165..83299a009 100644
--- a/dashboard/src/stores/common.js
+++ b/dashboard/src/stores/common.js
@@ -4,7 +4,6 @@ import axios from 'axios';
 export const useCommonStore = defineStore({
   id: 'common',
   state: () => ({
-    // @ts-ignore
     eventSource: null,
     log_cache: [],
     sse_connected: false,
@@ -141,7 +140,7 @@ export const useCommonStore = defineStore({
       if (this.startTime !== -1) {
         return this.startTime
       }
-      this.fetchStartTime().catch(() => {});
+      this.fetchStartTime().catch(() => undefined);
       return this.startTime
     },
     async getPluginCollections(force = false, customSource = null) {
diff --git a/dashboard/src/utils/pluginSearch.js b/dashboard/src/utils/pluginSearch.js
index fc83224f0..4fc4cfada 100644
--- a/dashboard/src/utils/pluginSearch.js
+++ b/dashboard/src/utils/pluginSearch.js
@@ -5,7 +5,11 @@ const HAN_IDEOGRAPH_RE = /\p{Unified_Ideograph}/u;
 export const normalizeStr = (s) => (s ?? "").toString().toLowerCase().trim();
 
 const normalizeLooseFromNormalized = (normalized) =>
-  normalized.replace(/[\s_-]+/g, "").replace(/[()（）【】\[\]{}·•]+/g, "");
+  normalized
+    .replace(/[\s_-]+/g, "")
+    .replace(/[()（）【】{}·•]/g, "")
+    .replace(/\[/g, "")
+    .replace(/\]/g, "");
 
 export const normalizeLoose = (s) =>
   normalizeLooseFromNormalized(normalizeStr(s));
diff --git a/dashboard/src/views/AboutPage.vue b/dashboard/src/views/AboutPage.vue
index b994c1d99..e70fb0d4e 100644
--- a/dashboard/src/views/AboutPage.vue
+++ b/dashboard/src/views/AboutPage.vue
@@ -1,23 +1,40 @@
 <template>
-    <div style="display: flex; flex-direction: column; height: 100%;">
-        <div style="flex-grow: 1; display: flex; align-items: center; justify-content: center; flex-direction: column;">
-            <div style="text-align: center; max-width: 600px;">
-                <h1 class="font-weight-bold">{{ tm('hero.title') }}</h1>
-                <p class="text-subtitle-1" style="color: var(--v-theme-secondaryText);">{{ tm('hero.subtitle') }}</p>
-                <div style="margin-top: 20px; display: flex; justify-content: center;">
-                    <v-btn @click="open('https://github.com/AstrBotDevs/AstrBot')" color="primary" variant="tonal" size="small"
-                        prepend-icon="mdi-star">
-                        {{ tm('hero.starButton') }}
-                    </v-btn>
-                    <v-btn class="ml-4" @click="open('https://github.com/AstrBotDevs/AstrBot/issues')" color="secondary" size="small"
-                        variant="tonal" prepend-icon="mdi-comment-question">
-                        {{ tm('hero.issueButton') }}
-                    </v-btn>
-                </div>
-            </div>
+  <div style="display: flex; flex-direction: column; height: 100%;">
+    <div style="flex-grow: 1; display: flex; align-items: center; justify-content: center; flex-direction: column;">
+      <div style="text-align: center; max-width: 600px;">
+        <h1 class="font-weight-bold">
+          {{ tm('hero.title') }}
+        </h1>
+        <p
+          class="text-subtitle-1"
+          style="color: var(--v-theme-secondaryText);"
+        >
+          {{ tm('hero.subtitle') }}
+        </p>
+        <div style="margin-top: 20px; display: flex; justify-content: center;">
+          <v-btn
+            color="primary"
+            variant="tonal"
+            size="small"
+            prepend-icon="mdi-star"
+            @click="open('https://github.com/AstrBotDevs/AstrBot')"
+          >
+            {{ tm('hero.starButton') }}
+          </v-btn>
+          <v-btn
+            class="ml-4"
+            color="secondary"
+            size="small"
+            variant="tonal"
+            prepend-icon="mdi-comment-question"
+            @click="open('https://github.com/AstrBotDevs/AstrBot/issues')"
+          >
+            {{ tm('hero.issueButton') }}
+          </v-btn>
         </div>
+      </div>
     </div>
-
+  </div>
 </template>
 
 <script>
diff --git a/dashboard/src/views/AlkaidPage.vue b/dashboard/src/views/AlkaidPage.vue
index c23cf1f37..e9e159b75 100644
--- a/dashboard/src/views/AlkaidPage.vue
+++ b/dashboard/src/views/AlkaidPage.vue
@@ -1,35 +1,66 @@
 <template>
   <v-card style="height: 100%; width: 100%;">
-    <v-card-text class="pa-4" style="height: 100%;">
-      <v-container fluid class="d-flex flex-column" style="height: 100%;">
+    <v-card-text
+      class="pa-4"
+      style="height: 100%;"
+    >
+      <v-container
+        fluid
+        class="d-flex flex-column"
+        style="height: 100%;"
+      >
         <div style="margin-bottom: 32px;">
-          <h1 class="gradient-text">{{ tm('page.title') }}</h1>
+          <h1 class="gradient-text">
+            {{ tm('page.title') }}
+          </h1>
           <small style="color: #a3a3a3;">{{ tm('page.subtitle') }}</small>
         </div>
 
         <div style="display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;">
-          <v-btn size="large" :variant="isActive('knowledge-base') ? 'flat' : 'tonal'"
-            :color="isActive('knowledge-base') ? '#9b72cb' : ''" rounded="lg"
-            @click="navigateTo('knowledge-base')">
-            <v-icon start>mdi-text-box-search</v-icon>
+          <v-btn
+            size="large"
+            :variant="isActive('knowledge-base') ? 'flat' : 'tonal'"
+            :color="isActive('knowledge-base') ? '#9b72cb' : ''"
+            rounded="lg"
+            @click="navigateTo('knowledge-base')"
+          >
+            <v-icon start>
+              mdi-text-box-search
+            </v-icon>
             {{ tm('page.navigation.knowledgeBase') }}
           </v-btn>
-          <v-btn size="large" :variant="isActive('long-term-memory') ? 'flat' : 'tonal'"
-            :color="isActive('long-term-memory') ? '#9b72cb' : ''" rounded="lg"
-            @click="navigateTo('long-term-memory')">
-            <v-icon start>mdi-dots-hexagon</v-icon>
+          <v-btn
+            size="large"
+            :variant="isActive('long-term-memory') ? 'flat' : 'tonal'"
+            :color="isActive('long-term-memory') ? '#9b72cb' : ''"
+            rounded="lg"
+            @click="navigateTo('long-term-memory')"
+          >
+            <v-icon start>
+              mdi-dots-hexagon
+            </v-icon>
             {{ tm('page.navigation.longTermMemory') }}
           </v-btn>
-          <v-btn size="large" :variant="isActive('other') ? 'flat' : 'tonal'"
-            :color="isActive('other') ? '#9b72cb' : ''" rounded="lg"
-            @click="navigateTo('other')">
-            <v-icon start>mdi-tools</v-icon>
+          <v-btn
+            size="large"
+            :variant="isActive('other') ? 'flat' : 'tonal'"
+            :color="isActive('other') ? '#9b72cb' : ''"
+            rounded="lg"
+            @click="navigateTo('other')"
+          >
+            <v-icon start>
+              mdi-tools
+            </v-icon>
             {{ tm('page.navigation.other') }}
           </v-btn>
         </div>
 
-        <div id="sub-view" class="flex-grow-1" style="max-height: 100%;">
-          <router-view></router-view>
+        <div
+          id="sub-view"
+          class="flex-grow-1"
+          style="max-height: 100%;"
+        >
+          <router-view />
         </div>
       </v-container>
     </v-card-text>
@@ -49,6 +80,12 @@ export default {
   data() {
     return {}
   },
+  mounted() {
+    // 如果在根路径 /alkaid，默认跳转到知识库页面
+    if (this.$route.path === '/alkaid') {
+      this.navigateTo('knowledge-base');
+    }
+  },
   methods: {
     navigateTo(tab) {
       try {
@@ -67,12 +104,6 @@ export default {
         return false;
       }
     }
-  },
-  mounted() {
-    // 如果在根路径 /alkaid，默认跳转到知识库页面
-    if (this.$route.path === '/alkaid') {
-      this.navigateTo('knowledge-base');
-    }
   }
 }
 </script>
diff --git a/dashboard/src/views/ChatBoxPage.vue b/dashboard/src/views/ChatBoxPage.vue
index 940b52dce..6269fb637 100644
--- a/dashboard/src/views/ChatBoxPage.vue
+++ b/dashboard/src/views/ChatBoxPage.vue
@@ -5,14 +5,18 @@ const customizer = useCustomizerStore();
 </script>
 
 <template>
-    <v-app :theme="customizer.uiTheme" style="height: 100%; width: 100%;">
-        <div
-            style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
-            <div id="container">
-                <Chat :chatbox-mode="true"></Chat>
-            </div>
-        </div>
-    </v-app>
+  <v-app
+    :theme="customizer.uiTheme"
+    style="height: 100%; width: 100%;"
+  >
+    <div
+      style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;"
+    >
+      <div id="container">
+        <Chat :chatbox-mode="true" />
+      </div>
+    </div>
+  </v-app>
 </template>
 
 <style scoped>
diff --git a/dashboard/src/views/ChatPage.vue b/dashboard/src/views/ChatPage.vue
index b6f5e3fbd..e81233755 100644
--- a/dashboard/src/views/ChatPage.vue
+++ b/dashboard/src/views/ChatPage.vue
@@ -3,9 +3,9 @@ import Chat from '@/components/chat/Chat.vue'
 </script>
 
 <template>
-    <div class="chat-container">
-        <Chat />
-    </div>
+  <div class="chat-container">
+    <Chat />
+  </div>
 </template>
 
 <style scoped>
diff --git a/dashboard/src/views/ConfigPage.vue b/dashboard/src/views/ConfigPage.vue
index 0ecc2a41d..639263698 100644
--- a/dashboard/src/views/ConfigPage.vue
+++ b/dashboard/src/views/ConfigPage.vue
@@ -1,20 +1,37 @@
 <template>
-
   <div style="display: flex; flex-direction: column; align-items: center;">
-    <div v-if="selectedConfigID || isSystemConfig" class="mt-4 config-panel"
-      style="display: flex; flex-direction: column; align-items: start;">
-
-      <div class="config-toolbar d-flex flex-row pr-4"
-        style="margin-bottom: 16px; align-items: center; gap: 12px; width: 100%; justify-content: space-between;">
-        <div class="config-toolbar-controls d-flex flex-row align-center" style="gap: 12px;">
-          <v-select class="config-select" style="min-width: 130px;" :model-value="selectedConfigID" :items="configSelectItems" item-title="name" :disabled="initialConfigId !== null"
-            v-if="!isSystemConfig" item-value="id" :label="tm('configSelection.selectConfig')" hide-details density="compact" rounded="md"
-            variant="outlined" @update:model-value="onConfigSelect">
-          </v-select>
+    <div
+      v-if="selectedConfigID || isSystemConfig"
+      class="mt-4 config-panel"
+      style="display: flex; flex-direction: column; align-items: start;"
+    >
+      <div
+        class="config-toolbar d-flex flex-row pr-4"
+        style="margin-bottom: 16px; align-items: center; gap: 12px; width: 100%; justify-content: space-between;"
+      >
+        <div
+          class="config-toolbar-controls d-flex flex-row align-center"
+          style="gap: 12px;"
+        >
+          <v-select
+            v-if="!isSystemConfig"
+            class="config-select"
+            style="min-width: 130px;"
+            :model-value="selectedConfigID"
+            :items="configSelectItems"
+            item-title="name"
+            :disabled="initialConfigId !== null"
+            item-value="id"
+            :label="tm('configSelection.selectConfig')"
+            hide-details
+            density="compact"
+            rounded="md"
+            variant="outlined"
+            @update:model-value="onConfigSelect"
+          />
           <v-text-field
             class="config-search-input"
             :model-value="configSearchKeyword"
-            @update:model-value="onConfigSearchInput"
             prepend-inner-icon="mdi-magnify"
             :label="tm('search.placeholder')"
             clearable
@@ -23,13 +40,16 @@
             rounded="md"
             variant="outlined"
             style="min-width: 280px;"
+            @update:model-value="onConfigSearchInput"
           />
           <!-- <a style="color: inherit;" href="https://blog.astrbot.app/posts/what-is-changed-in-4.0.0/#%E5%A4%9A%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" target="_blank"><v-btn icon="mdi-help-circle" size="small" variant="plain"></v-btn></a> -->
-
         </div>
       </div>
       <v-slide-y-transition>
-        <div v-if="fetched && hasUnsavedChanges" class="unsaved-changes-banner-wrap">
+        <div
+          v-if="fetched && hasUnsavedChanges"
+          class="unsaved-changes-banner-wrap"
+        >
           <v-banner
             icon="$warning"
             lines="one"
@@ -42,7 +62,12 @@
       <!-- <v-progress-linear v-if="!fetched" indeterminate color="primary"></v-progress-linear> -->
 
       <v-slide-y-transition mode="out-in">
-        <div v-if="(selectedConfigID || isSystemConfig) && fetched" :key="configContentKey" class="config-content" style="width: 100%;">
+        <div
+          v-if="(selectedConfigID || isSystemConfig) && fetched"
+          :key="configContentKey"
+          class="config-content"
+          style="width: 100%;"
+        >
           <!-- 可视化编辑 -->
           <AstrBotCoreConfigWrapper 
             :metadata="metadata" 
@@ -50,108 +75,210 @@
             :search-keyword="configSearchKeyword"
           />
 
-          <v-tooltip :text="tm('actions.save')" location="left">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-content-save" size="x-large" style="position: fixed; right: 52px; bottom: 52px;"
-                color="darkprimary" @click="updateConfig">
-              </v-btn>
+          <v-tooltip
+            :text="tm('actions.save')"
+            location="left"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon="mdi-content-save"
+                size="x-large"
+                style="position: fixed; right: 52px; bottom: 52px;"
+                color="darkprimary"
+                @click="updateConfig"
+              />
             </template>
           </v-tooltip>
 
-          <v-tooltip :text="tm('codeEditor.title')" location="left">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-code-json" size="x-large" style="position: fixed; right: 52px; bottom: 124px;" color="primary"
-                @click="configToString(); codeEditorDialog = true">
-              </v-btn>
+          <v-tooltip
+            :text="tm('codeEditor.title')"
+            location="left"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon="mdi-code-json"
+                size="x-large"
+                style="position: fixed; right: 52px; bottom: 124px;"
+                color="primary"
+                @click="configToString(); codeEditorDialog = true"
+              />
             </template>
           </v-tooltip>
 
-          <v-tooltip text="测试当前配置" location="left" v-if="!isSystemConfig">
-            <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" icon="mdi-chat-processing" size="x-large" 
-                style="position: fixed; right: 52px; bottom: 196px;" color="secondary"
-                @click="openTestChat">
-              </v-btn>
+          <v-tooltip
+            v-if="!isSystemConfig"
+            text="测试当前配置"
+            location="left"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon="mdi-chat-processing"
+                size="x-large" 
+                style="position: fixed; right: 52px; bottom: 196px;"
+                color="secondary"
+                @click="openTestChat"
+              />
             </template>
           </v-tooltip>
-
         </div>
       </v-slide-y-transition>
-
     </div>
   </div>
 
 
   <!-- Full Screen Editor Dialog -->
-  <v-dialog v-model="codeEditorDialog" fullscreen transition="dialog-bottom-transition" scrollable>
+  <v-dialog
+    v-model="codeEditorDialog"
+    fullscreen
+    transition="dialog-bottom-transition"
+    scrollable
+  >
     <v-card>
-      <v-toolbar color="primary" dark>
-        <v-btn icon @click="codeEditorDialog = false">
+      <v-toolbar
+        color="primary"
+        dark
+      >
+        <v-btn
+          icon
+          @click="codeEditorDialog = false"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
         <v-toolbar-title>{{ tm('codeEditor.title') }}</v-toolbar-title>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-toolbar-items style="display: flex; align-items: center;">
-          <v-btn style="margin-left: 16px;" size="small" @click="configToString()">{{
-            tm('editor.revertCode') }}</v-btn>
-          <v-btn v-if="config_data_has_changed" style="margin-left: 16px;" size="small" @click="applyStrConfig()">{{
-            tm('editor.applyConfig') }}</v-btn>
+          <v-btn
+            style="margin-left: 16px;"
+            size="small"
+            @click="configToString()"
+          >
+            {{
+              tm('editor.revertCode') }}
+          </v-btn>
+          <v-btn
+            v-if="config_data_has_changed"
+            style="margin-left: 16px;"
+            size="small"
+            @click="applyStrConfig()"
+          >
+            {{
+              tm('editor.applyConfig') }}
+          </v-btn>
           <small style="margin-left: 16px;">💡 {{ tm('editor.applyTip') }}</small>
         </v-toolbar-items>
       </v-toolbar>
       <v-card-text class="pa-0">
-        <VueMonacoEditor language="json" theme="vs-dark" style="height: calc(100vh - 64px);"
-          v-model:value="config_data_str">
-        </VueMonacoEditor>
+        <VueMonacoEditor
+          v-model:value="config_data_str"
+          language="json"
+          theme="vs-dark"
+          style="height: calc(100vh - 64px);"
+        />
       </v-card-text>
     </v-card>
   </v-dialog>
 
   <!-- Config Management Dialog -->
-  <v-dialog v-model="configManageDialog" max-width="800px">
+  <v-dialog
+    v-model="configManageDialog"
+    max-width="800px"
+  >
     <v-card>
       <v-card-title class="d-flex align-center justify-space-between">
         <span class="text-h4">{{ tm('configManagement.title') }}</span>
-        <v-btn icon="mdi-close" variant="text" @click="configManageDialog = false"></v-btn>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          @click="configManageDialog = false"
+        />
       </v-card-title>
 
       <v-card-text>
         <small>{{ tm('configManagement.description') }}</small>
         <div class="mt-6 mb-4">
-          <v-btn prepend-icon="mdi-plus" @click="startCreateConfig" variant="tonal" color="primary">
+          <v-btn
+            prepend-icon="mdi-plus"
+            variant="tonal"
+            color="primary"
+            @click="startCreateConfig"
+          >
             {{ tm('configManagement.newConfig') }}
           </v-btn>
         </div>
 
         <!-- Config List -->
         <v-list lines="two">
-          <v-list-item v-for="config in configInfoList" :key="config.id" :title="config.name">
-            <template v-slot:append v-if="config.id !== 'default'">
-              <div class="d-flex align-center" style="gap: 8px;">
-                <v-btn icon="mdi-pencil" size="small" variant="text" color="warning"
-                  @click="startEditConfig(config)"></v-btn>
-                <v-btn icon="mdi-delete" size="small" variant="text" color="error"
-                  @click="confirmDeleteConfig(config)"></v-btn>
+          <v-list-item
+            v-for="config in configInfoList"
+            :key="config.id"
+            :title="config.name"
+          >
+            <template
+              v-if="config.id !== 'default'"
+              #append
+            >
+              <div
+                class="d-flex align-center"
+                style="gap: 8px;"
+              >
+                <v-btn
+                  icon="mdi-pencil"
+                  size="small"
+                  variant="text"
+                  color="warning"
+                  @click="startEditConfig(config)"
+                />
+                <v-btn
+                  icon="mdi-delete"
+                  size="small"
+                  variant="text"
+                  color="error"
+                  @click="confirmDeleteConfig(config)"
+                />
               </div>
             </template>
           </v-list-item>
         </v-list>
 
         <!-- Create/Edit Form -->
-        <v-divider v-if="showConfigForm" class="my-6"></v-divider>
+        <v-divider
+          v-if="showConfigForm"
+          class="my-6"
+        />
 
         <div v-if="showConfigForm">
-          <h3 class="mb-4">{{ isEditingConfig ? tm('configManagement.editConfig') : tm('configManagement.newConfig') }}</h3>
+          <h3 class="mb-4">
+            {{ isEditingConfig ? tm('configManagement.editConfig') : tm('configManagement.newConfig') }}
+          </h3>
 
           <h4>{{ tm('configManagement.configName') }}</h4>
 
-          <v-text-field v-model="configFormData.name" :label="tm('configManagement.fillConfigName')" variant="outlined" class="mt-4 mb-4"
-            hide-details></v-text-field>
+          <v-text-field
+            v-model="configFormData.name"
+            :label="tm('configManagement.fillConfigName')"
+            variant="outlined"
+            class="mt-4 mb-4"
+            hide-details
+          />
 
-          <div class="d-flex justify-end mt-4" style="gap: 8px;">
-            <v-btn variant="text" @click="cancelConfigForm">{{ tm('buttons.cancel') }}</v-btn>
-            <v-btn color="primary" @click="saveConfigForm"
-              :disabled="!configFormData.name">
+          <div
+            class="d-flex justify-end mt-4"
+            style="gap: 8px;"
+          >
+            <v-btn
+              variant="text"
+              @click="cancelConfigForm"
+            >
+              {{ tm('buttons.cancel') }}
+            </v-btn>
+            <v-btn
+              color="primary"
+              :disabled="!configFormData.name"
+              @click="saveConfigForm"
+            >
               {{ isEditingConfig ? tm('buttons.update') : tm('buttons.create') }}
             </v-btn>
           </div>
@@ -160,11 +287,16 @@
     </v-card>
   </v-dialog>
 
-  <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack">
+  <v-snackbar
+    v-model="save_message_snack"
+    :timeout="3000"
+    elevation="24"
+    :color="save_message_success"
+  >
     {{ save_message }}
   </v-snackbar>
 
-  <WaitingForRestart ref="wfr"></WaitingForRestart>
+  <WaitingForRestart ref="wfr" />
 
   <!-- 测试聊天抽屉 -->
   <v-overlay
@@ -175,28 +307,40 @@
     :scrim="true"
     @click:outside="closeTestChat"
   >
-    <v-card class="test-chat-card" elevation="12">
+    <v-card
+      class="test-chat-card"
+      elevation="12"
+    >
       <div class="test-chat-header">
         <div>
           <span class="text-h6">测试配置</span>
-          <div v-if="selectedConfigInfo.name" class="text-caption text-grey">
+          <div
+            v-if="selectedConfigInfo.name"
+            class="text-caption text-grey"
+          >
             {{ selectedConfigInfo.name }} ({{ testConfigId }})
           </div>
         </div>
-        <v-btn icon variant="text" @click="closeTestChat">
+        <v-btn
+          icon
+          variant="text"
+          @click="closeTestChat"
+        >
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </div>
-      <v-divider></v-divider>
+      <v-divider />
       <div class="test-chat-content">
-        <StandaloneChat v-if="testChatDrawer" :configId="testConfigId" />
+        <StandaloneChat
+          v-if="testChatDrawer"
+          :config-id="testConfigId"
+        />
       </div>
     </v-card>
   </v-overlay>
 
   <!-- 未保存更改确认弹窗 -->
   <UnsavedChangesConfirmDialog ref="unsavedChangesDialog" />
-
 </template>
 
 
@@ -224,23 +368,6 @@ export default {
     StandaloneChat,
     UnsavedChangesConfirmDialog
   },
-  props: {
-    initialConfigId: {
-      type: String,
-      default: null
-    }
-  },
-  setup() {
-    const { t } = useI18n();
-    const { tm } = useModuleI18n('features/config');
-    const confirmDialog = useConfirmDialog();
-
-    return {
-      t,
-      tm,
-      confirmDialog
-    };
-  },
 
 // 检查未保存的更改
   async beforeRouteLeave(to, from, next) {
@@ -275,67 +402,22 @@ export default {
       next();
     }
   },
-
-  computed: {
-    messages() {
-      return {
-        loadError: this.tm('messages.loadError'),
-        saveSuccess: this.tm('messages.saveSuccess'),
-        saveError: this.tm('messages.saveError'),
-        configApplied: this.tm('messages.configApplied'),
-        configApplyError: this.tm('messages.configApplyError')
-      };
-    },
-    // 检查配置是否变化
-    configHasChanges() {
-      if (!this.originalConfigData || !this.config_data) return false;
-      return JSON.stringify(this.originalConfigData) !== JSON.stringify(this.config_data);
-    },
-    configInfoNameList() {
-      return this.configInfoList.map(info => info.name);
-    },
-    selectedConfigInfo() {
-      return this.configInfoList.find(info => info.id === this.selectedConfigID) || {};
-    },
-    configSelectItems() {
-      const items = [...this.configInfoList];
-      items.push({
-        id: '_%manage%_',
-        name: this.tm('configManagement.manageConfigs'),
-        umop: []
-      });
-      return items;
-    },
-    hasUnsavedChanges() {
-      if (!this.fetched) {
-        return false;
-      }
-      return this.getConfigSnapshot(this.config_data) !== this.lastSavedConfigSnapshot;
+  props: {
+    initialConfigId: {
+      type: String,
+      default: null
     }
   },
-  watch: {
-    config_data_str(val) {
-      this.config_data_has_changed = true;
-    },
-    config_data: {
-      deep: true,
-      handler() {
-        if (this.fetched) {
-          this.hasUnsavedChanges = this.configHasChanges;
-        }
-      }
-    },
-    async '$route.fullPath'(newVal) {
-      await this.syncConfigTypeFromHash(newVal);
-    },
-    initialConfigId(newVal) {
-      if (!newVal) {
-        return;
-      }
-      if (this.selectedConfigID !== newVal) {
-        this.getConfigInfoList(newVal);
-      }
-    }
+  setup() {
+    const { t } = useI18n();
+    const { tm } = useModuleI18n('features/config');
+    const confirmDialog = useConfirmDialog();
+
+    return {
+      t,
+      tm,
+      confirmDialog
+    };
   },
   data() {
     return {
@@ -377,11 +459,58 @@ export default {
       testConfigId: null,
 
       // 未保存的更改状态
-      hasUnsavedChanges: false,
       // 存储原始配置
       originalConfigData: null,
     }
   },
+
+  computed: {
+    messages() {
+      return {
+        loadError: this.tm('messages.loadError'),
+        saveSuccess: this.tm('messages.saveSuccess'),
+        saveError: this.tm('messages.saveError'),
+        configApplied: this.tm('messages.configApplied'),
+        configApplyError: this.tm('messages.configApplyError')
+      };
+    },
+    // 检查配置是否变化
+    configHasChanges() {
+      if (!this.originalConfigData || !this.config_data) return false;
+      return JSON.stringify(this.originalConfigData) !== JSON.stringify(this.config_data);
+    },
+    configInfoNameList() {
+      return this.configInfoList.map(info => info.name);
+    },
+    selectedConfigInfo() {
+      return this.configInfoList.find(info => info.id === this.selectedConfigID) || {};
+    },
+    configSelectItems() {
+      const items = [...this.configInfoList];
+      items.push({
+        id: '_%manage%_',
+        name: this.tm('configManagement.manageConfigs'),
+        umop: []
+      });
+      return items;
+    },
+  },
+  watch: {
+    config_data_str(val) {
+      this.config_data_has_changed = true;
+    },
+    async '$route.fullPath'(newVal) {
+      await this.syncConfigTypeFromHash(newVal);
+    },
+    initialConfigId(newVal) {
+      if (!newVal) {
+        return;
+      }
+      if (this.selectedConfigID !== newVal) {
+        this.getConfigInfoList(newVal);
+      }
+    }
+  },
   mounted() {
     const hashConfigType = this.extractConfigTypeFromHash(
       this.$route?.fullPath || ''
@@ -420,8 +549,6 @@ export default {
       }
     },
 
-  },
-  methods: {
     onConfigSearchInput(value) {
       this.configSearchKeyword = normalizeTextInput(value);
     },
@@ -495,7 +622,6 @@ export default {
         // 获取配置后更新
           this.$nextTick(() => {
             this.originalConfigData = JSON.parse(JSON.stringify(this.config_data));
-            this.hasUnsavedChanges = false;
             if (!this.isSystemConfig) {
               this.currentConfigId = abconf_id || this.selectedConfigID;
             }
@@ -528,7 +654,7 @@ export default {
           this.onConfigSaved();
 
           if (this.isSystemConfig) {
-            restartAstrBotRuntime(this.$refs.wfr).catch(() => {})
+            restartAstrBotRuntime(this.$refs.wfr).catch(() => undefined)
           }
           return { success: true };
         } else {
@@ -546,7 +672,6 @@ export default {
     },
     // 重置未保存状态
     onConfigSaved() {
-      this.hasUnsavedChanges = false;
       this.originalConfigData = JSON.parse(JSON.stringify(this.config_data));
     },
 
diff --git a/dashboard/src/views/ConsolePage.vue b/dashboard/src/views/ConsolePage.vue
index b4c813f49..36f0eedea 100644
--- a/dashboard/src/views/ConsolePage.vue
+++ b/dashboard/src/views/ConsolePage.vue
@@ -9,7 +9,8 @@ const { tm } = useModuleI18n('features/console');
 <template>
   <div style="height: 100%;">
     <div
-      style="background-color: var(--v-theme-surface); padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
+      style="background-color: var(--v-theme-surface); padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;"
+    >
       <div>
         <h4>{{ tm('title') }}</h4>
         <v-alert
@@ -30,27 +31,47 @@ const { tm } = useModuleI18n('features/console');
           density="compact"
           color="primary"
           style="margin-right: 16px;"
-        ></v-switch>
-        <v-dialog v-model="pipDialog" width="400">
-          <template v-slot:activator="{ props }">
-            <v-btn variant="plain" v-bind="props">{{ tm('pipInstall.button') }}</v-btn>
+        />
+        <v-dialog
+          v-model="pipDialog"
+          width="400"
+        >
+          <template #activator="{ props }">
+            <v-btn
+              variant="plain"
+              v-bind="props"
+            >
+              {{ tm('pipInstall.button') }}
+            </v-btn>
           </template>
           <v-card>
             <v-card-title>
               <span class="text-h5">{{ tm('pipInstall.dialogTitle') }}</span>
             </v-card-title>
             <v-card-text>
-              <v-text-field v-model="pipInstallPayload.package" :label="tm('pipInstall.packageLabel')" variant="outlined"></v-text-field>
-              <v-text-field v-model="pipInstallPayload.mirror" :label="tm('pipInstall.mirrorLabel')" variant="outlined"></v-text-field>
+              <v-text-field
+                v-model="pipInstallPayload.package"
+                :label="tm('pipInstall.packageLabel')"
+                variant="outlined"
+              />
+              <v-text-field
+                v-model="pipInstallPayload.mirror"
+                :label="tm('pipInstall.mirrorLabel')"
+                variant="outlined"
+              />
               <small>{{ tm('pipInstall.mirrorHint') }}</small>
               <div>
                 <small>{{ status }}</small>
               </div>
-              
             </v-card-text>
             <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn color="blue-darken-1" variant="text" @click="pipInstall" :loading="loading">
+              <v-spacer />
+              <v-btn
+                color="blue-darken-1"
+                variant="text"
+                :loading="loading"
+                @click="pipInstall"
+              >
                 {{ tm('pipInstall.installButton') }}
               </v-btn>
             </v-card-actions>
@@ -58,7 +79,10 @@ const { tm } = useModuleI18n('features/console');
         </v-dialog>
       </div>
     </div>
-    <ConsoleDisplayer ref="consoleDisplayer" style="height: calc(100vh - 220px); " />
+    <ConsoleDisplayer
+      ref="consoleDisplayer"
+      style="height: calc(100vh - 220px); "
+    />
   </div>
 </template>
 <script>
diff --git a/dashboard/src/views/ConversationPage.vue b/dashboard/src/views/ConversationPage.vue
index 9a4623aba..6c0cf8686 100644
--- a/dashboard/src/views/ConversationPage.vue
+++ b/dashboard/src/views/ConversationPage.vue
@@ -1,328 +1,591 @@
 <template>
-    <div class="conversation-page">
-        <v-container fluid class="pa-0">
-            <!-- 对话列表部分 -->
-            <v-card flat>
-                <v-card-title class="d-flex align-center py-3 px-4">
-                    <span class="text-h4">{{ tm('history.title') }}</span>
-                    <v-chip size="small" class="ml-2">{{ pagination.total || 0 }}</v-chip>
-                    <v-row class="me-4 ms-4" dense>
-                        <v-col cols="12" sm="6" md="4">
-                            <v-combobox v-model="platformFilter" :label="tm('filters.platform')"
-                                :items="availablePlatforms" chips multiple clearable variant="solo-filled" flat
-                                density="compact" hide-details>
-                                <template v-slot:selection="{ item }">
-                                    <v-chip size="small" label>
-                                        {{ item.title }}
-                                    </v-chip>
-                                </template>
-                            </v-combobox>
-                        </v-col>
+  <div class="conversation-page">
+    <v-container
+      fluid
+      class="pa-0"
+    >
+      <!-- 对话列表部分 -->
+      <v-card flat>
+        <v-card-title class="d-flex align-center py-3 px-4">
+          <span class="text-h4">{{ tm('history.title') }}</span>
+          <v-chip
+            size="small"
+            class="ml-2"
+          >
+            {{ pagination.total || 0 }}
+          </v-chip>
+          <v-row
+            class="me-4 ms-4"
+            dense
+          >
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-combobox
+                v-model="platformFilter"
+                :label="tm('filters.platform')"
+                :items="availablePlatforms"
+                chips
+                multiple
+                clearable
+                variant="solo-filled"
+                flat
+                density="compact"
+                hide-details
+              >
+                <template #selection="{ item }">
+                  <v-chip
+                    size="small"
+                    label
+                  >
+                    {{ item.title }}
+                  </v-chip>
+                </template>
+              </v-combobox>
+            </v-col>
 
-                        <v-col cols="12" sm="6" md="4">
-                            <v-select v-model="messageTypeFilter" :label="tm('filters.type')" :items="messageTypeItems"
-                                chips multiple clearable variant="solo-filled" density="compact" hide-details flat>
-                                <template v-slot:selection="{ item }">
-                                    <v-chip size="small" variant="solo-filled" label>
-                                        {{ item.title }}
-                                    </v-chip>
-                                </template>
-                            </v-select>
-                        </v-col>
+            <v-col
+              cols="12"
+              sm="6"
+              md="4"
+            >
+              <v-select
+                v-model="messageTypeFilter"
+                :label="tm('filters.type')"
+                :items="messageTypeItems"
+                chips
+                multiple
+                clearable
+                variant="solo-filled"
+                density="compact"
+                hide-details
+                flat
+              >
+                <template #selection="{ item }">
+                  <v-chip
+                    size="small"
+                    variant="solo-filled"
+                    label
+                  >
+                    {{ item.title }}
+                  </v-chip>
+                </template>
+              </v-select>
+            </v-col>
 
-                        <v-col cols="12" sm="12" md="4">
-                            <v-text-field v-model="search" prepend-inner-icon="mdi-magnify"
-                                :label="tm('filters.search')" hide-details density="compact" variant="solo-filled" flat
-                                clearable></v-text-field>
-                        </v-col>
-                    </v-row>
-                    <v-btn color="primary" prepend-icon="mdi-refresh" variant="tonal" @click="fetchConversations"
-                        :loading="loading" size="small" class="mr-2">
-                        {{ tm('history.refresh') }}
-                    </v-btn>
-                    <v-btn 
-                        v-if="selectedItems.length > 0" 
-                        color="success" 
-                        prepend-icon="mdi-download"
-                        variant="tonal" 
-                        @click="exportConversations" 
-                        :disabled="loading"
-                        size="small"
-                        class="mr-2">
-                        {{ tm('batch.exportSelected', { count: selectedItems.length }) }}
-                    </v-btn>
-                    <v-btn 
-                        v-if="selectedItems.length > 0" 
-                        color="error" 
-                        prepend-icon="mdi-delete"
-                        variant="tonal" 
-                        @click="confirmBatchDelete" 
-                        :disabled="loading"
-                        size="small">
-                        {{ tm('batch.deleteSelected', { count: selectedItems.length }) }}
-                    </v-btn>
-                </v-card-title>
+            <v-col
+              cols="12"
+              sm="12"
+              md="4"
+            >
+              <v-text-field
+                v-model="search"
+                prepend-inner-icon="mdi-magnify"
+                :label="tm('filters.search')"
+                hide-details
+                density="compact"
+                variant="solo-filled"
+                flat
+                clearable
+              />
+            </v-col>
+          </v-row>
+          <v-btn
+            color="primary"
+            prepend-icon="mdi-refresh"
+            variant="tonal"
+            :loading="loading"
+            size="small"
+            class="mr-2"
+            @click="fetchConversations"
+          >
+            {{ tm('history.refresh') }}
+          </v-btn>
+          <v-btn 
+            v-if="selectedItems.length > 0" 
+            color="success" 
+            prepend-icon="mdi-download"
+            variant="tonal" 
+            :disabled="loading" 
+            size="small"
+            class="mr-2"
+            @click="exportConversations"
+          >
+            {{ tm('batch.exportSelected', { count: selectedItems.length }) }}
+          </v-btn>
+          <v-btn 
+            v-if="selectedItems.length > 0" 
+            color="error" 
+            prepend-icon="mdi-delete"
+            variant="tonal" 
+            :disabled="loading" 
+            size="small"
+            @click="confirmBatchDelete"
+          >
+            {{ tm('batch.deleteSelected', { count: selectedItems.length }) }}
+          </v-btn>
+        </v-card-title>
 
-                <v-divider></v-divider>
+        <v-divider />
 
-                <v-card-text class="pa-0">
-                    <v-data-table v-model="selectedItems" :headers="tableHeaders" :items="conversations"
-                        :loading="loading" style="font-size: 12px;" density="comfortable" hide-default-footer
-                        class="elevation-0" :items-per-page="pagination.page_size"
-                        :items-per-page-options="pageSizeOptions" show-select return-object
-                        :disabled="loading" @update:options="handleTableOptions">
-                        <template v-slot:item.title="{ item }">
-                            <div class="d-flex align-center">
-                                <span>{{ item.title || tm('status.noTitle') }}</span>
-                            </div>
-                        </template>
+        <v-card-text class="pa-0">
+          <v-data-table
+            v-model="selectedItems"
+            :headers="tableHeaders"
+            :items="conversations"
+            :loading="loading"
+            style="font-size: 12px;"
+            density="comfortable"
+            hide-default-footer
+            class="elevation-0"
+            :items-per-page="pagination.page_size"
+            :items-per-page-options="pageSizeOptions"
+            show-select
+            return-object
+            :disabled="loading"
+            @update:options="handleTableOptions"
+          >
+            <template #item.title="{ item }">
+              <div class="d-flex align-center">
+                <span>{{ item.title || tm('status.noTitle') }}</span>
+              </div>
+            </template>
 
-                        <template v-slot:item.platform="{ item }">
-                            <v-chip size="small" label>
-                                {{ item.sessionInfo.platform || tm('status.unknown') }}
-                            </v-chip>
-                        </template>
+            <template #item.platform="{ item }">
+              <v-chip
+                size="small"
+                label
+              >
+                {{ item.sessionInfo.platform || tm('status.unknown') }}
+              </v-chip>
+            </template>
 
-                        <template v-slot:item.messageType="{ item }">
-                            <v-chip size="small" label>
-                                {{ getMessageTypeDisplay(item.sessionInfo.messageType) }}
-                            </v-chip>
-                        </template>
+            <template #item.messageType="{ item }">
+              <v-chip
+                size="small"
+                label
+              >
+                {{ getMessageTypeDisplay(item.sessionInfo.messageType) }}
+              </v-chip>
+            </template>
 
-                        <template v-slot:item.cid="{ item }">
-                            <span class="text-truncate">{{ item.cid || tm('status.unknown') }}</span>
-                        </template>
+            <template #item.cid="{ item }">
+              <span class="text-truncate">{{ item.cid || tm('status.unknown') }}</span>
+            </template>
 
-                        <template v-slot:item.sessionId="{ item }">
-                            <span>{{ item.sessionInfo.sessionId || tm('status.unknown') }}</span>
-                        </template>
+            <template #item.sessionId="{ item }">
+              <span>{{ item.sessionInfo.sessionId || tm('status.unknown') }}</span>
+            </template>
 
-                        <template v-slot:item.created_at="{ item }">
-                            {{ formatTimestamp(item.created_at) }}
-                        </template>
+            <template #item.created_at="{ item }">
+              {{ formatTimestamp(item.created_at) }}
+            </template>
 
-                        <template v-slot:item.updated_at="{ item }">
-                            {{ formatTimestamp(item.updated_at) }}
-                        </template>
+            <template #item.updated_at="{ item }">
+              {{ formatTimestamp(item.updated_at) }}
+            </template>
 
-                        <template v-slot:item.actions="{ item }">
-                            <div class="actions-wrapper">
-                                <v-btn icon variant="plain" size="x-small" class="action-button"
-                                    @click="viewConversation(item)" :disabled="loading">
-                                    <v-icon>mdi-eye</v-icon>
-                                </v-btn>
-                                <v-btn icon variant="plain" size="x-small" class="action-button"
-                                    @click="editConversation(item)" :disabled="loading">
-                                    <v-icon>mdi-pencil</v-icon>
-                                </v-btn>
-                                <v-btn icon color="error" variant="plain" size="x-small" class="action-button"
-                                    @click="confirmDeleteConversation(item)" :disabled="loading">
-                                    <v-icon>mdi-delete</v-icon>
-                                </v-btn>
-                            </div>
-                        </template>
+            <template #item.actions="{ item }">
+              <div class="actions-wrapper">
+                <v-btn
+                  icon
+                  variant="plain"
+                  size="x-small"
+                  class="action-button"
+                  :disabled="loading"
+                  @click="viewConversation(item)"
+                >
+                  <v-icon>mdi-eye</v-icon>
+                </v-btn>
+                <v-btn
+                  icon
+                  variant="plain"
+                  size="x-small"
+                  class="action-button"
+                  :disabled="loading"
+                  @click="editConversation(item)"
+                >
+                  <v-icon>mdi-pencil</v-icon>
+                </v-btn>
+                <v-btn
+                  icon
+                  color="error"
+                  variant="plain"
+                  size="x-small"
+                  class="action-button"
+                  :disabled="loading"
+                  @click="confirmDeleteConversation(item)"
+                >
+                  <v-icon>mdi-delete</v-icon>
+                </v-btn>
+              </div>
+            </template>
 
-                        <template v-slot:no-data>
-                            <div class="d-flex flex-column align-center py-6">
-                                <v-icon size="64" color="grey lighten-1">mdi-chat-remove</v-icon>
-                                <span class="text-subtitle-1 text-disabled mt-3">{{ tm('status.noData') }}</span>
-                            </div>
-                        </template>
-                    </v-data-table>
+            <template #no-data>
+              <div class="d-flex flex-column align-center py-6">
+                <v-icon
+                  size="64"
+                  color="grey lighten-1"
+                >
+                  mdi-chat-remove
+                </v-icon>
+                <span class="text-subtitle-1 text-disabled mt-3">{{ tm('status.noData') }}</span>
+              </div>
+            </template>
+          </v-data-table>
 
-                    <!-- 分页控制 -->
-                    <div class="d-flex justify-center py-3">
-                        <!-- 每页大小选择器 -->
-                        <div class="d-flex justify-between align-center px-4 py-2 bg-grey-lighten-5">
-                            <div class="d-flex align-center">
-                                <span class="text-caption mr-2">{{ tm('pagination.itemsPerPage') }}:</span>
-                                <v-select v-model="pagination.page_size" :items="pageSizeOptions" variant="outlined"
-                                    density="compact" hide-details style="max-width: 100px;"
-                                    :disabled="loading" @update:model-value="onPageSizeChange"></v-select>
-                            </div>
-                            <div class="text-caption ml-4">
-                                {{ tm('pagination.showingItems', {
-                                    start: Math.min((pagination.page - 1) * pagination.page_size + 1, pagination.total),
-                                    end: Math.min(pagination.page * pagination.page_size, pagination.total),
-                                    total: pagination.total
-                                }) }}
-                            </div>
-                        </div>
-                        <v-pagination v-model="pagination.page" :length="pagination.total_pages" :disabled="loading"
-                            @update:model-value="fetchConversations" rounded="circle" :total-visible="7"></v-pagination>
-                    </div>
-                </v-card-text>
-            </v-card>
-        </v-container>
+          <!-- 分页控制 -->
+          <div class="d-flex justify-center py-3">
+            <!-- 每页大小选择器 -->
+            <div class="d-flex justify-between align-center px-4 py-2 bg-grey-lighten-5">
+              <div class="d-flex align-center">
+                <span class="text-caption mr-2">{{ tm('pagination.itemsPerPage') }}:</span>
+                <v-select
+                  v-model="pagination.page_size"
+                  :items="pageSizeOptions"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                  style="max-width: 100px;"
+                  :disabled="loading"
+                  @update:model-value="onPageSizeChange"
+                />
+              </div>
+              <div class="text-caption ml-4">
+                {{ tm('pagination.showingItems', {
+                  start: Math.min((pagination.page - 1) * pagination.page_size + 1, pagination.total),
+                  end: Math.min(pagination.page * pagination.page_size, pagination.total),
+                  total: pagination.total
+                }) }}
+              </div>
+            </div>
+            <v-pagination
+              v-model="pagination.page"
+              :length="pagination.total_pages"
+              :disabled="loading"
+              rounded="circle"
+              :total-visible="7"
+              @update:model-value="fetchConversations"
+            />
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-container>
 
-        <!-- 对话详情对话框 -->
-        <v-dialog v-model="dialogView" max-width="900px" scrollable>
-            <v-card class="conversation-detail-card">
-                <v-card-title class="ml-2 mt-2 d-flex align-center">
-                    <span class="text-truncate">{{ selectedConversation?.title || tm('status.noTitle') }}</span>
-                    <v-spacer></v-spacer>
-                    <div class="d-flex align-center" v-if="selectedConversation?.sessionInfo">
-                        <v-chip text-color="primary" size="small" class="mr-2" rounded="md">
-                            {{ selectedConversation.sessionInfo.platform }}
-                        </v-chip>
-                        <v-chip text-color="secondary" size="small" rounded="md">
-                            {{ getMessageTypeDisplay(selectedConversation.sessionInfo.messageType) }}
-                        </v-chip>
-                    </div>
-                </v-card-title>
+    <!-- 对话详情对话框 -->
+    <v-dialog
+      v-model="dialogView"
+      max-width="900px"
+      scrollable
+    >
+      <v-card class="conversation-detail-card">
+        <v-card-title class="ml-2 mt-2 d-flex align-center">
+          <span class="text-truncate">{{ selectedConversation?.title || tm('status.noTitle') }}</span>
+          <v-spacer />
+          <div
+            v-if="selectedConversation?.sessionInfo"
+            class="d-flex align-center"
+          >
+            <v-chip
+              text-color="primary"
+              size="small"
+              class="mr-2"
+              rounded="md"
+            >
+              {{ selectedConversation.sessionInfo.platform }}
+            </v-chip>
+            <v-chip
+              text-color="secondary"
+              size="small"
+              rounded="md"
+            >
+              {{ getMessageTypeDisplay(selectedConversation.sessionInfo.messageType) }}
+            </v-chip>
+          </div>
+        </v-card-title>
 
-                <v-card-text>
-                    <div class="mb-4 d-flex align-center">
-                        <v-btn color="secondary" variant="tonal" size="small" class="mr-2"
-                            @click="isEditingHistory = !isEditingHistory">
-                            <v-icon class="mr-1">{{ isEditingHistory ? 'mdi-eye' : 'mdi-pencil' }}</v-icon>
-                            {{ isEditingHistory ? tm('dialogs.view.previewMode') : tm('dialogs.view.editMode') }}
-                        </v-btn>
-                        <v-btn v-if="isEditingHistory" color="success" variant="tonal" size="small"
-                            :loading="savingHistory" @click="saveHistoryChanges">
-                            <v-icon class="mr-1">mdi-content-save</v-icon>
-                            {{ tm('dialogs.view.saveChanges') }}
-                        </v-btn>
-                    </div>
+        <v-card-text>
+          <div class="mb-4 d-flex align-center">
+            <v-btn
+              color="secondary"
+              variant="tonal"
+              size="small"
+              class="mr-2"
+              @click="isEditingHistory = !isEditingHistory"
+            >
+              <v-icon class="mr-1">
+                {{ isEditingHistory ? 'mdi-eye' : 'mdi-pencil' }}
+              </v-icon>
+              {{ isEditingHistory ? tm('dialogs.view.previewMode') : tm('dialogs.view.editMode') }}
+            </v-btn>
+            <v-btn
+              v-if="isEditingHistory"
+              color="success"
+              variant="tonal"
+              size="small"
+              :loading="savingHistory"
+              @click="saveHistoryChanges"
+            >
+              <v-icon class="mr-1">
+                mdi-content-save
+              </v-icon>
+              {{ tm('dialogs.view.saveChanges') }}
+            </v-btn>
+          </div>
 
-                    <!-- 编辑模式 - Monaco编辑器 -->
-                    <div v-if="isEditingHistory" class="monaco-editor-container">
-                        <VueMonacoEditor v-model:value="editedHistory" theme="vs-dark" language="json" :options="{
-                            automaticLayout: true,
-                            fontSize: 13,
-                            tabSize: 2,
-                            minimap: { enabled: false },
-                            scrollBeyondLastLine: false,
-                            wordWrap: 'on'
-                        }" @editorDidMount="onMonacoMounted" />
-                    </div>
+          <!-- 编辑模式 - Monaco编辑器 -->
+          <div
+            v-if="isEditingHistory"
+            class="monaco-editor-container"
+          >
+            <VueMonacoEditor
+              v-model:value="editedHistory"
+              theme="vs-dark"
+              language="json"
+              :options="{
+                automaticLayout: true,
+                fontSize: 13,
+                tabSize: 2,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                wordWrap: 'on'
+              }"
+              @editorDidMount="onMonacoMounted"
+            />
+          </div>
 
-                    <!-- 预览模式 - 聊天界面 -->
-                    <div v-else class="conversation-messages-container" style="background-color: var(--v-theme-surface);">
-                        <!-- 空对话提示 -->
-                        <div v-if="conversationHistory.length === 0" class="text-center py-5">
-                            <v-icon size="48" color="grey">mdi-chat-remove</v-icon>
-                            <p class="text-disabled mt-2">{{ tm('status.emptyContent') }}</p>
-                        </div>
+          <!-- 预览模式 - 聊天界面 -->
+          <div
+            v-else
+            class="conversation-messages-container"
+            style="background-color: var(--v-theme-surface);"
+          >
+            <!-- 空对话提示 -->
+            <div
+              v-if="conversationHistory.length === 0"
+              class="text-center py-5"
+            >
+              <v-icon
+                size="48"
+                color="grey"
+              >
+                mdi-chat-remove
+              </v-icon>
+              <p class="text-disabled mt-2">
+                {{ tm('status.emptyContent') }}
+              </p>
+            </div>
 
-                        <!-- 消息列表组件 -->
-                        <MessageList v-else :messages="formattedMessages" :isDark="isDark" />
-                    </div>
-                </v-card-text>
+            <!-- 消息列表组件 -->
+            <MessageList
+              v-else
+              :messages="formattedMessages"
+              :is-dark="isDark"
+            />
+          </div>
+        </v-card-text>
 
-                <v-card-actions class="pa-4">
-                    <v-spacer></v-spacer>
-                    <v-btn variant="text" @click="closeHistoryDialog">
-                        {{ tm('dialogs.view.close') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="closeHistoryDialog"
+          >
+            {{ tm('dialogs.view.close') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-        <!-- 编辑对话框 -->
-        <v-dialog v-model="dialogEdit" max-width="500px">
-            <v-card>
-                <v-card-title class="bg-primary text-white py-3">
-                    <v-icon color="white" class="me-2">mdi-pencil</v-icon>
-                    <span>{{ tm('dialogs.edit.title') }}</span>
-                </v-card-title>
+    <!-- 编辑对话框 -->
+    <v-dialog
+      v-model="dialogEdit"
+      max-width="500px"
+    >
+      <v-card>
+        <v-card-title class="bg-primary text-white py-3">
+          <v-icon
+            color="white"
+            class="me-2"
+          >
+            mdi-pencil
+          </v-icon>
+          <span>{{ tm('dialogs.edit.title') }}</span>
+        </v-card-title>
 
-                <v-card-text class="py-4">
-                    <v-form ref="form" v-model="valid">
-                        <v-text-field v-model="editedItem.title" :label="tm('dialogs.edit.titleLabel')"
-                            :placeholder="tm('dialogs.edit.titlePlaceholder')" variant="outlined" density="comfortable"
-                            class="mb-3"></v-text-field>
-                    </v-form>
-                </v-card-text>
+        <v-card-text class="py-4">
+          <v-form
+            ref="form"
+            v-model="valid"
+          >
+            <v-text-field
+              v-model="editedItem.title"
+              :label="tm('dialogs.edit.titleLabel')"
+              :placeholder="tm('dialogs.edit.titlePlaceholder')"
+              variant="outlined"
+              density="comfortable"
+              class="mb-3"
+            />
+          </v-form>
+        </v-card-text>
 
-                <v-divider></v-divider>
+        <v-divider />
 
-                <v-card-actions class="pa-4">
-                    <v-spacer></v-spacer>
-                    <v-btn variant="text" @click="dialogEdit = false" :disabled="loading">
-                        {{ tm('dialogs.edit.cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" @click="saveConversation" :loading="loading">
-                        {{ tm('dialogs.edit.save') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="dialogEdit = false"
+          >
+            {{ tm('dialogs.edit.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            :loading="loading"
+            @click="saveConversation"
+          >
+            {{ tm('dialogs.edit.save') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-        <!-- 删除确认对话框 -->
-        <v-dialog v-model="dialogDelete" max-width="500px">
-            <v-card>
-                <v-card-title class="bg-error text-white py-3">
-                    <v-icon color="white" class="me-2">mdi-alert</v-icon>
-                    <span>{{ tm('dialogs.delete.title') }}</span>
-                </v-card-title>
+    <!-- 删除确认对话框 -->
+    <v-dialog
+      v-model="dialogDelete"
+      max-width="500px"
+    >
+      <v-card>
+        <v-card-title class="bg-error text-white py-3">
+          <v-icon
+            color="white"
+            class="me-2"
+          >
+            mdi-alert
+          </v-icon>
+          <span>{{ tm('dialogs.delete.title') }}</span>
+        </v-card-title>
 
-                <v-card-text class="py-4">
-                    <p>{{ tm('dialogs.delete.message', { title: selectedConversation?.title || tm('status.noTitle') })
-                        }}</p>
-                </v-card-text>
+        <v-card-text class="py-4">
+          <p>
+            {{ tm('dialogs.delete.message', { title: selectedConversation?.title || tm('status.noTitle') })
+            }}
+          </p>
+        </v-card-text>
 
-                <v-divider></v-divider>
+        <v-divider />
 
-                <v-card-actions class="pa-4">
-                    <v-spacer></v-spacer>
-                    <v-btn variant="text" @click="dialogDelete = false" :disabled="loading">
-                        {{ tm('dialogs.delete.cancel') }}
-                    </v-btn>
-                    <v-btn color="error" @click="deleteConversation" :loading="loading">
-                        {{ tm('dialogs.delete.confirm') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="dialogDelete = false"
+          >
+            {{ tm('dialogs.delete.cancel') }}
+          </v-btn>
+          <v-btn
+            color="error"
+            :loading="loading"
+            @click="deleteConversation"
+          >
+            {{ tm('dialogs.delete.confirm') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-        <!-- 批量删除确认对话框 -->
-        <v-dialog v-model="dialogBatchDelete" max-width="600px">
-            <v-card>
-                <v-card-title class="bg-error text-white py-3">
-                    <v-icon color="white" class="me-2">mdi-delete</v-icon>
-                    <span>{{ tm('dialogs.batchDelete.title') }}</span>
-                </v-card-title>
+    <!-- 批量删除确认对话框 -->
+    <v-dialog
+      v-model="dialogBatchDelete"
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title class="bg-error text-white py-3">
+          <v-icon
+            color="white"
+            class="me-2"
+          >
+            mdi-delete
+          </v-icon>
+          <span>{{ tm('dialogs.batchDelete.title') }}</span>
+        </v-card-title>
 
-                <v-card-text class="py-4">
-                    <p class="mb-3">{{ tm('dialogs.batchDelete.message', { count: selectedItems.length }) }}</p>
+        <v-card-text class="py-4">
+          <p class="mb-3">
+            {{ tm('dialogs.batchDelete.message', { count: selectedItems.length }) }}
+          </p>
 
-                    <!-- 显示前几个要删除的对话 -->
-                    <div v-if="selectedItems.length > 0" class="mb-3">
-                        <v-chip v-for="(item, index) in selectedItems.slice(0, 5)" :key="`${item.user_id}-${item.cid}`"
-                            size="small" class="mr-1 mb-1" closable @click:close="removeFromSelection(item)"
-                            :disabled="loading">
-                            {{ item.title || tm('status.noTitle') }}
-                        </v-chip>
-                        <v-chip v-if="selectedItems.length > 5" size="small" class="mr-1 mb-1">
-                            {{ tm('dialogs.batchDelete.andMore', { count: selectedItems.length - 5 }) }}
-                        </v-chip>
-                    </div>
+          <!-- 显示前几个要删除的对话 -->
+          <div
+            v-if="selectedItems.length > 0"
+            class="mb-3"
+          >
+            <v-chip
+              v-for="(item, index) in selectedItems.slice(0, 5)"
+              :key="`${item.user_id}-${item.cid}`"
+              size="small"
+              class="mr-1 mb-1"
+              closable
+              :disabled="loading"
+              @click:close="removeFromSelection(item)"
+            >
+              {{ item.title || tm('status.noTitle') }}
+            </v-chip>
+            <v-chip
+              v-if="selectedItems.length > 5"
+              size="small"
+              class="mr-1 mb-1"
+            >
+              {{ tm('dialogs.batchDelete.andMore', { count: selectedItems.length - 5 }) }}
+            </v-chip>
+          </div>
 
-                    <v-alert type="warning" variant="tonal" class="mb-3">
-                        {{ tm('dialogs.batchDelete.warning') }}
-                    </v-alert>
-                </v-card-text>
+          <v-alert
+            type="warning"
+            variant="tonal"
+            class="mb-3"
+          >
+            {{ tm('dialogs.batchDelete.warning') }}
+          </v-alert>
+        </v-card-text>
 
-                <v-divider></v-divider>
+        <v-divider />
 
-                <v-card-actions class="pa-4">
-                    <v-spacer></v-spacer>
-                    <v-btn variant="text" @click="dialogBatchDelete = false" :disabled="loading">
-                        {{ tm('dialogs.batchDelete.cancel') }}
-                    </v-btn>
-                    <v-btn color="error" @click="batchDeleteConversations" :loading="loading">
-                        {{ tm('dialogs.batchDelete.confirm') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="dialogBatchDelete = false"
+          >
+            {{ tm('dialogs.batchDelete.cancel') }}
+          </v-btn>
+          <v-btn
+            color="error"
+            :loading="loading"
+            @click="batchDeleteConversations"
+          >
+            {{ tm('dialogs.batchDelete.confirm') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-        <!-- 消息提示 -->
-        <v-snackbar :timeout="3000" elevation="24" :color="messageType" v-model="showMessage" location="top">
-            {{ message }}
-        </v-snackbar>
-    </div>
+    <!-- 消息提示 -->
+    <v-snackbar
+      v-model="showMessage"
+      :timeout="3000"
+      elevation="24"
+      :color="messageType"
+      location="top"
+    >
+      {{ message }}
+    </v-snackbar>
+  </div>
 </template>
 
 <script>
@@ -418,27 +681,6 @@ export default {
         }
     },
 
-    watch: {
-        // 监听筛选条件变化，使用防抖处理
-        platformFilter() {
-            this.debouncedApplyFilters();
-        },
-        messageTypeFilter() {
-            this.debouncedApplyFilters();
-        },
-        search() {
-            this.debouncedApplyFilters();
-        }
-    },
-
-    created() {
-        this.debouncedApplyFilters = debounce(() => {
-            // 重置到第一页
-            this.pagination.page = 1;
-            this.fetchConversations();
-        }, 300);
-    },
-
     computed: {
         // 动态表头
         tableHeaders() {
@@ -466,7 +708,7 @@ export default {
             // 解析 tutorial_map
             const tutorialMap = this.commonStore.tutorial_map;
             for (const platform in tutorialMap) {
-                if (tutorialMap.hasOwnProperty(platform)) {
+                if (Object.hasOwn(tutorialMap, platform)) {
                     platforms.push({
                         title: platform,
                         value: platform
@@ -529,6 +771,27 @@ export default {
         }
     },
 
+    watch: {
+        // 监听筛选条件变化，使用防抖处理
+        platformFilter() {
+            this.debouncedApplyFilters();
+        },
+        messageTypeFilter() {
+            this.debouncedApplyFilters();
+        },
+        search() {
+            this.debouncedApplyFilters();
+        }
+    },
+
+    created() {
+        this.debouncedApplyFilters = debounce(() => {
+            // 重置到第一页
+            this.pagination.page = 1;
+            this.fetchConversations();
+        }, 300);
+    },
+
     mounted() {
         this.fetchConversations();
     },
diff --git a/dashboard/src/views/CronJobPage.vue b/dashboard/src/views/CronJobPage.vue
index 4d0af43ec..a65ac4056 100644
--- a/dashboard/src/views/CronJobPage.vue
+++ b/dashboard/src/views/CronJobPage.vue
@@ -2,9 +2,21 @@
   <div class="cron-page">
     <div class="d-flex align-center justify-space-between mb-4">
       <div>
-        <div class="d-flex align-center" style="gap: 8px;">
-          <h2 class="text-h5 font-weight-bold">{{ tm('page.title') }}</h2>
-          <v-chip size="x-small" color="orange-darken-2" variant="tonal" label>{{ tm('page.beta') }}</v-chip>
+        <div
+          class="d-flex align-center"
+          style="gap: 8px;"
+        >
+          <h2 class="text-h5 font-weight-bold">
+            {{ tm('page.title') }}
+          </h2>
+          <v-chip
+            size="x-small"
+            color="orange-darken-2"
+            variant="tonal"
+            label
+          >
+            {{ tm('page.beta') }}
+          </v-chip>
         </div>
         <div class="text-body-2 text-medium-emphasis">
           {{ tm('page.subtitle') }}
@@ -14,51 +26,117 @@
           <span v-else>{{ tm('page.proactive.unsupported') }}</span>
         </div>
       </div>
-      <div class="d-flex align-center" style="gap: 8px;">
-        <v-btn variant="tonal" color="primary" @click="openCreate">{{ tm('actions.create') }}</v-btn>
-        <v-btn variant="tonal" color="primary" :loading="loading" @click="loadJobs">{{ tm('actions.refresh') }}</v-btn>
+      <div
+        class="d-flex align-center"
+        style="gap: 8px;"
+      >
+        <v-btn
+          variant="tonal"
+          color="primary"
+          @click="openCreate"
+        >
+          {{ tm('actions.create') }}
+        </v-btn>
+        <v-btn
+          variant="tonal"
+          color="primary"
+          :loading="loading"
+          @click="loadJobs"
+        >
+          {{ tm('actions.refresh') }}
+        </v-btn>
       </div>
     </div>
 
-    <v-card class="rounded-lg" variant="flat">
+    <v-card
+      class="rounded-lg"
+      variant="flat"
+    >
       <v-card-text>
         <div class="d-flex align-center justify-space-between mb-3">
-          <div class="text-subtitle-1 font-weight-bold">{{ tm('table.title') }}</div>
+          <div class="text-subtitle-1 font-weight-bold">
+            {{ tm('table.title') }}
+          </div>
         </div>
 
-        <v-alert v-if="!jobs.length && !loading" type="info" variant="tonal">{{ tm('table.empty') }}</v-alert>
+        <v-alert
+          v-if="!jobs.length && !loading"
+          type="info"
+          variant="tonal"
+        >
+          {{ tm('table.empty') }}
+        </v-alert>
 
-        <v-data-table :items="jobs" :headers="headers" :loading="loading" item-key="job_id" density="comfortable"
-          class="elevation-0">
+        <v-data-table
+          :items="jobs"
+          :headers="headers"
+          :loading="loading"
+          item-key="job_id"
+          density="comfortable"
+          class="elevation-0"
+        >
           <template #item.name="{ item }">
             <div class="py-4">
-              <div class="font-weight-medium">{{ item.name }}</div>
-              <div class="text-caption text-medium-emphasis">{{ item.description }}</div>
+              <div class="font-weight-medium">
+                {{ item.name }}
+              </div>
+              <div class="text-caption text-medium-emphasis">
+                {{ item.description }}
+              </div>
             </div>
           </template>
           <template #item.type="{ item }">
-            <v-chip size="small" :color="item.run_once ? 'orange' : 'primary'" variant="tonal">
+            <v-chip
+              size="small"
+              :color="item.run_once ? 'orange' : 'primary'"
+              variant="tonal"
+            >
               {{ jobTypeLabel(item) }}
             </v-chip>
           </template>
           <template #item.cron_expression="{ item }">
-            <div v-if="item.run_once">{{ formatTime(item.run_at) }}</div>
+            <div v-if="item.run_once">
+              {{ formatTime(item.run_at) }}
+            </div>
             <div v-else>
               <div>{{ item.cron_expression || tm('table.notAvailable') }}</div>
-              <div class="text-caption text-medium-emphasis">{{ item.timezone || tm('table.timezoneLocal') }}</div>
+              <div class="text-caption text-medium-emphasis">
+                {{ item.timezone || tm('table.timezoneLocal') }}
+              </div>
             </div>
           </template>
           <template #item.session="{ item }">
             <div>{{ item.session || tm('table.notAvailable') }}</div>
           </template>
-          <template #item.next_run_time="{ item }">{{ formatTime(item.next_run_time) }}</template>
-          <template #item.last_run_at="{ item }">{{ formatTime(item.last_run_at) }}</template>
-          <template #item.note="{ item }">{{ item.note || tm('table.notAvailable') }}</template>
+          <template #item.next_run_time="{ item }">
+            {{ formatTime(item.next_run_time) }}
+          </template>
+          <template #item.last_run_at="{ item }">
+            {{ formatTime(item.last_run_at) }}
+          </template>
+          <template #item.note="{ item }">
+            {{ item.note || tm('table.notAvailable') }}
+          </template>
           <template #item.actions="{ item }">
-            <div class="d-flex align-center flex-nowrap" style="gap: 12px; min-width: 140px;">
-              <v-switch v-model="item.enabled" inset density="compact" hide-details color="primary"
-                class="mt-0" @change="toggleJob(item)" />
-              <v-btn size="small" variant="text" color="error" @click="deleteJob(item)">
+            <div
+              class="d-flex align-center flex-nowrap"
+              style="gap: 12px; min-width: 140px;"
+            >
+              <v-switch
+                v-model="item.enabled"
+                inset
+                density="compact"
+                hide-details
+                color="primary"
+                class="mt-0"
+                @change="toggleJob(item)"
+              />
+              <v-btn
+                size="small"
+                variant="text"
+                color="error"
+                @click="deleteJob(item)"
+              >
                 {{ tm('actions.delete') }}
               </v-btn>
             </div>
@@ -67,33 +145,97 @@
       </v-card-text>
     </v-card>
 
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="2600">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      timeout="2600"
+    >
       {{ snackbar.message }}
     </v-snackbar>
 
-    <v-dialog v-model="createDialog" max-width="560">
+    <v-dialog
+      v-model="createDialog"
+      max-width="560"
+    >
       <v-card>
-        <v-card-title class="text-h6">{{ tm('form.title') }}</v-card-title>
+        <v-card-title class="text-h6">
+          {{ tm('form.title') }}
+        </v-card-title>
         <v-card-subtitle class="text-body-2 text-medium-emphasis">
           {{ tm('form.chatHint') }}
         </v-card-subtitle>
         <v-card-text>
-          <v-switch v-model="newJob.run_once" :label="tm('form.runOnce')" inset color="primary" hide-details />
-          <v-text-field v-model="newJob.name" :label="tm('form.name')" variant="outlined" density="comfortable" />
-          <v-text-field v-model="newJob.note" :label="tm('form.note')" variant="outlined" density="comfortable" />
-          <v-text-field v-if="!newJob.run_once" v-model="newJob.cron_expression" :label="tm('form.cron')"
-            :placeholder="tm('form.cronPlaceholder')" variant="outlined" density="comfortable" />
-          <v-text-field v-else v-model="newJob.run_at" :label="tm('form.runAt')" type="datetime-local"
-            variant="outlined" density="comfortable" />
-          <v-text-field v-model="newJob.session" :label="tm('form.session')" variant="outlined" density="comfortable" />
-          <v-text-field v-model="newJob.timezone" :label="tm('form.timezone')" variant="outlined"
-            density="comfortable" />
-          <v-switch v-model="newJob.enabled" :label="tm('form.enabled')" inset color="primary" hide-details />
+          <v-switch
+            v-model="newJob.run_once"
+            :label="tm('form.runOnce')"
+            inset
+            color="primary"
+            hide-details
+          />
+          <v-text-field
+            v-model="newJob.name"
+            :label="tm('form.name')"
+            variant="outlined"
+            density="comfortable"
+          />
+          <v-text-field
+            v-model="newJob.note"
+            :label="tm('form.note')"
+            variant="outlined"
+            density="comfortable"
+          />
+          <v-text-field
+            v-if="!newJob.run_once"
+            v-model="newJob.cron_expression"
+            :label="tm('form.cron')"
+            :placeholder="tm('form.cronPlaceholder')"
+            variant="outlined"
+            density="comfortable"
+          />
+          <v-text-field
+            v-else
+            v-model="newJob.run_at"
+            :label="tm('form.runAt')"
+            type="datetime-local"
+            variant="outlined"
+            density="comfortable"
+          />
+          <v-text-field
+            v-model="newJob.session"
+            :label="tm('form.session')"
+            variant="outlined"
+            density="comfortable"
+          />
+          <v-text-field
+            v-model="newJob.timezone"
+            :label="tm('form.timezone')"
+            variant="outlined"
+            density="comfortable"
+          />
+          <v-switch
+            v-model="newJob.enabled"
+            :label="tm('form.enabled')"
+            inset
+            color="primary"
+            hide-details
+          />
         </v-card-text>
         <v-card-actions class="justify-end">
-          <v-btn variant="text" @click="createDialog = false">{{ tm('actions.cancel') }}</v-btn>
-          <v-btn variant="tonal" color="primary" :loading="creating" @click="createJob">{{ tm('actions.submit')
-            }}</v-btn>
+          <v-btn
+            variant="text"
+            @click="createDialog = false"
+          >
+            {{ tm('actions.cancel') }}
+          </v-btn>
+          <v-btn
+            variant="tonal"
+            color="primary"
+            :loading="creating"
+            @click="createJob"
+          >
+            {{ tm('actions.submit')
+            }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index 657b20351..c89d5dfc5 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -154,8 +154,14 @@ const {
 
 <template>
   <v-row>
-    <v-col cols="12" md="12">
-      <v-card variant="flat" style="background-color: transparent">
+    <v-col
+      cols="12"
+      md="12"
+    >
+      <v-card
+        variant="flat"
+        style="background-color: transparent"
+      >
         <!-- 标签页 -->
         <v-card-text style="padding: 0px 12px">
           <!-- 已安装插件标签页内容 -->
@@ -164,8 +170,13 @@ const {
           <!-- 指令面板标签页内容 -->
           <v-tab-item v-show="activeTab === 'components'">
             <div class="mb-4 pt-4 pb-4">
-              <div class="d-flex align-center flex-wrap" style="gap: 12px">
-                <h2 class="text-h2 mb-0">{{ tm("tabs.handlersOperation") }}</h2>
+              <div
+                class="d-flex align-center flex-wrap"
+                style="gap: 12px"
+              >
+                <h2 class="text-h2 mb-0">
+                  {{ tm("tabs.handlersOperation") }}
+                </h2>
               </div>
             </div>
             <v-card
@@ -182,8 +193,13 @@ const {
           <!-- 已安装的 MCP 服务器标签页内容 -->
           <v-tab-item v-show="activeTab === 'mcp'">
             <div class="mb-4 pt-4 pb-4">
-              <div class="d-flex align-center flex-wrap" style="gap: 12px">
-                <h2 class="text-h2 mb-0">{{ tm("tabs.installedMcpServers") }}</h2>
+              <div
+                class="d-flex align-center flex-wrap"
+                style="gap: 12px"
+              >
+                <h2 class="text-h2 mb-0">
+                  {{ tm("tabs.installedMcpServers") }}
+                </h2>
               </div>
             </div>
             <v-card
@@ -200,8 +216,13 @@ const {
           <!-- Skills 标签页内容 -->
           <v-tab-item v-show="activeTab === 'skills'">
             <div class="mb-4 pt-4 pb-4">
-              <div class="d-flex align-center flex-wrap" style="gap: 12px">
-                <h2 class="text-h2 mb-0">{{ tm("tabs.skills") }}</h2>
+              <div
+                class="d-flex align-center flex-wrap"
+                style="gap: 12px"
+              >
+                <h2 class="text-h2 mb-0">
+                  {{ tm("tabs.skills") }}
+                </h2>
               </div>
             </div>
             <v-card
@@ -219,19 +240,26 @@ const {
           <MarketPluginsTab :state="pageState" />
 
           <v-row v-if="loading_">
-            <v-col cols="12" class="d-flex justify-center">
+            <v-col
+              cols="12"
+              class="d-flex justify-center"
+            >
               <v-progress-circular
                 indeterminate
                 color="primary"
                 size="48"
-              ></v-progress-circular>
+              />
             </v-col>
           </v-row>
         </v-card-text>
       </v-card>
     </v-col>
 
-    <v-col v-if="activeTab === 'market'" cols="12" md="12">
+    <v-col
+      v-if="activeTab === 'market'"
+      cols="12"
+      md="12"
+    >
       <div class="d-flex align-center justify-center mt-4 mb-4 gap-4">
         <v-btn
           variant="text"
@@ -249,7 +277,7 @@ const {
             width: 1px;
             background-color: rgba(var(--v-theme-on-surface), 0.12);
           "
-        ></div>
+        />
         <v-btn
           variant="text"
           prepend-icon="mdi-github"
@@ -265,51 +293,74 @@ const {
   </v-row>
 
   <!-- 配置对话框 -->
-  <v-dialog v-model="configDialog" max-width="900">
+  <v-dialog
+    v-model="configDialog"
+    max-width="900"
+  >
     <v-card>
-      <v-card-title class="text-h2 pa-4 pl-6 pb-0">{{
-        tm("dialogs.config.title")
-      }}</v-card-title>
+      <v-card-title class="text-h2 pa-4 pl-6 pb-0">
+        {{
+          tm("dialogs.config.title")
+        }}
+      </v-card-title>
       <v-card-text>
         <div style="max-height: 60vh; overflow-y: auto; padding-right: 8px">
           <AstrBotConfig
             v-if="extension_config.metadata"
             :metadata="extension_config.metadata"
             :iterable="extension_config.config"
-            :metadataKey="curr_namespace"
-            :pluginName="curr_namespace"
+            :metadata-key="curr_namespace"
+            :plugin-name="curr_namespace"
           />
-          <p v-else>{{ tm("dialogs.config.noConfig") }}</p>
+          <p v-else>
+            {{ tm("dialogs.config.noConfig") }}
+          </p>
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="blue-darken-1" variant="text" @click="updateConfig">{{
-          tm("buttons.saveAndClose")
-        }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="updateConfig"
+        >
+          {{
+            tm("buttons.saveAndClose")
+          }}
+        </v-btn>
         <v-btn
           color="blue-darken-1"
           variant="text"
           @click="configDialog = false"
-          >{{ tm("buttons.close") }}</v-btn
         >
+          {{ tm("buttons.close") }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- 加载对话框 -->
-  <v-dialog v-model="loadingDialog.show" width="700" persistent>
+  <v-dialog
+    v-model="loadingDialog.show"
+    width="700"
+    persistent
+  >
     <v-card>
-      <v-card-title class="text-h5">{{ loadingDialog.title }}</v-card-title>
+      <v-card-title class="text-h5">
+        {{ loadingDialog.title }}
+      </v-card-title>
       <v-card-text style="max-height: calc(100vh - 200px); overflow-y: auto">
         <v-progress-linear
           v-if="loadingDialog.statusCode === 0"
           indeterminate
           color="primary"
           class="mb-4"
-        ></v-progress-linear>
+        />
 
-        <div v-if="loadingDialog.statusCode !== 0" class="py-8 text-center">
+        <div
+          v-if="loadingDialog.statusCode !== 0"
+          class="py-8 text-center"
+        >
           <v-icon
             class="mb-6"
             :color="loadingDialog.statusCode === 1 ? 'success' : 'error'"
@@ -319,40 +370,45 @@ const {
                 : 'mdi-alert-circle-outline'
             "
             size="128"
-          ></v-icon>
-          <div class="text-h4 font-weight-bold">{{ loadingDialog.result }}</div>
+          />
+          <div class="text-h4 font-weight-bold">
+            {{ loadingDialog.result }}
+          </div>
         </div>
 
         <div style="margin-top: 32px">
           <h3>{{ tm("dialogs.loading.logs") }}</h3>
           <ConsoleDisplayer
-            historyNum="10"
+            history-num="10"
             style="height: 200px; margin-top: 16px; margin-bottom: 24px"
-          >
-          </ConsoleDisplayer>
+          />
         </div>
       </v-card-text>
 
-      <v-divider></v-divider>
+      <v-divider />
 
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="blue-darken-1"
           variant="text"
           @click="resetLoadingDialog"
-          >{{ tm("buttons.close") }}</v-btn
         >
+          {{ tm("buttons.close") }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- 插件信息对话框 -->
-  <v-dialog v-model="showPluginInfoDialog" width="1200">
+  <v-dialog
+    v-model="showPluginInfoDialog"
+    width="1200"
+  >
     <v-card>
-      <v-card-title class="text-h5"
-        >{{ selectedPlugin.name }} {{ tm("buttons.viewInfo") }}</v-card-title
-      >
+      <v-card-title class="text-h5">
+        {{ selectedPlugin.name }} {{ tm("buttons.viewInfo") }}
+      </v-card-title>
       <v-card-text>
         <v-data-table
           style="font-size: 17px"
@@ -360,42 +416,45 @@ const {
           :items="selectedPlugin.handlers"
           item-key="name"
         >
-          <template v-slot:header.id="{ column }">
-            <p style="font-weight: bold">{{ column.title }}</p>
+          <template #header.id="{ column }">
+            <p style="font-weight: bold">
+              {{ column.title }}
+            </p>
           </template>
-          <template v-slot:item.event_type="{ item }">
+          <template #item.event_type="{ item }">
             {{ item.event_type }}
           </template>
-          <template v-slot:item.desc="{ item }">
+          <template #item.desc="{ item }">
             {{ item.desc }}
           </template>
-          <template v-slot:item.type="{ item }">
+          <template #item.type="{ item }">
             <v-chip color="success">
               {{ item.type }}
             </v-chip>
           </template>
-          <template v-slot:item.cmd="{ item }">
+          <template #item.cmd="{ item }">
             <span style="font-weight: bold">{{ item.cmd }}</span>
           </template>
         </v-data-table>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="blue-darken-1"
           variant="text"
           @click="showPluginInfoDialog = false"
-          >{{ tm("buttons.close") }}</v-btn
         >
+          {{ tm("buttons.close") }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <v-snackbar
+    v-model="snack_show"
     :timeout="2000"
     elevation="24"
     :color="snack_success"
-    v-model="snack_show"
   >
     {{ snack_message }}
   </v-snackbar>
@@ -421,10 +480,18 @@ const {
   />
 
   <!-- 更新全部插件确认对话框 -->
-  <v-dialog v-model="updateAllConfirmDialog.show" max-width="420">
+  <v-dialog
+    v-model="updateAllConfirmDialog.show"
+    max-width="420"
+  >
     <v-card class="rounded-lg">
       <v-card-title class="d-flex align-center pa-4">
-        <v-icon color="warning" class="mr-2">mdi-update</v-icon>
+        <v-icon
+          color="warning"
+          class="mr-2"
+        >
+          mdi-update
+        </v-icon>
         {{ tm("dialogs.updateAllConfirm.title") }}
       </v-card-title>
       <v-card-text>
@@ -433,26 +500,38 @@ const {
         </p>
       </v-card-text>
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           variant="text"
           @click="cancelUpdateAll"
-        >{{ tm("buttons.cancel") }}</v-btn>
+        >
+          {{ tm("buttons.cancel") }}
+        </v-btn>
         <v-btn
           color="warning"
           variant="flat"
           @click="confirmUpdateAll"
-        >{{ tm("dialogs.updateAllConfirm.confirm") }}</v-btn>
+        >
+          {{ tm("dialogs.updateAllConfirm.confirm") }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
 
   <!-- 指令冲突提示对话框 -->
-  <v-dialog v-model="conflictDialog.show" max-width="420">
+  <v-dialog
+    v-model="conflictDialog.show"
+    max-width="420"
+  >
     <v-card class="rounded-lg">
       <v-card-title class="d-flex align-center pa-4">
-        <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
+        <v-icon
+          color="warning"
+          class="mr-2"
+        >
+          mdi-alert-circle
+        </v-icon>
         {{ tm("conflicts.title") }}
       </v-card-title>
       <v-card-text class="px-4 pb-2">
@@ -475,11 +554,20 @@ const {
         </p>
       </v-card-text>
       <v-card-actions class="pa-4 pt-2">
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="conflictDialog.show = false">{{
-          tm("conflicts.later")
-        }}</v-btn>
-        <v-btn color="warning" variant="flat" @click="handleConflictConfirm">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="conflictDialog.show = false"
+        >
+          {{
+            tm("conflicts.later")
+          }}
+        </v-btn>
+        <v-btn
+          color="warning"
+          variant="flat"
+          @click="handleConflictConfirm"
+        >
           {{ tm("conflicts.goToManage") }}
         </v-btn>
       </v-card-actions>
@@ -487,21 +575,36 @@ const {
   </v-dialog>
 
   <!-- 危险插件确认对话框 -->
-  <v-dialog v-model="dangerConfirmDialog" width="500" persistent>
+  <v-dialog
+    v-model="dangerConfirmDialog"
+    width="500"
+    persistent
+  >
     <v-card>
       <v-card-title class="text-h5 d-flex align-center">
-        <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
+        <v-icon
+          color="warning"
+          class="mr-2"
+        >
+          mdi-alert-circle
+        </v-icon>
         {{ tm("dialogs.danger_warning.title") }}
       </v-card-title>
       <v-card-text>
         <div>{{ tm("dialogs.danger_warning.message") }}</div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="grey" @click="cancelDangerInstall">
+        <v-spacer />
+        <v-btn
+          color="grey"
+          @click="cancelDangerInstall"
+        >
           {{ tm("dialogs.danger_warning.cancel") }}
         </v-btn>
-        <v-btn color="warning" @click="confirmDangerInstall">
+        <v-btn
+          color="warning"
+          @click="confirmDangerInstall"
+        >
           {{ tm("dialogs.danger_warning.confirm") }}
         </v-btn>
       </v-card-actions>
@@ -509,24 +612,41 @@ const {
   </v-dialog>
 
   <!-- 版本不兼容警告对话框 -->
-  <v-dialog v-model="versionCompatibilityDialog.show" width="520" persistent>
+  <v-dialog
+    v-model="versionCompatibilityDialog.show"
+    width="520"
+    persistent
+  >
     <v-card>
       <v-card-title class="text-h5 d-flex align-center">
-        <v-icon color="warning" class="mr-2">mdi-alert</v-icon>
+        <v-icon
+          color="warning"
+          class="mr-2"
+        >
+          mdi-alert
+        </v-icon>
         {{ tm("dialogs.versionCompatibility.title") }}
       </v-card-title>
       <v-card-text>
-        <div class="mb-2">{{ tm("dialogs.versionCompatibility.message") }}</div>
+        <div class="mb-2">
+          {{ tm("dialogs.versionCompatibility.message") }}
+        </div>
         <div class="text-medium-emphasis">
           {{ versionCompatibilityDialog.message }}
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="grey" @click="cancelInstallOnVersionWarning">
+        <v-spacer />
+        <v-btn
+          color="grey"
+          @click="cancelInstallOnVersionWarning"
+        >
           {{ tm("dialogs.versionCompatibility.cancel") }}
         </v-btn>
-        <v-btn color="warning" @click="continueInstallIgnoringVersionWarning">
+        <v-btn
+          color="warning"
+          @click="continueInstallIgnoringVersionWarning"
+        >
           {{ tm("dialogs.versionCompatibility.confirm") }}
         </v-btn>
       </v-card-actions>
@@ -534,7 +654,10 @@ const {
   </v-dialog>
 
   <!-- 上传插件对话框 -->
-  <v-dialog v-model="dialog" width="500">
+  <v-dialog
+    v-model="dialog"
+    width="500"
+  >
     <div
       class="v-card v-card--density-default rounded-lg v-card--variant-elevated"
     >
@@ -544,7 +667,7 @@ const {
           color="primary"
           height="2"
           :active="loading_"
-        ></v-progress-linear>
+        />
       </div>
 
       <v-card-title class="text-h3 pa-4 pb-0 pl-6">
@@ -552,12 +675,22 @@ const {
       </v-card-title>
 
       <div class="v-card-text">
-        <v-tabs v-model="uploadTab" color="primary">
-          <v-tab value="file">{{ tm("dialogs.install.fromFile") }}</v-tab>
-          <v-tab value="url">{{ tm("dialogs.install.fromUrl") }}</v-tab>
+        <v-tabs
+          v-model="uploadTab"
+          color="primary"
+        >
+          <v-tab value="file">
+            {{ tm("dialogs.install.fromFile") }}
+          </v-tab>
+          <v-tab value="url">
+            {{ tm("dialogs.install.fromUrl") }}
+          </v-tab>
         </v-tabs>
 
-        <v-window v-model="uploadTab" class="mt-4">
+        <v-window
+          v-model="uploadTab"
+          class="mt-4"
+        >
           <v-window-item value="file">
             <div class="d-flex flex-column align-center justify-center pa-4">
               <v-file-input
@@ -568,14 +701,14 @@ const {
                 hide-details
                 hide-input
                 class="d-none"
-              ></v-file-input>
+              />
 
               <v-btn
                 color="primary"
                 size="large"
                 prepend-icon="mdi-upload"
-                @click="$refs.fileInput.click()"
                 elevation="2"
+                @click="$refs.fileInput.click()"
               >
                 {{ tm("buttons.selectFile") }}
               </v-btn>
@@ -584,7 +717,10 @@ const {
                 {{ tm("messages.supportedFormats") }}
               </div>
 
-              <div v-if="upload_file" class="mt-4 text-center">
+              <div
+                v-if="upload_file"
+                class="mt-4 text-center"
+              >
                 <v-chip
                   color="primary"
                   size="large"
@@ -592,10 +728,8 @@ const {
                   @click:close="upload_file = null"
                 >
                   {{ upload_file.name }}
-                  <template v-slot:append>
-                    <span class="text-caption ml-2"
-                      >({{ (upload_file.size / 1024).toFixed(1) }}KB)</span
-                    >
+                  <template #append>
+                    <span class="text-caption ml-2">({{ (upload_file.size / 1024).toFixed(1) }}KB)</span>
                   </template>
                 </v-chip>
               </div>
@@ -612,9 +746,12 @@ const {
                 hide-details
                 class="rounded-lg mb-4"
                 placeholder="https://github.com/username/repo"
-              ></v-text-field>
+              />
 
-              <div v-if="selectedInstallPlugin" class="mb-3">
+              <div
+                v-if="selectedInstallPlugin"
+                class="mb-3"
+              >
                 <v-chip
                   v-if="selectedInstallPlugin.astrbot_version"
                   size="small"
@@ -642,8 +779,8 @@ const {
                 <v-alert
                   v-if="
                     selectedInstallPlugin.astrbot_version &&
-                    installCompat.checked &&
-                    !installCompat.compatible
+                      installCompat.checked &&
+                      !installCompat.compatible
                   "
                   type="warning"
                   variant="tonal"
@@ -654,46 +791,65 @@ const {
                 </v-alert>
               </div>
 
-              <ProxySelector></ProxySelector>
+              <ProxySelector />
             </div>
           </v-window-item>
         </v-window>
       </div>
 
       <div class="v-card-actions">
-        <v-spacer></v-spacer>
-        <v-btn color="grey" variant="text" @click="dialog = false">{{
-          tm("buttons.cancel")
-        }}</v-btn>
-        <v-btn color="primary" variant="text" @click="newExtension">{{
-          tm("buttons.install")
-        }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="dialog = false"
+        >
+          {{
+            tm("buttons.cancel")
+          }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="text"
+          @click="newExtension"
+        >
+          {{
+            tm("buttons.install")
+          }}
+        </v-btn>
       </div>
     </div>
   </v-dialog>
 
   <!-- 插件源管理对话框 -->
-  <v-dialog v-model="showSourceManagerDialog" width="640">
+  <v-dialog
+    v-model="showSourceManagerDialog"
+    width="640"
+  >
     <v-card>
-      <v-card-title class="text-h3 pa-4 pl-6">{{
-        tm("market.sourceManagement")
-      }}</v-card-title>
+      <v-card-title class="text-h3 pa-4 pl-6">
+        {{
+          tm("market.sourceManagement")
+        }}
+      </v-card-title>
       <v-card-text>
         <v-select
           :model-value="selectedSource || '__default__'"
-          @update:model-value="
-            selectPluginSource($event === '__default__' ? null : $event)
-          "
           :items="sourceSelectItems"
           :label="tm('market.currentSource')"
           variant="outlined"
           prepend-inner-icon="mdi-source-branch"
           hide-details
           class="mb-4"
-        ></v-select>
+          @update:model-value="
+            selectPluginSource($event === '__default__' ? null : $event)
+          "
+        />
 
         <div class="d-flex align-center justify-space-between mb-2">
-          <div class="text-subtitle-2">{{ tm("market.availableSources") }}</div>
+          <div class="text-subtitle-2">
+            {{ tm("market.availableSources") }}
+          </div>
           <v-btn
             size="small"
             color="primary"
@@ -705,15 +861,23 @@ const {
           </v-btn>
         </div>
 
-        <v-list density="compact" nav class="pa-0">
+        <v-list
+          density="compact"
+          nav
+          class="pa-0"
+        >
           <v-list-item
             rounded="md"
             color="primary"
             :active="selectedSource === null"
             @click="selectPluginSource(null)"
           >
-            <template v-slot:prepend>
-              <v-icon icon="mdi-shield-check" size="small" class="mr-2"></v-icon>
+            <template #prepend>
+              <v-icon
+                icon="mdi-shield-check"
+                size="small"
+                class="mr-2"
+              />
             </template>
             <v-list-item-title>{{ tm("market.defaultSource") }}</v-list-item-title>
           </v-list-item>
@@ -726,47 +890,64 @@ const {
             :active="selectedSource === source.url"
             @click="selectPluginSource(source.url)"
           >
-            <template v-slot:prepend>
-              <v-icon icon="mdi-link-variant" size="small" class="mr-2"></v-icon>
+            <template #prepend>
+              <v-icon
+                icon="mdi-link-variant"
+                size="small"
+                class="mr-2"
+              />
             </template>
             <v-list-item-title>{{ source.name }}</v-list-item-title>
-            <v-list-item-subtitle class="text-caption">{{
-              source.url
-            }}</v-list-item-subtitle>
-            <template v-slot:append>
+            <v-list-item-subtitle class="text-caption">
+              {{
+                source.url
+              }}
+            </v-list-item-subtitle>
+            <template #append>
               <v-btn
                 icon="mdi-pencil-outline"
                 size="small"
                 variant="text"
                 color="medium-emphasis"
                 @click.stop="editCustomSource(source)"
-              ></v-btn>
+              />
               <v-btn
                 icon="mdi-trash-can-outline"
                 size="small"
                 variant="text"
                 color="error"
                 @click.stop="removeCustomSource(source)"
-              ></v-btn>
+              />
             </template>
           </v-list-item>
         </v-list>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="primary" variant="text" @click="showSourceManagerDialog = false">{{
-          tm("buttons.close")
-        }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="primary"
+          variant="text"
+          @click="showSourceManagerDialog = false"
+        >
+          {{
+            tm("buttons.close")
+          }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- 添加/编辑自定义插件源对话框 -->
-  <v-dialog v-model="showSourceDialog" width="500">
+  <v-dialog
+    v-model="showSourceDialog"
+    width="500"
+  >
     <v-card>
-      <v-card-title class="text-h5">{{
-        editingSource ? tm("market.editSource") : tm("market.addSource")
-      }}</v-card-title>
+      <v-card-title class="text-h5">
+        {{
+          editingSource ? tm("market.editSource") : tm("market.addSource")
+        }}
+      </v-card-title>
       <v-card-text>
         <div class="pa-2">
           <v-text-field
@@ -777,7 +958,7 @@ const {
             hide-details
             class="mb-4"
             placeholder="我的插件源"
-          ></v-text-field>
+          />
 
           <v-text-field
             v-model="sourceUrl"
@@ -786,7 +967,7 @@ const {
             prepend-inner-icon="mdi-link"
             hide-details
             placeholder="https://example.com/plugins.json"
-          ></v-text-field>
+          />
 
           <div class="text-caption text-medium-emphasis mt-2">
             {{ tm("messages.enterJsonUrl") }}
@@ -794,64 +975,115 @@ const {
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn color="grey" variant="text" @click="showSourceDialog = false">{{
-          tm("buttons.cancel")
-        }}</v-btn>
-        <v-btn color="primary" variant="text" @click="saveCustomSource">{{
-          tm("buttons.save")
-        }}</v-btn>
+        <v-spacer />
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="showSourceDialog = false"
+        >
+          {{
+            tm("buttons.cancel")
+          }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="text"
+          @click="saveCustomSource"
+        >
+          {{
+            tm("buttons.save")
+          }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- 删除插件源确认对话框 -->
-  <v-dialog v-model="showRemoveSourceDialog" width="400">
+  <v-dialog
+    v-model="showRemoveSourceDialog"
+    width="400"
+  >
     <v-card>
       <v-card-title class="text-h5 d-flex align-center">
-        <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
+        <v-icon
+          color="warning"
+          class="mr-2"
+        >
+          mdi-alert-circle
+        </v-icon>
         {{ tm("dialogs.uninstall.title") }}
       </v-card-title>
       <v-card-text>
         <div>{{ tm("market.confirmRemoveSource") }}</div>
-        <div v-if="sourceToRemove" class="mt-2">
+        <div
+          v-if="sourceToRemove"
+          class="mt-2"
+        >
           <strong>{{ sourceToRemove.name }}</strong>
-          <div class="text-caption">{{ sourceToRemove.url }}</div>
+          <div class="text-caption">
+            {{ sourceToRemove.url }}
+          </div>
         </div>
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           color="grey"
           variant="text"
           @click="showRemoveSourceDialog = false"
-          >{{ tm("buttons.cancel") }}</v-btn
         >
-        <v-btn color="error" variant="text" @click="confirmRemoveSource">{{
-          tm("buttons.deleteSource")
-        }}</v-btn>
+          {{ tm("buttons.cancel") }}
+        </v-btn>
+        <v-btn
+          color="error"
+          variant="text"
+          @click="confirmRemoveSource"
+        >
+          {{
+            tm("buttons.deleteSource")
+          }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 
   <!-- 强制更新确认对话框 -->
-  <v-dialog v-model="forceUpdateDialog.show" max-width="420">
+  <v-dialog
+    v-model="forceUpdateDialog.show"
+    max-width="420"
+  >
     <v-card class="rounded-lg">
       <v-card-title class="text-h6 d-flex align-center">
-        <v-icon color="info" class="mr-2">mdi-information-outline</v-icon>
+        <v-icon
+          color="info"
+          class="mr-2"
+        >
+          mdi-information-outline
+        </v-icon>
         {{ tm("dialogs.forceUpdate.title") }}
       </v-card-title>
       <v-card-text>
         {{ tm("dialogs.forceUpdate.message") }}
       </v-card-text>
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn variant="text" @click="forceUpdateDialog.show = false">{{
-          tm("buttons.cancel")
-        }}</v-btn>
-        <v-btn color="primary" variant="flat" @click="confirmForceUpdate">{{
-          tm("dialogs.forceUpdate.confirm")
-        }}</v-btn>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="forceUpdateDialog.show = false"
+        >
+          {{
+            tm("buttons.cancel")
+          }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          @click="confirmForceUpdate"
+        >
+          {{
+            tm("dialogs.forceUpdate.confirm")
+          }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/dashboard/src/views/PersonaPage.vue b/dashboard/src/views/PersonaPage.vue
index 102028c6d..a6636464b 100644
--- a/dashboard/src/views/PersonaPage.vue
+++ b/dashboard/src/views/PersonaPage.vue
@@ -1,22 +1,30 @@
 <template>
-    <div class="persona-page">
-        <v-container fluid class="pa-0">
-            <!-- 页面标题 -->
-            <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-6">
-                <div>
-                    <h1 class="text-h1 font-weight-bold mb-2">
-                        <v-icon color="black" class="me-2">mdi-heart</v-icon>{{ t('core.navigation.persona') }}
-                    </h1>
-                    <p class="text-subtitle-1 text-medium-emphasis mb-0">
-                        {{ tm('page.description') }}
-                    </p>
-                </div>
-            </v-row>
+  <div class="persona-page">
+    <v-container
+      fluid
+      class="pa-0"
+    >
+      <!-- 页面标题 -->
+      <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-6">
+        <div>
+          <h1 class="text-h1 font-weight-bold mb-2">
+            <v-icon
+              color="black"
+              class="me-2"
+            >
+              mdi-heart
+            </v-icon>{{ t('core.navigation.persona') }}
+          </h1>
+          <p class="text-subtitle-1 text-medium-emphasis mb-0">
+            {{ tm('page.description') }}
+          </p>
+        </div>
+      </v-row>
 
-            <!-- 主容器组件 -->
-            <PersonaManager />
-        </v-container>
-    </div>
+      <!-- 主容器组件 -->
+      <PersonaManager />
+    </v-container>
+  </div>
 </template>
 
 <script>
diff --git a/dashboard/src/views/PlatformPage.vue b/dashboard/src/views/PlatformPage.vue
index f50df9554..b75cf0327 100644
--- a/dashboard/src/views/PlatformPage.vue
+++ b/dashboard/src/views/PlatformPage.vue
@@ -1,37 +1,77 @@
 <template>
   <div class="platform-page">
-    <v-container fluid class="pa-0">
+    <v-container
+      fluid
+      class="pa-0"
+    >
       <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-8">
         <div>
           <h1 class="text-h1 font-weight-bold mb-2 d-flex align-center">
-            <v-icon color="black" class="me-2">mdi-robot</v-icon>{{ tm('title') }}
+            <v-icon
+              color="black"
+              class="me-2"
+            >
+              mdi-robot
+            </v-icon>{{ tm('title') }}
           </h1>
           <p class="text-subtitle-1 text-medium-emphasis mb-4">
             {{ tm('subtitle') }}
           </p>
         </div>
-        <v-btn color="primary" prepend-icon="mdi-plus" variant="tonal" @click="updatingMode = false; showAddPlatformDialog = true"
-          rounded="xl" size="x-large">
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-plus"
+          variant="tonal"
+          rounded="xl"
+          size="x-large"
+          @click="updatingMode = false; showAddPlatformDialog = true"
+        >
           {{ tm('addAdapter') }}
         </v-btn>
       </v-row>
 
       <div>
         <v-row v-if="(config_data.platform || []).length === 0">
-          <v-col cols="12" class="text-center pa-8">
-            <v-icon size="64" color="grey-lighten-1">mdi-connection</v-icon>
-            <p class="text-grey mt-4">{{ tm('emptyText') }}</p>
+          <v-col
+            cols="12"
+            class="text-center pa-8"
+          >
+            <v-icon
+              size="64"
+              color="grey-lighten-1"
+            >
+              mdi-connection
+            </v-icon>
+            <p class="text-grey mt-4">
+              {{ tm('emptyText') }}
+            </p>
           </v-col>
         </v-row>
 
         <v-row v-else>
-          <v-col v-for="(platform, index) in config_data.platform || []" :key="index" cols="12" md="6" lg="4" xl="3">
-            <item-card :item="platform" title-field="id" enabled-field="enable"
-              :bglogo="getPlatformIcon(platform.type || platform.id)" @toggle-enabled="platformStatusChange"
-              @delete="deletePlatform" @edit="editPlatform">
+          <v-col
+            v-for="(platform, index) in config_data.platform || []"
+            :key="index"
+            cols="12"
+            md="6"
+            lg="4"
+            xl="3"
+          >
+            <item-card
+              :item="platform"
+              title-field="id"
+              enabled-field="enable"
+              :bglogo="getPlatformIcon(platform.type || platform.id)"
+              @toggle-enabled="platformStatusChange"
+              @delete="deletePlatform"
+              @edit="editPlatform"
+            >
               <template #item-details="{ item }">
                 <!-- 平台运行状态 - 只在非运行状态或有错误时显示 -->
-                <div class="platform-status-row mb-2" v-if="getPlatformStat(item.id) && (getPlatformStat(item.id)?.status !== 'running' || getPlatformStat(item.id)?.error_count > 0)">
+                <div
+                  v-if="getPlatformStat(item.id) && (getPlatformStat(item.id)?.status !== 'running' || getPlatformStat(item.id)?.error_count > 0)"
+                  class="platform-status-row mb-2"
+                >
                   <!-- 状态 chip - 只在非 running 状态时显示 -->
                   <v-chip
                     v-if="getPlatformStat(item.id)?.status !== 'running'"
@@ -40,7 +80,12 @@
                     variant="tonal"
                     class="status-chip"
                   >
-                    <v-icon size="small" start>{{ getStatusIcon(getPlatformStat(item.id)?.status) }}</v-icon>
+                    <v-icon
+                      size="small"
+                      start
+                    >
+                      {{ getStatusIcon(getPlatformStat(item.id)?.status) }}
+                    </v-icon>
                     {{ tm('runtimeStatus.' + (getPlatformStat(item.id)?.status || 'unknown')) }}
                   </v-chip>
                   <!-- 错误数量提示 -->
@@ -53,11 +98,19 @@
                     :class="{ 'ms-2': getPlatformStat(item.id)?.status !== 'running' }"
                     @click.stop="showErrorDetails(item)"
                   >
-                    <v-icon size="small" start>mdi-bug</v-icon>
+                    <v-icon
+                      size="small"
+                      start
+                    >
+                      mdi-bug
+                    </v-icon>
                     {{ getPlatformStat(item.id)?.error_count }} {{ tm('runtimeStatus.errors') }}
                   </v-chip>
                 </div>
-                <div v-if="getPlatformStat(item.id)?.unified_webhook && item.webhook_uuid" class="webhook-info">
+                <div
+                  v-if="getPlatformStat(item.id)?.unified_webhook && item.webhook_uuid"
+                  class="webhook-info"
+                >
                   <v-chip
                     size="small"
                     color="primary"
@@ -65,7 +118,12 @@
                     class="webhook-chip"
                     @click.stop="openWebhookDialog(item.webhook_uuid)"
                   >
-                    <v-icon size="small" start>mdi-webhook</v-icon>
+                    <v-icon
+                      size="small"
+                      start
+                    >
+                      mdi-webhook
+                    </v-icon>
                     {{ tm('viewWebhook') }}
                   </v-chip>
                 </div>
@@ -76,12 +134,21 @@
       </div>
 
       <!-- 日志部分 -->
-      <v-card elevation="0" class="mt-4 mb-10">
+      <v-card
+        elevation="0"
+        class="mt-4 mb-10"
+      >
         <v-card-title class="d-flex align-center py-3 px-4">
-          <v-icon class="me-2">mdi-console-line</v-icon>
+          <v-icon class="me-2">
+            mdi-console-line
+          </v-icon>
           <span class="text-h4">{{ tm('logs.title') }}</span>
-          <v-spacer></v-spacer>
-          <v-btn variant="text" color="primary" @click="showConsole = !showConsole">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            color="primary"
+            @click="showConsole = !showConsole"
+          >
             {{ showConsole ? tm('logs.collapse') : tm('logs.expand') }}
             <v-icon>{{ showConsole ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
@@ -89,27 +156,48 @@
 
 
         <v-expand-transition>
-          <v-card-text class="pa-0" v-if="showConsole">
-            <ConsoleDisplayer style="background-color: #1e1e1e; height: 300px; border-radius: 0"></ConsoleDisplayer>
+          <v-card-text
+            v-if="showConsole"
+            class="pa-0"
+          >
+            <ConsoleDisplayer style="background-color: #1e1e1e; height: 300px; border-radius: 0" />
           </v-card-text>
         </v-expand-transition>
       </v-card>
     </v-container>
 
     <!-- 添加平台适配器对话框 -->
-    <AddNewPlatform v-model:show="showAddPlatformDialog" :metadata="metadata" :config_data="config_data" ref="addPlatformDialog"
-      :updating-mode="updatingMode" :updating-platform-config="updatingPlatformConfig" @update="getConfig"
-      @show-toast="showToast" @refresh-config="getConfig"/>
+    <AddNewPlatform
+      ref="addPlatformDialog"
+      v-model:show="showAddPlatformDialog"
+      :metadata="metadata"
+      :config_data="config_data"
+      :updating-mode="updatingMode"
+      :updating-platform-config="updatingPlatformConfig"
+      @update="getConfig"
+      @show-toast="showToast"
+      @refresh-config="getConfig"
+    />
 
     <!-- Webhook URL 对话框 -->
-    <v-dialog v-model="showWebhookDialog" max-width="600">
+    <v-dialog
+      v-model="showWebhookDialog"
+      max-width="600"
+    >
       <v-card>
         <v-card-title class="d-flex align-center pa-4">
-          <v-icon class="me-2" color="primary">mdi-webhook</v-icon>
+          <v-icon
+            class="me-2"
+            color="primary"
+          >
+            mdi-webhook
+          </v-icon>
           {{ tm('webhookDialog.title') }}
         </v-card-title>
         <v-card-text class="px-4 pb-2">
-          <p class="text-body-2 text-medium-emphasis mb-3">{{ tm('webhookDialog.description') }}</p>
+          <p class="text-body-2 text-medium-emphasis mb-3">
+            {{ tm('webhookDialog.description') }}
+          </p>
           <v-text-field
             :model-value="currentWebhookUrl"
             readonly
@@ -117,7 +205,7 @@
             hide-details
             class="webhook-url-field"
           >
-            <template v-slot:append-inner>
+            <template #append-inner>
               <v-btn
                 icon
                 size="small"
@@ -130,8 +218,12 @@
           </v-text-field>
         </v-card-text>
         <v-card-actions class="pa-4 pt-2">
-          <v-spacer></v-spacer>
-          <v-btn variant="tonal" color="primary" @click="showWebhookDialog = false">
+          <v-spacer />
+          <v-btn
+            variant="tonal"
+            color="primary"
+            @click="showWebhookDialog = false"
+          >
             {{ tm('webhookDialog.close') }}
           </v-btn>
         </v-card-actions>
@@ -139,25 +231,45 @@
     </v-dialog>
 
     <!-- 错误详情对话框 -->
-    <v-dialog v-model="showErrorDialog" max-width="700">
+    <v-dialog
+      v-model="showErrorDialog"
+      max-width="700"
+    >
       <v-card>
         <v-card-title class="d-flex align-center pa-4">
-          <v-icon class="me-2" color="error">mdi-alert-circle</v-icon>
+          <v-icon
+            class="me-2"
+            color="error"
+          >
+            mdi-alert-circle
+          </v-icon>
           {{ tm('errorDialog.title') }}
         </v-card-title>
-        <v-card-text class="px-4 pb-4" v-if="currentErrorPlatform">
+        <v-card-text
+          v-if="currentErrorPlatform"
+          class="px-4 pb-4"
+        >
           <div class="mb-3">
             <strong>{{ tm('errorDialog.platformId') }}:</strong> {{ currentErrorPlatform.id }}
           </div>
           <div class="mb-3">
             <strong>{{ tm('errorDialog.errorCount') }}:</strong> {{ currentErrorPlatform.error_count }}
           </div>
-          <div v-if="currentErrorPlatform.last_error" class="error-details">
+          <div
+            v-if="currentErrorPlatform.last_error"
+            class="error-details"
+          >
             <div class="mb-2">
               <strong>{{ tm('errorDialog.lastError') }}:</strong>
             </div>
-            <v-alert type="error" variant="tonal" class="mb-3">
-              <div class="error-message">{{ currentErrorPlatform.last_error.message }}</div>
+            <v-alert
+              type="error"
+              variant="tonal"
+              class="mb-3"
+            >
+              <div class="error-message">
+                {{ currentErrorPlatform.last_error.message }}
+              </div>
               <div class="error-time text-caption text-medium-emphasis mt-1">
                 {{ tm('errorDialog.occurredAt') }}: {{ new Date(currentErrorPlatform.last_error.timestamp).toLocaleString() }}
               </div>
@@ -171,8 +283,12 @@
           </div>
         </v-card-text>
         <v-card-actions class="pa-4 pt-0">
-          <v-spacer></v-spacer>
-          <v-btn variant="tonal" color="primary" @click="showErrorDialog = false">
+          <v-spacer />
+          <v-btn
+            variant="tonal"
+            color="primary"
+            @click="showErrorDialog = false"
+          >
             {{ tm('errorDialog.close') }}
           </v-btn>
         </v-card-actions>
@@ -180,8 +296,13 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack"
-      location="top">
+    <v-snackbar
+      v-model="save_message_snack"
+      :timeout="3000"
+      elevation="24"
+      :color="save_message_success"
+      location="top"
+    >
       {{ save_message }}
     </v-snackbar>
   </div>
@@ -252,6 +373,21 @@ export default {
       store: useCommonStore()
     }
   },
+  computed: {
+    // 安全访问翻译的计算属性
+    messages() {
+      return {
+        updateSuccess: this.tm('messages.updateSuccess'),
+        addSuccess: this.tm('messages.addSuccess'),
+        deleteSuccess: this.tm('messages.deleteSuccess'),
+        statusUpdateSuccess: this.tm('messages.statusUpdateSuccess'),
+        deleteConfirm: this.tm('messages.deleteConfirm')
+      };
+    },
+    currentWebhookUrl() {
+      return this.getWebhookUrl(this.currentWebhookUuid);
+    }
+  },
 
   watch: {
     showConsole(newValue) {
@@ -547,21 +683,6 @@ export default {
         this.showError(this.tm('webhookCopyFailed'));
       }
     }
-  },
-  computed: {
-    // 安全访问翻译的计算属性
-    messages() {
-      return {
-        updateSuccess: this.tm('messages.updateSuccess'),
-        addSuccess: this.tm('messages.addSuccess'),
-        deleteSuccess: this.tm('messages.deleteSuccess'),
-        statusUpdateSuccess: this.tm('messages.statusUpdateSuccess'),
-        deleteConfirm: this.tm('messages.deleteConfirm')
-      };
-    },
-    currentWebhookUrl() {
-      return this.getWebhookUrl(this.currentWebhookUuid);
-    }
   }
 }
 </script>
diff --git a/dashboard/src/views/ProviderPage.vue b/dashboard/src/views/ProviderPage.vue
index 1203bbc9c..b5ecf9366 100644
--- a/dashboard/src/views/ProviderPage.vue
+++ b/dashboard/src/views/ProviderPage.vue
@@ -1,19 +1,33 @@
 <template>
   <div class="provider-page">
-    <v-container fluid class="pa-0">
+    <v-container
+      fluid
+      class="pa-0"
+    >
       <!-- 页面标题 -->
       <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-4">
         <div>
           <h1 class="text-h1 font-weight-bold mb-2">
-            <v-icon color="black" class="me-2">mdi-creation</v-icon>{{ tm('title') }}
+            <v-icon
+              color="black"
+              class="me-2"
+            >
+              mdi-creation
+            </v-icon>{{ tm('title') }}
           </h1>
           <p class="text-subtitle-1 text-medium-emphasis mb-4">
             {{ tm('subtitle') }}
           </p>
         </div>
         <div v-if="selectedProviderType !== 'chat_completion'">
-          <v-btn color="primary" prepend-icon="mdi-plus" variant="tonal" @click="showAddProviderDialog = true"
-            rounded="xl" size="x-large">
+          <v-btn
+            color="primary"
+            prepend-icon="mdi-plus"
+            variant="tonal"
+            rounded="xl"
+            size="x-large"
+            @click="showAddProviderDialog = true"
+          >
             {{ tm('providers.addProvider') }}
           </v-btn>
         </div>
@@ -21,17 +35,36 @@
 
       <div>
         <!-- Provider Type 标签页 -->
-        <v-tabs v-model="selectedProviderType" bg-color="transparent" class="mb-4">
-          <v-tab v-for="type in providerTypes" :key="type.value" :value="type.value" class="font-weight-medium px-3">
-            <v-icon start>{{ type.icon }}</v-icon>
+        <v-tabs
+          v-model="selectedProviderType"
+          bg-color="transparent"
+          class="mb-4"
+        >
+          <v-tab
+            v-for="type in providerTypes"
+            :key="type.value"
+            :value="type.value"
+            class="font-weight-medium px-3"
+          >
+            <v-icon start>
+              {{ type.icon }}
+            </v-icon>
             {{ type.label }}
           </v-tab>
         </v-tabs>
 
         <!-- Chat Completion: 左侧列表 + 右侧上下卡片布局 -->
-        <div v-if="selectedProviderType === 'chat_completion'" class="d-flex align-center justify-center">
+        <div
+          v-if="selectedProviderType === 'chat_completion'"
+          class="d-flex align-center justify-center"
+        >
           <v-row style="max-width: 1500px; ">
-            <v-col cols="12" md="4" lg="3" class="pr-md-4">
+            <v-col
+              cols="12"
+              md="4"
+              lg="3"
+              class="pr-md-4"
+            >
               <ProviderSourcesPanel
                 :displayed-provider-sources="displayedProviderSources"
                 :selected-provider-source="selectedProviderSource"
@@ -45,20 +78,43 @@
               />
             </v-col>
 
-            <v-col cols="12" md="8" lg="9">
-              <v-card class="provider-config-card h-100" elevation="0" style="overflow-y: auto;">
+            <v-col
+              cols="12"
+              md="8"
+              lg="9"
+            >
+              <v-card
+                class="provider-config-card h-100"
+                elevation="0"
+                style="overflow-y: auto;"
+              >
                 <v-card-title class="d-flex align-center justify-space-between flex-wrap ga-3 pt-4 pl-5">
-                  <div class="d-flex align-center ga-3" v-if="selectedProviderSource">
+                  <div
+                    v-if="selectedProviderSource"
+                    class="d-flex align-center ga-3"
+                  >
                     <div>
-                      <div class="text-h4 font-weight-bold">{{ selectedProviderSource.id }}</div>
-                      <div class="text-caption text-medium-emphasis">{{ selectedProviderSource.api_base || 'N/A' }}
+                      <div class="text-h4 font-weight-bold">
+                        {{ selectedProviderSource.id }}
+                      </div>
+                      <div class="text-caption text-medium-emphasis">
+                        {{ selectedProviderSource.api_base || 'N/A' }}
                       </div>
                     </div>
                   </div>
 
-                  <div class="d-flex align-center ga-2" v-if="selectedProviderSource">
-                    <v-btn color="success" prepend-icon="mdi-check" :loading="savingSource"
-                      :disabled="!isSourceModified" @click="saveProviderSource" variant="flat">
+                  <div
+                    v-if="selectedProviderSource"
+                    class="d-flex align-center ga-2"
+                  >
+                    <v-btn
+                      color="success"
+                      prepend-icon="mdi-check"
+                      :loading="savingSource"
+                      :disabled="!isSourceModified"
+                      variant="flat"
+                      @click="saveProviderSource"
+                    >
                       {{ tm('providerSources.save') }}
                     </v-btn>
                   </div>
@@ -67,26 +123,42 @@
                 <v-card-text>
                   <template v-if="selectedProviderSource">
                     <div>
-                      <AstrBotConfig v-if="basicSourceConfig" :iterable="basicSourceConfig" :metadata="providerSourceSchema"
-                        metadataKey="provider" :is-editing="true" />
+                      <AstrBotConfig
+                        v-if="basicSourceConfig"
+                        :iterable="basicSourceConfig"
+                        :metadata="providerSourceSchema"
+                        metadata-key="provider"
+                        :is-editing="true"
+                      />
                     </div>
 
-                    <v-expansion-panels variant="accordion" class="mb-2">
-                      <v-expansion-panel elevation="0" class="border rounded-lg">
+                    <v-expansion-panels
+                      variant="accordion"
+                      class="mb-2"
+                    >
+                      <v-expansion-panel
+                        elevation="0"
+                        class="border rounded-lg"
+                      >
                         <v-expansion-panel-title>
                           <span class="font-weight-medium">{{ tm('providerSources.advancedConfig') }}</span>
                         </v-expansion-panel-title>
                         <v-expansion-panel-text>
-                          <AstrBotConfig v-if="advancedSourceConfig" :iterable="advancedSourceConfig"
-                            :metadata="providerSourceSchema" metadataKey="provider" :is-editing="true" />
+                          <AstrBotConfig
+                            v-if="advancedSourceConfig"
+                            :iterable="advancedSourceConfig"
+                            :metadata="providerSourceSchema"
+                            metadata-key="provider"
+                            :is-editing="true"
+                          />
                         </v-expansion-panel-text>
                       </v-expansion-panel>
                     </v-expansion-panels>
 
                     <ProviderModelsPanel
+                      v-model:model-search="modelSearch"
                       :entries="filteredMergedModelEntries"
                       :available-count="availableModels.length"
-                      v-model:model-search="modelSearch"
                       :loading-models="loadingModels"
                       :is-source-modified="isSourceModified"
                       :supports-image-input="supportsImageInput"
@@ -104,9 +176,19 @@
                       @add-model-provider="addModelProvider"
                     />
                   </template>
-                  <div v-else class="text-center py-8 text-medium-emphasis">
-                    <v-icon size="48" color="grey-lighten-1">mdi-cursor-default-click</v-icon>
-                    <p class="mt-2">{{ tm('providerSources.selectHint') }}</p>
+                  <div
+                    v-else
+                    class="text-center py-8 text-medium-emphasis"
+                  >
+                    <v-icon
+                      size="48"
+                      color="grey-lighten-1"
+                    >
+                      mdi-cursor-default-click
+                    </v-icon>
+                    <p class="mt-2">
+                      {{ tm('providerSources.selectHint') }}
+                    </p>
                   </div>
                 </v-card-text>
               </v-card>
@@ -117,27 +199,62 @@
         <!-- 其他类型: 卡片布局 -->
         <template v-else>
           <v-row v-if="filteredProviders.length === 0">
-            <v-col cols="12" class="text-center pa-8">
-              <v-icon size="64" color="grey-lighten-1">mdi-api-off</v-icon>
-              <p class="text-grey mt-4">{{ getEmptyText() }}</p>
+            <v-col
+              cols="12"
+              class="text-center pa-8"
+            >
+              <v-icon
+                size="64"
+                color="grey-lighten-1"
+              >
+                mdi-api-off
+              </v-icon>
+              <p class="text-grey mt-4">
+                {{ getEmptyText() }}
+              </p>
             </v-col>
           </v-row>
           <v-row v-else>
-            <v-col v-for="(provider, index) in filteredProviders" :key="index" cols="12" md="6" lg="4" xl="3">
-              <item-card :item="provider" title-field="id" enabled-field="enable"
-                :loading="isProviderTesting(provider.id)" @toggle-enabled="toggleProviderEnable(provider, !provider.enable)"
-                :bglogo="getProviderIcon(provider.provider)" @delete="deleteProvider" @edit="configExistingProvider"
-                @copy="copyProvider" :show-copy-button="true">
-
+            <v-col
+              v-for="(provider, index) in filteredProviders"
+              :key="index"
+              cols="12"
+              md="6"
+              lg="4"
+              xl="3"
+            >
+              <item-card
+                :item="provider"
+                title-field="id"
+                enabled-field="enable"
+                :loading="isProviderTesting(provider.id)"
+                :bglogo="getProviderIcon(provider.provider)"
+                :show-copy-button="true"
+                @toggle-enabled="toggleProviderEnable(provider, !provider.enable)"
+                @delete="deleteProvider"
+                @edit="configExistingProvider"
+                @copy="copyProvider"
+              >
                 <template #item-details="{ item }">
                   <!-- 测试状态 chip -->
-                  <v-tooltip v-if="getProviderStatus(item.id)" location="top" max-width="300">
-                    <template v-slot:activator="{ props }">
-                      <v-chip v-bind="props" :color="getStatusColor(getProviderStatus(item.id).status)" size="small">
-                        <v-icon start size="small">
+                  <v-tooltip
+                    v-if="getProviderStatus(item.id)"
+                    location="top"
+                    max-width="300"
+                  >
+                    <template #activator="{ props }">
+                      <v-chip
+                        v-bind="props"
+                        :color="getStatusColor(getProviderStatus(item.id).status)"
+                        size="small"
+                      >
+                        <v-icon
+                          start
+                          size="small"
+                        >
                           {{ getProviderStatus(item.id).status === 'available' ? 'mdi-check-circle' :
                             getProviderStatus(item.id).status === 'unavailable' ? 'mdi-alert-circle' :
-                              'mdi-clock-outline' }}
+                            'mdi-clock-outline' }}
                         </v-icon>
                         {{ getStatusText(getProviderStatus(item.id).status) }}
                       </v-chip>
@@ -149,8 +266,15 @@
                   </v-tooltip>
                 </template>
                 <template #actions="{ item }">
-                  <v-btn style="z-index: 100000;" variant="tonal" color="info" rounded="xl" size="small"
-                    :loading="isProviderTesting(item.id)" @click="testSingleProvider(item)">
+                  <v-btn
+                    style="z-index: 100000;"
+                    variant="tonal"
+                    color="info"
+                    rounded="xl"
+                    size="small"
+                    :loading="isProviderTesting(item.id)"
+                    @click="testSingleProvider(item)"
+                  >
                     {{ tm('availability.test') }}
                   </v-btn>
                 </template>
@@ -162,42 +286,88 @@
     </v-container>
 
     <!-- 添加提供商对话框 -->
-    <AddNewProvider v-model:show="showAddProviderDialog" :metadata="configSchema"
-      @select-template="selectProviderTemplate" />
+    <AddNewProvider
+      v-model:show="showAddProviderDialog"
+      :metadata="configSchema"
+      @select-template="selectProviderTemplate"
+    />
 
     <!-- 手动添加模型对话框 -->
-    <v-dialog v-model="showManualModelDialog" max-width="400">
+    <v-dialog
+      v-model="showManualModelDialog"
+      max-width="400"
+    >
       <v-card :title="tm('models.manualDialogTitle')">
         <v-card-text class="py-4">
-          <v-text-field v-model="manualModelId" :label="tm('models.manualDialogModelLabel')" flat variant="solo-filled" autofocus clearable></v-text-field>
-          <v-text-field :model-value="manualProviderId" flat variant="solo-filled" :label="tm('models.manualDialogPreviewLabel')" persistent-hint
-            :hint="tm('models.manualDialogPreviewHint')"></v-text-field>
+          <v-text-field
+            v-model="manualModelId"
+            :label="tm('models.manualDialogModelLabel')"
+            flat
+            variant="solo-filled"
+            autofocus
+            clearable
+          />
+          <v-text-field
+            :model-value="manualProviderId"
+            flat
+            variant="solo-filled"
+            :label="tm('models.manualDialogPreviewLabel')"
+            persistent-hint
+            :hint="tm('models.manualDialogPreviewHint')"
+          />
         </v-card-text>
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="showManualModelDialog = false">取消</v-btn>
-          <v-btn color="primary" @click="confirmManualModel">添加</v-btn>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="showManualModelDialog = false"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="primary"
+            @click="confirmManualModel"
+          >
+            添加
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- 配置对话框 -->
-    <v-dialog v-model="showProviderCfg" width="900" persistent>
+    <v-dialog
+      v-model="showProviderCfg"
+      width="900"
+      persistent
+    >
       <v-card
-        :title="updatingMode ? tm('dialogs.config.editTitle') : tm('dialogs.config.addTitle') + ` ${newSelectedProviderName} ` + tm('dialogs.config.provider')">
+        :title="updatingMode ? tm('dialogs.config.editTitle') : tm('dialogs.config.addTitle') + ` ${newSelectedProviderName} ` + tm('dialogs.config.provider')"
+      >
         <v-card-text class="py-4">
-          <AstrBotConfig :iterable="newSelectedProviderConfig" :metadata="configSchema"
-            metadataKey="provider" :is-editing="updatingMode" />
+          <AstrBotConfig
+            :iterable="newSelectedProviderConfig"
+            :metadata="configSchema"
+            metadata-key="provider"
+            :is-editing="updatingMode"
+          />
         </v-card-text>
 
-        <v-divider></v-divider>
+        <v-divider />
 
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="showProviderCfg = false" :disabled="loading">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="showProviderCfg = false"
+          >
             {{ tm('dialogs.config.cancel') }}
           </v-btn>
-          <v-btn color="primary" @click="newProvider" :loading="loading">
+          <v-btn
+            color="primary"
+            :loading="loading"
+            @click="newProvider"
+          >
             {{ tm('dialogs.config.save') }}
           </v-btn>
         </v-card-actions>
@@ -205,20 +375,35 @@
     </v-dialog>
 
     <!-- 已配置模型编辑对话框 -->
-    <v-dialog v-model="showProviderEditDialog" width="800">
+    <v-dialog
+      v-model="showProviderEditDialog"
+      width="800"
+    >
       <v-card :title="providerEditData?.id || tm('dialogs.config.editTitle')">
         <v-card-text class="py-4">
           <small style="color: gray;">不建议修改 ID，可能会导致指向该模型的相关配置（如默认模型、插件相关配置等）失效。旧版本 AstrBot 的 “提供商 ID” 是下方的 “ID”。</small>
-          <AstrBotConfig v-if="providerEditData" :iterable="providerEditData" :metadata="configSchema"
-            metadataKey="provider" :is-editing="true" />
+          <AstrBotConfig
+            v-if="providerEditData"
+            :iterable="providerEditData"
+            :metadata="configSchema"
+            metadata-key="provider"
+            :is-editing="true"
+          />
         </v-card-text>
         <v-card-actions class="pa-4">
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="showProviderEditDialog = false"
-            :disabled="savingProviders.includes(providerEditData?.id)">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            :disabled="savingProviders.includes(providerEditData?.id)"
+            @click="showProviderEditDialog = false"
+          >
             {{ tm('dialogs.config.cancel') }}
           </v-btn>
-          <v-btn color="primary" @click="saveEditedProvider" :loading="savingProviders.includes(providerEditData?.id)">
+          <v-btn
+            color="primary"
+            :loading="savingProviders.includes(providerEditData?.id)"
+            @click="saveEditedProvider"
+          >
             {{ tm('dialogs.config.save') }}
           </v-btn>
         </v-card-actions>
@@ -226,15 +411,29 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="3000" location="top">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top"
+    >
       {{ snackbar.message }}
     </v-snackbar>
 
     <!-- Agent Runner 测试提示对话框 -->
-    <v-dialog v-model="showAgentRunnerDialog" max-width="520" persistent>
+    <v-dialog
+      v-model="showAgentRunnerDialog"
+      max-width="520"
+      persistent
+    >
       <v-card>
         <v-card-title class="text-h3 d-flex align-center">
-          <v-icon start class="me-2">mdi-information</v-icon>
+          <v-icon
+            start
+            class="me-2"
+          >
+            mdi-information
+          </v-icon>
           请前往「配置文件」页测试 Agent 执行器
         </v-card-title>
         <v-card-text class="py-4 text-body-1 text-medium-emphasis">
@@ -247,9 +446,21 @@
           要让机器人应用这个 Agent 执行器，你也需要前往修改 Agent 执行器。
         </v-card-text>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="grey" variant="text" @click="showAgentRunnerDialog = false">好的</v-btn>
-          <v-btn color="primary" variant="flat" @click="goToConfigPage">点击前往</v-btn>
+          <v-spacer />
+          <v-btn
+            color="grey"
+            variant="text"
+            @click="showAgentRunnerDialog = false"
+          >
+            好的
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="goToConfigPage"
+          >
+            点击前往
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -420,7 +631,7 @@ function configExistingProvider(provider) {
   const mergeConfigWithOrder = (target, source, reference) => {
     if (source && typeof source === 'object' && !Array.isArray(source)) {
       for (let key in source) {
-        if (source.hasOwnProperty(key)) {
+        if (Object.hasOwn(source, key)) {
           if (typeof source[key] === 'object' && source[key] !== null) {
             target[key] = Array.isArray(source[key]) ? [...source[key]] : { ...source[key] }
           } else {
diff --git a/dashboard/src/views/SessionManagementPage.vue b/dashboard/src/views/SessionManagementPage.vue
index 0d195cf67..0b1c5759d 100644
--- a/dashboard/src/views/SessionManagementPage.vue
+++ b/dashboard/src/views/SessionManagementPage.vue
@@ -1,109 +1,261 @@
 <template>
   <div class="session-management-page">
-    <v-container fluid class="pa-0">
+    <v-container
+      fluid
+      class="pa-0"
+    >
       <v-card flat>
         <v-card-title class="d-flex align-center py-3 px-4">
           <span class="text-h4">{{ tm('customRules.title') }}</span>
-          <v-btn icon="mdi-information-outline" size="small" variant="text" href="https://astrbot.app/use/custom-rules.html" target="_blank"></v-btn>
-          <v-chip size="small" class="ml-1">{{ totalItems }} {{ tm('customRules.rulesCount') }}</v-chip>
-          <v-row class="me-4 ms-4" dense>
-            <v-text-field v-model="searchQuery" prepend-inner-icon="mdi-magnify" :label="tm('search.placeholder')"
-              hide-details clearable variant="solo-filled" flat class="me-4" density="compact"></v-text-field>
+          <v-btn
+            icon="mdi-information-outline"
+            size="small"
+            variant="text"
+            href="https://astrbot.app/use/custom-rules.html"
+            target="_blank"
+          />
+          <v-chip
+            size="small"
+            class="ml-1"
+          >
+            {{ totalItems }} {{ tm('customRules.rulesCount') }}
+          </v-chip>
+          <v-row
+            class="me-4 ms-4"
+            dense
+          >
+            <v-text-field
+              v-model="searchQuery"
+              prepend-inner-icon="mdi-magnify"
+              :label="tm('search.placeholder')"
+              hide-details
+              clearable
+              variant="solo-filled"
+              flat
+              class="me-4"
+              density="compact"
+            />
           </v-row>
-          <v-btn v-if="selectedItems.length > 0" color="error" prepend-icon="mdi-delete" variant="tonal"
-            @click="confirmBatchDelete" class="mr-2" size="small">
+          <v-btn
+            v-if="selectedItems.length > 0"
+            color="error"
+            prepend-icon="mdi-delete"
+            variant="tonal"
+            class="mr-2"
+            size="small"
+            @click="confirmBatchDelete"
+          >
             {{ tm('buttons.batchDelete') }} ({{ selectedItems.length }})
           </v-btn>
-          <v-btn color="success" prepend-icon="mdi-plus" variant="tonal" @click="openAddRuleDialog" class="mr-2"
-            size="small">
+          <v-btn
+            color="success"
+            prepend-icon="mdi-plus"
+            variant="tonal"
+            class="mr-2"
+            size="small"
+            @click="openAddRuleDialog"
+          >
             {{ tm('buttons.addRule') }}
           </v-btn>
-          <v-btn color="primary" prepend-icon="mdi-refresh" variant="tonal" @click="refreshData" :loading="loading"
-            size="small">
+          <v-btn
+            color="primary"
+            prepend-icon="mdi-refresh"
+            variant="tonal"
+            :loading="loading"
+            size="small"
+            @click="refreshData"
+          >
             {{ tm('buttons.refresh') }}
           </v-btn>
         </v-card-title>
 
-        <v-divider></v-divider>
+        <v-divider />
 
         <v-card-text class="pa-0">
-          <v-data-table-server :headers="headers" :items="filteredRulesList" :loading="loading"
-            :items-length="totalItems" v-model:items-per-page="itemsPerPage" v-model:page="currentPage"
-            @update:options="onTableOptionsUpdate" class="elevation-0" style="font-size: 12px;" v-model="selectedItems"
-            show-select item-value="umo" return-object>
-
+          <v-data-table-server
+            v-model:items-per-page="itemsPerPage"
+            v-model:page="currentPage"
+            v-model="selectedItems"
+            :headers="headers"
+            :items="filteredRulesList"
+            :loading="loading"
+            :items-length="totalItems"
+            class="elevation-0"
+            style="font-size: 12px;"
+            show-select
+            item-value="umo"
+            return-object
+            @update:options="onTableOptionsUpdate"
+          >
             <!-- UMO 信息 -->
-            <template v-slot:item.umo_info="{ item }">
+            <template #item.umo_info="{ item }">
               <div>
                 <div class="d-flex align-center">
-                  <v-chip size="x-small" :color="getPlatformColor(item.platform)" class="mr-2">
+                  <v-chip
+                    size="x-small"
+                    :color="getPlatformColor(item.platform)"
+                    class="mr-2"
+                  >
                     {{ item.platform || 'unknown' }}
                   </v-chip>
-                  <span class="text-truncate" style="max-width: 300px;">{{ item.umo }}</span>
-                  <div class="d-flex align-center" v-if="item.rules?.session_service_config?.custom_name || true">
-                    <span class="ml-2" style="color: gray; font-size: 10px;"
-                      v-if="item.rules?.session_service_config?.custom_name">
+                  <span
+                    class="text-truncate"
+                    style="max-width: 300px;"
+                  >{{ item.umo }}</span>
+                  <div
+                    v-if="item.rules?.session_service_config?.custom_name || true"
+                    class="d-flex align-center"
+                  >
+                    <span
+                      v-if="item.rules?.session_service_config?.custom_name"
+                      class="ml-2"
+                      style="color: gray; font-size: 10px;"
+                    >
                       ({{ item.rules?.session_service_config?.custom_name }})
                     </span>
-                    <v-btn icon size="x-small" variant="text" class="ml-1" @click.stop="openQuickEditName(item)">
-                      <v-icon size="small" color="grey">mdi-pencil-outline</v-icon>
-                      <v-tooltip activator="parent" location="top">{{ tm('buttons.editCustomName') }}</v-tooltip>
+                    <v-btn
+                      icon
+                      size="x-small"
+                      variant="text"
+                      class="ml-1"
+                      @click.stop="openQuickEditName(item)"
+                    >
+                      <v-icon
+                        size="small"
+                        color="grey"
+                      >
+                        mdi-pencil-outline
+                      </v-icon>
+                      <v-tooltip
+                        activator="parent"
+                        location="top"
+                      >
+                        {{ tm('buttons.editCustomName') }}
+                      </v-tooltip>
                     </v-btn>
                   </div>
                   <v-tooltip location="top">
-                    <template v-slot:activator="{ props }">
-                      <v-icon v-bind="props" size="small" class="ml-1">mdi-information-outline</v-icon>
+                    <template #activator="{ props }">
+                      <v-icon
+                        v-bind="props"
+                        size="small"
+                        class="ml-1"
+                      >
+                        mdi-information-outline
+                      </v-icon>
                     </template>
                     <div>
                       <p>UMO: {{ item.umo }}</p>
-                      <p v-if="item.platform">平台: {{ item.platform }}</p>
-                      <p v-if="item.message_type">消息类型: {{ item.message_type }}</p>
-                      <p v-if="item.session_id">会话 ID: {{ item.session_id }}</p>
+                      <p v-if="item.platform">
+                        平台: {{ item.platform }}
+                      </p>
+                      <p v-if="item.message_type">
+                        消息类型: {{ item.message_type }}
+                      </p>
+                      <p v-if="item.session_id">
+                        会话 ID: {{ item.session_id }}
+                      </p>
                     </div>
                   </v-tooltip>
                 </div>
-
               </div>
             </template>
 
             <!-- 规则概览 -->
-            <template v-slot:item.rules_overview="{ item }">
+            <template #item.rules_overview="{ item }">
               <div class="d-flex flex-wrap ga-1">
-                <v-chip v-if="item.rules.session_service_config" size="x-small" color="primary" variant="outlined">
+                <v-chip
+                  v-if="item.rules.session_service_config"
+                  size="x-small"
+                  color="primary"
+                  variant="outlined"
+                >
                   {{ tm('customRules.serviceConfig') }}
                 </v-chip>
-                <v-chip v-if="item.rules.session_plugin_config" size="x-small" color="secondary" variant="outlined">
+                <v-chip
+                  v-if="item.rules.session_plugin_config"
+                  size="x-small"
+                  color="secondary"
+                  variant="outlined"
+                >
                   {{ tm('customRules.pluginConfig') }}
                 </v-chip>
-                <v-chip v-if="item.rules.kb_config" size="x-small" color="info" variant="outlined">
+                <v-chip
+                  v-if="item.rules.kb_config"
+                  size="x-small"
+                  color="info"
+                  variant="outlined"
+                >
                   {{ tm('customRules.kbConfig') }}
                 </v-chip>
-                <v-chip v-if="hasProviderConfig(item.rules)" size="x-small" color="warning" variant="outlined">
+                <v-chip
+                  v-if="hasProviderConfig(item.rules)"
+                  size="x-small"
+                  color="warning"
+                  variant="outlined"
+                >
                   {{ tm('customRules.providerConfig') }}
                 </v-chip>
               </div>
             </template>
 
             <!-- 操作按钮 -->
-            <template v-slot:item.actions="{ item }">
-              <v-btn size="small" variant="tonal" color="primary" @click="openRuleEditor(item)" class="mr-1">
+            <template #item.actions="{ item }">
+              <v-btn
+                size="small"
+                variant="tonal"
+                color="primary"
+                class="mr-1"
+                @click="openRuleEditor(item)"
+              >
                 <v-icon>mdi-pencil</v-icon>
-                <v-tooltip activator="parent" location="top">{{ tm('buttons.editRule') }}</v-tooltip>
+                <v-tooltip
+                  activator="parent"
+                  location="top"
+                >
+                  {{ tm('buttons.editRule') }}
+                </v-tooltip>
               </v-btn>
-              <v-btn size="small" variant="tonal" color="error" @click="confirmDeleteRules(item)">
+              <v-btn
+                size="small"
+                variant="tonal"
+                color="error"
+                @click="confirmDeleteRules(item)"
+              >
                 <v-icon>mdi-delete</v-icon>
-                <v-tooltip activator="parent" location="top">{{ tm('buttons.deleteAllRules') }}</v-tooltip>
+                <v-tooltip
+                  activator="parent"
+                  location="top"
+                >
+                  {{ tm('buttons.deleteAllRules') }}
+                </v-tooltip>
               </v-btn>
             </template>
 
             <!-- 空状态 -->
-            <template v-slot:no-data>
+            <template #no-data>
               <div class="text-center py-8">
-                <v-icon size="64" color="grey-400">mdi-file-document-edit-outline</v-icon>
-                <div class="text-h6 mt-4 text-grey-600">{{ tm('customRules.noRules') }}</div>
-                <div class="text-body-2 text-grey-500">{{ tm('customRules.noRulesDesc') }}</div>
-                <v-btn color="primary" variant="tonal" class="mt-4" @click="openAddRuleDialog">
-                  <v-icon start>mdi-plus</v-icon>
+                <v-icon
+                  size="64"
+                  color="grey-400"
+                >
+                  mdi-file-document-edit-outline
+                </v-icon>
+                <div class="text-h6 mt-4 text-grey-600">
+                  {{ tm('customRules.noRules') }}
+                </div>
+                <div class="text-body-2 text-grey-500">
+                  {{ tm('customRules.noRulesDesc') }}
+                </div>
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  class="mt-4"
+                  @click="openAddRuleDialog"
+                >
+                  <v-icon start>
+                    mdi-plus
+                  </v-icon>
                   {{ tm('buttons.addRule') }}
                 </v-btn>
               </div>
@@ -112,40 +264,112 @@
         </v-card-text>
       </v-card>
       <!-- 批量操作面板 -->
-      <v-card flat class="mt-4">
+      <v-card
+        flat
+        class="mt-4"
+      >
         <v-card-title class="d-flex align-center py-3 px-4">
           <span class="text-h6">{{ tm('batchOperations.title') }}</span>
-          <v-chip size="small" class="ml-2" color="info" variant="outlined">
+          <v-chip
+            size="small"
+            class="ml-2"
+            color="info"
+            variant="outlined"
+          >
             {{ tm('batchOperations.hint') }}
           </v-chip>
         </v-card-title>
         <v-card-text>
           <v-row dense>
-            <v-col cols="12" md="6" lg="3">
-              <v-select v-model="batchScope" :items="batchScopeOptions" item-title="label" item-value="value"
-                :label="tm('batchOperations.scope')" hide-details variant="solo-filled" flat density="comfortable">
-              </v-select>
+            <v-col
+              cols="12"
+              md="6"
+              lg="3"
+            >
+              <v-select
+                v-model="batchScope"
+                :items="batchScopeOptions"
+                item-title="label"
+                item-value="value"
+                :label="tm('batchOperations.scope')"
+                hide-details
+                variant="solo-filled"
+                flat
+                density="comfortable"
+              />
             </v-col>
-            <v-col cols="12" md="6" lg="3">
-              <v-select v-model="batchLlmStatus" :items="statusOptions" item-title="label" item-value="value"
-                :label="tm('batchOperations.llmStatus')" hide-details clearable variant="solo-filled" flat density="comfortable">
-              </v-select>
+            <v-col
+              cols="12"
+              md="6"
+              lg="3"
+            >
+              <v-select
+                v-model="batchLlmStatus"
+                :items="statusOptions"
+                item-title="label"
+                item-value="value"
+                :label="tm('batchOperations.llmStatus')"
+                hide-details
+                clearable
+                variant="solo-filled"
+                flat
+                density="comfortable"
+              />
             </v-col>
-            <v-col cols="12" md="6" lg="3">
-              <v-select v-model="batchTtsStatus" :items="statusOptions" item-title="label" item-value="value"
-                :label="tm('batchOperations.ttsStatus')" hide-details clearable variant="solo-filled" flat density="comfortable">
-              </v-select>
+            <v-col
+              cols="12"
+              md="6"
+              lg="3"
+            >
+              <v-select
+                v-model="batchTtsStatus"
+                :items="statusOptions"
+                item-title="label"
+                item-value="value"
+                :label="tm('batchOperations.ttsStatus')"
+                hide-details
+                clearable
+                variant="solo-filled"
+                flat
+                density="comfortable"
+              />
             </v-col>
-            <v-col cols="12" md="6" lg="3">
-              <v-select v-model="batchChatProvider" :items="chatProviderOptions" item-title="label" item-value="value"
-                :label="tm('batchOperations.chatProvider')" hide-details clearable variant="solo-filled" flat density="comfortable">
-              </v-select>
+            <v-col
+              cols="12"
+              md="6"
+              lg="3"
+            >
+              <v-select
+                v-model="batchChatProvider"
+                :items="chatProviderOptions"
+                item-title="label"
+                item-value="value"
+                :label="tm('batchOperations.chatProvider')"
+                hide-details
+                clearable
+                variant="solo-filled"
+                flat
+                density="comfortable"
+              />
             </v-col>
           </v-row>
-          <v-row dense class="mt-3">
-            <v-col cols="12" class="d-flex justify-end">
-              <v-btn color="primary" variant="tonal" size="large" @click="applyBatchChanges"
-                :disabled="!canApplyBatch" :loading="batchUpdating" prepend-icon="mdi-check-all">
+          <v-row
+            dense
+            class="mt-3"
+          >
+            <v-col
+              cols="12"
+              class="d-flex justify-end"
+            >
+              <v-btn
+                color="primary"
+                variant="tonal"
+                size="large"
+                :disabled="!canApplyBatch"
+                :loading="batchUpdating"
+                prepend-icon="mdi-check-all"
+                @click="applyBatchChanges"
+              >
                 {{ tm('batchOperations.apply') }}
               </v-btn>
             </v-col>
@@ -154,43 +378,98 @@
       </v-card>
 
       <!-- 分组管理面板 -->
-      <v-card flat class="mt-4">
+      <v-card
+        flat
+        class="mt-4"
+      >
         <v-card-title class="d-flex align-center py-3 px-4">
           <span class="text-h6">{{ tm('groups.title') }}</span>
-          <v-chip size="small" class="ml-2" color="secondary" variant="outlined">
+          <v-chip
+            size="small"
+            class="ml-2"
+            color="secondary"
+            variant="outlined"
+          >
             {{ tm('groups.count', { count: groups.length }) }}
           </v-chip>
-          <v-spacer></v-spacer>
-          <v-btn v-if="selectedItems.length > 0 && groups.length > 0" color="info" variant="tonal" size="small" class="mr-2">
-            <v-icon start>mdi-folder-plus</v-icon>
+          <v-spacer />
+          <v-btn
+            v-if="selectedItems.length > 0 && groups.length > 0"
+            color="info"
+            variant="tonal"
+            size="small"
+            class="mr-2"
+          >
+            <v-icon start>
+              mdi-folder-plus
+            </v-icon>
             {{ tm('groups.addToGroup') }}
             <v-menu activator="parent">
               <v-list density="compact">
-                <v-list-item v-for="g in groups" :key="g.id" @click="addSelectedToGroup(g.id)">
+                <v-list-item
+                  v-for="g in groups"
+                  :key="g.id"
+                  @click="addSelectedToGroup(g.id)"
+                >
                   <v-list-item-title>{{ tm('groups.customGroupOption', { name: g.name, count: g.umo_count }) }}</v-list-item-title>
                 </v-list-item>
               </v-list>
             </v-menu>
           </v-btn>
-          <v-btn color="success" variant="tonal" size="small" @click="openCreateGroupDialog" prepend-icon="mdi-folder-plus">
+          <v-btn
+            color="success"
+            variant="tonal"
+            size="small"
+            prepend-icon="mdi-folder-plus"
+            @click="openCreateGroupDialog"
+          >
             {{ tm('groups.create') }}
           </v-btn>
         </v-card-title>
         <v-card-text v-if="groups.length > 0">
           <v-row dense>
-            <v-col v-for="group in groups" :key="group.id" cols="12" sm="6" md="4" lg="3">
-              <v-card variant="outlined" class="pa-3">
+            <v-col
+              v-for="group in groups"
+              :key="group.id"
+              cols="12"
+              sm="6"
+              md="4"
+              lg="3"
+            >
+              <v-card
+                variant="outlined"
+                class="pa-3"
+              >
                 <div class="d-flex align-center justify-space-between">
                   <div>
-                    <div class="font-weight-bold">{{ group.name }}</div>
-                    <div class="text-caption text-grey">{{ tm('groups.sessionsCount', { count: group.umo_count }) }}</div>
+                    <div class="font-weight-bold">
+                      {{ group.name }}
+                    </div>
+                    <div class="text-caption text-grey">
+                      {{ tm('groups.sessionsCount', { count: group.umo_count }) }}
+                    </div>
                   </div>
                   <div>
-                    <v-btn icon size="small" variant="text" @click="openEditGroupDialog(group)">
-                      <v-icon size="small">mdi-pencil</v-icon>
+                    <v-btn
+                      icon
+                      size="small"
+                      variant="text"
+                      @click="openEditGroupDialog(group)"
+                    >
+                      <v-icon size="small">
+                        mdi-pencil
+                      </v-icon>
                     </v-btn>
-                    <v-btn icon size="small" variant="text" color="error" @click="deleteGroup(group)">
-                      <v-icon size="small">mdi-delete</v-icon>
+                    <v-btn
+                      icon
+                      size="small"
+                      variant="text"
+                      color="error"
+                      @click="deleteGroup(group)"
+                    >
+                      <v-icon size="small">
+                        mdi-delete
+                      </v-icon>
                     </v-btn>
                   </div>
                 </div>
@@ -198,98 +477,234 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-card-text v-else class="text-center text-grey py-6">
+        <v-card-text
+          v-else
+          class="text-center text-grey py-6"
+        >
           {{ tm('groups.empty') }}
         </v-card-text>
       </v-card>
 
       <!-- 分组编辑对话框 -->
-      <v-dialog v-model="groupDialog" max-width="800" @after-enter="loadAvailableUmos">
+      <v-dialog
+        v-model="groupDialog"
+        max-width="800"
+        @after-enter="loadAvailableUmos"
+      >
         <v-card>
           <v-card-title class="py-3 px-4">
             {{ groupDialogMode === 'create' ? tm('groups.create') : tm('groups.edit') }}
           </v-card-title>
           <v-card-text>
-            <v-text-field v-model="editingGroup.name" :label="tm('groups.name')" variant="outlined" hide-details class="mb-4"></v-text-field>
+            <v-text-field
+              v-model="editingGroup.name"
+              :label="tm('groups.name')"
+              variant="outlined"
+              hide-details
+              class="mb-4"
+            />
             <v-row dense>
               <!-- 左侧：可选会话 -->
               <v-col cols="5">
-                <div class="text-subtitle-2 mb-2">{{ tm('groups.availableSessions', { count: unselectedUmos.length }) }}</div>
-                <v-text-field v-model="groupMemberSearch" :placeholder="tm('groups.searchPlaceholder')" variant="outlined" density="compact" hide-details class="mb-2" clearable prepend-inner-icon="mdi-magnify"></v-text-field>
-                <v-list density="compact" class="transfer-list" lines="one">
-                  <v-list-item v-for="umo in filteredUnselectedUmos" :key="umo" @click="addToGroup(umo)" class="transfer-item">
-                    <template v-slot:prepend>
-                      <v-icon size="small" color="grey">mdi-plus</v-icon>
+                <div class="text-subtitle-2 mb-2">
+                  {{ tm('groups.availableSessions', { count: unselectedUmos.length }) }}
+                </div>
+                <v-text-field
+                  v-model="groupMemberSearch"
+                  :placeholder="tm('groups.searchPlaceholder')"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                  class="mb-2"
+                  clearable
+                  prepend-inner-icon="mdi-magnify"
+                />
+                <v-list
+                  density="compact"
+                  class="transfer-list"
+                  lines="one"
+                >
+                  <v-list-item
+                    v-for="umo in filteredUnselectedUmos"
+                    :key="umo"
+                    class="transfer-item"
+                    @click="addToGroup(umo)"
+                  >
+                    <template #prepend>
+                      <v-icon
+                        size="small"
+                        color="grey"
+                      >
+                        mdi-plus
+                      </v-icon>
                     </template>
-                    <v-list-item-title class="text-caption">{{ formatUmoShort(umo) }}</v-list-item-title>
+                    <v-list-item-title class="text-caption">
+                      {{ formatUmoShort(umo) }}
+                    </v-list-item-title>
                   </v-list-item>
                   <v-list-item v-if="filteredUnselectedUmos.length === 0 && !loadingUmos">
-                    <v-list-item-title class="text-caption text-grey text-center">{{ tm('groups.noMatch') }}</v-list-item-title>
+                    <v-list-item-title class="text-caption text-grey text-center">
+                      {{ tm('groups.noMatch') }}
+                    </v-list-item-title>
                   </v-list-item>
                   <v-list-item v-if="loadingUmos">
-                    <v-list-item-title class="text-center"><v-progress-circular indeterminate size="20"></v-progress-circular></v-list-item-title>
+                    <v-list-item-title class="text-center">
+                      <v-progress-circular
+                        indeterminate
+                        size="20"
+                      />
+                    </v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-col>
               <!-- 中间：操作按钮 -->
-              <v-col cols="2" class="d-flex flex-column align-center justify-center">
-                <v-btn icon size="small" variant="tonal" color="primary" class="mb-2" @click="addAllToGroup" :disabled="unselectedUmos.length === 0">
+              <v-col
+                cols="2"
+                class="d-flex flex-column align-center justify-center"
+              >
+                <v-btn
+                  icon
+                  size="small"
+                  variant="tonal"
+                  color="primary"
+                  class="mb-2"
+                  :disabled="unselectedUmos.length === 0"
+                  @click="addAllToGroup"
+                >
                   <v-icon>mdi-chevron-double-right</v-icon>
                 </v-btn>
-                <v-btn icon size="small" variant="tonal" color="error" @click="removeAllFromGroup" :disabled="editingGroup.umos.length === 0">
+                <v-btn
+                  icon
+                  size="small"
+                  variant="tonal"
+                  color="error"
+                  :disabled="editingGroup.umos.length === 0"
+                  @click="removeAllFromGroup"
+                >
                   <v-icon>mdi-chevron-double-left</v-icon>
                 </v-btn>
               </v-col>
               <!-- 右侧：已选会话 -->
               <v-col cols="5">
-                <div class="text-subtitle-2 mb-2">{{ tm('groups.selectedSessions', { count: editingGroup.umos.length }) }}</div>
-                <v-text-field v-model="groupSelectedSearch" :placeholder="tm('groups.searchPlaceholder')" variant="outlined" density="compact" hide-details class="mb-2" clearable prepend-inner-icon="mdi-magnify"></v-text-field>
-                <v-list density="compact" class="transfer-list" lines="one">
-                  <v-list-item v-for="umo in filteredSelectedUmos" :key="umo" @click="removeFromGroup(umo)" class="transfer-item">
-                    <template v-slot:prepend>
-                      <v-icon size="small" color="error">mdi-minus</v-icon>
+                <div class="text-subtitle-2 mb-2">
+                  {{ tm('groups.selectedSessions', { count: editingGroup.umos.length }) }}
+                </div>
+                <v-text-field
+                  v-model="groupSelectedSearch"
+                  :placeholder="tm('groups.searchPlaceholder')"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                  class="mb-2"
+                  clearable
+                  prepend-inner-icon="mdi-magnify"
+                />
+                <v-list
+                  density="compact"
+                  class="transfer-list"
+                  lines="one"
+                >
+                  <v-list-item
+                    v-for="umo in filteredSelectedUmos"
+                    :key="umo"
+                    class="transfer-item"
+                    @click="removeFromGroup(umo)"
+                  >
+                    <template #prepend>
+                      <v-icon
+                        size="small"
+                        color="error"
+                      >
+                        mdi-minus
+                      </v-icon>
                     </template>
-                    <v-list-item-title class="text-caption">{{ formatUmoShort(umo) }}</v-list-item-title>
+                    <v-list-item-title class="text-caption">
+                      {{ formatUmoShort(umo) }}
+                    </v-list-item-title>
                   </v-list-item>
                   <v-list-item v-if="editingGroup.umos.length === 0">
-                    <v-list-item-title class="text-caption text-grey text-center">{{ tm('groups.noMembers') }}</v-list-item-title>
+                    <v-list-item-title class="text-caption text-grey text-center">
+                      {{ tm('groups.noMembers') }}
+                    </v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-col>
             </v-row>
           </v-card-text>
           <v-card-actions class="px-4 pb-4">
-            <v-spacer></v-spacer>
-            <v-btn variant="text" @click="groupDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-            <v-btn color="primary" variant="tonal" @click="saveGroup">{{ tm('buttons.save') }}</v-btn>
+            <v-spacer />
+            <v-btn
+              variant="text"
+              @click="groupDialog = false"
+            >
+              {{ tm('buttons.cancel') }}
+            </v-btn>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              @click="saveGroup"
+            >
+              {{ tm('buttons.save') }}
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
 
       <!-- 添加规则对话框 - 选择 UMO -->
-      <v-dialog v-model="addRuleDialog" max-width="600">
+      <v-dialog
+        v-model="addRuleDialog"
+        max-width="600"
+      >
         <v-card>
-          <v-card-title class="py-3 px-4" style="display: flex; align-items: center;">
+          <v-card-title
+            class="py-3 px-4"
+            style="display: flex; align-items: center;"
+          >
             <span>{{ tm('addRule.title') }}</span>
-            <v-spacer></v-spacer>
-            <v-btn icon variant="text" @click="addRuleDialog = false">
+            <v-spacer />
+            <v-btn
+              icon
+              variant="text"
+              @click="addRuleDialog = false"
+            >
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-card-title>
 
           <v-card-text class="pa-4">
-            <v-alert type="info" variant="tonal" class="mb-4">
+            <v-alert
+              type="info"
+              variant="tonal"
+              class="mb-4"
+            >
               {{ tm('addRule.description') }}
             </v-alert>
 
-            <v-autocomplete v-model="selectedNewUmo" :items="availableUmos" :loading="loadingUmos"
-              :label="tm('addRule.selectUmo')" variant="outlined" clearable :no-data-text="tm('addRule.noUmos')" />
+            <v-autocomplete
+              v-model="selectedNewUmo"
+              :items="availableUmos"
+              :loading="loadingUmos"
+              :label="tm('addRule.selectUmo')"
+              variant="outlined"
+              clearable
+              :no-data-text="tm('addRule.noUmos')"
+            />
           </v-card-text>
 
           <v-card-actions class="px-4 pb-4">
-            <v-spacer></v-spacer>
-            <v-btn variant="text" @click="addRuleDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-            <v-btn color="primary" variant="tonal" @click="createNewRule" :disabled="!selectedNewUmo">
+            <v-spacer />
+            <v-btn
+              variant="text"
+              @click="addRuleDialog = false"
+            >
+              {{ tm('buttons.cancel') }}
+            </v-btn>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              :disabled="!selectedNewUmo"
+              @click="createNewRule"
+            >
               {{ tm('buttons.next') }}
             </v-btn>
           </v-card-actions>
@@ -297,154 +712,316 @@
       </v-dialog>
 
       <!-- 规则编辑对话框 -->
-      <v-dialog v-model="ruleDialog" max-width="550" scrollable>
-        <v-card v-if="selectedUmo" class="d-flex flex-column" height="600">
+      <v-dialog
+        v-model="ruleDialog"
+        max-width="550"
+        scrollable
+      >
+        <v-card
+          v-if="selectedUmo"
+          class="d-flex flex-column"
+          height="600"
+        >
           <v-card-title class="py-3 px-6 d-flex align-center border-b">
             <span>{{ tm('ruleEditor.title') }}</span>
-            <v-chip size="x-small" class="ml-2 font-weight-regular" variant="outlined">
+            <v-chip
+              size="x-small"
+              class="ml-2 font-weight-regular"
+              variant="outlined"
+            >
               {{ selectedUmo.umo }}
             </v-chip>
-            <v-spacer></v-spacer>
-            <v-btn icon="mdi-close" variant="text" @click="closeRuleEditor"></v-btn>
+            <v-spacer />
+            <v-btn
+              icon="mdi-close"
+              variant="text"
+              @click="closeRuleEditor"
+            />
           </v-card-title>
 
           <v-card-text class="pa-0 overflow-y-auto">
             <div class="px-6 py-4">
               <!-- Service Config Section -->
               <div class="d-flex align-center mb-4">
-                <h3 class="font-weight-bold mb-0">{{ tm('ruleEditor.serviceConfig.title') }}</h3>
+                <h3 class="font-weight-bold mb-0">
+                  {{ tm('ruleEditor.serviceConfig.title') }}
+                </h3>
               </div>
 
               <v-row dense>
                 <v-col cols="12">
-                  <v-checkbox v-model="serviceConfig.session_enabled"
-                    :label="tm('ruleEditor.serviceConfig.sessionEnabled')" color="success" hide-details class="mb-2" />
+                  <v-checkbox
+                    v-model="serviceConfig.session_enabled"
+                    :label="tm('ruleEditor.serviceConfig.sessionEnabled')"
+                    color="success"
+                    hide-details
+                    class="mb-2"
+                  />
                 </v-col>
-                <v-col cols="12" md="6">
-                  <v-checkbox v-model="serviceConfig.llm_enabled" :label="tm('ruleEditor.serviceConfig.llmEnabled')"
-                    color="primary" hide-details />
+                <v-col
+                  cols="12"
+                  md="6"
+                >
+                  <v-checkbox
+                    v-model="serviceConfig.llm_enabled"
+                    :label="tm('ruleEditor.serviceConfig.llmEnabled')"
+                    color="primary"
+                    hide-details
+                  />
                 </v-col>
-                <v-col cols="12" md="6">
-                  <v-checkbox v-model="serviceConfig.tts_enabled" :label="tm('ruleEditor.serviceConfig.ttsEnabled')"
-                    color="secondary" hide-details />
+                <v-col
+                  cols="12"
+                  md="6"
+                >
+                  <v-checkbox
+                    v-model="serviceConfig.tts_enabled"
+                    :label="tm('ruleEditor.serviceConfig.ttsEnabled')"
+                    color="secondary"
+                    hide-details
+                  />
                 </v-col>
-                <v-col cols="12" class="mt-2">
-                  <v-text-field v-model="serviceConfig.custom_name" :label="tm('ruleEditor.serviceConfig.customName')"
-                    variant="outlined" hide-details clearable />
+                <v-col
+                  cols="12"
+                  class="mt-2"
+                >
+                  <v-text-field
+                    v-model="serviceConfig.custom_name"
+                    :label="tm('ruleEditor.serviceConfig.customName')"
+                    variant="outlined"
+                    hide-details
+                    clearable
+                  />
                 </v-col>
               </v-row>
 
               <div class="d-flex justify-end mt-4">
-                <v-btn color="primary" variant="tonal" size="small" @click="saveServiceConfig" :loading="saving"
-                  prepend-icon="mdi-content-save">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  size="small"
+                  :loading="saving"
+                  prepend-icon="mdi-content-save"
+                  @click="saveServiceConfig"
+                >
                   {{ tm('buttons.save') }}
                 </v-btn>
               </div>
 
               <!-- Provider Config Section -->
               <div class="d-flex align-center mb-4 mt-4">
-                <h3 class="font-weight-bold mb-0">{{ tm('ruleEditor.providerConfig.title') }}</h3>
+                <h3 class="font-weight-bold mb-0">
+                  {{ tm('ruleEditor.providerConfig.title') }}
+                </h3>
               </div>
 
               <v-row dense>
                 <v-col cols="12">
-                  <v-select v-model="providerConfig.chat_completion" :items="chatProviderOptions" item-title="label"
-                    item-value="value" :label="tm('ruleEditor.providerConfig.chatProvider')" variant="outlined"
-                    hide-details class="mb-2" />
+                  <v-select
+                    v-model="providerConfig.chat_completion"
+                    :items="chatProviderOptions"
+                    item-title="label"
+                    item-value="value"
+                    :label="tm('ruleEditor.providerConfig.chatProvider')"
+                    variant="outlined"
+                    hide-details
+                    class="mb-2"
+                  />
                 </v-col>
                 <v-col cols="12">
-                  <v-select v-model="providerConfig.speech_to_text" :items="sttProviderOptions" item-title="label"
-                    item-value="value" :label="tm('ruleEditor.providerConfig.sttProvider')" variant="outlined"
-                    hide-details :disabled="availableSttProviders.length === 0" class="mb-2" />
+                  <v-select
+                    v-model="providerConfig.speech_to_text"
+                    :items="sttProviderOptions"
+                    item-title="label"
+                    item-value="value"
+                    :label="tm('ruleEditor.providerConfig.sttProvider')"
+                    variant="outlined"
+                    hide-details
+                    :disabled="availableSttProviders.length === 0"
+                    class="mb-2"
+                  />
                 </v-col>
                 <v-col cols="12">
-                  <v-select v-model="providerConfig.text_to_speech" :items="ttsProviderOptions" item-title="label"
-                    item-value="value" :label="tm('ruleEditor.providerConfig.ttsProvider')" variant="outlined"
-                    hide-details :disabled="availableTtsProviders.length === 0" />
+                  <v-select
+                    v-model="providerConfig.text_to_speech"
+                    :items="ttsProviderOptions"
+                    item-title="label"
+                    item-value="value"
+                    :label="tm('ruleEditor.providerConfig.ttsProvider')"
+                    variant="outlined"
+                    hide-details
+                    :disabled="availableTtsProviders.length === 0"
+                  />
                 </v-col>
               </v-row>
 
               <div class="d-flex justify-end mt-4">
-                <v-btn color="primary" variant="tonal" size="small" @click="saveProviderConfig" :loading="saving"
-                  prepend-icon="mdi-content-save">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  size="small"
+                  :loading="saving"
+                  prepend-icon="mdi-content-save"
+                  @click="saveProviderConfig"
+                >
                   {{ tm('buttons.save') }}
                 </v-btn>
               </div>
 
               <!-- Persona Config Section -->
               <div class="d-flex align-center mb-4 mt-4">
-                <h3 class="font-weight-bold mb-0">{{ tm('ruleEditor.personaConfig.title') }}</h3>
+                <h3 class="font-weight-bold mb-0">
+                  {{ tm('ruleEditor.personaConfig.title') }}
+                </h3>
               </div>
 
               <v-row dense>
                 <v-col cols="12">
-                  <v-select v-model="serviceConfig.persona_id" :items="personaOptions" item-title="label"
-                    item-value="value" :label="tm('ruleEditor.personaConfig.selectPersona')" variant="outlined"
-                    hide-details clearable />
+                  <v-select
+                    v-model="serviceConfig.persona_id"
+                    :items="personaOptions"
+                    item-title="label"
+                    item-value="value"
+                    :label="tm('ruleEditor.personaConfig.selectPersona')"
+                    variant="outlined"
+                    hide-details
+                    clearable
+                  />
                 </v-col>
                 <v-col cols="12">
-                  <v-alert type="info" variant="tonal" class="mt-2" icon="mdi-information-outline">
+                  <v-alert
+                    type="info"
+                    variant="tonal"
+                    class="mt-2"
+                    icon="mdi-information-outline"
+                  >
                     {{ tm('ruleEditor.personaConfig.hint') }}
                   </v-alert>
                 </v-col>
               </v-row>
 
               <div class="d-flex justify-end mt-4">
-                <v-btn color="primary" variant="tonal" size="small" @click="saveServiceConfig" :loading="saving"
-                  prepend-icon="mdi-content-save">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  size="small"
+                  :loading="saving"
+                  prepend-icon="mdi-content-save"
+                  @click="saveServiceConfig"
+                >
                   {{ tm('buttons.save') }}
                 </v-btn>
               </div>
 
               <!-- Plugin Config Section -->
               <div class="d-flex align-center mb-4 mt-4">
-                <h3 class="font-weight-bold mb-0">{{ tm('ruleEditor.pluginConfig.title') }}</h3>
+                <h3 class="font-weight-bold mb-0">
+                  {{ tm('ruleEditor.pluginConfig.title') }}
+                </h3>
               </div>
 
               <v-row dense>
                 <v-col cols="12">
-                  <v-select v-model="pluginConfig.disabled_plugins" :items="pluginOptions" item-title="label"
-                    item-value="value" :label="tm('ruleEditor.pluginConfig.disabledPlugins')" variant="outlined"
-                    hide-details multiple chips closable-chips clearable />
+                  <v-select
+                    v-model="pluginConfig.disabled_plugins"
+                    :items="pluginOptions"
+                    item-title="label"
+                    item-value="value"
+                    :label="tm('ruleEditor.pluginConfig.disabledPlugins')"
+                    variant="outlined"
+                    hide-details
+                    multiple
+                    chips
+                    closable-chips
+                    clearable
+                  />
                 </v-col>
                 <v-col cols="12">
-                  <v-alert type="info" variant="tonal" class="mt-2" icon="mdi-information-outline">
+                  <v-alert
+                    type="info"
+                    variant="tonal"
+                    class="mt-2"
+                    icon="mdi-information-outline"
+                  >
                     {{ tm('ruleEditor.pluginConfig.hint') }}
                   </v-alert>
                 </v-col>
               </v-row>
 
               <div class="d-flex justify-end mt-4">
-                <v-btn color="primary" variant="tonal" size="small" @click="savePluginConfig" :loading="saving"
-                  prepend-icon="mdi-content-save">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  size="small"
+                  :loading="saving"
+                  prepend-icon="mdi-content-save"
+                  @click="savePluginConfig"
+                >
                   {{ tm('buttons.save') }}
                 </v-btn>
               </div>
 
               <!-- KB Config Section -->
               <div class="d-flex align-center mb-4 mt-4">
-                <h3 class="font-weight-bold mb-0">{{ tm('ruleEditor.kbConfig.title') }}</h3>
+                <h3 class="font-weight-bold mb-0">
+                  {{ tm('ruleEditor.kbConfig.title') }}
+                </h3>
               </div>
 
               <v-row dense>
                 <v-col cols="12">
-                  <v-select v-model="kbConfig.kb_ids" :items="kbOptions" item-title="label" item-value="value" :disabled="availableKbs.length === 0"
-                    :label="tm('ruleEditor.kbConfig.selectKbs')" variant="outlined" hide-details multiple chips
-                    closable-chips clearable />
+                  <v-select
+                    v-model="kbConfig.kb_ids"
+                    :items="kbOptions"
+                    item-title="label"
+                    item-value="value"
+                    :disabled="availableKbs.length === 0"
+                    :label="tm('ruleEditor.kbConfig.selectKbs')"
+                    variant="outlined"
+                    hide-details
+                    multiple
+                    chips
+                    closable-chips
+                    clearable
+                  />
                 </v-col>
-                <v-col cols="12" md="6">
-                  <v-text-field v-model.number="kbConfig.top_k" :label="tm('ruleEditor.kbConfig.topK')"
-                    variant="outlined" hide-details type="number" min="1" max="20" class="mt-3"/>
+                <v-col
+                  cols="12"
+                  md="6"
+                >
+                  <v-text-field
+                    v-model.number="kbConfig.top_k"
+                    :label="tm('ruleEditor.kbConfig.topK')"
+                    variant="outlined"
+                    hide-details
+                    type="number"
+                    min="1"
+                    max="20"
+                    class="mt-3"
+                  />
                 </v-col>
-                <v-col cols="12" md="6">
-                  <v-checkbox v-model="kbConfig.enable_rerank" :label="tm('ruleEditor.kbConfig.enableRerank')"
-                    color="primary" hide-details class="mt-3"/>
+                <v-col
+                  cols="12"
+                  md="6"
+                >
+                  <v-checkbox
+                    v-model="kbConfig.enable_rerank"
+                    :label="tm('ruleEditor.kbConfig.enableRerank')"
+                    color="primary"
+                    hide-details
+                    class="mt-3"
+                  />
                 </v-col>
               </v-row>
 
               <div class="d-flex justify-end mt-4">
-                <v-btn color="primary" variant="tonal" size="small" @click="saveKbConfig" :loading="saving"
-                  prepend-icon="mdi-content-save">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  size="small"
+                  :loading="saving"
+                  prepend-icon="mdi-content-save"
+                  @click="saveKbConfig"
+                >
                   {{ tm('buttons.save') }}
                 </v-btn>
               </div>
@@ -454,39 +1031,80 @@
       </v-dialog>
 
       <!-- 确认删除对话框 -->
-      <v-dialog v-model="deleteDialog" max-width="400">
+      <v-dialog
+        v-model="deleteDialog"
+        max-width="400"
+      >
         <v-card>
-          <v-card-title class="text-h6">{{ tm('deleteConfirm.title') }}</v-card-title>
+          <v-card-title class="text-h6">
+            {{ tm('deleteConfirm.title') }}
+          </v-card-title>
           <v-card-text>
             {{ tm('deleteConfirm.message') }}
             <br><br>
             <code>{{ deleteTarget?.umo }}</code>
           </v-card-text>
           <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn variant="text" @click="deleteDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-            <v-btn color="error" variant="tonal" @click="deleteAllRules" :loading="deleting">{{ tm('buttons.delete')
-            }}</v-btn>
+            <v-spacer />
+            <v-btn
+              variant="text"
+              @click="deleteDialog = false"
+            >
+              {{ tm('buttons.cancel') }}
+            </v-btn>
+            <v-btn
+              color="error"
+              variant="tonal"
+              :loading="deleting"
+              @click="deleteAllRules"
+            >
+              {{ tm('buttons.delete')
+              }}
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
 
       <!-- 批量删除确认对话框 -->
-      <v-dialog v-model="batchDeleteDialog" max-width="500">
+      <v-dialog
+        v-model="batchDeleteDialog"
+        max-width="500"
+      >
         <v-card>
-          <v-card-title class="text-h6">{{ tm('batchDeleteConfirm.title') }}</v-card-title>
+          <v-card-title class="text-h6">
+            {{ tm('batchDeleteConfirm.title') }}
+          </v-card-title>
           <v-card-text>
             {{ tm('batchDeleteConfirm.message', { count: selectedItems.length }) }}
-            <div class="mt-3" style="max-height: 200px; overflow-y: auto;">
-              <v-chip v-for="item in selectedItems" :key="item.umo" size="small" class="ma-1" variant="outlined">
+            <div
+              class="mt-3"
+              style="max-height: 200px; overflow-y: auto;"
+            >
+              <v-chip
+                v-for="item in selectedItems"
+                :key="item.umo"
+                size="small"
+                class="ma-1"
+                variant="outlined"
+              >
                 {{ item.rules?.session_service_config?.custom_name || item.umo }}
               </v-chip>
             </div>
           </v-card-text>
           <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn variant="text" @click="batchDeleteDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-            <v-btn color="error" variant="tonal" @click="batchDeleteRules" :loading="deleting">
+            <v-spacer />
+            <v-btn
+              variant="text"
+              @click="batchDeleteDialog = false"
+            >
+              {{ tm('buttons.cancel') }}
+            </v-btn>
+            <v-btn
+              color="error"
+              variant="tonal"
+              :loading="deleting"
+              @click="batchDeleteRules"
+            >
               {{ tm('buttons.delete') }}
             </v-btn>
           </v-card-actions>
@@ -494,22 +1112,50 @@
       </v-dialog>
 
       <!-- 提示信息 -->
-      <v-snackbar v-model="snackbar" :timeout="3000" elevation="24" :color="snackbarColor" location="top">
+      <v-snackbar
+        v-model="snackbar"
+        :timeout="3000"
+        elevation="24"
+        :color="snackbarColor"
+        location="top"
+      >
         {{ snackbarText }}
       </v-snackbar>
 
       <!-- 快速编辑备注名对话框 -->
-      <v-dialog v-model="quickEditNameDialog" max-width="400">
+      <v-dialog
+        v-model="quickEditNameDialog"
+        max-width="400"
+      >
         <v-card>
-          <v-card-title class="py-3 px-4">{{ tm('quickEditName.title') }}</v-card-title>
+          <v-card-title class="py-3 px-4">
+            {{ tm('quickEditName.title') }}
+          </v-card-title>
           <v-card-text class="pa-4">
-            <v-text-field v-model="quickEditNameValue" :label="tm('ruleEditor.serviceConfig.customName')"
-              variant="outlined" hide-details clearable autofocus @keyup.enter="saveQuickEditName" />
+            <v-text-field
+              v-model="quickEditNameValue"
+              :label="tm('ruleEditor.serviceConfig.customName')"
+              variant="outlined"
+              hide-details
+              clearable
+              autofocus
+              @keyup.enter="saveQuickEditName"
+            />
           </v-card-text>
           <v-card-actions class="px-4 pb-4">
-            <v-spacer></v-spacer>
-            <v-btn variant="text" @click="quickEditNameDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-            <v-btn color="primary" variant="tonal" @click="saveQuickEditName" :loading="saving">
+            <v-spacer />
+            <v-btn
+              variant="text"
+              @click="quickEditNameDialog = false"
+            >
+              {{ tm('buttons.cancel') }}
+            </v-btn>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              :loading="saving"
+              @click="saveQuickEditName"
+            >
               {{ tm('buttons.save') }}
             </v-btn>
           </v-card-actions>
diff --git a/dashboard/src/views/Settings.vue b/dashboard/src/views/Settings.vue
index aabaa13af..4e8cbd269 100644
--- a/dashboard/src/views/Settings.vue
+++ b/dashboard/src/views/Settings.vue
@@ -3,7 +3,10 @@
     <!-- Proxy Settings -->
     <!-- <div class="text-h6 mb-2">{{ tm('network.title') }}</div> -->
 
-    <v-list lines="two" subheader>
+    <v-list
+      lines="two"
+      subheader
+    >
       <v-list-subheader>{{ tm("network.title") }}</v-list-subheader>
 
       <v-list-item
@@ -63,7 +66,7 @@
                       class="mb-2"
                       variant="outlined"
                       bg-color="white"
-                    ></v-text-field>
+                    />
                     <v-text-field
                       v-model="newPresetUrl"
                       :label="tm('network.server.preset.url')"
@@ -72,15 +75,16 @@
                       class="mb-2"
                       variant="outlined"
                       bg-color="white"
-                    ></v-text-field>
+                    />
                     <v-btn
                       size="small"
                       block
                       color="primary"
                       variant="flat"
                       @click="savePreset"
-                      >{{ tm("network.server.preset.add") }}</v-btn
                     >
+                      {{ tm("network.server.preset.add") }}
+                    </v-btn>
                   </div>
                 </v-expand-transition>
 
@@ -89,10 +93,10 @@
                     v-for="preset in apiStore.presets"
                     :key="preset.name"
                     size="small"
-                    @click="apiBaseUrl = preset.url"
                     :variant="apiBaseUrl === preset.url ? 'flat' : 'tonal'"
                     :color="apiBaseUrl === preset.url ? 'primary' : undefined"
                     :closable="isCustomPreset(preset.name)"
+                    @click="apiBaseUrl = preset.url"
                     @click:close="apiStore.removePreset(preset.name)"
                   >
                     {{ preset.name }}
@@ -109,7 +113,7 @@
                 variant="outlined"
                 density="compact"
               >
-                <template v-slot:append>
+                <template #append>
                   <v-btn
                     size="small"
                     color="primary"
@@ -144,15 +148,23 @@
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <v-icon size="18">mdi-help-circle-outline</v-icon>
+                  <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-row
+          class="mt-2"
+          dense
+        >
+          <v-col
+            cols="12"
+            md="4"
+          >
             <v-text-field
               v-model="newApiKeyName"
               :label="tm('apiKey.name')"
@@ -161,7 +173,10 @@
               hide-details
             />
           </v-col>
-          <v-col cols="12" md="3">
+          <v-col
+            cols="12"
+            md="3"
+          >
             <v-select
               v-model="newApiKeyExpiresInDays"
               :items="apiKeyExpiryOptions"
@@ -171,18 +186,31 @@
               hide-details
             />
           </v-col>
-          <v-col v-if="newApiKeyExpiresInDays === 'permanent'" cols="12">
-            <v-alert type="warning" variant="tonal" density="comfortable">
+          <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-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>
+              <v-icon class="mr-2">
+                mdi-key-plus
+              </v-icon>
               {{ tm("apiKey.create") }}
             </v-btn>
           </v-col>
@@ -191,7 +219,10 @@
             <div class="text-caption text-medium-emphasis mb-1">
               {{ tm("apiKey.scopes") }}
             </div>
-            <v-chip-group v-model="newApiKeyScopes" multiple>
+            <v-chip-group
+              v-model="newApiKeyScopes"
+              multiple
+            >
               <v-chip
                 v-for="scope in availableScopes"
                 :key="scope.value"
@@ -208,8 +239,14 @@
             </v-chip-group>
           </v-col>
 
-          <v-col v-if="createdApiKeyPlaintext" cols="12">
-            <v-alert type="warning" variant="tonal">
+          <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
@@ -218,8 +255,9 @@
                   color="primary"
                   @click="copyCreatedApiKey"
                 >
-                  <v-icon class="mr-1">mdi-content-copy</v-icon
-                  >{{ tm("apiKey.copy") }}
+                  <v-icon class="mr-1">
+                    mdi-content-copy
+                  </v-icon>{{ tm("apiKey.copy") }}
                 </v-btn>
               </div>
               <code style="word-break: break-all">{{
@@ -242,7 +280,10 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="item in apiKeys" :key="item.key_id">
+                <tr
+                  v-for="item in apiKeys"
+                  :key="item.key_id"
+                >
                   <td>{{ item.name }}</td>
                   <td>
                     <code>{{ item.key_prefix }}</code>
@@ -287,7 +328,10 @@
                   </td>
                 </tr>
                 <tr v-if="apiKeys.length === 0">
-                  <td colspan="7" class="text-center text-medium-emphasis">
+                  <td
+                    colspan="7"
+                    class="text-center text-medium-emphasis"
+                  >
                     {{ tm("apiKey.empty") }}
                   </td>
                 </tr>
@@ -305,8 +349,9 @@
           style="margin-top: 16px"
           color="primary"
           @click="startMigration"
-          >{{ tm("system.migration.button") }}</v-btn
         >
+          {{ tm("system.migration.button") }}
+        </v-btn>
       </v-list-item>
 
       <v-list-subheader>{{ tm("sidebar.title") }}</v-list-subheader>
@@ -315,7 +360,7 @@
         :subtitle="tm('sidebar.customize.subtitle')"
         :title="tm('sidebar.customize.title')"
       >
-        <SidebarCustomizer></SidebarCustomizer>
+        <SidebarCustomizer />
       </v-list-item>
 
       <v-list-subheader>{{ tm("style.title") }}</v-list-subheader>
@@ -324,10 +369,16 @@
         :subtitle="tm('style.color.subtitle')"
         :title="tm('style.color.title')"
       >
-        <template #append> </template>
+        <template #append />
 
-        <v-row class="mt-2" dense>
-          <v-col cols="12" md="4">
+        <v-row
+          class="mt-2"
+          dense
+        >
+          <v-col
+            cols="12"
+            md="4"
+          >
             <v-text-field
               v-model="primaryColor"
               :label="tm('style.color.primary')"
@@ -335,7 +386,7 @@
               density="compact"
               hide-details
             >
-              <template v-slot:append-inner>
+              <template #append-inner>
                 <div
                   :style="{
                     backgroundColor: primaryColor,
@@ -345,11 +396,14 @@
                     border: '1px solid #ccc',
                   }"
                   class="mr-2"
-                ></div>
+                />
               </template>
             </v-text-field>
           </v-col>
-          <v-col cols="12" md="4">
+          <v-col
+            cols="12"
+            md="4"
+          >
             <v-text-field
               v-model="secondaryColor"
               :label="tm('style.color.secondary')"
@@ -357,7 +411,7 @@
               density="compact"
               hide-details
             >
-              <template v-slot:append-inner>
+              <template #append-inner>
                 <div
                   :style="{
                     backgroundColor: secondaryColor,
@@ -367,22 +421,39 @@
                     border: '1px solid #ccc',
                   }"
                   class="mr-2"
-                ></div>
+                />
               </template>
             </v-text-field>
           </v-col>
-          <v-col cols="12" md="4">
-            <v-btn color="primary" block @click="applyThemeColors">
-              <v-icon start>mdi-palette</v-icon>
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-btn
+              color="primary"
+              block
+              @click="applyThemeColors"
+            >
+              <v-icon start>
+                mdi-palette
+              </v-icon>
               {{ t("core.common.save") }}
             </v-btn>
           </v-col>
         </v-row>
       </v-list-item>
 
-      <v-list-item :subtitle="tm('style.autoSync.subtitle')" :title="tm('style.autoSync.title')">
-        <v-switch v-model="autoThemeSwitcher" :label="tm('style.autoSync.label')" color="primary" hide-details
-          class="ml-3" />
+      <v-list-item
+        :subtitle="tm('style.autoSync.subtitle')"
+        :title="tm('style.autoSync.title')"
+      >
+        <v-switch
+          v-model="autoThemeSwitcher"
+          :label="tm('style.autoSync.label')"
+          color="primary"
+          hide-details
+          class="ml-3"
+        />
       </v-list-item>
 
       <v-list-subheader>{{ tm("backup.title") }}</v-list-subheader>
@@ -402,7 +473,10 @@
         </div>
       </v-list-item>
 
-      <v-list-item :subtitle="tm('reset.subtitle')" :title="tm('reset.title')">
+      <v-list-item
+        :subtitle="tm('reset.subtitle')"
+        :title="tm('reset.title')"
+      >
         <div class="d-flex align-center mt-2">
           <v-btn
             color="error"
@@ -577,7 +651,7 @@ const autoThemeSwitcher = computed({
   get: () => customizer.autoSwitchTheme,
   set: (value) => {
     customizer.SET_AUTO_SYNC(value);
-    if (value) { customizer.APPLY_SYSTEM_THEME() };
+    if (value) { customizer.APPLY_SYSTEM_THEME() }
   }
 });
 
diff --git a/dashboard/src/views/SubAgentPage.vue b/dashboard/src/views/SubAgentPage.vue
index 029cc5a82..e1f37c84d 100644
--- a/dashboard/src/views/SubAgentPage.vue
+++ b/dashboard/src/views/SubAgentPage.vue
@@ -3,8 +3,16 @@
     <div class="d-flex align-center justify-space-between mb-6">
       <div>
         <div class="d-flex align-center gap-2 mb-1">
-          <h2 class="text-h5 font-weight-bold">{{ tm('page.title') }}</h2>
-          <v-chip size="x-small" color="orange-darken-2" variant="tonal" label class="font-weight-bold">
+          <h2 class="text-h5 font-weight-bold">
+            {{ tm('page.title') }}
+          </h2>
+          <v-chip
+            size="x-small"
+            color="orange-darken-2"
+            variant="tonal"
+            label
+            class="font-weight-bold"
+          >
             {{ tm('page.beta') }}
           </v-chip>
         </div>
@@ -36,11 +44,17 @@
     </div>
 
     <!-- Global Settings Card -->
-    <v-card class="rounded-lg mb-6 border-thin" variant="flat" border>
+    <v-card
+      class="rounded-lg mb-6 border-thin"
+      variant="flat"
+      border
+    >
       <v-card-text>
         <div class="d-flex align-center justify-space-between">
           <div>
-            <div class="text-subtitle-1 font-weight-bold mb-1">{{ tm('section.globalSettings') || 'Global Settings' }}</div>
+            <div class="text-subtitle-1 font-weight-bold mb-1">
+              {{ tm('section.globalSettings') || 'Global Settings' }}
+            </div>
             <div class="text-caption text-medium-emphasis">
               {{ mainStateDescription }}
             </div>
@@ -50,7 +64,10 @@
         <v-divider class="my-4" />
 
         <v-row dense>
-          <v-col cols="12" md="6">
+          <v-col
+            cols="12"
+            md="6"
+          >
             <v-switch
               v-model="cfg.main_enable"
               :label="tm('switches.enable')"
@@ -67,7 +84,10 @@
               </template>
             </v-switch>
           </v-col>
-          <v-col cols="12" md="6">
+          <v-col
+            cols="12"
+            md="6"
+          >
             <v-switch
               v-model="cfg.remove_main_duplicate_tools"
               :disabled="!cfg.main_enable"
@@ -92,9 +112,20 @@
     <!-- Agents List Section -->
     <div class="d-flex align-center justify-space-between mb-4">
       <div class="d-flex align-center gap-2">
-        <v-icon icon="mdi-robot" color="primary" size="small" />
-        <div class="text-h6 font-weight-bold">{{ tm('section.title') }}</div>
-        <v-chip size="small" variant="tonal" color="primary" class="ml-2">
+        <v-icon
+          icon="mdi-robot"
+          color="primary"
+          size="small"
+        />
+        <div class="text-h6 font-weight-bold">
+          {{ tm('section.title') }}
+        </div>
+        <v-chip
+          size="small"
+          variant="tonal"
+          color="primary"
+          class="ml-2"
+        >
           {{ cfg.agents.length }}
         </v-chip>
       </div>
@@ -107,7 +138,10 @@
       </v-btn>
     </div>
 
-    <v-expansion-panels variant="popout" class="subagent-panels">
+    <v-expansion-panels
+      variant="popout"
+      class="subagent-panels"
+    >
       <v-expansion-panel
         v-for="(agent, idx) in cfg.agents"
         :key="agent.__key"
@@ -126,7 +160,10 @@
             />
 
             <!-- Agent Info -->
-            <div class="d-flex flex-column flex-grow-1" style="min-width: 0;">
+            <div
+              class="d-flex flex-column flex-grow-1"
+              style="min-width: 0;"
+            >
               <div class="d-flex align-center gap-2">
                 <span class="text-subtitle-1 font-weight-bold text-truncate">
                   {{ agent.name || tm('cards.unnamed') }}
@@ -138,7 +175,10 @@
             </div>
 
             <!-- Controls (stop propagation on clicks) -->
-            <div class="d-flex align-center gap-2 flex-shrink-0" @click.stop>
+            <div
+              class="d-flex align-center gap-2 flex-shrink-0"
+              @click.stop
+            >
               <v-switch
                 v-model="agent.enabled"
                 color="success"
@@ -161,7 +201,10 @@
           <v-divider class="mb-4" />
           <v-row>
             <!-- Left Column: Form -->
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <div class="d-flex flex-column gap-4">
                 <v-text-field
                   v-model="agent.name"
@@ -174,8 +217,14 @@
                 />
 
                 <div class="d-flex flex-column gap-1">
-                  <div class="text-caption text-medium-emphasis ml-1">{{ tm('form.providerLabel') }}</div>
-                  <v-card variant="outlined" class="pa-0 border-thin rounded bg-transparent" style="border-color: rgba(var(--v-border-color), var(--v-border-opacity));">
+                  <div class="text-caption text-medium-emphasis ml-1">
+                    {{ tm('form.providerLabel') }}
+                  </div>
+                  <v-card
+                    variant="outlined"
+                    class="pa-0 border-thin rounded bg-transparent"
+                    style="border-color: rgba(var(--v-border-color), var(--v-border-opacity));"
+                  >
                     <div class="pa-3">
                       <ProviderSelector
                         v-model="agent.provider_id"
@@ -189,8 +238,14 @@
                 </div>
 
                 <div class="d-flex flex-column gap-1">
-                  <div class="text-caption text-medium-emphasis ml-1">{{ tm('form.personaLabel') }}</div>
-                  <v-card variant="outlined" class="pa-0 border-thin rounded bg-transparent" style="border-color: rgba(var(--v-border-color), var(--v-border-opacity));">
+                  <div class="text-caption text-medium-emphasis ml-1">
+                    {{ tm('form.personaLabel') }}
+                  </div>
+                  <v-card
+                    variant="outlined"
+                    class="pa-0 border-thin rounded bg-transparent"
+                    style="border-color: rgba(var(--v-border-color), var(--v-border-opacity));"
+                  >
                     <div class="pa-3">
                       <PersonaSelector
                         v-model="agent.persona_id"
@@ -212,7 +267,10 @@
             </v-col>
 
             <!-- Right Column: Preview -->
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <div class="h-100">
                 <div class="text-caption font-weight-bold text-medium-emphasis mb-2 ml-1">
                   {{ tm('cards.personaPreview') }}
@@ -229,19 +287,44 @@
     </v-expansion-panels>
 
     <!-- Empty State -->
-    <div v-if="cfg.agents.length === 0" class="d-flex flex-column align-center justify-center py-12 text-medium-emphasis">
-      <v-icon icon="mdi-robot-off" size="64" class="mb-4 opacity-50" />
-      <div class="text-h6">{{ tm('empty.title') }}</div>
-      <div class="text-body-2 mb-4">{{ tm('empty.subtitle') }}</div>
-      <v-btn color="primary" variant="tonal" @click="addAgent">
+    <div
+      v-if="cfg.agents.length === 0"
+      class="d-flex flex-column align-center justify-center py-12 text-medium-emphasis"
+    >
+      <v-icon
+        icon="mdi-robot-off"
+        size="64"
+        class="mb-4 opacity-50"
+      />
+      <div class="text-h6">
+        {{ tm('empty.title') }}
+      </div>
+      <div class="text-body-2 mb-4">
+        {{ tm('empty.subtitle') }}
+      </div>
+      <v-btn
+        color="primary"
+        variant="tonal"
+        @click="addAgent"
+      >
         {{ tm('empty.action') }}
       </v-btn>
     </div>
 
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="3000" location="top">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      timeout="3000"
+      location="top"
+    >
       {{ snackbar.message }}
       <template #actions>
-         <v-btn variant="text" @click="snackbar.show = false">{{ tm('actions.close') }}</v-btn>
+        <v-btn
+          variant="text"
+          @click="snackbar.show = false"
+        >
+          {{ tm('actions.close') }}
+        </v-btn>
       </template>
     </v-snackbar>
   </div>
diff --git a/dashboard/src/views/TracePage.vue b/dashboard/src/views/TracePage.vue
index 9bc048575..0b9c17e77 100644
--- a/dashboard/src/views/TracePage.vue
+++ b/dashboard/src/views/TracePage.vue
@@ -45,7 +45,13 @@ onMounted(() => {
   <div style="height: 100%; display: flex; flex-direction: column;">
     <div class="trace-header">
       <div class="trace-info">
-        <v-icon size="small" color="info" class="mr-2">mdi-information-outline</v-icon>
+        <v-icon
+          size="small"
+          color="info"
+          class="mr-2"
+        >
+          mdi-information-outline
+        </v-icon>
         <span class="trace-hint">{{ tm('hint') }}</span>
       </div>
       <div class="trace-controls">
diff --git a/dashboard/src/views/WelcomePage.vue b/dashboard/src/views/WelcomePage.vue
index bf497a218..be3d733ff 100644
--- a/dashboard/src/views/WelcomePage.vue
+++ b/dashboard/src/views/WelcomePage.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="welcome-page">
-    <v-container fluid class="pa-0">
+    <v-container
+      fluid
+      class="pa-0"
+    >
       <v-row class="px-4 py-3 pb-6">
         <v-col cols="12">
           <h1 class="text-h1 font-weight-bold mb-2 d-flex align-center">
@@ -14,7 +17,11 @@
 
       <v-row class="px-4">
         <v-col cols="12">
-          <v-card class="welcome-card pa-6" elevation="0" border>
+          <v-card
+            class="welcome-card pa-6"
+            elevation="0"
+            border
+          >
             <div class="mb-4 text-h3 font-weight-bold">
               {{ tm("onboard.title") }}
             </div>
@@ -45,7 +52,7 @@
                   <p class="text-body-2 text-medium-emphasis mb-3">
                     {{
                       tm("onboard.step0Desc") ||
-                      "配置 AstrBot 的后端 API 地址。"
+                        "配置 AstrBot 的后端 API 地址。"
                     }}
                   </p>
                   <div class="d-flex align-center">
@@ -60,7 +67,7 @@
                         variant="outlined"
                         density="compact"
                         hide-details
-                      ></v-text-field>
+                      />
                     </div>
                     <v-btn
                       color="primary"
@@ -178,12 +185,19 @@
 
       <v-row class="px-4 mt-4">
         <v-col cols="12">
-          <v-card class="welcome-card pa-6" elevation="0" border>
+          <v-card
+            class="welcome-card pa-6"
+            elevation="0"
+            border
+          >
             <div class="mb-4 text-h3 font-weight-bold">
               {{ tm("resources.title") }}
             </div>
             <v-row>
-              <v-col cols="12" sm="4">
+              <v-col
+                cols="12"
+                sm="4"
+              >
                 <!-- GitHub Card -->
                 <v-card
                   variant="outlined"
@@ -192,7 +206,12 @@
                   target="_blank"
                 >
                   <div class="d-flex align-center mb-3">
-                    <v-icon size="32" class="mr-3">mdi-github</v-icon>
+                    <v-icon
+                      size="32"
+                      class="mr-3"
+                    >
+                      mdi-github
+                    </v-icon>
                     <span class="text-h6 font-weight-bold">GitHub</span>
                   </div>
                   <p class="text-body-2 text-medium-emphasis mb-0">
@@ -201,7 +220,10 @@
                 </v-card>
               </v-col>
 
-              <v-col cols="12" sm="4">
+              <v-col
+                cols="12"
+                sm="4"
+              >
                 <!-- Docs Card -->
                 <v-card
                   variant="outlined"
@@ -210,9 +232,12 @@
                   target="_blank"
                 >
                   <div class="d-flex align-center mb-3">
-                    <v-icon size="32" class="mr-3"
-                      >mdi-book-open-variant</v-icon
+                    <v-icon
+                      size="32"
+                      class="mr-3"
                     >
+                      mdi-book-open-variant
+                    </v-icon>
                     <span class="text-h6 font-weight-bold">{{
                       tm("resources.docsTitle")
                     }}</span>
@@ -223,7 +248,10 @@
                 </v-card>
               </v-col>
 
-              <v-col cols="12" sm="4">
+              <v-col
+                cols="12"
+                sm="4"
+              >
                 <!-- Afdian Card -->
                 <v-card
                   variant="outlined"
@@ -232,7 +260,12 @@
                   target="_blank"
                 >
                   <div class="d-flex align-center mb-3">
-                    <v-icon size="32" class="mr-3">mdi-hand-heart</v-icon>
+                    <v-icon
+                      size="32"
+                      class="mr-3"
+                    >
+                      mdi-hand-heart
+                    </v-icon>
                     <span class="text-h6 font-weight-bold">{{
                       tm("resources.afdianTitle")
                     }}</span>
@@ -247,9 +280,16 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="showAnnouncement" class="px-4 mb-4">
+      <v-row
+        v-if="showAnnouncement"
+        class="px-4 mb-4"
+      >
         <v-col cols="12">
-          <v-card class="welcome-card pa-6" elevation="0" border>
+          <v-card
+            class="welcome-card pa-6"
+            elevation="0"
+            border
+          >
             <div class="mb-4 text-h3 font-weight-bold">
               {{ tm("announcement.title") }}
             </div>
diff --git a/dashboard/src/views/alkaid/KnowledgeBase.vue b/dashboard/src/views/alkaid/KnowledgeBase.vue
index aa3783236..a630669a5 100644
--- a/dashboard/src/views/alkaid/KnowledgeBase.vue
+++ b/dashboard/src/views/alkaid/KnowledgeBase.vue
@@ -1,434 +1,827 @@
 <template>
-    <div class="flex-grow-1" style="display: flex; flex-direction: column; height: 100%;">
-        <div style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px; padding: 16px">
-            <v-banner lines="one">
-                <template v-slot:text>
-                    建议您更换使用新版知识库功能。
-                </template>
-            </v-banner>
-            <!-- knowledge card -->
-            <div v-if="!installed" class="d-flex align-center justify-center flex-column"
-                style="flex-grow: 1; width: 100%; height: 100%;">
-                <h2>{{ tm('notInstalled.title') }}
-                    <v-icon class="ml-2" size="small" color="grey"
-                        @click="openUrl('https://astrbot.app/use/knowledge-base.html')">mdi-information-outline</v-icon>
-                </h2>
-                <v-btn style="margin-top: 16px;" variant="tonal" color="primary" @click="installPlugin"
-                    :loading="installing">
-                    {{ tm('notInstalled.install') }}
-                </v-btn>
-                <ConsoleDisplayer v-show="installing"
-                    style="background-color: #fff; max-height: 300px; margin-top: 16px; max-width: 100%"
-                    :show-level-btns="false"></ConsoleDisplayer>
-            </div>
-            <div v-else-if="kbCollections.length == 0" class="d-flex align-center justify-center flex-column"
-                style="flex-grow: 1; width: 100%; height: 100%;">
-                <h2>{{ tm('empty.title') }}</h2>
-                <v-btn style="margin-top: 16px;" variant="tonal" color="primary" @click="showCreateDialog = true">
-                    {{ tm('empty.create') }}
-                </v-btn>
-            </div>
-            <div v-else>
-                <h2 class="mb-4">{{ tm('list.title') }}
-                    <v-icon class="ml-2" size="x-small" color="grey"
-                        @click="openUrl('https://astrbot.app/use/knowledge-base.html')">mdi-information-outline</v-icon>
-                </h2>
-                <v-btn class="mb-4" prepend-icon="mdi-plus" variant="tonal" color="primary"
-                    @click="showCreateDialog = true">
-                    {{ tm('list.create') }}
-                </v-btn>
-                <v-btn class="mb-4 ml-4" prepend-icon="mdi-cog" variant="tonal" color="success"
-                    @click="$router.push('/extension?open_config=astrbot_plugin_knowledge_base')">
-                    {{ tm('list.config') }}
-                </v-btn>
-                <v-btn class="mb-4 ml-4" prepend-icon="mdi-update" variant="tonal" color="warning"
-                    @click="checkPluginUpdate" :loading="checkingUpdate">
-                    {{ tm('list.checkUpdate') }}
-                </v-btn>
-                <v-btn v-if="pluginHasUpdate" class="mb-4 ml-4" prepend-icon="mdi-download" variant="tonal"
-                    color="primary" @click="updatePlugin" :loading="updatingPlugin">
-                    {{ tm('list.updatePlugin', { version: pluginLatestVersion }) }}
-                </v-btn>
+  <div
+    class="flex-grow-1"
+    style="display: flex; flex-direction: column; height: 100%;"
+  >
+    <div style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px; padding: 16px">
+      <v-banner lines="one">
+        <template #text>
+          建议您更换使用新版知识库功能。
+        </template>
+      </v-banner>
+      <!-- knowledge card -->
+      <div
+        v-if="!installed"
+        class="d-flex align-center justify-center flex-column"
+        style="flex-grow: 1; width: 100%; height: 100%;"
+      >
+        <h2>
+          {{ tm('notInstalled.title') }}
+          <v-icon
+            class="ml-2"
+            size="small"
+            color="grey"
+            @click="openUrl('https://astrbot.app/use/knowledge-base.html')"
+          >
+            mdi-information-outline
+          </v-icon>
+        </h2>
+        <v-btn
+          style="margin-top: 16px;"
+          variant="tonal"
+          color="primary"
+          :loading="installing"
+          @click="installPlugin"
+        >
+          {{ tm('notInstalled.install') }}
+        </v-btn>
+        <ConsoleDisplayer
+          v-show="installing"
+          style="background-color: #fff; max-height: 300px; margin-top: 16px; max-width: 100%"
+          :show-level-btns="false"
+        />
+      </div>
+      <div
+        v-else-if="kbCollections.length == 0"
+        class="d-flex align-center justify-center flex-column"
+        style="flex-grow: 1; width: 100%; height: 100%;"
+      >
+        <h2>{{ tm('empty.title') }}</h2>
+        <v-btn
+          style="margin-top: 16px;"
+          variant="tonal"
+          color="primary"
+          @click="showCreateDialog = true"
+        >
+          {{ tm('empty.create') }}
+        </v-btn>
+      </div>
+      <div v-else>
+        <h2 class="mb-4">
+          {{ tm('list.title') }}
+          <v-icon
+            class="ml-2"
+            size="x-small"
+            color="grey"
+            @click="openUrl('https://astrbot.app/use/knowledge-base.html')"
+          >
+            mdi-information-outline
+          </v-icon>
+        </h2>
+        <v-btn
+          class="mb-4"
+          prepend-icon="mdi-plus"
+          variant="tonal"
+          color="primary"
+          @click="showCreateDialog = true"
+        >
+          {{ tm('list.create') }}
+        </v-btn>
+        <v-btn
+          class="mb-4 ml-4"
+          prepend-icon="mdi-cog"
+          variant="tonal"
+          color="success"
+          @click="$router.push('/extension?open_config=astrbot_plugin_knowledge_base')"
+        >
+          {{ tm('list.config') }}
+        </v-btn>
+        <v-btn
+          class="mb-4 ml-4"
+          prepend-icon="mdi-update"
+          variant="tonal"
+          color="warning"
+          :loading="checkingUpdate"
+          @click="checkPluginUpdate"
+        >
+          {{ tm('list.checkUpdate') }}
+        </v-btn>
+        <v-btn
+          v-if="pluginHasUpdate"
+          class="mb-4 ml-4"
+          prepend-icon="mdi-download"
+          variant="tonal"
+          color="primary"
+          :loading="updatingPlugin"
+          @click="updatePlugin"
+        >
+          {{ tm('list.updatePlugin', { version: pluginLatestVersion }) }}
+        </v-btn>
 
-                <div class="kb-grid">
-                    <div v-for="(kb, index) in kbCollections" :key="index" class="kb-card"
-                        @click="openKnowledgeBase(kb)">
-                        <div class="book-spine"></div>
-                        <div class="book-content">
-                            <div class="emoji-container">
-                                <span class="kb-emoji">{{ kb.emoji || '🙂' }}</span>
-                            </div>
-                            <div class="kb-name">{{ kb.collection_name }}</div>
-                            <div class="kb-count">{{ kb.count || 0 }} {{ tm('list.knowledgeCount') }}</div>
-                            <div class="kb-actions">
-                                <v-btn icon variant="text" size="small" color="error" @click.stop="confirmDelete(kb)">
-                                    <v-icon>mdi-delete</v-icon>
-                                </v-btn>
-                            </div>
-                        </div>
-                    </div>
+        <div class="kb-grid">
+          <div
+            v-for="(kb, index) in kbCollections"
+            :key="index"
+            class="kb-card"
+            @click="openKnowledgeBase(kb)"
+          >
+            <div class="book-spine" />
+            <div class="book-content">
+              <div class="emoji-container">
+                <span class="kb-emoji">{{ kb.emoji || '🙂' }}</span>
+              </div>
+              <div class="kb-name">
+                {{ kb.collection_name }}
+              </div>
+              <div class="kb-count">
+                {{ kb.count || 0 }} {{ tm('list.knowledgeCount') }}
+              </div>
+              <div class="kb-actions">
+                <v-btn
+                  icon
+                  variant="text"
+                  size="small"
+                  color="error"
+                  @click.stop="confirmDelete(kb)"
+                >
+                  <v-icon>mdi-delete</v-icon>
+                </v-btn>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 创建知识库对话框 -->
+    <v-dialog
+      v-model="showCreateDialog"
+      max-width="500px"
+    >
+      <v-card>
+        <v-card-title class="text-h4">
+          {{ tm('createDialog.title') }}
+        </v-card-title>
+        <v-card-text>
+          <div style="width: 100%; display: flex; align-items: center; justify-content: center;">
+            <span
+              id="emoji-display"
+              @click="showEmojiPicker = true"
+            >
+              {{ newKB.emoji || '🙂' }}
+            </span>
+          </div>
+          <v-form @submit.prevent="submitCreateForm">
+            <v-text-field
+              v-model="newKB.name"
+              variant="outlined"
+              :label="tm('createDialog.nameLabel')"
+              required
+            />
+
+            <v-textarea
+              v-model="newKB.description"
+              :label="tm('createDialog.descriptionLabel')"
+              variant="outlined"
+              :placeholder="tm('createDialog.descriptionPlaceholder')"
+              rows="3"
+            />
+
+            <v-select
+              v-model="newKB.embedding_provider_id"
+              :items="embeddingProviderConfigs"
+              :item-props="embeddingModelProps"
+              :label="tm('createDialog.embeddingModelLabel')"
+              variant="outlined"
+              density="comfortable"
+            />
+
+            <v-select
+              v-model="newKB.rerank_provider_id"
+              :items="rerankProviderConfigs"
+              :item-props="rerankModelProps"
+              :label="tm('createDialog.rerankModelLabel')"
+              variant="outlined"
+              density="comfortable"
+            />
+
+            <small>{{ tm('createDialog.tips') }}</small>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="error"
+            variant="text"
+            @click="showCreateDialog = false"
+          >
+            {{ tm('createDialog.cancel')
+            }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="text"
+            @click="submitCreateForm"
+          >
+            {{ tm('createDialog.create')
+            }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 表情选择器对话框 -->
+    <v-dialog
+      v-model="showEmojiPicker"
+      max-width="400px"
+    >
+      <v-card>
+        <v-card-title class="text-h6">
+          {{ tm('emojiPicker.title') }}
+        </v-card-title>
+        <v-card-text>
+          <div class="emoji-picker">
+            <div
+              v-for="(category, catIndex) in emojiCategories"
+              :key="catIndex"
+              class="mb-4"
+            >
+              <div class="text-subtitle-2 mb-2">
+                {{ tm(`emojiPicker.categories.${category.key}`) }}
+              </div>
+              <div class="emoji-grid">
+                <div
+                  v-for="(emoji, emojiIndex) in category.emojis"
+                  :key="emojiIndex"
+                  class="emoji-item"
+                  @click="selectEmoji(emoji)"
+                >
+                  {{ emoji }}
                 </div>
-
+              </div>
             </div>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            variant="text"
+            @click="showEmojiPicker = false"
+          >
+            {{ tm('emojiPicker.close')
+            }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
+    <!-- 知识库内容管理对话框 -->
+    <v-dialog
+      v-model="showContentDialog"
+      max-width="1000px"
+    >
+      <v-card>
+        <v-card-title class="d-flex align-center">
+          <div class="me-2 emoji-sm">
+            {{ currentKB.emoji || '🙂' }}
+          </div>
+          <span>{{ currentKB.collection_name }} - {{ tm('contentDialog.title') }}</span>
+          <v-spacer />
+          <v-btn
+            variant="plain"
+            icon
+            @click="showContentDialog = false"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <div
+          v-if="currentKB._embedding_provider_config"
+          class="px-6 py-2"
+        >
+          <v-chip
+            class="mr-2"
+            color="primary"
+            variant="tonal"
+            size="small"
+            rounded="sm"
+          >
+            <v-icon
+              start
+              size="small"
+            >
+              mdi-database
+            </v-icon>
+            {{ tm('contentDialog.embeddingModel') }}: {{
+              currentKB._embedding_provider_config.embedding_model }}
+          </v-chip>
+
+          <v-chip
+            v-if="currentKB.rerank_provider_id"
+            color="tertiary"
+            variant="tonal"
+            size="small"
+            rounded="sm"
+          >
+            <v-icon
+              start
+              size="small"
+            >
+              mdi-sort-variant
+            </v-icon>
+            重排序模型: {{ rerankProviderConfigs.
+              find(provider => provider.id === currentKB.rerank_provider_id)?.rerank_model || '未设置' }}
+          </v-chip>
+          <small style="margin-left: 8px;">💡 使用方式: 在聊天页中输入 "/kb use {{ currentKB.collection_name }}"</small>
         </div>
 
-        <!-- 创建知识库对话框 -->
-        <v-dialog v-model="showCreateDialog" max-width="500px">
-            <v-card>
-                <v-card-title class="text-h4">{{ tm('createDialog.title') }}</v-card-title>
-                <v-card-text>
+        <v-card-text>
+          <v-tabs v-model="activeTab">
+            <v-tab value="import">
+              导入数据
+            </v-tab>
+            <v-tab value="search">
+              {{ tm('contentDialog.tabs.search') }}
+            </v-tab>
+          </v-tabs>
 
-                    <div style="width: 100%; display: flex; align-items: center; justify-content: center;">
-                        <span id="emoji-display" @click="showEmojiPicker = true">
-                            {{ newKB.emoji || '🙂' }}
-                        </span>
-                    </div>
-                    <v-form @submit.prevent="submitCreateForm">
-
-
-                        <v-text-field variant="outlined" v-model="newKB.name" :label="tm('createDialog.nameLabel')"
-                            required></v-text-field>
-
-                        <v-textarea v-model="newKB.description" :label="tm('createDialog.descriptionLabel')"
-                            variant="outlined" :placeholder="tm('createDialog.descriptionPlaceholder')"
-                            rows="3"></v-textarea>
-
-                        <v-select v-model="newKB.embedding_provider_id" :items="embeddingProviderConfigs"
-                            :item-props="embeddingModelProps" :label="tm('createDialog.embeddingModelLabel')"
-                            variant="outlined" density="comfortable">
-                        </v-select>
-
-                        <v-select v-model="newKB.rerank_provider_id" :items="rerankProviderConfigs"
-                            :item-props="rerankModelProps" :label="tm('createDialog.rerankModelLabel')"
-                            variant="outlined" density="comfortable">
-                        </v-select>
-
-                        <small>{{ tm('createDialog.tips') }}</small>
-                    </v-form>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="error" variant="text" @click="showCreateDialog = false">{{ tm('createDialog.cancel')
-                        }}</v-btn>
-                    <v-btn color="primary" variant="text" @click="submitCreateForm">{{ tm('createDialog.create')
-                        }}</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <!-- 表情选择器对话框 -->
-        <v-dialog v-model="showEmojiPicker" max-width="400px">
-            <v-card>
-                <v-card-title class="text-h6">{{ tm('emojiPicker.title') }}</v-card-title>
-                <v-card-text>
-                    <div class="emoji-picker">
-                        <div v-for="(category, catIndex) in emojiCategories" :key="catIndex" class="mb-4">
-                            <div class="text-subtitle-2 mb-2">{{ tm(`emojiPicker.categories.${category.key}`) }}</div>
-                            <div class="emoji-grid">
-                                <div v-for="(emoji, emojiIndex) in category.emojis" :key="emojiIndex" class="emoji-item"
-                                    @click="selectEmoji(emoji)">
-                                    {{ emoji }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="primary" variant="text" @click="showEmojiPicker = false">{{ tm('emojiPicker.close')
-                        }}</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <!-- 知识库内容管理对话框 -->
-        <v-dialog v-model="showContentDialog" max-width="1000px">
-            <v-card>
-                <v-card-title class="d-flex align-center">
-                    <div class="me-2 emoji-sm">{{ currentKB.emoji || '🙂' }}</div>
-                    <span>{{ currentKB.collection_name }} - {{ tm('contentDialog.title') }}</span>
-                    <v-spacer></v-spacer>
-                    <v-btn variant="plain" icon @click="showContentDialog = false">
-                        <v-icon>mdi-close</v-icon>
-                    </v-btn>
-                </v-card-title>
-
-                <div v-if="currentKB._embedding_provider_config" class="px-6 py-2">
-                    <v-chip class="mr-2" color="primary" variant="tonal" size="small" rounded="sm">
-                        <v-icon start size="small">mdi-database</v-icon>
-                        {{ tm('contentDialog.embeddingModel') }}: {{
-                            currentKB._embedding_provider_config.embedding_model }}
-                    </v-chip>
-
-                    <v-chip v-if="currentKB.rerank_provider_id" color="tertiary" variant="tonal" size="small"
-                        rounded="sm">
-                        <v-icon start size="small">mdi-sort-variant</v-icon>
-                        重排序模型: {{rerankProviderConfigs.
-                            find(provider => provider.id === currentKB.rerank_provider_id)?.rerank_model || '未设置'}}
-                    </v-chip>
-                    <small style="margin-left: 8px;">💡 使用方式: 在聊天页中输入 "/kb use {{ currentKB.collection_name }}"</small>
+          <v-window
+            v-model="activeTab"
+            class="mt-4"
+          >
+            <!-- 导入数据标签页 -->
+            <v-window-item value="import">
+              <div class="import-container pa-4">
+                <div class="mb-8">
+                  <h2>导入数据</h2>
+                  <p class="text-subtitle-1">
+                    选择数据源并导入内容到知识库
+                  </p>
                 </div>
 
-                <v-card-text>
-                    <v-tabs v-model="activeTab">
-                        <v-tab value="import">导入数据</v-tab>
-                        <v-tab value="search">{{ tm('contentDialog.tabs.search') }}</v-tab>
-                    </v-tabs>
+                <!-- 数据源选择下拉列表 -->
+                <v-select
+                  v-model="dataSource"
+                  :items="dataSourceOptions"
+                  :label="'数据源选择'"
+                  variant="outlined"
+                  item-title="title"
+                  item-value="value"
+                  prepend-inner-icon="mdi-database"
+                />
 
-                    <v-window v-model="activeTab" class="mt-4">
-                        <!-- 导入数据标签页 -->
-                        <v-window-item value="import">
-                            <div class="import-container pa-4">
-                                <div class="mb-8">
-                                    <h2>导入数据</h2>
-                                    <p class="text-subtitle-1">选择数据源并导入内容到知识库</p>
-                                </div>
+                <!-- 从文件导入 -->
+                <div
+                  v-if="dataSource === 'file'"
+                  class="mt-4"
+                >
+                  <div
+                    class="upload-zone"
+                    @dragover.prevent
+                    @drop.prevent="onFileDrop"
+                    @click="triggerFileInput"
+                  >
+                    <input
+                      ref="fileInput"
+                      type="file"
+                      style="display: none"
+                      @change="onFileSelected"
+                    >
+                    <v-icon
+                      size="48"
+                      color="primary"
+                    >
+                      mdi-cloud-upload
+                    </v-icon>
+                    <p class="mt-2">
+                      {{ tm('upload.dropzone') }}
+                    </p>
+                  </div>
 
-                                <!-- 数据源选择下拉列表 -->
-                                <v-select v-model="dataSource" :items="dataSourceOptions" :label="'数据源选择'"
-                                    variant="outlined" item-title="title" item-value="value"
-                                    prepend-inner-icon="mdi-database"></v-select>
+                  <!-- 分片长度和重叠长度设置 -->
+                  <v-card
+                    class="mt-4 chunk-settings-card"
+                    variant="outlined"
+                    color="grey-lighten-4"
+                  >
+                    <v-card-title class="pa-4 pb-0 d-flex align-center">
+                      <v-icon
+                        color="primary"
+                        class="mr-2"
+                      >
+                        mdi-puzzle-outline
+                      </v-icon>
+                      <span class="text-subtitle-1 font-weight-bold">{{
+                        tm('upload.chunkSettings.title') }}</span>
+                      <v-tooltip location="top">
+                        <template #activator="{ props }">
+                          <v-icon
+                            v-bind="props"
+                            class="ml-2"
+                            size="small"
+                            color="grey"
+                          >
+                            mdi-information-outline
+                          </v-icon>
+                        </template>
+                        <span>
+                          {{ tm('upload.chunkSettings.tooltip') }}
+                        </span>
+                      </v-tooltip>
+                    </v-card-title>
+                    <v-card-text class="pa-4 pt-2">
+                      <div
+                        class="d-flex flex-wrap"
+                        style="gap: 8px"
+                      >
+                        <v-text-field
+                          v-model="chunkSize"
+                          :label="tm('upload.chunkSettings.chunkSizeLabel')"
+                          type="number"
+                          :hint="tm('upload.chunkSettings.chunkSizeHint')"
+                          persistent-hint
+                          variant="outlined"
+                          density="comfortable"
+                          class="flex-grow-1 chunk-field"
+                          prepend-inner-icon="mdi-text-box-outline"
+                          min="50"
+                        />
 
-                                <!-- 从文件导入 -->
-                                <div v-if="dataSource === 'file'" class="mt-4">
-                                    <div class="upload-zone" @dragover.prevent @drop.prevent="onFileDrop"
-                                        @click="triggerFileInput">
-                                        <input type="file" ref="fileInput" style="display: none"
-                                            @change="onFileSelected" />
-                                        <v-icon size="48" color="primary">mdi-cloud-upload</v-icon>
-                                        <p class="mt-2">{{ tm('upload.dropzone') }}</p>
-                                    </div>
+                        <v-text-field
+                          v-model="overlap"
+                          :label="tm('upload.chunkSettings.overlapLabel')"
+                          type="number"
+                          :hint="tm('upload.chunkSettings.overlapHint')"
+                          persistent-hint
+                          variant="outlined"
+                          density="comfortable"
+                          class="flex-grow-1 chunk-field"
+                          prepend-inner-icon="mdi-vector-intersection"
+                          min="0"
+                        />
+                      </div>
+                    </v-card-text>
+                  </v-card>
 
-                                    <!-- 分片长度和重叠长度设置 -->
-                                    <v-card class="mt-4 chunk-settings-card" variant="outlined" color="grey-lighten-4">
-                                        <v-card-title class="pa-4 pb-0 d-flex align-center">
-                                            <v-icon color="primary" class="mr-2">mdi-puzzle-outline</v-icon>
-                                            <span class="text-subtitle-1 font-weight-bold">{{
-                                                tm('upload.chunkSettings.title') }}</span>
-                                            <v-tooltip location="top">
-                                                <template v-slot:activator="{ props }">
-                                                    <v-icon v-bind="props" class="ml-2" size="small" color="grey">
-                                                        mdi-information-outline
-                                                    </v-icon>
-                                                </template>
-                                                <span>
-                                                    {{ tm('upload.chunkSettings.tooltip') }}
-                                                </span>
-                                            </v-tooltip>
-                                        </v-card-title>
-                                        <v-card-text class="pa-4 pt-2">
-                                            <div class="d-flex flex-wrap" style="gap: 8px">
-                                                <v-text-field v-model="chunkSize"
-                                                    :label="tm('upload.chunkSettings.chunkSizeLabel')" type="number"
-                                                    :hint="tm('upload.chunkSettings.chunkSizeHint')" persistent-hint
-                                                    variant="outlined" density="comfortable"
-                                                    class="flex-grow-1 chunk-field"
-                                                    prepend-inner-icon="mdi-text-box-outline" min="50"></v-text-field>
+                  <div
+                    v-if="selectedFile"
+                    class="selected-files mt-4"
+                  >
+                    <div
+                      type="info"
+                      variant="tonal"
+                      class="d-flex align-center"
+                    >
+                      <div>
+                        <v-icon class="me-2">
+                          {{ getFileIcon(selectedFile.name) }}
+                        </v-icon>
+                        <span style="font-weight: 1000;">{{ selectedFile.name }}</span>
+                      </div>
+                      <v-btn
+                        size="small"
+                        color="error"
+                        variant="text"
+                        @click="selectedFile = null"
+                      >
+                        <v-icon>mdi-close</v-icon>
+                      </v-btn>
+                    </div>
 
-                                                <v-text-field v-model="overlap"
-                                                    :label="tm('upload.chunkSettings.overlapLabel')" type="number"
-                                                    :hint="tm('upload.chunkSettings.overlapHint')" persistent-hint
-                                                    variant="outlined" density="comfortable"
-                                                    class="flex-grow-1 chunk-field"
-                                                    prepend-inner-icon="mdi-vector-intersection" min="0"></v-text-field>
-                                            </div>
-                                        </v-card-text>
-                                    </v-card>
+                    <div class="text-center mt-4">
+                      <v-btn
+                        color="primary"
+                        variant="elevated"
+                        :loading="uploading"
+                        :disabled="!selectedFile"
+                        @click="uploadFile"
+                      >
+                        {{ tm('upload.upload') }}
+                      </v-btn>
+                    </div>
+                  </div>
 
-                                    <div class="selected-files mt-4" v-if="selectedFile">
-                                        <div type="info" variant="tonal" class="d-flex align-center">
-                                            <div>
-                                                <v-icon class="me-2">{{ getFileIcon(selectedFile.name) }}</v-icon>
-                                                <span style="font-weight: 1000;">{{ selectedFile.name }}</span>
-                                            </div>
-                                            <v-btn size="small" color="error" variant="text"
-                                                @click="selectedFile = null">
-                                                <v-icon>mdi-close</v-icon>
-                                            </v-btn>
-                                        </div>
+                  <div
+                    v-if="uploading"
+                    class="upload-progress mt-4"
+                  >
+                    <v-progress-linear
+                      indeterminate
+                      color="primary"
+                    />
+                  </div>
+                </div>
 
-                                        <div class="text-center mt-4">
-                                            <v-btn color="primary" variant="elevated" :loading="uploading"
-                                                :disabled="!selectedFile" @click="uploadFile">
-                                                {{ tm('upload.upload') }}
-                                            </v-btn>
-                                        </div>
-                                    </div>
+                <!-- 从URL导入 -->
+                <div
+                  v-if="dataSource === 'url'"
+                  class="from-url-container"
+                >
+                  <v-alert
+                    type="info"
+                    variant="tonal"
+                    class="mb-4"
+                    border
+                  >
+                    {{ tm('importFromUrl.preRequisite') }}
+                  </v-alert>
+                  <v-text-field
+                    v-model="importUrl"
+                    :label="tm('importFromUrl.urlLabel')"
+                    :placeholder="tm('importFromUrl.urlPlaceholder')"
+                    variant="outlined"
+                    class="mb-4"
+                    hide-details
+                  />
 
-                                    <div class="upload-progress mt-4" v-if="uploading">
-                                        <v-progress-linear indeterminate color="primary"></v-progress-linear>
-                                    </div>
-                                </div>
+                  <v-card
+                    class="mb-4"
+                    variant="outlined"
+                    color="grey-lighten-4"
+                  >
+                    <v-card-title class="pa-4 pb-0 d-flex align-center">
+                      <v-icon
+                        color="primary"
+                        class="mr-2"
+                      >
+                        mdi-cog-outline
+                      </v-icon>
+                      <span class="text-subtitle-1 font-weight-bold">{{
+                        tm('importFromUrl.optionsTitle') }}</span>
+                      <v-tooltip location="top">
+                        <template #activator="{ props }">
+                          <v-icon
+                            v-bind="props"
+                            class="ml-2"
+                            size="small"
+                            color="grey"
+                          >
+                            mdi-information-outline
+                          </v-icon>
+                        </template>
+                        <span>{{ tm('importFromUrl.tooltip') }}</span>
+                      </v-tooltip>
+                    </v-card-title>
+                    <v-card-text class="pa-4 pt-2">
+                      <v-row>
+                        <v-col
+                          cols="12"
+                          md="6"
+                        >
+                          <v-switch
+                            v-model="importOptions.use_llm_repair"
+                            hide-details
+                            :label="tm('importFromUrl.useLlmRepairLabel')"
+                            color="primary"
+                            inset
+                          />
+                        </v-col>
+                        <v-col
+                          cols="12"
+                          md="6"
+                        >
+                          <v-switch
+                            v-model="importOptions.use_clustering_summary"
+                            hide-details
+                            :label="tm('importFromUrl.useClusteringSummaryLabel')"
+                            color="primary"
+                            inset
+                          />
+                        </v-col>
+                        <v-row class="pa-4">
+                          <!-- Optional Repair Selector -->
+                          <v-col
+                            v-if="importOptions.use_llm_repair"
+                            :md="optionalSelectorColWidth"
+                            cols="12"
+                          >
+                            <v-select
+                              v-model="importOptions.repair_llm_provider_id"
+                              :items="llmProviderConfigs"
+                              item-value="id"
+                              :item-props="llmModelProps"
+                              :label="tm('importFromUrl.repairLlmProviderIdLabel')"
+                              variant="outlined"
+                              clearable
+                              hide-details
+                            />
+                          </v-col>
 
-                                <!-- 从URL导入 -->
-                                <div v-if="dataSource === 'url'" class="from-url-container">
-                                    <v-alert type="info" variant="tonal" class="mb-4" border>
-                                        {{ tm('importFromUrl.preRequisite') }}
-                                    </v-alert>
-                                    <v-text-field v-model="importUrl" :label="tm('importFromUrl.urlLabel')"
-                                        :placeholder="tm('importFromUrl.urlPlaceholder')" variant="outlined"
-                                        class="mb-4" hide-details></v-text-field>
+                          <!-- Optional Summary Selector -->
+                          <v-col
+                            v-if="importOptions.use_clustering_summary"
+                            :md="optionalSelectorColWidth"
+                            cols="12"
+                          >
+                            <v-select
+                              v-model="importOptions.summarize_llm_provider_id"
+                              :items="llmProviderConfigs"
+                              item-value="id"
+                              :item-props="llmModelProps"
+                              :label="tm('importFromUrl.summarizeLlmProviderIdLabel')"
+                              variant="outlined"
+                              clearable
+                              hide-details
+                            />
+                          </v-col>
 
-                                    <v-card class="mb-4" variant="outlined" color="grey-lighten-4">
-                                        <v-card-title class="pa-4 pb-0 d-flex align-center">
-                                            <v-icon color="primary" class="mr-2">mdi-cog-outline</v-icon>
-                                            <span class="text-subtitle-1 font-weight-bold">{{
-                                                tm('importFromUrl.optionsTitle') }}</span>
-                                            <v-tooltip location="top">
-                                                <template v-slot:activator="{ props }">
-                                                    <v-icon v-bind="props" class="ml-2" size="small"
-                                                        color="grey">mdi-information-outline</v-icon>
-                                                </template>
-                                                <span>{{ tm('importFromUrl.tooltip') }}</span>
-                                            </v-tooltip>
-                                        </v-card-title>
-                                        <v-card-text class="pa-4 pt-2">
-                                            <v-row>
-                                                <v-col cols="12" md="6">
-                                                    <v-switch hide-details v-model="importOptions.use_llm_repair"
-                                                        :label="tm('importFromUrl.useLlmRepairLabel')" color="primary"
-                                                        inset></v-switch>
-                                                </v-col>
-                                                <v-col cols="12" md="6">
-                                                    <v-switch v-model="importOptions.use_clustering_summary"
-                                                        hide-details
-                                                        :label="tm('importFromUrl.useClusteringSummaryLabel')"
-                                                        color="primary" inset></v-switch>
-                                                </v-col>
-                                                <v-row class="pa-4">
-                                                    <!-- Optional Repair Selector -->
-                                                    <v-col v-if="importOptions.use_llm_repair"
-                                                        :md="optionalSelectorColWidth" cols="12">
-                                                        <v-select v-model="importOptions.repair_llm_provider_id"
-                                                            :items="llmProviderConfigs" item-value="id"
-                                                            :item-props="llmModelProps"
-                                                            :label="tm('importFromUrl.repairLlmProviderIdLabel')"
-                                                            variant="outlined" clearable hide-details></v-select>
-                                                    </v-col>
+                          <v-col
+                            cols="12"
+                            md="6"
+                          >
+                            <v-select
+                              v-model="importOptions.embedding_provider_id"
+                              :items="embeddingProviderConfigs"
+                              item-value="id"
+                              :item-props="embeddingModelProps"
+                              :label="tm('importFromUrl.embeddingProviderIdLabel')"
+                              variant="outlined"
+                              clearable
+                              hide-details
+                            />
+                          </v-col>
+                          <v-col
+                            cols="12"
+                            md="3"
+                          >
+                            <v-text-field
+                              v-model="importOptions.chunk_size"
+                              :label="tm('importFromUrl.chunkSizeLabel')"
+                              type="number"
+                              variant="outlined"
+                              clearable
+                              hide-details
+                            />
+                          </v-col>
+                          <v-col
+                            cols="12"
+                            md="3"
+                          >
+                            <v-text-field
+                              v-model="importOptions.chunk_overlap"
+                              :label="tm('importFromUrl.chunkOverlapLabel')"
+                              type="number"
+                              variant="outlined"
+                              clearable
+                              hide-details
+                            />
+                          </v-col>
+                        </v-row>
+                      </v-row>
+                    </v-card-text>
+                  </v-card>
 
-                                                    <!-- Optional Summary Selector -->
-                                                    <v-col v-if="importOptions.use_clustering_summary"
-                                                        :md="optionalSelectorColWidth" cols="12">
-                                                        <v-select v-model="importOptions.summarize_llm_provider_id"
-                                                            :items="llmProviderConfigs" item-value="id"
-                                                            :item-props="llmModelProps"
-                                                            :label="tm('importFromUrl.summarizeLlmProviderIdLabel')"
-                                                            variant="outlined" clearable hide-details></v-select>
-                                                    </v-col>
+                  <div class="text-center">
+                    <v-btn
+                      color="primary"
+                      variant="elevated"
+                      :loading="importing"
+                      :disabled="!importUrl"
+                      @click="startImportFromUrl"
+                    >
+                      {{ tm('importFromUrl.startImport') }}
+                    </v-btn>
+                  </div>
+                </div>
+              </div>
+            </v-window-item>
 
-                                                    <v-col cols="12" md="6">
-                                                        <v-select v-model="importOptions.embedding_provider_id"
-                                                            :items="embeddingProviderConfigs" item-value="id"
-                                                            :item-props="embeddingModelProps"
-                                                            :label="tm('importFromUrl.embeddingProviderIdLabel')"
-                                                            variant="outlined" clearable hide-details></v-select>
-                                                    </v-col>
-                                                    <v-col cols="12" md="3">
-                                                        <v-text-field v-model="importOptions.chunk_size"
-                                                            :label="tm('importFromUrl.chunkSizeLabel')" type="number"
-                                                            variant="outlined" clearable hide-details></v-text-field>
-                                                    </v-col>
-                                                    <v-col cols="12" md="3">
-                                                        <v-text-field v-model="importOptions.chunk_overlap"
-                                                            :label="tm('importFromUrl.chunkOverlapLabel')" type="number"
-                                                            variant="outlined" clearable hide-details></v-text-field>
-                                                    </v-col>
-                                                </v-row>
-                                            </v-row>
-                                        </v-card-text>
-                                    </v-card>
+            <!-- 搜索内容标签页 -->
+            <v-window-item value="search">
+              <div class="search-container pa-4">
+                <v-form
+                  class="d-flex align-center"
+                  @submit.prevent="searchKnowledgeBase"
+                >
+                  <v-text-field
+                    :model-value="searchQuery"
+                    :label="tm('search.queryLabel')"
+                    append-icon="mdi-magnify"
+                    variant="outlined"
+                    class="flex-grow-1 me-2"
+                    :placeholder="tm('search.queryPlaceholder')"
+                    hide-details
+                    clearable
+                    @update:model-value="onSearchQueryInput"
+                    @click:append="searchKnowledgeBase"
+                    @keyup.enter="searchKnowledgeBase"
+                  />
 
-                                    <div class="text-center">
-                                        <v-btn color="primary" variant="elevated" :loading="importing"
-                                            :disabled="!importUrl" @click="startImportFromUrl">
-                                            {{ tm('importFromUrl.startImport') }}
-                                        </v-btn>
-                                    </div>
-                                </div>
-                            </div>
-                        </v-window-item>
+                  <v-select
+                    v-model="topK"
+                    :items="[3, 5, 10, 20]"
+                    :label="tm('search.resultCountLabel')"
+                    variant="outlined"
+                    style="max-width: 120px;"
+                    hide-details
+                  />
+                </v-form>
 
-                        <!-- 搜索内容标签页 -->
-                        <v-window-item value="search">
-                            <div class="search-container pa-4">
-                                <v-form @submit.prevent="searchKnowledgeBase" class="d-flex align-center">
-                                    <v-text-field :model-value="searchQuery"
-                                        @update:model-value="onSearchQueryInput" :label="tm('search.queryLabel')"
-                                        append-icon="mdi-magnify" variant="outlined" class="flex-grow-1 me-2"
-                                        @click:append="searchKnowledgeBase" @keyup.enter="searchKnowledgeBase"
-                                        :placeholder="tm('search.queryPlaceholder')" hide-details clearable></v-text-field>
+                <div class="search-results mt-4">
+                  <div v-if="searching">
+                    <v-progress-linear
+                      indeterminate
+                      color="primary"
+                    />
+                    <p class="text-center mt-4">
+                      {{ tm('search.searching') }}
+                    </p>
+                  </div>
 
-                                    <v-select v-model="topK" :items="[3, 5, 10, 20]"
-                                        :label="tm('search.resultCountLabel')" variant="outlined"
-                                        style="max-width: 120px;" hide-details></v-select>
-                                </v-form>
+                  <div v-else-if="searchResults.length > 0">
+                    <h3 class="mb-2">
+                      {{ tm('search.resultsTitle') }}
+                    </h3>
+                    <v-card
+                      v-for="(result, index) in searchResults"
+                      :key="index"
+                      class="mb-4 search-result-card"
+                      variant="outlined"
+                    >
+                      <v-card-text>
+                        <div class="d-flex align-center mb-2">
+                          <v-icon
+                            class="me-2"
+                            size="small"
+                            color="primary"
+                          >
+                            mdi-file-document-outline
+                          </v-icon>
+                          <span class="text-caption text-medium-emphasis">{{
+                            result.metadata.source }}</span>
+                          <v-spacer />
+                          <v-chip
+                            v-if="result.score"
+                            size="small"
+                            color="primary"
+                            variant="tonal"
+                          >
+                            {{ tm('search.relevance') }}: {{ Math.round(result.score * 100)
+                            }}%
+                          </v-chip>
+                        </div>
+                        <div class="search-content">
+                          {{ result.content }}
+                        </div>
+                      </v-card-text>
+                    </v-card>
+                  </div>
 
-                                <div class="search-results mt-4">
-                                    <div v-if="searching">
-                                        <v-progress-linear indeterminate color="primary"></v-progress-linear>
-                                        <p class="text-center mt-4">{{ tm('search.searching') }}</p>
-                                    </div>
+                  <div v-else-if="searchPerformed">
+                    <v-alert
+                      type="info"
+                      variant="tonal"
+                    >
+                      {{ tm('search.noResults') }}
+                    </v-alert>
+                  </div>
+                </div>
+              </div>
+            </v-window-item>
+          </v-window>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
 
-                                    <div v-else-if="searchResults.length > 0">
-                                        <h3 class="mb-2">{{ tm('search.resultsTitle') }}</h3>
-                                        <v-card v-for="(result, index) in searchResults" :key="index"
-                                            class="mb-4 search-result-card" variant="outlined">
-                                            <v-card-text>
-                                                <div class="d-flex align-center mb-2">
-                                                    <v-icon class="me-2" size="small"
-                                                        color="primary">mdi-file-document-outline</v-icon>
-                                                    <span class="text-caption text-medium-emphasis">{{
-                                                        result.metadata.source }}</span>
-                                                    <v-spacer></v-spacer>
-                                                    <v-chip v-if="result.score" size="small" color="primary"
-                                                        variant="tonal">
-                                                        {{ tm('search.relevance') }}: {{ Math.round(result.score * 100)
-                                                        }}%
-                                                    </v-chip>
-                                                </div>
-                                                <div class="search-content">{{ result.content }}</div>
-                                            </v-card-text>
-                                        </v-card>
-                                    </div>
+    <!-- 删除知识库确认对话框 -->
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="400px"
+    >
+      <v-card>
+        <v-card-title class="text-h5">
+          {{ tm('deleteDialog.title') }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ tm('deleteDialog.confirmText', { name: deleteTarget.collection_name }) }}</p>
+          <p class="text-red">
+            {{ tm('deleteDialog.warning') }}
+          </p>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="grey-darken-1"
+            variant="text"
+            @click="showDeleteDialog = false"
+          >
+            {{
+              tm('deleteDialog.cancel')
+            }}
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="text"
+            :loading="deleting"
+            @click="deleteKnowledgeBase"
+          >
+            {{
+              tm('deleteDialog.delete') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-                                    <div v-else-if="searchPerformed">
-                                        <v-alert type="info" variant="tonal">
-                                            {{ tm('search.noResults') }}
-                                        </v-alert>
-                                    </div>
-                                </div>
-                            </div>
-                        </v-window-item>
-                    </v-window>
-                </v-card-text>
-            </v-card>
-        </v-dialog>
-
-        <!-- 删除知识库确认对话框 -->
-        <v-dialog v-model="showDeleteDialog" max-width="400px">
-            <v-card>
-                <v-card-title class="text-h5">{{ tm('deleteDialog.title') }}</v-card-title>
-                <v-card-text>
-                    <p>{{ tm('deleteDialog.confirmText', { name: deleteTarget.collection_name }) }}</p>
-                    <p class="text-red">{{ tm('deleteDialog.warning') }}</p>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="grey-darken-1" variant="text" @click="showDeleteDialog = false">{{
-                        tm('deleteDialog.cancel')
-                        }}</v-btn>
-                    <v-btn color="error" variant="text" @click="deleteKnowledgeBase" :loading="deleting">{{
-                        tm('deleteDialog.delete') }}</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <!-- 消息提示 -->
-        <v-snackbar v-model="snackbar.show" :color="snackbar.color">
-            {{ snackbar.text }}
-        </v-snackbar>
-    </div>
+    <!-- 消息提示 -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
+      {{ snackbar.text }}
+    </v-snackbar>
+  </div>
 </template>
 
 <script>
@@ -581,6 +974,11 @@ export default {
         this.checkPlugin();
         this.getProviderList();
     },
+    beforeUnmount() {
+        if (this.pollingInterval) {
+            clearInterval(this.pollingInterval);
+        }
+    },
     methods: {
         onSearchQueryInput(value) {
             this.searchQuery = normalizeTextInput(value);
@@ -1166,11 +1564,6 @@ export default {
             return response.data;
         },
     },
-    beforeUnmount() {
-        if (this.pollingInterval) {
-            clearInterval(this.pollingInterval);
-        }
-    },
 }
 </script>
 
diff --git a/dashboard/src/views/alkaid/LongTermMemory.vue b/dashboard/src/views/alkaid/LongTermMemory.vue
index 767df8a4e..2e64c9c8b 100644
--- a/dashboard/src/views/alkaid/LongTermMemory.vue
+++ b/dashboard/src/views/alkaid/LongTermMemory.vue
@@ -1,32 +1,62 @@
 <template>
-  <div id="long-term-memory" class="flex-grow-1" style="display: flex; flex-direction: row; ">
-    <div id="graph-container"
-      style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px; max-height: calc(100% - 40px);">
-    </div>
+  <div
+    id="long-term-memory"
+    class="flex-grow-1"
+    style="display: flex; flex-direction: row; "
+  >
+    <div
+      id="graph-container"
+      style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px; max-height: calc(100% - 40px);"
+    />
     <!-- <div id="graph-container-nonono"
       style="display: flex; justify-content: center; align-items: center; width: 100%; font-weight: 1000; font-size: 24px;">
       加速开发中...
     </div> -->
-    <div id="graph-control-panel"
-      style="min-width: 450px; border: 1px solid #eee; border-radius: 8px; padding: 16px; padding-bottom: 0px; margin-left: 16px; max-height: calc(100% - 40px);">
+    <div
+      id="graph-control-panel"
+      style="min-width: 450px; border: 1px solid #eee; border-radius: 8px; padding: 16px; padding-bottom: 0px; margin-left: 16px; max-height: calc(100% - 40px);"
+    >
       <div>
         <!-- <span style="color: #333333;">可视化</span> -->
         <h3>{{ tm('filters.title') }}</h3>
         <div style="margin-top: 8px;">
-          <v-autocomplete v-model="searchUserId" density="compact" :items="userIdList" variant="outlined"
-            :label="tm('filters.userIdLabel')"></v-autocomplete>
+          <v-autocomplete
+            v-model="searchUserId"
+            density="compact"
+            :items="userIdList"
+            variant="outlined"
+            :label="tm('filters.userIdLabel')"
+          />
         </div>
         <div style="display: flex; gap: 8px;">
-          <v-btn color="primary" @click="onNodeSelect" variant="tonal">
-            <v-icon start>mdi-magnify</v-icon>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            @click="onNodeSelect"
+          >
+            <v-icon start>
+              mdi-magnify
+            </v-icon>
             {{ tm('filters.filterButton') }}
           </v-btn>
-          <v-btn color="secondary" @click="resetFilter" variant="tonal">
-            <v-icon start>mdi-filter-remove</v-icon>
+          <v-btn
+            color="secondary"
+            variant="tonal"
+            @click="resetFilter"
+          >
+            <v-icon start>
+              mdi-filter-remove
+            </v-icon>
             {{ tm('filters.resetButton') }}
           </v-btn>
-          <v-btn color="primary" @click="refreshGraph" variant="tonal">
-            <v-icon start>mdi-refresh</v-icon>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            @click="refreshGraph"
+          >
+            <v-icon start>
+              mdi-refresh
+            </v-icon>
             {{ tm('filters.refreshButton') }}
           </v-btn>
         </div>
@@ -35,36 +65,74 @@
       <!-- 新增搜索记忆功能 -->
       <div class="mt-4">
         <h3>{{ tm('search.title') }}</h3>
-        <v-card variant="outlined" class="mt-2 pa-3">
+        <v-card
+          variant="outlined"
+          class="mt-2 pa-3"
+        >
           <div>
-            <v-text-field :model-value="searchMemoryUserId"
-              @update:model-value="onSearchMemoryUserIdInput" :label="tm('search.userIdLabel')" variant="outlined" density="compact" hide-details
-              class="mb-2" clearable></v-text-field>
-            <v-text-field :model-value="searchQuery"
-              @update:model-value="onSearchQueryInput" :label="tm('search.queryLabel')" variant="outlined" density="compact" hide-details
-              @keyup.enter="searchMemory" class="mb-2" clearable></v-text-field>
-            <v-btn color="info" @click="searchMemory" :loading="isSearching" variant="tonal">
-              <v-icon start>mdi-text-search</v-icon>
+            <v-text-field
+              :model-value="searchMemoryUserId"
+              :label="tm('search.userIdLabel')"
+              variant="outlined"
+              density="compact"
+              hide-details
+              class="mb-2"
+              clearable
+              @update:model-value="onSearchMemoryUserIdInput"
+            />
+            <v-text-field
+              :model-value="searchQuery"
+              :label="tm('search.queryLabel')"
+              variant="outlined"
+              density="compact"
+              hide-details
+              class="mb-2"
+              clearable
+              @update:model-value="onSearchQueryInput"
+              @keyup.enter="searchMemory"
+            />
+            <v-btn
+              color="info"
+              :loading="isSearching"
+              variant="tonal"
+              @click="searchMemory"
+            >
+              <v-icon start>
+                mdi-text-search
+              </v-icon>
               {{ tm('search.searchButton') }}
             </v-btn>
           </div>
 
           <!-- 新增搜索结果展示区域 -->
-          <div v-if="searchResults.length > 0" class="mt-3">
-            <v-divider class="mb-3"></v-divider>
-            <div class="text-subtitle-1 mb-2">{{ tm('search.resultsTitle') }} ({{ searchResults.length }})</div>
+          <div
+            v-if="searchResults.length > 0"
+            class="mt-3"
+          >
+            <v-divider class="mb-3" />
+            <div class="text-subtitle-1 mb-2">
+              {{ tm('search.resultsTitle') }} ({{ searchResults.length }})
+            </div>
             <v-expansion-panels variant="accordion">
-              <v-expansion-panel v-for="(result, index) in searchResults" :key="index">
+              <v-expansion-panel
+                v-for="(result, index) in searchResults"
+                :key="index"
+              >
                 <v-expansion-panel-title>
                   <div>
-                    <span class="text-truncate d-inline-block" style="max-width: 300px;">{{ result.text.substring(0, 30)
-                      }}...</span>
+                    <span
+                      class="text-truncate d-inline-block"
+                      style="max-width: 300px;"
+                    >{{ result.text.substring(0, 30)
+                    }}...</span>
                     <span class="ms-2 text-caption text-grey">({{ tm('search.similarity') }}: {{ (result.score * 100).toFixed(1) }}%)</span>
                   </div>
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
                   <div>
-                    <div class="mb-2 text-body-1">{{ result.text }}</div>
+                    <div class="mb-2 text-body-1">
+                      {{ result.text }}
+                    </div>
                     <div class="d-flex">
                       <span class="text-caption text-grey">{{ tm('factDialog.docId') }}: {{ result.doc_id }}</span>
                     </div>
@@ -73,7 +141,10 @@
               </v-expansion-panel>
             </v-expansion-panels>
           </div>
-          <div v-else-if="hasSearched" class="mt-3 text-center text-body-1 text-grey">
+          <div
+            v-else-if="hasSearched"
+            class="mt-3 text-center text-body-1 text-grey"
+          >
             {{ tm('search.noResults') }}
           </div>
         </v-card>
@@ -82,27 +153,59 @@
       <!-- 新增添加记忆数据的表单 -->
       <div class="mt-4">
         <h3>{{ tm('addMemory.title') }}</h3>
-        <v-card variant="outlined" class="mt-2 pa-3">
+        <v-card
+          variant="outlined"
+          class="mt-2 pa-3"
+        >
           <v-form @submit.prevent="addMemoryData">
-            <v-textarea v-model="newMemoryText" :label="tm('addMemory.textLabel')" variant="outlined" rows="4" hide-details
-              class="mb-2"></v-textarea>
+            <v-textarea
+              v-model="newMemoryText"
+              :label="tm('addMemory.textLabel')"
+              variant="outlined"
+              rows="4"
+              hide-details
+              class="mb-2"
+            />
 
-            <v-text-field v-model="newMemoryUserId" :label="tm('addMemory.userIdLabel')" variant="outlined" density="compact"
-              hide-details></v-text-field>
+            <v-text-field
+              v-model="newMemoryUserId"
+              :label="tm('addMemory.userIdLabel')"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
 
-            <v-switch v-model="needSummarize" color="primary" :label="tm('addMemory.summarizeLabel')" hide-details></v-switch>
+            <v-switch
+              v-model="needSummarize"
+              color="primary"
+              :label="tm('addMemory.summarizeLabel')"
+              hide-details
+            />
 
-            <v-btn color="success" type="submit" :loading="isSubmitting" :disabled="!newMemoryText || !newMemoryUserId">
-              <v-icon start>mdi-plus</v-icon>
+            <v-btn
+              color="success"
+              type="submit"
+              :loading="isSubmitting"
+              :disabled="!newMemoryText || !newMemoryUserId"
+            >
+              <v-icon start>
+                mdi-plus
+              </v-icon>
               {{ tm('addMemory.addButton') }}
             </v-btn>
           </v-form>
         </v-card>
       </div>
 
-      <div v-if="selectedNode" class="mt-4">
+      <div
+        v-if="selectedNode"
+        class="mt-4"
+      >
         <h3>{{ tm('nodeDetails.title') }}</h3>
-        <v-card variant="outlined" class="mt-2 pa-3">
+        <v-card
+          variant="outlined"
+          class="mt-2 pa-3"
+        >
           <div v-if="selectedNode.id">
             <div class="d-flex justify-space-between">
               <span class="text-subtitle-2">{{ tm('nodeDetails.id') }}:</span>
@@ -142,9 +245,15 @@
         </v-card>
       </div>
 
-      <div v-if="graphStats" class="mt-4">
+      <div
+        v-if="graphStats"
+        class="mt-4"
+      >
         <h3>{{ tm('graphStats.title') }}</h3>
-        <v-card variant="outlined" class="mt-2 pa-3">
+        <v-card
+          variant="outlined"
+          class="mt-2 pa-3"
+        >
           <div class="d-flex justify-space-between">
             <span class="text-subtitle-2">{{ tm('graphStats.nodeCount') }}:</span>
             <span>{{ graphStats.nodeCount }}</span>
@@ -156,37 +265,78 @@
         </v-card>
       </div>
 
-      <v-dialog v-model="showFactDialog" max-width="550" scrollable>
+      <v-dialog
+        v-model="showFactDialog"
+        max-width="550"
+        scrollable
+      >
         <v-card class="fact-detail-card">
           <v-card-title class="d-flex align-center bg-primary text-white px-4 py-3">
-            <v-icon class="mr-2" color="white">mdi-memory</v-icon>
+            <v-icon
+              class="mr-2"
+              color="white"
+            >
+              mdi-memory
+            </v-icon>
             {{ tm('factDialog.title') }}
-            <v-spacer></v-spacer>
-            <v-btn icon variant="text" color="white" @click="showFactDialog = false">
+            <v-spacer />
+            <v-btn
+              icon
+              variant="text"
+              color="white"
+              @click="showFactDialog = false"
+            >
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-card-title>
           
           <v-card-text class="px-4 pt-4 pb-0">
             <template v-if="selectedEdgeFactData">
-              <v-alert color="primary" variant="tonal" density="compact" class="mb-4">
-                <div class="text-body-1 font-weight-medium">{{ selectedEdgeFactData.text }}</div>
+              <v-alert
+                color="primary"
+                variant="tonal"
+                density="compact"
+                class="mb-4"
+              >
+                <div class="text-body-1 font-weight-medium">
+                  {{ selectedEdgeFactData.text }}
+                </div>
               </v-alert>
               
               <v-row>
                 <v-col cols="6">
                   <div class="d-flex align-center mb-2">
-                    <v-icon size="small" color="primary" class="mr-2">mdi-identifier</v-icon>
-                    <div class="text-subtitle-2">{{ tm('factDialog.id') }}</div>
+                    <v-icon
+                      size="small"
+                      color="primary"
+                      class="mr-2"
+                    >
+                      mdi-identifier
+                    </v-icon>
+                    <div class="text-subtitle-2">
+                      {{ tm('factDialog.id') }}
+                    </div>
+                  </div>
+                  <div class="text-body-2 text-grey pa-1">
+                    {{ selectedEdgeFactData.id }}
                   </div>
-                  <div class="text-body-2 text-grey pa-1">{{ selectedEdgeFactData.id }}</div>
                 </v-col>
                 <v-col cols="6">
                   <div class="d-flex align-center mb-2">
-                    <v-icon size="small" color="primary" class="mr-2">mdi-file-document-outline</v-icon>
-                    <div class="text-subtitle-2">{{ tm('factDialog.docId') }}</div>
+                    <v-icon
+                      size="small"
+                      color="primary"
+                      class="mr-2"
+                    >
+                      mdi-file-document-outline
+                    </v-icon>
+                    <div class="text-subtitle-2">
+                      {{ tm('factDialog.docId') }}
+                    </div>
+                  </div>
+                  <div class="text-body-2 text-grey pa-1">
+                    {{ selectedEdgeFactData.doc_id }}
                   </div>
-                  <div class="text-body-2 text-grey pa-1">{{ selectedEdgeFactData.doc_id }}</div>
                 </v-col>
               </v-row>
               
@@ -194,37 +344,83 @@
               <v-row class="mt-2">
                 <v-col cols="6">
                   <div class="d-flex align-center mb-2">
-                    <v-icon size="small" color="primary" class="mr-2">mdi-calendar-plus</v-icon>
-                    <div class="text-subtitle-2">{{ tm('factDialog.createdAt') }}</div>
+                    <v-icon
+                      size="small"
+                      color="primary"
+                      class="mr-2"
+                    >
+                      mdi-calendar-plus
+                    </v-icon>
+                    <div class="text-subtitle-2">
+                      {{ tm('factDialog.createdAt') }}
+                    </div>
+                  </div>
+                  <div class="text-body-2 text-grey pa-1">
+                    {{ formatTime(selectedEdgeFactData.created_at) }}
                   </div>
-                  <div class="text-body-2 text-grey pa-1">{{ formatTime(selectedEdgeFactData.created_at) }}</div>
                 </v-col>
                 <v-col cols="6">
                   <div class="d-flex align-center mb-2">
-                    <v-icon size="small" color="primary" class="mr-2">mdi-calendar-edit</v-icon>
-                    <div class="text-subtitle-2">{{ tm('factDialog.updatedAt') }}</div>
+                    <v-icon
+                      size="small"
+                      color="primary"
+                      class="mr-2"
+                    >
+                      mdi-calendar-edit
+                    </v-icon>
+                    <div class="text-subtitle-2">
+                      {{ tm('factDialog.updatedAt') }}
+                    </div>
+                  </div>
+                  <div class="text-body-2 text-grey pa-1">
+                    {{ formatTime(selectedEdgeFactData.updated_at) }}
                   </div>
-                  <div class="text-body-2 text-grey pa-1">{{ formatTime(selectedEdgeFactData.updated_at) }}</div>
                 </v-col>
               </v-row>
 
               <!-- 改进元数据展示，解析为键值对 -->
-              <div v-if="parsedMetadata && Object.keys(parsedMetadata).length > 0" class="mt-4">
+              <div
+                v-if="parsedMetadata && Object.keys(parsedMetadata).length > 0"
+                class="mt-4"
+              >
                 <div class="d-flex align-center mb-2">
-                  <v-icon size="small" color="primary" class="mr-2">mdi-database-cog</v-icon>
-                  <div class="text-subtitle-2">{{ tm('factDialog.metadata') }}</div>
+                  <v-icon
+                    size="small"
+                    color="primary"
+                    class="mr-2"
+                  >
+                    mdi-database-cog
+                  </v-icon>
+                  <div class="text-subtitle-2">
+                    {{ tm('factDialog.metadata') }}
+                  </div>
                 </div>
-                <v-card variant="outlined" class="metadata-table">
-                  <v-table density="compact" hover>
+                <v-card
+                  variant="outlined"
+                  class="metadata-table"
+                >
+                  <v-table
+                    density="compact"
+                    hover
+                  >
                     <thead>
                       <tr>
-                        <th class="text-left">{{ tm('factDialog.metadataKey') }}</th>
-                        <th class="text-left">{{ tm('factDialog.metadataValue') }}</th>
+                        <th class="text-left">
+                          {{ tm('factDialog.metadataKey') }}
+                        </th>
+                        <th class="text-left">
+                          {{ tm('factDialog.metadataValue') }}
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
-                      <tr v-for="(value, key) in parsedMetadata" :key="key">
-                        <td class="font-weight-medium">{{ key }}</td>
+                      <tr
+                        v-for="(value, key) in parsedMetadata"
+                        :key="key"
+                      >
+                        <td class="font-weight-medium">
+                          {{ key }}
+                        </td>
                         <td>{{ formatMetadataValue(value) }}</td>
                       </tr>
                     </tbody>
@@ -233,16 +429,34 @@
               </div>
             </template>
             
-            <div v-else class="text-center py-6">
-              <v-progress-circular indeterminate color="primary" size="50" width="5"></v-progress-circular>
-              <div class="mt-3 text-body-1">{{ tm('factDialog.loading') }}</div>
+            <div
+              v-else
+              class="text-center py-6"
+            >
+              <v-progress-circular
+                indeterminate
+                color="primary"
+                size="50"
+                width="5"
+              />
+              <div class="mt-3 text-body-1">
+                {{ tm('factDialog.loading') }}
+              </div>
             </div>
           </v-card-text>
           
-          <v-divider v-if="selectedEdgeFactData"></v-divider>
+          <v-divider v-if="selectedEdgeFactData" />
           
-          <v-card-actions class="pa-4" v-if="selectedEdgeFactData">
-            <v-btn block color="primary" variant="tonal" @click="showFactDialog = false">
+          <v-card-actions
+            v-if="selectedEdgeFactData"
+            class="pa-4"
+          >
+            <v-btn
+              block
+              color="primary"
+              variant="tonal"
+              @click="showFactDialog = false"
+            >
               {{ tm('factDialog.close') }}
             </v-btn>
           </v-card-actions>
@@ -254,7 +468,7 @@
 
 <script>
 import axios from 'axios';
-// import * as d3 from "d3"; // npm install d3
+import * as d3 from 'd3';
 import { useModuleI18n } from '@/i18n/composables';
 import { normalizeTextInput } from '@/utils/inputValue';
 
diff --git a/dashboard/src/views/alkaid/Other.vue b/dashboard/src/views/alkaid/Other.vue
index d701ae739..298c5c5ad 100644
--- a/dashboard/src/views/alkaid/Other.vue
+++ b/dashboard/src/views/alkaid/Other.vue
@@ -1,9 +1,16 @@
 <template>
-  <div class="flex-grow-1" style="display: flex; flex-direction: column; height: 100%;">
-    <div class="d-flex align-center justify-center"
-      style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px;">
+  <div
+    class="flex-grow-1"
+    style="display: flex; flex-direction: column; height: 100%;"
+  >
+    <div
+      class="d-flex align-center justify-center"
+      style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px;"
+    >
       <span size="64">🌍</span>
-      <p class="text-h6 text-grey ml-4">{{ tm('comingSoon') }}</p>
+      <p class="text-h6 text-grey ml-4">
+        {{ tm('comingSoon') }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/dashboard/src/views/authentication/auth/LoginPage.vue b/dashboard/src/views/authentication/auth/LoginPage.vue
index c1f4cbe6d..ddf13f82b 100644
--- a/dashboard/src/views/authentication/auth/LoginPage.vue
+++ b/dashboard/src/views/authentication/auth/LoginPage.vue
@@ -64,14 +64,17 @@ onMounted(() => {
 
 <template>
   <div class="login-page-container">
-    <v-card class="login-card" elevation="1">
+    <v-card
+      class="login-card"
+      elevation="1"
+    >
       <v-card-title>
         <div class="d-flex justify-space-between align-center w-100">
           <img
             width="80"
             src="@/assets/images/icon-no-shadow.svg"
             alt="AstrBot Logo"
-          />
+          >
           <div class="d-flex align-center gap-1">
             <LanguageSwitcher />
             <v-divider
@@ -83,40 +86,60 @@ onMounted(() => {
                 align-self: center !important;
                 border-color: rgba(var(--v-theme-primary), 0.45) !important;
               "
-            ></v-divider>
+            />
 
             <v-btn
-              @click="serverConfigDialog = true"
               icon
               variant="text"
               size="small"
+              @click="serverConfigDialog = true"
             >
-              <v-icon size="18" :color="'rgb(var(--v-theme-primary))'">
+              <v-icon
+                size="18"
+                :color="'rgb(var(--v-theme-primary))'"
+              >
                 mdi-server
               </v-icon>
-              <v-tooltip activator="parent" location="top">
+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
                 {{ t("serverConfig.tooltip") }}
               </v-tooltip>
             </v-btn>
 
             <v-btn
-              @click="toggleTheme"
               class="theme-toggle-btn"
               icon
               variant="text"
               size="small"
+              @click="toggleTheme"
             >
-              <v-icon size="18" :color="'rgb(var(--v-theme-primary))'">
+              <v-icon
+                size="18"
+                :color="'rgb(var(--v-theme-primary))'"
+              >
                 {{ customizer.isDarkTheme ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}
               </v-icon>
-              <v-tooltip activator="parent" location="top">
+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
                 {{ customizer.isDarkTheme ? t('theme.switchToLight') : t('theme.switchToDark') }}
               </v-tooltip>
             </v-btn>
           </div>
         </div>
-        <div class="ml-2" style="font-size: 26px">{{ t("logo.title") }}</div>
-        <div class="mt-2 ml-2" style="font-size: 14px; color: grey">
+        <div
+          class="ml-2"
+          style="font-size: 26px"
+        >
+          {{ t("logo.title") }}
+        </div>
+        <div
+          class="mt-2 ml-2"
+          style="font-size: 14px; color: grey"
+        >
           {{ t("logo.subtitle") }}
         </div>
       </v-card-title>
@@ -125,7 +148,10 @@ onMounted(() => {
       </v-card-text>
     </v-card>
 
-    <v-dialog v-model="serverConfigDialog" max-width="450">
+    <v-dialog
+      v-model="serverConfigDialog"
+      max-width="450"
+    >
       <v-card>
         <v-card-title>{{ t("serverConfig.title") }}</v-card-title>
         <v-card-text>
@@ -136,7 +162,7 @@ onMounted(() => {
           <div
             v-if="
               (apiStore.presets && apiStore.presets.length > 0) ||
-              apiStore.customPresets
+                apiStore.customPresets
             "
             class="mb-4"
           >
@@ -167,7 +193,7 @@ onMounted(() => {
                   class="mb-2"
                   variant="outlined"
                   bg-color="white"
-                ></v-text-field>
+                />
                 <v-text-field
                   v-model="newPresetUrl"
                   label="URL"
@@ -176,15 +202,16 @@ onMounted(() => {
                   class="mb-2"
                   variant="outlined"
                   bg-color="white"
-                ></v-text-field>
+                />
                 <v-btn
                   size="small"
                   block
                   color="primary"
                   variant="flat"
                   @click="savePreset"
-                  >Add Preset</v-btn
                 >
+                  Add Preset
+                </v-btn>
               </div>
             </v-expand-transition>
 
@@ -193,10 +220,10 @@ onMounted(() => {
                 v-for="preset in apiStore.presets"
                 :key="preset.name"
                 size="small"
-                @click="apiUrl = preset.url"
                 :variant="apiUrl === preset.url ? 'flat' : 'tonal'"
                 :color="apiUrl === preset.url ? 'primary' : undefined"
                 :closable="isCustomPreset(preset.name)"
+                @click="apiUrl = preset.url"
                 @click:close="apiStore.removePreset(preset.name)"
               >
                 {{ preset.name }}
@@ -212,16 +239,27 @@ onMounted(() => {
             persistent-hint
             variant="outlined"
             density="compact"
-          ></v-text-field>
+          />
         </v-card-text>
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="serverConfigDialog = false">{{
-            t("serverConfig.cancel")
-          }}</v-btn>
-          <v-btn color="primary" variant="flat" @click="saveApiUrl">{{
-            t("serverConfig.save")
-          }}</v-btn>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="serverConfigDialog = false"
+          >
+            {{
+              t("serverConfig.cancel")
+            }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="saveApiUrl"
+          >
+            {{
+              t("serverConfig.save")
+            }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/dashboard/src/views/authentication/authForms/AuthLogin.vue b/dashboard/src/views/authentication/authForms/AuthLogin.vue
index 0fcfcd26d..37119492f 100644
--- a/dashboard/src/views/authentication/authForms/AuthLogin.vue
+++ b/dashboard/src/views/authentication/authForms/AuthLogin.vue
@@ -20,12 +20,10 @@ async function validate(values: any, { setErrors }: any) {
   // md5加密
   let password_ = password.value;
   if (password.value != '') {
-    // @ts-ignore
     password_ = md5(password.value);
   }
 
   const authStore = useAuthStore();
-  // @ts-ignore
   authStore.returnUrl = new URLSearchParams(window.location.search).get('redirect');
   return authStore.login(username.value, password_).then((res) => {
     console.log(res);
@@ -39,26 +37,64 @@ async function validate(values: any, { setErrors }: any) {
 </script>
 
 <template>
-  <Form @submit="validate" class="mt-4 login-form" v-slot="{ errors, isSubmitting }">
-    <v-text-field v-model="username" :label="t('username')" class="mb-6 input-field" required hide-details="auto"
-      variant="outlined" prepend-inner-icon="mdi-account" :disabled="loading"></v-text-field>
+  <Form
+    v-slot="{ errors, isSubmitting }"
+    class="mt-4 login-form"
+    @submit="validate"
+  >
+    <v-text-field
+      v-model="username"
+      :label="t('username')"
+      class="mb-6 input-field"
+      required
+      hide-details="auto"
+      variant="outlined"
+      prepend-inner-icon="mdi-account"
+      :disabled="loading"
+    />
 
-    <v-text-field v-model="password" :label="t('password')" required variant="outlined" hide-details="auto"
-      :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" :type="show1 ? 'text' : 'password'"
-      @click:append="show1 = !show1" class="pwd-input" prepend-inner-icon="mdi-lock" :disabled="loading"></v-text-field>
+    <v-text-field
+      v-model="password"
+      :label="t('password')"
+      required
+      variant="outlined"
+      hide-details="auto"
+      :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
+      :type="show1 ? 'text' : 'password'"
+      class="pwd-input"
+      prepend-inner-icon="mdi-lock"
+      :disabled="loading"
+      @click:append="show1 = !show1"
+    />
 
     <div class="mt-2">
       <small style="color: grey;">{{ t('defaultHint') }}</small>
     </div>
 
 
-    <v-btn color="secondary" :loading="isSubmitting || loading" block class="login-btn mt-8" variant="flat" size="large"
-      :disabled="valid" type="submit">
+    <v-btn
+      color="secondary"
+      :loading="isSubmitting || loading"
+      block
+      class="login-btn mt-8"
+      variant="flat"
+      size="large"
+      :disabled="valid"
+      type="submit"
+    >
       <span class="login-btn-text">{{ t('login') }}</span>
     </v-btn>
 
-    <div v-if="errors.apiError" class="mt-4 error-container">
-      <v-alert color="error" variant="tonal" icon="mdi-alert-circle" border="start">
+    <div
+      v-if="errors.apiError"
+      class="mt-4 error-container"
+    >
+      <v-alert
+        color="error"
+        variant="tonal"
+        icon="mdi-alert-circle"
+        border="start"
+      >
         {{ errors.apiError }}
       </v-alert>
     </div>
diff --git a/dashboard/src/views/dashboards/default/DefaultDashboard.vue b/dashboard/src/views/dashboards/default/DefaultDashboard.vue
index 4037a0045..702b7c2f1 100644
--- a/dashboard/src/views/dashboards/default/DefaultDashboard.vue
+++ b/dashboard/src/views/dashboards/default/DefaultDashboard.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="dashboard-container">
     <v-slide-y-transition>
-      <v-row v-if="noticeTitle && noticeContent" class="notice-row">
+      <v-row
+        v-if="noticeTitle && noticeContent"
+        class="notice-row"
+      >
         <v-alert
           :type="noticeType"
           :text="noticeContent"
@@ -10,28 +13,40 @@
           class="dashboard-alert"
           variant="tonal"
           border="start"
-        ></v-alert>
+        />
       </v-row>
     </v-slide-y-transition>
     
     <!-- 主指标卡片行 -->
     <v-row class="stats-row">
-      <v-col cols="12" md="3">
+      <v-col
+        cols="12"
+        md="3"
+      >
         <v-slide-y-transition>
           <TotalMessage :stat="stat" />
         </v-slide-y-transition>
       </v-col>
-      <v-col cols="12" md="3">
+      <v-col
+        cols="12"
+        md="3"
+      >
         <v-slide-y-transition>
           <OnlinePlatform :stat="stat" />
         </v-slide-y-transition>
       </v-col>
-      <v-col cols="12" md="3">
+      <v-col
+        cols="12"
+        md="3"
+      >
         <v-slide-y-transition>
           <RunningTime :stat="stat" />
         </v-slide-y-transition>
       </v-col>
-      <v-col cols="12" md="3">
+      <v-col
+        cols="12"
+        md="3"
+      >
         <v-slide-y-transition>
           <MemoryUsage :stat="stat" />
         </v-slide-y-transition>
@@ -40,19 +55,30 @@
     
     <!-- 图表行 -->
     <v-row class="charts-row">
-      <v-col cols="12" lg="8">
+      <v-col
+        cols="12"
+        lg="8"
+      >
         <v-slide-y-transition>
           <MessageStat />
         </v-slide-y-transition>
       </v-col>
-      <v-col cols="12" lg="4">
+      <v-col
+        cols="12"
+        lg="4"
+      >
         <v-slide-y-transition>
           <PlatformStat :stat="stat" />
         </v-slide-y-transition>
       </v-col>
     </v-row>
     <div class="dashboard-footer">
-      <v-chip size="small" color="primary" variant="flat" prepend-icon="mdi-refresh">
+      <v-chip
+        size="small"
+        color="primary"
+        variant="flat"
+        prepend-icon="mdi-refresh"
+      >
         {{ t('lastUpdate') }}: {{ lastUpdated }}
       </v-chip>
       <v-btn 
@@ -61,9 +87,9 @@
         color="primary" 
         variant="text" 
         class="ml-2" 
-        @click="fetchData"
         :loading="isRefreshing"
-      ></v-btn>
+        @click="fetchData"
+      />
     </div>
   </div>
 </template>
diff --git a/dashboard/src/views/dashboards/default/components/MemoryUsage.vue b/dashboard/src/views/dashboards/default/components/MemoryUsage.vue
index 23c183b7b..a61151958 100644
--- a/dashboard/src/views/dashboards/default/components/MemoryUsage.vue
+++ b/dashboard/src/views/dashboards/default/components/MemoryUsage.vue
@@ -1,16 +1,30 @@
 <template>
-  <v-card elevation="1" class="stat-card memory-card">
+  <v-card
+    elevation="1"
+    class="stat-card memory-card"
+  >
     <v-card-text>
       <div class="d-flex align-start">
         <div class="icon-wrapper">
-          <v-icon icon="mdi-memory" size="24"></v-icon>
+          <v-icon
+            icon="mdi-memory"
+            size="24"
+          />
         </div>
         
         <div class="stat-content">
-          <div class="stat-title">{{ t('stats.memoryUsage.title') }}</div>
+          <div class="stat-title">
+            {{ t('stats.memoryUsage.title') }}
+          </div>
           <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ stat.memory?.process || 0 }} <span class="memory-unit">MiB / {{ stat.memory?.system || 0 }} MiB</span></h2>
-            <v-chip :color="memoryStatus.color" size="x-small" class="status-chip">
+            <h2 class="stat-value">
+              {{ stat.memory?.process || 0 }} <span class="memory-unit">MiB / {{ stat.memory?.system || 0 }} MiB</span>
+            </h2>
+            <v-chip
+              :color="memoryStatus.color"
+              size="x-small"
+              class="status-chip"
+            >
               {{ memoryStatus.label }}
             </v-chip>
           </div>
@@ -19,8 +33,12 @@
       
       <div class="metrics-container">
         <div class="metric-item">
-          <div class="metric-label">{{ t('stats.memoryUsage.cpuLoad') }}</div>
-          <div class="metric-value">{{ stat.cpu_percent || '0' }}%</div>
+          <div class="metric-label">
+            {{ t('stats.memoryUsage.cpuLoad') }}
+          </div>
+          <div class="metric-value">
+            {{ stat.cpu_percent || '0' }}%
+          </div>
         </div>
       </div>
     </v-card-text>
diff --git a/dashboard/src/views/dashboards/default/components/MessageStat.vue b/dashboard/src/views/dashboards/default/components/MessageStat.vue
index a41c664e4..e9b29232f 100644
--- a/dashboard/src/views/dashboards/default/components/MessageStat.vue
+++ b/dashboard/src/views/dashboards/default/components/MessageStat.vue
@@ -1,29 +1,41 @@
 <template>
-  <v-card elevation="1" class="chart-card">
+  <v-card
+    elevation="1"
+    class="chart-card"
+  >
     <v-card-text>
       <div class="chart-header">
         <div>
-          <div class="chart-title">{{ t('charts.messageTrend.title') }}</div>
-          <div class="chart-subtitle">{{ t('charts.messageTrend.subtitle') }}</div>
+          <div class="chart-title">
+            {{ t('charts.messageTrend.title') }}
+          </div>
+          <div class="chart-subtitle">
+            {{ t('charts.messageTrend.subtitle') }}
+          </div>
         </div>
         
         <v-select 
-          color="primary" 
-          variant="outlined"
-          density="compact"
-          hide-details 
           v-model="selectedTimeRange" 
+          color="primary"
+          variant="outlined"
+          density="compact" 
+          hide-details 
           :items="timeRanges" 
           item-title="label" 
           item-value="value" 
           class="time-select"
+          return-object
+          single-line 
           @update:model-value="fetchMessageSeries"
-          return-object 
-          single-line
         >
-          <template v-slot:selection="{ item }">
+          <template #selection="{ item }">
             <div class="d-flex align-center">
-              <v-icon start size="small">mdi-calendar-range</v-icon>
+              <v-icon
+                start
+                size="small"
+              >
+                mdi-calendar-range
+              </v-icon>
               {{ item.raw.label }}
             </div>
           </template>
@@ -32,36 +44,61 @@
       
       <div class="chart-stats">
         <div class="stat-box">
-          <div class="stat-label">{{ t('charts.messageTrend.totalMessages') }}</div>
-          <div class="stat-number">{{ totalMessages }}</div>
+          <div class="stat-label">
+            {{ t('charts.messageTrend.totalMessages') }}
+          </div>
+          <div class="stat-number">
+            {{ totalMessages }}
+          </div>
         </div>
         
         <div class="stat-box">
-          <div class="stat-label">{{ t('charts.messageTrend.dailyAverage') }}</div>
-          <div class="stat-number">{{ dailyAverage }}</div>
+          <div class="stat-label">
+            {{ t('charts.messageTrend.dailyAverage') }}
+          </div>
+          <div class="stat-number">
+            {{ dailyAverage }}
+          </div>
         </div>
         
-        <div class="stat-box" :class="{'trend-up': growthRate > 0, 'trend-down': growthRate < 0}">
-          <div class="stat-label">{{ t('charts.messageTrend.growthRate') }}</div>
+        <div
+          class="stat-box"
+          :class="{'trend-up': growthRate > 0, 'trend-down': growthRate < 0}"
+        >
+          <div class="stat-label">
+            {{ t('charts.messageTrend.growthRate') }}
+          </div>
           <div class="stat-number">
-            <v-icon v-show="growthRate !== 0" size="small" :icon="growthRate > 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'"></v-icon>
+            <v-icon
+              v-show="growthRate !== 0"
+              size="small"
+              :icon="growthRate > 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'"
+            />
             {{ Math.abs(growthRate) }}%
           </div>
         </div>
       </div>
       
       <div class="chart-container">
-        <div v-if="loading" class="loading-overlay">
-          <v-progress-circular indeterminate color="primary"></v-progress-circular>
-          <div class="loading-text">{{ t('status.loading') }}</div>
+        <div
+          v-if="loading"
+          class="loading-overlay"
+        >
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          />
+          <div class="loading-text">
+            {{ t('status.loading') }}
+          </div>
         </div>
         <apexchart 
+          ref="chart" 
           type="area" 
           height="280" 
           :options="chartOptions" 
-          :series="chartSeries" 
-          ref="chart"
-        ></apexchart>
+          :series="chartSeries"
+        />
       </div>
     </v-card-text>
   </v-card>
diff --git a/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue b/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue
index e634bc308..e2c5e25fe 100644
--- a/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue
+++ b/dashboard/src/views/dashboards/default/components/OnlinePlatform.vue
@@ -1,17 +1,29 @@
 <template>
-  <v-card elevation="1" class="stat-card platform-card">
+  <v-card
+    elevation="1"
+    class="stat-card platform-card"
+  >
     <v-card-text>
       <div class="d-flex align-start">
         <div class="icon-wrapper">
-          <v-icon icon="mdi-server-network" size="24"></v-icon>
+          <v-icon
+            icon="mdi-server-network"
+            size="24"
+          />
         </div>
         
         <div class="stat-content">
-          <div class="stat-title">{{ t('stats.onlinePlatform.title') }}</div>
+          <div class="stat-title">
+            {{ t('stats.onlinePlatform.title') }}
+          </div>
           <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ stat.platform_count || 0 }}</h2>
+            <h2 class="stat-value">
+              {{ stat.platform_count || 0 }}
+            </h2>
+          </div>
+          <div class="stat-subtitle">
+            {{ t('stats.onlinePlatform.subtitle') }}
           </div>
-          <div class="stat-subtitle">{{ t('stats.onlinePlatform.subtitle') }}</div>
         </div>
       </div>
     </v-card-text>
diff --git a/dashboard/src/views/dashboards/default/components/OnlineTime.vue b/dashboard/src/views/dashboards/default/components/OnlineTime.vue
index 66f8b8012..e0daeadab 100644
--- a/dashboard/src/views/dashboards/default/components/OnlineTime.vue
+++ b/dashboard/src/views/dashboards/default/components/OnlineTime.vue
@@ -1,40 +1,67 @@
 <template>
   <div class="stats-container">
-    <v-card elevation="1" class="stat-card uptime-card mb-4">
+    <v-card
+      elevation="1"
+      class="stat-card uptime-card mb-4"
+    >
       <v-card-text>
         <div class="d-flex align-center">
           <div class="icon-wrapper">
-            <v-icon icon="mdi-clock-outline" size="24"></v-icon>
+            <v-icon
+              icon="mdi-clock-outline"
+              size="24"
+            />
           </div>
           
           <div class="stat-content">
-            <div class="stat-title">{{ tm('features.dashboard.status.uptime') }}</div>
-            <h3 class="uptime-value">{{ stat.running || tm('features.dashboard.status.loading') }}</h3>
+            <div class="stat-title">
+              {{ tm('features.dashboard.status.uptime') }}
+            </div>
+            <h3 class="uptime-value">
+              {{ stat.running || tm('features.dashboard.status.loading') }}
+            </h3>
           </div>
           
-          <v-spacer></v-spacer>
+          <v-spacer />
           
           <div class="uptime-status">
-            <v-icon icon="mdi-circle" size="10" color="success" class="blink-animation"></v-icon>
+            <v-icon
+              icon="mdi-circle"
+              size="10"
+              color="success"
+              class="blink-animation"
+            />
             <span class="status-text">{{ tm('features.dashboard.status.online') }}</span>
           </div>
         </div>
       </v-card-text>
     </v-card>
 
-    <v-card elevation="1" class="stat-card memory-card">
+    <v-card
+      elevation="1"
+      class="stat-card memory-card"
+    >
       <v-card-text>
         <div class="d-flex align-center">
           <div class="icon-wrapper">
-            <v-icon icon="mdi-memory" size="24"></v-icon>
+            <v-icon
+              icon="mdi-memory"
+              size="24"
+            />
           </div>
           
           <div class="stat-content">
-            <div class="stat-title">{{ tm('features.dashboard.status.memoryUsage') }}</div>
+            <div class="stat-title">
+              {{ tm('features.dashboard.status.memoryUsage') }}
+            </div>
             <div class="memory-values">
-              <h3 class="memory-value">{{ stat.memory?.process || 0 }} <span class="memory-unit">MiB</span></h3>
+              <h3 class="memory-value">
+                {{ stat.memory?.process || 0 }} <span class="memory-unit">MiB</span>
+              </h3>
               <span class="memory-separator">/</span>
-              <h4 class="memory-total">{{ stat.memory?.system || 0 }} <span class="memory-unit">MiB</span></h4>
+              <h4 class="memory-total">
+                {{ stat.memory?.system || 0 }} <span class="memory-unit">MiB</span>
+              </h4>
             </div>
             
             <v-progress-linear
@@ -42,9 +69,11 @@
               color="warning"
               height="4"
               class="mt-2"
-            ></v-progress-linear>
+            />
             
-            <div class="memory-percentage">{{ memoryPercentage }}%</div>
+            <div class="memory-percentage">
+              {{ memoryPercentage }}%
+            </div>
           </div>
         </div>
       </v-card-text>
@@ -57,17 +86,11 @@ import { useModuleI18n } from '@/i18n/composables';
 
 export default {
   name: 'OnlineTime',
+  props: ['stat'],
   setup() {
     const { tm } = useModuleI18n('features/dashboard');
     return { tm };
   },
-  props: ['stat'],
-  data: () => ({
-    stat: {
-      memory: { process: 0, system: 0 },
-      running: "",
-    },
-  }),
   computed: {
     memoryPercentage() {
       if (!this.stat.memory || !this.stat.memory.process || !this.stat.memory.system) return 0;
@@ -193,4 +216,4 @@ export default {
 .blink-animation {
   animation: blink 1.5s infinite;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/dashboard/src/views/dashboards/default/components/PlatformStat.vue b/dashboard/src/views/dashboards/default/components/PlatformStat.vue
index b61b1b298..37f8b813c 100644
--- a/dashboard/src/views/dashboards/default/components/PlatformStat.vue
+++ b/dashboard/src/views/dashboards/default/components/PlatformStat.vue
@@ -1,30 +1,50 @@
 <template>
-  <v-card elevation="1" class="platform-stat-card">
+  <v-card
+    elevation="1"
+    class="platform-stat-card"
+  >
     <v-card-text>
       <div class="platform-header">
         <div>
-          <div class="platform-title">{{ t('charts.platformStat.title') }}</div>
-          <div class="platform-subtitle">{{ t('charts.platformStat.subtitle') }}</div>
+          <div class="platform-title">
+            {{ t('charts.platformStat.title') }}
+          </div>
+          <div class="platform-subtitle">
+            {{ t('charts.platformStat.subtitle') }}
+          </div>
         </div>
       </div>
       
-      <v-divider class="my-3"></v-divider>
+      <v-divider class="my-3" />
       
-      <div v-if="platforms.length > 0" class="platform-list-container">
-        <v-list class="platform-list" density="compact">
+      <div
+        v-if="platforms.length > 0"
+        class="platform-list-container"
+      >
+        <v-list
+          class="platform-list"
+          density="compact"
+        >
           <v-list-item
             v-for="(platform, i) in sortedPlatforms"
             :key="i"
             :value="platform"
             class="platform-item"
           >
-            <template v-slot:prepend>
-              <div class="platform-rank" :class="{'top-rank': i < 3}">{{ i + 1 }}</div>
+            <template #prepend>
+              <div
+                class="platform-rank"
+                :class="{'top-rank': i < 3}"
+              >
+                {{ i + 1 }}
+              </div>
             </template>
             
-            <v-list-item-title class="platform-name">{{ platform.name }}</v-list-item-title>
+            <v-list-item-title class="platform-name">
+              {{ platform.name }}
+            </v-list-item-title>
             
-            <template v-slot:append>
+            <template #append>
               <div class="platform-count">
                 <span class="count-value">{{ platform.count }}</span>
                 <span class="count-label">{{ t('charts.platformStat.messageUnit') }}</span>
@@ -35,18 +55,30 @@
         
         <div class="platform-stats-summary">
           <div class="platform-stat-item">
-            <div class="stat-label">{{ t('charts.platformStat.platformCount') }}</div>
-            <div class="stat-value">{{ platforms.length }}</div>
+            <div class="stat-label">
+              {{ t('charts.platformStat.platformCount') }}
+            </div>
+            <div class="stat-value">
+              {{ platforms.length }}
+            </div>
           </div>
-          <v-divider vertical></v-divider>
+          <v-divider vertical />
           <div class="platform-stat-item">
-            <div class="stat-label">{{ t('charts.platformStat.mostActive') }}</div>
-            <div class="stat-value">{{ mostActivePlatform }}</div>
+            <div class="stat-label">
+              {{ t('charts.platformStat.mostActive') }}
+            </div>
+            <div class="stat-value">
+              {{ mostActivePlatform }}
+            </div>
           </div>
-          <v-divider vertical></v-divider>
+          <v-divider vertical />
           <div class="platform-stat-item">
-            <div class="stat-label">{{ t('charts.platformStat.totalPercentage') }}</div>
-            <div class="stat-value">{{ topPlatformPercentage }}%</div>
+            <div class="stat-label">
+              {{ t('charts.platformStat.totalPercentage') }}
+            </div>
+            <div class="stat-value">
+              {{ topPlatformPercentage }}%
+            </div>
           </div>
         </div>
         
@@ -59,13 +91,22 @@
             rounded
             class="platform-progress"
             :color="i === 0 ? 'primary' : i === 1 ? 'info' : i === 2 ? 'success' : 'grey-lighten-1'"
-          ></v-progress-linear>
+          />
         </div>
       </div>
       
-      <div v-else class="no-data">
-        <v-icon icon="mdi-information-outline" size="40" color="grey-lighten-1"></v-icon>
-        <div class="no-data-text">{{ t('charts.platformStat.noData') }}</div>
+      <div
+        v-else
+        class="no-data"
+      >
+        <v-icon
+          icon="mdi-information-outline"
+          size="40"
+          color="grey-lighten-1"
+        />
+        <div class="no-data-text">
+          {{ t('charts.platformStat.noData') }}
+        </div>
       </div>
     </v-card-text>
   </v-card>
diff --git a/dashboard/src/views/dashboards/default/components/RunningTime.vue b/dashboard/src/views/dashboards/default/components/RunningTime.vue
index df83bb30f..4c5415a3c 100644
--- a/dashboard/src/views/dashboards/default/components/RunningTime.vue
+++ b/dashboard/src/views/dashboards/default/components/RunningTime.vue
@@ -1,17 +1,29 @@
 <template>
-  <v-card elevation="1" class="stat-card uptime-card">
+  <v-card
+    elevation="1"
+    class="stat-card uptime-card"
+  >
     <v-card-text>
       <div class="d-flex align-start">
         <div class="icon-wrapper">
-          <v-icon icon="mdi-clock-outline" size="24"></v-icon>
+          <v-icon
+            icon="mdi-clock-outline"
+            size="24"
+          />
         </div>
         
         <div class="stat-content">
-          <div class="stat-title">{{ t('stats.runningTime.title') }}</div>
+          <div class="stat-title">
+            {{ t('stats.runningTime.title') }}
+          </div>
           <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ formattedTime }}</h2>
+            <h2 class="stat-value">
+              {{ formattedTime }}
+            </h2>
+          </div>
+          <div class="stat-subtitle">
+            {{ t('stats.runningTime.subtitle') }}
           </div>
-          <div class="stat-subtitle">{{ t('stats.runningTime.subtitle') }}</div>
         </div>
       </div>
     </v-card-text>
diff --git a/dashboard/src/views/dashboards/default/components/TotalMessage.vue b/dashboard/src/views/dashboards/default/components/TotalMessage.vue
index f9547c394..dadb3588e 100644
--- a/dashboard/src/views/dashboards/default/components/TotalMessage.vue
+++ b/dashboard/src/views/dashboards/default/components/TotalMessage.vue
@@ -1,20 +1,37 @@
 <template>
-  <v-card elevation="1" class="stat-card message-card">
+  <v-card
+    elevation="1"
+    class="stat-card message-card"
+  >
     <v-card-text>
       <div class="d-flex align-start">
         <div class="icon-wrapper">
-          <v-icon icon="mdi-message-text-outline" size="24"></v-icon>
+          <v-icon
+            icon="mdi-message-text-outline"
+            size="24"
+          />
         </div>
         
         <div class="stat-content">
-          <div class="stat-title">{{ t('stats.totalMessage.title') }}</div>
+          <div class="stat-title">
+            {{ t('stats.totalMessage.title') }}
+          </div>
           <div class="stat-value-wrapper">
-            <h2 class="stat-value">{{ formattedCount }}</h2>
-            <v-chip v-if="stat.daily_increase" class="trend-chip" size="x-small" color="success">
+            <h2 class="stat-value">
+              {{ formattedCount }}
+            </h2>
+            <v-chip
+              v-if="stat.daily_increase"
+              class="trend-chip"
+              size="x-small"
+              color="success"
+            >
               +{{ stat.daily_increase }}
             </v-chip>
           </div>
-          <div class="stat-subtitle">{{ t('stats.totalMessage.subtitle') }}</div>
+          <div class="stat-subtitle">
+            {{ t('stats.totalMessage.subtitle') }}
+          </div>
         </div>
       </div>
     </v-card-text>
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 82d0d75e5..2d36ea69d 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -158,263 +158,308 @@ const {
 </script>
 
 <template>
-          <v-tab-item v-show="activeTab === 'installed'">
-            <div class="mb-4 pt-4 pb-4">
-              <div class="d-flex align-center flex-wrap" style="gap: 12px">
-                <h2 class="text-h2 mb-0">{{ tm("titles.installedAstrBotPlugins") }}</h2>
+  <v-tab-item v-show="activeTab === 'installed'">
+    <div class="mb-4 pt-4 pb-4">
+      <div
+        class="d-flex align-center flex-wrap"
+        style="gap: 12px"
+      >
+        <h2 class="text-h2 mb-0">
+          {{ tm("titles.installedAstrBotPlugins") }}
+        </h2>
 
-                <div class="d-flex align-center flex-wrap ml-auto" style="gap: 8px">
-                  <v-text-field
-                    :model-value="pluginSearch"
-                    @update:model-value="pluginSearch = normalizeTextInput($event)"
-                    density="compact"
-                    :label="tm('search.placeholder')"
-                    prepend-inner-icon="mdi-magnify"
-                    clearable
-                    variant="solo-filled"
-                    flat
-                    hide-details
-                    single-line
-                    style="min-width: 220px; max-width: 340px"
-                  >
-                  </v-text-field>
+        <div
+          class="d-flex align-center flex-wrap ml-auto"
+          style="gap: 8px"
+        >
+          <v-text-field
+            :model-value="pluginSearch"
+            density="compact"
+            :label="tm('search.placeholder')"
+            prepend-inner-icon="mdi-magnify"
+            clearable
+            variant="solo-filled"
+            flat
+            hide-details
+            single-line
+            style="min-width: 220px; max-width: 340px"
+            @update:model-value="pluginSearch = normalizeTextInput($event)"
+          />
 
-                  <v-btn-toggle
-                    v-model="isListView"
-                    mandatory
-                    density="compact"
-                    color="primary"
-                    class="view-mode-toggle"
-                  >
-                    <v-btn :value="false" icon="mdi-view-grid"></v-btn>
-                    <v-btn :value="true" icon="mdi-view-list"></v-btn>
-                  </v-btn-toggle>
-                </div>
-              </div>
-            </div>
+          <v-btn-toggle
+            v-model="isListView"
+            mandatory
+            density="compact"
+            color="primary"
+            class="view-mode-toggle"
+          >
+            <v-btn
+              :value="false"
+              icon="mdi-view-grid"
+            />
+            <v-btn
+              :value="true"
+              icon="mdi-view-list"
+            />
+          </v-btn-toggle>
+        </div>
+      </div>
+    </div>
 
-            <v-row class="mb-4">
-              <v-col cols="12">
-                <div class="installed-toolbar">
-                  <div class="installed-toolbar__actions">
-                    <v-btn variant="tonal" @click="toggleShowReserved">
-                      <v-icon>{{
-                        showReserved ? "mdi-eye-off" : "mdi-eye"
-                      }}</v-icon>
-                      {{
-                        showReserved
-                          ? tm("buttons.hideSystemPlugins")
-                          : tm("buttons.showSystemPlugins")
-                      }}
-                    </v-btn>
-
-                    <v-btn
-                      color="warning"
-                      variant="tonal"
-                      :disabled="updatableExtensions.length === 0"
-                      :loading="updatingAll"
-                      @click="showUpdateAllConfirm"
-                    >
-                      <v-icon>mdi-update</v-icon>
-                      {{ tm("buttons.updateAll") }}
-                    </v-btn>
-                  </div>
-
-                  <div class="installed-toolbar__controls">
-                    <v-btn-toggle
-                      v-model="installedStatusFilter"
-                      mandatory
-                      divided
-                      density="compact"
-                      color="primary"
-                      class="installed-status-toggle"
-                    >
-                      <v-btn value="all" prepend-icon="mdi-filter-variant">
-                        {{ tm("filters.all") }}
-                      </v-btn>
-                      <v-btn value="enabled" prepend-icon="mdi-play-circle-outline">
-                        {{ tm("status.enabled") }}
-                      </v-btn>
-                      <v-btn value="disabled" prepend-icon="mdi-pause-circle-outline">
-                        {{ tm("status.disabled") }}
-                      </v-btn>
-                    </v-btn-toggle>
-
-                    <PluginSortControl
-                      v-model="installedSortBy"
-                      :items="installedSortItems"
-                      :label="tm('sort.by')"
-                      :order="installedSortOrder"
-                      :ascending-label="tm('sort.ascending')"
-                      :descending-label="tm('sort.descending')"
-                      :show-order="installedSortUsesOrder"
-                      @update:order="installedSortOrder = $event"
-                    />
-                  </div>
-                </div>
-              </v-col>
-            </v-row>
-
-            <v-card
-              v-if="failedPluginItems.length > 0"
-              class="mb-4 rounded-lg"
+    <v-row class="mb-4">
+      <v-col cols="12">
+        <div class="installed-toolbar">
+          <div class="installed-toolbar__actions">
+            <v-btn
               variant="tonal"
-              color="warning"
+              @click="toggleShowReserved"
             >
-              <v-card-title class="d-flex align-center">
-                <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
-                {{ tm("failedPlugins.title", { count: failedPluginItems.length }) }}
-              </v-card-title>
-              <v-card-text class="pt-0">
-                <div class="text-body-2 mb-3">
-                  {{ tm("failedPlugins.hint") }}
+              <v-icon>
+                {{
+                  showReserved ? "mdi-eye-off" : "mdi-eye"
+                }}
+              </v-icon>
+              {{
+                showReserved
+                  ? tm("buttons.hideSystemPlugins")
+                  : tm("buttons.showSystemPlugins")
+              }}
+            </v-btn>
+
+            <v-btn
+              color="warning"
+              variant="tonal"
+              :disabled="updatableExtensions.length === 0"
+              :loading="updatingAll"
+              @click="showUpdateAllConfirm"
+            >
+              <v-icon>mdi-update</v-icon>
+              {{ tm("buttons.updateAll") }}
+            </v-btn>
+          </div>
+
+          <div class="installed-toolbar__controls">
+            <v-btn-toggle
+              v-model="installedStatusFilter"
+              mandatory
+              divided
+              density="compact"
+              color="primary"
+              class="installed-status-toggle"
+            >
+              <v-btn
+                value="all"
+                prepend-icon="mdi-filter-variant"
+              >
+                {{ tm("filters.all") }}
+              </v-btn>
+              <v-btn
+                value="enabled"
+                prepend-icon="mdi-play-circle-outline"
+              >
+                {{ tm("status.enabled") }}
+              </v-btn>
+              <v-btn
+                value="disabled"
+                prepend-icon="mdi-pause-circle-outline"
+              >
+                {{ tm("status.disabled") }}
+              </v-btn>
+            </v-btn-toggle>
+
+            <PluginSortControl
+              v-model="installedSortBy"
+              :items="installedSortItems"
+              :label="tm('sort.by')"
+              :order="installedSortOrder"
+              :ascending-label="tm('sort.ascending')"
+              :descending-label="tm('sort.descending')"
+              :show-order="installedSortUsesOrder"
+              @update:order="installedSortOrder = $event"
+            />
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-card
+      v-if="failedPluginItems.length > 0"
+      class="mb-4 rounded-lg"
+      variant="tonal"
+      color="warning"
+    >
+      <v-card-title class="d-flex align-center">
+        <v-icon
+          color="warning"
+          class="mr-2"
+        >
+          mdi-alert-circle
+        </v-icon>
+        {{ tm("failedPlugins.title", { count: failedPluginItems.length }) }}
+      </v-card-title>
+      <v-card-text class="pt-0">
+        <div class="text-body-2 mb-3">
+          {{ tm("failedPlugins.hint") }}
+        </div>
+        <v-table density="compact">
+          <thead>
+            <tr>
+              <th>{{ tm("failedPlugins.columns.plugin") }}</th>
+              <th>{{ tm("failedPlugins.columns.error") }}</th>
+              <th class="text-right">
+                {{ tm("buttons.actions") }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="plugin in failedPluginItems"
+              :key="plugin.dir_name"
+            >
+              <td>
+                <div class="font-weight-medium">
+                  {{ plugin.display_name }}
                 </div>
-                <v-table density="compact">
-                  <thead>
-                    <tr>
-                      <th>{{ tm("failedPlugins.columns.plugin") }}</th>
-                      <th>{{ tm("failedPlugins.columns.error") }}</th>
-                      <th class="text-right">{{ tm("buttons.actions") }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="plugin in failedPluginItems" :key="plugin.dir_name">
-                      <td>
-                        <div class="font-weight-medium">
-                          {{ plugin.display_name }}
-                        </div>
-                        <div class="text-caption text-medium-emphasis">
-                          {{ plugin.dir_name }}
-                        </div>
-                      </td>
-                      <td style="max-width: 520px">
-                        <div
-                          class="text-caption text-medium-emphasis"
-                          style="
+                <div class="text-caption text-medium-emphasis">
+                  {{ plugin.dir_name }}
+                </div>
+              </td>
+              <td style="max-width: 520px">
+                <div
+                  class="text-caption text-medium-emphasis"
+                  style="
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             line-clamp: 2;
                             -webkit-box-orient: vertical;
                             overflow: hidden;
                           "
-                        >
-                          {{ plugin.error || tm("status.unknown") }}
-                        </div>
-                      </td>
-                      <td class="text-right">
-                        <v-btn
-                          size="small"
-                          variant="tonal"
-                          color="primary"
-                          class="mr-2"
-                          prepend-icon="mdi-refresh"
-                          @click="reloadFailedPlugin(plugin.dir_name)"
-                        >
-                          {{ tm("buttons.reload") }}
-                        </v-btn>
-                        <v-btn
-                          size="small"
-                          variant="tonal"
-                          color="error"
-                          prepend-icon="mdi-delete"
-                          :disabled="plugin.reserved"
-                          @click="requestUninstallFailedPlugin(plugin.dir_name)"
-                        >
-                          {{ tm("buttons.uninstall") }}
-                        </v-btn>
-                      </td>
-                    </tr>
-                  </tbody>
-                </v-table>
-              </v-card-text>
-            </v-card>
+                >
+                  {{ plugin.error || tm("status.unknown") }}
+                </div>
+              </td>
+              <td class="text-right">
+                <v-btn
+                  size="small"
+                  variant="tonal"
+                  color="primary"
+                  class="mr-2"
+                  prepend-icon="mdi-refresh"
+                  @click="reloadFailedPlugin(plugin.dir_name)"
+                >
+                  {{ tm("buttons.reload") }}
+                </v-btn>
+                <v-btn
+                  size="small"
+                  variant="tonal"
+                  color="error"
+                  prepend-icon="mdi-delete"
+                  :disabled="plugin.reserved"
+                  @click="requestUninstallFailedPlugin(plugin.dir_name)"
+                >
+                  {{ tm("buttons.uninstall") }}
+                </v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card-text>
+    </v-card>
 
-            <v-fade-transition hide-on-leave>
-              <!-- 表格视图 -->
-              <div v-if="isListView">
-                <v-card class="rounded-lg overflow-hidden elevation-0">
-                  <v-data-table
-                    class="plugin-list-table"
-                    :headers="pluginHeaders"
-                    :items="filteredPlugins"
-                    :loading="loading_"
-                    item-key="name"
-                    hover
+    <v-fade-transition hide-on-leave>
+      <!-- 表格视图 -->
+      <div v-if="isListView">
+        <v-card class="rounded-lg overflow-hidden elevation-0">
+          <v-data-table
+            class="plugin-list-table"
+            :headers="pluginHeaders"
+            :items="filteredPlugins"
+            :loading="loading_"
+            item-key="name"
+            hover
+          >
+            <template #loader>
+              <v-row class="py-8 d-flex align-center justify-center">
+                <v-progress-circular
+                  indeterminate
+                  color="primary"
+                />
+                <span class="ml-2">{{ tm("status.loading") }}</span>
+              </v-row>
+            </template>
+
+            <template #item.name="{ item }">
+              <div class="d-flex align-center py-2">
+                <div
+                  v-if="item.logo"
+                  class="mr-3"
+                  style="flex-shrink: 0"
+                >
+                  <img
+                    :src="item.logo"
+                    :alt="item.name"
+                    style="
+                              height: 40px;
+                              width: 40px;
+                              border-radius: 8px;
+                              object-fit: cover;
+                            "
                   >
-                    <template v-slot:loader>
-                      <v-row class="py-8 d-flex align-center justify-center">
-                        <v-progress-circular
-                          indeterminate
-                          color="primary"
-                        ></v-progress-circular>
-                        <span class="ml-2">{{ tm("status.loading") }}</span>
-                      </v-row>
-                    </template>
-
-                    <template v-slot:item.name="{ item }">
-                      <div class="d-flex align-center py-2">
-                        <div
-                          v-if="item.logo"
-                          class="mr-3"
-                          style="flex-shrink: 0"
-                        >
-                          <img
-                            :src="item.logo"
-                            :alt="item.name"
-                            style="
+                </div>
+                <div
+                  v-else
+                  class="mr-3"
+                  style="flex-shrink: 0"
+                >
+                  <img
+                    :src="defaultPluginIcon"
+                    :alt="item.name"
+                    style="
                               height: 40px;
                               width: 40px;
                               border-radius: 8px;
                               object-fit: cover;
                             "
-                          />
-                        </div>
-                        <div v-else class="mr-3" style="flex-shrink: 0">
-                          <img
-                            :src="defaultPluginIcon"
-                            :alt="item.name"
-                            style="
-                              height: 40px;
-                              width: 40px;
-                              border-radius: 8px;
-                              object-fit: cover;
-                            "
-                          />
-                        </div>
-                        <div>
-                          <div class="text-h5" style="font-family: inherit;">
-                            {{
-                              item.display_name && item.display_name.length
-                                ? item.display_name
-                                : item.name
-                            }}
-                          </div>
-                          <div
-                            v-if="item.display_name && item.display_name.length"
-                            class="text-caption text-medium-emphasis mt-1"
-                          >
-                            {{ item.name }}
-                          </div>
-                          <div
-                            v-if="item.reserved"
-                            class="d-flex align-center mt-1"
-                          >
-                            <v-chip
-                              color="primary"
-                              size="x-small"
-                              class="font-weight-medium"
-                              >{{ tm("status.system") }}</v-chip
-                            >
-                          </div>
-                        </div>
-                      </div>
-                    </template>
+                  >
+                </div>
+                <div>
+                  <div
+                    class="text-h5"
+                    style="font-family: inherit;"
+                  >
+                    {{
+                      item.display_name && item.display_name.length
+                        ? item.display_name
+                        : item.name
+                    }}
+                  </div>
+                  <div
+                    v-if="item.display_name && item.display_name.length"
+                    class="text-caption text-medium-emphasis mt-1"
+                  >
+                    {{ item.name }}
+                  </div>
+                  <div
+                    v-if="item.reserved"
+                    class="d-flex align-center mt-1"
+                  >
+                    <v-chip
+                      color="primary"
+                      size="x-small"
+                      class="font-weight-medium"
+                    >
+                      {{ tm("status.system") }}
+                    </v-chip>
+                  </div>
+                </div>
+              </div>
+            </template>
 
-                    <template v-slot:item.desc="{ item }">
-                      <div class="py-2">
-                        <div
-                          class="text-body-2 text-medium-emphasis"
-                          style="
+            <template #item.desc="{ item }">
+              <div class="py-2">
+                <div
+                  class="text-body-2 text-medium-emphasis"
+                  style="
                             display: -webkit-box;
                             -webkit-line-clamp: 3;
                             line-clamp: 3;
@@ -422,278 +467,309 @@ const {
                             overflow: hidden;
                             text-overflow: ellipsis;
                           "
-                        >
-                          {{ item.desc }}
-                        </div>
-                        <div
-                          v-if="item.support_platforms?.length"
-                          class="d-flex align-center flex-wrap mt-2"
-                        >
-                          <span class="text-caption text-medium-emphasis mr-2">
-                            {{ tm("card.status.supportPlatform") }}:
-                          </span>
-                          <v-chip
-                            v-for="platformId in item.support_platforms"
-                            :key="platformId"
-                            size="x-small"
-                            color="info"
-                            variant="outlined"
-                            class="mr-1 mb-1"
-                          >
-                            {{ platformId }}
-                          </v-chip>
-                        </div>
-                        <div
-                          v-if="item.astrbot_version"
-                          class="d-flex align-center flex-wrap mt-1"
-                        >
-                          <span class="text-caption text-medium-emphasis mr-2">
-                            {{ tm("card.status.astrbotVersion") }}:
-                          </span>
-                          <v-chip
-                            size="x-small"
-                            color="secondary"
-                            variant="outlined"
-                            class="mr-1 mb-1"
-                          >
-                            {{ item.astrbot_version }}
-                          </v-chip>
-                        </div>
-                      </div>
-                    </template>
-
-                    <template v-slot:item.version="{ item }">
-                      <div class="d-flex align-center">
-                        <span class="text-body-2">{{ item.version }}</span>
-                        <v-tooltip v-if="item.has_update" location="top">
-                          <template v-slot:activator="{ props: tooltipProps }">
-                            <v-icon
-                              v-bind="tooltipProps"
-                              color="warning"
-                              size="small"
-                              class="ml-1"
-                              style="cursor: pointer"
-                              @click.stop="updateExtension(item.name)"
-                              >mdi-alert</v-icon
-                            >
-                          </template>
-                          <span
-                            >{{ tm("messages.hasUpdate") }}
-                            {{ item.online_version }}</span
-                          >
-                        </v-tooltip>
-                        <v-tooltip v-if="item.has_update" location="top">
-                          <template v-slot:activator="{ props: tooltipProps }">
-                            <span
-                              v-bind="tooltipProps"
-                              class="ml-1 text-caption text-warning"
-                              style="cursor: pointer"
-                              @click.stop="updateExtension(item.name)"
-                            >
-                              {{ item.online_version }}
-                            </span>
-                          </template>
-                          <span>{{ tm("buttons.update") }}</span>
-                        </v-tooltip>
-                      </div>
-                    </template>
-
-                    <template v-slot:item.author="{ item }">
-                      <div class="text-body-2">{{ item.author }}</div>
-                    </template>
-
-                    <template v-slot:item.actions="{ item }">
-                      <div class="table-action-row d-flex align-center flex-nowrap justify-start ga-2 py-1">
-                        <v-btn
-                          v-if="!item.activated"
-                          size="small"
-                          variant="tonal"
-                          color="success"
-                          class="table-action-btn"
-                          prepend-icon="mdi-play"
-                          @click="pluginOn(item)"
-                        >
-                          {{ tm("buttons.enable") }}
-                        </v-btn>
-                        <v-btn
-                          v-else
-                          size="small"
-                          variant="tonal"
-                          color="error"
-                          class="table-action-btn"
-                          prepend-icon="mdi-pause"
-                          @click="pluginOff(item)"
-                        >
-                          {{ tm("buttons.disable") }}
-                        </v-btn>
-
-                        <v-btn
-                          size="small"
-                          variant="tonal"
-                          color="primary"
-                          class="table-action-btn"
-                          prepend-icon="mdi-refresh"
-                          @click="reloadPlugin(item.name)"
-                        >
-                          {{ tm("buttons.reload") }}
-                        </v-btn>
-
-                        <v-btn
-                          size="small"
-                          variant="tonal"
-                          color="primary"
-                          class="table-action-btn"
-                          prepend-icon="mdi-cog"
-                          @click="openExtensionConfig(item.name)"
-                        >
-                          {{ tm("buttons.configure") }}
-                        </v-btn>
-
-                        <v-btn
-                          size="small"
-                          variant="tonal"
-                          color="info"
-                          class="table-action-btn"
-                          prepend-icon="mdi-book-open-page-variant"
-                          :disabled="!item.repo"
-                          @click="item.repo && viewReadme(item)"
-                        >
-                          {{ tm("buttons.viewDocs") }}
-                        </v-btn>
-
-                        <StyledMenu location="bottom end" offset="8">
-                          <template #activator="{ props: menuProps }">
-                            <v-btn
-                              v-bind="menuProps"
-                              icon="mdi-dots-horizontal"
-                              size="small"
-                              variant="tonal"
-                              color="secondary"
-                              class="table-action-btn"
-                            ></v-btn>
-                          </template>
-
-                          <v-list-item
-                            class="styled-menu-item"
-                            prepend-icon="mdi-information"
-                            @click="showPluginInfo(item)"
-                        >
-                          <v-list-item-title>{{ tm("buttons.viewInfo") }}</v-list-item-title>
-                        </v-list-item>
-
-                          <v-list-item
-                            class="styled-menu-item"
-                            prepend-icon="mdi-update"
-                            @click="updateExtension(item.name)"
-                          >
-                            <v-list-item-title>{{ tm("buttons.update") }}</v-list-item-title>
-                          </v-list-item>
-
-                          <v-list-item
-                            class="styled-menu-item"
-                            prepend-icon="mdi-delete"
-                            :disabled="item.reserved"
-                            @click="uninstallExtension(item.name)"
-                          >
-                            <v-list-item-title>{{ tm("buttons.uninstall") }}</v-list-item-title>
-                          </v-list-item>
-                        </StyledMenu>
-                      </div>
-                    </template>
-
-                    <template v-slot:no-data>
-                      <div class="text-center pa-8">
-                        <v-icon size="64" color="info" class="mb-4"
-                          >mdi-puzzle-outline</v-icon
-                        >
-                        <div class="text-h5 mb-2">
-                          {{ tm("empty.noPlugins") }}
-                        </div>
-                        <div class="text-body-1 mb-4">
-                          {{ tm("empty.noPluginsDesc") }}
-                        </div>
-                      </div>
-                    </template>
-                  </v-data-table>
-                </v-card>
-              </div>
-
-              <!-- 卡片视图 -->
-              <div v-else>
-                <v-row v-if="filteredPlugins.length === 0" class="text-center">
-                  <v-col cols="12" class="pa-2">
-                    <v-icon size="64" color="info" class="mb-4"
-                      >mdi-puzzle-outline</v-icon
-                    >
-                    <div class="text-h5 mb-2">{{ tm("empty.noPlugins") }}</div>
-                    <div class="text-body-1 mb-4">
-                      {{ tm("empty.noPluginsDesc") }}
-                    </div>
-                  </v-col>
-                </v-row>
-
-                <v-row>
-                  <v-col
-                    cols="12"
-                    md="6"
-                    lg="4"
-                    v-for="extension in filteredPlugins"
-                    :key="extension.name"
-                    class="pb-2"
+                >
+                  {{ item.desc }}
+                </div>
+                <div
+                  v-if="item.support_platforms?.length"
+                  class="d-flex align-center flex-wrap mt-2"
+                >
+                  <span class="text-caption text-medium-emphasis mr-2">
+                    {{ tm("card.status.supportPlatform") }}:
+                  </span>
+                  <v-chip
+                    v-for="platformId in item.support_platforms"
+                    :key="platformId"
+                    size="x-small"
+                    color="info"
+                    variant="outlined"
+                    class="mr-1 mb-1"
                   >
-                    <ExtensionCard
-                      :extension="extension"
-                      class="rounded-lg"
-                      style="background-color: rgb(var(--v-theme-mcpCardBg))"
-                      @configure="openExtensionConfig(extension.name)"
-                      @uninstall="
-                        (ext, options) => uninstallExtension(ext.name, options)
-                      "
-                      @update="updateExtension(extension.name)"
-                      @reload="reloadPlugin(extension.name)"
-                      @toggle-activation="
-                        extension.activated
-                          ? pluginOff(extension)
-                          : pluginOn(extension)
-                      "
-                      @view-handlers="showPluginInfo(extension)"
-                      @view-readme="viewReadme(extension)"
-                      @view-changelog="viewChangelog(extension)"
-                    >
-                    </ExtensionCard>
-                  </v-col>
-                </v-row>
+                    {{ platformId }}
+                  </v-chip>
+                </div>
+                <div
+                  v-if="item.astrbot_version"
+                  class="d-flex align-center flex-wrap mt-1"
+                >
+                  <span class="text-caption text-medium-emphasis mr-2">
+                    {{ tm("card.status.astrbotVersion") }}:
+                  </span>
+                  <v-chip
+                    size="x-small"
+                    color="secondary"
+                    variant="outlined"
+                    class="mr-1 mb-1"
+                  >
+                    {{ item.astrbot_version }}
+                  </v-chip>
+                </div>
               </div>
-            </v-fade-transition>
+            </template>
 
-            <v-tooltip :text="tm('market.installPlugin')" location="left">
-              <template v-slot:activator="{ props }">
-                <button
-                  v-bind="props"
-                  type="button"
-                  class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
-                  style="
+            <template #item.version="{ item }">
+              <div class="d-flex align-center">
+                <span class="text-body-2">{{ item.version }}</span>
+                <v-tooltip
+                  v-if="item.has_update"
+                  location="top"
+                >
+                  <template #activator="{ props: tooltipProps }">
+                    <v-icon
+                      v-bind="tooltipProps"
+                      color="warning"
+                      size="small"
+                      class="ml-1"
+                      style="cursor: pointer"
+                      @click.stop="updateExtension(item.name)"
+                    >
+                      mdi-alert
+                    </v-icon>
+                  </template>
+                  <span>{{ tm("messages.hasUpdate") }}
+                    {{ item.online_version }}</span>
+                </v-tooltip>
+                <v-tooltip
+                  v-if="item.has_update"
+                  location="top"
+                >
+                  <template #activator="{ props: tooltipProps }">
+                    <span
+                      v-bind="tooltipProps"
+                      class="ml-1 text-caption text-warning"
+                      style="cursor: pointer"
+                      @click.stop="updateExtension(item.name)"
+                    >
+                      {{ item.online_version }}
+                    </span>
+                  </template>
+                  <span>{{ tm("buttons.update") }}</span>
+                </v-tooltip>
+              </div>
+            </template>
+
+            <template #item.author="{ item }">
+              <div class="text-body-2">
+                {{ item.author }}
+              </div>
+            </template>
+
+            <template #item.actions="{ item }">
+              <div class="table-action-row d-flex align-center flex-nowrap justify-start ga-2 py-1">
+                <v-btn
+                  v-if="!item.activated"
+                  size="small"
+                  variant="tonal"
+                  color="success"
+                  class="table-action-btn"
+                  prepend-icon="mdi-play"
+                  @click="pluginOn(item)"
+                >
+                  {{ tm("buttons.enable") }}
+                </v-btn>
+                <v-btn
+                  v-else
+                  size="small"
+                  variant="tonal"
+                  color="error"
+                  class="table-action-btn"
+                  prepend-icon="mdi-pause"
+                  @click="pluginOff(item)"
+                >
+                  {{ tm("buttons.disable") }}
+                </v-btn>
+
+                <v-btn
+                  size="small"
+                  variant="tonal"
+                  color="primary"
+                  class="table-action-btn"
+                  prepend-icon="mdi-refresh"
+                  @click="reloadPlugin(item.name)"
+                >
+                  {{ tm("buttons.reload") }}
+                </v-btn>
+
+                <v-btn
+                  size="small"
+                  variant="tonal"
+                  color="primary"
+                  class="table-action-btn"
+                  prepend-icon="mdi-cog"
+                  @click="openExtensionConfig(item.name)"
+                >
+                  {{ tm("buttons.configure") }}
+                </v-btn>
+
+                <v-btn
+                  size="small"
+                  variant="tonal"
+                  color="info"
+                  class="table-action-btn"
+                  prepend-icon="mdi-book-open-page-variant"
+                  :disabled="!item.repo"
+                  @click="item.repo && viewReadme(item)"
+                >
+                  {{ tm("buttons.viewDocs") }}
+                </v-btn>
+
+                <StyledMenu
+                  location="bottom end"
+                  offset="8"
+                >
+                  <template #activator="{ props: menuProps }">
+                    <v-btn
+                      v-bind="menuProps"
+                      icon="mdi-dots-horizontal"
+                      size="small"
+                      variant="tonal"
+                      color="secondary"
+                      class="table-action-btn"
+                    />
+                  </template>
+
+                  <v-list-item
+                    class="styled-menu-item"
+                    prepend-icon="mdi-information"
+                    @click="showPluginInfo(item)"
+                  >
+                    <v-list-item-title>{{ tm("buttons.viewInfo") }}</v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item
+                    class="styled-menu-item"
+                    prepend-icon="mdi-update"
+                    @click="updateExtension(item.name)"
+                  >
+                    <v-list-item-title>{{ tm("buttons.update") }}</v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item
+                    class="styled-menu-item"
+                    prepend-icon="mdi-delete"
+                    :disabled="item.reserved"
+                    @click="uninstallExtension(item.name)"
+                  >
+                    <v-list-item-title>{{ tm("buttons.uninstall") }}</v-list-item-title>
+                  </v-list-item>
+                </StyledMenu>
+              </div>
+            </template>
+
+            <template #no-data>
+              <div class="text-center pa-8">
+                <v-icon
+                  size="64"
+                  color="info"
+                  class="mb-4"
+                >
+                  mdi-puzzle-outline
+                </v-icon>
+                <div class="text-h5 mb-2">
+                  {{ tm("empty.noPlugins") }}
+                </div>
+                <div class="text-body-1 mb-4">
+                  {{ tm("empty.noPluginsDesc") }}
+                </div>
+              </div>
+            </template>
+          </v-data-table>
+        </v-card>
+      </div>
+
+      <!-- 卡片视图 -->
+      <div v-else>
+        <v-row
+          v-if="filteredPlugins.length === 0"
+          class="text-center"
+        >
+          <v-col
+            cols="12"
+            class="pa-2"
+          >
+            <v-icon
+              size="64"
+              color="info"
+              class="mb-4"
+            >
+              mdi-puzzle-outline
+            </v-icon>
+            <div class="text-h5 mb-2">
+              {{ tm("empty.noPlugins") }}
+            </div>
+            <div class="text-body-1 mb-4">
+              {{ tm("empty.noPluginsDesc") }}
+            </div>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col
+            v-for="extension in filteredPlugins"
+            :key="extension.name"
+            cols="12"
+            md="6"
+            lg="4"
+            class="pb-2"
+          >
+            <ExtensionCard
+              :extension="extension"
+              class="rounded-lg"
+              style="background-color: rgb(var(--v-theme-mcpCardBg))"
+              @configure="openExtensionConfig(extension.name)"
+              @uninstall="
+                (ext, options) => uninstallExtension(ext.name, options)
+              "
+              @update="updateExtension(extension.name)"
+              @reload="reloadPlugin(extension.name)"
+              @toggle-activation="
+                extension.activated
+                  ? pluginOff(extension)
+                  : pluginOn(extension)
+              "
+              @view-handlers="showPluginInfo(extension)"
+              @view-readme="viewReadme(extension)"
+              @view-changelog="viewChangelog(extension)"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </v-fade-transition>
+
+    <v-tooltip
+      :text="tm('market.installPlugin')"
+      location="left"
+    >
+      <template #activator="{ props }">
+        <button
+          v-bind="props"
+          type="button"
+          class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
+          style="
                     position: fixed;
                     right: 52px;
                     bottom: 52px;
                     z-index: 10000;
                     border-radius: 16px;
                   "
-                  @click="dialog = true"
-                >
-                  <span class="v-btn__overlay"></span>
-                  <span class="v-btn__underlay"></span>
-                  <span class="v-btn__content" data-no-activator="">
-                    <i
-                      class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
-                      aria-hidden="true"
-                      style="font-size: 32px"
-                    ></i>
-                  </span>
-                </button>
-              </template>
-            </v-tooltip>
-          </v-tab-item>
+          @click="dialog = true"
+        >
+          <span class="v-btn__overlay" />
+          <span class="v-btn__underlay" />
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            <i
+              class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
+              aria-hidden="true"
+              style="font-size: 32px"
+            />
+          </span>
+        </button>
+      </template>
+    </v-tooltip>
+  </v-tab-item>
 </template>
 
 <style scoped>
diff --git a/dashboard/src/views/extension/MarketPluginsTab.vue b/dashboard/src/views/extension/MarketPluginsTab.vue
index e69c7fcbe..1ad5f843a 100644
--- a/dashboard/src/views/extension/MarketPluginsTab.vue
+++ b/dashboard/src/views/extension/MarketPluginsTab.vue
@@ -169,214 +169,252 @@ const marketSortItems = computed(() => [
 </script>
 
 <template>
-          <v-tab-item v-show="activeTab === 'market'">
-            <div class="mb-6 pt-4 pb-4">
-              <div
-                class="d-flex align-center"
-                style="gap: 12px"
+  <v-tab-item v-show="activeTab === 'market'">
+    <div class="mb-6 pt-4 pb-4">
+      <div
+        class="d-flex align-center"
+        style="gap: 12px"
+      >
+        <div
+          class="d-flex align-center"
+          style="gap: 12px; min-width: 0"
+        >
+          <h2 class="text-h2 mb-0">
+            {{ tm("tabs.market") }}
+          </h2>
+
+          <v-tooltip
+            location="top"
+            :text="tm('market.sourceManagement')"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                variant="tonal"
+                rounded="md"
+                color="primary"
+                class="text-none px-2"
+                @click="openSourceManagerDialog"
               >
-                <div class="d-flex align-center" style="gap: 12px; min-width: 0">
-                  <h2 class="text-h2 mb-0">{{ tm("tabs.market") }}</h2>
-
-                  <v-tooltip location="top" :text="tm('market.sourceManagement')">
-                    <template v-slot:activator="{ props }">
-                      <v-btn
-                        v-bind="props"
-                        variant="tonal"
-                        rounded="md"
-                        color="primary"
-                        class="text-none px-2"
-                        @click="openSourceManagerDialog"
-                      >
-                        <v-icon size="18" class="mr-1">mdi-source-branch</v-icon>
-                        <span class="text-truncate" style="max-width: 180px">
-                          {{ currentSourceName }}
-                        </span>
-                      </v-btn>
-                    </template>
-                  </v-tooltip>
-
-                  <v-btn
-                    color="primary"
-                    variant="tonal"
-                    rounded="md"
-                    class="text-none px-2"
-                    :prepend-icon="showRandomPlugins ? 'mdi-eye-off' : 'mdi-eye'"
-                    @click="toggleRandomPluginsVisibility"
-                  >
-                    {{
-                      showRandomPlugins
-                        ? tm("market.hideRandomPlugins")
-                        : tm("market.showRandomPlugins")
-                    }}
-                  </v-btn>
-                </div>
-
-                <v-text-field
-                  :model-value="marketSearch"
-                  @update:model-value="marketSearch = normalizeTextInput($event)"
-                  class="ml-auto"
-                  density="compact"
-                  :label="tm('search.marketPlaceholder')"
-                  prepend-inner-icon="mdi-magnify"
-                  clearable
-                  variant="solo-filled"
-                  flat
-                  hide-details
-                  single-line
-                  style="width: 340px; min-width: 220px; max-width: 340px"
+                <v-icon
+                  size="18"
+                  class="mr-1"
                 >
-                </v-text-field>
-              </div>
+                  mdi-source-branch
+                </v-icon>
+                <span
+                  class="text-truncate"
+                  style="max-width: 180px"
+                >
+                  {{ currentSourceName }}
+                </span>
+              </v-btn>
+            </template>
+          </v-tooltip>
 
-              <div
-                class="d-flex align-center text-caption text-medium-emphasis mt-2"
-                style="color: grey; line-height: 1.4"
-              >
-                <v-icon size="16" class="mr-1">mdi-alert-outline</v-icon>
-                <span>{{ tm("market.sourceSafetyWarning") }}</span>
-              </div>
-            </div>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            rounded="md"
+            class="text-none px-2"
+            :prepend-icon="showRandomPlugins ? 'mdi-eye-off' : 'mdi-eye'"
+            @click="toggleRandomPluginsVisibility"
+          >
+            {{
+              showRandomPlugins
+                ? tm("market.hideRandomPlugins")
+                : tm("market.showRandomPlugins")
+            }}
+          </v-btn>
+        </div>
 
-            <!-- <small style="color: var(--v-theme-secondaryText);">每个插件都是作者无偿提供的的劳动成果。如果您喜欢某个插件，请 Star！</small> -->
+        <v-text-field
+          :model-value="marketSearch"
+          class="ml-auto"
+          density="compact"
+          :label="tm('search.marketPlaceholder')"
+          prepend-inner-icon="mdi-magnify"
+          clearable
+          variant="solo-filled"
+          flat
+          hide-details
+          single-line
+          style="width: 340px; min-width: 220px; max-width: 340px"
+          @update:model-value="marketSearch = normalizeTextInput($event)"
+        />
+      </div>
 
-            <!-- FAB Button -->
-            <v-tooltip :text="tm('market.installPlugin')" location="left">
-              <template v-slot:activator="{ props }">
-                <button
-                  v-bind="props"
-                  type="button"
-                  class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
-                  style="
+      <div
+        class="d-flex align-center text-caption text-medium-emphasis mt-2"
+        style="color: grey; line-height: 1.4"
+      >
+        <v-icon
+          size="16"
+          class="mr-1"
+        >
+          mdi-alert-outline
+        </v-icon>
+        <span>{{ tm("market.sourceSafetyWarning") }}</span>
+      </div>
+    </div>
+
+    <!-- <small style="color: var(--v-theme-secondaryText);">每个插件都是作者无偿提供的的劳动成果。如果您喜欢某个插件，请 Star！</small> -->
+
+    <!-- FAB Button -->
+    <v-tooltip
+      :text="tm('market.installPlugin')"
+      location="left"
+    >
+      <template #activator="{ props }">
+        <button
+          v-bind="props"
+          type="button"
+          class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
+          style="
                     position: fixed;
                     right: 52px;
                     bottom: 52px;
                     z-index: 10000;
                     border-radius: 16px;
                   "
-                  @click="dialog = true"
-                >
-                  <span class="v-btn__overlay"></span>
-                  <span class="v-btn__underlay"></span>
-                  <span class="v-btn__content" data-no-activator="">
-                    <i
-                      class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
-                      aria-hidden="true"
-                      style="font-size: 32px"
-                    ></i>
-                  </span>
-                </button>
-              </template>
-            </v-tooltip>
+          @click="dialog = true"
+        >
+          <span class="v-btn__overlay" />
+          <span class="v-btn__underlay" />
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            <i
+              class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
+              aria-hidden="true"
+              style="font-size: 32px"
+            />
+          </span>
+        </button>
+      </template>
+    </v-tooltip>
 
-            <div class="mt-4">
-              <v-expand-transition>
-                <div v-if="showRandomPlugins">
-                  <div
-                    class="d-flex align-center mb-2"
-                    style="justify-content: space-between; flex-wrap: wrap; gap: 8px"
-                  >
-                    <h2>
-                      {{ tm("market.randomPlugins") }}
-                    </h2>
-                    <v-btn
-                      color="primary"
-                      variant="tonal"
-                      prepend-icon="mdi-shuffle-variant"
-                      :disabled="pluginMarketData.length === 0"
-                      @click="refreshRandomPlugins"
-                    >
-                      {{ tm("buttons.reshuffle") }}
-                    </v-btn>
-                  </div>
+    <div class="mt-4">
+      <v-expand-transition>
+        <div v-if="showRandomPlugins">
+          <div
+            class="d-flex align-center mb-2"
+            style="justify-content: space-between; flex-wrap: wrap; gap: 8px"
+          >
+            <h2>
+              {{ tm("market.randomPlugins") }}
+            </h2>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              prepend-icon="mdi-shuffle-variant"
+              :disabled="pluginMarketData.length === 0"
+              @click="refreshRandomPlugins"
+            >
+              {{ tm("buttons.reshuffle") }}
+            </v-btn>
+          </div>
 
-                  <v-row class="mb-6" dense>
-                    <v-col
-                      v-for="plugin in randomPlugins"
-                      :key="`random-${plugin.name}`"
-                      cols="12"
-                      md="6"
-                      lg="4"
-                      class="pb-2"
-                    >
-                      <MarketPluginCard
-                        :plugin="plugin"
-                        :default-plugin-icon="defaultPluginIcon"
-                        :show-plugin-full-name="showPluginFullName"
-                        @install="handleInstallPlugin"
-                      />
-                    </v-col>
-                  </v-row>
-                </div>
-              </v-expand-transition>
+          <v-row
+            class="mb-6"
+            dense
+          >
+            <v-col
+              v-for="plugin in randomPlugins"
+              :key="`random-${plugin.name}`"
+              cols="12"
+              md="6"
+              lg="4"
+              class="pb-2"
+            >
+              <MarketPluginCard
+                :plugin="plugin"
+                :default-plugin-icon="defaultPluginIcon"
+                :show-plugin-full-name="showPluginFullName"
+                @install="handleInstallPlugin"
+              />
+            </v-col>
+          </v-row>
+        </div>
+      </v-expand-transition>
 
-              <div
-                class="d-flex align-center mb-2"
-                style="
+      <div
+        class="d-flex align-center mb-2"
+        style="
                   justify-content: space-between;
                   flex-wrap: wrap;
                   gap: 8px;
                 "
-              >
-                <div class="d-flex align-center" style="gap: 6px">
-                  <h2>
-                    {{ tm("market.allPlugins") }}({{
-                      filteredMarketPlugins.length
-                    }})
-                  </h2>
-                  <v-btn
-                    icon
-                    variant="text"
-                    @click="refreshPluginMarket"
-                    :loading="refreshingMarket"
-                  >
-                    <v-icon>mdi-refresh</v-icon>
-                  </v-btn>
-                </div>
+      >
+        <div
+          class="d-flex align-center"
+          style="gap: 6px"
+        >
+          <h2>
+            {{ tm("market.allPlugins") }}({{
+              filteredMarketPlugins.length
+            }})
+          </h2>
+          <v-btn
+            icon
+            variant="text"
+            :loading="refreshingMarket"
+            @click="refreshPluginMarket"
+          >
+            <v-icon>mdi-refresh</v-icon>
+          </v-btn>
+        </div>
 
-                <div
-                  class="d-flex align-center"
-                  style="gap: 8px; flex-wrap: wrap"
-                >
-                  <PluginSortControl
-                    v-model="sortBy"
-                    :items="marketSortItems"
-                    :label="tm('sort.by')"
-                    :order="sortOrder"
-                    :ascending-label="tm('sort.ascending')"
-                    :descending-label="tm('sort.descending')"
-                    :show-order="sortBy !== 'default'"
-                    @update:order="sortOrder = $event"
-                  />
-                </div>
-              </div>
+        <div
+          class="d-flex align-center"
+          style="gap: 8px; flex-wrap: wrap"
+        >
+          <PluginSortControl
+            v-model="sortBy"
+            :items="marketSortItems"
+            :label="tm('sort.by')"
+            :order="sortOrder"
+            :ascending-label="tm('sort.ascending')"
+            :descending-label="tm('sort.descending')"
+            :show-order="sortBy !== 'default'"
+            @update:order="sortOrder = $event"
+          />
+        </div>
+      </div>
 
-              <v-row style="min-height: 26rem" dense>
-                <v-col
-                  v-for="plugin in paginatedPlugins"
-                  :key="plugin.name"
-                  cols="12"
-                  md="6"
-                  lg="4"
-                  class="pb-2"
-                >
-                  <MarketPluginCard
-                    :plugin="plugin"
-                    :default-plugin-icon="defaultPluginIcon"
-                    :show-plugin-full-name="showPluginFullName"
-                    @install="handleInstallPlugin"
-                  />
-                </v-col>
-              </v-row>
+      <v-row
+        style="min-height: 26rem"
+        dense
+      >
+        <v-col
+          v-for="plugin in paginatedPlugins"
+          :key="plugin.name"
+          cols="12"
+          md="6"
+          lg="4"
+          class="pb-2"
+        >
+          <MarketPluginCard
+            :plugin="plugin"
+            :default-plugin-icon="defaultPluginIcon"
+            :show-plugin-full-name="showPluginFullName"
+            @install="handleInstallPlugin"
+          />
+        </v-col>
+      </v-row>
 
-              <div class="d-flex justify-center mt-4" v-if="totalPages > 1">
-                <v-pagination
-                  v-model="currentPage"
-                  :length="totalPages"
-                  :total-visible="7"
-                  size="small"
-                ></v-pagination>
-              </div>
-            </div>
-          </v-tab-item>
+      <div
+        v-if="totalPages > 1"
+        class="d-flex justify-center mt-4"
+      >
+        <v-pagination
+          v-model="currentPage"
+          :length="totalPages"
+          :total-visible="7"
+          size="small"
+        />
+      </div>
+    </div>
+  </v-tab-item>
 </template>
diff --git a/dashboard/src/views/extension/useExtensionPage.js b/dashboard/src/views/extension/useExtensionPage.js
index da77df083..91de9003d 100644
--- a/dashboard/src/views/extension/useExtensionPage.js
+++ b/dashboard/src/views/extension/useExtensionPage.js
@@ -149,6 +149,7 @@ export const useExtensionPage = () => {
   const showPluginInfoDialog = ref(false);
   const selectedPlugin = ref({});
   const curr_namespace = ref("");
+  const currentConfigPlugin = curr_namespace;
   const updatingAll = ref(false);
   
   const readmeDialog = reactive({
diff --git a/dashboard/src/views/knowledge-base/DocumentDetail.vue b/dashboard/src/views/knowledge-base/DocumentDetail.vue
index 16d9ca67e..08095001c 100644
--- a/dashboard/src/views/knowledge-base/DocumentDetail.vue
+++ b/dashboard/src/views/knowledge-base/DocumentDetail.vue
@@ -8,68 +8,131 @@
         @click="$router.push({ name: 'NativeKBDetail', params: { kbId } })"
       />
       <div class="header-content">
-        <h1 class="text-h4">{{ document.doc_name }}</h1>
-        <p class="text-subtitle-1 text-medium-emphasis mt-2">{{ t('title') }}</p>
+        <h1 class="text-h4">
+          {{ document.doc_name }}
+        </h1>
+        <p class="text-subtitle-1 text-medium-emphasis mt-2">
+          {{ t('title') }}
+        </p>
       </div>
     </div>
 
     <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <v-progress-circular indeterminate color="primary" size="64" />
+    <div
+      v-if="loading"
+      class="loading-container"
+    >
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        size="64"
+      />
     </div>
 
     <!-- 主内容 -->
-    <div v-else class="document-content">
+    <div
+      v-else
+      class="document-content"
+    >
       <!-- 文档信息卡片 -->
-      <v-card elevation="2" class="mb-6">
+      <v-card
+        elevation="2"
+        class="mb-6"
+      >
         <v-card-title>{{ t('info.title') }}</v-card-title>
         <v-divider />
         <v-card-text>
           <v-row>
-            <v-col cols="12" md="3">
+            <v-col
+              cols="12"
+              md="3"
+            >
               <div class="info-item">
-                <v-icon start>mdi-label</v-icon>
+                <v-icon start>
+                  mdi-label
+                </v-icon>
                 <div>
-                  <div class="text-caption text-medium-emphasis">{{ t('info.name') }}</div>
-                  <div class="text-body-1">{{ document.doc_name }}</div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{ t('info.name') }}
+                  </div>
+                  <div class="text-body-1">
+                    {{ document.doc_name }}
+                  </div>
                 </div>
               </div>
             </v-col>
-            <v-col cols="12" md="2">
+            <v-col
+              cols="12"
+              md="2"
+            >
               <div class="info-item">
-                <v-icon start :color="getFileColor(document.file_type)">
+                <v-icon
+                  start
+                  :color="getFileColor(document.file_type)"
+                >
                   {{ getFileIcon(document.file_type) }}
                 </v-icon>
                 <div>
-                  <div class="text-caption text-medium-emphasis">{{ t('info.type') }}</div>
-                  <div class="text-body-1">{{ document.file_type || '-' }}</div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{ t('info.type') }}
+                  </div>
+                  <div class="text-body-1">
+                    {{ document.file_type || '-' }}
+                  </div>
                 </div>
               </div>
             </v-col>
-            <v-col cols="12" md="2">
+            <v-col
+              cols="12"
+              md="2"
+            >
               <div class="info-item">
-                <v-icon start>mdi-file-chart</v-icon>
+                <v-icon start>
+                  mdi-file-chart
+                </v-icon>
                 <div>
-                  <div class="text-caption text-medium-emphasis">{{ t('info.size') }}</div>
-                  <div class="text-body-1">{{ formatFileSize(document.file_size) }}</div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{ t('info.size') }}
+                  </div>
+                  <div class="text-body-1">
+                    {{ formatFileSize(document.file_size) }}
+                  </div>
                 </div>
               </div>
             </v-col>
-            <v-col cols="12" md="2">
+            <v-col
+              cols="12"
+              md="2"
+            >
               <div class="info-item">
-                <v-icon start>mdi-text-box</v-icon>
+                <v-icon start>
+                  mdi-text-box
+                </v-icon>
                 <div>
-                  <div class="text-caption text-medium-emphasis">{{ t('info.chunkCount') }}</div>
-                  <div class="text-body-1">{{ document.chunk_count || 0 }}</div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{ t('info.chunkCount') }}
+                  </div>
+                  <div class="text-body-1">
+                    {{ document.chunk_count || 0 }}
+                  </div>
                 </div>
               </div>
             </v-col>
-            <v-col cols="12" md="3">
+            <v-col
+              cols="12"
+              md="3"
+            >
               <div class="info-item">
-                <v-icon start>mdi-calendar</v-icon>
+                <v-icon start>
+                  mdi-calendar
+                </v-icon>
                 <div>
-                  <div class="text-caption text-medium-emphasis">{{ t('info.createdAt') }}</div>
-                  <div class="text-body-1">{{ formatDate(document.created_at) }}</div>
+                  <div class="text-caption text-medium-emphasis">
+                    {{ t('info.createdAt') }}
+                  </div>
+                  <div class="text-body-1">
+                    {{ formatDate(document.created_at) }}
+                  </div>
                 </div>
               </div>
             </v-col>
@@ -81,7 +144,11 @@
       <v-card elevation="2">
         <v-card-title class="d-flex align-center pa-4">
           <span>{{ t('chunks.title') }}</span>
-          <v-chip class="ml-2" size="small" variant="tonal">
+          <v-chip
+            class="ml-2"
+            size="small"
+            variant="tonal"
+          >
             {{ totalChunks }} {{ t('chunks.title') }}
           </v-chip>
           <v-spacer />
@@ -108,7 +175,11 @@
             hide-default-footer
           >
             <template #item.chunk_index="{ item }">
-              <v-chip size="small" variant="tonal" color="primary">
+              <v-chip
+                size="small"
+                variant="tonal"
+                color="primary"
+              >
                 #{{ item.chunk_index + 1 }}
               </v-chip>
             </template>
@@ -120,7 +191,10 @@
             </template>
 
             <template #item.char_count="{ item }">
-              <v-chip size="small" variant="outlined">
+              <v-chip
+                size="small"
+                variant="outlined"
+              >
                 {{ item.char_count }} 字符
               </v-chip>
             </template>
@@ -145,15 +219,25 @@
 
             <template #no-data>
               <div class="text-center py-8">
-                <v-icon size="64" color="grey-lighten-2">mdi-text-box-outline</v-icon>
-                <p class="mt-4 text-medium-emphasis">{{ t('chunks.empty') }}</p>
+                <v-icon
+                  size="64"
+                  color="grey-lighten-2"
+                >
+                  mdi-text-box-outline
+                </v-icon>
+                <p class="mt-4 text-medium-emphasis">
+                  {{ t('chunks.empty') }}
+                </p>
               </div>
             </template>
           </v-data-table>
           
 
           <!-- 自定义分页器 -->
-          <div v-if="!searchQuery && totalChunks > 0" class="pa-4 d-flex align-center justify-space-between">
+          <div
+            v-if="!searchQuery && totalChunks > 0"
+            class="pa-4 d-flex align-center justify-space-between"
+          >
             <div class="text-caption text-medium-emphasis">
               {{ t('chunks.showing') }} {{ (page - 1) * pageSize + 1 }} - {{ Math.min(page * pageSize, totalChunks) }} / {{ totalChunks }}
             </div>
@@ -180,12 +264,20 @@
     </div>
 
     <!-- 查看分块对话框 -->
-    <v-dialog v-model="showViewDialog" max-width="800px" scrollable>
+    <v-dialog
+      v-model="showViewDialog"
+      max-width="800px"
+      scrollable
+    >
       <v-card>
         <v-card-title class="pa-4">
           <span>{{ t('view.title') }}</span>
           <v-spacer />
-          <v-btn icon="mdi-close" variant="text" @click="showViewDialog = false" />
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            @click="showViewDialog = false"
+          />
         </v-card-title>
         <v-divider />
         <v-card-text class="pa-6">
@@ -217,7 +309,9 @@
 
           <v-divider class="my-4" />
 
-          <div class="text-caption text-medium-emphasis mb-2">{{ t('view.content') }}</div>
+          <div class="text-caption text-medium-emphasis mb-2">
+            {{ t('view.content') }}
+          </div>
           <div class="chunk-content-view">
             {{ selectedChunk?.content }}
           </div>
@@ -225,7 +319,10 @@
         <v-divider />
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="showViewDialog = false">
+          <v-btn
+            variant="text"
+            @click="showViewDialog = false"
+          >
             {{ t('view.close') }}
           </v-btn>
         </v-card-actions>
@@ -233,7 +330,10 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
       {{ snackbar.text }}
     </v-snackbar>
   </div>
@@ -274,7 +374,7 @@ const snackbar = ref({
   color: 'success'
 })
 
-const showSnackbar = (text: string, color: string = 'success') => {
+const showSnackbar = (text: string, color = 'success') => {
   snackbar.value.text = text
   snackbar.value.color = color
   snackbar.value.show = true
diff --git a/dashboard/src/views/knowledge-base/KBDetail.vue b/dashboard/src/views/knowledge-base/KBDetail.vue
index 793ad16b6..e2af0d4a2 100644
--- a/dashboard/src/views/knowledge-base/KBDetail.vue
+++ b/dashboard/src/views/knowledge-base/KBDetail.vue
@@ -10,48 +10,87 @@
       <div class="header-content">
         <div class="kb-title">
           <span class="kb-emoji">{{ kb.emoji || '📚' }}</span>
-          <h1 class="text-h4">{{ kb.kb_name }}</h1>
+          <h1 class="text-h4">
+            {{ kb.kb_name }}
+          </h1>
         </div>
-        <p v-if="kb.description" class="text-subtitle-1 text-medium-emphasis mt-2">
+        <p
+          v-if="kb.description"
+          class="text-subtitle-1 text-medium-emphasis mt-2"
+        >
           {{ kb.description }}
         </p>
       </div>
     </div>
 
     <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <v-progress-circular indeterminate color="primary" size="64" />
+    <div
+      v-if="loading"
+      class="loading-container"
+    >
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        size="64"
+      />
     </div>
 
     <!-- 主内容 -->
-    <div v-else class="kb-content">
+    <div
+      v-else
+      class="kb-content"
+    >
       <!-- 标签页 -->
-      <v-tabs v-model="activeTab" class="mb-6" color="primary">
+      <v-tabs
+        v-model="activeTab"
+        class="mb-6"
+        color="primary"
+      >
         <v-tab value="overview">
-          <v-icon start>mdi-information-outline</v-icon>
+          <v-icon start>
+            mdi-information-outline
+          </v-icon>
           {{ t('tabs.overview') }}
         </v-tab>
         <v-tab value="documents">
-          <v-icon start>mdi-file-document-multiple</v-icon>
+          <v-icon start>
+            mdi-file-document-multiple
+          </v-icon>
           {{ t('tabs.documents') }}
-          <v-chip class="ml-2" size="small" variant="tonal">{{ kb.doc_count || 0 }}</v-chip>
+          <v-chip
+            class="ml-2"
+            size="small"
+            variant="tonal"
+          >
+            {{ kb.doc_count || 0 }}
+          </v-chip>
         </v-tab>
         <v-tab value="retrieval">
-          <v-icon start>mdi-magnify</v-icon>
+          <v-icon start>
+            mdi-magnify
+          </v-icon>
           {{ t('tabs.retrieval') }}
         </v-tab>
         <v-tab value="settings">
-          <v-icon start>mdi-cog</v-icon>
+          <v-icon start>
+            mdi-cog
+          </v-icon>
           {{ t('tabs.settings') }}
         </v-tab>
       </v-tabs>
 
       <!-- 标签页内容 -->
-      <v-window v-model="activeTab" style="padding: 8px;">
+      <v-window
+        v-model="activeTab"
+        style="padding: 8px;"
+      >
         <!-- 概览 -->
         <v-window-item value="overview">
           <v-row>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-card elevation="2">
                 <v-card-title>{{ t('overview.title') }}</v-card-title>
                 <v-divider />
@@ -101,24 +140,48 @@
               </v-card>
             </v-col>
 
-            <v-col cols="12" md="6">
-              <v-card elevation="2" class="mb-4">
+            <v-col
+              cols="12"
+              md="6"
+            >
+              <v-card
+                elevation="2"
+                class="mb-4"
+              >
                 <v-card-title>{{ t('overview.stats') }}</v-card-title>
                 <v-divider />
                 <v-card-text>
                   <v-row>
                     <v-col cols="6">
                       <div class="stat-box">
-                        <v-icon size="48" color="primary">mdi-file-document</v-icon>
-                        <div class="stat-value">{{ kb.doc_count || 0 }}</div>
-                        <div class="stat-label">{{ t('overview.docCount') }}</div>
+                        <v-icon
+                          size="48"
+                          color="primary"
+                        >
+                          mdi-file-document
+                        </v-icon>
+                        <div class="stat-value">
+                          {{ kb.doc_count || 0 }}
+                        </div>
+                        <div class="stat-label">
+                          {{ t('overview.docCount') }}
+                        </div>
                       </div>
                     </v-col>
                     <v-col cols="6">
                       <div class="stat-box">
-                        <v-icon size="48" color="secondary">mdi-text-box</v-icon>
-                        <div class="stat-value">{{ kb.chunk_count || 0 }}</div>
-                        <div class="stat-label">{{ t('overview.chunkCount') }}</div>
+                        <v-icon
+                          size="48"
+                          color="secondary"
+                        >
+                          mdi-text-box
+                        </v-icon>
+                        <div class="stat-value">
+                          {{ kb.chunk_count || 0 }}
+                        </div>
+                        <div class="stat-label">
+                          {{ t('overview.chunkCount') }}
+                        </div>
                       </div>
                     </v-col>
                   </v-row>
@@ -154,23 +217,36 @@
 
         <!-- 文档管理 -->
         <v-window-item value="documents">
-          <DocumentsTab :kb-id="kbId" :kb="kb" @refresh="loadKB" />
+          <DocumentsTab
+            :kb-id="kbId"
+            :kb="kb"
+            @refresh="loadKB"
+          />
         </v-window-item>
 
         <!-- 知识库检索 -->
         <v-window-item value="retrieval">
-          <RetrievalTab :kb-id="kbId" :kb-name="kb.kb_name"/>
+          <RetrievalTab
+            :kb-id="kbId"
+            :kb-name="kb.kb_name"
+          />
         </v-window-item>
 
         <!-- 设置 -->
         <v-window-item value="settings">
-          <SettingsTab :kb="kb" @updated="loadKB" />
+          <SettingsTab
+            :kb="kb"
+            @updated="loadKB"
+          />
         </v-window-item>
       </v-window>
     </div>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
       {{ snackbar.text }}
     </v-snackbar>
   </div>
@@ -199,7 +275,7 @@ const snackbar = ref({
   color: 'success'
 })
 
-const showSnackbar = (text: string, color: string = 'success') => {
+const showSnackbar = (text: string, color = 'success') => {
   snackbar.value.text = text
   snackbar.value.color = color
   snackbar.value.show = true
diff --git a/dashboard/src/views/knowledge-base/KBList.vue b/dashboard/src/views/knowledge-base/KBList.vue
index 509aaa557..7fddf0464 100644
--- a/dashboard/src/views/knowledge-base/KBList.vue
+++ b/dashboard/src/views/knowledge-base/KBList.vue
@@ -3,73 +3,163 @@
     <!-- 页面标题 -->
     <div class="page-header">
       <div>
-        <h1 class="text-h4 mb-2">{{ t('list.title') }}</h1>
-        <p class="text-subtitle-1 text-medium-emphasis">{{ t('list.subtitle') }}</p>
+        <h1 class="text-h4 mb-2">
+          {{ t('list.title') }}
+        </h1>
+        <p class="text-subtitle-1 text-medium-emphasis">
+          {{ t('list.subtitle') }}
+        </p>
       </div>
-      <v-btn icon="mdi-information-outline" variant="text" size="small" color="grey"
-        href="https://astrbot.app/use/knowledge-base.html" target="_blank" />
+      <v-btn
+        icon="mdi-information-outline"
+        variant="text"
+        size="small"
+        color="grey"
+        href="https://astrbot.app/use/knowledge-base.html"
+        target="_blank"
+      />
     </div>
 
     <!-- 操作按钮栏 -->
     <div class="action-bar mb-6">
-      <v-btn prepend-icon="mdi-plus" color="primary" variant="elevated" @click="showCreateDialog = true">
+      <v-btn
+        prepend-icon="mdi-plus"
+        color="primary"
+        variant="elevated"
+        @click="showCreateDialog = true"
+      >
         {{ t('list.create') }}
       </v-btn>
-      <v-btn prepend-icon="mdi-refresh" variant="tonal" @click="loadKnowledgeBases" :loading="loading">
+      <v-btn
+        prepend-icon="mdi-refresh"
+        variant="tonal"
+        :loading="loading"
+        @click="loadKnowledgeBases"
+      >
         {{ t('list.refresh') }}
       </v-btn>
     </div>
 
     <!-- 知识库网格 -->
-    <div v-if="loading && kbList.length === 0" class="loading-container">
-      <v-progress-circular indeterminate color="primary" size="64" />
-      <p class="mt-4 text-medium-emphasis">{{ t('list.loading') }}</p>
+    <div
+      v-if="loading && kbList.length === 0"
+      class="loading-container"
+    >
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        size="64"
+      />
+      <p class="mt-4 text-medium-emphasis">
+        {{ t('list.loading') }}
+      </p>
     </div>
 
-    <div v-else-if="kbList.length > 0" class="kb-grid">
-      <v-card v-for="kb in kbList" :key="kb.kb_id" class="kb-card" elevation="2" hover
-        @click="navigateToDetail(kb.kb_id)">
+    <div
+      v-else-if="kbList.length > 0"
+      class="kb-grid"
+    >
+      <v-card
+        v-for="kb in kbList"
+        :key="kb.kb_id"
+        class="kb-card"
+        elevation="2"
+        hover
+        @click="navigateToDetail(kb.kb_id)"
+      >
         <div class="kb-card-content">
-          <div class="kb-emoji">{{ kb.emoji || '📚' }}</div>
-          <h3 class="kb-name">{{ kb.kb_name }}</h3>
-          <p class="kb-description text-medium-emphasis">{{ kb.description || '暂无描述' }}</p>
+          <div class="kb-emoji">
+            {{ kb.emoji || '📚' }}
+          </div>
+          <h3 class="kb-name">
+            {{ kb.kb_name }}
+          </h3>
+          <p class="kb-description text-medium-emphasis">
+            {{ kb.description || '暂无描述' }}
+          </p>
 
           <div class="kb-stats mt-4">
             <div class="stat-item">
-              <v-icon size="small" color="primary">mdi-file-document</v-icon>
+              <v-icon
+                size="small"
+                color="primary"
+              >
+                mdi-file-document
+              </v-icon>
               <span>{{ kb.doc_count || 0 }} {{ t('list.documents') }}</span>
             </div>
             <div class="stat-item">
-              <v-icon size="small" color="secondary">mdi-text-box</v-icon>
+              <v-icon
+                size="small"
+                color="secondary"
+              >
+                mdi-text-box
+              </v-icon>
               <span>{{ kb.chunk_count || 0 }} {{ t('list.chunks') }}</span>
             </div>
           </div>
 
           <div class="kb-actions">
-            <v-btn icon="mdi-pencil" size="small" variant="text" color="info" @click.stop="editKB(kb)" />
-            <v-btn icon="mdi-delete" size="small" variant="text" color="error" @click.stop="confirmDelete(kb)" />
+            <v-btn
+              icon="mdi-pencil"
+              size="small"
+              variant="text"
+              color="info"
+              @click.stop="editKB(kb)"
+            />
+            <v-btn
+              icon="mdi-delete"
+              size="small"
+              variant="text"
+              color="error"
+              @click.stop="confirmDelete(kb)"
+            />
           </div>
         </div>
       </v-card>
     </div>
 
     <!-- 空状态 -->
-    <div v-else class="empty-state">
-      <v-icon size="100" color="grey-lighten-2">mdi-book-open-variant</v-icon>
-      <h2 class="mt-4">{{ t('list.empty') }}</h2>
-      <v-btn class="mt-6" prepend-icon="mdi-plus" color="primary" variant="elevated" size="large"
-        @click="showCreateDialog = true">
+    <div
+      v-else
+      class="empty-state"
+    >
+      <v-icon
+        size="100"
+        color="grey-lighten-2"
+      >
+        mdi-book-open-variant
+      </v-icon>
+      <h2 class="mt-4">
+        {{ t('list.empty') }}
+      </h2>
+      <v-btn
+        class="mt-6"
+        prepend-icon="mdi-plus"
+        color="primary"
+        variant="elevated"
+        size="large"
+        @click="showCreateDialog = true"
+      >
         {{ t('list.create') }}
       </v-btn>
     </div>
 
     <!-- 创建/编辑对话框 -->
-    <v-dialog v-model="showCreateDialog" max-width="600px" persistent>
+    <v-dialog
+      v-model="showCreateDialog"
+      max-width="600px"
+      persistent
+    >
       <v-card>
         <v-card-title class="d-flex align-center">
           <span class="text-h5">{{ editingKB ? t('edit.title') : t('create.title') }}</span>
           <v-spacer />
-          <v-btn icon="mdi-close" variant="text" @click="closeCreateDialog" />
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            @click="closeCreateDialog"
+          />
         </v-card-title>
 
         <v-divider />
@@ -77,24 +167,55 @@
         <v-card-text class="pa-6">
           <!-- Emoji 选择器 -->
           <div class="text-center mb-6">
-            <div class="emoji-display" @click="showEmojiPicker = true">
+            <div
+              class="emoji-display"
+              @click="showEmojiPicker = true"
+            >
               {{ formData.emoji }}
             </div>
-            <p class="text-caption text-medium-emphasis mt-2">{{ t('create.emojiLabel') }}</p>
+            <p class="text-caption text-medium-emphasis mt-2">
+              {{ t('create.emojiLabel') }}
+            </p>
           </div>
 
           <!-- 表单 -->
-          <v-form ref="formRef" @submit.prevent="submitForm">
-            <v-text-field v-model="formData.kb_name" :label="t('create.nameLabel')"
-              :placeholder="t('create.namePlaceholder')" variant="outlined"
-              :rules="[v => !!v || t('create.nameRequired')]" required class="mb-4" hint="后续如修改知识库名称，需重新在配置文件更新。" persistent-hint />
+          <v-form
+            ref="formRef"
+            @submit.prevent="submitForm"
+          >
+            <v-text-field
+              v-model="formData.kb_name"
+              :label="t('create.nameLabel')"
+              :placeholder="t('create.namePlaceholder')"
+              variant="outlined"
+              :rules="[v => !!v || t('create.nameRequired')]"
+              required
+              class="mb-4"
+              hint="后续如修改知识库名称，需重新在配置文件更新。"
+              persistent-hint
+            />
 
-            <v-textarea v-model="formData.description" :label="t('create.descriptionLabel')"
-              :placeholder="t('create.descriptionPlaceholder')" variant="outlined" rows="3" class="mb-4" />
+            <v-textarea
+              v-model="formData.description"
+              :label="t('create.descriptionLabel')"
+              :placeholder="t('create.descriptionPlaceholder')"
+              variant="outlined"
+              rows="3"
+              class="mb-4"
+            />
 
-            <v-select v-model="formData.embedding_provider_id" :items="embeddingProviders"
-              :item-title="item => item.embedding_model || item.id" :item-value="'id'"
-              :label="t('create.embeddingModelLabel')" variant="outlined" class="mb-4" :disabled="editingKB !== null" hint="嵌入模型选择后无法修改，如需更换请创建新的知识库。" persistent-hint>
+            <v-select
+              v-model="formData.embedding_provider_id"
+              :items="embeddingProviders"
+              :item-title="item => item.embedding_model || item.id"
+              :item-value="'id'"
+              :label="t('create.embeddingModelLabel')"
+              variant="outlined"
+              class="mb-4"
+              :disabled="editingKB !== null"
+              hint="嵌入模型选择后无法修改，如需更换请创建新的知识库。"
+              persistent-hint
+            >
               <template #item="{ props, item }">
                 <v-list-item v-bind="props">
                   <template #subtitle>
@@ -107,9 +228,16 @@
               </template>
             </v-select>
 
-            <v-select v-model="formData.rerank_provider_id" :items="rerankProviders"
-              :item-title="item => item.rerank_model || item.id" :item-value="'id'"
-              :label="t('create.rerankModelLabel')" variant="outlined" clearable class="mb-2">
+            <v-select
+              v-model="formData.rerank_provider_id"
+              :items="rerankProviders"
+              :item-title="item => item.rerank_model || item.id"
+              :item-value="'id'"
+              :label="t('create.rerankModelLabel')"
+              variant="outlined"
+              clearable
+              class="mb-2"
+            >
               <template #item="{ props, item }">
                 <v-list-item v-bind="props">
                   <template #subtitle>
@@ -125,10 +253,18 @@
 
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="closeCreateDialog">
+          <v-btn
+            variant="text"
+            @click="closeCreateDialog"
+          >
             {{ t('create.cancel') }}
           </v-btn>
-          <v-btn color="primary" variant="elevated" @click="submitForm" :loading="saving">
+          <v-btn
+            color="primary"
+            variant="elevated"
+            :loading="saving"
+            @click="submitForm"
+          >
             {{ editingKB ? t('edit.submit') : t('create.submit') }}
           </v-btn>
         </v-card-actions>
@@ -136,15 +272,31 @@
     </v-dialog>
 
     <!-- Emoji 选择器对话框 -->
-    <v-dialog v-model="showEmojiPicker" max-width="500px">
+    <v-dialog
+      v-model="showEmojiPicker"
+      max-width="500px"
+    >
       <v-card>
-        <v-card-title class="pa-4">{{ t('emoji.title') }}</v-card-title>
+        <v-card-title class="pa-4">
+          {{ t('emoji.title') }}
+        </v-card-title>
         <v-divider />
         <v-card-text class="pa-4">
-          <div v-for="category in emojiCategories" :key="category.key" class="mb-4">
-            <p class="text-subtitle-2 mb-2">{{ t(`emoji.categories.${category.key}`) }}</p>
+          <div
+            v-for="category in emojiCategories"
+            :key="category.key"
+            class="mb-4"
+          >
+            <p class="text-subtitle-2 mb-2">
+              {{ t(`emoji.categories.${category.key}`) }}
+            </p>
             <div class="emoji-grid">
-              <div v-for="emoji in category.emojis" :key="emoji" class="emoji-item" @click="selectEmoji(emoji)">
+              <div
+                v-for="emoji in category.emojis"
+                :key="emoji"
+                class="emoji-item"
+                @click="selectEmoji(emoji)"
+              >
                 {{ emoji }}
               </div>
             </div>
@@ -153,7 +305,10 @@
         <v-divider />
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="showEmojiPicker = false">
+          <v-btn
+            variant="text"
+            @click="showEmojiPicker = false"
+          >
             {{ t('emoji.close') }}
           </v-btn>
         </v-card-actions>
@@ -161,23 +316,42 @@
     </v-dialog>
 
     <!-- 删除确认对话框 -->
-    <v-dialog v-model="showDeleteDialog" max-width="450px" persistent>
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="450px"
+      persistent
+    >
       <v-card>
-        <v-card-title class="pa-4 text-h6">{{ t('delete.title') }}</v-card-title>
+        <v-card-title class="pa-4 text-h6">
+          {{ t('delete.title') }}
+        </v-card-title>
         <v-divider />
         <v-card-text class="pa-6">
           <p>{{ t('delete.confirmText', { name: deleteTarget?.kb_name || '' }) }}</p>
-          <v-alert type="error" variant="tonal" density="compact" class="mt-4">
+          <v-alert
+            type="error"
+            variant="tonal"
+            density="compact"
+            class="mt-4"
+          >
             {{ t('delete.warning') }}
           </v-alert>
         </v-card-text>
         <v-divider />
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="cancelDelete">
+          <v-btn
+            variant="text"
+            @click="cancelDelete"
+          >
             {{ t('delete.cancel') }}
           </v-btn>
-          <v-btn color="error" variant="elevated" @click="deleteKB" :loading="deleting">
+          <v-btn
+            color="error"
+            variant="elevated"
+            :loading="deleting"
+            @click="deleteKB"
+          >
             {{ t('delete.confirm') }}
           </v-btn>
         </v-card-actions>
@@ -185,14 +359,19 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
       {{ snackbar.text }}
     </v-snackbar>
 
-    <div class="position-absolute" style="bottom: 0px; right: 16px;">
+    <div
+      class="position-absolute"
+      style="bottom: 0px; right: 16px;"
+    >
       <small @click="router.push('/alkaid/knowledge-base')"><a style="text-decoration: underline; cursor: pointer;">切换到旧版知识库</a></small>
     </div>
-
   </div>
 </template>
 
@@ -427,7 +606,7 @@ const selectEmoji = (emoji: string) => {
 }
 
 // 显示通知
-const showSnackbar = (text: string, color: string = 'success') => {
+const showSnackbar = (text: string, color = 'success') => {
   snackbar.value.text = text
   snackbar.value.color = color
   snackbar.value.show = true
diff --git a/dashboard/src/views/knowledge-base/components/DocumentsTab.vue b/dashboard/src/views/knowledge-base/components/DocumentsTab.vue
index bf110f282..e38853ec8 100644
--- a/dashboard/src/views/knowledge-base/components/DocumentsTab.vue
+++ b/dashboard/src/views/knowledge-base/components/DocumentsTab.vue
@@ -2,33 +2,66 @@
   <div class="documents-tab">
     <!-- 操作栏 -->
     <div class="action-bar mb-4">
-      <v-btn prepend-icon="mdi-upload" color="primary" variant="elevated" @click="showUploadDialog = true">
+      <v-btn
+        prepend-icon="mdi-upload"
+        color="primary"
+        variant="elevated"
+        @click="showUploadDialog = true"
+      >
         {{ t('documents.upload') }}
       </v-btn>
-      <v-text-field v-model="searchQuery" prepend-inner-icon="mdi-magnify" :placeholder="'搜索文档...'" variant="outlined"
-        density="compact" hide-details clearable style="max-width: 300px" />
+      <v-text-field
+        v-model="searchQuery"
+        prepend-inner-icon="mdi-magnify"
+        :placeholder="'搜索文档...'"
+        variant="outlined"
+        density="compact"
+        hide-details
+        clearable
+        style="max-width: 300px"
+      />
     </div>
 
     <!-- 文档列表 -->
     <v-card elevation="2">
-      <v-data-table :headers="headers" :items="documents" :loading="loading" :search="searchQuery" :items-per-page="10">
+      <v-data-table
+        :headers="headers"
+        :items="documents"
+        :loading="loading"
+        :search="searchQuery"
+        :items-per-page="10"
+      >
         <template #item.doc_name="{ item }">
           <div class="d-flex align-center gap-2">
-            <v-icon :color="getFileColor(item.file_type)" class="mr-2">
+            <v-icon
+              :color="getFileColor(item.file_type)"
+              class="mr-2"
+            >
               {{ getFileIcon(item.file_type) }}
             </v-icon>
-            <div class="flex-grow-1" style="padding: 4px 0px;">
+            <div
+              class="flex-grow-1"
+              style="padding: 4px 0px;"
+            >
               <span class="font-weight-medium">{{ item.doc_name }}</span>
               <!-- 上传进度 -->
-              <div v-if="item.uploading" class="mt-1">
+              <div
+                v-if="item.uploading"
+                class="mt-1"
+              >
                 <div class="text-caption text-medium-emphasis mb-1">
                   {{ getStageText(item.uploadProgress?.stage || 'waiting') }}
                   <span v-if="item.uploadProgress?.current">
                     ({{ item.uploadProgress.current }} / {{ item.uploadProgress.total }})
                   </span>
                 </div>
-                <v-progress-linear :model-value="getUploadPercentage(item)" color="primary" height="4" rounded
-                  striped />
+                <v-progress-linear
+                  :model-value="getUploadPercentage(item)"
+                  color="primary"
+                  height="4"
+                  rounded
+                  striped
+                />
               </div>
             </div>
           </div>
@@ -43,35 +76,74 @@
         </template>
 
         <template #item.actions="{ item }">
-          <v-btn icon="mdi-eye" variant="text" size="small" color="info" @click="viewDocument(item)" />
-          <v-btn icon="mdi-delete" variant="text" size="small" color="error" @click="confirmDelete(item)" />
+          <v-btn
+            icon="mdi-eye"
+            variant="text"
+            size="small"
+            color="info"
+            @click="viewDocument(item)"
+          />
+          <v-btn
+            icon="mdi-delete"
+            variant="text"
+            size="small"
+            color="error"
+            @click="confirmDelete(item)"
+          />
         </template>
 
         <template #no-data>
           <div class="text-center py-8">
-            <v-icon size="64" color="grey-lighten-2">mdi-file-document-outline</v-icon>
-            <p class="mt-4 text-medium-emphasis">{{ t('documents.empty') }}</p>
+            <v-icon
+              size="64"
+              color="grey-lighten-2"
+            >
+              mdi-file-document-outline
+            </v-icon>
+            <p class="mt-4 text-medium-emphasis">
+              {{ t('documents.empty') }}
+            </p>
           </div>
         </template>
       </v-data-table>
     </v-card>
 
     <!-- 上传对话框 -->
-    <v-dialog v-model="showUploadDialog" max-width="650px" persistent @after-enter="initUploadSettings">
+    <v-dialog
+      v-model="showUploadDialog"
+      max-width="650px"
+      persistent
+      @after-enter="initUploadSettings"
+    >
       <v-card>
         <v-card-title class="pa-4 d-flex align-center">
           <span class="text-h5">{{ t('upload.title') }}</span>
           <v-spacer />
-          <v-btn icon="mdi-close" variant="text" @click="closeUploadDialog" />
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            @click="closeUploadDialog"
+          />
         </v-card-title>
 
         <v-divider />
 
-        <v-tabs v-model="uploadMode" grow class="mb-4">
-          <v-tab value="file">{{ t('upload.fileUpload') }}</v-tab>
+        <v-tabs
+          v-model="uploadMode"
+          grow
+          class="mb-4"
+        >
+          <v-tab value="file">
+            {{ t('upload.fileUpload') }}
+          </v-tab>
           <v-tab value="url">
             {{ t('upload.fromUrl') }}
-            <v-badge color="warning" :content="t('upload.beta')" inline class="ml-2" />
+            <v-badge
+              color="warning"
+              :content="t('upload.beta')"
+              inline
+              class="ml-2"
+            />
           </v-tab>
         </v-tabs>
 
@@ -80,36 +152,82 @@
             <!-- 文件上传 -->
             <v-window-item value="file">
               <!-- 文件选择 -->
-              <div class="upload-dropzone" :class="{ 'dragover': isDragging }" @drop.prevent="handleDrop"
-                @dragover.prevent="isDragging = true" @dragleave="isDragging = false" @click="fileInput?.click()">
-                <v-icon size="64" color="primary">mdi-cloud-upload</v-icon>
-                <p class="mt-4 text-h6">{{ t('upload.dropzone') }}</p>
-                <p class="text-caption text-medium-emphasis mt-2">{{ t('upload.supportedFormats') }}.txt, .md, .pdf,
+              <div
+                class="upload-dropzone"
+                :class="{ 'dragover': isDragging }"
+                @drop.prevent="handleDrop"
+                @dragover.prevent="isDragging = true"
+                @dragleave="isDragging = false"
+                @click="fileInput?.click()"
+              >
+                <v-icon
+                  size="64"
+                  color="primary"
+                >
+                  mdi-cloud-upload
+                </v-icon>
+                <p class="mt-4 text-h6">
+                  {{ t('upload.dropzone') }}
+                </p>
+                <p class="text-caption text-medium-emphasis mt-2">
+                  {{ t('upload.supportedFormats') }}.txt, .md, .pdf,
                   .docx,
-                  .xls, .xlsx</p>
-                <p class="text-caption text-medium-emphasis">{{ t('upload.maxSize') }}</p>
-                <p class="text-caption text-medium-emphasis">最多可上传 10 个文件</p>
-                <input ref="fileInput" type="file" multiple hidden accept=".txt,.md,.pdf,.docx,.xls,.xlsx"
-                  @change="handleFileSelect" />
+                  .xls, .xlsx
+                </p>
+                <p class="text-caption text-medium-emphasis">
+                  {{ t('upload.maxSize') }}
+                </p>
+                <p class="text-caption text-medium-emphasis">
+                  最多可上传 10 个文件
+                </p>
+                <input
+                  ref="fileInput"
+                  type="file"
+                  multiple
+                  hidden
+                  accept=".txt,.md,.pdf,.docx,.xls,.xlsx"
+                  @change="handleFileSelect"
+                >
               </div>
 
-              <div v-if="selectedFiles.length > 0" class="mt-4">
+              <div
+                v-if="selectedFiles.length > 0"
+                class="mt-4"
+              >
                 <div class="d-flex align-center justify-space-between mb-2">
                   <span class="text-subtitle-2">已选择 {{ selectedFiles.length }} 个文件</span>
-                  <v-btn variant="text" size="small" @click="selectedFiles = []">清空</v-btn>
+                  <v-btn
+                    variant="text"
+                    size="small"
+                    @click="selectedFiles = []"
+                  >
+                    清空
+                  </v-btn>
                 </div>
                 <div class="files-list">
-                  <div v-for="(file, index) in selectedFiles" :key="index"
-                    class="file-item pa-3 mb-2 rounded bg-surface-variant">
+                  <div
+                    v-for="(file, index) in selectedFiles"
+                    :key="index"
+                    class="file-item pa-3 mb-2 rounded bg-surface-variant"
+                  >
                     <div class="d-flex align-center justify-space-between">
                       <div class="d-flex align-center gap-2">
                         <v-icon>{{ getFileIcon(file.name) }}</v-icon>
                         <div>
-                          <div class="font-weight-medium">{{ file.name }}</div>
-                          <div class="text-caption">{{ formatFileSize(file.size) }}</div>
+                          <div class="font-weight-medium">
+                            {{ file.name }}
+                          </div>
+                          <div class="text-caption">
+                            {{ formatFileSize(file.size) }}
+                          </div>
                         </div>
                       </div>
-                      <v-btn icon="mdi-close" variant="text" size="small" @click="removeFile(index)" />
+                      <v-btn
+                        icon="mdi-close"
+                        variant="text"
+                        size="small"
+                        @click="removeFile(index)"
+                      />
                     </div>
                   </div>
                 </div>
@@ -117,39 +235,85 @@
             </v-window-item>
 
             <!-- URL上传 -->
-            <v-window-item value="url" class="pt-2">
+            <v-window-item
+              value="url"
+              class="pt-2"
+            >
               <!-- Tavily Key 快速配置 -->
-              <div v-if="tavilyConfigStatus === 'not_configured' || tavilyConfigStatus === 'error'" class="mb-4">
-                <v-alert :type="tavilyConfigStatus === 'error' ? 'error' : 'info'" variant="tonal" density="compact">
+              <div
+                v-if="tavilyConfigStatus === 'not_configured' || tavilyConfigStatus === 'error'"
+                class="mb-4"
+              >
+                <v-alert
+                  :type="tavilyConfigStatus === 'error' ? 'error' : 'info'"
+                  variant="tonal"
+                  density="compact"
+                >
                   <div class="d-flex align-center justify-space-between">
                     <span>
                       {{ tavilyConfigStatus === 'error' ? '检查网页搜索配置失败' : '使用此功能需要配置 Tavily Key' }}
                     </span>
-                    <v-btn size="small" variant="flat" @click="showTavilyDialog = true">
+                    <v-btn
+                      size="small"
+                      variant="flat"
+                      @click="showTavilyDialog = true"
+                    >
                       配置
                     </v-btn>
                   </div>
                 </v-alert>
               </div>
 
-              <v-text-field v-model="uploadUrl" :label="t('upload.urlPlaceholder')" variant="outlined" clearable :disabled="tavilyConfigStatus === 'not_configured'"
-                autofocus :hint="t('upload.urlHint', { supported: 'HTML' })" persistent-hint />
+              <v-text-field
+                v-model="uploadUrl"
+                :label="t('upload.urlPlaceholder')"
+                variant="outlined"
+                clearable
+                :disabled="tavilyConfigStatus === 'not_configured'"
+                autofocus
+                :hint="t('upload.urlHint', { supported: 'HTML' })"
+                persistent-hint
+              />
             </v-window-item>
           </v-window>
 
           <!-- 清洗设置 (仅在URL模式下显示) -->
-          <div v-if="uploadMode === 'url'" class="mt-6">
+          <div
+            v-if="uploadMode === 'url'"
+            class="mt-6"
+          >
             <div class="d-flex align-center mb-4">
-              <h3 class="text-h6">{{ t('upload.cleaningSettings') }}</h3>
+              <h3 class="text-h6">
+                {{ t('upload.cleaningSettings') }}
+              </h3>
             </div>
             <v-row>
-              <v-col cols="12" sm="4">
-                <v-switch v-model="uploadSettings.enable_cleaning" :label="t('upload.enableCleaning')" color="primary" />
+              <v-col
+                cols="12"
+                sm="4"
+              >
+                <v-switch
+                  v-model="uploadSettings.enable_cleaning"
+                  :label="t('upload.enableCleaning')"
+                  color="primary"
+                />
               </v-col>
-              <v-col cols="12" sm="8">
-                <v-select v-model="uploadSettings.cleaning_provider_id" :items="llmProviders" item-title="id"
-                  item-value="id" :label="t('upload.cleaningProvider')" :hint="t('upload.cleaningProviderHint')"
-                  persistent-hint variant="outlined" density="compact" :disabled="!uploadSettings.enable_cleaning" />
+              <v-col
+                cols="12"
+                sm="8"
+              >
+                <v-select
+                  v-model="uploadSettings.cleaning_provider_id"
+                  :items="llmProviders"
+                  item-title="id"
+                  item-value="id"
+                  :label="t('upload.cleaningProvider')"
+                  :hint="t('upload.cleaningProviderHint')"
+                  persistent-hint
+                  variant="outlined"
+                  density="compact"
+                  :disabled="!uploadSettings.enable_cleaning"
+                />
               </v-col>
             </v-row>
           </div>
@@ -157,53 +321,113 @@
           <!-- 分块设置 -->
           <div class="mt-6">
             <div class="d-flex align-center mb-4">
-              <h3 class="text-h6">{{ t('upload.chunkSettings') }}</h3>
+              <h3 class="text-h6">
+                {{ t('upload.chunkSettings') }}
+              </h3>
             </div>
             <v-row>
-              <v-col cols="12" sm="6">
-                <v-text-field v-model.number="uploadSettings.chunk_size" :label="t('upload.chunkSize')"
-                  :hint="t('upload.chunkSizeHint')" persistent-hint type="number" variant="outlined" density="compact"
-                  :placeholder="props.kb?.chunk_size?.toString() || '512'" />
+              <v-col
+                cols="12"
+                sm="6"
+              >
+                <v-text-field
+                  v-model.number="uploadSettings.chunk_size"
+                  :label="t('upload.chunkSize')"
+                  :hint="t('upload.chunkSizeHint')"
+                  persistent-hint
+                  type="number"
+                  variant="outlined"
+                  density="compact"
+                  :placeholder="props.kb?.chunk_size?.toString() || '512'"
+                />
               </v-col>
-              <v-col cols="12" sm="6">
-                <v-text-field v-model.number="uploadSettings.chunk_overlap" :label="t('upload.chunkOverlap')"
-                  :hint="t('upload.chunkOverlapHint')" persistent-hint type="number" variant="outlined"
-                  density="compact" :placeholder="props.kb?.chunk_overlap?.toString() || '50'" />
+              <v-col
+                cols="12"
+                sm="6"
+              >
+                <v-text-field
+                  v-model.number="uploadSettings.chunk_overlap"
+                  :label="t('upload.chunkOverlap')"
+                  :hint="t('upload.chunkOverlapHint')"
+                  persistent-hint
+                  type="number"
+                  variant="outlined"
+                  density="compact"
+                  :placeholder="props.kb?.chunk_overlap?.toString() || '50'"
+                />
               </v-col>
             </v-row>
           </div>
 
           <div class="mt-2">
-            <h3 class="text-h6 mb-4">{{ t('upload.batchSettings') }}</h3>
+            <h3 class="text-h6 mb-4">
+              {{ t('upload.batchSettings') }}
+            </h3>
             <v-row>
-              <v-col cols="12" sm="4">
-                <v-text-field v-model.number="uploadSettings.batch_size" :label="t('upload.batchSize')" hint="每批处理的文本数量"
-                  persistent-hint type="number" variant="outlined" density="compact" />
+              <v-col
+                cols="12"
+                sm="4"
+              >
+                <v-text-field
+                  v-model.number="uploadSettings.batch_size"
+                  :label="t('upload.batchSize')"
+                  hint="每批处理的文本数量"
+                  persistent-hint
+                  type="number"
+                  variant="outlined"
+                  density="compact"
+                />
               </v-col>
-              <v-col cols="12" sm="4">
-                <v-text-field v-model.number="uploadSettings.tasks_limit" :label="t('upload.tasksLimit')"
-                  hint="并发任务数量限制" persistent-hint type="number" variant="outlined" density="compact" />
+              <v-col
+                cols="12"
+                sm="4"
+              >
+                <v-text-field
+                  v-model.number="uploadSettings.tasks_limit"
+                  :label="t('upload.tasksLimit')"
+                  hint="并发任务数量限制"
+                  persistent-hint
+                  type="number"
+                  variant="outlined"
+                  density="compact"
+                />
               </v-col>
-              <v-col cols="12" sm="4">
-                <v-text-field v-model.number="uploadSettings.max_retries" :label="t('upload.maxRetries')"
-                  hint="失败时的最大重试次数" persistent-hint type="number" variant="outlined" density="compact" />
+              <v-col
+                cols="12"
+                sm="4"
+              >
+                <v-text-field
+                  v-model.number="uploadSettings.max_retries"
+                  :label="t('upload.maxRetries')"
+                  hint="失败时的最大重试次数"
+                  persistent-hint
+                  type="number"
+                  variant="outlined"
+                  density="compact"
+                />
               </v-col>
             </v-row>
           </div>
-
-
-
         </v-card-text>
 
         <v-divider />
 
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="closeUploadDialog" :disabled="uploading">
+          <v-btn
+            variant="text"
+            :disabled="uploading"
+            @click="closeUploadDialog"
+          >
             {{ t('upload.cancel') }}
           </v-btn>
-          <v-btn color="primary" variant="elevated" @click="startUpload" :loading="uploading"
-            :disabled="isUploadDisabled">
+          <v-btn
+            color="primary"
+            variant="elevated"
+            :loading="uploading"
+            :disabled="isUploadDisabled"
+            @click="startUpload"
+          >
             {{ t('upload.submit') }}
           </v-btn>
         </v-card-actions>
@@ -211,21 +435,41 @@
     </v-dialog>
 
     <!-- 删除确认对话框 -->
-    <v-dialog v-model="showDeleteDialog" max-width="450px">
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="450px"
+    >
       <v-card>
-        <v-card-title class="pa-4 text-h6">{{ t('documents.delete') }}</v-card-title>
+        <v-card-title class="pa-4 text-h6">
+          {{ t('documents.delete') }}
+        </v-card-title>
         <v-divider />
         <v-card-text class="pa-6">
           <p>{{ t('documents.deleteConfirm', { name: deleteTarget?.doc_name || '' }) }}</p>
-          <v-alert type="error" variant="tonal" density="compact" class="mt-4">
+          <v-alert
+            type="error"
+            variant="tonal"
+            density="compact"
+            class="mt-4"
+          >
             {{ t('documents.deleteWarning') }}
           </v-alert>
         </v-card-text>
         <v-divider />
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="showDeleteDialog = false">取消</v-btn>
-          <v-btn color="error" variant="elevated" @click="deleteDocument" :loading="deleting">
+          <v-btn
+            variant="text"
+            @click="showDeleteDialog = false"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="elevated"
+            :loading="deleting"
+            @click="deleteDocument"
+          >
             删除
           </v-btn>
         </v-card-actions>
@@ -233,12 +477,18 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
       {{ snackbar.text }}
     </v-snackbar>
 
     <!-- Tavily Key 配置对话框 -->
-    <TavilyKeyDialog v-model="showTavilyDialog" @success="onTavilyKeySet" />
+    <TavilyKeyDialog
+      v-model="showTavilyDialog"
+      @success="onTavilyKeySet"
+    />
   </div>
 </template>
 
@@ -285,7 +535,7 @@ const snackbar = ref({
   color: 'success'
 })
 
-const showSnackbar = (text: string, color: string = 'success') => {
+const showSnackbar = (text: string, color = 'success') => {
   snackbar.value.text = text
   snackbar.value.color = color
   snackbar.value.show = true
diff --git a/dashboard/src/views/knowledge-base/components/RetrievalTab.vue b/dashboard/src/views/knowledge-base/components/RetrievalTab.vue
index b1ed3ca1e..22f23320e 100644
--- a/dashboard/src/views/knowledge-base/components/RetrievalTab.vue
+++ b/dashboard/src/views/knowledge-base/components/RetrievalTab.vue
@@ -1,46 +1,97 @@
 <template>
   <div class="retrieval-tab">
     <v-card elevation="2">
-      <v-card-title class="pa-4 pb-0">{{ t('retrieval.title') }}</v-card-title>
+      <v-card-title class="pa-4 pb-0">
+        {{ t('retrieval.title') }}
+      </v-card-title>
       <v-card-subtitle class="pb-4 pt-2">
         {{ t('retrieval.subtitle') }}
       </v-card-subtitle>
 
       <v-divider />
-      <v-progress-linear v-if="loading" indeterminate color="primary" height="2" />
+      <v-progress-linear
+        v-if="loading"
+        indeterminate
+        color="primary"
+        height="2"
+      />
 
       <v-card-text class="pa-6">
         <!-- 查询输入区域 -->
         <v-row class="mb-4">
-          <v-col cols="12" md="8">
-            <v-textarea v-model="query" :label="t('retrieval.query')" :placeholder="t('retrieval.queryPlaceholder')"
-              variant="outlined" rows="3" auto-grow clearable />
+          <v-col
+            cols="12"
+            md="8"
+          >
+            <v-textarea
+              v-model="query"
+              :label="t('retrieval.query')"
+              :placeholder="t('retrieval.queryPlaceholder')"
+              variant="outlined"
+              rows="3"
+              auto-grow
+              clearable
+            />
 
             <!-- debug -->
-            <div v-if="debugVisualize" class="mt-2">
+            <div
+              v-if="debugVisualize"
+              class="mt-2"
+            >
               <v-card variant="outlined">
-                <v-img :src="`data:image/png;base64,${debugVisualize}`" :alt="t('retrieval.tsneVisualization')" cover>
-                  <template v-slot:placeholder>
+                <v-img
+                  :src="`data:image/png;base64,${debugVisualize}`"
+                  :alt="t('retrieval.tsneVisualization')"
+                  cover
+                >
+                  <template #placeholder>
                     <div class="d-flex align-center justify-center fill-height">
-                      <v-progress-circular indeterminate color="primary" />
+                      <v-progress-circular
+                        indeterminate
+                        color="primary"
+                      />
                     </div>
                   </template>
                 </v-img>
               </v-card>
             </div>
           </v-col>
-          <v-col cols="12" md="4">
-            <v-card variant="outlined" class="pa-4">
-              <h4 class="text-subtitle-2 mb-3">{{ t('retrieval.settings') }}</h4>
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-card
+              variant="outlined"
+              class="pa-4"
+            >
+              <h4 class="text-subtitle-2 mb-3">
+                {{ t('retrieval.settings') }}
+              </h4>
 
-              <v-text-field v-model.number="topK" :label="t('retrieval.topK')" :hint="t('retrieval.topKHint')"
-                type="number" variant="outlined" density="compact" persistent-hint class="mb-3" />
+              <v-text-field
+                v-model.number="topK"
+                :label="t('retrieval.topK')"
+                :hint="t('retrieval.topKHint')"
+                type="number"
+                variant="outlined"
+                density="compact"
+                persistent-hint
+                class="mb-3"
+              />
 
-              <v-switch v-model="debugMode" :label="t('retrieval.debugMode')" color="primary" density="compact"
-                hide-details>
-                <template v-slot:label>
+              <v-switch
+                v-model="debugMode"
+                :label="t('retrieval.debugMode')"
+                color="primary"
+                density="compact"
+                hide-details
+              >
+                <template #label>
                   <span class="text-caption">
-                    <v-icon size="small" class="mr-1">mdi-bug</v-icon>
+                    <v-icon
+                      size="small"
+                      class="mr-1"
+                    >mdi-bug</v-icon>
                     Debug (t-SNE)
                   </span>
                 </template>
@@ -50,45 +101,93 @@
         </v-row>
 
         <div class="d-flex justify-end mb-4">
-          <v-btn prepend-icon="mdi-magnify" color="primary" variant="elevated" @click="performRetrieval"
-            :loading="loading" :disabled="!query || query.trim() === ''">
+          <v-btn
+            prepend-icon="mdi-magnify"
+            color="primary"
+            variant="elevated"
+            :loading="loading"
+            :disabled="!query || query.trim() === ''"
+            @click="performRetrieval"
+          >
             {{ loading ? t('retrieval.searching') : t('retrieval.search') }}
           </v-btn>
         </div>
 
         <!-- 检索结果 -->
-        <div v-if="hasSearched" class="results-section">
+        <div
+          v-if="hasSearched"
+          class="results-section"
+        >
           <v-divider class="mb-4" />
 
           <div class="d-flex align-center mb-4">
-            <h3 class="text-h6">{{ t('retrieval.results') }}</h3>
-            <v-chip class="ml-3" color="primary" variant="tonal" size="small">
+            <h3 class="text-h6">
+              {{ t('retrieval.results') }}
+            </h3>
+            <v-chip
+              class="ml-3"
+              color="primary"
+              variant="tonal"
+              size="small"
+            >
               {{ results.length }} {{ t('retrieval.results') }}
             </v-chip>
           </div>
 
           <!-- 结果列表 -->
-          <div v-if="results.length > 0" class="results-list">
-            <v-card v-for="(result, index) in results" :key="result.chunk_id" variant="outlined" class="mb-4">
+          <div
+            v-if="results.length > 0"
+            class="results-list"
+          >
+            <v-card
+              v-for="(result, index) in results"
+              :key="result.chunk_id"
+              variant="outlined"
+              class="mb-4"
+            >
               <v-card-title class="d-flex align-center pa-2">
-                <v-chip size="x-small" color="primary" class="mr-2">
+                <v-chip
+                  size="x-small"
+                  color="primary"
+                  class="mr-2"
+                >
                   #{{ index + 1 }}
                 </v-chip>
                 <span class="text-subtitle-1">
                   {{ t('retrieval.chunk', { index: result.chunk_index }) }}
                 </span>
                 <div class="ml-4">
-                  <v-chip size="x-small" variant="tonal" class="mr-2">
-                    <v-icon start size="small">mdi-file-document</v-icon>
+                  <v-chip
+                    size="x-small"
+                    variant="tonal"
+                    class="mr-2"
+                  >
+                    <v-icon
+                      start
+                      size="small"
+                    >
+                      mdi-file-document
+                    </v-icon>
                     {{ result.doc_name }}
                   </v-chip>
-                  <v-chip size="x-small" variant="tonal">
-                    <v-icon start size="small">mdi-text</v-icon>
+                  <v-chip
+                    size="x-small"
+                    variant="tonal"
+                  >
+                    <v-icon
+                      start
+                      size="small"
+                    >
+                      mdi-text
+                    </v-icon>
                     {{ t('retrieval.charCount', { count: result.char_count }) }}
                   </v-chip>
                 </div>
                 <v-spacer />
-                <v-chip size="x-small" :color="getScoreColor(result.score)">
+                <v-chip
+                  size="x-small"
+                  :color="getScoreColor(result.score)"
+                >
                   {{ t('retrieval.score') }}: {{ result.score.toFixed(4) }}
                 </v-chip>
               </v-card-title>
@@ -104,17 +203,32 @@
           </div>
 
           <!-- 空结果 -->
-          <div v-else class="text-center py-12">
-            <v-icon size="80" color="grey-lighten-2">mdi-text-box-search-outline</v-icon>
-            <p class="text-h6 mt-4 text-medium-emphasis">{{ t('retrieval.noResults') }}</p>
-            <p class="text-body-2 text-medium-emphasis">{{ t('retrieval.tryDifferentQuery') }}</p>
+          <div
+            v-else
+            class="text-center py-12"
+          >
+            <v-icon
+              size="80"
+              color="grey-lighten-2"
+            >
+              mdi-text-box-search-outline
+            </v-icon>
+            <p class="text-h6 mt-4 text-medium-emphasis">
+              {{ t('retrieval.noResults') }}
+            </p>
+            <p class="text-body-2 text-medium-emphasis">
+              {{ t('retrieval.tryDifferentQuery') }}
+            </p>
           </div>
         </div>
       </v-card-text>
     </v-card>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
       {{ snackbar.text }}
     </v-snackbar>
   </div>
@@ -147,7 +261,7 @@ const snackbar = ref({
   color: 'success'
 })
 
-const showSnackbar = (text: string, color: string = 'success') => {
+const showSnackbar = (text: string, color = 'success') => {
   snackbar.value.text = text
   snackbar.value.color = color
   snackbar.value.show = true
diff --git a/dashboard/src/views/knowledge-base/components/SettingsTab.vue b/dashboard/src/views/knowledge-base/components/SettingsTab.vue
index fb3911aaa..ce134ceea 100644
--- a/dashboard/src/views/knowledge-base/components/SettingsTab.vue
+++ b/dashboard/src/views/knowledge-base/components/SettingsTab.vue
@@ -1,16 +1,23 @@
 <template>
   <div class="settings-tab">
     <v-card elevation="2">
-      <v-card-title class="pa-4">{{ t('settings.title') }}</v-card-title>
+      <v-card-title class="pa-4">
+        {{ t('settings.title') }}
+      </v-card-title>
       <v-divider />
 
       <v-card-text class="pa-6">
         <v-form ref="formRef">
           <!-- 基本设置 -->
-          <h3 class="text-h6 mb-4">{{ t('settings.basic') }}</h3>
+          <h3 class="text-h6 mb-4">
+            {{ t('settings.basic') }}
+          </h3>
 
           <v-row>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-text-field
                 v-model.number="formData.chunk_size"
                 :label="t('settings.chunkSize')"
@@ -19,7 +26,10 @@
                 density="comfortable"
               />
             </v-col>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-text-field
                 v-model.number="formData.chunk_overlap"
                 :label="t('settings.chunkOverlap')"
@@ -31,10 +41,15 @@
           </v-row>
 
           <!-- 检索设置 -->
-          <h3 class="text-h6 mb-4 mt-6">{{ t('settings.retrieval') }}</h3>
+          <h3 class="text-h6 mb-4 mt-6">
+            {{ t('settings.retrieval') }}
+          </h3>
 
           <v-row>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-text-field
                 v-model.number="formData.top_k_dense"
                 :label="t('settings.topKDense')"
@@ -43,7 +58,10 @@
                 density="comfortable"
               />
             </v-col>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-text-field
                 v-model.number="formData.top_k_sparse"
                 :label="t('settings.topKSparse')"
@@ -64,10 +82,15 @@
           </v-row>
 
           <!-- 模型设置 -->
-          <h3 class="text-h6 mb-4 mt-6">{{ t('settings.embeddingProvider') }}</h3>
+          <h3 class="text-h6 mb-4 mt-6">
+            {{ t('settings.embeddingProvider') }}
+          </h3>
 
           <v-row>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-select
                 v-model="formData.embedding_provider_id"
                 :items="embeddingProviders"
@@ -76,11 +99,14 @@
                 :label="t('settings.embeddingProvider')"
                 variant="outlined"
                 density="comfortable"
-                @update:model-value="handleEmbeddingProviderChange"
                 :disabled="true"
+                @update:model-value="handleEmbeddingProviderChange"
               />
             </v-col>
-            <v-col cols="12" md="6">
+            <v-col
+              cols="12"
+              md="6"
+            >
               <v-select
                 v-model="formData.rerank_provider_id"
                 :items="rerankProviders"
@@ -94,11 +120,20 @@
             </v-col>
           </v-row>
 
-          <v-alert type="info" variant="tonal" class="mt-4">
+          <v-alert
+            type="info"
+            variant="tonal"
+            class="mt-4"
+          >
             {{ t('settings.tips') }}
           </v-alert>
 
-          <v-alert type="warning" variant="tonal" class="mt-4" v-if="showEmbeddingWarning">
+          <v-alert
+            v-if="showEmbeddingWarning"
+            type="warning"
+            variant="tonal"
+            class="mt-4"
+          >
             <strong>注意:</strong> 修改嵌入模型会导致现有的向量数据失效,建议重新上传文档。不同的嵌入模型生成的向量不兼容,可能导致检索结果不准确。
           </v-alert>
         </v-form>
@@ -112,8 +147,8 @@
           color="primary"
           variant="elevated"
           prepend-icon="mdi-content-save"
-          @click="saveSettings"
           :loading="saving"
+          @click="saveSettings"
         >
           {{ t('settings.save') }}
         </v-btn>
@@ -121,19 +156,32 @@
     </v-card>
 
     <!-- 消息提示 -->
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color">
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+    >
       {{ snackbar.text }}
     </v-snackbar>
 
     <!-- Embedding Provider修改确认对话框 -->
-    <v-dialog v-model="embeddingChangeDialog" max-width="500px" persistent>
+    <v-dialog
+      v-model="embeddingChangeDialog"
+      max-width="500px"
+      persistent
+    >
       <v-card>
         <v-card-title class="bg-warning text-white">
-          <v-icon class="mr-2">mdi-alert</v-icon>
+          <v-icon class="mr-2">
+            mdi-alert
+          </v-icon>
           确认修改嵌入模型
         </v-card-title>
         <v-card-text class="pa-6">
-          <v-alert type="warning" variant="tonal" class="mb-4">
+          <v-alert
+            type="warning"
+            variant="tonal"
+            class="mb-4"
+          >
             <strong>警告:</strong> 修改嵌入模型将导致以下影响:
           </v-alert>
           <ul class="text-body-2">
@@ -148,10 +196,17 @@
         </v-card-text>
         <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="cancelEmbeddingChange">
+          <v-btn
+            variant="text"
+            @click="cancelEmbeddingChange"
+          >
             取消
           </v-btn>
-          <v-btn color="warning" variant="elevated" @click="confirmEmbeddingChange">
+          <v-btn
+            color="warning"
+            variant="elevated"
+            @click="confirmEmbeddingChange"
+          >
             确认修改
           </v-btn>
         </v-card-actions>
@@ -189,7 +244,7 @@ const snackbar = ref({
   color: 'success'
 })
 
-const showSnackbar = (text: string, color: string = 'success') => {
+const showSnackbar = (text: string, color = 'success') => {
   snackbar.value.text = text
   snackbar.value.color = color
   snackbar.value.show = true
diff --git a/dashboard/src/views/knowledge-base/components/TavilyKeyDialog.vue b/dashboard/src/views/knowledge-base/components/TavilyKeyDialog.vue
index 37cf9df8c..f1ceed945 100644
--- a/dashboard/src/views/knowledge-base/components/TavilyKeyDialog.vue
+++ b/dashboard/src/views/knowledge-base/components/TavilyKeyDialog.vue
@@ -1,12 +1,19 @@
 <template>
-  <v-dialog v-model="dialog" max-width="500px" persistent>
+  <v-dialog
+    v-model="dialog"
+    max-width="500px"
+    persistent
+  >
     <v-card>
       <v-card-title class="text-h5">
         配置 Tavily API Key
       </v-card-title>
       <v-card-text>
         <p class="mb-4 text-body-2 text-medium-emphasis">
-          为了使用基于网页的知识库功能，需要提供 Tavily API Key。您可以从 <a href="https://tavily.com/" target="_blank">Tavily 官网</a> 获取。
+          为了使用基于网页的知识库功能，需要提供 Tavily API Key。您可以从 <a
+            href="https://tavily.com/"
+            target="_blank"
+          >Tavily 官网</a> 获取。
         </p>
         <v-text-field
           v-model="apiKey"
@@ -21,10 +28,19 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn variant="text" @click="closeDialog" :disabled="saving">
+        <v-btn
+          variant="text"
+          :disabled="saving"
+          @click="closeDialog"
+        >
           取消
         </v-btn>
-        <v-btn color="primary" variant="elevated" @click="saveKey" :loading="saving">
+        <v-btn
+          color="primary"
+          variant="elevated"
+          :loading="saving"
+          @click="saveKey"
+        >
           保存
         </v-btn>
       </v-card-actions>
diff --git a/dashboard/src/views/knowledge-base/index.vue b/dashboard/src/views/knowledge-base/index.vue
index 121f3a3b8..1e4b87089 100644
--- a/dashboard/src/views/knowledge-base/index.vue
+++ b/dashboard/src/views/knowledge-base/index.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="kb-container">
     <router-view v-slot="{ Component }">
-      <transition name="kb-fade" mode="out-in">
-        <component :is="Component" :key="$route.fullPath" />
+      <transition
+        name="kb-fade"
+        mode="out-in"
+      >
+        <component
+          :is="Component"
+          :key="$route.fullPath"
+        />
       </transition>
     </router-view>
   </div>
diff --git a/dashboard/src/views/persona/CreateFolderDialog.vue b/dashboard/src/views/persona/CreateFolderDialog.vue
index 3106d73c9..311ef250b 100644
--- a/dashboard/src/views/persona/CreateFolderDialog.vue
+++ b/dashboard/src/views/persona/CreateFolderDialog.vue
@@ -1,6 +1,11 @@
 <template>
-    <BaseCreateFolderDialog v-model="showDialog" :parent-folder-id="parentFolderId" :labels="labels"
-        @create="handleCreate" ref="baseDialog" />
+  <BaseCreateFolderDialog
+    ref="baseDialog"
+    v-model="showDialog"
+    :parent-folder-id="parentFolderId"
+    :labels="labels"
+    @create="handleCreate"
+  />
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/FolderBreadcrumb.vue b/dashboard/src/views/persona/FolderBreadcrumb.vue
index 9e4c57b60..4550bc590 100644
--- a/dashboard/src/views/persona/FolderBreadcrumb.vue
+++ b/dashboard/src/views/persona/FolderBreadcrumb.vue
@@ -1,19 +1,38 @@
 <template>
-    <v-breadcrumbs :items="breadcrumbItems" class="folder-breadcrumb pa-0">
-        <template v-slot:prepend>
-            <v-icon size="small" class="mr-1">mdi-folder-outline</v-icon>
-        </template>
-        <template v-slot:item="{ item }">
-            <v-breadcrumbs-item :disabled="item.disabled" @click="!item.disabled && handleClick((item as any).folderId)"
-                :class="{ 'breadcrumb-link': !item.disabled }">
-                <v-icon v-if="(item as any).isRoot" size="small" class="mr-1">mdi-home</v-icon>
-                {{ item.title }}
-            </v-breadcrumbs-item>
-        </template>
-        <template v-slot:divider>
-            <v-icon size="small">mdi-chevron-right</v-icon>
-        </template>
-    </v-breadcrumbs>
+  <v-breadcrumbs
+    :items="breadcrumbItems"
+    class="folder-breadcrumb pa-0"
+  >
+    <template #prepend>
+      <v-icon
+        size="small"
+        class="mr-1"
+      >
+        mdi-folder-outline
+      </v-icon>
+    </template>
+    <template #item="{ item }">
+      <v-breadcrumbs-item
+        :disabled="item.disabled"
+        :class="{ 'breadcrumb-link': !item.disabled }"
+        @click="!item.disabled && handleClick((item as any).folderId)"
+      >
+        <v-icon
+          v-if="(item as any).isRoot"
+          size="small"
+          class="mr-1"
+        >
+          mdi-home
+        </v-icon>
+        {{ item.title }}
+      </v-breadcrumbs-item>
+    </template>
+    <template #divider>
+      <v-icon size="small">
+        mdi-chevron-right
+      </v-icon>
+    </template>
+  </v-breadcrumbs>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/FolderCard.vue b/dashboard/src/views/persona/FolderCard.vue
index 5ee4a14a0..506a0b5fb 100644
--- a/dashboard/src/views/persona/FolderCard.vue
+++ b/dashboard/src/views/persona/FolderCard.vue
@@ -1,48 +1,89 @@
 <template>
-    <v-card class="folder-card" :class="{ 'drag-over': isDragOver }" rounded="lg" @click="$emit('click')" @contextmenu.prevent="$emit('contextmenu', $event)"
-        elevation="1" hover @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
-        <v-card-text class="d-flex align-center pa-3">
-            <v-icon size="40" color="amber-darken-2" class="mr-3">mdi-folder</v-icon>
-            <div class="folder-info flex-grow-1 overflow-hidden">
-                <div class="text-subtitle-1 font-weight-medium text-truncate">{{ folder.name }}</div>
-                <div v-if="folder.description" class="text-body-2 text-medium-emphasis text-truncate">
-                    {{ folder.description }}
-                </div>
-            </div>
-            <v-menu offset-y>
-                <template v-slot:activator="{ props }">
-                    <v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
-                </template>
-                <v-list density="compact">
-                    <v-list-item @click.stop="$emit('open')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-open</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('rename')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-pencil</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('move')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-move</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-divider class="my-1" />
-                    <v-list-item @click.stop="$emit('delete')" class="text-error">
-                        <template v-slot:prepend>
-                            <v-icon size="small" color="error">mdi-delete</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
-        </v-card-text>
-    </v-card>
+  <v-card
+    class="folder-card"
+    :class="{ 'drag-over': isDragOver }"
+    rounded="lg"
+    elevation="1"
+    hover
+    @click="$emit('click')"
+    @contextmenu.prevent="$emit('contextmenu', $event)"
+    @dragover.prevent="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <v-card-text class="d-flex align-center pa-3">
+      <v-icon
+        size="40"
+        color="amber-darken-2"
+        class="mr-3"
+      >
+        mdi-folder
+      </v-icon>
+      <div class="folder-info flex-grow-1 overflow-hidden">
+        <div class="text-subtitle-1 font-weight-medium text-truncate">
+          {{ folder.name }}
+        </div>
+        <div
+          v-if="folder.description"
+          class="text-body-2 text-medium-emphasis text-truncate"
+        >
+          {{ folder.description }}
+        </div>
+      </div>
+      <v-menu offset-y>
+        <template #activator="{ props }">
+          <v-btn
+            icon="mdi-dots-vertical"
+            variant="text"
+            size="small"
+            v-bind="props"
+            @click.stop
+          />
+        </template>
+        <v-list density="compact">
+          <v-list-item @click.stop="$emit('open')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-folder-open
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click.stop="$emit('rename')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-pencil
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click.stop="$emit('move')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-folder-move
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
+          </v-list-item>
+          <v-divider class="my-1" />
+          <v-list-item
+            class="text-error"
+            @click.stop="$emit('delete')"
+          >
+            <template #prepend>
+              <v-icon
+                size="small"
+                color="error"
+              >
+                mdi-delete
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/FolderTree.vue b/dashboard/src/views/persona/FolderTree.vue
index 13c596990..dd2555dc5 100644
--- a/dashboard/src/views/persona/FolderTree.vue
+++ b/dashboard/src/views/persona/FolderTree.vue
@@ -1,119 +1,219 @@
 <template>
-    <div class="folder-tree">
-        <!-- 搜索框 -->
-        <v-text-field v-model="searchQuery" :placeholder="tm('folder.searchPlaceholder')" prepend-inner-icon="mdi-magnify"
-            variant="outlined" density="compact" hide-details clearable class="mb-3" />
+  <div class="folder-tree">
+    <!-- 搜索框 -->
+    <v-text-field
+      v-model="searchQuery"
+      :placeholder="tm('folder.searchPlaceholder')"
+      prepend-inner-icon="mdi-magnify"
+      variant="outlined"
+      density="compact"
+      hide-details
+      clearable
+      class="mb-3"
+    />
 
-        <!-- 根目录节点 -->
-        <v-list density="compact" nav class="tree-list" bg-color="transparent">
-            <v-list-item :active="currentFolderId === null" @click="handleFolderClick(null)" rounded="lg"
-                :class="['root-item', { 'drag-over': isRootDragOver }]"
-                @dragover.prevent="handleRootDragOver" @dragleave="handleRootDragLeave" @drop.prevent="handleRootDrop">
-                <template v-slot:prepend>
-                    <v-icon>mdi-home</v-icon>
-                </template>
-                <v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
-            </v-list-item>
+    <!-- 根目录节点 -->
+    <v-list
+      density="compact"
+      nav
+      class="tree-list"
+      bg-color="transparent"
+    >
+      <v-list-item
+        :active="currentFolderId === null"
+        rounded="lg"
+        :class="['root-item', { 'drag-over': isRootDragOver }]"
+        @click="handleFolderClick(null)"
+        @dragover.prevent="handleRootDragOver"
+        @dragleave="handleRootDragLeave"
+        @drop.prevent="handleRootDrop"
+      >
+        <template #prepend>
+          <v-icon>mdi-home</v-icon>
+        </template>
+        <v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
+      </v-list-item>
 
-            <!-- 文件夹树 -->
-            <template v-if="!treeLoading">
-                <FolderTreeNode v-for="folder in filteredFolderTree" :key="folder.folder_id" :folder="folder"
-                    :depth="0" :current-folder-id="currentFolderId" :search-query="searchQuery"
-                    @folder-click="handleFolderClick" @folder-context-menu="handleContextMenu"
-                    @persona-dropped="$emit('persona-dropped', $event)" />
-            </template>
+      <!-- 文件夹树 -->
+      <template v-if="!treeLoading">
+        <FolderTreeNode
+          v-for="folder in filteredFolderTree"
+          :key="folder.folder_id"
+          :folder="folder"
+          :depth="0"
+          :current-folder-id="currentFolderId"
+          :search-query="searchQuery"
+          @folder-click="handleFolderClick"
+          @folder-context-menu="handleContextMenu"
+          @persona-dropped="$emit('persona-dropped', $event)"
+        />
+      </template>
 
-            <!-- 加载状态 -->
-            <div v-if="treeLoading" class="text-center pa-4">
-                <v-progress-circular indeterminate size="24" />
-            </div>
+      <!-- 加载状态 -->
+      <div
+        v-if="treeLoading"
+        class="text-center pa-4"
+      >
+        <v-progress-circular
+          indeterminate
+          size="24"
+        />
+      </div>
 
-            <!-- 空状态 -->
-            <div v-if="!treeLoading && folderTree.length === 0" class="text-center pa-4 text-medium-emphasis">
-                <v-icon size="32" class="mb-2">mdi-folder-outline</v-icon>
-                <div class="text-body-2">{{ tm('folder.noFolders') }}</div>
-            </div>
-        </v-list>
+      <!-- 空状态 -->
+      <div
+        v-if="!treeLoading && folderTree.length === 0"
+        class="text-center pa-4 text-medium-emphasis"
+      >
+        <v-icon
+          size="32"
+          class="mb-2"
+        >
+          mdi-folder-outline
+        </v-icon>
+        <div class="text-body-2">
+          {{ tm('folder.noFolders') }}
+        </div>
+      </div>
+    </v-list>
 
-        <!-- 右键菜单 -->
-        <v-menu v-model="contextMenu.show" :target="contextMenu.target as any" location="end" :close-on-content-click="true">
-            <v-list density="compact">
-                <v-list-item @click="openFolder">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-folder-open</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="renameFolder">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-pencil</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="$emit('move-folder', contextMenu.folder)">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-folder-move</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
-                </v-list-item>
-                <v-divider class="my-1" />
-                <v-list-item @click="confirmDeleteFolder" class="text-error">
-                    <template v-slot:prepend>
-                        <v-icon size="small" color="error">mdi-delete</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
-                </v-list-item>
-            </v-list>
-        </v-menu>
+    <!-- 右键菜单 -->
+    <v-menu
+      v-model="contextMenu.show"
+      :target="contextMenu.target as any"
+      location="end"
+      :close-on-content-click="true"
+    >
+      <v-list density="compact">
+        <v-list-item @click="openFolder">
+          <template #prepend>
+            <v-icon size="small">
+              mdi-folder-open
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="renameFolder">
+          <template #prepend>
+            <v-icon size="small">
+              mdi-pencil
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="$emit('move-folder', contextMenu.folder)">
+          <template #prepend>
+            <v-icon size="small">
+              mdi-folder-move
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
+        </v-list-item>
+        <v-divider class="my-1" />
+        <v-list-item
+          class="text-error"
+          @click="confirmDeleteFolder"
+        >
+          <template #prepend>
+            <v-icon
+              size="small"
+              color="error"
+            >
+              mdi-delete
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
 
-        <!-- 重命名对话框 -->
-        <v-dialog v-model="renameDialog.show" max-width="400px" persistent>
-            <v-card>
-                <v-card-title>{{ tm('folder.renameDialog.title') }}</v-card-title>
-                <v-card-text>
-                    <v-text-field v-model="renameDialog.name" :label="tm('folder.form.name')"
-                        :rules="[v => !!v || tm('folder.validation.nameRequired')]" variant="outlined"
-                        density="comfortable" autofocus @keyup.enter="submitRename" />
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn variant="text" @click="renameDialog.show = false">
-                        {{ tm('buttons.cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" variant="flat" @click="submitRename" :loading="renameDialog.loading"
-                        :disabled="!renameDialog.name">
-                        {{ tm('buttons.save') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
+    <!-- 重命名对话框 -->
+    <v-dialog
+      v-model="renameDialog.show"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>{{ tm('folder.renameDialog.title') }}</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="renameDialog.name"
+            :label="tm('folder.form.name')"
+            :rules="[v => !!v || tm('folder.validation.nameRequired')]"
+            variant="outlined"
+            density="comfortable"
+            autofocus
+            @keyup.enter="submitRename"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="renameDialog.show = false"
+          >
+            {{ tm('buttons.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            :loading="renameDialog.loading"
+            :disabled="!renameDialog.name"
+            @click="submitRename"
+          >
+            {{ tm('buttons.save') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
-        <!-- 删除确认对话框 -->
-        <v-dialog v-model="deleteDialog.show" max-width="450px">
-            <v-card>
-                <v-card-title class="text-error">
-                    <v-icon class="mr-2" color="error">mdi-alert</v-icon>
-                    {{ tm('folder.deleteDialog.title') }}
-                </v-card-title>
-                <v-card-text>
-                    <p>{{ tm('folder.deleteDialog.message', { name: deleteDialog.folder?.name ?? '' }) }}</p>
-                    <p class="text-warning mt-2">
-                        <v-icon size="small" class="mr-1">mdi-information</v-icon>
-                        {{ tm('folder.deleteDialog.warning') }}
-                    </p>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn variant="text" @click="deleteDialog.show = false">
-                        {{ tm('buttons.cancel') }}
-                    </v-btn>
-                    <v-btn color="error" variant="flat" @click="submitDelete" :loading="deleteDialog.loading">
-                        {{ tm('buttons.delete') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </div>
+    <!-- 删除确认对话框 -->
+    <v-dialog
+      v-model="deleteDialog.show"
+      max-width="450px"
+    >
+      <v-card>
+        <v-card-title class="text-error">
+          <v-icon
+            class="mr-2"
+            color="error"
+          >
+            mdi-alert
+          </v-icon>
+          {{ tm('folder.deleteDialog.title') }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ tm('folder.deleteDialog.message', { name: deleteDialog.folder?.name ?? '' }) }}</p>
+          <p class="text-warning mt-2">
+            <v-icon
+              size="small"
+              class="mr-1"
+            >
+              mdi-information
+            </v-icon>
+            {{ tm('folder.deleteDialog.warning') }}
+          </p>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="deleteDialog.show = false"
+          >
+            {{ tm('buttons.cancel') }}
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            :loading="deleteDialog.loading"
+            @click="submitDelete"
+          >
+            {{ tm('buttons.delete') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/FolderTreeNode.vue b/dashboard/src/views/persona/FolderTreeNode.vue
index c6a511fda..6a9089d36 100644
--- a/dashboard/src/views/persona/FolderTreeNode.vue
+++ b/dashboard/src/views/persona/FolderTreeNode.vue
@@ -1,11 +1,17 @@
 <template>
-    <BaseFolderTreeNode :folder="folder" :depth="depth" :current-folder-id="currentFolderId"
-        :search-query="searchQuery" :expanded-folder-ids="expandedFolderIds" :accept-drop-types="['persona']"
-        @folder-click="$emit('folder-click', $event)"
-        @folder-context-menu="handleContextMenu"
-        @item-dropped="handleItemDropped"
-        @toggle-expansion="toggleFolderExpansion"
-        @set-expansion="handleSetExpansion" />
+  <BaseFolderTreeNode
+    :folder="folder"
+    :depth="depth"
+    :current-folder-id="currentFolderId"
+    :search-query="searchQuery"
+    :expanded-folder-ids="expandedFolderIds"
+    :accept-drop-types="['persona']"
+    @folder-click="$emit('folder-click', $event)"
+    @folder-context-menu="handleContextMenu"
+    @item-dropped="handleItemDropped"
+    @toggle-expansion="toggleFolderExpansion"
+    @set-expansion="handleSetExpansion"
+  />
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/MoveTargetNode.vue b/dashboard/src/views/persona/MoveTargetNode.vue
index 90e1113f8..179c70d95 100644
--- a/dashboard/src/views/persona/MoveTargetNode.vue
+++ b/dashboard/src/views/persona/MoveTargetNode.vue
@@ -1,6 +1,11 @@
 <template>
-    <BaseMoveTargetNode :folder="folder" :depth="depth" :selected-folder-id="selectedFolderId"
-        :disabled-folder-ids="disabledFolderIds" @select="$emit('select', $event)" />
+  <BaseMoveTargetNode
+    :folder="folder"
+    :depth="depth"
+    :selected-folder-id="selectedFolderId"
+    :disabled-folder-ids="disabledFolderIds"
+    @select="$emit('select', $event)"
+  />
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/MoveToFolderDialog.vue b/dashboard/src/views/persona/MoveToFolderDialog.vue
index aeae03d3a..afe786028 100644
--- a/dashboard/src/views/persona/MoveToFolderDialog.vue
+++ b/dashboard/src/views/persona/MoveToFolderDialog.vue
@@ -1,52 +1,86 @@
 <template>
-    <v-dialog v-model="showDialog" max-width="500px" persistent>
-        <v-card>
-            <v-card-title>
-                <v-icon class="mr-2">mdi-folder-move</v-icon>
-                {{ tm('moveDialog.title') }}
-            </v-card-title>
-            <v-card-text>
-                <p class="text-body-2 text-medium-emphasis mb-4">
-                    {{ tm('moveDialog.description', { name: itemName }) }}
-                </p>
+  <v-dialog
+    v-model="showDialog"
+    max-width="500px"
+    persistent
+  >
+    <v-card>
+      <v-card-title>
+        <v-icon class="mr-2">
+          mdi-folder-move
+        </v-icon>
+        {{ tm('moveDialog.title') }}
+      </v-card-title>
+      <v-card-text>
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          {{ tm('moveDialog.description', { name: itemName }) }}
+        </p>
 
-                <!-- 文件夹选择树 -->
-                <div class="folder-select-tree">
-                    <v-list density="compact" nav class="tree-list">
-                        <!-- 根目录选项 -->
-                        <v-list-item :active="selectedFolderId === null" @click="selectFolder(null)" rounded="lg"
-                            class="mb-1">
-                            <template v-slot:prepend>
-                                <v-icon>mdi-home</v-icon>
-                            </template>
-                            <v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
-                        </v-list-item>
+        <!-- 文件夹选择树 -->
+        <div class="folder-select-tree">
+          <v-list
+            density="compact"
+            nav
+            class="tree-list"
+          >
+            <!-- 根目录选项 -->
+            <v-list-item
+              :active="selectedFolderId === null"
+              rounded="lg"
+              class="mb-1"
+              @click="selectFolder(null)"
+            >
+              <template #prepend>
+                <v-icon>mdi-home</v-icon>
+              </template>
+              <v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
+            </v-list-item>
 
-                        <!-- 文件夹树 -->
-                        <template v-if="!treeLoading">
-                            <MoveTargetNode v-for="folder in availableFolders" :key="folder.folder_id" :folder="folder"
-                                :depth="0" :selected-folder-id="selectedFolderId" :disabled-folder-ids="disabledFolderIds"
-                                @select="selectFolder" />
-                        </template>
+            <!-- 文件夹树 -->
+            <template v-if="!treeLoading">
+              <MoveTargetNode
+                v-for="folder in availableFolders"
+                :key="folder.folder_id"
+                :folder="folder"
+                :depth="0"
+                :selected-folder-id="selectedFolderId"
+                :disabled-folder-ids="disabledFolderIds"
+                @select="selectFolder"
+              />
+            </template>
 
-                        <!-- 加载状态 -->
-                        <div v-if="treeLoading" class="text-center pa-4">
-                            <v-progress-circular indeterminate size="24" />
-                        </div>
-                    </v-list>
-                </div>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer />
-                <v-btn variant="text" @click="closeDialog">
-                    {{ tm('buttons.cancel') }}
-                </v-btn>
-                <v-btn color="primary" variant="flat" @click="submitMove" :loading="loading">
-                    {{ tm('buttons.move') }}
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+            <!-- 加载状态 -->
+            <div
+              v-if="treeLoading"
+              class="text-center pa-4"
+            >
+              <v-progress-circular
+                indeterminate
+                size="24"
+              />
+            </div>
+          </v-list>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog"
+        >
+          {{ tm('buttons.cancel') }}
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="loading"
+          @click="submitMove"
+        >
+          {{ tm('buttons.move') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/PersonaCard.vue b/dashboard/src/views/persona/PersonaCard.vue
index 0f0c9c7c7..4d22fb966 100644
--- a/dashboard/src/views/persona/PersonaCard.vue
+++ b/dashboard/src/views/persona/PersonaCard.vue
@@ -1,81 +1,145 @@
 <template>
-    <v-card class="persona-card" :class="{ 'dragging': isDragging }" rounded="lg" @click="$emit('view')" elevation="1" hover
-        draggable="true" @dragstart="handleDragStart" @dragend="handleDragEnd">
-        <v-card-title class="d-flex justify-space-between align-center">
-            <div class="text-truncate ml-2">{{ persona.persona_id }}</div>
-            <v-menu offset-y>
-                <template v-slot:activator="{ props }">
-                    <v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
-                </template>
-                <v-list density="compact">
-                    <v-list-item @click.stop="$emit('edit')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-pencil</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('buttons.edit') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('clone')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-content-copy</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('buttons.clone') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('move')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-move</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('persona.contextMenu.moveTo') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-divider class="my-1" />
-                    <v-list-item @click.stop="$emit('delete')" class="text-error">
-                        <template v-slot:prepend>
-                            <v-icon size="small" color="error">mdi-delete</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('buttons.delete') }}</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
-        </v-card-title>
+  <v-card
+    class="persona-card"
+    :class="{ 'dragging': isDragging }"
+    rounded="lg"
+    elevation="1"
+    hover
+    draggable="true"
+    @click="$emit('view')"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+  >
+    <v-card-title class="d-flex justify-space-between align-center">
+      <div class="text-truncate ml-2">
+        {{ persona.persona_id }}
+      </div>
+      <v-menu offset-y>
+        <template #activator="{ props }">
+          <v-btn
+            icon="mdi-dots-vertical"
+            variant="text"
+            size="small"
+            v-bind="props"
+            @click.stop
+          />
+        </template>
+        <v-list density="compact">
+          <v-list-item @click.stop="$emit('edit')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-pencil
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('buttons.edit') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click.stop="$emit('clone')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-content-copy
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('buttons.clone') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click.stop="$emit('move')">
+            <template #prepend>
+              <v-icon size="small">
+                mdi-folder-move
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('persona.contextMenu.moveTo') }}</v-list-item-title>
+          </v-list-item>
+          <v-divider class="my-1" />
+          <v-list-item
+            class="text-error"
+            @click.stop="$emit('delete')"
+          >
+            <template #prepend>
+              <v-icon
+                size="small"
+                color="error"
+              >
+                mdi-delete
+              </v-icon>
+            </template>
+            <v-list-item-title>{{ tm('buttons.delete') }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-title>
 
-        <v-card-text>
-            <div class="system-prompt-preview">
-                {{ truncateText(persona.system_prompt, 100) }}
-            </div>
+    <v-card-text>
+      <div class="system-prompt-preview">
+        {{ truncateText(persona.system_prompt, 100) }}
+      </div>
 
-            <div class="mt-3 d-flex flex-wrap ga-1">
-                <v-chip v-if="persona.begin_dialogs && persona.begin_dialogs.length > 0" size="small" color="secondary"
-                    variant="tonal" prepend-icon="mdi-chat">
-                    {{ tm('labels.presetDialogs', { count: persona.begin_dialogs.length / 2 }) }}
-                </v-chip>
-                <v-chip v-if="persona.tools === null" size="small" color="success" variant="tonal"
-                    prepend-icon="mdi-tools">
-                    {{ tm('form.allToolsAvailable') }}
-                </v-chip>
-                <v-chip v-else-if="persona.tools && persona.tools.length > 0" size="small" color="primary" variant="tonal"
-                    prepend-icon="mdi-tools">
-                    {{ persona.tools.length }} {{ tm('persona.toolsCount') }}
-                </v-chip>
-                <v-chip v-if="persona.skills === null" size="small" color="success" variant="tonal"
-                    prepend-icon="mdi-lightning-bolt">
-                    {{ tm('form.allSkillsAvailable') }}
-                </v-chip>
-                <v-chip v-else-if="persona.skills && persona.skills.length > 0" size="small" color="primary"
-                    variant="tonal" prepend-icon="mdi-lightning-bolt">
-                    {{ persona.skills.length }} {{ tm('persona.skillsCount') }}
-                </v-chip>
-            </div>
+      <div class="mt-3 d-flex flex-wrap ga-1">
+        <v-chip
+          v-if="persona.begin_dialogs && persona.begin_dialogs.length > 0"
+          size="small"
+          color="secondary"
+          variant="tonal"
+          prepend-icon="mdi-chat"
+        >
+          {{ tm('labels.presetDialogs', { count: persona.begin_dialogs.length / 2 }) }}
+        </v-chip>
+        <v-chip
+          v-if="persona.tools === null"
+          size="small"
+          color="success"
+          variant="tonal"
+          prepend-icon="mdi-tools"
+        >
+          {{ tm('form.allToolsAvailable') }}
+        </v-chip>
+        <v-chip
+          v-else-if="persona.tools && persona.tools.length > 0"
+          size="small"
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-tools"
+        >
+          {{ persona.tools.length }} {{ tm('persona.toolsCount') }}
+        </v-chip>
+        <v-chip
+          v-if="persona.skills === null"
+          size="small"
+          color="success"
+          variant="tonal"
+          prepend-icon="mdi-lightning-bolt"
+        >
+          {{ tm('form.allSkillsAvailable') }}
+        </v-chip>
+        <v-chip
+          v-else-if="persona.skills && persona.skills.length > 0"
+          size="small"
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-lightning-bolt"
+        >
+          {{ persona.skills.length }} {{ tm('persona.skillsCount') }}
+        </v-chip>
+      </div>
 
-            <div class="mt-3 text-caption text-medium-emphasis">
-                {{ tm('labels.createdAt') }}: {{ formatDate(persona.created_at) }}
-            </div>
-        </v-card-text>
-    </v-card>
+      <div class="mt-3 text-caption text-medium-emphasis">
+        {{ tm('labels.createdAt') }}: {{ formatDate(persona.created_at) }}
+      </div>
+    </v-card-text>
+  </v-card>
 
-    <!-- Custom Drag Preview -->
-    <div ref="dragPreview" class="drag-preview">
-        <v-icon size="small" class="mr-2">mdi-account</v-icon>
-        <span class="text-subtitle-2">{{ persona.persona_id }}</span>
-    </div>
+  <!-- Custom Drag Preview -->
+  <div
+    ref="dragPreview"
+    class="drag-preview"
+  >
+    <v-icon
+      size="small"
+      class="mr-2"
+    >
+      mdi-account
+    </v-icon>
+    <span class="text-subtitle-2">{{ persona.persona_id }}</span>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/src/views/persona/PersonaManager.vue b/dashboard/src/views/persona/PersonaManager.vue
index 1761cf34f..d98f94dc0 100644
--- a/dashboard/src/views/persona/PersonaManager.vue
+++ b/dashboard/src/views/persona/PersonaManager.vue
@@ -1,294 +1,534 @@
 <template>
-    <div class="persona-manager">
-        <!-- 移动端顶部导航 -->
-        <div class="mobile-nav d-md-none mb-4">
-            <FolderBreadcrumb />
-        </div>
-
-        <div class="manager-layout">
-            <!-- 左侧边栏 - 仅桌面端显示 -->
-            <div class="sidebar d-none d-md-block">
-                <div class="sidebar-header d-flex justify-space-between align-center mb-3">
-                    <h3 class="text-h6">{{ tm('folder.sidebarTitle') }}</h3>
-                    <v-btn icon="mdi-folder-plus" variant="text" size="small" @click="showCreateFolderDialog = true"
-                        :title="tm('folder.createButton')" />
-                </div>
-                <FolderTree @move-folder="openMoveFolderDialog" @success="showSuccess" @error="showError"
-                    @persona-dropped="handlePersonaDropped" />
-            </div>
-
-            <!-- 主内容区 -->
-            <div class="main-content">
-                <!-- 顶部工具栏 -->
-                <div class="toolbar d-flex flex-wrap justify-space-between align-center mb-4 ga-2">
-                    <!-- 面包屑 - 仅桌面端显示 -->
-                    <div class="d-none d-md-block">
-                        <FolderBreadcrumb />
-                    </div>
-
-                    <!-- 操作按钮组 -->
-                    <div class="d-flex ga-2">
-                        <v-btn color="primary" variant="tonal" prepend-icon="mdi-plus" @click="openCreatePersonaDialog"
-                            rounded="lg">
-                            {{ tm('buttons.create') }}
-                        </v-btn>
-                        <v-btn variant="outlined" prepend-icon="mdi-folder-plus" @click="showCreateFolderDialog = true"
-                            rounded="lg">
-                            {{ tm('folder.createButton') }}
-                        </v-btn>
-                    </div>
-                </div>
-
-                <!-- 加载状态 - 只有加载超过阈值才显示骨架屏 -->
-                <v-fade-transition>
-                    <div v-if="showSkeleton" class="loading-container">
-                        <v-row>
-                            <v-col v-for="n in 6" :key="n" cols="12" sm="6" lg="4" xl="3">
-                                <v-skeleton-loader type="card" rounded="lg" />
-                            </v-col>
-                        </v-row>
-                    </div>
-                </v-fade-transition>
-
-                <!-- 内容区域 -->
-                <div v-if="!loading">
-                    <!-- 子文件夹区域 -->
-                    <div v-if="currentFolders.length > 0" class="folders-section mb-6">
-                        <h3 class="text-subtitle-1 font-weight-medium mb-3">
-                            <v-icon size="small" class="mr-1">mdi-folder</v-icon>
-                            {{ tm('folder.foldersTitle') }} ({{ currentFolders.length }})
-                        </h3>
-                        <v-row>
-                            <v-col v-for="folder in currentFolders" :key="folder.folder_id" cols="12" sm="6" lg="4"
-                                xl="3">
-                                <FolderCard :folder="folder" @click="navigateToFolder(folder.folder_id)"
-                                    @open="navigateToFolder(folder.folder_id)" @rename="openRenameFolderDialog(folder)"
-                                    @move="openMoveFolderDialog(folder)" @delete="confirmDeleteFolder(folder)"
-                                    @persona-dropped="handlePersonaDropped" />
-                            </v-col>
-                        </v-row>
-                    </div>
-
-                    <!-- Persona 区域 -->
-                    <div v-if="currentPersonas.length > 0" class="personas-section">
-                        <h3 class="text-subtitle-1 font-weight-medium mb-3">
-                            <v-icon size="small" class="mr-1">mdi-account-heart</v-icon>
-                            {{ tm('persona.personasTitle') }} ({{ currentPersonas.length }})
-                        </h3>
-                        <v-row>
-                            <v-col v-for="persona in currentPersonas" :key="persona.persona_id" cols="12" sm="6" lg="4"
-                                xl="3">
-                                <PersonaCard :persona="persona" @view="viewPersona(persona)"
-                                    @edit="editPersona(persona)" @clone="openClonePersonaDialog(persona)"
-                                    @move="openMovePersonaDialog(persona)"
-                                    @delete="confirmDeletePersona(persona)" />
-                            </v-col>
-                        </v-row>
-                    </div>
-
-                    <!-- 空状态 -->
-                    <div v-if="currentFolders.length === 0 && currentPersonas.length === 0" class="empty-state">
-                        <v-card class="text-center pa-8" elevation="0">
-                            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-folder-open-outline</v-icon>
-                            <h3 class="text-h5 mb-2">{{ tm('empty.folderEmpty') }}</h3>
-                            <p class="text-body-1 text-medium-emphasis mb-4">{{ tm('empty.folderEmptyDescription') }}</p>
-                            <div class="d-flex justify-center ga-2">
-                                <v-btn color="primary" variant="tonal" prepend-icon="mdi-plus"
-                                    @click="openCreatePersonaDialog">
-                                    {{ tm('buttons.create') }}
-                                </v-btn>
-                                <v-btn variant="outlined" prepend-icon="mdi-folder-plus"
-                                    @click="showCreateFolderDialog = true">
-                                    {{ tm('folder.createButton') }}
-                                </v-btn>
-                            </div>
-                        </v-card>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 创建/编辑 Persona 对话框 -->
-        <PersonaForm v-model="showPersonaDialog" :editing-persona="editingPersona ?? undefined"
-            :current-folder-id="currentFolderId ?? undefined" :current-folder-name="currentFolderName ?? undefined"
-            @saved="handlePersonaSaved" @deleted="handlePersonaDeleted" @error="showError" />
-
-        <!-- 查看 Persona 详情对话框 -->
-        <v-dialog v-model="showViewDialog" max-width="700px">
-            <v-card v-if="viewingPersona">
-                <v-card-title class="d-flex justify-space-between align-center">
-                    <span class="text-h5">{{ viewingPersona.persona_id }}</span>
-                    <div class="d-flex align-center ga-1">
-                        <v-btn
-                            color="primary"
-                            variant="tonal"
-                            size="small"
-                            prepend-icon="mdi-pencil"
-                            @click="openEditFromViewDialog"
-                        >
-                            {{ tm('buttons.edit') }}
-                        </v-btn>
-                        <v-btn icon="mdi-close" variant="text" @click="showViewDialog = false" />
-                    </div>
-                </v-card-title>
-
-                <v-card-text>
-                    <div class="mb-4">
-                        <h4 class="text-h6 mb-2">{{ tm('form.systemPrompt') }}</h4>
-                        <pre class="system-prompt-content">{{ viewingPersona.system_prompt }}</pre>
-                    </div>
-
-                    <div v-if="viewingPersona.custom_error_message" class="mb-4">
-                        <h4 class="text-h6 mb-2">{{ tm('form.customErrorMessage') }}</h4>
-                        <pre class="system-prompt-content">{{ viewingPersona.custom_error_message }}</pre>
-                    </div>
-
-                    <div v-if="viewingPersona.begin_dialogs && viewingPersona.begin_dialogs.length > 0" class="mb-4">
-                        <h4 class="text-h6 mb-2">{{ tm('form.presetDialogs') }}</h4>
-                        <div v-for="(dialog, index) in viewingPersona.begin_dialogs" :key="index" class="mb-2">
-                            <v-chip :color="index % 2 === 0 ? 'primary' : 'secondary'" variant="tonal" size="small"
-                                class="mb-1">
-                                {{ index % 2 === 0 ? tm('form.userMessage') : tm('form.assistantMessage') }}
-                            </v-chip>
-                            <div class="dialog-content ml-2">{{ dialog }}</div>
-                        </div>
-                    </div>
-
-                    <div class="mb-4">
-                        <h4 class="text-h6 mb-2">{{ tm('form.tools') }}</h4>
-                        <div v-if="viewingPersona.tools === null" class="text-body-2 text-medium-emphasis">
-                            <v-chip size="small" color="success" variant="tonal" prepend-icon="mdi-check-all">
-                                {{ tm('form.allToolsAvailable') }}
-                            </v-chip>
-                        </div>
-                        <div v-else-if="viewingPersona.tools && viewingPersona.tools.length > 0"
-                            class="d-flex flex-wrap ga-1">
-                            <v-chip v-for="toolName in viewingPersona.tools" :key="toolName" size="small"
-                                color="primary" variant="tonal">
-                                {{ toolName }}
-                            </v-chip>
-                        </div>
-                        <div v-else class="text-body-2 text-medium-emphasis">
-                            {{ tm('form.noToolsSelected') }}
-                        </div>
-                    </div>
-
-                    <div class="mb-4">
-                        <h4 class="text-h6 mb-2">{{ tm('form.skills') }}</h4>
-                        <div v-if="viewingPersona.skills === null" class="text-body-2 text-medium-emphasis">
-                            <v-chip size="small" color="success" variant="tonal" prepend-icon="mdi-check-all">
-                                {{ tm('form.allSkillsAvailable') }}
-                            </v-chip>
-                        </div>
-                        <div v-else-if="viewingPersona.skills && viewingPersona.skills.length > 0"
-                            class="d-flex flex-wrap ga-1">
-                            <v-chip v-for="skillName in viewingPersona.skills" :key="skillName" size="small"
-                                color="primary" variant="tonal">
-                                {{ skillName }}
-                            </v-chip>
-                        </div>
-                        <div v-else class="text-body-2 text-medium-emphasis">
-                            {{ tm('form.noSkillsSelected') }}
-                        </div>
-                    </div>
-
-                    <div class="text-caption text-medium-emphasis">
-                        <div>{{ tm('labels.createdAt') }}: {{ formatDate(viewingPersona.created_at) }}</div>
-                        <div v-if="viewingPersona.updated_at">{{ tm('labels.updatedAt') }}:
-                            {{ formatDate(viewingPersona.updated_at) }}</div>
-                    </div>
-                </v-card-text>
-            </v-card>
-        </v-dialog>
-
-        <!-- 创建文件夹对话框 -->
-        <CreateFolderDialog v-model="showCreateFolderDialog" :parent-folder-id="currentFolderId"
-            @created="showSuccess" @error="showError" />
-
-        <!-- 重命名文件夹对话框 -->
-        <v-dialog v-model="showRenameFolderDialog" max-width="400px">
-            <v-card>
-                <v-card-title>{{ tm('folder.renameDialog.title') }}</v-card-title>
-                <v-card-text>
-                    <v-text-field v-model="renameFolderData.name" :label="tm('folder.form.name')"
-                        :rules="[v => !!v || tm('folder.validation.nameRequired')]" variant="outlined"
-                        density="comfortable" autofocus @keyup.enter="submitRenameFolder" />
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn variant="text" @click="showRenameFolderDialog = false">
-                        {{ tm('buttons.cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" variant="flat" @click="submitRenameFolder" :loading="renameLoading"
-                        :disabled="!renameFolderData.name">
-                        {{ tm('buttons.save') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <!-- 移动对话框 -->
-        <MoveToFolderDialog v-model="showMoveDialog" :item-type="moveDialogType" :item="moveDialogItem"
-            @moved="showSuccess" @error="showError" />
-
-        <!-- 克隆人格对话框 -->
-        <v-dialog v-model="showCloneDialog" max-width="450px">
-            <v-card>
-                <v-card-title>{{ tm('cloneDialog.title') }}</v-card-title>
-                <v-card-text>
-                    <p class="text-body-2 text-medium-emphasis mb-4">
-                        {{ tm('cloneDialog.description', { name: cloningPersona?.persona_id ?? '' }) }}
-                    </p>
-                    <v-text-field v-model="cloneNewPersonaId" :label="tm('cloneDialog.newPersonaId')"
-                        :hint="tm('cloneDialog.newPersonaIdHint')" persistent-hint variant="outlined"
-                        density="comfortable" autofocus
-                        :rules="[v => !!v || tm('cloneDialog.validation.required')]"
-                        @keyup.enter="submitClonePersona" />
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn variant="text" @click="showCloneDialog = false">
-                        {{ tm('buttons.cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" variant="flat" @click="submitClonePersona" :loading="cloneLoading"
-                        :disabled="!cloneNewPersonaId">
-                        {{ tm('buttons.clone') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <!-- 删除文件夹确认对话框 -->
-        <v-dialog v-model="showDeleteFolderDialog" max-width="450px">
-            <v-card>
-                <v-card-title class="text-error">
-                    <v-icon class="mr-2" color="error">mdi-alert</v-icon>
-                    {{ tm('folder.deleteDialog.title') }}
-                </v-card-title>
-                <v-card-text>
-                    <p>{{ tm('folder.deleteDialog.message', { name: deleteFolderData?.name ?? '' }) }}</p>
-                    <p class="text-warning mt-2">
-                        <v-icon size="small" class="mr-1">mdi-information</v-icon>
-                        {{ tm('folder.deleteDialog.warning') }}
-                    </p>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn variant="text" @click="showDeleteFolderDialog = false">
-                        {{ tm('buttons.cancel') }}
-                    </v-btn>
-                    <v-btn color="error" variant="flat" @click="submitDeleteFolder" :loading="deleteLoading">
-                        {{ tm('buttons.delete') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <!-- 消息提示 -->
-        <v-snackbar :timeout="3000" elevation="24" :color="messageType" v-model="showMessage" location="top">
-            {{ message }}
-        </v-snackbar>
+  <div class="persona-manager">
+    <!-- 移动端顶部导航 -->
+    <div class="mobile-nav d-md-none mb-4">
+      <FolderBreadcrumb />
     </div>
+
+    <div class="manager-layout">
+      <!-- 左侧边栏 - 仅桌面端显示 -->
+      <div class="sidebar d-none d-md-block">
+        <div class="sidebar-header d-flex justify-space-between align-center mb-3">
+          <h3 class="text-h6">
+            {{ tm('folder.sidebarTitle') }}
+          </h3>
+          <v-btn
+            icon="mdi-folder-plus"
+            variant="text"
+            size="small"
+            :title="tm('folder.createButton')"
+            @click="showCreateFolderDialog = true"
+          />
+        </div>
+        <FolderTree
+          @move-folder="openMoveFolderDialog"
+          @success="showSuccess"
+          @error="showError"
+          @persona-dropped="handlePersonaDropped"
+        />
+      </div>
+
+      <!-- 主内容区 -->
+      <div class="main-content">
+        <!-- 顶部工具栏 -->
+        <div class="toolbar d-flex flex-wrap justify-space-between align-center mb-4 ga-2">
+          <!-- 面包屑 - 仅桌面端显示 -->
+          <div class="d-none d-md-block">
+            <FolderBreadcrumb />
+          </div>
+
+          <!-- 操作按钮组 -->
+          <div class="d-flex ga-2">
+            <v-btn
+              color="primary"
+              variant="tonal"
+              prepend-icon="mdi-plus"
+              rounded="lg"
+              @click="openCreatePersonaDialog"
+            >
+              {{ tm('buttons.create') }}
+            </v-btn>
+            <v-btn
+              variant="outlined"
+              prepend-icon="mdi-folder-plus"
+              rounded="lg"
+              @click="showCreateFolderDialog = true"
+            >
+              {{ tm('folder.createButton') }}
+            </v-btn>
+          </div>
+        </div>
+
+        <!-- 加载状态 - 只有加载超过阈值才显示骨架屏 -->
+        <v-fade-transition>
+          <div
+            v-if="showSkeleton"
+            class="loading-container"
+          >
+            <v-row>
+              <v-col
+                v-for="n in 6"
+                :key="n"
+                cols="12"
+                sm="6"
+                lg="4"
+                xl="3"
+              >
+                <v-skeleton-loader
+                  type="card"
+                  rounded="lg"
+                />
+              </v-col>
+            </v-row>
+          </div>
+        </v-fade-transition>
+
+        <!-- 内容区域 -->
+        <div v-if="!loading">
+          <!-- 子文件夹区域 -->
+          <div
+            v-if="currentFolders.length > 0"
+            class="folders-section mb-6"
+          >
+            <h3 class="text-subtitle-1 font-weight-medium mb-3">
+              <v-icon
+                size="small"
+                class="mr-1"
+              >
+                mdi-folder
+              </v-icon>
+              {{ tm('folder.foldersTitle') }} ({{ currentFolders.length }})
+            </h3>
+            <v-row>
+              <v-col
+                v-for="folder in currentFolders"
+                :key="folder.folder_id"
+                cols="12"
+                sm="6"
+                lg="4"
+                xl="3"
+              >
+                <FolderCard
+                  :folder="folder"
+                  @click="navigateToFolder(folder.folder_id)"
+                  @open="navigateToFolder(folder.folder_id)"
+                  @rename="openRenameFolderDialog(folder)"
+                  @move="openMoveFolderDialog(folder)"
+                  @delete="confirmDeleteFolder(folder)"
+                  @persona-dropped="handlePersonaDropped"
+                />
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- Persona 区域 -->
+          <div
+            v-if="currentPersonas.length > 0"
+            class="personas-section"
+          >
+            <h3 class="text-subtitle-1 font-weight-medium mb-3">
+              <v-icon
+                size="small"
+                class="mr-1"
+              >
+                mdi-account-heart
+              </v-icon>
+              {{ tm('persona.personasTitle') }} ({{ currentPersonas.length }})
+            </h3>
+            <v-row>
+              <v-col
+                v-for="persona in currentPersonas"
+                :key="persona.persona_id"
+                cols="12"
+                sm="6"
+                lg="4"
+                xl="3"
+              >
+                <PersonaCard
+                  :persona="persona"
+                  @view="viewPersona(persona)"
+                  @edit="editPersona(persona)"
+                  @clone="openClonePersonaDialog(persona)"
+                  @move="openMovePersonaDialog(persona)"
+                  @delete="confirmDeletePersona(persona)"
+                />
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- 空状态 -->
+          <div
+            v-if="currentFolders.length === 0 && currentPersonas.length === 0"
+            class="empty-state"
+          >
+            <v-card
+              class="text-center pa-8"
+              elevation="0"
+            >
+              <v-icon
+                size="64"
+                color="grey-lighten-1"
+                class="mb-4"
+              >
+                mdi-folder-open-outline
+              </v-icon>
+              <h3 class="text-h5 mb-2">
+                {{ tm('empty.folderEmpty') }}
+              </h3>
+              <p class="text-body-1 text-medium-emphasis mb-4">
+                {{ tm('empty.folderEmptyDescription') }}
+              </p>
+              <div class="d-flex justify-center ga-2">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  prepend-icon="mdi-plus"
+                  @click="openCreatePersonaDialog"
+                >
+                  {{ tm('buttons.create') }}
+                </v-btn>
+                <v-btn
+                  variant="outlined"
+                  prepend-icon="mdi-folder-plus"
+                  @click="showCreateFolderDialog = true"
+                >
+                  {{ tm('folder.createButton') }}
+                </v-btn>
+              </div>
+            </v-card>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 创建/编辑 Persona 对话框 -->
+    <PersonaForm
+      v-model="showPersonaDialog"
+      :editing-persona="editingPersona ?? undefined"
+      :current-folder-id="currentFolderId ?? undefined"
+      :current-folder-name="currentFolderName ?? undefined"
+      @saved="handlePersonaSaved"
+      @deleted="handlePersonaDeleted"
+      @error="showError"
+    />
+
+    <!-- 查看 Persona 详情对话框 -->
+    <v-dialog
+      v-model="showViewDialog"
+      max-width="700px"
+    >
+      <v-card v-if="viewingPersona">
+        <v-card-title class="d-flex justify-space-between align-center">
+          <span class="text-h5">{{ viewingPersona.persona_id }}</span>
+          <div class="d-flex align-center ga-1">
+            <v-btn
+              color="primary"
+              variant="tonal"
+              size="small"
+              prepend-icon="mdi-pencil"
+              @click="openEditFromViewDialog"
+            >
+              {{ tm('buttons.edit') }}
+            </v-btn>
+            <v-btn
+              icon="mdi-close"
+              variant="text"
+              @click="showViewDialog = false"
+            />
+          </div>
+        </v-card-title>
+
+        <v-card-text>
+          <div class="mb-4">
+            <h4 class="text-h6 mb-2">
+              {{ tm('form.systemPrompt') }}
+            </h4>
+            <pre class="system-prompt-content">{{ viewingPersona.system_prompt }}</pre>
+          </div>
+
+          <div
+            v-if="viewingPersona.custom_error_message"
+            class="mb-4"
+          >
+            <h4 class="text-h6 mb-2">
+              {{ tm('form.customErrorMessage') }}
+            </h4>
+            <pre class="system-prompt-content">{{ viewingPersona.custom_error_message }}</pre>
+          </div>
+
+          <div
+            v-if="viewingPersona.begin_dialogs && viewingPersona.begin_dialogs.length > 0"
+            class="mb-4"
+          >
+            <h4 class="text-h6 mb-2">
+              {{ tm('form.presetDialogs') }}
+            </h4>
+            <div
+              v-for="(dialog, index) in viewingPersona.begin_dialogs"
+              :key="index"
+              class="mb-2"
+            >
+              <v-chip
+                :color="index % 2 === 0 ? 'primary' : 'secondary'"
+                variant="tonal"
+                size="small"
+                class="mb-1"
+              >
+                {{ index % 2 === 0 ? tm('form.userMessage') : tm('form.assistantMessage') }}
+              </v-chip>
+              <div class="dialog-content ml-2">
+                {{ dialog }}
+              </div>
+            </div>
+          </div>
+
+          <div class="mb-4">
+            <h4 class="text-h6 mb-2">
+              {{ tm('form.tools') }}
+            </h4>
+            <div
+              v-if="viewingPersona.tools === null"
+              class="text-body-2 text-medium-emphasis"
+            >
+              <v-chip
+                size="small"
+                color="success"
+                variant="tonal"
+                prepend-icon="mdi-check-all"
+              >
+                {{ tm('form.allToolsAvailable') }}
+              </v-chip>
+            </div>
+            <div
+              v-else-if="viewingPersona.tools && viewingPersona.tools.length > 0"
+              class="d-flex flex-wrap ga-1"
+            >
+              <v-chip
+                v-for="toolName in viewingPersona.tools"
+                :key="toolName"
+                size="small"
+                color="primary"
+                variant="tonal"
+              >
+                {{ toolName }}
+              </v-chip>
+            </div>
+            <div
+              v-else
+              class="text-body-2 text-medium-emphasis"
+            >
+              {{ tm('form.noToolsSelected') }}
+            </div>
+          </div>
+
+          <div class="mb-4">
+            <h4 class="text-h6 mb-2">
+              {{ tm('form.skills') }}
+            </h4>
+            <div
+              v-if="viewingPersona.skills === null"
+              class="text-body-2 text-medium-emphasis"
+            >
+              <v-chip
+                size="small"
+                color="success"
+                variant="tonal"
+                prepend-icon="mdi-check-all"
+              >
+                {{ tm('form.allSkillsAvailable') }}
+              </v-chip>
+            </div>
+            <div
+              v-else-if="viewingPersona.skills && viewingPersona.skills.length > 0"
+              class="d-flex flex-wrap ga-1"
+            >
+              <v-chip
+                v-for="skillName in viewingPersona.skills"
+                :key="skillName"
+                size="small"
+                color="primary"
+                variant="tonal"
+              >
+                {{ skillName }}
+              </v-chip>
+            </div>
+            <div
+              v-else
+              class="text-body-2 text-medium-emphasis"
+            >
+              {{ tm('form.noSkillsSelected') }}
+            </div>
+          </div>
+
+          <div class="text-caption text-medium-emphasis">
+            <div>{{ tm('labels.createdAt') }}: {{ formatDate(viewingPersona.created_at) }}</div>
+            <div v-if="viewingPersona.updated_at">
+              {{ tm('labels.updatedAt') }}:
+              {{ formatDate(viewingPersona.updated_at) }}
+            </div>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <!-- 创建文件夹对话框 -->
+    <CreateFolderDialog
+      v-model="showCreateFolderDialog"
+      :parent-folder-id="currentFolderId"
+      @created="showSuccess"
+      @error="showError"
+    />
+
+    <!-- 重命名文件夹对话框 -->
+    <v-dialog
+      v-model="showRenameFolderDialog"
+      max-width="400px"
+    >
+      <v-card>
+        <v-card-title>{{ tm('folder.renameDialog.title') }}</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="renameFolderData.name"
+            :label="tm('folder.form.name')"
+            :rules="[v => !!v || tm('folder.validation.nameRequired')]"
+            variant="outlined"
+            density="comfortable"
+            autofocus
+            @keyup.enter="submitRenameFolder"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="showRenameFolderDialog = false"
+          >
+            {{ tm('buttons.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            :loading="renameLoading"
+            :disabled="!renameFolderData.name"
+            @click="submitRenameFolder"
+          >
+            {{ tm('buttons.save') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 移动对话框 -->
+    <MoveToFolderDialog
+      v-model="showMoveDialog"
+      :item-type="moveDialogType"
+      :item="moveDialogItem"
+      @moved="showSuccess"
+      @error="showError"
+    />
+
+    <!-- 克隆人格对话框 -->
+    <v-dialog
+      v-model="showCloneDialog"
+      max-width="450px"
+    >
+      <v-card>
+        <v-card-title>{{ tm('cloneDialog.title') }}</v-card-title>
+        <v-card-text>
+          <p class="text-body-2 text-medium-emphasis mb-4">
+            {{ tm('cloneDialog.description', { name: cloningPersona?.persona_id ?? '' }) }}
+          </p>
+          <v-text-field
+            v-model="cloneNewPersonaId"
+            :label="tm('cloneDialog.newPersonaId')"
+            :hint="tm('cloneDialog.newPersonaIdHint')"
+            persistent-hint
+            variant="outlined"
+            density="comfortable"
+            autofocus
+            :rules="[v => !!v || tm('cloneDialog.validation.required')]"
+            @keyup.enter="submitClonePersona"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="showCloneDialog = false"
+          >
+            {{ tm('buttons.cancel') }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            :loading="cloneLoading"
+            :disabled="!cloneNewPersonaId"
+            @click="submitClonePersona"
+          >
+            {{ tm('buttons.clone') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 删除文件夹确认对话框 -->
+    <v-dialog
+      v-model="showDeleteFolderDialog"
+      max-width="450px"
+    >
+      <v-card>
+        <v-card-title class="text-error">
+          <v-icon
+            class="mr-2"
+            color="error"
+          >
+            mdi-alert
+          </v-icon>
+          {{ tm('folder.deleteDialog.title') }}
+        </v-card-title>
+        <v-card-text>
+          <p>{{ tm('folder.deleteDialog.message', { name: deleteFolderData?.name ?? '' }) }}</p>
+          <p class="text-warning mt-2">
+            <v-icon
+              size="small"
+              class="mr-1"
+            >
+              mdi-information
+            </v-icon>
+            {{ tm('folder.deleteDialog.warning') }}
+          </p>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="showDeleteFolderDialog = false"
+          >
+            {{ tm('buttons.cancel') }}
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="flat"
+            :loading="deleteLoading"
+            @click="submitDeleteFolder"
+          >
+            {{ tm('buttons.delete') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 消息提示 -->
+    <v-snackbar
+      v-model="showMessage"
+      :timeout="3000"
+      elevation="24"
+      :color="messageType"
+      location="top"
+    >
+      {{ message }}
+    </v-snackbar>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/dashboard/tsconfig.eslint.json b/dashboard/tsconfig.eslint.json
new file mode 100644
index 000000000..d9f104590
--- /dev/null
+++ b/dashboard/tsconfig.eslint.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "composite": false,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*",
+    "src/**/*.vue",
+    "tests/**/*",
+    "scripts/**/*",
+    "env.d.ts",
+    "*.ts",
+    "*.tsx",
+    "*.mts",
+    "*.cts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "build",
+    "dashboard/dist",
+    "dashboard/node_modules"
+  ]
+}
diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
index 1548847fe..3f2c91a5a 100644
--- a/dashboard/vite.config.ts
+++ b/dashboard/vite.config.ts
@@ -3,14 +3,13 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vuetify from 'vite-plugin-vuetify';
 import webfontDl from 'vite-plugin-webfont-dl';
-// @ts-ignore — .mjs not in TS project scope; Vite resolves this at runtime
-import { runMdiSubset } from './scripts/subset-mdi-font.mjs';
 
 // Vite plugin: run MDI icon font subsetting (build only)
 function mdiSubset() {
   return {
     name: 'vite-plugin-mdi-subset',
     async buildStart() {
+      const { runMdiSubset } = await import('./scripts/subset-mdi-font.mjs');
       console.log('\n🔧 Running MDI icon font subsetting...');
       await runMdiSubset();
     },