feat(i18n): add multi-language support (ja/ko/vi/ru/zh-TW) with system auto-detection

- Extend AppLanguage to 7 locales: zh-CN, zh-TW, en, ja, ko, vi, ru
- Auto-detect system language via navigator.languages; fallback to English
- Add BCP47 locale mapping for date formatting and sorting
- Create 50 translation JSON files (5 languages × 10 namespaces, 1137 keys each)
- Update language selector with native language names
- Extend locale key parity test to cover all 7 languages (70 assertions)
- Add VNC/RDP desktop, serial terminal, AI agent, port forwarding, and SFTP features
- Add credential encryption, host metrics, session backup crypto, and zmodem bridge
- Update Rust backend: desktop services, host metrics, SSH/SFTP enhancements

src/components/settings/SettingsView.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState, useMemo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { useKeybindingStore } from '../../stores/keybindingStore'
+import type { AppLanguage } from '../../i18n/detectLocale'
 import {
   Monitor,
   Palette,
@@ -18,7 +20,7 @@ import {
   Sparkles,
 } from 'lucide-react'
 import AiProviderSettings from './AiProviderSettings'
-import { themes } from '../../themes/terminal'
+import { themes, type TerminalThemeId } from '../../themes/terminal'
 import { getKeybindingCategories, getKeybindingsByCategory, type KeybindingActionId } from '../../constants/keybindings'
 
 // ─── Tab 类型 ───────────────────────────────────────────────
@@ -26,8 +28,8 @@ type SettingsTab = 'general' | 'appearance' | 'terminal' | 'ai' | 'shortcuts' |
 
 interface TabMeta {
   id: SettingsTab
-  label: string
-  description: string
+  labelKey: string
+  descriptionKey: string
   icon: React.ComponentType<{ className?: string }>
 }
 
@@ -42,14 +44,14 @@ interface RuntimeInfo {
 }
 
 const TAB_LIST: TabMeta[] = [
-  { id: 'general', label: '工作区', description: '布局与资源', icon: Monitor },
-  { id: 'appearance', label: '外观', description: '主题与终端配色', icon: Palette },
-  { id: 'terminal', label: '终端', description: '字体与配色', icon: Terminal },
-  { id: 'ai', label: '大模型', description: 'Provider、模型与测试', icon: Sparkles },
-  { id: 'shortcuts', label: '快捷键', description: '键盘快捷键', icon: Keyboard },
-  { id: 'ssh', label: 'SSH', description: '连接（高级）', icon: Shield },
-  { id: 'security', label: '安全', description: '加密与隐私', icon: Database },
-  { id: 'about', label: '关于', description: '版本与支持', icon: Info },
+  { id: 'general', labelKey: 'nav.general', descriptionKey: 'nav.generalDesc', icon: Monitor },
+  { id: 'appearance', labelKey: 'nav.appearance', descriptionKey: 'nav.appearanceDesc', icon: Palette },
+  { id: 'terminal', labelKey: 'nav.terminal', descriptionKey: 'nav.terminalDesc', icon: Terminal },
+  { id: 'shortcuts', labelKey: 'nav.shortcuts', descriptionKey: 'nav.shortcutsDesc', icon: Keyboard },
+  { id: 'ssh', labelKey: 'nav.ssh', descriptionKey: 'nav.sshDesc', icon: Shield },
+  { id: 'security', labelKey: 'nav.security', descriptionKey: 'nav.securityDesc', icon: Database },
+  { id: 'ai', labelKey: 'nav.ai', descriptionKey: 'nav.aiDesc', icon: Sparkles },
+  { id: 'about', labelKey: 'nav.about', descriptionKey: 'nav.aboutDesc', icon: Info },
 ]
 
 // ─── 快捷键录入 Hook ─────────────────────────────────────────
@@ -110,6 +112,7 @@ function useKeyRecording() {
 
 // ─── 主组件 ─────────────────────────────────────────────────
 export default function SettingsView() {
+  const { t } = useTranslation(['settings', 'common'])
   const { settings, isLoaded, loadSettings, setSetting } = useSettingsStore()
   const keybindingState = useKeybindingStore()
   const [activeTab, setActiveTab] = useState<SettingsTab>('general')
@@ -147,23 +150,23 @@ export default function SettingsView() {
 
   // ── 搜索过滤 ──────────────────────────────────────────────
   const filtered = useMemo((): SettingsTab[] | null => {
-    if (!searchQuery.trim()) return null // null 表示不过滤，正常显示
+    if (!searchQuery.trim()) return null
     const q = searchQuery.toLowerCase()
     const keywords: Record<SettingsTab, string[]> = {
-      general: ['工作区', '侧栏', '宽度', '资源', 'workspace', 'sidebar'],
-      appearance: ['主题', '深色', '浅色', 'theme'],
-      terminal: ['字体', 'font', '配色', 'terminal', 'monokai', 'dracula'],
-      ai: ['ai', '大模型', 'provider', '模型', 'deepseek', 'glm', 'minimax', 'new-api'],
-      shortcuts: ['快捷键', '键盘', 'keyboard', 'shortcut', 'hotkey'],
-      ssh: ['ssh', '连接', '端口', '超时', '心跳', '连接池', '重连', '快照'],
-      security: ['加密', '安全', '密码', '主密钥', 'known hosts', 'encrypt'],
-      about: ['版本', '关于', '许可', 'version', 'about', 'license'],
+      general: [t('nav.general'), t('general.sidebarWidth'), 'workspace', 'sidebar'],
+      appearance: [t('nav.appearance'), t('appearance.theme'), t('language.label'), 'theme', 'appearance'],
+      terminal: [t('nav.terminal'), t('terminal.fontFamily'), 'font', 'terminal', 'nord', 'tokyo', 'dracula', 'one-dark', 'default'],
+      ai: ['ai', t('nav.ai'), 'provider', 'deepseek', 'glm', 'minimax', 'custom'],
+      shortcuts: [t('nav.shortcuts'), 'keyboard', 'shortcut', 'hotkey'],
+      ssh: ['ssh', t('ssh.connection'), t('ssh.pool'), 'timeout', 'reconnect'],
+      security: [t('nav.security'), t('security.credentials'), 'encrypt', 'known hosts'],
+      about: [t('nav.about'), 'version', 'about', 'license'],
     }
     const matchIds = (Object.entries(keywords) as [SettingsTab, string[]][])
       .filter(([, kws]) => kws.some((k: string) => k.includes(q) || q.includes(k)))
       .map(([id]) => id)
     return matchIds.length > 0 ? matchIds : []
-  }, [searchQuery])
+  }, [searchQuery, t])
 
   // 如果搜索过滤后有结果，自动跳转到第一个匹配 tab
   useEffect(() => {
@@ -186,7 +189,7 @@ export default function SettingsView() {
   if (!isLoaded) {
     return (
       <div className="flex h-full items-center justify-center bg-dark-900">
-        <div className="text-txt-muted">加载中...</div>
+        <div className="text-txt-muted">{t('common:status.loading')}</div>
       </div>
     )
   }
@@ -198,8 +201,8 @@ export default function SettingsView() {
       case 'general':
         return (
           <div className="space-y-6">
-            <SettingGroup title="工作区布局">
-              <SettingRow label="侧栏宽度" description="会话侧栏的默认宽度">
+            <SettingGroup title={t('general.layout')}>
+              <SettingRow label={t('general.sidebarWidth')} description={t('general.sidebarWidthDesc')}>
                 <div className="flex items-center gap-2">
                   <input
                     type="range"
@@ -209,12 +212,12 @@ export default function SettingsView() {
                     value={settings.sidebarWidth}
                     onChange={(e) => setSetting('sidebarWidth', Number(e.target.value))}
                     className="w-28 accent-blue-500"
-                    aria-label="侧栏宽度"
+                    aria-label={t('general.sidebarWidth')}
                   />
                   <span className="w-12 text-right text-xs tabular-nums text-txt-muted">{settings.sidebarWidth}px</span>
                 </div>
               </SettingRow>
-              <SettingRow label="折叠侧栏" description="隐藏会话树以专心操作终端，可用 Ctrl/Cmd+B 切换">
+              <SettingRow label={t('general.collapseSidebar')} description={t('general.collapseSidebarDesc')}>
                 <button
                   type="button"
                   role="switch"
@@ -239,16 +242,31 @@ export default function SettingsView() {
       case 'appearance':
         return (
           <div className="space-y-6">
-            <SettingGroup title="外观">
-              <SettingRow label="主题" description="应用界面配色">
+            <SettingGroup title={t('appearance.themeGroup')}>
+              <SettingRow label={t('appearance.theme')} description={t('appearance.themeDesc')}>
                 <select
                   value={settings.theme}
                   onChange={(e) => setSetting('theme', e.target.value as 'dark' | 'light' | 'system')}
                   className="ui-select-pill"
                 >
-                  <option value="dark">深色</option>
-                  <option value="light">浅色</option>
-                  <option value="system">跟随系统</option>
+                  <option value="dark">{t('appearance.dark')}</option>
+                  <option value="light">{t('appearance.light')}</option>
+                  <option value="system">{t('appearance.system')}</option>
+                </select>
+              </SettingRow>
+              <SettingRow label={t('language.label')} description={t('language.description')}>
+                <select
+                  value={settings.language}
+                  onChange={(e) => setSetting('language', e.target.value as AppLanguage)}
+                  className="ui-select-pill"
+                >
+                  <option value="zh-CN">{t('language.zhCN')}</option>
+                  <option value="zh-TW">{t('language.zhTW')}</option>
+                  <option value="en">{t('language.en')}</option>
+                  <option value="ja">{t('language.ja')}</option>
+                  <option value="ko">{t('language.ko')}</option>
+                  <option value="vi">{t('language.vi')}</option>
+                  <option value="ru">{t('language.ru')}</option>
                 </select>
               </SettingRow>
             </SettingGroup>
@@ -259,12 +277,12 @@ export default function SettingsView() {
       case 'terminal':
         return (
           <div className="space-y-6">
-            <SettingGroup title="字体">
-              <SettingRow label="字体" description="需 Nerd Font 才能正确显示 Zsh 提示符图标">
+            <SettingGroup title={t('terminal.fontGroup')}>
+              <SettingRow label={t('terminal.fontFamily')} description={t('terminal.fontFamilyDesc')}>
                 <select
                   value={settings.fontFamily}
                   onChange={(e) => setSetting('fontFamily', e.target.value)}
-                  className="ui-select-pill"
+                  className="ui-select-pill max-w-[220px]"
                 >
                   <option>MesloLGS NF</option>
                   <option>JetBrainsMono Nerd Font</option>
@@ -277,7 +295,7 @@ export default function SettingsView() {
                   <option>Consolas</option>
                 </select>
               </SettingRow>
-              <SettingRow label="字号" description="终端文字大小">
+              <SettingRow label={t('terminal.fontSize')} description={t('terminal.fontSizeDesc')}>
                 <div className="flex items-center gap-1">
                   <button
                     type="button"
@@ -298,7 +316,7 @@ export default function SettingsView() {
                   </button>
                 </div>
               </SettingRow>
-              <SettingRow label="回滚缓冲" description="每个终端保留的历史行数">
+              <SettingRow label={t('terminal.scrollback')} description={t('terminal.scrollbackDesc')}>
                 <input
                   type="number"
                   min={1000}
@@ -310,23 +328,21 @@ export default function SettingsView() {
                 />
               </SettingRow>
               <SettingToggle
-                label="关键词高亮"
-                description="突出显示错误、警告、IP 地址和成功状态"
+                label={t('terminal.keywordHighlight')}
+                description={t('terminal.keywordHighlightDesc')}
                 checked={settings.keywordHighlightEnabled}
                 onChange={(value) => setSetting('keywordHighlightEnabled', value)}
               />
             </SettingGroup>
 
-            <SettingGroup title="配色">
+            <SettingGroup title={t('terminal.colorTheme')}>
               <div className="px-1 py-1">
                 <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                   {Object.entries(themes).map(([key, theme]) => (
                     <button
                       key={key}
                       type="button"
-                      onClick={() =>
-                        setSetting('terminalTheme', key as 'dracula' | 'monokai' | 'solarized' | 'one-dark')
-                      }
+                      onClick={() => setSetting('terminalTheme', key as TerminalThemeId)}
                       className={`rounded-xl border p-2.5 text-left text-xs transition-colors ${
                         settings.terminalTheme === key
                           ? 'bg-accent-blue/10 ring-accent-blue/30 border-accent-blue ring-1'
@@ -334,9 +350,15 @@ export default function SettingsView() {
                       }`}
                     >
                       <div
-                        className="mb-1.5 h-7 w-full rounded-md border border-black/20"
+                        className="mb-1.5 flex h-7 w-full overflow-hidden rounded-md border border-black/20"
                         style={{ backgroundColor: theme.background }}
-                      />
+                        aria-hidden
+                      >
+                        <span className="h-full w-1/4" style={{ backgroundColor: theme.blue }} />
+                        <span className="h-full w-1/4" style={{ backgroundColor: theme.cyan }} />
+                        <span className="h-full w-1/4" style={{ backgroundColor: theme.green }} />
+                        <span className="h-full w-1/4" style={{ backgroundColor: theme.magenta }} />
+                      </div>
                       <span className="text-content-secondary">{theme.name}</span>
                     </button>
                   ))}
@@ -369,7 +391,7 @@ export default function SettingsView() {
                   className="hover:bg-dark-700/50 flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs text-txt-muted transition-colors hover:text-accent-blue"
                 >
                   <RotateCcw className="h-3.5 w-3.5" />
-                  重置全部为默认
+                  {t('shortcuts.resetAll')}
                 </button>
               </div>
             )}
@@ -378,7 +400,7 @@ export default function SettingsView() {
               const defs = getKeybindingsByCategory(category)
               return (
                 <SettingCard key={category}>
-                  <h3 className="mb-3 text-sm font-semibold text-content-secondary">{category}</h3>
+                  <h3 className="mb-3 text-sm font-semibold text-content-secondary">{t(`shortcuts.category.${category}`)}</h3>
                   <div className="space-y-1">
                     {defs.map((def) => {
                       const currentKeys = allKeys[def.id]
@@ -393,10 +415,10 @@ export default function SettingsView() {
                           }`}
                         >
                           <div className="min-w-0 flex-1">
-                            <span className="text-sm text-content-primary">{def.label}</span>
+                            <span className="text-sm text-content-primary">{t(def.labelKey)}</span>
                             {isCustom && (
                               <span className="bg-accent-blue/10 ml-2 rounded px-1.5 py-0.5 text-[10px] text-accent-blue">
-                                自定义
+                                {t('shortcuts.custom')}
                               </span>
                             )}
                           </div>
@@ -405,18 +427,18 @@ export default function SettingsView() {
                             {isRecordingThis ? (
                               <div className="flex items-center gap-2">
                                 <kbd className="bg-accent-blue/20 border-accent-blue/40 inline-flex animate-pulse items-center rounded border px-3 py-1 font-mono text-xs text-accent-blue">
-                                  {recordedKeys || '按下快捷键...'}
+                                  {recordedKeys || t('shortcuts.pressKeys')}
                                 </kbd>
                                 <button
                                   onClick={() => stopRecording()}
                                   className="text-xs text-txt-muted hover:text-content-secondary"
                                 >
-                                  取消
+                                  {t('common:action.cancel')}
                                 </button>
                                 {recordedKeys && recordedConflict.length > 0 && (
                                   <div className="flex items-center gap-1 text-xs text-yellow-500">
                                     <AlertTriangle className="h-3 w-3" />
-                                    <span>与「{recordedConflict[0].label}」冲突</span>
+                                    <span>{t('shortcuts.conflict', { label: t(recordedConflict[0].labelKey) })}</span>
                                   </div>
                                 )}
                               </div>
@@ -442,7 +464,7 @@ export default function SettingsView() {
                                   <button
                                     onClick={() => keybindingState.resetKeybinding(def.id)}
                                     className="text-txt-faint transition-colors hover:text-txt-muted"
-                                    title="重置为默认"
+                                    title={t('shortcuts.resetDefault')}
                                   >
                                     <RotateCcw className="h-3 w-3" />
                                   </button>
@@ -462,10 +484,7 @@ export default function SettingsView() {
             {recordingId && recordedKeys && (
               <div className="fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xl border border-dark-600 bg-dark-800 px-5 py-3 shadow-2xl">
                 <span className="text-sm text-content-secondary">
-                  设置为{' '}
-                  <kbd className="rounded bg-dark-700 px-1.5 py-0.5 font-mono text-xs text-accent-blue">
-                    {recordedKeys}
-                  </kbd>
+                  {t('shortcuts.setTo', { keys: recordedKeys })}
                 </span>
                 <button
                   onClick={async () => {
@@ -474,18 +493,18 @@ export default function SettingsView() {
                   }}
                   className="hover:bg-accent-blue/80 rounded-lg bg-accent-blue px-3 py-1 text-xs text-content-primary transition-colors"
                 >
-                  确认
+                  {t('common:action.confirm')}
                 </button>
                 <button
                   onClick={stopRecording}
                   className="rounded-lg px-3 py-1 text-xs text-txt-muted transition-colors hover:bg-dark-700 hover:text-content-primary"
                 >
-                  取消
+                  {t('common:action.cancel')}
                 </button>
               </div>
             )}
 
-            <p className="text-xs text-txt-faint">点击快捷键可重新绑定 · 按 Esc 取消录入</p>
+            <p className="text-xs text-txt-faint">{t('shortcuts.hint')}</p>
           </div>
         )
       }
@@ -494,20 +513,20 @@ export default function SettingsView() {
       case 'ssh':
         return (
           <div className="space-y-6">
-            <SettingGroup title="连接">
+            <SettingGroup title={t('ssh.connection')}>
               <SettingToggle
-                label="保持心跳"
-                description="空闲时发送心跳，减少断线"
+                label={t('ssh.keepAlive')}
+                description={t('ssh.keepAliveDesc')}
                 checked={settings.keepAlive}
                 onChange={(v) => setSetting('keepAlive', v)}
               />
               <SettingToggle
-                label="自动重连"
-                description="意外断开后自动尝试重连"
+                label={t('ssh.autoReconnect')}
+                description={t('ssh.autoReconnectDesc')}
                 checked={settings.autoReconnect !== false}
                 onChange={(v) => setSetting('autoReconnect', v)}
               />
-              <SettingRow label="连接超时" description="建立 SSH 连接的最长等待时间（秒）">
+              <SettingRow label={t('ssh.timeout')} description={t('ssh.timeoutDesc')}>
                 <input
                   type="number"
                   min={5}
@@ -517,7 +536,7 @@ export default function SettingsView() {
                   className="ui-input-sm w-20 text-center"
                 />
               </SettingRow>
-              <SettingRow label="自动重连次数" description="意外断线后的最大尝试次数">
+              <SettingRow label={t('ssh.maxReconnect')} description={t('ssh.maxReconnectDesc')}>
                 <input
                   type="number"
                   min={1}
@@ -529,8 +548,8 @@ export default function SettingsView() {
               </SettingRow>
             </SettingGroup>
 
-            <SettingGroup title="连接池">
-              <SettingRow label="最大连接数" description="SSH、SFTP 与批量连接共享此上限">
+            <SettingGroup title={t('ssh.pool')}>
+              <SettingRow label={t('ssh.maxConnections')} description={t('ssh.maxConnectionsDesc')}>
                 <input
                   type="number"
                   min={2}
@@ -540,7 +559,7 @@ export default function SettingsView() {
                   className="ui-input-sm w-20 text-center"
                 />
               </SettingRow>
-              <SettingRow label="后台连接上限" description="超过上限时优先回收最久未使用的连接">
+              <SettingRow label={t('ssh.maxBackground')} description={t('ssh.maxBackgroundDesc')}>
                 <input
                   type="number"
                   min={1}
@@ -550,7 +569,7 @@ export default function SettingsView() {
                   className="ui-input-sm w-20 text-center"
                 />
               </SettingRow>
-              <SettingRow label="后台挂起" description="标签进入后台后多少分钟释放活跃通道">
+              <SettingRow label={t('ssh.suspend')} description={t('ssh.suspendDesc')}>
                 <input
                   type="number"
                   min={1}
@@ -568,15 +587,15 @@ export default function SettingsView() {
       case 'security':
         return (
           <div className="space-y-6">
-            <SettingGroup title="凭据保护">
-              <SettingRow label="会话密码与密钥口令" description="保存前由 Rust 使用 AES-256-GCM 加密，无法关闭">
+            <SettingGroup title={t('security.credentials')}>
+              <SettingRow label={t('security.sessionPassword')} description={t('security.sessionPasswordDesc')}>
                 <span className="border-accent-green/25 bg-accent-green/10 rounded-md border px-2 py-1 text-xs font-medium text-accent-green">
-                  已启用
+                  {t('security.enabled')}
                 </span>
               </SettingRow>
-              <SettingRow label="本地主密钥" description="仅当前系统用户可读取">
+              <SettingRow label={t('security.masterKey')} description={t('security.masterKeyDesc')}>
                 <code className="text-xs text-txt-muted break-all">
-                  {runtimeInfo?.credentialPath ?? '~/.opsxshsell/master.key'}
+                  {runtimeInfo?.credentialPath ?? '~/.opsxshell/master.key'}
                 </code>
               </SettingRow>
             </SettingGroup>
@@ -595,23 +614,23 @@ export default function SettingsView() {
                 </div>
                 <div className="min-w-0 flex-1">
                   <h3 className="text-lg font-semibold text-content-primary">OpsXShell</h3>
-                  <p className="mt-0.5 text-sm text-txt-muted">轻量原生的 SSH / SFTP 运维终端</p>
+                  <p className="mt-0.5 text-sm text-txt-muted">{t('about.tagline')}</p>
                   <div className="mt-3 flex flex-wrap items-center gap-2">
                     <span className="bg-accent-blue/15 border-accent-blue/20 inline-flex items-center rounded-md border px-2.5 py-1 font-mono text-xs font-medium text-accent-blue">
-                      应用 v{appVersion}
+                      {t('about.appVersion', { version: appVersion })}
                     </span>
                     <button
                       type="button"
                       onClick={() => copyText('version', diagnosticText)}
                       className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-txt-muted transition-colors hover:bg-dark-700 hover:text-content-primary"
-                      title="复制版本信息"
+                      title={t('about.copyVersion')}
                     >
                       {copiedField === 'version' ? (
                         <Check className="h-3.5 w-3.5 text-accent-green" />
                       ) : (
                         <Copy className="h-3.5 w-3.5" />
                       )}
-                      {copiedField === 'version' ? '已复制' : '复制'}
+                      {copiedField === 'version' ? t('common:action.copied') : t('common:action.copy')}
                     </button>
                   </div>
                 </div>
@@ -619,37 +638,35 @@ export default function SettingsView() {
             </SettingCard>
 
             <SettingCard>
-              <SettingSectionTitle>运行环境</SettingSectionTitle>
+              <SettingSectionTitle>{t('about.runtime')}</SettingSectionTitle>
               <div className="divide-dark-700/30 mt-3 divide-y text-sm">
                 <div className="flex items-center justify-between gap-4 py-2">
-                  <span className="text-txt-muted">系统</span>
+                  <span className="text-txt-muted">{t('about.system')}</span>
                   <code className="text-right text-xs text-content-secondary">
-                    {runtimeInfo ? `${runtimeInfo.os} ${runtimeInfo.arch}` : '读取中...'}
+                    {runtimeInfo ? `${runtimeInfo.os} ${runtimeInfo.arch}` : t('common:status.reading')}
                   </code>
                 </div>
               </div>
             </SettingCard>
 
             <SettingCard>
-              <SettingSectionTitle>本地数据</SettingSectionTitle>
+              <SettingSectionTitle>{t('about.localData')}</SettingSectionTitle>
               <div className="mt-3 space-y-3 text-xs">
                 <div>
-                  <div className="mb-1 text-txt-muted">会话与设置</div>
-                  <code className="block break-all text-content-secondary">{runtimeInfo?.dataPath ?? '读取中...'}</code>
+                  <div className="mb-1 text-txt-muted">{t('about.sessionsSettings')}</div>
+                  <code className="block break-all text-content-secondary">{runtimeInfo?.dataPath ?? t('common:status.reading')}</code>
                 </div>
                 <div>
-                  <div className="mb-1 text-txt-muted">加密主密钥</div>
+                  <div className="mb-1 text-txt-muted">{t('about.masterKeyPath')}</div>
                   <code className="block break-all text-content-secondary">
-                    {runtimeInfo?.credentialPath ?? '~/.opsxshsell/master.key'}
+                    {runtimeInfo?.credentialPath ?? '~/.opsxshell/master.key'}
                   </code>
                 </div>
-                <p className="leading-relaxed text-txt-faint">
-                  密码与密钥口令由 Rust 使用 AES-256-GCM 加密。OpsXShell 不保存终端命令历史。
-                </p>
+                <p className="leading-relaxed text-txt-faint">{t('about.privacyNote')}</p>
               </div>
             </SettingCard>
 
-            <p className="px-1 text-[11px] text-txt-faint">MIT License · Rust · XTerm.js</p>
+            <p className="px-1 text-[11px] text-txt-faint">{t('about.license')}</p>
           </div>
         )
 
@@ -664,12 +681,12 @@ export default function SettingsView() {
       {/* ── 左侧导航 ── */}
       <aside className="bg-dark-800/80 border-dark-700/40 flex w-60 flex-shrink-0 flex-col border-r">
         <div className="px-4 pb-3 pt-5">
-          <div className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-txt-faint">设置</div>
+          <div className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-txt-faint">{t('title')}</div>
           <div className="relative">
             <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-txt-muted" />
             <input
               type="text"
-              placeholder="搜索设置..."
+              placeholder={t('search.placeholder')}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="ui-input-sm !pl-8 !pr-8"
@@ -697,10 +714,10 @@ export default function SettingsView() {
                 className={`ui-nav-item ${active ? 'ui-nav-item-active' : ''} ${tab.id === 'ai' && !active ? 'text-accent-blue' : ''}`}
               >
                 <Icon className={`h-4 w-4 flex-shrink-0 ${active || tab.id === 'ai' ? 'text-accent-blue' : ''}`} />
-                <div className="min-w-0">
-                  <div className="truncate text-sm font-medium">{tab.label}</div>
-                  <div className={`truncate text-[11px] ${active ? 'text-txt-muted' : 'text-txt-faint'}`}>
-                    {tab.description}
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium leading-5">{t(tab.labelKey)}</div>
+                  <div className={`truncate text-[11px] leading-4 ${active ? 'text-txt-muted' : 'text-txt-faint'}`}>
+                    {t(tab.descriptionKey)}
                   </div>
                 </div>
               </button>
@@ -712,8 +729,8 @@ export default function SettingsView() {
       {/* ── 右侧内容区 ── */}
       <div className="to-dark-900/95 flex min-w-0 flex-1 flex-col bg-gradient-to-b from-dark-900">
         <div className="border-dark-700/30 flex-shrink-0 border-b px-8 pb-4 pt-6">
-          <h1 className="text-xl font-semibold tracking-tight text-content-primary">{currentMeta.label}</h1>
-          <p className="mt-1 text-sm text-txt-muted">{currentMeta.description}</p>
+          <h1 className="text-xl font-semibold tracking-tight text-content-primary">{t(currentMeta.labelKey)}</h1>
+          <p className="mt-1 text-sm text-txt-muted">{t(currentMeta.descriptionKey)}</p>
         </div>
 
         <div className="max-w-3xl flex-1 overflow-y-auto px-8 py-6">{renderContent()}</div>
@@ -725,6 +742,7 @@ export default function SettingsView() {
 // ─── 子组件 ─────────────────────────────────────────────────
 
 function KnownHostsSettingsCard() {
+  const { t } = useTranslation(['settings', 'common'])
   const [entries, setEntries] = useState<Array<{ host: string; port: number; keyType: string; fingerprint: string }>>(
     []
   )
@@ -752,22 +770,22 @@ function KnownHostsSettingsCard() {
   }
 
   const handleClear = async () => {
-    if (!confirm('确定清空全部已知主机密钥？下次连接将重新确认。')) return
+    if (!confirm(t('security.clearConfirm'))) return
     await window.opsxApi?.knownHostsClear?.()
     await load()
   }
 
   return (
-    <SettingGroup title="已知主机">
+    <SettingGroup title={t('security.knownHosts')}>
       <div className="flex items-center justify-between gap-2 px-4 py-3">
-        <p className="flex-1 text-xs text-txt-muted">首次连接会确认主机指纹。此处可管理已信任记录。</p>
+        <p className="flex-1 text-xs text-txt-muted">{t('security.knownHostsHint')}</p>
         <div className="flex flex-shrink-0 gap-1.5">
           <button
             type="button"
             onClick={() => void load()}
             className="rounded-lg bg-dark-700 px-2 py-1 text-[11px] text-txt-muted hover:bg-dark-600"
           >
-            刷新
+            {t('common:action.refresh')}
           </button>
           <button
             type="button"
@@ -775,14 +793,14 @@ function KnownHostsSettingsCard() {
             className="rounded-lg bg-dark-700 px-2 py-1 text-[11px] text-red-300 hover:bg-red-900/40"
             disabled={entries.length === 0}
           >
-            清空
+            {t('security.clearAll')}
           </button>
         </div>
       </div>
       {loading ? (
-        <div className="px-4 pb-3 text-xs text-txt-muted">加载中...</div>
+        <div className="px-4 pb-3 text-xs text-txt-muted">{t('common:status.loading')}</div>
       ) : entries.length === 0 ? (
-        <div className="px-4 pb-3 text-xs text-txt-faint">暂无记录</div>
+        <div className="px-4 pb-3 text-xs text-txt-faint">{t('security.empty')}</div>
       ) : (
         <div className="divide-dark-700/30 max-h-48 divide-y overflow-y-auto">
           {entries.map((e) => (
@@ -796,9 +814,11 @@ function KnownHostsSettingsCard() {
               <button
                 type="button"
                 onClick={() => void handleRemove(e.host, e.port)}
-                className="flex-shrink-0 px-1 text-[11px] text-red-300 hover:text-red-200"
+                title={t('security.removeHost')}
+                aria-label={t('security.removeHost')}
+                className="flex-shrink-0 rounded-full bg-red-500/10 px-2 py-1 text-[11px] text-red-300 hover:bg-red-500/20 hover:text-red-200"
               >
-                删除
+                {t('common:action.delete')}
               </button>
             </div>
           ))}
@@ -849,12 +869,12 @@ function SettingRow({
   children: React.ReactNode
 }) {
   return (
-    <div className="flex items-center justify-between gap-4 px-4 py-3.5">
-      <div className="mr-2 min-w-0 flex-1">
+    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3.5">
+      <div className="min-w-[11rem] flex-1 basis-[14rem]">
         <div className="text-sm font-medium text-content-primary">{label}</div>
         {description && <div className="mt-0.5 text-xs leading-relaxed text-txt-muted">{description}</div>}
       </div>
-      <div className="flex-shrink-0">{children}</div>
+      <div className="ml-auto flex-shrink-0">{children}</div>
     </div>
   )
 }
@@ -872,8 +892,8 @@ function SettingToggle({
   onChange: (value: boolean) => void
 }) {
   return (
-    <div className="flex items-center justify-between gap-4 px-4 py-3.5">
-      <div className="mr-2 min-w-0 flex-1">
+    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3.5">
+      <div className="min-w-[11rem] flex-1 basis-[14rem]">
         <div className="text-sm font-medium text-content-primary">{label}</div>
         <div className="mt-0.5 text-xs leading-relaxed text-txt-muted">{description}</div>
       </div>
@@ -882,7 +902,7 @@ function SettingToggle({
         role="switch"
         aria-checked={checked}
         onClick={() => onChange(!checked)}
-        className={`relative h-6 w-11 flex-shrink-0 rounded-full transition-colors ${
+        className={`relative ml-auto h-6 w-11 flex-shrink-0 rounded-full transition-colors ${
           checked ? 'bg-accent-blue' : 'bg-dark-600'
         }`}
       >