diff --git a/package-lock.json b/package-lock.json
index b3d9d29..e862980 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
         "concurrently": "^8.2.2",
         "electron": "^28.0.0",
         "electron-builder": "^24.13.3",
+        "less": "^4.6.4",
+        "less-loader": "^12.3.2",
         "vite": "^8.0.8",
         "vue": "^3.4.0"
       }
@@ -2080,6 +2082,22 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -2717,6 +2735,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -3392,6 +3424,20 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -3434,6 +3480,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -3621,6 +3680,73 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/less": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.6.4.tgz",
+      "integrity": "sha512-OJmO5+HxZLLw0RLzkqaNHzcgEAQG7C0y3aMbwtCzIUFZsLMNNq/1IdAdHEycQ58CwUO3jPTHmoN+tE5I7FQxNg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "copy-anything": "^3.0.5",
+        "parse-node-version": "^1.0.1"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-12.3.2.tgz",
+      "integrity": "sha512-uLV5c702ff2jBvO7qewpkLRzkh/I9QW07ur2NKkv8TVTrtX2lrKjEbEU/LLXAn7cgpCIBbkfyUm4qYXCQs5/+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/less/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -3961,6 +4087,32 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/matcher": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
@@ -4129,6 +4281,24 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/needle": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.5.0.tgz",
+      "integrity": "sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
@@ -4199,6 +4369,16 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -4269,6 +4449,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/plist": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -4344,6 +4535,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/pump": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
diff --git a/package.json b/package.json
index b6b3fab..8166142 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,8 @@
     "concurrently": "^8.2.2",
     "electron": "^28.0.0",
     "electron-builder": "^24.13.3",
+    "less": "^4.6.4",
+    "less-loader": "^12.3.2",
     "vite": "^8.0.8",
     "vue": "^3.4.0"
   },
diff --git a/src/App.vue b/src/App.vue
index 6ca3a6e..fe7bfbf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,400 +1,65 @@
 <template>
   <div class="app" :class="themeClass">
-    <div class="titlebar">
-      <div class="titlebar-left">
-        <span class="titlebar-title">{{ $t('app.title') }}</span>
-      </div>
-      <div class="titlebar-controls">
-        <button class="titlebar-btn" @click="minimize" :title="$t('window.minimize')">
-          <svg viewBox="0 0 10 1"><line x1="0" y1="0.5" x2="10" y2="0.5" /></svg>
-        </button>
-        <button class="titlebar-btn" @click="maximize" :title="$t('window.maximize')">
-          <svg viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" stroke-width="1" stroke="currentColor" fill="none" /></svg>
-        </button>
-        <button class="titlebar-btn close" @click="close" :title="$t('window.close')">
-          <svg viewBox="0 0 10 10">
-            <line x1="0" y1="0" x2="10" y2="10" />
-            <line x1="10" y1="0" x2="0" y2="10" />
-          </svg>
-        </button>
-      </div>
-    </div>
+    <TitleBar @minimize="minimize" @maximize="maximize" @close="close" />
+
     <main class="main">
-      <aside class="sidebar">
-        <div class="sidebar-section">
-          <div class="sidebar-title">{{ $t('sidebar.general') }}</div>
-          <div class="nav-item" :class="{ active: currentSection === 'general' }" @click="showSection('general')">
-            <Config size="16" />
-            <span class="nav-item-text">{{ $t('sidebar.basicSettings') }}</span>
-          </div>
-          <div class="nav-item" :class="{ active: currentSection === 'api' }" @click="showSection('api')">
-            <Key size="16" />
-            <span class="nav-item-text">{{ $t('sidebar.apiConfig') }}</span>
-          </div>
-        </div>
-        <div class="sidebar-section">
-          <div class="sidebar-title">{{ $t('sidebar.advanced') }}</div>
-          <div class="nav-item" :class="{ active: currentSection === 'mcp' }" @click="showSection('mcp')">
-            <Server size="16" />
-            <span class="nav-item-text">{{ $t('sidebar.mcpServers') }}</span>
-            <span class="nav-item-badge">{{ serverCount }}</span>
-          </div>
-        </div>
-      </aside>
+      <SideBar :current-section="currentSection" :server-count="serverCount" @navigate="showSection" />
+
       <div class="content">
-        <section v-if="currentSection === 'general'">
-          <div class="content-header">
-            <h1 class="content-title">{{ $t('general.title') }}</h1>
-            <p class="content-desc">{{ $t('general.description') }}</p>
-          </div>
-          <div class="card">
-            <div class="card-title">
-              <Globe size="16" />
-              {{ $t('general.languageInterface') }}
-            </div>
-            <div class="form-row">
-              <div class="form-group">
-                <label class="form-label">{{ $t('general.language') }}</label>
-                <select class="form-select" v-model="settings.language">
-                  <option value="zh-CN">{{ $t('languages.zh-CN') }}</option>
-                  <option value="en-US">{{ $t('languages.en-US') }}</option>
-                  <option value="ja-JP">{{ $t('languages.ja-JP') }}</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label class="form-label">{{ $t('general.theme') }}</label>
-                <select class="form-select" v-model="settings.theme">
-                  <option value="Xcode">{{ $t('theme.xcode') }}</option>
-                  <option value="Dark">{{ $t('theme.dark') }}</option>
-                  <option value="Light">{{ $t('theme.light') }}</option>
-                  <option value="Solarized Dark">{{ $t('theme.solarizedDark') }}</option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-title">
-              <Setting size="16" />
-              {{ $t('general.otherSettings') }}
-            </div>
-            <div class="form-row">
-              <div class="form-group">
-                <label class="form-label">{{ $t('general.bootAnimation') }}</label>
-                <select class="form-select" v-model="settings.bootAnimationShown">
-                  <option :value="true">{{ $t('general.bootAnimationShown') }}</option>
-                  <option :value="false">{{ $t('general.bootAnimationNotShown') }}</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label class="form-label">{{ $t('general.checkpointing') }}</label>
-                <select class="form-select" v-model="settings.checkpointing.enabled">
-                  <option :value="true">{{ $t('general.enabled') }}</option>
-                  <option :value="false">{{ $t('general.disabled') }}</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </section>
-        <section v-if="currentSection === 'api'">
-          <div class="content-header">
-            <h1 class="content-title">{{ $t('api.title') }}</h1>
-            <p class="content-desc">{{ $t('api.description') }}</p>
-          </div>
-          <div class="card">
-            <div class="card-title">
-              <Exchange size="16" />
-              {{ $t('api.profileManagement') }}
-              <button class="btn btn-primary btn-sm" @click="createNewApiProfile" style="margin-left: auto">
-                <Add size="14" />
-                {{ $t('api.newProfile') }}
-              </button>
-            </div>
-            <div class="profile-list">
-              <div v-for="profile in apiProfiles" :key="profile.name" class="profile-item" :class="{ active: currentApiProfile === profile.name }" @click="selectApiProfile(profile.name)">
-                <div class="profile-icon" :style="getProfileIconStyle(profile.name)">
-                  <span class="profile-icon-text">{{ getProfileInitial(profile.name) }}</span>
-                </div>
-                <div class="profile-info">
-                  <div class="profile-name">{{ profile.name }}</div>
-                  <div class="profile-url">{{ getProfileUrl(profile.name) }}</div>
-                </div>
-                <div class="profile-status" v-if="currentApiProfile === profile.name">
-                  <span class="status-badge">
-                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
-                      <polyline points="3,8 6,11 13,4"></polyline>
-                    </svg>
-                    {{ $t('api.inUse') }}
-                  </span>
-                </div>
-                <div class="profile-actions">
-                  <button class="action-btn" @click.stop="openApiEditDialog(profile.name)" :title="$t('api.edit')">
-                    <Edit size="14" />
-                  </button>
-                  <button class="action-btn" @click.stop="duplicateApiProfile(profile.name)" :title="$t('api.duplicate')">
-                    <Copy size="14" />
-                  </button>
-                  <button class="action-btn action-btn-danger" v-if="profile.name !== 'default'" @click.stop="deleteApiProfile(profile.name)" :title="$t('api.delete')">
-                    <Delete size="14" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-        <section v-if="currentSection === 'mcp'">
-          <div class="content-header">
-            <h1 class="content-title">{{ $t('mcp.title') }}</h1>
-            <p class="content-desc">{{ $t('mcp.description') }}</p>
-          </div>
-          <div class="form-group">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
-              <label class="form-label" style="margin: 0">{{ $t('mcp.serverList') }}</label>
-              <button class="btn btn-primary" @click="addServer" style="padding: 6px 12px; font-size: 12px">
-                <Add size="12" />
-                {{ $t('mcp.addServerBtn') }}
-              </button>
-            </div>
-            <div class="server-list">
-              <template v-if="serverCount > 0">
-                <div v-for="(config, name) in settings.mcpServers" :key="name" class="server-item" :class="{ selected: currentServerName === name }" @click="selectServer(name)">
-                  <div class="server-info">
-                    <div class="server-name">{{ name }}</div>
-                    <div class="server-desc">{{ config.description || $t('mcp.noDescription') }}</div>
-                  </div>
-                  <div class="server-status"></div>
-                </div>
-              </template>
-              <div v-else class="empty-state">
-                <Server size="48" class="empty-state-icon" />
-                <div class="empty-state-title">{{ $t('mcp.noServers') }}</div>
-                <div class="empty-state-desc">{{ $t('mcp.addFirstServer') }}</div>
-              </div>
-            </div>
-          </div>
-        </section>
+        <GeneralSettings v-if="currentSection === 'general'" :settings="settings" @update:settings="updateSettings" />
+
+        <ApiConfig
+          v-if="currentSection === 'api'"
+          :profiles="apiProfiles"
+          :current-profile="currentApiProfile"
+          :settings="settings"
+          @create-profile="createNewApiProfile"
+          @select-profile="selectApiProfile"
+          @edit-profile="openApiEditDialog"
+          @duplicate-profile="duplicateApiProfile"
+          @delete-profile="deleteApiProfile" />
+
+        <McpServers v-if="currentSection === 'mcp'" :servers="settings.mcpServers" :selected-server="currentServerName" :server-count="serverCount" @add-server="addServer" @select-server="selectServer" />
       </div>
     </main>
