From 2a21f8a57ecb5e4c6fe23ebc283196da29ad05cf Mon Sep 17 00:00:00 2001
From: deepinsect <deepinsect@github.com>
Date: Tue, 14 Oct 2025 16:25:35 +0800
Subject: [PATCH 1/4] feat(settings): ui optimize

---
 .../components/BuiltinKnowledgeSettings.vue   |  21 +-
 .../settings/components/CommonSettings.vue    |  22 +-
 .../settings/components/DataSettings.vue      | 185 +++++-----
 .../components/DifyKnowledgeSettings.vue      |  21 +-
 .../settings/components/DisplaySettings.vue   |   8 +-
 .../components/FastGptKnowledgeSettings.vue   |  21 +-
 .../components/KnowledgeBaseSettings.vue      | 147 +-------
 .../settings/components/McpBuiltinMarket.vue  |  28 +-
 .../settings/components/McpSettings.vue       | 328 +++++++-----------
 .../settings/components/PromptSetting.vue     | 189 +++++-----
 .../components/RagflowKnowledgeSettings.vue   |  21 +-
 .../settings/components/ShortcutSettings.vue  | 161 ++++-----
 .../mcp-config/components/McpServerCard.vue   |  77 ++--
 .../mcp-config/components/McpServers.vue      |   4 +-
 .../components/ui/textarea/Textarea.vue       |  18 +-
 15 files changed, 481 insertions(+), 770 deletions(-)

diff --git a/src/renderer/settings/components/BuiltinKnowledgeSettings.vue b/src/renderer/settings/components/BuiltinKnowledgeSettings.vue
index 65ef5c01b..9e22fd232 100644
--- a/src/renderer/settings/components/BuiltinKnowledgeSettings.vue
+++ b/src/renderer/settings/components/BuiltinKnowledgeSettings.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="border rounded-lg overflow-hidden">
-    <div class="flex items-center p-4 bg-muted">
+    <div
+      class="flex items-center p-4 hover:bg-accent cursor-default"
+      @click="toggleBuiltinConfigPanel"
+    >
       <div class="flex-1">
         <div class="flex items-center">
           <Icon icon="lucide:book-open" class="h-5 mr-2 text-primary" />
@@ -28,18 +31,10 @@
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex items-center gap-1"
-          @click="toggleBuiltinConfigPanel"
-        >
-          <Icon
-            :icon="isBuiltinConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-            class="w-4 h-4"
-          />
-          {{ isBuiltinConfigPanelOpen ? t('common.collapse') : t('common.expand') }}
-        </Button>
+        <Icon
+          :icon="isBuiltinConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+          class="w-4 h-4"
+        />
       </div>
     </div>
     <Collapsible v-model:open="isBuiltinConfigPanelOpen">
diff --git a/src/renderer/settings/components/CommonSettings.vue b/src/renderer/settings/components/CommonSettings.vue
index c6b3d47e5..7bbb9eec5 100644
--- a/src/renderer/settings/components/CommonSettings.vue
+++ b/src/renderer/settings/components/CommonSettings.vue
@@ -1,8 +1,8 @@
 <template>
-  <ScrollArea class="w-full h-full p-4">
-    <div class="w-full h-full flex flex-col gap-3">
+  <ScrollArea class="w-full h-full">
+    <div class="w-full h-full flex flex-col gap-3 p-4">
       <!-- 搜索引擎选择 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
@@ -59,7 +59,7 @@
       </div>
 
       <!-- 网页内容长度限制 -->
-      <div class="flex flex-row items-center gap-2 px-2 h-10">
+      <div class="flex flex-row items-center gap-2 h-10">
         <span class="flex flex-row items-center gap-2 grow w-full" :dir="langStore.dir">
           <Icon icon="lucide:globe" class="w-4 h-4 text-muted-foreground" />
           <span class="text-sm font-medium">{{ t('settings.common.webContentLengthLimit') }}</span>
@@ -114,7 +114,7 @@
       </div>
 
       <!-- 搜索助手模型选择 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
@@ -152,7 +152,7 @@
         </div>
       </div>
       <!-- 代理模式选择 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
@@ -173,7 +173,7 @@
           </Select>
         </div>
       </div>
-      <div v-if="selectedProxyMode === 'custom'" class="flex flex-col gap-2 px-2 h-10">
+      <div v-if="selectedProxyMode === 'custom'" class="flex flex-col gap-2 h-10">
         <div class="flex items-center gap-3">
           <span
             class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
@@ -197,7 +197,7 @@
         </div>
       </div>
       <!-- 搜索预览开关 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
@@ -215,7 +215,7 @@
       </div>
 
       <!-- 日志开关 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
@@ -233,7 +233,7 @@
       </div>
 
       <!-- 音效开关 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
@@ -251,7 +251,7 @@
       </div>
 
       <!-- 复制全部（含COT）开关 -->
-      <div class="flex items-center gap-3 px-2 h-10">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="langStore.dir"
diff --git a/src/renderer/settings/components/DataSettings.vue b/src/renderer/settings/components/DataSettings.vue
index cecf966b7..8d5bde41b 100644
--- a/src/renderer/settings/components/DataSettings.vue
+++ b/src/renderer/settings/components/DataSettings.vue
@@ -1,8 +1,8 @@
 <template>
-  <ScrollArea class="w-full h-full p-2">
-    <div class="w-full h-full flex flex-col gap-1.5">
+  <ScrollArea class="w-full h-full">
+    <div class="w-full h-full flex flex-col gap-1.5 p-4">
       <!-- 同步功能开关 -->
-      <div class="flex flex-row p-2 items-center gap-2 px-2">
+      <div class="flex flex-row items-center gap-2 h-10">
         <span class="flex flex-row items-center gap-2 grow w-full" :dir="languageStore.dir">
           <Icon icon="lucide:refresh-cw" class="w-4 h-4 text-muted-foreground" />
           <span class="text-sm font-medium">{{ t('settings.data.syncEnable') }}</span>
@@ -16,34 +16,32 @@
       </div>
 
       <!-- 同步文件夹设置 -->
-      <div class="flex flex-col p-2 gap-2 px-2">
-        <div class="flex flex-row items-center gap-2">
-          <span class="flex flex-row items-center gap-2 grow w-full" :dir="languageStore.dir">
-            <Icon icon="lucide:folder" class="w-4 h-4 text-muted-foreground" />
-            <span class="text-sm font-medium">{{ t('settings.data.syncFolder') }}</span>
-          </span>
-          <div class="shrink-0 w-96 flex gap-2">
-            <Input
-              v-model="syncFolderPath"
-              :disabled="!syncStore.syncEnabled"
-              class="cursor-pointer"
-              @click="syncStore.selectSyncFolder"
-            />
-            <Button
-              size="icon"
-              variant="outline"
-              :disabled="!syncStore.syncEnabled"
-              title="打开同步文件夹"
-              @click="syncStore.openSyncFolder"
-            >
-              <Icon icon="lucide:external-link" class="w-4 h-4" />
-            </Button>
-          </div>
+      <div class="flex flex-row items-center gap-2 h-10">
+        <span class="flex flex-row items-center gap-2 grow w-full" :dir="languageStore.dir">
+          <Icon icon="lucide:folder" class="w-4 h-4 text-muted-foreground" />
+          <span class="text-sm font-medium">{{ t('settings.data.syncFolder') }}</span>
+        </span>
+        <div class="shrink-0 w-96 flex gap-2">
+          <Input
+            v-model="syncFolderPath"
+            :disabled="!syncStore.syncEnabled"
+            class="cursor-pointer h-8!"
+            @click="syncStore.selectSyncFolder"
+          />
+          <Button
+            size="icon-sm"
+            variant="outline"
+            :disabled="!syncStore.syncEnabled"
+            title="打开同步文件夹"
+            @click="syncStore.openSyncFolder"
+          >
+            <Icon icon="lucide:external-link" class="w-4 h-4" />
+          </Button>
         </div>
       </div>
 
       <!-- 上次同步时间 -->
-      <div class="p-2 flex flex-row items-center gap-2" :dir="languageStore.dir">
+      <div class="flex flex-row items-center gap-2 h-10" :dir="languageStore.dir">
         <Icon icon="lucide:clock" class="w-4 h-4 text-muted-foreground" />
         <span class="text-sm font-medium">{{ t('settings.data.lastSyncTime') }}:</span>
         <span class="text-sm text-muted-foreground">
@@ -55,67 +53,67 @@
         </span>
       </div>
 
-      <!-- 手动备份 -->
-      <div
-        class="p-2 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
-        :class="{
-          'opacity-50 cursor-not-allowed': !syncStore.syncEnabled || syncStore.isBackingUp
-        }"
-        :dir="languageStore.dir"
-        @click="syncStore.startBackup"
-      >
-        <Icon icon="lucide:save" class="w-4 h-4 text-muted-foreground" />
-        <span class="text-sm font-medium">{{ t('settings.data.startBackup') }}</span>
-        <span v-if="syncStore.isBackingUp" class="text-xs text-muted-foreground ml-2">
-          ({{ t('settings.data.backingUp') }})
-        </span>
-      </div>
+      <div class="flex flex-row gap-2">
+        <Button
+          variant="outline"
+          @click="syncStore.startBackup"
+          :disabled="!syncStore.syncEnabled || syncStore.isBackingUp"
+          :dir="languageStore.dir"
+        >
+          <Icon icon="lucide:save" class="w-4 h-4 text-muted-foreground" />
+          <span class="text-sm font-medium">{{ t('settings.data.startBackup') }}</span>
+          <span v-if="syncStore.isBackingUp" class="text-xs text-muted-foreground ml-2">
+            ({{ t('settings.data.backingUp') }})
+          </span>
+        </Button>
 