-    <footer class="footer">
-      <div class="footer-status">
-        <div class="footer-status-dot"></div>
-        <span>{{ $t('api.currentConfig') }}: {{ currentApiProfile || 'default' }}</span>
-      </div>
-    </footer>
-    <!-- Input Dialog -->
-    <div v-if="showInputDialog.show" class="dialog-overlay dialog-overlay-top">
-      <div class="dialog" @click.stop>
-        <div class="dialog-title">{{ showInputDialog.title }}</div>
-        <div v-if="showInputDialog.isConfirm" class="dialog-confirm-text">{{ showInputDialog.placeholder }}</div>
-        <input v-else type="text" class="form-input" v-model="inputDialogValue" :placeholder="showInputDialog.placeholder" @keyup.enter="closeInputDialog(true)" autofocus />
-        <div class="dialog-actions">
-          <button class="btn btn-secondary" @click="closeInputDialog(false)">{{ $t('dialog.cancel') }}</button>
-          <button class="btn btn-primary" @click="closeInputDialog(true)">{{ $t('dialog.confirm') }}</button>
-        </div>
-      </div>
-    </div>
-    <!-- API Profile Create Dialog -->
-    <div v-if="showApiCreateDialog" class="dialog-overlay dialog-overlay-top" @keyup.esc="closeApiCreateDialog" tabindex="-1" ref="apiCreateDialogOverlay">
-      <div class="dialog api-edit-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-title">
-            <Key size="18" />
-            {{ $t('api.createTitle') }}
-          </div>
-          <button class="side-panel-close" @click="closeApiCreateDialog">
-            <svg viewBox="0 0 10 10">
-              <line x1="0" y1="0" x2="10" y2="10" />
-              <line x1="10" y1="0" x2="0" y2="10" />
-            </svg>
-          </button>
-        </div>
-        <div class="dialog-body">
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.configName') }} <span class="form-required">*</span></label>
-            <input type="text" class="form-input" v-model="creatingApiData.name" :placeholder="$t('api.configNamePlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.authType') }}</label>
-            <select class="form-select" v-model="creatingApiData.selectedAuthType">
-              <option value="iflow">{{ $t('api.auth.iflow') }}</option>
-              <option value="api">{{ $t('api.auth.api') }}</option>
-              <option value="openai-compatible">{{ $t('api.auth.openaiCompatible') }}</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.apiKey') }}</label>
-            <input type="password" class="form-input" v-model="creatingApiData.apiKey" :placeholder="$t('api.apiKeyPlaceholder')" />
-          </div>
-          <div class="form-row">
-            <div class="form-group">
-              <label class="form-label">{{ $t('api.baseUrl') }}</label>
-              <input type="text" class="form-input" v-model="creatingApiData.baseUrl" :placeholder="$t('api.baseUrlPlaceholder')" />
-            </div>
-            <div class="form-group">
-              <label class="form-label">{{ $t('api.modelName') }}</label>
-              <input type="text" class="form-input" v-model="creatingApiData.modelName" :placeholder="$t('api.modelNamePlaceholder')" />
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.searchApiKey') }}</label>
-            <input type="password" class="form-input" v-model="creatingApiData.searchApiKey" :placeholder="$t('api.searchApiKeyPlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.cna') }}</label>
-            <input type="text" class="form-input" v-model="creatingApiData.cna" :placeholder="$t('api.cnaPlaceholder')" />
-          </div>
-        </div>
-        <div class="dialog-actions">
-          <button class="btn btn-secondary" @click="closeApiCreateDialog">{{ $t('dialog.cancel') }}</button>
-          <button class="btn btn-primary" @click="saveApiCreate"> <Save size="14" /> {{ $t('api.create') }} </button>
-        </div>
-      </div>
-    </div>
-    <!-- API Profile Edit Dialog -->
-    <div v-if="showApiEditDialog" class="dialog-overlay dialog-overlay-top" @keyup.esc="closeApiEditDialog" tabindex="-1" ref="apiEditDialogOverlay">
-      <div class="dialog api-edit-dialog" @click.stop>
-        <div class="dialog-header">
-          <div class="dialog-title">
-            <Key size="18" />
-            {{ $t('api.editTitle') }}
-          </div>
-          <button class="side-panel-close" @click="closeApiEditDialog">
-            <svg viewBox="0 0 10 10">
-              <line x1="0" y1="0" x2="10" y2="10" />
-              <line x1="10" y1="0" x2="0" y2="10" />
-            </svg>
-          </button>
-        </div>
-        <div class="dialog-body">
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.authType') }}</label>
-            <select class="form-select" v-model="editingApiData.selectedAuthType">
-              <option value="iflow">{{ $t('api.auth.iflow') }}</option>
-              <option value="api">{{ $t('api.auth.api') }}</option>
-              <option value="openai-compatible">{{ $t('api.auth.openaiCompatible') }}</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.apiKey') }}</label>
-            <input type="password" class="form-input" v-model="editingApiData.apiKey" :placeholder="$t('api.apiKeyPlaceholder')" />
-          </div>
-          <div class="form-row">
-            <div class="form-group">
-              <label class="form-label">{{ $t('api.baseUrl') }}</label>
-              <input type="text" class="form-input" v-model="editingApiData.baseUrl" :placeholder="$t('api.baseUrlPlaceholder')" />
-            </div>
-            <div class="form-group">
-              <label class="form-label">{{ $t('api.modelName') }}</label>
-              <input type="text" class="form-input" v-model="editingApiData.modelName" :placeholder="$t('api.modelNamePlaceholder')" />
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.searchApiKey') }}</label>
-            <input type="password" class="form-input" v-model="editingApiData.searchApiKey" :placeholder="$t('api.searchApiKeyPlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('api.cna') }}</label>
-            <input type="text" class="form-input" v-model="editingApiData.cna" :placeholder="$t('api.cnaPlaceholder')" />
-          </div>
-        </div>
-        <div class="dialog-actions">
-          <button class="btn btn-secondary" @click="closeApiEditDialog">{{ $t('dialog.cancel') }}</button>
-          <button class="btn btn-primary" @click="saveApiEdit"> <Save size="14" /> {{ $t('api.save') }} </button>
-        </div>
-      </div>
-    </div>
-    <!-- Server Side Panel -->
-    <div v-if="showServerPanel" class="side-panel-overlay" @keyup.esc="closeServerPanel" tabindex="-1" ref="serverPanelOverlay">
-      <div class="side-panel" @click.stop>
-        <div class="side-panel-header">
-          <div class="side-panel-title">
-            <Server size="18" />
-            {{ isEditingServer ? $t('mcp.editServer') : $t('mcp.addServer') }}
-          </div>
-          <button class="side-panel-close" @click="closeServerPanel">
-            <svg viewBox="0 0 10 10">
-              <line x1="0" y1="0" x2="10" y2="10" />
-              <line x1="10" y1="0" x2="0" y2="10" />
-            </svg>
-          </button>
-        </div>
-        <div class="side-panel-body">
-          <div class="form-group">
-            <label class="form-label">{{ $t('mcp.serverName') }} <span class="form-required">*</span></label>
-            <input type="text" class="form-input" v-model="editingServerData.name" :placeholder="$t('mcp.serverNamePlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('mcp.descriptionLabel') }}</label>
-            <input type="text" class="form-input" v-model="editingServerData.description" :placeholder="$t('mcp.descriptionPlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('mcp.command') }} <span class="form-required">*</span></label>
-            <input type="text" class="form-input" v-model="editingServerData.command" :placeholder="$t('mcp.commandPlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('mcp.workingDir') }}</label>
-            <input type="text" class="form-input" v-model="editingServerData.cwd" :placeholder="$t('mcp.cwdPlaceholder')" />
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('mcp.args') }}</label>
-            <textarea class="form-textarea" v-model="editingServerData.args" rows="4" :placeholder="$t('mcp.argsPlaceholder')"></textarea>
-          </div>
-          <div class="form-group">
-            <label class="form-label">{{ $t('mcp.envVars') }}</label>
-            <textarea class="form-textarea" v-model="editingServerData.env" rows="3" :placeholder="$t('mcp.envVarsPlaceholder')"></textarea>
-          </div>
-        </div>
-        <div class="side-panel-footer">
-          <button v-if="isEditingServer" class="btn btn-danger" @click="deleteServer">
-            <Delete size="14" />
-            {{ $t('mcp.delete') }}
-          </button>
-          <div class="side-panel-footer-right">
-            <button class="btn btn-secondary" @click="closeServerPanel">{{ $t('dialog.cancel') }}</button>
-            <button class="btn btn-primary" @click="saveServerFromPanel">
-              <Save size="14" />
-              {{ isEditingServer ? $t('mcp.saveChanges') : $t('mcp.addServer') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Message Dialog (放在最后确保显示在所有对话框之上) -->
-    <div v-if="showMessageDialog.show" class="dialog-overlay dialog-overlay-top">
-      <div class="dialog message-dialog" @click.stop>
-        <div class="message-dialog-icon" :class="'message-dialog-icon-' + showMessageDialog.type">
-          <svg v-if="showMessageDialog.type === 'info'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10" />
-            <path d="M12 16v-4M12 8h.01" />
-          </svg>
-          <svg v-else-if="showMessageDialog.type === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10" />
-            <path d="M9 12l2 2 4-4" />
-          </svg>
-          <svg v-else-if="showMessageDialog.type === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
-            <line x1="12" y1="9" x2="12" y2="13" />
-            <line x1="12" y1="17" x2="12.01" y2="17" />
-          </svg>
-          <svg v-else-if="showMessageDialog.type === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10" />
-            <line x1="15" y1="9" x2="9" y2="15" />
-            <line x1="9" y1="9" x2="15" y2="15" />
-          </svg>
-        </div>
-        <div class="message-dialog-title">{{ showMessageDialog.title }}</div>
-        <div class="message-dialog-message">{{ showMessageDialog.message }}</div>
-        <div class="dialog-actions">
-          <button class="btn btn-primary" @click="closeMessageDialog">{{ $t('dialog.confirm') }}</button>
-        </div>
-      </div>
-    </div>
+
+    <Footer :current-config="currentApiProfile" />
+
+    <InputDialog :dialog="showInputDialog" @confirm="handleInputConfirm" @cancel="closeInputDialog" />
+
+    <MessageDialog :dialog="showMessageDialog" @close="closeMessageDialog" />
+
+    <ApiProfileDialog
+      :show-create="showApiCreateDialog"
+      :show-edit="showApiEditDialog"
+      :create-data="creatingApiData"
+      :edit-data="editingApiData"
+      @close-create="closeApiCreateDialog"
+      @save-create="saveApiCreate"
+      @close-edit="closeApiEditDialog"
+      @save-edit="saveApiEdit" />
+
+    <ServerPanel :show="showServerPanel" :is-editing="isEditingServer" :data="editingServerData" @close="closeServerPanel" @save="saveServerFromPanel" @delete="deleteServer" />
   </div>
 </template>
+
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Save, Config, Key, Server, Globe, Setting, Add, Edit, Delete, Exchange, Copy } from '@icon-park/vue-next'
+
+import TitleBar from './components/TitleBar.vue'
+import SideBar from './components/SideBar.vue'
+import Footer from './components/Footer.vue'
+import InputDialog from './components/InputDialog.vue'
+import MessageDialog from './components/MessageDialog.vue'
+import ApiProfileDialog from './components/ApiProfileDialog.vue'
+import ServerPanel from './components/ServerPanel.vue'
+import GeneralSettings from './views/GeneralSettings.vue'
+import ApiConfig from './views/ApiConfig.vue'
+import McpServers from './views/McpServers.vue'
+
 const { locale, t } = useI18n()
+
 const settings = ref({
   language: 'zh-CN',
   theme: 'Xcode',
@@ -410,6 +75,7 @@ const settings = ref({
   currentApiProfile: 'default',
   apiProfiles: { default: {} },
 })
+
 const originalSettings = ref({})
 const modified = ref(false)
 const currentSection = ref('general')
@@ -417,53 +83,30 @@ const currentServerName = ref(null)
 const isLoading = ref(true)
 const apiProfiles = ref([])
 const currentApiProfile = ref('default')
-const showInputDialog = ref({ show: false, title: '', placeholder: '', callback: null })
-const inputDialogValue = ref('')
+
+const showInputDialog = ref({ show: false, title: '', placeholder: '', callback: null, isConfirm: false, defaultValue: '' })
 const showMessageDialog = ref({ show: false, type: 'info', title: '', message: '', callback: null })
 const showServerPanel = ref(false)
 const isEditingServer = ref(false)
-const editingServerData = ref({
-  name: '',
-  description: '',
-  command: 'npx',
-  cwd: '.',
-  args: '',
-  env: '',
-})
+const editingServerData = ref({ name: '', description: '', command: 'npx', cwd: '.', args: '', env: '' })
 const showApiEditDialog = ref(false)
 const editingApiProfileName = ref('')
-const editingApiData = ref({
-  selectedAuthType: 'openai-compatible',
-  apiKey: '',
-  baseUrl: '',
-  modelName: '',
-  searchApiKey: '',
-  cna: '',
-})
+const editingApiData = ref({ selectedAuthType: 'openai-compatible', apiKey: '', baseUrl: '', modelName: '', searchApiKey: '', cna: '' })
 const showApiCreateDialog = ref(false)
-const creatingApiData = ref({
-  name: '',
-  selectedAuthType: 'openai-compatible',
-  apiKey: '',
-  baseUrl: '',
-  modelName: '',
-  searchApiKey: '',
-  cna: '',
-})
-// Load API profiles list
+const creatingApiData = ref({ name: '', selectedAuthType: 'openai-compatible', apiKey: '', baseUrl: '', modelName: '', searchApiKey: '', cna: '' })
+
+const updateSettings = newSettings => {
+  settings.value = newSettings
+}
+
 const loadApiProfiles = async () => {
   const result = await window.electronAPI.listApiProfiles()
   if (result.success) {
-    // 确保至少有 default 配置
-    if (!result.profiles || result.profiles.length === 0) {
-      apiProfiles.value = [{ name: 'default', isDefault: true }]
-    } else {
-      apiProfiles.value = result.profiles
-    }
+    apiProfiles.value = result.profiles && result.profiles.length > 0 ? result.profiles : [{ name: 'default', isDefault: true }]
     currentApiProfile.value = result.currentProfile || 'default'
   }
 }
-// Switch API profile
+
 const switchApiProfile = async () => {
   const result = await window.electronAPI.switchApiProfile(currentApiProfile.value)
   if (result.success) {
@@ -477,42 +120,32 @@ const switchApiProfile = async () => {
     await showMessage({ type: 'error', title: t('api.switchFailed'), message: result.error })
   }
 }
-// Create new API profile
+
 const createNewApiProfile = () => {
-  creatingApiData.value = {
-    name: '',
-    selectedAuthType: 'openai-compatible',
-    apiKey: '',
-    baseUrl: '',
-    modelName: '',
-    searchApiKey: '',
-    cna: '',
-  }
+  creatingApiData.value = { name: '', selectedAuthType: 'openai-compatible', apiKey: '', baseUrl: '', modelName: '', searchApiKey: '', cna: '' }
   showApiCreateDialog.value = true
 }
-// Close API create dialog
+
 const closeApiCreateDialog = () => {
   showApiCreateDialog.value = false
 }
-// Save API create
-const saveApiCreate = async () => {
-  const name = creatingApiData.value.name.trim()
+
+const saveApiCreate = async data => {
+  const name = data.name.trim()
   if (!name) {
     await showMessage({ type: 'warning', title: t('messages.error'), message: t('messages.inputConfigName') })
     return
   }
   const result = await window.electronAPI.createApiProfile(name)
   if (result.success) {
-    // 创建成功后，更新配置数据
     const profileData = {
-      selectedAuthType: creatingApiData.value.selectedAuthType,
-      apiKey: creatingApiData.value.apiKey,
-      baseUrl: creatingApiData.value.baseUrl,
-      modelName: creatingApiData.value.modelName,
-      searchApiKey: creatingApiData.value.searchApiKey,
-      cna: creatingApiData.value.cna,
+      selectedAuthType: data.selectedAuthType,
+      apiKey: data.apiKey,
+      baseUrl: data.baseUrl,
+      modelName: data.modelName,
+      searchApiKey: data.searchApiKey,
+      cna: data.cna,
     }
-    // 保存配置数据
     const loadResult = await window.electronAPI.loadSettings()
     if (loadResult.success) {
       const data = loadResult.data
@@ -527,7 +160,7 @@ const saveApiCreate = async () => {
     await showMessage({ type: 'error', title: t('messages.error'), message: result.error })
   }
 }
-// Delete API profile
+
 const deleteApiProfile = async name => {
   const profileName = name || currentApiProfile.value
   if (profileName === 'default') {
@@ -535,13 +168,7 @@ const deleteApiProfile = async name => {
     return
   }
   const confirmed = await new Promise(resolve => {
-    showInputDialog.value = {
-      show: true,
-      title: t('api.delete'),
-      placeholder: t('messages.confirmDeleteConfig', { name: profileName }),
-      callback: resolve,
-      isConfirm: true,
-    }
+    showInputDialog.value = { show: true, title: t('api.delete'), placeholder: t('messages.confirmDeleteConfig', { name: profileName }), callback: resolve, isConfirm: true }
   })
   if (!confirmed) return
   const result = await window.electronAPI.deleteApiProfile(profileName)
@@ -559,7 +186,6 @@ const deleteApiProfile = async name => {
   }
 }
 
-// Select API profile (click on card)
 const selectApiProfile = async name => {
   if (name === currentApiProfile.value) return
   currentApiProfile.value = name
@@ -567,48 +193,10 @@ const selectApiProfile = async name => {
   await switchApiProfile()
   isLoading.value = false
 }
-// Get profile initial letter for icon
-const getProfileInitial = name => {
-  if (!name) return '?'
-  return name.charAt(0).toUpperCase()
-}
-// Get profile URL for display
-const getProfileUrl = name => {
-  if (!settings.value.apiProfiles || !settings.value.apiProfiles[name]) {
-    return t('api.unconfigured')
-  }
-  const profile = settings.value.apiProfiles[name]
-  return profile.baseUrl || t('api.noBaseUrl')
-}
-// Get profile icon style (gradient colors)
-const profileColors = [
-  'linear-gradient(135deg, #f97316 0%, #fb923c 100%)', // orange
-  'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)', // purple
-  'linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%)', // cyan
-  'linear-gradient(135deg, #10b981 0%, #34d399 100%)', // green
-  'linear-gradient(135deg, #f43f5e 0%, #fb7185 100%)', // rose
-  'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)', // blue
-]
-const getProfileIconStyle = name => {
-  if (name === 'default') {
-    return { background: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)' }
-  }
-  let hash = 0
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  const index = Math.abs(hash) % profileColors.length
-  return { background: profileColors[index] }
-}
-// Duplicate API profile
+
 const duplicateApiProfile = async name => {
   const newName = await new Promise(resolve => {
-    showInputDialog.value = {
-      show: true,
-      title: t('api.duplicate'),
-      placeholder: t('api.newConfigNamePlaceholder'),
-      callback: resolve,
-    }
+    showInputDialog.value = { show: true, title: t('api.duplicate'), placeholder: t('api.newConfigNamePlaceholder'), callback: resolve }
   })
   if (!newName) return
   const result = await window.electronAPI.duplicateApiProfile(name, newName)
@@ -619,11 +207,9 @@ const duplicateApiProfile = async name => {
     await showMessage({ type: 'error', title: t('messages.error'), message: result.error })
   }
 }
-// Open API edit dialog
+
 const openApiEditDialog = profileName => {
-  // 保存正在编辑的配置名称
   editingApiProfileName.value = profileName
-  // 从 apiProfiles 中加载指定配置的数据
   const profile = settings.value.apiProfiles && settings.value.apiProfiles[profileName]
   editingApiData.value = {
     selectedAuthType: (profile && profile.selectedAuthType) || settings.value.selectedAuthType || 'openai-compatible',
@@ -635,28 +221,21 @@ const openApiEditDialog = profileName => {
   }
   showApiEditDialog.value = true
 }
-// Close API edit dialog
+
 const closeApiEditDialog = () => {
   showApiEditDialog.value = false
 }
-// Save API edit
-const saveApiEdit = async () => {
-  if (!settings.value.apiProfiles) {
-    settings.value.apiProfiles = {}
-  }
-  // 确保配置对象存在
-  if (!settings.value.apiProfiles[editingApiProfileName.value]) {
-    settings.value.apiProfiles[editingApiProfileName.value] = {}
-  }
-  // 保存到指定的配置
-  settings.value.apiProfiles[editingApiProfileName.value].selectedAuthType = editingApiData.value.selectedAuthType
-  settings.value.apiProfiles[editingApiProfileName.value].apiKey = editingApiData.value.apiKey
-  settings.value.apiProfiles[editingApiProfileName.value].baseUrl = editingApiData.value.baseUrl
-  settings.value.apiProfiles[editingApiProfileName.value].modelName = editingApiData.value.modelName
-  settings.value.apiProfiles[editingApiProfileName.value].searchApiKey = editingApiData.value.searchApiKey
-  settings.value.apiProfiles[editingApiProfileName.value].cna = editingApiData.value.cna
+
+const saveApiEdit = async data => {
+  if (!settings.value.apiProfiles) settings.value.apiProfiles = {}
+  if (!settings.value.apiProfiles[editingApiProfileName.value]) settings.value.apiProfiles[editingApiProfileName.value] = {}
+  settings.value.apiProfiles[editingApiProfileName.value].selectedAuthType = data.selectedAuthType
+  settings.value.apiProfiles[editingApiProfileName.value].apiKey = data.apiKey
+  settings.value.apiProfiles[editingApiProfileName.value].baseUrl = data.baseUrl
+  settings.value.apiProfiles[editingApiProfileName.value].modelName = data.modelName
+  settings.value.apiProfiles[editingApiProfileName.value].searchApiKey = data.searchApiKey
+  settings.value.apiProfiles[editingApiProfileName.value].cna = data.cna
   showApiEditDialog.value = false
-  // 自动保存到文件
   const dataToSave = JSON.parse(JSON.stringify(settings.value))
   const result = await window.electronAPI.saveSettings(dataToSave)
   if (result.success) {
@@ -664,17 +243,16 @@ const saveApiEdit = async () => {
     modified.value = false
   }
 }
+
 const loadSettings = async () => {
   const result = await window.electronAPI.loadSettings()
   if (result.success) {
     const data = JSON.parse(JSON.stringify(result.data))
     if (!data.checkpointing) data.checkpointing = { enabled: true }
     if (!data.mcpServers) data.mcpServers = {}
-    // 确保常规设置字段有默认值
     if (data.language === undefined) data.language = 'zh-CN'
     if (data.theme === undefined) data.theme = 'Xcode'
     if (data.bootAnimationShown === undefined) data.bootAnimationShown = true
-    // 确保 API 相关字段有默认值
     if (!data.selectedAuthType) data.selectedAuthType = 'openai-compatible'
     if (data.apiKey === undefined) data.apiKey = ''
     if (data.baseUrl === undefined) data.baseUrl = ''
@@ -695,13 +273,13 @@ watch(
   async () => {
     if (!isLoading.value) {
       modified.value = true
-      // 自动保存基础设置到文件
       const dataToSave = JSON.parse(JSON.stringify(settings.value))
       await window.electronAPI.saveSettings(dataToSave)
     }
   },
   { deep: true },
 )
+
 watch(
   () => settings.value.language,
   newLang => {
@@ -709,36 +287,32 @@ watch(
     window.electronAPI.notifyLanguageChanged()
   },
 )
+
 const showSection = section => {
   currentSection.value = section
 }
+
 const serverCount = computed(() => (settings.value.mcpServers ? Object.keys(settings.value.mcpServers).length : 0))
+
 const themeClass = computed(() => {
   const theme = settings.value.theme
   if (theme === 'Dark') return 'dark'
   if (theme === 'Solarized Dark') return 'solarized-dark'
   return ''
 })
+
 const selectServer = name => {
   currentServerName.value = name
   openEditServerPanel(name)
 }
-const serverPanelOverlay = ref(null)
+
 const openAddServerPanel = () => {
   isEditingServer.value = false
-  editingServerData.value = {
-    name: '',
-    description: '',
-    command: 'npx',
-    cwd: '.',
-    args: '-y\npackage-name',
-    env: '',
-  }
+  editingServerData.value = { name: '', description: '', command: 'npx', cwd: '.', args: '-y\npackage-name', env: '' }
   showServerPanel.value = true
-  nextTick(() => {
-    serverPanelOverlay.value?.focus()
-  })
+  nextTick(() => {})
 }
+
 const openEditServerPanel = name => {
   const server = settings.value.mcpServers[name]
   if (!server) return
@@ -752,13 +326,13 @@ const openEditServerPanel = name => {
     env: server.env ? JSON.stringify(server.env, null, 2) : '',
   }
   showServerPanel.value = true
-  nextTick(() => {
-    serverPanelOverlay.value?.focus()
-  })
+  nextTick(() => {})
 }
+
 const closeServerPanel = () => {
   showServerPanel.value = false
 }
+
 const saveServerFromPanel = async () => {
   const name = editingServerData.value.name.trim()
   if (!name) {
@@ -769,7 +343,6 @@ const saveServerFromPanel = async () => {
     await showMessage({ type: 'warning', title: t('messages.error'), message: t('mcp.serverNameExists') })
     return
   }
-  // 如果是编辑模式且名称改变了，需要删除旧的服务器
   if (isEditingServer.value && currentServerName.value && currentServerName.value !== name) {
     delete settings.value.mcpServers[currentServerName.value]
   }
@@ -794,7 +367,6 @@ const saveServerFromPanel = async () => {
   settings.value.mcpServers[name] = serverConfig
   currentServerName.value = name
   showServerPanel.value = false
-  // 自动保存到文件
   const dataToSave = JSON.parse(JSON.stringify(settings.value))
   const result = await window.electronAPI.saveSettings(dataToSave)
   if (result.success) {
@@ -802,9 +374,11 @@ const saveServerFromPanel = async () => {
     modified.value = false
   }
 }
-const addServer = async () => {
+
+const addServer = () => {
   openAddServerPanel()
 }
+
 const deleteServer = async () => {
   const serverName = isEditingServer.value ? editingServerData.value.name : currentServerName.value
   if (!serverName) return
@@ -815,7 +389,6 @@ const deleteServer = async () => {
   delete settings.value.mcpServers[serverName]
   currentServerName.value = null
   showServerPanel.value = false
-  // 自动保存到文件
   const dataToSave = JSON.parse(JSON.stringify(settings.value))
   const result = await window.electronAPI.saveSettings(dataToSave)
   if (result.success) {
@@ -823,50 +396,42 @@ const deleteServer = async () => {
     modified.value = false
   }
 }
-const currentServer = computed(() => {
-  if (!currentServerName.value || !settings.value.mcpServers) return null
-  return settings.value.mcpServers[currentServerName.value]
-})
+
 const minimize = () => window.electronAPI.minimize()
 const maximize = () => window.electronAPI.maximize()
 const close = () => window.electronAPI.close()
-const closeInputDialog = result => {
+
+const handleInputConfirm = result => {
   if (showInputDialog.value.callback) {
-    // 如果是确认对话框，传递 result（true/false）
-    // 如果是输入对话框，点击确定传递输入值，点击取消传递 false
-    if (showInputDialog.value.isConfirm) {
-      showInputDialog.value.callback(result)
-    } else {
-      showInputDialog.value.callback(result ? inputDialogValue.value : false)
-    }
+    showInputDialog.value.callback(result)
   }
   showInputDialog.value.show = false
   showInputDialog.value.isConfirm = false
   showInputDialog.value.defaultValue = ''
-  inputDialogValue.value = ''
 }
-// Message Dialog
+
+const closeInputDialog = () => {
+  if (showInputDialog.value.callback) {
+    showInputDialog.value.callback(false)
+  }
+  showInputDialog.value.show = false
+  showInputDialog.value.isConfirm = false
+  showInputDialog.value.defaultValue = ''
+}
+
 const showMessage = ({ type = 'info', title, message }) => {
   return new Promise(resolve => {
     showMessageDialog.value = { show: true, type, title, message, callback: resolve }
   })
 }
+
 const closeMessageDialog = () => {
   if (showMessageDialog.value.callback) {
     showMessageDialog.value.callback(true)
   }
   showMessageDialog.value.show = false
 }
-// Watch for dialog open to set default value
-watch(
-  () => showInputDialog.value.show,
-  show => {
-    if (show && showInputDialog.value.defaultValue) {
-      inputDialogValue.value = showInputDialog.value.defaultValue
-    }
-  },
-)
-// Apply theme class to body when theme changes
+
 watch(
   () => settings.value.theme,
   theme => {
@@ -880,1075 +445,24 @@ watch(
     }
   },
 )
+
 onMounted(async () => {
   await loadApiProfiles()
   await loadSettings()
-  // 同步初始语言到 i18n
   locale.value = settings.value.language
-  // 应用初始主题
   const cls = themeClass.value
   if (cls) {
     document.body.classList.add(cls)
   }
-  // 监听托盘切换 API 配置事件
   window.electronAPI.onApiProfileSwitched(async profileName => {
     currentApiProfile.value = profileName
     await loadSettings()
   })
 })
 
-onUnmounted(() => {
-  // 清理监听器
-})
+onUnmounted(() => {})
 </script>
-<style>
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-:root {
-  --bg-primary: #f8fafc;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #f1f5f9;
-  --bg-hover: #e2e8f0;
-  --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-tertiary: #94a3b8;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
-  --accent-light: #eff6ff;
-  --border: #e2e8f0;
-  --border-light: #f1f5f9;
-  --success: #10b981;
-  --danger: #ef4444;
-  --radius: 6px;
-  --radius-lg: 10px;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
-}
-/* Animations */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  height: 100vh;
-  overflow: hidden;
-  user-select: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-/* Dark Theme Variables */
-.dark,
-.solarized-dark {
-  --bg-primary: #1a1a2e;
-  --bg-secondary: #16213e;
-  --bg-tertiary: #0f3460;
-  --bg-hover: #1f4068;
-  --text-primary: #e4e4e7;
-  --text-secondary: #a1a1aa;
-  --text-tertiary: #71717a;
-  --accent: #60a5fa;
-  --accent-hover: #3b82f6;
-  --accent-light: rgba(96, 165, 250, 0.15);
-  --border: #2d2d44;
-  --border-light: #232338;
-  --success: #34d399;
-  --danger: #f87171;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
-}
 
-/* Solarized Dark specific overrides */
-.solarized-dark {
-  --bg-primary: #002b36;
-  --bg-secondary: #073642;
-  --bg-tertiary: #094856;
-  --bg-hover: #0a5a6f;
-  --text-primary: #839496;
-  --text-secondary: #93a1a1;
-  --text-tertiary: #586e75;
-  --accent: #268bd2;
-  --accent-hover: #1a73c0;
-  --accent-light: rgba(38, 139, 210, 0.15);
-  --border: #1d3a47;
-  --border-light: #0d3a47;
-  --success: #2aa198;
-  --danger: #dc322f;
-}
-
-/* Scrollbar Styles */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 4px;
-  transition: background 0.2s ease;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-tertiary);
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
-}
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-/* Titlebar */
-.titlebar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 36px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  -webkit-app-region: drag;
-}
-.titlebar-left {
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-  gap: 10px;
-}
-.titlebar-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  letter-spacing: -0.01em;
-}
-.titlebar-controls {
-  display: flex;
-  -webkit-app-region: no-drag;
-}
-.titlebar-btn {
-  width: 48px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.titlebar-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  transform: scale(1.05);
-}
-.titlebar-btn:active {
-  transform: scale(0.95);
-}
-.titlebar-btn.close:hover {
-  background: var(--danger);
-  color: white;
-}
-.titlebar-btn svg {
-  width: 12px;
-  height: 12px;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  fill: none;
-}
-/* Buttons */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  padding: 9px 18px;
-  border: none;
-  border-radius: var(--radius);
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  letter-spacing: -0.01em;
-  position: relative;
-  overflow: hidden;
-}
-.btn::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition:
-    width 0.4s ease,
-    height 0.4s ease;
-}
-.btn:active::after {
-  width: 200px;
-  height: 200px;
-}
-.btn-primary {
-  background: var(--accent);
-  color: white;
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
-}
-.btn-primary:hover {
-  background: var(--accent-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
-}
-.btn-primary:active {
-  transform: translateY(0) scale(0.98);
-}
-.btn-secondary:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  border-color: var(--text-tertiary);
-}
-.btn-secondary:active {
-  transform: scale(0.98);
-}
-.btn-danger {
-  background: var(--danger);
-  color: white;
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
-}
-.btn-danger:hover {
-  background: #dc2626;
-  transform: translateY(-1px);
-}
-.btn-danger:active {
-  transform: translateY(0) scale(0.98);
-}
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-/* Main Layout */
-.main {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-/* Sidebar */
-.sidebar {
-  width: 220px;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border);
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-}
-.sidebar-section {
-  margin-bottom: 20px;
-}
-.sidebar-title {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 6px 10px;
-  margin-bottom: 4px;
-}
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--text-secondary);
-  margin-bottom: 2px;
-  position: relative;
-}
-.nav-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  background: var(--accent);
-  border-radius: var(--radius) 0 0 var(--radius);
-  transition: width 0.2s ease;
-}
-.nav-item:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-.nav-item.active {
-  background: var(--accent-light);
-  color: var(--accent);
-  font-weight: 500;
-  animation: slideIn 0.3s ease;
-}
-.nav-item.active::before {
-  width: 3px;
-}
-.nav-item-text {
-  font-size: 13px;
-  letter-spacing: -0.01em;
-}
-.nav-item-badge {
-  margin-left: auto;
-  background: var(--bg-tertiary);
-  padding: 2px 7px;
-  border-radius: 12px;
-  font-size: 11px;
-  color: var(--text-tertiary);
-  font-weight: 500;
-}
-.nav-item.active .nav-item-badge {
-  background: var(--accent);
-  color: white;
-}
-/* Content */
-.content {
-  flex: 1;
-  padding: 28px 32px;
-  overflow-y: auto;
-  background: var(--bg-primary);
-}
-.content section {
-  animation: fadeIn 0.35s ease;
-}
-.content-header {
-  margin-bottom: 28px;
-}
-.content-title {
-  font-size: 22px;
-  font-weight: 600;
-  margin-bottom: 6px;
-  letter-spacing: -0.03em;
-  animation: slideIn 0.3s ease;
-}
-.content-desc {
-  font-size: 14px;
-  color: var(--text-tertiary);
-  animation: fadeIn 0.4s ease 0.1s backwards;
-}
-/* Cards */
-.card {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border);
-  padding: 20px 24px;
-  margin-bottom: 20px;
-  box-shadow: var(--shadow-sm);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: fadeIn 0.4s ease backwards;
-}
-.card:nth-child(1) {
-  animation-delay: 0.05s;
-}
-.card:nth-child(2) {
-  animation-delay: 0.1s;
-}
-.card:nth-child(3) {
-  animation-delay: 0.15s;
-}
-.card:hover {
-  box-shadow: var(--shadow);
-  transform: translateY(-1px);
-}
-.card-title {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 18px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-.card-title .iconpark-icon {
-  color: var(--accent);
-}
-/* Form Elements */
-.form-group {
-  margin-bottom: 18px;
-}
-.form-group:last-child {
-  margin-bottom: 0;
-}
-.form-label {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: var(--text-secondary);
-  letter-spacing: -0.01em;
-}
-.form-input {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
-  font-size: 13px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  letter-spacing: -0.01em;
-}
-.form-input:hover {
-  border-color: var(--text-tertiary);
-}
-.form-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-light);
-  transform: translateY(-1px);
-}
-.form-input::placeholder {
-  color: var(--text-tertiary);
-}
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
-}
-.form-select {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 400;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  cursor: pointer;
-  appearance: none;
-  letter-spacing: -0.01em;
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  padding-right: 40px;
-  transition: all 0.2s ease;
-  position: relative;
-}
-.form-select:hover {
-  border-color: var(--text-tertiary);
-  background-color: var(--bg-tertiary);
-}
-.form-select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-light);
-}
-.form-textarea {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
-  font-size: 13px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  resize: vertical;
-  min-height: 80px;
-  line-height: 1.5;
-  transition: all 0.2s ease;
-}
-.form-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-light);
-}
-/* Server List */
-.server-list {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--bg-secondary);
-}
-.server-item {
-  display: flex;
-  align-items: center;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border-light);
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: fadeIn 0.3s ease backwards;
-}
-.server-item:nth-child(1) {
-  animation-delay: 0.02s;
-}
-.server-item:nth-child(2) {
-  animation-delay: 0.04s;
-}
-.server-item:nth-child(3) {
-  animation-delay: 0.06s;
-}
-.server-item:nth-child(4) {
-  animation-delay: 0.08s;
-}
-.server-item:nth-child(5) {
-  animation-delay: 0.1s;
-}
-.server-item:nth-child(6) {
-  animation-delay: 0.12s;
-}
-.server-item:nth-child(7) {
-  animation-delay: 0.14s;
-}
-.server-item:nth-child(8) {
-  animation-delay: 0.16s;
-}
-.server-item:last-child {
-  border-bottom: none;
-}
-.server-item:hover {
-  background: var(--bg-tertiary);
-  transform: translateX(4px);
-}
-.server-item.selected {
-  background: var(--accent-light);
-  border-left: 3px solid var(--accent);
-  padding-left: 15px;
-}
-.server-info {
-  flex: 1;
-  min-width: 0;
-}
-.server-name {
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: -0.01em;
-}
-.server-desc {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  margin-top: 3px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.server-status {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--success);
-  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
-  animation: pulse 2s ease-in-out infinite;
-}
-/* Empty State */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  text-align: center;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-lg);
-}
-.empty-state-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.3;
-  color: var(--text-tertiary);
-}
-.empty-state-title {
-  font-size: 15px;
-  font-weight: 500;
-  margin-bottom: 6px;
-  color: var(--text-secondary);
-}
-.empty-state-desc {
-  font-size: 13px;
-  color: var(--text-tertiary);
-  margin-bottom: 20px;
-}
-/* Footer */
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 24px;
-  background: var(--bg-secondary);
-  border-top: 1px solid var(--border);
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-.footer-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.footer-status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--success);
-  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
-}
-.footer-modified {
-  color: var(--accent);
-  font-weight: 500;
-}
-/* Dialog */
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(15, 23, 42, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.15s ease;
-}
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.dialog {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  min-width: 360px;
-  max-width: 480px;
-  box-shadow: var(--shadow-lg);
-  animation: slideUp 0.2s ease;
-}
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.dialog-title {
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 18px;
-  letter-spacing: -0.01em;
-}
-.dialog-confirm-text {
-  font-size: 14px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-  line-height: 1.5;
-}
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 22px;
-}
-.dialog-overlay-top {
-  z-index: 1300;
-}
-/* Message Dialog */
-.message-dialog {
-  position: relative;
-  text-align: center;
-  padding: 32px 24px;
-  z-index: 1400;
-}
-.message-dialog-icon {
-  width: 48px;
-  height: 48px;
-  margin: 0 auto 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.message-dialog-icon svg {
-  width: 24px;
-  height: 24px;
-}
-.message-dialog-icon-info {
-  background: rgba(59, 130, 246, 0.1);
-  color: var(--accent);
-}
-.message-dialog-icon-success {
-  background: rgba(16, 185, 129, 0.1);
-  color: var(--success);
-}
-.message-dialog-icon-warning {
-  background: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
-}
-.message-dialog-icon-error {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--danger);
-}
-.message-dialog-title {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: var(--text-primary);
-}
-.message-dialog-message {
-  font-size: 14px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-.message-dialog .dialog-actions {
-  justify-content: center;
-  margin-top: 24px;
-}
-.message-dialog .dialog-actions .btn {
-  min-width: 100px;
-}
-.iconpark-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: -0.125em;
-  flex-shrink: 0;
-}
-.iconpark-icon svg {
-  display: block;
-}
-/* Profile List (API Configuration Cards) */
-.profile-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.profile-item {
-  display: flex;
-  align-items: center;
-  padding: 14px 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: fadeIn 0.3s ease backwards;
-}
-.profile-item:nth-child(1) {
-  animation-delay: 0.02s;
-}
-.profile-item:nth-child(2) {
-  animation-delay: 0.04s;
-}
-.profile-item:nth-child(3) {
-  animation-delay: 0.06s;
-}
-.profile-item:nth-child(4) {
-  animation-delay: 0.08s;
-}
-.profile-item:nth-child(5) {
-  animation-delay: 0.1s;
-}
-.profile-item:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--text-tertiary);
-  transform: translateX(4px);
-}
-.profile-item.active {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
-  box-shadow:
-    0 0 0 1px var(--accent),
-    0 4px 12px rgba(59, 130, 246, 0.15);
-}
-.profile-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-.profile-icon-text {
-  font-size: 16px;
-  font-weight: 700;
-  color: white;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-.profile-info {
-  flex: 1;
-  min-width: 0;
-  margin-left: 14px;
-}
-.profile-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-.profile-url {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  margin-top: 3px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.profile-status {
-  margin-left: 12px;
-}
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  background: rgba(59, 130, 246, 0.1);
-  color: var(--accent);
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 500;
-}
-.status-badge svg {
-  width: 12px;
-  height: 12px;
-}
-.profile-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: 12px;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-.profile-item:hover .profile-actions,
-.profile-item.active .profile-actions {
-  opacity: 1;
-}
-.action-btn {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius);
-  transition: all 0.2s ease;
-}
-.action-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-.action-btn.action-btn-danger:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--danger);
-}
-.btn-sm {
-  padding: 6px 12px;
-  font-size: 12px;
-}
-/* Side Panel */
-.side-panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(15, 23, 42, 0.5);
-  backdrop-filter: blur(2px);
-  z-index: 1000;
-  animation: fadeIn 0.2s ease;
-}
-.side-panel {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 420px;
-  max-width: 100%;
-  background: var(--bg-secondary);
-  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-.side-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-tertiary);
-}
-.side-panel-title {
-  font-size: 15px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-.side-panel-title .iconpark-icon {
-  color: var(--accent);
-}
-.side-panel-close {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius);
-  transition: all 0.2s ease;
-}
-.side-panel-close:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-.side-panel-close svg {
-  width: 14px;
-  height: 14px;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  fill: none;
-}
-.side-panel-body {
-  flex: 1;
-  padding: 24px;
-  overflow-y: auto;
-}
-.side-panel-body .form-group {
-  margin-bottom: 20px;
-}
-.side-panel-body .form-group:last-child {
-  margin-bottom: 0;
-}
-.form-required {
-  color: var(--danger);
-  font-weight: 500;
-}
-.side-panel-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-tertiary);
-}
-.side-panel-footer-right {
-  display: flex;
-  gap: 10px;
-}
-/* API Edit Dialog */
-.api-edit-dialog {
-  min-width: 480px;
-  max-width: 520px;
-  padding: 0;
-  overflow: hidden;
-}
-.api-edit-dialog .dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-tertiary);
-}
-.api-edit-dialog .dialog-title {
-  font-size: 15px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-primary);
-  margin-bottom: 0;
-}
-.api-edit-dialog .dialog-title .iconpark-icon {
-  color: var(--accent);
-}
-.api-edit-dialog .dialog-body {
-  padding: 24px;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-.api-edit-dialog .dialog-body .form-group {
-  margin-bottom: 18px;
-}
-.api-edit-dialog .dialog-body .form-group:last-child {
-  margin-bottom: 0;
-}
-.api-edit-dialog .dialog-actions {
-  padding: 16px 24px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-tertiary);
-  margin-top: 0;
-}
+<style lang="less">
+@import './styles/global.less';
 </style>