-      <!-- 导入数据 -->
-      <Dialog v-model:open="isImportDialogOpen">
-        <DialogTrigger as-child>
-          <div
-            class="p-2 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
-            :class="{ 'opacity-50 cursor-not-allowed': !syncStore.syncEnabled }"
-            :dir="languageStore.dir"
-          >
-            <Icon icon="lucide:download" class="w-4 h-4 text-muted-foreground" />
-            <span class="text-sm font-medium">{{ t('settings.data.importData') }}</span>
-          </div>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{{ t('settings.data.importConfirmTitle') }}</DialogTitle>
-            <DialogDescription>
-              {{ t('settings.data.importConfirmDescription') }}
-            </DialogDescription>
-          </DialogHeader>
-          <div class="p-4">
-            <RadioGroup v-model="importMode" class="flex flex-col gap-2">
-              <div class="flex items-center space-x-2">
-                <RadioGroupItem value="increment" />
-                <Label>{{ t('settings.data.incrementImport') }}</Label>
-              </div>
-              <div class="flex items-center space-x-2">
-                <RadioGroupItem value="overwrite" />
-                <Label>{{ t('settings.data.overwriteImport') }}</Label>
-              </div>
-            </RadioGroup>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" @click="closeImportDialog">
-              {{ t('dialog.cancel') }}
-            </Button>
-            <Button variant="default" :disabled="syncStore.isImporting" @click="handleImport">
-              {{
-                syncStore.isImporting
-                  ? t('settings.data.importing')
-                  : t('settings.data.confirmImport')
-              }}
+        <!-- 导入数据 -->
+        <Dialog v-model:open="isImportDialogOpen">
+          <DialogTrigger as-child>
+            <Button
+              variant="outline"
+              @click="syncStore.startBackup"
+              :disabled="!syncStore.syncEnabled"
+              :dir="languageStore.dir"
+            >
+              <Icon icon="lucide:download" class="w-4 h-4 text-muted-foreground" />
+              <span class="text-sm font-medium">{{ t('settings.data.importData') }}</span>
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{{ t('settings.data.importConfirmTitle') }}</DialogTitle>
+              <DialogDescription>
+                {{ t('settings.data.importConfirmDescription') }}
+              </DialogDescription>
+            </DialogHeader>
+            <div class="p-4">
+              <RadioGroup v-model="importMode" class="flex flex-col gap-2">
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem value="increment" />
+                  <Label>{{ t('settings.data.incrementImport') }}</Label>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem value="overwrite" />
+                  <Label>{{ t('settings.data.overwriteImport') }}</Label>
+                </div>
+              </RadioGroup>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" @click="closeImportDialog">
+                {{ t('dialog.cancel') }}
+              </Button>
+              <Button variant="default" :disabled="syncStore.isImporting" @click="handleImport">
+                {{
+                  syncStore.isImporting
+                    ? t('settings.data.importing')
+                    : t('settings.data.confirmImport')
+                }}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
 
       <!-- 分割线 -->
       <Separator class="my-4" />
@@ -123,15 +121,16 @@
       <!-- 数据重置选项 -->
       <AlertDialog v-model:open="isResetDialogOpen">
         <AlertDialogTrigger as-child>
-          <div
-            class="p-2 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
+          <Button
+            variant="destructive"
+            class="w-48"
+            @click="syncStore.startBackup"
+            :disabled="!syncStore.syncEnabled || syncStore.isBackingUp"
             :dir="languageStore.dir"
           >
-            <Icon icon="lucide:rotate-ccw" class="w-4 h-4 text-destructive" />
-            <span class="text-sm font-medium text-destructive">{{
-              t('settings.data.resetData')
-            }}</span>
-          </div>
+            <Icon icon="lucide:rotate-ccw" class="w-4 h-4" />
+            <span class="text-sm font-medium">{{ t('settings.data.resetData') }}</span>
+          </Button>
         </AlertDialogTrigger>
         <AlertDialogContent>
           <AlertDialogHeader>
diff --git a/src/renderer/settings/components/DifyKnowledgeSettings.vue b/src/renderer/settings/components/DifyKnowledgeSettings.vue
index f7d67e5bc..02f2bca4c 100644
--- a/src/renderer/settings/components/DifyKnowledgeSettings.vue
+++ b/src/renderer/settings/components/DifyKnowledgeSettings.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="border rounded-lg overflow-hidden">
-    <div class="flex items-center p-4 bg-muted">
+    <div
+      class="flex items-center p-4 hover:bg-accent cursor-default"
+      @click="toggleDifyConfigPanel"
+    >
       <div class="flex-1">
         <div class="flex items-center">
           <img src="@/assets/images/dify.png" class="h-5 mr-2" />
@@ -26,18 +29,10 @@
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex items-center gap-1"
-          @click="toggleDifyConfigPanel"
-        >
-          <Icon
-            :icon="isDifyConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-            class="w-4 h-4"
-          />
-          {{ isDifyConfigPanelOpen ? t('common.collapse') : t('common.expand') }}
-        </Button>
+        <Icon
+          :icon="isDifyConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+          class="w-4 h-4"
+        />
       </div>
     </div>
 
diff --git a/src/renderer/settings/components/DisplaySettings.vue b/src/renderer/settings/components/DisplaySettings.vue
index f120eea8f..cdea6c001 100644
--- a/src/renderer/settings/components/DisplaySettings.vue
+++ b/src/renderer/settings/components/DisplaySettings.vue
@@ -1,8 +1,8 @@
 <template>
-  <ScrollArea class="w-full h-full p-4">
-    <div class="w-full h-full flex flex-col gap-1.5">
+  <ScrollArea class="w-full h-full">
+    <div class="w-full h-full flex flex-col gap-1.5 p-4">
       <!-- 语言选择 -->
-      <div class="flex items-center gap-3 px-2 py-2">
+      <div class="flex items-center gap-3 h-10">
         <span
           class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
           :dir="languageStore.dir"
@@ -12,7 +12,7 @@
         </span>
         <div class="ml-auto w-auto">
           <Select v-model="selectedLanguage">
-            <SelectTrigger>
+            <SelectTrigger class="h-8!">
               <SelectValue :placeholder="t('settings.common.languageSelect')" />
             </SelectTrigger>
             <SelectContent>
diff --git a/src/renderer/settings/components/FastGptKnowledgeSettings.vue b/src/renderer/settings/components/FastGptKnowledgeSettings.vue
index 194d85bac..814fb8a8e 100644
--- a/src/renderer/settings/components/FastGptKnowledgeSettings.vue
+++ b/src/renderer/settings/components/FastGptKnowledgeSettings.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="border rounded-lg overflow-hidden">
-    <div class="flex items-center p-4 bg-muted">
+    <div
+      class="flex items-center p-4 hover:bg-accent cursor-default"
+      @click="toggleFastGptConfigPanel"
+    >
       <div class="flex-1">
         <div class="flex items-center">
           <img src="@/assets/images/fastgpt.png" class="h-5 mr-2" />
@@ -26,18 +29,10 @@
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex items-center gap-1"
-          @click="toggleFastGptConfigPanel"
-        >
-          <Icon
-            :icon="isFastGptConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-            class="w-4 h-4"
-          />
-          {{ isFastGptConfigPanelOpen ? t('common.collapse') : t('common.expand') }}
-        </Button>
+        <Icon
+          :icon="isFastGptConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+          class="w-4 h-4"
+        />
       </div>
     </div>
 
diff --git a/src/renderer/settings/components/KnowledgeBaseSettings.vue b/src/renderer/settings/components/KnowledgeBaseSettings.vue
index ed5ef29c0..cdbdad974 100644
--- a/src/renderer/settings/components/KnowledgeBaseSettings.vue
+++ b/src/renderer/settings/components/KnowledgeBaseSettings.vue
@@ -1,27 +1,13 @@
 <template>
-  <ScrollArea class="w-full h-full p-2">
-    <div v-show="!showBuiltinKnowledgeDetail" class="w-full h-full flex flex-col gap-1.5">
+  <ScrollArea class="w-full h-full p-4">
+    <div v-show="!showBuiltinKnowledgeDetail" class="w-full h-full flex flex-col gap-4">
       <!-- 知识库配置标题 -->
-      <div class="flex flex-row p-2 items-center gap-2 px-2">
-        <span class="flex flex-row items-center gap-2 grow w-full">
-          <Icon icon="lucide:book-marked" class="w-4 h-4 text-muted-foreground" />
-          <span class="text-sm font-medium">{{ t('settings.knowledgeBase.title') }}</span>
-        </span>
-        <div class="shrink-0">
-          <Button
-            variant="outline"
-            size="sm"
-            class="flex items-center gap-1"
-            @click="openAddKnowledgeBaseDialog"
-          >
-            <Icon icon="lucide:plus" class="w-4 h-4" />
-            {{ t('settings.knowledgeBase.addKnowledgeBase') }}
-          </Button>
-        </div>
+      <div class="flex flex-row items-center gap-2">
+        <span class="font-medium flex-1">{{ t('settings.knowledgeBase.title') }}</span>
       </div>
 
       <!-- 知识库列表 -->
-      <div class="space-y-4 px-2 pb-4">
+      <div class="space-y-4">
         <!-- RAGFlow知识库 -->
         <RagflowKnowledgeSettings ref="ragflowSettingsRef" />
         <!-- Dify知识库 -->
@@ -34,82 +20,7 @@
           ref="builtinSettingsRef"
           @showDetail="showDetail"
         />
-        <!-- 未来可以添加更多知识库类型 -->
-        <div
-          class="border rounded-lg p-4 border-dashed flex items-center justify-center text-muted-foreground"
-        >
-          <span class="text-sm">{{ t('settings.knowledgeBase.moreComingSoon') }}</span>
-        </div>
       </div>
-
-      <!-- 添加知识库对话框 -->
-      <Dialog v-model:open="isAddKnowledgeBaseDialogOpen">
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{{ t('settings.knowledgeBase.addKnowledgeBase') }}</DialogTitle>
-            <DialogDescription>
-              {{ t('settings.knowledgeBase.selectKnowledgeBaseType') }}
-            </DialogDescription>
-          </DialogHeader>
-          <div class="grid gap-4 py-4">
-            <div
-              class="flex items-center p-3 border rounded-md cursor-pointer hover:bg-accent"
-              @click="selectKnowledgeBaseType('dify')"
-            >
-              <img src="@/assets/images/dify.png" class="h-5 mr-3" />
-              <div class="flex-1">
-                <h3 class="text-sm font-medium">{{ t('settings.knowledgeBase.dify') }}</h3>
-                <p class="text-xs text-muted-foreground">
-                  {{ t('settings.knowledgeBase.difyDescription') }}
-                </p>
-              </div>
-            </div>
-            <div
-              class="flex items-center p-3 border rounded-md cursor-pointer hover:bg-accent"
-              @click="selectKnowledgeBaseType('ragflow')"
-            >
-              <img src="@/assets/images/ragflow.png" class="h-5 mr-3" />
-              <div class="flex-1">
-                <h3 class="text-sm font-medium">{{ t('settings.knowledgeBase.ragflowTitle') }}</h3>
-                <p class="text-xs text-muted-foreground">
-                  {{ t('settings.knowledgeBase.ragflowDescription') }}
-                </p>
-              </div>
-            </div>
-            <div
-              class="flex items-center p-3 border rounded-md cursor-pointer hover:bg-accent"
-              @click="selectKnowledgeBaseType('fastgpt')"
-            >
-              <img src="@/assets/images/fastgpt.png" class="h-5 mr-3" />
-              <div class="flex-1">
-                <h3 class="text-sm font-medium">{{ t('settings.knowledgeBase.fastgptTitle') }}</h3>
-                <p class="text-xs text-muted-foreground">
-                  {{ t('settings.knowledgeBase.fastgptDescription') }}
-                </p>
-              </div>
-            </div>
-            <div
-              class="flex items-center p-3 border rounded-md cursor-pointer hover:bg-accent"
-              @click="selectKnowledgeBaseType('builtinKnowledge')"
-            >
-              <Icon icon="lucide:book-open" class="h-5 mr-3 text-primary" />
-              <div class="flex-1">
-                <h3 class="text-sm font-medium">
-                  {{ t('settings.knowledgeBase.builtInKnowledgeTitle') }}
-                </h3>
-                <p class="text-xs text-muted-foreground">
-                  {{ t('settings.knowledgeBase.builtInKnowledgeDescription') }}
-                </p>
-              </div>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" @click="closeAddKnowledgeBaseDialog">{{
-              t('common.cancel')
-            }}</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
     <div v-if="showBuiltinKnowledgeDetail">
       <KnowledgeFile
@@ -124,17 +35,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Icon } from '@iconify/vue'
 import { ScrollArea } from '@shadcn/components/ui/scroll-area'
-import { Button } from '@shadcn/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription
-} from '@shadcn/components/ui/dialog'
 import RagflowKnowledgeSettings from './RagflowKnowledgeSettings.vue'
 import DifyKnowledgeSettings from './DifyKnowledgeSettings.vue'
 import FastGptKnowledgeSettings from './FastGptKnowledgeSettings.vue'
@@ -163,42 +64,4 @@ const showDetail = (detail: BuiltinKnowledgeConfig) => {
   showBuiltinKnowledgeDetail.value = true
   builtinKnowledgeDetail.value = detail
 }
-
-// 对话框状态
-const isAddKnowledgeBaseDialogOpen = ref(false)
-
-// 打开添加知识库对话框
-const openAddKnowledgeBaseDialog = () => {
-  isAddKnowledgeBaseDialogOpen.value = true
-}
-
-// 关闭添加知识库对话框
-const closeAddKnowledgeBaseDialog = () => {
-  isAddKnowledgeBaseDialogOpen.value = false
-}
-
-// 选择知识库类型
-const selectKnowledgeBaseType = (type: string) => {
-  closeAddKnowledgeBaseDialog()
-  if (type === 'builtinKnowledge') {
-    if (builtinSettingsRef.value) {
-      builtinSettingsRef.value.openAddConfig()
-    }
-  }
-  if (type === 'dify') {
-    if (difySettingsRef.value) {
-      difySettingsRef.value.openAddConfig()
-    }
-  }
-  if (type === 'ragflow') {
-    if (ragflowSettingsRef.value) {
-      ragflowSettingsRef.value.openAddConfig()
-    }
-  }
-  if (type === 'fastgpt') {
-    if (fastGptSettingsRef.value) {
-      fastGptSettingsRef.value.openAddConfig()
-    }
-  }
-}
 </script>
diff --git a/src/renderer/settings/components/McpBuiltinMarket.vue b/src/renderer/settings/components/McpBuiltinMarket.vue
index 32bf2ad60..42767cf99 100644
--- a/src/renderer/settings/components/McpBuiltinMarket.vue
+++ b/src/renderer/settings/components/McpBuiltinMarket.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="w-full h-full flex flex-col">
-    <div class="p-4 border-b bg-card sticky top-0 z-10 flex items-center gap-2">
-      <Icon icon="lucide:shopping-bag" class="w-4 h-4" />
-      <h3 class="text-sm font-medium">{{ t('mcp.market.builtinTitle') }}</h3>
-      <a
-        href="https://mcprouter.co/"
-        target="_blank"
-        class="text-xs text-muted-foreground hover:text-foreground transition-colors"
-      >
-        {{ t('mcp.market.poweredBy') }}
-      </a>
+    <div class="p-4 sticky top-0 z-10 flex items-center gap-2">
+      <div class="flex flex-col">
+        <div class="font-medium">{{ t('mcp.market.builtinTitle') }}</div>
+        <a
+          href="https://mcprouter.co/"
+          target="_blank"
+          class="text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {{ t('mcp.market.poweredBy') }}
+        </a>
+      </div>
+
       <div class="ml-auto flex items-center gap-2">
         <div class="flex items-center gap-2">
           <Input
@@ -24,7 +26,7 @@
     </div>
 
     <!-- API Key 获取提示 -->
-    <div class="px-4 py-2 bg-muted/30 border-b text-xs text-muted-foreground">
+    <div class="px-4 text-xs text-muted-foreground">
       {{ t('mcp.market.keyHelpText') }}
       <Button
         variant="link"
@@ -35,6 +37,7 @@
         {{ t('mcp.market.keyGuide') }}
       </Button>
       {{ t('mcp.market.keyHelpEnd') }}
+      <Separator class="mt-4" />
     </div>
 
     <div class="flex-1 overflow-auto" ref="scrollContainer" @scroll="onScroll">
@@ -66,7 +69,7 @@
             >
             <Button
               size="sm"
-              :variant="installedServers.has(item.server_key) ? 'secondary' : 'default'"
+              :variant="installedServers.has(item.server_key) ? 'secondary' : 'outline'"
               :disabled="installedServers.has(item.server_key)"
               @click="install(item)"
               :title="
@@ -121,6 +124,7 @@ import { Button } from '@shadcn/components/ui/button'
 import { Input } from '@shadcn/components/ui/input'
 import { usePresenter } from '@/composables/usePresenter'
 import { useToast } from '@/components/use-toast'
+import { Separator } from '@shadcn/components/ui/separator'
 
 const { t } = useI18n()
 const { toast } = useToast()
diff --git a/src/renderer/settings/components/McpSettings.vue b/src/renderer/settings/components/McpSettings.vue
index 3386c5b86..7b55e2536 100644
--- a/src/renderer/settings/components/McpSettings.vue
+++ b/src/renderer/settings/components/McpSettings.vue
@@ -1,198 +1,144 @@
 <template>
   <div class="w-full h-full flex flex-col">