diff --git a/src/components/ApiProfileDialog.vue b/src/components/ApiProfileDialog.vue
new file mode 100644
index 0000000..5a9f354
--- /dev/null
+++ b/src/components/ApiProfileDialog.vue
@@ -0,0 +1,181 @@
+<template>
+  <!-- API Create Dialog -->
+  <div v-if="showCreate" class="dialog-overlay dialog-overlay-top" @keyup.esc="$emit('close-create')" tabindex="-1">
+    <div class="dialog api-edit-dialog" @click.stop>
+      <div class="dialog-header">
+        <div class="dialog-title">
+          <Key size="18" />
+          {{ $t('api.createTitle') }}
+        </div>
+        <button class="side-panel-close" @click="$emit('close-create')">
+          <svg viewBox="0 0 10 10">
+            <line x1="0" y1="0" x2="10" y2="10" />
+            <line x1="10" y1="0" x2="0" y2="10" />
+          </svg>
+        </button>
+      </div>
+      <div class="dialog-body">
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.configName') }} <span class="form-required">*</span></label>
+          <input type="text" class="form-input" v-model="createData.name" :placeholder="$t('api.configNamePlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.authType') }}</label>
+          <select class="form-select" v-model="createData.selectedAuthType">
+            <option value="iflow">{{ $t('api.auth.iflow') }}</option>
+            <option value="api">{{ $t('api.auth.api') }}</option>
+            <option value="openai-compatible">{{ $t('api.auth.openaiCompatible') }}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.apiKey') }}</label>
+          <input type="password" class="form-input" v-model="createData.apiKey" :placeholder="$t('api.apiKeyPlaceholder')" />
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label">{{ $t('api.baseUrl') }}</label>
+            <input type="text" class="form-input" v-model="createData.baseUrl" :placeholder="$t('api.baseUrlPlaceholder')" />
+          </div>
+          <div class="form-group">
+            <label class="form-label">{{ $t('api.modelName') }}</label>
+            <input type="text" class="form-input" v-model="createData.modelName" :placeholder="$t('api.modelNamePlaceholder')" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.searchApiKey') }}</label>
+          <input type="password" class="form-input" v-model="createData.searchApiKey" :placeholder="$t('api.searchApiKeyPlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.cna') }}</label>
+          <input type="text" class="form-input" v-model="createData.cna" :placeholder="$t('api.cnaPlaceholder')" />
+        </div>
+      </div>
+      <div class="dialog-actions">
+        <button class="btn btn-secondary" @click="$emit('close-create')">{{ $t('dialog.cancel') }}</button>
+        <button class="btn btn-primary" @click="$emit('save-create', createData)">
+          <Save size="14" />
+          {{ $t('api.create') }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- API Edit Dialog -->
+  <div v-if="showEdit" class="dialog-overlay dialog-overlay-top" @keyup.esc="$emit('close-edit')" tabindex="-1">
+    <div class="dialog api-edit-dialog" @click.stop>
+      <div class="dialog-header">
+        <div class="dialog-title">
+          <Key size="18" />
+          {{ $t('api.editTitle') }}
+        </div>
+        <button class="side-panel-close" @click="$emit('close-edit')">
+          <svg viewBox="0 0 10 10">
+            <line x1="0" y1="0" x2="10" y2="10" />
+            <line x1="10" y1="0" x2="0" y2="10" />
+          </svg>
+        </button>
+      </div>
+      <div class="dialog-body">
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.authType') }}</label>
+          <select class="form-select" v-model="editData.selectedAuthType">
+            <option value="iflow">{{ $t('api.auth.iflow') }}</option>
+            <option value="api">{{ $t('api.auth.api') }}</option>
+            <option value="openai-compatible">{{ $t('api.auth.openaiCompatible') }}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.apiKey') }}</label>
+          <input type="password" class="form-input" v-model="editData.apiKey" :placeholder="$t('api.apiKeyPlaceholder')" />
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label">{{ $t('api.baseUrl') }}</label>
+            <input type="text" class="form-input" v-model="editData.baseUrl" :placeholder="$t('api.baseUrlPlaceholder')" />
+          </div>
+          <div class="form-group">
+            <label class="form-label">{{ $t('api.modelName') }}</label>
+            <input type="text" class="form-input" v-model="editData.modelName" :placeholder="$t('api.modelNamePlaceholder')" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.searchApiKey') }}</label>
+          <input type="password" class="form-input" v-model="editData.searchApiKey" :placeholder="$t('api.searchApiKeyPlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('api.cna') }}</label>
+          <input type="text" class="form-input" v-model="editData.cna" :placeholder="$t('api.cnaPlaceholder')" />
+        </div>
+      </div>
+      <div class="dialog-actions">
+        <button class="btn btn-secondary" @click="$emit('close-edit')">{{ $t('dialog.cancel') }}</button>
+        <button class="btn btn-primary" @click="$emit('save-edit', editData)">
+          <Save size="14" />
+          {{ $t('api.save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Key, Save } from '@icon-park/vue-next'
+
+defineProps({
+  showCreate: Boolean,
+  showEdit: Boolean,
+  createData: Object,
+  editData: Object
+})
+
+defineEmits([
+  'close-create', 'save-create',
+  'close-edit', 'save-edit'
+])
+</script>
+
+<style lang="less" scoped>
+.api-edit-dialog {
+  min-width: 480px;
+  max-width: 520px;
+  padding: 0;
+  overflow: hidden;
+}
+.api-edit-dialog .dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+.api-edit-dialog .dialog-title {
+  font-size: 15px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-primary);
+  margin-bottom: 0;
+}
+.api-edit-dialog .dialog-title .iconpark-icon {
+  color: var(--accent);
+}
+.api-edit-dialog .dialog-body {
+  padding: 24px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.api-edit-dialog .dialog-body .form-group {
+  margin-bottom: 18px;
+}
+.api-edit-dialog .dialog-body .form-group:last-child {
+  margin-bottom: 0;
+}
+.api-edit-dialog .dialog-actions {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-tertiary);
+  margin-top: 0;
+}
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..e984dce
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,43 @@
+<template>
+  <footer class="footer">
+    <div class="footer-status">
+      <div class="footer-status-dot"></div>
+      <span>{{ $t('api.currentConfig') }}: {{ currentProfile }}</span>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+defineProps({
+  currentProfile: {
+    type: String,
+    default: 'default'
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.footer {
+  height: 28px;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+.footer-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+.footer-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+}
+</style>
diff --git a/src/components/InputDialog.vue b/src/components/InputDialog.vue
new file mode 100644
index 0000000..3626f48
--- /dev/null
+++ b/src/components/InputDialog.vue
@@ -0,0 +1,94 @@
+<template>
+  <div v-if="dialog.show" class="dialog-overlay dialog-overlay-top">
+    <div class="dialog" @click.stop>
+      <div class="dialog-title">{{ dialog.title }}</div>
+      <div v-if="dialog.isConfirm" class="dialog-confirm-text">{{ dialog.placeholder }}</div>
+      <input
+        v-else
+        type="text"
+        class="form-input"
+        v-model="inputValue"
+        :placeholder="dialog.placeholder"
+        @keyup.enter="$emit('confirm', dialog.isConfirm ? true : inputValue)"
+        autofocus
+      />
+      <div class="dialog-actions">
+        <button class="btn btn-secondary" @click="$emit('cancel')">{{ $t('dialog.cancel') }}</button>
+        <button class="btn btn-primary" @click="$emit('confirm', dialog.isConfirm ? true : inputValue)">{{ $t('dialog.confirm') }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  dialog: {
+    type: Object,
+    default: () => ({ show: false, title: '', placeholder: '', isConfirm: false })
+  }
+})
+
+defineEmits(['confirm', 'cancel'])
+
+const inputValue = ref('')
+
+watch(() => props.dialog.show, (show) => {
+  if (show) {
+    inputValue.value = props.dialog.defaultValue || ''
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1300;
+  animation: fadeIn 0.15s ease;
+}
+.dialog {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  min-width: 360px;
+  max-width: 480px;
+  box-shadow: var(--shadow-lg);
+  animation: slideUp 0.2s ease;
+}
+.dialog-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 18px;
+  letter-spacing: -0.01em;
+}
+.dialog-confirm-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 22px;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>
diff --git a/src/components/MessageDialog.vue b/src/components/MessageDialog.vue
new file mode 100644
index 0000000..2ca3135
--- /dev/null
+++ b/src/components/MessageDialog.vue
@@ -0,0 +1,113 @@
+<template>
+  <div v-if="dialog.show" class="dialog-overlay dialog-overlay-top">
+    <div class="dialog message-dialog" @click.stop>
+      <div class="message-dialog-icon" :class="'message-dialog-icon-' + dialog.type">
+        <svg v-if="dialog.type === 'info'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" />
+        </svg>
+        <svg v-else-if="dialog.type === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M9 12l2 2 4-4" />
+        </svg>
+        <svg v-else-if="dialog.type === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+        <svg v-else-if="dialog.type === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="15" y1="9" x2="9" y2="15" />
+          <line x1="9" y1="9" x2="15" y2="15" />
+        </svg>
+      </div>
+      <div class="message-dialog-title">{{ dialog.title }}</div>
+      <div class="message-dialog-message">{{ dialog.message }}</div>
+      <div class="dialog-actions">
+        <button class="btn btn-primary" @click="$emit('close')">{{ $t('dialog.confirm') }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  dialog: {
+    type: Object,
+    default: () => ({ show: false, type: 'info', title: '', message: '' })
+  }
+})
+
+defineEmits(['close'])
+</script>
+
+<style lang="less" scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1300;
+  animation: fadeIn 0.15s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.message-dialog {
+  position: relative;
+  text-align: center;
+  padding: 32px 24px;
+  z-index: 1400;
+}
+.message-dialog-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.message-dialog-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.message-dialog-icon-info {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--accent);
+}
+.message-dialog-icon-success {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success);
+}
+.message-dialog-icon-warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+.message-dialog-icon-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--danger);
+}
+.message-dialog-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+.message-dialog-message {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.message-dialog .dialog-actions {
+  justify-content: center;
+  margin-top: 24px;
+}
+</style>
diff --git a/src/components/ServerPanel.vue b/src/components/ServerPanel.vue
new file mode 100644
index 0000000..eca693d
--- /dev/null
+++ b/src/components/ServerPanel.vue
@@ -0,0 +1,199 @@
+<template>
+  <div v-if="show" class="side-panel-overlay" @keyup.esc="$emit('close')" tabindex="-1" ref="overlay">
+    <div class="side-panel" @click.stop>
+      <div class="side-panel-header">
+        <div class="side-panel-title">
+          <Server size="18" />
+          {{ isEditing ? $t('mcp.editServer') : $t('mcp.addServer') }}
+        </div>
+        <button class="side-panel-close" @click="$emit('close')">
+          <svg viewBox="0 0 10 10">
+            <line x1="0" y1="0" x2="10" y2="10" />
+            <line x1="10" y1="0" x2="0" y2="10" />
+          </svg>
+        </button>
+      </div>
+      <div class="side-panel-body">
+        <div class="form-group">
+          <label class="form-label">{{ $t('mcp.serverName') }} <span class="form-required">*</span></label>
+          <input type="text" class="form-input" v-model="localData.name" :placeholder="$t('mcp.serverNamePlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('mcp.descriptionLabel') }}</label>
+          <input type="text" class="form-input" v-model="localData.description" :placeholder="$t('mcp.descriptionPlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('mcp.command') }} <span class="form-required">*</span></label>
+          <input type="text" class="form-input" v-model="localData.command" :placeholder="$t('mcp.commandPlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('mcp.workingDir') }}</label>
+          <input type="text" class="form-input" v-model="localData.cwd" :placeholder="$t('mcp.cwdPlaceholder')" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('mcp.args') }}</label>
+          <textarea class="form-textarea" v-model="localData.args" rows="4" :placeholder="$t('mcp.argsPlaceholder')"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('mcp.envVars') }}</label>
+          <textarea class="form-textarea" v-model="localData.env" rows="3" :placeholder="$t('mcp.envVarsPlaceholder')"></textarea>
+        </div>
+      </div>
+      <div class="side-panel-footer">
+        <button v-if="isEditing" class="btn btn-danger" @click="$emit('delete')">
+          <Delete size="14" />
+          {{ $t('mcp.delete') }}
+        </button>
+        <div class="side-panel-footer-right">
+          <button class="btn btn-secondary" @click="$emit('close')">{{ $t('dialog.cancel') }}</button>
+          <button class="btn btn-primary" @click="$emit('save', localData)">
+            <Save size="14" />
+            {{ isEditing ? $t('mcp.saveChanges') : $t('mcp.addServer') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+import { Server, Save, Delete } from '@icon-park/vue-next'
+
+const props = defineProps({
+  show: Boolean,
+  isEditing: Boolean,
+  data: Object
+})
+
+const emit = defineEmits(['close', 'save', 'delete'])
+
+const overlay = ref(null)
+const localData = ref({
+  name: '',
+  description: '',
+  command: 'npx',
+  cwd: '.',
+  args: '',
+  env: ''
+})
+
+watch(() => props.show, (val) => {
+  if (val && props.data) {
+    localData.value = { ...props.data }
+    nextTick(() => overlay.value?.focus())
+  }
+})
+
+watch(() => props.data, (val) => {
+  if (val) {
+    localData.value = { ...val }
+  }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+.side-panel-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(2px);
+  z-index: 1000;
+  animation: fadeIn 0.2s ease;
+}
+.side-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 420px;
+  max-width: 100%;
+  background: var(--bg-secondary);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.side-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+.side-panel-title {
+  font-size: 15px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+.side-panel-title .iconpark-icon {
+  color: var(--accent);
+}
+.side-panel-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
+}
+.side-panel-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.side-panel-close svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  fill: none;
+}
+.side-panel-body {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+.side-panel-body .form-group {
+  margin-bottom: 20px;
+}
+.side-panel-body .form-group:last-child {
+  margin-bottom: 0;
+}
+.form-required {
+  color: var(--danger);
+  font-weight: 500;
+}
+.side-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+.side-panel-footer-right {
+  display: flex;
+  gap: 10px;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+</style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
new file mode 100644
index 0000000..cf81164
--- /dev/null
+++ b/src/components/SideBar.vue
@@ -0,0 +1,97 @@
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-section">
+      <div class="sidebar-title">{{ $t('sidebar.general') }}</div>
+      <div class="nav-item" :class="{ active: currentSection === 'general' }" @click="$emit('navigate', 'general')">
+        <Config size="16" />
+        <span class="nav-item-text">{{ $t('sidebar.basicSettings') }}</span>
+      </div>
+      <div class="nav-item" :class="{ active: currentSection === 'api' }" @click="$emit('navigate', 'api')">
+        <Key size="16" />
+        <span class="nav-item-text">{{ $t('sidebar.apiConfig') }}</span>
+      </div>
+    </div>
+    <div class="sidebar-section">
+      <div class="sidebar-title">{{ $t('sidebar.advanced') }}</div>
+      <div class="nav-item" :class="{ active: currentSection === 'mcp' }" @click="$emit('navigate', 'mcp')">
+        <Server size="16" />
+        <span class="nav-item-text">{{ $t('sidebar.mcpServers') }}</span>
+        <span class="nav-item-badge">{{ serverCount }}</span>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { Config, Key, Server } from '@icon-park/vue-next'
+
+defineProps({
+  currentSection: {
+    type: String,
+    default: 'general',
+  },
+  serverCount: {
+    type: Number,
+    default: 0,
+  },
+})
+
+defineEmits(['navigate'])
+</script>
+
+<style lang="less" scoped>
+.sidebar {
+  width: 240px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  padding: 24px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+.sidebar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sidebar-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+  padding: 0 14px;
+  margin-bottom: 8px;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  gap: 5px;
+}
+.nav-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.nav-item.active {
+  background: var(--accent-light);
+  color: var(--accent);
+}
+.nav-item-badge {
+  margin-left: auto;
+  background: var(--bg-tertiary);
+  color: var(--text-tertiary);
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+</style>
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
new file mode 100644
index 0000000..d2d5566
--- /dev/null
+++ b/src/components/TitleBar.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="titlebar">
+    <div class="titlebar-left">
+      <span class="titlebar-title">{{ $t('app.title') }}</span>
+    </div>
+    <div class="titlebar-controls">
+      <button class="titlebar-btn" @click="minimize" :title="$t('window.minimize')">
+        <svg viewBox="0 0 10 1"><line x1="0" y1="0.5" x2="10" y2="0.5" /></svg>
+      </button>
+      <button class="titlebar-btn" @click="maximize" :title="$t('window.maximize')">
+        <svg viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" stroke-width="1" stroke="currentColor" fill="none" /></svg>
+      </button>
+      <button class="titlebar-btn close" @click="close" :title="$t('window.close')">
+        <svg viewBox="0 0 10 10">
+          <line x1="0" y1="0" x2="10" y2="10" />
+          <line x1="10" y1="0" x2="0" y2="10" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const minimize = () => window.electronAPI.minimize()
+const maximize = () => window.electronAPI.maximize()
+const close = () => window.electronAPI.close()
+</script>
+
+<style lang="less" scoped>
+.titlebar {
+  height: 32px;
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  -webkit-app-region: drag;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.titlebar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.titlebar-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+.titlebar-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  -webkit-app-region: no-drag;
+}
+.titlebar-btn {
+  width: 32px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+.titlebar-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.titlebar-btn.close:hover {
+  background: var(--danger);
+  color: white;
+}
+.titlebar-btn svg {
+  width: 10px;
+  height: 10px;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  fill: none;
+}
+</style>
diff --git a/src/styles/global.less b/src/styles/global.less
new file mode 100644
index 0000000..7839cb9
--- /dev/null
+++ b/src/styles/global.less
@@ -0,0 +1,702 @@
+// Global styles
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-primary: #f8fafc;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f1f5f9;
+  --bg-hover: #e2e8f0;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-tertiary: #94a3b8;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --accent-light: #eff6ff;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  --success: #10b981;
+  --danger: #ef4444;
+  --radius: 6px;
+  --radius-lg: 10px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  height: 100vh;
+  overflow: hidden;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.dark,
+.solarized-dark {
+  --bg-primary: #1a1a2e;
+  --bg-secondary: #16213e;
+  --bg-tertiary: #0f3460;
+  --bg-hover: #1f4068;
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --accent: #60a5fa;
+  --accent-hover: #3b82f6;
+  --accent-light: rgba(96, 165, 250, 0.15);
+  --border: #2d2d44;
+  --border-light: #232338;
+  --success: #34d399;
+  --danger: #f87171;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+}
+
+.solarized-dark {
+  --bg-primary: #002b36;
+  --bg-secondary: #073642;
+  --bg-tertiary: #094856;
+  --bg-hover: #0a5a6f;
+  --text-primary: #839496;
+  --text-secondary: #93a1a1;
+  --text-tertiary: #586e75;
+  --accent: #268bd2;
+  --accent-hover: #1a73c0;
+  --accent-light: rgba(38, 139, 210, 0.15);
+  --border: #1d3a47;
+  --border-light: #0d3a47;
+  --success: #2aa198;
+  --danger: #dc322f;
+}
+
+// Scrollbar styles
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+// Shared layout styles
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.content {
+  flex: 1;
+  padding: 28px 32px;
+  overflow-y: auto;
+  background: var(--bg-primary);
+}
+
+.content section {
+  animation: fadeIn 0.35s ease;
+}
+
+// Content header (shared across all views)
+.content-header {
+  margin-bottom: 24px;
+}
+
+.content-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  letter-spacing: -0.03em;
+  animation: slideIn 0.3s ease;
+  color: var(--text-primary);
+}
+
+.content-desc {
+  font-size: 14px;
+  color: var(--text-tertiary);
+  animation: fadeIn 0.4s ease 0.1s backwards;
+  margin-top: 6px;
+  line-height: 1.5;
+}
+.content-header {
+  margin-bottom: 28px;
+}
+
+// Card (shared across GeneralSettings and ApiConfig)
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 20px 24px;
+  margin-bottom: 20px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fadeIn 0.4s ease backwards;
+}
+
+.card:last-child {
+  margin-bottom: 0;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  gap: 5px;
+}
+.card-title .iconpark-icon {
+  color: var(--accent);
+}
+
+.card:nth-child(1) {
+  animation-delay: 0.05s;
+}
+.card:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.card:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-1px);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+// Form styles
+.form-group {
+  margin-bottom: 18px;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+  letter-spacing: -0.01em;
+}
+
+.form-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+  font-size: 13px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  letter-spacing: -0.01em;
+}
+
+.form-input:hover {
+  border-color: var(--text-tertiary);
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-light);
+  transform: translateY(-1px);
+}
+
+.form-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.form-select {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  cursor: pointer;
+  appearance: none;
+  letter-spacing: -0.01em;
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 40px;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.form-select:hover {
+  border-color: var(--text-tertiary);
+  background-color: var(--bg-tertiary);
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.form-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+  font-size: 13px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.5;
+  transition: all 0.2s ease;
+}
+
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+// Icon styles
+.iconpark-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: -0.125em;
+  flex-shrink: 0;
+}
+
+.iconpark-icon svg {
+  display: block;
+}
+
+// Button styles
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 9px 18px;
+  border: none;
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  letter-spacing: -0.01em;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition:
+    width 0.4s ease,
+    height 0.4s ease;
+}
+
+.btn:active::after {
+  width: 200px;
+  height: 200px;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: white;
+  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
+}
+
+.btn-primary:active {
+  transform: translateY(0) scale(0.98);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--text-tertiary);
+}
+
+.btn-secondary:active {
+  transform: scale(0.98);
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+  transform: translateY(-1px);
+}
+
+.btn-danger:active {
+  transform: translateY(0) scale(0.98);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+// Empty state
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+}
+
+.empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.3;
+  color: var(--text-tertiary);
+}
+
+.empty-state-title {
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  color: var(--text-secondary);
+}
+
+.empty-state-desc {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin-bottom: 20px;
+}
+
+// Dialog overlay
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1300;
+  animation: fadeIn 0.15s ease;
+}
+
+.dialog {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  min-width: 360px;
+  max-width: 480px;
+  box-shadow: var(--shadow-lg);
+  animation: slideUp 0.2s ease;
+}
+
+.dialog-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 18px;
+  letter-spacing: -0.01em;
+}
+
+.dialog-confirm-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 22px;
+}
+
+// Message dialog
+.message-dialog {
+  position: relative;
+  text-align: center;
+  padding: 32px 24px;
+  z-index: 1400;
+}
+
+.message-dialog-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.message-dialog-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.message-dialog-icon-info {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--accent);
+}
+
+.message-dialog-icon-success {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success);
+}
+
+.message-dialog-icon-warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.message-dialog-icon-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--danger);
+}
+
+.message-dialog-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.message-dialog-message {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.message-dialog .dialog-actions {
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.message-dialog .dialog-actions .btn {
+  min-width: 100px;
+}
+
+// Server list (used by ApiConfig too)
+.server-list {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--bg-secondary);
+}
+
+.server-item {
+  display: flex;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fadeIn 0.3s ease backwards;
+}
+
+.server-item:nth-child(1) {
+  animation-delay: 0.02s;
+}
+.server-item:nth-child(2) {
+  animation-delay: 0.04s;
+}
+.server-item:nth-child(3) {
+  animation-delay: 0.06s;
+}
+.server-item:nth-child(4) {
+  animation-delay: 0.08s;
+}
+.server-item:nth-child(5) {
+  animation-delay: 0.1s;
+}
+.server-item:nth-child(6) {
+  animation-delay: 0.12s;
+}
+.server-item:nth-child(7) {
+  animation-delay: 0.14s;
+}
+.server-item:nth-child(8) {
+  animation-delay: 0.16s;
+}
+
+.server-item:last-child {
+  border-bottom: none;
+}
+
+.server-item:hover {
+  background: var(--bg-tertiary);
+  transform: translateX(4px);
+}
+
+.server-item.selected {
+  background: var(--accent-light);
+  border-left: 3px solid var(--accent);
+  padding-left: 15px;
+}
+
+.server-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.server-name {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+.server-desc {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.server-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
+  animation: pulse 2s ease-in-out infinite;
+}
diff --git a/src/views/ApiConfig.vue b/src/views/ApiConfig.vue
new file mode 100644
index 0000000..45bccec
--- /dev/null
+++ b/src/views/ApiConfig.vue
@@ -0,0 +1,246 @@
+<template>
+  <section>
+    <div class="content-header">
+      <h1 class="content-title">{{ $t('api.title') }}</h1>
+      <p class="content-desc">{{ $t('api.description') }}</p>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <Exchange size="16" />
+        {{ $t('api.profileManagement') }}
+        <button class="btn btn-primary btn-sm" @click="$emit('create-profile')" style="margin-left: auto">
+          <Add size="14" />
+          {{ $t('api.newProfile') }}
+        </button>
+      </div>
+      <div class="profile-list">
+        <div v-for="profile in profiles" :key="profile.name" class="profile-item" :class="{ active: currentProfile === profile.name }" @click="$emit('select-profile', profile.name)">
+          <div class="profile-icon" :style="getProfileIconStyle(profile.name)">
+            <span class="profile-icon-text">{{ getProfileInitial(profile.name) }}</span>
+          </div>
+          <div class="profile-info">
+            <div class="profile-name">{{ profile.name }}</div>
+            <div class="profile-url">{{ getProfileUrl(profile.name) }}</div>
+          </div>
+          <div class="profile-status" v-if="currentProfile === profile.name">
+            <span class="status-badge">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="3,8 6,11 13,4"></polyline>
+              </svg>
+              {{ $t('api.inUse') }}
+            </span>
+          </div>
+          <div class="profile-actions">
+            <button class="action-btn" @click.stop="$emit('edit-profile', profile.name)" :title="$t('api.edit')">
+              <Edit size="14" />
+            </button>
+            <button class="action-btn" @click.stop="$emit('duplicate-profile', profile.name)" :title="$t('api.duplicate')">
+              <Copy size="14" />
+            </button>
+            <button class="action-btn action-btn-danger" v-if="profile.name !== 'default'" @click.stop="$emit('delete-profile', profile.name)" :title="$t('api.delete')">
+              <Delete size="14" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { Add, Edit, Delete, Exchange, Copy } from '@icon-park/vue-next'
+
+const props = defineProps({
+  profiles: {
+    type: Array,
+    default: () => [],
+  },
+  currentProfile: {
+    type: String,
+    default: 'default',
+  },
+  settings: {
+    type: Object,
+    required: true,
+  },
+})
+
+defineEmits(['create-profile', 'select-profile', 'edit-profile', 'duplicate-profile', 'delete-profile'])
+
+const profileColors = [
+  'linear-gradient(135deg, #f97316 0%, #fb923c 100%)',
+  'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)',
+  'linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%)',
+  'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
+  'linear-gradient(135deg, #f43f5e 0%, #fb7185 100%)',
+  'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)',
+]
+
+const getProfileInitial = name => (name ? name.charAt(0).toUpperCase() : '?')
+
+const getProfileUrl = name => {
+  if (!props.settings.apiProfiles || !props.settings.apiProfiles[name]) {
+    return ''
+  }
+  const profile = props.settings.apiProfiles[name]
+  return profile.baseUrl || ''
+}
+
+const getProfileIconStyle = name => {
+  if (name === 'default') {
+    return { background: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)' }
+  }
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const index = Math.abs(hash) % profileColors.length
+  return { background: profileColors[index] }
+}
+</script>
+
+<style lang="less" scoped>
+.profile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.profile-item {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fadeIn 0.3s ease backwards;
+}
+.profile-item:nth-child(1) {
+  animation-delay: 0.02s;
+}
+.profile-item:nth-child(2) {
+  animation-delay: 0.04s;
+}
+.profile-item:nth-child(3) {
+  animation-delay: 0.06s;
+}
+.profile-item:nth-child(4) {
+  animation-delay: 0.08s;
+}
+.profile-item:nth-child(5) {
+  animation-delay: 0.1s;
+}
+.profile-item:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--text-tertiary);
+  transform: translateX(4px);
+}
+.profile-item.active {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 4px 12px rgba(59, 130, 246, 0.15);
+}
+.profile-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+.profile-icon-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.profile-info {
+  flex: 1;
+  min-width: 0;
+  margin-left: 14px;
+}
+.profile-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+.profile-url {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.profile-status {
+  margin-left: 12px;
+}
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--accent);
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.status-badge svg {
+  width: 12px;
+  height: 12px;
+}
+.profile-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 12px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.profile-item:hover .profile-actions,
+.profile-item.active .profile-actions {
+  opacity: 1;
+}
+.action-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
+}
+.action-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.action-btn.action-btn-danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--danger);
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12px;
+  align-self: flex-end;
+}
+</style>
diff --git a/src/views/GeneralSettings.vue b/src/views/GeneralSettings.vue
new file mode 100644
index 0000000..714a676
--- /dev/null
+++ b/src/views/GeneralSettings.vue
@@ -0,0 +1,77 @@
+<template>
+  <section>
+    <div class="content-header">
+      <h1 class="content-title">{{ $t('general.title') }}</h1>
+      <p class="content-desc">{{ $t('general.description') }}</p>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <Globe size="16" />
+        {{ $t('general.languageInterface') }}
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">{{ $t('general.language') }}</label>
+          <select class="form-select" v-model="localSettings.language">
+            <option value="zh-CN">{{ $t('languages.zh-CN') }}</option>
+            <option value="en-US">{{ $t('languages.en-US') }}</option>
+            <option value="ja-JP">{{ $t('languages.ja-JP') }}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('general.theme') }}</label>
+          <select class="form-select" v-model="localSettings.theme">
+            <option value="Xcode">{{ $t('theme.xcode') }}</option>
+            <option value="Dark">{{ $t('theme.dark') }}</option>
+            <option value="Light">{{ $t('theme.light') }}</option>
+            <option value="Solarized Dark">{{ $t('theme.solarizedDark') }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <Setting size="16" />
+        {{ $t('general.otherSettings') }}
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">{{ $t('general.bootAnimation') }}</label>
+          <select class="form-select" v-model="localSettings.bootAnimationShown">
+            <option :value="true">{{ $t('general.bootAnimationShown') }}</option>
+            <option :value="false">{{ $t('general.bootAnimationNotShown') }}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">{{ $t('general.checkpointing') }}</label>
+          <select class="form-select" v-model="localSettings.checkpointing.enabled">
+            <option :value="true">{{ $t('general.enabled') }}</option>
+            <option :value="false">{{ $t('general.disabled') }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { Globe, Setting } from '@icon-park/vue-next'
+
+const props = defineProps({
+  settings: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:settings'])
+
+import { computed } from 'vue'
+
+const localSettings = computed({
+  get: () => props.settings,
+  set: val => emit('update:settings', val),
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/McpServers.vue b/src/views/McpServers.vue
new file mode 100644
index 0000000..be6091e
--- /dev/null
+++ b/src/views/McpServers.vue
@@ -0,0 +1,156 @@
+<template>
+  <section>
+    <div class="content-header">
+      <h1 class="content-title">{{ $t('mcp.title') }}</h1>
+      <p class="content-desc">{{ $t('mcp.description') }}</p>
+    </div>
+    <div class="form-group">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
+        <label class="form-label" style="margin: 0">{{ $t('mcp.serverList') }}</label>
+        <button class="btn btn-primary" @click="$emit('add-server')" style="padding: 6px 12px; font-size: 12px">
+          <Add size="12" />
+          {{ $t('mcp.addServerBtn') }}
+        </button>
+      </div>
+      <div class="server-list">
+        <template v-if="serverCount > 0">
+          <div
+            v-for="(config, name) in servers"
+            :key="name"
+            class="server-item"
+            :class="{ selected: selectedServer === name }"
+            @click="$emit('select-server', name)"
+          >
+            <div class="server-info">
+              <div class="server-name">{{ name }}</div>
+              <div class="server-desc">{{ config.description || $t('mcp.noDescription') }}</div>
+            </div>
+            <div class="server-status"></div>
+          </div>
+        </template>
+        <div v-else class="empty-state">
+          <Server size="48" class="empty-state-icon" />
+          <div class="empty-state-title">{{ $t('mcp.noServers') }}</div>
+          <div class="empty-state-desc">{{ $t('mcp.addFirstServer') }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { Server, Add } from '@icon-park/vue-next'
+
+defineProps({
+  servers: {
+    type: Object,
+    default: () => ({})
+  },
+  selectedServer: {
+    type: String,
+    default: null
+  },
+  serverCount: {
+    type: Number,
+    default: 0
+  }
+})
+
+defineEmits(['add-server', 'select-server'])
+</script>
+
+<style lang="less" scoped>
+.server-list {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--bg-secondary);
+}
+.server-item {
+  display: flex;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fadeIn 0.3s ease backwards;
+}
+.server-item:nth-child(1) { animation-delay: 0.02s; }
+.server-item:nth-child(2) { animation-delay: 0.04s; }
+.server-item:nth-child(3) { animation-delay: 0.06s; }
+.server-item:nth-child(4) { animation-delay: 0.08s; }
+.server-item:nth-child(5) { animation-delay: 0.1s; }
+.server-item:nth-child(6) { animation-delay: 0.12s; }
+.server-item:nth-child(7) { animation-delay: 0.14s; }
+.server-item:nth-child(8) { animation-delay: 0.16s; }
+.server-item:last-child { border-bottom: none; }
+.server-item:hover {
+  background: var(--bg-tertiary);
+  transform: translateX(4px);
+}
+.server-item.selected {
+  background: var(--accent-light);
+  border-left: 3px solid var(--accent);
+  padding-left: 15px;
+}
+.server-info {
+  flex: 1;
+  min-width: 0;
+}
+.server-name {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+.server-desc {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.server-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
+  animation: pulse 2s ease-in-out infinite;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+}
+.empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.3;
+  color: var(--text-tertiary);
+}
+.empty-state-title {
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  color: var(--text-secondary);
+}
+.empty-state-desc {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin-bottom: 20px;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 1a84e5b..11708c5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -13,5 +13,12 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, 'src')
     }
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true
+      }
+    }
   }
 });
\ No newline at end of file