-    <!-- 固定部分 -->
-    <div class="shrink-0 bg-card sticky top-0 z-10">
-      <!-- NPM源配置区域 -->
-      <div class="border-b bg-card">
-        <div class="p-4">
-          <h4 class="text-sm font-medium mb-3">{{ t('settings.mcp.npmRegistry.title') }}</h4>
-          <div class="space-y-3">
-            <!-- 当前源状态 -->
+    <!-- MCP 总开关 - 卡片样式 -->
+    <div class="shrink-0 px-4 pt-4">
+      <div class="flex items-center justify-between">
+        <div :dir="languageStore.dir" class="flex-1">
+          <div class="font-medium">
+            {{ t('settings.mcp.enabledTitle') }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            {{ t('settings.mcp.enabledDescription') }}
+          </p>
+        </div>
+        <Switch
+          dir="ltr"
+          :model-value="mcpEnabled"
+          @update:model-value="handleMcpEnabledChange"
+          class="scale-125"
+        />
+      </div>
+      <!-- NPM 源折叠区域 -->
+      <Collapsible v-model:open="npmSourceExpanded" class="mt-3">
+        <CollapsibleTrigger as-child>
+          <Button variant="ghost" size="sm" class="w-full text-xs h-8 px-2">
+            <Icon
+              :icon="npmSourceExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+              class="w-3 h-3 text-muted-foreground"
+            />
+            <span class="text-muted-foreground flex items-center gap-1">
+              {{ t('settings.mcp.npmRegistry.advancedSettings') }}
+            </span>
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent class="mt-2">
+          <div class="border rounded-lg bg-card/50 p-3 space-y-3">
+            <div class="flex items-center justify-between">
+              <span class="text-xs font-medium">{{ t('settings.mcp.npmRegistry.title') }}</span>
+            </div>
+
+            <!-- 当前源 -->
             <div class="flex items-center justify-between text-xs">
-              <span class="text-muted-foreground"
-                >{{ t('settings.mcp.npmRegistry.currentSource') }}:</span
-              >
+              <span class="text-muted-foreground">{{
+                t('settings.mcp.npmRegistry.currentSource')
+              }}</span>
               <div class="flex items-center gap-2">
-                <span class="font-mono">{{ npmRegistryStatus.currentRegistry || 'Default' }}</span>
-                <Badge v-if="npmRegistryStatus.isFromCache" variant="secondary" class="text-xs">
-                  {{ t('settings.mcp.npmRegistry.cached') }}
-                </Badge>
+                <span class="font-mono text-xs">{{
+                  npmRegistryStatus.currentRegistry || 'Default'
+                }}</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  :disabled="refreshing"
+                  @click="refreshNpmRegistry"
+                  class="h-6 w-6 p-0"
+                >
+                  <Icon
+                    :icon="refreshing ? 'lucide:loader-2' : 'lucide:refresh-cw'"
+                    :class="['w-3 h-3', refreshing && 'animate-spin']"
+                  />
+                </Button>
               </div>
             </div>
 
-            <!-- 上次检测时间 -->
-            <div
-              v-if="npmRegistryStatus.lastChecked"
-              class="flex items-center justify-between text-xs"
-            >
-              <span class="text-muted-foreground"
-                >{{ t('settings.mcp.npmRegistry.lastChecked') }}:</span
-              >
-              <span>{{ formatLastChecked(npmRegistryStatus.lastChecked) }}</span>
+            <!-- 自动检测 -->
+            <div class="flex items-center justify-between">
+              <span class="text-xs text-muted-foreground">{{
+                t('settings.mcp.npmRegistry.autoDetect')
+              }}</span>
+              <Switch
+                :model-value="npmRegistryStatus.autoDetectEnabled"
+                @update:model-value="setAutoDetectNpmRegistry"
+              />
             </div>
 
-            <!-- 控制按钮 -->
-            <div class="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                :disabled="refreshing"
-                @click="refreshNpmRegistry"
-                class="text-xs h-7"
-              >
-                <Icon
-                  :icon="refreshing ? 'lucide:loader-2' : 'lucide:refresh-cw'"
-                  :class="['w-3 h-3 mr-1', refreshing && 'animate-spin']"
-                />
-                {{ t('settings.mcp.npmRegistry.refresh') }}
-              </Button>
-
-              <!-- 高级设置弹窗 -->
-              <Dialog v-model:open="advancedDialogOpen">
+            <!-- 自定义源 -->
+            <div class="space-y-2">
+              <Dialog v-model:open="customSourceDialogOpen">
                 <DialogTrigger asChild>
-                  <Button variant="ghost" size="sm" class="text-xs h-7">
-                    <Icon icon="lucide:settings" class="w-3 h-3 mr-1" />
-                    {{ t('settings.mcp.npmRegistry.advanced') }}
+                  <Button variant="outline" size="sm" class="w-full h-7 text-xs">
+                    <Icon icon="lucide:link" class="w-3 h-3 mr-1" />
+                    {{ t('settings.mcp.npmRegistry.customSource') }}
                   </Button>
                 </DialogTrigger>
                 <DialogContent class="sm:max-w-md">
                   <DialogHeader>
-                    <DialogTitle>{{ t('settings.mcp.npmRegistry.advancedSettings') }}</DialogTitle>
+                    <DialogTitle>{{ t('settings.mcp.npmRegistry.customSource') }}</DialogTitle>
                     <DialogDescription>
-                      {{ t('settings.mcp.npmRegistry.advancedSettingsDesc') }}
+                      {{ t('settings.mcp.npmRegistry.customSourcePlaceholder') }}
                     </DialogDescription>
                   </DialogHeader>
 
                   <div class="space-y-4">
-                    <!-- 自动检测开关 -->
-                    <div class="flex items-center justify-between">
-                      <div class="space-y-1">
-                        <div class="text-sm font-medium">
-                          {{ t('settings.mcp.npmRegistry.autoDetect') }}
-                        </div>
-                        <div class="text-xs text-muted-foreground">
-                          {{ t('settings.mcp.npmRegistry.autoDetectDesc') }}
-                        </div>
-                      </div>
-                      <Switch
-                        :model-value="npmRegistryStatus.autoDetectEnabled"
-                        @update:model-value="setAutoDetectNpmRegistry"
-                      />
+                    <Input
+                      v-model="customRegistryInput"
+                      :placeholder="t('settings.mcp.npmRegistry.customSourcePlaceholder')"
+                      class="font-mono"
+                    />
+                    <div
+                      v-if="npmRegistryStatus.customRegistry"
+                      class="text-xs text-muted-foreground"
+                    >
+                      {{ t('settings.mcp.npmRegistry.currentCustom') }}:
+                      {{ npmRegistryStatus.customRegistry }}
                     </div>
-
-                    <!-- 自定义源输入 -->
-                    <div class="space-y-2">
-                      <label class="text-sm font-medium">{{
-                        t('settings.mcp.npmRegistry.customSource')
-                      }}</label>
-                      <div class="space-y-2">
-                        <Input
-                          v-model="customRegistryInput"
-                          :placeholder="t('settings.mcp.npmRegistry.customSourcePlaceholder')"
-                          class="font-mono"
-                        />
-                        <div class="flex gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            @click="saveCustomNpmRegistry"
-                            :disabled="
-                              !customRegistryInput.trim() ||
-                              customRegistryInput.trim() === npmRegistryStatus.customRegistry
-                            "
-                            class="flex-1"
-                          >
-                            {{ t('common.save') }}
-                          </Button>
-                          <Button
-                            v-if="npmRegistryStatus.customRegistry"
-                            variant="outline"
-                            size="sm"
-                            @click="clearCustomNpmRegistry"
-                            class="flex-1"
-                          >
-                            {{ t('common.clear') }}
-                          </Button>
-                        </div>
-                        <div
-                          v-if="npmRegistryStatus.customRegistry"
-                          class="text-xs text-muted-foreground"
-                        >
-                          {{ t('settings.mcp.npmRegistry.currentCustom') }}:
-                          {{ npmRegistryStatus.customRegistry }}
-                        </div>
-                      </div>
+                    <div class="flex gap-2">
+                      <Button
+                        variant="outline"
+                        @click="saveCustomNpmRegistry"
+                        :disabled="
+                          !customRegistryInput.trim() ||
+                          customRegistryInput.trim() === npmRegistryStatus.customRegistry
+                        "
+                        class="flex-1"
+                      >
+                        {{ t('common.save') }}
+                      </Button>
+                      <Button
+                        v-if="npmRegistryStatus.customRegistry"
+                        variant="outline"
+                        @click="clearCustomNpmRegistry"
+                        class="flex-1"
+                      >
+                        {{ t('common.clear') }}
+                      </Button>
                     </div>
                   </div>
                 </DialogContent>
               </Dialog>
             </div>
           </div>
-        </div>
-      </div>
-
-      <!-- MCP全局开关 -->
-      <div class="p-4 shrink-0">
-        <div class="flex items-center justify-between">
-          <div :dir="languageStore.dir">
-            <h3 class="text-sm font-medium">{{ t('settings.mcp.enabledTitle') }}</h3>
-            <p class="text-xs text-muted-foreground mt-1">
-              {{ t('settings.mcp.enabledDescription') }}
-            </p>
-          </div>
-          <Switch
-            dir="ltr"
-            :model-value="mcpEnabled"
-            @update:model-value="handleMcpEnabledChange"
-          />
-        </div>
-      </div>
-
-      <!-- MCP Marketplace 入口 -->
-      <div class="px-4 pb-4 shrink-0">
-        <div class="flex gap-2">
-          <Button
-            v-if="false"
-            variant="outline"
-            class="flex-1 flex items-center justify-center gap-2"
-            @click="openMcpMarketplace"
-          >
-            <Icon icon="lucide:shopping-bag" class="w-4 h-4" />
-            <span>{{ t('settings.mcp.marketplace') }}</span>
-            <Icon icon="lucide:external-link" class="w-3.5 h-3.5 text-muted-foreground" />
-          </Button>
-
-          <!-- Higress MCP Marketplace 入口 -->
-          <Button
-            variant="outline"
-            class="flex-1 flex items-center justify-center gap-2"
-            @click="openHigressMcpMarketplace"
-          >
-            <img src="@/assets/mcp-icons/higress.avif" class="w-4 h-4" />
-            <span>{{ $t('settings.mcp.higressMarket') }}</span>
-            <Icon icon="lucide:external-link" class="w-3.5 h-3.5 text-muted-foreground" />
-          </Button>
-
-          <Button
-            variant="outline"
-            class="flex-1 flex items-center justify-center gap-2"
-            @click="openBuiltinMarket"
-          >
-            <Icon icon="lucide:gallery-vertical-end" class="w-4 h-4" />
-            <span>{{ t('mcp.market.browseBuiltin') }}</span>
-            <Icon icon="lucide:arrow-right" class="w-3.5 h-3.5 text-muted-foreground" />
-          </Button>
-        </div>
-      </div>
+        </CollapsibleContent>
+      </Collapsible>
+      <Separator class="mt-2" />
     </div>
 
-    <!-- 可滚动部分 -->
-    <!-- MCP配置 -->
-    <div class="grow overflow-y-auto">
-      <div v-if="mcpEnabled" class="border-t h-full">
+    <!-- 服务器列表 -->
+    <div class="flex-1 overflow-y-auto">
+      <div v-if="mcpEnabled" class="h-full">
         <McpServers />
       </div>
-      <div v-else class="p-4 text-center text-muted-foreground text-sm">
+      <div v-else class="p-8 text-center text-muted-foreground text-sm">
         {{ t('settings.mcp.enableToAccess') }}
       </div>
     </div>
@@ -206,8 +152,13 @@ import McpServers from '@/components/mcp-config/components/McpServers.vue'
 import { Switch } from '@shadcn/components/ui/switch'
 import { Button } from '@shadcn/components/ui/button'
 import { Input } from '@shadcn/components/ui/input'
-import { Badge } from '@shadcn/components/ui/badge'
 import { Icon } from '@iconify/vue'
+import { Separator } from '@shadcn/components/ui/separator'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@shadcn/components/ui/collapsible'
 import {
   Dialog,
   DialogContent,
@@ -219,15 +170,9 @@ import {
 import { useMcpStore } from '@/stores/mcp'
 import { useLanguageStore } from '@/stores/language'
 import { useToast } from '@/components/use-toast'
-import {
-  MCP_MARKETPLACE_URL,
-  HIGRESS_MCP_MARKETPLACE_URL
-} from '../../src/components/mcp-config/const'
-import { useRouter } from 'vue-router'
 
 const { t } = useI18n()
 const languageStore = useLanguageStore()
-const router = useRouter()
 const mcpStore = useMcpStore()
 const { toast } = useToast()
 
@@ -251,7 +196,8 @@ const npmRegistryStatus = ref<{
 
 const refreshing = ref(false)
 const customRegistryInput = ref('')
-const advancedDialogOpen = ref(false)
+const npmSourceExpanded = ref(false)
+const customSourceDialogOpen = ref(false)
 // 处理MCP开关状态变化
 const handleMcpEnabledChange = async (enabled: boolean) => {
   await mcpStore.setMcpEnabled(enabled)
@@ -405,7 +351,7 @@ const clearCustomNpmRegistry = async () => {
         title: t('settings.mcp.npmRegistry.redetectComplete'),
         description: t('settings.mcp.npmRegistry.redetectCompleteDesc')
       })
-      advancedDialogOpen.value = false
+      customSourceDialogOpen.value = false
     } catch (detectError) {
       console.error('Failed to re-detect optimal registry:', detectError)
       await loadNpmRegistryStatus()
@@ -414,7 +360,7 @@ const clearCustomNpmRegistry = async () => {
         description: t('settings.mcp.npmRegistry.redetectFailedDesc'),
         variant: 'destructive'
       })
-      advancedDialogOpen.value = false
+      customSourceDialogOpen.value = false
     }
   } catch (error) {
     console.error('Failed to clear custom npm registry:', error)
@@ -426,39 +372,7 @@ const clearCustomNpmRegistry = async () => {
   }
 }
 
-const formatLastChecked = (timestamp: number) => {
-  const now = Date.now()
-  const diff = now - timestamp
-  const minutes = Math.floor(diff / (1000 * 60))
-  const hours = Math.floor(diff / (1000 * 60 * 60))
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-  if (minutes < 1) {
-    return t('settings.mcp.npmRegistry.justNow')
-  } else if (minutes < 60) {
-    return t('settings.mcp.npmRegistry.minutesAgo', { minutes })
-  } else if (hours < 24) {
-    return t('settings.mcp.npmRegistry.hoursAgo', { hours })
-  } else {
-    return t('settings.mcp.npmRegistry.daysAgo', { days })
-  }
-}
-
 onMounted(() => {
   loadNpmRegistryStatus()
 })
-
-// 打开MCP Marketplace
-const openMcpMarketplace = () => {
-  window.open(MCP_MARKETPLACE_URL, '_blank')
-}
-
-// 打开Higress MCP Marketplace
-const openHigressMcpMarketplace = () => {
-  window.open(HIGRESS_MCP_MARKETPLACE_URL, '_blank')
-}
-
-// 打开内置 MCP 市场
-const openBuiltinMarket = () => {
-  router.push('/settings/mcp-market')
-}
 </script>
diff --git a/src/renderer/settings/components/PromptSetting.vue b/src/renderer/settings/components/PromptSetting.vue
index 8efbdd756..299cb7ff1 100644
--- a/src/renderer/settings/components/PromptSetting.vue
+++ b/src/renderer/settings/components/PromptSetting.vue
@@ -3,10 +3,7 @@
     <div class="w-full flex flex-col gap-4 p-4">
       <!-- 页面标题和操作按钮 -->
       <div class="flex flex-row items-center justify-between">
-        <div class="flex items-center gap-2">
-          <Icon icon="lucide:book-open-text" class="w-5 h-5 text-primary" />
-          <span class="text-lg font-semibold">{{ t('promptSetting.title') }}</span>
-        </div>
+        <span class="font-medium">{{ t('promptSetting.title') }}</span>
         <div class="flex items-center gap-2">
           <Button variant="outline" size="sm" @click="exportPrompts">
             <Icon icon="lucide:download" class="w-4 h-4 mr-1" />
@@ -19,101 +16,89 @@
         </div>
       </div>
 
-      <!-- 系统提示词设置区域 -->
-      <div class="bg-muted border border-border rounded-lg p-4">
-        <div class="flex items-center justify-between mb-3">
-          <div class="flex items-center gap-2">
-            <Icon icon="lucide:settings" class="w-5 h-5 text-primary" />
-            <Label class="text-base font-medium">{{ t('promptSetting.systemPrompts') }}</Label>
-          </div>
-          <div class="flex items-center gap-2">
-            <Button variant="default" size="sm" @click="openSystemPromptDialog = true">
-              <Icon icon="lucide:plus" class="w-4 h-4 mr-1" />
-              {{ t('promptSetting.addSystemPrompt') }}
-            </Button>
-          </div>
-        </div>
+      <Separator />
 
-        <div class="space-y-3">
-          <!-- 默认系统提示词选择 -->
-          <div class="space-y-2">
-            <Label class="text-sm font-medium">{{ t('promptSetting.defaultSystemPrompt') }}</Label>
-            <Select v-model="selectedSystemPromptId" @update:model-value="handleSystemPromptChange">
-              <SelectTrigger class="w-full">
-                <SelectValue :placeholder="t('promptSetting.selectSystemPrompt')" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="prompt in systemPrompts" :key="prompt.id" :value="prompt.id">
-                  {{ prompt.name }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
+      <div class="space-y-3">
+        <!-- 默认系统提示词选择 -->
+        <div class="flex flex-row items-center gap-2">
+          <div class="flex-1">
+            <Label class="text-sm font-medium flex-1">{{
+              t('promptSetting.defaultSystemPrompt')
+            }}</Label>
             <p class="text-xs text-muted-foreground">
               {{ t('promptSetting.systemPromptDescription') }}
             </p>
           </div>
 
-          <!-- 当前选中的系统提示词编辑 -->
-          <div v-if="currentSystemPrompt" class="space-y-2">
-            <div class="flex items-center justify-between">
-              <Label class="text-sm font-medium">{{ t('promptSetting.promptContent') }}</Label>
-              <div class="flex items-center gap-2">
-                <!-- DeepChat 的恢复按钮 -->
-                <Button
-                  v-if="currentSystemPrompt.id === 'default'"
-                  variant="outline"
-                  size="sm"
-                  @click="resetDefaultSystemPrompt"
-                >
-                  <Icon icon="lucide:rotate-ccw" class="w-3.5 h-3.5 mr-1" />
-                  {{ t('promptSetting.resetToDefault') }}
-                </Button>
-                <!-- 非默认系统提示词的删除按钮 -->
-                <AlertDialog v-else>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
-                    >
-                      <Icon icon="lucide:trash-2" class="w-3.5 h-3.5 mr-1" />
-                      {{ t('common.delete') }}
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>{{
-                        t('promptSetting.confirmDeleteSystemPrompt', {
-                          name: currentSystemPrompt.name
-                        })
-                      }}</AlertDialogTitle>
-                      <AlertDialogDescription>{{
-                        t('promptSetting.confirmDeleteSystemPromptDescription')
-                      }}</AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>{{ t('common.cancel') }}</AlertDialogCancel>
-                      <AlertDialogAction @click="deleteSystemPrompt(currentSystemPrompt.id)">{{
-                        t('common.confirm')
-                      }}</AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              </div>
-            </div>
-            <textarea
-              v-model="currentSystemPrompt.content"
-              class="w-full h-32 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none overflow-y-auto"
-              :placeholder="t('promptSetting.contentPlaceholder')"
-              @blur="saveCurrentSystemPrompt"
-            ></textarea>
-            <p class="text-xs text-muted-foreground">
-              {{ t('promptSetting.systemPromptEditTip') }}
-            </p>
-          </div>
+          <Select v-model="selectedSystemPromptId" @update:model-value="handleSystemPromptChange">
+            <SelectTrigger class="w-32 border-border hover:bg-accent h-8!">
+              <SelectValue :placeholder="t('promptSetting.selectSystemPrompt')" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="prompt in systemPrompts" :key="prompt.id" :value="prompt.id">
+                {{ prompt.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon-sm" @click="openSystemPromptDialog = true">
+            <Icon icon="lucide:plus" class="w-4 h-4" />
+          </Button>
+        </div>
+
+        <!-- 当前选中的系统提示词编辑 -->
+        <div v-if="currentSystemPrompt" class="space-y-2">
+          <Textarea
+            v-model="currentSystemPrompt.content"
+            class="w-full h-48"
+            :placeholder="t('promptSetting.contentPlaceholder')"
+            @blur="saveCurrentSystemPrompt"
+          ></Textarea>
+          <!-- DeepChat 的恢复按钮 -->
+          <Button
+            v-if="currentSystemPrompt.id === 'default'"
+            variant="outline"
+            size="sm"
+            @click="resetDefaultSystemPrompt"
+          >
+            <Icon icon="lucide:rotate-ccw" class="w-3.5 h-3.5 mr-1" />
+            {{ t('promptSetting.resetToDefault') }}
+          </Button>
+          <!-- 非默认系统提示词的删除按钮 -->
+          <AlertDialog v-else>
+            <AlertDialogTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+              >
+                <Icon icon="lucide:trash-2" class="w-3.5 h-3.5 mr-1" />
+                {{ t('common.delete') }}
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>{{
+                  t('promptSetting.confirmDeleteSystemPrompt', {
+                    name: currentSystemPrompt.name
+                  })
+                }}</AlertDialogTitle>
+                <AlertDialogDescription>{{
+                  t('promptSetting.confirmDeleteSystemPromptDescription')
+                }}</AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{{ t('common.cancel') }}</AlertDialogCancel>
+                <AlertDialogAction @click="deleteSystemPrompt(currentSystemPrompt.id)">{{
+                  t('common.confirm')
+                }}</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
       </div>
 
+      <Separator />
+
       <!-- 自定义提示词区域 -->
       <div class="bg-card border border-border rounded-lg p-4">
         <div class="flex items-center justify-between mb-3">
@@ -276,7 +261,7 @@
     <Sheet v-model:open="openSystemPromptDialog">
       <SheetContent
         side="right"
-        class="w-[60vw]! max-w-[90vw]! h-full flex flex-col p-0 bg-background"
+        class="w-[60vw]! max-w-[90vw]! h-screen flex flex-col p-0 bg-background window-no-drag-region"
       >
         <SheetHeader class="px-6 py-4 border-b bg-card/50">
           <SheetTitle class="flex items-center gap-2">
@@ -316,12 +301,12 @@
             <Label for="system-prompt-content" class="text-sm font-medium">{{
               t('promptSetting.promptContent')
             }}</Label>
-            <textarea
+            <Textarea
               id="system-prompt-content"
               v-model="systemPromptForm.content"
-              class="w-full h-64 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none overflow-y-auto"
+              class="w-full h-64"
               :placeholder="t('promptSetting.contentPlaceholder')"
-            ></textarea>
+            ></Textarea>
           </div>
         </div>
 
@@ -350,7 +335,7 @@
     <Sheet v-model:open="openAddDialog">
       <SheetContent
         side="right"
-        class="w-[75vw]! max-w-[95vw]! h-full flex flex-col p-0 bg-background"
+        class="w-[75vw]! max-w-[95vw]! h-screen flex flex-col p-0 bg-background window-no-drag-region"
       >
         <SheetHeader class="px-6 py-4 border-b bg-card/50">
           <SheetTitle class="flex items-center gap-2">
@@ -371,12 +356,11 @@
           </SheetDescription>
         </SheetHeader>
 
-        <ScrollArea class="flex-1 px-6">
+        <ScrollArea class="flex-1 h-0 px-6">
           <div class="py-6 space-y-6">
             <!-- 基本信息区域 -->
             <div class="space-y-4">
               <div class="flex items-center gap-2 pb-2 border-b border-border">
-                <Icon icon="lucide:info" class="w-4 h-4 text-primary" />
                 <Label class="text-sm font-medium text-muted-foreground">{{
                   t('promptSetting.basicInfo')
                 }}</Label>
@@ -643,7 +627,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, toRaw } from 'vue'
+import { ref, reactive, onMounted, toRaw, Text } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
 import { ScrollArea } from '@shadcn/components/ui/scroll-area'
@@ -686,6 +670,8 @@ import { nanoid } from 'nanoid'
 import { getMimeTypeIcon } from '@/lib/utils'
 import { FileItem } from '@shared/presenter'
 import type { AcceptableValue } from 'reka-ui'
+import { Textarea } from '@shadcn/components/ui/textarea'
+import { Separator } from '@shadcn/components/ui/separator'
 
 const { t } = useI18n()
 const { toast } = useToast()
@@ -1353,6 +1339,13 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.window-drag-region {
+  -webkit-app-region: drag;
+}
+
+.window-no-drag-region {
+  -webkit-app-region: no-drag;
+}
 .line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
diff --git a/src/renderer/settings/components/RagflowKnowledgeSettings.vue b/src/renderer/settings/components/RagflowKnowledgeSettings.vue
index 1123aea39..7f835c10c 100644
--- a/src/renderer/settings/components/RagflowKnowledgeSettings.vue
+++ b/src/renderer/settings/components/RagflowKnowledgeSettings.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="border rounded-lg overflow-hidden">
-    <div class="flex items-center p-4 bg-muted">
+    <div
+      class="flex items-center p-4 hover:bg-accent cursor-default"
+      @click="toggleRagflowConfigPanel"
+    >
       <div class="flex-1">
         <div class="flex items-center">
           <img src="@/assets/images/ragflow.png" class="h-5 mr-2" />
@@ -26,18 +29,10 @@
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <Button
-          variant="outline"
-          size="sm"
-          class="flex items-center gap-1"
-          @click="toggleRagflowConfigPanel"
-        >
-          <Icon
-            :icon="isRagflowConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-            class="w-4 h-4"
-          />
-          {{ isRagflowConfigPanelOpen ? t('common.collapse') : t('common.expand') }}
-        </Button>
+        <Icon
+          :icon="isRagflowConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+          class="w-4 h-4"
+        />
       </div>
     </div>
 
diff --git a/src/renderer/settings/components/ShortcutSettings.vue b/src/renderer/settings/components/ShortcutSettings.vue
index 2ebc5aa43..57743ece4 100644
--- a/src/renderer/settings/components/ShortcutSettings.vue
+++ b/src/renderer/settings/components/ShortcutSettings.vue
@@ -2,8 +2,7 @@
   <div class="w-full h-full py-4 flex flex-col">
     <div class="pb-4 px-4 flex flex-row items-center justify-between">
       <div class="flex items-center gap-2" :dir="languageStore.dir">
-        <Icon icon="lucide:keyboard" class="w-5 h-5 text-primary" />
-        <span class="text-lg font-semibold">{{ t('settings.shortcuts.title') }}</span>
+        <span class="font-medium">{{ t('settings.shortcuts.title') }}</span>
       </div>
       <div class="flex items-center gap-2">
         <Button variant="outline" size="sm" @click="resetShortcutKeys()">
@@ -13,101 +12,89 @@
         </Button>
       </div>
     </div>
-    <ScrollArea class="px-4 flex-1 w-full h-full pb-8">
-      <div class="w-full h-full flex flex-col gap-1.5">
-        <!-- 快捷键列表 -->
-        <div class="flex flex-col gap-2">
-          <div
-            v-for="shortcut in shortcuts"
-            :key="shortcut.id"
-            class="flex flex-row p-2 items-center gap-2 px-2"
-          >
-            <span class="flex flex-row items-center gap-2 grow w-full" :dir="languageStore.dir">
-              <Icon :icon="shortcut.icon" class="w-4 h-4 text-muted-foreground" />
-              <span class="text-sm font-medium">{{ t(shortcut.label) }}</span>
-            </span>
-
-            <div class="shrink-0 min-w-[240px]">
-              <div
-                class="group flex min-h-[44px] items-center gap-3 rounded-md border bg-background/60 px-3 py-2 transition"
-                :class="{
-                  'border-primary ring-2 ring-primary/50':
-                    recordingShortcutId === shortcut.id && !shortcutError,
-                  'border-destructive ring-2 ring-destructive/50':
-                    recordingShortcutId === shortcut.id && shortcutError,
-                  'opacity-60': shortcut.disabled
-                }"
-              >
-                <KbdGroup class="flex flex-wrap items-center gap-1">
-                  <template v-if="recordingShortcutId === shortcut.id">
-                    <template v-if="formattedTempShortcut.length">
-                      <Kbd>
-                        <template
-                          v-for="(key, idx) in formattedTempShortcut"
-                          :key="`${key}-${idx}`"
-                        >
-                          {{ key }}
-                          <template v-if="idx < formattedTempShortcut.length - 1">
-                            &nbsp;
-                          </template>
-                        </template>
-                      </Kbd>
-                    </template>
-                    <Kbd v-else class="text-muted-foreground">...</Kbd>
-                  </template>
-                  <template v-else-if="shortcut.key.length">
+    <ScrollArea class="px-4 flex-1 w-full h-full">
+      <div class="flex flex-col gap-4">
+        <div v-for="shortcut in shortcuts" :key="shortcut.id" class="flex flex-row items-center">
+          <span class="flex flex-row items-center gap-2 grow" :dir="languageStore.dir">
+            <Icon :icon="shortcut.icon" class="w-4 h-4 text-muted-foreground" />
+            <span class="text-sm font-medium">{{ t(shortcut.label) }}</span>
+          </span>
+
+          <div class="shrink-0 min-w-[240px]">
+            <div
+              class="group flex items-center gap-3 rounded-md border bg-background/60 px-3 transition"
+              :class="{
+                'border-primary ring-2 ring-primary/50':
+                  recordingShortcutId === shortcut.id && !shortcutError,
+                'border-destructive ring-2 ring-destructive/50':
+                  recordingShortcutId === shortcut.id && shortcutError,
+                'opacity-60': shortcut.disabled
+              }"
+            >
+              <KbdGroup class="flex flex-wrap items-center gap-1">
+                <template v-if="recordingShortcutId === shortcut.id">
+                  <template v-if="formattedTempShortcut.length">
                     <Kbd>
-                      <template v-for="(key, idx) in shortcut.key" :key="`${key}-${idx}`">
+                      <template v-for="(key, idx) in formattedTempShortcut" :key="`${key}-${idx}`">
                         {{ key }}
-                        <template v-if="idx < shortcut.key.length - 1"> &nbsp; </template>
+                        <template v-if="idx < formattedTempShortcut.length - 1"> &nbsp; </template>
                       </template>
                     </Kbd>
                   </template>
-                  <Kbd v-else class="text-muted-foreground">—</Kbd>
-                </KbdGroup>
+                  <Kbd v-else class="text-muted-foreground">...</Kbd>
+                </template>
+                <template v-else-if="shortcut.key.length">
+                  <Kbd>
+                    <template v-for="(key, idx) in shortcut.key" :key="`${key}-${idx}`">
+                      {{ key }}
+                      <template v-if="idx < shortcut.key.length - 1"> &nbsp; </template>
+                    </template>
+                  </Kbd>
+                </template>
+                <Kbd v-else class="text-muted-foreground">—</Kbd>
+              </KbdGroup>
 
-                <div
-                  class="ml-auto flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100"
-                  :class="{ 'opacity-100': recordingShortcutId === shortcut.id }"
-                >
-                  <Button
-                    v-if="!shortcut.disabled"
-                    variant="ghost"
-                    size="icon"
-                    class="h-8 w-8 text-muted-foreground hover:text-primary"
-                    :title="t('common.edit')"
-                    @click.stop="startRecording(shortcut.id)"
-                  >
-                    <Icon icon="lucide:pencil" class="h-4 w-4" />
-                  </Button>
-                  <Button
-                    v-if="!shortcut.disabled && shortcut.key.length"
-                    variant="ghost"
-                    size="icon"
-                    class="h-8 w-8 text-muted-foreground hover:text-destructive"
-                    :title="t('settings.shortcuts.clearShortcut')"
-                    @click.stop="clearShortcut(shortcut.id)"
-                  >
-                    <Icon icon="lucide:x" class="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
               <div
-                v-if="recordingShortcutId === shortcut.id"
-                class="mt-1 text-xs"
-                :class="shortcutError ? 'text-destructive' : 'text-muted-foreground'"
+                class="ml-auto flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100"
+                :class="{ 'opacity-100': recordingShortcutId === shortcut.id }"
               >
-                <span v-if="shortcutError">
-                  {{ shortcutError }}
-                </span>
-                <span v-else-if="formattedTempShortcut.length">
-                  {{ t('settings.shortcuts.pressEnterToSave') }}
-                </span>
-                <span v-else class="text-primary">
-                  {{ t('settings.shortcuts.pressKeys') }}
-                </span>
+                <Button
+                  v-if="!shortcut.disabled"
+                  variant="ghost"
+                  size="icon"
+                  class="h-8 w-8 text-muted-foreground hover:text-primary"
+                  :title="t('common.edit')"
+                  @click.stop="startRecording(shortcut.id)"
+                >
+                  <Icon icon="lucide:pencil" class="h-4 w-4" />
+                </Button>
+                <Button
+                  v-if="!shortcut.disabled && shortcut.key.length"
+                  variant="ghost"
+                  size="icon"
+                  class="h-8 w-8 text-muted-foreground hover:text-destructive"
+                  :title="t('settings.shortcuts.clearShortcut')"
+                  @click.stop="clearShortcut(shortcut.id)"
+                >
+                  <Icon icon="lucide:x" class="h-4 w-4" />
+                </Button>
               </div>
             </div>
+            <div
+              v-if="recordingShortcutId === shortcut.id"
+              class="mt-1 text-xs"
+              :class="shortcutError ? 'text-destructive' : 'text-muted-foreground'"
+            >
+              <span v-if="shortcutError">
+                {{ shortcutError }}
+              </span>
+              <span v-else-if="formattedTempShortcut.length">
+                {{ t('settings.shortcuts.pressEnterToSave') }}
+              </span>
+              <span v-else class="text-primary">
+                {{ t('settings.shortcuts.pressKeys') }}
+              </span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/renderer/src/components/mcp-config/components/McpServerCard.vue b/src/renderer/src/components/mcp-config/components/McpServerCard.vue
index d8cea0c50..917f8a74d 100644
--- a/src/renderer/src/components/mcp-config/components/McpServerCard.vue
+++ b/src/renderer/src/components/mcp-config/components/McpServerCard.vue
@@ -140,14 +140,14 @@ watch(watchDescription, () => {
 
 <template>
   <div
-    class="bg-muted shadow-sm border rounded-lg overflow-hidden transition-all duration-200 hover:shadow-md hover:border-primary group"
+    class="bg-card flex flex-col shadow-sm border rounded-lg overflow-hidden transition-all duration-200 hover:shadow-md group"
   >
-    <div class="px-4 py-2">
+    <div class="px-4 py-2 flex-1">
       <!-- 头部：图标、名称、状态、菜单 -->
-      <div class="flex items-center justify-between mb-3">
-        <div class="flex items-center space-x-2 flex-1 min-w-0">
+      <div class="flex items-center justify-between mb-1">
+        <div class="flex items-center gap-1.5 flex-1 min-w-0">
           <!-- 服务器图标 -->
-          <div class="text-lg shrink-0">{{ server.icons }}</div>
+          <span class="shrink-0">{{ server.icons }}</span>
 
           <!-- 名称 -->
           <h3 class="text-sm font-bold truncate flex-1">
@@ -195,47 +195,19 @@ watch(watchDescription, () => {
         </DropdownMenu>
       </div>
 
-      <!-- 类型和标识 -->
-      <div class="flex items-center space-x-2 mb-2">
-        <!-- 服务器类型 -->
-        <Badge variant="outline" class="text-xs h-4 px-1.5">
-          {{ server.type === 'http' ? 'HTTP' : 'Local' }}
-        </Badge>
-
-        <!-- 默认启动标识 -->
-        <Badge v-if="server.isDefault" variant="default" class="text-xs h-4 px-1.5">
-          {{ t('settings.mcp.default') }}
-        </Badge>
-      </div>
-
       <!-- 描述 -->
-      <div class="mb-2">
-        <p
-          ref="descriptionRef"
-          class="text-xs text-secondary-foreground cursor-pointer overflow-hidden leading-5 break-all"
-          :class="[
-            !isDescriptionExpanded ? 'line-clamp-1' : '',
-            needsExpansion ? 'hover:text-foreground transition-colors' : ''
-          ]"
-          style="min-height: 1rem"
-          @click="needsExpansion && (isDescriptionExpanded = !isDescriptionExpanded)"
-        >
-          {{ fullDescription }}
-        </p>
-        <Button
-          variant="link"
-          size="sm"
-          class="h-auto p-0 text-xs mt-1 hover:no-underline gap-1"
-          :class="[needsExpansion ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-          @click="isDescriptionExpanded = !isDescriptionExpanded"
-        >
-          <Icon
-            :icon="isDescriptionExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-            class="h-3 w-3"
-          />
-          {{ isDescriptionExpanded ? t('common.collapse') : t('common.expand') }}
-        </Button>
-      </div>
+      <p
+        ref="descriptionRef"
+        class="text-xs text-secondary-foreground cursor-pointer overflow-hidden leading-5 break-all mb-2"
+        :class="[
+          !isDescriptionExpanded ? 'line-clamp-1' : '',
+          needsExpansion ? 'hover:text-foreground transition-colors' : ''
+        ]"
+        style="min-height: 1rem"
+        @click="needsExpansion && (isDescriptionExpanded = !isDescriptionExpanded)"
+      >
+        {{ fullDescription }}
+      </p>
 
       <!-- 底部控制 -->
       <div class="flex items-center justify-between">
@@ -259,16 +231,15 @@ watch(watchDescription, () => {
           </TooltipProvider>
         </div>
 
-        <div class="flex items-center space-x-2">
-          <Switch
-            :model-value="server.isRunning"
-            :disabled="disabled || isLoading"
-            @update:model-value="$emit('toggle')"
-          />
-        </div>
+        <!-- 开关 -->
+        <Switch
+          :model-value="server.isRunning"
+          :disabled="disabled || isLoading"
+          @update:model-value="$emit('toggle')"
+        />
       </div>
     </div>
-    <div class="flex flex-row bg-muted h-9 items-center">
+    <div class="flex flex-row border-t h-9 items-center">
       <!-- 工具按钮 -->
       <Button
         v-if="toolsCount !== undefined"
diff --git a/src/renderer/src/components/mcp-config/components/McpServers.vue b/src/renderer/src/components/mcp-config/components/McpServers.vue
index fd07ad4d9..f27438903 100644
--- a/src/renderer/src/components/mcp-config/components/McpServers.vue
+++ b/src/renderer/src/components/mcp-config/components/McpServers.vue
@@ -259,7 +259,7 @@ const handleViewResources = async (serverName: string) => {
               {{ inMemoryServers.length }}
             </div>
           </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-3">
             <McpServerCard
               v-for="server in inMemoryServers"
               :key="server.name"
@@ -291,7 +291,7 @@ const handleViewResources = async (serverName: string) => {
               {{ regularServers.length }}
             </div>
           </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-3">
             <McpServerCard
               v-for="server in regularServers"
               :key="server.name"
diff --git a/src/shadcn/components/ui/textarea/Textarea.vue b/src/shadcn/components/ui/textarea/Textarea.vue
index e78707886..df28bffc2 100644
--- a/src/shadcn/components/ui/textarea/Textarea.vue
+++ b/src/shadcn/components/ui/textarea/Textarea.vue
@@ -17,12 +17,12 @@ const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue,
 })
-</script>
-
-<template>
-  <textarea
-    v-model="modelValue"
-    data-slot="textarea"
-    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
-  />
-</template>
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring  aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>

From 650113fbd62c4b876cdb8180a6cde9f907061246 Mon Sep 17 00:00:00 2001
From: deepinsect <deepinsect@github.com>
Date: Tue, 14 Oct 2025 16:30:08 +0800
Subject: [PATCH 2/4] fix: lint error

---
 resources/model-db/providers.json                               | 2 +-
 src/renderer/settings/components/PromptSetting.vue              | 2 +-
 .../src/components/mcp-config/components/McpServerCard.vue      | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/model-db/providers.json b/resources/model-db/providers.json
index 85835c28b..432d7a7b1 100644
--- a/resources/model-db/providers.json
+++ b/resources/model-db/providers.json
@@ -39874,4 +39874,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/settings/components/PromptSetting.vue b/src/renderer/settings/components/PromptSetting.vue
index 299cb7ff1..0c40fe2d5 100644
--- a/src/renderer/settings/components/PromptSetting.vue
+++ b/src/renderer/settings/components/PromptSetting.vue
@@ -627,7 +627,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, toRaw, Text } from 'vue'
+import { ref, reactive, onMounted, toRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
 import { ScrollArea } from '@shadcn/components/ui/scroll-area'
diff --git a/src/renderer/src/components/mcp-config/components/McpServerCard.vue b/src/renderer/src/components/mcp-config/components/McpServerCard.vue
index 917f8a74d..9c502acb3 100644
--- a/src/renderer/src/components/mcp-config/components/McpServerCard.vue
+++ b/src/renderer/src/components/mcp-config/components/McpServerCard.vue
@@ -7,7 +7,6 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@shadcn/components/ui/tooltip'
-import { Badge } from '@shadcn/components/ui/badge'
 import { Switch } from '@shadcn/components/ui/switch'
 import {
   DropdownMenu,

From 900cdee18588c22cd36d53b940cd453aba0a623f Mon Sep 17 00:00:00 2001
From: deepinsect <deepinsect@github.com>
Date: Tue, 14 Oct 2025 16:38:12 +0800
Subject: [PATCH 3/4] fix(settings): missing end div

---
 .../settings/components/PromptSetting.vue     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/renderer/settings/components/PromptSetting.vue b/src/renderer/settings/components/PromptSetting.vue
index 696a5ee76..ee8bc679d 100644
--- a/src/renderer/settings/components/PromptSetting.vue
+++ b/src/renderer/settings/components/PromptSetting.vue
@@ -297,17 +297,18 @@
               />
             </div>
 
-          <!-- 内容 -->
-          <div class="space-y-2">
-            <Label for="system-prompt-content" class="text-sm font-medium">{{
-              t('promptSetting.promptContent')
-            }}</Label>
-            <Textarea
-              id="system-prompt-content"
-              v-model="systemPromptForm.content"
-              class="w-full h-64"
-              :placeholder="t('promptSetting.contentPlaceholder')"
-            ></Textarea>
+            <!-- 内容 -->
+            <div class="space-y-2">
+              <Label for="system-prompt-content" class="text-sm font-medium">{{
+                t('promptSetting.promptContent')
+              }}</Label>
+              <Textarea
+                id="system-prompt-content"
+                v-model="systemPromptForm.content"
+                class="w-full h-64"
+                :placeholder="t('promptSetting.contentPlaceholder')"
+              ></Textarea>
+            </div>
           </div>
         </ScrollArea>
 

From b436b306802cf2304023a63b05e011808157fb08 Mon Sep 17 00:00:00 2001
From: deepinsect <deepinsect@github.com>
Date: Tue, 14 Oct 2025 16:53:54 +0800
Subject: [PATCH 4/4] fix(settings): minor fix, remove depulicate items

---
 .../settings/components/CommonSettings.vue    | 104 ++++++------------
 .../settings/components/DataSettings.vue      |   1 -
 2 files changed, 33 insertions(+), 72 deletions(-)

diff --git a/src/renderer/settings/components/CommonSettings.vue b/src/renderer/settings/components/CommonSettings.vue
index 7bbb9eec5..a9904108d 100644
--- a/src/renderer/settings/components/CommonSettings.vue
+++ b/src/renderer/settings/components/CommonSettings.vue
@@ -267,67 +267,40 @@
           />
         </div>
       </div>
-      <!-- 日志开关确认对话框 -->
-      <Dialog :open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
-            <DialogDescription>
-              <div class="space-y-2">
-                <p>
-                  {{
-                    newLoggingValue
-                      ? t('settings.common.loggingEnableDesc')
-                      : t('settings.common.loggingDisableDesc')
-                  }}
-                </p>
-                <p>{{ t('settings.common.loggingRestartNotice') }}</p>
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" @click="cancelLoggingChange">{{ t('common.cancel') }}</Button>
-            <Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <div
-        class="p-2 h-10 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
-        @click="openLogFolder"
-        :dir="langStore.dir"
-      >
-        <Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
-        <span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
-      </div>
-
-      <!-- 重置数据 -->
-      <Dialog v-model:open="isDialogOpen">
-        <DialogTrigger as-child>
-          <div
-            class="p-2 h-10 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
-            :dir="langStore.dir"
-          >
-            <Icon icon="lucide:trash" class="w-4 h-4 text-muted-foreground" />
-            <span class="text-sm font-medium">{{ t('settings.common.resetData') }}</span>
-          </div>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{{ t('common.resetDataConfirmTitle') }}</DialogTitle>
-            <DialogDescription>
-              {{ t('common.resetDataConfirmDescription') }}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" @click="closeDialog">
-              {{ t('dialog.cancel') }}
-            </Button>
-            <Button variant="destructive" @click="handleResetData">
-              {{ t('dialog.confirm') }}
+      <div class="flex flex-row gap-3">
+        <!-- 日志开关确认对话框 -->
+        <Dialog v-model:open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
+          <DialogTrigger as-child>
+            <Button class="w-36" variant="outline" :dir="langStore.dir" @click="openLogFolder">
+              <Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
+              <span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
+              <DialogDescription>
+                <div class="space-y-2">
+                  <p>
+                    {{
+                      newLoggingValue
+                        ? t('settings.common.loggingEnableDesc')
+                        : t('settings.common.loggingDisableDesc')
+                    }}
+                  </p>
+                  <p>{{ t('settings.common.loggingRestartNotice') }}</p>
+                </div>
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" @click="cancelLoggingChange">{{
+                t('common.cancel')
+              }}</Button>
+              <Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
     </div>
   </ScrollArea>
 
@@ -463,7 +436,6 @@ import { useSoundStore } from '@/stores/sound'
 import { useLanguageStore } from '@/stores/language'
 import { ModelType } from '@shared/model'
 
-const devicePresenter = usePresenter('devicePresenter')
 const configPresenter = usePresenter('configPresenter')
 const settingsStore = useSettingsStore()
 const soundStore = useSoundStore()
@@ -636,18 +608,8 @@ watch(
   }
 )
 
-const isDialogOpen = ref(false)
 const modelSelectOpen = ref(false)
 
-const closeDialog = () => {
-  isDialogOpen.value = false
-}
-
-const handleResetData = () => {
-  devicePresenter.resetData()
-  closeDialog()
-}
-
 const handleSearchModelSelect = (model: RENDERER_MODEL_META, providerId: string) => {
   console.log('update search model', model, providerId)
   settingsStore.setSearchAssistantModel(model, providerId)
diff --git a/src/renderer/settings/components/DataSettings.vue b/src/renderer/settings/components/DataSettings.vue
index 8d5bde41b..b6b8db1bf 100644
--- a/src/renderer/settings/components/DataSettings.vue
+++ b/src/renderer/settings/components/DataSettings.vue
@@ -124,7 +124,6 @@
           <Button
             variant="destructive"
             class="w-48"
-            @click="syncStore.startBackup"
             :disabled="!syncStore.syncEnabled || syncStore.isBackingUp"
             :dir="languageStore.dir"
           >