diff --git a/TERMINAL_MODULE_PLAN.md b/TERMINAL_MODULE_PLAN.md
index 7266d15..9dfbd78 100644
--- a/TERMINAL_MODULE_PLAN.md
+++ b/TERMINAL_MODULE_PLAN.md
@@ -794,6 +794,394 @@ ZMODEM 剩余价值主要在串口/老旧嵌入式设备。成本收益不成立
 3. 连接复用：同主机双标签秒连、关一个另一个不受影响、全关后连接断开。
 4. ProxyJump 跳板链、端口转发 -L/-R、`.ppk` 导入、会话模板拉起、AI 助手（需翻译引擎配置）。
 
+### 界面重构与标题口径（2026-09-20）
+
+用户反馈两条：「本地 Shell 的标题显示成了全路径」「终端页像内嵌了一个独立终端页面」。
+两条都成立，根因不同，分别处理。
+
+#### 一、会话标题为什么曾经是全路径
+
+标题有两个来源，后者会覆盖前者：
+
+1. 创建时写入的标题（`terminal_open_local` → `ConPTYSession::spawn`）；
+2. shell 通过 OSC 0/2 上报的「自定义标题」。
+
+`cmd.exe` 与 `powershell.exe` **默认就把自己的可执行文件全路径设成控制台标题**
+（cmd 运行命令时还会追加 ` - <命令>`），经 PTY 原样到达 → 标签栏与状态栏被顶成
+`C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe`。Windows Terminal /
+VS Code 同样要过滤这类标题，属于同类问题。
+
+**提权会话还多一层坑**：以管理员身份运行时标题前面会带一个本地化前缀
+（简体中文下是 `管理员: `，英文是 `Administrator: `）。首版过滤只判「以盘符开头」，
+日常（非提权）会话表现完全正确，只有提权运行时才漏 —— 因此
+`osc_title_is_executable_path` 现在对「原串」与「剥掉前缀后的串」各判一次，
+并有单测覆盖 `管理员: ` / `Administrator: ` / 全角冒号三种形态。
+
+修复分四处：
+
+| 改动 | 位置 | 理由 |
+|---|---|---|
+| 过滤「绝对路径 + `.exe`/`.com`」形态的 OSC 标题（含提权前缀） | `shell.rs::osc_title_is_executable_path` + `session.rs` | 判据收紧到绝对路径，WSL/Git Bash 的 `user@host: ~/dir`、`/usr/bin/htop` 必须保留 |
+| **标题改用 `shell::session_label()`**（按可执行文件名取短名：`pwsh.exe`→`PowerShell 7`、`powershell.exe`→`PowerShell`、`cmd.exe`→`cmd`、`bash.exe`→`Git Bash`，认不出则退回 `name`） | `shell.rs::session_label` | 标签要短、稳定、一行放下多个会话；设置页的 `name` 可编辑、可很长，两者诉求不同 |
+| 设置页的探测名**保持不变**（`PowerShell 7` / `Windows PowerShell` / `命令提示符` / `Git Bash`） | `shell.rs::detect_shells` | 用户明确要求：命名问题在标签位置，不动设置里的命名 |
+| 历史默认名迁移同时覆盖两代取值 | `shell.rs::legacy_default_names` | 合并规则是「保留用户设置的名字」，不迁移则默认名对老用户**永远不生效**；列表里含上一版误当作展示名的短名，用于把它们收回描述性默认名 |
+
+状态栏随之调整：本地会话不再显示从 `ShellProfile::name` 拼出的副标题 ——
+标题已经是短名（`PowerShell`），再并排一个 `Windows PowerShell` 会让人以为是两个东西。
+SSH 不受影响（标题是主机名、副标题是 `user@host:port`，后者标题给不出）。
+
+顺带修掉一个相邻缺陷：`terminal_rename_session` 设的标题会被下一条提示符的 OSC 标题
+覆盖（表现为「重命名无效」）。现在 `set_title_by_user` 会置 `title_locked`，
+一旦用户显式命名，OSC 标题一律忽略；trait 方法名从 `set_title` 改为带 `_by_user`
+后缀，从命名上堵住「程序自动改标题」这条误用路径。
+
+#### 二、终端页为什么像内嵌独立应用
+
+| 症状 | 处理 |
+|---|---|
+| 工具栏一行 + 会话标签一行，两套横向导航 | 合并为单行头部：左侧会话标签，右侧操作组（省 36px 垂直空间） |
+| 工具栏写原始 `sessionId` | 从界面移除，改放标签的悬停提示（排障时仍可见） |
+| 十来个别扭的图标按钮铺满一行 | 高频动作（搜索/字号/清屏/独立窗口）外露，其余入「更多」下拉 |
+| 「+」只能新建上次用过的 shell，连主机要去主机页 | 改为「+▾」下拉：本地 Shell 列表 + 已保存主机 + 管理主机 |
+| 七个页面头部高度/内边距/计数写法各不相同 | 新增 `TerminalPageHeader`（h-11、icon size-4、`共 N …`），六页统一 |
+| 父层与页面各套一层圆角边框 | 容器下沉到各页自身，历史页的双边框随之消失 |
+| 「返回终端」「关闭」按钮与模块 Tabs 重复 | 移除；`close` 意图事件保留，由父层映射为切 tab |
+| 唯一未接入 `useModuleTabs` 的模块 | 接入（标题栏浮动切换器 + tab 记忆 + **全局搜索跳转到指定页**） |
+
+#### 三、Tabs 由 7 项收敛为 5 项
+
+同类模块（proxy / monitor / music / downloader / clipboard）的 TabsList 都不超过
+5 项、统一 `max-w-md`；终端原有 7 项只能靠 `max-w-2xl` 撑开，每项被压得很窄，
+横向比别处宽出半屏 —— 是「不像是同一套导航」的直接来源之一。
+
+| tab | 组成 | 说明 |
+|---|---|---|
+| 终端 | 会话（xterm + SFTP + 状态栏） | forceMount，切走不卸载 |
+| 主机 | SSH 主机管理 | 不变 |
+| 凭据 | 密钥 + 已知主机 | 都是「SSH 信任材料」，同一类列表 |
+| 记录 | 命令历史 + 命令片段 | 都是「命令资产」，同一类用途 |
+| 设置 | 外观 / 布局 / 选择 / 安全 / 快捷键 / Shell | 不变 |
+
+合并的前提是**子分区仍能被直接到达**，否则用户要在一页里找两块内容，比多一个 tab 更糟。
+因此新增 `TerminalSectionSwitch`（按钮组实现，视觉规格对齐 `TabsList`/`TabsTrigger`，
+不是嵌套 reka Tabs —— 那会带来两层键盘导航语义）。分区状态由 `TerminalModule`
+持有（`credSection` / `recordSection`），面板卸载重挂不丢「上次看的是哪一半」。
+
+**已知取舍**：`SearchIndexItem.tab` 只能表达「哪个 tab」，无法表达「tab 里的哪个分区」，
+所以全局搜索「已知主机」会落在「凭据」页的密钥分区，需再点一次页内开关。
+要精确落位需给 `moduleTabsStore` / `useModuleTabs` / `TitleBar` 三处共享基建加字段，
+收益不抵成本，故不做（已在 `index.ts` 的注释里写明）。
+
+未改动的部分及原因：底部状态栏保留（终端习惯，且它是唯一承载编码/尺寸/cwd 的位置）；
+会话标签仍可拖动重排；会话面板仍常驻挂载用 `v-show` 切换（见模块文件头）。
+
+`useModuleTabs` 的浮动切换器在终端模块**实际不会出现** —— 模块根是
+`overflow-hidden`，页面不滚动，TabsList 不会滚出可视区。接入的实际收益是
+tab 记忆与全局搜索跳转（此前搜索「SSH 密钥」只切模块、停在终端页）。
+
+#### 验证
+
+| 检查 | 结果 |
+|---|---|
+| `cargo check` | exit 0 |
+| `cargo test --lib terminal::` | shell.rs 新增 5 个单测（提权前缀 / 有效标题保留 / 短名取值 / 兜底 / 历史默认名） |
+| `vue-tsc --noEmit` | exit 0 |
+| `vite build` | 成功 |
+| 待真机确认 | 提权 PowerShell 标签显示为 `PowerShell`；重命名后不再被覆盖；窄窗口下头部不打架；5 个 tab 与页内分区开关的可达性 |
+
+### 容器口径统一与终端页拆分（2026-09-20 第二轮）
+
+峰提出：「终端模块的结构完全是单独的内部窗口，各 tabs 的内部窗口用同一个框架，
+与其他模块 UI 模式差别很大」。勘察确认成立，并定位到三处偏离。
+
+#### 一、偏离的取证（改动前）
+
+| # | 偏离 | 事实 |
+|---|---|---|
+| 1 | 每页多一层**内嵌窗口框** | `h-full flex flex-col rounded-lg border border-border bg-background overflow-hidden`，全项目**仅终端使用**，共 7 处（终端页 + 6 个子面板） |
+| 2 | 每页多一条**页中页标题栏** | `TerminalPageHeader`（h-11 + border-b + px-4）；6 个子面板各自手写同一套外框再内嵌该头部 |
+| 3 | 滚动实现不统一 | 子面板用原生 `overflow-y-auto`，其它模块统一用 `ScrollArea`，滚动条外观不同 |
+
+对照口径（proxy / monitor / music / clipboard / downloader 一致遵守）：
+模块根 `h-full p-6` → TabsList 包 `div[ref=tabsListRef]` 且 `max-w-md !bg-transparent` →
+`TabsContent flex-1 min-h-0 mt-4 tab-animate` → 内容**直接铺开**
+（`ScrollArea` + Card 流 / 列表项），**没有任何容器边框**。
+
+#### 二、改动
+
+| 项 | 内容 |
+|---|---|
+| 新增 `components/layout/PageToolbar.vue` | 漂浮工具条（无边框、无底边、`mb-3`），API 与原 `TerminalPageHeader` 一致（icon / title / meta / 默认槽=动作 / info 槽）；提升到 layout 层，其它模块可复用 |
+| 6 个子面板 | 去外框（保留 `flex flex-col h-full overflow-hidden`）；`TerminalPageHeader` → `PageToolbar`；`overflow-y-auto` → `ScrollArea`，padding 移到 ScrollArea 上（沿用 proxy/monitor 的 `pr-3` 写法） |
+| 删除 `components/TerminalPageHeader.vue` | 已被 `PageToolbar` 取代，避免留两份近似组件 |
+| 新增 `components/TerminalWorkspace.vue` | 终端页整体：工具条 + 终端屏幕（画布 / SFTP / 状态栏）+ 右键菜单 + 4 个对话框 |
+| `TerminalModule.vue` 1197 → 383 行 | 只剩模块级编排：5 个 tab、tab 记忆、快捷键分发、初始化、主机密钥弹窗 |
+
+#### 三、两个关键取舍
+
+**1. 终端屏幕保留边框，但边界从「整页」收缩到「画布 + 状态栏」。**
+xterm 是画布而不是内容流，需要明确的视觉边界；但此前边框包住的是
+「标签行 + 主体 + 状态栏」整体，框内还有一条 h-11 标题栏 —— 那正是
+「内嵌窗口」的观感来源。现在会话标签与操作组移到框外成为页面级工具条，
+边框只包画布与状态栏。
+
+**2. `useTerminalStream` 全模块只创建一次。**
+该 composable 的 `tabOrder` / `panes` / `activeSessionId` 是**每次调用各创建一份**的
+局部状态。拆分后若模块根与终端页各调一次，会出现两套互不相干的标签顺序与分屏布局
+（表现为「点击标签没反应」）。因此实例在模块根创建，经 prop 传给 `TerminalWorkspace`；
+终端页里由模块级快捷键触发的动作（复制/粘贴/搜索/清屏/分屏/独立窗口/SFTP/重命名）
+通过 `defineExpose` 的显式清单暴露，由模块根做一次转发。
+
+#### 四、约束（后续改动须遵守）
+
+1. **`h-9` 是卡片内的横向分隔线高度**：控制栏 / 状态栏 / `SftpPanel` 头部同为 h-9，
+   改其一必须同步（原契约是「SftpPanel 头部对齐卡片外的工具条行 h-11」，2026-09-21
+   控制栏收进卡片并降为 h-9 后该层已不存在）。
+2. **xterm 尺寸链不能断**：`TabsContent → 工具条 + 屏幕容器 → 画布` 全靠 `flex-1 min-h-0`。
+3. `ModuleContainer.vue` 的 `[data-main-scroll] … > div { height: 100% }` 是给全高模块（终端/翻译）补高度链的补丁，勿删。
+4. `TerminalWindow.vue`（独立窗口）与主窗口共用 `TerminalPane` / `TerminalStatusBar`，共享逻辑留在 `useSessionStream` 与 store，不下移到页面组件。
+
+#### 五、非终端页与其它模块的口径对齐（2026-09-21）
+
+第二轮对齐只动**观感与组件选型**，不改终端页（画布 + 状态栏）的结构：
+
+1. **外层 padding 归模块根**：根容器 `p-6` → `p-5`，各页不再自带 `p-3/p-5`
+   —— 此前「根 24px + 页内 12/20px」双重内缩，列表左边缘比其它模块多缩 16px。
+   分栏页（片段、设置）的沟槽也由模块根提供：`UI_DESIGN_SYSTEM.md` §3.4 的
+   「split 无 padding」指**分栏容器自身**不加 padding，不是让页面顶到窗口边缘。
+2. **列表一律用 `Card` 承载**（与 proxy「订阅列表」同口径）：`Card` + `CardContent`，
+   内部行保持 `rounded-md border`；页名与计数仍由 `PageToolbar` 承担，不再加 `CardTitle`。
+3. **表单控件走 `@/components/ui`**（`Input` / `Select` / `Textarea` / `Checkbox`），
+   不再出现裸 `<input>` / `<select>` / `<textarea>`。`SftpPanel` 的远程文件编辑器是
+   文档显式豁免，保持原生 `<textarea>`。
+4. **四态与徽章用 `@/components/common`**：空/加载用 `StateBlock`（注意它在 ScrollArea 内
+   不会垂直居中，需显式 `min-height`），状态类徽章用 `StatusBadge`；
+   纯计数的内联标记（历史 `×N`、Shell kind）保持 `text-[11px]` 文本，
+   避免 StatusBadge 的 20px 最小高度把行高抬起来。
+5. **设置页用 `SettingGroup` + `SettingRow`**（本仓库首批真实消费者）：分组自带卡片与
+   `divide-y`，行内不要再加边框/分隔；下拉/滑杆/输入这类表单项按 §3.4 的
+   「label 在上 + 控件全宽」纵排，不塞进 `SettingRow` 的值区。
+   控制列保留 `max-w-3xl`（§3.3 的例外：`SettingRow` 是 `justify-between`，
+   不限宽会把标签与控件拉到 900px 之外）。
+6. **分栏页保留页内滚动**：设置页/片段页的左右栏各自滚动（§3.4 split 模式），
+   不改外部滚动 —— 模块根有 `overflow-hidden`，改外部滚动会让左栏导航跟着滚走
+   （`sticky` 会被祖先的 `overflow-hidden` 杀死）。
+7. **历史页的键盘守卫**：`onKeydown` 挂在外层，对 Enter/↑↓ 无条件 `preventDefault`；
+   焦点落在按钮/下拉触发器/文本域上时先让路（`closest('button,[data-slot="select-trigger"],select,textarea')`），
+   否则换成 `Select` 后一次 Enter 会「先展开下拉、再把选中命令填进终端」。
+   搜索框不在让路之列：在那里 ↑↓ 选条目、Enter 填入是刻意保留的操作方式。
+
+#### 六、验证
+
+| 检查 | 结果 |
+|---|---|
+| `vue-tsc --noEmit` | exit 0 |
+| `vite build` | 成功（28.00s；TerminalModule chunk 160.34 kB） |
+| 待真机确认 | 6 个子页去框后与其它模块观感是否一致；终端屏幕的边界感；SFTP 面板与工具条行的对齐；分屏 / 右键菜单 / 搜索 / 会话模板 / AI 助手行为未变 |
+| 第二轮待真机确认 | 列表卡片化与 20px 沟槽；历史页在搜索框/来源下拉里按 Enter 的行为；设置页 8 个分区的行对齐；片段页右栏滚动条为自绘 |
+
+### 控制栏收进终端卡片与控件规范化（2026-09-21 第三轮）
+
+峰提出：「控制栏放在卡片外面不对」、「按钮 hover 应是统一的主题色字 + 半透明主题色底，
+看来有遗漏」、「字号三连图标改成『字体』按钮 + popover，图标按钮用 tooltip 而不是 title」、
+「状态栏调到与控制栏同高、字号调大、编码换成 popover」。
+
+#### 改动
+
+| 项 | 前 | 后 |
+|---|---|---|
+| 控制栏位置 | 卡片**外**的页面级工具条（h-11，`mt-1` 与卡片分隔） | 卡片**内**顶部（h-9 + `border-b`），与画布、状态栏同属一张「终端窗口」 |
+| 图标按钮 | 自定义 `.icon-btn`（hover = `--accent` + `--foreground`） | `Button variant="ghost"` —— 全项目唯一口径 `--primary-soft` + `--primary-soft-text` |
+| 按钮提示 | 原生 `title` | `Tooltip` + `TooltipContent`（菜单触发器用 `:disabled="open"`，避免提示压在菜单上） |
+| 字号 | 三个并排图标（缩小 / 放大 / 重置） | 「字体」按钮 + popover：滑块（6–48）+ 当前值 + 重置 |
+| 状态栏 | h-6 / 10px / 图标 `size-3` | h-9 / 12px / 图标 `size-3.5` |
+| 编码 | 原生 `<select>` | `Popover` 选项列表（当前项打勾 + 非默认编码提示） |
+| `SftpPanel` 头部 | h-11（对齐卡片外的工具条行） | h-9（对齐卡片内的两条栏） |
+
+#### 取舍
+
+1. **字号滑块复用 `bumpFont(delta)`**，不新增 `setFont` 接口：`bumpFont` 内部以
+   「临时覆盖值 ?? 设置值」为基准并收敛到 6–48，与状态栏展示的 `fontSize` 同源，
+   因此「基准 + 增量 = 目标值」恒成立。
+2. **编码的浮层反而是更稳的选择**：2026-09 早期用原生 select 的理由是
+   「shadcn 的浮层会被终端容器裁剪」，但 `PopoverContent` 走 `PopoverPortal`（挂 body），
+   不受卡片 `overflow-hidden` 影响 —— 该顾虑不成立，原生 select 的样式代价则一直存在。
+3. **高亮态加在 svg 上**：`Button.ghost` 已给按钮设 `text-fg-secondary`，
+   同元素再写 `text-primary` 的胜负取决于 Tailwind 输出顺序；`[&_svg]:text-primary`
+   落在子元素上确定覆盖继承色（「日志记录中」的 ⋯ 用它）。
+
+#### 验证
+
+| 检查 | 结果 |
+|---|---|
+| `eslint src/modules/terminal` | exit 0 |
+| `vue-tsc --noEmit` | exit 0 |
+| 待真机确认 | tooltip 与下拉菜单不叠加；滑块拖动跟手且「重置」回落；编码浮层在卡片/独立窗口内均不被裁剪；SFTP 头部与上下栏等高 |
+
+### 独立窗口与 Ctrl+3 快捷新建（2026-09-21 第四轮）
+
+峰提出：「控制栏的 tooltip 似乎和点击事件冲突，新建会话/更多操作点不动」、
+「独立窗口复用终端页内部窗口，再加最小化/最大化/关闭」、「加一个 Ctrl+3 直接开独立窗口，
+打开时列出 SSH + 本地终端 + 新建的选择」。
+
+#### 一、修 tooltip 与菜单触发器冲突
+
+现象：控制栏的「新建会话」「更多操作」点击后毫无反应（菜单不出现）。
+三轮定位过程：① `TooltipTrigger as-child` 直接包 `DropdownMenuTrigger as-child`（同时给
+`DropdownMenu` 绑了 `v-model:open` 以便展开时收起提示）；② 中间夹一层真实 `<span>` 作锚点
+（仍带着 `v-model:open`）；③ 去掉 Tooltip 与 `v-model:open` —— 菜单恢复可用。
+
+结论：**受控 `open` 是元凶**。给 `DropdownMenu`（本项目对 `DropdownMenuRoot` 的封装）
+绑 `v-model:open` 后菜单点不开；Tooltip 只要锚在**包裹元素**上（而不是把菜单触发器当作
+它的 as-child 子节点）就没有副作用。最终形态：
+
+```
+Tooltip > TooltipTrigger as-child > div（包裹元素）
+                                      └─ DropdownMenu @update:open（仅监听，不绑 open）
+                                          └─ DropdownMenuTrigger as-child > Button
+```
+
+两个菜单触发器（本组件的「更多操作」、标签栏的「新建会话」）现在都有 Tooltip，
+文案统一 `side="bottom"`（控制栏在卡片/窗口最顶部，向上弹会被裁掉）。
+
+**约束**：① 本项目不给 `DropdownMenu` 绑 `v-model:open`（需要开合状态时只监听
+`@update:open`）；② Tooltip 的锚点用普通元素，不要直接套在菜单/弹层触发器上。
+
+#### 二、独立窗口 = 单会话的终端卡片
+
+| 项 | 前 | 后 |
+|---|---|---|
+| 结构 | h-8 标题栏（菜单图标 + 会话名 + 窗口按钮）+ 画布 + 状态栏 | 与终端页同构：控制栏（h-9）+ 画布 + 状态栏 |
+| 控制栏左端 | — | 会话身份（图标 + 名称 + 目标），**兼窗口拖拽区**（`data-tauri-drag-region` + 子元素 `pointer-events-none`） |
+| 控制栏右侧 | — | 复用的 `TerminalToolbar`（`standalone` 模式）+ 最小化/最大化/关闭 |
+| Tooltip | 无（窗口是独立入口，没有 TooltipProvider） | 窗口根加 `TooltipProvider` |
+| 主题 | **不跟随主窗口**（窗口不加载 appStore，也没有各自的 applyTheme 副本） | 补上独立窗口的 `applyTheme`：读同一份 `localStorage` 设置 → `win.setTheme` + `dark` class + `applyStoredAccent`，并监听 `storage` / `prefers-color-scheme` 跟随主窗口改动（与快速面板、剪贴板弹窗、下载窗口同一套做法）；**不应用 mica/acrylic**（本窗口是不透明窗口，见 `terminal/window.rs`） |
+| 提示条 | 无 Toaster（`toast.*` 静默失效） | 自带 `Toaster`（Toaster 是窗口级的） |
+
+`standalone` 模式隐藏三类只对主窗口终端页成立的动作：独立窗口按钮（自己就是那个窗口）、
+文件面板 / 端口转发 / 会话模板（它们开的是终端页的面板与分屏）；保留搜索、字体、清屏、
+重命名（文案改「重命名会话」）、AI 助手、会话日志。
+
+**取舍**：窗口仍是「一个会话 ↔ 一个窗口」，不渲染标签栏 —— 主窗口那侧的「已在独立窗口打开」
+提示条与标签上的「独立」徽标以此为准。控制栏动作与 TerminalWorkspace 有**少量有意重复**
+（搜索/清屏/重命名/日志）：那边还要管分屏与 SFTP，抽共享 composable 会把状态搅在一起。
+
+#### 三、Ctrl+3：全局快捷键 + 选择框
+
+**最终形态（2026-09-21 第二轮调整后）**
+
+- **先开窗、再问**：快捷键触发 → 立刻创建「选择窗口」（`#new-terminal-window`，
+  `NewTerminalWindow.vue`，label 前缀 `terminal-window-new-` 以命中同名 capability）
+  → 用户在**这个窗口里**选本地 Shell / SSH 主机 → 建会话 →
+  `terminal_detach_session` 交给 Rust 用规范 label（`terminal-window-<id>`）开真正的会话窗口
+  → 选择窗口关闭（两者同尺寸同居中，视觉上是「原地换成了会话窗口」）。
+  **不再经过主窗口弹窗**，也不再把主窗口拉到前台 —— 会话窗口由 Rust 创建且此时还没有
+  sessionId，窗口 label 在 Tauri 里不可改，所以「选择窗口」与「会话窗口」只能是两个窗口。
+  想要零切换需要新增 Rust 命令（把已有窗口认领为某会话的窗口），当前未做。
+- **键位可自定义**：`newDetachedWindow` 作为一条动作放进 `TERMINAL_ACTIONS`，
+  于是它跟着终端设置一起存、一起改（设置 → 快捷键 → 会话 → 新建独立窗口，默认 `Ctrl+3`，
+  与其它键位一样支持录制与开关）；Rust `default_shortcuts()` 同步加一条，`heal()` 会为老配置补齐。
+  `TerminalQuickLaunch`（常驻 App 层）读该键位并用 `plugin-global-shortcut` 注册，
+  键位变化即重新注册；关掉该行开关 = 不注册。
+- **终端内分发不处理它**：全局注册在应用前台时同样生效，两处都处理会开出两个窗口，
+  因此 `TerminalModule` 的 `onAction` 里是一个带注释的空分支。
+
+#### 四、窗口首帧不再闪白（2026-09-21 第二轮追加）
+
+现象：深色模式下打开独立窗口 / 选择窗口，会先出现一个纯白窗口，随后才变深色。
+
+原因：两个窗口都是**可见创建**的 —— WebView 初始底色是白的，而深浅色主题要等前端
+读到 `localStorage` 设置后才应用。窗口在主题生效之前就已经显示出来了。
+
+做法（沿用本项目的既有范式，见 `translate/popup.rs` 的预创建）：
+
+| 窗口 | 创建方式 | 显示时机 |
+|---|---|---|
+| 会话窗口（Rust `terminal/window.rs`） | `visible(false)` + `focused(false)`（新增） | `TerminalWindow.vue` 的 `onMounted`：`applyTheme()` → `show()` + `setFocus()` |
+| 选择窗口（前端 `openWindow.ts`） | `visible: false` + `focus: false` | `NewTerminalWindow.vue` 同上 |
+
+同时两个窗口的 `applyTheme()` 里补了 `win.setBackgroundColor(--background 的值)`：
+`show()` 那一刻 DOM 可能还没绘制完，窗口底色是主题色才不会露出白底。
+capability 因此多了 `core:window:allow-show`（`terminal-window.json`）。
+`show()` 放在主题之后、会话校验之前 —— 即使后面初始化失败（会话已结束等），
+窗口也已可见，错误提示才看得见。
+
+#### 五、设置跨窗口同步与「跟随应用主题」修复（2026-09-21 第三轮追加）
+
+峰提出三件事：独立窗口不跟随主窗口改的终端配色；其它设置要不要/能不能同步；
+「跟随应用主题」开关像没生效（改应用深浅时终端不变）。
+
+**1. 跨窗口同步（原来完全没有）**
+
+终端设置存在 Rust 侧，而每个窗口各有一份前端副本 —— 主窗口改完，已打开的独立窗口
+永远用旧值。现在：Rust 在 6 个保存命令（settings / appearance / layout / selection /
+security / shortcuts）后广播 `terminal-settings`（无负载；`save_settings` 上没有 AppHandle，
+故在命令层发）；前端 `terminalStore` 监听该事件 → `loadSettingsInner()` 重读 →
+`effectiveAppearance` / 状态栏显隐等随之更新。**能同步的就是这些**：外观、布局、选择、
+安全、快捷键；主机 / 密钥 / 片段等列表数据在各自面板打开时重读，不需要推送。
+
+**2. 「跟随应用主题」此前是死开关**
+
+`followAppTheme` 从来没被任何代码读过（主题只按 `resolveTheme(appearance.theme)` 解析），
+且 `resolveTheme('system')` 读的是**非响应式**的 DOM class —— 应用切深浅时没人重算。
+现在按 Rust 字段说明的原始意图实现：**开关打开时，所选主题只作亮/暗取色基准**
+（`vscode-dark↔vscode-light`、`solarized-dark↔solarized-light`；Dracula / One Dark 只有
+深色，浅色下回落 VS Code 浅色）；关闭时用所选主题本身（`system` 按当时深浅解析一次）。
+实现要点：新增响应式 `appIsDark`（`terminalThemes.ts`），由 appStore 与各独立窗口的
+`applyTheme` 写入；`useSessionStream.effectiveAppearance` 用 `effectiveThemeName()` 解析出
+**具体主题名**后再交给面板，于是应用改深浅 → computed 重算 → xterm 换皮肤。
+
+**3. 顺带修掉陈旧默认值**：Rust 默认 `theme` 是 `thing-dark`（一套从未实现的主题，
+解析时静默回落到 vscode-dark，用户会以为「选了主题不生效」）。默认改为 `system`，
+`heal()` 里把不认识的 key 一律收敛到 `system`。
+
+#### 六、设置项逐个核对与修复（2026-09-21 第四轮追加）
+
+峰报了两个具体问题（背景不透明度无效、独立窗口右键无反应），并要求核对其余设置。
+逐字段核对后确认了**一批「设置了但没有任何代码读它」的死设置**，以及若干只在终端页
+生效、独立窗口漏掉的行为。
+
+**已修**
+
+| 问题 | 原因 | 修法 |
+|---|---|---|
+| 背景不透明度无效 | `appearance.opacity` 从没被读过 | `allowTransparency: true`（构造时固定）+ 主题背景写成带 alpha 的 8 位 hex（`themeWithOpacity`）；不透明度 < 100 时**主动丢弃 WebGL**（WebGL 渲染器不认 `allowTransparency`，否则看起来仍是没反应）；面板容器底色同带 alpha，避免四周取整边缘颜色不一致 |
+| 独立窗口右键无反应 | 右键菜单只是终端页里的一段内联标记；`main.ts` 又全局 `preventDefault` 了原生菜单 | 菜单抽成共用组件 `TerminalContextMenu.vue`，两个宿主都接 `@contextmenu`（menu / paste / select-word 三种行为一致） |
+| 独立窗口不尊重「显示状态栏」 | 窗口无条件渲染状态栏 | 加 `showStatusBar !== false` 守卫 |
+| 独立窗口复制忽略「去掉末尾换行」 | 窗口内联硬编码 `replace(/\n+$/,'')` | 键盘与菜单统一走 `doCopy()` |
+| 「面板数量上限」下拉改不动 | `<Select :model-value>` 没有 `@update:model-value` | 补上处理 |
+| 字号滑杆可拖到后端不认的值 | UI 6–48，后端 heal 只认 8–40 → 静默改回 14 | UI 收敛到 8–40 |
+| 快捷键表两侧不一致 | `history` 只在 Rust 有（设置页看不到，保存时会被抹掉）；`detachWindow` 只在设置页有（Rust `heal()` 会剔除） | 两侧都补齐；`heal()` 只保留默认表内 action，这条约束写进了注释 |
+
+**死设置：全部实现（同日追加）**
+
+上一版列出的 8 项「设置了但没有代码读它」的字段，按「让设置真的驱动行为」逐项落地。
+原则：**不删除用户能看见的开关**（除确实无宿主的两项），把开关接到已有链路上。
+
+| 设置 | 修法 |
+|---|---|
+| `layout.confirmCloseRunning` | `closeTab()` 加守卫：关闭时**连 `sessionAlive` 查询都不发**（那是一次 IPC + 后端进程探测），直接关 |
+| `layout.inheritCwd` | `newLocalTab()` 在调用方未显式传 cwd 时取**当前激活会话**的 cwd；只对**本地**会话生效 —— SSH 的 cwd 是远端路径，本地 shell 起不来（Windows 上 `/home/ops` 会被判非法目录） |
+| `layout.sidebarOpen` / `sidebarWidth` | 无宿主（终端模块的侧栏是 host 面板的 tab，不是可折叠轨道）→ 从 Rust `LayoutSettings`、前端类型、设置页草稿三处**删除**；容器级 `#[serde(default)]` 让旧配置里的多余字段被忽略，无需迁移 |
+| `selection.copyOnSelect` | 在 `TerminalPane` 的 **mouseup**（仅左键）写剪贴板，复用 `trimTrailingNewline`。刻意不放 `onSelectionChange`：拖动过程中它每次变化都触发，会把一次拖选切成几十次剪贴板写入 |
+| `selection.middleClickPaste` | `TerminalPane` 上 `@mousedown.capture.middle`：`preventDefault` 挡掉 Chromium/Windows 的「中键自动滚动」，捕获阶段 `stopPropagation` 让 xterm 的鼠标状态机完全看不到这次中键；因事件被吞，焦点由处理函数自己 emit |
+| `security.hostKeyPolicy` | `check_server_key` **显式读取**该字段（此前写死走 ask）。唯一合法取值仍是 `"ask"`，其它取值按 `"ask"` 处理并记日志——安全开关的失败方向必须朝更严一侧；`heal()` 同时把非法值收敛回 `"ask"`（修数据 + 防空两道保险） |
+| `security.blockOnFingerprintChange` | 关闭时「与记录不符」**不再弹确认**，改为自动 `hostkey::accept`（旧指纹进变更历史，事后仍可查出「密钥曾被悄悄换过」）+ 记一条 warn。开着时行为不变（红框阻断式确认） |
+| `security.auditLog` | 原来描述与实现是两件事：字段注释写的是「输入输出落盘」，而 UI 写的是「主机密钥确认 / 指纹变更等事件写日志」。按 **UI 的口径**实现（会话输出落盘由工具栏的 `terminal_toggle_logging` 按会话显式开启，`audit` 模块的取舍说明里已论证过「不自动记录屏幕内容」）。`SshHandler::audit()` 单入口收敛五类事件（已信任 / 变更 / 变更被接受 / 首次接受 / 自动接受），命中前先判开关；`terminal_confirm_host_key` 也记一条用户的接受/拒绝（该命令新增 `app` 参数，specta 会把 `AppHandle` 从 JS 签名剔除，前端调用不变）。**默认值 `false` 改 `true`**：只写事件行、不含屏幕内容，没有隐私代价，默认开才能保证事后可查 |
+
+顺带修掉一处陈旧文案：布局页「面板数量上限」的说明还写着「分屏功能在后续版本提供」，
+而分屏早已实现，改为说明真实含义与封顶 4 的原因。
+
+#### 验证
+
+| 检查 | 结果 |
+|---|---|
+| `eslint src` | exit 0 |
+| `vue-tsc --noEmit` | exit 0 |
+| `cargo check`（src-tauri） | exit 0 |
+| 待真机确认（第四轮 · 死设置） | 关闭「关闭运行中的会话前确认」后关标签不再弹窗；开启「新会话继承当前目录」后新建本地标签落在当前 cwd（SSH 会话下不继承）；「选中即复制」选中后剪贴板有内容、「中键粘贴」中键一次只粘一次；关掉「指纹变更时阻断连接」后换过密钥的主机直接连上且日志有 warn；关掉「记录安全事件」后日志不再出现主机密钥事件行；布局页不再有陈旧文案 |
+| 待真机确认（第三轮） | 新建/更多菜单可点开、tooltip 正常；独立窗口拖拽/最小化/最大化/关闭；Ctrl+3 从其它应用按下能唤到前台并建出窗口；终端模块禁用后 Ctrl+3 不再占用；深色模式下开窗不再闪白；主窗口改终端配色/字号后独立窗口即时同步；应用切深浅时终端画布一起变 |
+
 ## 附：P1 新增命令清单（供前端对接与后续维护）
 
 | 命令 | 参数 | 返回 |
diff --git a/UI_DESIGN_SYSTEM.md b/UI_DESIGN_SYSTEM.md
new file mode 100644
index 0000000..c3ed4ea
--- /dev/null
+++ b/UI_DESIGN_SYSTEM.md
@@ -0,0 +1,756 @@
+# Thing UI 设计系统与开发约束
+
+> **适用范围**：`src/` 下全部前端代码（12 个模块、220+ 组件）
+> **约束力**：第 7 章为硬性约束，Code Review 据此判定；第 3–5 章为实现规范
+> **配套**：`UI Design System` 画布（色彩 / 排版 / 组件 / 骨架四屏可视化规范）
+> **唯一事实来源**：token 值以 `src/style.css` 为准，本文档与之同步
+
+---
+
+## 1. 设计原则
+
+以下 8 条为不可协商项，贯穿全部模块。
+
+**P1 · 单一强调色**
+全应用只有 `--primary` 一种交互色，用于按钮、链接、选中态、焦点环。不存在"第二个主题色"。状态色（success/warning/danger）仅表达**状态**，不得用于可点击元素。
+
+**P2 · 颜色只能来自 token**
+禁止在组件内写 hex、rgb、oklch，禁止引用 Tailwind 原生色阶（`bg-blue-500`、`text-emerald-700`）。组件里出现的每个颜色都必须能追溯到 `style.css` 的一个语义变量。
+
+**P3 · 状态必须四态齐全**
+任何数据驱动的界面必须实现 **加载 / 空 / 错误 / 成功** 四态。禁止空白，禁止静默失败。这是最容易漏、也最影响质感的一条。
+
+**P4 · 一个主区域，一个主操作**
+每屏有且仅有一个视觉重心、一个主按钮。破坏性操作（停止内核、删除记录）必须视觉降级或二次确认，且不得与主操作同权重。
+
+**P5 · 骨架统一，内容区自治**
+所有模块共享同一套外壳（侧边栏 / 标题栏 / Tab 行）。**模块之间允许不同的只有内容区布局**——这是"统一"与"灵活"的分界线。
+
+**P6 · 密度一致**
+全应用统一使用**紧凑偏中**密度：13px 正文、34px 控件、16px 卡片内边距。禁止在同一屏内混用疏密两种节奏。
+
+**P7 · 卡片统一描边 + 轻阴影，浮层用重阴影**
+层级靠**表面色差 + 1px 描边 + 轻阴影（`shadow-sm` / `--shadow-card`）**表达。浮层（下拉、气泡、对话框）使用更重的 `--shadow-popover` / `--shadow-dialog`。
+
+**P8 · 中文界面不做负字距**
+字体模板中的负字距（`-0.28px` 等）是为拉丁字母设计的，会让中文发挤。**拉丁文与数字可保留微调，中文一律 `letter-spacing: 0`。**
+
+---
+
+## 2. Design Token
+
+### 2.1 命名与结构
+
+Token 分四组，**在现有 shadcn 变量之上扩展，不另起一套**：
+
+```
+shadcn 既有（值调整）  →  --background / --foreground / --primary / --card / --border / ...
+本项目扩展            →  --canvas / --fg-* / --success / --warning / --data-* / --shadow-*
+```
+
+**关键调整**：把 shadcn 的 `--primary` 从当前近黑色（`oklch(0.21 0.006 285.885)`）改为强调蓝 `#0066CC`。这样全部 shadcn 组件（Button / Switch / Checkbox / focus ring）自动获得统一的交互色，无需逐组件改样式。
+
+### 2.2 色彩
+
+#### 浅色模式（`:root`）
+
+```css
+:root {
+  /* ── 表面 ───────────────────────────── */
+  --canvas:        #F5F5F7;  /* 应用底 / 模块内容区背景 */
+  --background:    #FFFFFF;  /* shadcn 基准面 */
+  --card:          #FFFFFF;  /* 卡片 / 面板 */
+  --popover:       #FFFFFF;  /* 浮层 */
+  --subtle:        #F0F0F2;  /* 次级填充：搜索框底、分段控件槽、代码块 */
+  --hover:         #EBEBED;  /* 幽灵控件 hover */
+  --active:        #E4E4E7;  /* 幽灵控件 active */
+
+  /* ── 描边 ───────────────────────────── */
+  --border:        #E4E4E7;  /* 卡片外框、输入框 */
+  --border-strong: #D1D1D6;  /* 需要更强分隔时 */
+  --divider:       #F0F0F2;  /* 卡片内部分隔线（1px） */
+  --input:         #E4E4E7;
+
+  /* ── 文字 ───────────────────────────── */
+  --foreground:    #1D1D1F;  /* 主文字：标题、正文、数值 */
+  --fg-secondary:  #55555C;  /* 次文字：键名、标签说明、幽灵控件文字 */
+  --muted-foreground: #8A8A90; /* 辅助：占位符、规格说明、次级 meta */
+  --fg-disabled:   #B4B4BA;  /* 禁用 */
+
+  /* ── 强调 ───────────────────────────── */
+  --primary:            #0066CC;
+  --primary-hover:      #0055B3;
+  --primary-active:     #004A9E;
+  --primary-foreground: #FFFFFF;
+  --primary-soft:       #E8F1FC;  /* 选中 Tab 底、选中行底 */
+  --primary-soft-text:  #004F9E;  /* 上述底上的文字 */
+  --ring:               #0071E3;
+
+  /* ── 语义状态 ───────────────────────── */
+  --success:      #0F7B4F;  --success-soft: #E7F5EE;  --success-text: #0B5C3B;
+  --warning:      #A96B00;  --warning-soft: #FDF4E4;  --warning-text: #7D4F00;
+  --danger:       #C7362F;  --danger-soft:  #FDECEA;  --danger-text:  #9A2620;
+  --info:         #0066CC;  --info-soft:    #E8F1FC;  --info-text:    #004F9E;
+  --neutral:      #8A8A90;  --neutral-soft: #F0F0F2;  --neutral-text: #55555C;
+  --destructive:  #C7362F;  /* shadcn 兼容别名，指向 danger */
+  --destructive-foreground: #FFFFFF;
+
+  /* ── 数据方向（与状态语义解耦）───────── */
+  --data-down: #0F7B4F;  /* 下载 / 入站 */
+  --data-up:   #C7362F;  /* 上传 / 出站 */
+
+  /* ── 尺寸 ───────────────────────────── */
+  --radius: 12px;
+  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 8px;
+  --radius-lg: 12px; --radius-xl: 16px;
+
+  /* ── 阴影 ───────────────────────────── */
+  --shadow-card:    0 1px 2px rgba(0,0,0,0.06);
+  --shadow-popover: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.10);
+  --shadow-dialog:  0 4px 12px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.16);
+}
+```
+
+#### 深色模式（`.dark`）
+
+深色下**必须成对重定义**，且强调色改为亮蓝（`#0066CC` 在深底上对比度不足）：
+
+```css
+.dark {
+  --canvas:        #16161A;
+  --background:    #16161A;
+  --card:          #1E1E22;
+  --popover:       #1E1E22;
+  --subtle:        #26262B;
+  --hover:         #2C2C32;
+  --active:        #33333A;
+
+  --border:        #2E2E34;
+  --border-strong: #3A3A42;
+  --divider:       #26262B;
+  --input:         #2E2E34;
+
+  --foreground:    #F5F5F7;
+  --fg-secondary:  #A8A8B0;
+  --muted-foreground: #7A7A82;
+  --fg-disabled:   #55555C;
+
+  --primary:            #2997FF;
+  --primary-hover:      #4AA8FF;
+  --primary-active:     #1A85E8;
+  --primary-foreground: #FFFFFF;
+  --primary-soft:       #14304D;
+  --primary-soft-text:  #7FC0FF;
+  --ring:               #2997FF;
+
+  --success: #3DC77F;  --success-soft: #12301F;  --success-text: #7FE0AB;
+  --warning: #E0A83C;  --warning-soft: #33260E;  --warning-text: #F0C976;
+  --danger:  #FF6B60;  --danger-soft:  #3A1A18;  --danger-text:  #FF9E96;
+  --info:    #2997FF;  --info-soft:    #14304D;  --info-text:    #7FC0FF;
+  --neutral: #7A7A82;  --neutral-soft: #26262B;  --neutral-text: #A8A8B0;
+  --destructive: #FF6B60; --destructive-foreground: #FFFFFF;
+
+  --data-down: #3DC77F;
+  --data-up:   #FF6B60;
+}
+```
+
+#### 状态色三件套的用法
+
+每个语义状态有 **3 个** token，用途严格区分：
+
+| Token | 用途 | 示例 |
+|---|---|---|
+| `--success` | 实心：状态点、图标、粗体数值 | ● 运行中 的圆点 |
+| `--success-soft` | 浅底：徽章背景、行高亮 | `<span class="bg-success-soft">` |
+| `--success-text` | 浅底上的文字 | 徽章内的"已安装" |
+
+**禁止**把 `--success` 用作文字色 + `--success-soft` 以外的底色组合，也**禁止**用状态色做可点击元素的颜色（见 P1）。
+
+#### 强调色的使用边界
+
+`--primary` 只表达两件事：**这里可以点**、**这里是当前项**。
+
+| 用 | 不用 |
+|---|---|
+| 主按钮底色、开关开启态、焦点环 | 卡片标题前的**装饰性图标** |
+| 当前 Tab / 选中列表行 / 选中项 | 全部 Tab 的图标 |
+| 可点击的文字链接 | 状态徽章（那是状态语义色的职责） |
+| 输入框聚焦态 | 大面积背景、分隔线、装饰元素 |
+
+**反例（已修正）**：proxy 概览页的 6 个卡片标题图标全部用了 `text-primary`，加上主按钮、开关、选中态，整屏发蓝 —— 结果"蓝色"不再意味着"可点击"，层次感也丢了。已统一改为 `--fg-secondary`。
+
+#### 数据方向色（`--data-*`）
+
+下载/上传速率沿用现有视觉（绿/红），但独立成 token，**与 `success/danger` 解耦**。
+
+> **待决策**：当前 `data-up` 与 `danger` 同色，会让人把"上传速率"误读为"异常"。若希望彻底解耦，建议改为
+> `--data-down: #0066CC`（蓝）/ `--data-up: #A96B00`（琥珀）。这是**唯一改动成本为零**的时机——只需改两个 token。
+
+### 2.3 排版
+
+字体族保持不变（现有 `--font-sans` 已正确针对中文优化）：
+
+```css
+--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+             'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
+--font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+```
+
+生产代码不引用外部字体 CDN（设计稿 / 原型页可保留 Inter）；数值对齐通过全局 `font-feature-settings: 'tnum','lnum'` 实现，不依赖具体字体。
+
+字号标尺（9 级，全部为 `px`）：
+
+| Token | 字号 / 字重 | 行高 | 用途 |
+|---|---|---|---|
+| `display` | 28 / 700 | 36 | 页面级大标题（设置页、关于页），**全应用不超过 1 处/屏** |
+| `metric` | 22 / 600 | 28 | 关键数值（速率、容量）· **必须 `font-variant-numeric: tabular-nums`** |
+| `h1` | 16 / 600 | 24 | 模块标题、卡片标题 |
+| `h2` | 14 / 600 | 20 | 区块标题、卡片标题（小卡） |
+| `h3` | 13 / 600 | 20 | 小节标题、列表分组标题 |
+| `body` | 13 / 400 | 20 | **界面默认正文** |
+| `body-strong` | 13 / 600 | 20 | 行内强调、键值行的键 |
+| `caption` | 12 / 400 | 18 | 辅助说明、参数解释 |
+| `label` | 11 / 500 | 16 | 徽章、标签、表头、单位 |
+
+**规则**：
+
+1. 字号只从以上 9 级中取，**禁止 `text-[13.5px]` 这类任意值**。
+2. 数值（速率、版本号、计数）统一用 `tabular-nums`，避免刷新时数字跳动。
+3. 中文 `letter-spacing: 0`；拉丁小标题可 `-0.1px`，正文一律 `0`。
+4. 行高按表中固定值写，不用 Tailwind 默认相对行高。
+
+### 2.4 间距
+
+4px 基数，**8 个值，用尽即止**：
+
+| Token | 值 | 典型用途 |
+|---|---|---|
+| `space-1` | 4 | 图标与文字间隙、徽章内边距（纵向） |
+| `space-2` | 8 | 控件内元素间隙、徽章内边距（横向） |
+| `space-3` | 12 | 列表行内间隙、卡片标题与内容间距 |
+| `space-4` | 16 | **卡片内边距、卡片间距** |
+| `space-5` | 20 | **模块内容区默认内边距** |
+| `space-6` | 24 | 区块之间、对话框内边距 |
+| `space-8` | 32 | 大区块分隔 |
+| `space-12` | 48 | 页面级分段 |
+
+**禁止** `p-[18px]`、`gap-[14px]`、`mt-[6px]`。需要更细的调整时，说明是布局问题而非间距问题。
+
+### 2.5 圆角
+
+| Token | 值 | 适用 |
+|---|---|---|
+| `radius-xs` | 4 | 内联小元素：标签内块、进度条端点 |
+| `radius-sm` | 6 | 徽章、小按钮、下拉项 |
+| `radius-md` | 8 | **按钮、输入框、下拉框、分段控件、Tab 项** |
+| `radius-lg` | 12 | **卡片、面板、样张容器** |
+| `radius-xl` | 16 | 对话框、大浮层 |
+| `radius-full` | 9999 | 状态点、开关、头像、搜索框（胶囊） |
+
+**规则**：同层级控件必须同圆角。按钮 8px 就全应用 8px，不允许某模块用 6px。
+
+### 2.6 阴影与层级
+
+**层级主要靠表面色差 + 描边 + 轻阴影**（P7）：
+
+| 层级 | 表现 | 用途 |
+|---|---|---|
+| L0 应用底 | `--canvas`，无描边无阴影 | 窗口、模块内容区 |
+| L1 卡片 | `--card` + 1px `--border` + 轻阴影 `shadow-sm` | 所有卡片、面板 |
+| L1.5 次级容器 | `--subtle`，无描边 | 搜索框底、分段控件槽、代码块 |
+| L2 浮层 | `--card` + `--shadow-popover` | 下拉菜单、气泡、tooltip、右键菜单 |
+| L3 模态 | `--card` + `--shadow-dialog` + 遮罩 | 对话框、AlertDialog |
+
+卡片默认使用轻阴影 `--shadow-card`（`shadow-sm`）；`--shadow-popover` / `--shadow-dialog` 仅用于浮层与模态。
+
+### 2.7 动效
+
+```css
+--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);  /* 沿用现有 tab-animate 曲线 */
+--duration-fast: 120ms;  /* hover、颜色变化 */
+--duration-base: 200ms;  /* 展开、浮层出现 */
+--duration-slow: 320ms;  /* 页面/Tab 切换 */
+```
+
+**规则**：
+
+1. 只对 `opacity` 和 `transform` 做动画（性能）。
+2. 按钮按下统一 `transform: scale(0.97)`，不用颜色变化模拟按压。
+3. 所有动画必须包在 `@media (prefers-reduced-motion: reduce)` 里降级为 `none`（现有 `.music-eq` 已正确实现，作为模板）。
+4. Tab 切换复用现有全局 `.tab-animate` 类，**不要各模块自建过渡**。
+
+### 2.8 图标
+
+- 库：`@lucide/vue`，**禁止混用其他图标库或内联 Unicode 符号**（`↓` `✓` `●` 等）。
+- 尺寸只有 3 档：`14`（行内 / 徽章内）、`16`（按钮、Tab、默认）、`20`（侧边栏、卡片标题）。
+- `stroke-width` 统一 `1.75`（lucide 默认 2，偏粗，与 13px 正文不协调）—— 在 `style.css` 里对 `.lucide` 全局设置，不要逐个组件写。
+- 图标**不单独承载语义**：状态点旁必须有文字，工具栏图标必须有 tooltip 或文字标签（P4 可理解性）。
+
+### 2.9 主题色自定义（已落地）
+
+**需求**：设置页提供主题色选择，统一改变全应用的强调色。
+
+**可行性**：可行且成本低 —— 因为全应用的"可交互色"已经收敛到单一来源 `--primary`。落地后组件层改动为 0。
+
+**实现**：`src/lib/theme.ts`（派生 + 应用）+ `appStore.setAccent()` + 设置页「主题色」卡片。
+用户**只选一个基色**，深浅两套由代码派生 —— 不需要为浅色/深色各选一次（同色相两个亮度是既有做法：
+浅 `#0066cc` / 深 `#2997ff`），也不会出现"浅色选青、深色选紫"的语义割裂。
+
+#### 需要派生的变量
+
+只改基色是不够的，必须同时派生 7 个变量，否则 hover / 选中态仍是旧色：
+
+| 变量 | 派生规则（OKLCH，色相 H 原样保留） | 用途 |
+|---|---|---|
+| `--primary` | 基色，L 归一到 `0.42–0.58`（浅）/ `0.68–0.80`（深），C 限制在 `0.06–0.20` | 主按钮、开关、焦点环 |
+| `--primary-hover` | 浅：L − 0.08；深：L + 0.06 | 主按钮 hover |
+| `--primary-active` | 浅：L − 0.16；深：L − 0.10 | 主按钮按下 |
+| `--primary-soft` | 浅：`oklch(0.95, C×0.30, H)`；深：`oklch(0.30, C×0.45, H)` | 选中底、幽灵按钮 hover |
+| `--primary-soft-text` | 基色加深/提亮起步，再按对比度推进到 ≥4.5:1 | 上述底上的文字 |
+| `--ring` | 同 `--primary` | 焦点环 |
+| `--primary-foreground` | 白字低于 2.5:1 时才换 `#1D1D1F` | 填充上的文字 |
+
+深色模式**单独派生一套**（深底上要提亮），不能复用浅色值。
+
+#### 关键技术点
+
+1. **用 OKLCH 做派生，不要用 HSL。**
+   只换色相 H、锁定 L 与 C，才能保证换任意色相后对比度一致。HSL 的"明度"感知不均匀，换色相会时亮时暗。
+
+2. **对比度靠"推进亮度"而不是固定阈值判定。**
+   同一 OKLCH L 下不同色相的 WCAG 亮度差很多（L=0.58 的青柠对白底只有 ~2.8:1，蓝色却有 ~5:1），
+   所以归一到区间后还要继续推进 L 直到达标：
+   - 浅色：`--primary` 对 `#FFFFFF` ≥ 4.5:1（它会被当文字用在白卡上）→ 选亮色自动压暗
+   - 深色：`--primary` 对 `#1E1E22` ≥ 4.5:1 → 自动提亮
+   - `--primary-soft-text` 对 `--primary-soft` ≥ 4.5:1
+   以上断言在 `src/lib/theme.test.ts` 里对 10 个预设 × 2 模式全量校验。
+
+3. **`--primary-foreground` 的取舍是有意的。**
+   深色模式下强调色必须够亮才能在深底上当文字用（≥4.5:1），同一颜色做填充时白字只能到 2.7–3:1 ——
+   现有主题就是这个取舍（`#2997ff` + 白字 ≈ 2.98:1）。因此门槛按 UI 组件的 2.5:1 兜底，
+   只在自定义极亮色时才改深墨。
+
+4. **只开放"强调色"，不开放状态色。**
+   `success` / `warning` / `danger` 是语义色，改了会破坏"绿色=成功"的心智模型。`--data-*` 同理。
+   `--info` 一族当前取值与强调色相同（蓝），但**不跟随**主题色 —— 它表达"信息"而非"可交互"，
+   换紫/绿主色后少数徽标（代理"国外"、HTTP 1xx/3xx、快速面板分类）仍是蓝色，属有意的语义区分。
+
+5. **预设 + 自定义。**
+   10 个预设（默认蓝 / 靛蓝 / 紫罗兰 / 玫红 / 橙 / 琥珀 / 青柠 / 翠绿 / 青绿 / 石墨）+ 原生取色器。
+   纯自由取色很容易选出对比度不达标的颜色，所以色板优先。
+   色板显示色用**派生后的浅色模式主色**（所见即所得，如青柠显示为压暗后的绿）。
+
+6. **实时预览 + 可回滚。**
+   点击色块 / 拖动取色器立即生效（写 7 个变量，无防抖）；「恢复默认」清除行内变量回到内置蓝。
+
+7. **持久化**：随其它设置写入 `thing_app_settings`（`accentId` + `accentHex`）。
+   属**纯增量字段**，`SETTINGS_VERSION` 不递增 —— 递增会命中"版本不匹配清空"分支，
+   把用户的模块排序/启停/开机自启一并抹掉，为零收益付真实数据损失。
+
+8. **行内变量的优先级陷阱。**
+   变量写在 `documentElement` 的行内样式上，优先级高于 `:root` 与 `.dark` 两条规则，因此：
+   切模式必须**整组 7 个重写**（否则浅色的行内值会残留到深色模式）；
+   恢复默认必须 `removeProperty`（写空串仍算"已设置"）。
+
+#### 落地范围
+
+- `src/lib/theme.ts` —— 派生计算 + 应用/清除（新增，含单测）
+- `src/stores/appStore.ts` —— `accentId`/`accentHex` + `setAccent()`，在 `applyTheme()` 与
+  `handleSystemThemeChange()` 里按当前模式应用
+- `src/modules/settings/GeneralSettings.vue` —— 「主题色」卡片
+- 9 个独立窗口（快速面板 / 托盘菜单 / 下载窗 / 剪贴板弹窗与预览 / 翻译弹窗 / 截图覆盖层·编辑器·贴图）
+  各加一行 `applyStoredAccent()`；托盘菜单额外补 `storage` 监听
+- `src/style.css` —— **无需改动**（7 个变量已是 CSS 变量）
+- **首屏闪烁（FOUC）不需要额外处理**：主窗口 `visible: false`，`appStore.init()` 在 `show()` 前完成应用；
+  文档原建议的 Rust `initialization_script` 方案与本仓库 localStorage 方案冲突，不实施
+
+**影响面：0 处组件改动。** 这正是把交互色收敛到 `--primary` 单点带来的收益 —— 现在不做，将来也不用挨个改组件。
+
+---
+
+## 3. 页面框架
+
+框架只定义三件事：**谁多高、谁滚动、padding 加在哪**。这三件事定死之前，任何模块级的美化都会被布局 bug 吃掉。
+
+### 3.1 分区与高度约束链
+
+```
+AppShell                        h-screen   flex-col
+├ TitleBar                      h-14       shrink-0   固定 · 侧栏图标 + 模块 Tab + 搜索
+└ 主体                           flex-1     min-h-0    flex-row
+  ├ Sidebar                     w-15       shrink-0   60px 固定
+  └ 内容滚动区                   flex-1     min-h-0    overflow-y-auto   ← 全应用唯一滚动容器
+    └ 内容 wrapper              p-5（占满内容宽，无 max-width）
+```
+
+Tab 已并入标题栏（见 3.5），内容区不含独立 Tab 行，纵向空间最大化。
+
+**三个必须遵守的点**（都是实际踩过的坑，不是理论）：
+
+1. **`min-h-0` 不能漏。**
+   flex 子项默认 `min-height: auto` —— 内容变高时它**不收缩**，直接把父容器顶破，底部 padding 被推出视口。这就是"卡片贴着应用底部"的根因。
+
+2. **padding 加在滚动容器**内部**的 wrapper 上。**
+   加在滚动容器自身，底部 padding 会被内容高度覆盖，滚动到底依然贴边。
+
+3. **断点按内容宽度选，不按视口宽度。**
+   侧边栏固定占 60px —— 视口 1000px 时内容只剩 940px。两列网格必须用 `md`(768) 而不是 `lg`(1024)，否则窗口一窄就退化成单列全宽、卡片大片留白。
+
+### 3.2 滚动归属
+
+**全应用只有一处滚动容器。**
+
+- 模块内容区随外层滚动，**不是**每个模块各建一个滚动容器
+- 模块根 / 页面级容器**禁止** `overflow-y-auto` —— 那会绕过外层 `ScrollArea`，出现原生宽滚动条（快速面板踩过）；根容器一律 `min-h-full`
+- 局部列表（剪贴板历史、音乐队列等）**可以用 `ScrollArea` 组件**做独立滚动 —— 这是「局部区域」而非「页面级」
+- 需要固定表头的长表格：用 `position: sticky` 固定表头，而不是给表格单独开滚动容器
+- 例外：terminal / translate 的工作台面板内部滚动（workbench 模式特征）
+- 代价：切换 Tab 时共享同一个滚动位置（可以接受，反而更符合"翻页"直觉）
+
+**统一组件使用规则**（违规即 UI 不一致，等同违反第 5 章 D 系）：
+
+| 需求 | 用 | 禁止 |
+|---|---|---|
+| 页面滚动 | 外层 `ScrollArea`（自动，模块无需处理） | 模块根 `overflow-y-auto` |
+| 局部列表滚动 | `ScrollArea` 组件 | 原生 `overflow` |
+| 键值行 / 状态点 / 徽章 / 大数值 | `@/components/common` 对应组件 | 手写 flex 结构 |
+| 卡片 | `Card` / `InfoGroup(card)` / `StatCard`（统一 `shadow-sm`） | 手写描边块 |
+| 多分组设置表单 | `SettingGroup` + `SettingRow` | 手写行 |
+
+### 3.3 内容区宽度
+
+内容区**不限宽，占满窗口宽度**（已移除 `max-w-6xl` 限制）。窗口拉宽时卡片随内容区延展，不再居中约束。
+
+### 3.4 内容区布局模式
+
+内容区**只能**从以下五种里选，不得自创：
+
+| 模式 | 适用 | 规格 |
+|---|---|---|
+| `grid` | 概览 / 状态总览 | `grid-cols-1 md:grid-cols-2`·gap 16·`items-start` 让卡片各自高度 |
+| `split` | 列表类（clipboard / music / terminal） | 左栏 280–320px·右栏 fill·中间 1px `--border`·无 padding |
+| `workbench` | 输入-输出类（devtools / translate） | 纵向堆叠·gap 12 |
+| `settings` | 设置页 | 纵向堆叠·gap 24·复用 `SettingGroup` |
+| `plain` | 其他 | 纵向堆叠·gap 12 |
+
+**`grid` 的用法边界**：只适合「各块内容量接近」的概览页。若各块信息量差异大，两列会让矮的那列留空。
+
+**概览页标准结构 · 「状态横幅 + 卡片网格」**（适用于 proxy / 下载 / 硬件监控，四处横幅已统一，见下方「落地状态」）：
+
+```
+第一行：状态横幅（全宽，独立于网格，高约 76px）
+  ├ 容器      `Card`（`!py-0 !gap-0`）+ `CardContent`（`flex flex-wrap items-center gap-x-6 gap-y-3 px-4 py-4`）
+  │           圆角/描边/阴影一律由 Card 提供（`rounded-xl + border + shadow-sm`），禁止手写 `rounded-lg border bg-card`
+  ├ 左组成组（状态 → 核心属性 → 实时指标，依次靠左，不把指标悬在中间）
+  │   状态区    状态点 8px + 状态文字 13px/500 + 进程名 13px 次要色（状态点/文字用语义色；运行态加 status-dot-pulse）
+  │   指标区    label 11px 灰 + 数值 18px/600 tabular-nums；核心属性（如内核版本、PID）也占一个指标位
+  └ 操作区    运行中 = 重启(outline)+停止(destructive)；停止 = 启动(primary)；sm = 32px；`ml-auto` 推到行尾
+下方：**两列瀑布流** `columns-1 md:columns-2`（卡片 `break-inside-avoid`，列间距/卡间距 16px），`InfoGroup variant="card"`
+  ├ 卡内键值**一律单列**（`InfoGroup columns=1`，一行一条）—— 双列键值会挤压值区，路径类长值被截断
+  ├ 瀑布流各卡自然高度、列内堆叠，**没有「同行等高」的配对压力** —— 双列网格的配对调整是反复返工的根源，已废弃
+  ├ 表单类内容（下拉/输入）用「label 在上 + 控件全宽」纵排，不塞进键值行的值区
+  └ 阅读顺序为纵向（先左列后右列），分组按重要性排序；列底部不齐是模型特征，不是缺陷
+```
+
+**适用判断**：模块概览有「一个核心状态 + 2-4 个实时指标 + 一个主操作」就用横幅；三者不齐的模块直接用卡片网格，不要硬凑横幅。
+
+**落地状态**（2026-09-21 统一）：proxy 概览 / proxy 连接 / 下载任务 / 硬件监控概览四处横幅均按本节实现 ——
+- 硬件监控：`PID / 传感器 / 重启 / 事件` 从 `text-xs` 内联「标签: 值」提升为指标位，进程名用 `ThingHK`，操作区 `xs` → `sm`，停止按钮改 `destructive`
+- 下载：`下载中 / 等待 / 已暂停 / 已完成 / 已取消` 从 `Badge` 改为指标位，且恒显（0 比隐藏更真实，也避免位置漂移）
+- 状态文字一律「状态 + 进程名」顺序（`运行中 mihomo` / `已连接 ThingHK` / `运行中 下载引擎`）
+
+**已否决的两个方案**（避免回头再试）：
+- **平铺分组**（InfoGroup 无容器版）：无容器所以视觉"散"；键值两端对齐导致一行一条时"空"。
+- **等宽两列卡片**：内容量不齐导致列内留白。D2 之所以成立，是横幅吸收了最"高"的内容（状态+指标），剩下的卡片内容量天然接近。
+
+**设置行**结构（`SettingGroup` + `SettingRow`）：
+```
+分组标题（h2 14/600）+ 可选说明
+  └ 设置行：左 label · 右控件，行高 44，行间 1px --divider
+```
+
+### 3.5 导航与 Tab
+
+**Tab 只有一处：标题栏。** 模块内容区不再渲染 Tab 行。
+
+| 层级 | 位置 | 内容 |
+|---|---|---|
+| 一级导航 | 侧边栏 60px | 模块图标（代理 / 音乐 / 剪贴板…） |
+| 二级导航 | **标题栏内** | 当前模块的 Tab（概览 / 连接 / 节点 / 订阅 / 设置） |
+
+**为什么**：Tab 行独占 48px 纵向空间，却只承载一个切换器。并入标题栏后，内容区最大化。
+
+**实现**：
+```ts
+useModuleTabs('proxy', activeTab, tabs, { alwaysVisible: true })
+```
+- 模块**不渲染** `TabsList`，标题栏切换器常驻
+- 传 `alwaysVisible` 后不再注册 `IntersectionObserver`
+- 未传该选项的模块保持原行为（Tab 行滚出视口时才在标题栏补一个）—— 属过渡状态，应逐步迁移
+
+**选中态**：`--primary` 实心胶囊 + 白字。标题栏空间小、Tab 数量少，实心比下划线更易扫读。
+
+> 过渡期存在两套 Tab 外观：模块内的 `TabsList`（下划线）与标题栏切换器（实心胶囊）。**全部模块迁移完成后，只保留标题栏这一套**，那时 `TabsTrigger` 的下划线样式可以简化掉。
+
+### 3.6 状态覆盖（P3 落地）
+
+每种模式都必须实现四态，**抽成通用组件，不在模块内手写**：
+
+| 状态 | 组件 | 表现 |
+|---|---|---|
+| 加载 | `<StateBlock variant="loading">` | Spinner 16px + "加载中…"，高度撑满容器最小 120px |
+| 空 | `<StateBlock variant="empty">` | 图标 32px(`--muted-foreground`) + 说明 caption + 可选主按钮 |
+| 错误 | `<StateBlock variant="error">` | 图标 32px(`--danger`) + 错误信息 + "重试"次按钮 |
+| 无权限 | `<StateBlock variant="denied">` | 图标 + 说明 + 引导操作 |
+
+**验收**：随机打开任一模块的任一 Tab，断网/清空数据/制造错误，都必须看到对应的块，而不是空白。
+
+### 3.7 页面构造示例 · proxy（样板，含其余四页规划）
+
+概览页已定稿（横幅 + 瀑布流）。其余四页用**同一套模式**组装，空态一律按 M8（结构恒定 + `—` 占位）：
+
+**统一原则（四页共用）**
+1. 每页从 3.4 的模式里选一种承载，不自创
+2. 统计类信息统一用「指标行」形态（与横幅指标区同构：label 11 + 数值 18/600），容器口径同横幅 —— 用 `Card` 承载，不做裸指标行（M8）
+3. 表格/列表统一用卡片承载，长表头 `sticky`
+4. 行内操作集中在行尾，用 `icon-sm`（28px），禁微缩按钮
+
+**连接** —— 指标行 + 表格卡（workbench 变体）
+```
+指标行：活跃连接 + 规则命中 chips（与概览横幅同容器 Card + `px-4 py-4`；chips 紧挨活跃连接，随命中项变化向右延伸）
+        下载/上传速率已删（与概览横幅重复）；命中规则计数已删（恒等于活跃连接数）
+表格卡（全宽）：进程/域名 + 国内国外徽章 + 规则 + 上下行流量 + 断开
+              表头 sticky · 行 hover(bg-hover) · 空态「暂无活跃连接」
+```
+
+**节点** —— 组导航 + 节点网格
+```
+顶部：代理组切换（SegmentedNav，组多时降级为 Select）+ 测速按钮（行右）
+节点网格：节点小卡（名称 + 延迟徽章 + 选中态 primary-soft），grid-cols-2 lg:grid-cols-3
+未运行时网格空态「暂无节点」，结构不变
+```
+
+**订阅** —— 列表卡 + 导入区（plain 模式）
+```
+列表卡：行式（名称 / 更新时间 / 节点数 + 更新、删除），行高 52，行间 1px divider
+导入区：URL 输入 + 导入按钮，置于列表卡上方
+空态「暂无订阅」+ 主按钮引导导入
+```
+
+**设置** —— 单卡 + 卡内标题（峰定稿偏好：设置页标题留在卡片内）
+```
+单张设置卡承载全部设置项，卡片占满内容宽（放大居中与概览/连接一致）
+输入类双列（md:grid-cols-2）、开关行「左说明右开关」、提示条 primary-soft 底；保存按钮在标题栏
+（SettingGroup / SettingRow 保留，用于全局设置页等多分组场景）
+```
+
+---
+
+## 4. 组件规范
+
+### 4.1 业务组件清单（统一从 `@/components/common` 导入）
+
+以下 14 个组件已建立完成。**模块内不得再手写同类结构**——这是"UI 不统一"反复复发的根本原因：只要没有现成的替代品，开发者就只能手写。
+
+| # | 组件 | 解决的问题 | 关键 props |
+|---|---|---|---|
+| 1 | `ModuleShell` | **页面框架落地件**：高度约束链 + 滚动归属 + 内容区 padding/限宽 | `layout`, `padded`, `maxWidth`, `tabs` |
+| 2 | `ModuleToolbar` | 模块内容区顶部操作条 | `slot: left/right` |
+| 3 | `SectionHeader` | 区块标题 + 说明 + 右侧操作 | `title`, `description`, `slot: action` |
+| 4 | `StatCard` | 键值卡片（需要视觉分组的独立块） | `title`, `description`, `slot: action` |
+| 4a | `InfoGroup` | **平铺分组**（概览页键值快照，密度优先） | `title`, `columns`, `slot: action` / `slot: footer` |
+| 5 | `MetricValue` | 大数值 + 标签 + 单位 + 方向色 | `value`, `unit`, `label`, `trend` |
+| 6 | `KeyValueRow` | 键值行（状态/版本/路径） | `label`, `value`, `slot: value` |
+| 7 | `StatusDot` | 状态点 + 文字 | `state: success/warning/danger/neutral`, `label` |
+| 8 | `StatusBadge` | 徽章 | `variant`, `size: sm/md` |
+| 9 | `SettingRow` | 设置行 | `label`, `description`, `slot: control` |
+| 10 | `SettingGroup` | 设置分组 | `title`, `description` |
+| 11 | `DataListRow` | 列表行（主从分栏左栏） | `title`, `subtitle`, `active`, `slot: trailing` |
+| 12 | `StateBlock` | 加载/空/错误/无权限 | `variant`, `title`, `description`, `slot: action` |
+| 13 | `CopyField` | 可复制文本（路径、版本号） | `value`, `mono` |
+| 14 | `ConfirmDialog` | 破坏性操作确认 | `title`, `description`, `variant: danger` |
+
+### 4.2 关键组件规格
+
+**按钮**（基于 shadcn `Button`，只调 token 与尺寸）
+
+| 变体 | 底色 | 文字 | 描边 | 用途 |
+|---|---|---|---|---|
+| `default`（主） | `--primary` | `--primary-foreground` | 无 | 每屏仅 1 个 |
+| `outline`（次） | `--card` | `--foreground` | `--border-strong` | 常规操作 |
+| `ghost`（幽灵） | 无底 / hover `--primary-soft` | `--fg-secondary` / hover `--primary-soft-text` | 无 | 工具栏、行内 |
+| `destructive`（危险） | `--danger` | 白 | 无 | 停止/删除，需确认 |
+
+尺寸：`sm` 高 28 / `default` 高 34 / `lg` 高 40。内边距 `px-3.5`（default），圆角 `radius-md`。按下统一 `scale(0.97)`。
+**禁止** `h-4 px-1.5 text-[10px]` 这类微缩按钮（`ProxyModule.vue:1768` 有此写法）——需要更小的按钮时用 `StatusBadge`。
+
+**交互反馈（hover / active / focus）**
+
+| 场景 | hover | active |
+|---|---|---|
+| 主按钮 | `--primary-hover`（变深） | `--primary-active` |
+| 次按钮 / 卡片 | `--hover`（中性加深） | `--active` |
+| 幽灵按钮 / 图标按钮 | `--primary-soft` + `--primary-soft-text` | `--primary-soft` |
+| 列表行 / 菜单项 | `--hover` | — |
+| 选中行 / 选中 Tab | — | `--primary-soft` |
+
+**焦点环**全应用统一：`ring-2 ring-ring/40`。hover ≠ selected：hover 表达"可以点"，selected 表达"已经选中"，后者才用强调色。
+
+**状态点**
+
+```
+8px 圆 · border-radius: full · 底色 = 对应 --<state>
+与文字间距 6px · 文字用 body 或 label
+```
+可选呼吸动效（运行中）：`opacity` 1↔0.55，1.8s 循环，`prefers-reduced-motion` 下禁用。
+
+**徽章**
+
+```
+高 20 · 内边距 3px 8px · 圆角 radius-sm
+底 --<state>-soft · 文字 --<state>-text · 字号 label(11/500)
+```
+
+**卡片**
+
+```
+底 --card · 1px --border · 圆角 radius-lg(12) · 内边距 space-4(16)
+标题 h2(14/600) · 标题与内容间距 space-3(12)
+统一轻阴影 shadow-sm（--shadow-card）—— shadcn Card / InfoGroup card / StatCard 一致
+```
+
+**输入 / 下拉 / 分段控件**
+
+```
+高度 34 · 圆角 radius-md(8) · 1px --border
+输入与下拉态：底 --card
+分段控件：外槽底 --subtle,内边距 3,选中项底 --card + 文字 --foreground,未选中项文字 --fg-secondary
+聚焦：border 不变，box-shadow: 0 0 0 2px --ring(40% alpha)
+```
+
+### 4.3 组件用法要点
+
+- 业务组件统一从 `@/components/common` 导入（见 4.1 清单），模块内禁止手写同类结构。
+- 页面用 `ModuleShell` 包裹，通过 `layout`（grid / split / workbench / settings / plain）选内容区模式。
+- 内容区先按四态组织：先 `loading`，再 `empty`/`error`，最后才是数据内容（见 3.6 / M8）。
+- 颜色只用 token 类名（`bg-card border border-border`），禁止 hex 与原生色阶（见第 5 章 D1–D2）。
+- 数值统一 `tabular-nums`；状态点 / 徽章用 `StatusDot` / `StatusBadge`，键值用 `KeyValueRow` / `InfoGroup`。
+
+---
+
+## 5. 开发约束（硬性）
+
+### 5.1 禁止清单
+
+| # | 禁止 | 替代方案 |
+|---|---|---|
+| D1 | 组件内出现 hex / rgb / oklch 字面量 | 用语义 token 类名 |
+| D2 | Tailwind 原生色阶 `bg-blue-500` `text-emerald-700` `border-slate-200` | 用 `bg-primary` `text-success-text` `border-border` |
+| D3 | 间距/圆角/尺寸的任意值 `p-[18px]` `rounded-[10px]` | 归位 4px 栅格：`p-4` `rounded-md`（非 4 倍数就近归档）。**字号例外**：正文标准档 `text-[11px]`~`text-[14px]` 是项目字号体系（Tailwind 无 13px 预设），允许保留；非标准档（15/13.5/16px 等）归位最近标准档 |
+| D4 | 用状态色表达可点击性（绿色按钮 = 主操作） | 主操作一律 `--primary` |
+| D5 | 卡片使用重阴影（shadow-popover / shadow-dialog 或 hover 抬起阴影） | 卡片统一轻阴影 `shadow-sm` |
+| D6 | 模块内手写状态点 / 徽章 / 卡片标题 / 键值行 | 用第 4.1 节组件 |
+| D7 | 混用图标库，或用 Unicode 符号（`↓ ✓ ● ▸`）当图标 | lucide，尺寸 14/16/20 |
+| D8 | 中文加负字距 | `letter-spacing: 0` |
+| D9 | 生产代码 `@import` 外部字体 CDN | 系统字体栈 |
+| D10 | 数据驱动界面缺四态之一 | `StateBlock` |
+| D11 | 一屏多个主按钮 / 破坏性操作与主操作同权重 | 视觉降级 + `ConfirmDialog` |
+| D12 | 在 `.dark` 下靠改组件类名做适配 | 只改 token，组件代码不感知主题 |
+
+### 5.2 必须清单
+
+- **M1** 新增模块必须使用 `ModuleShell`，内容区三选一（第 3.2 节）
+- **M2** 所有颜色/间距/圆角/字号可追溯到 `style.css` 的 token
+- **M3** 深色模式与浅色模式同时验证，不得只测一套
+- **M4** 数值使用 `tabular-nums`
+- **M5** 动效尊重 `prefers-reduced-motion`
+- **M6** 控件最小点击区 28×28（桌面标准，非触摸的 44）
+- **M7** 文字与背景对比度 ≥ 4.5:1；`--muted-foreground` 不得用于正文，只用于 ≥12px 的辅助信息
+- **M8** 数据驱动的界面**结构恒定**：无数据时保持完整结构、值用 `—` 占位（横幅、键值行、表格单元同规则）；**不得**用「xx 未运行」之类文案整块替换结构。运行状态由横幅状态区或状态点表达，不在卡片内复述。控件在不可用时禁用，而不是隐藏整块。
+  `—` 与 `0` 的区分：`—` = 数据缺失/不适用（如未运行时的 PID）；`0` = 语义上就是零（如未运行时的连接数、速率）—— 可计数指标显示 0 比 `—` 更真实。指标行/横幅必须有容器（卡片），裸指标行浮在画布上与页面不协调。
+- **M9** 动态数值的指标位**按数据类型固定最小宽度**：速率/流量/计数高频刷新，宽度变化会左右推移兄弟元素。做法同 OSD（`tabular-nums` + `min-width`）。**宽度按内容定，不要一刀切**——速率 `min-w-24`（容纳 `999 KB/s`）、版本/累计 `min-w-20`、纯计数 `min-w-12`；统一给大值会留白并把同卡操作按钮挤换行
+- **M8** 键盘可聚焦元素必须有可见焦点环（`ring-2 ring-ring/40`）
+
+### 5.3 Code Review 检查点
+
+提交前自查（建议做成 MR 模板 checklist）：
+
+1. `grep -rE "(#[0-9a-fA-F]{3,8}|(bg|text|border)-(slate|gray|zinc|blue|emerald|amber|red|rose|orange|sky|purple|violet)-[0-9]{2,3})" src/` **无新增命中**
+2. `grep -rE "\w-\[[^\]]+\]" src/` 新增行数可控且能说明理由
+3. 深浅两套主题截图留存
+4. 加载/空/错误三态至少手动触发过一次
+5. 破坏性操作有确认
+
+**建议自动化**：加入 ESLint 规则，直接拦截 D1–D3。
+
+```js
+// eslint 思路示例：禁止特定 class 模式
+{
+  files: ['**/*.vue'],
+  rules: {
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: 'Literal[value=/(bg|text|border)-(slate|gray|zinc|blue|emerald|amber|red|rose|orange|sky|purple|violet)-\\d{3}/]',
+        message: '禁止使用 Tailwind 原生色阶，请使用语义 token（见 UI_DESIGN_SYSTEM.md 第 5.1 节 D2）'
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 6. 工具与状态
+
+### 6.1 组件预览页（改 token 后的回归工具）
+
+路径：`preview/` —— **不在生产构建入口内**，只在 `bun dev` 时可访问。
+
+```bash
+bun dev
+# 浏览器打开 http://localhost:14210/preview/index.html
+```
+
+用途：改完 `src/style.css` 的 token 后，把全部基础组件与业务组件过一遍，确认浅色 / 深色两套都正确 —— 替代"改完 token 靠记忆推断影响面"。本页不依赖任何 Tauri API，纯浏览器即可运行。
+
+查询参数：
+
+| 参数 | 作用 | 示例 |
+|---|---|---|
+| `theme=dark` | 以深色模式启动 | `?theme=dark` |
+| `only=<id>` | 只渲染指定分区，便于放大核对 | `?only=data` |
+
+已内置 `id` 的分区：`forms`、`data`、`shell`。需要放大看其他分区时，按同样方式给 `<section>` 加 `id` 即可。
+
+> **实现注意**：`only` 的隔离 CSS 只能用**显式标记**（`[data-block]` / `[data-page-header]`），**不能用 `section` / `header` 这类标签选择器**——`StatCard` 内部也用 `<section>` 和 `<header>`，会被一起隐藏，产生"组件没渲染"的假象。
+
+### 6.2 当前状态
+
+- 业务组件层（第 4.1 节 14 个组件）与 Token 层已落地，`preview/` 预览页已完成浅色/深色视觉回归。
+- 色阶治理：Tailwind 原生色阶从约 155 处降至 3 处（proxy / terminal / monitor / translate / music 的色阶与 Tabs 已完成）。
+- proxy 概览页定稿为「状态横幅 + 两列瀑布流」，InfoGroup 新增 `variant="card"`。
+- 状态横幅统一（2026-09-21）：proxy 概览 / proxy 连接 / 下载任务 / 硬件监控概览四处横幅统一为 §3.4 的三段式（状态区 → 指标区 → 操作区）+ `Card` 容器；监控与下载的旧样式（`text-xs` 内联键值、Badge 计数、`xs` 按钮）已废弃。
+- 主题色自定义落地（2026-09-21，见 §2.9）：`src/lib/theme.ts` + `appStore.setAccent()` + 设置页「主题色」卡片（10 预设 + 自定义），深浅两套自动派生、对比度自动兜底；组件层 0 改动。
+- 终端模块非终端页对齐（2026-09-21，见 TERMINAL_MODULE_PLAN.md §5）：根 padding 归类、列表 Card 化、表单走 `@/components/ui` 原语、四态/徽章走 `@/components/common`、设置页用 `SettingGroup`/`SettingRow`（此后二者与 `StateBlock`/`StatusBadge` 有真实消费者）；终端画布、状态栏、`h-11` 契约、xterm 链保持不动。
+- 剩余项：
+  - `OsdWindow` 免改（功能性配置，非 UI token 问题）
+  - `DownloadWindow` / `ClipboardPopup` 仍有少量 hex，待统一
+  - ESLint 约束规则（第 5.3 节）尚未搭建
+
+### 6.3 待决策
+
+| # | 问题 | 状态 | 结论 / 影响 |
+|---|---|---|---|
+| 1 | 数据方向色是否与状态色解耦 | 已定（暂保留现有取值） | 保留"下载=绿、上传=红"，已独立成 `--data-*` token，要换色只改这 2 个值 |
+| 2 | 强调色用 `#0066CC` | ✅ 已采用 | 落地；同时解决 shadcn primary 近黑导致按钮发灰 |
+| 3 | 浮窗（OSD/截图/下载）是否纳入统一体系 | 部分已定 | `OsdWindow` 免改（功能性配置）；`DownloadWindow`/`ClipboardPopup` 少量 hex 待统一；不强行并入主界面 token |
+| 4 | `--font-mono` 是否用网络字体 | ✅ 已定 | 系统 `Cascadia Code` / `Consolas`，不引外部字体 |
+| 5 | 侧边栏宽度 60px | ✅ 已定 | 沿用现有实现 |
+| 6 | 内容区限宽 | ✅ 已定 | 改为**不限宽占满**窗口宽度（原 `max-w-6xl` 限制已移除） |
+| 7 | 卡片阴影 | ✅ 已定 | 卡片统一轻阴影 `shadow-sm`（shadcn Card / InfoGroup card / StatCard 一致），浮层仍用 `shadow-popover`/`shadow-dialog` |
+
+---
+
+**维护约定**：Token 值以 `src/style.css` 为唯一事实来源，本文档与之同步；两者冲突时以本文档为准并修正代码。新增 token 或组件须同步更新第 2、4 章。
diff --git a/bun.lock b/bun.lock
index 53b9ff5..5e82b96 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,13 @@
         "@tauri-apps/plugin-global-shortcut": "^2",
         "@tauri-apps/plugin-opener": "^2",
         "@vueuse/core": "^14.4.0",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-search": "^0.16.0",
+        "@xterm/addon-serialize": "^0.14.0",
+        "@xterm/addon-unicode11": "^0.9.0",
+        "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/addon-webgl": "^0.19.0",
+        "@xterm/xterm": "^6.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "pinia": "^3.0.4",
@@ -28,6 +35,9 @@
         "@tauri-apps/cli": "^2",
         "@types/node": "^26.1.1",
         "@vitejs/plugin-vue": "^5.2.1",
+        "@vue/eslint-config-typescript": "^14.9.0",
+        "eslint": "^10.11.0",
+        "eslint-plugin-vue": "^10.11.0",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.6.2",
         "vite": "^6.0.3",
@@ -44,6 +54,10 @@
 
     "@babel/types": ["@babel/types@7.29.7", "https://registry.npmmirror.com/@babel/types/-/types-7.29.7.tgz", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
 
+    "@cacheable/memory": ["@cacheable/memory@2.2.0", "https://registry.npmmirror.com/@cacheable/memory/-/memory-2.2.0.tgz", { "dependencies": { "@cacheable/utils": "^2.5.0", "@keyv/bigmap": "^1.3.1", "hookified": "^1.15.1", "keyv": "^5.6.0" } }, "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ=="],
+
+    "@cacheable/utils": ["@cacheable/utils@2.5.0", "https://registry.npmmirror.com/@cacheable/utils/-/utils-2.5.0.tgz", { "dependencies": { "hashery": "^1.5.1", "keyv": "^5.6.0" } }, "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
 
     "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.25.12.tgz", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
@@ -96,6 +110,20 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
 
+    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.10.1", "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.10.1.tgz", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg=="],
+
+    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "https://registry.npmmirror.com/@eslint-community/regexpp/-/regexpp-4.12.2.tgz", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="],
+
+    "@eslint/config-array": ["@eslint/config-array@0.23.5", "https://registry.npmmirror.com/@eslint/config-array/-/config-array-0.23.5.tgz", { "dependencies": { "@eslint/object-schema": "^3.0.5", "debug": "^4.3.1", "minimatch": "^10.2.4" } }, "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA=="],
+
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.7.0", "https://registry.npmmirror.com/@eslint/config-helpers/-/config-helpers-0.7.0.tgz", { "dependencies": { "@eslint/core": "^1.2.1" } }, "sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw=="],
+
+    "@eslint/core": ["@eslint/core@1.2.1", "https://registry.npmmirror.com/@eslint/core/-/core-1.2.1.tgz", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@3.0.5", "https://registry.npmmirror.com/@eslint/object-schema/-/object-schema-3.0.5.tgz", {}, "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.7.3", "https://registry.npmmirror.com/@eslint/plugin-kit/-/plugin-kit-0.7.3.tgz", { "dependencies": { "@eslint/core": "^1.2.1", "levn": "^0.4.1" } }, "sha512-IkO+/KEUvwbVpiURZg+P7zF74z5Jxe0UgJxVni+RtoHQ6IZieXaO02kmadomap/q+l6bc/jdPGGqTjhuZnuz1Q=="],
+
     "@floating-ui/core": ["@floating-ui/core@1.8.0", "https://registry.npmmirror.com/@floating-ui/core/-/core-1.8.0.tgz", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],
 
     "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.8.0.tgz", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
@@ -104,6 +132,16 @@
 
     "@floating-ui/vue": ["@floating-ui/vue@1.1.11", "https://registry.npmmirror.com/@floating-ui/vue/-/vue-1.1.11.tgz", { "dependencies": { "@floating-ui/dom": "^1.7.6", "@floating-ui/utils": "^0.2.11", "vue-demi": ">=0.13.0" } }, "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw=="],
 
+    "@humanfs/core": ["@humanfs/core@0.19.2", "https://registry.npmmirror.com/@humanfs/core/-/core-0.19.2.tgz", { "dependencies": { "@humanfs/types": "^0.15.0" } }, "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA=="],
+
+    "@humanfs/node": ["@humanfs/node@0.16.8", "https://registry.npmmirror.com/@humanfs/node/-/node-0.16.8.tgz", { "dependencies": { "@humanfs/core": "^0.19.2", "@humanfs/types": "^0.15.0", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ=="],
+
+    "@humanfs/types": ["@humanfs/types@0.15.0", "https://registry.npmmirror.com/@humanfs/types/-/types-0.15.0.tgz", {}, "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q=="],
+
+    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "https://registry.npmmirror.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
+
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "https://registry.npmmirror.com/@humanwhocodes/retry/-/retry-0.4.3.tgz", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
+
     "@internationalized/date": ["@internationalized/date@3.12.2", "https://registry.npmmirror.com/@internationalized/date/-/date-3.12.2.tgz", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw=="],
 
     "@internationalized/number": ["@internationalized/number@3.6.7", "https://registry.npmmirror.com/@internationalized/number/-/number-3.6.7.tgz", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg=="],
@@ -118,8 +156,18 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@keyv/bigmap": ["@keyv/bigmap@1.3.1", "https://registry.npmmirror.com/@keyv/bigmap/-/bigmap-1.3.1.tgz", { "dependencies": { "hashery": "^1.4.0", "hookified": "^1.15.0" }, "peerDependencies": { "keyv": "^5.6.0" } }, "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ=="],
+
+    "@keyv/serialize": ["@keyv/serialize@1.1.1", "https://registry.npmmirror.com/@keyv/serialize/-/serialize-1.1.1.tgz", {}, "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA=="],
+
     "@lucide/vue": ["@lucide/vue@1.28.0", "https://registry.npmmirror.com/@lucide/vue/-/vue-1.28.0.tgz", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-cO89UyNM/0i2Srdi04nFWeEOQkqzDZlM2ehtWyBhcMpRTJDKpMZPCGAVlmVBgBgr5HaeL5L6FsU8RHsOdwXtKw=="],
 
+    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
+
+    "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
+
+    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.62.2", "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz", { "os": "android", "cpu": "arm" }, "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.62.2", "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.2.tgz", { "os": "android", "cpu": "arm64" }, "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw=="],
@@ -240,14 +288,38 @@
 
     "@tauri-apps/plugin-opener": ["@tauri-apps/plugin-opener@2.5.4", "https://registry.npmmirror.com/@tauri-apps/plugin-opener/-/plugin-opener-2.5.4.tgz", { "dependencies": { "@tauri-apps/api": "^2.11.0" } }, "sha512-1HnPkb+AmgO29HBazm4uPLKB+r7zzcTBW1d0fyYp1uP+jwtpoiNDGKMMzz58SFp49nOIrxdE3aUJtT57lfO9CQ=="],
 
+    "@types/esrecurse": ["@types/esrecurse@4.3.1", "https://registry.npmmirror.com/@types/esrecurse/-/esrecurse-4.3.1.tgz", {}, "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw=="],
+
     "@types/estree": ["@types/estree@1.0.9", "https://registry.npmmirror.com/@types/estree/-/estree-1.0.9.tgz", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
 
+    "@types/json-schema": ["@types/json-schema@7.0.15", "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
     "@types/node": ["@types/node@26.1.1", "https://registry.npmmirror.com/@types/node/-/node-26.1.1.tgz", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw=="],
 
     "@types/sortablejs": ["@types/sortablejs@1.15.9", "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.9.tgz", {}, "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ=="],
 
     "@types/web-bluetooth": ["@types/web-bluetooth@0.0.21", "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz", {}, "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="],
 
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.70.0.tgz", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.70.0", "@typescript-eslint/type-utils": "8.70.0", "@typescript-eslint/utils": "8.70.0", "@typescript-eslint/visitor-keys": "8.70.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.70.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-/v8HZt6RlyIZxB3ntehELOcUcfxKPVGWXnQdJuHRmzrqgF8nQypcC/oxGW+Ot4VGKDq81XugPKxx0n5PBtf9PA=="],
+
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-8.70.0.tgz", { "dependencies": { "@typescript-eslint/scope-manager": "8.70.0", "@typescript-eslint/types": "8.70.0", "@typescript-eslint/typescript-estree": "8.70.0", "@typescript-eslint/visitor-keys": "8.70.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-zYvrmj9Yxd63UGaXw+kdt6A0F0s0qveJyuatIM77bYC2DE4pgmg7a50u8LR7PRtXd0x+h+Tl3eXabGm06SWd3Q=="],
+
+    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/project-service/-/project-service-8.70.0.tgz", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.70.0", "@typescript-eslint/types": "^8.70.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-hFHbTNqhU9G+2eKFXCBVb1tjFT/LceiJ4+HfLO4pTpDI0KHi6iajpcFFkaSQ9gXmCh7n82A0PthaayEdN6mspQ=="],
+
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-8.70.0.tgz", { "dependencies": { "@typescript-eslint/types": "8.70.0", "@typescript-eslint/visitor-keys": "8.70.0" } }, "sha512-8nP3Kwh5hlgZ4FicGvmznAmJe8UL4sdU8tLukrPaMuQmDuk4Y8xYfzu/aYZW4xT2JCgc7H/TpDI5cGlxcWJSqQ=="],
+
+    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.70.0.tgz", { "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-adnkeeNq9Sq1sUf4+FRVc0KdgYghzsgFpZSQVZVvY0LCuUuN0FnQgyGzCJeC4fW1cdXseBAjU2EOqUIjbNcZUw=="],
+
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-8.70.0.tgz", { "dependencies": { "@typescript-eslint/types": "8.70.0", "@typescript-eslint/typescript-estree": "8.70.0", "@typescript-eslint/utils": "8.70.0", "debug": "^4.4.3", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-NUMKIhYVaVIVLnRL9CRt+VVcuLgSHUCpXn4/+K8wql+vdInUzvx8BjUO1oJ7cG9shjFJKtF8F8Hh2kCh3/KBVw=="],
+
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/types/-/types-8.70.0.tgz", {}, "sha512-asTOIYhDg4zdzOScCyaytrsV3cR6B4ecPQlXw/dJIm7J/MZTtCtfVII9JD8Geh4jTCrK/Xe6cg5UevoleMcoJQ=="],
+
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.70.0.tgz", { "dependencies": { "@typescript-eslint/project-service": "8.70.0", "@typescript-eslint/tsconfig-utils": "8.70.0", "@typescript-eslint/types": "8.70.0", "@typescript-eslint/visitor-keys": "8.70.0", "debug": "^4.4.3", "minimatch": "^10.2.2", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-d9NmHMPEKQ7QCLLm1jI3zmoQBwT5KwFYjXBJ9ymZfKCUU+5rmTRykKAFvH5Qn/ZCds3CEAFS9OC9M/jkl0X2bA=="],
+
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-8.70.0.tgz", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.70.0", "@typescript-eslint/types": "8.70.0", "@typescript-eslint/typescript-estree": "8.70.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-oZmtKJz/4fufZ2p3+Cn3ijEojcdfR+1zYDH2xKYrEly0dR/Q/1xUPRCOlKGxod78nWlU2UnDe09GZ3TaknBFGA=="],
+
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.70.0", "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.70.0.tgz", { "dependencies": { "@typescript-eslint/types": "8.70.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-BoC8PiO4Hkdo0TVJh9Ntxr5MxPDI7/oFsrygN5ADelFSeXG/qgNuucIGA+L5Z6JpPTE/uRfcTWtscjbUaufepQ=="],
+
     "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
 
     "@volar/language-core": ["@volar/language-core@2.4.15", "https://registry.npmmirror.com/@volar/language-core/-/language-core-2.4.15.tgz", { "dependencies": { "@volar/source-map": "2.4.15" } }, "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA=="],
@@ -272,6 +344,8 @@
 
     "@vue/devtools-shared": ["@vue/devtools-shared@7.7.10", "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.10.tgz", { "dependencies": { "rfdc": "^1.4.1" } }, "sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ=="],
 
+    "@vue/eslint-config-typescript": ["@vue/eslint-config-typescript@14.9.0", "https://registry.npmmirror.com/@vue/eslint-config-typescript/-/eslint-config-typescript-14.9.0.tgz", { "dependencies": { "@typescript-eslint/utils": "^8.60.0", "fast-glob": "^3.3.3", "typescript-eslint": "^8.60.0", "vue-eslint-parser": "^10.4.0" }, "peerDependencies": { "eslint": "^9.10.0 || ^10.0.0", "eslint-plugin-vue": "^9.28.0 || ^10.0.0", "typescript": ">=4.8.4" }, "optionalPeers": ["typescript"], "bin": { "vue-eslint-config-typescript": "./dist/bin.js" } }, "sha512-E3j9hDlfVf10F30MRcLTPY2IIhWIx1nsvkVukk14kTcuA+oBVot9zsP1hzsO+PAMDxV3Fd9FimBJtUBNBL5KFA=="],
+
     "@vue/language-core": ["@vue/language-core@2.2.12", "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.2.12.tgz", { "dependencies": { "@volar/language-core": "2.4.15", "@vue/compiler-dom": "^3.5.0", "@vue/compiler-vue2": "^2.7.16", "@vue/shared": "^3.5.0", "alien-signals": "^1.0.3", "minimatch": "^9.0.3", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA=="],
 
     "@vue/reactivity": ["@vue/reactivity@3.5.39", "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.39.tgz", { "dependencies": { "@vue/shared": "3.5.39" } }, "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog=="],
@@ -290,15 +364,41 @@
 
     "@vueuse/shared": ["@vueuse/shared@14.4.0", "https://registry.npmmirror.com/@vueuse/shared/-/shared-14.4.0.tgz", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g=="],
 
+    "@xterm/addon-fit": ["@xterm/addon-fit@0.11.0", "https://registry.npmmirror.com/@xterm/addon-fit/-/addon-fit-0.11.0.tgz", {}, "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g=="],
+
+    "@xterm/addon-search": ["@xterm/addon-search@0.16.0", "https://registry.npmmirror.com/@xterm/addon-search/-/addon-search-0.16.0.tgz", {}, "sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA=="],
+
+    "@xterm/addon-serialize": ["@xterm/addon-serialize@0.14.0", "https://registry.npmmirror.com/@xterm/addon-serialize/-/addon-serialize-0.14.0.tgz", {}, "sha512-uteyTU1EkrQa2Ux6P/uFl2fzmXI46jy5uoQMKEOM0fKTyiW7cSn0WrFenHm5vO5uEXX/GpwW/FgILvv3r0WbkA=="],
+
+    "@xterm/addon-unicode11": ["@xterm/addon-unicode11@0.9.0", "https://registry.npmmirror.com/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz", {}, "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw=="],
+
+    "@xterm/addon-web-links": ["@xterm/addon-web-links@0.12.0", "https://registry.npmmirror.com/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz", {}, "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw=="],
+
+    "@xterm/addon-webgl": ["@xterm/addon-webgl@0.19.0", "https://registry.npmmirror.com/@xterm/addon-webgl/-/addon-webgl-0.19.0.tgz", {}, "sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A=="],
+
+    "@xterm/xterm": ["@xterm/xterm@6.0.0", "https://registry.npmmirror.com/@xterm/xterm/-/xterm-6.0.0.tgz", {}, "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg=="],
+
+    "acorn": ["acorn@8.18.0", "https://registry.npmmirror.com/acorn/-/acorn-8.18.0.tgz", { "bin": { "acorn": "bin/acorn" } }, "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ=="],
+
+    "acorn-jsx": ["acorn-jsx@5.3.2", "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
+
+    "ajv": ["ajv@6.15.0", "https://registry.npmmirror.com/ajv/-/ajv-6.15.0.tgz", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw=="],
+
     "alien-signals": ["alien-signals@1.0.13", "https://registry.npmmirror.com/alien-signals/-/alien-signals-1.0.13.tgz", {}, "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg=="],
 
     "aria-hidden": ["aria-hidden@1.2.6", "https://registry.npmmirror.com/aria-hidden/-/aria-hidden-1.2.6.tgz", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
-    "balanced-match": ["balanced-match@1.0.2", "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+    "balanced-match": ["balanced-match@4.0.4", "https://registry.npmmirror.com/balanced-match/-/balanced-match-4.0.4.tgz", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
     "birpc": ["birpc@2.9.0", "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz", {}, "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw=="],
 
-    "brace-expansion": ["brace-expansion@2.1.2", "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.1.2.tgz", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA=="],
+    "boolbase": ["boolbase@1.0.0", "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
+
+    "brace-expansion": ["brace-expansion@5.0.12", "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-5.0.12.tgz", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ=="],
+
+    "braces": ["braces@3.0.3", "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
+
+    "cacheable": ["cacheable@2.5.0", "https://registry.npmmirror.com/cacheable/-/cacheable-2.5.0.tgz", { "dependencies": { "@cacheable/memory": "^2.2.0", "@cacheable/utils": "^2.5.0", "hookified": "^1.15.0", "keyv": "^5.6.0", "qified": "^0.10.1" } }, "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g=="],
 
     "class-variance-authority": ["class-variance-authority@0.7.1", "https://registry.npmmirror.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
 
@@ -306,10 +406,18 @@
 
     "copy-anything": ["copy-anything@4.0.5", "https://registry.npmmirror.com/copy-anything/-/copy-anything-4.0.5.tgz", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA=="],
 
+    "cross-spawn": ["cross-spawn@7.0.6", "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "cssesc": ["cssesc@3.0.0", "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
     "csstype": ["csstype@3.2.3", "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "de-indent": ["de-indent@1.0.2", "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
 
+    "debug": ["debug@4.4.3", "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "deep-is": ["deep-is@0.1.4", "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
+
     "defu": ["defu@6.1.7", "https://registry.npmmirror.com/defu/-/defu-6.1.7.tgz", {}, "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ=="],
 
     "detect-libc": ["detect-libc@2.1.2", "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -320,22 +428,88 @@
 
     "esbuild": ["esbuild@0.25.12", "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
 
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "eslint": ["eslint@10.11.0", "https://registry.npmmirror.com/eslint/-/eslint-10.11.0.tgz", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.3", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "11.1.5 || >11.1.6 <12", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-P7a6UEEqb9G95MYAtqkmsTbVXIYyzIfl6NGOIJk162PaahFxFyeGcrlXYFSiagECg4sEm8IseJdZBKR3rx6MsQ=="],
+
+    "eslint-plugin-vue": ["eslint-plugin-vue@10.11.0", "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-10.11.0.tgz", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "natural-compare": "^1.4.0", "nth-check": "^2.1.1", "postcss-selector-parser": "^7.1.4", "semver": "^7.8.5", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "@stylistic/eslint-plugin": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0", "@typescript-eslint/parser": "^7.0.0 || ^8.0.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "vue-eslint-parser": "^10.3.0" }, "optionalPeers": ["@stylistic/eslint-plugin", "@typescript-eslint/parser"] }, "sha512-fGt38SsaPCZ2FmA3bX/3vOW2qdsPNx0/9x+7Aab6NMX++PhynMtK4LWC4vzXgfQBCqpUAler18H38GA+NBAd0Q=="],
+
+    "eslint-scope": ["eslint-scope@9.1.2", "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-9.1.2.tgz", { "dependencies": { "@types/esrecurse": "^4.3.1", "@types/estree": "^1.0.8", "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ=="],
+
+    "eslint-visitor-keys": ["eslint-visitor-keys@5.0.1", "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz", {}, "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA=="],
+
+    "espree": ["espree@11.2.0", "https://registry.npmmirror.com/espree/-/espree-11.2.0.tgz", { "dependencies": { "acorn": "^8.16.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^5.0.1" } }, "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw=="],
+
+    "esquery": ["esquery@1.7.0", "https://registry.npmmirror.com/esquery/-/esquery-1.7.0.tgz", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="],
+
+    "esrecurse": ["esrecurse@4.3.0", "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@5.3.0", "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
     "estree-walker": ["estree-walker@2.0.2", "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
+    "esutils": ["esutils@2.0.3", "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
+
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
+    "fast-glob": ["fast-glob@3.3.3", "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
+
+    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
+
+    "fast-levenshtein": ["fast-levenshtein@2.0.6", "https://registry.npmmirror.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
+
+    "fastq": ["fastq@1.20.3", "https://registry.npmmirror.com/fastq/-/fastq-1.20.3.tgz", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw=="],
+
     "fdir": ["fdir@6.5.0", "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "file-entry-cache": ["file-entry-cache@11.1.5", "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-11.1.5.tgz", { "dependencies": { "flat-cache": "^6.1.23" } }, "sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q=="],
+
+    "fill-range": ["fill-range@7.1.1", "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
+
+    "find-up": ["find-up@5.0.0", "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
+    "flat-cache": ["flat-cache@6.1.23", "https://registry.npmmirror.com/flat-cache/-/flat-cache-6.1.23.tgz", { "dependencies": { "cacheable": "^2.5.0", "flatted": "^3.4.2", "hookified": "^1.15.0" } }, "sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA=="],
+
+    "flatted": ["flatted@3.4.4", "https://registry.npmmirror.com/flatted/-/flatted-3.4.4.tgz", {}, "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q=="],
+
     "fsevents": ["fsevents@2.3.3", "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "glob-parent": ["glob-parent@6.0.2", "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
     "graceful-fs": ["graceful-fs@4.2.11", "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "hashery": ["hashery@1.5.1", "https://registry.npmmirror.com/hashery/-/hashery-1.5.1.tgz", { "dependencies": { "hookified": "^1.15.0" } }, "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ=="],
+
     "he": ["he@1.2.0", "https://registry.npmmirror.com/he/-/he-1.2.0.tgz", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
 
     "hookable": ["hookable@5.5.3", "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
+    "hookified": ["hookified@1.15.1", "https://registry.npmmirror.com/hookified/-/hookified-1.15.1.tgz", {}, "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg=="],
+
+    "ignore": ["ignore@5.3.2", "https://registry.npmmirror.com/ignore/-/ignore-5.3.2.tgz", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
+
+    "imurmurhash": ["imurmurhash@0.1.4", "https://registry.npmmirror.com/imurmurhash/-/imurmurhash-0.1.4.tgz", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "is-number": ["is-number@7.0.0", "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+
     "is-what": ["is-what@5.5.0", "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz", {}, "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw=="],
 
+    "isexe": ["isexe@2.0.0", "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
     "jiti": ["jiti@2.7.0", "https://registry.npmmirror.com/jiti/-/jiti-2.7.0.tgz", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
 
+    "json-schema-traverse": ["json-schema-traverse@0.4.1", "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
+
+    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "https://registry.npmmirror.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
+
+    "keyv": ["keyv@5.6.0", "https://registry.npmmirror.com/keyv/-/keyv-5.6.0.tgz", { "dependencies": { "@keyv/serialize": "^1.1.1" } }, "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw=="],
+
+    "levn": ["levn@0.4.1", "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
+
     "lightningcss": ["lightningcss@1.32.0", "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
 
     "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
@@ -360,20 +534,42 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
 
+    "locate-path": ["locate-path@6.0.0", "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
     "magic-string": ["magic-string@0.30.21", "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
-    "minimatch": ["minimatch@9.0.9", "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.9.tgz", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
+    "merge2": ["merge2@1.4.1", "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
+
+    "micromatch": ["micromatch@4.0.8", "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
+
+    "minimatch": ["minimatch@10.2.6", "https://registry.npmmirror.com/minimatch/-/minimatch-10.2.6.tgz", { "dependencies": { "brace-expansion": "^5.0.8" } }, "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A=="],
 
     "mitt": ["mitt@3.0.1", "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz", {}, "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="],
 
+    "ms": ["ms@2.1.3", "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
     "muggle-string": ["muggle-string@0.4.1", "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
 
     "nanoid": ["nanoid@3.3.16", "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.16.tgz", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q=="],
 
+    "natural-compare": ["natural-compare@1.4.0", "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
+
+    "nth-check": ["nth-check@2.1.1", "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
+
     "ohash": ["ohash@2.0.11", "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz", {}, "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="],
 
+    "optionator": ["optionator@0.9.4", "https://registry.npmmirror.com/optionator/-/optionator-0.9.4.tgz", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
+
+    "p-limit": ["p-limit@3.1.0", "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "https://registry.npmmirror.com/p-locate/-/p-locate-5.0.0.tgz", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
     "path-browserify": ["path-browserify@1.0.1", "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
+    "path-exists": ["path-exists@4.0.0", "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
+    "path-key": ["path-key@3.1.1", "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
     "perfect-debounce": ["perfect-debounce@1.0.0", "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="],
 
     "picocolors": ["picocolors@1.1.1", "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
@@ -386,12 +582,32 @@
 
     "postcss": ["postcss@8.5.19", "https://registry.npmmirror.com/postcss/-/postcss-8.5.19.tgz", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ=="],
 
+    "postcss-selector-parser": ["postcss-selector-parser@7.1.6", "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-7.1.6.tgz", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw=="],
+
+    "prelude-ls": ["prelude-ls@1.2.1", "https://registry.npmmirror.com/prelude-ls/-/prelude-ls-1.2.1.tgz", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
+
+    "punycode": ["punycode@2.3.1", "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
+
+    "qified": ["qified@0.10.1", "https://registry.npmmirror.com/qified/-/qified-0.10.1.tgz", { "dependencies": { "hookified": "^2.1.1" } }, "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA=="],
+
+    "queue-microtask": ["queue-microtask@1.2.3", "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
+
     "reka-ui": ["reka-ui@2.10.1", "https://registry.npmmirror.com/reka-ui/-/reka-ui-2.10.1.tgz", { "dependencies": { "@floating-ui/dom": "^1.6.13", "@floating-ui/vue": "^1.1.6", "@internationalized/date": "^3.5.0", "@internationalized/number": "^3.5.0", "@tanstack/vue-virtual": "^3.12.0", "@vueuse/core": "^14.1.0", "@vueuse/shared": "^14.1.0", "aria-hidden": "^1.2.4", "defu": "^6.1.5", "ohash": "^2.0.11" }, "peerDependencies": { "vue": ">= 3.4.0" } }, "sha512-drcOQ4rQtDYAcGCsyQBqQg8QQ+H3B+zDaMJU0h8KPEPMa7g9BHu3zcOi4OB39XJSWizceFoNO0Z9tctSGLOXqg=="],
 
+    "reusify": ["reusify@1.1.0", "https://registry.npmmirror.com/reusify/-/reusify-1.1.0.tgz", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
+
     "rfdc": ["rfdc@1.4.1", "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz", {}, "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="],
 
     "rollup": ["rollup@4.62.2", "https://registry.npmmirror.com/rollup/-/rollup-4.62.2.tgz", { "dependencies": { "@types/estree": "1.0.9" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.62.2", "@rollup/rollup-android-arm64": "4.62.2", "@rollup/rollup-darwin-arm64": "4.62.2", "@rollup/rollup-darwin-x64": "4.62.2", "@rollup/rollup-freebsd-arm64": "4.62.2", "@rollup/rollup-freebsd-x64": "4.62.2", "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", "@rollup/rollup-linux-arm-musleabihf": "4.62.2", "@rollup/rollup-linux-arm64-gnu": "4.62.2", "@rollup/rollup-linux-arm64-musl": "4.62.2", "@rollup/rollup-linux-loong64-gnu": "4.62.2", "@rollup/rollup-linux-loong64-musl": "4.62.2", "@rollup/rollup-linux-ppc64-gnu": "4.62.2", "@rollup/rollup-linux-ppc64-musl": "4.62.2", "@rollup/rollup-linux-riscv64-gnu": "4.62.2", "@rollup/rollup-linux-riscv64-musl": "4.62.2", "@rollup/rollup-linux-s390x-gnu": "4.62.2", "@rollup/rollup-linux-x64-gnu": "4.62.2", "@rollup/rollup-linux-x64-musl": "4.62.2", "@rollup/rollup-openbsd-x64": "4.62.2", "@rollup/rollup-openharmony-arm64": "4.62.2", "@rollup/rollup-win32-arm64-msvc": "4.62.2", "@rollup/rollup-win32-ia32-msvc": "4.62.2", "@rollup/rollup-win32-x64-gnu": "4.62.2", "@rollup/rollup-win32-x64-msvc": "4.62.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA=="],
 
+    "run-parallel": ["run-parallel@1.2.0", "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
+
+    "semver": ["semver@7.8.5", "https://registry.npmmirror.com/semver/-/semver-7.8.5.tgz", { "bin": { "semver": "bin/semver.js" } }, "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
     "source-map-js": ["source-map-js@1.2.1", "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "speakingurl": ["speakingurl@14.0.1", "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz", {}, "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ=="],
@@ -406,14 +622,26 @@
 
     "tinyglobby": ["tinyglobby@0.2.17", "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.17.tgz", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
+    "to-regex-range": ["to-regex-range@5.0.1", "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
+
+    "ts-api-utils": ["ts-api-utils@2.5.0", "https://registry.npmmirror.com/ts-api-utils/-/ts-api-utils-2.5.0.tgz", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA=="],
+
     "tslib": ["tslib@2.8.1", "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "tw-animate-css": ["tw-animate-css@1.4.0", "https://registry.npmmirror.com/tw-animate-css/-/tw-animate-css-1.4.0.tgz", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
 
+    "type-check": ["type-check@0.4.0", "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
+
     "typescript": ["typescript@5.6.3", "https://registry.npmmirror.com/typescript/-/typescript-5.6.3.tgz", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw=="],
 
+    "typescript-eslint": ["typescript-eslint@8.70.0", "https://registry.npmmirror.com/typescript-eslint/-/typescript-eslint-8.70.0.tgz", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.70.0", "@typescript-eslint/parser": "8.70.0", "@typescript-eslint/typescript-estree": "8.70.0", "@typescript-eslint/utils": "8.70.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-P/W5cz70/cQAuKfY3xwQMWWTV7BvJ0mAQmi+9mBcsVPaBUpd6Ohpa+fECv9rBFrQcig86jAiNBFNWUqnTjr4pw=="],
+
     "undici-types": ["undici-types@8.3.0", "https://registry.npmmirror.com/undici-types/-/undici-types-8.3.0.tgz", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
 
+    "uri-js": ["uri-js@4.4.1", "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
+
+    "util-deprecate": ["util-deprecate@1.0.2", "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
     "vite": ["vite@6.4.3", "https://registry.npmmirror.com/vite/-/vite-6.4.3.tgz", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A=="],
 
     "vscode-uri": ["vscode-uri@3.1.0", "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.1.0.tgz", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
@@ -424,10 +652,22 @@
 
     "vue-draggable-plus": ["vue-draggable-plus@0.6.1", "https://registry.npmmirror.com/vue-draggable-plus/-/vue-draggable-plus-0.6.1.tgz", { "dependencies": { "@types/sortablejs": "^1.15.8" }, "peerDependencies": { "@vue/composition-api": "*" }, "optionalPeers": ["@vue/composition-api"] }, "sha512-FbtQ/fuoixiOfTZzG3yoPl4JAo9HJXRHmBQZFB9x2NYCh6pq0TomHf7g5MUmpaDYv+LU2n6BPq2YN9sBO+FbIg=="],
 
+    "vue-eslint-parser": ["vue-eslint-parser@10.4.1", "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-10.4.1.tgz", { "dependencies": { "debug": "^4.4.0", "eslint-scope": "^8.2.0 || ^9.0.0", "eslint-visitor-keys": "^4.2.0 || ^5.0.0", "espree": "^10.3.0 || ^11.0.0", "esquery": "^1.6.0", "semver": "^7.6.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0" } }, "sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA=="],
+
     "vue-sonner": ["vue-sonner@2.0.9", "https://registry.npmmirror.com/vue-sonner/-/vue-sonner-2.0.9.tgz", { "peerDependencies": { "@nuxt/kit": "^4.0.3", "@nuxt/schema": "^4.0.3", "nuxt": "^4.0.3" }, "optionalPeers": ["@nuxt/kit", "@nuxt/schema", "nuxt"] }, "sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw=="],
 
     "vue-tsc": ["vue-tsc@2.2.12", "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.2.12.tgz", { "dependencies": { "@volar/typescript": "2.4.15", "@vue/language-core": "2.2.12" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw=="],
 
+    "which": ["which@2.0.2", "https://registry.npmmirror.com/which/-/which-2.0.2.tgz", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "word-wrap": ["word-wrap@1.2.5", "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
+
+    "xml-name-validator": ["xml-name-validator@5.0.0", "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz", {}, "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg=="],
+
+    "yocto-queue": ["yocto-queue@0.1.0", "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
+    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "https://registry.npmmirror.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.2", "https://registry.npmmirror.com/@emnapi/core/-/core-1.11.2.tgz", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.2", "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.11.2.tgz", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA=="],
@@ -440,10 +680,24 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.9", "https://registry.npmmirror.com/ignore/-/ignore-7.0.9.tgz", {}, "sha512-brTTsvFRt5C1gGHtPst/281UjPD5t9fBqbgoMPlVWy11ZLTPfu7HxK4ZYqO9H7o/yC9rSTCI85EaQ4OoY12qYw=="],
+
+    "@vue/language-core/minimatch": ["minimatch@9.0.9", "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.9.tgz", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
+
+    "fast-glob/glob-parent": ["glob-parent@5.1.2", "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "micromatch/picomatch": ["picomatch@2.3.2", "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.2.tgz", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
+    "qified/hookified": ["hookified@2.2.0", "https://registry.npmmirror.com/hookified/-/hookified-2.2.0.tgz", {}, "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA=="],
+
     "reka-ui/@vueuse/core": ["@vueuse/core@14.3.0", "https://registry.npmmirror.com/@vueuse/core/-/core-14.3.0.tgz", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.3.0", "@vueuse/shared": "14.3.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw=="],
 
     "reka-ui/@vueuse/shared": ["@vueuse/shared@14.3.0", "https://registry.npmmirror.com/@vueuse/shared/-/shared-14.3.0.tgz", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg=="],
 
+    "@vue/language-core/minimatch/brace-expansion": ["brace-expansion@2.1.2", "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.1.2.tgz", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA=="],
+
     "reka-ui/@vueuse/core/@vueuse/metadata": ["@vueuse/metadata@14.3.0", "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-14.3.0.tgz", {}, "sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw=="],
+
+    "@vue/language-core/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
   }
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..5215ba5
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,80 @@
+// ESLint 平坦配置 —— 落地 UI_DESIGN_SYSTEM.md 第 5 章的 D 系约束。
+// 依赖：eslint / eslint-plugin-vue / @vue/eslint-config-typescript（见 package.json devDependencies）
+// 运行：bun run lint
+import pluginVue from 'eslint-plugin-vue'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+
+export default defineConfigWithVueTs(
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      'src-tauri/**',
+      'release_stage/**',
+      'ThingHK/**',
+    ],
+  },
+
+  // flat/essential：只保留「防错」规则（v-for key、重复 attr 等），
+  // 不含缩进/引号等格式规则 —— 3183 条里 3038 条是格式噪音，与既有代码风格无关
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+
+  {
+    rules: {
+      // ---- D2：禁止 Tailwind 原生色阶，必须使用语义 token ----
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector:
+            "Literal[value=/(bg|text|border|ring|fill|stroke)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-[0-9]{2,3}(\\/[0-9]{1,3})?/]",
+          message:
+            'D2 禁止 Tailwind 原生色阶：请使用语义 token（bg-card / text-success-text / border-border 等），见 UI_DESIGN_SYSTEM.md',
+        },
+        {
+          // D9：生产代码禁止外部字体 CDN
+          selector:
+            "Literal[value=/@import\\s+url\\(['\\\"]?https:\\/\\/(fonts\\.googleapis|fonts\\.gstatic)\\./]",
+          message: 'D9 禁止外部字体 CDN：使用系统字体栈',
+        },
+      ],
+
+      // ---- 未使用变量：_ 前缀豁免（Pinia action 占位、解构占位等惯例）----
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrors: 'none',
+        },
+      ],
+
+      // ---- Vue 风格：与既有代码一致 ----
+      'vue/multi-word-component-names': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/attributes-order': 'off',
+    },
+  },
+
+  // .d.ts 声明文件：Vue 官方模板的 ImportMetaEnv 写法使用 {} 与 any，豁免
+  {
+    files: ['**/*.d.ts'],
+    rules: {
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+
+  // feiniuStore 是飞牛 NAS 的 API 适配层：后端原始结构未在前端定型（字段类型化需对接 Rust 端），
+  // 边界层暂豁免 no-explicit-any；定型后应移除此豁免
+  {
+    files: ['src/stores/feiniuStore.ts'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+
+  // xterm 等第三方深色区域如需豁免，在下方追加 overrides
+)
diff --git a/package.json b/package.json
index 3e2cf44..b6788ac 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,9 @@
     "build": "vue-tsc --noEmit && node --max-old-space-size=8192 node_modules/vite/bin/vite.js build",
     "build:vite": "node --max-old-space-size=8192 node_modules/vite/bin/vite.js build",
     "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src",
     "preview": "vite preview",
-    "test": "node --test src/modules/quickpanel/engine.test.ts src/lib/calc.test.ts",
+    "test": "node --test src/modules/quickpanel/engine.test.ts src/lib/calc.test.ts src/lib/theme.test.ts",
     "tauri": "tauri"
   },
   "dependencies": {
@@ -43,6 +44,9 @@
     "@tauri-apps/cli": "^2",
     "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.6.2",
     "vite": "^6.0.3",
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 7c974f6..608334b 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -11,6 +11,7 @@
     "dialog:default",
     "core:window:allow-minimize",
     "core:window:allow-maximize",
+    "core:window:allow-unminimize",
     "core:window:allow-close",
     "core:window:allow-toggle-maximize",
     "core:window:allow-hide",
@@ -26,6 +27,9 @@
     "core:window:allow-set-always-on-top",
     "core:window:allow-set-skip-taskbar",
     "core:window:allow-set-decorations",
+    "global-shortcut:allow-register",
+    "global-shortcut:allow-unregister",
+    "global-shortcut:allow-is-registered",
     "snap-layout:default"
   ]
 }
\ No newline at end of file
diff --git a/src-tauri/capabilities/terminal-window.json b/src-tauri/capabilities/terminal-window.json
index 9d86e81..e2ba382 100644
--- a/src-tauri/capabilities/terminal-window.json
+++ b/src-tauri/capabilities/terminal-window.json
@@ -5,11 +5,13 @@
   "windows": ["terminal-window-*"],
   "permissions": [
     "core:default",
+    "core:window:allow-show",
     "core:window:allow-close",
     "core:window:allow-minimize",
     "core:window:allow-maximize",
     "core:window:allow-toggle-maximize",
     "core:window:allow-set-focus",
+    "core:window:allow-set-title",
     "core:window:allow-start-dragging",
     "core:window:allow-set-theme",
     "core:window:allow-set-background-color",
diff --git a/src-tauri/src/clipboard/popup.rs b/src-tauri/src/clipboard/popup.rs
index 2f27ead..9f40625 100644
--- a/src-tauri/src/clipboard/popup.rs
+++ b/src-tauri/src/clipboard/popup.rs
@@ -625,8 +625,9 @@ pub fn hide_preview(app: &AppHandle) {
 /// - 交互锁定模式（点击过预览窗的放大/缩小/复制等）：弹窗已失焦不会再收到
 ///   Focused(false)，检测"鼠标按下沿且按下位置在弹窗+预览之外"→ 点击外部，关闭弹窗。
 ///
-/// 公共退出条件：弹窗已隐藏/销毁（其他路径关闭）；弹窗重新获得焦点（用户点击
-/// 弹窗，恢复正常失焦关闭路径，并复位交互锁定）；超时兜底防线程泄漏
+/// 退出条件：弹窗已隐藏/销毁（其他路径关闭）；弹窗重新获得焦点（用户点击
+/// 弹窗，恢复正常失焦关闭路径，并复位交互锁定）；**光标回到弹窗内并停留片刻
+/// （交互锁定解除，但看护继续以常规模式运行）**；超时兜底防线程泄漏
 /// （常规 30s；交互锁定为事件驱动，放宽至 10min）。
 fn spawn_popup_leave_watch(app: AppHandle) {
     // 防重入：已有看护在运行则跳过
@@ -634,9 +635,12 @@ fn spawn_popup_leave_watch(app: AppHandle) {
         return;
     }
     std::thread::spawn(move || {
-        let start = Instant::now();
+        // 超时兜底的起点：交互锁定解除时重置（那之后按常规模式的 30s 计）
+        let mut start = Instant::now();
         let mut outside = 0u32;
         let mut was_down = false;
+        // 交互锁定期间光标停在弹窗内的连续轮数（30ms/轮）
+        let mut back_in_popup = 0u32;
         loop {
             std::thread::sleep(Duration::from_millis(30));
             // 弹窗已隐藏或被销毁：看护结束
@@ -654,6 +658,33 @@ fn spawn_popup_leave_watch(app: AppHandle) {
                 POPUP_INTERACTED.store(false, Ordering::SeqCst);
                 break;
             }
+            // 交互锁定期间光标已回到弹窗内：用户离开预览窗、回到列表继续浏览 ——
+            // 解除锁定，让前端的悬停逻辑重新生效（否则 hide_preview 在锁定期间一律
+            // 被忽略，表现为「鼠标回到弹窗、悬停在不需要预览的条目上，预览窗不关」）。
+            //
+            // 这里**只解除锁定、不 break**：弹窗此刻没有焦点，不会再收到 Focused(false)，
+            // 若连看护也退出，它就成了无人负责关闭的残留窗口。继续跑常规模式，
+            // 光标离开弹窗+预览区域约 300ms 后照常关闭。
+            // 连续计数（~210ms）用来排除「弹窗-预览之间的间隙」造成的瞬时误判。
+            if POPUP_INTERACTED.load(Ordering::SeqCst) {
+                if is_cursor_in_popup(&app) {
+                    back_in_popup += 1;
+                    if back_in_popup >= 7 {
+                        POPUP_INTERACTED.store(false, Ordering::SeqCst);
+                        back_in_popup = 0;
+                        // 兜底超时从「解除锁定」这一刻重新计时
+                        start = Instant::now();
+                        // 顺势收起预览：用户回到弹窗意味着意图已从「看预览」变回
+                        // 「浏览列表」。前端在悬停时发出的那次 hide_preview 落在锁定
+                        // 期间、已被忽略，这里补上（否则预览会一直挂到下次悬停）。
+                        hide_preview(&app);
+                    }
+                } else {
+                    back_in_popup = 0;
+                }
+            } else {
+                back_in_popup = 0;
+            }
             let interacted = POPUP_INTERACTED.load(Ordering::SeqCst);
             // 超长兜底：避免异常路径下看护线程无限轮询
             let timeout = if interacted {
diff --git a/src-tauri/src/constants.rs b/src-tauri/src/constants.rs
index 10bdf24..84665d6 100644
--- a/src-tauri/src/constants.rs
+++ b/src-tauri/src/constants.rs
@@ -94,6 +94,12 @@ pub mod events {
     // 终端模块：SFTP 传输进度（负载见 terminal::ssh::sftp::TransferProgress）
     // 节流后发送（约 200ms 一次），前端据此画进度条
     pub const TERMINAL_TRANSFER_PROGRESS: &str = "terminal-transfer-progress";
+    // 终端模块：设置已保存（无负载）。
+    //
+    // 终端设置存在 Rust 侧，而每个窗口（主窗口 / 终端独立窗口 / 选择窗口）各有
+    // 一份前端副本 —— 没有这个事件，在主窗口改完外观后，已打开的独立窗口会一直
+    // 用旧配色，直到重开窗口。
+    pub const TERMINAL_SETTINGS: &str = "terminal-settings";
     // 音乐模块：下载任务事件（桥接事件行 → 前端，负载见 bridge.py _emit_event）
     pub const MUSIC_DOWNLOAD_EVENT: &str = "music-download-event";
     // 后端自动切换节点完成（前端据以刷新节点列表并提示）
diff --git a/src-tauri/src/terminal/commands.rs b/src-tauri/src/terminal/commands.rs
index 6da514e..8a56e34 100644
--- a/src-tauri/src/terminal/commands.rs
+++ b/src-tauri/src/terminal/commands.rs
@@ -19,7 +19,7 @@ use std::collections::HashMap;
 
 use serde::Serialize;
 use specta::Type;
-use tauri::{AppHandle, Manager};
+use tauri::{AppHandle, Emitter, Manager};
 
 use super::assistant;
 use super::audit;
@@ -64,6 +64,15 @@ impl ActionOutcome {
 
 // ===== 设置 =====
 
+/// 广播「终端设置已保存」。
+///
+/// 终端设置存在 Rust 侧，而每个窗口（主窗口 / 终端独立窗口 / 选择窗口）各有自己的
+/// 前端副本。没有这个事件时，在主窗口改完外观后，已经打开的独立窗口会一直用旧配色
+/// （画布配色、字号、状态栏显隐都不同步），只能重开窗口。
+fn notify_settings_changed(app: &AppHandle) {
+    let _ = app.emit(crate::constants::events::TERMINAL_SETTINGS, ());
+}
+
 /// 读取终端设置。
 #[tauri::command]
 #[specta::specta]
@@ -86,6 +95,7 @@ pub async fn terminal_save_settings(
 ) -> Result<TerminalSettings, String> {
     let m = manager(&app)?;
     m.save_settings(settings.clone())?;
+    notify_settings_changed(&app);
     Ok(m.settings())
 }
 
@@ -97,7 +107,9 @@ pub async fn terminal_save_appearance(
     appearance: AppearanceSettings,
 ) -> Result<TerminalSettings, String> {
     let m = manager(&app)?;
-    m.update_settings(|s| s.appearance = appearance)
+    let out = m.update_settings(|s| s.appearance = appearance)?;
+    notify_settings_changed(&app);
+    Ok(out)
 }
 
 /// 保存布局设置。
@@ -108,7 +120,9 @@ pub async fn terminal_save_layout(
     layout: LayoutSettings,
 ) -> Result<TerminalSettings, String> {
     let m = manager(&app)?;
-    m.update_settings(|s| s.layout = layout)
+    let out = m.update_settings(|s| s.layout = layout)?;
+    notify_settings_changed(&app);
+    Ok(out)
 }
 
 /// 保存终端内选中行为。
@@ -119,7 +133,9 @@ pub async fn terminal_save_selection(
     selection: TerminalSelectionSettings,
 ) -> Result<TerminalSettings, String> {
     let m = manager(&app)?;
-    m.update_settings(|s| s.selection = selection)
+    let out = m.update_settings(|s| s.selection = selection)?;
+    notify_settings_changed(&app);
+    Ok(out)
 }
 
 /// 保存安全设置。
@@ -130,7 +146,9 @@ pub async fn terminal_save_security(
     security: SecuritySettings,
 ) -> Result<TerminalSettings, String> {
     let m = manager(&app)?;
-    m.update_settings(|s| s.security = security)
+    let out = m.update_settings(|s| s.security = security)?;
+    notify_settings_changed(&app);
+    Ok(out)
 }
 
 /// 保存快捷键绑定（整组覆盖）。
@@ -154,7 +172,9 @@ pub async fn terminal_save_shortcuts(
         }
         seen.push((key, s.action.clone()));
     }
-    m.update_settings(|st| st.shortcuts = shortcuts)
+    let out = m.update_settings(|st| st.shortcuts = shortcuts)?;
+    notify_settings_changed(&app);
+    Ok(out)
 }
 
 // ===== 本地 Shell =====
@@ -283,7 +303,9 @@ pub async fn terminal_open_local(
         app.clone(),
         id.clone(),
         profile.id.clone(),
-        profile.name.clone(),
+        // 标签上的短名，与设置页的描述名（`profile.name`）刻意分开：
+        // 描述名可编辑、可很长，而标签要能一行放下多个会话（见 `session_label`）
+        shell::session_label(&profile),
         command_line,
         work_dir,
         shell::env_pairs(&profile.env),
@@ -467,6 +489,7 @@ pub async fn terminal_open_ssh(
         },
         jump_chain: jump_hops,
         encoding: host.encoding.clone(),
+        inject_shell_integration: host.inject_shell_integration,
     };
 
     let session = ssh::SshSession::spawn(app.clone(), id, params, m.ssh_pool.clone());
@@ -564,6 +587,12 @@ pub async fn terminal_resize(
 }
 
 /// 重命名会话（同时更新标签与独立窗口标题）。
+///
+/// # 为什么用 `set_title_by_user` 而不是直接写 `title`
+///
+/// 重命名会把标题**锁定**，此后 shell 通过 OSC 0/2 上报的标题一律被忽略。
+/// 不锁的话，用户重命名后下一条提示符就把名字覆盖回去了 ——
+/// 表现为「重命名无效」，且只在有输出时才复现，很难归因。
 #[tauri::command]
 #[specta::specta]
 pub async fn terminal_rename_session(
@@ -580,7 +609,7 @@ pub async fn terminal_rename_session(
     if t.is_empty() {
         return Err("标题不能为空".to_string());
     }
-    s.set_title(t);
+    s.set_title_by_user(t);
 
     // 独立窗口存在时同步标题，避免窗口标题与内部标签不一致
     if let Some(win) = app.get_webview_window(&window::label_for(&session_id)) {
@@ -1001,6 +1030,7 @@ pub async fn terminal_import_ssh_config(app: AppHandle) -> Result<ActionOutcome,
                 use_proxy: false,
                 jump_ids: Vec::new(),
                 encoding: "utf-8".to_string(),
+                inject_shell_integration: true,
             });
             imported += 1;
         }
@@ -1417,9 +1447,14 @@ pub async fn terminal_import_known_hosts(text: String) -> Result<ActionOutcome,
 ///
 /// 由前端在用户点击「接受」/「拒绝」后调用。会话侧的握手正在阻塞等待这个回传，
 /// 因此超时（120 秒）后会视为拒绝。
+///
+/// `app` 只用于安全事件日志（`security.auditLog`）——用户的每个决定都要留痕：
+/// 「谁在什么时候接受了新指纹」是事后审计里最关键的一条。specta 会把
+/// `AppHandle` 参数从生成的 JS 签名里剔除，因此前端调用方式不变。
 #[tauri::command]
 #[specta::specta]
 pub async fn terminal_confirm_host_key(
+    app: AppHandle,
     session_id: String,
     accept: bool,
     host: String,
@@ -1427,6 +1462,15 @@ pub async fn terminal_confirm_host_key(
     key_type: String,
     fingerprint: String,
 ) -> Result<(), String> {
+    if let Ok(m) = manager(&app) {
+        if m.settings().security.audit_log {
+            let action = if accept { "接受" } else { "拒绝" };
+            crate::logger::log_info(
+                "terminal",
+                &format!("用户{action}主机密钥：{host}:{port} {key_type} {fingerprint}"),
+            );
+        }
+    }
     if !accept {
         // 记一次「拒绝」以便事后审计
         hostkey::record_rejection(&host, port, &fingerprint, &key_type);
diff --git a/src-tauri/src/terminal/pty/conpty.rs b/src-tauri/src/terminal/pty/conpty.rs
index e446f35..0be2ada 100644
--- a/src-tauri/src/terminal/pty/conpty.rs
+++ b/src-tauri/src/terminal/pty/conpty.rs
@@ -695,8 +695,8 @@ impl Session for ConPtySession {
             .emit(crate::terminal::events::TERMINAL_STATE, self.info());
     }
 
-    fn set_title(&self, title: &str) {
-        *self.state.title.lock().unwrap_or_else(|e| e.into_inner()) = title.to_string();
+    fn set_title_by_user(&self, title: &str) {
+        self.state.set_title_by_user(title);
     }
 
     fn set_detached(&self, detached: bool) {
diff --git a/src-tauri/src/terminal/session.rs b/src-tauri/src/terminal/session.rs
index 1683cf8..53714dc 100644
--- a/src-tauri/src/terminal/session.rs
+++ b/src-tauri/src/terminal/session.rs
@@ -131,8 +131,12 @@ pub trait Session: Send + Sync {
     /// 更新状态（供内部线程在握手/退出时调用）。
     fn set_state(&self, state: SessionState, error: Option<String>);
 
-    /// 更新标题。
-    fn set_title(&self, title: &str);
+    /// 由**用户**指定标题（重命名）。
+    ///
+    /// 名字里带 `_by_user` 是刻意的：它会锁定标题，之后 shell 通过 OSC 0/2
+    /// 上报的标题一律被忽略。任何「程序自动设置标题」的需求都不该走这里 ——
+    /// 那会把用户的命名覆盖掉（见 `LocalSessionState::title_locked`）。
+    fn set_title_by_user(&self, title: &str);
 
     /// 标记是否由独立窗口承载。
     fn set_detached(&self, detached: bool);
@@ -276,6 +280,17 @@ pub struct LocalSessionState {
     /// 没有这个字段就只能靠 `target_id` 的形式去猜，那是不可靠的。
     pub kind: SessionKind,
     pub title: std::sync::Mutex<String>,
+    /// 标题是否已被用户手动指定（重命名）。
+    ///
+    /// # 为什么需要这个标记
+    ///
+    /// 会话标题有两个来源：创建时的 shell/主机名，以及 shell 通过 OSC 0/2
+    /// 上报的自定义标题（每次绘制提示符都可能刷新）。后者是**异步且随时可能到达**的，
+    /// 因此用户刚重命名完，下一条提示符就会把它覆盖回去 —— 表现为「重命名无效」，
+    /// 且因为只在有输出时才复现，很难判断是哪里出的问题。
+    ///
+    /// 一旦用户显式命名，就把标题的所有权交给用户：后续 OSC 标题一律忽略。
+    pub title_locked: std::sync::atomic::AtomicBool,
     pub state: std::sync::Mutex<SessionState>,
     pub error: std::sync::Mutex<Option<String>>,
     pub cwd: std::sync::Mutex<String>,
@@ -313,6 +328,7 @@ impl LocalSessionState {
             target_id,
             kind,
             title: std::sync::Mutex::new(title),
+            title_locked: std::sync::atomic::AtomicBool::new(false),
             state: std::sync::Mutex::new(SessionState::Idle),
             error: std::sync::Mutex::new(None),
             cwd: std::sync::Mutex::new(String::new()),
@@ -329,6 +345,19 @@ impl LocalSessionState {
         matches!(self.kind, SessionKind::Ssh)
     }
 
+    /// 用户手动指定标题（重命名）。同时锁定，见 `title_locked` 的说明。
+    pub fn set_title_by_user(&self, title: &str) {
+        *self.title.lock().unwrap_or_else(|e| e.into_inner()) = title.to_string();
+        self.title_locked
+            .store(true, std::sync::atomic::Ordering::Relaxed);
+    }
+
+    /// 标题当前是否被用户锁定（锁定后忽略 shell 上报的 OSC 标题）。
+    pub fn is_title_locked(&self) -> bool {
+        self.title_locked
+            .load(std::sync::atomic::Ordering::Relaxed)
+    }
+
     /// 当前编码（供读线程与命令层读取）。
     pub fn encoding(&self) -> String {
         self.encoding
@@ -444,20 +473,34 @@ pub fn scan_control_sequences(
     }
 
     if let Some(title) = titles.last() {
-        let changed = {
-            let mut cur = state.title.lock().unwrap_or_else(|e| e.into_inner());
-            if *cur == *title {
-                false
-            } else {
-                *cur = title.clone();
-                true
+        // 两类标题一律丢弃，理由不同但都落在同一个判定点上：
+        //
+        // 1. 用户已重命名过（`title_locked`）：标题所有权已交给用户，
+        //    否则下一条提示符就会把用户刚起的名字覆盖回去。
+        // 2. 标题是可执行文件全路径（`osc_title_is_executable_path`）：
+        //    cmd.exe / powershell.exe 启动时就是这么设控制台标题的，
+        //    把会话名顶成 `C:\Windows\System32\...\cmd.exe` 毫无信息量。
+        //
+        // 注意这里**不能提前 return** —— 函数尾部还有 OSC 133 命令边界的落库，
+        // 早退会把「同批次里带标题的命令」整条丢掉。
+        let ignored = state.is_title_locked()
+            || super::shell::osc_title_is_executable_path(title);
+        if !ignored {
+            let changed = {
+                let mut cur = state.title.lock().unwrap_or_else(|e| e.into_inner());
+                if *cur == *title {
+                    false
+                } else {
+                    *cur = title.clone();
+                    true
+                }
+            };
+            if changed {
+                let _ = app.emit(
+                    crate::terminal::events::TERMINAL_STATE,
+                    local_info(state, state.kind),
+                );
             }
-        };
-        if changed {
-            let _ = app.emit(
-                crate::terminal::events::TERMINAL_STATE,
-                local_info(state, state.kind),
-            );
         }
     }
 
diff --git a/src-tauri/src/terminal/settings.rs b/src-tauri/src/terminal/settings.rs
index b9c880f..5d51b4a 100644
--- a/src-tauri/src/terminal/settings.rs
+++ b/src-tauri/src/terminal/settings.rs
@@ -23,7 +23,11 @@ use specta::Type;
 pub struct ShellProfile {
     /// 唯一标识（同时是新建会话时的 shellKey）
     pub id: String,
-    /// 展示名称，如 "PowerShell 7"
+    /// 展示名称，如 "PowerShell 7" / "Windows PowerShell"。
+    ///
+    /// **设置页里的描述名，不是标签上显示的名字** —— 后者取
+    /// [`super::shell::session_label`]（按可执行文件名归一的短名）。
+    /// 两者刻意分开：描述名可编辑、可很长，而标签要能一行放下多个会话。
     pub name: String,
     /// 可执行文件绝对路径
     pub path: String,
@@ -147,6 +151,20 @@ pub struct SshHost {
     pub jump_ids: Vec<String>,
     /// 终端的字符编码（"utf-8" 默认 | "gbk" 等）。老服务器常见 GBK，中文环境刚需。
     pub encoding: String,
+    /// 是否在远端注入 shell 集成 hook（命令历史 + cwd 跟踪）。
+    ///
+    /// # 为什么默认必须是 true
+    ///
+    /// 本结构是容器级 `#[serde(default)]`：老配置里缺这个字段时，serde 不是填
+    /// 「零值」而是取 [`SshHost::default()`] 的值。因此**默认值决定老主机是否自动
+    /// 开启注入** —— 填 `false` 会让所有既有主机静默不注入（表现为历史永远为空，
+    /// 而开关在界面上看着是关的，用户根本不会去动它）。填 `true` 则无需改
+    /// `heal()`、无需升 `version`。
+    ///
+    /// 关掉它的场景：远端 shell 集成会与 `startup_command` 里 `exec` 换 shell 的
+    /// 配置冲突，或服务器对会话环境有洁癖要求（注入会改本次会话的 `PROMPT_COMMAND`／
+    /// `precmd`，但不落盘、不影响其它会话）。
+    pub inject_shell_integration: bool,
 }
 
 impl Default for SshHost {
@@ -170,6 +188,8 @@ impl Default for SshHost {
             use_proxy: false,
             jump_ids: Vec::new(),
             encoding: "utf-8".to_string(),
+            // 必须 true，理由见字段文档（容器级 serde(default) 会用这里的值兜老配置）
+            inject_shell_integration: true,
         }
     }
 }
@@ -206,7 +226,8 @@ pub struct AppearanceSettings {
 impl Default for AppearanceSettings {
     fn default() -> Self {
         Self {
-            theme: "thing-dark".to_string(),
+            // 「跟随主应用」：配合默认开启的 follow_app_theme，开箱即随应用深浅切换
+            theme: "system".to_string(),
             follow_app_theme: true,
             font_family: "Cascadia Mono, Consolas, Microsoft YaHei Mono, monospace".to_string(),
             font_size: 14,
@@ -296,10 +317,6 @@ pub struct LayoutSettings {
     pub confirm_close_running: bool,
     /// 新建标签页时是否继承当前会话的工作目录
     pub inherit_cwd: bool,
-    /// 侧栏默认是否展开
-    pub sidebar_open: bool,
-    /// 侧栏宽度（像素）
-    pub sidebar_width: u32,
     /// 是否显示底部状态栏
     pub show_status_bar: bool,
     /// 分屏上限（1 = 不分屏，2 = 2×1，4 = 2×2）。
@@ -312,8 +329,6 @@ impl Default for LayoutSettings {
         Self {
             confirm_close_running: true,
             inherit_cwd: true,
-            sidebar_open: true,
-            sidebar_width: 220,
             show_status_bar: true,
             max_panes: 4,
         }
@@ -510,11 +525,25 @@ pub struct SecuritySettings {
     ///
     /// **不提供 "auto-accept" 选项**：TOFU 静默接受是 MITM 的入口，
     /// 属于代码层不该给用户的开关。
+    ///
+    /// 读取方（`ssh::SshHandler::check_server_key`）**显式读取本字段而不是写死**：
+    /// 唯一支持的取值是 `"ask"`，其它取值（配置文件被手工改过）一律按 `"ask"`
+    /// 处理 —— 安全开关的失败方向必须朝更严的一侧，绝不能因为出现了一个
+    /// 没见过的字符串就放宽。
     pub host_key_policy: String,
     /// 指纹变更时是否阻断（**默认 true**）。关掉会让中间人攻击无声通过，
     /// 因此前端需以红色风险提示呈现该开关。
+    ///
+    /// 关闭时的行为不是「照旧弹窗」而是「自动接受并记入变更历史」：
+    /// 开关的语义是「不再拦截」，若关掉后仍弹阻断弹窗，用户会以为没生效。
     pub block_on_fingerprint_change: bool,
-    /// 是否记录连接审计日志（P2，默认关；开启后输入输出落盘，含脱敏）
+    /// 是否把**安全事件**写入日志（默认开）。
+    ///
+    /// 记录对象是主机密钥相关的事件：指纹已信任 / 首次见到被接受 / 指纹变更
+    /// 被接受或拒绝 / 自动接受（阻断关闭时）。与「会话日志」（输出字节流落盘，
+    /// 由工具栏的 `terminal_toggle_logging` 按会话显式开启，见 `audit` 模块的
+    /// 取舍说明）**是两件事**：这里只写事件行，不含屏幕内容，因此没有隐私代价，
+    /// 默认开启才能保证「发生过什么」事后可查。
     pub audit_log: bool,
 }
 
@@ -523,7 +552,7 @@ impl Default for SecuritySettings {
         Self {
             host_key_policy: "ask".to_string(),
             block_on_fingerprint_change: true,
-            audit_log: false,
+            audit_log: true,
         }
     }
 }
@@ -633,6 +662,9 @@ impl Default for TemplateEntry {
 /// - 新建/关闭标签用 `Ctrl+Shift+T/W`，与浏览器习惯一致。
 /// - 跳转标签用 `Alt+1..9`：`Ctrl+数字` 已被翻译模块的 `Ctrl+2`（翻译面板）占用，
 ///   而 `Alt+数字` 在终端里通常不产生控制字符，冲突面最小。
+/// - `newDetachedWindow`（`Ctrl+3`）是这张表里唯一**全局**生效的一条：它由前端
+///   `TerminalQuickLaunch` 注册成系统级热键（任意应用前台可触发），放在这里只为
+///   跟着终端设置一起存与改。`Ctrl+2` 已被翻译面板占用，`Ctrl+3` 是空闲的相邻键位。
 pub fn default_shortcuts() -> Vec<ShortcutBinding> {
     let pairs: &[(&str, &str)] = &[
         ("copy", "Ctrl+Shift+C"),
@@ -656,6 +688,11 @@ pub fn default_shortcuts() -> Vec<ShortcutBinding> {
         ("history", "Ctrl+Shift+H"),
         ("renameTab", "F2"),
         ("sessionSwitcher", "Ctrl+Shift+O"),
+        // 把当前会话放到独立窗口。**必须列在这里**：`heal()` 只保留默认表里出现过的
+        // action（未知 action 会被剔除），前端设置表里有而这里没有 = 用户改完下次启动就被清掉。
+        ("detachWindow", "Ctrl+Shift+N"),
+        // 全局生效的一条（见上方说明）：新建独立窗口 + 选择会话
+        ("newDetachedWindow", "Ctrl+3"),
     ];
     pairs
         .iter()
@@ -685,6 +722,24 @@ impl TerminalSettings {
     pub fn heal(&mut self) -> bool {
         let mut changed = false;
 
+        // 配色主题：只认前端 `terminalThemes.ts` 里存在的 key。
+        // 早期默认值是 `thing-dark`（一套从未实现的主题），解析时会静默回落到
+        // vscode-dark，用户看到的是「选了主题不生效」。未知 key 一律收敛到
+        // 「system」（跟随主应用）—— 它至少是用户能预期的行为。
+        const THEMES: &[&str] = &[
+            "vscode-dark",
+            "vscode-light",
+            "solarized-dark",
+            "solarized-light",
+            "dracula",
+            "one-dark",
+            "system",
+        ];
+        if !THEMES.contains(&self.appearance.theme.as_str()) {
+            self.appearance.theme = "system".to_string();
+            changed = true;
+        }
+
         // 快捷键表：补齐新增动作、剔除已废弃动作。用户改过的键位保留。
         let defaults = default_shortcuts();
         for d in &defaults {
@@ -747,6 +802,14 @@ impl TerminalSettings {
             changed = true;
         }
 
+        // 安全：主机密钥策略只有一个合法取值（见 SecuritySettings 的字段说明）。
+        // 手工改过的配置在这里收敛回 "ask"，与 `check_server_key` 里
+        // 「未知取值按 ask 处理」构成两道保险：这道修数据，那道防空。
+        if self.security.host_key_policy != "ask" {
+            self.security.host_key_policy = "ask".to_string();
+            changed = true;
+        }
+
         // last_shell_id 指向已删除的 Shell → 清空，由前端选第一个可用
         if !self.last_shell_id.is_empty() && self.shell(&self.last_shell_id).is_none() {
             self.last_shell_id.clear();
diff --git a/src-tauri/src/terminal/shell.rs b/src-tauri/src/terminal/shell.rs
index 5e60f0c..9124dd7 100644
--- a/src-tauri/src/terminal/shell.rs
+++ b/src-tauri/src/terminal/shell.rs
@@ -14,6 +14,25 @@ use std::path::{Path, PathBuf};
 
 use super::settings::{EnvVar, ShellProfile};
 
+/// 探测项的**历史默认名**。
+///
+/// 用途只有一个：`detect_and_merge` 的规则是「保留用户设置的名字」，因此
+/// 默认名一旦调整，老用户的 `settings.json` 里仍存着旧名 —— 不显式迁移，
+/// 新默认名**永远不生效**，表现为「改了代码但界面上丝毫没变」这类最费时间的假故障。
+///
+/// 因此这里登记「曾经作为默认名出现过」的全部取值：命中的视为「从未被用户改过」，
+/// 直接采用当前默认名；用户真的改过名（不等于任何一个历史默认名）则照旧保留。
+///
+/// 注：`cmd` / `PowerShell` 这两个短名是 2026-09-20 那一版误当作展示名的取值，
+/// 保留在列表里是为了把它们**收回**到描述性默认名。
+pub fn legacy_default_names(id: &str) -> &'static [&'static str] {
+    match id {
+        "powershell" => &["Windows PowerShell", "PowerShell"],
+        "cmd" => &["命令提示符", "cmd"],
+        _ => &[],
+    }
+}
+
 /// 探测结果：合并「自动发现的 Shell」与「用户已有的自定义配置」。
 ///
 /// 合并策略：**以自动探测为权威源修正路径**（用户机器上升级了 PowerShell 7，
@@ -25,8 +44,13 @@ pub fn detect_and_merge(existing: &[ShellProfile]) -> Vec<ShellProfile> {
 
     for mut d in detected {
         if let Some(old) = existing.iter().find(|s| s.id == d.id) {
-            // 保留用户的个性化字段，路径以探测结果为准
-            d.name = if old.name.trim().is_empty() {
+            // 保留用户的个性化字段，路径以探测结果为准。
+            // 名字的取舍见 `legacy_default_names`：空名与历史默认名都归探测结果，
+            // 其余（用户真的改过）保留用户值。
+            let old_name = old.name.trim();
+            let untouched = old_name.is_empty()
+                || legacy_default_names(&d.id).contains(&old_name);
+            d.name = if untouched {
                 d.name.clone()
             } else {
                 old.name.clone()
@@ -62,6 +86,12 @@ pub fn detect_and_merge(existing: &[ShellProfile]) -> Vec<ShellProfile> {
 /// 自动探测本机可用的 Shell。
 ///
 /// 顺序即菜单顺序，也是新建会话时的默认选中顺序（按现代性与功能排序）。
+///
+/// # 关于 `name`
+///
+/// `name` 是**设置页里的描述名**（可编辑，用于描述「这条配置是什么」），
+/// 不是会话标签上显示的名字 —— 后者取 [`session_label`]。两者刻意分开：
+/// 描述名可以长、可以含版本来源，而标签需要稳定、短、一眼可辨。
 pub fn detect_shells() -> Vec<ShellProfile> {
     let mut list = Vec::new();
 
@@ -335,6 +365,28 @@ fn encode_powershell_command(script: &str) -> String {
 /// PowerShell 的提示符函数在「上一条命令执行完、即将显示新提示符」这个时刻被调用，
 /// 因此这里输出的是 **D（上一条结束）** 而不是 C（即将开始）。
 ///
+/// 命令文本单独用 `OSC 1337;Cmd=` 上报（协议里的 `C` 不带文本，见
+/// [`CommandMark`]），取自 `Get-History -Count 1`：提示符函数运行时，刚刚执行的
+/// 那条命令已经在会话历史里（PowerShell 在读取输入行时就写入历史，早于执行）。
+///
+/// **必须先发 `Cmd` 再发 `D`**：Rust 侧在 `D` 到达时用暂存的文本落库
+/// （见 `session::CommandAccumulator`），顺序反了会记成上一条命令。
+///
+/// `$global:__thingLastHistId` 做去重：提示符函数可能因续行提示符（`>>`）等原因
+/// 在同一条命令后被调用多次，不加这个守卫会把同一条命令重复计数。
+///
+/// # 为什么要跳过第一个提示符（`$global:__thingSkipNextPrompt`）
+///
+/// PowerShell 会把 `-EncodedCommand` 的**脚本文本本身**记进会话历史，于是本脚本
+/// 注入后遇到的第一个提示符，`Get-History -Count 1` 拿到的是这段注入脚本 ——
+/// 若不跳过，每个新建的 PowerShell 会话都会往历史里塞一条用户从没敲过的
+/// 「巨型命令」（实测形态：一条以 `$__thingOrigPrompt = $function:prompt;` 开头的
+/// 几百字符记录，且因去重键相同而不断累加 count）。
+///
+/// 跳过一次即可：第一个提示符之前用户不可能敲过任何命令，所以「跳过」不会误伤
+/// 真实记录；即便某个 PowerShell 版本不把注入脚本记进历史，跳过也只是少一次
+/// 无用调用。
+///
 /// 退出码取自 `$LASTEXITCODE`（原生命令）或 `$?`（cmdlet），两者语义不同：
 /// cmdlet 成功时 `$LASTEXITCODE` 可能保留着**更早那条原生命令**的值。
 /// 因此优先 `$LASTEXITCODE`（仅当其在本轮被设置过），否则用 `$?` 折算 0/1。
@@ -343,11 +395,26 @@ fn encode_powershell_command(script: &str) -> String {
 fn powershell_prompt_hook() -> String {
     [
         "$__thingOrigPrompt = $function:prompt;",
+        // 去重用的「最近一次已上报的历史条目 id」，见函数文档
+        "$global:__thingLastHistId = -1;",
+        // 「下一个提示符对应的是注入脚本自己」，见函数文档
+        "$global:__thingSkipNextPrompt = $true;",
         "function global:prompt {",
         // 必须最先取：后面任何一条语句都会刷新 $?
         "  $__ok = $?;",
         "  $__code = $LASTEXITCODE;",
         "  if ($null -eq $__code) { $__code = if ($__ok) { 0 } else { 1 } }",
+        // 命令文本：先于 D 输出（顺序见函数文档）
+        "  if ($global:__thingSkipNextPrompt) {",
+        "    $global:__thingSkipNextPrompt = $false",
+        "  } else {",
+        "    $__h = Get-History -Count 1;",
+        "    if ($__h -and $__h.Id -ne $global:__thingLastHistId) {",
+        "      $global:__thingLastHistId = $__h.Id;",
+        "      $__c = $__h.CommandLine;",
+        "      if ($__c) { Write-Host -NoNewline \"$([char]27)]1337;Cmd=$__c$([char]7)\"; }",
+        "    }",
+        "  }",
         "  Write-Host -NoNewline \"$([char]27)]133;D;$__code$([char]7)\";",
         "  $__p = $ExecutionContext.SessionState.Path.CurrentLocation;",
         "  $__loc = $__p.ProviderPath;",
@@ -388,6 +455,12 @@ fn powershell_prompt_hook() -> String {
 /// 结论：**保留 shell 的原样输出交给 Rust 侧判断** —— hook 只管如实上报，
 /// 「前导空格要不要记」是策略，由 `History::record` 统一决定（那里也是
 /// `HISTCONTROL=ignorespace` 的落点）。hook 里做策略判断会散落成两处规则。
+///
+/// 例外一处：字段拆分（`read`）会把命令**自己的前导空格**一并吃掉 —— 序号后的
+/// 分隔空格与命令的前导空格在文本上无法区分。于是「以空格开头」的命令会以普通
+/// 命令的形态上报，由 `History::record` 记录。常见配置
+/// `HISTCONTROL=ignorespace` 下这类命令压根不在 `history 1` 里，这条例外也就
+/// 无从触发；不对抗它，如实记在这里。
 fn bash_prompt_hook() -> String {
     [
         "# Thing 终端：shell integration hook（由终端模块注入，可安全删除）",
@@ -395,30 +468,170 @@ fn bash_prompt_hook() -> String {
         "# 供文件管理器、cwd 继承与命令历史使用",
         "__thing_osc7() {",
         "  local __code=$?",
-        "  printf '\\033]133;D;%s\\007' \"$__code\"",
         // 取最后一条历史：`history 1` 返回 `  123  <命令>`
         // （前导空格 + 序号 + 两个空格 + 命令本体）。
         //
-        // 用 `read -r` 拆而不是参数展开剥前缀：`${x#"$y"}` 这种嵌套引号在
-        // Rust 字符串字面量里要转义到难以阅读，而且 `history` 的输出里
-        // 命令本体可能**含空格**，参数展开必须保留剩余全部内容。
-        // `read -r _ _ __cmd` 的语义恰好是「跳过前两段空白分隔的字段，
-        // 其余原样（含内部空格）收进 __cmd」—— 正是所需，且引号最少。
+        // **必须只跳过「序号」这一个字段**：`read -r _ __cmd` 的语义是「第一个
+        // 字段给 `_`，其余字段连同它们之间的分隔符一起给 `__cmd`」。
+        //
+        // 曾经的写法 `read -r _ _ __cmd` 多跳了一个字段，后果按命令词数分三种：
+        // - 单字命令（`ls`）：只剩序号 + 命令两个字段 → `__cmd` 为空 → 不发 Cmd
+        //   → **一条都不落库**（实测就是「SSH 上跑了 ls，历史里什么都没有」）；
+        // - 多字命令（`git status`）：第一个词被 `_` 吃掉 → 记成 `status`；
+        // - 恰好两字命令才是碰巧正确的。
+        //
+        // 用 `read` 而不是参数展开剥前缀：`history` 的输出里命令本体可能含空格，
+        // 参数展开（`${x##*  }` 之类）会在命令内部出现连续空格时切错位置。
         "  local __cmd=''",
-        "  read -r _ _ __cmd <<< \"$(HISTTIMEFORMAT= builtin history 1)\"",
+        "  read -r _ __cmd <<< \"$(HISTTIMEFORMAT= builtin history 1)\"",
+        // 顺序要紧：Rust 侧在 D 到达时用暂存的文本落库（见 `CommandAccumulator`），
+        // 先 D 后 Cmd 会让每条命令都推迟到下一次提示符才记录，且最后一条永远丢失
         "  printf '\\033]1337;Cmd=%s\\007' \"$__cmd\"",
+        "  printf '\\033]133;D;%s\\007' \"$__code\"",
         "  printf '\\033]7;file://%s%s\\007' \"${HOSTNAME:-localhost}\" \"$PWD\"",
         "}",
-        "if [[ -n \"$PROMPT_COMMAND\" ]]; then",
-        "  PROMPT_COMMAND=\"__thing_osc7; $PROMPT_COMMAND\"",
+        // bash 5.1+ 允许 `PROMPT_COMMAND` 是**数组**（每个元素都是一条要执行的命令）。
+        // 原来那句字符串拼接在数组场景下只会展开元素 0 并把整个数组覆盖成字符串 ——
+        // 用户自己的钩子（bash-preexec 之类）就此丢失。因此按 `declare -p` 的形态分流。
+        "if [[ \"$(declare -p PROMPT_COMMAND 2>/dev/null)\" == \"declare -a\"* ]]; then",
+        "  PROMPT_COMMAND=(__thing_osc7 \"${PROMPT_COMMAND[@]}\")",
         "else",
-        "  PROMPT_COMMAND=\"__thing_osc7\"",
+        "  PROMPT_COMMAND=\"__thing_osc7${PROMPT_COMMAND:+; $PROMPT_COMMAND}\"",
         "fi",
         "",
     ]
     .join("\n")
 }
 
+/// 远端（SSH）shell 集成脚本：**一行** POSIX sh，由连接期直接写进远端 shell。
+///
+/// # 为什么要注入、以及注入什么
+///
+/// 远端 shell 默认不会输出任何 OSC 标记，于是 SSH 会话既没有命令历史
+/// （见 [`CommandMark`]）也没有 cwd 跟踪。本脚本让远端 shell 在提示符处自行上报
+/// `OSC 1337;Cmd=` / `OSC 133;D` / `OSC 7`，与本地 hook 输出完全同一套协议，
+/// Rust 侧无需为 SSH 单独分流。
+///
+/// # 调用方的两个义务
+///
+/// 1. **以空格开头**（`{script}` 前面加一个空格）：`HISTCONTROL=ignorespace` 惯例，
+///    让这行注入命令不进远端 shell 的历史；`History::record` 也丢弃前导空格的命令。
+/// 2. **以 `\n` 结尾**：PTY 的行规程只在收到 NL 时才把这一行交给 shell。
+///
+/// # 单行脚本的硬约束（全是踩过的坑）
+///
+/// - **不能有 `#` 注释**：单行脚本里注释会吃掉行尾其余内容（本地 Git Bash 的 hook
+///   是多行文件，才能写注释）。
+/// - **不能含裸 `\r`**：远端 PTY 的 ICRNL 会把 `\r` 当行结束，脚本被切成多条半截命令。
+/// - **保持纯 ASCII**：GBK 主机的回显才不会是乱码。
+/// - `printf` 用 `\033` / `\007` 而不是 `\e`：部分 dash/busybox 不认 `\e`。
+///   命令文本一律作为 `%s` 参数传入（含单引号、`%` 都不会破坏格式串）。
+///
+/// # 两个 shell 分支的差异
+///
+/// - **bash**：钩子挂在 `PROMPT_COMMAND`，命令文本取自 `history 1`（别名已展开、
+///   Tab 补全已生效）。挂载用**前插**：`$?` 必须在用户已有钩子之前取走，
+///   否则会被别人的语句覆盖。`PROMPT_COMMAND` 可能是数组，按形态分流。
+/// - **zsh**：用 `preexec`（命令执行前，`$1` 就是最终命令行）发 `Cmd`、`precmd`
+///   发 `D` —— 两者天然配对，比 bash 更精确。同样前插，理由同上。
+///
+/// # 跳过第一个提示符（`__thing_skip`）
+///
+/// 注入命令本身会进入远端会话历史，于是第一个提示符取到的「上一条命令」就是这行
+/// 注入命令，不跳过就会把注入脚本记成一条用户命令（本地 PowerShell 已实测踩过）。
+///
+/// # 命令文本为空时不发 `Cmd`
+///
+/// `CommandAccumulator` 是**覆盖**语义（Cmd 到来即覆盖暂存），发一个空的 Cmd 会
+/// 覆盖掉上一条待落库的文本。`HISTFILE=/dev/null` / `set +o history` 的场景就靠
+/// 这个守卫降级为「cwd 有、历史空」，而不是让历史错位。
+///
+/// # 幂等
+///
+/// `__thing_installed` 守卫：同一会话里重复注入不会注册两次（否则每条命令入库两次）。
+///
+/// # 末尾附一次清屏：为什么是必须的，以及为什么不用 `clear`
+///
+/// 注入行是在远端还处于登录阶段时就到达的（`Last login:` 那一段，shell 还没开始读
+/// 输入）。于是 tty 层先回显一次、readline 起来后从缓冲里读到再重绘一次 —— 用户会看到
+/// **两遍**这行几百字符的命令，登录 banner / motd 也还在屏幕上。注入完清一次屏把这
+/// 几行一起抹掉。
+///
+/// 直接写序列而不是调 `clear`：不依赖 `clear` 二进制（精简容器里可能没有）、字节固定、
+/// 不随远端 TERM 变化。三个参数各有用处 —— `2J` 清屏、`3J` 清滚动缓冲（否则往上滚
+/// 还能看到那行回显）、`H` 归位光标。代价是 motd 也一并被清掉：这是「干净的首屏」与
+/// 「先看一眼 motd」之间的取舍，取前者（VS Code / Windows Terminal 的远端集成同样
+/// 会刷新首屏）。
+///
+/// 清屏放在 `fi` 之后：它不是 shell 集成的一部分，`dash` 这类没有 hook 可挂的 shell
+/// 也该清掉这行回显。
+pub fn remote_shell_integration_script() -> String {
+    // bash 分支：`<<<`、`${v//a/b}`、数组都是 bashism，故先按 BASH_VERSION 分流再使用。
+    let bash = "__thing_osc7(){ local __code=$?; local __cmd=''; \
+                if [ -z \"${__thing_skip:-}\" ]; then \
+                read -r _ __cmd <<< \"$(HISTTIMEFORMAT= builtin history 1)\"; \
+                __cmd=${__cmd//[$'\\033\\007']/}; \
+                [ -n \"$__cmd\" ] && printf '\\033]1337;Cmd=%s\\007' \"$__cmd\"; \
+                else unset __thing_skip; fi; \
+                printf '\\033]133;D;%s\\007' \"$__code\"; \
+                printf '\\033]7;file://%s%s\\007' \"${HOSTNAME:-localhost}\" \"$PWD\"; }; \
+                if [ -z \"${__thing_installed:-}\" ]; then __thing_installed=1; __thing_skip=1; \
+                case \"$(declare -p PROMPT_COMMAND 2>/dev/null)\" in \
+                \"declare -a\"*) PROMPT_COMMAND=(__thing_osc7 \"${PROMPT_COMMAND[@]}\");; \
+                *) PROMPT_COMMAND=\"__thing_osc7${PROMPT_COMMAND:+; $PROMPT_COMMAND}\";; esac; fi";
+
+    // zsh 分支：precmd 只发 D，preexec 发 Cmd（顺序见 `CommandAccumulator`）。
+    let zsh = "__thing_precmd(){ local __code=$?; \
+               printf '\\033]133;D;%s\\007' \"$__code\"; \
+               printf '\\033]7;file://%s%s\\007' \"${HOSTNAME:-${HOST:-localhost}}\" \"$PWD\"; }; \
+               __thing_preexec(){ if [ -n \"${__thing_skip:-}\" ]; then unset __thing_skip; return 0; fi; \
+               local __cmd=${1:-${2:-}}; \
+               if [ -n \"$__cmd\" ]; then printf '\\033]1337;Cmd=%s\\007' \"${__cmd//[$'\\033\\007']/}\"; fi; \
+               return 0; }; \
+               if [ -z \"${__thing_installed:-}\" ]; then __thing_installed=1; __thing_skip=1; \
+               typeset -ga precmd_functions preexec_functions; \
+               precmd_functions=(__thing_precmd ${precmd_functions[@]}); \
+               preexec_functions=(__thing_preexec ${preexec_functions[@]}); fi";
+
+    // 都不是 bash/zsh（dash、fish、tcsh…）时前半段是空操作；末尾的清屏对所有 shell 都执行。
+    format!(
+        "if [ -n \"${{BASH_VERSION:-}}\" ]; then {bash}; \
+         elif [ -n \"${{ZSH_VERSION:-}}\" ]; then {zsh}; fi; \
+         printf '\\033[2J\\033[3J\\033[H'"
+    )
+}
+
+/// 会话标签上显示的**短名**。
+///
+/// # 为什么不直接用 `ShellProfile::name`
+///
+/// `name` 是设置页里的描述名，用户可编辑（可能是 "Windows PowerShell"、
+/// 也可能是自定的 "我的远程 PS"）。标签的诉求完全不同：它要在一行里容下
+/// 多个会话、要能一眼分辨，因此需要**短且稳定**的名字。两者分开之后，
+/// 调整其中一个不会捎带动另一个。
+///
+/// # 取值来源是可执行文件名而不是 `kind`
+///
+/// `kind` 只区分注入方式（powershell / cmd / bash / wsl），pwsh 与
+/// Windows PowerShell 的 kind 相同，靠它分不出「PowerShell 7」与
+/// 「PowerShell」。文件名恰好是各自的身份：`pwsh.exe` / `powershell.exe`。
+///
+/// 认不出的一律退回 `name`：自定义 Shell（用户手工填路径）本来就该用他起的名字，
+/// WSL 条目也是 —— 它的 name 是 "WSL · Ubuntu"，比干巴巴的 "WSL" 有用。
+pub fn session_label(profile: &ShellProfile) -> String {
+    let stem = Path::new(&profile.path)
+        .file_stem()
+        .map(|s| s.to_string_lossy().to_ascii_lowercase())
+        .unwrap_or_default();
+    match stem.as_str() {
+        "pwsh" => "PowerShell 7".to_string(),
+        "powershell" => "PowerShell".to_string(),
+        "cmd" => "cmd".to_string(),
+        "bash" => "Git Bash".to_string(),
+        _ => profile.name.clone(),
+    }
+}
+
 /// 清屏命令（按 Shell 类型区分）。
 pub fn clear_command(kind: &str) -> &'static str {
     match kind {
@@ -430,7 +643,6 @@ pub fn clear_command(kind: &str) -> &'static str {
 }
 
 use std::os::windows::process::CommandExt;
-
 /// `Command::creation_flags` 的糖：隐藏控制台窗口。
 trait NoWindow {
     fn creation_flags_no_window(&mut self) -> &mut Self;
@@ -513,7 +725,10 @@ pub fn parse_control_sequences(data: &[u8]) -> ParsedSequences {
             if !rest.trim().is_empty() {
                 out.titles.push(rest.to_string());
             }
-        } else if payload.starts_with("133;") {
+        } else if payload.starts_with("133;") || payload.starts_with("1337;") {
+            // **两个前缀都要放进来**：`1337;Cmd=` 与 `133;D` 共享 `133` 前缀，
+            // 只放行 `133;` 会让命令文本（`1337;`）在这里就被挡掉，永远到不了
+            // `parse_osc133` —— 表现为「历史一条都不记」，而错误点离成因很远。
             if let Some(mark) = parse_osc133(&payload) {
                 out.marks.push(mark);
             }
@@ -614,6 +829,83 @@ pub struct ParsedSequences {
     pub marks: Vec<CommandMark>,
 }
 
+/// 判断一个 OSC 0/2 标题是否是「Windows 可执行文件全路径」。
+///
+/// # 为什么需要过滤
+///
+/// `cmd.exe` 与 `powershell.exe` 启动时会把自己的可执行文件全路径设成控制台标题
+/// （`cmd.exe` 运行命令时还会追加 ` - <命令>`）。这个标题经 PTY 原样到达我们这里，
+/// 若照单全收，会话标签与状态栏就会显示成
+/// `C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe`。
+///
+/// Windows Terminal 与 VS Code 的终端同样要处理这件事（过滤这类标题，
+/// 把标签留给 shell 名或用户自定义标题）。
+///
+/// # 提权前缀
+///
+/// 以管理员身份运行时，PowerShell / cmd 会在标题前加一个本地化的前缀 ——
+/// 简体中文下是 `管理员: `（对应英文的 `Administrator: `）。**这是最容易漏掉的一种**：
+/// 不带前缀的判定看起来完全正确，只有提权会话暴露出问题，而日常又很少提权运行。
+/// 因此这里对「原串」与「剥掉前缀后的串」各判一次。
+///
+/// # 只认「绝对路径 + .exe/.com」，不做广义「像路径就丢」
+///
+/// WSL / Git Bash 上报的 `user@host: ~/dir`、`/home/foo` 这类标题是有用信息，
+/// 必须保留。判据因此收紧到三个条件同时成立：必须是绝对路径（盘符或 UNC）、
+/// 必须以 `.exe` / `.com` 结尾、可选的 ` - <命令>` 后缀不影响判定。
+pub fn osc_title_is_executable_path(title: &str) -> bool {
+    let t = title.trim();
+    if t.is_empty() {
+        return false;
+    }
+    if looks_like_exe_path(t) {
+        return true;
+    }
+    match strip_leading_label(t) {
+        Some(rest) => looks_like_exe_path(rest),
+        None => false,
+    }
+}
+
+/// 判定单一字符串本身是否为可执行文件全路径（不含提权前缀处理）。
+fn looks_like_exe_path(s: &str) -> bool {
+    // `C:\...\cmd.exe - ping 8.8.8.8` → 只看 ` - ` 之前的部分
+    let head = s.split(" - ").next().unwrap_or(s).trim();
+    let lower = head.to_ascii_lowercase();
+    if !lower.ends_with(".exe") && !lower.ends_with(".com") {
+        return false;
+    }
+    let b = head.as_bytes();
+    let drive_absolute = b.len() >= 3
+        && b[0].is_ascii_alphabetic()
+        && b[1] == b':'
+        && (b[2] == b'\\' || b[2] == b'/');
+    let unc = head.starts_with(r"\\") || head.starts_with("//");
+    drive_absolute || unc
+}
+
+/// 剥掉 `管理员:` / `Administrator:` 这类前缀标签，返回剩余部分。
+///
+/// 三重防护，避免把正常标题误当成长路径：
+/// - 分隔符前不能含路径分隔符（否则 `C:\...` 的盘号会被当成标签）
+/// - 标签本身要短：上限 16 字符是量出来的 —— `Administrator`（13）+ 余量，
+///   而正文式的标题（`user@host` 之外还有内容的）通常远超这个量级
+/// - 全角冒号 `：` 一并处理 —— 中文输入法下系统用的就是它
+fn strip_leading_label(s: &str) -> Option<&str> {
+    /// 前缀标签的字符数上限。取值依据见函数文档：英文的 `Administrator` 是 13。
+    const MAX_LABEL_CHARS: usize = 16;
+
+    let idx = s.find(|c| c == ':' || c == '：')?;
+    let head = &s[..idx];
+    if head.is_empty() || head.contains('\\') || head.contains('/') {
+        return None;
+    }
+    if head.chars().count() > MAX_LABEL_CHARS {
+        return None;
+    }
+    Some(s[idx..].trim_start_matches(|c| c == ':' || c == '：' || c == ' '))
+}
+
 /// 从 OSC 7 的载荷解析出本地路径。
 ///
 /// 载荷形如 `file://HOST/C:/Users/foo` 或 `file:///home/user`。
@@ -685,3 +977,253 @@ pub fn resolve_cwd(requested: &str) -> Option<String> {
         Some(default_cwd())
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// 解析器必须真的把 `1337;Cmd=` 认成 mark。
+    ///
+    /// 这条守着的是「标记被上游挡掉」的失效：`1337;Cmd=` 与 `133;D` 共享 `133`
+    /// 前缀，若只按 `133;` 放行，命令文本在进入 `parse_osc133` 之前就被丢掉了，
+    /// 结果是**历史一条都不记**，而现象（列表为空）与成因（解析分支没走到）之间
+    /// 隔着 shell hook、IPC、SQLite 三层，最难查。整条链路在此用真实字节流覆盖：
+    /// hook 输出的字节 → 解析出的标记序列。
+    #[test]
+    fn parse_command_text_and_end_mark_from_stream() {
+        let stream: Vec<u8> = b"\x1b]1337;Cmd=ls -la\x07\x1b]133;D;0\x07\x1b]7;file://host/C:/x\x07".to_vec();
+        let p = parse_control_sequences(&stream);
+        assert_eq!(
+            p.marks,
+            vec![
+                CommandMark::Command("ls -la".to_string()),
+                CommandMark::End(Some(0))
+            ],
+            "先 Cmd 后 D 的顺序必须原样解析出来"
+        );
+        // 同批里的 OSC 7 也要一起解析（三类序列共用一次扫描）
+        assert_eq!(p.cwds, vec!["C:\\x".to_string()]);
+        assert_eq!(p.consumed, stream.len(), "完整序列应全部被消费");
+    }
+
+    /// 序列被切在两批数据之间时必须保留尾部，等下一批拼接后再解析 ——
+    /// 否则 `Cmd` 与 `D` 各被截断一次，历史同样一条不记。
+    #[test]
+    fn parse_marks_across_three_batches() {
+        let whole: Vec<u8> = b"\x1b]1337;Cmd=echo hi\x07\x1b]133;D;1\x07".to_vec();
+        let (a, b) = whole.split_at(9);
+        let (b, c) = b.split_at(6);
+
+        let first = parse_control_sequences(a);
+        assert!(first.marks.is_empty(), "半个序列不该产出标记");
+        assert!(first.consumed < a.len(), "未闭合序列的尾部必须保留");
+        let mut carry = a[first.consumed..].to_vec();
+
+        carry.extend_from_slice(b);
+        let second = parse_control_sequences(&carry);
+        assert!(second.marks.is_empty());
+        carry.drain(..second.consumed);
+
+        carry.extend_from_slice(c);
+        let third = parse_control_sequences(&carry);
+        assert_eq!(
+            third.marks,
+            vec![
+                CommandMark::Command("echo hi".to_string()),
+                CommandMark::End(Some(1))
+            ]
+        );
+    }
+
+    /// 两个 hook 都必须**上报命令文本**，且 `Cmd` 必须**早于** `D`。
+    ///
+    /// 这两条是命令历史能否落库的全部条件：Rust 侧在 `D` 到达时用暂存的文本落库
+    /// （见 `session::CommandAccumulator`），缺了 `Cmd` 会一条都不记，顺序反了
+    /// 会永远记成上一条 —— 两种失效都只在运行时表现为「历史是空的 / 少一条」。
+    #[test]
+    fn prompt_hooks_report_command_before_end_mark() {
+        for (name, script) in [
+            ("PowerShell", powershell_prompt_hook()),
+            ("Git Bash", bash_prompt_hook()),
+        ] {
+            let cmd = script
+                .find("]1337;Cmd=")
+                .unwrap_or_else(|| panic!("{name} hook 未上报命令文本"));
+            let end = script
+                .find("]133;D")
+                .unwrap_or_else(|| panic!("{name} hook 未上报结束标记"));
+            assert!(cmd < end, "{name} hook 必须先发 Cmd 再发 D");
+        }
+    }
+
+    /// 注入脚本自身不得被当成用户命令上报（实测踩到过）。
+    ///
+    /// PowerShell 会把 `-EncodedCommand` 的脚本文本记进会话历史，于是注入后第一个
+    /// 提示符的 `Get-History -Count 1` 就是这段脚本 —— 表现为「新建会话就多出一条
+    /// 几百字符的命令」，且因去重键相同而不断累加 count。
+    #[test]
+    fn powershell_hook_skips_its_own_injected_script() {
+        let script = powershell_prompt_hook();
+        assert!(
+            script.contains("$global:__thingSkipNextPrompt = $true"),
+            "hook 必须标记「第一个提示符对应注入脚本自身」"
+        );
+        assert!(
+            script.contains("$global:__thingSkipNextPrompt = $false"),
+            "该标记必须在提示符函数里被消费（否则会一直跳过真实命令）"
+        );
+    }
+
+    /// 远端脚本：一行、纯 ASCII、无 `#` 注释、无裸 `\r`，且 bash/zsh 两个分支都在。
+    ///
+    /// 这些都是「静默失效」的来源：多行/裸 CR 会被远端 PTY 逐行或拦腰执行，
+    /// `#` 注释会吃掉它之后的所有内容（单行脚本里没有「下一行」可以续）。
+    #[test]
+    fn remote_script_is_single_line_ascii_with_both_branches() {
+        let s = remote_shell_integration_script();
+        assert!(!s.contains('\n'), "必须单行：多行下发会被远端 PTY 逐行执行");
+        assert!(!s.contains('\r'), "不能含裸 CR：ICRNL 会把它当行结束，脚本被切断");
+        assert!(!s.contains('#'), "单行脚本不能有 # 注释（会吃掉行尾其余内容）");
+        assert!(s.is_ascii(), "保持纯 ASCII，GBK 主机回显才不乱码");
+        assert!(s.contains("BASH_VERSION"), "缺少 bash 分支");
+        assert!(s.contains("ZSH_VERSION"), "缺少 zsh 分支");
+        assert!(
+            s.contains("declare -a"),
+            "bash 5.1+ 的 PROMPT_COMMAND 可能是数组，必须分流否则会覆盖用户钩子"
+        );
+        // 末尾清屏：抹掉注入行的双回显与登录 banner（3J 连滚动缓冲一起清）
+        assert!(
+            s.contains("[2J") && s.contains("[3J") && s.trim_end().ends_with("[H'"),
+            "末尾必须清屏，且要连滚动缓冲一起清（否则往上滚还能看到回显）"
+        );
+    }
+
+    /// 远端脚本必须「先 Cmd 后 D」，且**空命令文本时不发 Cmd**。
+    ///
+    /// 顺序反了会永远记成上一条；而 `CommandAccumulator` 的 Cmd 是覆盖语义，
+    /// 空文本会把上一条待落库的文本冲掉（HISTFILE=/dev/null 之类的降级路径）。
+    #[test]
+    fn remote_script_reports_command_before_end_mark() {
+        let s = remote_shell_integration_script();
+        let cmd = s.find("]1337;Cmd=").expect("必须上报命令文本");
+        let end = s.find("]133;D").expect("必须上报结束标记");
+        assert!(cmd < end, "必须先发 Cmd 再发 D");
+        let guard = s.find("[ -n \"$__cmd\" ]").expect("缺少空文本守卫");
+        assert!(guard < cmd, "空命令文本时不得发出 Cmd");
+    }
+
+    /// 注入命令自身不得被记成用户命令，且重复注入必须幂等。
+    #[test]
+    fn remote_script_skips_injected_line_and_is_idempotent() {
+        let s = remote_shell_integration_script();
+        assert!(s.contains("__thing_installed"), "缺少幂等守卫（重复注入会入库两次）");
+        assert!(
+            s.matches("__thing_skip=1").count() >= 2,
+            "两个分支都要标记「跳过首个提示符」（注入命令本身会进远端历史）"
+        );
+        assert!(s.contains("unset __thing_skip"), "标记必须被消费，否则会一直跳过真实命令");
+    }
+
+    /// 两个 bash hook 取命令文本时**只能跳过序号一个字段**。
+    ///
+    /// `read -r _ _ __cmd` 多跳一个字段：单字命令（`ls`）只剩「序号 + 命令」两个
+    /// 字段，`__cmd` 因此为空 → 不发 `Cmd` → 一条都不落库（实测：SSH 上跑了 `ls`，
+    /// 历史里什么都没有）；多字命令（`git status`）会丢掉第一个词。只有恰好两字的
+    /// 命令碰巧正确 —— 这是最容易被「看起来能跑」掩盖的一类错误。
+    #[test]
+    fn bash_hooks_skip_only_the_history_index() {
+        for (name, script) in [
+            ("本地 Git Bash hook", bash_prompt_hook()),
+            ("远端 hook", remote_shell_integration_script()),
+        ] {
+            assert!(
+                script.contains("read -r _ __cmd <<<"),
+                "{name}: 必须用 `read -r _ __cmd` 只跳过序号一个字段"
+            );
+            assert!(
+                !script.contains("read -r _ _ __cmd"),
+                "{name}: 多跳一个字段会让单字命令解析出空文本，历史一条都不记"
+            );
+        }
+    }
+
+    /// 提权会话的前缀是本模块最容易漏的一环：不带前缀的实现在日常（非提权）
+    /// 会话里表现完全正确，只有管理员运行时才暴露。
+    #[test]
+    fn osc_title_strips_elevation_prefix() {
+        assert!(osc_title_is_executable_path(
+            r"管理员: C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe"
+        ));
+        assert!(osc_title_is_executable_path(
+            r"Administrator: C:\Windows\System32\cmd.exe"
+        ));
+        // 全角冒号（中文输入法下系统用的就是它）与追加的当前命令
+        assert!(osc_title_is_executable_path(
+            r"管理员：C:\Windows\System32\cmd.exe - ping 8.8.8.8"
+        ));
+    }
+
+    #[test]
+    fn osc_title_filters_plain_exe_paths() {
+        assert!(osc_title_is_executable_path(r"C:\Windows\System32\cmd.exe"));
+        assert!(osc_title_is_executable_path(r"C:\Windows\System32\cmd.exe - pause"));
+        assert!(osc_title_is_executable_path(r"\\server\share\cmd.exe"));
+    }
+
+    /// 过滤必须「宁可少丢」：把远端 shell 上报的有效标题丢掉，比留下一个丑标题更糟。
+    #[test]
+    fn osc_title_keeps_meaningful_titles() {
+        assert!(!osc_title_is_executable_path("user@host: ~/projects"));
+        assert!(!osc_title_is_executable_path("/home/dev/app"));
+        assert!(!osc_title_is_executable_path("PowerShell"));
+        assert!(!osc_title_is_executable_path(""));
+        // 相对路径不是 shell 自报家门的形式
+        assert!(!osc_title_is_executable_path(r"bin\cmd.exe"));
+        // 非 Windows 可执行后缀（SSH 到 Linux 时远端标题常是这种）
+        assert!(!osc_title_is_executable_path("/usr/bin/htop"));
+    }
+
+    #[test]
+    fn session_label_uses_exe_stem() {
+        let powershell = ShellProfile::new(
+            "powershell",
+            "Windows PowerShell",
+            r"C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe",
+            "powershell",
+        );
+        assert_eq!(session_label(&powershell), "PowerShell");
+
+        let pwsh = ShellProfile::new(
+            "pwsh",
+            "PowerShell 7",
+            r"C:\Program Files\PowerShell\7\pwsh.exe",
+            "powershell",
+        );
+        assert_eq!(session_label(&pwsh), "PowerShell 7");
+
+        let cmd = ShellProfile::new("cmd", "命令提示符", r"C:\Windows\System32\cmd.exe", "cmd");
+        assert_eq!(session_label(&cmd), "cmd");
+    }
+
+    /// 认不出的可执行文件必须退回「设置里那个名字」：自定义 Shell 的名字是用户自己起的，
+    /// WSL 条目的名字里带着发行版（比 `wsl.exe` 有用）。
+    #[test]
+    fn session_label_falls_back_to_profile_name() {
+        let custom = ShellProfile::new("custom", "我的 Shell", r"C:\tools\myshell.exe", "bash");
+        assert_eq!(session_label(&custom), "我的 Shell");
+
+        let wsl = ShellProfile::new("wsl-ubuntu", "WSL · Ubuntu", "wsl.exe", "wsl");
+        assert_eq!(session_label(&wsl), "WSL · Ubuntu");
+    }
+
+    /// 历史默认名要同时覆盖两代取值，否则老 `settings.json` 里的名字永远不迁移。
+    #[test]
+    fn legacy_names_cover_settled_defaults() {
+        assert!(legacy_default_names("cmd").contains(&"命令提示符"));
+        assert!(legacy_default_names("cmd").contains(&"cmd"));
+        assert!(legacy_default_names("powershell").contains(&"Windows PowerShell"));
+        assert!(legacy_default_names("powershell").contains(&"PowerShell"));
+        // 未登记过的条目：用户改过的名字必须原样保留
+        assert!(legacy_default_names("pwsh").is_empty());
+    }
+}
diff --git a/src-tauri/src/terminal/ssh/mod.rs b/src-tauri/src/terminal/ssh/mod.rs
index d7aaa1a..08f28d0 100644
--- a/src-tauri/src/terminal/ssh/mod.rs
+++ b/src-tauri/src/terminal/ssh/mod.rs
@@ -30,6 +30,11 @@
 //!
 //! 防御 MITM 的基线：若 `check_server_key` 返回 `false` 是**默认路径**，
 //! 超时（120 秒）视为拒绝。用户没有任何回应就不继续握手。
+//!
+//! 上述行为受 `terminal::settings::SecuritySettings` 的三个开关约束（见该结构说明）：
+//! `host_key_policy`（唯一取值 `"ask"`，未知取值按 ask 处理）、
+//! `block_on_fingerprint_change`（关闭后「与记录不符」不再弹确认，改为自动接受
+//! 并写入变更历史）、`audit_log`（上述事件是否写入日志）。
 
 pub mod forward;
 pub mod hostkey;
@@ -50,6 +55,7 @@ use tokio::sync::oneshot;
 use super::session::{
     local_info, LocalSessionState, Session, SessionId, SessionInfo, SessionKind, SessionState,
 };
+use super::settings::SecuritySettings;
 use crate::secrets;
 use crate::terminal::events as EV;
 
@@ -202,13 +208,35 @@ impl client::Handler for SshHandler {
         let fingerprint = key_data.fingerprint(russh::keys::HashAlg::Sha256).to_string();
         let key_type = key_data.algorithm().to_string();
 
+        // 安全设置三项（策略 / 指纹变更阻断 / 安全事件日志）全部在这条路径上生效，
+        // 因此集中读一次。读不到（模块未初始化）时用默认值 ——
+        // 那是最严的一组：ask + 阻断 + 记录。
+        let sec = super::manager(&self.app)
+            .map(|m| m.settings().security)
+            .unwrap_or_default();
+
+        // 策略显式读取而不是写死（取值只有一个 "ask"，见 SecuritySettings 说明）：
+        // 让「策略」成为真正的驱动源，将来新增取值时分支已就位。
+        // 未知取值一律按 "ask" 处理，绝不放宽。
+        if sec.host_key_policy != "ask" {
+            self.audit(
+                &sec,
+                true,
+                &format!(
+                    "未知的主机密钥策略「{}」，按 ask（逐个核对指纹）处理",
+                    sec.host_key_policy
+                ),
+            );
+        }
+
         // 1. 与 known_hosts 比对
         let verdict = hostkey::verify(&self.host, self.port, &fingerprint, &key_type);
 
         match verdict {
             hostkey::Verdict::Trusted => {
-                crate::logger::log_info(
-                    "terminal",
+                self.audit(
+                    &sec,
+                    false,
                     &format!(
                         "主机密钥已信任：{}:{} {}",
                         self.host, self.port, fingerprint
@@ -218,13 +246,36 @@ impl client::Handler for SshHandler {
             }
             hostkey::Verdict::Changed { previous } => {
                 // 高危信号：可能是服务器重装，也可能是 MITM
-                crate::logger::log_warn(
-                    "terminal",
+                self.audit(
+                    &sec,
+                    true,
                     &format!(
                         "主机密钥发生变化：{}:{} 新指纹 {}（旧 {}）",
                         self.host, self.port, fingerprint, previous
                     ),
                 );
+
+                // 「指纹变更时阻断连接」关闭 → 不再弹确认，直接接受新指纹。
+                // 旧指纹会由 `hostkey::accept` 记入变更历史，因此事后仍可查出
+                // 「这台主机的密钥曾在何时被悄悄换过」——这是关掉阻断后
+                // 唯一的追溯手段，也是这条分支不能只做 `Ok(true)` 的原因。
+                if !sec.block_on_fingerprint_change {
+                    self.audit(
+                        &sec,
+                        true,
+                        &format!(
+                            "「指纹变更时阻断连接」已关闭，自动接受新指纹：{}:{} {}",
+                            self.host, self.port, fingerprint
+                        ),
+                    );
+                    if let Err(e) =
+                        hostkey::accept(&self.host, self.port, &fingerprint, &key_type)
+                    {
+                        crate::logger::log_error("terminal", &format!("更新 known_hosts 失败: {e}"));
+                    }
+                    return Ok(true);
+                }
+
                 let accepted = self
                     .ask_user(&key_type, &fingerprint, "changed", Some(previous))
                     .await;
@@ -239,6 +290,14 @@ impl client::Handler for SshHandler {
             hostkey::Verdict::Unknown => {
                 let accepted = self.ask_user(&key_type, &fingerprint, "unknown", None).await;
                 if accepted {
+                    self.audit(
+                        &sec,
+                        false,
+                        &format!(
+                            "首次连接并接受主机密钥：{}:{} {} {}",
+                            self.host, self.port, key_type, fingerprint
+                        ),
+                    );
                     if let Err(e) = hostkey::accept(&self.host, self.port, &fingerprint, &key_type)
                     {
                         crate::logger::log_error("terminal", &format!("新增 known_hosts 失败: {e}"));
@@ -293,6 +352,27 @@ impl client::Handler for SshHandler {
 }
 
 impl SshHandler {
+    /// 写一条主机密钥相关的**安全事件**日志（受 `security.auditLog` 控制）。
+    ///
+    /// # 为什么收敛成单入口
+    ///
+    /// 这条路径上共有五类事件（已信任 / 指纹变更 / 变更被接受 / 首次见到被接受 /
+    /// 阻断关闭时的自动接受），若每个分支各自判断开关，很容易漏掉一处 ——
+    /// 用户关掉「记录安全事件」却仍看到半数指纹事件，等同于开关坏了。
+    ///
+    /// 注意：**运维类错误（如写 known_hosts 失败）不走这里**，
+    /// 那类日志与「是否记录安全事件」无关，任何情况下都该留下。
+    fn audit(&self, sec: &SecuritySettings, warn: bool, msg: &str) {
+        if !sec.audit_log {
+            return;
+        }
+        if warn {
+            crate::logger::log_warn("terminal", msg);
+        } else {
+            crate::logger::log_info("terminal", msg);
+        }
+    }
+
     /// 请求前端确认主机密钥。
     ///
     /// 超时（或前端未响应）→ 返回 `false`（拒绝）。这是刻意的安全姿态：
@@ -392,6 +472,11 @@ pub struct SshConnectParams {
     pub keepalive_secs: u64,
     pub connect_timeout_ms: u64,
     pub startup_command: String,
+    /// 是否在远端注入 shell 集成 hook（命令历史 + cwd 跟踪）。
+    ///
+    /// 见 [`crate::terminal::shell::remote_shell_integration_script`]：不落盘，
+    /// 只在本次会话里改远端 shell 的 `PROMPT_COMMAND` / `precmd`。
+    pub inject_shell_integration: bool,
     /// 代理：`None` 表示直连。
     ///
     /// P0 不实现 SOCKS5 桥接，命令层在主机开了「走代理」时会填 `Some`，
@@ -655,6 +740,25 @@ impl SshSession {
             .await
             .map_err(|e| format!("启动远程 shell 失败: {e}"))?;
 
+        // ===== 注入远端 shell 集成 hook（命令历史 + cwd 跟踪）=====
+        //
+        // **必须排在 startup_command 之前**：startup_command 可能是 `htop` / `tail -f`
+        // 这类接管输入的程序，后发的 hook 会被当成那个程序的按键；先发还能让
+        // startup_command 里 `cd` 之后的第一个提示符就上报正确的 cwd。
+        //
+        // 连接期只能直接写 `channel`：会话的写队列（`inner.input_tx`）要到
+        // `spawn_reader` 里才建立，此刻还没有队列可入。
+        //
+        // 发送失败**不影响连接**：hook 只是辅助能力，丢了它最多表现为
+        // 「历史为空、cwd 不跟随」，不该让用户连不上机器。
+        if params.inject_shell_integration {
+            // 前导空格（HISTCONTROL=ignorespace 惯例，也顺带让我们的落库跳过它）
+            // + 换行（PTY 的行规程只在收到 NL 时才把这一行交给 shell），
+            // 这两个约定写在 `remote_shell_integration_script` 的文档里。
+            let hook = format!(" {}\n", super::shell::remote_shell_integration_script());
+            let _ = channel.data_bytes(hook.into_bytes()).await;
+        }
+
         // 执行登录后自动执行的命令
         if !params.startup_command.trim().is_empty() {
             let cmd = format!("{}\n", params.startup_command.trim());
@@ -1339,8 +1443,8 @@ impl Session for SshSession {
         self.emit_state();
     }
 
-    fn set_title(&self, title: &str) {
-        *self.state.title.lock().unwrap_or_else(|e| e.into_inner()) = title.to_string();
+    fn set_title_by_user(&self, title: &str) {
+        self.state.set_title_by_user(title);
     }
 
     fn set_detached(&self, detached: bool) {
diff --git a/src-tauri/src/terminal/window.rs b/src-tauri/src/terminal/window.rs
index 3887853..ed61f53 100644
--- a/src-tauri/src/terminal/window.rs
+++ b/src-tauri/src/terminal/window.rs
@@ -90,6 +90,12 @@ pub fn open_for_session(
     // 无边框窗口默认没有投影，加上以保持与系统窗口一致的层次感
     .shadow(true)
     .center()
+    // **隐藏创建**：窗口的初始底色是白的，而深浅色主题由前端读 localStorage 后
+    // 才应用 —— 直接显示会先闪一下纯白窗口再变深色（深色模式下尤其刺眼）。
+    // 因此这里先隐藏，由 TerminalWindow.vue 应用完主题（含 setBackgroundColor）
+    // 再 show + setFocus。同 translate/clipboard 弹窗的预创建做法。
+    .visible(false)
+    .focused(false)
     .build()
     .map_err(|e| format!("创建终端窗口失败: {e}"))?;
 
diff --git a/src/App.vue b/src/App.vue
index 8c9a15c..abdfe47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import TitleBar from '@/components/layout/TitleBar.vue'
 import Sidebar from '@/components/layout/Sidebar.vue'
 import ModuleContainer from '@/components/layout/ModuleContainer.vue'
 import NowPlayingDialog from '@/components/layout/NowPlayingDialog.vue'
+import TerminalQuickLaunch from '@/modules/terminal/TerminalQuickLaunch.vue'
 import { Toaster } from '@/components/ui/sonner'
 import { useAppStore } from '@/stores/appStore'
 import { useFeiniuStore } from '@/stores/feiniuStore'
@@ -299,6 +300,7 @@ onUnmounted(() => {
       </div>
     </div>
     <NowPlayingDialog />
+    <TerminalQuickLaunch />
     <Toaster position="bottom-right" rich-colors close-button :style="{ zIndex: 99999 }" />
   </TooltipProvider>
 </template>
diff --git a/src/components/common/ConfirmDialog.vue b/src/components/common/ConfirmDialog.vue
new file mode 100644
index 0000000..fff6b59
--- /dev/null
+++ b/src/components/common/ConfirmDialog.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+
+/**
+ * 破坏性 / 重要操作确认框 —— 规范 P4 的落地件。
+ *
+ * variant="danger" 用于不可逆动作（停止内核、删除记录、清空历史）。
+ * 不要用 window.confirm：它无法承载「这次操作具体影响什么」的说明。
+ */
+withDefaults(
+  defineProps<{
+    open: boolean
+    title: string
+    description?: string
+    confirmText?: string
+    cancelText?: string
+    variant?: 'default' | 'danger'
+    loading?: boolean
+  }>(),
+  { confirmText: '确认', cancelText: '取消', variant: 'default', loading: false }
+)
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  confirm: []
+}>()
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription v-if="description">{{ description }}</DialogDescription>
+      </DialogHeader>
+
+      <slot />
+
+      <DialogFooter>
+        <Button variant="outline" :disabled="loading" @click="emit('update:open', false)">
+          {{ cancelText }}
+        </Button>
+        <Button
+          :variant="variant === 'danger' ? 'destructive' : 'default'"
+          :disabled="loading"
+          @click="emit('confirm')"
+        >
+          {{ confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/src/components/common/CopyField.vue b/src/components/common/CopyField.vue
new file mode 100644
index 0000000..3101f5b
--- /dev/null
+++ b/src/components/common/CopyField.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { onUnmounted, ref } from 'vue'
+import { Check, Copy } from '@lucide/vue'
+import { toast } from 'vue-sonner'
+
+/**
+ * 可复制文本（路径、版本号、ID）。
+ * 复制后图标短暂切换为对勾 —— 比只弹 toast 的反馈更即时。
+ */
+const props = withDefaults(
+  defineProps<{
+    value: string
+    mono?: boolean
+    toastText?: string
+  }>(),
+  { mono: false, toastText: '已复制' }
+)
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.value)
+    copied.value = true
+    toast.success(props.toastText)
+    clearTimeout(timer)
+    timer = setTimeout(() => (copied.value = false), 1500)
+  } catch {
+    toast.error('复制失败')
+  }
+}
+
+onUnmounted(() => clearTimeout(timer))
+</script>
+
+<template>
+  <button
+    type="button"
+    class="group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-left transition-colors duration-150 outline-none hover:bg-hover focus-visible:ring-2 focus-visible:ring-ring/40"
+    :title="value"
+    @click="copy"
+  >
+    <span
+      class="truncate text-[13px] text-foreground"
+      :class="mono && 'font-mono tabular-nums'"
+    >
+      {{ value }}
+    </span>
+    <Check v-if="copied" class="size-3 shrink-0 text-success" :stroke-width="1.75" />
+    <Copy
+      v-else
+      class="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+      :stroke-width="1.75"
+    />
+  </button>
+</template>
diff --git a/src/components/common/DataListRow.vue b/src/components/common/DataListRow.vue
new file mode 100644
index 0000000..058acd1
--- /dev/null
+++ b/src/components/common/DataListRow.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * 列表行 —— 主从分栏（模式 B）左栏的条目。
+ * 选中态用 primary-soft，hover 态用中性 hover，两者不要混用同一个色。
+ */
+defineProps<{
+  title: string
+  subtitle?: string
+  active?: boolean
+}>()
+
+const emit = defineEmits<{ select: [] }>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-inset"
+    :class="active ? 'bg-primary-soft' : 'hover:bg-hover'"
+    @click="emit('select')"
+  >
+    <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+      <span
+        class="truncate text-[13px]"
+        :class="active ? 'font-medium text-primary-soft-text' : 'text-foreground'"
+      >
+        {{ title }}
+      </span>
+      <span v-if="subtitle" class="truncate text-xs text-muted-foreground">{{ subtitle }}</span>
+    </span>
+    <span v-if="$slots.trailing" class="shrink-0">
+      <slot name="trailing" />
+    </span>
+  </button>
+</template>
diff --git a/src/components/common/InfoGroup.vue b/src/components/common/InfoGroup.vue
new file mode 100644
index 0000000..bdf539d
--- /dev/null
+++ b/src/components/common/InfoGroup.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * 信息分组 —— 概览类页面的组织单元（规范 4.4「平铺分组」）。
+ *
+ * 用「组标题 + 1px 分隔线 + 键值区」替代卡片：
+ * - 去掉卡片外框与 16px 内边距，纵向密度提升约 40%
+ * - 彻底避开「两列卡片高度不齐 → 矮的那列下方留空」的问题
+ *
+ * 与 StatCard 的分工：StatCard 用于「每块内容量接近、需要视觉分组」的场景；
+ * InfoGroup 用于「键值快照」类概览页，密度优先。
+ */
+withDefaults(
+  defineProps<{
+    title: string
+    /** 键值区列数：1 = 单列（默认，一行一条、值有完整宽度）；2 = 双列（仅内容极短时用） */
+    columns?: 1 | 2
+    /** plain = 平铺无容器；card = 卡片形态（概览网格用，规范 4.4 D2 结构） */
+    variant?: 'plain' | 'card'
+  }>(),
+  { columns: 1, variant: 'plain' }
+)
+</script>
+
+<template>
+  <section
+    class="flex flex-col"
+    :class="variant === 'card' && 'rounded-lg border border-border bg-card p-4 shadow-sm'"
+  >
+    <header class="flex min-h-8 items-center justify-between gap-3">
+      <h2 class="text-sm font-semibold text-foreground">{{ title }}</h2>
+      <div v-if="$slots.action" class="flex shrink-0 items-center gap-1.5">
+        <slot name="action" />
+      </div>
+    </header>
+
+    <div class="mt-2 border-t border-divider" />
+
+    <div
+      class="grid gap-x-10 pt-2"
+      :class="columns === 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'"
+    >
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" class="pt-3">
+      <slot name="footer" />
+    </div>
+  </section>
+</template>
diff --git a/src/components/common/KeyValueRow.vue b/src/components/common/KeyValueRow.vue
new file mode 100644
index 0000000..f8e0757
--- /dev/null
+++ b/src/components/common/KeyValueRow.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * 键值行：左侧键名（次要色），右侧值（主文字色）。
+ *
+ * 这是「状态 / 当前版本 / 路径 / 模式」这类信息的统一承载方式，
+ * 此前各模块各自手写 flex + truncate，间距和对齐都不一致。
+ *
+ * 需要放徽章、开关、复制按钮等复杂内容时用默认插槽。
+ */
+withDefaults(
+  defineProps<{
+    label: string
+    value?: string | number
+    /** 值用等宽数字（版本号、ID、计数） */
+    mono?: boolean
+  }>(),
+  { mono: false }
+)
+</script>
+
+<template>
+  <div class="flex min-h-8 items-center justify-between gap-3 py-1.5">
+    <span class="shrink-0 text-[13px] text-fg-secondary">{{ label }}</span>
+    <span
+      class="min-w-0 truncate text-right text-[13px] text-foreground"
+      :class="mono && 'font-mono tabular-nums'"
+    >
+      <slot>{{ value }}</slot>
+    </span>
+  </div>
+</template>
diff --git a/src/components/common/MetricValue.vue b/src/components/common/MetricValue.vue
new file mode 100644
index 0000000..16f2cbf
--- /dev/null
+++ b/src/components/common/MetricValue.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * 关键数值（速率、容量、计数）。
+ *
+ * 数字必须 tabular-nums —— 否则高频刷新时宽度会抖动，整行跟着跳。
+ * trend 只用于「有方向语义」的数值（下载/上传、收入/支出），不要拿它当状态色用。
+ */
+const props = withDefaults(
+  defineProps<{
+    value: string | number
+    unit?: string
+    label?: string
+    trend?: 'down' | 'up'
+    size?: 'md' | 'lg'
+  }>(),
+  { size: 'md' }
+)
+
+const valueClass = computed(() => {
+  if (props.trend === 'down') return 'text-data-down'
+  if (props.trend === 'up') return 'text-data-up'
+  return 'text-foreground'
+})
+
+const sizeClass = computed(() =>
+  props.size === 'lg' ? 'text-[26px] leading-8' : 'text-[22px] leading-7'
+)
+</script>
+
+<template>
+  <div class="flex min-w-0 flex-col gap-1">
+    <span v-if="label" class="text-[11px] text-muted-foreground">{{ label }}</span>
+    <span class="flex items-baseline gap-1">
+      <span class="font-semibold tabular-nums" :class="[valueClass, sizeClass]">
+        {{ value }}
+      </span>
+      <span v-if="unit" class="text-xs text-muted-foreground">{{ unit }}</span>
+    </span>
+  </div>
+</template>
diff --git a/src/components/common/ModuleShell.vue b/src/components/common/ModuleShell.vue
new file mode 100644
index 0000000..6e3d55b
--- /dev/null
+++ b/src/components/common/ModuleShell.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+/**
+ * 模块外壳 —— 页面框架的唯一落地件，见 UI_DESIGN_SYSTEM.md 第 4 章。
+ *
+ * 它固定三件事，缺一就会出现「底部贴边」或「内容被裁」：
+ *   1. 高度约束链：h-full + min-h-0 一路传下去
+ *   2. 滚动归属：只有内容区滚动，Tab 行固定
+ *   3. padding 位置：加在滚动容器内部的 wrapper 上
+ *
+ * 模块自身不要再套 overflow 容器，否则会变成嵌套滚动。
+ */
+const props = withDefaults(
+  defineProps<{
+    /** 内置 Tab 行（可选）。需要 TabsContent 这类面板切换时，改用 #header 插槽自带 */
+    tabs?: { value: string; label: string; count?: number }[]
+    activeTab?: string
+    /** 内容区布局，见规范 4.2 */
+    layout?: 'grid' | 'split' | 'workbench' | 'settings' | 'plain'
+    /** 内容区是否带内边距；split 与全出血布局传 false */
+    padded?: boolean
+    /** 内容区最大宽度，超出居中 —— 避免大屏上卡片被拉得过宽 */
+    maxWidth?: number
+  }>(),
+  { layout: 'plain', padded: true, maxWidth: 0 }
+)
+
+const emit = defineEmits<{ 'update:activeTab': [value: string] }>()
+
+const LAYOUT_CLASS = {
+  grid: 'grid grid-cols-1 content-start gap-4 md:grid-cols-2',
+  workbench: 'flex flex-col gap-3',
+  settings: 'flex flex-col gap-6',
+  split: 'flex h-full min-h-0',
+  plain: 'flex flex-col gap-3',
+} as const
+
+/** split 需要撑满高度、由内部分栏各自滚动，外壳不能再包一层滚动 */
+const isFill = computed(() => props.layout === 'split')
+
+const innerClass = computed(() =>
+  cn(props.padded && !isFill.value && 'p-5', LAYOUT_CLASS[props.layout])
+)
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <!-- 固定层 #1：模块自定义头部（通常由 ModuleToolbar 填充） -->
+    <slot name="toolbar" />
+
+    <!-- 固定层 #2：Tab 行。自定义内容走 #header，否则用内置 tabs -->
+    <slot name="header">
+      <nav
+        v-if="tabs?.length"
+        class="flex h-12 shrink-0 items-center gap-1 border-b border-border px-5"
+        role="tablist"
+      >
+        <button
+          v-for="tab in tabs"
+          :key="tab.value"
+          type="button"
+          role="tab"
+          :aria-selected="activeTab === tab.value"
+          class="tab-underline relative inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-2 text-[13px] transition-colors duration-150 outline-none hover:bg-hover focus-visible:ring-2 focus-visible:ring-ring/40"
+          :class="
+            activeTab === tab.value
+              ? 'font-medium text-primary'
+              : 'text-fg-secondary hover:text-foreground'
+          "
+          @click="emit('update:activeTab', tab.value)"
+        >
+          {{ tab.label }}
+          <span v-if="tab.count" class="tabular-nums opacity-70">{{ tab.count }}</span>
+        </button>
+      </nav>
+    </slot>
+
+    <!-- split：撑满，由内部分栏自己滚 -->
+    <div v-if="isFill" class="min-h-0 flex-1">
+      <slot />
+    </div>
+
+    <!-- 其余：内容区滚动，padding 在内层 wrapper 上（否则底部 padding 会被内容盖掉） -->
+    <div v-else class="min-h-0 flex-1 overflow-y-auto">
+      <div
+        class="mx-auto w-full"
+        :class="innerClass"
+        :style="maxWidth ? { maxWidth: `${maxWidth}px` } : undefined"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/ModuleToolbar.vue b/src/components/common/ModuleToolbar.vue
new file mode 100644
index 0000000..85b99dc
--- /dev/null
+++ b/src/components/common/ModuleToolbar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/**
+ * 模块内容区顶部的操作条。
+ * 统一 48px 高、20px 左右内边距、底部 1px 分隔，避免各模块自定高度和间距。
+ */
+</script>
+
+<template>
+  <div class="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-5">
+    <div class="flex min-w-0 items-center gap-2">
+      <slot name="left" />
+    </div>
+    <div class="flex shrink-0 items-center gap-1.5">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/SectionHeader.vue b/src/components/common/SectionHeader.vue
new file mode 100644
index 0000000..2dd4112
--- /dev/null
+++ b/src/components/common/SectionHeader.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+/**
+ * 区块标题（h1 = 16px）。
+ * 用在内容区里做分组标题，区别于卡片内的 h2(14px)。
+ */
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="flex items-start justify-between gap-3">
+    <div class="flex min-w-0 flex-col gap-1">
+      <h2 class="truncate text-base font-semibold text-foreground">{{ title }}</h2>
+      <p v-if="description" class="text-xs text-muted-foreground">{{ description }}</p>
+    </div>
+    <div v-if="$slots.action" class="shrink-0">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/SegmentedNav.vue b/src/components/common/SegmentedNav.vue
index 3e758cf..aa6d6a8 100644
--- a/src/components/common/SegmentedNav.vue
+++ b/src/components/common/SegmentedNav.vue
@@ -33,11 +33,11 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
       type="button"
       role="tab"
       :aria-selected="modelValue === item.value"
-      class="flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[7px] px-3 py-1.5 text-[13px] transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+      class="flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-[13px] transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
       :class="
         modelValue === item.value
-          ? 'bg-background font-medium text-foreground shadow-sm'
-          : 'text-muted-foreground hover:text-foreground'
+          ? 'bg-primary-soft font-medium text-primary-soft-text'
+          : 'text-fg-secondary hover:bg-hover hover:text-foreground'
       "
       @click="emit('update:modelValue', item.value)"
     >
@@ -45,8 +45,12 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
       <span class="truncate">{{ item.label }}</span>
       <span
         v-if="item.count"
-        class="shrink-0 rounded-full bg-muted px-1.5 text-[10px] tabular-nums text-muted-foreground"
-        :class="modelValue === item.value ? 'bg-muted' : 'bg-background/70'"
+        class="shrink-0 rounded-full px-1.5 text-[10px] tabular-nums"
+        :class="
+          modelValue === item.value
+            ? 'bg-primary-soft-text/15 text-primary-soft-text'
+            : 'bg-card/70 text-fg-secondary'
+        "
       >
         {{ item.count }}
       </span>
diff --git a/src/components/common/SettingGroup.vue b/src/components/common/SettingGroup.vue
new file mode 100644
index 0000000..2eee390
--- /dev/null
+++ b/src/components/common/SettingGroup.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * 设置分组：标题 + 一组 SettingRow。
+ *
+ * # 卡片化承载
+ *
+ * 组内容用项目的 `Card` + `CardContent` 承载，而不是手写
+ * `rounded-lg border bg-card`：项目里「卡片」的统一口径是
+ * `rounded-xl + shadow-sm`（见 UI_DESIGN_SYSTEM 与各模块横幅），手写那份
+ * 既少了阴影、圆角也小一号 —— 结果是同一个设置页里，用 SettingGroup 的分组
+ * 没有阴影、直接用 Card 的分组（Shell / 快捷键）有阴影，看着像两套体系。
+ *
+ * 行的分隔（1px divider）与内边距留在这里：Card 默认的 `py-6 gap-6`
+ * 对「一叠设置行」来说过宽，用 `!py-0 !gap-0` 让行自己掌控垂直间距。
+ */
+import { Card, CardContent } from '@/components/ui/card'
+
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col gap-3">
+    <div class="flex min-w-0 flex-col gap-1">
+      <h2 class="text-sm font-semibold text-foreground">{{ title }}</h2>
+      <p v-if="description" class="text-xs text-muted-foreground">{{ description }}</p>
+    </div>
+    <Card class="!py-0 !gap-0">
+      <CardContent class="flex flex-col divide-y divide-divider px-4">
+        <slot />
+      </CardContent>
+    </Card>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/components/common/SettingRow.vue b/src/components/common/SettingRow.vue
new file mode 100644
index 0000000..091b30b
--- /dev/null
+++ b/src/components/common/SettingRow.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * 设置行：左标签（可带说明），右控件。
+ * 行高 44px，分组内由 SettingGroup 用 1px divider 分隔。
+ */
+withDefaults(
+  defineProps<{
+    label: string
+    description?: string
+    /** wide = 控件固定 200px，用于下拉/输入框对齐；auto = 自适应（开关、按钮） */
+    controlWidth?: 'auto' | 'wide'
+  }>(),
+  { controlWidth: 'auto' }
+)
+</script>
+
+<template>
+  <div class="flex min-h-11 items-center justify-between gap-4 py-2">
+    <div class="flex min-w-0 flex-col gap-0.5">
+      <span class="text-[13px] text-foreground">{{ label }}</span>
+      <span v-if="description" class="text-xs text-muted-foreground">{{ description }}</span>
+    </div>
+    <div class="shrink-0" :class="controlWidth === 'wide' && 'w-50'">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/StatCard.vue b/src/components/common/StatCard.vue
new file mode 100644
index 0000000..352242d
--- /dev/null
+++ b/src/components/common/StatCard.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+/**
+ * 键值/指标卡片 —— 概览类内容区（模式 A 卡片网格）的最小单元。
+ *
+ * 默认无阴影，靠 1px 描边与 --canvas 底色区分层级（规范 P7）。
+ * 卡片内边距 16px、标题与内容间距 12px，不要逐处覆盖。
+ */
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-sm">
+    <header class="flex items-center justify-between gap-2">
+      <h3 class="truncate text-sm font-semibold text-foreground">{{ title }}</h3>
+      <div v-if="$slots.action" class="shrink-0">
+        <slot name="action" />
+      </div>
+    </header>
+
+    <p v-if="description" class="text-xs text-muted-foreground">{{ description }}</p>
+
+    <div class="flex min-w-0 flex-col">
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/src/components/common/StateBlock.vue b/src/components/common/StateBlock.vue
new file mode 100644
index 0000000..b8aab99
--- /dev/null
+++ b/src/components/common/StateBlock.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Inbox, Loader2, ShieldOff, TriangleAlert } from '@lucide/vue'
+
+/**
+ * 四态占位块 —— 规范 P3 的落地件。
+ *
+ * 任何数据驱动的界面都必须能从这四态里选一个渲染，不允许留白。
+ * 使用方式：v-if 链上按 loading → error → empty → 内容 的顺序判断。
+ */
+const props = withDefaults(
+  defineProps<{
+    variant: 'loading' | 'empty' | 'error' | 'denied'
+    title?: string
+    description?: string
+    /** 占位高度，默认 140；放在卡片里可传更小值 */
+    minHeight?: number
+  }>(),
+  { minHeight: 140 }
+)
+
+const PRESET = {
+  loading: { icon: Loader2, title: '加载中…', spin: true },
+  empty: { icon: Inbox, title: '暂无数据', spin: false },
+  error: { icon: TriangleAlert, title: '加载失败', spin: false },
+  denied: { icon: ShieldOff, title: '无访问权限', spin: false },
+} as const
+
+const preset = computed(() => PRESET[props.variant])
+</script>
+
+<template>
+  <div
+    class="flex w-full flex-col items-center justify-center gap-2 px-6 text-center"
+    :style="{ minHeight: `${minHeight}px` }"
+  >
+    <component
+      :is="preset.icon"
+      class="size-8 shrink-0"
+      :class="[variant === 'error' ? 'text-danger' : 'text-fg-disabled', preset.spin && 'animate-spin']"
+      :stroke-width="1.75"
+    />
+    <p class="text-[13px] font-medium text-foreground">{{ title ?? preset.title }}</p>
+    <p v-if="description" class="max-w-xs text-xs text-muted-foreground">{{ description }}</p>
+    <div v-if="$slots.action" class="mt-1">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/common/StatusBadge.vue b/src/components/common/StatusBadge.vue
new file mode 100644
index 0000000..1b72546
--- /dev/null
+++ b/src/components/common/StatusBadge.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+/**
+ * 语义徽章。
+ *
+ * 三件套用法：底色取 --<state>-soft，文字取 --<state>-text。
+ * 禁止用实心状态色做徽章底（那是状态点的用法）。
+ */
+const props = withDefaults(
+  defineProps<{
+    variant?: 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'accent'
+    size?: 'sm' | 'md'
+  }>(),
+  { variant: 'neutral', size: 'md' }
+)
+
+const variantClass = computed(
+  () =>
+    ({
+      success: 'bg-success-soft text-success-text',
+      warning: 'bg-warning-soft text-warning-text',
+      danger: 'bg-danger-soft text-danger-text',
+      info: 'bg-info-soft text-info-text',
+      neutral: 'bg-neutral-soft text-neutral-text',
+      accent: 'bg-primary-soft text-primary-soft-text',
+    })[props.variant]
+)
+
+const sizeClass = computed(() =>
+  props.size === 'sm' ? 'h-5 px-2 text-[11px]' : 'h-6 px-2.5 text-xs'
+)
+</script>
+
+<template>
+  <span
+    class="inline-flex shrink-0 items-center gap-1 rounded-sm font-medium whitespace-nowrap"
+    :class="cn(variantClass, sizeClass)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/src/components/common/StatusDot.vue b/src/components/common/StatusDot.vue
new file mode 100644
index 0000000..63b9d31
--- /dev/null
+++ b/src/components/common/StatusDot.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * 状态点 + 文字。
+ *
+ * 状态色只表达「系统状态」，不得用在可点击元素上（规范 P1）——
+ * 需要表达「可点击」时用 --primary，需要表达状态时用这里。
+ */
+const props = withDefaults(
+  defineProps<{
+    state?: 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+    label?: string
+    /** 持续态（运行中 / 连接中）才开呼吸动效；瞬时状态不要开 */
+    pulse?: boolean
+  }>(),
+  { state: 'neutral', pulse: false }
+)
+
+const dotClass = computed(
+  () =>
+    ({
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+      neutral: 'bg-neutral',
+    })[props.state]
+)
+</script>
+
+<template>
+  <span class="inline-flex min-w-0 items-center gap-1.5">
+    <span
+      class="size-2 shrink-0 rounded-full"
+      :class="[dotClass, pulse && 'status-dot-pulse']"
+      aria-hidden="true"
+    />
+    <span v-if="label" class="truncate text-[13px] text-foreground">{{ label }}</span>
+  </span>
+</template>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 0000000..a904c97
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1,25 @@
+/**
+ * 业务组件层 —— 规范见 UI_DESIGN_SYSTEM.md 第 5 章。
+ *
+ * 这一层负责「把 token 组装成模块能直接用的结构」。
+ * 模块内不得再手写状态点、徽章、卡片标题、键值行、四态占位等结构，
+ * 一律从这里取 —— 否则又会退回各写各的状态。
+ */
+
+export { default as ConfirmDialog } from './ConfirmDialog.vue'
+export { default as CopyField } from './CopyField.vue'
+export { default as DataListRow } from './DataListRow.vue'
+export { default as InfoGroup } from './InfoGroup.vue'
+export { default as KeyValueRow } from './KeyValueRow.vue'
+export { default as MetricValue } from './MetricValue.vue'
+export { default as ModuleShell } from './ModuleShell.vue'
+export { default as ModuleToolbar } from './ModuleToolbar.vue'
+export { default as SectionHeader } from './SectionHeader.vue'
+export { default as SettingGroup } from './SettingGroup.vue'
+export { default as SettingRow } from './SettingRow.vue'
+export { default as StatCard } from './StatCard.vue'
+export { default as StateBlock } from './StateBlock.vue'
+export { default as StatusBadge } from './StatusBadge.vue'
+export { default as StatusDot } from './StatusDot.vue'
+
+export { default as SegmentedNav } from './SegmentedNav.vue'
diff --git a/src/components/layout/PageToolbar.vue b/src/components/layout/PageToolbar.vue
new file mode 100644
index 0000000..f46f0e5
--- /dev/null
+++ b/src/components/layout/PageToolbar.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * 模块内子页的工具条（页壳的头部）。
+ *
+ * # 它替代了什么
+ *
+ * 此前终端模块的六个子页各自套一层 `rounded-lg border bg-background` 的容器，
+ * 容器顶端再放一条 `h-11 + border-b` 的标题栏 —— 合起来读作「模块里嵌了一个
+ * 独立窗口」。而其它模块（proxy / monitor / music / clipboard / downloader）
+ * 的页内一致是「一条漂浮的工具条 + 直接铺开的内容」，没有任何容器边框。
+ *
+ * 这个组件就是那条漂浮工具条：**无边框、无底部分隔线、无内边距**，
+ * 靠 `mb-3` 与下方内容留出间距。各页只需保证自己的内容区是
+ * `flex-1 min-h-0`，整页的层次就与其它模块一致。
+ *
+ * # 为什么标题不删
+ *
+ * 模块级 Tabs 已经写了「主机」「凭据」，页内再写一遍标题看似冗余，
+ * 但合并页（凭据 = 密钥 + 已知主机）里工具条还承载分区开关与计数，
+ * 且这些页面会被全局搜索直接跳到 —— 标题是「我落在哪一页」的确认。
+ * 保留标题、去掉边框，才是这次改动要的效果。
+ *
+ * # 用法
+ *
+ * ```vue
+ * <div class="flex flex-col h-full overflow-hidden">
+ *   <PageToolbar :icon="Globe" title="SSH 主机" :meta="`共 ${n} 台`">
+ *     <Button size="sm">新建主机</Button>   <!-- 默认插槽 = 右侧动作区 -->
+ *   </PageToolbar>
+ *   <ScrollArea class="flex-1 min-h-0">…</ScrollArea>
+ * </div>
+ * ```
+ *
+ * 需要放在标题与动作之间的信息（如历史页的筛选摘要、分区开关）用 `info` 具名插槽。
+ */
+import type { Component } from 'vue'
+
+defineProps<{
+  /** lucide 图标组件 */
+  icon: Component
+  title: string
+  /** 标题右侧的次要信息（数量、状态等）。为空则不渲染 */
+  meta?: string
+}>()
+</script>
+
+<template>
+  <div class="shrink-0 flex items-center gap-2 mb-3 min-h-8">
+    <component :is="icon" class="size-4 text-muted-foreground shrink-0" />
+    <h3 class="text-sm font-medium shrink-0">{{ title }}</h3>
+    <span v-if="meta" class="text-xs text-muted-foreground shrink-0">{{ meta }}</span>
+    <slot name="info" />
+    <div class="flex-1 min-w-0" />
+    <slot />
+  </div>
+</template>
diff --git a/src/components/layout/TitleBar.vue b/src/components/layout/TitleBar.vue
index 4eaf406..cdc4c4c 100644
--- a/src/components/layout/TitleBar.vue
+++ b/src/components/layout/TitleBar.vue
@@ -328,7 +328,7 @@ const handleBlur = () => {
               :class="
                 tabsStore.activeTab === tab.value
                   ? 'bg-primary text-primary-foreground'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60'
+                  : 'text-muted-foreground hover:bg-primary-soft hover:text-primary-soft-text'
               "
               @click="tabsStore.setActiveTab(tab.value)"
               @mousedown.stop
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 0a62178..148afc1 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -3,31 +3,41 @@ import { cva } from "class-variance-authority"
 
 export { default as Button } from "./Button.vue"
 
+/**
+ * 按钮变体 —— 约束见 UI_DESIGN_SYSTEM.md 第 5.2 节
+ *
+ * hover 语义（这里曾经是界面最大的观感问题）：
+ *   主按钮  → 底色变深（--primary-hover），不用透明度方案（/90 在深色上方向是反的）
+ *   次按钮  → 中性加深（--hover）
+ *   幽灵按钮 → 带强调色的淡底（--primary-soft），让"可点击"一眼可见
+ *
+ * 尺寸统一 28 / 34 / 40。基础组件是实现尺寸标尺的地方，允许等值任意值；
+ * 业务代码不得照抄这种写法。
+ */
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[background-color,border-color,color,box-shadow,transform] duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        /** 主操作：同屏仅允许一个 */
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+        /** 破坏性操作：必须配合 ConfirmDialog */
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger/30",
+        /** 次操作：描边卡片底，中性 hover */
+        outline: "border border-border-strong bg-card text-foreground hover:bg-hover active:bg-active",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-hover active:bg-active",
+        /** 幽灵操作：工具栏、图标按钮。hover 带强调色 */
+        ghost: "text-fg-secondary hover:bg-primary-soft hover:text-primary-soft-text",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "xs": "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "default": "h-[34px] px-3.5 py-2 has-[>svg]:px-3",
+        "xs": "h-6 gap-1 rounded-sm px-2 text-[11px] has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        "sm": "h-7 gap-1.5 rounded-md px-2.5 text-xs has-[>svg]:px-2",
         "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
+        "icon": "size-[34px]",
+        "icon-xs": "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7",
         "icon-lg": "size-10",
       },
     },
diff --git a/src/components/ui/calendar/CalendarHeading.vue b/src/components/ui/calendar/CalendarHeading.vue
index 5a11c12..587244d 100644
--- a/src/components/ui/calendar/CalendarHeading.vue
+++ b/src/components/ui/calendar/CalendarHeading.vue
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils"
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
 
 defineSlots<{
-  default: (props: { headingValue: string }) => any
+  default: (props: { headingValue: string }) => unknown
 }>()
 
 const delegatedProps = reactiveOmit(props, "class")
diff --git a/src/components/ui/switch/Switch.vue b/src/components/ui/switch/Switch.vue
index af78ad1..0f46f09 100644
--- a/src/components/ui/switch/Switch.vue
+++ b/src/components/ui/switch/Switch.vue
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="switch"
     v-bind="forwarded"
     :class="cn(
-      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer hover:data-[state=checked]:bg-primary/90 hover:data-[state=unchecked]:bg-input/70 active:scale-95',
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/40 inline-flex h-[18px] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent outline-none transition-colors focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 hover:data-[state=checked]:bg-primary-hover hover:data-[state=unchecked]:bg-active',
       props.class,
     )"
   >
diff --git a/src/components/ui/tabs/TabsTrigger.vue b/src/components/ui/tabs/TabsTrigger.vue
index 6f34676..573be8b 100644
--- a/src/components/ui/tabs/TabsTrigger.vue
+++ b/src/components/ui/tabs/TabsTrigger.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,background-color,box-shadow] duration-200 ease-out focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'tab-underline relative text-fg-secondary hover:bg-hover hover:text-foreground data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:hover:bg-transparent focus-visible:ring-ring/40 inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border-0 px-3 py-2 text-[13px] whitespace-nowrap transition-colors duration-150 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
     v-bind="forwardedProps"
diff --git a/src/composables/useSessionStream.ts b/src/composables/useSessionStream.ts
index 4c78ca4..4a55e43 100644
--- a/src/composables/useSessionStream.ts
+++ b/src/composables/useSessionStream.ts
@@ -3,6 +3,7 @@ import { useTerminalStore } from '@/stores/terminalStore'
 import { createLogger } from '@/lib/logger'
 import type { ShortcutBinding, TerminalSettings } from '@/types/terminal'
 import { TERMINAL_ACTIONS } from '@/lib/terminalActions'
+import { appIsDark, effectiveThemeName } from '@/lib/terminalThemes'
 
 const logger = createLogger('terminal')
 
@@ -32,19 +33,10 @@ export function useTerminalStream(options?: { fixedSessionId?: Ref<string | null
   /** 分屏：当前标签内并列展示的会话（长度为 1 时即普通单面板） */
   const panes = ref<Array<{ id: string; sessionId: string }>>([])
 
-  /**
-   * 当前打开的浮层。
-   *
-   * `snippets` 与 `search` 与其余项的区别：它们需要知道「当前作用于哪个会话」，
-   * 而不只是一个全局面板。因此 TerminalModule 渲染它们时会把 activeSession
-   * 一并传下去 —— 片段面板据此过滤出对当前 shell 可用的片段。
-   */
-  const overlay = ref<
-    'none' | 'settings' | 'hosts' | 'keys' | 'knownHosts' | 'search' | 'snippets' | 'history'
-  >('none')
-
-  /** 搜索结果统计（供搜索栏显示「第 n 项」） */
-  const searchTerm = ref('')
+  // 这里曾有一份 `overlay`（当前打开的浮层）与 `searchTerm` 状态：模块 Tabs 与
+  // 控制栏浮层接管导航之后，它们既没有被写入也没有被读取，是「内嵌独立应用」
+  // 时期的残留，2026-09-22 清理。浮层开合现在分别归属模块根（tab）与
+  // `modules/terminal/useRecordPopovers`（控制栏上的历史/片段）。
 
   // ===== 标签 =====
 
@@ -115,32 +107,36 @@ export function useTerminalStream(options?: { fixedSessionId?: Ref<string | null
         : [sessionId]
     const groupSet = new Set(group)
 
-    try {
-      // 只要组里有任意一个仍活跃就要确认（而不是只看被点的那一个）
-      let anyAlive = false
-      for (const id of group) {
-        try {
-          if (await store.sessionAlive(id)) {
-            anyAlive = true
-            break
+    // 「关闭运行中会话前确认」关闭时直接关：连 alive 查询都不发
+    // （那是一次 IPC + 后端进程存活探测，用户已经明确表示不要这道确认）
+    if (store.settings?.layout.confirmCloseRunning ?? true) {
+      try {
+        // 只要组里有任意一个仍活跃就要确认（而不是只看被点的那一个）
+        let anyAlive = false
+        for (const id of group) {
+          try {
+            if (await store.sessionAlive(id)) {
+              anyAlive = true
+              break
+            }
+          } catch {
+            /* 单个查询失败按不活跃处理，下面还有整体兜底 */
           }
-        } catch {
-          /* 单个查询失败按不活跃处理，下面还有整体兜底 */
         }
+        if (anyAlive) {
+          const info = store.sessionById(sessionId)
+          const extra = group.length > 1 ? `（该标签含 ${group.length} 个分屏面板）` : ''
+          const ok = await requestConfirm(
+            sessionId,
+            info?.title || '会话',
+            `该会话中可能有正在运行的任务${extra}。关闭后无法恢复，确定继续？`
+          )
+          if (!ok) return
+        }
+      } catch (e) {
+        // 会话可能已经断开（alive 查询本身失败）——此时无需确认，直接关
+        logger.warn(`查询会话存活状态失败，直接关闭：${String(e)}`)
       }
-      if (anyAlive) {
-        const info = store.sessionById(sessionId)
-        const extra = group.length > 1 ? `（该标签含 ${group.length} 个分屏面板）` : ''
-        const ok = await requestConfirm(
-          sessionId,
-          info?.title || '会话',
-          `该会话中可能有正在运行的任务${extra}。关闭后无法恢复，确定继续？`
-        )
-        if (!ok) return
-      }
-    } catch (e) {
-      // 会话可能已经断开（alive 查询本身失败）——此时无需确认，直接关
-      logger.warn(`查询会话存活状态失败，直接关闭：${String(e)}`)
     }
 
     for (const id of group) {
@@ -195,13 +191,33 @@ export function useTerminalStream(options?: { fixedSessionId?: Ref<string | null
 
   // ===== 新建会话 =====
 
-  /** 新建本地会话（用设置里的默认 shell） */
-  async function newLocalTab(cwd?: string) {
-    const shellId = store.settings?.lastShellId || store.shells.find(s => s.enabled)?.id
+  /**
+   * 新建本地会话。
+   *
+   * `shellId` 为空时用「上次使用的 shell」，其次第一个启用项 —— 这与
+   * 「新建」（一个按钮）的预期一致：不动脑子点下去就该起来最常用的那个。
+   * 传入具体 id 的场合是终端页的「新建」下拉（用户明确选了某个 shell）。
+   */
+  async function newLocalTab(opts: { shellId?: string; cwd?: string } = {}) {
+    const shellId =
+      opts.shellId ||
+      store.settings?.lastShellId ||
+      store.shells.find(s => s.enabled)?.id
     if (!shellId) {
       logger.error('没有可用的 Shell，无法新建会话')
       return null
     }
+
+    // 「新会话继承当前目录」：显式传了 cwd 就以调用方为准；
+    // 否则在开启该项时取**当前激活会话**的 cwd。
+    // 只对本地会话生效 —— SSH 会话的 cwd 是远端路径，本地 shell 起不来
+    // （Windows 上 `/home/ops` 会被当成非法目录，会话直接失败）。
+    let cwd = opts.cwd
+    if (cwd === undefined && (store.settings?.layout.inheritCwd ?? false)) {
+      const cur = activeSession.value
+      if (cur?.kind === 'local' && cur.cwd) cwd = cur.cwd
+    }
+
     try {
       // 尺寸给一个合理初值：真实值由 xterm 的 fit 在挂载后立即上报，
       // 这里的作用只是让 PTY 在首帧有正确的行列数，避免 shell 先按 80x24 画一遍提示符再重排
@@ -385,12 +401,19 @@ export function useTerminalStream(options?: { fixedSessionId?: Ref<string | null
     fontOverride.value = null
   }
 
-  /** 生效的外观（把字号覆盖合并进去，供 TerminalPane 使用） */
+  /** 生效的外观（把字号覆盖 + 「跟随应用主题」解析后的配色一起并进去，供 TerminalPane 使用） */
   const effectiveAppearance = computed(() => {
     const a = store.settings?.appearance
     if (!a) return null
-    if (fontOverride.value === null) return a
-    return { ...a, fontSize: fontOverride.value }
+    // 「跟随应用主题」要跟着应用深浅实时变：开了就用响应式的 appIsDark，
+    // 关了就只按此刻的深浅解析一次（此后应用改深浅不再带着终端变，见字段说明）。
+    const theme = effectiveThemeName(
+      a.theme,
+      a.followAppTheme,
+      a.followAppTheme ? appIsDark.value : document.documentElement.classList.contains('dark')
+    )
+    if (fontOverride.value === null) return { ...a, theme }
+    return { ...a, theme, fontSize: fontOverride.value }
   })
 
   // ===== 快捷键 =====
@@ -469,8 +492,6 @@ export function useTerminalStream(options?: { fixedSessionId?: Ref<string | null
     activeSession,
     orderedSessions,
     panes,
-    overlay,
-    searchTerm,
     fontOverride,
     effectiveAppearance,
     confirmDialog,
diff --git a/src/composables/useXterm.ts b/src/composables/useXterm.ts
index ab511dc..af08c68 100644
--- a/src/composables/useXterm.ts
+++ b/src/composables/useXterm.ts
@@ -6,7 +6,7 @@ import { WebLinksAddon } from '@xterm/addon-web-links'
 import { Unicode11Addon } from '@xterm/addon-unicode11'
 import { WebglAddon } from '@xterm/addon-webgl'
 import { useTerminalStore } from '@/stores/terminalStore'
-import { resolveTheme } from '@/lib/terminalThemes'
+import { resolveTheme, themeWithOpacity } from '@/lib/terminalThemes'
 import { createLogger } from '@/lib/logger'
 import type { AppearanceSettings } from '@/types/terminal'
 
@@ -139,6 +139,10 @@ export function useXterm(options: UseXtermOptions) {
       // ——这是 xterm 的标准做法，Ctrl+拖选仍能强制进入选择模式
       macOptionIsMeta: false,
       allowProposedApi: true,
+      // 允许透明背景（「背景不透明度」设置项依赖它）。只能在构造时设定：
+      // 它决定渲染器是否按 alpha 混合，运行中改会被 xterm 忽略。
+      // 代价是渲染稍慢，因此不透明度 < 100 时还会关掉 WebGL（见 ensureRenderer）。
+      allowTransparency: true,
       // 转换宽字符（中日韩）的正确显示；配合 unicode11 插件使用 Unicode 11 宽度表
       convertEol: false
     })
@@ -168,24 +172,8 @@ export function useXterm(options: UseXtermOptions) {
       void document.fonts.ready.then(() => safeFit())
     }
 
-    // WebGL 渲染：大吞吐场景（`cat` 大文件、编译日志）下 CPU 占用远低于 canvas。
-    // 但它在部分虚拟机 / 远程桌面 / 老显卡上会黑屏，所以**必须可回退**：
-    // 加载失败就留在默认的 DOM 渲染器，功能不受影响，只是性能差一些。
-    if (app?.gpuRendering !== false) {
-      try {
-        const webgl = new WebglAddon()
-        // 上下文丢失（切换显卡、系统休眠唤醒）时必须丢弃，否则画面永久卡死
-        webgl.onContextLoss(() => {
-          logger.warn('WebGL 上下文丢失，回退到默认渲染器')
-          webgl.dispose()
-          webglAddon.value = null
-        })
-        t.loadAddon(webgl)
-        webglAddon.value = webgl
-      } catch (e) {
-        logger.warn(`WebGL 渲染不可用，回退到默认渲染器：${String(e)}`)
-      }
-    }
+    // WebGL 渲染：见 ensureRenderer（按 GPU 开关 + 不透明度决定是否启用）
+    ensureRenderer(app)
 
     // 用户输入 → Rust（base64 保字节完整性）
     t.onData(data => {
@@ -318,22 +306,61 @@ export function useXterm(options: UseXtermOptions) {
     })
   }
 
-  // ===== 外观热更新 =====
+  // ===== 渲染器与外观热更新 =====
 
-  function applyAppearance(app: AppearanceSettings | null) {
-    const t = term.value
-    if (!t || !app) return
-    t.options.theme = resolveTheme(app.theme)
-    t.options.fontFamily = app.fontFamily || 'Cascadia Mono, Consolas, monospace'
-    t.options.fontSize = app.fontSize || 14
-    t.options.lineHeight = app.lineHeight || 1.2
-    t.options.letterSpacing = app.letterSpacing || 0
-    t.options.cursorBlink = app.cursorBlink ?? true
-    t.options.cursorStyle = normalizeCursorStyle(app.cursorStyle)
-    t.options.scrollback = app.scrollback || 5000
-    // 字体变化会改变字符宽高 → 行列数变了 → 必须重新 fit 并上报
-    requestAnimationFrame(() => safeFit())
+/**
+ * 按需启用 / 关闭 WebGL 渲染。
+ *
+ * 两个条件缺一不可：
+ * - `gpuRendering` 开关（默认开）：WebGL 在大吞吐场景（`cat` 大文件、编译日志）
+ *   下 CPU 占用远低于 canvas，但它在少数虚拟机 / 远程桌面 / 老显卡上会黑屏，
+ *   所以**必须可回退**：加载失败就留在默认渲染器，功能不受影响。
+ * - **不透明度 100%**：WebGL 渲染器不支持透明背景（`allowTransparency` 只被
+ *   DOM/canvas 渲染器认），半透明时继续用它会让「背景不透明度」看起来完全没反应。
+ *   于是拉低不透明度时主动丢弃 WebGL，回到支持 alpha 的渲染器。
+ */
+function ensureRenderer(app: AppearanceSettings | null) {
+  const t = term.value
+  if (!t) return
+
+  const wantWebgl = app?.gpuRendering !== false && (app?.opacity ?? 100) >= 100
+
+  if (wantWebgl && !webglAddon.value) {
+    try {
+      const webgl = new WebglAddon()
+      // 上下文丢失（切换显卡、系统休眠唤醒）时必须丢弃，否则画面永久卡死
+      webgl.onContextLoss(() => {
+        logger.warn('WebGL 上下文丢失，回退到默认渲染器')
+        webgl.dispose()
+        webglAddon.value = null
+      })
+      t.loadAddon(webgl)
+      webglAddon.value = webgl
+    } catch (e) {
+      logger.warn(`WebGL 渲染不可用，回退到默认渲染器：${String(e)}`)
+    }
+  } else if (!wantWebgl && webglAddon.value) {
+    webglAddon.value.dispose()
+    webglAddon.value = null
   }
+}
+
+function applyAppearance(app: AppearanceSettings | null) {
+  const t = term.value
+  if (!t || !app) return
+  t.options.theme = themeWithOpacity(resolveTheme(app.theme), app.opacity ?? 100)
+  t.options.fontFamily = app.fontFamily || 'Cascadia Mono, Consolas, monospace'
+  t.options.fontSize = app.fontSize || 14
+  t.options.lineHeight = app.lineHeight || 1.2
+  t.options.letterSpacing = app.letterSpacing || 0
+  t.options.cursorBlink = app.cursorBlink ?? true
+  t.options.cursorStyle = normalizeCursorStyle(app.cursorStyle)
+  t.options.scrollback = app.scrollback || 5000
+  // 不透明度或 GPU 开关变了都可能要换渲染器（半透明必须离开 WebGL）
+  ensureRenderer(app)
+  // 字体变化会改变字符宽高 → 行列数变了 → 必须重新 fit 并上报
+  requestAnimationFrame(() => safeFit())
+}
 
   // ===== 监视 =====
 
diff --git a/src/lib/bindings.ts b/src/lib/bindings.ts
index a698149..b4aa617 100644
--- a/src/lib/bindings.ts
+++ b/src/lib/bindings.ts
@@ -557,7 +557,15 @@ export const commands = {
 	terminalWrite: (sessionId: string, data: string) => __TAURI_INVOKE<null>("terminal_write", { sessionId, data }),
 	/**  通知会话尺寸变化。 */
 	terminalResize: (sessionId: string, cols: number, rows: number) => __TAURI_INVOKE<null>("terminal_resize", { sessionId, cols, rows }),
-	/**  重命名会话（同时更新标签与独立窗口标题）。 */
+	/**
+	 *  重命名会话（同时更新标签与独立窗口标题）。
+	 * 
+	 *  # 为什么用 `set_title_by_user` 而不是直接写 `title`
+	 * 
+	 *  重命名会把标题**锁定**，此后 shell 通过 OSC 0/2 上报的标题一律被忽略。
+	 *  不锁的话，用户重命名后下一条提示符就把名字覆盖回去了 ——
+	 *  表现为「重命名无效」，且只在有输出时才复现，很难归因。
+	 */
 	terminalRenameSession: (sessionId: string, title: string) => __TAURI_INVOKE<null>("terminal_rename_session", { sessionId, title }),
 	/**  在独立窗口中打开会话。 */
 	terminalDetachSession: (sessionId: string) => __TAURI_INVOKE<null>("terminal_detach_session", { sessionId }),
@@ -659,6 +667,10 @@ export const commands = {
 	 * 
 	 *  由前端在用户点击「接受」/「拒绝」后调用。会话侧的握手正在阻塞等待这个回传，
 	 *  因此超时（120 秒）后会视为拒绝。
+	 * 
+	 *  `app` 只用于安全事件日志（`security.auditLog`）——用户的每个决定都要留痕：
+	 *  「谁在什么时候接受了新指纹」是事后审计里最关键的一条。specta 会把
+	 *  `AppHandle` 参数从生成的 JS 签名里剔除，因此前端调用方式不变。
 	 */
 	terminalConfirmHostKey: (sessionId: string, accept: boolean, host: string, port: number, keyType: string, fingerprint: string) => __TAURI_INVOKE<null>("terminal_confirm_host_key", { sessionId, accept, host, port, keyType, fingerprint }),
 	/**  分页 + 搜索命令历史。 */
@@ -1310,10 +1322,6 @@ export type LayoutSettings = {
 	confirmCloseRunning?: boolean,
 	/**  新建标签页时是否继承当前会话的工作目录 */
 	inheritCwd?: boolean,
-	/**  侧栏默认是否展开 */
-	sidebarOpen?: boolean,
-	/**  侧栏宽度（像素） */
-	sidebarWidth?: number,
 	/**  是否显示底部状态栏 */
 	showStatusBar?: boolean,
 	/**
@@ -1564,14 +1572,30 @@ export type SecuritySettings = {
 	 * 
 	 *  **不提供 "auto-accept" 选项**：TOFU 静默接受是 MITM 的入口，
 	 *  属于代码层不该给用户的开关。
+	 * 
+	 *  读取方（`ssh::SshHandler::check_server_key`）**显式读取本字段而不是写死**：
+	 *  唯一支持的取值是 `"ask"`，其它取值（配置文件被手工改过）一律按 `"ask"`
+	 *  处理 —— 安全开关的失败方向必须朝更严的一侧，绝不能因为出现了一个
+	 *  没见过的字符串就放宽。
 	 */
 	hostKeyPolicy?: string,
 	/**
 	 *  指纹变更时是否阻断（**默认 true**）。关掉会让中间人攻击无声通过，
 	 *  因此前端需以红色风险提示呈现该开关。
+	 * 
+	 *  关闭时的行为不是「照旧弹窗」而是「自动接受并记入变更历史」：
+	 *  开关的语义是「不再拦截」，若关掉后仍弹阻断弹窗，用户会以为没生效。
 	 */
 	blockOnFingerprintChange?: boolean,
-	/**  是否记录连接审计日志（P2，默认关；开启后输入输出落盘，含脱敏） */
+	/**
+	 *  是否把**安全事件**写入日志（默认开）。
+	 * 
+	 *  记录对象是主机密钥相关的事件：指纹已信任 / 首次见到被接受 / 指纹变更
+	 *  被接受或拒绝 / 自动接受（阻断关闭时）。与「会话日志」（输出字节流落盘，
+	 *  由工具栏的 `terminal_toggle_logging` 按会话显式开启，见 `audit` 模块的
+	 *  取舍说明）**是两件事**：这里只写事件行，不含屏幕内容，因此没有隐私代价，
+	 *  默认开启才能保证「发生过什么」事后可查。
+	 */
 	auditLog?: boolean,
 };
 
@@ -1704,7 +1728,13 @@ export type SessionTemplate = {
 export type ShellProfile = {
 	/**  唯一标识（同时是新建会话时的 shellKey） */
 	id?: string,
-	/**  展示名称，如 "PowerShell 7" */
+	/**
+	 *  展示名称，如 "PowerShell 7" / "Windows PowerShell"。
+	 * 
+	 *  **设置页里的描述名，不是标签上显示的名字** —— 后者取
+	 *  [`super::shell::session_label`]（按可执行文件名归一的短名）。
+	 *  两者刻意分开：描述名可编辑、可很长，而标签要能一行放下多个会话。
+	 */
 	name?: string,
 	/**  可执行文件绝对路径 */
 	path?: string,
@@ -1803,6 +1833,22 @@ export type SshHost = {
 	jumpIds?: string[],
 	/**  终端的字符编码（"utf-8" 默认 | "gbk" 等）。老服务器常见 GBK，中文环境刚需。 */
 	encoding?: string,
+	/**
+	 *  是否在远端注入 shell 集成 hook（命令历史 + cwd 跟踪）。
+	 * 
+	 *  # 为什么默认必须是 true
+	 * 
+	 *  本结构是容器级 `#[serde(default)]`：老配置里缺这个字段时，serde 不是填
+	 *  「零值」而是取 [`SshHost::default()`] 的值。因此**默认值决定老主机是否自动
+	 *  开启注入** —— 填 `false` 会让所有既有主机静默不注入（表现为历史永远为空，
+	 *  而开关在界面上看着是关的，用户根本不会去动它）。填 `true` 则无需改
+	 *  `heal()`、无需升 `version`。
+	 * 
+	 *  关掉它的场景：远端 shell 集成会与 `startup_command` 里 `exec` 换 shell 的
+	 *  配置冲突，或服务器对会话环境有洁癖要求（注入会改本次会话的 `PROMPT_COMMAND`／
+	 *  `precmd`，但不落盘、不影响其它会话）。
+	 */
+	injectShellIntegration?: boolean,
 };
 
 /**  任务下载协议类型 */
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 991e390..603928d 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -93,6 +93,8 @@ export const EVENTS = {
   terminalTransferProgress: 'terminal-transfer-progress',
   /** 终端：请求对「关闭仍在运行的会话」二次确认 */
   terminalConfirmClose: 'terminal-confirm-close',
+  /** 终端：设置已保存（无负载）。各窗口据此重读设置，实现跨窗口同步 */
+  terminalSettings: 'terminal-settings',
   // 监控 OSD
   osdStateUpdate: 'osd-state-update',
   /** OSD 数据通道：仅推送显示项 key→value 映射 + 网速（高频，每秒） */
diff --git a/src/lib/terminalActions.ts b/src/lib/terminalActions.ts
index 9e97e57..8f07437 100644
--- a/src/lib/terminalActions.ts
+++ b/src/lib/terminalActions.ts
@@ -20,6 +20,14 @@
  * 2. **避开项目已有的全局快捷键**。`Ctrl+2` 已被翻译模块占用（取词翻译面板），
  *    所以标签跳转用 `Alt+1..9` —— 在终端里 `Alt+数字` 通常不产生控制字符，
  *    冲突面最小，且符合「切标签」的直觉。
+ *
+ * # 唯一一条「全局」动作：`newDetachedWindow`
+ *
+ * 这一条不在第二层生效，而是由 `TerminalQuickLaunch` 用 `plugin-global-shortcut`
+ * 注册成**系统级**热键（任意应用前台时都能按）。它放在这张表里，是为了让键位
+ * 跟着终端设置一起存、一起改（设置 → 快捷键 → 会话 → 新建独立窗口）。
+ * 因此终端内的按键分发（`useTerminalKeys`）刻意**不处理**它 —— 免得同一次按键
+ * 既被全局注册触发、又被终端内分发触发，开出两个窗口。
  */
 
 /** 快捷键动作定义 */
@@ -162,6 +170,13 @@ export const TERMINAL_ACTIONS: TerminalAction[] = [
     description: '打开常用命令片段列表',
     defaultKeys: 'Ctrl+Shift+S'
   },
+  {
+    id: 'history',
+    label: '命令历史',
+    group: '会话',
+    description: '打开命令历史面板（从已记录的历史里检索、复用）',
+    defaultKeys: 'Ctrl+Shift+H'
+  },
   {
     id: 'sessionSwitcher',
     label: '会话切换器',
@@ -175,6 +190,13 @@ export const TERMINAL_ACTIONS: TerminalAction[] = [
     group: '会话',
     description: '把当前会话放到独立窗口中（需终端独立窗口支持）',
     defaultKeys: 'Ctrl+Shift+N'
+  },
+  {
+    id: 'newDetachedWindow',
+    label: '新建独立窗口',
+    group: '会话',
+    description: '全局生效（任意界面按下）：打开独立终端窗口并选择要启动的会话',
+    defaultKeys: 'Ctrl+3'
   }
 ]
 
diff --git a/src/lib/terminalThemes.ts b/src/lib/terminalThemes.ts
index 761f76c..8481a75 100644
--- a/src/lib/terminalThemes.ts
+++ b/src/lib/terminalThemes.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue'
 import type { ITheme } from '@xterm/xterm'
 
 /**
@@ -183,17 +184,83 @@ export const TERMINAL_THEME_OPTIONS: Array<{ value: string; label: string }> = [
   { value: 'system', label: '跟随主应用' }
 ]
 
+/**
+ * 应用当前是否深色。
+ *
+ * 各窗口的 `applyTheme`（主窗口 appStore、独立窗口 / 选择窗口）在切换
+ * `documentElement` 的 `dark` class 时写入这里。终端主题要「跟随应用」就必须有
+ * 一个**响应式**输入 —— 只读 DOM class 的话，应用切浅色时终端不会重算
+ * （这正是「跟随应用主题」此前形同摆设的原因）。
+ */
+export const appIsDark = ref(false)
+
+/**
+ * 亮暗成对的主题。
+ *
+ * 「跟随应用主题」打开时，`theme` 只作为**取色基准**（见 Rust `AppearanceSettings`
+ * 的字段说明）：应用是深色取 `dark`，浅色取 `light`。只有深色变体的主题
+ * （Dracula / One Dark）在浅色下回落到 VS Code 浅色 —— 与其在浅色背景上硬套深色
+ * 配色，不如换一套能看清的。
+ */
+const THEME_PAIRS: Record<string, { light: string; dark: string }> = {
+  'vscode-dark': { light: 'vscode-light', dark: 'vscode-dark' },
+  'vscode-light': { light: 'vscode-light', dark: 'vscode-dark' },
+  'solarized-dark': { light: 'solarized-light', dark: 'solarized-dark' },
+  'solarized-light': { light: 'solarized-light', dark: 'solarized-dark' },
+  dracula: { light: 'vscode-light', dark: 'dracula' },
+  'one-dark': { light: 'vscode-light', dark: 'one-dark' },
+  system: { light: 'vscode-light', dark: 'vscode-dark' }
+}
+
+/**
+ * 求「实际生效」的主题名。
+ *
+ * - `followAppTheme` 开：按应用深浅取对应侧（见 THEME_PAIRS）
+ * - `followAppTheme` 关：用所选主题本身；选「跟随主应用」时按传入的深浅解析一次
+ *   （调用方传的是当前值快照，因此之后应用改深浅不会带着终端一起变）
+ */
+export function effectiveThemeName(theme: string, followAppTheme: boolean, isDark: boolean): string {
+  if (followAppTheme) {
+    const pair = THEME_PAIRS[theme] ?? THEME_PAIRS.system
+    return isDark ? pair.dark : pair.light
+  }
+  if (theme === 'system') return isDark ? 'vscode-dark' : 'vscode-light'
+  return theme
+}
+
+/**
+ * 按「背景不透明度」把主题背景色改成半透明。
+ *
+ * xterm 的 `theme.background` 支持带 alpha 的 8 位 hex —— 这是实现背景不透明度的
+ * 正确方式：**文字颜色不受影响**（给容器加 CSS `opacity` 会把字也一起变淡）。
+ * 前置条件是构造时 `allowTransparency: true`（见 useXterm）。
+ */
+export function themeWithOpacity(theme: ITheme, opacity: number): ITheme {
+  const p = Math.min(100, Math.max(0, Math.round(opacity)))
+  if (p >= 100) return theme
+
+  const bg = theme.background ?? '#000000'
+  // 只处理 #RRGGBB / #RRGGBBAA；其它写法原样返回（宁可不透明，也不要变成无效色值）
+  let rgb: string
+  if (bg.length === 7) rgb = bg
+  else if (bg.length === 9) rgb = bg.slice(0, 7)
+  else return theme
+
+  const alpha = Math.round((p / 100) * 255)
+    .toString(16)
+    .padStart(2, '0')
+  return { ...theme, background: `${rgb}${alpha}` }
+}
+
 /**
  * 解析主题名到具体的 xterm 主题对象。
  *
- * `system` 会读取主应用的亮暗模式（`document.documentElement` 上的 `dark` class，
- * Tailwind 的暗色模式约定），映射到 vscode-dark / vscode-light。
- * 这样终端不会在主应用切到浅色时突兀地保持全黑。
+ * `system` 读取 `appIsDark`（由各窗口的主题应用逻辑维护），映射到
+ * vscode-dark / vscode-light，避免终端在主应用切到浅色时突兀地保持全黑。
  */
 export function resolveTheme(name: string): ITheme {
   if (name === 'system') {
-    const isDark = document.documentElement.classList.contains('dark')
-    return TERMINAL_THEMES[isDark ? 'vscode-dark' : 'vscode-light']
+    return TERMINAL_THEMES[appIsDark.value ? 'vscode-dark' : 'vscode-light']
   }
   return TERMINAL_THEMES[name] ?? TERMINAL_THEMES['vscode-dark']
 }
diff --git a/src/lib/theme.test.ts b/src/lib/theme.test.ts
new file mode 100644
index 0000000..71c0084
--- /dev/null
+++ b/src/lib/theme.test.ts
@@ -0,0 +1,114 @@
+/**
+ * 主题色派生单测（Node 内置 test runner）。
+ *
+ * 重点不是「算得对不对」，而是「任何预设色在两种模式下都可读」——
+ * 对比度是这条链路上唯一会真正伤到用户的指标。
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  ACCENT_PRESETS,
+  ACCENT_VAR_KEYS,
+  contrastRatio,
+  deriveAccent,
+  hexToOklch,
+  oklchToHex,
+  resolveAccentHex,
+  type ThemeMode
+} from './theme.ts'
+
+const MODES: ThemeMode[] = ['light', 'dark']
+/** 深色模式的对比度基准（与实现里的 DARK_REFERENCE 一致） */
+const DARK_REFERENCE = '#1e1e22'
+
+test('hex → OKLCH → hex 往返稳定', () => {
+  for (const preset of ACCENT_PRESETS) {
+    const back = oklchToHex(hexToOklch(preset.hex))
+    const [r1, g1, b1] = [1, 3, 5].map(i => parseInt(preset.hex.slice(i, i + 2), 16))
+    const [r2, g2, b2] = [1, 3, 5].map(i => parseInt(back.slice(i, i + 2), 16))
+    // 允许 ±1/255 的取整误差
+    assert.ok(Math.abs(r1 - r2) <= 1, `${preset.id} R: ${preset.hex} → ${back}`)
+    assert.ok(Math.abs(g1 - g2) <= 1, `${preset.id} G: ${preset.hex} → ${back}`)
+    assert.ok(Math.abs(b1 - b2) <= 1, `${preset.id} B: ${preset.hex} → ${back}`)
+  }
+})
+
+test('默认蓝派生结果贴近现有手调值', () => {
+  const light = deriveAccent('#0066cc', 'light')
+  assert.equal(light['--primary'], '#0066cc')
+  // 现有 --primary-soft / --primary-soft-text = #e8f1fc / #004f9e，只要求同一色族与量级
+  assert.equal(hexToOklch(light['--primary-soft']).l > 0.9, true)
+  assert.equal(contrastRatio(light['--primary-soft-text'], light['--primary-soft']) >= 4.5, true)
+})
+
+test('所有预设 × 两种模式：强调色对底色、浅底文字对浅底、按钮文字对按钮底 均 ≥ 4.5:1', () => {
+  for (const preset of ACCENT_PRESETS) {
+    for (const mode of MODES) {
+      const vars = deriveAccent(preset.hex, mode)
+      const reference = mode === 'light' ? '#ffffff' : DARK_REFERENCE
+      const label = `${preset.id}/${mode}`
+
+      assert.ok(
+        contrastRatio(vars['--primary'], reference) >= 4.5,
+        `${label} primary 对底对比度不足: ${contrastRatio(vars['--primary'], reference).toFixed(2)}`
+      )
+      assert.ok(
+        contrastRatio(vars['--primary-soft-text'], vars['--primary-soft']) >= 4.5,
+        `${label} soft-text 对 soft 对比度不足: ${contrastRatio(
+          vars['--primary-soft-text'],
+          vars['--primary-soft']
+        ).toFixed(2)}`
+      )
+      // 填充上的文字：浅色模式必然 ≥4.5:1；深色模式强调色偏亮，白字约 2.7–3:1
+      //（与现有 #2997ff + 白字 的取舍一致），门槛按 UI 组件的 2.5:1 兜底
+      const fillMin = mode === 'light' ? 4.5 : 2.5
+      assert.ok(
+        contrastRatio(vars['--primary-foreground'], vars['--primary']) >= fillMin,
+        `${label} foreground 对 primary 对比度不足: ${contrastRatio(
+          vars['--primary-foreground'],
+          vars['--primary']
+        ).toFixed(2)}`
+      )
+      assert.equal(vars['--ring'], vars['--primary'], `${label} ring 应等于 primary`)
+    }
+  }
+})
+
+test('亮色（青柠）在浅色模式下被自动压暗', () => {
+  const base = hexToOklch('#65a30d')
+  const derived = hexToOklch(deriveAccent('#65a30d', 'light')['--primary'])
+  // 青柠原色在白底上只有约 2.8:1，派生后必须达标且比原色暗
+  assert.ok(derived.l < base.l, `未压暗: ${base.l} → ${derived.l}`)
+  assert.ok(contrastRatio(oklchToHex(derived), '#ffffff') >= 4.5)
+})
+
+test('色相保留（除被 sRGB 色域裁剪的极端彩度）', () => {
+  for (const preset of ACCENT_PRESETS) {
+    for (const mode of MODES) {
+      const base = hexToOklch(preset.hex)
+      const derived = hexToOklch(deriveAccent(preset.hex, mode)['--primary'])
+      if (derived.c < 0.02) continue // 石墨这类近无彩色，色相无意义
+      const diff = Math.abs(((derived.h - base.h + 540) % 360) - 180)
+      assert.ok(diff < 12, `${preset.id}/${mode} 色相偏移过大: ${base.h} → ${derived.h}`)
+    }
+  }
+})
+
+test('派生结果都是合法 hex，且每个变量都有值', () => {
+  for (const preset of ACCENT_PRESETS) {
+    for (const mode of MODES) {
+      const vars = deriveAccent(preset.hex, mode)
+      for (const key of ACCENT_VAR_KEYS) {
+        assert.match(vars[key], /^#[0-9a-f]{6}$/, `${preset.id}/${mode} ${key} 非法: ${vars[key]}`)
+      }
+    }
+  }
+})
+
+test('resolveAccentHex：默认与非法自定义都回落到内置默认', () => {
+  assert.equal(resolveAccentHex('blue', null), null)
+  assert.equal(resolveAccentHex('custom', null), null)
+  assert.equal(resolveAccentHex('custom', 'not-a-color'), null)
+  assert.equal(resolveAccentHex('custom', '#ffd60a'), '#ffd60a')
+  assert.equal(resolveAccentHex('violet', null), '#7c3aed')
+})
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..8e951db
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,345 @@
+/**
+ * 主题色（强调色）派生与应用。
+ *
+ * # 为什么只改 7 个变量就够
+ *
+ * 全应用的「可交互色」早已收敛到 `--primary` 单点（见 UI_DESIGN_SYSTEM.md §P1）：
+ * 按钮、开关、焦点环、选中态都走它。因此换色不需要动任何组件，只要覆盖这一族变量。
+ *
+ * # 为什么用 OKLCH 而不是 HSL
+ *
+ * HSL 的「明度」感知不均匀：换色相后同一个 L 有的发亮有的发暗（黄色 L=50% 已经很亮，
+ * 蓝色 L=50% 却很暗）。OKLCH 的 L 是感知均匀的，锁住 L/C 只换 H，才能保证
+ * 「换任意色相后对比度一致」。
+ *
+ * # 深浅两套为什么必须分别派生
+ *
+ * 深色底上直接用浅色值不可读（`#0066cc` 在 `#1e1e22` 上只有约 3.2:1）。
+ * 所以同一基色按模式重定 L：浅色压暗到能在白底上当文字用，深色提亮到能在深底上读。
+ *
+ * # 与样式表的关系
+ *
+ * 这些变量写在 `document.documentElement` 的行内样式上 —— 行内优先级高于
+ * `:root` 与 `.dark` 两条规则，因此：
+ * - 切模式必须**整组 7 个重写**（否则浅色的行内值会残留到深色模式）
+ * - 恢复默认必须 `removeProperty`（写空串仍算「已设置」，会继续压住样式表）
+ *
+ * # 为什么这个文件零依赖
+ *
+ * 它要能被 `node --test` 直接跑（`theme.test.ts` 校验全部预设的对比度），
+ * 而 Node 不解析 `@/` 路径别名 —— 所以这里不 import 任何项目模块。
+ * 需要读 localStorage 的独立窗口请用 `@/lib/accentStorage`。
+ */
+
+/** 强调色变量名（顺序固定，整组写入/整组清除） */
+export const ACCENT_VAR_KEYS = [
+  '--primary',
+  '--primary-hover',
+  '--primary-active',
+  '--primary-soft',
+  '--primary-soft-text',
+  '--ring',
+  '--primary-foreground'
+] as const
+
+export type AccentVarKey = (typeof ACCENT_VAR_KEYS)[number]
+
+export interface AccentPreset {
+  id: string
+  name: string
+  /** 基色（浅色模式取值）。深色模式由派生算法提亮，不需要另给 */
+  hex: string
+}
+
+/** 预设色板：覆盖色相环主要区间，纯自由取色很容易选出对比度不达标的颜色 */
+export const ACCENT_PRESETS: AccentPreset[] = [
+  { id: 'blue', name: '默认蓝', hex: '#0066cc' },
+  { id: 'indigo', name: '靛蓝', hex: '#4f46e5' },
+  { id: 'violet', name: '紫罗兰', hex: '#7c3aed' },
+  { id: 'rose', name: '玫红', hex: '#e11d48' },
+  { id: 'orange', name: '橙', hex: '#ea580c' },
+  { id: 'amber', name: '琥珀', hex: '#d97706' },
+  { id: 'lime', name: '青柠', hex: '#65a30d' },
+  { id: 'green', name: '翠绿', hex: '#059669' },
+  { id: 'teal', name: '青绿', hex: '#0d9488' },
+  { id: 'graphite', name: '石墨', hex: '#5b6472' }
+]
+
+export const DEFAULT_ACCENT_ID = 'blue'
+/** 自定义色的 id（hex 单独存放） */
+export const CUSTOM_ACCENT_ID = 'custom'
+
+export type ThemeMode = 'light' | 'dark'
+
+/** 浅色模式：基色需在白卡上同时胜任「文字」与「填充」，亮度压在这个区间 */
+const LIGHT_L_MIN = 0.42
+const LIGHT_L_MAX = 0.58
+/** 深色模式：深底上要提亮 */
+const DARK_L_MIN = 0.68
+const DARK_L_MAX = 0.8
+/** 彩度上下限：太低会「灰得没有强调感」，太高在深底上发刺 */
+const C_MIN = 0.06
+const C_MAX_LIGHT = 0.2
+const C_MAX_DARK = 0.18
+/** 正文可读性门槛（WCAG AA，用于「强调色当文字用」的场合） */
+const CONTRAST_AA = 4.5
+/**
+ * 填充色上文字的最低门槛。
+ *
+ * 比 AA 低是有意的：深色模式下强调色必须够亮才能在深底上当文字用（≥4.5:1），
+ * 而同一颜色做填充时白字必然只能到 2.7–3:1 —— 现有主题就是这个取舍
+ * （`#2997ff` + 白字 ≈ 2.98:1）。这里只兜住「自定义极亮色导致白字几乎不可读」的极端情况。
+ */
+const CONTRAST_FILL_MIN = 2.5
+/** 深色模式的对比度基准：卡片底（比画布 #16161a 略亮，取更严的一侧） */
+const DARK_REFERENCE = '#1e1e22'
+const WHITE = '#ffffff'
+const INK = '#1d1d1f'
+
+export interface Oklch {
+  /** 感知明度 0–1 */
+  l: number
+  /** 彩度 */
+  c: number
+  /** 色相角（度） */
+  h: number
+}
+
+// ===== 色彩空间换算 =====
+
+const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))
+
+const toLinear = (channel: number) =>
+  channel <= 0.04045 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4)
+
+const toGamma = (channel: number) =>
+  channel <= 0.0031308 ? 12.92 * channel : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055
+
+/** `#rrggbb` → 0–1 的 sRGB 三元组；非法输入返回 null */
+export function parseHex(hex: string): [number, number, number] | null {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim())
+  if (!m) return null
+  const n = parseInt(m[1], 16)
+  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+}
+
+const toHex = (rgb: [number, number, number]) =>
+  '#' +
+  rgb
+    .map(v => Math.round(clamp(v, 0, 1) * 255).toString(16).padStart(2, '0'))
+    .join('')
+
+export function hexToOklch(hex: string): Oklch {
+  const parsed = parseHex(hex)
+  if (!parsed) return { l: 0.5, c: 0.1, h: 250 }
+  const [r, g, b] = parsed.map(toLinear) as [number, number, number]
+
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b
+
+  const l_ = Math.cbrt(l)
+  const m_ = Math.cbrt(m)
+  const s_ = Math.cbrt(s)
+
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_
+  const A = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_
+  const B = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
+
+  const c = Math.hypot(A, B)
+  // 无彩色时色相无意义，给 0 避免 atan2 噪声
+  const h = c < 1e-4 ? 0 : ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360
+  return { l: L, c, h }
+}
+
+/** OKLCH → `#rrggbb`；越出 sRGB 色域时逐步降彩度，保证颜色有效 */
+export function oklchToHex(value: Oklch): string {
+  const { l, h } = value
+  let c = Math.max(0, value.c)
+  for (let i = 0; i < 200; i++) {
+    const rgb = oklchToRgb(l, c, h)
+    if (rgb.every(v => v >= -0.0005 && v <= 1.0005)) return toHex(rgb)
+    c -= 0.005
+    if (c <= 0) return toHex(oklchToRgb(l, 0, h))
+  }
+  return toHex(oklchToRgb(l, 0, h))
+}
+
+const oklchToRgb = (l: number, c: number, hDeg: number): [number, number, number] => {
+  const hRad = (hDeg * Math.PI) / 180
+  const A = c * Math.cos(hRad)
+  const B = c * Math.sin(hRad)
+
+  const l_ = l + 0.3963377774 * A + 0.2158037573 * B
+  const m_ = l - 0.1055613458 * A - 0.0638541728 * B
+  const s_ = l - 0.0894841775 * A - 1.291485548 * B
+
+  const lc = l_ ** 3
+  const mc = m_ ** 3
+  const sc = s_ ** 3
+
+  return [
+    toGamma(4.0767416621 * lc - 3.3077115913 * mc + 0.2309699292 * sc),
+    toGamma(-1.2684380046 * lc + 2.6097574011 * mc - 0.3413193965 * sc),
+    toGamma(-0.0041960863 * lc - 0.7034186147 * mc + 1.707614701 * sc)
+  ]
+}
+
+// ===== 对比度（WCAG） =====
+
+export function relativeLuminance(hex: string): number {
+  const parsed = parseHex(hex)
+  if (!parsed) return 0
+  const [r, g, b] = parsed.map(toLinear) as [number, number, number]
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+export function contrastRatio(a: string, b: string): number {
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+  const [hi, lo] = la >= lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+/** 在给定色相/彩度下，把明度朝目标方向推进到满足对比度为止 */
+function fitLuminance(
+  startL: number,
+  c: number,
+  h: number,
+  reference: string,
+  direction: 1 | -1
+): number {
+  let l = startL
+  for (let i = 0; i < 40; i++) {
+    if (contrastRatio(oklchToHex({ l, c, h }), reference) >= CONTRAST_AA) break
+    const next = l + direction * 0.02
+    if (next < 0.2 || next > 0.98) break
+    l = next
+  }
+  return l
+}
+
+/**
+ * 填充色上的文字色。
+ *
+ * 浅色模式的强调色已被亮度拟合压到对白底 ≥4.5:1，因此白字必然达标；
+ * 深色模式的强调色偏亮，白字约 2.7–3:1 —— 与现有主题一致，保持白字。
+ * 只有白字低到不可读（自定义极亮色）才改深墨。
+ */
+function foregroundFor(primary: string): string {
+  const onWhite = contrastRatio(primary, WHITE)
+  if (onWhite >= CONTRAST_FILL_MIN) return WHITE
+  return contrastRatio(primary, INK) > onWhite ? INK : WHITE
+}
+
+/**
+ * 由单一基色派生某个模式下的全套强调色变量。
+ *
+ * 色相 H 原样保留（用户选的就是色相），只按模式重定 L/C，并在必要时继续推进 L
+ * 直到对比度达标 —— 这就是「选到黄/浅绿时自动压暗」的实现。
+ */
+export function deriveAccent(baseHex: string, mode: ThemeMode): Record<AccentVarKey, string> {
+  const base = hexToOklch(baseHex)
+  const h = base.h
+
+  if (mode === 'light') {
+    const c = clamp(base.c, C_MIN, C_MAX_LIGHT)
+    const l = fitLuminance(
+      clamp(base.l, LIGHT_L_MIN, LIGHT_L_MAX),
+      c,
+      h,
+      WHITE,
+      -1
+    )
+    const primary = oklchToHex({ l, c, h })
+    const soft = oklchToHex({ l: 0.95, c: c * 0.3, h })
+    // 浅底上的文字：从基色加深起步，不足 4.5:1 继续压暗
+    const softTextL = fitLuminance(clamp(l - 0.1, 0.3, 0.48), c, h, soft, -1)
+    return {
+      '--primary': primary,
+      '--primary-hover': oklchToHex({ l: clamp(l - 0.08, 0.2, 1), c, h }),
+      '--primary-active': oklchToHex({ l: clamp(l - 0.16, 0.15, 1), c, h }),
+      '--primary-soft': soft,
+      '--primary-soft-text': oklchToHex({ l: softTextL, c, h }),
+      '--ring': primary,
+      '--primary-foreground': foregroundFor(primary)
+    }
+  }
+
+  const c = clamp(base.c, C_MIN, C_MAX_DARK)
+  const l = fitLuminance(clamp(base.l, DARK_L_MIN, DARK_L_MAX), c, h, DARK_REFERENCE, 1)
+  const primary = oklchToHex({ l, c, h })
+  const soft = oklchToHex({ l: 0.3, c: c * 0.45, h })
+  const softTextL = fitLuminance(clamp(l + 0.2, 0.72, 0.9), c * 0.7, h, soft, 1)
+  return {
+    '--primary': primary,
+    '--primary-hover': oklchToHex({ l: clamp(l + 0.06, 0, 0.96), c, h }),
+    '--primary-active': oklchToHex({ l: clamp(l - 0.1, 0, 1), c, h }),
+    '--primary-soft': soft,
+    '--primary-soft-text': oklchToHex({ l: softTextL, c: c * 0.7, h }),
+    '--ring': primary,
+    '--primary-foreground': foregroundFor(primary)
+  }
+}
+
+// ===== 应用 / 清除 =====
+
+/**
+ * 把强调色写到 `documentElement` 的行内样式（`baseHex` 为 null 表示恢复内置默认）。
+ *
+ * 必须传入当前模式：行内值会压住 `.dark` 规则，所以每次都要按模式整组重写。
+ */
+export function applyAccent(root: HTMLElement, baseHex: string | null, mode: ThemeMode): void {
+  if (!baseHex || !parseHex(baseHex)) {
+    clearAccent(root)
+    return
+  }
+  const vars = deriveAccent(baseHex, mode)
+  for (const key of ACCENT_VAR_KEYS) {
+    root.style.setProperty(key, vars[key])
+  }
+}
+
+/** 清除行内强调色，回落到 style.css 里手调的默认值 */
+export function clearAccent(root: HTMLElement): void {
+  for (const key of ACCENT_VAR_KEYS) {
+    root.style.removeProperty(key)
+  }
+}
+
+/**
+ * 由设置值解析出实际基色。
+ *
+ * 返回 null 表示「用内置默认」—— 此时不写任何行内变量，
+ * 保留 style.css 里手调的蓝，老用户与未改设置的用户零视觉变化。
+ */
+export function resolveAccentHex(accentId: string, accentHex: string | null): string | null {
+  if (accentId === CUSTOM_ACCENT_ID) return accentHex && parseHex(accentHex) ? accentHex : null
+  if (accentId === DEFAULT_ACCENT_ID) return null
+  return ACCENT_PRESETS.find(p => p.id === accentId)?.hex ?? null
+}
+
+/**
+ * 独立窗口用：从 localStorage 的设置里读出主题色。
+ *
+ * 独立窗口（快速面板 / 托盘菜单 / 截图编辑器…）不加载 appStore，各自有一套
+ * applyTheme 副本，只共享同一份 localStorage 设置。
+ *
+ * `storageKey` 由调用方传入（`STORAGE_KEYS.appSettings`）—— 本文件不 import 项目模块，
+ * 是为了能被 `node --test` 直接加载。
+ */
+export function readStoredAccent(storageKey: string): string | null {
+  try {
+    const raw = localStorage.getItem(storageKey)
+    if (!raw) return null
+    const settings = JSON.parse(raw) as { accentId?: string; accentHex?: string | null }
+    return resolveAccentHex(settings.accentId ?? DEFAULT_ACCENT_ID, settings.accentHex ?? null)
+  } catch {
+    return null
+  }
+}
+
+/** 独立窗口用：读设置并应用主题色（在各自 applyTheme 里 class 切换之后调用） */
+export function applyStoredAccent(root: HTMLElement, mode: ThemeMode, storageKey: string): void {
+  applyAccent(root, readStoredAccent(storageKey), mode)
+}
diff --git a/src/lib/use-module-tabs.ts b/src/lib/use-module-tabs.ts
index 61b2a74..6cc95df 100644
--- a/src/lib/use-module-tabs.ts
+++ b/src/lib/use-module-tabs.ts
@@ -29,12 +29,13 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
  * ```
  *
  * ## 工作原理
- * 1. onMounted 时注册标签到 moduleTabsStore（**并复用该模块上次停留的 tab**），
- *    TitleBar 据此渲染浮动切换器
- * 2. 用 IntersectionObserver 监听 TabsList 可见性（rootMargin 裁剪 TitleBar 高度）
- * 3. 双向 watch 同步本地 activeTab 与 store.activeTab
- * 4. 消费搜索导航的待跳转 tab（模块尚未挂载的场景）
- * 5. onUnmounted 时清理 observer 并把当前 tab 记到 store（按模块）后注销标签
+ * 1. **setup 阶段（首帧之前）** 定下要显示的 tab：搜索跳转 > 上次停留 > 声明时的初始值
+ *    —— 模块切回来是重新挂载，等到 onMounted 再改就会先渲染一帧初始页（闪一下）
+ * 2. onMounted 时注册标签到 moduleTabsStore，TitleBar 据此渲染浮动切换器
+ * 3. 用 IntersectionObserver 监听 TabsList 可见性（rootMargin 裁剪 TitleBar 高度）
+ * 4. 双向 watch 同步本地 activeTab 与 store.activeTab
+ * 5. 消费搜索导航的待跳转 tab（模块尚未挂载的场景）
+ * 6. onUnmounted 时清理 observer 并把当前 tab 记到 store（按模块）后注销标签
  *
  * ## 约束
  * - TitleBar 高度固定为 40px (h-10)，composable 内部已用 44px 裁剪（含缓冲）
@@ -45,11 +46,32 @@ import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'
 export function useModuleTabs(
   moduleId: string,
   activeTab: Ref<string>,
-  tabs: ModuleTab[]
+  tabs: ModuleTab[],
+  /** alwaysVisible: 模块自身不渲染 TabsList，标题栏切换器常驻（内容最大化模式） */
+  options: { alwaysVisible?: boolean } = {}
 ): Ref<HTMLElement | null> {
   const tabsStore = useModuleTabsStore()
   const tabsListRef = ref<HTMLElement | null>(null)
 
+  /**
+   * 首次渲染前就定下要显示的 tab：搜索跳转 > 上次停留 > 声明时的初始值。
+   *
+   * 必须在 setup 里做。模块切走时组件被卸载、`activeTab` 随之丢失，切回来重新挂载
+   * 时它是声明时的初始值（如 proxy 的 `'overview'`）；若等到 onMounted 才恢复，
+   * 首帧已经按初始值渲染过一次 —— 表现为「先闪一下第一页，再跳到上次停留页」，
+   * 而不是一次干净的进入动画。
+   *
+   * 这里只**读** store（rememberedTab / peekPendingTab 都不改状态）：注册仍留在
+   * onMounted，避免从未挂载的组件污染 store 的当前模块。
+   */
+  const pendingTab = tabsStore.peekPendingTab(moduleId)
+  if (pendingTab && tabs.some(t => t.value === pendingTab)) {
+    activeTab.value = pendingTab
+  } else {
+    const restored = tabsStore.rememberedTab(moduleId, tabs, activeTab.value)
+    if (restored !== activeTab.value) activeTab.value = restored
+  }
+
   let observer: IntersectionObserver | null = null
 
   /** 应用待跳转 tab（若属于当前模块的 tab 列表） */
@@ -103,7 +125,12 @@ export function useModuleTabs(
     const restored = tabsStore.registerTabs(moduleId, tabs, activeTab.value)
     if (restored !== activeTab.value) activeTab.value = restored
     await nextTick()
-    setupObserver()
+    // 常驻模式：模块不渲染 TabsList，直接让标题栏切换器显示
+    if (options.alwaysVisible) {
+      tabsStore.setFloatingVisible(true)
+    } else {
+      setupObserver()
+    }
     // 搜索导航跳转：模块刚挂载，消费待跳转 tab（优先级高于上次停留）
     applyPendingTab()
   })
diff --git a/src/main.ts b/src/main.ts
index 00db42c..dc683a5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -41,6 +41,7 @@ const standaloneWindowApps: Array<[hash: string, label: string, loader: () => Pr
   ['#download-window', '下载窗口', () => import('./modules/downloader/DownloadWindow.vue')],
   ['#translate-popup', '翻译悬浮窗', () => import('./modules/translate/TranslatePopup.vue')],
   ['#terminal-window', '终端独立窗口', () => import('./modules/terminal/TerminalWindow.vue')],
+  ['#new-terminal-window', '新建终端窗口', () => import('./modules/terminal/NewTerminalWindow.vue')],
 ]
 
 const winHash = window.location.hash
diff --git a/src/modules/clipboard/ClipboardModule.vue b/src/modules/clipboard/ClipboardModule.vue
index d2b7932..5349817 100644
--- a/src/modules/clipboard/ClipboardModule.vue
+++ b/src/modules/clipboard/ClipboardModule.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import {
-  ClipboardList, Copy, Pin, PinOff, Trash2, Search, Image as ImageIcon,
+  ClipboardList, Copy, Database, Pin, PinOff, Trash2, Search, Image as ImageIcon,
   FileText, Files, Settings as SettingsIcon, Loader2, Eraser, Keyboard,
 } from '@lucide/vue'
 import { toast } from 'vue-sonner'
 import { useClipboardStore, type ClipboardItem, type ClipboardKind, type ClipboardItemDetail } from '@/stores/clipboardStore'
 import { useModuleTabs } from '@/lib/use-module-tabs'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Card, CardContent } from '@/components/ui/card'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
@@ -33,11 +32,11 @@ import {
 const store = useClipboardStore()
 
 const activeTab = ref('history')
-const tabsListRef = useModuleTabs('clipboard', activeTab, [
+useModuleTabs('clipboard', activeTab, [
   { value: 'history', label: '历史' },
   { value: 'pinned', label: '固定' },
   { value: 'settings', label: '设置' },
-])
+], { alwaysVisible: true })
 
 // 历史搜索/过滤
 const searchQuery = ref('')
@@ -276,10 +275,10 @@ const kindIcon = (k: string) => {
 const kindLabel = (k: string) => (k === 'text' ? '文本' : k === 'image' ? '图片' : '文件')
 const kindBadgeClass = (k: string) =>
   k === 'text'
-    ? 'border-blue-500/40 bg-blue-500/10 text-blue-600 dark:text-blue-400'
+    ? 'border-info/40 bg-info-soft text-info-text'
     : k === 'image'
-    ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-    : 'border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+    ? 'border-success/40 bg-success-soft text-success-text'
+    : 'border-warning/40 bg-warning-soft text-warning-text'
 const formatSize = (bytes: number) => {
   if (!bytes) return ''
   if (bytes < 1024) return `${bytes} B`
@@ -320,18 +319,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-hidden flex flex-col">
+  <div class="min-h-full p-5 flex flex-col">
     <Tabs v-model="activeTab" class="flex-1 min-h-0 flex flex-col">
-      <div ref="tabsListRef" class="shrink-0">
-        <TabsList class="grid w-full max-w-md grid-cols-3 !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="history" class="gap-1.5"><ClipboardList class="size-3.5" />历史</TabsTrigger>
-          <TabsTrigger value="pinned" class="gap-1.5"><Pin class="size-3.5" />固定</TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5"><SettingsIcon class="size-3.5" />设置</TabsTrigger>
-        </TabsList>
-      </div>
-
       <!-- 历史 -->
-      <TabsContent value="history" class="flex-1 min-h-0 flex flex-col mt-4 tab-animate">
+      <TabsContent value="history" class="flex-1 min-h-0 flex flex-col tab-animate">
         <div class="flex items-center gap-2 mb-3 shrink-0">
           <div class="relative flex-1 max-w-sm">
             <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
@@ -392,7 +383,7 @@ onUnmounted(() => {
           </span>
         </div>
         
-        <ScrollArea class="flex-1 min-h-0">
+        <div class="flex-1 min-h-0">
           <div class="space-y-1.5 pr-2">
           <!-- 加载骨架：数据异步返回前撑起画面，避免误显示"暂无历史" -->
           <div v-if="store.loading" class="space-y-1.5">
@@ -450,12 +441,17 @@ onUnmounted(() => {
             </CardContent>
           </Card>
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- 固定 -->
-      <TabsContent value="pinned" class="flex-1 min-h-0 flex flex-col mt-4 tab-animate">
-        <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5 pr-1">
+      <TabsContent value="pinned" class="flex-1 min-h-0 flex flex-col tab-animate">
+        <!--
+          这份列表是模块内的独立滚动区：视口会裁掉超出自身的阴影，而这里的卡片
+          悬停时是 shadow-md（比 shadow-sm 更大）。`-mx-3` + 内层 `px-3 pb-2`
+          让视口两侧各多出 12px、底部多出 8px 的余量，卡片位置与宽度不变。
+        -->
+        <div class="flex-1 min-h-0 overflow-y-auto -mx-3">
           <Empty v-if="!pinnedList.length" class="h-full py-8">
             <EmptyHeader>
               <EmptyMedia variant="icon">
@@ -467,6 +463,8 @@ onUnmounted(() => {
               <EmptyDescription>鼠标悬停历史条目，点击图钉按钮即可固定</EmptyDescription>
             </EmptyContent>
           </Empty>
+
+          <div v-else class="space-y-1.5 px-3 pb-2">
           <Card v-for="item in pinnedList" :key="item.id" class="group hover:shadow-md transition-shadow py-0">
             <CardContent class="flex items-center gap-3 px-3 py-2">
               <component :is="kindIcon(item.kind)" class="size-4 text-primary shrink-0" />
@@ -491,20 +489,29 @@ onUnmounted(() => {
               </div>
             </CardContent>
           </Card>
+          </div>
         </div>
       </TabsContent>
 
-      <!-- 设置 -->
-      <TabsContent value="settings" class="flex-1 min-h-0 overflow-y-auto mt-4 tab-animate">
-        <div class="max-w-xl space-y-4">
-          <div class="flex items-center">
-            <h3 class="text-base font-medium flex items-center gap-2">
-              <SettingsIcon class="size-4" />基本设置
-            </h3>
-          </div>
+      <!--
+        设置页同样自带滚动（只有内容区滚，Tab 行固定）。内层 `px-3 pb-3` 是
+        必须的：卡片阴影贴着这个视口的边缘会被裁，而根元素上的内边距不属于
+        滚动内容（滚到底时最后一张卡片的底部阴影照样没了）。
 
+        卡片形态对齐下载器/监控等模块的设置页：标题进卡片（CardHeader +
+        CardTitle，图标用主题色），卡片铺满内容宽度（此前是 max-w-xl 的窄栏 +
+        一个页级 h3，读起来像「页面上浮着一个标题 + 三张无标题的卡片」）。
+      -->
+      <TabsContent value="settings" class="flex-1 min-h-0 overflow-y-auto tab-animate -mx-3">
+        <div class="space-y-4 px-3 pb-3">
+          <!-- 基本设置 -->
           <Card>
-            <CardContent class="space-y-4 p-4">
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2 text-base">
+                <SettingsIcon class="size-4 text-primary" />基本设置
+              </CardTitle>
+            </CardHeader>
+            <CardContent class="space-y-4">
               <div class="flex items-center justify-between">
                 <div>
                   <Label>启用剪贴板监听</Label>
@@ -546,9 +553,16 @@ onUnmounted(() => {
             </CardContent>
           </Card>
 
+          <!-- 容量与上限 -->
           <Card>
-            <CardContent class="space-y-4 p-4">
-              <div class="grid grid-cols-2 gap-4">
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2 text-base">
+                <Database class="size-4 text-primary" />容量与上限
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <!-- 数值输入限宽：卡片铺满后让输入框跟着拉到六百多像素只是难读 -->
+              <div class="grid grid-cols-2 gap-4 max-w-xl">
                 <div class="space-y-2">
                   <Label>最大历史条数</Label>
                   <Input v-model.number="form.maxItems" type="number" min="50" max="10000" />
@@ -563,13 +577,17 @@ onUnmounted(() => {
             </CardContent>
           </Card>
 
+          <!-- 快捷弹窗 -->
           <Card>
-            <CardContent class="space-y-4 p-4">
+            <CardHeader>
+              <CardTitle class="flex items-center gap-2 text-base">
+                <Keyboard class="size-4 text-primary" />快捷弹窗
+              </CardTitle>
+            </CardHeader>
+            <CardContent class="space-y-4">
               <div class="flex items-center justify-between">
                 <div>
-                  <Label class="flex items-center gap-2">
-                    <Keyboard class="size-4" />快捷弹窗快捷键
-                  </Label>
+                  <Label>快捷弹窗快捷键</Label>
                   <p class="text-xs text-muted-foreground mt-1">全局快捷键触发鼠标位置历史弹窗，留空禁用</p>
                 </div>
                 <Button variant="outline" size="sm" @click="handleTestPopup">测试弹窗</Button>
diff --git a/src/modules/clipboard/ClipboardPopup.vue b/src/modules/clipboard/ClipboardPopup.vue
index 89c2d85..0946607 100644
--- a/src/modules/clipboard/ClipboardPopup.vue
+++ b/src/modules/clipboard/ClipboardPopup.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 import { Effect, EffectState } from '@tauri-apps/api/window'
 // Rust 端通过 tauri-specta 生成的命令绑定（bindings.ts）
 import { commands } from '@/lib/bindings'
@@ -36,7 +37,7 @@ const kindFilter = ref<'all' | 'text' | 'image' | 'files'>('all')
 const selectedIndex = ref(0)
 const loading = ref(false)
 const searchInputRef = ref<HTMLInputElement | null>(null)
-let unlistenFns: UnlistenFn[] = []
+const unlistenFns: UnlistenFn[] = []
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)))
@@ -356,6 +357,8 @@ async function applyTheme() {
   root.classList.remove('dark', 'effect-mica', 'effect-acrylic', 'effect-normal')
   root.classList.add(`effect-${effect}`)
   if (isDark) root.classList.add('dark')
+  // 主题色：与主窗口共用同一份设置
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
 
   // 4. 设置窗口效果与背景色
   //    弹窗窗口创建时 transparent=true，透明窗口下原生背景色不显示，
diff --git a/src/modules/clipboard/ClipboardPreview.vue b/src/modules/clipboard/ClipboardPreview.vue
index de17dae..abd8592 100644
--- a/src/modules/clipboard/ClipboardPreview.vue
+++ b/src/modules/clipboard/ClipboardPreview.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { listen, emit, type UnlistenFn } from '@tauri-apps/api/event'
 import { getCurrentWindow, Effect, EffectState } from '@tauri-apps/api/window'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 import { commands } from '@/lib/bindings'
 import { ZoomIn, ZoomOut, FileText, Image as ImageIcon } from '@lucide/vue'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -14,7 +15,7 @@ const thumbSrc = ref('')
 const fullSrc = ref('')
 const enlarged = ref(false)
 const loading = ref(false)
-let unlistenFns: UnlistenFn[] = []
+const unlistenFns: UnlistenFn[] = []
 // 加载序号：连续悬停快速切换时丢弃过期请求结果
 let loadSeq = 0
 
@@ -208,6 +209,8 @@ async function applyTheme() {
   root.classList.remove('dark', 'effect-mica', 'effect-acrylic', 'effect-normal')
   root.classList.add(`effect-${effect}`)
   if (isDark) root.classList.add('dark')
+  // 主题色：与主窗口共用同一份设置
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
   try {
     const tauriWin = getCurrentWindow()
     await tauriWin.clearEffects()
diff --git a/src/modules/clipboard/index.ts b/src/modules/clipboard/index.ts
index 6f2e931..80d494a 100644
--- a/src/modules/clipboard/index.ts
+++ b/src/modules/clipboard/index.ts
@@ -55,5 +55,5 @@ export const moduleConfig: ModuleConfig = {
   defaultEnabled: true,
   loader: () => import('./ClipboardModule.vue'),
   searchItems,
-  order: 20
+  order: 80
 }
diff --git a/src/modules/devtools/DevToolsModule.vue b/src/modules/devtools/DevToolsModule.vue
index 7c13706..bf10998 100644
--- a/src/modules/devtools/DevToolsModule.vue
+++ b/src/modules/devtools/DevToolsModule.vue
@@ -4,7 +4,6 @@ import { ArrowLeft, Search } from '@lucide/vue'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { useSearchStore } from '@/stores/searchStore'
 import { registerAllTools, TOOLS_META } from './tools'
@@ -77,21 +76,46 @@ watch(selectedId, () => {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-hidden flex flex-col">
+  <!--
+    # 滚动归属：只有主滚动区滚（2026-09-22 由内滚动改为外滚动）
+
+    此前本模块的列表页与详情页各自套一层 `ScrollArea`（`h-full overflow-hidden`
+    的模块根 + 内部滚动），与 monitor / music / clipboard / 设置页的形态不一致 ——
+    那些模块的模块根是 `min-h-full p-*`，整页在 ModuleContainer 的主滚动区里滚。
+    两套滚动归属混用会带来一串副作用：Tab 行/工具条要不要固定、内边距该加在
+    滚动容器根还是内层、卡片阴影被视口裁（`-mx-3 px-3` 就是在补这个）。
+
+    现在统一到外滚动：模块根 `min-h-full p-5`，内容自然增高，滚动交给主滚动区。
+    p-5 属于**滚动内容**（模块根在主滚动区内部），因此卡片阴影四周都有余量，
+    不再需要任何负外边距补偿。
+
+    工具自身需要限高的地方（正则结果、diff 输出等）仍保留各自的 `max-h-*` 内滚动
+    盒子 —— 那是「一块有边界的输出区」，与页面级滚动不是一回事。
+  -->
+  <div class="min-h-full p-5 flex flex-col">
     <!-- 列表视图 -->
     <template v-if="!selectedTool">
-      <div class="flex items-center gap-3 mb-4 shrink-0 flex-wrap">
+      <div class="flex items-center gap-3 mb-4 flex-wrap">
         <div class="relative flex-1 min-w-[180px] max-w-xs">
           <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
           <Input v-model="query" placeholder="搜索工具..." class="h-8 pl-8 text-sm" />
         </div>
+        <!--
+          分类筛选：选中态用主题色软底（与 SegmentedNav 及其余模块的筛选 chip 同一
+          口径）。此前写的是 `bg-secondary text-foreground` —— 灰底黑字读起来像
+          「禁用」，也是全项目唯一用实心灰表达选中的地方。
+        -->
         <Button
           v-for="cat in (['all', ...CATEGORY_ORDER] as const)"
           :key="cat"
           size="sm"
           variant="ghost"
           class="h-7 px-2.5 text-xs"
-          :class="category === cat ? 'bg-secondary text-foreground' : 'text-muted-foreground'"
+          :class="
+            category === cat
+              ? 'bg-primary-soft font-medium text-primary-soft-text'
+              : 'text-fg-secondary hover:text-foreground'
+          "
           @click="category = cat as typeof category"
         >
           {{ cat === 'all' ? '全部' : CATEGORY_LABEL[cat as DevTool['category']] }}
@@ -99,12 +123,16 @@ watch(selectedId, () => {
         <span class="text-xs text-muted-foreground ml-auto">{{ (category === 'all' ? allTools : filteredTools).length }} 个工具</span>
       </div>
 
-      <ScrollArea class="flex-1 min-h-0 -mr-3 pr-3">
-        <div v-if="filteredTools.length === 0" class="h-full flex items-center justify-center text-muted-foreground text-sm">
-          没有找到匹配的工具
-        </div>
+      <!-- 空态：flex-1 撑住剩余高度，短页面时也能垂直居中 -->
+      <div
+        v-if="filteredTools.length === 0"
+        class="flex-1 flex items-center justify-center text-muted-foreground text-sm"
+      >
+        没有找到匹配的工具
+      </div>
 
-        <!-- 按分类分组 -->
+      <!-- 按分类分组 -->
+      <div v-else>
         <div v-for="group in groupedTools" :key="group.category" class="mb-5">
           <div class="flex items-center gap-2 mb-2">
             <span class="text-xs font-medium text-muted-foreground">{{ group.label }}</span>
@@ -129,12 +157,12 @@ watch(selectedId, () => {
             </Card>
           </div>
         </div>
-      </ScrollArea>
+      </div>
     </template>
 
     <!-- 工具详情视图 -->
     <template v-else>
-      <div class="flex items-center gap-3 mb-4 shrink-0">
+      <div class="flex items-center gap-3 mb-4">
         <Button size="sm" variant="ghost" class="gap-1 h-8" @click="selectedId = null">
           <ArrowLeft class="size-4" />
           返回
@@ -147,11 +175,7 @@ watch(selectedId, () => {
           <span class="text-xs text-muted-foreground leading-snug">{{ selectedTool.description }}</span>
         </div>
       </div>
-      <ScrollArea class="flex-1 min-h-0 -mr-3 pr-3">
-        <div class="max-w-3xl px-1 pb-6">
-          <component :is="selectedTool.component" />
-        </div>
-      </ScrollArea>
+      <component :is="selectedTool.component" />
     </template>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/modules/devtools/components/ResultArea.vue b/src/modules/devtools/components/ResultArea.vue
index 068f695..f025747 100644
--- a/src/modules/devtools/components/ResultArea.vue
+++ b/src/modules/devtools/components/ResultArea.vue
@@ -58,7 +58,7 @@ const onInput = (v: string | number) => {
           :title="copied ? '已复制' : '复制'"
           @click="copy"
         >
-          <Check v-if="copied" class="size-3.5 text-green-500" />
+          <Check v-if="copied" class="size-3.5 text-success" />
           <Copy v-else class="size-3.5" />
         </Button>
       </div>
diff --git a/src/modules/devtools/index.ts b/src/modules/devtools/index.ts
index a81058e..51bba9c 100644
--- a/src/modules/devtools/index.ts
+++ b/src/modules/devtools/index.ts
@@ -23,5 +23,5 @@ export const moduleConfig: ModuleConfig = {
     onEnable: async () => {},
     onDisable: async () => {}
   },
-  order: 60
+  order: 100
 }
\ No newline at end of file
diff --git a/src/modules/devtools/tools/Base64Tools.vue b/src/modules/devtools/tools/Base64Tools.vue
index 20db77c..d03f6db 100644
--- a/src/modules/devtools/tools/Base64Tools.vue
+++ b/src/modules/devtools/tools/Base64Tools.vue
@@ -12,7 +12,6 @@ type Tab = 'convert' | 'file'
 const tab = ref<Tab>('convert')
 const mode = ref<'encode' | 'decode'>('encode')
 const input = ref('')
-const error = ref('')
 
 function encode(s: string): string {
   const bytes = new TextEncoder().encode(s)
@@ -28,17 +27,18 @@ function decode(s: string): string {
   return new TextDecoder().decode(bytes)
 }
 
-const output = computed(() => {
-  error.value = ''
+// 一次试算同时产出结果与错误，computed 内保持无副作用
+const result = computed(() => {
   const v = input.value
-  if (!v) return ''
+  if (!v) return { out: '', err: '' }
   try {
-    return mode.value === 'encode' ? encode(v) : decode(v)
+    return { out: mode.value === 'encode' ? encode(v) : decode(v), err: '' }
   } catch (e) {
-    error.value = '解码失败：' + String(e)
-    return ''
+    return { out: '', err: '解码失败：' + String(e) }
   }
 })
+const output = computed(() => result.value.out)
+const error = computed(() => result.value.err)
 
 const swap = () => {
   if (output.value) {
diff --git a/src/modules/devtools/tools/DiffTools.vue b/src/modules/devtools/tools/DiffTools.vue
index 6b2cf2f..74e6465 100644
--- a/src/modules/devtools/tools/DiffTools.vue
+++ b/src/modules/devtools/tools/DiffTools.vue
@@ -111,11 +111,11 @@ const unifiedText = computed(() => {
   <div class="flex flex-col gap-4">
     <div class="grid grid-cols-2 gap-3">
       <div class="flex flex-col gap-1.5">
-        <Label class="text-xs text-red-500">旧文本（删除 {{ stats.dels }} 行）</Label>
+        <Label class="text-xs text-danger">旧文本（删除 {{ stats.dels }} 行）</Label>
         <Textarea v-model="oldText" placeholder="旧文本..." class="min-h-[140px] font-mono text-xs resize-y" />
       </div>
       <div class="flex flex-col gap-1.5">
-        <Label class="text-xs text-green-500">新文本（新增 {{ stats.adds }} 行）</Label>
+        <Label class="text-xs text-success">新文本（新增 {{ stats.adds }} 行）</Label>
         <Textarea v-model="newText" placeholder="新文本..." class="min-h-[140px] font-mono text-xs resize-y" />
       </div>
     </div>
@@ -130,8 +130,8 @@ const unifiedText = computed(() => {
           :key="i"
           class="flex whitespace-pre px-2 py-0.5"
           :class="{
-            'bg-red-500/10 text-red-600 dark:text-red-400': l.op === 'del',
-            'bg-green-500/10 text-green-600 dark:text-green-400': l.op === 'add',
+            'bg-danger-soft text-danger-text': l.op === 'del',
+            'bg-success-soft text-success-text': l.op === 'add',
             'text-muted-foreground': l.op === 'equal'
           }"
         >
diff --git a/src/modules/devtools/tools/HttpStatusTools.vue b/src/modules/devtools/tools/HttpStatusTools.vue
index 18ef777..fe2f36d 100644
--- a/src/modules/devtools/tools/HttpStatusTools.vue
+++ b/src/modules/devtools/tools/HttpStatusTools.vue
@@ -118,11 +118,11 @@ const MIMES: MimeDef[] = [
 ]
 
 const STATUS_CLASS: Record<string, string> = {
-  '1xx': 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/30',
-  '2xx': 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30',
-  '3xx': 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30',
-  '4xx': 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30',
-  '5xx': 'bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/30'
+  '1xx': 'bg-info-soft text-info-text border-info/30',
+  '2xx': 'bg-success-soft text-success-text border-success/30',
+  '3xx': 'bg-info-soft text-info-text border-info/30',
+  '4xx': 'bg-warning-soft text-warning-text border-warning/30',
+  '5xx': 'bg-danger-soft text-danger-text border-danger/30'
 }
 
 const statusGroups = computed(() => {
diff --git a/src/modules/devtools/tools/IpTools.vue b/src/modules/devtools/tools/IpTools.vue
index 2cb0f7f..ac85490 100644
--- a/src/modules/devtools/tools/IpTools.vue
+++ b/src/modules/devtools/tools/IpTools.vue
@@ -128,7 +128,7 @@ const converted = computed(() => {
       <template v-if="cidr">
         <p v-if="cidr.error" class="text-xs text-destructive">{{ cidr.error }}</p>
         <template v-else>
-          <p v-if="!cidr.ipIsNetwork" class="text-xs text-amber-600 dark:text-amber-400">
+          <p v-if="!cidr.ipIsNetwork" class="text-xs text-warning-text">
             注意：输入地址不是该子网的网络地址，已按网络 {{ cidr.network }}/{{ cidr.prefix }} 计算。
           </p>
           <div class="rounded-md border border-border divide-y divide-border text-xs">
diff --git a/src/modules/devtools/tools/JsonTools.vue b/src/modules/devtools/tools/JsonTools.vue
index b61f3d3..14cb4d4 100644
--- a/src/modules/devtools/tools/JsonTools.vue
+++ b/src/modules/devtools/tools/JsonTools.vue
@@ -88,7 +88,7 @@ function normalizeReplacer(sort: boolean): (this: unknown, key: string, value: u
     </div>
 
     <div v-if="isValid !== false" class="flex items-center gap-2 text-xs">
-      <span v-if="isValid === true" class="text-green-600 dark:text-green-400">✓ 合法 JSON</span>
+      <span v-if="isValid === true" class="text-success-text">✓ 合法 JSON</span>
     </div>
     <ResultArea :text="output" placeholder="结果" />
     <p v-if="error" class="text-xs text-destructive break-all">{{ error }}</p>
diff --git a/src/modules/devtools/tools/JwtTools.vue b/src/modules/devtools/tools/JwtTools.vue
index 0d61f45..028afea 100644
--- a/src/modules/devtools/tools/JwtTools.vue
+++ b/src/modules/devtools/tools/JwtTools.vue
@@ -6,7 +6,6 @@ import { Badge } from '@/components/ui/badge'
 import ResultArea from '../components/ResultArea.vue'
 
 const token = ref('')
-const error = ref('')
 
 function base64UrlDecode(s: string): string {
   const cleaned = s.replace(/-/g, '+').replace(/_/g, '/')
@@ -24,30 +23,33 @@ interface TimeClaim {
   status: 'ok' | 'expired' | 'not-yet' | 'unknown'
 }
 
-const parsed = computed<{
+// 一次解析同时产出数据与错误，computed 内保持无副作用
+const parsedResult = computed<{ data: {
   header: string
   payload: string
   signature: string
   timeClaims: TimeClaim[]
-} | null>(() => {
-  error.value = ''
+} | null; err: string }>(() => {
   const t = token.value.trim()
-  if (!t) return null
+  if (!t) return { data: null, err: '' }
   const parts = t.split('.')
   if (parts.length < 2) {
-    error.value = 'JWT 格式不正确（应为 header.payload.signature）'
-    return null
+    return { data: null, err: 'JWT 格式不正确（应为 header.payload.signature）' }
   }
   try {
     const header = formatJson(base64UrlDecode(parts[0]))
     const payload = formatJson(base64UrlDecode(parts[1]))
     const signature = parts[2] ?? ''
-    return { header, payload, signature, timeClaims: parseTimeClaims(payload) }
+    return {
+      data: { header, payload, signature, timeClaims: parseTimeClaims(payload) },
+      err: ''
+    }
   } catch (e) {
-    error.value = '解码失败：' + String(e)
-    return null
+    return { data: null, err: '解码失败：' + String(e) }
   }
 })
+const parsed = computed(() => parsedResult.value.data)
+const error = computed(() => parsedResult.value.err)
 
 function formatJson(s: string): string {
   let pretty = s
@@ -90,9 +92,9 @@ function parseTimeClaims(payload: string): TimeClaim[] {
 
 const STATUS_BADGE: Record<TimeClaim['status'], { label: string; class: string } | null> = {
   ok: null,
-  expired: { label: '已过期', class: 'bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/30' },
-  'not-yet': { label: '尚未生效', class: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30' },
-  unknown: { label: '签发时间在未来（时钟偏差？）', class: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30' }
+  expired: { label: '已过期', class: 'bg-danger-soft text-danger-text border-danger/30' },
+  'not-yet': { label: '尚未生效', class: 'bg-warning-soft text-warning-text border-warning/30' },
+  unknown: { label: '签发时间在未来（时钟偏差？）', class: 'bg-warning-soft text-warning-text border-warning/30' }
 }
 </script>
 
diff --git a/src/modules/devtools/tools/PasswordTools.vue b/src/modules/devtools/tools/PasswordTools.vue
index 98c6285..c9f129b 100644
--- a/src/modules/devtools/tools/PasswordTools.vue
+++ b/src/modules/devtools/tools/PasswordTools.vue
@@ -73,10 +73,10 @@ const entropy = computed(() => {
 
 const strength = computed(() => {
   const e = entropy.value
-  if (e >= 128) return { label: '极强（128+ bit）', class: 'text-green-600 dark:text-green-400' }
-  if (e >= 80) return { label: '强（80-127 bit）', class: 'text-green-600 dark:text-green-400' }
-  if (e >= 60) return { label: '中等（60-79 bit）', class: 'text-amber-600 dark:text-amber-400' }
-  return { label: '弱（<60 bit）', class: 'text-red-600 dark:text-red-400' }
+  if (e >= 128) return { label: '极强（128+ bit）', class: 'text-success-text' }
+  if (e >= 80) return { label: '强（80-127 bit）', class: 'text-success-text' }
+  if (e >= 60) return { label: '中等（60-79 bit）', class: 'text-warning-text' }
+  return { label: '弱（<60 bit）', class: 'text-danger-text' }
 })
 
 function generate() {
diff --git a/src/modules/devtools/tools/base/BaseTools.vue b/src/modules/devtools/tools/base/BaseTools.vue
index 45be751..5e8ed0b 100644
--- a/src/modules/devtools/tools/base/BaseTools.vue
+++ b/src/modules/devtools/tools/base/BaseTools.vue
@@ -17,7 +17,6 @@ const bases: { value: Radix; label: string }[] = [
 const from = ref<Radix>('10')
 const to = ref<Radix>('16')
 const input = ref('')
-const error = ref('')
 
 const RADIX_MAP: Record<Radix, number> = { '2': 2, '8': 8, '10': 10, '16': 16 }
 
@@ -37,23 +36,29 @@ function parseBigInt(s: string, radix: number): bigint {
   return negative ? -n : n
 }
 
+// 一次试算同时产出结果与错误，computed 内保持无副作用
 const result = computed(() => {
-  error.value = ''
   const v = input.value.trim()
-  if (!v) return { dec: null, output: '', outputUppercase: '' }
+  if (!v) return { dec: null, output: '', outputUppercase: '', err: '' }
   try {
     const parsed = parseBigInt(v, RADIX_MAP[from.value])
     const out = parsed.toString(RADIX_MAP[to.value])
     return {
       dec: parsed,
       output: out,
-      outputUppercase: to.value === '16' ? out.toUpperCase() : out
+      outputUppercase: to.value === '16' ? out.toUpperCase() : out,
+      err: ''
     }
   } catch {
-    error.value = '输入不合法，请确认数字与当前进制匹配（如十六进制仅含 0-9a-f）'
-    return { dec: null, output: '', outputUppercase: '' }
+    return {
+      dec: null,
+      output: '',
+      outputUppercase: '',
+      err: '输入不合法，请确认数字与当前进制匹配（如十六进制仅含 0-9a-f）'
+    }
   }
 })
+const error = computed(() => result.value.err)
 </script>
 
 <template>
diff --git a/src/modules/downloader/DownloadWindow.vue b/src/modules/downloader/DownloadWindow.vue
index 59ee8e5..8de1e80 100644
--- a/src/modules/downloader/DownloadWindow.vue
+++ b/src/modules/downloader/DownloadWindow.vue
@@ -6,6 +6,7 @@ import { listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { Pause, Play, X, Minus, FolderOpen, AlertCircle, Loader2, XCircle } from '@lucide/vue'
 import { commands, type DownloadTask, type Segment, type TaskStatus } from '@/lib/bindings'
 import { STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 import { createLogger } from '@/lib/logger'
 
 const logger = createLogger('download-window')
@@ -68,6 +69,7 @@ const statusText = computed(() => {
     case 'complete': return '已完成'
     case 'error': return '出错'
     case 'cancelled': return '已取消'
+    default: return ''
   }
 })
 const statusTone = computed(() => {
@@ -175,6 +177,8 @@ async function applyTheme() {
   root.classList.remove('dark', 'effect-mica', 'effect-acrylic', 'effect-normal')
   root.classList.add(`effect-${effect}`)
   if (isDark) root.classList.add('dark')
+  // 主题色：与主窗口共用同一份设置
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
 
   // 4. 设置窗口效果：mica/acrylic 下卡片透明，普通模式用不透明背景
   try {
@@ -297,7 +301,7 @@ onUnmounted(() => {
     <div class="dlw-titlebar" data-tauri-drag-region>
       <div class="dlw-title-left" data-tauri-drag-region>
         <Loader2 v-if="status === 'active'" class="size-3 shrink-0 animate-spin text-primary" />
-        <XCircle v-else-if="status === 'error'" class="size-3 shrink-0 text-red-500" />
+        <XCircle v-else-if="status === 'error'" class="size-3 shrink-0 text-danger" />
         <Pause v-else class="size-3 shrink-0 text-muted-foreground" />
         <span v-if="loading" class="text-xs font-medium text-muted-foreground">下载</span>
         <span v-else-if="task" class="dlw-title-name" :title="task.filename"
@@ -363,7 +367,7 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <div v-if="actionError" class="mt-1.5 truncate text-right text-[10px] text-red-500" @click="clearErrorSoon">
+        <div v-if="actionError" class="mt-1.5 truncate text-right text-[10px] text-danger" @click="clearErrorSoon">
           {{ actionError }}
         </div>
       </template>
@@ -460,8 +464,8 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 .dlw-status-badge.tone-active { background: var(--primary); color: var(--primary-foreground); }
-.dlw-status-badge.tone-success { background: #10b981; color: #fff; }
-.dlw-status-badge.tone-destructive { background: #ef4444; color: #fff; }
+.dlw-status-badge.tone-success { background: var(--success); color: #fff; }
+.dlw-status-badge.tone-destructive { background: var(--danger); color: #fff; }
 .dlw-status-badge.tone-muted { background: var(--muted); color: var(--muted-foreground); }
 
 .dlw-bar { height: 7px; border-radius: 999px; background: var(--muted); overflow: hidden; }
@@ -487,8 +491,8 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 .dlw-btn:hover { background: var(--accent); color: var(--accent-foreground); }
-.dlw-btn-danger { color: #ef4444; }
-.dlw-btn-danger:hover { background: rgb(239 68 68 / 0.12); color: #dc2626; }
+.dlw-btn-danger { color: var(--danger); }
+.dlw-btn-danger:hover { background: rgb(239 68 68 / 0.12); color: var(--danger); }
 .dlw-btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
 /* hover 时显式保持前景色，避免被上面的 .dlw-btn:hover 覆盖成深色导致黑字黑底不可见 */
 .dlw-btn-primary:hover { background: var(--primary); color: var(--primary-foreground); filter: brightness(1.05); }
diff --git a/src/modules/downloader/DownloaderModule.vue b/src/modules/downloader/DownloaderModule.vue
index c5630e6..2f343af 100644
--- a/src/modules/downloader/DownloaderModule.vue
+++ b/src/modules/downloader/DownloaderModule.vue
@@ -24,7 +24,7 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Label } from '@/components/ui/label'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Progress } from '@/components/ui/progress'
@@ -44,11 +44,11 @@ const logger = createLogger('downloader')
 // ===== 主 Tab 状态 =====
 const activeTab = ref('tasks')
 
-const tabsListRef = useModuleTabs('downloader', activeTab, [
+useModuleTabs('downloader', activeTab, [
   { value: 'tasks', label: '下载任务' },
   { value: 'settings', label: '设置' },
   { value: 'extension', label: '浏览器扩展' }
-])
+], { alwaysVisible: true })
 
 // 添加下载表单
 const addUriText = ref('')
@@ -237,8 +237,6 @@ const SORT_OPTIONS: { label: string; value: SortField }[] = [
   { label: '下载大小', value: 'size' }
 ]
 
-const running = computed(() => store.status.running)
-
 // ===== 工具函数 =====
 /** BT 第 i 个文件已下载字节（progress 事件把每文件进度写入 segments[i].completed） */
 const btFileDownloaded = (task: DownloadTask, i: number): number =>
@@ -347,7 +345,7 @@ const handleResume = async (id: string) => {
 
 // ===== 取消下载（参考下载窗口：二次点击确认，3 秒内未二次点击则取消）=====
 const cancelArmed = ref<Record<string, boolean>>({})
-let cancelArmTimers: Record<string, number> = {}
+const cancelArmTimers: Record<string, number> = {}
 const handleCancel = (id: string) => {
   if (cancelArmed.value[id]) {
     // 二次点击：执行取消
@@ -813,13 +811,6 @@ onUnmounted(() => {
 
 const allTasks = computed<DownloadTask[]>(() => store.tasks)
 
-// 状态栏计数：单次遍历统计各状态任务数（替代模板内 4 次 filter 全量扫描）
-const statusCounts = computed(() => {
-  const counts: Record<TaskStatus, number> = { queued: 0, active: 0, paused: 0, complete: 0, error: 0, cancelled: 0 }
-  for (const t of allTasks.value) counts[t.status]++
-  return counts
-})
-
 // 状态筛选
 const filteredByStatus = computed<DownloadTask[]>(() => {
   if (statusFilter.value === 'all') return allTasks.value
@@ -878,79 +869,11 @@ const toggleSortOrder = () => {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-hidden flex flex-col">
-    <Tabs v-model="activeTab" class="h-full flex flex-col">
-      <div ref="tabsListRef">
-        <TabsList class="grid w-full grid-cols-3 max-w-md !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="tasks" class="gap-1.5">
-            <ListChecks class="size-4" />
-            下载任务
-          </TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5">
-            <SettingsIcon class="size-4" />
-            设置
-          </TabsTrigger>
-          <TabsTrigger value="extension" class="gap-1.5">
-            <Puzzle class="size-4" />
-            浏览器扩展
-          </TabsTrigger>
-        </TabsList>
-      </div>
-
+  <div class="min-h-full p-5 flex flex-col">
+    <Tabs v-model="activeTab" class="flex flex-col">
       <!-- ===== 下载任务 ===== -->
-      <TabsContent value="tasks" class="flex-1 mt-4 min-h-0 min-w-0 tab-animate">
+      <TabsContent value="tasks" class="flex-1 min-h-0 min-w-0 tab-animate">
         <div class="h-full flex flex-col gap-4 min-w-0">
-          <!-- 状态栏 -->
-          <Card class="shrink-0 !py-0 !gap-0">
-            <CardContent class="pl-4 pr-4 py-3">
-              <div class="flex items-center justify-between flex-wrap gap-3">
-                <div class="flex items-center gap-3">
-                  <div class="flex items-center gap-2">
-                    <div
-                      class="h-2.5 w-2.5 rounded-full"
-                      :class="running ? 'bg-green-500 animate-pulse' : 'bg-muted-foreground'"
-                    />
-                    <span class="text-sm font-medium">
-                      下载引擎 {{ running ? '运行中' : '已停止' }}
-                    </span>
-                  </div>
-                  <Separator orientation="vertical" class="h-5" />
-                  <div v-if="running" class="flex items-center gap-2 text-xs">
-                    <Badge variant="secondary" class="gap-1">
-                      <Download class="size-3" />
-                      下载中 {{ statusCounts.active }}
-                    </Badge>
-                    <Badge variant="secondary" class="gap-1">
-                      <Clock class="size-3" />
-                      等待 {{ statusCounts.queued }}
-                    </Badge>
-                    <Badge v-if="statusCounts.paused > 0" variant="secondary" class="gap-1">
-                      <Pause class="size-3" />
-                      已暂停 {{ statusCounts.paused }}
-                    </Badge>
-                    <Badge variant="secondary" class="gap-1">
-                      <Check class="size-3" />
-                      已完成 {{ statusCounts.complete }}
-                    </Badge>
-                    <Badge v-if="statusCounts.cancelled > 0" variant="secondary" class="gap-1">
-                      <XCircle class="size-3" />
-                      已取消 {{ statusCounts.cancelled }}
-                    </Badge>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    @click="store.refreshTasks()"
-                  >
-                    <RefreshCw class="size-4" />
-                  </Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
           <!-- 工具栏：筛选 / 排序 / 搜索 -->
           <div class="shrink-0 flex items-center gap-2 flex-wrap">
             <!-- 新建下载按钮 -->
@@ -1052,13 +975,28 @@ const toggleSortOrder = () => {
               下载设置
             </Button>
 
+            <!-- 手动刷新任务列表（横幅移除后保留，事件漏收时可兜底） -->
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  class="size-8 p-0 bg-transparent"
+                  @click="store.refreshTasks()"
+                >
+                  <RefreshCw class="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>刷新任务列表</TooltipContent>
+            </Tooltip>
+
             <span class="text-xs text-muted-foreground ml-auto">
               共 {{ sortedTasks.length }} 个任务
             </span>
           </div>
 
           <!-- 任务列表 -->
-          <ScrollArea class="flex-1 min-h-0 min-w-0">
+          <div class="flex-1 min-h-0 min-w-0">
             <div v-if="pagedTasks.length === 0" key="empty" class="h-full flex flex-col items-center justify-center text-muted-foreground gap-2 pt-10">
               <CheckCircle2 class="size-16 opacity-30" />
               <p>暂无符合条件的任务</p>
@@ -1093,7 +1031,7 @@ const toggleSortOrder = () => {
                         <span>
                           {{ formatSize(task.completedSize) }} / {{ formatTotalSize(task.totalSize) }}
                         </span>
-                        <span v-if="task.status === 'active'" class="flex items-center gap-1 text-green-600 dark:text-green-400">
+                        <span v-if="task.status === 'active'" class="flex items-center gap-1 text-success-text">
                           <Download class="size-3" />
                           {{ formatSpeed(task.speed) }}
                         </span>
@@ -1287,14 +1225,14 @@ const toggleSortOrder = () => {
                 <TooltipContent>最后一页</TooltipContent>
               </Tooltip>
             </div>
-          </ScrollArea>
+          </div>
         </div>
       </TabsContent>
 
       <!-- ===== 设置 ===== -->
-      <TabsContent value="settings" class="flex-1 mt-4 min-h-0 tab-animate">
-        <ScrollArea class="h-full pr-3">
-          <div class="flex flex-col gap-4 pb-4 max-w-2xl">
+      <TabsContent value="settings" class="flex-1 min-h-0 tab-animate">
+        <div>
+          <div class="flex flex-col gap-4 pb-4">
             <!-- 下载设置 -->
             <Card>
               <CardHeader>
@@ -1482,13 +1420,13 @@ const toggleSortOrder = () => {
               </CardContent>
             </Card>
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- ===== 浏览器扩展 ===== -->
-      <TabsContent value="extension" class="flex-1 mt-4 min-h-0 tab-animate">
-        <ScrollArea class="h-full pr-3">
-          <div class="flex flex-col gap-4 pb-4 max-w-2xl">
+      <TabsContent value="extension" class="flex-1 min-h-0 tab-animate">
+        <div>
+          <div class="flex flex-col gap-4 pb-4">
             <Card>
               <CardHeader>
                 <CardTitle class="flex items-center gap-2 text-base">
@@ -1623,7 +1561,7 @@ const toggleSortOrder = () => {
               </CardContent>
             </Card>
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
     </Tabs>
 
@@ -1879,7 +1817,7 @@ const toggleSortOrder = () => {
       <AlertDialogContent class="max-w-md">
         <AlertDialogHeader>
           <AlertDialogTitle class="flex items-center gap-2">
-            <AlertCircle class="size-4 text-amber-500" />
+            <AlertCircle class="size-4 text-warning" />
             下载重复提醒
           </AlertDialogTitle>
           <AlertDialogDescription class="text-xs">
diff --git a/src/modules/downloader/index.ts b/src/modules/downloader/index.ts
index 2a3142a..a597b58 100644
--- a/src/modules/downloader/index.ts
+++ b/src/modules/downloader/index.ts
@@ -64,5 +64,5 @@ export const moduleConfig: ModuleConfig = {
       // 模块禁用时不停止引擎（引擎在应用退出时统一清理）
     }
   },
-  order: 50
+  order: 30
 }
diff --git a/src/modules/monitor/MonitorModule.vue b/src/modules/monitor/MonitorModule.vue
index c2ba74d..1acc042 100644
--- a/src/modules/monitor/MonitorModule.vue
+++ b/src/modules/monitor/MonitorModule.vue
@@ -5,7 +5,7 @@ import {
   ShieldCheck, ShieldOff, Zap, Thermometer, Clock, ChevronDown,
   ArrowDown, ArrowUp, Wifi, FolderOpen, Copy, ListChecks,
   Monitor as MonitorIcon, GripVertical, SlidersHorizontal,
-  Eye, EyeOff, MousePointerClick, Plus, PencilLine,
+  Eye, EyeOff, MousePointerClick, Check, PencilLine,
   CircuitBoard, BatteryFull, Gamepad2,
 } from '@lucide/vue'
 import type { LucideIcon } from '@lucide/vue'
@@ -33,7 +33,7 @@ import OverviewCard, { type OverviewCardView } from './OverviewCard.vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion'
 import { Progress } from '@/components/ui/progress'
@@ -50,12 +50,12 @@ const store = useMonitorStore()
 
 // ===== Tab 配置（注册到 TitleBar 浮动切换器） =====
 const activeTab = ref('overview')
-const tabsListRef = useModuleTabs('monitor', activeTab, [
+useModuleTabs('monitor', activeTab, [
   { value: 'overview', label: '概览' },
   { value: 'details', label: '详细' },
   { value: 'osd', label: 'OSD 显示' },
   { value: 'settings', label: '设置' },
-])
+], { alwaysVisible: true })
 
 // ===== 关键指标 computed =====
 
@@ -248,8 +248,14 @@ function saveOverviewCards() {
 
 /** 编辑模式：显示拖拽把手/移除按钮，启用拖拽排序 */
 const overviewEditing = ref(false)
-/** 添加卡片 Popover 开关 */
-const overviewAddOpen = ref(false)
+/**
+ * 「布局」Popover 开关（编辑模式 + 添加卡片）。
+ *
+ * 两件事合并进同一个 popover：它们都是**对概览卡片集合的操作**，此前各占一个
+ * 文字按钮（「编辑布局」「添加卡片」），把横幅挤成了两行 —— 而横幅的规范是
+ * 「状态区 → 指标区 → 操作区」一行常驻（UI_DESIGN_SYSTEM §3.4）。
+ */
+const overviewEditOpen = ref(false)
 
 /** 尚未添加的卡片（添加菜单内容） */
 const addableOverviewCards = computed(() =>
@@ -260,7 +266,7 @@ function addOverviewCard(id: OverviewCardId) {
   if (overviewCards.value.includes(id)) return
   overviewCards.value.push(id)
   saveOverviewCards()
-  overviewAddOpen.value = false
+  overviewEditOpen.value = false
 }
 
 function removeOverviewCard(id: string) {
@@ -330,8 +336,8 @@ function buildOverviewCardView(id: OverviewCardId): OverviewCardView {
     case 'network':
       return {
         id, title: '网络', icon: Wifi,
-        main: { label: '下载', labelIcon: ArrowDown, text: downSpeed.value.value, unit: downSpeed.value.unit, colorClass: 'text-sky-500' },
-        subs: [{ label: '上传', labelIcon: ArrowUp, text: upSpeed.value.value, unit: upSpeed.value.unit, colorClass: 'text-violet-500' }],
+        main: { label: '下载', labelIcon: ArrowDown, text: downSpeed.value.value, unit: downSpeed.value.unit, colorClass: 'text-info' },
+        subs: [{ label: '上传', labelIcon: ArrowUp, text: upSpeed.value.value, unit: upSpeed.value.unit, colorClass: 'text-data-up' }],
         load: null,
       }
     case 'storage':
@@ -376,12 +382,13 @@ const overviewCardViews = computed<OverviewCardView[]>(() =>
 )
 
 // ===== 连接状态徽章 =====
-const stateMeta: Record<ConnectionState, { text: string; class: string }> = {
-  idle: { text: '未启动', class: 'bg-muted text-muted-foreground' },
-  loading: { text: '启动中', class: 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400' },
-  connected: { text: '已连接', class: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' },
-  disconnected: { text: '已断开', class: 'bg-orange-500/15 text-orange-600 dark:text-orange-400' },
-  error: { text: '错误', class: 'bg-red-500/15 text-red-600 dark:text-red-400' },
+/** 横幅状态区用：状态点颜色 + 状态文字颜色（规范 §3.4 = 状态点 8px + 状态文字 13px/500） */
+const stateMeta: Record<ConnectionState, { text: string; dot: string; textClass: string }> = {
+  idle: { text: '未启动', dot: 'bg-muted-foreground', textClass: 'text-muted-foreground' },
+  loading: { text: '启动中', dot: 'bg-warning', textClass: 'text-warning' },
+  connected: { text: '已连接', dot: 'bg-success', textClass: 'text-success' },
+  disconnected: { text: '已断开', dot: 'bg-warning', textClass: 'text-warning' },
+  error: { text: '错误', dot: 'bg-danger', textClass: 'text-danger' },
 }
 
 // ===== 分组列表（详细页用） =====
@@ -1342,20 +1349,11 @@ watch(() => store.status?.ready, (ready, prev) => {
 </script>
 
 <template>
-  <div class="h-full p-6">
-    <Tabs v-model="activeTab" class="h-full flex flex-col">
-      <div ref="tabsListRef">
-        <TabsList class="grid w-full max-w-md grid-cols-4 !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="overview" class="gap-1.5"><Activity class="size-3.5" />概览</TabsTrigger>
-          <TabsTrigger value="details" class="gap-1.5"><Gauge class="size-3.5" />详细</TabsTrigger>
-          <TabsTrigger value="osd" class="gap-1.5"><MonitorIcon class="size-3.5" />OSD</TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5"><SettingsIcon class="size-3.5" />设置</TabsTrigger>
-        </TabsList>
-      </div>
-
+  <div class="min-h-full p-5">
+    <Tabs v-model="activeTab" class="flex flex-col">
       <!-- ===== 概览 ===== -->
-      <TabsContent value="overview" class="flex-1 mt-4 tab-animate">
-        <ScrollArea class="h-full pr-3">
+      <TabsContent value="overview" class="flex-1 tab-animate">
+        <div>
           <!-- 加载中占位（仅首次初始化前显示） -->
           <div v-if="!store.initialized" key="initializing" class="h-full flex flex-col items-center justify-center text-muted-foreground gap-2 pt-10">
             <Loader2 class="size-8 animate-spin" />
@@ -1363,40 +1361,59 @@ watch(() => store.status?.ready, (ready, prev) => {
           </div>
 
           <template v-else>
-            <!-- ===== Kernel 状态栏（置顶紧凑横条） ===== -->
-            <Card class="py-0 gap-0 mb-2.5">
-              <CardContent class="px-3.5 py-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
-                <span class="flex items-center gap-1.5 font-medium text-sm">
-                  <Activity class="size-4 text-primary" />Kernel
-                </span>
-                <span :class="['px-2 py-0.5 rounded-full', stateMeta[store.connState].class]">
-                  {{ stateMeta[store.connState].text }}
-                </span>
-                <Badge :variant="store.snapshot?.isAdmin ? 'default' : 'outline'" :class="store.snapshot?.isAdmin ? 'bg-emerald-500 hover:bg-emerald-500' : ''">
-                  {{ store.snapshot?.isAdmin ? '管理员' : '普通' }}
-                </Badge>
-                <Badge v-if="store.status?.thingElevated" variant="outline" class="border-emerald-500/50 text-emerald-600 dark:text-emerald-400">
-                  <ShieldCheck class="size-2.5 mr-0.5" />提权
-                </Badge>
-                <span class="text-muted-foreground">PID: <span class="font-mono text-foreground">{{ store.status?.pid ?? '--' }}</span></span>
-                <span class="text-muted-foreground">传感器: <span class="font-mono text-foreground">{{ store.status?.sensorCount ?? '--' }}</span></span>
-                <span class="text-muted-foreground">重启: <span class="font-mono text-foreground">{{ store.status?.restartCount ?? 0 }}</span></span>
-                <span class="text-muted-foreground">事件: <span class="font-mono text-foreground">{{ store.eventCount }}</span></span>
-                <div class="flex items-center gap-1.5 ml-auto">
+            <!-- ===== Kernel 状态横幅：状态区 → 指标区 → 操作区（UI_DESIGN_SYSTEM §3.4） ===== -->
+            <Card class="!py-0 !gap-0 mb-2.5">
+              <CardContent class="flex flex-wrap items-center gap-x-6 gap-y-3 px-4 py-4">
+                <!-- 状态区：状态点 8px + 状态文字 13px/500 + 进程名 13px 次要色 -->
+                <div class="flex flex-wrap items-center gap-2.5">
+                  <span class="flex items-center gap-1.5 text-[13px] font-medium" :class="stateMeta[store.connState].textClass">
+                    <span
+                      class="size-2 rounded-full"
+                      :class="[stateMeta[store.connState].dot, store.connState === 'connected' && 'status-dot-pulse']"
+                    />{{ stateMeta[store.connState].text }}
+                  </span>
+                  <span class="text-[13px] text-fg-secondary">ThingHK</span>
+                  <Badge :variant="store.snapshot?.isAdmin ? 'default' : 'outline'" :class="store.snapshot?.isAdmin ? 'bg-success hover:bg-success' : ''">
+                    {{ store.snapshot?.isAdmin ? '管理员' : '普通' }}
+                  </Badge>
+                  <Badge v-if="store.status?.thingElevated" variant="outline" class="border-success/50 text-success-text">
+                    <ShieldCheck class="size-2.5 mr-0.5" />提权
+                  </Badge>
+                </div>
+                <!-- 指标区：核心属性同样占一个指标位（label 11px 灰 + 数值 18px/600 tabular-nums） -->
+                <div class="flex flex-wrap items-center gap-6">
+                  <div class="flex min-w-20 flex-col gap-0.5">
+                    <span class="text-[11px] text-muted-foreground">PID</span>
+                    <span class="text-lg font-semibold tabular-nums text-foreground">{{ store.status?.pid ?? '—' }}</span>
+                  </div>
+                  <div class="flex min-w-12 flex-col gap-0.5">
+                    <span class="text-[11px] text-muted-foreground">传感器</span>
+                    <span class="text-lg font-semibold tabular-nums text-foreground">{{ store.status?.sensorCount ?? 0 }}</span>
+                  </div>
+                  <div class="flex min-w-12 flex-col gap-0.5">
+                    <span class="text-[11px] text-muted-foreground">重启</span>
+                    <span class="text-lg font-semibold tabular-nums text-foreground">{{ store.status?.restartCount ?? 0 }}</span>
+                  </div>
+                  <div class="flex min-w-12 flex-col gap-0.5">
+                    <span class="text-[11px] text-muted-foreground">事件</span>
+                    <span class="text-lg font-semibold tabular-nums text-foreground">{{ store.eventCount }}</span>
+                  </div>
+                </div>
+                <div class="ml-auto flex flex-wrap items-center gap-1.5">
                   <!-- 启动中 loading（starting=true 但状态还没变为 loading 时显示） -->
-                  <Button v-if="store.starting && store.connState === 'idle'" size="xs" variant="outline" disabled>
-                    <Loader2 class="size-3 animate-spin" />启动中
+                  <Button v-if="store.starting && store.connState === 'idle'" size="sm" variant="outline" disabled>
+                    <Loader2 class="size-3.5 animate-spin" />启动中
                   </Button>
                   <!-- 启动按钮（未运行且非启动中时显示） -->
-                  <Button v-if="store.connState === 'idle' && !store.starting" size="xs" :disabled="store.starting" @click="handleStart">
-                    <Play class="size-3" />启动
+                  <Button v-if="store.connState === 'idle' && !store.starting" size="sm" :disabled="store.starting" @click="handleStart">
+                    <Play class="size-3.5" />启动
                   </Button>
                   <!-- 提权按钮（标志未启用时显示：设置标志 + 以管理员权限重启 Thing） -->
                   <Tooltip v-if="!store.elevateOnLaunch">
                     <TooltipTrigger as-child>
-                      <Button size="xs" variant="outline" class="gap-1 text-emerald-600 dark:text-emerald-400 border-emerald-500/40 hover:bg-emerald-500/10" :disabled="store.starting" @click="handleElevateSelf">
-                        <Loader2 v-if="store.starting" class="size-3 animate-spin" />
-                        <ShieldCheck v-else class="size-3" />提权
+                      <Button size="sm" variant="outline" class="gap-1 text-success-text border-success/40 hover:bg-success/10" :disabled="store.starting" @click="handleElevateSelf">
+                        <Loader2 v-if="store.starting" class="size-3.5 animate-spin" />
+                        <ShieldCheck v-else class="size-3.5" />提权
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent class="max-w-[480px] break-words">以管理员权限重启 Thing（弹 UAC，ThingHK 子进程继承权限，后续启动自动提权，崩溃自动重启）</TooltipContent>
@@ -1404,36 +1421,70 @@ watch(() => store.status?.ready, (ready, prev) => {
                   <!-- 取消提权按钮（标志已启用时显示：清除标志，下次启动不触发 UAC） -->
                   <Tooltip v-else>
                     <TooltipTrigger as-child>
-                      <Button size="xs" variant="outline" class="gap-1 text-muted-foreground hover:text-foreground" @click="handleCancelElevation">
-                        <ShieldOff class="size-3" />取消提权
+                      <Button size="sm" variant="outline" class="gap-1 text-muted-foreground hover:text-foreground" @click="handleCancelElevation">
+                        <ShieldOff class="size-3.5" />取消提权
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent class="max-w-[480px] break-words">取消提权，下次启动将以普通权限运行（不影响当前会话）</TooltipContent>
                   </Tooltip>
-                  <Button size="xs" variant="outline" :disabled="store.starting || store.stopping || store.connState === 'idle'" @click="handleRefresh">
-                    <RefreshCw class="size-3" />刷新
+                  <!--
+                    刷新：图标按钮（原来是与启动/停止同级的文字按钮，把操作区撑宽
+                    近一个按钮的宽度）。语义交给 Tooltip，与其它图标按钮一致。
+                  -->
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <Button
+                        variant="outline"
+                        size="icon-sm"
+                        :disabled="store.starting || store.stopping || store.connState === 'idle'"
+                        @click="handleRefresh"
+                      >
+                        <RefreshCw class="size-3.5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>刷新传感器数据</TooltipContent>
+                  </Tooltip>
+                  <Button size="sm" variant="destructive" :disabled="store.starting || store.stopping || store.connState === 'idle'" @click="handleStop">
+                    <Square class="size-3.5" />停止
                   </Button>
-                  <Button size="xs" variant="outline" :disabled="store.starting || store.stopping || store.connState === 'idle'" @click="handleStop">
-                    <Square class="size-3" />停止
-                  </Button>
-                  <Separator orientation="vertical" class="h-4 mx-0.5" />
-                  <!-- 编辑布局开关：拖拽排序 / 删除卡片 -->
-                  <Button
-                    size="xs"
-                    :variant="overviewEditing ? 'default' : 'outline'"
-                    :title="overviewEditing ? '完成编辑' : '编辑卡片布局（拖拽排序 / 删除）'"
-                    @click="overviewEditing = !overviewEditing"
-                  >
-                    <PencilLine class="size-3" />{{ overviewEditing ? '完成' : '编辑布局' }}
-                  </Button>
-                  <!-- 添加卡片 -->
-                  <Popover v-model:open="overviewAddOpen">
+                  <Separator orientation="vertical" class="h-5 mx-0.5" />
+                  <!--
+                    布局：编辑模式（拖拽排序 / 移除）+ 添加卡片 收进一个图标按钮的
+                    popover。两件事都属于「卡片集合的操作」，低频且互斥于运行控制，
+                    各占一个文字按钮只会把横幅挤成两行。
+                    按钮在编辑态用主题色软底提示「正在编辑」。
+                  -->
+                  <Popover v-model:open="overviewEditOpen">
                     <PopoverTrigger as-child>
-                      <Button size="xs" variant="outline" :disabled="!addableOverviewCards.length" title="添加硬件卡片">
-                        <Plus class="size-3" />添加卡片
+                      <Button
+                        variant="outline"
+                        size="icon-sm"
+                        title="编辑卡片布局 / 添加卡片"
+                        :class="
+                          overviewEditing
+                            ? 'border-primary/40 bg-primary-soft text-primary-soft-text'
+                            : ''
+                        "
+                      >
+                        <PencilLine class="size-3.5" />
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent class="w-64 p-1.5" align="end">
+                      <!-- 编辑布局开关：点完即收起 popover（编辑态的反馈在卡片本身：把手与移除按钮出现） -->
+                      <button
+                        class="w-full flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm hover:bg-accent transition-colors text-left"
+                        @click="overviewEditing = !overviewEditing; overviewEditOpen = false"
+                      >
+                        <PencilLine class="size-4 text-primary shrink-0" />
+                        <span class="min-w-0 flex-1">
+                          <span class="block">{{ overviewEditing ? '完成编辑' : '编辑卡片布局' }}</span>
+                          <span class="block text-xs text-muted-foreground">拖拽排序、移除卡片</span>
+                        </span>
+                        <Check v-if="overviewEditing" class="size-4 text-primary shrink-0" />
+                      </button>
+
+                      <Separator class="my-1" />
+                      <p class="px-2.5 pb-0.5 pt-1 text-[11px] font-medium text-muted-foreground">添加卡片</p>
                       <button
                         v-for="c in addableOverviewCards"
                         :key="c.id"
@@ -1454,11 +1505,11 @@ watch(() => store.status?.ready, (ready, prev) => {
             </Card>
 
             <!-- PawnIO 驱动缺失提示（提权但驱动未装 → CPU 温度/功耗无法读取） -->
-            <Card v-if="store.pawnIoMissing" class="py-0 gap-0 mb-2.5 !border-amber-500/40 bg-amber-500/10">
-              <CardContent class="px-3.5 py-2 flex flex-wrap items-center gap-2 text-xs text-amber-600 dark:text-amber-400">
+            <Card v-if="store.pawnIoMissing" class="py-0 gap-0 mb-2.5 !border-warning/40 bg-warning-soft">
+              <CardContent class="px-3.5 py-2 flex flex-wrap items-center gap-2 text-xs text-warning-text">
                 <AlertTriangle class="size-4 shrink-0" />
                 <span class="flex-1 min-w-[200px]">检测到 PawnIO 驱动未安装，CPU 温度/功耗可能无法读取（误卸载过 PawnIO 等情况会触发）。点击下方按钮自动安装并重启监控内核。</span>
-                <Button size="xs" variant="outline" class="shrink-0 text-amber-600 dark:text-amber-400 border-amber-500/40 hover:bg-amber-500/10" :disabled="store.starting || store.stopping || repairingPawnio" @click="handleRepairPawnio">
+                <Button size="xs" variant="outline" class="shrink-0 text-warning-text border-warning/40 hover:bg-warning/10" :disabled="store.starting || store.stopping || repairingPawnio" @click="handleRepairPawnio">
                   <Loader2 v-if="repairingPawnio" class="size-3 mr-1 animate-spin" />
                   <RefreshCw v-else class="size-3 mr-1" />
                   {{ repairingPawnio ? '修复中...' : '检测并修复' }}
@@ -1523,32 +1574,32 @@ watch(() => store.status?.ready, (ready, prev) => {
             </VueDraggable>
 
             <!-- 断线提示 -->
-            <Card v-if="store.connState === 'disconnected'" class="mt-2.5 border-orange-500/40 py-0 gap-0">
+            <Card v-if="store.connState === 'disconnected'" class="mt-2.5 border-warning/40 py-0 gap-0">
               <CardContent class="pt-3 flex items-start gap-2 text-sm">
-                <AlertTriangle class="size-4 text-orange-500 mt-0.5 shrink-0" />
+                <AlertTriangle class="size-4 text-warning mt-0.5 shrink-0" />
                 <div>
-                  <div class="font-medium text-orange-600 dark:text-orange-400">SSE 连接断开</div>
+                  <div class="font-medium text-warning-text">SSE 连接断开</div>
                   <div class="text-xs text-muted-foreground mt-0.5">Kernel 可能正在重启，等待自动重连...</div>
                 </div>
               </CardContent>
             </Card>
 
             <!-- 错误提示 -->
-            <Card v-if="store.errorMsg" class="mt-2.5 border-red-500/40 py-0 gap-0">
+            <Card v-if="store.errorMsg" class="mt-2.5 border-danger/40 py-0 gap-0">
               <CardContent class="pt-3 flex items-start gap-2 text-sm">
-                <AlertTriangle class="size-4 text-red-500 mt-0.5 shrink-0" />
+                <AlertTriangle class="size-4 text-danger mt-0.5 shrink-0" />
                 <div>
-                  <div class="font-medium text-red-600 dark:text-red-400">错误</div>
+                  <div class="font-medium text-danger-text">错误</div>
                   <div class="text-xs font-mono mt-0.5 break-all">{{ store.errorMsg }}</div>
                 </div>
               </CardContent>
             </Card>
           </template>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- ===== 详细 ===== -->
-      <TabsContent value="details" class="flex-1 mt-4 tab-animate">
+      <TabsContent value="details" class="flex-1 tab-animate">
         <div v-if="!store.snapshot" key="no-snapshot" class="h-full flex flex-col items-center justify-center text-muted-foreground gap-2 pt-10">
           <Gauge class="size-12 opacity-30" />
           <p class="text-sm">无快照数据</p>
@@ -1558,7 +1609,7 @@ watch(() => store.status?.ready, (ready, prev) => {
           </Button>
         </div>
 
-        <ScrollArea v-else key="details-list" class="h-full pr-3">
+        <div v-else key="details-list">
           <div class="flex items-center justify-between mb-3">
             <p class="text-sm text-muted-foreground">{{ groups.length }} 个分组 / {{ store.status?.sensorCount ?? 0 }} 个传感器</p>
             <Button size="xs" variant="outline" @click="store.fetchSnapshot()">
@@ -1582,7 +1633,7 @@ watch(() => store.status?.ready, (ready, prev) => {
                 <AccordionContent class="px-4 pb-3 pt-0">
                   <!-- 无传感器数据占位（硬件已启用但 LHB 未检测到传感器，通常因权限不足或硬件不支持） -->
                   <div v-if="!g.sensors.length" class="py-3 flex items-center gap-2 text-xs text-muted-foreground">
-                    <AlertTriangle class="size-3.5 shrink-0 text-amber-500" />
+                    <AlertTriangle class="size-3.5 shrink-0 text-warning" />
                     <span>未检测到传感器数据（可能需要管理员权限或硬件不支持）</span>
                   </div>
                   <div v-for="hwGroup in groupSensors(g.sensors)" :key="hwGroup.hardware" class="py-2 border-t first:border-t-0">
@@ -1611,13 +1662,13 @@ watch(() => store.status?.ready, (ready, prev) => {
               </AccordionItem>
             </Card>
           </Accordion>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- ===== OSD 显示 ===== -->
-      <TabsContent value="osd" class="flex-1 mt-4 tab-animate">
-        <ScrollArea class="h-full pr-3">
-          <div class="max-w-2xl space-y-4 pb-4">
+      <TabsContent value="osd" class="flex-1 tab-animate">
+        <div>
+          <div class="space-y-4 pb-4">
             <!-- 悬浮窗开关 -->
             <Card>
               <CardHeader>
@@ -1665,7 +1716,7 @@ watch(() => store.status?.ready, (ready, prev) => {
                   />
                 </div>
 
-                <div v-if="!store.snapshot?.ready" class="flex items-start gap-2 text-xs text-amber-600 dark:text-amber-400 rounded-md border border-amber-500/30 bg-amber-500/5 p-2.5">
+                <div v-if="!store.snapshot?.ready" class="flex items-start gap-2 text-xs text-warning-text rounded-md border border-warning/30 bg-warning-soft p-2.5">
                   <AlertTriangle class="size-3.5 mt-0.5 shrink-0" />
                   <span>Kernel 未就绪，无法获取可用传感器列表。请先在概览页启动 Kernel。</span>
                 </div>
@@ -2234,13 +2285,13 @@ watch(() => store.status?.ready, (ready, prev) => {
 
             <!-- 预览卡片已移除（用户可在桌面悬浮窗直接看实际效果） -->
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- ===== 设置 ===== -->
-      <TabsContent value="settings" class="flex-1 mt-4 tab-animate">
-        <ScrollArea class="h-full pr-3">
-          <div class="max-w-2xl space-y-4 pb-4">
+      <TabsContent value="settings" class="flex-1 tab-animate">
+        <div>
+          <div class="space-y-4 pb-4">
             <!-- 控制 -->
             <Card>
               <CardHeader>
@@ -2296,7 +2347,7 @@ watch(() => store.status?.ready, (ready, prev) => {
                 </div>
                 <div class="flex justify-between">
                   <span class="text-muted-foreground">已安装</span>
-                  <Badge :variant="store.kernelInfo.exists ? 'default' : 'destructive'" :class="store.kernelInfo.exists ? 'bg-emerald-500 hover:bg-emerald-500' : ''">
+                  <Badge :variant="store.kernelInfo.exists ? 'default' : 'destructive'" :class="store.kernelInfo.exists ? 'bg-success hover:bg-success' : ''">
                     {{ store.kernelInfo.exists ? '是' : '否' }}
                   </Badge>
                 </div>
@@ -2347,10 +2398,10 @@ watch(() => store.status?.ready, (ready, prev) => {
                 <div class="flex items-center justify-between">
                   <span>当前权限</span>
                   <div class="flex items-center gap-1.5">
-                    <Badge :variant="store.snapshot?.isAdmin ? 'default' : 'outline'" :class="store.snapshot?.isAdmin ? 'bg-emerald-500 hover:bg-emerald-500' : ''">
+                    <Badge :variant="store.snapshot?.isAdmin ? 'default' : 'outline'" :class="store.snapshot?.isAdmin ? 'bg-success hover:bg-success' : ''">
                       {{ store.snapshot?.isAdmin ? '管理员' : '普通' }}
                     </Badge>
-                    <Badge v-if="store.status?.thingElevated" variant="outline" class="border-emerald-500/50 text-emerald-600 dark:text-emerald-400">
+                    <Badge v-if="store.status?.thingElevated" variant="outline" class="border-success/50 text-success-text">
                       <ShieldCheck class="size-2.5 mr-0.5" />提权
                     </Badge>
                   </div>
@@ -2363,13 +2414,13 @@ watch(() => store.status?.ready, (ready, prev) => {
                 <!-- 提权说明 -->
                 <div class="space-y-2">
                   <div class="flex items-start gap-2">
-                    <ShieldCheck class="size-3.5 mt-0.5 shrink-0 text-emerald-500" />
+                    <ShieldCheck class="size-3.5 mt-0.5 shrink-0 text-success" />
                     <div class="text-xs">
                       <span class="font-medium text-foreground">提权</span>：以管理员权限重启 Thing 自身，ThingHK 子进程继承权限。标志持久化，后续每次启动自动触发 UAC；可在概览页点击"取消提权"关闭。ThingHK 崩溃由 ProcessManager 自动重启，避免数据停止后 Thing 不感知。
                     </div>
                   </div>
                 </div>
-                <p v-if="store.status?.thingElevated" class="text-xs leading-relaxed text-emerald-600 dark:text-emerald-400 flex items-start gap-1.5">
+                <p v-if="store.status?.thingElevated" class="text-xs leading-relaxed text-success-text flex items-start gap-1.5">
                   <ShieldCheck class="size-3.5 mt-0.5 shrink-0" />
                   <span>提权模式：Thing 与 ThingHK 均以管理员权限运行，ProcessManager 可直接 kill，崩溃自动重启可用。</span>
                 </p>
@@ -2396,7 +2447,7 @@ watch(() => store.status?.ready, (ready, prev) => {
               </CardContent>
             </Card>
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
     </Tabs>
   </div>
@@ -2433,7 +2484,7 @@ watch(() => store.status?.ready, (ready, prev) => {
                   <label :for="'hw-' + hw.key" class="text-sm cursor-pointer truncate">{{ hw.name }}</label>
                   <span v-if="hw.key === 'motherboard'" class="text-[10px] text-muted-foreground/60">含 SuperIO/EC（自动联动）</span>
                 </div>
-                <Badge v-if="hw.requiresAdmin" variant="outline" class="text-[10px] shrink-0 text-amber-600 border-amber-500/40">
+                <Badge v-if="hw.requiresAdmin" variant="outline" class="text-[10px] shrink-0 text-warning-text border-warning/40">
                   需管理员
                 </Badge>
               </div>
@@ -2478,7 +2529,7 @@ watch(() => store.status?.ready, (ready, prev) => {
     <DialogContent class="max-w-md">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
-          <TriangleAlert class="size-4 text-amber-500" />
+          <TriangleAlert class="size-4 text-warning" />
           需先启动监控内核
         </DialogTitle>
         <DialogDescription>
diff --git a/src/modules/monitor/OsdWindow.vue b/src/modules/monitor/OsdWindow.vue
index bec28ee..5d35daf 100644
--- a/src/modules/monitor/OsdWindow.vue
+++ b/src/modules/monitor/OsdWindow.vue
@@ -325,7 +325,7 @@ const config = ref<OsdConfig | null>(null)
 /** 数据通道：显示项 key→value 映射（由主窗口每秒推送，替代全量快照） */
 const dataMap = ref<Record<string, number | null>>({})
 const networkSpeed = ref<NetworkSpeed | null>(null)
-let unlistenFns: UnlistenFn[] = []
+const unlistenFns: UnlistenFn[] = []
 
 // ===== 数据查询 =====
 function getOsdItemValue(item: OsdItem): number | null {
diff --git a/src/modules/monitor/format.ts b/src/modules/monitor/format.ts
index 5178461..2ca2312 100644
--- a/src/modules/monitor/format.ts
+++ b/src/modules/monitor/format.ts
@@ -13,18 +13,18 @@ export function fmt(v: number | null, digits = 1): string {
 /** 温度颜色：绿(<50) → 黄(<70) → 橙(<85) → 红(>=85) */
 export function tempColor(t: number | null): string {
   if (t == null) return 'text-muted-foreground'
-  if (t < 50) return 'text-emerald-500'
-  if (t < 70) return 'text-yellow-500'
-  if (t < 85) return 'text-orange-500'
-  return 'text-red-500'
+  if (t < 50) return 'text-success'
+  if (t < 70) return 'text-warning'
+  if (t < 85) return 'text-warning'
+  return 'text-danger'
 }
 
 /** 负载颜色：蓝(<50) → 紫(<80) → 红(>=80) */
 export function loadColor(v: number | null): string {
   if (v == null) return 'text-muted-foreground'
-  if (v < 50) return 'text-sky-500'
-  if (v < 80) return 'text-violet-500'
-  return 'text-red-500'
+  if (v < 50) return 'text-info'
+  if (v < 80) return 'text-warning'
+  return 'text-danger'
 }
 
 /** 格式化网速（bytes/s → 自适应 KB/s 或 MB/s） */
diff --git a/src/modules/monitor/index.ts b/src/modules/monitor/index.ts
index f9ceaf3..0585437 100644
--- a/src/modules/monitor/index.ts
+++ b/src/modules/monitor/index.ts
@@ -107,5 +107,5 @@ export const moduleConfig: ModuleConfig = {
       }
     }
   },
-  order: 40
+  order: 60
 }
diff --git a/src/modules/music/MusicModule.vue b/src/modules/music/MusicModule.vue
index b833fe2..339ce65 100644
--- a/src/modules/music/MusicModule.vue
+++ b/src/modules/music/MusicModule.vue
@@ -11,7 +11,6 @@ import {
   HardDriveDownload,
   History,
   Info,
-  Library,
   Link2,
   ListMusic,
   Loader2,
@@ -20,7 +19,6 @@ import {
   Plus,
   RotateCw,
   Search,
-  Settings as SettingsIcon,
   Square,
   Trash2,
   Upload,
@@ -61,7 +59,7 @@ import { Separator } from '@/components/ui/separator'
 import { Progress } from '@/components/ui/progress'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
 import { Empty, EmptyDescription, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -75,11 +73,11 @@ const logger = createLogger('music')
 
 // ===== 模块导航 =====
 const activeTab = ref('mymusic')
-const tabsListRef = useModuleTabs('music', activeTab, [
+useModuleTabs('music', activeTab, [
   { value: 'mymusic', label: '曲库' },
   { value: 'discover', label: '发现音乐' },
   { value: 'settings', label: '设置' }
-])
+], { alwaysVisible: true })
 
 // ===== 发现音乐：下载目标 =====
 const downloadTarget = ref<'local' | 'feiniu'>('local')
@@ -540,7 +538,7 @@ const taskStatusInfo = (
     case 'cancelling':
       return { label: '取消中', variant: 'outline' }
     case 'done':
-      return { label: '完成', variant: 'outline', class: 'bg-emerald-500/15 text-emerald-700 border-emerald-500/30 dark:text-emerald-400' }
+      return { label: '完成', variant: 'outline', class: 'bg-success-soft text-success-text border-success/30' }
     case 'error':
       return { label: '出错', variant: 'destructive' }
     case 'cancelled':
@@ -788,7 +786,7 @@ const envBadgeText = computed(() => {
 })
 const envBadgeClass = computed(() =>
   !store.envLoading && store.env?.musicdlOutdated
-    ? 'border-amber-500/40 text-amber-700 dark:text-amber-400'
+    ? 'border-warning/40 text-warning-text'
     : ''
 )
 
@@ -801,24 +799,15 @@ const RESULT_GRID = { gridTemplateColumns: '24px 36px minmax(0,1fr) 108px 52px 9
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-hidden flex flex-col">
+  <div class="min-h-full p-5 flex flex-col">
     <Tabs v-model="activeTab" class="min-h-0 flex-1 flex flex-col">
-      <!-- ===== 模块导航（与其他模块保持一致的 Tabs 写法） ===== -->
-      <div ref="tabsListRef" class="shrink-0">
-        <TabsList class="grid w-full max-w-md grid-cols-3 !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="mymusic" class="gap-1.5"><Library class="size-3.5" />曲库</TabsTrigger>
-          <TabsTrigger value="discover" class="gap-1.5"><Search class="size-3.5" />发现音乐</TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5"><SettingsIcon class="size-3.5" />设置</TabsTrigger>
-        </TabsList>
-      </div>
-
       <!-- ===== 曲库 ===== -->
-      <TabsContent value="mymusic" class="mt-4 min-h-0 flex-1 tab-animate">
+      <TabsContent value="mymusic" class="min-h-0 flex-1 tab-animate">
         <MyMusicLibrary />
       </TabsContent>
 
       <!-- ===== 发现音乐 ===== -->
-      <TabsContent value="discover" class="mt-4 min-h-0 flex-1 flex flex-col tab-animate">
+      <TabsContent value="discover" class="min-h-0 flex-1 flex flex-col tab-animate">
         <!-- 工具栏：搜索主操作留在首行 -->
         <header class="flex shrink-0 items-center gap-2 border-b pb-3">
         <div ref="searchBoxRef" class="relative min-w-0 flex-1 max-w-md" @focusin="historyOpen = true" @focusout="onHistoryFocusOut">
@@ -1089,7 +1078,7 @@ const RESULT_GRID = { gridTemplateColumns: '24px 36px minmax(0,1fr) 108px 52px 9
       </div>
 
       <!-- 结果列表 -->
-      <ScrollArea class="min-h-0 flex-1">
+      <div class="min-h-0 flex-1">
         <div class="pb-4">
           <div v-if="store.searching" class="space-y-1.5 pt-3">
             <div v-for="i in 8" :key="i" class="h-11 animate-pulse rounded-md bg-muted/40" />
@@ -1271,13 +1260,13 @@ const RESULT_GRID = { gridTemplateColumns: '24px 36px minmax(0,1fr) 108px 52px 9
             </div>
           </template>
         </div>
-      </ScrollArea>
+      </div>
       </TabsContent>
 
       <!-- ===== 设置（与其他模块一致的 Card 卡片式布局） ===== -->
-      <TabsContent value="settings" class="mt-4 min-h-0 flex-1 tab-animate">
-        <ScrollArea class="h-full pr-3">
-          <div class="flex max-w-2xl flex-col gap-4 pb-4">
+      <TabsContent value="settings" class="min-h-0 flex-1 tab-animate">
+        <div>
+          <div class="flex flex-col gap-4 pb-4">
           <!-- 连接 -->
           <Card>
             <CardHeader>
@@ -1679,7 +1668,7 @@ const RESULT_GRID = { gridTemplateColumns: '24px 36px minmax(0,1fr) 108px 52px 9
                       "
                       :class="
                         !store.envLoading && store.env?.musicdlOutdated
-                          ? 'border-amber-500/40 text-amber-700 dark:text-amber-400'
+                          ? 'border-warning/40 text-warning-text'
                           : ''
                       "
                     >
@@ -1695,7 +1684,7 @@ const RESULT_GRID = { gridTemplateColumns: '24px 36px minmax(0,1fr) 108px 52px 9
                     </Badge>
                     <span
                       class="text-[12.5px] tabular-nums"
-                      :class="!store.envLoading && store.env?.musicdlOutdated ? 'text-amber-700 dark:text-amber-400' : ''"
+                      :class="!store.envLoading && store.env?.musicdlOutdated ? 'text-warning-text' : ''"
                     >
                       <template v-if="store.envLoading">探测中…</template>
                       <template v-else-if="!store.env?.musicdlInstalled">—</template>
@@ -1798,7 +1787,7 @@ const RESULT_GRID = { gridTemplateColumns: '24px 36px minmax(0,1fr) 108px 52px 9
             </CardContent>
           </Card>
         </div>
-      </ScrollArea>
+      </div>
       </TabsContent>
     </Tabs>
 
diff --git a/src/modules/music/components/settings/ConnectionsSettings.vue b/src/modules/music/components/settings/ConnectionsSettings.vue
index 19d05cf..b704ad8 100644
--- a/src/modules/music/components/settings/ConnectionsSettings.vue
+++ b/src/modules/music/components/settings/ConnectionsSettings.vue
@@ -177,7 +177,7 @@ onMounted(() => store.refreshConnections())
           </div>
         </div>
         <div class="flex shrink-0 items-center gap-1">
-          <span v-if="c.loggedIn" class="mr-1 flex items-center gap-1 text-xs text-emerald-600">
+          <span v-if="c.loggedIn" class="mr-1 flex items-center gap-1 text-xs text-success-text">
             <Check class="size-3.5" /> 已登录
           </span>
           <Button
diff --git a/src/modules/music/index.ts b/src/modules/music/index.ts
index 26459dc..ac4a482 100644
--- a/src/modules/music/index.ts
+++ b/src/modules/music/index.ts
@@ -43,6 +43,6 @@ export const moduleConfig: ModuleConfig = {
         .catch(() => {})
     }
   },
-  // 默认排在「代理」之后、整体第二位（proxy=10、clipboard=20）
-  order: 15
+  // 默认第一位（音乐是常驻后台的播放器，入口最靠前）
+  order: 10
 }
diff --git a/src/modules/proxy/ProxyModule.vue b/src/modules/proxy/ProxyModule.vue
index c529d83..a3921ad 100644
--- a/src/modules/proxy/ProxyModule.vue
+++ b/src/modules/proxy/ProxyModule.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import {
-  Globe, Play, Square, RotateCw, Power, Zap, Plus, RefreshCw, Trash2,
-  Check, AlertCircle, Server, Settings as SettingsIcon, ListChecks,
-  Upload, Link2, Loader2, Download, Timer, Target, FolderOpen, Copy, DownloadCloud,
-  Waypoints, ArrowDown, ArrowUp, Activity, X
+  Play, Square, RotateCw, Zap, Plus, RefreshCw, Trash2,
+  Check, AlertCircle, Server, Settings as SettingsIcon,
+  Upload, Link2, Loader2, Download, Target, FolderOpen, Copy, DownloadCloud,
+  Waypoints, X
 } from '@lucide/vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { toast } from 'vue-sonner'
@@ -21,8 +21,7 @@ import { Badge } from '@/components/ui/badge'
 import { Switch } from '@/components/ui/switch'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
 import { Separator } from '@/components/ui/separator'
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -33,6 +32,7 @@ import {
   AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
   AlertDialogHeader, AlertDialogTitle
 } from '@/components/ui/alert-dialog'
+import { InfoGroup, KeyValueRow, StatusBadge } from '@/components/common'
 
 const store = useProxyStore()
 const logger = createLogger('proxy')
@@ -80,14 +80,19 @@ const onConfirmOpenChange = (open: boolean) => {
 }
 
 const activeTab = ref('overview')
-// 浮动标签切换器：注册到 TitleBar，滚动遮挡时自动显示
-const tabsListRef = useModuleTabs('proxy', activeTab, [
-  { value: 'overview', label: '概览' },
-  { value: 'connections', label: '连接' },
-  { value: 'proxies', label: '节点' },
-  { value: 'profiles', label: '订阅' },
-  { value: 'settings', label: '设置' }
-])
+// 标签切换器注册到 TitleBar 且常驻 —— 模块内不再渲染 Tab 行，把纵向空间还给内容
+useModuleTabs(
+  'proxy',
+  activeTab,
+  [
+    { value: 'overview', label: '概览' },
+    { value: 'connections', label: '连接' },
+    { value: 'proxies', label: '节点' },
+    { value: 'profiles', label: '订阅' },
+    { value: 'settings', label: '设置' }
+  ],
+  { alwaysVisible: true }
+)
 const starting = ref(false)
 const stopping = ref(false)
 const restarting = ref(false)
@@ -177,11 +182,6 @@ const scopeFilterOptions: { value: 'all' | ConnScope; label: string }[] = [
   { value: 'direct', label: '国内' },
   { value: 'proxy', label: '国外' }
 ]
-/** 顶部下载/上传速率（复用实时流量快照的整体速率） */
-const connTotalDownloadSec = computed(() => store.traffic?.downloadSpeed ?? 0)
-const connTotalUploadSec = computed(() => store.traffic?.uploadSpeed ?? 0)
-/** 命中规则总数 = 活跃连接数（每条连接命中一条规则） */
-const ruleHitCount = computed(() => connList.value.length)
 /** 按规则聚合当前连接，便于观察哪些规则被频繁命中 */
 const ruleHits = computed(() => {
   const map = new Map<string, number>()
@@ -455,13 +455,14 @@ const openFolder = async () => {
   }
 }
 
-// 延迟 Badge 样式（超时用醒目红色）
+// 延迟分级样式。四级全部落在规范语义色上，不再直接引 Tailwind 色阶：
+// 快=成功 / 中=警告 / 慢=危险浅底 / 超时=危险实心（最醒目）
 const delayBadgeClass = (delay: number | undefined) => {
-  if (delay === undefined) return 'border-transparent bg-muted text-muted-foreground'
-  if (delay === 0) return 'border-transparent bg-red-500 text-white'
-  if (delay < 150) return 'border-transparent bg-emerald-100 text-emerald-700'
-  if (delay < 400) return 'border-transparent bg-amber-100 text-amber-700'
-  return 'border-transparent bg-orange-100 text-orange-700'
+  if (delay === undefined) return 'border-transparent bg-neutral-soft text-neutral-text'
+  if (delay === 0) return 'border-transparent bg-danger text-white'
+  if (delay < 150) return 'border-transparent bg-success-soft text-success-text'
+  if (delay < 400) return 'border-transparent bg-warning-soft text-warning-text'
+  return 'border-transparent bg-danger-soft text-danger-text'
 }
 
 const delayText = (delay: number | undefined) => {
@@ -562,12 +563,24 @@ watch(running, async (val, old) => {
     await store.waitForApi()
     await store.refreshVersion()
     await loadProxiesWithError()
+    // 进程刚起来时如果用户就停在连接页，立刻补一次：否则要等下一轮 3s 轮询，
+    // 而 mihomo 起来后的头几秒 API 往往还没热身，轮询会连续失败（见 connTimer）
+    if (activeTab.value === 'connections') await store.refreshConnections()
+  }
+  if (!val && old) {
+    // 进程已停：清掉上一轮快照，否则连接页会一直列着那个已经结束的进程的连接
+    store.connections = null
   }
 })
 
 // 切换到节点 Tab 时，加载节点列表并自动测速（10s 节流：快速切换 Tab 时避免重复 IPC 洪峰）
 let lastAutoTestAt = 0
 watch(activeTab, async (tab) => {
+  // 连接页：进入即拉，不等 3s 轮询 —— 轮询只在停留期间跑，首次进入的空窗期
+  // 会让用户以为「没有连接」（实际是还没查过）
+  if (tab === 'connections' && running.value) {
+    await store.refreshConnections()
+  }
   if (tab === 'proxies' && running.value) {
     if (!Object.keys(store.proxies).length) {
       await loadProxiesWithError()
@@ -640,6 +653,9 @@ const onToggleSystemProxy = async (on: boolean) => {
   sysProxyLoading.value = true
   try {
     await store.toggleSystemProxy(on)
+    // 开启系统代理是「流量开始经过 mihomo」的时刻，立即拉一次连接快照：
+    // 用户多半接着就去连接页看效果，不该在那里等轮询（也不该看到上一轮的空结果）
+    if (on) await store.refreshConnections()
   } catch (e) {
     toast.error('操作失败', { description: String(e) })
   } finally {
@@ -777,9 +793,9 @@ const installStageText = computed(() => {
 
 const installStageColor = computed(() => {
   const stage = store.installProgress?.stage
-  if (stage === 'done') return 'text-emerald-500'
-  if (stage === 'error') return 'text-destructive'
-  if (stage === 'need_stop') return 'text-amber-500'
+  if (stage === 'done') return 'text-success'
+  if (stage === 'error') return 'text-danger'
+  if (stage === 'need_stop') return 'text-warning'
   return 'text-primary'
 })
 
@@ -1148,104 +1164,87 @@ watch(
 </script>
 
 <template>
-  <div class="h-full p-6">
-    <Tabs v-model="activeTab" class="h-full flex flex-col">
-      <div ref="tabsListRef">
-        <TabsList class="grid w-full grid-cols-5 max-w-md !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="overview" class="gap-1.5"><Globe class="size-3.5" />概览</TabsTrigger>
-          <TabsTrigger value="connections" class="gap-1.5"><Waypoints class="size-3.5" />连接</TabsTrigger>
-          <TabsTrigger value="proxies" class="gap-1.5"><Server class="size-3.5" />节点</TabsTrigger>
-          <TabsTrigger value="profiles" class="gap-1.5"><ListChecks class="size-3.5" />订阅</TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5"><SettingsIcon class="size-3.5" />设置</TabsTrigger>
-        </TabsList>
-      </div>
-
+  <div class="min-h-full p-5">
+    <Tabs v-model="activeTab" class="flex min-h-full w-full flex-col">
       <!-- 概览 -->
-      <TabsContent value="overview" class="flex-1 mt-4 tab-animate">
-        <ScrollArea class="h-full pr-3">
-        <div class="columns-1 md:columns-2 gap-4 [&>*]:mb-4 [&>*]:break-inside-avoid">
-          <!-- 实时流量 -->
-          <Card>
-            <CardHeader>
-              <CardTitle class="flex items-center justify-between text-base">
-                <span class="flex items-center gap-2"><Activity class="size-4 text-primary" />实时流量</span>
-                <Badge v-if="running" variant="outline" class="gap-1 text-xs">
-                  <span class="size-1.5 rounded-full bg-emerald-500" />实时更新
-                </Badge>
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="space-y-4 text-sm">
-              <div class="grid grid-cols-2 gap-4">
-                <div>
-                  <div class="flex items-center gap-1 text-muted-foreground text-xs mb-1">
-                    <ArrowDown class="size-3.5 text-emerald-500" />下载
-                  </div>
-                  <p class="text-lg font-semibold tabular-nums">{{ fmtSpeed(store.traffic?.downloadSpeed ?? 0) }}</p>
-                  <p class="text-xs text-muted-foreground tabular-nums">累计 {{ store.traffic ? fmtBytes(store.traffic.downloadTotal) : '--' }}</p>
+      <TabsContent value="overview" class="tab-animate">
+        <div class="flex flex-col gap-4">
+          <!-- 状态横幅：状态区 → 指标区 → 操作区，一行常驻（UI_DESIGN_SYSTEM §3.4） -->
+          <Card class="!py-0 !gap-0">
+            <CardContent class="flex flex-wrap items-center gap-x-6 gap-y-3 px-4 py-4">
+              <div class="flex items-center gap-2.5">
+                <span v-if="!store.initialized" class="flex items-center gap-1.5 text-[13px] text-muted-foreground">
+                  <Loader2 class="size-3.5 animate-spin" />加载中
+                </span>
+                <template v-else>
+                  <span v-if="running" class="flex items-center gap-1.5 text-[13px] text-success">
+                    <span class="size-2 rounded-full bg-success status-dot-pulse" />运行中
+                  </span>
+                  <span v-else class="flex items-center gap-1.5 text-[13px] text-muted-foreground">
+                    <span class="size-2 rounded-full bg-muted-foreground" />已停止
+                  </span>
+                </template>
+                <span class="text-[13px] text-fg-secondary">mihomo</span>
+              </div>
+              <div class="flex min-w-20 flex-col gap-0.5">
+                <span class="text-[11px] text-muted-foreground">内核</span>
+                <span
+                  class="text-lg font-semibold tabular-nums"
+                  :class="store.kernel?.exists ? 'text-foreground' : 'text-danger'"
+                >{{ store.kernel?.exists ? versionShort : '未安装' }}</span>
+              </div>
+              <div class="flex flex-wrap items-center gap-6">
+                <div class="flex min-w-24 flex-col gap-0.5">
+                  <span class="text-[11px] text-muted-foreground">下载</span>
+                  <span class="text-lg font-semibold tabular-nums text-data-down">{{ fmtSpeed(store.traffic?.downloadSpeed ?? 0) }}</span>
                 </div>
-                <div>
-                  <div class="flex items-center gap-1 text-muted-foreground text-xs mb-1">
-                    <ArrowUp class="size-3.5 text-rose-500" />上传
-                  </div>
-                  <p class="text-lg font-semibold tabular-nums">{{ fmtSpeed(store.traffic?.uploadSpeed ?? 0) }}</p>
-                  <p class="text-xs text-muted-foreground tabular-nums">累计 {{ store.traffic ? fmtBytes(store.traffic.uploadTotal) : '--' }}</p>
+                <div class="flex min-w-24 flex-col gap-0.5">
+                  <span class="text-[11px] text-muted-foreground">上传</span>
+                  <span class="text-lg font-semibold tabular-nums text-data-up">{{ fmtSpeed(store.traffic?.uploadSpeed ?? 0) }}</span>
+                </div>
+                <div class="flex min-w-20 flex-col gap-0.5">
+                  <span class="text-[11px] text-muted-foreground">累计流量</span>
+                  <span class="text-lg font-semibold tabular-nums text-foreground">{{ store.traffic ? fmtBytes((store.traffic.downloadTotal ?? 0) + (store.traffic.uploadTotal ?? 0)) : '—' }}</span>
+                </div>
+                <div class="flex min-w-12 flex-col gap-0.5">
+                  <span class="text-[11px] text-muted-foreground">活跃连接</span>
+                  <span class="text-lg font-semibold tabular-nums text-foreground">{{ store.traffic?.activeConnections ?? '—' }}</span>
                 </div>
               </div>
-              <Separator />
-              <div class="flex items-center justify-between">
-                <span class="flex items-center gap-1.5 text-muted-foreground">
-                  <Waypoints class="size-3.5" />活跃连接
-                </span>
-                <span class="font-semibold tabular-nums">{{ store.traffic?.activeConnections ?? '--' }}</span>
+              <div class="ml-auto flex gap-2">
+                <Button v-if="!running" size="sm" :disabled="starting" @click="handleStart">
+                  <Loader2 v-if="starting" class="size-3.5 animate-spin" />
+                  <Play v-else class="size-3.5" />启动
+                </Button>
+                <template v-else>
+                  <Button size="sm" variant="outline" :disabled="restarting" @click="handleRestart">
+                    <Loader2 v-if="restarting" class="size-3.5 animate-spin" />
+                    <RotateCw v-else class="size-3.5" />重启
+                  </Button>
+                  <Button size="sm" variant="destructive" :disabled="stopping" @click="handleStop">
+                    <Loader2 v-if="stopping" class="size-3.5 animate-spin" />
+                    <Square v-else class="size-3.5" />停止
+                  </Button>
+                </template>
               </div>
             </CardContent>
           </Card>
+
+          <div class="columns-1 gap-4 md:columns-2 [&>*]:mb-4 [&>*:last-child]:mb-0 [&>*]:break-inside-avoid">
           <!-- 内核状态 -->
-          <Card>
-            <CardHeader>
-              <CardTitle class="flex items-center justify-between text-base">
-                <span class="flex items-center gap-2"><Server class="size-4 text-primary" />内核</span>
-                <Button
-                  v-if="store.kernel?.exists"
-                  size="xs" variant="outline"
-                  :disabled="checkingUpdate"
-                  @click="handleCheckUpdate"
-                >
-                  <Loader2 v-if="checkingUpdate" class="size-3 animate-spin" />
-                  <Download v-else key="icon-download" class="size-3" />检查更新
-                </Button>
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="space-y-3 text-sm">
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">状态</span>
-                <template v-if="!store.initialized">
-                  <span class="flex items-center gap-1.5 text-xs text-muted-foreground">
-                    <Loader2 class="size-3 animate-spin" />加载中...
-                  </span>
-                </template>
-                <template v-else>
-                  <Badge v-if="store.kernel?.exists" variant="default" class="gap-1 bg-emerald-500 hover:bg-emerald-500">
-                    <Check class="size-3" />已安装
-                  </Badge>
-                  <Badge v-else variant="destructive" class="gap-1">
-                    <AlertCircle class="size-3" />未安装
-                  </Badge>
-                </template>
-              </div>
-              <div v-if="store.kernel?.exists" class="flex items-center justify-between">
-                <span class="text-muted-foreground">当前版本</span>
-                <Tooltip>
-                  <TooltipTrigger as-child>
-                    <Badge variant="secondary" class="font-mono text-xs cursor-default">
-                      {{ versionShort }}
-                    </Badge>
-                  </TooltipTrigger>
-                  <TooltipContent>{{ store.kernel?.version ?? '' }}</TooltipContent>
-                </Tooltip>
-              </div>
-              <div v-if="kernelUpdateInfo" class="flex items-center justify-between">
-                <span class="text-muted-foreground">最新版本</span>
+          <InfoGroup variant="card" title="内核">
+            <template #action>
+              <Button
+                v-if="store.kernel?.exists"
+                size="xs" variant="outline"
+                :disabled="checkingUpdate"
+                @click="handleCheckUpdate"
+              >
+                <Loader2 v-if="checkingUpdate" class="size-3 animate-spin" />
+                <Download v-else key="icon-download" class="size-3" />检查更新
+              </Button>
+            </template>
+            <KeyValueRow v-if="kernelUpdateInfo" label="最新版本">
                 <span class="font-mono text-xs flex items-center gap-2">
                   {{ kernelUpdateInfo.latestVersion }}
                   <Button
@@ -1257,12 +1256,11 @@ watch(
                   >
                     <Download key="icon-download" class="size-3" />更新
                   </Button>
-                  <Check v-else key="icon-updated" class="size-3 text-emerald-500" />
+                  <Check v-else key="icon-updated" class="size-3 text-success" />
                 </span>
-              </div>
-              <div class="flex items-center justify-between gap-3">
-                <span class="text-muted-foreground shrink-0">路径</span>
-                <div class="flex items-center gap-1.5 min-w-0">
+              </KeyValueRow>
+              <KeyValueRow label="路径">
+                <span class="flex min-w-0 items-center gap-1.5">
                   <Tooltip>
                     <TooltipTrigger as-child>
                       <span class="font-mono text-xs text-right truncate cursor-default">{{ pathDisplay || pathShort }}</span>
@@ -1287,8 +1285,11 @@ watch(
                       <TooltipContent>在文件夹中显示</TooltipContent>
                     </Tooltip>
                   </template>
-                </div>
-              </div>
+                </span>
+              </KeyValueRow>
+            <KeyValueRow label="PID" :value="store.status.pid ?? '—'" mono />
+            <KeyValueRow label="API 版本" :value="store.version || '—'" mono />
+            <KeyValueRow label="重启次数" :value="store.status.restartCount" mono />
 
               <!-- 更新内核区块：检查到更新且用户点击"更新"后展开（复用首次安装的下载源选择 UI） -->
               <div
@@ -1448,274 +1449,150 @@ watch(
                   </Button>
                 </div>
               </div>
-            </CardContent>
-          </Card>
-
-          <!-- 运行状态 -->
-          <Card>
-            <CardHeader>
-              <CardTitle class="flex items-center gap-2 text-base">
-                <Zap class="size-4 text-primary" />运行状态
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="space-y-3 text-sm">
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">mihomo</span>
-                <template v-if="!store.initialized">
-                  <span class="flex items-center gap-1.5 text-xs text-muted-foreground">
-                    <Loader2 class="size-3 animate-spin" />加载中...
-                  </span>
-                </template>
-                <template v-else>
-                  <span v-if="running" class="flex items-center gap-1 text-emerald-500">
-                    <span class="size-2 rounded-full bg-emerald-500" />运行中
-                  </span>
-                  <span v-else class="flex items-center gap-1 text-muted-foreground">
-                    <span class="size-2 rounded-full bg-muted-foreground" />已停止
-                  </span>
-                </template>
-              </div>
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">PID</span>
-                <span class="font-mono text-xs">{{ store.status.pid ?? '—' }}</span>
-              </div>
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">API 版本</span>
-                <span class="font-mono text-xs">{{ store.version || '—' }}</span>
-              </div>
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">重启次数</span>
-                <span class="font-mono text-xs">{{ store.status.restartCount }}</span>
-              </div>
-              <Separator />
-              <div class="flex gap-2">
-                <Button v-if="!running" key="btn-start" size="sm" :disabled="starting" @click="handleStart">
-                  <Loader2 v-if="starting" key="starting-loading" class="size-3.5 animate-spin" />
-                  <Play v-else key="starting-icon" class="size-3.5" />启动
-                </Button>
-                <template v-else key="btn-stop-group">
-                  <Button size="sm" variant="destructive" :disabled="stopping" @click="handleStop">
-                    <Loader2 v-if="stopping" key="stopping-loading" class="size-3.5 animate-spin" />
-                    <Square v-else key="stopping-icon" class="size-3.5" />停止
-                  </Button>
-                  <Button size="sm" variant="outline" :disabled="restarting" @click="handleRestart">
-                    <Loader2 v-if="restarting" key="restarting-loading" class="size-3.5 animate-spin" />
-                    <RotateCw v-else key="restarting-icon" class="size-3.5" />重启
-                  </Button>
-                </template>
-              </div>
-            </CardContent>
-          </Card>
-
-          <!-- 当前订阅 & 模式 -->
-          <Card>
-            <CardHeader>
-              <CardTitle class="flex items-center gap-2 text-base">
-                <ListChecks class="size-4 text-primary" />订阅与模式
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="space-y-3 text-sm">
-              <div class="flex items-center justify-between gap-3">
-                <span class="text-muted-foreground shrink-0">当前订阅</span>
-                <span class="text-right truncate">{{ currentProfile?.name ?? '无' }}</span>
-              </div>
-              <Separator />
-              <div class="flex items-center justify-between">
-                <span class="text-muted-foreground">运行模式</span>
-                <div class="flex gap-1">
-                  <Button
-                    v-for="m in modeOptions" :key="m.value"
-                    size="xs"
-                    :variant="store.settings?.mode === m.value ? 'default' : 'outline'"
-                    :disabled="!running && store.settings?.mode !== m.value"
-                    @click="changeMode(m.value)"
-                  >{{ m.label }}</Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+          </InfoGroup>
 
           <!-- 当前节点 -->
-          <Card>
-            <CardHeader>
-              <CardTitle class="flex items-center gap-2 text-base">
-                <Target class="size-4 text-primary" />当前节点
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="space-y-3 text-sm">
-              <template v-if="mainGroupName" key="has-main">
-                <div class="flex items-center justify-between">
-                  <span class="text-muted-foreground">代理组</span>
-                  <span class="font-medium">{{ mainGroupName }}</span>
-                </div>
-                <div class="flex items-center justify-between gap-3">
-                  <span class="text-muted-foreground shrink-0">当前节点</span>
-                  <span class="text-right truncate">{{ mainGroupNow || '—' }}</span>
-                </div>
-                <div class="flex items-center justify-between">
-                  <span class="text-muted-foreground">延迟</span>
-                  <Badge variant="outline" :class="delayBadgeClass(currentNodeDelay)">{{ delayText(currentNodeDelay) }}</Badge>
-                </div>
-                <Separator />
-                <div class="space-y-2">
-                  <Label class="text-xs text-muted-foreground">快捷切换</Label>
-                  <Select :model-value="mainGroupNow" @update:model-value="(v) => quickSwitchNode(String(v))">
-                    <SelectTrigger class="w-full">
-                      <SelectValue :placeholder="mainGroupNow || '选择节点'" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem v-for="node in mainGroupNodes" :key="node" :value="node">
-                        {{ node }}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </template>
-              <div v-else key="no-main" class="text-center text-muted-foreground py-4 text-xs">
-                {{ running ? '暂无可选节点，请先导入订阅' : 'mihomo 未运行' }}
+          <InfoGroup variant="card" title="当前节点">
+            <KeyValueRow label="代理组" :value="mainGroupName || '—'" />
+            <KeyValueRow label="当前节点" :value="mainGroupNow || '—'" />
+            <KeyValueRow label="延迟">
+              <Badge v-if="mainGroupName" variant="outline" :class="delayBadgeClass(currentNodeDelay)">{{ delayText(currentNodeDelay) }}</Badge>
+              <span v-else class="text-[13px] text-muted-foreground">—</span>
+            </KeyValueRow>
+            <template #footer>
+              <div class="space-y-2">
+                <Label class="text-xs text-muted-foreground">快捷切换</Label>
+                <Select :disabled="!running || !mainGroupName" :model-value="mainGroupNow" @update:model-value="(v) => quickSwitchNode(String(v))">
+                  <SelectTrigger class="w-full">
+                    <SelectValue :placeholder="mainGroupNow || '选择节点'" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem v-for="node in mainGroupNodes" :key="node" :value="node">
+                      {{ node }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
-            </CardContent>
-          </Card>
+            </template>
+          </InfoGroup>
 
-          <!-- 自动切换 -->
-          <Card :class="{ 'opacity-60': !running && autoSwitchEnabled }">
-            <CardHeader>
-              <CardTitle class="flex items-center justify-between text-base">
-                <span class="flex items-center gap-2">
-                  <Timer class="size-4 text-primary" />自动切换节点
+          <!-- 订阅与代理 -->
+          <InfoGroup variant="card" title="订阅与代理">
+            <KeyValueRow label="当前订阅" :value="currentProfile?.name ?? '—'" />
+            <KeyValueRow label="运行模式">
+              <div class="flex gap-1">
+                <Button
+                  v-for="m in modeOptions" :key="m.value"
+                  size="xs"
+                  :variant="store.settings?.mode === m.value ? 'default' : 'outline'"
+                  :disabled="!running && store.settings?.mode !== m.value"
+                  @click="changeMode(m.value)"
+                >{{ m.label }}</Button>
+              </div>
+            </KeyValueRow>
+            <KeyValueRow label="系统代理">
+              <div class="flex items-center gap-2">
+                <span class="text-[13px] text-muted-foreground">
+                  {{ store.systemProxy ? `指向 127.0.0.1:${store.settings?.mixedPort ?? 7890}` : '已关闭' }}
                 </span>
                 <Switch
-                  :model-value="autoSwitchEnabled"
-                  :disabled="!running"
-                  @update:model-value="onToggleAutoSwitch"
+                  :model-value="store.systemProxy"
+                  :disabled="sysProxyLoading || !running"
+                  @update:model-value="onToggleSystemProxy"
                 />
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="space-y-3 text-sm" :class="{ 'pointer-events-none': !autoSwitchEnabled }">
-              <div class="grid grid-cols-3 gap-3">
-                <div class="grid gap-1.5">
-                  <Label class="text-xs text-muted-foreground">目标代理组</Label>
-                  <Select :model-value="autoSwitchTargetGroup || '__default__'" @update:model-value="(v) => { autoSwitchTargetGroup = v === '__default__' ? '' : String(v); saveAutoSwitchSettings() }">
-                    <SelectTrigger class="w-full">
-                      <SelectValue placeholder="主代理组" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="__default__">主代理组</SelectItem>
-                      <SelectItem v-for="[gname] in selectorGroups" :key="gname" :value="gname">{{ gname }}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div class="grid gap-1.5">
-                  <Label class="text-xs text-muted-foreground">测试间隔</Label>
-                  <Select :model-value="autoSwitchInterval" @update:model-value="(v) => onAutoSwitchIntervalChange(v)">
-                    <SelectTrigger class="w-full">
-                      <SelectValue placeholder="选择间隔" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem :value="1">每 1 分钟</SelectItem>
-                      <SelectItem :value="5">每 5 分钟</SelectItem>
-                      <SelectItem :value="10">每 10 分钟</SelectItem>
-                      <SelectItem :value="30">每 30 分钟</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div class="grid gap-1.5">
-                  <Label class="text-xs text-muted-foreground">地区筛选</Label>
-                  <Select :model-value="autoSwitchRegion || '__all__'" @update:model-value="(v) => { autoSwitchRegion = v === '__all__' ? '' : String(v); saveAutoSwitchSettings() }">
-                    <SelectTrigger class="w-full">
-                      <SelectValue placeholder="全部地区" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="__all__">全部地区</SelectItem>
-                      <SelectItem v-for="r in regionOptions" :key="r" :value="r">{{ r }}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
               </div>
-              <p class="text-xs text-muted-foreground leading-relaxed">
+            </KeyValueRow>
+          </InfoGroup>
+
+          <!-- 自动切换 -->
+          <InfoGroup variant="card" title="自动切换节点" :class="{ 'opacity-60': !running && autoSwitchEnabled }">
+            <template #action>
+              <Switch
+                :model-value="autoSwitchEnabled"
+                :disabled="!running"
+                @update:model-value="onToggleAutoSwitch"
+              />
+            </template>
+            <div class="space-y-3" :class="{ 'pointer-events-none': !autoSwitchEnabled }">
+              <div class="grid gap-1.5">
+                <Label class="text-xs text-muted-foreground">目标代理组</Label>
+                <Select :model-value="autoSwitchTargetGroup || '__default__'" @update:model-value="(v) => { autoSwitchTargetGroup = v === '__default__' ? '' : String(v); saveAutoSwitchSettings() }">
+                  <SelectTrigger size="sm" class="w-full">
+                    <SelectValue placeholder="主代理组" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__default__">主代理组</SelectItem>
+                    <SelectItem v-for="[gname] in selectorGroups" :key="gname" :value="gname">{{ gname }}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="grid gap-1.5">
+                <Label class="text-xs text-muted-foreground">测试间隔</Label>
+                <Select :model-value="autoSwitchInterval" @update:model-value="(v) => onAutoSwitchIntervalChange(v)">
+                  <SelectTrigger size="sm" class="w-full">
+                    <SelectValue placeholder="选择间隔" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="1">每 1 分钟</SelectItem>
+                    <SelectItem :value="5">每 5 分钟</SelectItem>
+                    <SelectItem :value="10">每 10 分钟</SelectItem>
+                    <SelectItem :value="30">每 30 分钟</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="grid gap-1.5">
+                <Label class="text-xs text-muted-foreground">地区筛选</Label>
+                <Select :model-value="autoSwitchRegion || '__all__'" @update:model-value="(v) => { autoSwitchRegion = v === '__all__' ? '' : String(v); saveAutoSwitchSettings() }">
+                  <SelectTrigger size="sm" class="w-full">
+                    <SelectValue placeholder="全部地区" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">全部地区</SelectItem>
+                    <SelectItem v-for="r in regionOptions" :key="r" :value="r">{{ r }}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <template #footer>
+              <p class="text-xs leading-relaxed text-muted-foreground">
                 定时测试「{{ autoSwitchTargetGroup || mainGroupName || '主代理组' }}」{{ autoSwitchRegion ? `中「${autoSwitchRegion}」地区` : '全部' }}有效节点的延迟，
                 自动切换至最优节点。当前 {{ filteredNodes.length }} 个节点在候选范围内。
               </p>
-            </CardContent>
-          </Card>
+            </template>
+          </InfoGroup>
 
-          <!-- 系统代理 -->
-          <Card :class="{ 'opacity-60': sysProxyLoading }">
-            <CardHeader>
-              <CardTitle class="flex items-center gap-2 text-base">
-                <Power class="size-4 text-primary" />系统代理
-              </CardTitle>
-            </CardHeader>
-            <CardContent class="flex items-center justify-between">
-              <div class="space-y-1">
-                <p class="text-sm">Windows 系统代理</p>
-                <p class="text-xs text-muted-foreground">
-                  {{ store.systemProxy ? `指向 127.0.0.1:${store.settings?.mixedPort ?? 7890}` : '已关闭' }}
-                </p>
-              </div>
-              <Switch
-                :model-value="store.systemProxy"
-                :disabled="sysProxyLoading || !running"
-                @update:model-value="onToggleSystemProxy"
-              />
-            </CardContent>
-          </Card>
+          </div>
         </div>
-        </ScrollArea>
       </TabsContent>
 
       <!-- 连接 -->
-      <TabsContent value="connections" class="flex-1 mt-4 tab-animate">
-        <div v-if="!running" key="conn-not-running" class="h-full flex flex-col items-center justify-center text-muted-foreground gap-2 pt-10 pr-10">
-          <Waypoints class="size-12 opacity-30" />
-          <p class="text-sm">mihomo 未运行，请先在概览页启动</p>
-        </div>
-        <div v-else class="h-full flex flex-col gap-4 pr-3">
-          <!-- 顶部统计 -->
-          <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
-            <Card>
-              <CardContent class="py-3">
-                <div class="flex items-center gap-1.5 text-muted-foreground text-xs mb-1"><Waypoints class="size-3.5" />活跃连接</div>
-                <p class="text-xl font-semibold tabular-nums">{{ connList.length }}</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent class="py-3">
-                <div class="flex items-center gap-1.5 text-muted-foreground text-xs mb-1"><ArrowDown class="size-3.5 text-emerald-500" />下载速率</div>
-                <p class="text-xl font-semibold tabular-nums">{{ fmtSpeed(connTotalDownloadSec) }}</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent class="py-3">
-                <div class="flex items-center gap-1.5 text-muted-foreground text-xs mb-1"><ArrowUp class="size-3.5 text-rose-500" />上传速率</div>
-                <p class="text-xl font-semibold tabular-nums">{{ fmtSpeed(connTotalUploadSec) }}</p>
-              </CardContent>
-            </Card>
-            <Card>
-              <CardContent class="py-3">
-                <div class="flex items-center gap-1.5 text-muted-foreground text-xs mb-1"><Target class="size-3.5" />命中规则</div>
-                <p class="text-xl font-semibold tabular-nums">{{ ruleHitCount }}</p>
-              </CardContent>
-            </Card>
-          </div>
-
-          <!-- 规则命中分布 -->
-          <Card>
-            <CardHeader class="pb-2">
-              <CardTitle class="text-sm flex items-center gap-2"><Target class="size-3.5 text-primary" />规则命中</CardTitle>
-            </CardHeader>
-            <CardContent class="pt-0">
-              <div v-if="!ruleHits.length" class="text-xs text-muted-foreground py-2">暂无连接</div>
-              <div v-else class="space-y-1.5">
-                <div v-for="r in ruleHits.slice(0, 6)" :key="r.rule" class="flex items-baseline gap-2 text-xs">
-                  <span class="w-1.5 h-1.5 rounded-full bg-primary shrink-0 self-center" />
-                  <span class="font-medium shrink-0">{{ translateRule(r.rule) }}</span>
-                  <span class="flex-1 min-w-0 truncate text-muted-foreground">
-                    <template v-if="ruleDesc(r.rule)">（{{ ruleDesc(r.rule) }}）</template>
-                  </span>
-                  <span class="shrink-0 tabular-nums">×{{ r.count }}</span>
-                </div>
-              </div>
+      <TabsContent value="connections" class="tab-animate">
+        <div class="flex min-h-full flex-col gap-4">
+          <!-- 指标行：与概览横幅同构；活跃连接后紧跟规则命中 chips，随内容向右延伸 -->
+          <Card class="!py-0 !gap-0">
+            <CardContent class="flex flex-wrap items-center gap-x-6 gap-y-3 px-4 py-4">
+            <div class="flex min-w-12 flex-col gap-0.5">
+              <span class="text-[11px] text-muted-foreground">活跃连接</span>
+              <span class="text-lg font-semibold tabular-nums" :class="running ? 'text-foreground' : 'text-muted-foreground'">{{ connList.length }}</span>
+            </div>
+            <!-- 规则命中：内联摘要（chips），紧挨活跃连接，命中项变化时向右延伸（超出后块内换行） -->
+            <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
+              <span class="flex items-center gap-1.5 font-medium text-fg-secondary">
+                <Target class="size-3.5" />规则命中
+              </span>
+              <template v-if="ruleHits.length">
+                <span
+                  v-for="r in ruleHits.slice(0, 6)"
+                  :key="r.rule"
+                  class="flex items-center gap-1.5 rounded-sm bg-neutral-soft px-2 py-0.5 text-neutral-text"
+                  :title="ruleDesc(r.rule)"
+                >
+                  {{ translateRule(r.rule) }}
+                  <span class="tabular-nums opacity-70">×{{ r.count }}</span>
+                </span>
+              </template>
+              <span v-else class="text-muted-foreground">暂无连接</span>
+            </div>
             </CardContent>
           </Card>
 
@@ -1725,7 +1602,7 @@ watch(
               <div class="flex items-center justify-between gap-3">
                 <CardTitle class="text-sm flex items-center gap-2"><Waypoints class="size-3.5 text-primary" />当前连接</CardTitle>
                 <div class="flex items-center gap-2">
-                  <Input v-model="connFilter" placeholder="按进程/域名/规则过滤" class="h-8 w-56" />
+                  <Input v-model="connFilter" placeholder="按进程/域名/规则过滤" class="h-8 w-56" :disabled="!running" />
                   <Button size="xs" variant="outline" :disabled="!connList.length" @click="closeAllConnections">
                     <Square class="size-3" />断开全部
                   </Button>
@@ -1743,7 +1620,7 @@ watch(
               </div>
             </CardHeader>
             <CardContent class="flex-1 min-h-0 overflow-hidden pt-0">
-              <ScrollArea class="h-full">
+              <div>
                 <table class="w-full text-xs">
                   <thead class="sticky top-0 z-10 bg-card text-muted-foreground">
                     <tr class="border-b">
@@ -1756,21 +1633,18 @@ watch(
                     </tr>
                   </thead>
                   <tbody>
-                    <tr v-for="c in filteredConnections" :key="c.id" class="border-b last:border-0 hover:bg-muted/40">
+                    <tr v-for="c in filteredConnections" :key="c.id" class="border-b last:border-0 hover:bg-hover">
                       <td class="py-2 px-2 align-baseline">
                         <span class="font-medium truncate block max-w-[140px]">{{ connProcess(c) }}</span>
                         <span class="text-muted-foreground">{{ connSource(c) }}</span>
                       </td>
                       <td class="py-2 px-2 align-baseline">
                         <div class="flex items-center gap-1.5">
-                          <Badge
+                          <StatusBadge
                             v-if="connScopeOf(c) === 'direct'"
-                            variant="outline" class="h-4 px-1.5 text-[10px] shrink-0 border-emerald-500 text-emerald-500"
-                          >国内</Badge>
-                          <Badge
-                            v-else
-                            variant="outline" class="h-4 px-1.5 text-[10px] shrink-0 border-sky-500 text-sky-500"
-                          >国外</Badge>
+                            variant="success" size="sm"
+                          >国内</StatusBadge>
+                          <StatusBadge v-else variant="info" size="sm">国外</StatusBadge>
                           <span class="truncate block max-w-[140px]">{{ connHost(c) }}</span>
                         </div>
                         <span class="text-muted-foreground">{{ c.metadata?.network }} / {{ c.metadata?.type }}</span>
@@ -1781,29 +1655,37 @@ watch(
                       <td class="py-2 px-2 text-right tabular-nums align-baseline">{{ fmtBytes(c.download) }}</td>
                       <td class="py-2 px-2 text-right tabular-nums align-baseline">{{ fmtBytes(c.upload) }}</td>
                       <td class="py-2 px-2 text-center align-baseline">
-                        <Button size="icon" variant="ghost" class="size-6" title="断开连接" @click="store.closeConnection(c.id)">
+                        <Button size="icon-sm" variant="ghost" title="断开连接" @click="store.closeConnection(c.id)">
                           <X class="size-3.5" />
                         </Button>
                       </td>
                     </tr>
+                    <!--
+                      空态分三种，别让用户把「还没查过」当成「没有连接」：
+                      未运行 / 查询中（store.connections 仍为 null）/ 确实为空
+                    -->
                     <tr v-if="!connList.length">
-                      <td colspan="6" class="text-center text-muted-foreground py-8">暂无活跃连接</td>
+                      <td colspan="6" class="text-center text-muted-foreground py-8">
+                        {{
+                          !running
+                            ? 'mihomo 未运行 — 启动后这里会显示经过代理的连接'
+                            : store.connections === null
+                              ? '正在读取连接…'
+                              : '暂无活跃连接'
+                        }}
+                      </td>
                     </tr>
                   </tbody>
                 </table>
-              </ScrollArea>
+              </div>
             </CardContent>
           </Card>
         </div>
       </TabsContent>
 
       <!-- 节点 -->
-      <TabsContent value="proxies" class="flex-1 mt-4 tab-animate">
-        <div v-if="!running" key="not-running" class="h-full flex flex-col items-center justify-center text-muted-foreground gap-2 pt-10 pr-10">
-          <Server class="size-12 opacity-30" />
-          <p class="text-sm">mihomo 未运行，请先在概览页启动</p>
-        </div>
-        <ScrollArea v-else key="proxy-list" class="h-full pr-3">
+      <TabsContent value="proxies" class="tab-animate">
+        <div>
           <div class="flex items-center justify-between mb-3">
             <p v-if="!groups.length" class="text-sm text-muted-foreground">暂无代理组</p>
             <p v-else class="text-sm text-muted-foreground">{{ groups.length }} 个代理组</p>
@@ -1828,7 +1710,7 @@ watch(
                 <AccordionTrigger class="px-4 py-2.5 hover:no-underline">
                   <div class="flex items-center justify-between w-full pr-2">
                     <span class="flex items-center gap-2">
-                      <Server class="size-4 text-primary" />
+                      <Server class="size-4 text-fg-secondary" />
                       <span class="font-medium">{{ gname }}</span>
                       <span class="text-xs font-normal text-muted-foreground">{{ group.type }}</span>
                       <span v-if="group.now" class="text-xs text-primary truncate max-w-32">{{ group.now }}</span>
@@ -1851,8 +1733,8 @@ watch(
                     <button
                       v-for="node in group.all" :key="node"
                       type="button"
-                      class="flex items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-xs transition-colors hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                      :class="group.now === node ? 'border-primary bg-primary/10' : 'border-border'"
+                      class="flex items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-xs transition-colors hover:bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
+                      :class="group.now === node ? 'border-primary bg-primary-soft' : 'border-border'"
                       :disabled="group.type !== 'Selector'"
                       @click="selectNode(gname, node)"
                     >
@@ -1866,13 +1748,13 @@ watch(
               </AccordionItem>
             </Card>
           </Accordion>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- 订阅 -->
-      <TabsContent value="profiles" class="flex-1 mt-4 tab-animate">
-        <ScrollArea class="h-full pr-3">
-        <div class="space-y-4 max-w-3xl">
+      <TabsContent value="profiles" class="flex-1 min-h-0 tab-animate">
+        <div>
+        <div class="space-y-4">
           <Card>
             <CardHeader class="pb-3">
               <CardTitle class="flex items-center gap-2 text-base">
@@ -1907,7 +1789,7 @@ watch(
                 <div
                   v-for="p in store.settings.profiles" :key="p.id"
                   class="flex items-center gap-3 rounded-md border p-3"
-                  :class="store.settings.currentProfile === p.id ? 'border-primary bg-primary/5' : 'border-border'"
+                  :class="store.settings.currentProfile === p.id ? 'border-primary bg-primary-soft' : 'border-border'"
                 >
                   <div class="flex-1 min-w-0 space-y-1">
                     <div class="flex items-center gap-2">
@@ -1953,13 +1835,13 @@ watch(
             </CardContent>
           </Card>
         </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- 设置 -->
-      <TabsContent value="settings" class="flex-1 mt-4 tab-animate">
-        <ScrollArea class="h-full pr-3">
-        <Card class="max-w-2xl">
+      <TabsContent value="settings" class="tab-animate">
+        <div>
+        <Card>
           <CardHeader>
             <CardTitle class="flex items-center gap-2 text-base">
               <SettingsIcon class="size-4 text-primary" />基础设置
@@ -1967,11 +1849,10 @@ watch(
           </CardHeader>
           <CardContent class="space-y-4">
             <!-- 说明文字（保存按钮已移至顶部标签栏） -->
-            <p class="text-xs text-muted-foreground rounded-md border border-primary/30 bg-primary/5 p-3">
+            <p class="rounded-md border border-primary/30 bg-primary-soft p-3 text-xs text-primary-soft-text">
               修改端口/接口/密钥/模式后需重启 mihomo 生效。DNS、规则等高级配置请直接编辑订阅文件。
             </p>
-            <Separator />
-            <div class="grid grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div class="grid gap-2">
                 <Label for="mixed-port">混合代理端口</Label>
                 <Input id="mixed-port" v-model.number="localSettings.mixedPort" type="number" />
@@ -1985,29 +1866,7 @@ watch(
               <Label for="secret">API 密钥（留空则不鉴权）</Label>
               <Input id="secret" v-model="localSettings.secret" placeholder="可选" />
             </div>
-            <div class="flex items-center justify-between rounded-md border p-3">
-              <div>
-                <p class="text-sm">允许局域网连接</p>
-                <p class="text-xs text-muted-foreground">允许其他设备通过本机代理上网</p>
-              </div>
-              <Switch v-model="localSettings.allowLan" />
-            </div>
-            <div class="flex items-center justify-between rounded-md border p-3">
-              <div>
-                <p class="text-sm">应用启动时自动启动 mihomo</p>
-                <p class="text-xs text-muted-foreground">软件启动时自动运行内核</p>
-              </div>
-              <Switch v-model="localSettings.autoStart" />
-            </div>
-            <div class="flex items-center justify-between rounded-md border p-3">
-              <div>
-                <p class="text-sm">启动时自动开启系统代理</p>
-                <p class="text-xs text-muted-foreground">mihomo 启动后自动设置 Windows 系统代理，退出时自动关闭</p>
-              </div>
-              <Switch v-model="localSettings.autoSystemProxy" />
-            </div>
-            <Separator />
-            <div class="grid grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div class="grid gap-2">
                 <Label for="mode-select">运行模式</Label>
                 <Select v-model="localSettings.mode">
@@ -2037,9 +1896,31 @@ watch(
                 </Select>
               </div>
             </div>
+            <Separator />
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p class="text-sm">允许局域网连接</p>
+                <p class="text-xs text-muted-foreground">允许其他设备通过本机代理上网</p>
+              </div>
+              <Switch v-model="localSettings.allowLan" />
+            </div>
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p class="text-sm">应用启动时自动启动 mihomo</p>
+                <p class="text-xs text-muted-foreground">软件启动时自动运行内核</p>
+              </div>
+              <Switch v-model="localSettings.autoStart" />
+            </div>
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p class="text-sm">启动时自动开启系统代理</p>
+                <p class="text-xs text-muted-foreground">mihomo 启动后自动设置 Windows 系统代理，退出时自动关闭</p>
+              </div>
+              <Switch v-model="localSettings.autoSystemProxy" />
+            </div>
           </CardContent>
         </Card>
-        </ScrollArea>
+        </div>
       </TabsContent>
     </Tabs>
 
diff --git a/src/modules/proxy/index.ts b/src/modules/proxy/index.ts
index 129a7bd..9e91c0d 100644
--- a/src/modules/proxy/index.ts
+++ b/src/modules/proxy/index.ts
@@ -157,5 +157,5 @@ export const moduleConfig: ModuleConfig = {
       }
     }
   },
-  order: 10
+  order: 20
 }
diff --git a/src/modules/quickpanel/QuickPanel.vue b/src/modules/quickpanel/QuickPanel.vue
index d1d62dc..7dfbd43 100644
--- a/src/modules/quickpanel/QuickPanel.vue
+++ b/src/modules/quickpanel/QuickPanel.vue
@@ -10,6 +10,7 @@ import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/comp
 import { Switch } from '@/components/ui/switch'
 import { aggregateSearch, loadAppIconsForResults, recordHistoryItem, getAllHistoryItems, setFileIndexReady, type QPItem, type QPSubAction } from './providers'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 import HistoryPicker from './HistoryPicker.vue'
 
 // ===== 状态 =====
@@ -23,7 +24,7 @@ const subActionExpanded = ref<number | null>(null)
 const subActionIndex = ref(0)
 // 待删除确认项（文件/文件夹删除前弹窗确认）
 const pendingDelete = ref<{ path: string; isDir: boolean; name: string } | null>(null)
-let unlistenFns: UnlistenFn[] = []
+const unlistenFns: UnlistenFn[] = []
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
 // ===== 当前目录文件操作（快捷键在资源管理器中按下时检测） =====
@@ -851,18 +852,18 @@ const groupIcon = (group: string) => {
 
 /** 类型 badge 颜色映射（柔和色块风格，跟随亮/暗主题） */
 const GROUP_COLORS: Record<string, string> = {
-  设置: 'bg-indigo-500/15 text-indigo-600 dark:text-indigo-400',
-  计算: 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
-  网页: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
-  系统: 'bg-slate-500/15 text-slate-600 dark:text-slate-400',
-  自定义: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
-  历史: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
-  快捷: 'bg-sky-500/15 text-sky-600 dark:text-sky-400',
-  换算: 'bg-teal-500/15 text-teal-600 dark:text-teal-400',
-  目录操作: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
-  应用: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
-  文件: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
-  剪贴板: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
+  设置: 'bg-info-soft text-info-text',
+  计算: 'bg-warning-soft text-warning-text',
+  网页: 'bg-danger-soft text-danger-text',
+  系统: 'bg-neutral-soft text-neutral-text',
+  自定义: 'bg-warning-soft text-warning-text',
+  历史: 'bg-info-soft text-info-text',
+  快捷: 'bg-info-soft text-info-text',
+  换算: 'bg-success-soft text-success-text',
+  目录操作: 'bg-info-soft text-info-text',
+  应用: 'bg-info-soft text-info-text',
+  文件: 'bg-success-soft text-success-text',
+  剪贴板: 'bg-success-soft text-success-text',
 }
 
 function groupBadgeClass(group: string): string {
@@ -915,6 +916,9 @@ async function applyTheme() {
   root.classList.add(`effect-${effect}`)
   if (isDark) root.classList.add('dark')
 
+  // 主题色：与主窗口共用同一份设置。行内变量会压住 .dark 规则，故按当前模式整组重写
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
+
   try {
     const tauriWin = getCurrentWindow()
     await tauriWin.clearEffects()
@@ -1356,7 +1360,7 @@ onUnmounted(() => {
                 :checked="deleteSelected.has(f.path)"
                 @change="toggleDeleteSelect(f.path)"
               />
-              <FolderOpen v-if="f.isDir" class="size-4 text-amber-500 shrink-0" />
+              <FolderOpen v-if="f.isDir" class="size-4 text-warning shrink-0" />
               <FileText v-else class="size-4 text-muted-foreground shrink-0" />
               <div class="flex-1 min-w-0">
                 <p class="text-xs truncate">{{ f.name }}</p>
diff --git a/src/modules/quickpanel/QuickPanelModule.vue b/src/modules/quickpanel/QuickPanelModule.vue
index 40d837c..8aa9f82 100644
--- a/src/modules/quickpanel/QuickPanelModule.vue
+++ b/src/modules/quickpanel/QuickPanelModule.vue
@@ -293,8 +293,8 @@ async function changeEngine(v: string) {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-y-auto">
-    <div class="max-w-2xl space-y-4">
+  <div class="min-h-full p-5">
+    <div class="space-y-4">
       <!-- 标题与测试 -->
       <div class="flex items-center justify-between">
         <h2 class="text-lg font-semibold flex items-center gap-2">
@@ -311,7 +311,7 @@ async function changeEngine(v: string) {
       <Card>
         <CardHeader>
           <CardTitle class="text-sm flex items-center gap-2">
-            <Keyboard class="size-4" />
+            <Keyboard class="size-4 text-primary" />
             唤起快捷键
           </CardTitle>
         </CardHeader>
@@ -372,7 +372,7 @@ async function changeEngine(v: string) {
       <Card>
         <CardHeader>
           <CardTitle class="text-sm flex items-center gap-2">
-            <Globe class="size-4" />
+            <Globe class="size-4 text-primary" />
             默认搜索引擎
           </CardTitle>
         </CardHeader>
@@ -398,7 +398,7 @@ async function changeEngine(v: string) {
       <Card>
         <CardHeader>
           <CardTitle class="text-sm flex items-center gap-2">
-            <FolderTree class="size-4" />
+            <FolderTree class="size-4 text-primary" />
             文件索引
           </CardTitle>
         </CardHeader>
@@ -457,7 +457,7 @@ async function changeEngine(v: string) {
       <Card>
         <CardHeader>
           <CardTitle class="text-sm flex items-center gap-2">
-            <Terminal class="size-4" />
+            <Terminal class="size-4 text-primary" />
             自定义命令
           </CardTitle>
         </CardHeader>
diff --git a/src/modules/quickpanel/index.ts b/src/modules/quickpanel/index.ts
index 2f97b88..4c80b8c 100644
--- a/src/modules/quickpanel/index.ts
+++ b/src/modules/quickpanel/index.ts
@@ -66,5 +66,5 @@ export const moduleConfig: ModuleConfig = {
       }
     }
   },
-  order: 60
+  order: 90
 }
diff --git a/src/modules/screenshot/ScreenshotEditor.vue b/src/modules/screenshot/ScreenshotEditor.vue
index f404357..9ed3b6b 100644
--- a/src/modules/screenshot/ScreenshotEditor.vue
+++ b/src/modules/screenshot/ScreenshotEditor.vue
@@ -5,6 +5,7 @@ import { LogicalSize } from '@tauri-apps/api/dpi'
 import { emit, listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { invoke } from '@tauri-apps/api/core'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 // Rust 端通过 tauri-specta 生成的命令绑定（bindings.ts）
 import { commands } from '@/lib/bindings'
 import { save } from '@tauri-apps/plugin-dialog'
@@ -931,6 +932,8 @@ function applyTheme() {
   else if (theme === 'light') dark = false
   else dark = window.matchMedia('(prefers-color-scheme: dark)').matches
   root.classList.toggle('dark', dark)
+  // 主题色：与主窗口共用同一份设置（行内变量压住 .dark 规则，按当前模式整组重写）
+  applyStoredAccent(root, dark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
 }
 
 function onStorageChange(e: StorageEvent) {
@@ -1349,10 +1352,16 @@ onUnmounted(() => {
         <p>加载中...</p>
       </div>
     </div>
-    <!-- 画布区（ScrollArea：主题化滚动条，纵向 + 横向；w-fit mx-auto 窄图水平居中） -->
-    <ScrollAreaRoot v-else class="flex-1 min-h-0 bg-background">
-      <ScrollAreaViewport class="size-full outline-none">
-      <div class="p-4 w-fit mx-auto">
+    <!--
+        画布区（ScrollArea：主题化滚动条，纵向 + 横向；w-fit mx-auto 窄图水平居中）。
+
+        内边距必须是内层的（这里是包住画布的 div，属于滚动内容），且底部要留够：
+        画布的 shadow-2xl 向下投影约 38px，原来 p-4（16px）不够 —— 滚到底时
+        画布下方那条阴影会被视口裁掉。左右方向 16px 已够（水平投影约 13px）。
+      -->
+      <ScrollAreaRoot v-else class="flex-1 min-h-0 bg-background">
+        <ScrollAreaViewport class="size-full outline-none">
+      <div class="px-4 pt-4 pb-12 w-fit mx-auto">
         <div class="canvas-wrap relative inline-block shadow-2xl">
         <canvas
           ref="canvasRef"
diff --git a/src/modules/screenshot/ScreenshotModule.vue b/src/modules/screenshot/ScreenshotModule.vue
index e39520a..bd91e29 100644
--- a/src/modules/screenshot/ScreenshotModule.vue
+++ b/src/modules/screenshot/ScreenshotModule.vue
@@ -8,25 +8,58 @@ import { toast } from 'vue-sonner'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useScreenshotStore, type RecentCapture } from '@/stores/screenshotStore'
 import { useModuleTabs } from '@/lib/use-module-tabs'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+import {
+  Pagination, PaginationContent, PaginationItem, PaginationEllipsis,
+} from '@/components/ui/pagination'
 
 const store = useScreenshotStore()
 
-const activeTab = ref('settings')
-const tabsListRef = useModuleTabs('screenshot', activeTab, [
-  { value: 'settings', label: '设置' },
+/**
+ * 历史排在第一并作为默认页：截图模块的日常用法是「截完看一眼、复制/另存」，
+ * 进来先看到最近截图比先看到设置更贴近使用节奏（设置改一次就很少再动）。
+ * Tab 顺序即使用频率顺序 —— 与其它模块「主用途在前、设置在后」的排法一致。
+ */
+const activeTab = ref('history')
+useModuleTabs('screenshot', activeTab, [
   { value: 'history', label: '历史' },
-])
+  { value: 'settings', label: '设置' },
+], { alwaysVisible: true })
 
 const HISTORY_LIMITS = [24, 48, 96]
 const DELAY_OPTIONS = [0, 1, 2, 3, 5]
 
+/**
+ * 历史分页：一页 9 张（3×3）。
+ *
+ * 历史条数上限是 96（HISTORY_LIMITS），若把 96 张缩略图一次性塞进 DOM：
+ * 解码与内存占用会让「打开历史页」和滚动都变卡。分页把同时存在的 `<img>`
+ * 限制在 9 个，翻页只重挂这一页的元素。
+ * 页码是纯前端切片（`store.recent` 本就全在内存里），所以用不着走后端分页 ——
+ * 与剪贴板那边（后端分页 + `historyTotal`）的取数方式不同，但分页 UI 同一个组件。
+ */
+const PAGE_SIZE = 9
+const currentPage = ref(1)
+const totalPages = computed(() => Math.max(1, Math.ceil(store.recent.length / PAGE_SIZE)))
+const pagedRecent = computed(() => {
+  const start = (currentPage.value - 1) * PAGE_SIZE
+  return store.recent.slice(start, start + PAGE_SIZE)
+})
+
+/** 列表变化（新增截图 / 删除 / 清空）后把页码收进有效范围，避免停在空页上 */
+watch(totalPages, tp => {
+  if (currentPage.value > tp) currentPage.value = tp
+})
+
+function gotoPage(p: number) {
+  currentPage.value = Math.min(Math.max(1, p), totalPages.value)
+}
+
 function formatTime(t: number): string {
   const d = new Date(t)
   const pad = (n: number) => String(n).padStart(2, '0')
@@ -208,22 +241,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-hidden flex flex-col">
+  <div class="min-h-full p-5 flex flex-col">
     <Tabs v-model="activeTab" class="flex-1 min-h-0 flex flex-col">
-      <div ref="tabsListRef" class="shrink-0">
-        <TabsList class="grid w-full max-w-md grid-cols-2 !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="settings" class="gap-1.5"><Settings class="size-3.5" />设置</TabsTrigger>
-          <TabsTrigger value="history" class="gap-1.5">
-            <ImageIcon class="size-3.5" />历史
-            <span v-if="store.recent.length" class="text-xs text-muted-foreground">({{ store.recent.length }})</span>
-          </TabsTrigger>
-        </TabsList>
-      </div>
-
       <!-- 截图设置 -->
-      <TabsContent value="settings" class="flex-1 min-h-0 mt-4">
-        <ScrollArea class="h-full">
-          <div class="space-y-4 max-w-3xl">
+      <TabsContent value="settings" class="flex-1 min-h-0">
+        <div class="h-full">
+          <div class="space-y-4">
             <!-- 快捷键 -->
             <Card>
               <CardHeader>
@@ -423,12 +446,12 @@ onUnmounted(() => {
               </CardContent>
             </Card>
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
 
       <!-- 历史记录 -->
-      <TabsContent value="history" class="flex-1 min-h-0 mt-4">
-        <ScrollArea class="h-full">
+      <TabsContent value="history" class="flex-1 min-h-0">
+        <div class="h-full">
           <div>
             <!-- 空状态 -->
             <div
@@ -440,15 +463,54 @@ onUnmounted(() => {
               <p class="text-xs">按 Ctrl + 1 截图并导出后会显示在这里</p>
             </div>
 
-            <!-- 历史网格 -->
-            <div v-else class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+            <template v-else>
+              <!--
+                分页条：只在多于一页时出现，放在网格上方（翻页后不用滚回去）
+              -->
+              <div v-if="totalPages > 1" class="flex items-center gap-3 pb-3">
+              <Pagination
+                v-slot="{ page }"
+                :page="currentPage"
+                :total="store.recent.length"
+                :items-per-page="PAGE_SIZE"
+                :sibling-count="1"
+                show-edges
+                @update:page="gotoPage"
+                class="justify-start"
+              >
+                <PaginationContent v-slot="{ items }" class="gap-1">
+                  <template v-for="(item, index) in items" :key="index">
+                    <PaginationItem
+                      v-if="item.type === 'page'"
+                      :value="item.value"
+                      :is-active="item.value === page"
+                      size="icon"
+                      class="size-7 text-xs"
+                    >
+                      {{ item.value }}
+                    </PaginationItem>
+                    <PaginationEllipsis v-else class="size-7" />
+                  </template>
+                </PaginationContent>
+              </Pagination>
+              <span class="ml-auto shrink-0 text-xs text-muted-foreground">
+                第 {{ currentPage }} / {{ totalPages }} 页 · 共 {{ store.recent.length }} 张
+              </span>
+              </div>
+
+              <!-- 历史网格：一页 9 张 → 按 3 列排（3×3） -->
+              <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
               <div
-                v-for="item in store.recent"
+                v-for="item in pagedRecent"
                 :key="item.id"
                 class="group relative rounded-lg border bg-muted/30 overflow-hidden"
               >
-                <!-- 缩略图 -->
-                <div class="aspect-video flex items-center justify-center bg-zinc-900">
+                <!--
+                  缩略图底座：用语义色 bg-muted（随深浅主题切换），而不是写死的
+                  深色 —— 浅色主题下那块黑底非常突兀，且带透明通道的截图在黑底上
+                  看不出边界。
+                -->
+                <div class="aspect-video flex items-center justify-center bg-muted">
                   <img
                     :src="thumbSrc(item)"
                     class="max-w-full max-h-full object-contain"
@@ -518,8 +580,9 @@ onUnmounted(() => {
                 </div>
               </div>
             </div>
+            </template>
           </div>
-        </ScrollArea>
+        </div>
       </TabsContent>
     </Tabs>
   </div>
diff --git a/src/modules/screenshot/ScreenshotOverlay.vue b/src/modules/screenshot/ScreenshotOverlay.vue
index 7cd9889..2ab92f7 100644
--- a/src/modules/screenshot/ScreenshotOverlay.vue
+++ b/src/modules/screenshot/ScreenshotOverlay.vue
@@ -4,6 +4,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { emit, listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { EVENTS, STORAGE_KEYS, WINDOWS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 // Rust 端通过 tauri-specta 生成的命令绑定（bindings.ts）
 import { commands } from '@/lib/bindings'
 import {
@@ -309,6 +310,7 @@ const hint = computed(() => {
     case 'drawing': return '松开鼠标完成选区'
     case 'selected': return '拖动移动选区 · 拖动手柄调整大小 · 选择工具开始标注 · Enter 完成 · Esc 取消'
     case 'editing': return '在选区内绘制标注 · 文字工具点击已有文字可编辑 · Ctrl+Enter 完成 · Esc 退出标注'
+    default: return ''
   }
 })
 
@@ -600,8 +602,8 @@ function normRect(a: Point, b: Point): Sel {
 function clampSel() {
   const s = sel.value
   const min = 8
-  let w = Math.min(Math.max(min, s.w), winW.value)
-  let h = Math.min(Math.max(min, s.h), winH.value)
+  const w = Math.min(Math.max(min, s.w), winW.value)
+  const h = Math.min(Math.max(min, s.h), winH.value)
   const x = Math.min(Math.max(0, s.x), winW.value - w)
   const y = Math.min(Math.max(0, s.y), winH.value - h)
   sel.value = { x, y, w, h }
@@ -1858,6 +1860,8 @@ function applyTheme() {
   else if (theme === 'light') isDark = false
   else isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
   root.classList.toggle('dark', isDark)
+  // 主题色：与主窗口共用同一份设置（行内变量压住 .dark 规则，按当前模式整组重写）
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
   // 跟随系统时监听变化
   return window.matchMedia('(prefers-color-scheme: dark)')
 }
@@ -2465,7 +2469,7 @@ onUnmounted(() => {
   padding: 8px 14px;
   background: rgba(15, 23, 42, 0.92);
   border: 1px solid rgba(239, 68, 68, 0.6);
-  color: #fecaca;
+  color: var(--danger);
   font-size: 13px;
   line-height: 1.4;
   border-radius: 6px;
@@ -2487,7 +2491,7 @@ onUnmounted(() => {
 /* 窗口识别：框内全透明透出原画面，box-shadow 暗化框外（形成"框内透明、框外变暗"） */
 .win-highlight {
   position: absolute;
-  border: 2px solid #3b82f6;
+  border: 2px solid var(--primary);
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
   pointer-events: none;
   z-index: 5;
@@ -2498,7 +2502,7 @@ onUnmounted(() => {
   left: -2px;
   max-width: 240px;
   padding: 1px 6px;
-  background: #3b82f6;
+  background: var(--primary);
   color: #fff;
   font-size: 12px;
   border-radius: 3px;
@@ -2510,7 +2514,7 @@ onUnmounted(() => {
 /* 拖拽中的选区：透明内部 + 巨大 box-shadow 形成外部遮罩 */
 .selection {
   position: absolute;
-  border: 2px solid #3b82f6;
+  border: 2px solid var(--primary);
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
   pointer-events: none;
   z-index: 5;
@@ -2520,7 +2524,7 @@ onUnmounted(() => {
   top: -24px;
   left: 0;
   padding: 2px 6px;
-  background: #3b82f6;
+  background: var(--primary);
   color: #fff;
   font-size: 12px;
   border-radius: 3px;
@@ -2548,7 +2552,7 @@ onUnmounted(() => {
 .region-border {
   position: absolute;
   inset: 0;
-  border: 2px solid #3b82f6;
+  border: 2px solid var(--primary);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
   pointer-events: none;
 }
@@ -2559,7 +2563,7 @@ onUnmounted(() => {
   width: 9px;
   height: 9px;
   background: #fff;
-  border: 2px solid #3b82f6;
+  border: 2px solid var(--primary);
   border-radius: 2px;
   transform: translate(-50%, -50%);
   z-index: 8;
@@ -2742,14 +2746,14 @@ onUnmounted(() => {
   color: #fff;
   white-space: nowrap;
 }
-.sm-mode.auto { background: #2563eb; }
-.sm-mode.manual { background: #059669; }
+.sm-mode.auto { background: var(--primary); }
+.sm-mode.manual { background: var(--success); }
 /* 拼接进行中的呼吸点 */
 .sm-dot {
   width: 7px;
   height: 7px;
   border-radius: 999px;
-  background: #22c55e;
+  background: var(--success);
   animation: sm-pulse 1.1s ease-in-out infinite;
   flex-shrink: 0;
 }
diff --git a/src/modules/screenshot/ScreenshotPin.vue b/src/modules/screenshot/ScreenshotPin.vue
index b49851c..64b32a2 100644
--- a/src/modules/screenshot/ScreenshotPin.vue
+++ b/src/modules/screenshot/ScreenshotPin.vue
@@ -9,6 +9,7 @@ import { LogicalPosition, LogicalSize } from '@tauri-apps/api/dpi'
 import { emit, listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { ChevronLeft, ChevronRight, X, Loader2 } from '@lucide/vue'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 // Rust 端通过 tauri-specta 生成的命令绑定（bindings.ts）
 import { commands } from '@/lib/bindings'
 
@@ -220,6 +221,8 @@ function applyTheme() {
     isDark = theme === 'dark'
   }
   root.classList.toggle('dark', isDark)
+  // 主题色：与主窗口共用同一份设置（行内变量压住 .dark 规则，按当前模式整组重写）
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
 }
 
 /** 从 localStorage 读取主窗口持久化的截图历史（图片文件在应用数据目录） */
diff --git a/src/modules/screenshot/ScrollControl.vue b/src/modules/screenshot/ScrollControl.vue
index 11da7cd..7293de8 100644
--- a/src/modules/screenshot/ScrollControl.vue
+++ b/src/modules/screenshot/ScrollControl.vue
@@ -20,7 +20,7 @@ const height = ref(0)
 const status = ref('')
 /** 是否已收到最终事件（完成/取消），此后关闭窗口不再触发取消 */
 let ended = false
-let unlisten: UnlistenFn[] = []
+const unlisten: UnlistenFn[] = []
 
 onMounted(async () => {
   status.value = auto.value ? '自动向下拼接中…' : '请滚动目标窗口，完成后点「完成」'
diff --git a/src/modules/screenshot/index.ts b/src/modules/screenshot/index.ts
index 11461db..70a69e2 100644
--- a/src/modules/screenshot/index.ts
+++ b/src/modules/screenshot/index.ts
@@ -55,5 +55,5 @@ export const moduleConfig: ModuleConfig = {
   defaultEnabled: true,
   loader: () => import('./ScreenshotModule.vue'),
   searchItems,
-  order: 30
+  order: 70
 }
diff --git a/src/modules/settings/GeneralSettings.vue b/src/modules/settings/GeneralSettings.vue
index 45c3b5e..b63edf6 100644
--- a/src/modules/settings/GeneralSettings.vue
+++ b/src/modules/settings/GeneralSettings.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { Monitor, Sun, Moon, Sparkles, Layers, LogOut, Package, GripVertical, Info, RefreshCw, Download, Check, Loader2, X } from '@lucide/vue'
+import { Monitor, Sun, Moon, Sparkles, Layers, LogOut, Package, GripVertical, Info, RefreshCw, Download, Check, Loader2, X, Palette, RotateCcw } from '@lucide/vue'
 import { Switch } from '@/components/ui/switch'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import { Progress } from '@/components/ui/progress'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useAppStore, type Theme, type EffectType, type ModuleInfo } from '@/stores/appStore'
@@ -20,6 +21,14 @@ import { VueDraggable } from 'vue-draggable-plus'
 import { toast } from 'vue-sonner'
 import { storeToRefs } from 'pinia'
 import { useUpdaterStore } from '@/stores/updaterStore'
+import {
+  ACCENT_PRESETS,
+  CUSTOM_ACCENT_ID,
+  DEFAULT_ACCENT_ID,
+  contrastRatio,
+  deriveAccent,
+  parseHex
+} from '@/lib/theme'
 
 const appStore = useAppStore()
 const searchStore = useSearchStore()
@@ -383,6 +392,8 @@ onMounted(() => {
   searchStore.registerAction('settings', 9, () => scrollToCard('settings-card-about'))
   searchStore.registerAction('settings', 10, () => scrollToCard('settings-card-about'))
   searchStore.registerAction('settings', 11, () => scrollToCard('settings-card-quit'))
+  // 主题色：追加在 searchItems 末尾（index 12），避免给前面 0–11 重新编号
+  searchStore.registerAction('settings', 12, () => scrollToCard('settings-card-accent'))
   // 主动刷新所有进程状态，确保内核 badge 显示当前真实状态（而非过期缓存）
   processStore.refreshAll().catch(() => { /* 忽略：后端可能未就绪 */ })
 })
@@ -402,6 +413,65 @@ const effects: Array<{ id: EffectType; name: string; color: string; darkColor: s
 // 亚克力仅在"跟随系统"主题下能正确同步深浅色（无深浅枚举，依赖系统级主题广播刷新）
 const isAcrylicDisabled = () => appStore.theme !== 'system'
 
+// ===== 主题色 =====
+
+/**
+ * 色板显示色用**派生后的浅色模式主色**，而不是原始基色 ——
+ * 用户看到的就是实际会生效的颜色（如青柠会被自动压暗），避免"选的色和界面不一致"。
+ */
+const accentSwatches = ACCENT_PRESETS.map(preset => ({
+  ...preset,
+  swatch: deriveAccent(preset.hex, 'light')['--primary']
+}))
+
+/** 自定义色块的显示色（同样走派生） */
+const customSwatch = computed(() => {
+  const hex = appStore.accentHex
+  return hex && parseHex(hex) ? deriveAccent(hex, 'light')['--primary'] : null
+})
+
+/** 色块上的对勾颜色：浅色底上用深墨，否则白 */
+const checkColor = (hex: string) => (contrastRatio(hex, '#ffffff') >= 3 ? '#ffffff' : '#1d1d1f')
+
+/**
+ * 自定义色输入框：文本框走草稿 + 回车/失焦提交（逐字符落盘会把 `#00` 这类半成品
+ * 写进设置），原生取色器则连续 `input` 事件直接生效（改一个颜色写 7 个变量，开销极低）。
+ */
+const customHexDraft = ref('')
+
+watch(
+  () => [appStore.accentId, appStore.accentHex] as const,
+  ([id, hex]) => {
+    customHexDraft.value =
+      id === CUSTOM_ACCENT_ID && hex
+        ? hex
+        : (ACCENT_PRESETS.find(p => p.id === id)?.hex ?? '')
+  },
+  { immediate: true }
+)
+
+function applyCustomHex(hex: string) {
+  appStore.setAccent(CUSTOM_ACCENT_ID, hex)
+}
+
+function commitCustomHex() {
+  const hex = customHexDraft.value.trim()
+  if (!parseHex(hex)) {
+    // 非法输入回退到当前生效值，不做静默丢弃
+    customHexDraft.value = appStore.accentHex ?? ''
+    toast.error('请输入 #RRGGBB 格式的颜色值')
+    return
+  }
+  applyCustomHex(hex.startsWith('#') ? hex : `#${hex}`)
+}
+
+/** 原生取色器：连续拖动时逐次生效，实时预览 */
+function onCustomPick(e: Event) {
+  const value = (e.target as HTMLInputElement).value
+  customHexDraft.value = value
+  applyCustomHex(value)
+}
+
 // 应用当前是否为深色模式（响应式，随主题与系统偏好变化）
 const isAppDark = computed(() => {
   if (appStore.theme === 'dark') return true
@@ -502,8 +572,8 @@ const onDragEnd = () => {
 </script>
 
 <template>
-  <div class="h-full p-6 overflow-y-auto">
-    <div class="max-w-3xl mx-auto space-y-6">
+  <div class="min-h-full p-6">
+    <div class="space-y-6">
       <Card>
         <CardHeader>
           <CardTitle class="flex items-center gap-2">
@@ -561,7 +631,7 @@ const onDragEnd = () => {
                 <component
                   :is="theme.icon"
                   class="size-8 transition-colors duration-300"
-                  :class="theme.id === 'dark' || (theme.id === 'system' && systemDark) ? 'text-white' : 'text-gray-800'"
+                  :class="theme.id === 'dark' || (theme.id === 'system' && systemDark) ? 'text-white' : 'text-foreground'"
                 />
               </div>
               <div class="h-10 flex items-center justify-center">
@@ -580,6 +650,88 @@ const onDragEnd = () => {
         </CardContent>
       </Card>
 
+      <Card id="settings-card-accent">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <Palette class="size-5 text-primary" />
+            主题色
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <!-- 预设色板 + 自定义取色 -->
+          <div class="flex flex-wrap items-center gap-2.5">
+            <button
+              v-for="preset in accentSwatches"
+              :key="preset.id"
+              class="relative size-8 rounded-full border-2 transition-all duration-200"
+              :class="
+                appStore.accentId === preset.id
+                  ? 'border-primary scale-110 shadow-md'
+                  : 'border-border hover:border-primary/50'
+              "
+              :style="{ backgroundColor: preset.swatch }"
+              :title="preset.name"
+              @click="appStore.setAccent(preset.id)"
+            >
+              <Check
+                v-if="appStore.accentId === preset.id"
+                class="absolute inset-0 m-auto size-4"
+                :style="{ color: checkColor(preset.swatch) }"
+              />
+            </button>
+
+            <!-- 自定义：原生取色器（覆盖在色块上，点击即弹系统取色面板） -->
+            <label
+              class="relative size-8 rounded-full border-2 border-dashed transition-all duration-200 cursor-pointer"
+              :class="
+                appStore.accentId === CUSTOM_ACCENT_ID
+                  ? 'border-primary scale-110 shadow-md'
+                  : 'border-border hover:border-primary/50'
+              "
+              :style="customSwatch ? { backgroundColor: customSwatch } : undefined"
+              title="自定义颜色"
+            >
+              <input
+                type="color"
+                class="absolute inset-0 size-full cursor-pointer opacity-0"
+                :value="appStore.accentHex ?? '#0066cc'"
+                @input="onCustomPick"
+              />
+              <Palette
+                class="absolute inset-0 m-auto size-4"
+                :style="{ color: customSwatch ? checkColor(customSwatch) : 'var(--muted-foreground)' }"
+              />
+            </label>
+          </div>
+
+          <div class="flex flex-wrap items-center gap-3">
+            <Label class="text-xs text-muted-foreground">自定义</Label>
+            <Input
+              v-model="customHexDraft"
+              class="h-8 w-28 font-mono text-xs"
+              placeholder="#0066cc"
+              spellcheck="false"
+              @keydown.enter="commitCustomHex"
+              @blur="commitCustomHex"
+            />
+            <Button
+              size="sm"
+              variant="outline"
+              :disabled="appStore.accentId === DEFAULT_ACCENT_ID"
+              @click="appStore.setAccent(DEFAULT_ACCENT_ID)"
+            >
+              <RotateCcw class="size-3.5" />
+              恢复默认
+            </Button>
+          </div>
+
+          <p class="text-xs text-muted-foreground">
+            深浅模式会自动调整同一个颜色的亮度：浅色下压暗、深色下提亮，
+            保证按钮文字与选中态在任何色相下都清晰可读。状态色（成功 / 警告 / 危险）不随主题色变化。
+          </p>
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle class="flex items-center gap-2">
@@ -673,7 +825,7 @@ const onDragEnd = () => {
                       <span
                         v-if="getProcessStatusText(module.id)"
                         class="text-xs px-1.5 py-0.5 rounded-full"
-                        :class="module.enabled ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-muted text-muted-foreground'"
+                        :class="module.enabled ? 'bg-success-soft text-success-text' : 'bg-muted text-muted-foreground'"
                       >
                         {{ getProcessStatusText(module.id) }}
                       </span>
@@ -753,7 +905,7 @@ const onDragEnd = () => {
               </div>
             </div>
             <div v-else class="flex items-center gap-1.5 text-sm text-muted-foreground">
-              <Check class="size-4 text-green-500" />
+              <Check class="size-4 text-success" />
               已是最新版本
             </div>
           </div>
diff --git a/src/modules/settings/index.ts b/src/modules/settings/index.ts
index 8c2e11c..57ac227 100644
--- a/src/modules/settings/index.ts
+++ b/src/modules/settings/index.ts
@@ -62,6 +62,12 @@ const searchItems: SearchIndexItem[] = [
     title: '退出程序',
     description: '彻底退出 Thing 应用',
     keywords: ['退出', '关闭', 'quit', 'exit', '结束']
+  },
+  // 追加在末尾：searchItems 的下标与 GeneralSettings 里 registerAction 的 index 一一对应
+  {
+    title: '主题色',
+    description: '自定义应用强调色（预设色板 / 自定义颜色）',
+    keywords: ['主题色', '强调色', '配色', '颜色', 'accent', 'color', 'theme']
   }
 ]
 
diff --git a/src/modules/terminal/NewTerminalWindow.vue b/src/modules/terminal/NewTerminalWindow.vue
new file mode 100644
index 0000000..bed6ed1
--- /dev/null
+++ b/src/modules/terminal/NewTerminalWindow.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+/**
+ * 终端「新建独立窗口」的选择窗口。
+ *
+ * # 为什么是「先开窗、再问」
+ *
+ * 旧流程是：快捷键 → 主窗口弹选择框 → 选完再开独立窗口。结果是用户按了快捷键
+ * 之后焦点先被拉到主窗口、选完窗口再跳一次。现在按快捷键**立刻开一个窗口**，
+ * 选择就发生在这个窗口里 —— 全程不打扰主窗口（它可能在别的显示器上最小化着）。
+ *
+ * # 选完之后为什么本窗口会关闭
+ *
+ * 会话的独立窗口 label 必须是 `terminal-window-<sessionId>`（Rust 侧 `label_for`），
+ * 而这个窗口是先于会话创建的，label 只能是临时值 —— 窗口 label 在 Tauri 里不可改。
+ * 因此选完目标后交给 Rust 用**规范 label** 开真正的会话窗口（`terminal_detach_session`
+ * 会顺带把会话标记为已分离），本窗口随即关闭。两个窗口都是居中、同尺寸，
+ * 视觉上是「原地换成会话窗口」。
+ *
+ * # 与主窗口的关系
+ *
+ * 本窗口是独立入口（main.ts 按 hash 路由），自带 Pinia；会话与设置的真实状态在
+ * Rust 侧，因此这里 `useTerminalStore().init()` 拿到的列表与主窗口一致。
+ */
+import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { Globe, Loader2, Minus, Square, TerminalSquare, X } from '@lucide/vue'
+import { toast } from 'vue-sonner'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { createLogger } from '@/lib/logger'
+import { applyStoredAccent } from '@/lib/theme'
+import { appIsDark } from '@/lib/terminalThemes'
+import { STORAGE_KEYS } from '@/lib/constants'
+import { Button } from '@/components/ui/button'
+import { Toaster } from '@/components/ui/sonner'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+const logger = createLogger('terminal')
+const store = useTerminalStore()
+const win = getCurrentWindow()
+
+// ===== 主题：与其它独立窗口同一套（只读同一份 localStorage 设置） =====
+//
+// 不应用 mica/acrylic：本窗口是不透明窗口，没有透明通道承载玻璃效果。
+// 本窗口由前端**隐藏创建**（见 openWindow.ts），应用完主题再显示 ——
+// 否则深色模式下会先闪一个纯白窗口。
+
+/** 与 style.css 的 `--background` 对齐：浅色 #ffffff / 深色 #16161a */
+const WINDOW_BG = { light: '#ffffff', dark: '#16161a' }
+
+function readMainTheme(): string {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEYS.appSettings)
+    if (raw) return (JSON.parse(raw) as { theme?: string }).theme ?? 'system'
+  } catch {
+    /* 设置不可读时按跟随系统处理 */
+  }
+  return 'system'
+}
+
+function resolveIsDark(theme: string): boolean {
+  if (theme === 'dark') return true
+  if (theme === 'light') return false
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+async function applyTheme() {
+  const root = document.documentElement
+  const theme = readMainTheme()
+  const isDark = resolveIsDark(theme)
+  try {
+    await win.setTheme(theme === 'system' ? null : (theme as 'dark' | 'light'))
+  } catch {
+    /* 平台不支持时忽略 */
+  }
+  try {
+    // 底色单独 try：setTheme 失败不该连带跳过底色，否则仍会白底闪一下
+    await win.setBackgroundColor(isDark ? WINDOW_BG.dark : WINDOW_BG.light)
+  } catch {
+    /* 忽略 */
+  }
+  root.classList.toggle('dark', isDark)
+  // 与其它终端窗口保持一致：本窗口不渲染终端，但主题状态是全局约定
+  appIsDark.value = isDark
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
+}
+
+const darkMedia = window.matchMedia('(prefers-color-scheme: dark)')
+const onThemeChange = () => void applyTheme()
+const onStorageChange = (e: StorageEvent) => {
+  if (e.key === STORAGE_KEYS.appSettings) void applyTheme()
+}
+
+// ===== 列表 =====
+
+const ready = ref(false)
+const busy = ref(false)
+/** 正在创建的目标名（列表上显示 spinner） */
+const pending = ref('')
+
+const shells = computed(() => store.shells.filter(s => s.enabled))
+const hosts = computed(() =>
+  [...store.hosts].sort((a, b) => a.config.name.localeCompare(b.config.name, 'zh-CN'))
+)
+
+onMounted(async () => {
+  darkMedia.addEventListener('change', onThemeChange)
+  window.addEventListener('storage', onStorageChange)
+  window.addEventListener('keydown', onKeydown, true)
+
+  // 主题 → 显示：窗口是隐藏创建的（见 openWindow.ts），这一刻用户才第一次看到它
+  await applyTheme()
+  try {
+    await win.show()
+    await win.setFocus()
+  } catch (e) {
+    logger.warn(`显示选择窗口失败：${String(e)}`)
+  }
+
+  try {
+    await store.init()
+  } catch (e) {
+    logger.error(`选择窗口初始化失败：${String(e)}`)
+    toast.error(`读取会话列表失败：${String(e)}`)
+  } finally {
+    ready.value = true
+  }
+})
+
+onBeforeUnmount(() => {
+  darkMedia.removeEventListener('change', onThemeChange)
+  window.removeEventListener('storage', onStorageChange)
+  window.removeEventListener('keydown', onKeydown, true)
+})
+
+/** Esc 关闭本窗口（选择窗口是临时性的，错了直接关掉最省事） */
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    void win.close()
+  }
+}
+
+/**
+ * 建会话 → 交给 Rust 开规范 label 的会话窗口 → 关掉本窗口。
+ *
+ * 失败（例如已达独立窗口上限）时**不关窗**：错误提示要留在用户眼前。
+ */
+async function launch(create: () => Promise<{ id: string }>, name: string) {
+  if (busy.value) return
+  busy.value = true
+  pending.value = name
+  try {
+    const info = await create()
+    await store.detachSession(info.id)
+    await win.close()
+  } catch (e) {
+    toast.error(`打开独立窗口失败：${String(e)}`)
+  } finally {
+    busy.value = false
+    pending.value = ''
+  }
+}
+
+async function minimize() {
+  await win.minimize()
+}
+async function toggleMaximize() {
+  await win.toggleMaximize()
+}
+async function closeWindow() {
+  await win.close()
+}
+</script>
+
+<template>
+  <TooltipProvider>
+    <div class="flex flex-col h-screen w-screen overflow-hidden bg-background">
+      <!-- 控制栏：标题（兼拖拽区）+ 窗口按钮（与终端独立窗口同构） -->
+      <div class="shrink-0 flex items-center gap-1 h-9 px-1.5 border-b border-border">
+        <div class="flex h-full min-w-0 flex-1 items-center gap-1.5 px-2" data-tauri-drag-region>
+          <TerminalSquare class="size-3.5 shrink-0 text-muted-foreground pointer-events-none" />
+          <span class="truncate text-xs font-medium pointer-events-none">新建终端窗口</span>
+          <span class="truncate text-[11px] text-muted-foreground pointer-events-none">
+            选择一个本地 Shell 或已保存的 SSH 主机，会话将在新的独立窗口中打开
+          </span>
+        </div>
+
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon-sm" @click="minimize">
+              <Minus class="size-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">最小化</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon-sm" @click="toggleMaximize">
+              <Square class="size-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">最大化 / 还原</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              class="hover:!bg-destructive hover:!text-destructive-foreground"
+              @click="closeWindow"
+            >
+              <X class="size-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">关闭（Esc）</TooltipContent>
+        </Tooltip>
+      </div>
+
+      <!-- 列表：居中收窄，避免大屏上一行被拉到很远 -->
+      <ScrollArea class="flex-1 min-h-0">
+        <div class="mx-auto w-full max-w-md p-5">
+          <div v-if="!ready" class="flex items-center justify-center gap-2 py-10 text-xs text-muted-foreground">
+            <Loader2 class="size-4 animate-spin" /> 正在读取会话列表…
+          </div>
+
+          <template v-else>
+            <p class="pb-1.5 text-[11px] font-medium tracking-wide text-muted-foreground">本地 Shell</p>
+            <div class="flex flex-col gap-0.5">
+              <button
+                v-for="sh in shells"
+                :key="sh.id"
+                type="button"
+                class="flex items-center gap-2 rounded-md px-2 py-2 text-left text-[13px] transition-colors
+                       hover:bg-accent/60 disabled:pointer-events-none disabled:opacity-50"
+                :disabled="busy"
+                @click="launch(() => store.openLocal(sh.id, undefined, 120, 30), sh.name)"
+              >
+                <TerminalSquare class="size-3.5 shrink-0 text-muted-foreground" />
+                <span class="min-w-0 flex-1 truncate">{{ sh.name }}</span>
+                <Loader2 v-if="pending === sh.name" class="size-3.5 shrink-0 animate-spin" />
+              </button>
+              <p v-if="shells.length === 0" class="px-2 py-1 text-[11.5px] text-muted-foreground">
+                没有可用的 Shell，请到「终端 → 设置 → Shell」重新探测。
+              </p>
+            </div>
+
+            <p class="px-0 pb-1.5 pt-4 text-[11px] font-medium tracking-wide text-muted-foreground">
+              SSH 主机
+            </p>
+            <div class="flex flex-col gap-0.5">
+              <button
+                v-for="h in hosts"
+                :key="h.config.id"
+                type="button"
+                class="flex items-center gap-2 rounded-md px-2 py-2 text-left text-[13px] transition-colors
+                       hover:bg-accent/60 disabled:pointer-events-none disabled:opacity-50"
+                :disabled="busy"
+                @click="launch(() => store.openSsh(h.config.id, 120, 30), h.config.name)"
+              >
+                <Globe class="size-3.5 shrink-0 text-muted-foreground" />
+                <span class="min-w-0 flex-1 truncate">{{ h.config.name }}</span>
+                <span class="shrink-0 text-[11px] text-muted-foreground">
+                  {{ h.config.username ? `${h.config.username}@` : '' }}{{ h.config.host }}
+                </span>
+                <Loader2 v-if="pending === h.config.name" class="size-3.5 shrink-0 animate-spin" />
+              </button>
+              <p v-if="hosts.length === 0" class="px-2 py-1 text-[11.5px] text-muted-foreground">
+                还没有保存的 SSH 主机，到「终端 → 主机」新建一台。
+              </p>
+            </div>
+          </template>
+        </div>
+      </ScrollArea>
+
+      <Toaster position="bottom-right" rich-colors close-button :style="{ zIndex: 99999 }" />
+    </div>
+  </TooltipProvider>
+</template>
+
+<style scoped>
+/* 本窗口无边框，禁止整页滚动与选中，贴近原生窗口行为 */
+:global(html),
+:global(body) {
+  overflow: hidden;
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/terminal/TerminalModule.vue b/src/modules/terminal/TerminalModule.vue
index cbef2b2..f7e4b92 100644
--- a/src/modules/terminal/TerminalModule.vue
+++ b/src/modules/terminal/TerminalModule.vue
@@ -1,141 +1,111 @@
 <script setup lang="ts">
 /**
- * 终端模块主页面（主窗口）。
+ * 终端模块根（主窗口）。
  *
- * # 布局层次
+ * # 职责边界
+ *
+ * 这里只做**模块级编排**：4 个 tab 的定义与切换、tab 记忆与全局搜索跳转、
+ * 快捷键分发、模块初始化。终端页自身的界面与交互（标签栏、画布、分屏、
+ * SFTP、右键菜单、搜索、模板、AI 助手、历史/片段浮层）全部在
+ * `TerminalWorkspace` 里 —— 拆分前它和编排逻辑混在同一个 1197 行的文件里，
+ * 动一下终端页要在其中找位置。
+ *
+ * # 容器口径
  *
  * ```
- * ┌─────────────────────────────────────────────────┐
- * │ 工具栏：会话标识 · 搜索 · 字号 · 日志 · 独立窗口    │
- * ├─────────────────────────────────────────────────┤
- * │ 标签栏                                            │
- * ├─────────────────────────────────────────────────┤
- * │ 终端面板（xterm）                                  │
- * ├─────────────────────────────────────────────────┤
- * │ 状态栏                                            │
- * └─────────────────────────────────────────────────┘
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ 模块 Tabs：终端 · 主机 · 密钥 · 设置                      │
+ * ├─────────────────────────────────────────────────────────┤
+ * │ 各页内容（**无外框**）                                    │
+ * └─────────────────────────────────────────────────────────┘
  * ```
  *
- * 没有侧栏：会话切换/新建在标签栏，主机/密钥/已知主机/设置入口在模块级
- * Tabs 与工具栏，侧栏与它们完全重复（2026-09-18 移除）。
- * # 面板为什么不销毁
+ * 六个子页此前各自套一层 `rounded-lg border bg-background` 的容器 + 一条
+ * h-11 的标题栏，读起来像「模块里嵌了七个独立窗口」；而同项目的
+ * proxy / monitor / music / clipboard 一律是「一条漂浮工具条 + 直接铺开的内容」。
+ * 2026-09-20 起统一到后者：子页只保留 `PageToolbar`（漂浮工具条）与滚动区，
+ * 外框全部移除。终端页保留一块圆角边框的**终端屏幕**（画布 + 状态栏）——
+ * xterm 是画布而不是内容流，需要边界；但那层边界只包画布，不再包住工具条。
  *
- * 切标签时**不销毁**非激活的 `TerminalPane`，只用 `v-show` 隐藏。
+ * 唯一例外是**设置页**：它是「左栏分区导航 + 右栏内容」的形态，结构对齐音乐
+ * 模块的「曲库」页（左栏分组标题 + 浮起胶囊导航项），因此不挂 `PageToolbar` ——
+ * 标题由左栏的分组标题承载。
  *
- * 理由：xterm 实例的构造代价不小（解析字体度量、建 WebGL 上下文、分配
- * 回滚缓冲），而保留实例还能保住滚动位置与选区 —— 用户切回来时看到的
- * 应该还是刚才那一屏，而不是重新渲染的空壳。
+ * # tab 从 5 个收敛到 4 个（2026-09-22）
  *
- * 代价是不活跃会话也持有 WebGL 上下文（GPU 资源有限）。P0 先接受这个代价，
- * 若会话数多到出现上下文丢失，再改为「超出 N 个时按 LRU 销毁」。
+ * - 「记录」整页取消：命令历史与命令片段变成终端卡片控制栏上的两个 popover
+ *   （`HistoryPopover` / `SnippetPopover`）—— 它们是**取用型**动作，取完就回到
+ *   终端，不该让用户离开终端再走三层导航；
+ * - 「凭据」只剩密钥（known_hosts 并入主机页，见 `HostManager`），因此改名「密钥」，
+ *   页内的「密钥 / 已知主机」分区开关一并删除。
  *
- * # overlay 而不是路由 → 已改为模块级 Tabs
+ * # 为什么终端页用 forceMount
  *
- * 终端/主机/密钥/已知主机/历史/片段/设置七页用模块级 Tabs 组织，与其他模块
- * （monitor/proxy/downloader…）的导航范式一致。**终端页的 TabsContent 用
- * forceMount + data-[state=inactive]:hidden**：xterm 实例的构造代价不小
- * （解析字体度量、建 WebGL 上下文、分配回滚缓冲），且卸载会丢滚动位置
- * 与选区 —— 切去设置页改个字号回来，终端必须还是原来那屏。
+ * `TerminalWorkspace` 里挂着每个会话的 xterm 实例（含 WebGL 上下文）。
+ * 卸载会丢滚动位置与选区，切去设置页改个字号回来就得重新渲染一屏空白。
  * 其余页是普通 TabsContent（卸载即重置，从 store 重新同步，无代价）。
  */
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import {
-  AlertTriangle,
-  BookMarked,
-  ChevronsRight,
-  History,
-  KeyRound,
-  Loader2,
-  Plus,
-  Server,
-  Settings,
-  ShieldCheck,
-  TerminalSquare,
-  X
-} from '@lucide/vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { toast } from 'vue-sonner'
 import { useTerminalStore } from '@/stores/terminalStore'
 import { useTerminalStream } from '@/composables/useSessionStream'
 import { useTerminalKeys } from '@/composables/useTerminalKeys'
+import { useModuleTabs } from '@/lib/use-module-tabs'
 import { createLogger } from '@/lib/logger'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import TerminalPane from './components/TerminalPane.vue'
-import TerminalTabs from './components/TerminalTabs.vue'
-import TerminalToolbar from './components/TerminalToolbar.vue'
-import TerminalStatusBar from './components/TerminalStatusBar.vue'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
+import TerminalWorkspace from './components/TerminalWorkspace.vue'
 import HostKeyPromptDialog from './components/HostKeyPromptDialog.vue'
 import HostManager from './components/HostManager.vue'
 import KeyManagerPanel from './components/KeyManagerPanel.vue'
-import KnownHostsPanel from './components/KnownHostsPanel.vue'
 import TerminalSettingsPanel from './components/TerminalSettingsPanel.vue'
-import SftpPanel from './components/SftpPanel.vue'
-import HistoryPanel from './components/HistoryPanel.vue'
-import SnippetPanel from './components/SnippetPanel.vue'
-import ForwardPanel from './components/ForwardPanel.vue'
-import TemplatePanel from './components/TemplatePanel.vue'
-import AiPanel from './components/AiPanel.vue'
-import type { SessionTemplate } from '@/types/terminal'
+import { toggleHistoryPopover, toggleSnippetsPopover } from './useRecordPopovers'
 
 const logger = createLogger('terminal')
 const store = useTerminalStore()
 
-const {
-  activeSessionId,
-  activeSession,
-  orderedSessions,
-  effectiveAppearance,
-  confirmDialog,
-  selectSession,
-  closeTab,
-  cycleTab,
-  selectTabByIndex,
-  applyOrder,
-  newLocalTab,
-  newSshTab,
-  bumpFont,
-  resetFont,
-  bindings,
-  resolveConfirm,
-  isSplit,
-  splitLayout,
-  panes,
-  resetPanesTo,
-  addPane,
-  splitRight,
-  splitDown,
-  closePane,
-  toggleSplitDirection,
-  init
-} = useTerminalStream()
+/**
+ * 窗口级会话编排。**整个模块只创建一次**：`tabOrder` / `panes` /
+ * `activeSessionId` 都是这个 composable 的局部状态，调用两次就会得到
+ * 两份互不相干的标签顺序与分屏布局（表现为「点击标签没反应」）。
+ * 因此实例在这里创建，再原样传给 `TerminalWorkspace`。
+ */
+const stream = useTerminalStream()
+const { activeSessionId, closeTab, cycleTab, selectTabByIndex, newSshTab, resetPanesTo, bindings, init } = stream
+
+/** 终端页组件实例（模块级快捷键要把动作转发进去，见下方 useTerminalKeys） */
+const workspaceRef = ref<InstanceType<typeof TerminalWorkspace> | null>(null)
 
 // ===== 模块级 Tabs（与其他模块一致的导航范式） =====
 
-type ModuleTab =
-  | 'terminal'
-  | 'hosts'
-  | 'keys'
-  | 'knownHosts'
-  | 'history'
-  | 'snippets'
-  | 'settings'
+/**
+ * 注册到 `useModuleTabs`：TabsList 滚出可视区时由标题栏提供浮动切换器，
+ * 并复用「上次停留的 tab」与全局搜索的跳转（`searchItems[].tab`）。
+ */
+const moduleTab = ref('terminal')
 
-const moduleTab = ref<ModuleTab>('terminal')
+/** tab 定义（顺序即 TabsList 顺序；label 同时供标题栏浮动切换器使用） */
+const MODULE_TABS = [
+  { value: 'terminal', label: '终端' },
+  { value: 'hosts', label: '主机' },
+  { value: 'keys', label: '密钥' },
+  { value: 'settings', label: '设置' }
+]
 
 const pageRootRef = ref<HTMLElement | null>(null)
+useModuleTabs('terminal', moduleTab, MODULE_TABS, { alwaysVisible: true })
 
 // Tabs 切换动画：其余 TabsContent 卸载重挂，全局 `tab-animate`（style.css）在
 // 挂载时自动播放；终端页 forceMount 元素不重建，动画不会自动重播 —— 这里在
 // 每次切换后对当前激活页手动重启（移除类 → 强制 reflow → 加回）。
 watch(moduleTab, () => {
+  // 离开终端页时收起控制栏上的两个浮层：它们是**受控** popover，内容被 portal 到
+  // body 上，即便触发器（在隐藏的终端页里）不可见也会照常渲染，
+  // 结果是在「主机」页上悬着一个来源不明的浮层（且锚点位置是 (0,0)）。
+  if (moduleTab.value !== 'terminal') {
+    toggleHistoryPopover(false)
+    toggleSnippetsPopover(false)
+  }
+
   void nextTick(() => {
     const el = pageRootRef.value?.querySelector<HTMLElement>(
       '[data-slot="tabs-content"][data-state="active"]'
@@ -147,497 +117,62 @@ watch(moduleTab, () => {
   })
 })
 
-// 本组件由 `modules/terminal/index.ts` 的 loader 直接渲染，不作为子组件使用，
-// 因此不声明 emits —— 需要「关闭自身」的能力时再按需补。
-
-// ===== 面板引用（用于调用 fit / 搜索 / 清屏） =====
-
-/** sessionId → TerminalPane 暴露的方法。用普通 Map：面板实例不需要响应式 */
-const paneRefs = new Map<string, InstanceType<typeof TerminalPane>>()
-
-function setPaneRef(sessionId: string, el: unknown) {
-  if (el) paneRefs.set(sessionId, el as InstanceType<typeof TerminalPane>)
-  else paneRefs.delete(sessionId)
-}
-
-function activePane() {
-  return activeSessionId.value ? paneRefs.get(activeSessionId.value) : undefined
-}
-
-// ===== SFTP 文件面板 =====
+// ===== 主机连接（主机页与本模块的交界处） =====
 
 /**
- * 文件面板是**按会话**的开合状态（不全局开关）。
+ * 从主机页点「连接」→ 建 SSH 会话并切回终端页。
  *
- * 理由：面板显示的是「某个会话对应主机上的目录」，切到本地会话标签时
- * 继续显示上一个 SSH 主机的文件会让人误以为在看本机 —— 那是个危险的误会。
- * 因此面板只在 activeSession 是 SSH 时可用，且对每个会话独立记忆。
+ * 失败原因（握手/认证/主机密钥）后端已写进 `session.error`，会显示在面板中央；
+ * 这里只补一个总括提示，避免用户以为点击没生效。
  */
-const sftpVisible = ref(false)
-const sftpWidth = ref(420)
-
-const canShowSftp = computed(() => activeSession.value?.kind === 'ssh')
-
-/** 面板标题用的会话名（store 的派生方法需要看到 hosts，故在这层取） */
-const sftpSessionLabel = computed(() => store.sessionLabel(activeSession.value))
-
-/** 端口转发对话框（P2）：低频配置操作，用 Dialog 而非停靠面板 */
-const forwardsOpen = ref(false)
-
-/** 会话模板对话框（P2） */
-const templatesOpen = ref(false)
-const applyingTemplate = ref(false)
-
-/**
- * 按模板拉起一组会话并排成布局。
- *
- * 逐条开会话：第 1 个作主面板（resetPanesTo 收敛布局），
- * 其余依次 addPane —— 分屏方向沿用 splitDirection（默认左右）。
- * 条目失败不中断整体（主机连不上不该挡住本地 Shell 拉起），
- * 汇总成一条 toast；超分屏上限的孤儿会话按 splitTo 同款收掉。
- */
-async function applyTemplate(t: SessionTemplate) {
-  if (applyingTemplate.value) return
-  applyingTemplate.value = true
-  const failures: string[] = []
-  let opened = 0
-  let first = true
-  try {
-    for (const e of t.entries.slice(0, 4)) {
-      try {
-        const info = e.kind === 'ssh' ? await newSshTab(e.targetId) : await newLocalTab()
-        if (!info) {
-          failures.push(`${e.label || '未知目标'}：没有可用的 Shell`)
-          continue
-        }
-        if (first) {
-          resetPanesTo(info.id)
-          first = false
-        } else if (!addPane(info.id)) {
-          // 超出分屏上限：把刚建的会话收掉，不留看不见的孤儿
-          await store.closeSession(info.id)
-          failures.push(`${e.label}：超出分屏上限`)
-          continue
-        }
-        opened++
-      } catch (err) {
-        failures.push(`${e.label || '未知目标'}：${String(err)}`)
-      }
-    }
-  } finally {
-    applyingTemplate.value = false
-  }
-  if (opened > 0 && failures.length === 0) {
-    toast.success(`已按模板「${t.name}」拉起 ${opened} 个会话`)
-  } else if (opened > 0) {
-    toast.warning(`已拉起 ${opened} 个，部分失败：${failures.join('；')}`)
-  } else {
-    toast.error(`模板「${t.name}」拉起失败：${failures.join('；') || '没有可用条目'}`)
-  }
-}
-
-/** 当前可见面板的会话 id（模板「保存当前布局」的捕获源） */
-const currentPaneIds = computed(() => {
-  if (panes.value.length > 0) return panes.value.map(p => p.sessionId)
-  return activeSessionId.value ? [activeSessionId.value] : []
-})
-
-/** AI 命令助手对话框（P2） */
-const aiOpen = ref(false)
-
-/** 终端上下文：当前会话的选中文本（供 AI 理解「接着上一步做什么」） */
-function getTerminalContext(): string {
-  const id = activeSessionId.value
-  if (!id) return ''
-  return paneRefs.get(id)?.getSelection?.() ?? ''
-}
-
-/**
- * 开关当前会话的日志。
- *
- * 成功提示里带日志路径——用户需要知道日志在哪才能在事后找到它；
- * 开关状态本身由后端的 TERMINAL_STATE 事件刷新（SessionInfo.logging）。
- */
-async function handleToggleLogging() {
-  const id = activeSessionId.value
-  const sess = activeSession.value
-  if (!id || !sess) return
-  try {
-    await store.toggleLogging(id, !sess.logging)
-    if (!sess.logging) {
-      const p = await store.logPath(id)
-      toast.success(p ? `已开始记录会话日志：${p}` : '已开始记录会话日志')
-    } else {
-      toast.success('已停止记录会话日志（文件已保留）')
-    }
-  } catch (e) {
-    toast.error(`切换日志记录失败：${String(e)}`)
-  }
-}
-
-/** 在文件管理器中显示当前日志文件 */
-async function handleOpenLogDir() {
-  const id = activeSessionId.value
-  if (!id) return
-  try {
-    const p = await store.logPath(id)
-    if (!p) {
-      toast.info('当前会话未开启日志')
-      return
-    }
-    await store.revealLocalPath(p)
-  } catch (e) {
-    toast.error(`打开日志位置失败：${String(e)}`)
-  }
-}
-
-// 切到非 SSH 会话时收起面板：见上面关于「误以为是本机」的说明
-watch(activeSessionId, () => {
-  if (!canShowSftp.value) sftpVisible.value = false
-})
-
-function toggleSftp() {
-  if (!canShowSftp.value) {
-    toast.info('文件管理器只对 SSH 会话可用（本地会话请用系统资源管理器）')
-    return
-  }
-  sftpVisible.value = !sftpVisible.value
-}
-
-/** 面板左边缘的拖拽调宽 */
-function startResizeSftp(e: MouseEvent) {
-  e.preventDefault()
-  const startX = e.clientX
-  const startW = sftpWidth.value
-  const onMove = (ev: MouseEvent) => {
-    // 向左拖是变宽：面板贴右边缘，宽度 = 起点到鼠标的距离
-    const next = startW + (startX - ev.clientX)
-    sftpWidth.value = Math.min(Math.max(280, next), window.innerWidth - 360)
-  }
-  const onUp = () => {
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-// ===== 搜索 =====
-
-const searching = ref(false)
-const searchHint = ref('')
-
-function toggleSearch() {
-  searching.value = !searching.value
-  if (!searching.value) {
-    activePane()?.clearSearch?.()
-    searchHint.value = ''
-  }
-}
-
-function doSearch(keyword: string) {
-  const pane = activePane()
-  if (!pane) return
-  const found = pane.findNext?.(keyword)
-  searchHint.value = found === false ? '无匹配' : ''
-}
-
-function searchNext(keyword: string) {
-  const pane = activePane()
-  if (!pane) return
-  const found = pane.findNext?.(keyword)
-  searchHint.value = found === false ? '无匹配' : ''
-}
-
-function searchPrev(keyword: string) {
-  const pane = activePane()
-  if (!pane) return
-  const found = pane.findPrevious?.(keyword)
-  searchHint.value = found === false ? '无匹配' : ''
-}
-
-// ===== 会话操作 =====
-
-const creating = ref(false)
-
-async function handleNewLocal() {
-  if (creating.value) return
-  creating.value = true
-  try {
-    const info = await newLocalTab()
-    // 新建标签后把分屏容器收敛到它：否则会看到上一个标签的分屏布局残留
-    if (info) resetPanesTo(info.id)
-  } catch (e) {
-    toast.error(`新建会话失败：${String(e)}`)
-  } finally {
-    creating.value = false
-  }
-}
-
 async function handleConnect(hostId: string) {
   try {
     const info = await newSshTab(hostId)
     if (info) resetPanesTo(info.id)
     moduleTab.value = 'terminal'
   } catch (e) {
-    // SSH 失败的具体原因（握手/认证/主机密钥）后端已写进 session.error，
-    // 这里只给一个总括提示，详细原因会显示在面板中央
     toast.error(`连接失败：${String(e)}`)
   }
 }
 
-// ===== 分屏 =====
-
-async function handleSplit(dir: 'right' | 'down') {
-  try {
-    const r = await (dir === 'right' ? splitRight() : splitDown())
-    if (!r.ok) toast.info(r.message)
-  } catch (e) {
-    toast.error(`分屏失败：${String(e)}`)
-  }
-}
-
-/** 分屏网格的 CSS 布局类（与 splitLayout 一一对应） */
-const splitGridClass = computed(() => {
-  switch (splitLayout.value) {
-    case 'v-split':
-      return 'grid-rows-2 grid-cols-1'
-    case 'h-split':
-      return 'grid-cols-2 grid-rows-1'
-    case 'grid':
-      return 'grid-cols-2 grid-rows-2'
-    default:
-      return 'grid-cols-1 grid-rows-1'
-  }
-})
+// ===== 控制栏浮层（历史 / 片段） =====
 
 /**
- * 实际渲染的面板列表：**全部会话常驻挂载**。
+ * 开合终端页控制栏上的历史 / 片段浮层。
  *
- * 这是对文件头「全部保留实例，用 v-show 切换」承诺的落实。此前实现只渲染
- * `panes` 里的会话，切标签会把其他会话的 TerminalPane 整个卸载——
- * xterm 实例被 dispose、隐藏期间到达的输出因无订阅者被丢弃，
- * 切回来就是一片空白（多标签基本不可用）。
- *
- * 现在的可见性规则：
- * - 分屏激活时（`panes` 非空）：只有分屏组内的会话可见；
- * - 单面板时：只有激活会话可见。
- * 不在可见集里的会话保持挂载（display:none），照常接收输出。
- *
- * 代价是每个会话持有一个 xterm（含 WebGL 上下文）直至会话关闭；
- * WebGL 超限时 useXterm 会自动回退到 DOM 渲染器（已有兜底）。
+ * 这两个浮层长在**终端页**的控制栏上，所以快捷键要先确保页面回到终端 ——
+ * 否则用户可能正停在「主机」页，按下 Ctrl+Shift+S 却什么都没有（浮层的触发器
+ * 在被隐藏的终端页里，位置也锚不准）。已经停在终端页时按常规开合，
+ * 再按一次即收起。
  */
-const renderPanes = computed(() => {
-  const visible = new Set(
-    panes.value.length > 0
-      ? panes.value.map(p => p.sessionId)
-      : activeSessionId.value
-        ? [activeSessionId.value]
-        : []
-  )
-  return orderedSessions.value.map(s => ({
-    id: `pane-${s.id}`,
-    sessionId: s.id,
-    hidden: !visible.has(s.id)
-  }))
-})
-
-async function handleDetach() {
-  const id = activeSessionId.value
-  if (!id) return
-  try {
-    await store.detachSession(id)
-    toast.success('已在独立窗口中打开')
-  } catch (e) {
-    toast.error(`打开独立窗口失败：${String(e)}`)
-  }
-}
-
-function handleClear() {
-  const id = activeSessionId.value
-  if (!id) return
-  const pane = paneRefs.get(id)
-  if (!pane) return
-  const shellKind = store.shells.find(s => s.id === store.sessionById(id)?.targetId)?.kind
-  // 清屏是「让 shell 执行清屏」而不是「从 xterm 缓冲里删掉」——
-  // 后者只是视觉上清了，向上滚动仍能看到旧内容，且 shell 的行计数会错乱
-  void store.clearSession(id, shellKind)
-  pane.clear?.()
-}
-
-// ===== 标签重排 =====
-
-/**
- * 写回用户拖动后的标签顺序。
- *
- * 标签栏把拖动结果以「完整 id 列表」的形式抛上来，这里直接交给编排组合函数
- * 的 `applyOrder` —— 由它负责过滤已消失的会话并补齐漏网的。
- * 前端不做任何顺序推断（例如「谁到了谁前面」），因为拖动本身已经给出了完整答案，
- * 再做推断只会引入「拖到末尾时位置漂移」这类边界问题。
- */
-function handleReorder(ids: string[]) {
-  applyOrder(ids)
-}
-
-// ===== 右键菜单 =====
-
-const contextMenu = ref<{ sessionId: string; x: number; y: number } | null>(null)
-
-function closeContextMenu() {
-  contextMenu.value = null
-}
-
-/** 右键菜单的当前会话是否有选区（决定「复制」是否可用） */
-const contextHasSelection = computed(() => {
-  const id = contextMenu.value?.sessionId
-  if (!id) return false
-  return !!paneRefs.get(id)?.getSelection?.()
-})
-
-const behavior = computed(() => store.settings?.selection ?? null)
-
-/**
- * 面板右键的统一入口。
- *
- * 三种行为共用这一个监听（`rightClick` 设置项决定走哪条）：
- * - `menu`（默认）：弹出菜单。终端里的右键在不同软件里含义不同
- *   （Windows Terminal 粘贴、PuTTY 弹菜单），猜测意图容易误操作，
- *   因此默认给显式菜单。
- * - `paste`：直接粘贴。习惯 X11 的用户会期待这个。
- * - `select-word`：选中光标下的词，随后仍弹菜单 —— 只选中不弹菜单
- *   等于给了一个「无法后续操作」的选区，用户还得再右键一次。
- */
-function onPaneContextMenu(payload: { sessionId: string; x: number; y: number }) {
-  const mode = behavior.value?.rightClick ?? 'menu'
-
-  if (mode === 'paste') {
-    // 粘贴的目标是「发出右键的那块面板」，而不是当前激活标签 ——
-    // 两者在分屏或标签快速切换时可能不一致
-    activeSessionId.value = payload.sessionId
-    void doPaste()
-    return
-  }
-
-  if (mode === 'select-word') {
-    paneRefs.get(payload.sessionId)?.selectWordAt?.(payload.x, payload.y)
-  }
-
-  contextMenu.value = payload
-}
-
-async function doCopy() {
-  const id = contextMenu.value?.sessionId ?? activeSessionId.value
-  if (!id) return
-  const text = paneRefs.get(id)?.getSelection?.()
-  if (!text) {
-    toast.info('没有选中内容')
-    return
-  }
-  const payload =
-    (behavior.value?.trimTrailingNewline ?? true) && text.endsWith('\n')
-      ? text.replace(/\n+$/, '')
-      : text
-  try {
-    await navigator.clipboard.writeText(payload)
-  } catch (e) {
-    toast.error(`复制失败：${String(e)}`)
-  }
-  closeContextMenu()
-}
-
-/**
- * 粘贴。
- *
- * 多行内容会先在终端里「攒着」而不是直接执行 —— 但 P0 不做确认弹窗，
- * 因为 xterm 的 bracketed paste 模式（若 shell 启用）已经能让编辑器
- * 正确处理多行。这里只负责把文本交给 PTY。
- */
-async function doPaste() {
-  const id = contextMenu.value?.sessionId ?? activeSessionId.value
-  if (!id) return
-  try {
-    const text = await navigator.clipboard.readText()
-    if (!text) return
-    await store.write(id, text)
-  } catch (e) {
-    toast.error(`粘贴失败：${String(e)}`)
-  }
-  closeContextMenu()
-}
-
-async function doSelectAll() {
-  const id = contextMenu.value?.sessionId ?? activeSessionId.value
-  if (!id) return
-  paneRefs.get(id)?.selectAll?.()
-  closeContextMenu()
-}
-
-function doClearFromMenu() {
-  const id = contextMenu.value?.sessionId
-  closeContextMenu()
-  if (id) {
-    activeSessionId.value = id
-    handleClear()
-  }
-}
-
-async function doCloseFromMenu() {
-  const id = contextMenu.value?.sessionId
-  closeContextMenu()
-  if (id) await closeTab(id)
-}
-
-async function doRename() {
-  const id = contextMenu.value?.sessionId
-  closeContextMenu()
-  if (!id) return
-  const info = store.sessionById(id)
-  renameValue.value = info?.title ?? ''
-  renameTargetId.value = id
-}
-
-const confirmRenameOpen = ref(false)
-const renameTargetId = ref<string | null>(null)
-const renameValue = ref('')
-
-watch(confirmRenameOpen, v => {
-  if (!v) renameTargetId.value = null
-})
-
-async function submitRename() {
-  const id = renameTargetId.value
-  if (!id) return
-  const title = renameValue.value.trim()
-  if (!title) {
-    toast.error('名称不能为空')
-    return
-  }
-  try {
-    await store.renameSession(id, title)
-    confirmRenameOpen.value = false
-  } catch (e) {
-    toast.error(`重命名失败：${String(e)}`)
-  }
+function toggleRecordPopover(kind: 'history' | 'snippets') {
+  const onTerminal = moduleTab.value === 'terminal'
+  if (kind === 'history') toggleHistoryPopover(onTerminal ? undefined : true)
+  else toggleSnippetsPopover(onTerminal ? undefined : true)
+  if (!onTerminal) moduleTab.value = 'terminal'
 }
 
 // ===== 快捷键 =====
 
+/**
+ * 快捷键分发。
+ *
+ * 分两类：
+ * - **模块级**（切标签、开关页面）—— 直接调用 `stream` 上的方法或改 `moduleTab`；
+ * - **终端页**（复制粘贴、搜索、清屏、分屏、独立窗口、SFTP…）—— 转发给
+ *   `workspaceRef`，因为这些动作的状态（搜索框开合、右键菜单目标、面板宽度）
+ *   属于终端页。
+ *
+ * 字号与分屏关闭直接用 `stream` 的方法（状态在编排层，不需要绕经终端页）。
+ */
 useTerminalKeys({
   bindings: () => bindings.value,
   enabled: () => true,
   onAction: actionId => {
     switch (actionId) {
-      case 'copy':
-        void doCopy()
-        break
-      case 'paste':
-        void doPaste()
-        break
-      case 'search':
-        toggleSearch()
-        break
+      // ===== 模块级：标签 =====
       case 'newTab':
-        void handleNewLocal()
+        void workspaceRef.value?.handleNewLocal()
         break
       case 'closeTab':
         if (activeSessionId.value) void closeTab(activeSessionId.value)
@@ -648,51 +183,67 @@ useTerminalKeys({
       case 'prevTab':
         cycleTab(-1)
         break
-      case 'renameTab':
-        if (activeSessionId.value) {
-          renameValue.value = store.sessionById(activeSessionId.value)?.title ?? ''
-          renameTargetId.value = activeSessionId.value
-          confirmRenameOpen.value = true
-        }
-        break
-      case 'clear':
-        handleClear()
-        break
-      case 'fontIncrease':
-        void bumpFont(1)
-        break
-      case 'fontDecrease':
-        void bumpFont(-1)
-        break
-      case 'fontReset':
-        resetFont()
-        break
-      case 'detachWindow':
-        void handleDetach()
-        break
-      case 'splitRight':
-        void handleSplit('right')
-        break
-      case 'splitDown':
-        void handleSplit('down')
-        break
-      case 'closePane': {
-        const r = closePane()
-        if (!r.ok) toast.info(r.message)
-        break
-      }
-      case 'toggleSftp':
-        toggleSftp()
-        break
+      // ===== 模块级：页面跳转 =====
+      // 历史 / 片段已不是页面，而是终端页控制栏上的浮层：快捷键直接开合它，
+      // 再按一次即收起（开合语义与原来的「切到记录页 / 收回终端」一致）。
+      // 浮层开合状态由 useRecordPopovers 的模块级 ref 持有，与控制栏按钮共用。
       case 'snippets':
-        moduleTab.value = moduleTab.value === 'snippets' ? 'terminal' : 'snippets'
+        toggleRecordPopover('snippets')
         break
       case 'history':
-        moduleTab.value = moduleTab.value === 'history' ? 'terminal' : 'history'
+        toggleRecordPopover('history')
         break
       case 'sessionSwitcher':
         moduleTab.value = moduleTab.value === 'hosts' ? 'terminal' : 'hosts'
         break
+      // ===== 终端页（转发） =====
+      case 'copy':
+        void workspaceRef.value?.doCopy()
+        break
+      case 'paste':
+        void workspaceRef.value?.doPaste()
+        break
+      case 'search':
+        workspaceRef.value?.toggleSearch()
+        break
+      case 'renameTab':
+        workspaceRef.value?.openRename(activeSessionId.value)
+        break
+      case 'clear':
+        workspaceRef.value?.handleClear()
+        break
+      case 'detachWindow':
+        void workspaceRef.value?.handleDetach()
+        break
+      case 'newDetachedWindow':
+        // 「新建独立窗口」是**全局**热键，由 TerminalQuickLaunch 注册并处理。
+        // 这里刻意不重复触发：全局注册在应用前台时同样生效，两处都处理会开出两个窗口。
+        // 保留这个分支只是让分发表与设置表一一对应，不落进 default 分支打警告。
+        break
+      case 'splitRight':
+        void workspaceRef.value?.handleSplit('right')
+        break
+      case 'splitDown':
+        void workspaceRef.value?.handleSplit('down')
+        break
+      case 'toggleSftp':
+        workspaceRef.value?.toggleSftp()
+        break
+      // ===== 状态在编排层，直接调用 =====
+      case 'fontIncrease':
+        void stream.bumpFont(1)
+        break
+      case 'fontDecrease':
+        void stream.bumpFont(-1)
+        break
+      case 'fontReset':
+        stream.resetFont()
+        break
+      case 'closePane': {
+        const r = stream.closePane()
+        if (!r.ok) toast.info(r.message)
+        break
+      }
       default:
         logger.warn(`未处理的快捷键动作：${actionId}`)
     }
@@ -711,8 +262,6 @@ function onGlobalKeydown(e: KeyboardEvent) {
   if (!e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) return
   // 只在「正在打字」的场合让路：焦点在输入框/文本域/可编辑元素里时
   // 不劫持 Alt+数字（用户可能在输入框里输入特殊字符）。
-  // 此前的判断要求焦点必须在 .xterm 内——焦点在侧栏/对话框时快捷键失效，
-  // 位置型跳转不该有这么苛刻的前置条件。
   const el = document.activeElement as HTMLElement | null
   if (el?.tagName === 'INPUT' || el?.tagName === 'TEXTAREA' || el?.isContentEditable) return
   const n = Number(e.key)
@@ -725,17 +274,17 @@ function onGlobalKeydown(e: KeyboardEvent) {
 
 // ===== 生命周期 =====
 
+/** 模块初始化是否完成（终端页在完成前显示加载态） */
 const ready = ref(false)
 
 onMounted(async () => {
   document.addEventListener('keydown', onGlobalKeydown, true)
-  document.addEventListener('click', closeContextMenu)
   try {
     await init()
     // 首次进入且没有任何会话时，自动建一个本地会话 —— 否则用户看到空页面
     // 还要再点一次「新建」，而终端模块的默认预期就是「进来就能用」
     if (store.sessions.length === 0 && store.shells.some(s => s.enabled)) {
-      await newLocalTab()
+      await workspaceRef.value?.handleNewLocal()
     }
   } catch (e) {
     logger.error(`终端模块初始化失败：${String(e)}`)
@@ -747,53 +296,19 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', onGlobalKeydown, true)
-  document.removeEventListener('click', closeContextMenu)
+  // 控制栏浮层的开合状态是模块级 ref（快捷键与按钮共用，见 useRecordPopovers），
+  // 模块卸载不会带走它 —— 若留着 true，下次进入模块会直接弹出一个浮层。
+  toggleHistoryPopover(false)
+  toggleSnippetsPopover(false)
   // 刻意不 disposeListeners、不关闭会话：模块被禁用或页面切走时，
   // 用户正在跑的编译/部署任务不应被切断。真正的清理只在应用退出时发生。
 })
-
-/** 会话列表变化时，清理已消失会话的面板引用，防止 Map 无限增长 */
-watch(
-  () => store.sessions.map(s => s.id).join(','),
-  () => {
-    const alive = new Set(store.sessions.map(s => s.id))
-    for (const id of [...paneRefs.keys()]) {
-      if (!alive.has(id)) paneRefs.delete(id)
-    }
-  }
-)
 </script>
 
 <template>
-  <div ref="pageRootRef" class="h-full p-6 overflow-hidden flex flex-col">
+  <div ref="pageRootRef" class="h-full p-5 overflow-hidden flex flex-col">
     <!-- ===== 模块级 Tabs：与其他模块一致的导航范式 ===== -->
     <Tabs v-model="moduleTab" class="flex-1 min-h-0 flex flex-col">
-      <div class="shrink-0">
-        <TabsList class="grid w-full max-w-2xl grid-cols-7 !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="terminal" class="gap-1.5">
-            <TerminalSquare class="size-3.5" />终端
-          </TabsTrigger>
-          <TabsTrigger value="hosts" class="gap-1.5">
-            <Server class="size-3.5" />主机
-          </TabsTrigger>
-          <TabsTrigger value="keys" class="gap-1.5">
-            <KeyRound class="size-3.5" />密钥
-          </TabsTrigger>
-          <TabsTrigger value="knownHosts" class="gap-1.5">
-            <ShieldCheck class="size-3.5" />已知主机
-          </TabsTrigger>
-          <TabsTrigger value="history" class="gap-1.5">
-            <History class="size-3.5" />历史
-          </TabsTrigger>
-          <TabsTrigger value="snippets" class="gap-1.5">
-            <BookMarked class="size-3.5" />片段
-          </TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5">
-            <Settings class="size-3.5" />设置
-          </TabsTrigger>
-        </TabsList>
-      </div>
-
       <!--
         终端页 forceMount + data-[state=inactive]:hidden：
         切到其他 Tab 时不卸载 xterm 实例（见文件头说明）。
@@ -801,323 +316,39 @@ watch(
       <TabsContent
         value="terminal"
         force-mount
-        class="flex-1 min-h-0 mt-3 tab-animate data-[state=inactive]:hidden"
+        class="flex-1 min-h-0 tab-animate data-[state=inactive]:hidden"
       >
-      <div class="flex flex-col h-full rounded-lg border border-border overflow-hidden bg-background">
-    <!-- ===== 工具栏 ===== -->
-    <TerminalToolbar
-      :session-id="activeSessionId"
-      :title="activeSession?.title ?? ''"
-      :searching="searching"
-      :search-hint="searchHint"
-      :is-ssh="activeSession?.kind === 'ssh'"
-      :sftp-visible="sftpVisible"
-      :logging="activeSession?.logging ?? false"
-      @toggle-sftp="toggleSftp"
-      @open-forwards="forwardsOpen = true"
-      @toggle-logging="handleToggleLogging"
-      @open-log-dir="handleOpenLogDir"
-      @open-templates="templatesOpen = true"
-      @open-ai="aiOpen = true"
-      @toggle-search="toggleSearch"
-      @search="doSearch"
-      @search-next="searchNext($event)"
-      @search-prev="searchPrev($event)"
-      @font="bumpFont($event)"
-      @font-reset="resetFont"
-      @clear="handleClear"
-      @detach="handleDetach"
-    />
-
-    <!--
-      ===== 主体 =====
-      侧栏已移除：会话切换/新建在标签栏，主机/密钥/已知主机/设置入口在模块级
-      Tabs（顶部）与工具栏，侧栏与它们完全重复。布局因此收敛为单列。
-    -->
-    <div class="flex-1 min-h-0 flex">
-      <!-- 主区 -->
-      <div class="flex-1 min-w-0 flex flex-col">
-        <!-- 标签栏 -->
-        <TerminalTabs
-          :sessions="orderedSessions"
-          :active-id="activeSessionId"
-          @select="selectSession"
-          @close="closeTab"
-          @new="handleNewLocal"
-          @reorder="handleReorder"
-        />
-
-        <!-- 终端面板区 -->
-        <div class="flex-1 min-h-0 relative">
-          <!-- 加载态 -->
-          <div v-if="!ready" class="absolute inset-0 flex items-center justify-center">
-            <div class="flex flex-col items-center gap-3">
-              <Loader2 class="size-5 animate-spin text-muted-foreground" />
-              <p class="text-xs text-muted-foreground">正在初始化终端…</p>
-            </div>
-          </div>
-
-          <!-- 空态 -->
-          <div
-            v-else-if="orderedSessions.length === 0"
-            class="absolute inset-0 flex items-center justify-center"
-          >
-            <div class="flex flex-col items-center gap-4 text-center">
-              <TerminalSquare class="size-10 text-muted-foreground/25" />
-              <div>
-                <p class="text-sm text-muted-foreground mb-1">还没有打开的会话</p>
-                <p class="text-xs text-muted-foreground/70">
-                  从左侧选择一个主机，或新建本地 Shell 会话
-                </p>
-              </div>
-              <div class="flex items-center gap-2">
-                <Button size="sm" class="gap-1.5" @click="handleNewLocal">
-                  <Plus class="size-3.5" />新建本地会话
-                </Button>
-                <Button variant="outline" size="sm" class="gap-1.5" @click="moduleTab = 'hosts'">
-                  <Server class="size-3.5" />管理主机
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          <!-- 面板：全部保留实例，用 v-show 切换（见 renderPanes 说明） -->
-          <template v-else>
-            <!--
-              分屏容器。
-              1 个可见面板时就是普通全屏；2~4 个时按 splitLayout 排成 2 列或 2×2。
-              这里用 CSS grid 而不是嵌套 flex：分屏的维度组合是可枚举的
-              （单/左右/上下/2×2），网格能用一组静态类表达全部情形，
-              而 flex 需要嵌套 + 条件样式，逻辑会散在模板里。
-              隐藏面板（display:none）不占据网格单元，因此可见面板数决定布局。
-            -->
-            <div class="absolute inset-0 grid gap-px bg-border" :class="splitGridClass">
-              <div
-                v-for="p in renderPanes"
-                :key="p.id"
-                v-show="!p.hidden"
-                class="relative min-w-0 min-h-0"
-                :class="p.sessionId === activeSessionId ? '' : 'opacity-95'"
-              >
-                <TerminalPane
-                  :ref="(el: any) => setPaneRef(p.sessionId, el)"
-                  :session-id="p.sessionId"
-                  :appearance="effectiveAppearance"
-                  :visible="!p.hidden"
-                  @focus="selectSession(p.sessionId)"
-                  @contextmenu="onPaneContextMenu"
-                />
-                <!-- 非聚焦面板的边框高亮：分屏时「输入会去哪里」必须一眼可见 -->
-                <div
-                  v-if="isSplit && p.sessionId === activeSessionId"
-                  class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-primary/40"
-                />
-                <!-- 分屏面板的关闭按钮（只移除面板，不杀会话） -->
-                <button
-                  v-if="isSplit"
-                  class="absolute top-0.5 right-0.5 z-10 size-5 rounded flex items-center justify-center
-                         bg-background/80 text-muted-foreground hover:text-foreground
-                         opacity-0 hover:opacity-100 transition-opacity"
-                  title="关闭此面板（会话保留）"
-                  @click.stop="selectSession(p.sessionId); closePane()"
-                >
-                  <X class="size-3" />
-                </button>
-              </div>
-            </div>
-
-            <!-- 分屏方向切换（仅两面板时有意义） -->
-            <button
-              v-if="panes.length === 2"
-              class="absolute bottom-2 right-2 z-10 h-6 px-2 rounded border border-border
-                     bg-background/90 text-[10px] text-muted-foreground hover:text-foreground"
-              :title="splitLayout === 'h-split' ? '改为上下排列' : '改为左右排列'"
-              @click="toggleSplitDirection"
-            >
-              {{ splitLayout === 'h-split' ? '⬍ 上下' : '⬌ 左右' }}
-            </button>
-          </template>
-        </div>
-
-        <!-- 状态栏 -->
-        <TerminalStatusBar
-          v-if="store.settings?.layout.showStatusBar !== false"
-          :session="activeSession"
-          :font-size="effectiveAppearance?.fontSize ?? 14"
-          :cols="activeSession?.cols"
-          :rows="activeSession?.rows"
-        />
-      </div>
-
-      <!-- ===== SFTP 文件面板（仅 SSH 会话） ===== -->
-      <template v-if="sftpVisible && canShowSftp && activeSessionId">
-        <!-- 拖拽条：面板贴右边缘，向左拖变宽 -->
-        <div
-          class="shrink-0 w-1 cursor-col-resize hover:bg-primary/40 transition-colors"
-          title="拖动调整宽度"
-          @mousedown="startResizeSftp"
-        />
-        <aside class="shrink-0 border-l border-border" :style="{ width: `${sftpWidth}px` }">
-          <SftpPanel
-            :key="activeSessionId"
-            :session-id="activeSessionId"
-            :session-label="sftpSessionLabel"
-            :terminal-cwd="activeSession?.cwd ?? ''"
-            @close="sftpVisible = false"
-          />
-        </aside>
-      </template>
-
-      <!-- 独立窗口的会话提示条：该会话在主窗口不可交互 -->
-      <div
-        v-if="activeSession?.detached"
-        class="shrink-0 w-8 border-l border-border flex items-start justify-center pt-3"
-      >
-        <button
-          class="text-muted-foreground hover:text-foreground transition-colors"
-          title="该会话已在独立窗口中打开，点击收回"
-          @click="activeSessionId && store.attachSession(activeSessionId)"
-        >
-          <ChevronsRight class="size-3.5" />
-        </button>
-      </div>
-    </div>
-      </div>
-      </TabsContent>
-
-      <!-- ===== 其余模块页：普通 TabsContent（卸载即重置，从 store 重新同步） ===== -->
-      <TabsContent value="hosts" class="flex-1 min-h-0 mt-3 tab-animate">
-        <div class="h-full rounded-lg border border-border overflow-hidden bg-background">
-          <HostManager @close="moduleTab = 'terminal'" @connect="handleConnect" />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="keys" class="flex-1 min-h-0 mt-3 tab-animate">
-        <div class="h-full rounded-lg border border-border overflow-hidden bg-background">
-          <KeyManagerPanel />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="knownHosts" class="flex-1 min-h-0 mt-3 tab-animate">
-        <div class="h-full rounded-lg border border-border overflow-hidden bg-background">
-          <KnownHostsPanel />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="history" class="flex-1 min-h-0 mt-3 tab-animate">
-        <HistoryPanel
-          :session-id="activeSessionId"
-          :session="activeSession"
-          @close="moduleTab = 'terminal'"
+        <TerminalWorkspace
+          ref="workspaceRef"
+          :stream="stream"
+          :ready="ready"
+          @go-hosts="moduleTab = 'hosts'"
         />
       </TabsContent>
 
-      <TabsContent value="snippets" class="flex-1 min-h-0 mt-3 tab-animate">
-        <div class="h-full rounded-lg border border-border overflow-hidden bg-background">
-          <SnippetPanel
-            :session-id="activeSessionId"
-            :session="activeSession"
-            @close="moduleTab = 'terminal'"
-          />
-        </div>
+      <!--
+        ===== 其余模块页 =====
+        普通 TabsContent（卸载即重置，从 store 重新同步，无代价）。
+        各页自身只提供 `PageToolbar` + 滚动区，**不再自带外框** ——
+        外框与页中页标题栏是「模块里嵌了独立窗口」的观感来源，已移除。
+        设置页除外：它是「左栏分区导航 + 右栏内容」的形态（对齐音乐模块的曲库页），
+        分区切换与滚动都在页内完成，见 TerminalSettingsPanel 的模板注释。
+      -->
+      <TabsContent value="hosts" class="flex-1 min-h-0 tab-animate">
+        <HostManager @connect="handleConnect" />
       </TabsContent>
 
-      <TabsContent value="settings" class="flex-1 min-h-0 mt-3 tab-animate">
-        <div class="h-full rounded-lg border border-border overflow-hidden bg-background">
-          <TerminalSettingsPanel />
-        </div>
+      <!-- 密钥（known_hosts 已并入主机页的信任徽标与孤儿区块） -->
+      <TabsContent value="keys" class="flex-1 min-h-0 tab-animate">
+        <KeyManagerPanel />
+      </TabsContent>
+
+      <TabsContent value="settings" class="flex-1 min-h-0 tab-animate">
+        <TerminalSettingsPanel />
       </TabsContent>
     </Tabs>
 
-    <!-- ===== 右键菜单 ===== -->
-    <div
-      v-if="contextMenu"
-      class="fixed z-50 min-w-[168px] py-1 rounded-md border border-border bg-popover
-             shadow-lg text-xs"
-      :style="{ left: `${contextMenu.x}px`, top: `${contextMenu.y}px` }"
-      @click.stop
-    >
-      <button
-        class="w-full px-3 py-1.5 text-left hover:bg-accent flex items-center justify-between
-               disabled:opacity-40 disabled:pointer-events-none"
-        :disabled="!contextHasSelection"
-        @click="doCopy"
-      >
-        复制
-        <span class="text-muted-foreground text-[10px] font-mono">Ctrl+Shift+C</span>
-      </button>
-      <button class="w-full px-3 py-1.5 text-left hover:bg-accent flex items-center justify-between" @click="doPaste">
-        粘贴
-        <span class="text-muted-foreground text-[10px] font-mono">Ctrl+Shift+V</span>
-      </button>
-      <button class="w-full px-3 py-1.5 text-left hover:bg-accent" @click="doSelectAll">全选</button>
-      <div class="my-1 h-px bg-border" />
-      <button class="w-full px-3 py-1.5 text-left hover:bg-accent" @click="doClearFromMenu">清屏</button>
-      <button class="w-full px-3 py-1.5 text-left hover:bg-accent" @click="doRename">重命名标签</button>
-      <div class="my-1 h-px bg-border" />
-      <button
-        class="w-full px-3 py-1.5 text-left hover:bg-accent text-destructive"
-        @click="doCloseFromMenu"
-      >
-        关闭会话
-      </button>
-    </div>
-
     <!-- ===== 主机密钥确认（阻塞性，安全权重最高） ===== -->
     <HostKeyPromptDialog />
-
-    <!-- ===== 端口转发（P2，SSH 会话） ===== -->
-    <ForwardPanel
-      v-model:open="forwardsOpen"
-      :session-id="activeSessionId"
-      :session-label="sftpSessionLabel"
-    />
-
-    <!-- ===== 会话模板（P2） ===== -->
-    <TemplatePanel
-      v-model:open="templatesOpen"
-      :pane-ids="currentPaneIds"
-      @apply="applyTemplate"
-    />
-
-    <!-- ===== AI 命令助手（P2） ===== -->
-    <AiPanel v-model:open="aiOpen" :session-id="activeSessionId" :get-context="getTerminalContext" />
-
-    <!-- ===== 关闭运行中会话的确认 ===== -->
-    <Dialog :open="confirmDialog !== null" @update:open="v => !v && resolveConfirm(false)">
-      <DialogContent class="max-w-sm" :show-close-button="false">
-        <DialogHeader>
-          <!-- break-all：标题含无可断行的长路径（如 powershell.exe 全路径），不 加会横向撑破容器 -->
-          <DialogTitle class="text-base flex items-start gap-2 break-all">
-            <AlertTriangle class="size-4 shrink-0 text-amber-500" />
-            <span class="min-w-0">{{ confirmDialog?.title }}</span>
-          </DialogTitle>
-          <DialogDescription class="text-xs break-all">{{ confirmDialog?.message }}</DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" size="sm" @click="resolveConfirm(false)">取消</Button>
-          <Button variant="destructive" size="sm" @click="resolveConfirm(true)">关闭会话</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <!-- ===== 重命名 ===== -->
-    <Dialog v-model:open="confirmRenameOpen">
-      <DialogContent class="max-w-sm">
-        <DialogHeader>
-          <DialogTitle class="text-base">重命名标签</DialogTitle>
-        </DialogHeader>
-        <input
-          v-model="renameValue"
-          class="w-full h-8 px-2.5 rounded-md border border-border bg-transparent
-                 text-sm outline-none focus:border-primary/60"
-          @keydown.enter="submitRename"
-        />
-        <DialogFooter>
-          <Button variant="outline" size="sm" @click="confirmRenameOpen = false">取消</Button>
-          <Button size="sm" @click="submitRename">保存</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
   </div>
 </template>
diff --git a/src/modules/terminal/TerminalQuickLaunch.vue b/src/modules/terminal/TerminalQuickLaunch.vue
new file mode 100644
index 0000000..b66af74
--- /dev/null
+++ b/src/modules/terminal/TerminalQuickLaunch.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+/**
+ * 终端「新建独立窗口」全局快捷键的宿主（挂在 App.vue）。
+ *
+ * # 为什么挂在 App 层
+ *
+ * 快捷键是**全局**的（任何窗口前台时都能按），而终端模块的界面是懒加载的 ——
+ * 用户此刻可能停在下载器或音乐模块上，那时终端模块根本没挂载。宿主必须在常驻组件里。
+ *
+ * # 触发后只做一件事：开选择窗口
+ *
+ * 选择会话的界面在**独立窗口里**（见 `NewTerminalWindow.vue`），不再经过主窗口弹窗 ——
+ * 用户按了快捷键就该看到一个终端窗口，而不是主窗口被拉到前台再弹一个框。
+ *
+ * # 键位从设置里读
+ *
+ * 键位存在终端设置的快捷键表里（设置 → 快捷键 → 会话 → 新建独立窗口，默认 `Ctrl+3`），
+ * 因此这里是「读设置 → 注册」而不是硬编码：改键后 watch 到变化即重新注册。
+ * 关掉那一行右侧的开关 = 不注册。
+ *
+ * # 注册方式与冲突
+ *
+ * 用 `@tauri-apps/plugin-global-shortcut` 的 JS 接口，而不是像剪贴板/快速面板那样
+ * 在 Rust `setup.rs` 注册：那条路需要为终端新增 Rust 命令并重新生成 `bindings.ts`。
+ * 代价是绕过了 `crate::shortcut` 的应用内占用表 —— 因此这条例外地在**注册失败时
+ * 只记日志**（系统或其它应用占用同名热键时静默降级），不弹提示打断启动。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { isRegistered, register, unregister } from '@tauri-apps/plugin-global-shortcut'
+import { useAppStore } from '@/stores/appStore'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { createLogger } from '@/lib/logger'
+import { ACTION_MAP } from '@/lib/terminalActions'
+import { openTerminalPickerWindow } from './openWindow'
+
+/** 与 `TERMINAL_ACTIONS` 中的动作 id 一致 */
+const ACTION_ID = 'newDetachedWindow'
+
+const logger = createLogger('terminal')
+const appStore = useAppStore()
+const store = useTerminalStore()
+
+/** 终端模块是否启用（禁用时不该继续占用系统热键） */
+const moduleEnabled = computed(() => appStore.modules.find(m => m.id === 'terminal')?.enabled !== false)
+
+/**
+ * 生效的键位。
+ *
+ * 设置还没加载时先用前端默认值（与 Rust `default_shortcuts()` 里的值一致），
+ * 避免「应用刚启动、快捷键暂时不生效」的空窗期。那一行的开关关掉即为空串（不注册）。
+ */
+const shortcutKey = computed(() => {
+  const fallback = ACTION_MAP[ACTION_ID]?.defaultKeys ?? ''
+  const row = store.settings?.shortcuts?.find(b => b.action === ACTION_ID)
+  if (!row) return fallback
+  if (row.enabled === false) return ''
+  return row.keys || fallback
+})
+
+/** 当前已注册的键位（改键时先注销它） */
+const registeredKey = ref('')
+
+async function applyShortcut() {
+  if (registeredKey.value) {
+    try {
+      if (await isRegistered(registeredKey.value)) await unregister(registeredKey.value)
+    } catch (e) {
+      logger.warn(`注销全局快捷键失败：${String(e)}`)
+    }
+    registeredKey.value = ''
+  }
+
+  if (!moduleEnabled.value) return
+  const key = shortcutKey.value
+  if (!key) return
+
+  try {
+    await register(key, onShortcut)
+    registeredKey.value = key
+  } catch (e) {
+    // 热键被系统或其它应用占用时静默降级：只记日志，不打断启动
+    logger.error(`注册终端全局快捷键 ${key} 失败：${String(e)}`)
+  }
+}
+
+function onShortcut(event: { state: 'Pressed' | 'Released' }) {
+  if (event.state !== 'Pressed') return
+  void openTerminalPickerWindow().catch(e => logger.error(`打开终端选择窗口失败：${String(e)}`))
+}
+
+onMounted(async () => {
+  // 先把终端设置读进来：否则启动瞬间只能拿前端默认键位注册，
+  // 用户改过键位的话会有一段时间占着旧键（直到终端模块首次打开才纠正）。
+  try {
+    await store.init()
+  } catch (e) {
+    logger.warn(`终端设置读取失败：${String(e)}`)
+  }
+  await applyShortcut()
+})
+onBeforeUnmount(() => {
+  if (registeredKey.value) void unregister(registeredKey.value).catch(() => {})
+})
+
+// 键位 / 模块开关变化时同步系统热键
+watch([shortcutKey, moduleEnabled], () => void applyShortcut())
+</script>
+
+<template>
+  <!-- 纯逻辑组件：选择界面在自己的窗口里，见 NewTerminalWindow.vue -->
+  <span />
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/TerminalWindow.vue b/src/modules/terminal/TerminalWindow.vue
index 6add464..f05446f 100644
--- a/src/modules/terminal/TerminalWindow.vue
+++ b/src/modules/terminal/TerminalWindow.vue
@@ -23,17 +23,65 @@
  *
  * 输出事件是**窗口广播**（Rust 侧 `app.emit` 发到所有窗口），主窗口的监听器
  * 管不到本窗口。这正是「独立窗口能收到输出」的实现基础。
+ *
+ * # 界面：与终端页同构的「终端卡片」（2026-09-21）
+ *
+ * 此前本窗口是一条 h-8 的标题栏 + 画布 + 状态栏，与主窗口里的终端页看起来
+ * 是两套东西。现在改成与终端页**同一套结构与组件**：
+ *
+ * ```
+ * ┌───────────────────────────────────────────────────────────┐
+ * │ [图标 会话名 …可拖拽…] │ 搜索 字体 清屏 ⋯ │  ─  □  ✕      │ ← 控制栏 h-9
+ * ├───────────────────────────────────────────────────────────┤
+ * │ 画布（xterm）                                             │
+ * ├───────────────────────────────────────────────────────────┤
+ * │ 状态栏（与主窗口同一个 TerminalStatusBar）                 │
+ * └───────────────────────────────────────────────────────────┘
+ * ```
+ *
+ * 控制栏左端承担原标题栏的两件事：显示「这是哪个会话」与**窗口拖拽区**
+ * （无边框窗口必须有拖拽区，否则窗口挪不动）。右侧是复用的 `TerminalToolbar`
+ * （`standalone` 模式：隐藏只对主窗口页内面板有意义的动作）+ 最小化/最大化/关闭。
+ *
+ * 窗口绑定单个会话，因此**不渲染标签栏** —— 这保持了「一个会话 ↔ 一个窗口」的
+ * 语义：主窗口那侧的「已在独立窗口中打开」提示条、标签上的「独立」徽标都以此为准。
  */
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { getCurrentWindow } from '@tauri-apps/api/window'
-import { AlertTriangle, Loader2, Menu, Minus, Square, X } from '@lucide/vue'
+import {
+  AlertTriangle,
+  Globe,
+  Loader2,
+  Minus,
+  Square,
+  TerminalSquare,
+  X
+} from '@lucide/vue'
+import { toast } from 'vue-sonner'
 import { useTerminalStore } from '@/stores/terminalStore'
 import { useTerminalStream } from '@/composables/useSessionStream'
 import { useTerminalKeys } from '@/composables/useTerminalKeys'
+import { toggleHistoryPopover, toggleSnippetsPopover } from './useRecordPopovers'
 import { createLogger } from '@/lib/logger'
+import { applyStoredAccent } from '@/lib/theme'
+import { appIsDark } from '@/lib/terminalThemes'
+import { STORAGE_KEYS } from '@/lib/constants'
 import TerminalPane from './components/TerminalPane.vue'
+import TerminalToolbar from './components/TerminalToolbar.vue'
 import TerminalStatusBar from './components/TerminalStatusBar.vue'
+import TerminalContextMenu from './components/TerminalContextMenu.vue'
 import HostKeyPromptDialog from './components/HostKeyPromptDialog.vue'
+import AiPanel from './components/AiPanel.vue'
+import { Button } from '@/components/ui/button'
+import { Toaster } from '@/components/ui/sonner'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
 
 const logger = createLogger('terminal')
 
@@ -55,6 +103,12 @@ const { effectiveAppearance, bumpFont, resetFont, bindings, init } = stream
 
 const session = computed(() => store.sessionById(sessionId))
 
+// ===== 控制栏左端：会话身份（同时是窗口拖拽区） =====
+
+const isSsh = computed(() => session.value?.kind === 'ssh')
+const sessionLabel = computed(() => store.sessionLabel(session.value) || '终端')
+const sessionTarget = computed(() => (isSsh.value ? store.sessionTarget(session.value) : ''))
+
 // ===== 面板引用 =====
 
 const paneRef = ref<InstanceType<typeof TerminalPane> | null>(null)
@@ -64,7 +118,105 @@ const paneRef = ref<InstanceType<typeof TerminalPane> | null>(null)
 const ready = ref(false)
 const fatal = ref('')
 
+// ===== 主题：跟随主窗口 =====
+//
+// 独立窗口有自己的 JS 运行时，**不加载 appStore**（见文件头），所以主题不能靠
+// 主窗口的 store 传过来。项目里其它独立窗口（快速面板 / 剪贴板 / 下载窗口…）
+// 的统一做法是：各自读同一份 `localStorage` 设置 → 切 `dark` class + 应用主题色
+// → 监听 `storage` 事件跟随主窗口的改动。这里沿用同一套，只是**不应用窗口效果**
+// （mica / acrylic 需要透明通道，本窗口是不透明窗口，见 terminal/window.rs）。
+//
+// 少了这段时，主窗口是深色而独立窗口仍是浅色 —— 以前窗口里几乎全是 xterm
+// （自带配色）所以不明显，控制栏与状态栏搬进来之后就露馅了。
+//
+// 另外：本窗口由 Rust **隐藏创建**（见 terminal/window.rs），应用完主题才显示 ——
+// 否则深色模式下会先闪一个纯白窗口。因此这里除了切 class，还要把**窗口底色**
+// 设成主题背景色（`--background`，见 style.css），避免显示瞬间仍是白底。
+
+/** 与 style.css 的 `--background` 对齐：浅色 #ffffff / 深色 #16161a */
+const WINDOW_BG = { light: '#ffffff', dark: '#16161a' }
+
+/** 主窗口的主题设置（独立窗口只共享 settings，不共享 store） */
+function readMainTheme(): string {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEYS.appSettings)
+    if (raw) {
+      const s = JSON.parse(raw) as { theme?: string }
+      return s.theme ?? 'system'
+    }
+  } catch {
+    /* 设置不可读时按跟随系统处理 */
+  }
+  return 'system'
+}
+
+/** system 模式下用 matchMedia 判断深浅（独立窗口拿不到主窗口的响应式状态） */
+function resolveIsDark(theme: string): boolean {
+  if (theme === 'dark') return true
+  if (theme === 'light') return false
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+async function applyTheme() {
+  const root = document.documentElement
+  const theme = readMainTheme()
+  const isDark = resolveIsDark(theme)
+
+  // 1. 窗口原生主题 + 底色：无边框窗口用它同步 WebView 的 prefers-color-scheme，
+  //    底色则保证「显示的那一刻」就已经是主题色（而不是 WebView 默认的白）
+  try {
+    await win.setTheme(theme === 'system' ? null : (theme as 'dark' | 'light'))
+  } catch {
+    /* 平台不支持时忽略 */
+  }
+  try {
+    // 底色单独 try：setTheme 失败不该连带跳过底色，否则仍会白底闪一下
+    await win.setBackgroundColor(isDark ? WINDOW_BG.dark : WINDOW_BG.light)
+  } catch {
+    /* 忽略 */
+  }
+
+  // 2. DOM class（组件里的 bg-background / text-foreground 全靠它切色）
+  root.classList.toggle('dark', isDark)
+  // 终端画布的「跟随应用主题」要跟着本窗口的深浅走（见 terminalThemes.ts）
+  appIsDark.value = isDark
+
+  // 3. 主题色：与主窗口共用同一份设置（localStorage 的 accentId / accentHex）
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
+}
+
+/**
+ * 显示本窗口。
+ *
+ * Rust 侧是隐藏创建的（见文件头说明），所以第一次显示由这里触发；
+ * 放在 `applyTheme` 之后，用户看到的第一帧就是正确配色。
+ */
+async function revealWindow() {
+  try {
+    await win.show()
+    await win.setFocus()
+  } catch (e) {
+    logger.warn(`显示独立窗口失败：${String(e)}`)
+  }
+}
+
+const onThemeChange = () => void applyTheme()
+/** 主窗口改主题时，同源的其它窗口会收到 storage 事件 —— 这就是「跟随」的实现 */
+const onStorageChange = (e: StorageEvent) => {
+  if (e.key === STORAGE_KEYS.appSettings) void applyTheme()
+}
+
+const darkMedia = window.matchMedia('(prefers-color-scheme: dark)')
+
 onMounted(async () => {
+  darkMedia.addEventListener('change', onThemeChange)
+  window.addEventListener('storage', onStorageChange)
+
+  // 主题 → 显示：窗口是隐藏创建的，这一步之后用户才第一次看到它。
+  // 即使后面初始化失败（会话已结束等），窗口也已经可见 —— 错误提示才看得见。
+  await applyTheme()
+  await revealWindow()
+
   if (!sessionId) {
     fatal.value = '缺少会话 ID，无法确定要显示哪个会话'
     ready.value = true
@@ -84,7 +236,7 @@ onMounted(async () => {
     // 把标题设成会话名，方便任务栏与窗口列表识别
     const info = store.sessionById(sessionId)
     if (info?.title) {
-      void win.setTitle(`${info.title} · 终端`)
+      void win.setTitle(`${info.title} · 终端`).catch(() => {})
     }
   } catch (e) {
     logger.error(`独立窗口初始化失败：${String(e)}`)
@@ -105,12 +257,104 @@ onMounted(async () => {
  * `invoke` 仍可发出（IPC 通道在窗口销毁前还有效），这是最后一个可靠时机。
  */
 onBeforeUnmount(() => {
+  darkMedia.removeEventListener('change', onThemeChange)
+  window.removeEventListener('storage', onStorageChange)
   if (!sessionId) return
   void store.attachSession(sessionId).catch(e => {
     logger.warn(`重置 detached 标记失败：${String(e)}`)
   })
 })
 
+// ===== 控制栏动作（终端页同款，但只保留单会话窗口成立的那些） =====
+//
+// 与 TerminalWorkspace 的同一组动作是**有意的少量重复**：那边还要管分屏、
+// SFTP、模板等页面级状态，抽成共享 composable 会把两边的状态搅在一起。
+// 这里只保留读 store 就能完成的部分。
+
+/** 搜索 */
+const searching = ref(false)
+const searchHint = ref('')
+
+function toggleSearch() {
+  searching.value = !searching.value
+  if (!searching.value) {
+    paneRef.value?.clearSearch?.()
+    searchHint.value = ''
+  }
+}
+
+function doSearch(keyword: string, back = false) {
+  const found = back ? paneRef.value?.findPrevious?.(keyword) : paneRef.value?.findNext?.(keyword)
+  searchHint.value = found === false ? '无匹配' : ''
+}
+
+function handleClear() {
+  const shellKind = store.shells.find(s => s.id === session.value?.targetId)?.kind
+  // 清屏是「让 shell 执行清屏」而不是「从 xterm 缓冲里删掉」——
+  // 后者只是视觉上清了，向上滚动仍能看到旧内容，且 shell 的行计数会错乱
+  void store.clearSession(sessionId, shellKind)
+  paneRef.value?.clear?.()
+}
+
+/** 重命名会话（控制栏没有标签，改的是窗口标题与会话标签共用的那个名称） */
+const renameOpen = ref(false)
+const renameValue = ref('')
+
+function openRename() {
+  renameValue.value = session.value?.title ?? ''
+  renameOpen.value = true
+}
+
+async function submitRename() {
+  const name = renameValue.value.trim()
+  if (!name) return
+  try {
+    await store.renameSession(sessionId, name)
+    // 窗口标题也保持一致：任务栏/窗口列表里认的是系统标题，不是会话标签
+    void win.setTitle(`${name} · 终端`).catch(() => {})
+    toast.success('已重命名')
+    renameOpen.value = false
+  } catch (e) {
+    toast.error(`重命名失败：${String(e)}`)
+  }
+}
+
+/** AI 命令助手：把当前选区作为上下文（与终端页同一口径） */
+const aiOpen = ref(false)
+function getTerminalContext(): string {
+  return paneRef.value?.getSelection?.() ?? ''
+}
+
+/** 会话日志 */
+async function toggleLogging() {
+  const sess = session.value
+  if (!sess) return
+  try {
+    await store.toggleLogging(sessionId, !sess.logging)
+    if (!sess.logging) {
+      const p = await store.logPath(sessionId)
+      toast.success(p ? `已开始记录会话日志：${p}` : '已开始记录会话日志')
+    } else {
+      toast.success('已停止记录会话日志（文件已保留）')
+    }
+  } catch (e) {
+    toast.error(`切换日志记录失败：${String(e)}`)
+  }
+}
+
+async function openLogDir() {
+  try {
+    const p = await store.logPath(sessionId)
+    if (!p) {
+      toast.info('当前会话未开启日志')
+      return
+    }
+    await store.revealLocalPath(p)
+  } catch (e) {
+    toast.error(`打开日志位置失败：${String(e)}`)
+  }
+}
+
 // ===== 快捷键（独立窗口内只保留与本会话相关的动作） =====
 
 useTerminalKeys({
@@ -118,8 +362,8 @@ useTerminalKeys({
   onAction: actionId => {
     switch (actionId) {
       case 'copy': {
-        const text = paneRef.value?.getSelection?.()
-        if (text) void navigator.clipboard.writeText(text.replace(/\n+$/, ''))
+        // 与右键菜单走同一个函数：都遵守「复制时去掉末尾换行」设置
+        void doCopy()
         break
       }
       case 'paste':
@@ -140,6 +384,17 @@ useTerminalKeys({
       case 'fontReset':
         resetFont()
         break
+      case 'search':
+        toggleSearch()
+        break
+      // 命令历史 / 片段：控制栏上的两个浮层，独立窗口里同样适用
+      // （它们只需要当前会话，不依赖终端页的分屏与面板容器）
+      case 'history':
+        toggleHistoryPopover()
+        break
+      case 'snippets':
+        toggleSnippetsPopover()
+        break
       // 标签类/分屏类动作在独立窗口里没有意义，静默忽略
       default:
         break
@@ -147,15 +402,89 @@ useTerminalKeys({
   }
 })
 
-// ===== 无边框窗口的自定义标题栏 =====
+// ===== 右键菜单 =====
+//
+// 菜单本身与终端页共用同一个组件（`TerminalContextMenu`）。此前这里没有右键处理，
+// 而 main.ts 全局 `preventDefault` 掉了浏览器原生菜单 —— 独立窗口里右键毫无反应。
+
+const contextMenu = ref<{ x: number; y: number } | null>(null)
+
+/** 右键菜单的「复制」是否可用（取决于当时是否有选区） */
+const contextHasSelection = computed(() => !!paneRef.value?.getSelection?.())
+
+function closeContextMenu() {
+  contextMenu.value = null
+}
 
 /**
- * 无边框窗口需要自己实现拖拽与最小化/最大化/关闭。
- *
- * 但本窗口**不实现拖拽区域**：终端面板占满整个窗口，若在顶部加拖拽条，
- * 用户会失去一块垂直空间；而拖拽整个窗口的需求可以通过系统的方式完成
- * （Alt+Space、或拖窗口边缘）。这里只保留最小化/最大化/关闭三个按钮。
+ * 面板右键的统一入口，与终端页同一套三种行为（`selection.rightClick`）：
+ * - `menu`：弹菜单
+ * - `paste`：直接粘贴
+ * - `select-word`：先选中右键处的词，再弹菜单（只选中不弹菜单会让用户无法继续操作）
  */
+function onPaneContextMenu(payload: { x: number; y: number }) {
+  const mode = store.settings?.selection?.rightClick ?? 'menu'
+
+  if (mode === 'paste') {
+    void doPaste()
+    return
+  }
+  if (mode === 'select-word') {
+    paneRef.value?.selectWordAt?.(payload.x, payload.y)
+  }
+  contextMenu.value = payload
+}
+
+async function doCopy() {
+  const text = paneRef.value?.getSelection?.()
+  closeContextMenu()
+  if (!text) {
+    toast.info('没有选中内容')
+    return
+  }
+  const trim = store.settings?.selection?.trimTrailingNewline ?? true
+  const payload = trim && text.endsWith('\n') ? text.replace(/\n+$/, '') : text
+  try {
+    await navigator.clipboard.writeText(payload)
+  } catch (e) {
+    toast.error(`复制失败：${String(e)}`)
+  }
+}
+
+async function doPaste() {
+  closeContextMenu()
+  try {
+    const text = await navigator.clipboard.readText()
+    if (!text) return
+    await store.write(sessionId, text)
+  } catch (e) {
+    toast.error(`粘贴失败：${String(e)}`)
+  }
+}
+
+function doSelectAll() {
+  paneRef.value?.selectAll?.()
+  closeContextMenu()
+}
+
+function doClearFromMenu() {
+  closeContextMenu()
+  handleClear()
+}
+
+function doRenameFromMenu() {
+  closeContextMenu()
+  openRename()
+}
+
+async function doCloseFromMenu() {
+  closeContextMenu()
+  await store.closeSession(sessionId)
+}
+
+// ===== 无边框窗口的窗口按钮 =====
+//
+// 拖拽区在控制栏左端（见模板），这里只留最小化/最大化/关闭三个按钮。
 async function minimize() {
   await win.minimize()
 }
@@ -168,42 +497,90 @@ async function closeWindow() {
 </script>
 
 <template>
-  <div class="flex flex-col h-screen w-screen overflow-hidden bg-background">
-    <!-- 标题栏 -->
-    <div
-      class="shrink-0 h-8 flex items-center gap-2 px-2 border-b border-border select-none"
-      data-tauri-drag-region
-    >
-      <Menu class="size-3.5 text-muted-foreground shrink-0 pointer-events-none" />
-      <span class="text-xs truncate flex-1 pointer-events-none">
-        {{ session?.title || '终端' }}
-      </span>
+  <!--
+    独立窗口是**另一个 WebView 入口**（main.ts 按 hash 路由），不经过 App.vue，
+    因此这里必须自带 TooltipProvider —— 否则控制栏里的 Tooltip 取不到上下文。
+  -->
+  <TooltipProvider>
+    <div class="flex flex-col h-screen w-screen overflow-hidden bg-background">
+    <!-- 控制栏：会话身份（拖拽区）+ 控制栏动作 + 窗口按钮 -->
+    <div class="shrink-0 flex items-center gap-1 h-9 px-1.5 border-b border-border">
+      <!--
+        拖拽区：无边框窗口靠它移动。子元素 pointer-events-none，
+        让 mousedown 的 target 始终落在这块带 data-tauri-drag-region 的容器上。
+      -->
+      <div class="flex h-full min-w-0 flex-1 items-center gap-1.5 px-2" data-tauri-drag-region>
+        <component
+          :is="isSsh ? Globe : TerminalSquare"
+          class="size-3.5 shrink-0 text-muted-foreground pointer-events-none"
+        />
+        <span class="truncate text-xs font-medium pointer-events-none">{{ sessionLabel }}</span>
+        <span
+          v-if="sessionTarget"
+          class="truncate text-[11px] text-muted-foreground pointer-events-none"
+        >
+          {{ sessionTarget }}
+        </span>
+      </div>
 
-      <button
-        class="size-6 flex items-center justify-center rounded hover:bg-accent transition-colors"
-        title="最小化"
-        @click="minimize"
-      >
-        <Minus class="size-3" />
-      </button>
-      <button
-        class="size-6 flex items-center justify-center rounded hover:bg-accent transition-colors"
-        title="最大化"
-        @click="toggleMaximize"
-      >
-        <Square class="size-2.5" />
-      </button>
-      <button
-        class="size-6 flex items-center justify-center rounded hover:bg-destructive
-               hover:text-destructive-foreground transition-colors"
-        title="关闭窗口（会话保留）"
-        @click="closeWindow"
-      >
-        <X class="size-3.5" />
-      </button>
+      <TerminalToolbar
+        v-if="ready && !fatal"
+        standalone
+        :session-id="sessionId"
+        :session="session"
+        :searching="searching"
+        :search-hint="searchHint"
+        :is-ssh="isSsh"
+        :sftp-visible="false"
+        :logging="session?.logging ?? false"
+        :font-size="effectiveAppearance?.fontSize ?? 14"
+        @toggle-search="toggleSearch"
+        @search="doSearch($event)"
+        @search-next="doSearch($event)"
+        @search-prev="doSearch($event, true)"
+        @font="bumpFont($event)"
+        @font-reset="resetFont"
+        @clear="handleClear"
+        @rename="openRename"
+        @open-ai="aiOpen = true"
+        @toggle-logging="toggleLogging"
+        @open-log-dir="openLogDir"
+      />
+
+      <div class="w-px h-4 bg-border shrink-0" />
+
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button variant="ghost" size="icon-sm" @click="minimize">
+            <Minus class="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">最小化</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button variant="ghost" size="icon-sm" @click="toggleMaximize">
+            <Square class="size-3" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">最大化 / 还原</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            class="hover:!bg-destructive hover:!text-destructive-foreground"
+            @click="closeWindow"
+          >
+            <X class="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">关闭窗口（会话保留，回到主窗口）</TooltipContent>
+      </Tooltip>
     </div>
 
-    <!-- 主体 -->
+    <!-- 画布 -->
     <div class="flex-1 min-h-0 relative">
       <div v-if="!ready" class="absolute inset-0 flex items-center justify-center">
         <div class="flex flex-col items-center gap-3">
@@ -225,12 +602,29 @@ async function closeWindow() {
         :session-id="sessionId"
         :appearance="effectiveAppearance"
         :visible="true"
+        @contextmenu="onPaneContextMenu"
       />
     </div>
 
-    <!-- 状态栏 -->
+    <!-- 右键菜单：与终端页同一组件；「重命名」在单会话窗口里叫「重命名会话」 -->
+    <TerminalContextMenu
+      v-if="contextMenu"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      :can-copy="contextHasSelection"
+      rename-label="重命名会话"
+      @copy="doCopy"
+      @paste="doPaste"
+      @select-all="doSelectAll"
+      @clear="doClearFromMenu"
+      @rename="doRenameFromMenu"
+      @close="doCloseFromMenu"
+    />
+
+    <!-- 状态栏：与主窗口终端页同一个组件，高度/字号一致；
+         显隐同样尊重「显示状态栏」设置（此前这里无条件渲染，关掉设置后窗口里还在） -->
     <TerminalStatusBar
-      v-if="ready && !fatal"
+      v-if="ready && !fatal && store.settings?.layout?.showStatusBar !== false"
       :session="session"
       :font-size="effectiveAppearance?.fontSize ?? 14"
       :cols="session?.cols"
@@ -239,7 +633,36 @@ async function closeWindow() {
 
     <!-- 主机密钥确认：独立窗口也可能触发（用户直接从这个窗口发起连接时） -->
     <HostKeyPromptDialog />
-  </div>
+
+    <!-- AI 命令助手 -->
+    <AiPanel v-model:open="aiOpen" :session-id="sessionId" :get-context="getTerminalContext" />
+
+    <!-- 重命名 -->
+    <Dialog v-model:open="renameOpen">
+      <DialogContent class="max-w-sm">
+        <DialogHeader>
+          <DialogTitle class="text-base">重命名会话</DialogTitle>
+        </DialogHeader>
+        <input
+          v-model="renameValue"
+          class="w-full h-8 px-2.5 rounded-md border border-border bg-transparent
+                 text-sm outline-none focus:border-primary/60"
+          @keydown.enter="submitRename"
+        />
+        <DialogFooter>
+          <Button variant="outline" size="sm" @click="renameOpen = false">取消</Button>
+          <Button size="sm" @click="submitRename">保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!--
+      提示条要自带：Toaster 是**窗口级**的，主窗口那个管不到本窗口 ——
+      重命名、切换日志、AI 助手的反馈都在这个窗口里发出。
+    -->
+    <Toaster position="bottom-right" rich-colors close-button :style="{ zIndex: 99999 }" />
+    </div>
+  </TooltipProvider>
 </template>
 
 <style scoped>
@@ -249,4 +672,4 @@ async function closeWindow() {
   overflow: hidden;
   margin: 0;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/terminal/components/AiPanel.vue b/src/modules/terminal/components/AiPanel.vue
index 98fdfe8..dff1a86 100644
--- a/src/modules/terminal/components/AiPanel.vue
+++ b/src/modules/terminal/components/AiPanel.vue
@@ -10,7 +10,7 @@
  * # 交互与片段库同一套安全语义
  *
  * 建议默认「填入命令行」（用户自己按回车），「直接执行」是显式第二动作。
- * 理由与 SnippetPanel 一致：命令被自动执行与等待用户确认，在心理上完全不同；
+ * 理由与命令片段（SnippetPopover）一致：命令被自动执行与等待用户确认，在心理上完全不同；
  * 而且模型的建议未经本地验证，用户应当有机会先看一眼再回车。
  *
  * # 上下文
@@ -26,6 +26,7 @@ import { useTerminalStore } from '@/stores/terminalStore'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Dialog,
   DialogContent,
@@ -135,7 +136,7 @@ function engineLabel(e: AiEngineOption): string {
 
 <template>
   <Dialog :open="open" @update:open="v => emit('update:open', v)">
-    <DialogContent class="max-w-lg">
+    <DialogContent class="max-w-lg max-h-[85vh]">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2 text-base">
           <Sparkles class="size-4" />AI 命令助手
@@ -187,8 +188,11 @@ function engineLabel(e: AiEngineOption): string {
         <Sparkles class="size-3.5" />{{ generating ? '生成中…' : '生成建议' }}
       </Button>
 
-      <!-- 建议 -->
-      <div v-if="suggestions.length > 0" class="space-y-1.5">
+      <!--
+        建议：条数由模型决定，可能很多条，必须限高滚动（用 ScrollArea 而非原生滚动条）
+      -->
+      <ScrollArea v-if="suggestions.length > 0" class="max-h-[42vh] pr-3">
+        <div class="space-y-1.5">
         <div
           v-for="(s, i) in suggestions"
           :key="i"
@@ -206,6 +210,7 @@ function engineLabel(e: AiEngineOption): string {
           </div>
         </div>
       </div>
+      </ScrollArea>
     </DialogContent>
   </Dialog>
 </template>
diff --git a/src/modules/terminal/components/ForwardPanel.vue b/src/modules/terminal/components/ForwardPanel.vue
index 242e386..5340817 100644
--- a/src/modules/terminal/components/ForwardPanel.vue
+++ b/src/modules/terminal/components/ForwardPanel.vue
@@ -23,6 +23,7 @@ import { useTerminalStore } from '@/stores/terminalStore'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Dialog,
   DialogContent,
@@ -157,7 +158,7 @@ function directionText(f: ForwardView): string {
 
 <template>
   <Dialog :open="open" @update:open="v => emit('update:open', v)">
-    <DialogContent class="max-w-xl">
+    <DialogContent class="max-w-xl max-h-[85vh]">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2 text-base">
           <Network class="size-4" />端口转发
@@ -167,7 +168,8 @@ function directionText(f: ForwardView): string {
         </DialogDescription>
       </DialogHeader>
 
-      <!-- ===== 已有规则 ===== -->
+      <!-- ===== 已有规则（条数不限，限高滚动） ===== -->
+      <ScrollArea class="max-h-[40vh] pr-3">
       <div class="space-y-1.5 min-h-[60px]">
         <p v-if="loading" class="text-xs text-muted-foreground">加载中…</p>
         <p v-else-if="forwards.length === 0" class="text-xs text-muted-foreground">
@@ -181,7 +183,7 @@ function directionText(f: ForwardView): string {
         >
           <span
             class="shrink-0 rounded px-1.5 py-0.5 text-[10px]"
-            :class="f.kind === 'local' ? 'bg-primary/10 text-primary' : 'bg-blue-500/10 text-blue-500'"
+            :class="f.kind === 'local' ? 'bg-primary/10 text-primary' : 'bg-info-soft text-info'"
           >
             {{ f.kind === 'local' ? '本地' : '远程' }}
           </span>
@@ -205,6 +207,7 @@ function directionText(f: ForwardView): string {
           </Button>
         </div>
       </div>
+      </ScrollArea>
 
       <!-- ===== 新增 ===== -->
       <div class="space-y-2 rounded-md border border-border p-3">
diff --git a/src/modules/terminal/components/HistoryPanel.vue b/src/modules/terminal/components/HistoryPanel.vue
deleted file mode 100644
index 11d0037..0000000
--- a/src/modules/terminal/components/HistoryPanel.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<script setup lang="ts">
-/**
- * 命令历史面板（浮层）。
- *
- * # 交互模型：搜索即过滤、单击填入、双击执行
- *
- * 历史与片段不同：片段是「我准备好要用的」，历史是「我已经用过的」。
- * 后者的使用模式是**快速找回**，因此搜索框默认聚焦、输入即过滤、
- * 键盘上下键可直接选中。
- *
- * 单击 = 填入命令行（不执行），双击或 `Enter` = 填入并执行。
- * 这个区分的必要性在于：历史里躺着用户过去敲过的所有命令，包括
- * `rm -rf`、`DROP TABLE`。默认执行会让「翻历史」变成一件危险的事。
- *
- * # 为什么「只显示当前会话来源」不做默认
- *
- * 有人按主机筛选（「那台机器上我跑过什么」），也有人跨主机找同一条命令
- * （「上次那条 rsync 参数是怎么写的」）。默认全量 + 可选筛选比反向合理 ——
- * 前者只需点一下筛选，后者要清空筛选才能看到全部。
- */
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import {
-  ArrowDownToLine,
-  Check,
-  Clock,
-  Copy,
-  FolderOpen,
-  History,
-  Loader2,
-  Play,
-  Search,
-  Star,
-  Trash2,
-  X
-} from '@lucide/vue'
-import { toast } from 'vue-sonner'
-import { useTerminalStore } from '@/stores/terminalStore'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import type { CommandHistoryItem, SessionInfo } from '@/types/terminal'
-
-const props = defineProps<{
-  sessionId: string | null
-  session: SessionInfo | undefined
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const store = useTerminalStore()
-
-// ===== 筛选状态 =====
-
-const keyword = ref('')
-const hostFilter = ref('')
-const favoritedOnly = ref(false)
-/** 选中项（用于键盘导航与详情） */
-const selectedId = ref<number | null>(null)
-
-const items = computed(() => store.historyPage.items)
-const total = computed(() => store.historyPage.total)
-
-/** 当前会话的来源 id（用于「只看本会话」快捷筛选） */
-const currentHostId = computed(() => props.session?.targetId ?? '')
-
-/**
- * 加载历史。
- *
- * `force` 为 false 时不重复请求（浮层首次打开才拉，其余靠筛选变化触发）——
- * 浮层每次开关都重拉会让「刚删掉的记录因为重拉又出现」这种错觉出现，
- * 而实际是删成功了、只是列表被刷新回旧快照（请求早于删除返回）。
- */
-async function reload(force = false) {
-  try {
-    await store.loadHistory({
-      keyword: keyword.value,
-      hostId: hostFilter.value,
-      favoritedOnly: favoritedOnly.value
-    })
-    if (force) await store.loadHistorySources()
-  } catch (e) {
-    toast.error(`加载历史失败：${String(e)}`)
-  }
-}
-
-onMounted(async () => {
-  await reload(true)
-})
-
-// 筛选变化即重查。搜索框用 200ms 防抖：输入过程中每个字符都发请求
-// 会让 IPC 通道被无效查询占满（store 里已有请求序号防乱序，但少发总比多发好）。
-let searchTimer: ReturnType<typeof setTimeout> | null = null
-watch([keyword, favoritedOnly], () => {
-  if (searchTimer) clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => void reload(), 200)
-})
-// 来源筛选是离散选择，无需防抖
-watch(hostFilter, () => void reload())
-
-// 卸载时清掉未触发的防抖：面板关掉后定时器仍会发一次无主查询
-onBeforeUnmount(() => {
-  if (searchTimer) clearTimeout(searchTimer)
-})
-
-// ===== 操作 =====
-
-/** 把命令填入会话命令行（不执行） */
-async function useCommand(item: CommandHistoryItem, submit = false) {
-  if (!props.sessionId) {
-    toast.info('当前没有活跃会话')
-    return
-  }
-  try {
-    const r = await store.runHistory(props.sessionId, item.command, submit)
-    if (r.ok) {
-      // 填入成功后关闭浮层：用户的下一步是看命令行并按回车，
-      // 浮层挡在那里没有价值
-      if (!submit) emit('close')
-      else toast.success(r.message)
-    } else {
-      toast.error(r.message)
-    }
-  } catch (e) {
-    toast.error(`操作失败：${String(e)}`)
-  }
-}
-
-async function copyCommand(item: CommandHistoryItem) {
-  try {
-    await navigator.clipboard.writeText(item.command)
-    toast.success('已复制到剪贴板')
-  } catch (e) {
-    toast.error(`复制失败：${String(e)}`)
-  }
-}
-
-async function toggleFavorite(item: CommandHistoryItem) {
-  try {
-    await store.toggleHistoryFavorite(item.id)
-  } catch (e) {
-    toast.error(`操作失败：${String(e)}`)
-  }
-}
-
-async function removeItem(item: CommandHistoryItem) {
-  try {
-    const r = await store.deleteHistory(item.id)
-    if (!r.ok) toast.info(r.message)
-    if (selectedId.value === item.id) selectedId.value = null
-  } catch (e) {
-    toast.error(`删除失败：${String(e)}`)
-  }
-}
-
-async function clearAll() {
-  // 二次确认，且默认只清非收藏 —— 破坏性操作的默认值应当是最保守的那个。
-  // 用 window.confirm 而不是弹 Dialog：这是浮层里的浮层，
-  // 嵌一个 Radix Dialog 会带来焦点陷阱与层级（z-index）的两难。
-  const ok = window.confirm(
-    '确定清空命令历史吗？\n\n收藏的记录会保留（如需连同收藏一起清空，请先取消收藏）。'
-  )
-  if (!ok) return
-  try {
-    const r = await store.clearHistory(true)
-    toast.success(r.message)
-  } catch (e) {
-    toast.error(`清空失败：${String(e)}`)
-  }
-}
-
-// ===== 键盘导航 =====
-
-/**
- * 上下键移动选中项，Enter 执行。
- *
- * 只在列表为空时不处理；其余一律 `preventDefault` —— 否则方向键会
- * 同时滚动容器，选中项移出可视区。
- */
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
-    emit('close')
-    return
-  }
-  if (items.value.length === 0) return
-
-  const idx = items.value.findIndex(i => i.id === selectedId.value)
-  if (e.key === 'ArrowDown') {
-    e.preventDefault()
-    const next = idx < 0 ? 0 : Math.min(items.value.length - 1, idx + 1)
-    selectedId.value = items.value[next].id
-  } else if (e.key === 'ArrowUp') {
-    e.preventDefault()
-    const next = idx <= 0 ? 0 : idx - 1
-    selectedId.value = items.value[next].id
-  } else if (e.key === 'Enter') {
-    e.preventDefault()
-    const item = items.value.find(i => i.id === selectedId.value)
-    if (item) void useCommand(item, false)
-  }
-}
-
-// ===== 展示辅助 =====
-
-/** 相对时间（历史列表里「3 分钟前」比精确时间戳更有信息量） */
-function relTime(ts: number): string {
-  const diff = Date.now() - ts
-  if (diff < 60_000) return '刚刚'
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`
-  if (diff < 2_592_000_000) return `${Math.floor(diff / 86_400_000)} 天前`
-  return new Date(ts).toLocaleDateString('zh-CN')
-}
-
-/**
- * 目录缩略：只显示最后一级。
- *
- * 完整路径会占满一行且把命令挤到看不见的位置，而用户分辨「在哪个项目里跑的」
- * 只需要最后一级。完整路径放在 `title` 里悬停可看。
- */
-function cwdTail(cwd: string): string {
-  if (!cwd) return ''
-  const parts = cwd.split(/[\\/]/).filter(Boolean)
-  return parts.length > 0 ? parts[parts.length - 1] : cwd
-}
-
-/** 退出码非 0 时给视觉提示（用户找的常常正是「刚才那条报错的命令」） */
-function isFailed(item: CommandHistoryItem): boolean {
-  return item.exitCode !== null && item.exitCode !== 0
-}
-</script>
-
-<template>
-  <!-- 作为模块 Tab 内容渲染（根不再是居中对话框） -->
-  <div
-    class="h-full flex flex-col rounded-lg border border-border bg-background overflow-hidden"
-    @keydown="onKeydown"
-  >
-      <!-- ===== 头部：搜索 + 筛选 ===== -->
-      <div class="shrink-0 border-b border-border">
-        <div class="flex items-center gap-2 px-3 h-11">
-          <History class="size-4 text-muted-foreground shrink-0" />
-          <span class="text-sm font-medium shrink-0">命令历史</span>
-          <span class="text-xs text-muted-foreground shrink-0">
-            共 {{ total }} 条{{ hostFilter || favoritedOnly || keyword ? '（已筛选）' : '' }}
-          </span>
-
-          <div class="flex-1" />
-
-          <div class="relative">
-            <Search class="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              v-model="keyword"
-              placeholder="搜索命令…"
-              class="h-7 w-[240px] pl-7 text-xs"
-              autofocus
-            />
-          </div>
-
-          <Button
-            variant="ghost"
-            size="sm"
-            class="h-7 text-xs shrink-0"
-            title="清空历史（保留收藏）"
-            @click="clearAll"
-          >
-            <Trash2 class="size-3.5" />
-          </Button>
-
-          <Button variant="ghost" size="sm" class="h-7 text-xs shrink-0" title="关闭" @click="emit('close')">
-            <X class="size-3.5" />
-          </Button>
-        </div>
-
-        <!-- 筛选行 -->
-        <div class="flex items-center gap-2 px-3 pb-2 text-xs">
-          <button
-            class="h-6 px-2 rounded border transition-colors"
-            :class="hostFilter === '' && !favoritedOnly
-              ? 'border-primary/50 bg-primary/10 text-foreground'
-              : 'border-border text-muted-foreground hover:bg-accent'"
-            @click="hostFilter = ''; favoritedOnly = false"
-          >
-            全部来源
-          </button>
-          <button
-            v-if="currentHostId"
-            class="h-6 px-2 rounded border transition-colors"
-            :class="hostFilter === currentHostId
-              ? 'border-primary/50 bg-primary/10 text-foreground'
-              : 'border-border text-muted-foreground hover:bg-accent'"
-            :title="`只看本会话（${store.sessionLabel(session)}）`"
-            @click="hostFilter = currentHostId; favoritedOnly = false"
-          >
-            仅本会话
-          </button>
-          <button
-            class="h-6 px-2 rounded border transition-colors inline-flex items-center gap-1"
-            :class="favoritedOnly
-              ? 'border-primary/50 bg-primary/10 text-foreground'
-              : 'border-border text-muted-foreground hover:bg-accent'"
-            @click="favoritedOnly = !favoritedOnly"
-          >
-            <Star class="size-3" /> 收藏
-          </button>
-
-          <!-- 其他来源（只列有历史的，避免显示一堆空来源） -->
-          <div class="flex-1" />
-          <select
-            v-if="store.historySources.length > 1"
-            :value="hostFilter"
-            class="h-6 px-1 rounded border border-border bg-transparent text-xs max-w-[200px]"
-            @change="hostFilter = ($event.target as HTMLSelectElement).value"
-          >
-            <option value="">按来源筛选…</option>
-            <option v-for="s in store.historySources" :key="s.hostId" :value="s.hostId">
-              {{ s.hostName }}（{{ s.count }}）
-            </option>
-          </select>
-        </div>
-      </div>
-
-      <!-- ===== 列表 ===== -->
-      <div class="flex-1 min-h-0 overflow-y-auto">
-        <div v-if="store.historyLoading && items.length === 0" class="flex items-center justify-center h-full">
-          <Loader2 class="size-5 animate-spin text-muted-foreground" />
-        </div>
-
-        <div v-else-if="items.length === 0" class="flex flex-col items-center justify-center h-full gap-2 text-muted-foreground">
-          <History class="size-8 opacity-40" />
-          <span class="text-sm">
-            {{ keyword || hostFilter || favoritedOnly ? '没有匹配的命令' : '还没有命令历史' }}
-          </span>
-          <span v-if="!(keyword || hostFilter || favoritedOnly)" class="text-xs opacity-70 max-w-[320px] text-center">
-            命令由 shell 集成 hook 上报。新开的会话执行命令后即可在此查看。
-          </span>
-        </div>
-
-        <div v-else class="divide-y divide-border/60">
-          <div
-            v-for="item in items"
-            :key="item.id"
-            class="group flex items-start gap-2 px-3 py-2 cursor-pointer transition-colors"
-            :class="selectedId === item.id ? 'bg-accent' : 'hover:bg-accent/50'"
-            @click="selectedId = item.id"
-            @dblclick="useCommand(item, false)"
-          >
-            <!-- 收藏 -->
-            <button
-              class="shrink-0 mt-0.5 size-4 flex items-center justify-center transition-colors"
-              :class="item.favorited ? 'text-amber-500' : 'text-muted-foreground/40 hover:text-amber-500'"
-              :title="item.favorited ? '取消收藏' : '收藏（不参与容量淘汰）'"
-              @click.stop="toggleFavorite(item)"
-            >
-              <Star class="size-3.5" :fill="item.favorited ? 'currentColor' : 'none'" />
-            </button>
-
-            <!-- 主体 -->
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <code
-                  class="text-xs font-mono truncate"
-                  :class="isFailed(item) ? 'text-red-600 dark:text-red-400' : 'text-foreground'"
-                  :title="item.command"
-                >
-                  {{ item.command }}
-                </code>
-                <!-- 执行次数：>1 说明是反复用到的命令，值得优先看 -->
-                <span
-                  v-if="item.count > 1"
-                  class="shrink-0 text-[10px] px-1 rounded bg-muted text-muted-foreground"
-                  :title="`执行过 ${item.count} 次`"
-                >
-                  ×{{ item.count }}
-                </span>
-              </div>
-
-              <div class="flex items-center gap-3 mt-0.5 text-[10px] text-muted-foreground">
-                <span class="inline-flex items-center gap-0.5 shrink-0">
-                  <Clock class="size-2.5" />{{ relTime(item.ts) }}
-                </span>
-                <span v-if="item.cwd" class="inline-flex items-center gap-0.5 min-w-0" :title="item.cwd">
-                  <FolderOpen class="size-2.5 shrink-0" />
-                  <span class="truncate max-w-[140px]">{{ cwdTail(item.cwd) }}</span>
-                </span>
-                <span class="truncate max-w-[180px]">{{ item.hostName }}</span>
-                <span v-if="isFailed(item)" class="text-red-600 dark:text-red-400 shrink-0">
-                  退出码 {{ item.exitCode }}
-                </span>
-              </div>
-            </div>
-
-            <!-- 行操作（悬停出现，避免列表视觉噪音） -->
-            <div class="shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-              <button
-                class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-foreground"
-                title="填入命令行（不执行）"
-                @click.stop="useCommand(item, false)"
-              >
-                <ArrowDownToLine class="size-3.5" />
-              </button>
-              <button
-                class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-foreground"
-                title="填入并执行"
-                @click.stop="useCommand(item, true)"
-              >
-                <Play class="size-3.5" />
-              </button>
-              <button
-                class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-foreground"
-                title="复制"
-                @click.stop="copyCommand(item)"
-              >
-                <Copy class="size-3.5" />
-              </button>
-              <button
-                class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-red-600"
-                title="删除这条"
-                @click.stop="removeItem(item)"
-              >
-                <Trash2 class="size-3.5" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- ===== 底部提示 ===== -->
-      <div class="shrink-0 h-7 flex items-center gap-4 px-3 border-t border-border text-[10px] text-muted-foreground">
-        <span class="inline-flex items-center gap-1">
-          <ArrowDownToLine class="size-3" /> 单击 / Enter = 填入
-        </span>
-        <span class="inline-flex items-center gap-1">
-          <Play class="size-3" /> 双击 = 填入并执行
-        </span>
-        <span class="inline-flex items-center gap-1">
-          <Check class="size-3" /> 上/下键导航，Esc 关闭
-        </span>
-        <div class="flex-1" />
-        <span v-if="total > items.length">显示 {{ items.length }} / {{ total }} 条</span>
-      </div>
-    </div>
-</template>
diff --git a/src/modules/terminal/components/HistoryPopover.vue b/src/modules/terminal/components/HistoryPopover.vue
new file mode 100644
index 0000000..165c831
--- /dev/null
+++ b/src/modules/terminal/components/HistoryPopover.vue
@@ -0,0 +1,471 @@
+<script setup lang="ts">
+/**
+ * 命令历史 popover（终端页控制栏的「历史」按钮）。
+ *
+ * # 这个组件是「按钮 + 浮层」的整体
+ *
+ * 触发器、浮层内容、快捷键用的开合状态都封在这里，控制栏只摆一个标签即可。
+ * 分开的代价是：填入后自动收起、Esc 关闭这些动作都要跨组件传意图 ——
+ * 变成「父组件管开、子组件管关」，而它们读写的本来就是同一份状态。
+ *
+ * # 与旧「记录」页版本的区别
+ *
+ * 逻辑照搬原「记录」页的命令历史面板（搜索即过滤、选中、双击填入、收藏、清空），
+ * 但**形态**从整页变成 380px 宽的浮层：去掉了页头工具条、分区开关、底部三行
+ * 提示（换成一行）与整页的筛选行排版。之所以能有这个自信，是因为历史的使用
+ * 模式本来就是「快速找回一条命令」——用户想看的是列表，不是页面。
+ *
+ * # 为什么「填入不执行」为默认，且单击不填入
+ *
+ * 历史里躺着用户过去敲过的所有命令，包括 `rm -rf`、`DROP TABLE`。
+ * 因此：单击只**选中**（便于键盘导航与读清楚），双击或回车才**填入**命令行，
+ * 执行一律要显式点「执行」按钮。
+ *
+ * 「单击不填入」还有一层实际考虑：填入是把文本写进当前 PTY 的命令行，
+ * 用户可能正在敲一条命令（命令行上有半截输入），单击即填入会把那半截冲掉或拼在
+ * 一起。选中不动手，填入是明确的意图表达。
+ *
+ * # 关闭时机
+ *
+ * 填入成功后立即收起浮层：用户的下一步是看着终端按回车，浮层挡在那里没有价值。
+ * 浮层开合状态由 `useRecordPopovers` 的模块级 ref 持有 —— 快捷键
+ * （Ctrl+Shift+H）与这里的触发按钮共用的就是它。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  ArrowDownToLine,
+  Clock,
+  Copy,
+  FolderOpen,
+  History,
+  Play,
+  Search,
+  Star,
+  Trash2
+} from '@lucide/vue'
+import { toast } from 'vue-sonner'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import { StateBlock } from '@/components/common'
+import { historyPopoverOpen, toggleHistoryPopover } from '../useRecordPopovers'
+import type { CommandHistoryItem, SessionInfo } from '@/types/terminal'
+
+const props = defineProps<{
+  /** 当前会话（把命令填给它；为空时动作不可用） */
+  sessionId: string | null
+  session: SessionInfo | undefined
+}>()
+
+const store = useTerminalStore()
+
+// ===== 筛选 =====
+
+const keyword = ref('')
+const hostFilter = ref('')
+const favoritedOnly = ref(false)
+/** 来源下拉的「全部」哨兵值：reka 的 SelectItem 不接受空串 value */
+const ALL_SOURCES = '__all_sources__'
+/** 选中项（键盘导航用） */
+const selectedId = ref<number | null>(null)
+
+const items = computed(() => store.historyPage.items)
+const total = computed(() => store.historyPage.total)
+
+/** 当前会话的来源 id（「仅本会话」快捷筛选的判据） */
+const currentHostId = computed(() => props.session?.targetId ?? '')
+
+/**
+ * 加载。
+ *
+ * `force` 为真时连带刷新来源列表 —— 只在浮层首次打开时做（来源集合变化很慢，
+ * 每敲一个字都拉一遍纯属浪费）。
+ */
+async function reload(force = false) {
+  try {
+    await store.loadHistory({
+      keyword: keyword.value,
+      hostId: hostFilter.value,
+      favoritedOnly: favoritedOnly.value
+    })
+    if (force) await store.loadHistorySources()
+  } catch (e) {
+    toast.error(`加载历史失败：${String(e)}`)
+  }
+}
+
+onMounted(async () => {
+  await reload(true)
+})
+
+// 输入即过滤，200ms 防抖：让每个字符都发一次 IPC 只会把通道占满
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+watch([keyword, favoritedOnly], () => {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => void reload(), 200)
+})
+// 来源筛选是离散选择，无需防抖
+watch(hostFilter, () => void reload())
+
+// 卸载时清掉未触发的防抖，否则浮层关掉后还会发一次无主查询
+onBeforeUnmount(() => {
+  if (searchTimer) clearTimeout(searchTimer)
+})
+
+// ===== 操作 =====
+
+/** 把命令填入会话命令行（`submit` 为真则直接执行） */
+async function useCommand(item: CommandHistoryItem, submit = false) {
+  if (!props.sessionId) {
+    toast.info('当前没有活跃会话')
+    return
+  }
+  try {
+    const r = await store.runHistory(props.sessionId, item.command, submit)
+    if (r.ok) {
+      if (submit) toast.success(r.message)
+      else toggleHistoryPopover(false)
+    } else {
+      toast.error(r.message)
+    }
+  } catch (e) {
+    toast.error(`操作失败：${String(e)}`)
+  }
+}
+
+async function copyCommand(item: CommandHistoryItem) {
+  try {
+    await navigator.clipboard.writeText(item.command)
+    toast.success('已复制到剪贴板')
+  } catch (e) {
+    toast.error(`复制失败：${String(e)}`)
+  }
+}
+
+async function toggleFavorite(item: CommandHistoryItem) {
+  try {
+    await store.toggleHistoryFavorite(item.id)
+  } catch (e) {
+    toast.error(`操作失败：${String(e)}`)
+  }
+}
+
+async function removeItem(item: CommandHistoryItem) {
+  try {
+    const r = await store.deleteHistory(item.id)
+    if (!r.ok) toast.info(r.message)
+    if (selectedId.value === item.id) selectedId.value = null
+  } catch (e) {
+    toast.error(`删除失败：${String(e)}`)
+  }
+}
+
+async function clearAll() {
+  // 二次确认，默认只清非收藏 —— 破坏性操作的默认值应当是最保守的那个。
+  // 用 window.confirm 而不是嵌套 Dialog：这是浮层里的浮层，
+  // 嵌一个 reka Dialog 会带来焦点陷阱与 z-index 的两难（原实现同款处理）。
+  const ok = window.confirm(
+    '确定清空命令历史吗？\n\n收藏的记录会保留（如需连同收藏一起清空，请先取消收藏）。'
+  )
+  if (!ok) return
+  try {
+    const r = await store.clearHistory(true)
+    toast.success(r.message)
+  } catch (e) {
+    toast.error(`清空失败：${String(e)}`)
+  }
+}
+
+// ===== 键盘导航 =====
+
+/**
+ * ↑↓ 移动选中项，Enter 填入。
+ *
+ * 焦点落在行内按钮/下拉上时让路（它们自己要用方向键与 Enter），
+ * 搜索框不让路：在搜索框里按 ↑↓ 选条目、Enter 填入是刻意保留的操作方式。
+ */
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    toggleHistoryPopover(false)
+    return
+  }
+  const target = e.target as HTMLElement | null
+  if (target?.closest('button,[data-slot="select-trigger"],select,textarea')) return
+  if (items.value.length === 0) return
+
+  const idx = items.value.findIndex(i => i.id === selectedId.value)
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    const next = idx < 0 ? 0 : Math.min(items.value.length - 1, idx + 1)
+    selectedId.value = items.value[next].id
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    const next = idx <= 0 ? 0 : idx - 1
+    selectedId.value = items.value[next].id
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    const item = items.value.find(i => i.id === selectedId.value)
+    if (item) void useCommand(item, false)
+  }
+}
+
+// ===== 展示辅助 =====
+
+/** 相对时间（「3 分钟前」比精确时间戳更有信息量） */
+function relTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`
+  if (diff < 2_592_000_000) return `${Math.floor(diff / 86_400_000)} 天前`
+  return new Date(ts).toLocaleDateString('zh-CN')
+}
+
+/** 目录只显示最后一级（完整路径会挤走命令本身，悬停可看全） */
+function cwdTail(cwd: string): string {
+  if (!cwd) return ''
+  const parts = cwd.split(/[\\/]/).filter(Boolean)
+  return parts.length > 0 ? parts[parts.length - 1] : cwd
+}
+
+/** 退出码非 0（用户找的常常正是「刚才那条报错的命令」） */
+function isFailed(item: CommandHistoryItem): boolean {
+  return item.exitCode !== null && item.exitCode !== 0
+}
+
+/** 是否处于筛选态（决定空态文案：是「没匹配」还是「还没有历史」） */
+const isFiltered = computed(() => !!keyword.value || !!hostFilter.value || favoritedOnly.value)
+</script>
+
+<template>
+  <!--
+    触发器 + 浮层一体。Tooltip 锚在包裹 div 上、Popover 在自己的子树里用 as-child，
+    两条 as-child 链互不相干（与「更多」菜单同款处理）；浮层展开期间禁用提示 ——
+    鼠标此时还停在按钮上，提示会压在浮层内容上。
+  -->
+  <Tooltip :disabled="historyPopoverOpen">
+    <TooltipTrigger as-child>
+      <div class="inline-flex shrink-0">
+        <Popover v-model:open="historyPopoverOpen">
+          <PopoverTrigger as-child>
+            <Button variant="ghost" size="icon-sm" class="shrink-0">
+              <History class="size-3.5" />
+            </Button>
+          </PopoverTrigger>
+
+          <!-- 内容自带内边距：让开 popover 默认的 w-72 / p-4 -->
+          <PopoverContent align="start" class="w-auto p-0">
+            <!-- 键盘事件挂在内容根上：↑↓ / Esc 在浮层内任意位置都应生效 -->
+            <div class="w-[380px]" @keydown="onKeydown">
+              <!-- ===== 搜索 + 来源 ===== -->
+              <div class="flex items-center gap-2 p-2.5 border-b border-border">
+                <div class="relative flex-1 min-w-0">
+                  <Search
+                    class="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+                  />
+                  <Input v-model="keyword" placeholder="搜索命令…" class="h-7 pl-7 text-xs" autofocus />
+                </div>
+                <!-- 只有一个来源时下拉没有筛选意义，纯属噪音 -->
+                <Select
+                  v-if="store.historySources.length > 1"
+                  :model-value="hostFilter || ALL_SOURCES"
+                  @update:model-value="v => (hostFilter = String(v) === ALL_SOURCES ? '' : String(v))"
+                >
+                  <SelectTrigger size="sm" class="w-[124px] shrink-0 text-xs">
+                    <SelectValue placeholder="来源" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <!-- reka 的 SelectItem 不接受空串值，用哨兵值代表「不筛选」 -->
+                    <SelectItem :value="ALL_SOURCES">全部来源</SelectItem>
+                    <SelectItem v-for="s in store.historySources" :key="s.hostId" :value="s.hostId">
+                      {{ s.hostName }}（{{ s.count }}）
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <!-- ===== 快捷筛选 ===== -->
+              <div class="flex items-center gap-1.5 px-2.5 py-2 text-xs">
+                <Button
+                  size="sm"
+                  class="h-6 px-2 text-[11px]"
+                  :variant="hostFilter === '' && !favoritedOnly ? 'default' : 'outline'"
+                  @click="hostFilter = ''; favoritedOnly = false"
+                >
+                  全部
+                </Button>
+                <Button
+                  v-if="currentHostId"
+                  size="sm"
+                  class="h-6 px-2 text-[11px]"
+                  :variant="hostFilter === currentHostId ? 'default' : 'outline'"
+                  :title="`只看本会话（${store.sessionLabel(session)}）`"
+                  @click="hostFilter = currentHostId; favoritedOnly = false"
+                >
+                  仅本会话
+                </Button>
+                <Button
+                  size="sm"
+                  class="h-6 px-2 text-[11px]"
+                  :variant="favoritedOnly ? 'default' : 'outline'"
+                  @click="favoritedOnly = !favoritedOnly"
+                >
+                  <Star class="size-3" />收藏
+                </Button>
+                <div class="flex-1" />
+                <span class="shrink-0 text-[10px] text-muted-foreground">{{ total }} 条</span>
+              </div>
+
+              <!-- ===== 列表 ===== -->
+              <ScrollArea class="h-[300px] border-t border-border">
+                <StateBlock
+                  v-if="store.historyLoading && items.length === 0"
+                  variant="loading"
+                  :min-height="180"
+                />
+                <StateBlock
+                  v-else-if="items.length === 0"
+                  variant="empty"
+                  :title="isFiltered ? '没有匹配的命令' : '还没有命令历史'"
+                  :description="
+                    isFiltered ? undefined : '命令由 shell 集成 hook 上报，新开会话执行命令后即可在此查看。'
+                  "
+                  :min-height="180"
+                />
+                <div v-else class="divide-y divide-divider">
+                  <div
+                    v-for="item in items"
+                    :key="item.id"
+                    class="group flex items-start gap-1.5 px-2.5 py-1.5 cursor-pointer transition-colors"
+                    :class="selectedId === item.id ? 'bg-primary-soft' : 'hover:bg-hover'"
+                    @click="selectedId = item.id"
+                    @dblclick="useCommand(item, false)"
+                  >
+                    <!-- 收藏（不参与容量淘汰，因此可以随手留下想留的命令） -->
+                    <button
+                      class="shrink-0 mt-0.5 size-6 flex items-center justify-center transition-colors"
+                      :class="
+                        item.favorited ? 'text-warning' : 'text-muted-foreground/40 hover:text-warning'
+                      "
+                      :title="item.favorited ? '取消收藏' : '收藏（不参与容量淘汰）'"
+                      @click.stop="toggleFavorite(item)"
+                    >
+                      <Star class="size-3.5" :fill="item.favorited ? 'currentColor' : 'none'" />
+                    </button>
+
+                    <div class="flex-1 min-w-0">
+                      <div class="flex items-center gap-1.5">
+                        <code
+                          class="text-[11px] font-mono truncate"
+                          :class="isFailed(item) ? 'text-danger' : 'text-foreground'"
+                          :title="item.command"
+                        >
+                          {{ item.command }}
+                        </code>
+                        <!-- 执行次数：>1 说明是反复用到的命令，值得优先看 -->
+                        <span
+                          v-if="item.count > 1"
+                          class="shrink-0 text-[10px] text-muted-foreground"
+                          :title="`执行过 ${item.count} 次`"
+                        >
+                          ×{{ item.count }}
+                        </span>
+                      </div>
+                      <div class="flex items-center gap-2 mt-0.5 text-[10px] text-muted-foreground">
+                        <span class="inline-flex items-center gap-0.5 shrink-0">
+                          <Clock class="size-2.5" />{{ relTime(item.ts) }}
+                        </span>
+                        <span
+                          v-if="item.cwd"
+                          class="inline-flex items-center gap-0.5 min-w-0"
+                          :title="item.cwd"
+                        >
+                          <FolderOpen class="size-2.5 shrink-0" />
+                          <span class="truncate max-w-[80px]">{{ cwdTail(item.cwd) }}</span>
+                        </span>
+                        <span class="truncate max-w-[90px]">{{ item.hostName }}</span>
+                        <span v-if="isFailed(item)" class="text-danger shrink-0">
+                          退出码 {{ item.exitCode }}
+                        </span>
+                      </div>
+                    </div>
+
+                    <!-- 行操作：悬停出现，避免列表视觉噪音 -->
+                    <div
+                      class="shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity"
+                    >
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        class="size-6 text-muted-foreground hover:text-foreground"
+                        title="填入命令行（不执行）"
+                        @click.stop="useCommand(item, false)"
+                      >
+                        <ArrowDownToLine class="size-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        class="size-6 text-muted-foreground hover:text-foreground"
+                        title="填入并执行"
+                        @click.stop="useCommand(item, true)"
+                      >
+                        <Play class="size-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        class="size-6 text-muted-foreground hover:text-foreground"
+                        title="复制"
+                        @click.stop="copyCommand(item)"
+                      >
+                        <Copy class="size-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        class="size-6 text-muted-foreground hover:text-danger"
+                        title="删除这条"
+                        @click.stop="removeItem(item)"
+                      >
+                        <Trash2 class="size-3" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </ScrollArea>
+
+              <!-- ===== 底部：操作提示 + 清空 ===== -->
+              <div
+                class="flex items-center gap-2 px-2.5 py-1.5 border-t border-border text-[10px] text-muted-foreground"
+              >
+                <span class="truncate">双击 / Enter 填入（不执行）</span>
+                <div class="flex-1" />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="h-6 px-2 text-[11px] text-muted-foreground hover:text-destructive"
+                  title="清空历史（保留收藏）"
+                  @click="clearAll"
+                >
+                  <Trash2 class="size-3" />清空
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </TooltipTrigger>
+    <TooltipContent side="bottom">命令历史（Ctrl+Shift+H）</TooltipContent>
+  </Tooltip>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/HostKeyPromptDialog.vue b/src/modules/terminal/components/HostKeyPromptDialog.vue
index 74d6d82..9c471d3 100644
--- a/src/modules/terminal/components/HostKeyPromptDialog.vue
+++ b/src/modules/terminal/components/HostKeyPromptDialog.vue
@@ -94,7 +94,7 @@ const canAccept = computed(() => !isChanged.value || acknowledged.value)
             class="size-9 rounded-full flex items-center justify-center shrink-0"
             :class="
               isChanged
-                ? 'bg-red-500/15 text-red-600 dark:text-red-400'
+                ? 'bg-danger-soft text-danger-text'
                 : 'bg-primary/15 text-primary'
             "
           >
@@ -115,7 +115,7 @@ const canAccept = computed(() => !isChanged.value || acknowledged.value)
       <!-- 高危警告：指纹变更几乎只有两种可能 —— 服务器重装，或有人在中间 -->
       <div
         v-if="isChanged"
-        class="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2.5 text-xs leading-relaxed text-red-700 dark:text-red-300"
+        class="rounded-md border border-danger/40 bg-danger-soft px-3 py-2.5 text-xs leading-relaxed text-danger-text"
       >
         <p class="font-medium mb-1">这可能意味着有人在窃听你的连接。</p>
         <p>
@@ -150,7 +150,7 @@ const canAccept = computed(() => !isChanged.value || acknowledged.value)
               class="flex-1 px-2.5 py-2 rounded font-mono text-[12px] break-all select-all leading-relaxed"
               :class="
                 isChanged
-                  ? 'bg-red-500/10 border border-red-500/30'
+                  ? 'bg-danger-soft border-danger/30'
                   : 'bg-muted border border-border'
               "
             >
@@ -163,7 +163,7 @@ const canAccept = computed(() => !isChanged.value || acknowledged.value)
               :title="copied ? '已复制' : '复制指纹'"
               @click="copyFingerprint"
             >
-              <Check v-if="copied" class="size-3.5 text-emerald-500" />
+              <Check v-if="copied" class="size-3.5 text-success" />
               <Copy v-else class="size-3.5" />
             </Button>
           </div>
diff --git a/src/modules/terminal/components/HostManager.vue b/src/modules/terminal/components/HostManager.vue
index 4354d0b..c594685 100644
--- a/src/modules/terminal/components/HostManager.vue
+++ b/src/modules/terminal/components/HostManager.vue
@@ -12,10 +12,25 @@
  * 2. **新建时先向要一个 id**。密码按 hostId 存取，若等 save_host 之后再生成 id，
  *    用户在新建对话框里填的密码就没有归属。因此用 `terminal_new_host_id`
  *    预取 id，使「新建」与「编辑」走完全相同的流程。
+ *
+ * # 已知主机（known_hosts）在这里而不是独立页（2026-09-22）
+ *
+ * 「这台主机我信任过吗、指纹变过没有」是**浏览主机列表时顺手核对**的信息，
+ * 此前它占着「凭据」页的一个分区，于是核对信任要跨 tab，而每个 tab 里都只有
+ * 半张信息。现在三层都落在本页：
+ *
+ * - 主机行的**信任徽标**（未连接过 / 已信任 / 变更 N 次）——一眼可见；
+ * - 徽标点开的 **HostTrustPopover**——各算法指纹、变更历史、「忘记」；
+ * - 列表末尾的 **OrphanKnownHosts**——没有对应主机配置的记录（配置已删或
+ *   从未保存过配置），它们照样会拦截连接，不能失去入口。
+ *
+ * 整份 known_hosts 的维护动作（导入 / 导出 / 清空）是低频操作，收进工具条的
+ * 「已知主机」下拉（`KnownHostsMenu`），不占页面主线。
  */
 import { computed, ref, watch } from 'vue'
 import { open as openDialog, save as saveDialog } from '@tauri-apps/plugin-dialog'
 import {
+  AlertTriangle,
   ArrowDown,
   ArrowUp,
   Download,
@@ -51,14 +66,24 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Card, CardContent } from '@/components/ui/card'
+import { StateBlock, StatusBadge } from '@/components/common'
 import { createLogger } from '@/lib/logger'
 import { blankHost, type SshHost } from './hostForm'
-import type { HostView } from '@/types/terminal'
+import HostTrustBadge from './HostTrustBadge.vue'
+import KnownHostsMenu from './KnownHostsMenu.vue'
+import OrphanKnownHosts from './OrphanKnownHosts.vue'
+import { addressLabel, groupByAddress, recordsForHost, trustState } from './hostTrust'
+import PageToolbar from '@/components/layout/PageToolbar.vue'
+import type { HostView, KnownHost } from '@/types/terminal'
 
 const logger = createLogger('terminal')
 const store = useTerminalStore()
 
-const emit = defineEmits<{ (e: 'close'): void; (e: 'connect', hostId: string): void }>()
+// 只声明 connect：本页现在是模块级 Tabs 的一页，不再需要「返回终端」语义
+// （导航由 Tabs 承担），此前声明的 close 事件从未被触发过。
+const emit = defineEmits<{ (e: 'connect', hostId: string): void }>()
 
 // ===== 编辑对话框 =====
 
@@ -237,6 +262,45 @@ async function toggleFavorite(v: HostView) {
 /** 可用密钥（供认证方式下拉使用） */
 const availableKeys = computed(() => store.keys.filter(k => k.fileExists))
 
+// ===== 主机密钥信任（known_hosts） =====
+
+/**
+ * 记录按地址归组一次，供本页反复查（每行徽标 + 详情 popover + 顶部提示）。
+ * 匹配规则与「孤儿」判定共用 `hostTrust.ts` 里的同一套实现 —— 分头实现迟早
+ * 会出现「徽标说已信任、点开却找不到记录」这类自相矛盾。
+ */
+const groupedKnownHosts = computed(() => groupByAddress(store.knownHosts))
+
+/** 某台主机对应的指纹记录（可能为空 = 还没成功连过） */
+function recordsOf(v: HostView): KnownHost[] {
+  return recordsForHost(groupedKnownHosts.value, v.config)
+}
+
+/** 指纹曾变更过的主机数（顶部风险提示的数据源） */
+const changedHostCount = computed(
+  () => store.hosts.filter(v => trustState(recordsOf(v)) === 'changed').length
+)
+
+// ===== 忘记某台主机（信任详情 popover 的破坏性动作） =====
+
+const pendingForget = ref<KnownHost | null>(null)
+const forgetBusy = ref(false)
+
+async function submitForget() {
+  const r = pendingForget.value
+  if (!r) return
+  forgetBusy.value = true
+  try {
+    await store.forgetHost(r.host, r.port, r.keyType)
+    toast.success(`已忘记 ${addressLabel(r.host, r.port)}`)
+    pendingForget.value = null
+  } catch (e) {
+    toast.error(`操作失败：${String(e)}`)
+  } finally {
+    forgetBusy.value = false
+  }
+}
+
 // ===== 跳板机链（ProxyJump）=====
 
 /**
@@ -280,129 +344,175 @@ function moveHop(i: number, dir: -1 | 1) {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <!-- 头部 -->
-    <div class="shrink-0 flex items-center gap-2 px-4 h-12 border-b border-border">
-      <Globe class="size-4 text-muted-foreground" />
-      <h3 class="text-sm font-medium">SSH 主机</h3>
-      <span class="text-xs text-muted-foreground">({{ store.hosts.length }})</span>
-      <div class="flex-1" />
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs" @click="importHosts">
+  <div class="flex flex-col h-full overflow-hidden">
+    <PageToolbar :icon="Globe" title="SSH 主机" :meta="`共 ${store.hosts.length} 台`">
+      <KnownHostsMenu />
+      <Button variant="outline" size="sm" @click="importHosts">
         <Upload class="size-3.5" />导入备份
       </Button>
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs" @click="exportHosts">
+      <Button variant="outline" size="sm" @click="exportHosts">
         <Download class="size-3.5" />导出
       </Button>
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs" @click="importConfig">
+      <Button variant="outline" size="sm" @click="importConfig">
         <Download class="size-3.5" />导入 ~/.ssh/config
       </Button>
-      <Button size="sm" class="h-7 gap-1.5 text-xs" @click="openNew">
+      <Button size="sm" @click="openNew">
         <Plus class="size-3.5" />新建主机
       </Button>
-    </div>
+    </PageToolbar>
 
-    <!-- 列表 -->
-    <div class="flex-1 min-h-0 overflow-y-auto p-3">
-      <div v-if="store.hosts.length === 0" class="py-16 text-center">
-        <Globe class="size-8 mx-auto text-muted-foreground/30 mb-3" />
-        <p class="text-sm text-muted-foreground mb-1">还没有配置 SSH 主机</p>
-        <p class="text-xs text-muted-foreground/70 mb-4">
-          可以手工新建，也可以直接从 <code class="px-1 rounded bg-muted">~/.ssh/config</code> 导入
+    <!-- 风险提示：有主机指纹变更时始终可见（信任详情 popover 是同一条信息的展开） -->
+    <div
+      v-if="changedHostCount > 0"
+      class="shrink-0 mb-3 flex items-start gap-2 p-2.5 rounded-md
+             border border-warning/40 bg-warning-soft"
+    >
+      <AlertTriangle class="size-3.5 shrink-0 mt-0.5 text-warning" />
+      <div class="text-[11px] text-warning-text">
+        <p class="font-medium">{{ changedHostCount }} 台主机曾发生指纹变更</p>
+        <p class="mt-0.5 opacity-90">
+          若不是您本人重装或更换了服务器密钥，请联系管理员核实。点主机行的信任徽标可查看详情。
         </p>
-        <div class="flex items-center justify-center gap-2">
-          <Button size="sm" class="gap-1.5" @click="openNew">
-            <Plus class="size-3.5" />新建主机
-          </Button>
-          <Button variant="outline" size="sm" class="gap-1.5" @click="importConfig">
-            <Download class="size-3.5" />导入配置
-          </Button>
-        </div>
-      </div>
-
-      <div v-else class="space-y-1">
-        <div
-          v-for="v in store.hosts"
-          :key="v.config.id"
-          class="group flex items-center gap-3 px-3 py-2 rounded-md border border-border
-                 hover:border-primary/40 hover:bg-accent/30 transition-colors"
-        >
-          <button
-            class="shrink-0 size-6 rounded flex items-center justify-center transition-colors"
-            :class="
-              v.config.favorited
-                ? 'text-amber-500'
-                : 'text-muted-foreground/30 hover:text-amber-500'
-            "
-            :title="v.config.favorited ? '取消收藏' : '收藏'"
-            @click="toggleFavorite(v)"
-          >
-            <Star class="size-3.5" :class="{ 'fill-current': v.config.favorited }" />
-          </button>
-
-          <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-2">
-              <span class="text-sm font-medium truncate">
-                {{ v.config.name || v.config.host }}
-              </span>
-              <span v-if="v.config.group" class="text-[10px] px-1.5 py-0.5 rounded bg-muted shrink-0">
-                {{ v.config.group }}
-              </span>
-              <!-- 不可连接时给出明确原因，而不是让用户点下去才发现失败 -->
-              <span
-                v-if="!v.ready"
-                class="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-600 dark:text-amber-400 shrink-0"
-                :title="v.issue ?? ''"
-              >
-                {{ v.issue || '配置不完整' }}
-              </span>
-            </div>
-            <div class="text-xs text-muted-foreground truncate mt-0.5">
-              {{ v.config.username }}@{{ v.config.host
-              }}<span v-if="v.config.port !== 22">:{{ v.config.port }}</span>
-              <span class="mx-1.5">·</span>
-              <span v-if="v.config.authMethod === 'key' && v.config.keyId">
-                <KeyRound class="inline size-2.5 -mt-0.5" />
-                {{ store.keys.find(k => k.meta.id === v.config.keyId)?.meta.name ?? '密钥' }}
-              </span>
-              <span v-else-if="v.config.authMethod === 'password'">
-                <!-- 不回显掩码：密码不是 API key，保留前 3 后 4 也是在泄露真实内容；
-                     是否已保存由 hasPassword 表达，明文/掩码一律不出现在列表 -->
-                {{ v.hasPassword ? '密码已保存' : '密码未保存' }}
-              </span>
-              <span v-else>{{ v.config.authMethod }}</span>
-            </div>
-          </div>
-
-          <div class="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-            <Button
-              size="sm"
-              class="h-7 text-xs"
-              :disabled="!v.ready"
-              :title="v.ready ? '连接' : (v.issue ?? '')"
-              @click="emit('connect', v.config.id)"
-            >
-              连接
-            </Button>
-            <Button variant="ghost" size="icon" class="size-7" title="编辑" @click="openEdit(v.config.id)">
-              <Pencil class="size-3.5" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              class="size-7 text-destructive hover:text-destructive"
-              title="删除"
-              @click="remove(v)"
-            >
-              <Trash2 class="size-3.5" />
-            </Button>
-          </div>
-        </div>
       </div>
     </div>
 
+    <!--
+      列表：卡片承载（与 proxy 订阅列表同口径），行间距 8px。
+
+      `-mx-3` + 内层 `px-3 pb-3`：滚动视口会裁掉超出自身盒子的内容，卡片阴影
+      （shadow-sm）贴着视口边缘就会被切一半 —— 表现为「终端模块的卡片比别的
+      页面扁」。负外边距把视口向两侧各外扩 12px、内层等量内缩，卡片位置与宽度
+      不变却留出了阴影余量。**内边距必须在内层**：根元素上的 pb 不属于滚动内容，
+      滚到底时最后一张卡片的底部阴影仍会被裁（同一份说明见 TerminalSettingsPanel）。
+    -->
+    <ScrollArea class="flex-1 min-h-0 -mx-3">
+      <div class="px-3 pb-3">
+      <Card v-if="store.hosts.length === 0">
+        <CardContent>
+          <StateBlock
+            variant="empty"
+            title="还没有配置 SSH 主机"
+            description="可以手工新建，也可以直接从 ~/.ssh/config 导入"
+            :min-height="220"
+          >
+            <template #action>
+              <div class="flex items-center justify-center gap-2">
+                <Button size="sm" class="gap-1.5" @click="openNew">
+                  <Plus class="size-3.5" />新建主机
+                </Button>
+                <Button variant="outline" size="sm" class="gap-1.5" @click="importConfig">
+                  <Download class="size-3.5" />导入配置
+                </Button>
+              </div>
+            </template>
+          </StateBlock>
+        </CardContent>
+      </Card>
+
+      <Card v-else>
+        <CardContent class="space-y-2">
+          <div
+            v-for="v in store.hosts"
+            :key="v.config.id"
+            class="group flex items-center gap-3 rounded-md border border-border p-3 transition-colors hover:bg-hover"
+          >
+            <button
+              class="shrink-0 size-7 rounded flex items-center justify-center transition-colors"
+              :class="
+                v.config.favorited
+                  ? 'text-warning'
+                  : 'text-muted-foreground/30 hover:text-warning'
+              "
+              :title="v.config.favorited ? '取消收藏' : '收藏'"
+              @click="toggleFavorite(v)"
+            >
+              <Star class="size-3.5" :class="{ 'fill-current': v.config.favorited }" />
+            </button>
+
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium truncate">
+                  {{ v.config.name || v.config.host }}
+                </span>
+                <span v-if="v.config.group" class="shrink-0 text-[11px] text-muted-foreground">
+                  {{ v.config.group }}
+                </span>
+                <!-- 不可连接时给出明确原因，而不是让用户点下去才发现失败 -->
+                <StatusBadge
+                  v-if="!v.ready"
+                  variant="warning"
+                  size="sm"
+                  :title="v.issue ?? ''"
+                >
+                  {{ v.issue || '配置不完整' }}
+                </StatusBadge>
+
+                <!--
+                  主机密钥信任：徽标即「查看详情」的入口（有记录时才可点），
+                  详情与「忘记」都在 HostTrustBadge 里，行内只传记录集合。
+                -->
+                <HostTrustBadge
+                  :label="v.config.name || v.config.host"
+                  :address="addressLabel(v.config.host, v.config.port)"
+                  :records="recordsOf(v)"
+                  @forget="pendingForget = $event"
+                />
+              </div>
+              <div class="text-xs text-muted-foreground truncate mt-0.5">
+                {{ v.config.username }}@{{ v.config.host
+                }}<span v-if="v.config.port !== 22">:{{ v.config.port }}</span>
+                <span class="mx-1.5">·</span>
+                <span v-if="v.config.authMethod === 'key' && v.config.keyId">
+                  <KeyRound class="inline size-2.5 -mt-0.5" />
+                  {{ store.keys.find(k => k.meta.id === v.config.keyId)?.meta.name ?? '密钥' }}
+                </span>
+                <span v-else-if="v.config.authMethod === 'password'">
+                  <!-- 不回显掩码：密码不是 API key，保留前 3 后 4 也是在泄露真实内容；
+                       是否已保存由 hasPassword 表达，明文/掩码一律不出现在列表 -->
+                  {{ v.hasPassword ? '密码已保存' : '密码未保存' }}
+                </span>
+                <span v-else>{{ v.config.authMethod }}</span>
+              </div>
+            </div>
+
+            <div class="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <Button
+                size="sm"
+                :disabled="!v.ready"
+                :title="v.ready ? '连接' : (v.issue ?? '')"
+                @click="emit('connect', v.config.id)"
+              >
+                连接
+              </Button>
+              <Button variant="ghost" size="icon-sm" title="编辑" @click="openEdit(v.config.id)">
+                <Pencil class="size-3.5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                class="text-destructive hover:text-destructive"
+                title="删除"
+                @click="remove(v)"
+              >
+                <Trash2 class="size-3.5" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!--
+        没有对应主机配置的指纹记录（配置已删 / 从未保存过配置）。
+        放在主机列表之后的**同一滚动区**里：它属于「同一份 known_hosts 的另一半」，
+        独立成一屏会让用户在两个位置之间来回找。
+      -->
+      <OrphanKnownHosts @forget="pendingForget = $event" />
+      </div>
+    </ScrollArea>
+
     <!-- ===== 编辑对话框 ===== -->
     <Dialog v-model:open="dialogOpen">
-      <DialogContent class="max-w-xl max-h-[85vh] overflow-y-auto">
+      <DialogContent class="max-w-xl max-h-[85vh]">
         <DialogHeader>
           <DialogTitle>{{ isNew ? '新建 SSH 主机' : '编辑 SSH 主机' }}</DialogTitle>
           <DialogDescription class="text-xs">
@@ -410,7 +520,14 @@ function moveHop(i: number, dir: -1 | 1) {
           </DialogDescription>
         </DialogHeader>
 
-        <div v-if="editing" class="space-y-4">
+        <!--
+          表单很长（基本信息 + 认证 + 可展开的「高级选项」），必须滚动。
+          用 ScrollArea 而不是给 DialogContent 加 overflow-y-auto：后者会带上
+          浏览器原生滚动条（系统样式、与主题不一致），项目其余长对话框
+          （monitor / downloader）都用 ScrollArea + max-h 的写法。
+        -->
+        <ScrollArea class="max-h-[60vh] pr-4">
+          <div v-if="editing" class="space-y-4">
           <!-- 基本信息 -->
           <div class="grid grid-cols-2 gap-3">
             <div class="space-y-1.5">
@@ -476,7 +593,7 @@ function moveHop(i: number, dir: -1 | 1) {
                 </SelectContent>
               </Select>
               <p v-if="errors.keyId" class="text-[11px] text-destructive">{{ errors.keyId }}</p>
-              <p v-if="availableKeys.length === 0" class="text-[11px] text-amber-600 dark:text-amber-400">
+              <p v-if="availableKeys.length === 0" class="text-[11px] text-warning">
                 还没有可用密钥，请先到「密钥管理」生成或导入
               </p>
             </div>
@@ -637,9 +754,21 @@ function moveHop(i: number, dir: -1 | 1) {
                 </div>
                 <Switch v-model="editing.favorited" />
               </div>
+
+              <div class="flex items-center justify-between gap-3">
+                <div>
+                  <Label class="text-xs">注入 shell 集成</Label>
+                  <p class="text-[11px] text-muted-foreground">
+                    让远端上报命令与目录，命令历史与 cwd 跟踪才可用（不落盘，只影响本次会话）。
+                    与「登录后执行」里 exec 换 shell 的配置冲突时可关掉
+                  </p>
+                </div>
+                <Switch v-model="editing.injectShellIntegration" />
+              </div>
             </div>
           </details>
-        </div>
+          </div>
+        </ScrollArea>
 
         <DialogFooter>
           <Button variant="outline" size="sm" @click="dialogOpen = false">取消</Button>
@@ -667,5 +796,38 @@ function moveHop(i: number, dir: -1 | 1) {
         </DialogFooter>
       </DialogContent>
     </Dialog>
+
+    <!--
+      ===== 忘记主机密钥（指纹记录） =====
+      对话框放在页级而不是信任 popover 内部：popover 会因失焦关闭，
+      而确认框是「用户明确同意降低校验强度」的关键一步，不能被关在中间。
+    -->
+    <Dialog :open="pendingForget !== null" @update:open="v => !v && (pendingForget = null)">
+      <DialogContent class="max-w-sm" :show-close-button="false">
+        <DialogHeader>
+          <DialogTitle class="text-base">忘记该主机</DialogTitle>
+          <DialogDescription class="text-xs">
+            将删除
+            <span class="font-mono">
+              {{ pendingForget ? addressLabel(pendingForget.host, pendingForget.port) : '' }}
+            </span>
+            的
+            <span class="font-mono">{{ pendingForget?.keyType }}</span>
+            指纹记录。下次连接时将重新提示核对。
+          </DialogDescription>
+        </DialogHeader>
+        <div class="flex items-start gap-2 p-2 rounded bg-muted text-[11px] text-muted-foreground">
+          <AlertTriangle class="size-3.5 shrink-0 mt-0.5" />
+          <span>仅在确认该主机密钥确实已更换时执行。若出于「连不上就删掉」的动机，请先核实原因。</span>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" size="sm" @click="pendingForget = null">取消</Button>
+          <Button variant="destructive" size="sm" :disabled="forgetBusy" @click="submitForget">
+            <Loader2 v-if="forgetBusy" class="size-3.5 mr-1.5 animate-spin" />
+            忘记
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
diff --git a/src/modules/terminal/components/HostTrustBadge.vue b/src/modules/terminal/components/HostTrustBadge.vue
new file mode 100644
index 0000000..5570413
--- /dev/null
+++ b/src/modules/terminal/components/HostTrustBadge.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * 主机行的「主机密钥信任」徽标 + 详情 popover。
+ *
+ * # 为什么单独成一个组件
+ *
+ * 主机行本身已经很长（收藏、名称、分组、可连接性、认证方式、四个操作按钮）。
+ * 信任这块要读三样东西（记录集合、状态、变更次数）并渲染两层结构（徽标 +
+ * popover），塞进主机行的模板会让那一行难以阅读，也会让同一批判断在模板里
+ * 重复出现好几次。抽出来后，主机行只需要传 `records` 一个 prop。
+ *
+ * # 徽标即入口
+ *
+ * 有记录时徽标本身可点开（不再额外挂一个盾牌图标按钮）：徽标已经表达了状态，
+ * 再放一个图标是同一件事占两份宽度。没有记录时用中性徽标「未连接过」，
+ * 且不可点 —— 没有内容可看，可点只会让人白点一次。
+ */
+import { computed } from 'vue'
+import { History, ShieldCheck } from '@lucide/vue'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { StatusBadge } from '@/components/common'
+import HostTrustPopover from './HostTrustPopover.vue'
+import { changeCount, trustState } from './hostTrust'
+import type { KnownHost } from '@/types/terminal'
+
+const props = defineProps<{
+  /** 主机显示名（配置里 name 为空时传地址） */
+  label: string
+  /** 地址:端口 */
+  address: string
+  /** 该主机的全部指纹记录（空 = 从未成功连过） */
+  records: KnownHost[]
+}>()
+
+const emit = defineEmits<{ (e: 'forget', record: KnownHost): void }>()
+
+const state = computed(() => trustState(props.records))
+const changes = computed(() => changeCount(props.records))
+</script>
+
+<template>
+  <Popover v-if="records.length > 0">
+    <PopoverTrigger as-child>
+      <button class="shrink-0" title="查看主机密钥指纹与变更历史">
+        <StatusBadge :variant="state === 'changed' ? 'warning' : 'success'" size="sm">
+          <History v-if="state === 'changed'" class="size-2.5" />
+          <ShieldCheck v-else class="size-2.5" />
+          {{ state === 'changed' ? `指纹变更 ${changes} 次` : '已信任' }}
+        </StatusBadge>
+      </button>
+    </PopoverTrigger>
+    <!-- 内容自带内边距：这里把 popover 默认的 w-72 / p-4 让开，避免双重留白 -->
+    <PopoverContent align="start" class="w-auto p-0">
+      <HostTrustPopover
+        :label="label"
+        :address="address"
+        :records="records"
+        @forget="emit('forget', $event)"
+      />
+    </PopoverContent>
+  </Popover>
+
+  <StatusBadge
+    v-else
+    variant="neutral"
+    size="sm"
+    title="还没有该主机的指纹记录，首次连接时会提示核对"
+  >
+    未连接过
+  </StatusBadge>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/HostTrustPopover.vue b/src/modules/terminal/components/HostTrustPopover.vue
new file mode 100644
index 0000000..bc00263
--- /dev/null
+++ b/src/modules/terminal/components/HostTrustPopover.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+/**
+ * 单台主机的「信任详情」popover（挂在主机行的盾牌按钮上）。
+ *
+ * # 为什么用 popover 而不是新页面
+ *
+ * 信任这件事的信息量是「一台主机的几条指纹 + 变更历史」，属于**行级细节**：
+ * 用户是在浏览主机列表时顺手核对一下「这台我信任过吗、变过没有」。
+ * 以前它占着「凭据」页的一整个分区，于是「看主机的信任状态」要跨越两个 tab，
+ * 而每个 tab 里都只有半张信息。现在它与主机挤在同一行上。
+ *
+ * # 为什么「忘记」要抛给父组件
+ *
+ * 忘记是**破坏性且带安全含义**的操作（删掉指纹后下次连接会在没有校验的情况下
+ * 重新提示），必须有一个明确的确认对话框。对话框若挂在 popover 内部，
+ * popover 会先因失焦关闭、再把对话框弹在一个已经不存在的锚点上下文里 ——
+ * 焦点与层级的边界问题不值得为省一次事件传递而承担。
+ * 因此这里只负责「选出要忘记的那条记录」，确认与执行由主机页统一处理。
+ */
+import { computed, ref } from 'vue'
+import { AlertTriangle, History, Server, ShieldCheck, Trash2 } from '@lucide/vue'
+import { Button } from '@/components/ui/button'
+import { StatusBadge } from '@/components/common'
+import {
+  changeCount,
+  formatDateTime,
+  keyTypeLabel,
+  recordKey,
+  trustState
+} from './hostTrust'
+import type { KnownHost } from '@/types/terminal'
+
+const props = defineProps<{
+  /** 主机显示名（配置里的 name，可能为空 → 调用方传地址兜底） */
+  label: string
+  /** 地址:端口（非 22 才带端口） */
+  address: string
+  /** 该主机的全部 known_hosts 记录（含多种算法） */
+  records: KnownHost[]
+}>()
+
+const emit = defineEmits<{ (e: 'forget', record: KnownHost): void }>()
+
+const state = computed(() => trustState(props.records))
+const changes = computed(() => changeCount(props.records))
+
+/** 展开变更历史的记录键（同一时刻只展开一条，popover 空间有限） */
+const expanded = ref<string | null>(null)
+
+function toggleHistory(r: KnownHost) {
+  const k = recordKey(r)
+  expanded.value = expanded.value === k ? null : k
+}
+</script>
+
+<template>
+  <div class="w-[340px] p-3 space-y-3">
+    <!-- 头部：目标 + 总体状态 -->
+    <div class="flex items-start gap-2">
+      <Server class="size-3.5 shrink-0 mt-0.5 text-muted-foreground" />
+      <div class="min-w-0 flex-1">
+        <p class="text-xs font-medium truncate" :title="label">{{ label }}</p>
+        <p class="text-[11px] font-mono text-muted-foreground truncate">{{ address }}</p>
+      </div>
+      <StatusBadge v-if="state === 'changed'" variant="warning" size="sm">
+        <History class="size-2.5" />变更 {{ changes }} 次
+      </StatusBadge>
+      <StatusBadge v-else variant="success" size="sm">
+        <ShieldCheck class="size-2.5" />已信任
+      </StatusBadge>
+    </div>
+
+    <div v-if="changes > 0" class="flex items-start gap-2 p-2 rounded bg-warning-soft">
+      <AlertTriangle class="size-3.5 shrink-0 mt-0.5 text-warning" />
+      <p class="text-[11px] text-warning-text leading-relaxed">
+        这台主机的主机密钥曾发生变更。若不是您本人重装或更换了服务端密钥，
+        请联系管理员核实后再继续使用。
+      </p>
+    </div>
+
+    <!-- 逐算法列出指纹 -->
+    <div class="space-y-2">
+      <div
+        v-for="r in records"
+        :key="recordKey(r)"
+        class="rounded-md border border-border p-2"
+      >
+        <div class="flex items-center gap-2">
+          <span class="text-[11px] font-medium">{{ keyTypeLabel(r.keyType) }}</span>
+          <div class="flex-1" />
+          <button
+            v-if="r.history.length > 0"
+            class="text-[10px] text-warning-text hover:underline shrink-0"
+            @click="toggleHistory(r)"
+          >
+            变更 {{ r.history.length }} 次
+            {{ expanded === recordKey(r) ? '▴' : '▾' }}
+          </button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            class="shrink-0 text-muted-foreground hover:text-destructive"
+            title="忘记该主机（删除这条指纹记录）"
+            @click="emit('forget', r)"
+          >
+            <Trash2 class="size-3" />
+          </Button>
+        </div>
+
+        <p class="mt-1 text-[11px] font-mono text-muted-foreground break-all">
+          {{ r.fingerprint }}
+        </p>
+
+        <div class="mt-1 flex items-center gap-3 text-[10px] text-muted-foreground/80">
+          <span>首次 {{ formatDateTime(r.firstSeen) }}</span>
+          <span>最近确认 {{ formatDateTime(r.lastConfirmed) }}</span>
+        </div>
+
+        <!-- 变更历史：展开后按时间倒序（后端已是倒序，这里不再排序） -->
+        <div
+          v-if="expanded === recordKey(r)"
+          class="mt-2 pt-2 border-t border-border space-y-1.5"
+        >
+          <div v-for="(c, i) in r.history" :key="i" class="flex items-start gap-1.5">
+            <span
+              class="shrink-0 mt-0.5 size-1.5 rounded-full"
+              :class="c.accepted ? 'bg-warning' : 'bg-muted-foreground/40'"
+            />
+            <div class="min-w-0 text-[10px]">
+              <span class="text-muted-foreground">{{ formatDateTime(c.changedAt) }}</span>
+              <span class="mx-1">·</span>
+              <span :class="c.accepted ? 'text-warning-text' : 'text-muted-foreground'">
+                {{ c.accepted ? '已接受变更' : '已拒绝变更' }}
+              </span>
+              <p class="font-mono text-muted-foreground/70 break-all" :title="c.oldFingerprint">
+                原指纹 {{ c.oldFingerprint }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-[10px] text-muted-foreground/70 leading-relaxed">
+      核对指纹应与服务器管理员提供的值一致。指纹不同且无法解释时，请不要连接。
+    </p>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/KeyManagerPanel.vue b/src/modules/terminal/components/KeyManagerPanel.vue
index 857a354..fb22e79 100644
--- a/src/modules/terminal/components/KeyManagerPanel.vue
+++ b/src/modules/terminal/components/KeyManagerPanel.vue
@@ -24,7 +24,6 @@ import {
   Check,
   ClipboardCopy,
   Download,
-  FileKey,
   FolderOpen,
   KeyRound,
   Loader2,
@@ -56,12 +55,20 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Card, CardContent } from '@/components/ui/card'
+import { StateBlock, StatusBadge } from '@/components/common'
 import { createLogger } from '@/lib/logger'
+import PageToolbar from '@/components/layout/PageToolbar.vue'
 import type { KeyGenParams, KeyView } from '@/types/terminal'
 
 const logger = createLogger('terminal')
 const store = useTerminalStore()
 
+// 本页不再有分区开关：known_hosts（原「已知主机」分区）已并入主机页
+// （见 HostManager 的信任徽标与 OrphanKnownHosts），因此这里没有「切到另一半」
+// 的语义需要抛给父组件。
+
 // ===== 生成 =====
 
 const genOpen = ref(false)
@@ -182,7 +189,7 @@ async function submitImport() {
   if (!text.trim()) e.content = '请粘贴私钥内容'
   // 与服务端 `terminal/keys.rs::is_ppk` 的判定保持一致：PPK 头部必须在首行。
   // 前端只做「是不是明显不对」的拦截，真正的解析一律交给后端——
-  // 前端做格式解析迟早会与后端分叉（见 SnippetPanel 里同样的取舍）。
+  // 前端做格式解析迟早会与后端分叉（见 SnippetPopover 里同样的取舍）。
   else if (!text.includes('PRIVATE KEY') && !/^\s*PuTTY-User-Key-File-\d+:/m.test(text)) {
     e.content = '内容看起来不是私钥（需为 OpenSSH 私钥或 PuTTY .ppk）'
   }
@@ -393,143 +400,142 @@ function formatDate(rfc3339: string): string {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <!-- 头部 -->
-    <div class="shrink-0 flex items-center gap-2 px-4 h-12 border-b border-border">
-      <KeyRound class="size-4 text-muted-foreground" />
-      <h3 class="text-sm font-medium">SSH 密钥</h3>
-      <span class="text-xs text-muted-foreground">({{ store.keys.length }})</span>
-      <div class="flex-1" />
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs" @click="openImport">
+  <div class="flex flex-col h-full overflow-hidden">
+    <PageToolbar :icon="KeyRound" title="SSH 密钥" :meta="`共 ${store.keys.length} 个`">
+      <Button variant="outline" size="sm" @click="openImport">
         <Download class="size-3.5" />导入密钥
       </Button>
-      <Button size="sm" class="h-7 gap-1.5 text-xs" @click="openGenerate">
+      <Button size="sm" @click="openGenerate">
         <Plus class="size-3.5" />生成密钥
       </Button>
-    </div>
+    </PageToolbar>
 
-    <!-- 列表 -->
-    <div class="flex-1 min-h-0 overflow-y-auto p-3">
-      <div v-if="store.keys.length === 0" class="py-16 text-center">
-        <FileKey class="size-8 mx-auto text-muted-foreground/30 mb-3" />
-        <p class="text-sm text-muted-foreground mb-1">还没有 SSH 密钥</p>
-        <p class="text-xs text-muted-foreground/70 mb-4">
-          推荐生成 Ed25519 —— 更短、更快、安全性优于同强度的 RSA
-        </p>
-        <div class="flex items-center justify-center gap-2">
-          <Button size="sm" class="gap-1.5" @click="openGenerate">
-            <Plus class="size-3.5" />生成密钥
-          </Button>
-          <Button variant="outline" size="sm" class="gap-1.5" @click="openImport">
-            <Download class="size-3.5" />导入已有密钥
-          </Button>
-        </div>
-      </div>
+    <!--
+      列表：卡片承载（与 proxy 订阅列表同口径）。
 
-      <div v-else class="space-y-1.5">
-        <div
-          v-for="k in store.keys"
-          :key="k.meta.id"
-          class="group rounded-md border border-border px-3 py-2.5
-                 hover:border-primary/40 hover:bg-accent/30 transition-colors"
-        >
-          <div class="flex items-start gap-3">
-            <div class="shrink-0 mt-0.5">
-              <Lock v-if="k.hasPassphrase" class="size-4 text-emerald-600 dark:text-emerald-400" />
-              <Unlock v-else class="size-4 text-muted-foreground/50" />
-            </div>
+      `-mx-3` + 内层 `px-3 pb-3`：视口左右各外扩 12px 再等量内缩，卡片位置不变，
+      但两侧与底部的阴影不再被视口裁掉（内边距必须在内层，见 HostManager 同款说明）。
+    -->
+    <ScrollArea class="flex-1 min-h-0 -mx-3">
+      <div class="px-3 pb-3">
+      <Card v-if="store.keys.length === 0">
+        <CardContent>
+          <StateBlock
+            variant="empty"
+            title="还没有 SSH 密钥"
+            description="推荐生成 Ed25519 —— 更短、更快、安全性优于同强度的 RSA"
+            :min-height="220"
+          >
+            <template #action>
+              <div class="flex items-center justify-center gap-2">
+                <Button size="sm" class="gap-1.5" @click="openGenerate">
+                  <Plus class="size-3.5" />生成密钥
+                </Button>
+                <Button variant="outline" size="sm" class="gap-1.5" @click="openImport">
+                  <Download class="size-3.5" />导入已有密钥
+                </Button>
+              </div>
+            </template>
+          </StateBlock>
+        </CardContent>
+      </Card>
 
-            <div class="min-w-0 flex-1">
-              <div class="flex items-center gap-2 flex-wrap">
-                <span class="text-sm font-medium truncate">{{ k.meta.name }}</span>
-                <span class="text-[10px] px-1.5 py-0.5 rounded bg-muted font-mono shrink-0">
-                  {{ algorithmLabel(k.meta.algorithm) }}{{ k.meta.bits ? ` ${k.meta.bits}` : '' }}
-                </span>
-                <span
-                  v-if="k.hasPassphrase"
-                  class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 shrink-0"
+      <Card v-else>
+        <CardContent class="space-y-2">
+          <div
+            v-for="k in store.keys"
+            :key="k.meta.id"
+            class="group rounded-md border border-border p-3 transition-colors hover:bg-hover"
+          >
+            <div class="flex items-start gap-3">
+              <div class="shrink-0 mt-0.5">
+                <Lock v-if="k.hasPassphrase" class="size-4 text-success" />
+                <Unlock v-else class="size-4 text-muted-foreground/50" />
+              </div>
+
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2 flex-wrap">
+                  <span class="text-sm font-medium truncate">{{ k.meta.name }}</span>
+                  <span class="shrink-0 text-[11px] font-mono text-muted-foreground">
+                    {{ algorithmLabel(k.meta.algorithm) }}{{ k.meta.bits ? ` ${k.meta.bits}` : '' }}
+                  </span>
+                  <StatusBadge v-if="k.hasPassphrase" variant="success" size="sm">已加密</StatusBadge>
+                  <!-- 私钥文件丢失时明确告警：主机配置还指向它，但已经连不上了 -->
+                  <StatusBadge v-if="!k.fileExists" variant="danger" size="sm">
+                    <AlertTriangle class="size-2.5" />私钥文件缺失
+                  </StatusBadge>
+                </div>
+
+                <div class="mt-1 text-xs text-muted-foreground">
+                  <span class="font-mono truncate block" :title="k.meta.fingerprint">
+                    {{ k.meta.fingerprint }}
+                  </span>
+                </div>
+
+                <div class="mt-1 flex items-center gap-3 text-[11px] text-muted-foreground/80">
+                  <span v-if="k.meta.comment" class="truncate">{{ k.meta.comment }}</span>
+                  <span>创建于 {{ formatDate(k.meta.createdAt) }}</span>
+                  <span v-if="k.meta.fileName" class="font-mono truncate">{{ k.meta.fileName }}</span>
+                </div>
+              </div>
+
+              <div class="shrink-0 flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  :title="copiedId === k.meta.id ? '已复制' : '复制公钥'"
+                  @click="copyPublic(k)"
                 >
-                  已加密
-                </span>
-                <!-- 私钥文件丢失时明确告警：主机配置还指向它，但已经连不上了 -->
-                <span
-                  v-if="!k.fileExists"
-                  class="text-[10px] px-1.5 py-0.5 rounded bg-destructive/15 text-destructive inline-flex items-center gap-0.5 shrink-0"
+                  <Check v-if="copiedId === k.meta.id" class="size-3.5 text-success" />
+                  <ClipboardCopy v-else class="size-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  class="opacity-0 group-hover:opacity-100 transition-opacity"
+                  title="复制为 authorized_keys 单行格式"
+                  @click="copyForAuthorizedKeys(k)"
                 >
-                  <AlertTriangle class="size-2.5" />私钥文件缺失
-                </span>
+                  <ShieldCheck class="size-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  class="opacity-0 group-hover:opacity-100 transition-opacity"
+                  title="修改 passphrase"
+                  @click="openPassphrase(k)"
+                >
+                  <Lock class="size-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  class="opacity-0 group-hover:opacity-100 transition-opacity"
+                  title="重命名"
+                  @click="openRename(k)"
+                >
+                  <Pencil class="size-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  class="opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
+                  title="删除"
+                  @click="pendingDelete = k"
+                >
+                  <Trash2 class="size-3.5" />
+                </Button>
               </div>
-
-              <div class="mt-1 text-xs text-muted-foreground">
-                <span class="font-mono truncate block" :title="k.meta.fingerprint">
-                  {{ k.meta.fingerprint }}
-                </span>
-              </div>
-
-              <div class="mt-1 flex items-center gap-3 text-[11px] text-muted-foreground/80">
-                <span v-if="k.meta.comment" class="truncate">{{ k.meta.comment }}</span>
-                <span>创建于 {{ formatDate(k.meta.createdAt) }}</span>
-                <span v-if="k.meta.fileName" class="font-mono truncate">{{ k.meta.fileName }}</span>
-              </div>
-            </div>
-
-            <div class="shrink-0 flex items-center gap-1">
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7"
-                :title="copiedId === k.meta.id ? '已复制' : '复制公钥'"
-                @click="copyPublic(k)"
-              >
-                <Check v-if="copiedId === k.meta.id" class="size-3.5 text-emerald-600" />
-                <ClipboardCopy v-else class="size-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7 opacity-0 group-hover:opacity-100 transition-opacity"
-                title="复制为 authorized_keys 单行格式"
-                @click="copyForAuthorizedKeys(k)"
-              >
-                <ShieldCheck class="size-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7 opacity-0 group-hover:opacity-100 transition-opacity"
-                title="修改 passphrase"
-                @click="openPassphrase(k)"
-              >
-                <Lock class="size-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7 opacity-0 group-hover:opacity-100 transition-opacity"
-                title="重命名"
-                @click="openRename(k)"
-              >
-                <Pencil class="size-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7 opacity-0 group-hover:opacity-100 transition-opacity
-                       text-destructive hover:text-destructive"
-                title="删除"
-                @click="pendingDelete = k"
-              >
-                <Trash2 class="size-3.5" />
-              </Button>
             </div>
           </div>
-        </div>
+        </CardContent>
+      </Card>
       </div>
-    </div>
+    </ScrollArea>
 
     <!-- ===== 生成 ===== -->
     <Dialog v-model:open="genOpen">
-      <DialogContent class="max-w-md">
+      <DialogContent class="max-w-md max-h-[85vh]">
         <DialogHeader>
           <DialogTitle>生成 SSH 密钥</DialogTitle>
           <DialogDescription class="text-xs">
@@ -537,6 +543,8 @@ function formatDate(rfc3339: string): string {
           </DialogDescription>
         </DialogHeader>
 
+        <!-- 表单较长，用 ScrollArea 滚动（见 HostManager 的编辑对话框同款说明） -->
+        <ScrollArea class="max-h-[60vh] pr-4">
         <div class="space-y-3">
           <div class="space-y-1.5">
             <Label class="text-xs">名称</Label>
@@ -597,6 +605,7 @@ function formatDate(rfc3339: string): string {
             </p>
           </div>
         </div>
+        </ScrollArea>
 
         <DialogFooter>
           <Button variant="outline" size="sm" @click="genOpen = false">取消</Button>
@@ -610,7 +619,7 @@ function formatDate(rfc3339: string): string {
 
     <!-- ===== 导入 ===== -->
     <Dialog v-model:open="importOpen">
-      <DialogContent class="max-w-lg">
+      <DialogContent class="max-w-lg max-h-[85vh]">
         <DialogHeader>
           <DialogTitle>导入 SSH 私钥</DialogTitle>
           <DialogDescription class="text-xs">
@@ -619,6 +628,8 @@ function formatDate(rfc3339: string): string {
           </DialogDescription>
         </DialogHeader>
 
+        <!-- 含多行私钥文本域，容易超过视口高度，用 ScrollArea 滚动 -->
+        <ScrollArea class="max-h-[60vh] pr-4">
         <div class="space-y-3">
           <div class="space-y-1.5">
             <Label class="text-xs">名称</Label>
@@ -659,6 +670,7 @@ function formatDate(rfc3339: string): string {
             </p>
           </div>
         </div>
+        </ScrollArea>
 
         <DialogFooter>
           <Button variant="outline" size="sm" @click="importOpen = false">取消</Button>
@@ -718,7 +730,7 @@ function formatDate(rfc3339: string): string {
           <!-- 移除加密是有实际风险的操作，给一次明确提示 -->
           <div
             v-if="passTarget?.hasPassphrase && !newPass"
-            class="flex items-start gap-2 p-2 rounded bg-amber-500/10 text-[11px] text-amber-700 dark:text-amber-400"
+            class="flex items-start gap-2 p-2 rounded bg-warning-soft text-[11px] text-warning-text"
           >
             <AlertTriangle class="size-3.5 shrink-0 mt-0.5" />
             <span>新 passphrase 留空将移除加密，此后该私钥以明文形式存放在磁盘上。</span>
diff --git a/src/modules/terminal/components/KnownHostsMenu.vue b/src/modules/terminal/components/KnownHostsMenu.vue
new file mode 100644
index 0000000..55590e6
--- /dev/null
+++ b/src/modules/terminal/components/KnownHostsMenu.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+/**
+ * 已知主机记录的维护入口（主机页工具条右侧的下拉菜单）。
+ *
+ * # 为什么这些动作挂在主机页而不是独立分区
+ *
+ * 「导入 / 导出 / 清空」都是**低频的维护性动作**，作用于整份 known_hosts 文件，
+ * 与「某台主机是否可信」这条主线无关（后者已经落到主机行的信任徽标与详情
+ * popover 上）。它们此前和列表一起占着「凭据」页的一个分区，代价是让
+ * 「看一眼主机信任状态」变成一个跨 tab 的动作。
+ *
+ * 现在收进主机页工具条的下拉里：页面主线是主机，维护动作在旁边待命。
+ * 这与主机/密钥页既有的「高频外露、低频入菜单」取舍一致。
+ *
+ * # 为什么清空要输入确认词
+ *
+ * 清空之后所有主机密钥校验都要重新人工核对，而**在核对之前连接不会报错**
+ * ——用户会以为一切正常。这是「静默降低安全性」的操作，必须让手指慢下来。
+ */
+import { ref } from 'vue'
+import {
+  ChevronDown,
+  ClipboardPaste,
+  Check,
+  Download,
+  Loader2,
+  ShieldCheck,
+  Trash2
+} from '@lucide/vue'
+import { toast } from 'vue-sonner'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { createLogger } from '@/lib/logger'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+
+const logger = createLogger('terminal')
+const store = useTerminalStore()
+
+// ===== 导入 / 导出 =====
+
+/** 刚复制过的短暂反馈（按钮文案变成「已导出」，给出「确实生效了」的确认） */
+const copied = ref(false)
+let copiedTimer: ReturnType<typeof setTimeout> | null = null
+
+async function copyAll() {
+  try {
+    const text = await store.exportKnownHosts()
+    if (!text.trim()) {
+      toast.info('没有可导出的记录')
+      return
+    }
+    await navigator.clipboard.writeText(text)
+    copied.value = true
+    if (copiedTimer) clearTimeout(copiedTimer)
+    copiedTimer = setTimeout(() => (copied.value = false), 1800)
+    toast.success('已复制到剪贴板')
+  } catch (e) {
+    toast.error(`导出失败：${String(e)}`)
+  }
+}
+
+const importOpen = ref(false)
+const importText = ref('')
+const importBusy = ref(false)
+
+function openImport() {
+  importText.value = ''
+  importOpen.value = true
+}
+
+async function submitImport() {
+  const text = importText.value.trim()
+  if (!text) {
+    toast.error('请粘贴 known_hosts 内容')
+    return
+  }
+  importBusy.value = true
+  try {
+    const r = await store.importKnownHosts(text)
+    if (r.ok) {
+      toast.success(r.message)
+      importOpen.value = false
+    } else {
+      toast.error(r.message)
+    }
+  } catch (e) {
+    logger.error(`导入 known_hosts 失败：${String(e)}`)
+    toast.error(`导入失败：${String(e)}`)
+  } finally {
+    importBusy.value = false
+  }
+}
+
+// ===== 清空 =====
+
+const clearOpen = ref(false)
+const clearBusy = ref(false)
+const clearConfirmText = ref('')
+const CLEAR_KEYWORD = '清空'
+
+async function submitClear() {
+  if (clearConfirmText.value.trim() !== CLEAR_KEYWORD) return
+  clearBusy.value = true
+  try {
+    await store.clearKnownHosts()
+    toast.success('已清空全部已知主机')
+    clearOpen.value = false
+    clearConfirmText.value = ''
+  } catch (e) {
+    toast.error(`清空失败：${String(e)}`)
+  } finally {
+    clearBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline" size="sm" class="gap-1.5">
+        <ShieldCheck class="size-3.5" />已知主机<ChevronDown class="size-3" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-56">
+      <DropdownMenuItem @click="openImport">
+        <ClipboardPaste class="size-4" />导入 known_hosts…
+      </DropdownMenuItem>
+      <DropdownMenuItem :disabled="store.knownHosts.length === 0" @click="copyAll">
+        <Check v-if="copied" class="size-4 text-success" />
+        <Download v-else class="size-4" />
+        {{ copied ? '已复制到剪贴板' : '导出到剪贴板' }}
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        class="text-destructive"
+        :disabled="store.knownHosts.length === 0"
+        @click="clearOpen = true"
+      >
+        <Trash2 class="size-4" />清空全部已知主机
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <!-- ===== 导入（粘贴 known_hosts 文本） ===== -->
+  <Dialog v-model:open="importOpen">
+    <DialogContent class="max-w-lg">
+      <DialogHeader>
+        <DialogTitle>导入 known_hosts</DialogTitle>
+        <DialogDescription class="text-xs">
+          粘贴 <span class="font-mono">~/.ssh/known_hosts</span> 的内容，或从其它设备导出的记录。
+        </DialogDescription>
+      </DialogHeader>
+      <Textarea
+        v-model="importText"
+        placeholder="example.com ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA…"
+        class="font-mono text-xs min-h-[180px] resize-y"
+      />
+      <DialogFooter>
+        <Button variant="outline" size="sm" @click="importOpen = false">取消</Button>
+        <Button size="sm" :disabled="importBusy" @click="submitImport">
+          <Loader2 v-if="importBusy" class="size-3.5 mr-1.5 animate-spin" />
+          导入
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+
+  <!-- ===== 清空全部（需输入确认词） ===== -->
+  <Dialog v-model:open="clearOpen">
+    <DialogContent class="max-w-sm" :show-close-button="false">
+      <DialogHeader>
+        <DialogTitle class="text-base text-destructive">清空全部已知主机</DialogTitle>
+        <DialogDescription class="text-xs">
+          将删除全部 {{ store.knownHosts.length }} 条记录。
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="rounded-md border border-destructive/40 bg-destructive/5 p-2.5">
+        <p class="text-[11px] text-destructive font-medium mb-1">这会降低连接安全性</p>
+        <p class="text-[11px] text-muted-foreground">
+          清空后，所有主机的密钥校验都需要重新人工核对。在核对前，
+          连接可能被中间人攻击劫持而您不会收到提示。
+        </p>
+      </div>
+
+      <div class="space-y-1.5">
+        <p class="text-xs text-muted-foreground">
+          请输入 <span class="font-mono font-semibold text-foreground">{{ CLEAR_KEYWORD }}</span> 以确认
+        </p>
+        <input
+          v-model="clearConfirmText"
+          class="w-full h-8 px-2.5 rounded-md border border-border bg-transparent
+                 text-sm outline-none focus:border-destructive/60"
+        />
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" @click="clearOpen = false">取消</Button>
+        <Button
+          variant="destructive"
+          size="sm"
+          :disabled="clearBusy || clearConfirmText.trim() !== CLEAR_KEYWORD"
+          @click="submitClear"
+        >
+          <Loader2 v-if="clearBusy" class="size-3.5 mr-1.5 animate-spin" />
+          清空全部
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/KnownHostsPanel.vue b/src/modules/terminal/components/KnownHostsPanel.vue
deleted file mode 100644
index 7655f4a..0000000
--- a/src/modules/terminal/components/KnownHostsPanel.vue
+++ /dev/null
@@ -1,453 +0,0 @@
-<script setup lang="ts">
-/**
- * known_hosts 管理。
- *
- * # 设计立场
- *
- * 这个面板的存在理由只有一个：**让「忘记某台主机」这件事变得容易**。
- *
- * 主机密钥校验是 SSH 抵御中间人的核心机制，但它的最大敌人不是攻击者，
- * 而是用户自己被卡住时的挫败感 ——「指纹变了，连不上，怎么办？」。
- * 如果这时唯一的出路是去翻文档、找 known_hosts 文件、手工删行，
- * 用户就会转向「关闭校验」这种彻底破坏安全性的做法。
- *
- * 所以这里提供两条路：
- * - 单条遗忘（服务器重装后重新握手）——正常流程。
- * - 全部清空（最后手段，带明确警告）。
- *
- * # 指纹变更历史为什么单独展示
- *
- * 一条**已接受**的变更（服务器重装、管理员换密钥）和一条**刚发生**的变更，
- * 对用户的意义完全不同。只显示「最新指纹」会丢掉这个上下文，
- * 让用户误以为「这台机器一直没问题」——而实际上它已经换过密钥。
- */
-import { computed, ref } from 'vue'
-import {
-  AlertTriangle,
-  Check,
-  ClipboardPaste,
-  Download,
-  History,
-  Loader2,
-  Server,
-  ShieldCheck,
-  Trash2
-} from '@lucide/vue'
-import { toast } from 'vue-sonner'
-import { useTerminalStore } from '@/stores/terminalStore'
-import { Button } from '@/components/ui/button'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog'
-import { createLogger } from '@/lib/logger'
-import type { KnownHost } from '@/types/terminal'
-
-const logger = createLogger('terminal')
-const store = useTerminalStore()
-
-const search = ref('')
-
-const filtered = computed(() => {
-  const q = search.value.trim().toLowerCase()
-  if (!q) return store.knownHosts
-  return store.knownHosts.filter(
-    h =>
-      h.host.toLowerCase().includes(q) ||
-      h.fingerprint.toLowerCase().includes(q) ||
-      h.keyType.toLowerCase().includes(q)
-  )
-})
-
-/** 曾发生过指纹变更的主机数量（用于顶部的风险提示） */
-const changedCount = computed(() => store.knownHosts.filter(h => h.history.length > 0).length)
-
-/** 展开查看变更历史的主机 key */
-const expanded = ref<string | null>(null)
-
-function hostKey(h: KnownHost): string {
-  return `${h.host}:${h.port}/${h.keyType}`
-}
-
-function toggleExpand(h: KnownHost) {
-  const k = hostKey(h)
-  expanded.value = expanded.value === k ? null : k
-}
-
-// ===== 单条遗忘 =====
-
-const pendingForget = ref<KnownHost | null>(null)
-const forgetBusy = ref(false)
-
-async function submitForget() {
-  const h = pendingForget.value
-  if (!h) return
-  forgetBusy.value = true
-  try {
-    await store.forgetHost(h.host, h.port, h.keyType)
-    toast.success(`已忘记 ${h.host}:${h.port}`)
-    pendingForget.value = null
-  } catch (e) {
-    toast.error(`操作失败：${String(e)}`)
-  } finally {
-    forgetBusy.value = false
-  }
-}
-
-// ===== 全部清空 =====
-
-const clearOpen = ref(false)
-const clearBusy = ref(false)
-/** 清空是破坏性操作：要求用户输入确认词，避免误点 */
-const clearConfirmText = ref('')
-const CLEAR_KEYWORD = '清空'
-
-async function submitClear() {
-  if (clearConfirmText.value.trim() !== CLEAR_KEYWORD) return
-  clearBusy.value = true
-  try {
-    await store.clearKnownHosts()
-    toast.success('已清空全部已知主机')
-    clearOpen.value = false
-    clearConfirmText.value = ''
-  } catch (e) {
-    toast.error(`清空失败：${String(e)}`)
-  } finally {
-    clearBusy.value = false
-  }
-}
-
-// ===== 导入 / 导出 =====
-
-const copied = ref(false)
-let copiedTimer: ReturnType<typeof setTimeout> | null = null
-
-async function copyAll() {
-  try {
-    const text = await store.exportKnownHosts()
-    if (!text.trim()) {
-      toast.info('没有可导出的记录')
-      return
-    }
-    await navigator.clipboard.writeText(text)
-    copied.value = true
-    if (copiedTimer) clearTimeout(copiedTimer)
-    copiedTimer = setTimeout(() => (copied.value = false), 1800)
-    toast.success('已复制到剪贴板')
-  } catch (e) {
-    toast.error(`导出失败：${String(e)}`)
-  }
-}
-
-const importOpen = ref(false)
-const importText = ref('')
-const importBusy = ref(false)
-
-function openImport() {
-  importText.value = ''
-  importOpen.value = true
-}
-
-async function submitImport() {
-  const text = importText.value.trim()
-  if (!text) {
-    toast.error('请粘贴 known_hosts 内容')
-    return
-  }
-  importBusy.value = true
-  try {
-    const r = await store.importKnownHosts(text)
-    if (r.ok) {
-      toast.success(r.message)
-      importOpen.value = false
-    } else {
-      toast.error(r.message)
-    }
-  } catch (e) {
-    logger.error(`导入 known_hosts 失败：${String(e)}`)
-    toast.error(`导入失败：${String(e)}`)
-  } finally {
-    importBusy.value = false
-  }
-}
-
-// ===== 展示辅助 =====
-
-function formatDate(rfc3339: string): string {
-  if (!rfc3339) return '—'
-  const d = new Date(rfc3339)
-  if (Number.isNaN(d.getTime())) return rfc3339
-  return d.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-function keyTypeLabel(t: string): string {
-  const map: Record<string, string> = {
-    'ssh-ed25519': 'Ed25519',
-    'ssh-rsa': 'RSA',
-    'ecdsa-sha2-nistp256': 'ECDSA 256',
-    'ecdsa-sha2-nistp384': 'ECDSA 384',
-    'ecdsa-sha2-nistp521': 'ECDSA 521',
-    'ssh-dss': 'DSA'
-  }
-  return map[t] ?? t
-}
-</script>
-
-<template>
-  <div class="flex flex-col h-full">
-    <!-- 头部 -->
-    <div class="shrink-0 flex items-center gap-2 px-4 h-12 border-b border-border">
-      <ShieldCheck class="size-4 text-muted-foreground" />
-      <h3 class="text-sm font-medium">已知主机</h3>
-      <span class="text-xs text-muted-foreground">({{ store.knownHosts.length }})</span>
-      <div class="flex-1" />
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs" @click="openImport">
-        <ClipboardPaste class="size-3.5" />导入
-      </Button>
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs" @click="copyAll">
-        <Check v-if="copied" class="size-3.5 text-emerald-600" />
-        <Download v-else class="size-3.5" />
-        导出
-      </Button>
-      <Button
-        variant="outline"
-        size="sm"
-        class="h-7 gap-1.5 text-xs text-destructive hover:text-destructive"
-        :disabled="store.knownHosts.length === 0"
-        @click="clearOpen = true"
-      >
-        <Trash2 class="size-3.5" />清空
-      </Button>
-    </div>
-
-    <!-- 风险提示：有变更历史时始终可见 -->
-    <div
-      v-if="changedCount > 0"
-      class="shrink-0 mx-3 mt-3 flex items-start gap-2 p-2.5 rounded-md
-             border border-amber-500/40 bg-amber-500/10"
-    >
-      <AlertTriangle class="size-3.5 shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" />
-      <div class="text-[11px] text-amber-700 dark:text-amber-400">
-        <p class="font-medium">{{ changedCount }} 台主机曾发生指纹变更</p>
-        <p class="mt-0.5 opacity-90">
-          若不是您本人重装或更换了服务器密钥，请联系管理员核实。
-        </p>
-      </div>
-    </div>
-
-    <!-- 搜索 -->
-    <div v-if="store.knownHosts.length > 0" class="shrink-0 px-3 pt-3">
-      <input
-        v-model="search"
-        placeholder="搜索主机、指纹或类型…"
-        class="w-full h-7 px-2.5 rounded-md border border-border bg-transparent
-               text-xs outline-none focus:border-primary/50 placeholder:text-muted-foreground"
-      />
-    </div>
-
-    <!-- 列表 -->
-    <div class="flex-1 min-h-0 overflow-y-auto p-3">
-      <div v-if="store.knownHosts.length === 0" class="py-16 text-center">
-        <ShieldCheck class="size-8 mx-auto text-muted-foreground/30 mb-3" />
-        <p class="text-sm text-muted-foreground mb-1">还没有已知主机记录</p>
-        <p class="text-xs text-muted-foreground/70">
-          首次连接某台 SSH 主机时，会请您核对并保存其密钥指纹
-        </p>
-      </div>
-
-      <div v-else-if="filtered.length === 0" class="py-12 text-center">
-        <p class="text-sm text-muted-foreground">没有匹配「{{ search }}」的记录</p>
-      </div>
-
-      <div v-else class="space-y-1.5">
-        <div
-          v-for="h in filtered"
-          :key="hostKey(h)"
-          class="group rounded-md border border-border overflow-hidden
-                 hover:border-primary/40 transition-colors"
-          :class="h.history.length > 0 ? 'border-amber-500/40' : ''"
-        >
-          <div class="flex items-start gap-3 px-3 py-2.5">
-            <Server class="size-4 shrink-0 mt-0.5 text-muted-foreground" />
-
-            <div class="min-w-0 flex-1">
-              <div class="flex items-center gap-2 flex-wrap">
-                <span class="text-sm font-medium font-mono truncate">
-                  {{ h.host }}<span v-if="h.port !== 22" class="text-muted-foreground">:{{ h.port }}</span>
-                </span>
-                <span class="text-[10px] px-1.5 py-0.5 rounded bg-muted shrink-0">
-                  {{ keyTypeLabel(h.keyType) }}
-                </span>
-                <button
-                  v-if="h.history.length > 0"
-                  class="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-700
-                         dark:text-amber-400 shrink-0 inline-flex items-center gap-0.5
-                         hover:bg-amber-500/25 transition-colors"
-                  @click="toggleExpand(h)"
-                >
-                  <History class="size-2.5" />
-                  变更过 {{ h.history.length }} 次
-                </button>
-              </div>
-
-              <div
-                class="mt-1 text-xs font-mono text-muted-foreground truncate"
-                :title="h.fingerprint"
-              >
-                {{ h.fingerprint }}
-              </div>
-
-              <div class="mt-1 flex items-center gap-3 text-[11px] text-muted-foreground/80">
-                <span>首次 {{ formatDate(h.firstSeen) }}</span>
-                <span>最近确认 {{ formatDate(h.lastConfirmed) }}</span>
-              </div>
-            </div>
-
-            <Button
-              variant="ghost"
-              size="icon"
-              class="size-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity
-                     text-destructive hover:text-destructive"
-              title="忘记该主机"
-              @click="pendingForget = h"
-            >
-              <Trash2 class="size-3.5" />
-            </Button>
-          </div>
-
-          <!-- 变更历史 -->
-          <div
-            v-if="expanded === hostKey(h)"
-            class="border-t border-border bg-muted/30 px-3 py-2 space-y-1.5"
-          >
-            <p class="text-[10px] uppercase tracking-wide text-muted-foreground">指纹变更历史</p>
-            <div
-              v-for="(c, i) in h.history"
-              :key="i"
-              class="flex items-start gap-2 text-[11px]"
-            >
-              <span
-                class="shrink-0 mt-0.5 size-1.5 rounded-full"
-                :class="c.accepted ? 'bg-amber-500' : 'bg-muted-foreground/40'"
-              />
-              <div class="min-w-0">
-                <span class="text-muted-foreground">{{ formatDate(c.changedAt) }}</span>
-                <span class="mx-1.5">·</span>
-                <span :class="c.accepted ? 'text-amber-700 dark:text-amber-400' : 'text-muted-foreground'">
-                  {{ c.accepted ? '已接受变更' : '已拒绝变更' }}
-                </span>
-                <div class="font-mono text-muted-foreground/70 truncate" :title="c.oldFingerprint">
-                  原指纹 {{ c.oldFingerprint }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- ===== 忘记单条 ===== -->
-    <Dialog :open="pendingForget !== null" @update:open="v => !v && (pendingForget = null)">
-      <DialogContent class="max-w-sm" :show-close-button="false">
-        <DialogHeader>
-          <DialogTitle class="text-base">忘记该主机</DialogTitle>
-          <DialogDescription class="text-xs">
-            将删除 <span class="font-mono">{{ pendingForget?.host }}:{{ pendingForget?.port }}</span>
-            的密钥指纹记录。下次连接时将重新提示核对。
-          </DialogDescription>
-        </DialogHeader>
-        <div class="flex items-start gap-2 p-2 rounded bg-muted text-[11px] text-muted-foreground">
-          <AlertTriangle class="size-3.5 shrink-0 mt-0.5" />
-          <span>仅在确认该主机密钥确实已更换时执行。若出于「连不上就删掉」的动机，请先核实原因。</span>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" size="sm" @click="pendingForget = null">取消</Button>
-          <Button variant="destructive" size="sm" :disabled="forgetBusy" @click="submitForget">
-            忘记
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <!-- ===== 清空全部 ===== -->
-    <Dialog v-model:open="clearOpen">
-      <DialogContent class="max-w-sm" :show-close-button="false">
-        <DialogHeader>
-          <DialogTitle class="text-base text-destructive">清空全部已知主机</DialogTitle>
-          <DialogDescription class="text-xs">
-            将删除全部 {{ store.knownHosts.length }} 条记录。
-          </DialogDescription>
-        </DialogHeader>
-
-        <div class="rounded-md border border-destructive/40 bg-destructive/5 p-2.5">
-          <p class="text-[11px] text-destructive font-medium flex items-center gap-1 mb-1">
-            <AlertTriangle class="size-3" />这会降低连接安全性
-          </p>
-          <p class="text-[11px] text-muted-foreground">
-            清空后，所有主机的密钥校验都需要重新人工核对。在核对前，
-            连接可能被中间人攻击劫持而您不会收到提示。
-          </p>
-        </div>
-
-        <div class="space-y-1.5">
-          <p class="text-xs text-muted-foreground">
-            请输入 <span class="font-mono font-semibold text-foreground">{{ CLEAR_KEYWORD }}</span> 以确认
-          </p>
-          <input
-            v-model="clearConfirmText"
-            class="w-full h-8 px-2.5 rounded-md border border-border bg-transparent
-                   text-sm outline-none focus:border-destructive/60"
-          />
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" size="sm" @click="clearOpen = false">取消</Button>
-          <Button
-            variant="destructive"
-            size="sm"
-            :disabled="clearBusy || clearConfirmText.trim() !== CLEAR_KEYWORD"
-            @click="submitClear"
-          >
-            <Loader2 v-if="clearBusy" class="size-3.5 mr-1.5 animate-spin" />
-            清空全部
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <!-- ===== 导入 ===== -->
-    <Dialog v-model:open="importOpen">
-      <DialogContent class="max-w-lg">
-        <DialogHeader>
-          <DialogTitle>导入 known_hosts</DialogTitle>
-          <DialogDescription class="text-xs">
-            粘贴 <span class="font-mono">~/.ssh/known_hosts</span> 的内容，或从其它设备导出的记录。
-          </DialogDescription>
-        </DialogHeader>
-        <Textarea
-          v-model="importText"
-          placeholder="example.com ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA…"
-          class="font-mono text-xs min-h-[180px] resize-y"
-        />
-        <DialogFooter>
-          <Button variant="outline" size="sm" @click="importOpen = false">取消</Button>
-          <Button size="sm" :disabled="importBusy" @click="submitImport">
-            <Loader2 v-if="importBusy" class="size-3.5 mr-1.5 animate-spin" />
-            导入
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  </div>
-</template>
diff --git a/src/modules/terminal/components/OrphanKnownHosts.vue b/src/modules/terminal/components/OrphanKnownHosts.vue
new file mode 100644
index 0000000..8e3628a
--- /dev/null
+++ b/src/modules/terminal/components/OrphanKnownHosts.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * 孤儿 known_hosts 记录（主机页列表末尾的区块）。
+ *
+ * # 什么是孤儿
+ *
+ * 记有指纹、但主机配置列表里找不到对应「地址 + 端口」的记录。典型来源：
+ * - 用户直接 `ssh user@addr` 连过一次，从未在终端里保存过这台主机；
+ * - 主机配置被删除，而指纹记录留在 known_hosts 里。
+ *
+ * # 为什么必须单独显示，而不是只统计个数
+ *
+ * 这些记录**照样会拦住连接**：指纹变了会弹主机密钥确认框，用户被卡住时
+ * 需要找到「是哪条记录在挡路」才能删掉它。若因为「没有对应主机」就把它们
+ * 藏起来，用户会陷入「报错说指纹变了，但列表里找不到这台主机」的死角 ——
+ * 而这恰好是 known_hosts 管理界面存在的头号理由（见模块早期设计说明）。
+ *
+ * 因此这里不做任何匹配推断（例如「同 IP 不同端口算同一台」），
+ * 只按字面地址判定，宁可多列出一条，也不让一条记录失去入口。
+ */
+import { computed } from 'vue'
+import { AlertTriangle, History, Server, Trash2 } from '@lucide/vue'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge } from '@/components/common'
+import {
+  addressLabel,
+  formatDateTime,
+  keyTypeLabel,
+  orphanRecords,
+  recordKey
+} from './hostTrust'
+import type { KnownHost } from '@/types/terminal'
+
+const emit = defineEmits<{ (e: 'forget', record: KnownHost): void }>()
+
+const store = useTerminalStore()
+
+/** 未被任何主机配置引用的记录 */
+const orphans = computed(() => orphanRecords(store.knownHosts, store.hosts))
+</script>
+
+<template>
+  <Card v-if="orphans.length > 0" class="mt-3 border-warning/40">
+    <CardContent class="space-y-2">
+      <div class="flex items-start gap-2">
+        <AlertTriangle class="size-3.5 shrink-0 mt-0.5 text-warning" />
+        <div class="min-w-0 flex-1">
+          <p class="text-xs font-medium">未被任何主机引用的记录（{{ orphans.length }}）</p>
+          <p class="mt-0.5 text-[11px] text-muted-foreground leading-relaxed">
+            这些指纹来自「连过但没有保存为配置」或「配置已删除」的主机。
+            它们同样会参与连接时的密钥校验，指纹变更时也会拦截连接。
+          </p>
+        </div>
+      </div>
+
+      <div class="divide-y divide-divider">
+        <div
+          v-for="r in orphans"
+          :key="recordKey(r)"
+          class="group flex items-center gap-2 py-2"
+        >
+          <Server class="size-3.5 shrink-0 text-muted-foreground/60" />
+
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2 flex-wrap">
+              <span class="text-xs font-mono truncate">
+                {{ addressLabel(r.host, r.port) }}
+              </span>
+              <span class="shrink-0 text-[11px] text-muted-foreground">
+                {{ keyTypeLabel(r.keyType) }}
+              </span>
+              <StatusBadge v-if="r.history.length > 0" variant="warning" size="sm">
+                <History class="size-2.5" />变更 {{ r.history.length }} 次
+              </StatusBadge>
+            </div>
+            <div class="mt-0.5 flex items-center gap-3 text-[10px] text-muted-foreground/80">
+              <span class="font-mono truncate max-w-[220px]" :title="r.fingerprint">
+                {{ r.fingerprint }}
+              </span>
+              <span class="shrink-0">最近确认 {{ formatDateTime(r.lastConfirmed) }}</span>
+            </div>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            class="shrink-0 text-muted-foreground hover:text-destructive"
+            title="忘记该主机"
+            @click="emit('forget', r)"
+          >
+            <Trash2 class="size-3.5" />
+          </Button>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/SftpPanel.vue b/src/modules/terminal/components/SftpPanel.vue
index 9808a6a..e639527 100644
--- a/src/modules/terminal/components/SftpPanel.vue
+++ b/src/modules/terminal/components/SftpPanel.vue
@@ -462,9 +462,15 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 bg-background">
-    <!-- ===== 头部 ===== -->
-    <div class="shrink-0 flex items-center gap-2 px-2.5 h-9 border-b border-border">
-      <HardDrive class="size-3.5 text-muted-foreground shrink-0" />
+    <!--
+      ===== 头部 =====
+      高度与终端页上下两条栏（控制栏 / 状态栏，均 h-9）保持一致：本面板落在
+      终端卡片内部，头部与它们同属一块屏幕的横向分隔线，等高才不显得突兀
+      （2026-09-21 控制栏从 h-11 收进卡片并降到 h-9 后同步调整；
+      更早的约定是「与卡片外的工具条行 h-11 连成一条线」，那层已不存在）。
+    -->
+    <div class="shrink-0 flex items-center gap-2 px-3 h-9 border-b border-border">
+      <HardDrive class="size-4 text-muted-foreground shrink-0" />
       <span class="text-xs font-medium truncate" :title="sessionLabel">{{ sessionLabel }}</span>
       <span class="text-[10px] text-muted-foreground font-mono truncate">
         {{ remoteCwd || '—' }}
@@ -473,14 +479,14 @@ onBeforeUnmount(() => {
       <Button
         variant="ghost"
         size="sm"
-        class="h-6 px-1.5 text-[11px]"
+        class="h-7 px-1.5 text-[11px]"
         :disabled="!terminalCwd"
         title="定位到终端当前目录"
         @click="followTerminalCwd"
       >
         跟随终端
       </Button>
-      <Button variant="ghost" size="sm" class="h-6 w-6 p-0" title="关闭面板" @click="emit('close')">
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" title="关闭面板" @click="emit('close')">
         <X class="size-3.5" />
       </Button>
     </div>
@@ -701,7 +707,7 @@ onBeforeUnmount(() => {
                     <component
                       :is="entryIcon(e)"
                       class="size-3 shrink-0"
-                      :class="e.kind === 'dir' ? 'text-amber-500' : 'text-muted-foreground'"
+                      :class="e.kind === 'dir' ? 'text-warning' : 'text-muted-foreground'"
                     />
                     <template v-if="renaming && selectedRemote?.path === e.path">
                       <input
@@ -794,7 +800,7 @@ onBeforeUnmount(() => {
           <template v-if="t.state === 'running'">
             {{ t.total > 0 ? `${humanSize(t.transferred)} / ${humanSize(t.total)}` : humanSize(t.transferred) }}
           </template>
-          <span v-else-if="t.state === 'done'" class="text-emerald-600">完成</span>
+          <span v-else-if="t.state === 'done'" class="text-success">完成</span>
           <span v-else-if="t.state === 'failed'" class="text-destructive" :title="t.error ?? ''">失败</span>
           <span v-else>{{ t.state }}</span>
         </span>
diff --git a/src/modules/terminal/components/SnippetEditorDialog.vue b/src/modules/terminal/components/SnippetEditorDialog.vue
new file mode 100644
index 0000000..07ddbc9
--- /dev/null
+++ b/src/modules/terminal/components/SnippetEditorDialog.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+/**
+ * 命令片段的编辑对话框（新建 / 编辑共用）。
+ *
+ * # 为什么从列表里拆出来
+ *
+ * 片段的编辑表单有七个字段（名称、命令、说明、分组、适用 shell、三个开关），
+ * 外加一段「危险命令」的说明块。它此前是片段页右栏的常态视图，占了半屏；
+ * 现在片段列表搬进控制栏的 popover（宽 400px），表单再内联进去就没法用了。
+ * 拆成对话框后，popover 保持「列表 + 取用」的单一职责，表单按需弹出。
+ *
+ * # 校验放在提交时而不是输入时
+ *
+ * 与项目里其它表单一致：失焦/输入时就报红会在用户还没填完时不断报错。
+ * 这里只拦两件真正会导致保存失败的事（名称为空、命令为空），
+ * 其余交给后端（`save_snippet`）。
+ */
+import { ref, watch } from 'vue'
+import { ShieldAlert } from '@lucide/vue'
+import { toast } from 'vue-sonner'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Checkbox } from '@/components/ui/checkbox'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import type { CommandSnippet } from '@/types/terminal'
+
+const props = defineProps<{
+  open: boolean
+  /** 待编辑的片段（null = 新建） */
+  snippet: CommandSnippet | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', v: boolean): void
+  /** 保存成功，把名称交回去供列表定位到该条 */
+  (e: 'saved', name: string): void
+}>()
+
+const store = useTerminalStore()
+
+const draft = ref<CommandSnippet | null>(null)
+const saving = ref(false)
+
+function blank(): CommandSnippet {
+  return {
+    id: '',
+    name: '',
+    command: '',
+    description: '',
+    group: '',
+    defaults: {},
+    shellKinds: [],
+    sshOnly: false,
+    confirm: false,
+    pinned: false,
+    createdAt: 0
+  }
+}
+
+/**
+ * 打开时才准备草稿：对话框关闭期间不保留半填的表单，
+ * 每次打开要么是「编辑某条」（从入参深拷贝，改动不污染列表）要么是空白新建。
+ */
+watch(
+  () => [props.open, props.snippet] as const,
+  ([open]) => {
+    if (!open) return
+    draft.value = props.snippet
+      ? { ...props.snippet, defaults: { ...props.snippet.defaults }, shellKinds: [...props.snippet.shellKinds] }
+      : blank()
+  },
+  { immediate: true }
+)
+
+async function submit() {
+  const d = draft.value
+  if (!d) return
+  if (!d.name.trim()) {
+    toast.error('名称不能为空')
+    return
+  }
+  if (!d.command.trim()) {
+    toast.error('命令内容不能为空')
+    return
+  }
+  saving.value = true
+  try {
+    await store.saveSnippet({ ...d, name: d.name.trim() })
+    toast.success('已保存')
+    emit('saved', d.name.trim())
+    emit('update:open', false)
+  } catch (e) {
+    toast.error(`保存失败：${String(e)}`)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="v => emit('update:open', v)">
+    <DialogContent class="max-w-lg max-h-[85vh]">
+      <DialogHeader>
+        <DialogTitle>{{ snippet?.id ? '编辑片段' : '新建片段' }}</DialogTitle>
+        <DialogDescription class="text-xs">
+          命令里的 <span class="font-mono">${name}</span> 是占位符，取用时逐个填写；
+          需要字面量时写 <span class="font-mono">$${name}</span>。
+        </DialogDescription>
+      </DialogHeader>
+
+      <!-- 表单较长（七个字段 + 危险提示），用 ScrollArea 滚动（见 HostManager 同款说明） -->
+      <ScrollArea class="max-h-[60vh] pr-4">
+        <div v-if="draft" class="space-y-3">
+        <label class="block space-y-1">
+          <span class="text-[11px] text-muted-foreground">名称</span>
+          <Input v-model="draft.name" class="h-8 text-sm" placeholder="如：查找大文件" />
+        </label>
+
+        <label class="block space-y-1">
+          <span class="text-[11px] text-muted-foreground">命令</span>
+          <Textarea
+            v-model="draft.command"
+            class="min-h-16 text-xs font-mono"
+            placeholder="find ${dir} -type f -size +${size}"
+          />
+        </label>
+
+        <label class="block space-y-1">
+          <span class="text-[11px] text-muted-foreground">说明（讲清做什么、有什么前提）</span>
+          <Input v-model="draft.description" class="h-8 text-sm" />
+        </label>
+
+        <div class="grid grid-cols-2 gap-3">
+          <label class="block space-y-1">
+            <span class="text-[11px] text-muted-foreground">分组</span>
+            <Input v-model="draft.group" class="h-8 text-sm" placeholder="如：文件 / 运维" />
+          </label>
+          <label class="block space-y-1">
+            <span class="text-[11px] text-muted-foreground">适用 shell（逗号分隔，留空为全部）</span>
+            <Input
+              :model-value="draft.shellKinds.join(',')"
+              class="h-8 text-sm"
+              placeholder="powershell,bash"
+              @update:model-value="
+                v => draft && (draft.shellKinds = String(v).split(',').map(x => x.trim()).filter(Boolean))
+              "
+            />
+          </label>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-4 text-[11px]">
+          <label class="flex items-center gap-1.5 cursor-pointer select-none">
+            <Checkbox v-model="draft.sshOnly" />
+            仅 SSH 会话可用
+          </label>
+          <label class="flex items-center gap-1.5 cursor-pointer select-none">
+            <Checkbox v-model="draft.confirm" />
+            执行前需确认（危险命令）
+          </label>
+          <label class="flex items-center gap-1.5 cursor-pointer select-none">
+            <Checkbox v-model="draft.pinned" />
+            置顶
+          </label>
+        </div>
+
+        <div
+          v-if="draft.confirm"
+          class="flex items-start gap-2 p-2 rounded border border-destructive/40 bg-destructive/5"
+        >
+          <ShieldAlert class="size-3.5 text-destructive shrink-0 mt-0.5" />
+          <p class="text-[11px] text-muted-foreground leading-relaxed">
+            标记为「需确认」的片段默认只会**填入命令行**，不会自动执行 ——
+            用户需要自己按回车。这避免了参数误填时立刻造成破坏。
+          </p>
+        </div>
+        </div>
+      </ScrollArea>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" @click="emit('update:open', false)">取消</Button>
+        <Button size="sm" :disabled="saving" @click="submit">保存</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/SnippetPanel.vue b/src/modules/terminal/components/SnippetPanel.vue
deleted file mode 100644
index 58b9a45..0000000
--- a/src/modules/terminal/components/SnippetPanel.vue
+++ /dev/null
@@ -1,573 +0,0 @@
-<script setup lang="ts">
-/**
- * 命令片段面板（浮层）。
- *
- * # 交互模型：先填参数、再决定是否执行
- *
- * 带占位符的片段走「填写 → 预览 → 执行」三步。预览这一步不是装饰：
- * 用户能在这里看到**渲染后的真实命令**，而执行按钮分两个——
- * 「填入命令行」（不回车）与「直接执行」。危险片段（`confirm` 为 true）
- * 默认只做前者：让用户自己按回车，与命令被自动执行在心理上完全不同。
- *
- * # 为什么占位符列表来自后端
- *
- * 解析规则（`$${x}` 转义、`${VAR:-default}` 排除、名称字符集）由 Rust 的
- * `snippet_placeholders` 单独实现一份。前端若自己写正则，两边在边界情况上
- * 迟早分叉 —— 而「预览显示的命令」与「实际执行的命令」不一致是最坏的结果。
- */
-import { computed, ref } from 'vue'
-import { open as openDialog } from '@tauri-apps/plugin-dialog'
-import {
-  BookMarked,
-  Play,
-  Pin,
-  Plus,
-  RotateCcw,
-  Search,
-  ShieldAlert,
-  Terminal,
-  Trash2,
-  X
-} from '@lucide/vue'
-import { toast } from 'vue-sonner'
-import { useTerminalStore } from '@/stores/terminalStore'
-import { createLogger } from '@/lib/logger'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import type { CommandSnippet, SessionInfo, SnippetView } from '@/types/terminal'
-
-const props = defineProps<{
-  sessionId: string | null
-  session: SessionInfo | undefined
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const logger = createLogger('terminal')
-const store = useTerminalStore()
-
-const filter = ref('')
-const selected = ref<SnippetView | null>(null)
-
-/** 会话是 SSH 还是本地（决定哪些片段可见） */
-const sessionKind = computed<'local' | 'ssh'>(() => props.session?.kind ?? 'local')
-
-/** 本地会话对应的 shell kind（用于 `shellKinds` 过滤） */
-const shellKind = computed(() => store.shellOf(props.session)?.kind)
-
-/** 当前会话可用的片段 */
-const available = computed(() => store.snippetsForSession(sessionKind.value, shellKind.value))
-
-const filtered = computed(() => {
-  const kw = filter.value.trim().toLowerCase()
-  if (!kw) return available.value
-  return available.value.filter(
-    s =>
-      s.name.toLowerCase().includes(kw) ||
-      s.command.toLowerCase().includes(kw) ||
-      s.description.toLowerCase().includes(kw)
-  )
-})
-
-/** 按分组归类（保持 store 的排序：置顶优先 + 名称序） */
-const grouped = computed(() => {
-  const map = new Map<string, SnippetView[]>()
-  for (const s of filtered.value) {
-    const g = s.group.trim() || '未分组'
-    if (!map.has(g)) map.set(g, [])
-    map.get(g)!.push(s)
-  }
-  return [...map.entries()]
-})
-
-// ===== 参数填写 =====
-
-/** 占位符名 → 当前填写值 */
-const values = ref<Record<string, string>>({})
-
-/** 渲染后的命令（每次 preview 后更新） */
-const preview = ref('')
-const rendering = ref(false)
-
-function select(s: SnippetView) {
-  selected.value = s
-  preview.value = ''
-  // 预填默认值：大多数情况下用户只需要改其中一两个
-  const v: Record<string, string> = {}
-  for (const k of s.placeholders) v[k] = s.defaults[k] ?? ''
-  values.value = v
-}
-
-const missing = computed(() => {
-  const s = selected.value
-  if (!s) return []
-  return s.placeholders.filter(k => !(values.value[k] ?? '').trim())
-})
-
-async function doRender() {
-  const s = selected.value
-  if (!s) return
-  if (missing.value.length > 0) {
-    toast.error(`还有 ${missing.value.length} 个占位符未填写`)
-    return
-  }
-  rendering.value = true
-  try {
-    preview.value = await store.renderSnippet(s.id, values.value)
-  } catch (e) {
-    toast.error(String(e))
-    preview.value = ''
-  } finally {
-    rendering.value = false
-  }
-}
-
-/**
- * 执行片段。
- *
- * `submit = true` 直接回车执行；否则只写到命令行上。
- * 危险片段（`confirm`）在界面上不提供「直接执行」按钮，
- * 但这里仍做一层兜底——见下面对 `mustConfirm` 的判断。
- */
-async function run(submit: boolean) {
-  const s = selected.value
-  if (!s || !props.sessionId) {
-    toast.info('请先打开一个会话')
-    return
-  }
-  if (missing.value.length > 0) {
-    toast.error('请先填写全部占位符')
-    return
-  }
-  // 先确保预览与实际一致：渲染在命令层统一做，前端不自己拼
-  try {
-    const rendered = await store.renderSnippet(s.id, values.value)
-    preview.value = rendered
-  } catch (e) {
-    toast.error(String(e))
-    return
-  }
-
-  try {
-    const r = await store.runSnippet(props.sessionId, s.id, values.value, submit)
-    if (submit) toast.success(r.message)
-    else toast.info(r.message)
-  } catch (e) {
-    toast.error(`执行失败：${String(e)}`)
-  }
-}
-
-/** 危险片段强制执行一次确认（界面已限制，这是兜底） */
-function confirmThenRun() {
-  const s = selected.value
-  if (!s) return
-  if (s.confirm && !window.confirm(`「${s.name}」被标记为需要确认的命令，确定执行？`)) return
-  void run(true)
-}
-
-// ===== 编辑 =====
-
-const editing = ref(false)
-const draft = ref<CommandSnippet | null>(null)
-
-function newSnippet() {
-  draft.value = {
-    id: '',
-    name: '',
-    command: '',
-    description: '',
-    group: '',
-    defaults: {},
-    shellKinds: [],
-    sshOnly: false,
-    confirm: false,
-    pinned: false,
-    createdAt: 0
-  }
-  editing.value = true
-}
-
-function editSelected() {
-  const s = selected.value
-  if (!s) return
-  // 去掉后端附加的 placeholders 字段 —— 它不是 CommandSnippet 的一部分，
-  // 带着它回传会在 save 时触发未知字段告警（serde 默认忽略，但没必要）
-  const { placeholders: _p, ...rest } = s
-  draft.value = { ...rest }
-  editing.value = true
-}
-
-async function submitDraft() {
-  const d = draft.value
-  if (!d) return
-  if (!d.name.trim()) {
-    toast.error('名称不能为空')
-    return
-  }
-  if (!d.command.trim()) {
-    toast.error('命令内容不能为空')
-    return
-  }
-  try {
-    await store.saveSnippet(d)
-    editing.value = false
-    toast.success('已保存')
-    // 保存后刷新选中项（占位符可能变了）
-    const fresh = store.snippets.find(s => s.id === (d.id || store.snippets[store.snippets.length - 1]?.id))
-    if (fresh) select(fresh)
-  } catch (e) {
-    toast.error(`保存失败：${String(e)}`)
-  }
-}
-
-async function removeSelected() {
-  const s = selected.value
-  if (!s) return
-  if (!window.confirm(`确定删除片段「${s.name}」？`)) return
-  try {
-    await store.deleteSnippet(s.id)
-    selected.value = null
-    toast.success('已删除')
-  } catch (e) {
-    toast.error(`删除失败：${String(e)}`)
-  }
-}
-
-async function togglePin() {
-  const s = selected.value
-  if (!s) return
-  try {
-    const { placeholders: _p, ...rest } = s
-    await store.saveSnippet({ ...rest, pinned: !s.pinned })
-    const fresh = store.snippets.find(x => x.id === s.id)
-    if (fresh) select(fresh)
-  } catch (e) {
-    toast.error(`操作失败：${String(e)}`)
-  }
-}
-
-async function restoreDefaults() {
-  if (!window.confirm('将补回缺失的内置片段（不会覆盖你已有的条目），继续？')) return
-  try {
-    await store.restoreDefaultSnippets()
-    toast.success('已恢复内置片段')
-  } catch (e) {
-    toast.error(`恢复失败：${String(e)}`)
-  }
-}
-
-/** 从本地文件导入命令文本（省去逐字敲长命令） */
-async function importFromFile() {
-  try {
-    const picked = await openDialog({
-      multiple: false,
-      directory: false,
-      filters: [{ name: '文本/脚本', extensions: ['txt', 'sh', 'bash', 'zsh', 'ps1', 'cmd', 'bat'] }]
-    })
-    if (typeof picked !== 'string') return
-    // 前端不直接读文件（CSP 下 WebView 读本地文件受限），
-    // 让用户把内容粘进来 —— 这个流程在 P2 会改为走后端读文件。
-    draft.value = {
-      id: '',
-      name: picked.replace(/\\/g, '/').split('/').pop() ?? '导入的片段',
-      command: '',
-      description: `待粘贴内容（来源：${picked}）`,
-      group: '导入',
-      defaults: {},
-      shellKinds: [],
-      sshOnly: false,
-      confirm: true,
-      pinned: false,
-      createdAt: 0
-    }
-    editing.value = true
-    toast.info('请把命令内容粘贴到「命令」框中')
-    void logger
-  } catch (e) {
-    toast.error(`导入失败：${String(e)}`)
-  }
-}
-</script>
-
-<template>
-  <!-- 作为模块 Tab 内容渲染（根不再是全屏浮层） -->
-  <div class="flex flex-col h-full">
-    <!-- ===== 头部 ===== -->
-    <div class="shrink-0 flex items-center gap-2 px-3 h-9 border-b border-border">
-      <Button variant="ghost" size="sm" class="h-7 text-xs" @click="emit('close')">返回终端</Button>
-      <div class="w-px h-4 bg-border" />
-      <BookMarked class="size-3.5 text-muted-foreground" />
-      <span class="text-xs font-medium">命令片段</span>
-      <span class="text-[10px] text-muted-foreground">
-        {{ session ? `作用于 ${store.sessionLabel(session)}` : '未选择会话' }}
-      </span>
-      <div class="flex-1" />
-      <Button variant="outline" size="sm" class="h-7 text-xs gap-1.5" @click="importFromFile">
-        从文件导入
-      </Button>
-      <Button variant="outline" size="sm" class="h-7 text-xs gap-1.5" @click="restoreDefaults">
-        <RotateCcw class="size-3" />恢复内置
-      </Button>
-      <Button size="sm" class="h-7 text-xs gap-1.5" @click="newSnippet">
-        <Plus class="size-3" />新建片段
-      </Button>
-    </div>
-
-    <div class="flex-1 min-h-0 flex">
-      <!-- ===== 左：列表 ===== -->
-      <section class="w-[300px] shrink-0 border-r border-border flex flex-col">
-        <div class="shrink-0 p-2 border-b border-border">
-          <div class="relative">
-            <Search class="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground" />
-            <Input v-model="filter" placeholder="搜索片段…" class="h-7 pl-7 text-xs" />
-          </div>
-        </div>
-
-        <div class="flex-1 min-h-0 overflow-auto">
-          <div v-if="filtered.length === 0" class="p-4 text-center">
-            <p class="text-[11px] text-muted-foreground/70">
-              {{ available.length === 0 ? '当前会话没有可用的片段' : '无匹配项' }}
-            </p>
-          </div>
-          <template v-else>
-            <div v-for="[group, list] in grouped" :key="group">
-              <div class="px-2.5 py-1 text-[10px] font-medium text-muted-foreground bg-muted/40 sticky top-0">
-                {{ group }}
-              </div>
-              <button
-                v-for="s in list"
-                :key="s.id"
-                class="w-full text-left px-2.5 py-1.5 hover:bg-accent border-l-2 transition-colors"
-                :class="selected?.id === s.id ? 'bg-accent border-primary' : 'border-transparent'"
-                @click="select(s)"
-              >
-                <div class="flex items-center gap-1.5">
-                  <Pin v-if="s.pinned" class="size-2.5 text-amber-500 shrink-0" />
-                  <span class="text-[11px] font-medium truncate">{{ s.name }}</span>
-                  <ShieldAlert v-if="s.confirm" class="size-2.5 text-destructive shrink-0" />
-                </div>
-                <div class="text-[10px] text-muted-foreground truncate font-mono mt-0.5">
-                  {{ s.command }}
-                </div>
-              </button>
-            </div>
-          </template>
-        </div>
-      </section>
-
-      <!-- ===== 右：详情 / 参数填写 / 编辑 ===== -->
-      <section class="flex-1 min-w-0 flex flex-col overflow-auto">
-        <!-- ---------- 编辑态 ---------- -->
-        <div v-if="editing && draft" class="p-4 space-y-3 max-w-2xl">
-          <h3 class="text-sm font-medium">{{ draft.id ? '编辑片段' : '新建片段' }}</h3>
-
-          <label class="block space-y-1">
-            <span class="text-[11px] text-muted-foreground">名称</span>
-            <Input v-model="draft.name" class="h-7 text-xs" placeholder="如：查找大文件" />
-          </label>
-
-          <label class="block space-y-1">
-            <span class="text-[11px] text-muted-foreground">
-              命令（用 <code class="font-mono">${name}</code> 表示占位符；
-              需要字面量时写 <code class="font-mono">$${name}</code>）
-            </span>
-            <textarea
-              v-model="draft.command"
-              rows="3"
-              class="w-full px-2 py-1.5 rounded-md border border-border bg-transparent
-                     text-xs font-mono outline-none focus:border-primary/60 resize-y"
-              placeholder="find ${dir} -type f -size +${size}"
-            />
-          </label>
-
-          <label class="block space-y-1">
-            <span class="text-[11px] text-muted-foreground">说明（讲清做什么、有什么前提）</span>
-            <Input v-model="draft.description" class="h-7 text-xs" />
-          </label>
-
-          <div class="grid grid-cols-2 gap-3">
-            <label class="block space-y-1">
-              <span class="text-[11px] text-muted-foreground">分组</span>
-              <Input v-model="draft.group" class="h-7 text-xs" placeholder="如：文件 / 运维" />
-            </label>
-            <label class="block space-y-1">
-              <span class="text-[11px] text-muted-foreground">
-                适用 shell（逗号分隔，留空表示全部）
-              </span>
-              <Input
-                :model-value="draft.shellKinds.join(',')"
-                class="h-7 text-xs"
-                placeholder="powershell,bash"
-                @update:model-value="v => draft && (draft.shellKinds = String(v).split(',').map(x => x.trim()).filter(Boolean))"
-              />
-            </label>
-          </div>
-
-          <div class="flex items-center gap-4 text-[11px]">
-            <label class="flex items-center gap-1.5 cursor-pointer select-none">
-              <input v-model="draft.sshOnly" type="checkbox" class="size-3 accent-primary" />
-              仅 SSH 会话可用
-            </label>
-            <label class="flex items-center gap-1.5 cursor-pointer select-none">
-              <input v-model="draft.confirm" type="checkbox" class="size-3 accent-primary" />
-              执行前需确认（危险命令）
-            </label>
-            <label class="flex items-center gap-1.5 cursor-pointer select-none">
-              <input v-model="draft.pinned" type="checkbox" class="size-3 accent-primary" />
-              置顶
-            </label>
-          </div>
-
-          <div
-            v-if="draft.confirm"
-            class="flex items-start gap-2 p-2 rounded border border-destructive/40 bg-destructive/5"
-          >
-            <ShieldAlert class="size-3.5 text-destructive shrink-0 mt-0.5" />
-            <p class="text-[11px] text-muted-foreground leading-relaxed">
-              标记为「需确认」的片段默认只会**填入命令行**，不会自动执行 ——
-              用户需要自己按回车。这避免了参数误填时立刻造成破坏。
-            </p>
-          </div>
-
-          <div class="flex items-center gap-2 pt-1">
-            <Button size="sm" class="h-7 text-xs" @click="submitDraft">保存</Button>
-            <Button variant="outline" size="sm" class="h-7 text-xs" @click="editing = false">取消</Button>
-          </div>
-        </div>
-
-        <!-- ---------- 详情态 ---------- -->
-        <div v-else-if="selected" class="p-4 space-y-3 max-w-2xl">
-          <div class="flex items-center gap-2">
-            <h3 class="text-sm font-medium">{{ selected.name }}</h3>
-            <button
-              class="text-muted-foreground hover:text-foreground"
-              :title="selected.pinned ? '取消置顶' : '置顶'"
-              @click="togglePin"
-            >
-              <Pin class="size-3.5" :class="selected.pinned ? 'text-amber-500' : ''" />
-            </button>
-            <div class="flex-1" />
-            <Button variant="ghost" size="sm" class="h-6 text-[11px]" @click="editSelected">编辑</Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="h-6 text-[11px] text-destructive"
-              @click="removeSelected"
-            >
-              <Trash2 class="size-3" />
-            </Button>
-          </div>
-
-          <p v-if="selected.description" class="text-[11px] text-muted-foreground leading-relaxed">
-            {{ selected.description }}
-          </p>
-
-          <div class="rounded-md border border-border bg-muted/30 p-2">
-            <div class="text-[10px] text-muted-foreground mb-1">命令模板</div>
-            <pre class="text-[11px] font-mono whitespace-pre-wrap break-all">{{ selected.command }}</pre>
-          </div>
-
-          <!-- 占位符填写 -->
-          <div v-if="selected.placeholders.length > 0" class="space-y-2">
-            <div class="text-[11px] font-medium">参数</div>
-            <div
-              v-for="p in selected.placeholders"
-              :key="p"
-              class="flex items-center gap-2"
-            >
-              <span class="text-[11px] font-mono text-muted-foreground w-24 shrink-0 truncate" :title="p">
-                ${ {{ p }} }
-              </span>
-              <Input
-                v-model="values[p]"
-                class="h-7 text-xs font-mono flex-1"
-                :placeholder="selected.defaults[p] || '（必填）'"
-                @keydown.enter="doRender"
-              />
-            </div>
-          </div>
-
-          <!-- 预览 -->
-          <div class="space-y-1.5">
-            <div class="flex items-center gap-2">
-              <span class="text-[11px] font-medium">预览</span>
-              <Button
-                variant="outline"
-                size="sm"
-                class="h-6 text-[11px]"
-                :disabled="rendering"
-                @click="doRender"
-              >
-                生成预览
-              </Button>
-              <span v-if="missing.length > 0" class="text-[10px] text-amber-600">
-                还有 {{ missing.length }} 个未填写
-              </span>
-            </div>
-            <pre
-              v-if="preview"
-              class="rounded-md border border-border bg-muted/30 p-2 text-[11px] font-mono
-                     whitespace-pre-wrap break-all"
-            >{{ preview }}</pre>
-            <p v-else class="text-[11px] text-muted-foreground/60">点「生成预览」查看实际会执行的命令</p>
-          </div>
-
-          <!-- 执行 -->
-          <div class="flex items-center gap-2 pt-1">
-            <Button
-              variant="outline"
-              size="sm"
-              class="h-7 text-xs gap-1.5"
-              :disabled="!sessionId"
-              @click="run(false)"
-            >
-              <Terminal class="size-3" />填入命令行
-            </Button>
-            <Button
-              size="sm"
-              class="h-7 text-xs gap-1.5"
-              :disabled="!sessionId || selected.confirm"
-              :title="selected.confirm ? '该片段被标记为需确认，请用「确认并执行」' : ''"
-              @click="run(true)"
-            >
-              <Play class="size-3" />直接执行
-            </Button>
-            <Button
-              v-if="selected.confirm"
-              variant="destructive"
-              size="sm"
-              class="h-7 text-xs gap-1.5"
-              :disabled="!sessionId"
-              @click="confirmThenRun"
-            >
-              <ShieldAlert class="size-3" />确认并执行
-            </Button>
-          </div>
-        </div>
-
-        <!-- ---------- 空态 ---------- -->
-        <div v-else class="flex-1 flex items-center justify-center">
-          <div class="text-center">
-            <BookMarked class="size-10 text-muted-foreground/20 mx-auto mb-3" />
-            <p class="text-xs text-muted-foreground mb-1">从左侧选择一个片段</p>
-            <p class="text-[11px] text-muted-foreground/60">
-              或点「新建片段」加入自己的常用命令
-            </p>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <!-- 悬浮关闭按钮（右上角已有「返回终端」，这里给键盘外的第二入口） -->
-    <button
-      class="absolute top-2 right-2 size-6 rounded flex items-center justify-center
-             text-muted-foreground hover:text-foreground"
-      title="关闭"
-      @click="emit('close')"
-    >
-      <X class="size-3.5" />
-    </button>
-  </div>
-</template>
diff --git a/src/modules/terminal/components/SnippetPopover.vue b/src/modules/terminal/components/SnippetPopover.vue
new file mode 100644
index 0000000..822d002
--- /dev/null
+++ b/src/modules/terminal/components/SnippetPopover.vue
@@ -0,0 +1,542 @@
+<script setup lang="ts">
+/**
+ * 命令片段 popover（终端页控制栏的「片段」按钮）。
+ *
+ * # 这个组件是「按钮 + 浮层」的整体
+ *
+ * 触发器、浮层内容、快捷键用的开合状态，以及编辑对话框都封在这里，控制栏只摆
+ * 一个标签。编辑对话框是 `<Popover>` 的**兄弟节点**而非内容的一部分 ——
+ * 浮层会因外部交互收起，挂在内容子树里的对话框会被一起卸载
+ * （表现是「点新建片段，窗口闪一下就没了」）。
+ *
+ * # 两个视图：列表 → 详情
+ *
+ * 浮层只有 420px 宽，放不下「左列表 + 右详情」的双栏（旧片段页用的就是双栏）。
+ * 改成两级：列表按分组列出可用片段，点一条进入详情（占位符填写 → 预览 → 填入/执行），
+ * 左上角返回。这不是功能删减 —— 详情里该有的都在，只是把并排改成了先后。
+ *
+ * # 占位符与预览的三步为什么保留
+ *
+ * 预览这一步不是装饰：用户在这里看到的必须是**实际会执行的命令**。渲染规则
+ * （`$${x}` 转义、`${VAR:-default}` 排除、名称字符集）由后端 `snippet_placeholders`
+ * 与 `terminal_render_snippet` 实现，前端不自己拼字符串 —— 「预览的命令」与
+ * 「执行的命令」不一致是最坏的结果。
+ *
+ * # 危险片段（`confirm`）
+ *
+ * 标记了「需确认」的片段界面上不提供「直接执行」按钮，只有「填入命令行」与
+ * 「确认并执行」（后者再弹一次 `window.confirm` 兜底）。让用户自己按回车，
+ * 与命令被自动执行在心理上完全不同。
+ *
+ * # 编辑走对话框
+ *
+ * 表单（七个字段 + 危险提示）在 `SnippetEditorDialog` 里，本组件只负责列表与
+ * 取用，以及「新建 / 编辑 / 恢复内置 / 导入」四个入口的分发。
+ */
+import { computed, ref } from 'vue'
+import { open as openDialog } from '@tauri-apps/plugin-dialog'
+import {
+  ArrowLeft,
+  BookMarked,
+  Pencil,
+  Pin,
+  Play,
+  Plus,
+  RotateCcw,
+  Search,
+  ShieldAlert,
+  Terminal,
+  Trash2
+} from '@lucide/vue'
+import { toast } from 'vue-sonner'
+import { useTerminalStore } from '@/stores/terminalStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import SnippetEditorDialog from './SnippetEditorDialog.vue'
+import { snippetsPopoverOpen, toggleSnippetsPopover } from '../useRecordPopovers'
+import type { CommandSnippet, SessionInfo, SnippetView } from '@/types/terminal'
+
+const props = defineProps<{
+  /** 当前会话（片段按它的类型过滤；执行也落到它身上） */
+  sessionId: string | null
+  session: SessionInfo | undefined
+}>()
+
+const store = useTerminalStore()
+
+// ===== 列表 =====
+
+const filter = ref('')
+const selected = ref<SnippetView | null>(null)
+
+/** 会话是 SSH 还是本地（决定哪些片段可见） */
+const sessionKind = computed<'local' | 'ssh'>(() => props.session?.kind ?? 'local')
+/** 本地会话对应的 shell kind（用于 `shellKinds` 过滤） */
+const shellKind = computed(() => store.shellOf(props.session)?.kind)
+
+const available = computed(() => store.snippetsForSession(sessionKind.value, shellKind.value))
+
+const filtered = computed(() => {
+  const kw = filter.value.trim().toLowerCase()
+  if (!kw) return available.value
+  return available.value.filter(
+    s =>
+      s.name.toLowerCase().includes(kw) ||
+      s.command.toLowerCase().includes(kw) ||
+      s.description.toLowerCase().includes(kw)
+  )
+})
+
+/** 按分组归类（保持 store 的排序：置顶优先 + 名称序） */
+const grouped = computed(() => {
+  const map = new Map<string, SnippetView[]>()
+  for (const s of filtered.value) {
+    const g = s.group.trim() || '未分组'
+    if (!map.has(g)) map.set(g, [])
+    map.get(g)!.push(s)
+  }
+  return [...map.entries()]
+})
+
+// ===== 详情：参数填写与预览 =====
+
+/** 占位符名 → 当前填写值 */
+const values = ref<Record<string, string>>({})
+/** 渲染后的命令（每次预览/执行前刷新） */
+const preview = ref('')
+const rendering = ref(false)
+
+function select(s: SnippetView) {
+  selected.value = s
+  preview.value = ''
+  // 预填默认值：大多数情况下用户只需要改其中一两个
+  const v: Record<string, string> = {}
+  for (const k of s.placeholders) v[k] = s.defaults[k] ?? ''
+  values.value = v
+}
+
+/** 未填写的占位符（决定预览与执行是否放行） */
+const missing = computed(() => {
+  const s = selected.value
+  if (!s) return []
+  return s.placeholders.filter(k => !(values.value[k] ?? '').trim())
+})
+
+async function doRender() {
+  const s = selected.value
+  if (!s) return
+  if (missing.value.length > 0) {
+    toast.error(`还有 ${missing.value.length} 个占位符未填写`)
+    return
+  }
+  rendering.value = true
+  try {
+    preview.value = await store.renderSnippet(s.id, values.value)
+  } catch (e) {
+    toast.error(String(e))
+    preview.value = ''
+  } finally {
+    rendering.value = false
+  }
+}
+
+/**
+ * 取用片段。
+ *
+ * `submit = false` 只写到命令行上；两种结果都收起浮层 —— 用户的下一步都在终端里
+ * （自己按回车，或看输出），浮层挡着没有价值。
+ */
+async function run(submit: boolean) {
+  const s = selected.value
+  if (!s || !props.sessionId) {
+    toast.info('请先打开一个会话')
+    return
+  }
+  if (missing.value.length > 0) {
+    toast.error('请先填写全部占位符')
+    return
+  }
+  // 先确保预览与实际一致：渲染统一交给后端
+  try {
+    preview.value = await store.renderSnippet(s.id, values.value)
+  } catch (e) {
+    toast.error(String(e))
+    return
+  }
+
+  try {
+    const r = await store.runSnippet(props.sessionId, s.id, values.value, submit)
+    if (submit) toast.success(r.message)
+    else toast.info(r.message)
+    toggleSnippetsPopover(false)
+  } catch (e) {
+    toast.error(`执行失败：${String(e)}`)
+  }
+}
+
+/** 危险片段强制执行一次确认（界面已限制，这是兜底） */
+function confirmThenRun() {
+  const s = selected.value
+  if (!s) return
+  if (s.confirm && !window.confirm(`「${s.name}」被标记为需要确认的命令，确定执行？`)) return
+  void run(true)
+}
+
+// ===== 片段维护（新建 / 编辑 / 置顶 / 删除 / 恢复内置 / 导入） =====
+
+const editorOpen = ref(false)
+/** 待编辑的片段（null = 新建） */
+const editing = ref<CommandSnippet | null>(null)
+
+function newSnippet() {
+  editing.value = null
+  editorOpen.value = true
+}
+
+function editSelected() {
+  const s = selected.value
+  if (!s) return
+  // 去掉后端附加的 placeholders 字段 —— 它不是 CommandSnippet 的一部分，
+  // 带着它回传会在 save 时触发未知字段告警（serde 默认忽略，但没必要）
+  const { placeholders: _p, ...rest } = s
+  editing.value = { ...rest }
+  editorOpen.value = true
+}
+
+/**
+ * 保存后刷新选中项：占位符可能变了，详情视图必须跟着变。
+ * 按名称定位（新建时后端会分配 id，前端拿不到，只能靠刚提交的名称找）；
+ * 找不到则退回列表 —— 至少不会停在一条已经不存在的数据上。
+ */
+function onSaved(name: string) {
+  const fresh = store.snippets.find(s => s.name === name)
+  if (fresh) select(fresh)
+  else selected.value = null
+}
+
+async function togglePin() {
+  const s = selected.value
+  if (!s) return
+  try {
+    const { placeholders: _p, ...rest } = s
+    await store.saveSnippet({ ...rest, pinned: !s.pinned })
+    const fresh = store.snippets.find(x => x.id === s.id)
+    if (fresh) select(fresh)
+  } catch (e) {
+    toast.error(`操作失败：${String(e)}`)
+  }
+}
+
+async function removeSelected() {
+  const s = selected.value
+  if (!s) return
+  if (!window.confirm(`确定删除片段「${s.name}」？`)) return
+  try {
+    await store.deleteSnippet(s.id)
+    // 删除后回到列表：详情视图已经指向一条不存在的片段
+    selected.value = null
+    toast.success('已删除')
+  } catch (e) {
+    toast.error(`删除失败：${String(e)}`)
+  }
+}
+
+async function restoreDefaults() {
+  if (!window.confirm('将补回缺失的内置片段（不会覆盖你已有的条目），继续？')) return
+  try {
+    await store.restoreDefaultSnippets()
+    toast.success('已恢复内置片段')
+  } catch (e) {
+    toast.error(`恢复失败：${String(e)}`)
+  }
+}
+
+/**
+ * 从本地文件导入命令文本（省去逐字敲长命令）。
+ *
+ * 前端不直接读文件（CSP 下 WebView 读本地文件受限），只把**文件名**作为初值
+ * 填进新建表单，由用户把内容粘进来。
+ */
+async function importFromFile() {
+  try {
+    const picked = await openDialog({
+      multiple: false,
+      directory: false,
+      filters: [{ name: '文本/脚本', extensions: ['txt', 'sh', 'bash', 'zsh', 'ps1', 'cmd', 'bat'] }]
+    })
+    if (typeof picked !== 'string') return
+    editing.value = {
+      id: '',
+      name: picked.replace(/\\/g, '/').split('/').pop() ?? '导入的片段',
+      command: '',
+      description: `待粘贴内容（来源：${picked}）`,
+      group: '导入',
+      defaults: {},
+      shellKinds: [],
+      sshOnly: false,
+      confirm: true,
+      pinned: false,
+      createdAt: 0
+    }
+    editorOpen.value = true
+    toast.info('请把命令内容粘贴到「命令」框中')
+  } catch (e) {
+    toast.error(`导入失败：${String(e)}`)
+  }
+}
+
+/** 底部提示按视图切换（列表：怎么取用；详情：预览的可靠性） */
+const hint = computed(() =>
+  selected.value
+    ? '预览与实际执行的是同一条命令（由后端渲染）'
+    : '点条目进入详情，可填参数、预览并填入命令行'
+)
+</script>
+
+<template>
+  <!--
+    触发器 + 浮层一体（与 HistoryPopover 同款结构）。Tooltip 锚在包裹 div 上、
+    Popover 在自己的子树里用 as-child；浮层展开期间禁用提示，避免提示压在内容上。
+  -->
+  <Tooltip :disabled="snippetsPopoverOpen">
+    <TooltipTrigger as-child>
+      <div class="inline-flex shrink-0">
+        <Popover v-model:open="snippetsPopoverOpen">
+          <PopoverTrigger as-child>
+            <Button variant="ghost" size="icon-sm" class="shrink-0">
+              <BookMarked class="size-3.5" />
+            </Button>
+          </PopoverTrigger>
+
+          <!-- 内容自带内边距：让开 popover 默认的 w-72 / p-4 -->
+          <PopoverContent align="start" class="w-auto p-0">
+            <div class="w-[420px]">
+              <!-- ========== 列表视图 ========== -->
+              <template v-if="!selected">
+                <div class="flex items-center gap-2 p-2.5 border-b border-border">
+                  <div class="relative flex-1 min-w-0">
+                    <Search
+                      class="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+                    />
+                    <Input v-model="filter" placeholder="搜索片段…" class="h-7 pl-7 text-xs" autofocus />
+                  </div>
+                  <span class="shrink-0 text-[10px] text-muted-foreground">
+                    {{ session ? store.sessionLabel(session) : '未选择会话' }}
+                  </span>
+                </div>
+
+                <ScrollArea class="h-[320px]">
+                  <div v-if="filtered.length === 0" class="p-4 text-center">
+                    <p class="text-[11px] text-muted-foreground/70">
+                      {{ available.length === 0 ? '当前会话没有可用的片段' : '无匹配项' }}
+                    </p>
+                  </div>
+                  <template v-else>
+                    <div v-for="[group, list] in grouped" :key="group">
+                      <div
+                        class="px-2.5 py-1 text-[10px] font-medium text-muted-foreground bg-muted/40 sticky top-0"
+                      >
+                        {{ group }}
+                      </div>
+                      <button
+                        v-for="s in list"
+                        :key="s.id"
+                        class="w-full text-left px-2.5 py-1.5 hover:bg-accent border-l-2 border-transparent transition-colors"
+                        @click="select(s)"
+                      >
+                        <div class="flex items-center gap-1.5">
+                          <Pin v-if="s.pinned" class="size-2.5 text-warning shrink-0" />
+                          <span class="text-[11px] font-medium truncate">{{ s.name }}</span>
+                          <ShieldAlert v-if="s.confirm" class="size-2.5 text-destructive shrink-0" />
+                        </div>
+                        <div class="text-[10px] text-muted-foreground truncate font-mono mt-0.5">
+                          {{ s.command }}
+                        </div>
+                      </button>
+                    </div>
+                  </template>
+                </ScrollArea>
+
+                <div class="flex items-center gap-1 px-2.5 py-1.5 border-t border-border">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-6 px-1.5 text-[11px] text-muted-foreground"
+                    @click="importFromFile"
+                  >
+                    <BookMarked class="size-3" />从文件导入
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-6 px-1.5 text-[11px] text-muted-foreground"
+                    @click="restoreDefaults"
+                  >
+                    <RotateCcw class="size-3" />恢复内置
+                  </Button>
+                  <div class="flex-1" />
+                  <Button size="sm" class="h-6 px-2 text-[11px]" @click="newSnippet">
+                    <Plus class="size-3" />新建片段
+                  </Button>
+                </div>
+              </template>
+
+              <!-- ========== 详情视图 ========== -->
+              <template v-else>
+                <div class="flex items-center gap-1.5 p-2.5 border-b border-border">
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    class="size-6 shrink-0"
+                    title="返回列表"
+                    @click="selected = null"
+                  >
+                    <ArrowLeft class="size-3.5" />
+                  </Button>
+                  <span class="text-xs font-medium truncate">{{ selected.name }}</span>
+                  <button
+                    class="shrink-0 text-muted-foreground hover:text-warning"
+                    :title="selected.pinned ? '取消置顶' : '置顶'"
+                    @click="togglePin"
+                  >
+                    <Pin class="size-3.5" :class="selected.pinned ? 'text-warning' : ''" />
+                  </button>
+                  <div class="flex-1" />
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    class="size-6"
+                    title="编辑"
+                    @click="editSelected"
+                  >
+                    <Pencil class="size-3" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    class="size-6 text-muted-foreground hover:text-destructive"
+                    title="删除片段"
+                    @click="removeSelected"
+                  >
+                    <Trash2 class="size-3" />
+                  </Button>
+                </div>
+
+                <ScrollArea class="h-[320px]">
+                  <div class="p-3 space-y-3">
+                    <p
+                      v-if="selected.description"
+                      class="text-[11px] text-muted-foreground leading-relaxed"
+                    >
+                      {{ selected.description }}
+                    </p>
+
+                    <div class="rounded-md border border-border bg-muted/30 p-2">
+                      <div class="text-[10px] text-muted-foreground mb-1">命令模板</div>
+                      <pre class="text-[11px] font-mono whitespace-pre-wrap break-all">{{
+                        selected.command
+                      }}</pre>
+                    </div>
+
+                    <!-- 占位符填写 -->
+                    <div v-if="selected.placeholders.length > 0" class="space-y-2">
+                      <div class="text-[11px] font-medium">参数</div>
+                      <div v-for="p in selected.placeholders" :key="p" class="flex items-center gap-2">
+                        <span
+                          class="text-[11px] font-mono text-muted-foreground w-24 shrink-0 truncate"
+                          :title="p"
+                        >
+                          ${ {{ p }} }
+                        </span>
+                        <Input
+                          v-model="values[p]"
+                          class="h-7 text-xs font-mono flex-1"
+                          :placeholder="selected.defaults[p] || '（必填）'"
+                          @keydown.enter="doRender"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- 预览 -->
+                    <div class="space-y-1.5">
+                      <div class="flex items-center gap-2">
+                        <span class="text-[11px] font-medium">预览</span>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          class="h-6 px-2 text-[11px]"
+                          :disabled="rendering"
+                          @click="doRender"
+                        >
+                          生成预览
+                        </Button>
+                        <span v-if="missing.length > 0" class="text-[10px] text-warning">
+                          还有 {{ missing.length }} 个未填写
+                        </span>
+                      </div>
+                      <pre
+                        v-if="preview"
+                        class="rounded-md border border-border bg-muted/30 p-2 text-[11px] font-mono
+                               whitespace-pre-wrap break-all"
+                      >{{ preview }}</pre>
+                      <p v-else class="text-[11px] text-muted-foreground/60">
+                        点「生成预览」查看实际会执行的命令
+                      </p>
+                    </div>
+                  </div>
+                </ScrollArea>
+
+                <div class="flex items-center gap-1.5 p-2.5 border-t border-border">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    class="h-7 text-xs gap-1.5"
+                    :disabled="!sessionId"
+                    @click="run(false)"
+                  >
+                    <Terminal class="size-3" />填入命令行
+                  </Button>
+                  <Button
+                    size="sm"
+                    class="h-7 text-xs gap-1.5"
+                    :disabled="!sessionId || selected.confirm"
+                    :title="selected.confirm ? '该片段被标记为需确认，请用「确认并执行」' : ''"
+                    @click="run(true)"
+                  >
+                    <Play class="size-3" />直接执行
+                  </Button>
+                  <Button
+                    v-if="selected.confirm"
+                    variant="destructive"
+                    size="sm"
+                    class="h-7 text-xs gap-1.5"
+                    :disabled="!sessionId"
+                    @click="confirmThenRun"
+                  >
+                    <ShieldAlert class="size-3" />确认并执行
+                  </Button>
+                </div>
+              </template>
+
+              <!-- 底部提示：两种视图各一句，说明当前视图下最需要知道的事 -->
+              <div class="px-2.5 pb-2 text-[10px] text-muted-foreground/70 truncate">
+                {{ hint }}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </TooltipTrigger>
+    <TooltipContent side="bottom">命令片段（Ctrl+Shift+S）</TooltipContent>
+  </Tooltip>
+
+  <!--
+    编辑对话框是 `<Popover>` 的**兄弟节点**，不在浮层内容里：
+    浮层会因外部交互收起，若对话框挂在内容子树里，收起时会把它一起卸载 ——
+    表现是「点新建片段，窗口闪一下就没了」。放在同级，浮层开合与对话框无关。
+  -->
+  <SnippetEditorDialog v-model:open="editorOpen" :snippet="editing" @saved="onSaved" />
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/TemplatePanel.vue b/src/modules/terminal/components/TemplatePanel.vue
index 3514228..7b62669 100644
--- a/src/modules/terminal/components/TemplatePanel.vue
+++ b/src/modules/terminal/components/TemplatePanel.vue
@@ -22,6 +22,7 @@ import { useTerminalStore } from '@/stores/terminalStore'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Dialog,
   DialogContent,
@@ -41,7 +42,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'update:open', v: boolean): void
-  /** 用户点击「拉起」：交出模板，由 TerminalModule 执行开会话 + 布局 */
+  /** 用户点击「拉起」：交出模板，由 TerminalWorkspace 执行开会话 + 布局 */
   (e: 'apply', template: SessionTemplate): void
 }>()
 
@@ -123,7 +124,7 @@ function entryLabel(t: SessionTemplate): string {
 
 <template>
   <Dialog :open="open" @update:open="v => emit('update:open', v)">
-    <DialogContent class="max-w-lg">
+    <DialogContent class="max-w-lg max-h-[85vh]">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2 text-base">
           <LayoutTemplate class="size-4" />会话模板
@@ -133,7 +134,8 @@ function entryLabel(t: SessionTemplate): string {
         </DialogDescription>
       </DialogHeader>
 
-      <!-- ===== 模板列表 ===== -->
+      <!-- ===== 模板列表（条数不限，限高滚动） ===== -->
+      <ScrollArea class="max-h-[45vh] pr-3">
       <div class="space-y-1.5 min-h-[60px]">
         <p v-if="templates.length === 0" class="text-xs text-muted-foreground">
           还没有模板。先摆好想要的分屏布局，然后在下方保存为模板。
@@ -161,6 +163,7 @@ function entryLabel(t: SessionTemplate): string {
           </Button>
         </div>
       </div>
+      </ScrollArea>
 
       <!-- ===== 保存当前布局 ===== -->
       <div class="space-y-2 rounded-md border border-border p-3">
diff --git a/src/modules/terminal/components/TerminalContextMenu.vue b/src/modules/terminal/components/TerminalContextMenu.vue
new file mode 100644
index 0000000..16c9b46
--- /dev/null
+++ b/src/modules/terminal/components/TerminalContextMenu.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * 会话画布的右键菜单。
+ *
+ * 抽成组件是因为有**两个宿主**：终端页（`TerminalWorkspace`，多标签 / 分屏）与
+ * 终端独立窗口（`TerminalWindow`，单会话）。此前菜单只是终端页里的一段内联标记，
+ * 独立窗口没有它 —— 而 `main.ts` 全局 `preventDefault` 掉了浏览器原生右键菜单，
+ * 于是独立窗口里右键**完全没反应**。菜单外观与条目现在只有这一份，
+ * 新增条目不会再漏掉某个宿主。
+ *
+ * 动作本身仍由各自宿主执行（独立窗口没有标签栏，动作实现不同）。
+ */
+withDefaults(
+  defineProps<{
+    /** 右键位置（视口坐标） */
+    x: number
+    y: number
+    /** 右键的会话是否有选区（决定「复制」是否可用） */
+    canCopy: boolean
+    /** 「重命名」条目的文案：终端页叫「重命名标签」，独立窗口叫「重命名会话」 */
+    renameLabel?: string
+  }>(),
+  { renameLabel: '重命名标签' }
+)
+
+const emit = defineEmits<{
+  copy: []
+  paste: []
+  'select-all': []
+  clear: []
+  rename: []
+  close: []
+}>()
+</script>
+
+<template>
+  <div
+    class="fixed z-50 min-w-[168px] py-1 rounded-md border border-border bg-popover shadow-lg text-xs"
+    :style="{ left: `${x}px`, top: `${y}px` }"
+    @click.stop
+  >
+    <button
+      class="w-full px-3 py-1.5 text-left hover:bg-accent flex items-center justify-between
+             disabled:opacity-40 disabled:pointer-events-none"
+      :disabled="!canCopy"
+      @click="emit('copy')"
+    >
+      复制
+      <span class="text-muted-foreground text-[10px] font-mono">Ctrl+Shift+C</span>
+    </button>
+    <button
+      class="w-full px-3 py-1.5 text-left hover:bg-accent flex items-center justify-between"
+      @click="emit('paste')"
+    >
+      粘贴
+      <span class="text-muted-foreground text-[10px] font-mono">Ctrl+Shift+V</span>
+    </button>
+    <button class="w-full px-3 py-1.5 text-left hover:bg-accent" @click="emit('select-all')">全选</button>
+    <div class="my-1 h-px bg-border" />
+    <button class="w-full px-3 py-1.5 text-left hover:bg-accent" @click="emit('clear')">清屏</button>
+    <button class="w-full px-3 py-1.5 text-left hover:bg-accent" @click="emit('rename')">
+      {{ renameLabel }}
+    </button>
+    <div class="my-1 h-px bg-border" />
+    <button
+      class="w-full px-3 py-1.5 text-left hover:bg-accent text-destructive"
+      @click="emit('close')"
+    >
+      关闭会话
+    </button>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/TerminalPane.vue b/src/modules/terminal/components/TerminalPane.vue
index b6bcbd3..46ad44d 100644
--- a/src/modules/terminal/components/TerminalPane.vue
+++ b/src/modules/terminal/components/TerminalPane.vue
@@ -12,9 +12,11 @@
  * 或 shell 自己退出。把组件生命周期与会话生命周期绑定，会导致切标签就断连。
  */
 import { computed, onMounted, ref, toRef, watch, nextTick } from 'vue'
+import { toast } from 'vue-sonner'
 import { useTerminalStore } from '@/stores/terminalStore'
 import { useXterm } from '@/composables/useXterm'
-import { resolveTheme } from '@/lib/terminalThemes'
+import { resolveTheme, themeWithOpacity } from '@/lib/terminalThemes'
+import { StatusBadge } from '@/components/common'
 import type { AppearanceSettings } from '@/types/terminal'
 
 const props = defineProps<{
@@ -94,24 +96,71 @@ function onContextMenu(e: MouseEvent) {
   emit('contextmenu', { sessionId: props.sessionId, x: e.clientX, y: e.clientY })
 }
 
-/** 状态徽标文案与配色 */
-const stateBadge = computed(() => {
+/** 选中行为设置（copyOnSelect / middleClickPaste / trimTrailingNewline） */
+const behavior = computed(() => store.settings?.selection ?? null)
+
+/**
+ * 中键粘贴（X11 习惯，默认关）。
+ *
+ * 两个动作缺一不可：
+ * - `preventDefault()`：Chromium/Windows 下中键会进入「自动滚动」模式
+ *   （屏幕上冒出滚动圆点），不阻止的话一按中键页面就进入滚动状态；
+ * - 捕获阶段 `stopPropagation()`：让 xterm 完全看不到这次中键 ——
+ *   它的鼠标状态机（选区辅助逻辑）与未知的按键处理不该被一次粘贴搅动。
+ *
+ * 因为事件在捕获阶段就被吞掉，冒泡阶段的 `onMouseDown` 不会触发，
+ * 焦点得自己 emit（粘贴的目标是「发出中键的那块面板」）。
+ */
+function onMiddleDown(e: MouseEvent) {
+  if (!(behavior.value?.middleClickPaste ?? false)) return
+  if (isReadonly.value) return
+  e.preventDefault()
+  e.stopPropagation()
+  // 捕获阶段吞掉后，冒泡阶段的 onMouseDown 不会再触发 → 焦点得自己给
+  emit('focus', props.sessionId)
+  void navigator.clipboard
+    .readText()
+    .then(text => (text ? store.write(props.sessionId, text) : undefined))
+    .catch(e => toast.error(`粘贴失败：${String(e)}`))
+}
+
+/**
+ * 选中即复制（X11 习惯，默认关）。
+ *
+ * 放在 mouseup 而不是 `onSelectionChange`：后者在拖动过程中每次都触发，
+ * 会把整个拖选过程切成几十次剪贴板写入（既卡顿又污染剪贴板历史）；
+ * 松开鼠标才是「选完了」这一意图的终点。
+ *
+ * 只认左键：中键有粘贴、右键有菜单，各自有专门路径。
+ */
+function onMouseUp(e: MouseEvent) {
+  if (e.button !== 0) return
+  if (!(behavior.value?.copyOnSelect ?? false)) return
+  const text = getSelection()
+  if (!text) return
+  const trim = behavior.value?.trimTrailingNewline ?? true
+  const payload = trim && text.endsWith('\n') ? text.replace(/\n+$/, '') : text
+  void navigator.clipboard.writeText(payload).catch(err => toast.error(`复制失败：${String(err)}`))
+}
+
+/** 状态徽标文案与语义色（底色/文字由 StatusBadge 按 variant 取 token） */
+const stateBadge = computed<{ text: string; variant: 'success' | 'warning' | 'danger' | 'neutral' }>(() => {
   const s = sessionInfo.value?.state
   switch (s) {
     case 'connecting':
-      return { text: '连接中', cls: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }
+      return { text: '连接中', variant: 'warning' }
     case 'authenticating':
-      return { text: '认证中', cls: 'bg-amber-500/15 text-amber-600 dark:text-amber-400' }
+      return { text: '认证中', variant: 'warning' }
     case 'established':
-      return { text: '已连接', cls: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' }
+      return { text: '已连接', variant: 'success' }
     case 'degraded':
-      return { text: '不稳定', cls: 'bg-orange-500/15 text-orange-600 dark:text-orange-400' }
+      return { text: '不稳定', variant: 'warning' }
     case 'closed':
-      return { text: '已结束', cls: 'bg-muted text-muted-foreground' }
+      return { text: '已结束', variant: 'neutral' }
     case 'failed':
-      return { text: '失败', cls: 'bg-red-500/15 text-red-600 dark:text-red-400' }
+      return { text: '失败', variant: 'danger' }
     default:
-      return { text: '空闲', cls: 'bg-muted text-muted-foreground' }
+      return { text: '空闲', variant: 'neutral' }
   }
 })
 
@@ -127,7 +176,12 @@ const errorText = computed(() => sessionInfo.value?.error ?? '')
  * 露出的部分与屏幕同色，视觉上无缝。
  */
 const paneBackground = computed(() => {
-  const theme = resolveTheme(props.appearance?.theme ?? 'vscode-dark')
+  // 带上「背景不透明度」：否则终端屏幕半透明、而容器底色不透明，
+  // xterm 四周那几像素取整边缘会变成一圈明显更实的底色。
+  const theme = themeWithOpacity(
+    resolveTheme(props.appearance?.theme ?? 'vscode-dark'),
+    props.appearance?.opacity ?? 100
+  )
   return theme.background ?? '#1e1e1e'
 })
 
@@ -153,6 +207,8 @@ defineExpose({
     class="relative h-full w-full overflow-hidden"
     :style="{ backgroundColor: paneBackground }"
     @mousedown="onMouseDown"
+    @mousedown.capture.middle="onMiddleDown"
+    @mouseup="onMouseUp"
     @contextmenu="onContextMenu"
   >
     <!-- xterm 挂载点。不加 padding：xterm 自己会算内边距，
@@ -171,20 +227,21 @@ defineExpose({
         <p class="text-xs text-muted-foreground">
           {{ sessionInfo.state === 'failed' ? '连接失败' : '正在建立连接…' }}
         </p>
-        <p v-if="errorText" class="max-w-md text-xs text-red-500 leading-relaxed">
+        <p v-if="errorText" class="max-w-md text-xs text-danger leading-relaxed">
           {{ errorText }}
         </p>
       </div>
     </div>
 
     <!-- 会话已结束的角标（保留回放内容，提示这是因为进程退出而非断线） -->
-    <div
+    <StatusBadge
       v-if="isReadonly && hasOutput"
-      class="absolute top-2 right-2 px-2 py-0.5 rounded text-[10px] pointer-events-none"
-      :class="stateBadge.cls"
+      :variant="stateBadge.variant"
+      size="sm"
+      class="absolute top-2 right-2 pointer-events-none"
     >
       {{ stateBadge.text }}
-    </div>
+    </StatusBadge>
   </div>
 </template>
 
diff --git a/src/modules/terminal/components/TerminalSettingsPanel.vue b/src/modules/terminal/components/TerminalSettingsPanel.vue
index 0c2f7a5..aaf3873 100644
--- a/src/modules/terminal/components/TerminalSettingsPanel.vue
+++ b/src/modules/terminal/components/TerminalSettingsPanel.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 /**
  * 终端设置面板。
  *
@@ -64,6 +64,9 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Card, CardContent } from '@/components/ui/card'
+import { SettingGroup, SettingRow, StateBlock, StatusBadge } from '@/components/common'
 import { createLogger } from '@/lib/logger'
 import { ACTION_GROUPS, ACTION_MAP, eventToShortcut, TERMINAL_ACTIONS } from '@/lib/terminalActions'
 import { TERMINAL_THEME_OPTIONS } from '@/lib/terminalThemes'
@@ -98,7 +101,7 @@ const SECTIONS: Array<{ id: Section; label: string; icon: unknown }> = [
 // 每次拖滑块都会发一次 IPC。这里用本地草稿 + 显式保存按钮（滑块用防抖）。
 
 const appearance = reactive<AppearanceSettings>({
-  theme: 'vscode-dark',
+  theme: 'system',
   followAppTheme: true,
   fontFamily: '',
   fontSize: 14,
@@ -114,15 +117,13 @@ const appearance = reactive<AppearanceSettings>({
 const layout = reactive<LayoutSettings>({
   confirmCloseRunning: true,
   inheritCwd: false,
-  sidebarOpen: true,
-  sidebarWidth: 240,
   showStatusBar: true,
   maxPanes: 1
 })
 
 const selection = reactive<SelectionSettings>({
   copyOnSelect: false,
-  middleClickPaste: true,
+  middleClickPaste: false,
   rightClick: 'menu',
   trimTrailingNewline: true
 })
@@ -396,114 +397,131 @@ const fontFamilyValue = computed({
 </script>
 
 <template>
-  <div class="flex h-full">
-    <!-- 分区导航 -->
-    <aside class="w-40 shrink-0 border-r border-border py-2">
-      <button
-        v-for="s in SECTIONS"
-        :key="s.id"
-        class="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors"
-        :class="
-          section === s.id
-            ? 'bg-accent text-accent-foreground font-medium'
-            : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
-        "
-        @click="section = s.id"
-      >
-        <component :is="s.icon" class="size-3.5 shrink-0" />
-        {{ s.label }}
-      </button>
+  <div class="flex h-full min-h-0">
+    <!--
+      左：分区导航 + 右：分区设置内容 —— 结构对齐音乐模块「曲库」页。
+      页头（PageToolbar）已移除：模块 Tabs 上写着「设置」，页内再叠一条标题条
+      只会白占一屏高度；页面标题改由左栏的分组标题承载。
+    -->
+    <aside class="flex w-[168px] shrink-0 flex-col border-r">
+      <ScrollArea class="min-h-0 flex-1">
+        <div class="flex flex-col p-2">
+          <p class="px-2 pb-1.5 pt-0.5 text-[11px] font-medium tracking-wide text-muted-foreground">
+            终端设置
+          </p>
+
+          <!-- 分区导航：选中态是浮起胶囊（与曲库左栏、模块 Tabs 同一口径） -->
+          <div class="flex flex-col gap-0.5">
+            <button
+              v-for="s in SECTIONS"
+              :key="s.id"
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-md px-2 text-[13px] transition-colors duration-150"
+              :class="
+                section === s.id
+                  ? 'bg-background font-medium text-foreground shadow-sm ring-1 ring-border'
+                  : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground'
+              "
+              @click="section = s.id"
+            >
+              <component :is="s.icon" class="size-3.5 shrink-0" />
+              <span class="min-w-0 flex-1 truncate text-left">{{ s.label }}</span>
+            </button>
+          </div>
+        </div>
+      </ScrollArea>
     </aside>
 
-    <!-- 分区内容 -->
-    <div class="flex-1 min-w-0 overflow-y-auto p-5">
+    <!--
+      分区内容：key 随分区变化 → 重挂时复用全局 tab-animate（与曲库换视图同一口径）。
+
+      p-5 必须加在**滚动内容**上（内层 wrapper），不能加在 ScrollArea 根上：
+      根上的内边距不属于滚动内容，滚到底时最后一张卡片的底部阴影正好压在
+      视口下边缘上，会被裁掉一条（外观页的「外观」分组卡片就是这种现象）。
+    -->
+    <ScrollArea :key="section" class="tab-animate flex-1 min-w-0">
+      <div class="p-5">
       <!-- ===== 外观 ===== -->
-      <div v-if="section === 'appearance'" class="space-y-5 max-w-2xl">
-        <div>
-          <h3 class="text-sm font-medium mb-1">外观</h3>
-          <p class="text-xs text-muted-foreground">控制终端的配色、字体与渲染方式。</p>
-        </div>
+      <div v-if="section === 'appearance'" class="max-w-3xl">
+        <SettingGroup title="外观" description="控制终端的配色、字体与渲染方式。">
+          <!-- 表单类（下拉/滑杆/输入）按「label 在上 + 控件全宽」纵排，不塞进 SettingRow -->
+          <div class="space-y-1.5 py-3">
+            <Label class="text-xs">配色主题</Label>
+            <Select v-model="appearance.theme">
+              <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="t in TERMINAL_THEME_OPTIONS" :key="t.value" :value="t.value">
+                  {{ t.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-        <div class="space-y-1.5">
-          <Label class="text-xs">配色主题</Label>
-          <Select v-model="appearance.theme">
-            <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem v-for="t in TERMINAL_THEME_OPTIONS" :key="t.value" :value="t.value">
-                {{ t.label }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          <div class="flex items-center justify-between pt-1.5">
-            <div>
-              <Label class="text-xs">跟随应用主题</Label>
-              <p class="text-[11px] text-muted-foreground">
-                应用切换到浅色/深色时，终端自动跟随（选择「跟随系统」时生效）
-              </p>
-            </div>
+          <SettingRow
+            label="跟随应用主题"
+            description="应用切到浅色/深色时，终端自动换成对应侧的配色（所选主题只作取色基准；Dracula 这类只有深色的主题在浅色下回落为 VS Code 浅色）"
+          >
             <Switch v-model="appearance.followAppTheme" />
+          </SettingRow>
+
+          <div class="space-y-1.5 py-3">
+            <Label class="text-xs">字体</Label>
+            <Select v-model="fontFamilyValue">
+              <SelectTrigger class="h-8 text-sm"><SelectValue placeholder="系统默认" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="f in FONT_PRESETS" :key="f.label" :value="f.value">
+                  {{ f.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p class="text-[11px] text-muted-foreground font-mono truncate">
+              {{ appearance.fontFamily || '（系统默认等宽字体）' }}
+            </p>
           </div>
-        </div>
 
-        <div class="space-y-1.5">
-          <Label class="text-xs">字体</Label>
-          <Select v-model="fontFamilyValue">
-            <SelectTrigger class="h-8 text-sm"><SelectValue placeholder="系统默认" /></SelectTrigger>
-            <SelectContent>
-              <SelectItem v-for="f in FONT_PRESETS" :key="f.label" :value="f.value">
-                {{ f.label }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          <p class="text-[11px] text-muted-foreground font-mono truncate">
-            {{ appearance.fontFamily || '（系统默认等宽字体）' }}
-          </p>
-        </div>
-
-        <div class="space-y-1.5">
-          <div class="flex items-center justify-between">
-            <Label class="text-xs">字号</Label>
-            <span class="text-xs font-mono text-muted-foreground">{{ appearance.fontSize }} px</span>
+          <div class="space-y-1.5 py-3">
+            <div class="flex items-center justify-between">
+              <Label class="text-xs">字号</Label>
+              <span class="text-xs font-mono text-muted-foreground">{{ appearance.fontSize }} px</span>
+            </div>
+            <Slider
+              :model-value="[appearance.fontSize]"
+              :min="8"
+              :max="40"
+              :step="1"
+              @update:model-value="(v: any) => { appearance.fontSize = Array.isArray(v) ? v[0] : Number(v) }"
+            />
           </div>
-          <Slider
-            :model-value="[appearance.fontSize]"
-            :min="6"
-            :max="48"
-            :step="1"
-            @update:model-value="(v: any) => { appearance.fontSize = Array.isArray(v) ? v[0] : Number(v) }"
-          />
-        </div>
 
-        <div class="space-y-1.5">
-          <div class="flex items-center justify-between">
-            <Label class="text-xs">行高</Label>
-            <span class="text-xs font-mono text-muted-foreground">{{ appearance.lineHeight.toFixed(2) }}</span>
+          <div class="space-y-1.5 py-3">
+            <div class="flex items-center justify-between">
+              <Label class="text-xs">行高</Label>
+              <span class="text-xs font-mono text-muted-foreground">{{ appearance.lineHeight.toFixed(2) }}</span>
+            </div>
+            <Slider
+              :model-value="[appearance.lineHeight]"
+              :min="1"
+              :max="2"
+              :step="0.05"
+              @update:model-value="(v: any) => { appearance.lineHeight = Array.isArray(v) ? v[0] : Number(v) }"
+            />
           </div>
-          <Slider
-            :model-value="[appearance.lineHeight]"
-            :min="1"
-            :max="2"
-            :step="0.05"
-            @update:model-value="(v: any) => { appearance.lineHeight = Array.isArray(v) ? v[0] : Number(v) }"
-          />
-        </div>
 
-        <div class="space-y-1.5">
-          <div class="flex items-center justify-between">
-            <Label class="text-xs">字间距</Label>
-            <span class="text-xs font-mono text-muted-foreground">{{ appearance.letterSpacing }} px</span>
+          <div class="space-y-1.5 py-3">
+            <div class="flex items-center justify-between">
+              <Label class="text-xs">字间距</Label>
+              <span class="text-xs font-mono text-muted-foreground">{{ appearance.letterSpacing }} px</span>
+            </div>
+            <Slider
+              :model-value="[appearance.letterSpacing]"
+              :min="-2"
+              :max="4"
+              :step="0.5"
+              @update:model-value="(v: any) => { appearance.letterSpacing = Array.isArray(v) ? v[0] : Number(v) }"
+            />
           </div>
-          <Slider
-            :model-value="[appearance.letterSpacing]"
-            :min="-2"
-            :max="4"
-            :step="0.5"
-            @update:model-value="(v: any) => { appearance.letterSpacing = Array.isArray(v) ? v[0] : Number(v) }"
-          />
-        </div>
 
-        <div class="grid grid-cols-2 gap-4">
-          <div class="space-y-1.5">
+          <div class="space-y-1.5 py-3">
             <Label class="text-xs">光标样式</Label>
             <Select v-model="appearance.cursorStyle">
               <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
@@ -514,259 +532,224 @@ const fontFamilyValue = computed({
               </SelectContent>
             </Select>
           </div>
-          <div class="flex items-end pb-1.5">
-            <div class="flex items-center justify-between w-full">
-              <Label class="text-xs">光标闪烁</Label>
-              <Switch v-model="appearance.cursorBlink" />
+
+          <SettingRow label="光标闪烁">
+            <Switch v-model="appearance.cursorBlink" />
+          </SettingRow>
+
+          <div class="space-y-1.5 py-3">
+            <div class="flex items-center justify-between">
+              <Label class="text-xs">背景不透明度</Label>
+              <span class="text-xs font-mono text-muted-foreground">{{ appearance.opacity }}%</span>
             </div>
+            <Slider
+              :model-value="[appearance.opacity]"
+              :min="30"
+              :max="100"
+              :step="1"
+              @update:model-value="(v: any) => { appearance.opacity = Array.isArray(v) ? v[0] : Number(v) }"
+            />
+            <p v-if="appearance.opacity < 70" class="text-[11px] text-warning">
+              过低的不透明度会让文字与背景内容混在一起，影响可读性。
+            </p>
           </div>
-        </div>
 
-        <div class="space-y-1.5">
-          <div class="flex items-center justify-between">
-            <Label class="text-xs">背景不透明度</Label>
-            <span class="text-xs font-mono text-muted-foreground">{{ appearance.opacity }}%</span>
-          </div>
-          <Slider
-            :model-value="[appearance.opacity]"
-            :min="30"
-            :max="100"
-            :step="1"
-            @update:model-value="(v: any) => { appearance.opacity = Array.isArray(v) ? v[0] : Number(v) }"
-          />
-          <p v-if="appearance.opacity < 70" class="text-[11px] text-amber-600 dark:text-amber-400">
-            过低的不透明度会让文字与背景内容混在一起，影响可读性。
-          </p>
-        </div>
-
-        <div class="grid grid-cols-2 gap-4">
-          <div class="space-y-1.5">
+          <div class="space-y-1.5 py-3">
             <Label class="text-xs">回滚缓冲行数</Label>
             <Input v-model.number="appearance.scrollback" type="number" class="h-8 text-sm font-mono" />
             <p class="text-[11px] text-muted-foreground">内存占用与此成正比</p>
           </div>
-        </div>
 
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">GPU 渲染（WebGL）</Label>
-            <p class="text-[11px] text-muted-foreground">
-              显著提升滚动流畅度；驱动异常时自动回退到 Canvas
-            </p>
-          </div>
-          <Switch v-model="appearance.gpuRendering" />
-        </div>
+          <SettingRow
+            label="GPU 渲染（WebGL）"
+            description="显著提升滚动流畅度；驱动异常时自动回退到 Canvas"
+          >
+            <Switch v-model="appearance.gpuRendering" />
+          </SettingRow>
+        </SettingGroup>
         <!-- 保存按钮已移除：改动经 400ms 防抖自动写回（即时生效） -->
       </div>
 
       <!-- ===== 行为 ===== -->
-      <div v-else-if="section === 'behavior'" class="space-y-5 max-w-2xl">
-        <div>
-          <h3 class="text-sm font-medium mb-1">行为</h3>
-          <p class="text-xs text-muted-foreground">鼠标与剪贴板的交互方式。</p>
-        </div>
+      <div v-else-if="section === 'behavior'" class="max-w-3xl">
+        <SettingGroup title="行为" description="鼠标与剪贴板的交互方式。">
+          <SettingRow label="选中即复制" description="用鼠标选中文本后立即写入剪贴板（X11 习惯）">
+            <Switch v-model="selection.copyOnSelect" />
+          </SettingRow>
 
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">选中即复制</Label>
-            <p class="text-[11px] text-muted-foreground">用鼠标选中文本后立即写入剪贴板（X11 习惯）</p>
+          <SettingRow label="中键粘贴" description="点击鼠标中键粘贴剪贴板内容">
+            <Switch v-model="selection.middleClickPaste" />
+          </SettingRow>
+
+          <div class="space-y-1.5 py-3">
+            <Label class="text-xs">右键行为</Label>
+            <Select v-model="selection.rightClick">
+              <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="menu">弹出菜单</SelectItem>
+                <SelectItem value="paste">粘贴</SelectItem>
+                <SelectItem value="select-word">选中光标下的词</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
-          <Switch v-model="selection.copyOnSelect" />
-        </div>
 
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">中键粘贴</Label>
-            <p class="text-[11px] text-muted-foreground">点击鼠标中键粘贴剪贴板内容</p>
-          </div>
-          <Switch v-model="selection.middleClickPaste" />
-        </div>
-
-        <div class="space-y-1.5">
-          <Label class="text-xs">右键行为</Label>
-          <Select v-model="selection.rightClick">
-            <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="menu">弹出菜单</SelectItem>
-              <SelectItem value="paste">粘贴</SelectItem>
-              <SelectItem value="select-word">选中光标下的词</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">复制时去掉行尾换行</Label>
-            <p class="text-[11px] text-muted-foreground">
-              复制单行命令时不带末尾换行，粘贴到 shell 不会立即执行
-            </p>
-          </div>
-          <Switch v-model="selection.trimTrailingNewline" />
-        </div>
+          <SettingRow
+            label="复制时去掉行尾换行"
+            description="复制单行命令时不带末尾换行，粘贴到 shell 不会立即执行"
+          >
+            <Switch v-model="selection.trimTrailingNewline" />
+          </SettingRow>
+        </SettingGroup>
         <!-- 保存按钮已移除：改动经 400ms 防抖自动写回（即时生效） -->
       </div>
 
       <!-- ===== 布局 ===== -->
-      <div v-else-if="section === 'layout'" class="space-y-5 max-w-2xl">
-        <div>
-          <h3 class="text-sm font-medium mb-1">布局</h3>
-          <p class="text-xs text-muted-foreground">窗口与面板的组织方式。</p>
-        </div>
+      <div v-else-if="section === 'layout'" class="max-w-3xl">
+        <SettingGroup title="布局" description="窗口与面板的组织方式。">
+          <SettingRow label="显示状态栏" description="底部显示会话、工作目录与终端尺寸">
+            <Switch v-model="layout.showStatusBar" />
+          </SettingRow>
 
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">显示状态栏</Label>
-            <p class="text-[11px] text-muted-foreground">底部显示会话、工作目录与终端尺寸</p>
-          </div>
-          <Switch v-model="layout.showStatusBar" />
-        </div>
+          <SettingRow
+            label="新会话继承当前目录"
+            description="新建本地标签时，从当前会话的工作目录启动（需 shell 支持 OSC 7 上报）"
+          >
+            <Switch v-model="layout.inheritCwd" />
+          </SettingRow>
 
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">新会话继承当前目录</Label>
+          <SettingRow
+            label="关闭运行中的会话前确认"
+            description="强烈建议保持开启 —— 一个正在跑的编译或部署任务被误关会很难受"
+          >
+            <Switch v-model="layout.confirmCloseRunning" />
+          </SettingRow>
+
+          <div class="space-y-1.5 py-3">
+            <Label class="text-xs">面板数量上限</Label>
+            <Select
+              :model-value="String(layout.maxPanes)"
+              @update:model-value="(v: any) => { layout.maxPanes = Number(v) }"
+            >
+              <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">1（不分屏）</SelectItem>
+                <SelectItem value="2">2</SelectItem>
+                <SelectItem value="3">3</SelectItem>
+                <SelectItem value="4">4</SelectItem>
+              </SelectContent>
+            </Select>
             <p class="text-[11px] text-muted-foreground">
-              新建本地标签时，从当前会话的工作目录启动（需 shell 支持 OSC 7 上报）
+              一个标签内可并排的面板上限；封顶 4（WebGL 上下文数量受限）
             </p>
           </div>
-          <Switch v-model="layout.inheritCwd" />
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">关闭运行中的会话前确认</Label>
-            <p class="text-[11px] text-muted-foreground">
-              强烈建议保持开启 —— 一个正在跑的编译或部署任务被误关会很难受
-            </p>
-          </div>
-          <Switch v-model="layout.confirmCloseRunning" />
-        </div>
-
-        <div class="space-y-1.5">
-          <Label class="text-xs">面板数量上限</Label>
-          <Select :model-value="String(layout.maxPanes)">
-            <SelectTrigger class="h-8 text-sm"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="1">1（不分屏）</SelectItem>
-              <SelectItem value="2">2</SelectItem>
-              <SelectItem value="3">3</SelectItem>
-              <SelectItem value="4">4</SelectItem>
-            </SelectContent>
-          </Select>
-          <p class="text-[11px] text-muted-foreground">
-            分屏功能在后续版本提供，此处先确定上限
-          </p>
-        </div>
+        </SettingGroup>
         <!-- 保存按钮已移除：改动经 400ms 防抖自动写回（即时生效） -->
       </div>
 
       <!-- ===== Shell ===== -->
-      <div v-else-if="section === 'shells'" class="space-y-5 max-w-3xl">
-        <div class="flex items-start justify-between">
-          <div>
-            <h3 class="text-sm font-medium mb-1">本地 Shell</h3>
+      <div v-else-if="section === 'shells'" class="max-w-3xl">
+        <div class="flex items-start justify-between gap-3 mb-3">
+          <div class="flex min-w-0 flex-col gap-1">
+            <h2 class="text-sm font-semibold text-foreground">本地 Shell</h2>
             <p class="text-xs text-muted-foreground">
               自动探测系统中可用的 Shell。禁用的 Shell 不会出现在新建会话的列表中。
             </p>
           </div>
-          <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs shrink-0" :disabled="detecting" @click="refreshShells">
+          <Button variant="outline" size="sm" class="shrink-0" :disabled="detecting" @click="refreshShells">
             <RefreshCw class="size-3.5" :class="{ 'animate-spin': detecting }" />
             重新探测
           </Button>
         </div>
 
-        <div v-if="store.shells.length === 0" class="py-12 text-center border border-dashed border-border rounded-md">
-          <Monitor class="size-7 mx-auto text-muted-foreground/30 mb-2" />
-          <p class="text-sm text-muted-foreground">未探测到可用 Shell</p>
-        </div>
+        <Card>
+          <CardContent>
+            <StateBlock
+              v-if="store.shells.length === 0"
+              variant="empty"
+              title="未探测到可用 Shell"
+              :min-height="200"
+            />
+            <div v-else class="space-y-2">
+              <div
+                v-for="s in store.shells"
+                :key="s.id"
+                class="group flex items-start gap-3 rounded-md border border-border p-3 transition-colors hover:bg-hover"
+              >
+                <Monitor class="size-4 shrink-0 mt-0.5 text-muted-foreground" />
 
-        <div v-else class="space-y-1.5">
-          <div
-            v-for="s in store.shells"
-            :key="s.id"
-            class="group flex items-start gap-3 px-3 py-2.5 rounded-md border border-border
-                   hover:border-primary/40 transition-colors"
-          >
-            <Monitor class="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <span class="text-sm font-medium truncate">{{ s.name }}</span>
+                    <span class="shrink-0 text-[11px] text-muted-foreground">{{ s.kind }}</span>
+                    <StatusBadge v-if="s.detected" variant="info" size="sm">自动探测</StatusBadge>
+                    <StatusBadge v-if="s.id === store.settings?.lastShellId" variant="success" size="sm">
+                      默认
+                    </StatusBadge>
+                  </div>
+                  <div class="mt-1 text-[11px] text-muted-foreground font-mono truncate" :title="s.path">
+                    {{ s.path }}
+                    <span v-if="s.args.length > 0" class="opacity-70">{{ s.args.join(' ') }}</span>
+                  </div>
+                </div>
 
-            <div class="min-w-0 flex-1">
-              <div class="flex items-center gap-2 flex-wrap">
-                <span class="text-sm font-medium truncate">{{ s.name }}</span>
-                <span class="text-[10px] px-1.5 py-0.5 rounded bg-muted shrink-0">{{ s.kind }}</span>
-                <span
-                  v-if="s.detected"
-                  class="text-[10px] px-1.5 py-0.5 rounded bg-sky-500/15 text-sky-700 dark:text-sky-400 shrink-0"
-                >
-                  自动探测
-                </span>
-                <span
-                  v-if="s.id === store.settings?.lastShellId"
-                  class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 shrink-0"
-                >
-                  默认
-                </span>
-              </div>
-              <div class="mt-1 text-[11px] text-muted-foreground font-mono truncate" :title="s.path">
-                {{ s.path }}
-                <span v-if="s.args.length > 0" class="opacity-70">{{ s.args.join(' ') }}</span>
+                <div class="shrink-0 flex items-center gap-2">
+                  <Button
+                    v-if="s.id !== store.settings?.lastShellId"
+                    variant="ghost"
+                    size="sm"
+                    class="opacity-0 group-hover:opacity-100 transition-opacity"
+                    title="设为默认 Shell"
+                    @click="store.setLastShell(s.id)"
+                  >
+                    设为默认
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="opacity-0 group-hover:opacity-100 transition-opacity"
+                    @click="testShell(s)"
+                  >
+                    测试
+                  </Button>
+                  <Switch :model-value="s.enabled" @update:model-value="() => toggleShellEnabled(s)" />
+                  <Button
+                    v-if="!s.detected"
+                    variant="ghost"
+                    size="icon-sm"
+                    class="opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
+                    title="删除"
+                    @click="pendingShellDelete = s"
+                  >
+                    <Trash2 class="size-3.5" />
+                  </Button>
+                </div>
               </div>
             </div>
+          </CardContent>
+        </Card>
 
-            <div class="shrink-0 flex items-center gap-2">
-              <Button
-                v-if="s.id !== store.settings?.lastShellId"
-                variant="ghost"
-                size="sm"
-                class="h-7 text-[11px] opacity-0 group-hover:opacity-100 transition-opacity"
-                title="设为默认 Shell"
-                @click="store.setLastShell(s.id)"
-              >
-                设为默认
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                class="h-7 text-[11px] opacity-0 group-hover:opacity-100 transition-opacity"
-                @click="testShell(s)"
-              >
-                测试
-              </Button>
-              <Switch :model-value="s.enabled" @update:model-value="() => toggleShellEnabled(s)" />
-              <Button
-                v-if="!s.detected"
-                variant="ghost"
-                size="icon"
-                class="size-7 opacity-0 group-hover:opacity-100 transition-opacity
-                       text-destructive hover:text-destructive"
-                title="删除"
-                @click="pendingShellDelete = s"
-              >
-                <Trash2 class="size-3.5" />
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <p class="text-[11px] text-muted-foreground">
+        <p class="mt-3 text-[11px] text-muted-foreground">
           自动探测到的 Shell 无法删除，只能禁用 —— 它们的路径来自系统，删掉也会在下次探测时重新出现。
         </p>
       </div>
 
       <!-- ===== 快捷键 ===== -->
-      <div v-else-if="section === 'shortcuts'" class="space-y-5 max-w-3xl">
-        <div class="flex items-start justify-between">
-          <div>
-            <h3 class="text-sm font-medium mb-1">终端内快捷键</h3>
+      <div v-else-if="section === 'shortcuts'" class="max-w-3xl">
+        <div class="flex items-start justify-between gap-3 mb-3">
+          <div class="flex min-w-0 flex-col gap-1">
+            <h2 class="text-sm font-semibold text-foreground">终端内快捷键</h2>
             <p class="text-xs text-muted-foreground">
-              仅在焦点位于终端面板内时生效。点击键位后按下新组合键即可修改。
+              仅在焦点位于终端面板内时生效（说明里标注「全局生效」的那条是系统级热键，
+              任意界面按下都有效）。点击键位后按下新组合键即可修改。
             </p>
           </div>
-          <Button variant="outline" size="sm" class="h-7 gap-1.5 text-xs shrink-0" @click="resetShortcuts">
+          <Button variant="outline" size="sm" class="shrink-0" @click="resetShortcuts">
             <RotateCcw class="size-3.5" />恢复默认
           </Button>
         </div>
 
         <!-- 硬约束说明：这是最容易引起困惑的地方，必须显式写在界面上 -->
-        <div class="flex items-start gap-2 p-2.5 rounded-md bg-muted text-[11px] text-muted-foreground">
+        <div class="flex items-start gap-2 p-2.5 rounded-md bg-muted text-[11px] text-muted-foreground mb-3">
           <AlertTriangle class="size-3.5 shrink-0 mt-0.5" />
           <div>
             <p>
@@ -777,65 +760,69 @@ const fontFamilyValue = computed({
           </div>
         </div>
 
-        <p v-if="unboundCount > 0" class="text-[11px] text-muted-foreground">
+        <p v-if="unboundCount > 0" class="text-[11px] text-muted-foreground mb-3">
           有 {{ unboundCount }} 个动作未绑定键位。
         </p>
 
-        <div v-for="g in shortcutGroups" :key="g.group" class="space-y-1">
-          <p class="text-[10px] uppercase tracking-wide text-muted-foreground px-1">{{ g.group }}</p>
+        <Card>
+          <CardContent class="space-y-4">
+            <div v-for="g in shortcutGroups" :key="g.group" class="space-y-2">
+              <p class="text-[11px] font-medium text-muted-foreground">{{ g.group }}</p>
 
-          <div
-            v-for="b in g.items"
-            :key="b.action"
-            class="flex items-center gap-3 px-3 py-2 rounded-md border border-border"
-            :class="recording === b.action ? 'border-primary bg-accent/40' : 'border-border'"
-          >
-            <div class="min-w-0 flex-1">
-              <div class="text-xs font-medium">{{ ACTION_MAP[b.action]?.label ?? b.action }}</div>
-              <div class="text-[11px] text-muted-foreground truncate">
-                {{ ACTION_MAP[b.action]?.description }}
+              <div
+                v-for="b in g.items"
+                :key="b.action"
+                class="flex items-center gap-3 rounded-md border p-3"
+                :class="recording === b.action ? 'border-primary bg-primary-soft' : 'border-border'"
+              >
+                <div class="min-w-0 flex-1">
+                  <div class="text-xs font-medium">{{ ACTION_MAP[b.action]?.label ?? b.action }}</div>
+                  <div class="text-[11px] text-muted-foreground truncate">
+                    {{ ACTION_MAP[b.action]?.description }}
+                  </div>
+                </div>
+
+                <!-- 键位录制按钮 -->
+                <button
+                  class="shrink-0 min-w-[132px] h-7 px-2.5 rounded-md border text-[11px] font-mono
+                         transition-colors"
+                  :class="
+                    recording === b.action
+                      ? 'border-primary bg-primary-soft text-primary-soft-text'
+                      : b.keys
+                        ? 'border-border hover:border-primary/50 hover:bg-hover'
+                        : 'border-dashed border-muted-foreground/40 text-muted-foreground hover:border-primary/50'
+                  "
+                  @click="recording === b.action ? stopRecording() : startRecording(b.action)"
+                >
+                  <template v-if="recording === b.action">
+                    <span class="animate-pulse">按下组合键…</span>
+                  </template>
+                  <template v-else-if="b.keys">{{ b.keys }}</template>
+                  <template v-else>未绑定</template>
+                </button>
+
+                <Button
+                  v-if="b.keys"
+                  variant="ghost"
+                  size="icon-sm"
+                  class="shrink-0 text-muted-foreground"
+                  title="清除绑定"
+                  @click="clearBinding(b.action)"
+                >
+                  <RotateCcw class="size-3.5" />
+                </Button>
+                <div v-else class="size-7 shrink-0" />
+
+                <Switch
+                  :model-value="b.enabled"
+                  class="shrink-0"
+                  @update:model-value="(v: boolean) => toggleBinding(b.action, v)"
+                />
               </div>
             </div>
-
-            <!-- 键位录制按钮 -->
-            <button
-              class="shrink-0 min-w-[132px] h-7 px-2.5 rounded-md border text-[11px] font-mono
-                     transition-colors"
-              :class="
-                recording === b.action
-                  ? 'border-primary bg-primary/10 text-primary'
-                  : b.keys
-                    ? 'border-border hover:border-primary/50 hover:bg-accent/50'
-                    : 'border-dashed border-muted-foreground/40 text-muted-foreground hover:border-primary/50'
-              "
-              @click="recording === b.action ? stopRecording() : startRecording(b.action)"
-            >
-              <template v-if="recording === b.action">
-                <span class="animate-pulse">按下组合键…</span>
-              </template>
-              <template v-else-if="b.keys">{{ b.keys }}</template>
-              <template v-else>未绑定</template>
-            </button>
-
-            <Button
-              v-if="b.keys"
-              variant="ghost"
-              size="icon"
-              class="size-7 shrink-0 text-muted-foreground"
-              title="清除绑定"
-              @click="clearBinding(b.action)"
-            >
-              <RotateCcw class="size-3.5" />
-            </Button>
-            <div v-else class="size-7 shrink-0" />
-
-            <Switch
-              :model-value="b.enabled"
-              class="shrink-0"
-              @update:model-value="(v: boolean) => toggleBinding(b.action, v)"
-            />
-          </div>
-        </div>
+          </CardContent>
+        </Card>
 
         <!-- 录制冲突提示 -->
         <div
@@ -848,60 +835,50 @@ const fontFamilyValue = computed({
       </div>
 
       <!-- ===== 安全 ===== -->
-      <div v-else-if="section === 'security'" class="space-y-5 max-w-2xl">
-        <div>
-          <h3 class="text-sm font-medium mb-1">安全</h3>
-          <p class="text-xs text-muted-foreground">主机密钥校验与审计。</p>
-        </div>
-
-        <div class="rounded-md border border-border p-3 space-y-3">
-          <div>
-            <Label class="text-xs">主机密钥策略</Label>
-            <p class="text-[11px] text-muted-foreground mt-0.5">
-              本项目<span class="font-medium text-foreground">不提供「自动接受」</span>选项。
-              首次连接必须人工核对指纹 —— 这是抵御中间人攻击的唯一有效手段。
-            </p>
+      <div v-else-if="section === 'security'" class="max-w-3xl">
+        <SettingGroup title="安全" description="主机密钥校验与审计。">
+          <div class="space-y-3 py-3">
+            <div>
+              <Label class="text-xs">主机密钥策略</Label>
+              <p class="text-[11px] text-muted-foreground mt-0.5">
+                本项目<span class="font-medium text-foreground">不提供「自动接受」</span>选项。
+                首次连接必须人工核对指纹 —— 这是抵御中间人攻击的唯一有效手段。
+              </p>
+            </div>
+            <div class="flex items-center gap-2 px-2.5 py-2 rounded bg-muted">
+              <ShieldAlert class="size-3.5 text-success shrink-0" />
+              <span class="text-xs">询问并核对指纹（唯一策略）</span>
+            </div>
           </div>
-          <div class="flex items-center gap-2 px-2.5 py-2 rounded bg-muted">
-            <ShieldAlert class="size-3.5 text-emerald-600 dark:text-emerald-400 shrink-0" />
-            <span class="text-xs">询问并核对指纹（唯一策略）</span>
+
+          <SettingRow
+            label="指纹变更时阻断连接"
+            description="已记录的主机换了密钥时，默认拒绝连接，需用户显式核对后放行"
+          >
+            <Switch v-model="security.blockOnFingerprintChange" />
+          </SettingRow>
+
+          <SettingRow
+            label="记录安全事件"
+            description="把主机密钥确认、指纹变更等事件写入日志，便于事后追溯"
+          >
+            <Switch v-model="security.auditLog" />
+          </SettingRow>
+
+          <div v-if="!security.blockOnFingerprintChange" class="py-3">
+            <div class="flex items-start gap-2 p-2.5 rounded-md border border-warning/40 bg-warning-soft">
+              <AlertTriangle class="size-3.5 shrink-0 mt-0.5 text-warning" />
+              <p class="text-[11px] text-warning-text">
+                关闭阻断后，主机密钥变更将不再自动拦截。若服务器被中间人替换，
+                您可能在毫无提示的情况下连接到了错误的机器。
+              </p>
+            </div>
           </div>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">指纹变更时阻断连接</Label>
-            <p class="text-[11px] text-muted-foreground">
-              已记录的主机换了密钥时，默认拒绝连接，需用户显式核对后放行
-            </p>
-          </div>
-          <Switch v-model="security.blockOnFingerprintChange" />
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div>
-            <Label class="text-xs">记录安全事件</Label>
-            <p class="text-[11px] text-muted-foreground">
-              把主机密钥确认、指纹变更等事件写入日志，便于事后追溯
-            </p>
-          </div>
-          <Switch v-model="security.auditLog" />
-        </div>
-
-        <div
-          v-if="!security.blockOnFingerprintChange"
-          class="flex items-start gap-2 p-2.5 rounded-md border border-amber-500/40 bg-amber-500/10"
-        >
-          <AlertTriangle class="size-3.5 shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" />
-          <p class="text-[11px] text-amber-700 dark:text-amber-400">
-            关闭阻断后，主机密钥变更将不再自动拦截。若服务器被中间人替换，
-            您可能在毫无提示的情况下连接到了错误的机器。
-          </p>
-        </div>
-
+        </SettingGroup>
         <!-- 保存按钮已移除：改动经 400ms 防抖自动写回（即时生效） -->
       </div>
-    </div>
+      </div>
+    </ScrollArea>
 
     <!-- ===== Shell 删除确认 ===== -->
     <Dialog :open="pendingShellDelete !== null" @update:open="(v: boolean) => !v && (pendingShellDelete = null)">
diff --git a/src/modules/terminal/components/TerminalStatusBar.vue b/src/modules/terminal/components/TerminalStatusBar.vue
index 0f6b4b2..3eb0957 100644
--- a/src/modules/terminal/components/TerminalStatusBar.vue
+++ b/src/modules/terminal/components/TerminalStatusBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * 终端状态栏：把「当前会话的客观事实」摆在最下面一行。
+ * 终端状态栏：把「当前会话的客观事实」摆在卡片最下面一行。
  *
  * 为什么需要它：终端是全屏沉浸式的界面，用户容易忘记自己在哪台机器、
  * 用哪个 shell、当前目录是什么。状态栏用最低的视觉权重承担这个职责。
@@ -10,11 +10,38 @@
  * （看到乱码要立刻切）这两重身份的合体。若挪进设置页，用户在 GBK 服务器上看到
  * 乱码时得先想「设置在哪」，而这个动作天然是「就在我看到乱码的那一行下面改」。
  * 其余任何可写设置都不该进状态栏 —— 那会让它退化成一个迷你设置面板。
+ *
+ * # 与上方控制栏的关系（2026-09-21）
+ *
+ * 两条栏同属终端卡片：控制栏 h-9、状态栏也 h-9，字号统一 12px（`text-xs`）。
+ * 之前状态栏是 h-6 / 10px，与 44px 的控制栏摆在同一张卡片里像两条不同来源的
+ * 附属信息；现在它们是同一块屏幕的上下边框，等高才不显得卡片是歪的。
+ *
+ * # 编码为什么从原生 select 换成 Popover
+ *
+ * 早期用原生 `<select>` 的理由是「shadcn 的 Select 会在 body 末尾挂浮层，
+ * 而状态栏处在终端容器的裁剪区内」。但本项目的 `PopoverContent` 走
+ * `PopoverPortal`（同样挂到 body），**不受**卡片的 `overflow-hidden` 影响 ——
+ * 原生 select 的样式（系统字体、系统下拉、深色主题下白底）与其余界面不一致，
+ * 换来的那点「稳定性」其实是多余的谨慎。
  */
 import { computed, ref } from 'vue'
-import { Globe, TerminalSquare, FolderOpen, Hash, Wifi, WifiOff, Cpu, Languages, Loader2 } from '@lucide/vue'
+import {
+  Check,
+  ChevronDown,
+  Cpu,
+  FolderOpen,
+  Globe,
+  Hash,
+  Languages,
+  Loader2,
+  TerminalSquare,
+  Wifi,
+  WifiOff
+} from '@lucide/vue'
 import { useTerminalStore } from '@/stores/terminalStore'
 import { toast } from 'vue-sonner'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import {
   ENCODING_OPTIONS,
   encodingShortLabel,
@@ -57,13 +84,13 @@ const stateText = computed(() => {
 const stateColor = computed(() => {
   switch (props.session?.state) {
     case 'established':
-      return 'text-emerald-600 dark:text-emerald-400'
+      return 'text-success'
     case 'connecting':
     case 'authenticating':
     case 'degraded':
-      return 'text-amber-600 dark:text-amber-400'
+      return 'text-warning'
     case 'failed':
-      return 'text-red-600 dark:text-red-400'
+      return 'text-danger'
     default:
       return 'text-muted-foreground'
   }
@@ -72,8 +99,15 @@ const stateColor = computed(() => {
 /** 会话标题（与标签栏一致的口径，统一走 store 的解析） */
 const title = computed(() => store.sessionLabel(props.session) || '无会话')
 
-/** SSH 目标串 / 本地 shell 名 */
-const target = computed(() => store.sessionTarget(props.session))
+/**
+ * 副标题：**只对 SSH 显示**。
+ *
+ * SSH 的标题是主机名、副标题是 `user@host:port`，后者是标题给不出的信息，必须留。
+ * 本地会话的标题已经是 shell 名（`PowerShell` / `cmd`，见后端 `shell::session_label`），
+ * 而由 `ShellProfile::name` 拼出的「Windows PowerShell」是设置页里的描述名 ——
+ * 二者并排会让人以为是两个不同的东西。本地的「我在哪」由右侧的 cwd 承担。
+ */
+const target = computed(() => (isSsh.value ? store.sessionTarget(props.session) : ''))
 
 // ===== 编码选择器 =====
 
@@ -86,6 +120,9 @@ const encodingAlert = computed(() => isNonDefaultEncoding(encoding.value))
 /** 切换中（防止连点造成多次广播与状态错乱） */
 const switching = ref(false)
 
+/** 编码浮层开合 */
+const encodingOpen = ref(false)
+
 /**
  * 切换编码。
  *
@@ -94,14 +131,14 @@ const switching = ref(false)
  * 所以新编码只对「之后的输出」生效。这一点必须让用户知道 ——
  * 否则他会看到「切了还是乱码」并认为功能坏了。
  */
-async function onEncodingChange(value: unknown) {
+async function pickEncoding(value: string) {
+  encodingOpen.value = false
   const sid = props.session?.id
-  const next = String(value ?? '')
-  if (!sid || !next || next === encoding.value) return
+  if (!sid || !value || value === encoding.value) return
 
   switching.value = true
   try {
-    const norm = await store.setEncoding(sid, next)
+    const norm = await store.setEncoding(sid, value)
     toast.success(`编码已切换为 ${norm}`, {
       description: '新编码对之后的输出生效；已显示的历史内容不会自动重绘，可执行 clear 后重新查看'
     })
@@ -116,20 +153,20 @@ async function onEncodingChange(value: unknown) {
 
 <template>
   <div
-    class="shrink-0 h-6 flex items-center gap-3 px-2.5 border-t border-border bg-card/20
-           text-[10px] text-muted-foreground select-none"
+    class="shrink-0 h-9 flex items-center gap-3 px-3 border-t border-border bg-card/20
+           text-xs text-muted-foreground select-none"
   >
     <div class="flex items-center gap-1.5 min-w-0">
-      <component :is="isSsh ? Globe : TerminalSquare" class="size-3 shrink-0" />
-      <span class="truncate max-w-[200px]">{{ title }}</span>
+      <component :is="isSsh ? Globe : TerminalSquare" class="size-3.5 shrink-0" />
+      <span class="truncate max-w-[220px]">{{ title }}</span>
     </div>
 
-    <span v-if="target" class="truncate max-w-[220px] opacity-80">{{ target }}</span>
+    <span v-if="target" class="truncate max-w-[240px] opacity-80">{{ target }}</span>
 
     <!-- shrink-0 + nowrap：状态栏 flex 项多，不加会被压缩到「已连接」逐字换行成竖排 -->
     <div class="flex items-center gap-1 shrink-0 whitespace-nowrap">
-      <Wifi v-if="session?.state === 'established'" class="size-3" />
-      <WifiOff v-else class="size-3 opacity-50" />
+      <Wifi v-if="session?.state === 'established'" class="size-3.5" />
+      <WifiOff v-else class="size-3.5 opacity-50" />
       <span :class="stateColor">{{ stateText }}</span>
     </div>
 
@@ -137,54 +174,65 @@ async function onEncodingChange(value: unknown) {
 
     <!--
       编码选择器：非默认编码时整块变琥珀色。
-      只换文字不够 —— 「GBK」和「UTF-8」在 10px 字号下形状差异不明显，
+      只换文字不够 —— 「GBK」和「UTF-8」在 12px 字号下形状差异不明显，
       用户扫一眼不会注意到自己正在用非默认编码。
     -->
-    <div
-      v-if="session"
-      class="flex items-center gap-0.5 shrink-0 rounded px-1 -mx-0.5 transition-colors"
-      :class="encodingAlert
-        ? 'bg-amber-500/15 text-amber-700 dark:text-amber-400'
-        : 'text-muted-foreground'"
-      :title="encodingAlert
-        ? `当前使用非默认编码 ${encoding}，中文乱码时可在此切换`
-        : '切换字符编码'"
-    >
-      <Loader2 v-if="switching" class="size-3 animate-spin" />
-      <Languages v-else class="size-3" />
-      <!--
-        用原生 select 而不是 shadcn 的 Select：后者是 Radix 实现，会在 body 末尾
-        挂一个 portal 浮层，而状态栏处在终端容器的裁剪区内。10px 字号 + 状态栏
-        这种「工具条」语境下，原生 select 的外观差异可以接受，换来的是不受
-        浮层层级与裁剪影响 —— 这是稳定性优先于观感的一处取舍。
-      -->
-      <select
-        :value="encoding"
-        :disabled="switching"
-        class="bg-transparent border-0 outline-none cursor-pointer appearance-none
-               text-[10px] text-inherit pr-0.5 disabled:cursor-wait"
-        @change="onEncodingChange(($event.target as HTMLSelectElement).value)"
-      >
-        <option v-for="opt in ENCODING_OPTIONS" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </select>
-      <span class="tabular-nums opacity-70">{{ encodingShortLabel(encoding) }}</span>
-    </div>
+    <Popover v-if="session" v-model:open="encodingOpen">
+      <PopoverTrigger as-child>
+        <button
+          type="button"
+          class="flex items-center gap-1 h-6 px-1.5 -mx-0.5 rounded shrink-0 whitespace-nowrap
+                 transition-colors"
+          :class="
+            encodingAlert
+              ? 'bg-warning-soft text-warning-text hover:text-warning-text'
+              : 'text-muted-foreground hover:bg-primary-soft hover:text-primary-soft-text'
+          "
+        >
+          <Loader2 v-if="switching" class="size-3.5 animate-spin" />
+          <Languages v-else class="size-3.5" />
+          <span>{{ encodingShortLabel(encoding) }}</span>
+          <ChevronDown class="size-3 opacity-70" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="end" class="w-56 p-1">
+        <p class="px-2 pb-1 pt-1 text-[11px] text-muted-foreground">字符编码</p>
+        <button
+          v-for="opt in ENCODING_OPTIONS"
+          :key="opt.value"
+          type="button"
+          class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs
+                 transition-colors hover:bg-accent/60"
+          :class="
+            opt.value === encoding
+              ? 'font-medium text-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          "
+          @click="pickEncoding(opt.value)"
+        >
+          <span class="min-w-0 flex-1 truncate">{{ opt.label }}</span>
+          <Check v-if="opt.value === encoding" class="size-3.5 shrink-0 text-primary" />
+        </button>
+        <p class="px-2 pb-1 pt-1.5 text-[11px] leading-relaxed text-muted-foreground">
+          <template v-if="encodingAlert">当前是非默认编码，中文乱码时可在此切换。</template>
+          <template v-else>新编码只对之后的输出生效，已显示的内容不会重绘。</template>
+        </p>
+      </PopoverContent>
+    </Popover>
 
     <div v-if="session?.cwd" class="flex items-center gap-1 min-w-0 max-w-[45%]">
-      <FolderOpen class="size-3 shrink-0" />
+      <FolderOpen class="size-3.5 shrink-0" />
       <span class="truncate" :title="session.cwd">{{ session.cwd }}</span>
     </div>
 
     <div v-if="cols && rows" class="flex items-center gap-1 shrink-0">
-      <Hash class="size-3" />
+      <Hash class="size-3.5" />
       <span>{{ cols }}×{{ rows }}</span>
     </div>
 
     <div class="flex items-center gap-1 shrink-0">
-      <Cpu class="size-3" />
+      <Cpu class="size-3.5" />
       <span>{{ fontSize }}px</span>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/TerminalTabs.vue b/src/modules/terminal/components/TerminalTabs.vue
index ea21857..6f0183c 100644
--- a/src/modules/terminal/components/TerminalTabs.vue
+++ b/src/modules/terminal/components/TerminalTabs.vue
@@ -1,14 +1,47 @@
 <script setup lang="ts">
 /**
- * 终端标签栏。
+ * 终端页的会话标签栏（终端页头部的左侧部分）。
  *
- * 职责：展示会话列表、切换、关闭、拖动重排、新建。
- * 不含任何终端渲染逻辑——标签只是会话的「视图句柄」。
+ * 职责：展示会话列表、切换、关闭、拖动重排、新建会话。
+ * 不含任何终端渲染逻辑 —— 标签只是会话的「视图句柄」。
+ *
+ * # 视觉规格为什么与模块 Tabs 对齐
+ *
+ * 会话标签曾经是「浏览器标签」样式（px-2.5 py-1.5、两行信息），与模块级 Tabs
+ * 并排时读起来像两套互不相干的导航，叠加出「终端软件内嵌在 Thing 里」的观感。
+ * 现在统一为：text-xs font-medium、h-7、rounded-md、激活态 bg-accent，
+ * 与模块 Tabs 同高同字重；完整信息（副标题、sessionId）放悬停提示。
+ * 「新建」入口同理走 `Button` 的 ghost 变体 + `Tooltip`；提示的锚点用一层包裹 div
+ * （菜单触发器不能直接当 Tooltip 的 as-child 子节点，见 TerminalToolbar 里的说明）。
+ *
+ * # 新建入口为什么是下拉而不是单个「+」
+ *
+ * 终端页里换 shell 与连主机的频率不低于新建本地会话，而原实现只有「+」（只能
+ * 新建上一次用过的 shell），想连主机必须切到「主机」页再点连接。改成下拉后
+ * 两个入口都在手边，且与模块的主机/密钥配置天然联动（列表直接来自 store）。
  */
-import { ref, watch } from 'vue'
-import { Plus, X, TerminalSquare, Lock, Loader2, AlertTriangle } from '@lucide/vue'
+import { computed, ref, watch } from 'vue'
+import {
+  AlertTriangle,
+  ChevronDown,
+  Loader2,
+  Lock,
+  Plus,
+  Server,
+  TerminalSquare,
+  X
+} from '@lucide/vue'
 import { VueDraggable } from 'vue-draggable-plus'
+import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
 import { useTerminalStore } from '@/stores/terminalStore'
 import type { SessionInfo } from '@/types/terminal'
 
@@ -24,8 +57,13 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'select', id: string): void
   (e: 'close', id: string): void
-  (e: 'new'): void
+  /** 新建本地会话；shellId 为空时用上次/默认的 shell */
+  (e: 'new', shellId?: string): void
+  /** 新建 SSH 会话 */
+  (e: 'connect', hostId: string): void
   (e: 'reorder', ids: string[]): void
+  /** 跳转到模块的主机页（新建菜单里的「管理主机」） */
+  (e: 'manage-hosts'): void
 }>()
 
 /**
@@ -75,9 +113,12 @@ function onDragUpdate() {
   )
 }
 
-/** 当前正在被鼠标悬停的标签（用于 alway 显示关闭按钮 vs 仅悬停显示） */
+/** 当前正在被鼠标悬停的标签（用于始终显示关闭按钮 vs 仅悬停显示） */
 const hoveredId = ref<string | null>(null)
 
+/** 「新建」菜单是否展开：展开期间收起它的 Tooltip，避免提示压在菜单上 */
+const newMenuOpen = ref(false)
+
 function stateIcon(s: SessionInfo) {
   if (s.state === 'connecting' || s.state === 'authenticating') return Loader2
   if (s.state === 'failed') return AlertTriangle
@@ -93,35 +134,33 @@ function labelOf(s: SessionInfo) {
   return store.sessionLabel(s)
 }
 
-/** 副标题：展示 cwd（本地）或 user@host（SSH），提供「我在哪」的一眼信息 */
-function subtitleOf(s: SessionInfo) {
-  return store.sessionSubtitle(s)
-}
-
-/** 会话类型图标：SSH 加锁标记，本地用终端标记 */
-function kindIcon(s: SessionInfo) {
-  return s.kind === 'ssh' ? Lock : TerminalSquare
-}
-
-/** Tooltip 全文：标题 + 副标题（cwd / user@host），替代标签内的两行排版 */
+/** Tooltip 全文：标题 + 副标题（cwd / user@host）+ 会话 id（排障用，不进主界面） */
 function tooltipText(s: SessionInfo) {
-  const sub = subtitleOf(s)
-  return sub ? `${labelOf(s)}\n${sub}` : labelOf(s)
+  const sub = store.sessionSubtitle(s)
+  const head = sub ? `${labelOf(s)}\n${sub}` : labelOf(s)
+  return `${head}\n会话 ID：${s.id}`
 }
+
+/** 可新建的本地 Shell（只列启用项，与设置页的可见性规则一致） */
+const enabledShells = computed(() => store.shells.filter(s => s.enabled))
+
+/** 已配置的 SSH 主机（按名称排；数据量小，直接排序而不是分组折叠） */
+const sshHosts = computed(() =>
+  [...store.hosts].sort((a, b) =>
+    a.config.name.localeCompare(b.config.name, 'zh-CN')
+  )
+)
 </script>
 
 <template>
-  <!-- shrink-0 而不是 flex-1：主区是纵向 flex，标签行是固定高度的头部，
-       用 flex-1 会与下方面板区平分剩余高度，标签芯片垂直悬在拉高出
-       的空白中间（窗口栏高度异常的根因） -->
-  <div class="flex items-center gap-1 min-w-0 shrink-0">
+  <div class="flex items-center gap-1 min-w-0 flex-1">
     <!--
       不要加 `target=".tab-track"`。
 
       `target` 是给**跨容器拖拽**用的（把元素从 A 列表拖到 B 列表），它会被解析成
       `$el.querySelector(target)`（见 vue-draggable-plus 源码 `R(v)` / `Sn(t, e)`）。
-      `querySelector` **只搜后代，不匹配元素自身** —— 而 `.tab-track` 正是这个组件
-      根元素自己的类名，所以必然返回 `null`，继而 `new Sortable(null)` 抛
+      `querySelector` **只搜后代，不匹配元素自身** —— 而 `.tab-track` 正是这个元素
+      自己的类名，所以必然返回 `null`，继而 `new Sortable(null)` 抛
       「`el` must be an HTMLElement, not [object Null]」。
 
       单容器内排序**本来就不需要 target**：`v-model` 绑定的数组顺序就是拖拽结果。
@@ -130,18 +169,14 @@ function tooltipText(s: SessionInfo) {
     <VueDraggable
       v-model="localList"
       :animation="150"
-      class="tab-track flex items-center gap-1 min-w-0 overflow-x-auto scrollbar-none"
+      class="tab-track flex items-center gap-1 min-w-0 flex-1 overflow-x-auto scrollbar-none"
       @update:model-value="onDragUpdate"
     >
-      <!--
-        标签只显示单行标题；完整信息（标题 + cwd/user@host 副标题）放 Tooltip，
-        与其他模块的悬停提示范式一致。此前副标题直接排在标签里，标签变成两行高。
-      -->
       <Tooltip v-for="s in localList" :key="s.id">
         <TooltipTrigger as-child>
           <div
-            class="group relative flex items-center gap-1.5 shrink-0 max-w-[220px] px-2.5 py-1.5
-                   rounded-md cursor-pointer select-none transition-colors"
+            class="group relative flex items-center gap-1.5 shrink-0 max-w-[176px] h-7 px-2.5
+                   rounded-md cursor-pointer select-none text-xs font-medium transition-colors"
             :class="
               s.id === activeId
                 ? 'bg-accent text-accent-foreground'
@@ -153,16 +188,16 @@ function tooltipText(s: SessionInfo) {
           >
             <!-- 类型图标 / 状态指示：连接中用旋转的 loader，失败用警告三角 -->
             <component
-              :is="stateIcon(s) || kindIcon(s)"
+              :is="stateIcon(s) || (s.kind === 'ssh' ? Lock : TerminalSquare)"
               class="size-3.5 shrink-0"
               :class="{
                 'animate-spin': isBusy(s),
-                'text-red-500': s.state === 'failed',
+                'text-danger': s.state === 'failed',
                 'text-muted-foreground/60': s.state === 'closed'
               }"
             />
 
-            <span class="text-xs truncate">{{ labelOf(s) }}</span>
+            <span class="truncate">{{ labelOf(s) }}</span>
 
             <!-- 未读小圆点：有输出但当前未激活 -->
             <span
@@ -196,20 +231,65 @@ function tooltipText(s: SessionInfo) {
       </Tooltip>
     </VueDraggable>
 
-    <!-- 新建按钮：固定在标签滚动区之外，避免被长标签列表挤到看不见 -->
-    <button
-      class="shrink-0 size-6 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="新建本地会话"
-      @click="emit('new')"
-    >
-      <Plus class="size-3.5" />
-    </button>
+    <!--
+      新建：固定在标签滚动区之外，避免被长标签列表挤到看不见。
+      Tooltip 的锚点是一层包裹 div（不能直接套在菜单触发器上，见 TerminalToolbar
+      里同一处说明）；DropdownMenu 不绑 `v-model:open`，只监听 `@update:open`。
+    -->
+    <Tooltip :disabled="newMenuOpen">
+      <TooltipTrigger as-child>
+        <div class="inline-flex shrink-0">
+          <DropdownMenu @update:open="newMenuOpen = $event">
+            <DropdownMenuTrigger as-child>
+              <Button variant="ghost" size="sm" class="shrink-0 h-7 gap-0.5 px-1.5">
+                <Plus class="size-3.5" />
+                <ChevronDown class="size-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" class="w-56">
+        <DropdownMenuLabel>本地 Shell</DropdownMenuLabel>
+        <DropdownMenuItem
+          v-for="sh in enabledShells"
+          :key="sh.id"
+          @click="emit('new', sh.id)"
+        >
+          <TerminalSquare class="size-4" />{{ sh.name }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="enabledShells.length === 0" disabled>
+          没有可用的 Shell（到设置页探测）
+        </DropdownMenuItem>
+
+        <template v-if="sshHosts.length > 0">
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel>SSH 主机</DropdownMenuLabel>
+          <DropdownMenuItem
+            v-for="h in sshHosts"
+            :key="h.config.id"
+            @click="emit('connect', h.config.id)"
+          >
+            <Lock class="size-4" />
+            <span class="truncate">{{ h.config.name }}</span>
+            <span class="ml-auto text-[10px] text-muted-foreground shrink-0">
+              {{ h.config.username ? `${h.config.username}@` : '' }}{{ h.config.host }}
+            </span>
+          </DropdownMenuItem>
+        </template>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem @click="emit('manage-hosts')">
+          <Server class="size-4" />管理主机…
+        </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>新建会话</TooltipContent>
+    </Tooltip>
   </div>
 </template>
 
 <style scoped>
-/* 标签栏横向滚动但不显示滚动条：滚动条会吃掉 8px 高度，让标签栏显得脏 */
+/* 标签栏横向滚动但不显示滚动条：滚动条会吃掉高度，让标签栏显得脏 */
 .scrollbar-none {
   scrollbar-width: none;
 }
diff --git a/src/modules/terminal/components/TerminalToolbar.vue b/src/modules/terminal/components/TerminalToolbar.vue
index da82758..3dd4160 100644
--- a/src/modules/terminal/components/TerminalToolbar.vue
+++ b/src/modules/terminal/components/TerminalToolbar.vue
@@ -1,45 +1,125 @@
 <script setup lang="ts">
 /**
- * 终端工具栏：包裹当前会话的常用动作。
+ * 终端页**控制栏右侧的会话级操作组**（整行位于终端卡片顶部）。
  *
- * 设计原则：**只放「标签栏放不下的会话级动作」**。新建/关闭/切换在标签栏已有，
- * 这里不重复；放的是搜索、字号、清屏、独立窗口这类低频但需要显式入口的操作。
+ * # 与标签栏的分工
+ *
+ * 新建/切换/关闭在标签栏（左侧），这里只放「作用于当前会话」的动作：
+ * 历史、片段、搜索、字体、清屏、独立窗口，以及收进「更多」菜单的次要动作。
+ *
+ * # 命令历史 / 命令片段为什么在这里（2026-09-22）
+ *
+ * 它们原本是模块「记录」页的两个分区，用户要「找一条以前敲过的命令」得先离开
+ * 终端、切到一个整页、再点一次页内分区开关 —— 三次动作只为了往命令行上填一行字。
+ * 现在它们是控制栏上紧挨着会话标签的两个 popover（`HistoryPopover` /
+ * `SnippetPopover`），填完即收起、回到终端。整页的排版（页头工具条、分区开关、
+ * 底部提示行）随之消失，那本来是为「页面」准备的结构，对浮层是纯浪费。
+ *
+ * 放在**最左**（搜索之前）而不是收进「更多」菜单：这是高频取用动作，
+ * 与「高频动作外露、低频配置性动作入菜单」的取舍一致。
+ *
+ * 两个浮层的开合状态由 `useRecordPopovers` 的模块级 ref 持有 ——
+ * 快捷键（Ctrl+Shift+H / S）与触发按钮必须读写同一份状态，见该文件说明。
+ * 触发器本身也不在这里：`HistoryPopover` / `SnippetPopover` 各自是「按钮 + 浮层」
+ * 的整体（内容、开合、编辑对话框都在内部），本组件只负责摆放位置。
+ *
+ * # 为什么用「更多」菜单而不是全部铺成图标
+ *
+ * 会话级动作有十来个（端口转发、文件面板、会话日志、日志位置、模板、AI 助手…）。
+ * 全铺成图标会占掉半行宽度，把左侧的会话标签挤到只剩一两个可见 ——
+ * 而标签是终端页最主要的导航。取舍与主机/密钥页一致：**高频动作外露，
+ * 低频配置性动作入菜单**。
+ *
+ * # 字号为什么收进 popover
+ *
+ * 原先「缩小 / 放大 / 重置」是三个并排图标：图标语义弱（`-` / `+` / 回退箭头放在
+ * 终端语境里没有唯一含义），且占用了三个按钮的宽度却只服务一件事。收成一个
+ * 「字体」按钮 + popover（滑块 + 当前值 + 重置）后，语义一目了然，也能直接跳到
+ * 想要的字号，而不是连点七八次。
+ *
+ * # 按钮一律用 Button 的 ghost 变体
+ *
+ * 这里曾经是自定义的 `.icon-btn` 类（hover 用中性的 `--accent` + `--foreground`），
+ * 与全项目「图标按钮 hover = 主题色字 + 半透明主题色底（`--primary-soft`）」
+ * 的规范不一致 —— 那是本项目统一在 `buttonVariants.ghost` 里定义的唯一口径。
+ * 现在直接用 `Button variant="ghost"`，不再自己写 hover 样式。
+ *
+ * # 提示用 Tooltip 而不是 title
+ *
+ * 原生 `title` 有约 1 秒延迟、样式不受主题控制、且无法承载换行说明。
+ * 全项目（侧栏、下载器等）的图标按钮都用 `Tooltip` + `TooltipContent`。
+ *
+ * 菜单触发器的提示要额外绕一步：Tooltip 的锚点用一层**包裹 div**，不能直接把
+ * `TooltipTrigger` 套在 `DropdownMenuTrigger` 上，也不要让它们互相当 as-child 子节点
+ * —— 那样菜单会点不开（详见模板里「更多」处的说明）。同时 DropdownMenu 不可绑
+ * `v-model:open`（受控 open 同样会让菜单打不开），只监听 `@update:open`。
+ *
+ * 提示一律 `side="bottom"`：本行的按钮位于卡片（或独立窗口）最顶部，
+ * 向上弹的提示会被窗口上边缘裁掉。
  */
 import { ref } from 'vue'
 import {
+  ChevronDown,
+  ChevronUp,
+  Eraser,
   ExternalLink,
   FileText,
   FolderOpen,
   FolderTree,
   LayoutTemplate,
-  Minus,
+  MoreHorizontal,
   Network,
-  Plus,
+  Pencil,
   RotateCcw,
   Search,
-  Eraser,
   Sparkles,
-  X,
-  ChevronDown,
-  ChevronUp
+  Type,
+  X
 } from '@lucide/vue'
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Slider } from '@/components/ui/slider'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import HistoryPopover from './HistoryPopover.vue'
+import SnippetPopover from './SnippetPopover.vue'
+import type { SessionInfo } from '@/types/terminal'
 
-// 模板中直接使用 `sessionId` / `title` / `searching` 等，script 内无需局部变量
-defineProps<{
+const props = defineProps<{
+  /** 当前会话 id（null 表示没有会话，动作全部禁用） */
   sessionId: string | null
-  /** 会话标题（用于显示「当前操作对象」） */
-  title: string
+  /** 当前会话（历史/片段需要它来判来源、过滤适用片段） */
+  session: SessionInfo | undefined
   /** 搜索面板是否展开 */
   searching: boolean
-  /** 是否有匹配结果的反馈文案（由父组件在搜索后设置） */
+  /** 搜索反馈文案（如「无匹配」） */
   searchHint?: string
-  /** 当前会话是否为 SSH（决定是否显示文件面板按钮） */
+  /** 当前会话是否为 SSH（决定是否显示 SSH 专属动作） */
   isSsh: boolean
   /** 文件面板是否展开 */
   sftpVisible: boolean
   /** 当前会话是否正在记录日志 */
   logging: boolean
+  /** 当前生效字号（含视图级临时覆盖，popover 里作为滑块初值） */
+  fontSize: number
+  /**
+   * 独立窗口模式（TerminalWindow 复用本组件时置真）。
+   *
+   * 隐藏三类只对「主窗口的终端页」成立的动作：
+   * - 「在独立窗口中打开」——自己就是那个窗口；
+   * - 文件面板 / 端口转发 / 会话模板 —— 它们开的是终端页里的面板与分屏布局，
+   *   独立窗口没有那套容器。
+   * 保留的动作（搜索 / 字体 / 清屏 / 重命名 / AI 助手 / 会话日志）都只依赖 store
+   * 与当前会话，在两种形态下语义一致。
+   */
+  standalone?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -48,12 +128,14 @@ const emit = defineEmits<{
   (e: 'search', keyword: string): void
   (e: 'search-next', keyword: string): void
   (e: 'search-prev', keyword: string): void
+  /** 字号增量（父组件把它交给 stream.bumpFont，正负均可） */
   (e: 'font', delta: number): void
   (e: 'font-reset'): void
   (e: 'clear'): void
   (e: 'detach'): void
+  (e: 'rename'): void
   (e: 'toggle-sftp'): void
-  /** 打开端口转发对话框（仅 SSH 会话显示按钮） */
+  /** 打开端口转发对话框（仅 SSH 会话显示菜单项） */
   (e: 'open-forwards'): void
   /** 开关当前会话的日志记录 */
   (e: 'toggle-logging'): void
@@ -65,15 +147,15 @@ const emit = defineEmits<{
   (e: 'open-ai'): void
 }>()
 
-/** 搜索输入（受控于工具栏，回车触发） */
+/** 搜索输入（受控于本组件，回车触发） */
 const keyword = ref('')
 
 /**
  * 每次查找都要把关键词随事件带出去。
  *
  * 早期版本只发 `search-next`（不带参数），依赖父组件「记住上次的关键词」——
- * 但父组件并不持有工具栏的输入框内容，导致首次按 Enter 时搜索栏是空的、
- * 什么都不会发生。关键词是工具栏的局部状态，只有这里知道它是什么，
+ * 但父组件并不持有这里的输入框内容，导致首次按 Enter 时搜索栏是空的、
+ * 什么都不会发生。关键词是本组件的局部状态，只有这里知道它是什么，
  * 因此必须由这里显式传出。
  */
 function onSearchNext() {
@@ -90,188 +172,226 @@ function closeSearch() {
   keyword.value = ''
   emit('toggle-search')
 }
+
+/** 「字体」popover 开合 */
+const fontOpen = ref(false)
+/** 「更多」菜单是否展开：展开期间收起它的 Tooltip，避免提示压在菜单上 */
+const moreMenuOpen = ref(false)
+
+/**
+ * 滑块 → 字号增量。
+ *
+ * 不新增「设置字号」的接口：`stream.bumpFont(delta)` 已经带上下限收敛（6–48），
+ * 传增量即可。这里用当前生效字号做基准 —— `bumpFont` 内部同样以
+ * 「临时覆盖值 ?? 设置值」为基准，两者一致，因此「基准 + 增量 = 目标值」。
+ */
+function onFontSlide(v: number[] | undefined) {
+  const raw = v?.[0]
+  if (raw === undefined) return
+  const delta = Math.round(raw) - props.fontSize
+  if (delta !== 0) emit('font', delta)
+}
 </script>
 
 <template>
-  <div class="shrink-0 flex items-center gap-1 px-2 h-9 border-b border-border bg-card/20">
-    <!-- 当前会话标识：工具栏的动作都作用于它，必须显式写出来 -->
-    <div class="flex items-center gap-1.5 min-w-0 px-1">
-      <span class="text-xs font-medium truncate max-w-[220px]">{{ title || '无会话' }}</span>
-      <span v-if="sessionId" class="text-[10px] text-muted-foreground/60 shrink-0">
-        {{ sessionId }}
-      </span>
-    </div>
+  <div class="flex items-center gap-1 shrink-0">
+    <!--
+      ===== 命令历史 / 命令片段（浮层，紧邻会话标签） =====
 
-    <div class="flex-1" />
+      这两个组件是「按钮 + 浮层」的整体（触发器、内容、开合状态、编辑对话框都在
+      各自内部），这里只负责摆位置 —— 见 HistoryPopover / SnippetPopover 的文件头。
+    -->
+    <HistoryPopover :session-id="sessionId" :session="session" />
+    <SnippetPopover :session-id="sessionId" :session="session" />
+
+    <div class="w-px h-4 bg-border mx-0.5 shrink-0" />
 
     <!-- ===== 搜索 ===== -->
     <div v-if="searching" class="flex items-center gap-1">
-      <div class="relative">
-        <Input
-          v-model="keyword"
-          placeholder="查找…"
-          class="h-6 w-[160px] text-xs"
-          autofocus
-          @keydown.enter="onSearchNext"
-          @keydown.shift.enter="onSearchPrev"
-          @keydown.esc="closeSearch"
-        />
-      </div>
-      <button
-        class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent"
-        title="上一个（Shift+Enter）"
-        @click="onSearchPrev"
-      >
-        <ChevronUp class="size-3.5" />
-      </button>
-      <button
-        class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent"
-        title="下一个（Enter）"
-        @click="onSearchNext"
-      >
-        <ChevronDown class="size-3.5" />
-      </button>
-      <button
-        class="size-6 rounded flex items-center justify-center text-muted-foreground hover:bg-accent"
-        title="关闭搜索"
-        @click="closeSearch"
-      >
-        <X class="size-3.5" />
-      </button>
+      <Input
+        v-model="keyword"
+        placeholder="查找…"
+        class="h-7 w-[150px] text-xs"
+        autofocus
+        @keydown.enter="onSearchNext"
+        @keydown.shift.enter="onSearchPrev"
+        @keydown.esc="closeSearch"
+      />
+      <!-- 无匹配时给一行文字反馈：只有箭头变灰的话，用户会以为搜索没生效 -->
+      <span v-if="searchHint" class="text-[10px] text-warning shrink-0">
+        {{ searchHint }}
+      </span>
+
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button variant="ghost" size="icon-sm" @click="onSearchPrev">
+            <ChevronUp class="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">上一个匹配（Shift+Enter）</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button variant="ghost" size="icon-sm" @click="onSearchNext">
+            <ChevronDown class="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">下一个匹配（Enter）</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button variant="ghost" size="icon-sm" @click="closeSearch">
+            <X class="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">关闭搜索</TooltipContent>
+      </Tooltip>
     </div>
-    <button
-      v-else
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="搜索"
-      @click="emit('toggle-search')"
-    >
-      <Search class="size-3.5" />
-    </button>
 
-    <div class="w-px h-4 bg-border mx-0.5" />
+    <Tooltip v-else>
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="icon-sm" @click="emit('toggle-search')">
+          <Search class="size-3.5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">搜索输出内容</TooltipContent>
+    </Tooltip>
 
-    <!-- ===== 字号 ===== -->
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="缩小字号"
-      @click="emit('font', -1)"
-    >
-      <Minus class="size-3.5" />
-    </button>
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="放大字号"
-      @click="emit('font', 1)"
-    >
-      <Plus class="size-3.5" />
-    </button>
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="重置字号"
-      @click="emit('font-reset')"
-    >
-      <RotateCcw class="size-3.5" />
-    </button>
-
-    <div class="w-px h-4 bg-border mx-0.5" />
-
-    <!-- 会话模板：不依赖当前会话（可以没有会话时先拉起一组） -->
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="会话模板"
-      @click="emit('open-templates')"
-    >
-      <LayoutTemplate class="size-3.5" />
-    </button>
-
-    <!-- AI 命令助手 -->
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors disabled:opacity-40"
-      :disabled="!sessionId"
-      title="AI 命令助手"
-      @click="emit('open-ai')"
-    >
-      <Sparkles class="size-3.5" />
-    </button>
+    <div class="w-px h-4 bg-border mx-0.5 shrink-0" />
 
     <!--
-      文件面板：只对 SSH 会话显示。
-      本地会话不给这个按钮，而不是给了再报错 —— 「看得见但点不动」比
-      「看不见」更让人困惑。
+      ===== 字体与字号（视图级临时覆盖，不写回设置） =====
+
+      触发器只留图标：控制栏的按钮一律同规格（icon-sm + ghost），
+      多一个「字体」二字就会把左侧的会话标签挤窄，而这行的宽度预算已经被
+      标签、历史、片段、搜索占满。语义由 Tooltip 承担（与清屏/独立窗口一致）。
+      Tooltip 锚在包裹 div 上、Popover 在自己的子树里用 as-child（同「更多」）。
     -->
-    <button
-      v-if="isSsh"
-      class="size-7 rounded flex items-center justify-center transition-colors
-             disabled:opacity-40"
-      :class="'text-muted-foreground hover:bg-accent hover:text-foreground'"
-      :disabled="!sessionId"
-      title="端口转发（-L / -R）"
-      @click="emit('open-forwards')"
-    >
-      <Network class="size-3.5" />
-    </button>
+    <Tooltip :disabled="fontOpen">
+      <TooltipTrigger as-child>
+        <div class="inline-flex shrink-0">
+          <Popover v-model:open="fontOpen">
+            <PopoverTrigger as-child>
+              <Button variant="ghost" size="icon-sm" class="shrink-0">
+                <Type class="size-3.5" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" class="w-64 p-3">
+              <div class="flex items-center justify-between">
+                <span class="text-xs font-medium">字号</span>
+                <span class="text-xs tabular-nums text-muted-foreground">{{ fontSize }} px</span>
+              </div>
+              <Slider
+                class="mt-3"
+                :model-value="[fontSize]"
+                :min="6"
+                :max="48"
+                :step="1"
+                @update:model-value="onFontSlide"
+              />
+              <div class="mt-3 flex items-center justify-between gap-2">
+                <span class="text-[11px] text-muted-foreground">只影响当前视图，不改设置</span>
+                <Button variant="ghost" size="xs" class="shrink-0 gap-1" @click="emit('font-reset')">
+                  <RotateCcw class="size-3" />重置
+                </Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">字体与字号</TooltipContent>
+    </Tooltip>
 
-    <button
-      v-if="isSsh"
-      class="size-7 rounded flex items-center justify-center transition-colors
-             disabled:opacity-40"
-      :class="sftpVisible
-        ? 'bg-accent text-foreground'
-        : 'text-muted-foreground hover:bg-accent hover:text-foreground'"
-      :disabled="!sessionId"
-      :title="sftpVisible ? '隐藏文件面板' : '显示文件面板'"
-      @click="emit('toggle-sftp')"
-    >
-      <FolderTree class="size-3.5" />
-    </button>
+    <div class="w-px h-4 bg-border mx-0.5 shrink-0" />
 
-    <button
-      class="size-7 rounded flex items-center justify-center transition-colors
-             disabled:opacity-40"
-      :class="logging
-        ? 'bg-primary/15 text-primary'
-        : 'text-muted-foreground hover:bg-accent hover:text-foreground'"
-      :disabled="!sessionId"
-      :title="logging ? '停止记录会话日志' : '开始记录会话日志'"
-      @click="emit('toggle-logging')"
-    >
-      <FileText class="size-3.5" />
-    </button>
-    <!-- 打开日志文件：只在记录中显示（日志路径此时才有意义） -->
-    <button
-      v-if="logging"
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors"
-      title="在文件管理器中显示日志文件"
-      @click="emit('open-log-dir')"
-    >
-      <FolderOpen class="size-3.5" />
-    </button>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="icon-sm" :disabled="!sessionId" @click="emit('clear')">
+          <Eraser class="size-3.5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">清屏</TooltipContent>
+    </Tooltip>
 
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors disabled:opacity-40"
-      :disabled="!sessionId"
-      title="清屏"
-      @click="emit('clear')"
-    >
-      <Eraser class="size-3.5" />
-    </button>
+    <Tooltip v-if="!standalone">
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="icon-sm" :disabled="!sessionId" @click="emit('detach')">
+          <ExternalLink class="size-3.5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">在独立窗口中打开</TooltipContent>
+    </Tooltip>
 
-    <button
-      class="size-7 rounded flex items-center justify-center text-muted-foreground
-             hover:bg-accent hover:text-foreground transition-colors disabled:opacity-40"
-      :disabled="!sessionId"
-      title="在独立窗口中打开"
-      @click="emit('detach')"
-    >
-      <ExternalLink class="size-3.5" />
-    </button>
+    <!--
+      ===== 更多（低频的配置性与 SSH 专属动作） =====
+
+      Tooltip 的锚点是一层**包裹 div**，而不是菜单触发器本身：
+      `TooltipTrigger` 与 `DropdownMenuTrigger` 若叠在一起（或把触发器当作它的
+      as-child 子节点），菜单会点不开。这里让 TooltipTrigger 只认这层普通元素，
+      菜单在自己的子树里照常用 `as-child`，两条 as-child 链互不相干。
+      注意 DropdownMenu **不能**绑 `v-model:open`（实测受控 open 会让菜单打不开），
+      只监听 `@update:open` 用于展开期间收起提示。
+    -->
+    <Tooltip :disabled="moreMenuOpen">
+      <TooltipTrigger as-child>
+        <div class="inline-flex shrink-0">
+          <DropdownMenu @update:open="moreMenuOpen = $event">
+            <DropdownMenuTrigger as-child>
+              <!--
+                「日志记录中」的高亮加在 svg 上：Button 的 ghost 变体已经给按钮设了
+                `text-fg-secondary`，同一元素上再写 `text-primary` 谁生效取决于
+                Tailwind 的输出顺序（不可靠）；落在 svg 上则确定覆盖继承色。
+              -->
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                class="shrink-0"
+                :class="logging ? '[&_svg]:text-primary' : ''"
+              >
+                <MoreHorizontal class="size-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" class="w-52">
+        <DropdownMenuItem :disabled="!sessionId" @click="emit('rename')">
+          <Pencil class="size-4" />{{ standalone ? '重命名会话' : '重命名标签' }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="!standalone" @click="emit('open-templates')">
+          <LayoutTemplate class="size-4" />会话模板
+        </DropdownMenuItem>
+        <DropdownMenuItem :disabled="!sessionId" @click="emit('open-ai')">
+          <Sparkles class="size-4" />AI 命令助手
+        </DropdownMenuItem>
+
+        <!--
+          SSH 专属动作：本地会话不给菜单项，而不是给了再报错。
+          「看得见但点不动」比「看不见」更让人困惑。
+          独立窗口里不给（面板与分屏属于终端页），见 standalone 的说明。
+        -->
+        <template v-if="isSsh && !standalone">
+          <DropdownMenuSeparator />
+          <DropdownMenuItem :disabled="!sessionId" @click="emit('open-forwards')">
+            <Network class="size-4" />端口转发（-L / -R）
+          </DropdownMenuItem>
+          <DropdownMenuItem :disabled="!sessionId" @click="emit('toggle-sftp')">
+            <FolderTree class="size-4" />{{ sftpVisible ? '隐藏文件面板' : '显示文件面板' }}
+          </DropdownMenuItem>
+        </template>
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem :disabled="!sessionId" @click="emit('toggle-logging')">
+          <FileText class="size-4" :class="logging ? 'text-primary' : ''" />
+          {{ logging ? '停止记录会话日志' : '开始记录会话日志' }}
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="logging" @click="emit('open-log-dir')">
+          <FolderOpen class="size-4" />在文件管理器中显示日志
+        </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">更多操作</TooltipContent>
+    </Tooltip>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/modules/terminal/components/TerminalWorkspace.vue b/src/modules/terminal/components/TerminalWorkspace.vue
new file mode 100644
index 0000000..2d545f5
--- /dev/null
+++ b/src/modules/terminal/components/TerminalWorkspace.vue
@@ -0,0 +1,917 @@
+<script setup lang="ts">
+/**
+ * 终端工作区（模块「终端」页的全部内容）。
+ *
+ * # 为什么从 TerminalModule 里拆出来
+ *
+ * 拆分前 TerminalModule.vue 有 1197 行，同时承担两件性质完全不同的事：
+ * (a) 模块级编排 —— 5 个 tab、tab 记忆、快捷键分发；
+ * (b) 终端页的全部交互 —— 搜索、右键菜单、分屏、SFTP、清屏、重命名、
+ * 模板拉起、AI 助手、会话日志、独立窗口。
+ *
+ * 后者是终端模块里体量最大、改动最频繁的部分，与前者混在一个文件里，
+ * 每次动终端页都要在 1200 行里找位置。现在 (b) 整体搬到这里，(a) 留在
+ * TerminalModule —— 它回到「薄编排」的形态，和 proxy / monitor 的模块根一致。
+ *
+ * # 布局口径（2026-09-21 把控制栏收进终端卡片）
+ *
+ * ```
+ * ┌───────────────────────────────────────────────┐
+ * │ ╭───────────────────────────────────────────╮ │
+ * │ │ [会话标签…] │ 历史 片段 搜索 字体 清屏 ⋯  │ │ ← 控制栏（h-9，带下边框）
+ * │ ├───────────────────────────────────────────┤ │
+ * │ │ 画布（xterm）            [SFTP 面板]       │ │
+ * │ ├───────────────────────────────────────────┤ │
+ * │ │ 状态栏：会话 · 目标 · 编码 · cwd · 尺寸    │ │ ← 与控制栏同高（h-9）
+ * │ ╰───────────────────────────────────────────╯ │
+ * └───────────────────────────────────────────────┘
+ * ```
+ *
+ * 控制栏最左的两个图标（历史 / 片段）各带一个浮层，见 `TerminalToolbar` 的文件头。
+ *
+ * 上一版把「会话标签 + 操作组」放在卡片**外面**当作页面级工具条。结果是卡片里
+ * 只有画布与状态栏，控制栏反而悬在页面顶部 —— 一个终端窗口的控件应该长在窗口上，
+ * 而不是浮在它上面。现在三层（控制栏 / 画布 / 状态栏）同属一张卡片，卡片就是
+ * 「终端窗口」本身；页面上也不再多出一条既不属于模块 Tabs、也不属于卡片的横条。
+ *
+ * 上下两条栏同为 h-9 且都用 12px 字号：它们是同一块屏幕的边框，视觉上必须等高，
+ * 否则卡片看起来是歪的。
+ *
+ * # 面板为什么不销毁
+ *
+ * 切标签时**不销毁**非激活的 `TerminalPane`，只用 `v-show` 隐藏。
+ * xterm 实例的构造代价不小（解析字体度量、建 WebGL 上下文、分配回滚缓冲），
+ * 保留实例还能保住滚动位置与选区 —— 用户切回来时应该还是刚才那一屏。
+ * 代价是不活跃会话也持有 WebGL 上下文，超出上限时 `useXterm` 会自动回退到
+ * DOM 渲染器。
+ *
+ * # stream 为什么由父组件传入
+ *
+ * `useTerminalStream()` 内部的 `tabOrder` / `panes` / `activeSessionId`
+ * 是**每次调用各创建一份**的局部状态。父组件（模块根）需要 `activeSession`
+ * 去喂历史/片段面板，本组件需要 `panes` 去排分屏 —— 若两边各调一次，
+ * 就会出现两套独立的标签顺序与分屏状态。因此全模块只创建一次，
+ * 由父组件通过 prop 传下来。
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { AlertTriangle, ChevronsRight, Loader2, Plus, Server, TerminalSquare, X } from '@lucide/vue'
+import { toast } from 'vue-sonner'
+import { useTerminalStore } from '@/stores/terminalStore'
+import type { useTerminalStream } from '@/composables/useSessionStream'
+import TerminalPane from './TerminalPane.vue'
+import TerminalTabs from './TerminalTabs.vue'
+import TerminalToolbar from './TerminalToolbar.vue'
+import TerminalStatusBar from './TerminalStatusBar.vue'
+import TerminalContextMenu from './TerminalContextMenu.vue'
+import SftpPanel from './SftpPanel.vue'
+import ForwardPanel from './ForwardPanel.vue'
+import TemplatePanel from './TemplatePanel.vue'
+import AiPanel from './AiPanel.vue'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import type { SessionTemplate } from '@/types/terminal'
+
+const props = defineProps<{
+  /** 窗口级会话编排（只能由模块根创建一次，见文件头） */
+  stream: ReturnType<typeof useTerminalStream>
+  /** 模块初始化是否完成（完成前显示加载态） */
+  ready: boolean
+}>()
+
+const emit = defineEmits<{
+  /** 请求切换到模块的「主机」tab（空态与标签栏的「管理主机」入口） */
+  (e: 'go-hosts'): void
+}>()
+
+const store = useTerminalStore()
+
+const {
+  activeSessionId,
+  activeSession,
+  orderedSessions,
+  effectiveAppearance,
+  confirmDialog,
+  selectSession,
+  closeTab,
+  applyOrder,
+  newLocalTab,
+  newSshTab,
+  bumpFont,
+  resetFont,
+  resolveConfirm,
+  isSplit,
+  splitLayout,
+  panes,
+  resetPanesTo,
+  addPane,
+  splitRight,
+  splitDown,
+  closePane,
+  toggleSplitDirection
+} = props.stream
+
+// ===== 面板引用（用于调用 fit / 搜索 / 清屏） =====
+
+/** sessionId → TerminalPane 暴露的方法。用普通 Map：面板实例不需要响应式 */
+const paneRefs = new Map<string, InstanceType<typeof TerminalPane>>()
+
+function setPaneRef(sessionId: string, el: unknown) {
+  if (el) paneRefs.set(sessionId, el as InstanceType<typeof TerminalPane>)
+  else paneRefs.delete(sessionId)
+}
+
+function activePane() {
+  return activeSessionId.value ? paneRefs.get(activeSessionId.value) : undefined
+}
+
+/** 会话列表变化时清理面板引用，防止 Map 无限增长 */
+watch(
+  () => store.sessions.map(s => s.id).join(','),
+  () => {
+    const alive = new Set(store.sessions.map(s => s.id))
+    for (const id of [...paneRefs.keys()]) {
+      if (!alive.has(id)) paneRefs.delete(id)
+    }
+  }
+)
+
+// ===== SFTP 文件面板 =====
+
+/**
+ * 文件面板是**按会话**的开合状态（不全局开关）。
+ *
+ * 理由：面板显示的是「某个会话对应主机上的目录」，切到本地会话标签时
+ * 继续显示上一个 SSH 主机的文件会让人误以为在看本机 —— 那是个危险的误会。
+ * 因此面板只在 activeSession 是 SSH 时可用，且对每个会话独立记忆。
+ */
+const sftpVisible = ref(false)
+const sftpWidth = ref(420)
+
+const canShowSftp = computed(() => activeSession.value?.kind === 'ssh')
+
+/** 面板标题用的会话名（store 的派生方法需要看到 hosts，故在这层取） */
+const sftpSessionLabel = computed(() => store.sessionLabel(activeSession.value))
+
+// 切到非 SSH 会话时收起面板：见上面关于「误以为是本机」的说明
+watch(activeSessionId, () => {
+  if (!canShowSftp.value) sftpVisible.value = false
+})
+
+function toggleSftp() {
+  if (!canShowSftp.value) {
+    toast.info('文件管理器只对 SSH 会话可用（本地会话请用系统资源管理器）')
+    return
+  }
+  sftpVisible.value = !sftpVisible.value
+}
+
+/** 面板左边缘的拖拽调宽 */
+function startResizeSftp(e: MouseEvent) {
+  e.preventDefault()
+  const startX = e.clientX
+  const startW = sftpWidth.value
+  const onMove = (ev: MouseEvent) => {
+    // 向左拖是变宽：面板贴右边缘，宽度 = 起点到鼠标的距离
+    const next = startW + (startX - ev.clientX)
+    sftpWidth.value = Math.min(Math.max(280, next), window.innerWidth - 360)
+  }
+  const onUp = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+  }
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+}
+
+// ===== 端口转发 / 会话模板 / AI 助手（低频配置，用 Dialog） =====
+
+const forwardsOpen = ref(false)
+const templatesOpen = ref(false)
+const applyingTemplate = ref(false)
+const aiOpen = ref(false)
+
+/**
+ * 按模板拉起一组会话并排成布局。
+ *
+ * 逐条开会话：第 1 个作主面板（resetPanesTo 收敛布局），
+ * 其余依次 addPane —— 分屏方向沿用 splitDirection（默认左右）。
+ * 条目失败不中断整体（主机连不上不该挡住本地 Shell 拉起），
+ * 汇总成一条 toast；超分屏上限的孤儿会话按 splitTo 同款收掉。
+ */
+async function applyTemplate(t: SessionTemplate) {
+  if (applyingTemplate.value) return
+  applyingTemplate.value = true
+  const failures: string[] = []
+  let opened = 0
+  let first = true
+  try {
+    for (const e of t.entries.slice(0, 4)) {
+      try {
+        const info = e.kind === 'ssh' ? await newSshTab(e.targetId) : await newLocalTab()
+        if (!info) {
+          failures.push(`${e.label || '未知目标'}：没有可用的 Shell`)
+          continue
+        }
+        if (first) {
+          resetPanesTo(info.id)
+          first = false
+        } else if (!addPane(info.id)) {
+          // 超出分屏上限：把刚建的会话收掉，不留看不见的孤儿
+          await store.closeSession(info.id)
+          failures.push(`${e.label}：超出分屏上限`)
+          continue
+        }
+        opened++
+      } catch (err) {
+        failures.push(`${e.label || '未知目标'}：${String(err)}`)
+      }
+    }
+  } finally {
+    applyingTemplate.value = false
+  }
+  if (opened > 0 && failures.length === 0) {
+    toast.success(`已按模板「${t.name}」拉起 ${opened} 个会话`)
+  } else if (opened > 0) {
+    toast.warning(`已拉起 ${opened} 个，部分失败：${failures.join('；')}`)
+  } else {
+    toast.error(`模板「${t.name}」拉起失败：${failures.join('；') || '没有可用条目'}`)
+  }
+}
+
+/** 当前可见面板的会话 id（模板「保存当前布局」的捕获源） */
+const currentPaneIds = computed(() => {
+  if (panes.value.length > 0) return panes.value.map(p => p.sessionId)
+  return activeSessionId.value ? [activeSessionId.value] : []
+})
+
+/** 终端上下文：当前会话的选中文本（供 AI 理解「接着上一步做什么」） */
+function getTerminalContext(): string {
+  const id = activeSessionId.value
+  if (!id) return ''
+  return paneRefs.get(id)?.getSelection?.() ?? ''
+}
+
+/**
+ * 开关当前会话的日志。
+ *
+ * 成功提示里带日志路径——用户需要知道日志在哪才能在事后找到它；
+ * 开关状态本身由后端的 TERMINAL_STATE 事件刷新（SessionInfo.logging）。
+ */
+async function toggleLogging() {
+  const id = activeSessionId.value
+  const sess = activeSession.value
+  if (!id || !sess) return
+  try {
+    await store.toggleLogging(id, !sess.logging)
+    if (!sess.logging) {
+      const p = await store.logPath(id)
+      toast.success(p ? `已开始记录会话日志：${p}` : '已开始记录会话日志')
+    } else {
+      toast.success('已停止记录会话日志（文件已保留）')
+    }
+  } catch (e) {
+    toast.error(`切换日志记录失败：${String(e)}`)
+  }
+}
+
+/** 在文件管理器中显示当前日志文件 */
+async function openLogDir() {
+  const id = activeSessionId.value
+  if (!id) return
+  try {
+    const p = await store.logPath(id)
+    if (!p) {
+      toast.info('当前会话未开启日志')
+      return
+    }
+    await store.revealLocalPath(p)
+  } catch (e) {
+    toast.error(`打开日志位置失败：${String(e)}`)
+  }
+}
+
+// ===== 搜索 =====
+
+const searching = ref(false)
+const searchHint = ref('')
+
+function toggleSearch() {
+  searching.value = !searching.value
+  if (!searching.value) {
+    activePane()?.clearSearch?.()
+    searchHint.value = ''
+  }
+}
+
+function doSearch(keyword: string) {
+  const pane = activePane()
+  if (!pane) return
+  const found = pane.findNext?.(keyword)
+  searchHint.value = found === false ? '无匹配' : ''
+}
+
+function searchNext(keyword: string) {
+  const pane = activePane()
+  if (!pane) return
+  const found = pane.findNext?.(keyword)
+  searchHint.value = found === false ? '无匹配' : ''
+}
+
+function searchPrev(keyword: string) {
+  const pane = activePane()
+  if (!pane) return
+  const found = pane.findPrevious?.(keyword)
+  searchHint.value = found === false ? '无匹配' : ''
+}
+
+// ===== 会话操作 =====
+
+const creating = ref(false)
+
+/**
+ * 新建本地会话。
+ *
+ * `shellId` 由标签栏的「新建」下拉传入（用户明确选了某个 shell）；
+ * 从空态、快捷键、分屏进来的调用都不带参数，走「上次使用的 shell」。
+ */
+async function handleNewLocal(shellId?: string) {
+  if (creating.value) return
+  creating.value = true
+  try {
+    const info = await newLocalTab({ shellId })
+    // 新建标签后把分屏容器收敛到它：否则会看到上一个标签的分屏布局残留
+    if (info) resetPanesTo(info.id)
+  } catch (e) {
+    toast.error(`新建会话失败：${String(e)}`)
+  } finally {
+    creating.value = false
+  }
+}
+
+/** 从标签栏的「新建」下拉里选中已保存主机 → 建立 SSH 会话 */
+async function handleConnect(hostId: string) {
+  try {
+    const info = await newSshTab(hostId)
+    if (info) resetPanesTo(info.id)
+  } catch (e) {
+    // SSH 失败的具体原因（握手/认证/主机密钥）后端已写进 session.error，
+    // 这里只给一个总括提示，详细原因会显示在面板中央
+    toast.error(`连接失败：${String(e)}`)
+  }
+}
+
+// ===== 分屏 =====
+
+async function handleSplit(dir: 'right' | 'down') {
+  try {
+    const r = await (dir === 'right' ? splitRight() : splitDown())
+    if (!r.ok) toast.info(r.message)
+  } catch (e) {
+    toast.error(`分屏失败：${String(e)}`)
+  }
+}
+
+/** 分屏网格的 CSS 布局类（与 splitLayout 一一对应） */
+const splitGridClass = computed(() => {
+  switch (splitLayout.value) {
+    case 'v-split':
+      return 'grid-rows-2 grid-cols-1'
+    case 'h-split':
+      return 'grid-cols-2 grid-rows-1'
+    case 'grid':
+      return 'grid-cols-2 grid-rows-2'
+    default:
+      return 'grid-cols-1 grid-rows-1'
+  }
+})
+
+/**
+ * 实际渲染的面板列表：**全部会话常驻挂载**。
+ *
+ * 这是对文件头「全部保留实例，用 v-show 切换」承诺的落实。此前实现只渲染
+ * `panes` 里的会话，切标签会把其他会话的 TerminalPane 整个卸载——
+ * xterm 实例被 dispose、隐藏期间到达的输出因无订阅者被丢弃，
+ * 切回来就是一片空白（多标签基本不可用）。
+ *
+ * 现在的可见性规则：
+ * - 分屏激活时（`panes` 非空）：只有分屏组内的会话可见；
+ * - 单面板时：只有激活会话可见。
+ * 不在可见集里的会话保持挂载（display:none），照常接收输出。
+ */
+const renderPanes = computed(() => {
+  const visible = new Set(
+    panes.value.length > 0
+      ? panes.value.map(p => p.sessionId)
+      : activeSessionId.value
+        ? [activeSessionId.value]
+        : []
+  )
+  return orderedSessions.value.map(s => ({
+    id: `pane-${s.id}`,
+    sessionId: s.id,
+    hidden: !visible.has(s.id)
+  }))
+})
+
+async function handleDetach() {
+  const id = activeSessionId.value
+  if (!id) return
+  try {
+    await store.detachSession(id)
+    toast.success('已在独立窗口中打开')
+  } catch (e) {
+    toast.error(`打开独立窗口失败：${String(e)}`)
+  }
+}
+
+function handleClear() {
+  const id = activeSessionId.value
+  if (!id) return
+  const pane = paneRefs.get(id)
+  if (!pane) return
+  const shellKind = store.shells.find(s => s.id === store.sessionById(id)?.targetId)?.kind
+  // 清屏是「让 shell 执行清屏」而不是「从 xterm 缓冲里删掉」——
+  // 后者只是视觉上清了，向上滚动仍能看到旧内容，且 shell 的行计数会错乱
+  void store.clearSession(id, shellKind)
+  pane.clear?.()
+}
+
+// ===== 标签重排 =====
+
+/**
+ * 写回用户拖动后的标签顺序。
+ *
+ * 标签栏把拖动结果以「完整 id 列表」的形式抛上来，这里直接交给编排组合函数
+ * 的 `applyOrder` —— 由它负责过滤已消失的会话并补齐漏网的。
+ * 前端不做任何顺序推断（例如「谁到了谁前面」），因为拖动本身已经给出了完整答案，
+ * 再做推断只会引入「拖到末尾时位置漂移」这类边界问题。
+ */
+function handleReorder(ids: string[]) {
+  applyOrder(ids)
+}
+
+// ===== 右键菜单 =====
+
+const contextMenu = ref<{ sessionId: string; x: number; y: number } | null>(null)
+
+function closeContextMenu() {
+  contextMenu.value = null
+}
+
+/** 右键菜单的当前会话是否有选区（决定「复制」是否可用） */
+const contextHasSelection = computed(() => {
+  const id = contextMenu.value?.sessionId
+  if (!id) return false
+  return !!paneRefs.get(id)?.getSelection?.()
+})
+
+const behavior = computed(() => store.settings?.selection ?? null)
+
+/**
+ * 面板右键的统一入口。
+ *
+ * 三种行为共用这一个监听（`rightClick` 设置项决定走哪条）：
+ * - `menu`（默认）：弹出菜单。终端里的右键在不同软件里含义不同
+ *   （Windows Terminal 粘贴、PuTTY 弹菜单），猜测意图容易误操作，
+ *   因此默认给显式菜单。
+ * - `paste`：直接粘贴。习惯 X11 的用户会期待这个。
+ * - `select-word`：选中光标下的词，随后仍弹菜单 —— 只选中不弹菜单
+ *   等于给了一个「无法后续操作」的选区，用户还得再右键一次。
+ */
+function onPaneContextMenu(payload: { sessionId: string; x: number; y: number }) {
+  const mode = behavior.value?.rightClick ?? 'menu'
+
+  if (mode === 'paste') {
+    // 粘贴的目标是「发出右键的那块面板」，而不是当前激活标签 ——
+    // 两者在分屏或标签快速切换时可能不一致
+    activeSessionId.value = payload.sessionId
+    void doPaste()
+    return
+  }
+
+  if (mode === 'select-word') {
+    paneRefs.get(payload.sessionId)?.selectWordAt?.(payload.x, payload.y)
+  }
+
+  contextMenu.value = payload
+}
+
+async function doCopy() {
+  const id = contextMenu.value?.sessionId ?? activeSessionId.value
+  if (!id) return
+  const text = paneRefs.get(id)?.getSelection?.()
+  if (!text) {
+    toast.info('没有选中内容')
+    return
+  }
+  const payload =
+    (behavior.value?.trimTrailingNewline ?? true) && text.endsWith('\n')
+      ? text.replace(/\n+$/, '')
+      : text
+  try {
+    await navigator.clipboard.writeText(payload)
+  } catch (e) {
+    toast.error(`复制失败：${String(e)}`)
+  }
+  closeContextMenu()
+}
+
+/**
+ * 粘贴。
+ *
+ * 多行内容会先在终端里「攒着」而不是直接执行 —— 但 P0 不做确认弹窗，
+ * 因为 xterm 的 bracketed paste 模式（若 shell 启用）已经能让编辑器
+ * 正确处理多行。这里只负责把文本交给 PTY。
+ */
+async function doPaste() {
+  const id = contextMenu.value?.sessionId ?? activeSessionId.value
+  if (!id) return
+  try {
+    const text = await navigator.clipboard.readText()
+    if (!text) return
+    await store.write(id, text)
+  } catch (e) {
+    toast.error(`粘贴失败：${String(e)}`)
+  }
+  closeContextMenu()
+}
+
+function doSelectAll() {
+  const id = contextMenu.value?.sessionId ?? activeSessionId.value
+  if (!id) return
+  paneRefs.get(id)?.selectAll?.()
+  closeContextMenu()
+}
+
+function doClearFromMenu() {
+  const id = contextMenu.value?.sessionId
+  closeContextMenu()
+  if (id) {
+    activeSessionId.value = id
+    handleClear()
+  }
+}
+
+async function doCloseFromMenu() {
+  const id = contextMenu.value?.sessionId
+  closeContextMenu()
+  if (id) await closeTab(id)
+}
+
+function doRename() {
+  const id = contextMenu.value?.sessionId
+  closeContextMenu()
+  openRename(id)
+}
+
+/**
+ * 打开重命名对话框。
+ *
+ * 抽出来是因为有两处入口（右键菜单、工具栏「更多」菜单），原实现
+ * 在右键路径里**忘了打开对话框**——点了「重命名标签」什么都不发生。
+ * 两处共用同一个函数，这类「复制粘贴漏一行」的问题不会再出现。
+ */
+function openRename(id: string | null | undefined) {
+  if (!id) return
+  renameValue.value = store.sessionById(id)?.title ?? ''
+  renameTargetId.value = id
+  confirmRenameOpen.value = true
+}
+
+const confirmRenameOpen = ref(false)
+const renameTargetId = ref<string | null>(null)
+const renameValue = ref('')
+
+watch(confirmRenameOpen, v => {
+  if (!v) renameTargetId.value = null
+})
+
+async function submitRename() {
+  const id = renameTargetId.value
+  if (!id) return
+  const title = renameValue.value.trim()
+  if (!title) {
+    toast.error('名称不能为空')
+    return
+  }
+  try {
+    await store.renameSession(id, title)
+    confirmRenameOpen.value = false
+  } catch (e) {
+    toast.error(`重命名失败：${String(e)}`)
+  }
+}
+
+// ===== 生命周期 =====
+
+onMounted(() => {
+  // 点击任意处关闭右键菜单（冒泡阶段：面板自身的 click 也要能关掉菜单）
+  document.addEventListener('click', closeContextMenu)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeContextMenu)
+})
+
+/** 聚焦当前激活面板（供模块根在新建会话后调用，让键盘输入直接可用） */
+async function focusActivePane() {
+  await nextTick()
+  paneRefs.get(activeSessionId.value ?? '')?.focus?.()
+}
+
+/**
+ * 暴露给模块根的动作集合。
+ *
+ * 这些动作由**模块级快捷键**触发（见 TerminalModule 的 useTerminalKeys），
+ * 但状态与实现属于终端页（搜索框开合、右键菜单目标、SFTP 面板开合…），
+ * 因此模块根做一次转发。用显式清单而不是把整个 setup 作用域暴露出去：
+ * 新增动作时必须两边同时改，不会被静默漏掉。
+ *
+ * 标签导航类的动作（切标签、关标签、编号跳转）不在此列 —— 它们的状态在
+ * `useTerminalStream` 里，模块根可以直接调用。
+ */
+defineExpose({
+  doCopy,
+  doPaste,
+  toggleSearch,
+  handleClear,
+  handleNewLocal,
+  handleSplit,
+  handleDetach,
+  toggleSftp,
+  openRename,
+  focusActivePane
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-full min-h-0">
+    <!--
+      ===== 终端卡片：控制栏 + 画布 + 状态栏 =====
+
+      三层同属一张卡片 —— 卡片就是「终端窗口」本身。圆角与边框不再只是给
+      xterm 划边界（画布不是内容流，必须有边界），也是控制栏与状态栏的容器。
+
+      shadow-sm 与项目 `<Card>` 一致：终端卡片在页面里就是「一张卡片」，
+      别的页面卡片有阴影而这块没有，会让终端页看起来像没铺完的骨架。
+    -->
+    <div
+      class="flex-1 min-h-0 flex flex-col rounded-lg border border-border overflow-hidden bg-background shadow-sm"
+    >
+      <!--
+        控制栏：会话标签（左）+ 会话级操作（右）。
+        与状态栏同为 h-9；px-1.5 让首尾按钮不贴到卡片圆角上。
+      -->
+      <div class="shrink-0 flex items-center gap-1 h-9 px-1.5 border-b border-border">
+        <TerminalTabs
+          :sessions="orderedSessions"
+          :active-id="activeSessionId"
+          @select="selectSession"
+          @close="closeTab"
+          @new="handleNewLocal"
+          @connect="handleConnect"
+          @reorder="handleReorder"
+          @manage-hosts="emit('go-hosts')"
+        />
+
+        <div class="w-px h-4 bg-border shrink-0" />
+
+        <TerminalToolbar
+          :session-id="activeSessionId"
+          :session="activeSession"
+          :searching="searching"
+          :search-hint="searchHint"
+          :is-ssh="activeSession?.kind === 'ssh'"
+          :sftp-visible="sftpVisible"
+          :logging="activeSession?.logging ?? false"
+          :font-size="effectiveAppearance?.fontSize ?? 14"
+          @toggle-sftp="toggleSftp"
+          @open-forwards="forwardsOpen = true"
+          @toggle-logging="toggleLogging"
+          @open-log-dir="openLogDir"
+          @open-templates="templatesOpen = true"
+          @open-ai="aiOpen = true"
+          @rename="openRename(activeSessionId)"
+          @toggle-search="toggleSearch"
+          @search="doSearch"
+          @search-next="searchNext($event)"
+          @search-prev="searchPrev($event)"
+          @font="bumpFont($event)"
+          @font-reset="resetFont"
+          @clear="handleClear"
+          @detach="handleDetach"
+        />
+      </div>
+
+      <div class="flex-1 min-h-0 flex">
+        <!-- 主区 -->
+        <div class="flex-1 min-w-0 relative">
+          <!-- 加载态 -->
+          <div v-if="!props.ready" class="absolute inset-0 flex items-center justify-center">
+            <div class="flex flex-col items-center gap-3">
+              <Loader2 class="size-5 animate-spin text-muted-foreground" />
+              <p class="text-xs text-muted-foreground">正在初始化终端…</p>
+            </div>
+          </div>
+
+          <!-- 空态 -->
+          <div
+            v-else-if="orderedSessions.length === 0"
+            class="absolute inset-0 flex items-center justify-center"
+          >
+            <div class="flex flex-col items-center gap-4 text-center">
+              <TerminalSquare class="size-10 text-muted-foreground/25" />
+              <div>
+                <p class="text-sm text-muted-foreground mb-1">还没有打开的会话</p>
+                <p class="text-xs text-muted-foreground/70">
+                  点左上角的「+」新建本地 Shell 或连接已保存的主机
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <Button size="sm" class="gap-1.5" @click="handleNewLocal()">
+                  <Plus class="size-3.5" />新建本地会话
+                </Button>
+                <Button variant="outline" size="sm" class="gap-1.5" @click="emit('go-hosts')">
+                  <Server class="size-3.5" />管理主机
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 面板：全部保留实例，用 v-show 切换（见 renderPanes 说明） -->
+          <template v-else>
+            <!--
+              分屏容器。
+              1 个可见面板时就是普通全屏；2~4 个时按 splitLayout 排成 2 列或 2×2。
+              这里用 CSS grid 而不是嵌套 flex：分屏的维度组合是可枚举的
+              （单/左右/上下/2×2），网格能用一组静态类表达全部情形，
+              而 flex 需要嵌套 + 条件样式，逻辑会散在模板里。
+              隐藏面板（display:none）不占据网格单元，因此可见面板数决定布局。
+            -->
+            <div class="absolute inset-0 grid gap-px bg-border" :class="splitGridClass">
+              <div
+                v-for="p in renderPanes"
+                :key="p.id"
+                v-show="!p.hidden"
+                class="relative min-w-0 min-h-0"
+              >
+                <TerminalPane
+                  :ref="(el: any) => setPaneRef(p.sessionId, el)"
+                  :session-id="p.sessionId"
+                  :appearance="effectiveAppearance"
+                  :visible="!p.hidden"
+                  @focus="selectSession(p.sessionId)"
+                  @contextmenu="onPaneContextMenu"
+                />
+                <!-- 非聚焦面板的边框高亮：分屏时「输入会去哪里」必须一眼可见 -->
+                <div
+                  v-if="isSplit && p.sessionId === activeSessionId"
+                  class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-primary/40"
+                />
+                <!-- 分屏面板的关闭按钮（只移除面板，不杀会话） -->
+                <button
+                  v-if="isSplit"
+                  class="absolute top-0.5 right-0.5 z-10 size-5 rounded flex items-center justify-center
+                         bg-background/80 text-muted-foreground hover:text-foreground
+                         opacity-0 hover:opacity-100 transition-opacity"
+                  title="关闭此面板（会话保留）"
+                  @click.stop="selectSession(p.sessionId); closePane()"
+                >
+                  <X class="size-3" />
+                </button>
+              </div>
+            </div>
+
+            <!-- 分屏方向切换（仅两面板时有意义） -->
+            <button
+              v-if="panes.length === 2"
+              class="absolute bottom-2 right-2 z-10 h-6 px-2 rounded border border-border
+                     bg-background/90 text-[10px] text-muted-foreground hover:text-foreground"
+              :title="splitLayout === 'h-split' ? '改为上下排列' : '改为左右排列'"
+              @click="toggleSplitDirection"
+            >
+              {{ splitLayout === 'h-split' ? '⬍ 上下' : '⬌ 左右' }}
+            </button>
+          </template>
+        </div>
+
+        <!-- ===== SFTP 文件面板（仅 SSH 会话） ===== -->
+        <template v-if="sftpVisible && canShowSftp && activeSessionId">
+          <!-- 拖拽条：面板贴右边缘，向左拖变宽 -->
+          <div
+            class="shrink-0 w-1 cursor-col-resize hover:bg-primary/40 transition-colors"
+            title="拖动调整宽度"
+            @mousedown="startResizeSftp"
+          />
+          <aside class="shrink-0 border-l border-border" :style="{ width: `${sftpWidth}px` }">
+            <SftpPanel
+              :key="activeSessionId"
+              :session-id="activeSessionId"
+              :session-label="sftpSessionLabel"
+              :terminal-cwd="activeSession?.cwd ?? ''"
+              @close="sftpVisible = false"
+            />
+          </aside>
+        </template>
+
+        <!-- 独立窗口的会话提示条：该会话在主窗口不可交互 -->
+        <div
+          v-if="activeSession?.detached"
+          class="shrink-0 w-8 border-l border-border flex items-start justify-center pt-3"
+        >
+          <button
+            class="text-muted-foreground hover:text-foreground transition-colors"
+            title="该会话已在独立窗口中打开，点击收回"
+            @click="activeSessionId && store.attachSession(activeSessionId)"
+          >
+            <ChevronsRight class="size-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <!-- 状态栏：会话的客观事实（身份/状态/cwd/编码/尺寸） -->
+      <TerminalStatusBar
+        v-if="store.settings?.layout.showStatusBar !== false"
+        :session="activeSession"
+        :font-size="effectiveAppearance?.fontSize ?? 14"
+        :cols="activeSession?.cols"
+        :rows="activeSession?.rows"
+      />
+    </div>
+
+    <!-- ===== 右键菜单（与独立窗口共用同一份，见该组件的文件头） ===== -->
+    <TerminalContextMenu
+      v-if="contextMenu"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      :can-copy="contextHasSelection"
+      @copy="doCopy"
+      @paste="doPaste"
+      @select-all="doSelectAll"
+      @clear="doClearFromMenu"
+      @rename="doRename"
+      @close="doCloseFromMenu"
+    />
+
+    <!-- ===== 端口转发（P2，SSH 会话） ===== -->
+    <ForwardPanel
+      v-model:open="forwardsOpen"
+      :session-id="activeSessionId"
+      :session-label="sftpSessionLabel"
+    />
+
+    <!-- ===== 会话模板（P2） ===== -->
+    <TemplatePanel
+      v-model:open="templatesOpen"
+      :pane-ids="currentPaneIds"
+      @apply="applyTemplate"
+    />
+
+    <!-- ===== AI 命令助手（P2） ===== -->
+    <AiPanel v-model:open="aiOpen" :session-id="activeSessionId" :get-context="getTerminalContext" />
+
+    <!-- ===== 关闭运行中会话的确认 ===== -->
+    <Dialog :open="confirmDialog !== null" @update:open="v => !v && resolveConfirm(false)">
+      <DialogContent class="max-w-sm" :show-close-button="false">
+        <DialogHeader>
+          <!-- break-all：标题含无可断行的长路径（如 powershell.exe 全路径），不 加会横向撑破容器 -->
+          <DialogTitle class="text-base flex items-start gap-2 break-all">
+            <AlertTriangle class="size-4 shrink-0 text-warning" />
+            <span class="min-w-0">{{ confirmDialog?.title }}</span>
+          </DialogTitle>
+          <DialogDescription class="text-xs break-all">{{ confirmDialog?.message }}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" size="sm" @click="resolveConfirm(false)">取消</Button>
+          <Button variant="destructive" size="sm" @click="resolveConfirm(true)">关闭会话</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!-- ===== 重命名 ===== -->
+    <Dialog v-model:open="confirmRenameOpen">
+      <DialogContent class="max-w-sm">
+        <DialogHeader>
+          <DialogTitle class="text-base">重命名标签</DialogTitle>
+        </DialogHeader>
+        <input
+          v-model="renameValue"
+          class="w-full h-8 px-2.5 rounded-md border border-border bg-transparent
+                 text-sm outline-none focus:border-primary/60"
+          @keydown.enter="submitRename"
+        />
+        <DialogFooter>
+          <Button variant="outline" size="sm" @click="confirmRenameOpen = false">取消</Button>
+          <Button size="sm" @click="submitRename">保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
diff --git a/src/modules/terminal/components/hostForm.ts b/src/modules/terminal/components/hostForm.ts
index 43dd837..9e1cc8d 100644
--- a/src/modules/terminal/components/hostForm.ts
+++ b/src/modules/terminal/components/hostForm.ts
@@ -46,7 +46,9 @@ export function blankHost(id: string): SshHost {
     startupCommand: '',
     useProxy: false,
     jumpIds: [],
-    encoding: 'utf-8'
+    encoding: 'utf-8',
+    // 默认开：这是「命令历史 / cwd 跟踪能用」的开关，新建主机不该默认关掉
+    injectShellIntegration: true
   }
 }
 
@@ -75,7 +77,14 @@ export function normalizeHost(raw: Partial<SshHost>, id: string): SshHost {
     authMethod: raw.authMethod || base.authMethod,
     // 数组字段单独兜底：旧配置没有该字段时是 undefined，直接展开会盖掉 base 的 []
     jumpIds: Array.isArray(raw.jumpIds) ? raw.jumpIds : base.jumpIds,
-    encoding: raw.encoding || base.encoding
+    encoding: raw.encoding || base.encoding,
+    // 布尔字段同样单独兜底：旧配置里没有这个键，但**显式的 `undefined`**
+    // （`{...raw}` 会把它带进来）会盖掉 base 的 true，于是「老主机默认关闭注入」。
+    // 用 `typeof` 判断能把「没设置过」与「真的设成 false」区分开。
+    injectShellIntegration:
+      typeof raw.injectShellIntegration === 'boolean'
+        ? raw.injectShellIntegration
+        : base.injectShellIntegration
   }
 }
 
diff --git a/src/modules/terminal/components/hostTrust.ts b/src/modules/terminal/components/hostTrust.ts
new file mode 100644
index 0000000..92f2897
--- /dev/null
+++ b/src/modules/terminal/components/hostTrust.ts
@@ -0,0 +1,113 @@
+/**
+ * 主机配置（`SshHost`）与 known_hosts 记录（`KnownHost`）的关联规则。
+ *
+ * # 为什么两侧不是一对一
+ *
+ * - **一台主机可能有多条记录**：SSH 在协商阶段会拿到服务端提供的多种主机密钥
+ *   （ed25519 / rsa / ecdsa），每种算法各存一条指纹。所以「这台主机可信吗」
+ *   要看的是**一组**记录，而不是一条。
+ * - **记录可能没有对应的主机配置**：直接 `ssh user@addr` 连过一次、或配置被删掉
+ *   之后，记录仍在。这类「孤儿记录」只能靠地址去认，没有主机的显示名可用。
+ *
+ * 因此关联只能用「地址 + 端口」这一对稳定字段（忽略大小写，域名与 IP 的字面量
+ * 就是连接时用的那个地址）。**刻意不做**「端口缺省按 22 处理」之外的推断：
+ * 记录里存的是实际连接端口，配置里也是，两者不一致就是不同的目标。
+ *
+ * 归组/匹配逻辑集中在这里而不是各面板各写一遍：主机页的信任徽标、信任详情
+ * popover、孤儿区块三处都要用同一套判定，写三份必然在边界上分叉
+ * （表现为「徽标说已信任、详情里却找不到记录」）。
+ */
+import type { HostView, KnownHost, SshHost } from '@/types/terminal'
+
+/** 匹配键：地址（小写）+ 端口。忽略 keyType —— 同一地址可能有多条算法记录 */
+export function addressKey(host: string, port: number): string {
+  return `${host.trim().toLowerCase()}:${port}`
+}
+
+/** 单条记录的唯一键（地址 + 端口 + 算法），用作列表 key 与「忘记」的入参标识 */
+export function recordKey(h: KnownHost): string {
+  return `${addressKey(h.host, h.port)}/${h.keyType}`
+}
+
+/** 按地址归组：一次遍历后供主机行与孤儿判定反复查，避免每行各扫一遍全表 */
+export function groupByAddress(records: KnownHost[]): Map<string, KnownHost[]> {
+  const map = new Map<string, KnownHost[]>()
+  for (const r of records) {
+    const k = addressKey(r.host, r.port)
+    const list = map.get(k)
+    if (list) list.push(r)
+    else map.set(k, [r])
+  }
+  return map
+}
+
+/** 某台主机配置对应的全部记录（可能为空 = 还没成功连过） */
+export function recordsForHost(
+  grouped: Map<string, KnownHost[]>,
+  config: Pick<SshHost, 'host' | 'port'>
+): KnownHost[] {
+  return grouped.get(addressKey(config.host, config.port)) ?? []
+}
+
+/**
+ * 未被任何主机配置引用的记录。
+ *
+ * 这些记录同样是**有效且必须能管理**的：它们可能来自「连过但没存配置」，
+ * 或来自配置已删除的主机 —— 指纹变更提示同样会拦住用户，忘记它们的入口
+ * 不能因为「没有对应主机」而消失。
+ */
+export function orphanRecords(records: KnownHost[], hosts: HostView[]): KnownHost[] {
+  const known = new Set(hosts.map(v => addressKey(v.config.host, v.config.port)))
+  return records.filter(r => !known.has(addressKey(r.host, r.port)))
+}
+
+/**
+ * 信任状态。
+ *
+ * - `none`：还没有记录（从未成功连过，或刚清空过 known_hosts）
+ * - `trusted`：有记录且从未变更过
+ * - `changed`：有过指纹变更 —— 需要用户看一眼变更历史再决定
+ */
+export type TrustState = 'none' | 'trusted' | 'changed'
+
+export function trustState(records: KnownHost[]): TrustState {
+  if (records.length === 0) return 'none'
+  return records.some(r => r.history.length > 0) ? 'changed' : 'trusted'
+}
+
+/** 指纹变更次数合计（同一主机的多种算法记录合并计数） */
+export function changeCount(records: KnownHost[]): number {
+  return records.reduce((n, r) => n + r.history.length, 0)
+}
+
+/** 算法展示名（`ssh-ed25519` → `Ed25519`） */
+export function keyTypeLabel(t: string): string {
+  const map: Record<string, string> = {
+    'ssh-ed25519': 'Ed25519',
+    'ssh-rsa': 'RSA',
+    'ecdsa-sha2-nistp256': 'ECDSA 256',
+    'ecdsa-sha2-nistp384': 'ECDSA 384',
+    'ecdsa-sha2-nistp521': 'ECDSA 521',
+    'ssh-dss': 'DSA'
+  }
+  return map[t] ?? t
+}
+
+/** RFC3339 → 本地可读时间（非法值原样返回，便于发现问题而不是显示「Invalid Date」） */
+export function formatDateTime(rfc3339: string): string {
+  if (!rfc3339) return '—'
+  const d = new Date(rfc3339)
+  if (Number.isNaN(d.getTime())) return rfc3339
+  return d.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+/** 主机地址的可读形式（非 22 端口才带端口） */
+export function addressLabel(host: string, port: number): string {
+  return port === 22 ? host : `${host}:${port}`
+}
\ No newline at end of file
diff --git a/src/modules/terminal/index.ts b/src/modules/terminal/index.ts
index 4d33711..f08626e 100644
--- a/src/modules/terminal/index.ts
+++ b/src/modules/terminal/index.ts
@@ -1,6 +1,24 @@
 import type { ModuleConfig } from '@/types/module'
 import type { SearchIndexItem } from '@/stores/searchIndex'
 
+/**
+ * 全局搜索索引。
+ *
+ * # `tab` 只能表达「哪个 tab」（现存取舍）
+ *
+ * 模块 Tabs 于 2026-09-20 由 7 项收敛为 5 项，2026-09-22 又收敛为 4 项
+ * （终端 / 主机 / 密钥 / 设置）：
+ *
+ * - 「已知主机」不再是一个 tab，而是主机页里的**信任徽标**（点开看指纹与
+ *   变更历史）与列表末尾的**孤儿记录区块**，因此它指向 `hosts`；
+ * - 「命令历史」「命令片段」变成终端页控制栏上的两个 popover，因此指向
+ *   `terminal`。
+ *
+ * **已知的取舍**：`SearchIndexItem.tab` 只能表达「哪个 tab」，无法表达
+ * 「tab 里的哪一个 popover / 哪台主机」，所以搜「命令片段」会落在终端页、
+ * 还需要再点一下控制栏的按钮。要为一次点击去改 moduleTabsStore /
+ * useModuleTabs / TitleBar 三处共享基建，收益不抵成本，故不做。
+ */
 const searchItems: SearchIndexItem[] = [
   {
     title: '终端',
@@ -16,7 +34,7 @@ const searchItems: SearchIndexItem[] = [
   },
   {
     title: 'SSH 主机',
-    description: '管理 SSH 主机连接（含跳板机与自动登录）',
+    description: '管理 SSH 主机连接（含跳板机、主机密钥信任状态与自动登录）',
     keywords: ['ssh', '主机', '服务器', '远程', '连接', 'host', '远程登录'],
     tab: 'hosts'
   },
@@ -28,9 +46,9 @@ const searchItems: SearchIndexItem[] = [
   },
   {
     title: '已知主机（known_hosts）',
-    description: '查看与清理主机密钥指纹记录，导出供审阅',
+    description: '主机行的信任徽标查看密钥指纹与变更历史，可单条忘记、导入导出',
     keywords: ['known_hosts', '指纹', '主机密钥', '信任', 'host key', '安全'],
-    tab: 'knownHosts'
+    tab: 'hosts'
   },
   {
     title: '终端外观设置',
@@ -46,9 +64,21 @@ const searchItems: SearchIndexItem[] = [
   },
   {
     title: '终端独立窗口',
-    description: '把会话拖出主窗口，独立窗口承载单个会话',
-    keywords: ['独立窗口', '分离', 'detach', '新窗口', '多屏'],
+    description: '把会话拖出主窗口，独立窗口承载单个会话；Ctrl+3 可直接唤起新建列表',
+    keywords: ['独立窗口', '分离', 'detach', '新窗口', '多屏', 'ctrl+3'],
     tab: 'settings'
+  },
+  {
+    title: '命令历史',
+    description: '终端控制栏的「历史」按钮里按主机与会话检索已执行命令，支持收藏与再次填入',
+    keywords: ['历史', 'history', '命令', '收藏', '检索', '重放'],
+    tab: 'terminal'
+  },
+  {
+    title: '命令片段',
+    description: '终端控制栏的「片段」按钮里取用常用命令模板，支持占位符与危险命令二次确认',
+    keywords: ['片段', 'snippet', '模板', '占位符', '常用命令'],
+    tab: 'terminal'
   }
 ]
 
@@ -79,6 +109,6 @@ export const moduleConfig: ModuleConfig = {
       // 真正的清理在应用退出时由 Rust 侧 cleanup_on_exit 统一处理。
     }
   },
-  // 排在音乐（15）之后、剪贴板（20）之前：终端是高频入口，应靠前
-  order: 18
+  // 默认第 4 位：音乐 / 代理 / 下载 / 终端 / 翻译 / 硬件监控 / 截图 / 剪贴板 / 快捷面板 / 开发工具
+  order: 40
 }
diff --git a/src/modules/terminal/openWindow.ts b/src/modules/terminal/openWindow.ts
new file mode 100644
index 0000000..d553091
--- /dev/null
+++ b/src/modules/terminal/openWindow.ts
@@ -0,0 +1,54 @@
+/**
+ * 终端「新建独立窗口」的窗口创建入口。
+ *
+ * # 为什么由前端创建这个窗口
+ *
+ * 会话窗口必须由 Rust 创建（label 要等于 `terminal-window-<sessionId>`，
+ * 见 `terminal/window.rs::label_for`）。但「选择会话」这一步发生在会话存在之前，
+ * 拿不到 sessionId，因此这个**临时选择窗口**由前端用 `WebviewWindow` 直接创建
+ * （label 前缀仍是 `terminal-window-`，以便命中 `capabilities/terminal-window.json`
+ * 的 `terminal-window-*` 授权）。
+ *
+ * 用户选完目标后，这个窗口会调用 `terminal_detach_session` —— 由 Rust 用规范 label
+ * 开真正的会话窗口 —— 然后关掉自己。
+ */
+import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
+import { createLogger } from '@/lib/logger'
+
+const logger = createLogger('terminal')
+
+/** label 前缀必须落在 `terminal-window-*`（capability 的 glob）里 */
+const LABEL_PREFIX = 'terminal-window-new-'
+
+/** 打开选择窗口。失败时抛出（调用方负责提示），否则用户按了快捷键只会看到「没反应」 */
+export async function openTerminalPickerWindow(): Promise<void> {
+  const label = `${LABEL_PREFIX}${Date.now().toString(36)}`
+  const win = new WebviewWindow(label, {
+    url: 'index.html#new-terminal-window',
+    title: '新建终端窗口',
+    // 与 Rust 侧会话窗口同尺寸并同样居中：选完后本窗口关闭、会话窗口出现，
+    // 视觉上是「原地变成会话窗口」而不是两个窗口在屏幕上跳
+    width: 1000,
+    height: 620,
+    minWidth: 460,
+    minHeight: 320,
+    resizable: true,
+    decorations: false,
+    shadow: true,
+    center: true,
+    // **隐藏创建**：窗口初始底色是白的，而深浅色主题要等前端读 localStorage 后才应用
+    // —— 直接显示会先闪一下纯白窗口再变深色。由 NewTerminalWindow.vue 应用完主题
+    // （含 setBackgroundColor）再自己 show + setFocus。
+    visible: false,
+    focus: false,
+  })
+
+  // 创建是异步的：label 冲突、系统限制等失败必须显式抛出
+  win.once('tauri://error', e => {
+    logger.error(`打开终端选择窗口失败：${String(e)}`)
+  })
+  await new Promise<void>((resolve, reject) => {
+    win.once('tauri://created', () => resolve())
+    win.once('tauri://error', e => reject(new Error(String(e))))
+  })
+}
\ No newline at end of file
diff --git a/src/modules/terminal/useRecordPopovers.ts b/src/modules/terminal/useRecordPopovers.ts
new file mode 100644
index 0000000..07e13a7
--- /dev/null
+++ b/src/modules/terminal/useRecordPopovers.ts
@@ -0,0 +1,33 @@
+/**
+ * 终端页控制栏上「历史 / 片段」两个 popover 的开合状态。
+ *
+ * # 为什么是模块级单例，而不是让工具栏自己持有
+ *
+ * 这两个 popover 有两个入口：控制栏上的触发按钮，以及快捷键
+ * （`Ctrl+Shift+H` / `Ctrl+Shift+S`，见 `TerminalModule` 的快捷键分发）。
+ * 若状态留在 `TerminalToolbar` 内部，快捷键就必须走「模块 → 终端页 → 工具栏」
+ * 三层转发，工具栏还得为此暴露一套命令式 API（`toggleHistory()` 之类）——
+ * 为一个布尔值付出的接口成本过高。放在模块级单例里，两边读写的是同一个 ref。
+ *
+ * 这是对模块内「状态由编排层持有、通过 props/事件传递」约定的一处**有意偏离**，
+ * 理由如上：这两个面板是**视图级浮层**，不属于任何一方的业务状态。
+ *
+ * 独立窗口是另一个 WebView 入口、另一份 JS 运行时，因此这里天然按窗口隔离，
+ * 不会出现「主窗口打开片段、独立窗口跟着弹出来」的问题。
+ */
+import { ref } from 'vue'
+
+/** 命令历史 popover */
+export const historyPopoverOpen = ref(false)
+/** 命令片段 popover */
+export const snippetsPopoverOpen = ref(false)
+
+/** 翻转 / 显式设置「历史」popover（快捷键与触发按钮共用） */
+export function toggleHistoryPopover(open?: boolean) {
+  historyPopoverOpen.value = open ?? !historyPopoverOpen.value
+}
+
+/** 翻转 / 显式设置「片段」popover */
+export function toggleSnippetsPopover(open?: boolean) {
+  snippetsPopoverOpen.value = open ?? !snippetsPopoverOpen.value
+}
\ No newline at end of file
diff --git a/src/modules/translate/TranslateModule.vue b/src/modules/translate/TranslateModule.vue
index d3613f2..c83f8cf 100644
--- a/src/modules/translate/TranslateModule.vue
+++ b/src/modules/translate/TranslateModule.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { History, Languages, Settings } from '@lucide/vue'
+import { computed, onMounted, ref } from 'vue'
 import { useModuleTabs } from '@/lib/use-module-tabs'
 import { useTranslateStore } from '@/stores/translateStore'
 import { createLogger } from '@/lib/logger'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Tabs, TabsContent } from '@/components/ui/tabs'
 import TranslateWorkbench from './components/TranslateWorkbench.vue'
 import TranslateSettings from './components/TranslateSettings.vue'
 import TranslateHistory from './components/TranslateHistory.vue'
@@ -13,11 +12,13 @@ const logger = createLogger('translate')
 const store = useTranslateStore()
 
 const activeTab = ref('workbench')
-const tabsListRef = useModuleTabs('translate', activeTab, [
+/** 设置页走外部滚动（容器随内容增长），翻译 / 历史页占满高度 */
+const isSettingsTab = computed(() => activeTab.value === 'settings')
+useModuleTabs('translate', activeTab, [
   { value: 'workbench', label: '翻译' },
   { value: 'history', label: '历史' },
   { value: 'settings', label: '设置' }
-])
+], { alwaysVisible: true })
 
 onMounted(async () => {
   try {
@@ -29,31 +30,28 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="h-full overflow-hidden p-6 flex flex-col">
-    <Tabs v-model="activeTab" class="flex-1 min-h-0 flex flex-col">
-      <div ref="tabsListRef" class="shrink-0">
-        <TabsList class="grid w-full max-w-md grid-cols-3 !bg-transparent !p-0 !shadow-none">
-          <TabsTrigger value="workbench" class="gap-1.5">
-            <Languages class="size-3.5" />翻译
-          </TabsTrigger>
-          <TabsTrigger value="history" class="gap-1.5">
-            <History class="size-3.5" />历史
-          </TabsTrigger>
-          <TabsTrigger value="settings" class="gap-1.5">
-            <Settings class="size-3.5" />设置
-          </TabsTrigger>
-        </TabsList>
-      </div>
-
-      <TabsContent value="workbench" class="flex-1 min-h-0 flex flex-col mt-4 tab-animate">
+  <!--
+    设置页改为「外部滚动」：内容超出视口时由主滚动区（ModuleContainer）接管，
+    与其他模块一致；翻译 / 历史页仍需占满高度，故按 tab 切换容器约束。
+  -->
+  <div
+    class="p-5 flex flex-col"
+    :class="isSettingsTab ? 'min-h-full' : 'h-full overflow-hidden'"
+  >
+    <Tabs
+      v-model="activeTab"
+      class="flex flex-col"
+      :class="isSettingsTab ? undefined : 'flex-1 min-h-0'"
+    >
+      <TabsContent value="workbench" class="flex-1 min-h-0 flex flex-col tab-animate">
         <TranslateWorkbench />
       </TabsContent>
 
-      <TabsContent value="history" class="flex-1 min-h-0 flex flex-col mt-4 tab-animate">
+      <TabsContent value="history" class="flex-1 min-h-0 flex flex-col tab-animate">
         <TranslateHistory />
       </TabsContent>
 
-      <TabsContent value="settings" class="flex-1 min-h-0 overflow-hidden mt-4 tab-animate">
+      <TabsContent value="settings" class="tab-animate">
         <TranslateSettings />
       </TabsContent>
     </Tabs>
diff --git a/src/modules/translate/TranslatePopup.vue b/src/modules/translate/TranslatePopup.vue
index 0b36db2..6c3d435 100644
--- a/src/modules/translate/TranslatePopup.vue
+++ b/src/modules/translate/TranslatePopup.vue
@@ -5,6 +5,7 @@ import { listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { invoke } from '@tauri-apps/api/core'
 import { CircleAlert, Copy, LoaderCircle, Pin, PinOff, X } from '@lucide/vue'
 import { EVENTS, STORAGE_KEYS } from '@/lib/constants'
+import { applyStoredAccent } from '@/lib/theme'
 import { labelOf, promptNameOf } from '@/lib/translate/languages'
 import {
   copyToClipboard,
@@ -611,6 +612,8 @@ async function applyTheme() {
   root.classList.remove('dark', 'effect-mica', 'effect-acrylic', 'effect-normal')
   root.classList.add(`effect-${effect}`)
   if (isDark) root.classList.add('dark')
+  // 主题色：与主窗口共用同一份设置
+  applyStoredAccent(root, isDark ? 'dark' : 'light', STORAGE_KEYS.appSettings)
 
   const shell = rootEl.value
   try {
@@ -697,7 +700,7 @@ onUnmounted(() => {
     <!-- 取词失败：占用同一块位置给出原因与替代做法 -->
     <template v-if="payload?.error">
       <div class="flex items-start gap-2">
-        <CircleAlert class="mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+        <CircleAlert class="mt-0.5 size-4 shrink-0 text-warning-text" />
         <div class="min-w-0 flex-1 space-y-1">
           <p class="leading-relaxed">{{ payload.error }}</p>
           <p class="text-[11px] text-muted-foreground">
@@ -846,7 +849,7 @@ onUnmounted(() => {
            两侧内部滚动区各自封顶 25rem，超出即内部滚动 + 同步。
            注意不能把 max-height 放在 grid 容器上：auto 行不受容器 max-height 钳制，
            长内容会把行撑高、内部滚动条消失。 -->
-      <div class="grid min-h-[18rem] shrink-0 grid-cols-2 items-stretch gap-2">
+      <div class="grid min-h-72 shrink-0 grid-cols-2 items-stretch gap-2">
         <!-- 左：原文（可编辑，翻译以编辑框内容为准） -->
         <div
           v-if="payload.text || payload.source === 'panel'"
@@ -856,7 +859,7 @@ onUnmounted(() => {
           <textarea
             ref="textareaRef"
             v-model="editableText"
-            class="no-scrollbar field-sizing-content min-h-14 max-h-[25rem] w-full flex-auto resize-none overflow-y-auto bg-transparent leading-relaxed outline-none placeholder:text-muted-foreground/60"
+            class="no-scrollbar field-sizing-content min-h-14 max-h-100 w-full flex-auto resize-none overflow-y-auto bg-transparent leading-relaxed outline-none placeholder:text-muted-foreground/60"
             spellcheck="false"
             placeholder="输入或粘贴要翻译的内容…（Enter 翻译 · Alt+Enter 换行）"
             title="可直接编辑原文；Enter 翻译，Alt+Enter 换行"
@@ -888,7 +891,7 @@ onUnmounted(() => {
           @mousedown="enableEditing()"
           @scroll.capture="onTargetScroll"
         >
-          <ScrollArea class="min-h-0 max-h-[25rem] flex-auto">
+          <ScrollArea class="min-h-0 max-h-100 flex-auto">
             <div class="px-0.5 pb-1">
               <div v-if="translating" class="space-y-1 py-1">
                 <div class="flex items-center gap-2 text-muted-foreground">
diff --git a/src/modules/translate/components/EngineEditor.vue b/src/modules/translate/components/EngineEditor.vue
index 632643b..99d6045 100644
--- a/src/modules/translate/components/EngineEditor.vue
+++ b/src/modules/translate/components/EngineEditor.vue
@@ -311,7 +311,7 @@ const remove = () =>
     <div
       v-if="testResult"
       class="space-y-1 rounded-md border p-2.5 text-[12px]"
-      :class="testResult.ok ? 'bg-emerald-50 dark:bg-emerald-950/20' : 'bg-red-50 dark:bg-red-950/20'"
+      :class="testResult.ok ? 'bg-success-soft' : 'bg-danger-soft'"
     >
       <div class="flex items-start gap-2">
         <CircleCheck v-if="testResult.ok" class="mt-0.5 size-3.5 shrink-0" />
diff --git a/src/modules/translate/components/TranslateHistory.vue b/src/modules/translate/components/TranslateHistory.vue
index abff834..cbc1352 100644
--- a/src/modules/translate/components/TranslateHistory.vue
+++ b/src/modules/translate/components/TranslateHistory.vue
@@ -131,7 +131,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex h-full min-h-0 flex-col">
-    <div class="mx-auto flex min-h-0 w-full max-w-3xl flex-col gap-3">
+    <div class="flex min-h-0 w-full flex-col gap-3">
       <!-- 工具条 -->
       <div class="flex shrink-0 flex-wrap items-center gap-2">
         <div class="relative min-w-56 flex-1">
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
                   <div class="flex-1" />
                   <button
                     class="rounded p-1 transition-colors hover:bg-accent"
-                    :class="{ 'text-amber-500': item.favorited }"
+                    :class="{ 'text-warning': item.favorited }"
                     :title="item.favorited ? '取消收藏' : '收藏'"
                     @click="store.toggleHistoryFavorite(item.id)"
                   >
diff --git a/src/modules/translate/components/TranslateSettings.vue b/src/modules/translate/components/TranslateSettings.vue
index f10acba..f09ce86 100644
--- a/src/modules/translate/components/TranslateSettings.vue
+++ b/src/modules/translate/components/TranslateSettings.vue
@@ -253,479 +253,477 @@ function templateWarning(text: string): string {
     正在读取设置…
   </div>
 
-  <div v-else class="h-full overflow-y-auto pb-2">
-    <div class="mx-auto max-w-3xl space-y-4">
-      <!-- ===== 引擎 ===== -->
-      <Card>
-        <CardHeader class="pb-3">
-          <CardTitle class="flex items-center gap-2 text-[14px]">
-            <Sparkles class="size-4" />
-            翻译引擎
-          </CardTitle>
-          <p class="text-[12px] text-muted-foreground">
-            同一类引擎可配置多个实例（如官方 API 与本地 Ollama 并存）。「自动」模式会按优先级依次尝试。
-          </p>
-        </CardHeader>
-        <CardContent class="space-y-3">
-          <div
-            v-for="view in store.engines"
-            :key="view.config.id"
-            class="rounded-lg border p-3"
-          >
-            <div class="flex items-center gap-2">
-              <span class="text-[13px] font-medium">{{ view.config.name }}</span>
-              <Badge variant="outline" class="text-[11px]">
-                {{ view.config.kind === 'ai' ? 'AI · OpenAI 兼容' : view.config.kind }}
-              </Badge>
-              <Badge variant="secondary" class="text-[11px] tabular-nums">
-                P{{ view.config.priority }}
-              </Badge>
-              <Badge v-if="view.ready" variant="secondary" class="text-[11px]">就绪</Badge>
+  <div v-else class="space-y-4 pb-2">
+    <!-- ===== 引擎 ===== -->
+    <Card>
+      <CardHeader class="pb-3">
+        <CardTitle class="flex items-center gap-2 text-[14px]">
+          <Sparkles class="size-4 text-primary" />
+          翻译引擎
+        </CardTitle>
+        <p class="text-[12px] text-muted-foreground">
+          同一类引擎可配置多个实例（如官方 API 与本地 Ollama 并存）。「自动」模式会按优先级依次尝试。
+        </p>
+      </CardHeader>
+      <CardContent class="space-y-3">
+        <div
+          v-for="view in store.engines"
+          :key="view.config.id"
+          class="rounded-lg border p-3"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-[13px] font-medium">{{ view.config.name }}</span>
+            <Badge variant="outline" class="text-[11px]">
+              {{ view.config.kind === 'ai' ? 'AI · OpenAI 兼容' : view.config.kind }}
+            </Badge>
+            <Badge variant="secondary" class="text-[11px] tabular-nums">
+              P{{ view.config.priority }}
+            </Badge>
+            <Badge v-if="view.ready" variant="secondary" class="text-[11px]">就绪</Badge>
 
-              <div class="flex-1" />
+            <div class="flex-1" />
 
-              <span class="text-[11px] text-muted-foreground">{{ view.config.model }}</span>
-              <Switch
-                :model-value="view.config.enabled"
-                @update:model-value="
-                  v =>
-                    store
-                      .saveEngine({ ...view.config, enabled: Boolean(v) })
-                      .catch(e => toast.error(String(e)))
-                "
-              />
-              <Button
-                variant="outline"
-                size="sm"
-                @click="editingId = editingId === view.config.id ? '' : view.config.id"
-              >
-                {{ editingId === view.config.id ? '收起' : '编辑' }}
-              </Button>
-            </div>
-
-            <p v-if="view.issue" class="mt-1.5 flex items-center gap-1.5 text-[12px] text-amber-700 dark:text-amber-300">
-              <CircleAlert class="size-3.5 shrink-0" />
-              {{ view.issue }}
-            </p>
-
-            <div v-if="editingId === view.config.id" class="mt-3">
-              <EngineEditor :view="view" @deleted="editingId = ''" />
-            </div>
-          </div>
-
-          <Separator />
-
-          <div class="space-y-2">
-            <Label class="text-[12px]">新增引擎</Label>
-            <div class="flex gap-2">
-              <Select v-model="presetKey">
-                <SelectTrigger class="h-8 w-44 text-[12px]"><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem v-for="p in ENGINE_PRESETS" :key="p.key" :value="p.key">
-                    {{ p.label }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-              <Input
-                v-model="newEngineName"
-                class="h-8 flex-1 text-[13px]"
-                :placeholder="selectedPreset?.label ?? '引擎名称'"
-              />
-              <Button size="sm" @click="addEngine">
-                <Plus />
-                新增
-              </Button>
-            </div>
-            <p v-if="selectedPreset" class="text-[11px] text-muted-foreground">
-              {{ selectedPreset.description }}
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
-      <!-- ===== 通用 ===== -->
-      <Card>
-        <CardHeader class="pb-3">
-          <CardTitle class="text-[14px]">通用</CardTitle>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <div class="flex items-center gap-3">
-            <Label class="w-32 shrink-0 text-[12px]">默认目标语言</Label>
-            <Select
-              :model-value="store.settings?.defaultTarget"
-              @update:model-value="v => patch({ defaultTarget: String(v) })"
-            >
-              <SelectTrigger class="h-8 w-40 text-[12px]"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="l in targetLanguages" :key="l.code" :value="l.code">
-                  {{ l.label }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div class="flex items-center gap-3">
-            <Label class="w-32 shrink-0 text-[12px]">默认引擎</Label>
-            <Select
-              :model-value="store.settings?.defaultEngineId"
-              @update:model-value="v => patch({ defaultEngineId: String(v) })"
-            >
-              <SelectTrigger class="h-8 w-52 text-[12px]"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="auto">自动（按优先级降级）</SelectItem>
-                <SelectItem
-                  v-for="e in store.engines"
-                  :key="e.config.id"
-                  :value="e.config.id"
-                >
-                  {{ e.config.name }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">失败自动降级</Label>
-            <div>
-              <Switch
-                :model-value="store.settings?.autoFallback"
-                @update:model-value="v => patch({ autoFallback: Boolean(v) })"
-              />
-              <p class="mt-1 text-[11px] text-muted-foreground">
-                开启后「自动」模式会在某个源失败时尝试下一个；关闭则只用默认引擎。
-                <br />无论开关如何，手动指定某个引擎时都不会降级——否则「指定了 A 却拿到 B 的译文」更难排查。
-              </p>
-            </div>
-          </div>
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">走代理模块</Label>
-            <div>
-              <Switch
-                :model-value="store.settings?.useProxy"
-                @update:model-value="v => patch({ useProxy: Boolean(v) })"
-              />
-              <p class="mt-1 text-[11px] text-muted-foreground">
-                默认关闭。自建 LibreTranslate 在境内、MyMemory 与 DeepSeek 均可直连；
-                仅当翻译服务部署在境外或直连被拦截时打开。
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <!-- ===== 历史 ===== -->
-      <Card v-if="store.settings">
-        <CardHeader class="pb-3">
-          <CardTitle class="text-[14px]">历史记录</CardTitle>
-          <p class="text-[12px] text-muted-foreground">
-            搜索走 SQLite FTS5 三元组索引；不足 3 个字符的关键词无法命中该索引，会退回全表扫描
-            ——仍然搜得到，只是更慢。
-          </p>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">记录历史</Label>
-            <div>
-              <Switch
-                :model-value="store.settings.history.enabled"
-                @update:model-value="v => patchHistory({ enabled: Boolean(v) })"
-              />
-              <p class="mt-1 text-[11px] text-muted-foreground">
-                关闭后不再写入新记录，已有记录不受影响。
-              </p>
-            </div>
-          </div>
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-1.5 text-[12px]">保留条数</Label>
-            <div>
-              <Input
-                v-model.number="maxItemsDraft"
-                type="number"
-                :min="HISTORY_MAX_ITEMS_MIN"
-                :max="HISTORY_MAX_ITEMS_MAX"
-                step="100"
-                class="h-8 w-32 text-[12px]"
-                @blur="commitMaxItems"
-                @keydown.enter="commitMaxItems"
-              />
-              <p class="mt-1 text-[11px] text-muted-foreground">
-                超出后按时间淘汰最旧的非收藏记录（{{ HISTORY_MAX_ITEMS_MIN }}–{{ HISTORY_MAX_ITEMS_MAX }}）。
-                收藏条目不占这个额度，收藏得足够多时总占用会超过上限。
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <!-- ===== 提示词模板 ===== -->
-      <Card v-if="templates">
-        <CardHeader class="pb-3">
-          <CardTitle class="text-[14px]">提示词模板</CardTitle>
-          <p class="text-[12px] text-muted-foreground">
-            <code class="rounded bg-muted px-1">{'{target}'}</code> 会替换为目标语言的自然语言名称，
-            <code class="rounded bg-muted px-1">{'{source}'}</code> 为源语言名称。
-          </p>
-        </CardHeader>
-        <CardContent class="space-y-3">
-          <div class="space-y-1.5">
-            <Label class="text-[12px]">翻译（默认模式）</Label>
-            <Textarea v-model="templates.translate" class="min-h-24 text-[12px]" />
-            <p v-if="templateWarning(templates.translate)" class="text-[11px] text-amber-700 dark:text-amber-300">
-              {{ templateWarning(templates.translate) }}
-            </p>
-          </div>
-
-          <details class="rounded-md border p-2.5">
-            <summary class="cursor-pointer select-none text-[12px] font-medium">
-              备用模板：润色 / 解释 / 总结（计划 P3 接入划词弹窗）
-            </summary>
-            <div class="mt-2 space-y-3">
-              <div class="space-y-1.5">
-                <Label class="text-[12px]">润色</Label>
-                <Textarea v-model="templates.polish" class="min-h-16 text-[12px]" />
-              </div>
-              <div class="space-y-1.5">
-                <Label class="text-[12px]">解释</Label>
-                <Textarea v-model="templates.explain" class="min-h-16 text-[12px]" />
-              </div>
-              <div class="space-y-1.5">
-                <Label class="text-[12px]">总结</Label>
-                <Textarea v-model="templates.summarize" class="min-h-16 text-[12px]" />
-              </div>
-            </div>
-          </details>
-
-          <Button size="sm" :disabled="!templatesDirty || savingTemplates" @click="saveTemplates">
-            <LoaderCircle v-if="savingTemplates" class="animate-spin" />
-            <Save v-else />
-            保存提示词
-          </Button>
-        </CardContent>
-      </Card>
-
-      <!-- ===== 翻译面板与划词取词 ===== -->
-      <Card v-if="store.settings">
-        <CardHeader class="pb-3">
-          <CardTitle class="text-[14px]">翻译面板</CardTitle>
-          <p class="text-[12px] text-muted-foreground">
-            按全局快捷键打开翻译面板：自动尝试读取<span class="text-foreground">当前划词</span>与
-            <span class="text-foreground">剪贴板首条</span>作为候选，↑↓ 选择、Enter 直接翻译；
-            也可以在原文框里手动输入（Enter 翻译，Alt+Enter 换行）。
-          </p>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <div class="flex items-center gap-3">
-            <Label class="w-32 shrink-0 text-[12px]">面板快捷键</Label>
-            <Input
-              v-model="shortcutDraft.panelShortcut"
-              class="h-8 w-40 text-[13px]"
-              placeholder="Ctrl+2"
-            />
-            <span class="text-[11px] text-muted-foreground">全局生效；留空禁用</span>
-          </div>
-
-          <div class="flex flex-wrap items-center gap-2 pl-[8.75rem]">
-            <Button size="sm" :disabled="!shortcutsDirty || applyingShortcuts" @click="applyShortcuts">
-              <LoaderCircle v-if="applyingShortcuts" class="animate-spin" />
-              <Save v-else />
-              应用快捷键
-            </Button>
-            <Button variant="outline" size="sm" @click="previewPopup">
-              <Sparkles />
-              预览面板
-            </Button>
-            <span class="text-[11px] text-muted-foreground">
-              预览用固定样例文本走完整链路，便于确认窗口与翻译都正常
-            </span>
-          </div>
-
-          <Separator />
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">读取当前划词</Label>
-            <div>
-              <Switch
-                :model-value="store.settings.selection.enabled"
-                @update:model-value="v => patchSelection({ enabled: Boolean(v) })"
-              />
-              <p class="mt-1 text-[11px] text-muted-foreground">
-                打开面板时尝试读取当前选中的文字作为第一条候选；关闭后仅提供剪贴板候选。
-              </p>
-            </div>
-          </div>
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">取词方式</Label>
-            <div class="space-y-1">
-              <Select
-                :model-value="store.settings.selection.mode || 'smart'"
-                @update:model-value="v => patchSelection({ mode: String(v) })"
-              >
-                <SelectTrigger class="h-8 w-56 text-[12px]"><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="smart">智能（UIA 直读优先，失败再模拟复制）</SelectItem>
-                  <SelectItem value="compat">兼容（只用模拟 Ctrl+C）</SelectItem>
-                  <SelectItem value="clipboard">不取词（仅剪贴板候选）</SelectItem>
-                </SelectContent>
-              </Select>
-              <p class="max-w-xl text-[11px] text-muted-foreground">
-                「智能」直接从目标程序的无障碍接口读选区，<span class="text-foreground">不模拟按键、不占用剪贴板</span>，
-                因此不受「目标窗口提权」影响；读不到时自动退回兼容方式。
-              </p>
-            </div>
-          </div>
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">取词后还原剪贴板</Label>
-            <div>
-              <Switch
-                :model-value="store.settings.selection.restoreClipboard"
-                @update:model-value="v => patchSelection({ restoreClipboard: Boolean(v) })"
-              />
-              <p class="mt-1 max-w-xl text-[11px] text-muted-foreground">
-                取词会临时占用剪贴板，还原可保留你原来的内容。注意：只有文本 / 图片 / 文件三种格式
-                能被备份还原；若原内容是不支持的格式（例如只含 HTML/RTF），选区文本会留在剪贴板上。
-              </p>
-            </div>
-          </div>
-
-          <div class="flex items-center gap-3">
-            <Label class="w-32 shrink-0 text-[12px]">取词字数上限</Label>
-            <Input
-              :model-value="store.settings.selection.maxChars"
-              type="number"
-              class="h-8 w-24 text-[13px]"
-              @update:model-value="
-                v => patchSelection({ maxChars: Math.max(1, Number(v) || 2000) })
-              "
-            />
-            <span class="text-[11px] text-muted-foreground">
-              超出直接拒绝并提示，避免误选整篇文档时发一个又慢又费钱的请求
-            </span>
-          </div>
-
-          <div class="space-y-1.5">
-            <Label class="text-[12px]">跳过取词的应用（每行一个进程名）</Label>
-            <Textarea v-model="blacklistDraft" class="min-h-20 text-[12px]" spellcheck="false" />
-            <p class="text-[11px] text-muted-foreground">
-              这些应用里 Ctrl+C 是中断信号，取词时自动跳过。
-            </p>
-            <Button size="sm" :disabled="!blacklistDirty" @click="saveBlacklist">保存名单</Button>
-          </div>
-
-          <p class="rounded-md border bg-muted/30 p-2.5 text-[11px] leading-relaxed text-muted-foreground">
-            取不到划词的常见原因：当前没有选中任何文字、目标窗口以管理员权限运行
-            （兼容方式下系统会丢弃来自普通权限程序的模拟按键）、终端类应用（已默认跳过）、
-            该程序没有暴露选区给无障碍接口（智能方式下会退回兼容方式）。<br />
-            兜底路径：任何程序里都可以「选中 → 复制 → 打开翻译面板」，剪贴板首条会作为候选出现。
-          </p>
-        </CardContent>
-      </Card>
-
-      <!-- ===== 截图翻译 ===== -->
-      <Card v-if="store.settings">
-        <CardHeader class="pb-3">
-          <CardTitle class="flex items-center gap-2 text-[14px]">
-            <ScanText class="size-4" />
-            截图翻译
-          </CardTitle>
-          <p class="text-[12px] text-muted-foreground">
-            在截图覆盖层框选区域后点「翻译选区」，识别结果以非激活悬浮窗展示在选区旁。
-          </p>
-        </CardHeader>
-        <CardContent class="space-y-4">
-          <div class="flex items-center gap-3">
-            <Label class="w-32 shrink-0 text-[12px]">识别方式</Label>
-            <Select
-              :model-value="store.settings.screenshot.ocrMode"
+            <span class="text-[11px] text-muted-foreground">{{ view.config.model }}</span>
+            <Switch
+              :model-value="view.config.enabled"
               @update:model-value="
                 v =>
-                  patch({
-                    screenshot: { ...store.settings!.screenshot, ocrMode: String(v) }
-                  })
+                  store
+                    .saveEngine({ ...view.config, enabled: Boolean(v) })
+                    .catch(e => toast.error(String(e)))
               "
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              @click="editingId = editingId === view.config.id ? '' : view.config.id"
+            >
+              {{ editingId === view.config.id ? '收起' : '编辑' }}
+            </Button>
+          </div>
+
+          <p v-if="view.issue" class="mt-1.5 flex items-center gap-1.5 text-[12px] text-warning-text">
+            <CircleAlert class="size-3.5 shrink-0" />
+            {{ view.issue }}
+          </p>
+
+          <div v-if="editingId === view.config.id" class="mt-3">
+            <EngineEditor :view="view" @deleted="editingId = ''" />
+          </div>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-2">
+          <Label class="text-[12px]">新增引擎</Label>
+          <div class="flex gap-2">
+            <Select v-model="presetKey">
+              <SelectTrigger class="h-8 w-44 text-[12px]"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="p in ENGINE_PRESETS" :key="p.key" :value="p.key">
+                  {{ p.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              v-model="newEngineName"
+              class="h-8 flex-1 text-[13px]"
+              :placeholder="selectedPreset?.label ?? '引擎名称'"
+            />
+            <Button size="sm" @click="addEngine">
+              <Plus />
+              新增
+            </Button>
+          </div>
+          <p v-if="selectedPreset" class="text-[11px] text-muted-foreground">
+            {{ selectedPreset.description }}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- ===== 通用 ===== -->
+    <Card>
+      <CardHeader class="pb-3">
+        <CardTitle class="text-[14px]">通用</CardTitle>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="flex items-center gap-3">
+          <Label class="w-32 shrink-0 text-[12px]">默认目标语言</Label>
+          <Select
+            :model-value="store.settings?.defaultTarget"
+            @update:model-value="v => patch({ defaultTarget: String(v) })"
+          >
+            <SelectTrigger class="h-8 w-40 text-[12px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="l in targetLanguages" :key="l.code" :value="l.code">
+                {{ l.label }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <Label class="w-32 shrink-0 text-[12px]">默认引擎</Label>
+          <Select
+            :model-value="store.settings?.defaultEngineId"
+            @update:model-value="v => patch({ defaultEngineId: String(v) })"
+          >
+            <SelectTrigger class="h-8 w-52 text-[12px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="auto">自动（按优先级降级）</SelectItem>
+              <SelectItem
+                v-for="e in store.engines"
+                :key="e.config.id"
+                :value="e.config.id"
+              >
+                {{ e.config.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">失败自动降级</Label>
+          <div>
+            <Switch
+              :model-value="store.settings?.autoFallback"
+              @update:model-value="v => patch({ autoFallback: Boolean(v) })"
+            />
+            <p class="mt-1 text-[11px] text-muted-foreground">
+              开启后「自动」模式会在某个源失败时尝试下一个；关闭则只用默认引擎。
+              <br />无论开关如何，手动指定某个引擎时都不会降级——否则「指定了 A 却拿到 B 的译文」更难排查。
+            </p>
+          </div>
+        </div>
+
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">走代理模块</Label>
+          <div>
+            <Switch
+              :model-value="store.settings?.useProxy"
+              @update:model-value="v => patch({ useProxy: Boolean(v) })"
+            />
+            <p class="mt-1 text-[11px] text-muted-foreground">
+              默认关闭。自建 LibreTranslate 在境内、MyMemory 与 DeepSeek 均可直连；
+              仅当翻译服务部署在境外或直连被拦截时打开。
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- ===== 历史 ===== -->
+    <Card v-if="store.settings">
+      <CardHeader class="pb-3">
+        <CardTitle class="text-[14px]">历史记录</CardTitle>
+        <p class="text-[12px] text-muted-foreground">
+          搜索走 SQLite FTS5 三元组索引；不足 3 个字符的关键词无法命中该索引，会退回全表扫描
+          ——仍然搜得到，只是更慢。
+        </p>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">记录历史</Label>
+          <div>
+            <Switch
+              :model-value="store.settings.history.enabled"
+              @update:model-value="v => patchHistory({ enabled: Boolean(v) })"
+            />
+            <p class="mt-1 text-[11px] text-muted-foreground">
+              关闭后不再写入新记录，已有记录不受影响。
+            </p>
+          </div>
+        </div>
+
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-1.5 text-[12px]">保留条数</Label>
+          <div>
+            <Input
+              v-model.number="maxItemsDraft"
+              type="number"
+              :min="HISTORY_MAX_ITEMS_MIN"
+              :max="HISTORY_MAX_ITEMS_MAX"
+              step="100"
+              class="h-8 w-32 text-[12px]"
+              @blur="commitMaxItems"
+              @keydown.enter="commitMaxItems"
+            />
+            <p class="mt-1 text-[11px] text-muted-foreground">
+              超出后按时间淘汰最旧的非收藏记录（{{ HISTORY_MAX_ITEMS_MIN }}–{{ HISTORY_MAX_ITEMS_MAX }}）。
+              收藏条目不占这个额度，收藏得足够多时总占用会超过上限。
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- ===== 提示词模板 ===== -->
+    <Card v-if="templates">
+      <CardHeader class="pb-3">
+        <CardTitle class="text-[14px]">提示词模板</CardTitle>
+        <p class="text-[12px] text-muted-foreground">
+          <code class="rounded bg-muted px-1">{'{target}'}</code> 会替换为目标语言的自然语言名称，
+          <code class="rounded bg-muted px-1">{'{source}'}</code> 为源语言名称。
+        </p>
+      </CardHeader>
+      <CardContent class="space-y-3">
+        <div class="space-y-1.5">
+          <Label class="text-[12px]">翻译（默认模式）</Label>
+          <Textarea v-model="templates.translate" class="min-h-24 text-[12px]" />
+          <p v-if="templateWarning(templates.translate)" class="text-[11px] text-warning-text">
+            {{ templateWarning(templates.translate) }}
+          </p>
+        </div>
+
+        <details class="rounded-md border p-2.5">
+          <summary class="cursor-pointer select-none text-[12px] font-medium">
+            备用模板：润色 / 解释 / 总结（计划 P3 接入划词弹窗）
+          </summary>
+          <div class="mt-2 space-y-3">
+            <div class="space-y-1.5">
+              <Label class="text-[12px]">润色</Label>
+              <Textarea v-model="templates.polish" class="min-h-16 text-[12px]" />
+            </div>
+            <div class="space-y-1.5">
+              <Label class="text-[12px]">解释</Label>
+              <Textarea v-model="templates.explain" class="min-h-16 text-[12px]" />
+            </div>
+            <div class="space-y-1.5">
+              <Label class="text-[12px]">总结</Label>
+              <Textarea v-model="templates.summarize" class="min-h-16 text-[12px]" />
+            </div>
+          </div>
+        </details>
+
+        <Button size="sm" :disabled="!templatesDirty || savingTemplates" @click="saveTemplates">
+          <LoaderCircle v-if="savingTemplates" class="animate-spin" />
+          <Save v-else />
+          保存提示词
+        </Button>
+      </CardContent>
+    </Card>
+
+    <!-- ===== 翻译面板与划词取词 ===== -->
+    <Card v-if="store.settings">
+      <CardHeader class="pb-3">
+        <CardTitle class="text-[14px]">翻译面板</CardTitle>
+        <p class="text-[12px] text-muted-foreground">
+          按全局快捷键打开翻译面板：自动尝试读取<span class="text-foreground">当前划词</span>与
+          <span class="text-foreground">剪贴板首条</span>作为候选，↑↓ 选择、Enter 直接翻译；
+          也可以在原文框里手动输入（Enter 翻译，Alt+Enter 换行）。
+        </p>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="flex items-center gap-3">
+          <Label class="w-32 shrink-0 text-[12px]">面板快捷键</Label>
+          <Input
+            v-model="shortcutDraft.panelShortcut"
+            class="h-8 w-40 text-[13px]"
+            placeholder="Ctrl+2"
+          />
+          <span class="text-[11px] text-muted-foreground">全局生效；留空禁用</span>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2 pl-35">
+          <Button size="sm" :disabled="!shortcutsDirty || applyingShortcuts" @click="applyShortcuts">
+            <LoaderCircle v-if="applyingShortcuts" class="animate-spin" />
+            <Save v-else />
+            应用快捷键
+          </Button>
+          <Button variant="outline" size="sm" @click="previewPopup">
+            <Sparkles />
+            预览面板
+          </Button>
+          <span class="text-[11px] text-muted-foreground">
+            预览用固定样例文本走完整链路，便于确认窗口与翻译都正常
+          </span>
+        </div>
+
+        <Separator />
+
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">读取当前划词</Label>
+          <div>
+            <Switch
+              :model-value="store.settings.selection.enabled"
+              @update:model-value="v => patchSelection({ enabled: Boolean(v) })"
+            />
+            <p class="mt-1 text-[11px] text-muted-foreground">
+              打开面板时尝试读取当前选中的文字作为第一条候选；关闭后仅提供剪贴板候选。
+            </p>
+          </div>
+        </div>
+
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">取词方式</Label>
+          <div class="space-y-1">
+            <Select
+              :model-value="store.settings.selection.mode || 'smart'"
+              @update:model-value="v => patchSelection({ mode: String(v) })"
             >
               <SelectTrigger class="h-8 w-56 text-[12px]"><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="windows">本地 OCR（离线，零成本）</SelectItem>
-                <SelectItem value="vision">视觉模型直译（质量更高，需图像模型）</SelectItem>
+                <SelectItem value="smart">智能（UIA 直读优先，失败再模拟复制）</SelectItem>
+                <SelectItem value="compat">兼容（只用模拟 Ctrl+C）</SelectItem>
+                <SelectItem value="clipboard">不取词（仅剪贴板候选）</SelectItem>
               </SelectContent>
             </Select>
+            <p class="max-w-xl text-[11px] text-muted-foreground">
+              「智能」直接从目标程序的无障碍接口读选区，<span class="text-foreground">不模拟按键、不占用剪贴板</span>，
+              因此不受「目标窗口提权」影响；读不到时自动退回兼容方式。
+            </p>
           </div>
+        </div>
 
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">取词后还原剪贴板</Label>
+          <div>
+            <Switch
+              :model-value="store.settings.selection.restoreClipboard"
+              @update:model-value="v => patchSelection({ restoreClipboard: Boolean(v) })"
+            />
+            <p class="mt-1 max-w-xl text-[11px] text-muted-foreground">
+              取词会临时占用剪贴板，还原可保留你原来的内容。注意：只有文本 / 图片 / 文件三种格式
+              能被备份还原；若原内容是不支持的格式（例如只含 HTML/RTF），选区文本会留在剪贴板上。
+            </p>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <Label class="w-32 shrink-0 text-[12px]">取词字数上限</Label>
+          <Input
+            :model-value="store.settings.selection.maxChars"
+            type="number"
+            class="h-8 w-24 text-[13px]"
+            @update:model-value="
+              v => patchSelection({ maxChars: Math.max(1, Number(v) || 2000) })
+            "
+          />
+          <span class="text-[11px] text-muted-foreground">
+            超出直接拒绝并提示，避免误选整篇文档时发一个又慢又费钱的请求
+          </span>
+        </div>
+
+        <div class="space-y-1.5">
+          <Label class="text-[12px]">跳过取词的应用（每行一个进程名）</Label>
+          <Textarea v-model="blacklistDraft" class="min-h-20 text-[12px]" spellcheck="false" />
+          <p class="text-[11px] text-muted-foreground">
+            这些应用里 Ctrl+C 是中断信号，取词时自动跳过。
+          </p>
+          <Button size="sm" :disabled="!blacklistDirty" @click="saveBlacklist">保存名单</Button>
+        </div>
+
+        <p class="rounded-md border bg-muted/30 p-2.5 text-[11px] leading-relaxed text-muted-foreground">
+          取不到划词的常见原因：当前没有选中任何文字、目标窗口以管理员权限运行
+          （兼容方式下系统会丢弃来自普通权限程序的模拟按键）、终端类应用（已默认跳过）、
+          该程序没有暴露选区给无障碍接口（智能方式下会退回兼容方式）。<br />
+          兜底路径：任何程序里都可以「选中 → 复制 → 打开翻译面板」，剪贴板首条会作为候选出现。
+        </p>
+      </CardContent>
+    </Card>
+
+    <!-- ===== 截图翻译 ===== -->
+    <Card v-if="store.settings">
+      <CardHeader class="pb-3">
+        <CardTitle class="flex items-center gap-2 text-[14px]">
+          <ScanText class="size-4 text-primary" />
+          截图翻译
+        </CardTitle>
+        <p class="text-[12px] text-muted-foreground">
+          在截图覆盖层框选区域后点「翻译选区」，识别结果以非激活悬浮窗展示在选区旁。
+        </p>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div class="flex items-center gap-3">
+          <Label class="w-32 shrink-0 text-[12px]">识别方式</Label>
+          <Select
+            :model-value="store.settings.screenshot.ocrMode"
+            @update:model-value="
+              v =>
+                patch({
+                  screenshot: { ...store.settings!.screenshot, ocrMode: String(v) }
+                })
+            "
+          >
+            <SelectTrigger class="h-8 w-56 text-[12px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="windows">本地 OCR（离线，零成本）</SelectItem>
+              <SelectItem value="vision">视觉模型直译（质量更高，需图像模型）</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <p
+          v-if="store.settings.screenshot.ocrMode === 'vision'"
+          class="rounded-md border bg-muted/30 p-2.5 text-[11px] leading-relaxed text-muted-foreground"
+        >
+          视觉直译会把截图上传给所选引擎：请在引擎设置中勾选「支持图像输入」并确认该模型支持图像。
+          识别与翻译一步完成，对表格、菜单等复杂排版效果更好。
+        </p>
+
+        <template v-else>
+          <div class="flex items-center gap-3">
+            <Label class="w-32 shrink-0 text-[12px]">识别语言</Label>
+            <Input
+              :model-value="store.settings.screenshot.ocrLang"
+              class="h-8 w-40 text-[13px]"
+              placeholder="auto"
+              @update:model-value="
+                v =>
+                  patch({
+                    screenshot: {
+                      ...store.settings!.screenshot,
+                      ocrLang: String(v) || 'auto'
+                    }
+                  })
+              "
+            />
+            <Button variant="outline" size="sm" :disabled="store.ocrLanguagesLoading" @click="store.loadOcrLanguages()">
+              <LoaderCircle v-if="store.ocrLanguagesLoading" class="animate-spin" />
+              {{ store.ocrLanguagesLoading ? '读取中…' : '可用语言' }}
+            </Button>
+          </div>
+          <p class="pl-35 text-[11px] text-muted-foreground">
+            auto 跟随系统语言配置；也可填 BCP-47 标签（如 en-US、ja）。
+          </p>
           <p
-            v-if="store.settings.screenshot.ocrMode === 'vision'"
+            v-if="store.ocrLanguagesError"
+            class="rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-[11px] leading-relaxed text-destructive"
+          >
+            {{ store.ocrLanguagesError }}
+          </p>
+          <p
+            v-else-if="store.ocrLanguages"
             class="rounded-md border bg-muted/30 p-2.5 text-[11px] leading-relaxed text-muted-foreground"
           >
-            视觉直译会把截图上传给所选引擎：请在引擎设置中勾选「支持图像输入」并确认该模型支持图像。
-            识别与翻译一步完成，对表格、菜单等复杂排版效果更好。
+            <span class="text-foreground">系统已装 {{ store.ocrLanguages.length }} 个 OCR 语言包：</span>
+            {{ store.ocrLanguages.join('、') || '（无）' }}
+            <br />缺语言时，在系统「设置 → 时间和语言 → 语言和区域」添加并勾选「文本识别」。
           </p>
+        </template>
 
-          <template v-else>
-            <div class="flex items-center gap-3">
-              <Label class="w-32 shrink-0 text-[12px]">识别语言</Label>
-              <Input
-                :model-value="store.settings.screenshot.ocrLang"
-                class="h-8 w-40 text-[13px]"
-                placeholder="auto"
-                @update:model-value="
-                  v =>
-                    patch({
-                      screenshot: {
-                        ...store.settings!.screenshot,
-                        ocrLang: String(v) || 'auto'
-                      }
-                    })
-                "
-              />
-              <Button variant="outline" size="sm" :disabled="store.ocrLanguagesLoading" @click="store.loadOcrLanguages()">
-                <LoaderCircle v-if="store.ocrLanguagesLoading" class="animate-spin" />
-                {{ store.ocrLanguagesLoading ? '读取中…' : '可用语言' }}
-              </Button>
-            </div>
-            <p class="pl-[8.75rem] text-[11px] text-muted-foreground">
-              auto 跟随系统语言配置；也可填 BCP-47 标签（如 en-US、ja）。
+        <div class="flex items-start gap-3">
+          <Label class="w-32 shrink-0 pt-0.5 text-[12px]">自动翻译</Label>
+          <div>
+            <Switch
+              :model-value="store.settings.screenshot.autoTranslate"
+              @update:model-value="
+                v =>
+                  patch({
+                    screenshot: {
+                      ...store.settings!.screenshot,
+                      autoTranslate: Boolean(v)
+                    }
+                  })
+              "
+            />
+            <p class="mt-1 max-w-xl text-[11px] text-muted-foreground">
+              关闭后框选只做识别，译文需在悬浮窗手动触发。
             </p>
-            <p
-              v-if="store.ocrLanguagesError"
-              class="rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-[11px] leading-relaxed text-destructive"
-            >
-              {{ store.ocrLanguagesError }}
-            </p>
-            <p
-              v-else-if="store.ocrLanguages"
-              class="rounded-md border bg-muted/30 p-2.5 text-[11px] leading-relaxed text-muted-foreground"
-            >
-              <span class="text-foreground">系统已装 {{ store.ocrLanguages.length }} 个 OCR 语言包：</span>
-              {{ store.ocrLanguages.join('、') || '（无）' }}
-              <br />缺语言时，在系统「设置 → 时间和语言 → 语言和区域」添加并勾选「文本识别」。
-            </p>
-          </template>
-
-          <div class="flex items-start gap-3">
-            <Label class="w-32 shrink-0 pt-0.5 text-[12px]">自动翻译</Label>
-            <div>
-              <Switch
-                :model-value="store.settings.screenshot.autoTranslate"
-                @update:model-value="
-                  v =>
-                    patch({
-                      screenshot: {
-                        ...store.settings!.screenshot,
-                        autoTranslate: Boolean(v)
-                      }
-                    })
-                "
-              />
-              <p class="mt-1 max-w-xl text-[11px] text-muted-foreground">
-                关闭后框选只做识别，译文需在悬浮窗手动触发。
-              </p>
-            </div>
           </div>
-        </CardContent>
-      </Card>
-    </div>
+        </div>
+      </CardContent>
+    </Card>
   </div>
 </template>
diff --git a/src/modules/translate/components/TranslateWorkbench.vue b/src/modules/translate/components/TranslateWorkbench.vue
index 43dbf9c..1593245 100644
--- a/src/modules/translate/components/TranslateWorkbench.vue
+++ b/src/modules/translate/components/TranslateWorkbench.vue
@@ -296,7 +296,7 @@ function onTargetScroll(e: Event) {
       </Button>
     </div>
 
-    <div v-if="showEngineWarning" class="mb-3 shrink-0 rounded-lg border border-amber-300/60 bg-amber-50 px-3 py-2 text-[12px] text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+    <div v-if="showEngineWarning" class="mb-3 shrink-0 rounded-lg border border-warning/60 bg-warning-soft px-3 py-2 text-[12px] text-warning-text">
       <div class="flex items-start gap-2">
         <CircleAlert class="mt-0.5 size-3.5 shrink-0" />
         <span>
@@ -305,7 +305,7 @@ function onTargetScroll(e: Event) {
       </div>
     </div>
 
-    <div class="grid min-h-[26rem] flex-1 grid-cols-2 gap-3">
+    <div class="grid min-h-104 flex-1 grid-cols-2 gap-3">
       <div class="flex h-full min-h-0 flex-col gap-3">
         <div ref="sourceWrapRef" class="flex min-h-0 flex-1">
           <Textarea
diff --git a/src/modules/translate/index.ts b/src/modules/translate/index.ts
index e351664..74e4212 100644
--- a/src/modules/translate/index.ts
+++ b/src/modules/translate/index.ts
@@ -61,6 +61,6 @@ export const moduleConfig: ModuleConfig = {
   defaultEnabled: true,
   loader: () => import('./TranslateModule.vue'),
   searchItems,
-  // 排在剪贴板（20）之后、截图（30）之前
-  order: 25
+  // 默认第 5 位（翻译是高频入口，紧跟终端之后）
+  order: 50
 }
diff --git a/src/modules/tray/TrayMenu.vue b/src/modules/tray/TrayMenu.vue
index df43615..d468787 100644
--- a/src/modules/tray/TrayMenu.vue
+++ b/src/modules/tray/TrayMenu.vue
@@ -4,6 +4,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { STORAGE_KEYS } from '@/lib/constants'
+import { applyAccent, readStoredAccent } from '@/lib/theme'
 import { Effect, EffectState } from '@tauri-apps/api/window'
 import {
   Globe, Power, PowerOff, RefreshCw, Check, Monitor, Download,
@@ -39,7 +40,7 @@ const loadingAction = ref<string | null>(null)
 const refreshing = ref(false)
 const osdVisible = ref(false)
 const nodeSelectOpen = ref(false)
-let unlistenFns: UnlistenFn[] = []
+const unlistenFns: UnlistenFn[] = []
 
 /** 菜单关闭/失焦前重置状态：关闭节点下拉框并取消所有焦点，避免下次打开时残留 */
 function resetMenuState() {
@@ -374,8 +375,10 @@ async function applyTheme() {
   const root = document.documentElement
   const { theme, effect } = readMainTheme()
   const isDark = resolveIsDark(theme)
+  // 主题色也纳入缓存键：只比 theme|effect 时，改了主题色会因键未变而被跳过
+  const accent = readStoredAccent(STORAGE_KEYS.appSettings)
 
-  const key = `${theme}|${effect}|${isDark}`
+  const key = `${theme}|${effect}|${isDark}|${accent ?? 'default'}`
   if (key === lastAppliedThemeKey) return
   lastAppliedThemeKey = key
 
@@ -392,6 +395,9 @@ async function applyTheme() {
   root.classList.add(`effect-${effect}`)
   if (isDark) root.classList.add('dark')
 
+  // 主题色：与主窗口共用同一份设置（行内变量压住 .dark 规则，按当前模式整组重写）
+  applyAccent(root, accent, isDark ? 'dark' : 'light')
+
   try {
     const tauriWin = getCurrentWindow()
     await tauriWin.clearEffects()
@@ -426,6 +432,13 @@ onMounted(async () => {
   mq.addEventListener('change', onThemeChange)
   unlistenFns.push(() => mq.removeEventListener('change', onThemeChange))
 
+  // 主窗口改主题/效果/主题色时同步（托盘菜单常驻，不监听就会一直用旧值）
+  const onStorage = (e: StorageEvent) => {
+    if (e.key === STORAGE_KEYS.appSettings) void applyTheme()
+  }
+  window.addEventListener('storage', onStorage)
+  unlistenFns.push(() => window.removeEventListener('storage', onStorage))
+
   // 右键显示的合并窗口：浏览器/线程内收到 tray-menu-show（基础状态、菜单较小）后，
   // 不给 150ms 窗口等完整状态（含节点）到达，再一次性定位显示最终尺寸。
   // 避免"先以小菜单显示 → 节点数据到达 → 可见后二次 resize"造成的闪烁。
diff --git a/src/stores/appStore.ts b/src/stores/appStore.ts
index ee6f0b1..09db916 100644
--- a/src/stores/appStore.ts
+++ b/src/stores/appStore.ts
@@ -8,6 +8,14 @@ import { useProcessStore } from '@/stores/processStore'
 import { toast } from 'vue-sonner'
 import { createLogger } from '@/lib/logger'
 import { STORAGE_KEYS } from '@/lib/constants'
+import {
+  applyAccent,
+  resolveAccentHex,
+  CUSTOM_ACCENT_ID,
+  DEFAULT_ACCENT_ID,
+  parseHex
+} from '@/lib/theme'
+import { appIsDark } from '@/lib/terminalThemes'
 import type { ModuleCategory } from '@/types/module'
 
 const logger = createLogger('app')
@@ -56,11 +64,21 @@ const initModuleOrder = (): string[] => {
 export const useAppStore = defineStore('app', () => {
   const theme = ref<Theme>('system')
   const effect = ref<EffectType>('mica')
+  /**
+   * 主题色（强调色）。
+   *
+   * 只存一个基色：深浅两套由 `@/lib/theme` 按 OKLCH 派生（锁色相、按模式重定亮度），
+   * 用户不需要为浅色/深色各选一次。`accentId = 'blue'`（默认）表示用 style.css 里
+   * 手调的默认值 —— 此时不写任何行内变量，老用户零视觉变化。
+   */
+  const accentId = ref<string>(DEFAULT_ACCENT_ID)
+  /** 自定义色的 hex（仅 accentId === 'custom' 时有效） */
+  const accentHex = ref<string | null>(null)
   const isAutoStart = ref(false)
   const silentAutoStart = ref(false)
   const isInitialized = ref(false)
-  /** 模块排序一次性迁移标记（音乐 → 代理之后），随设置持久化 */
-  let musicOrderMigrated = false
+  /** 模块排序一次性迁移标记（整体重排为当前默认顺序），随设置持久化 */
+  let moduleOrderMigratedV2 = false
   const modules = ref<ModuleInfo[]>(initModulesFromRegistry())
   const moduleOrder = ref<string[]>(initModuleOrder())
 
@@ -91,6 +109,14 @@ export const useAppStore = defineStore('app', () => {
 
         if (settings.theme) theme.value = settings.theme
         if (settings.effect) effect.value = settings.effect
+        // 主题色是纯增量字段：老数据没有它 → 保持默认蓝，不升 SETTINGS_VERSION
+        // （升版本会清空模块排序/启停/开机自启，为零收益付真实数据损失）
+        if (typeof settings.accentId === 'string' && settings.accentId) {
+          accentId.value = settings.accentId
+        }
+        if (typeof settings.accentHex === 'string' && parseHex(settings.accentHex)) {
+          accentHex.value = settings.accentHex
+        }
         if (typeof settings.isAutoStart === 'boolean') isAutoStart.value = settings.isAutoStart
         if (typeof settings.silentAutoStart === 'boolean') silentAutoStart.value = settings.silentAutoStart
         if (settings.modules) {
@@ -114,18 +140,18 @@ export const useAppStore = defineStore('app', () => {
           const newlyAdded = allUserIds.filter(id => !savedOrder.includes(id))
           moduleOrder.value = [...known, ...newlyAdded]
 
-          // 一次性迁移：音乐模块默认排序调整为「代理之后、整体第二位」。
-          // 迁移后写入标记，尊重用户后续手动拖动的新排序。
-          if (!settings.musicOrderMigrated) {
-            const musicIdx = moduleOrder.value.indexOf('music')
-            if (musicIdx !== -1) {
-              moduleOrder.value.splice(musicIdx, 1)
-              const proxyIdx = moduleOrder.value.indexOf('proxy')
-              moduleOrder.value.splice(proxyIdx === -1 ? 0 : proxyIdx + 1, 0, 'music')
-            }
+          // 一次性迁移：模块默认排序整体重排为当前默认顺序
+          // （音乐-代理-下载-终端-翻译-硬件监控-截图-剪贴板-快捷面板-开发工具）。
+          //
+          // 已保存顺序来自旧默认值（各模块 order 字段），不回写的话改 `order:` 只对
+          // 全新安装生效 —— 老用户看到的还是旧顺序。这里用注册表的新默认顺序覆盖一次
+          // 并写入标记，之后用户手动拖动的新排序不再被覆盖。
+          // （上一版只把音乐挪到第二位的 musicOrderMigrated 迁移被本次整体重排覆盖，已移除。）
+          if (!settings.moduleOrderMigratedV2) {
+            moduleOrder.value = initModuleOrder()
+            moduleOrderMigratedV2 = true
             saveSettings()
           }
-          musicOrderMigrated = true
         }
       }
     } catch {
@@ -144,11 +170,13 @@ export const useAppStore = defineStore('app', () => {
         version: SETTINGS_VERSION,
         theme: theme.value,
         effect: effect.value,
+        accentId: accentId.value,
+        accentHex: accentHex.value,
         isAutoStart: isAutoStart.value,
         silentAutoStart: silentAutoStart.value,
         modules: modulesData,
         moduleOrder: moduleOrder.value,
-        musicOrderMigrated
+        moduleOrderMigratedV2
       }))
     } catch {
       console.error('Failed to save settings to localStorage')
@@ -324,6 +352,31 @@ export const useAppStore = defineStore('app', () => {
     saveSettings()
   }
 
+  /**
+   * 把主题色写到 DOM。
+   *
+   * 必须传当前模式：行内变量会压住 `.dark` 规则，所以每次都要整组重写
+   * （见 `@/lib/theme` 头注释）。`resolveAccentHex` 返回 null 时会清除行内值，
+   * 回落到 style.css 的默认蓝。
+   */
+  const applyAccentColor = () => {
+    const root = document.documentElement
+    const isDark = root.classList.contains('dark')
+    applyAccent(root, resolveAccentHex(accentId.value, accentHex.value), isDark ? 'dark' : 'light')
+  }
+
+  /** 设置主题色：预设传 id，自定义传 id='custom' + hex。立即生效，无需保存按钮 */
+  const setAccent = (id: string, hex?: string) => {
+    accentId.value = id
+    if (id === CUSTOM_ACCENT_ID) {
+      accentHex.value = hex && parseHex(hex) ? hex : accentHex.value
+    } else {
+      accentHex.value = null
+    }
+    applyAccentColor()
+    saveSettings()
+  }
+
   const toggleAutoStart = async (checked?: boolean) => {
     const targetState = checked !== undefined ? checked : !isAutoStart.value
     const previousState = isAutoStart.value
@@ -370,6 +423,13 @@ export const useAppStore = defineStore('app', () => {
       }
     }
 
+    // 深浅确定之后再应用主题色：行内变量压住 `.dark` 规则，必须按当前模式整组重写
+    applyAccentColor()
+
+    // 终端主题（「跟随应用主题」）需要一个响应式输入：只读 DOM class 的话，
+    // 应用切浅色时终端不会重算主题。见 terminalThemes.ts 的 appIsDark。
+    appIsDark.value = isDark
+
     try {
       const tauriWindow = getCurrentWindow()
       if (theme.value === 'system') {
@@ -447,6 +507,10 @@ export const useAppStore = defineStore('app', () => {
       } else {
         root.classList.remove('dark')
       }
+      // 深浅切换后重写主题色行内变量，避免残留另一模式的值
+      applyAccentColor()
+      // 终端「跟随应用主题」要跟着系统深浅一起变（见 terminalThemes.ts 的 appIsDark）
+      appIsDark.value = newTheme === 'dark'
       // 窗口已通过 setTheme(null) 原生跟随系统，无需再手动 setTheme
       await applyEffect()
     }
@@ -511,6 +575,8 @@ export const useAppStore = defineStore('app', () => {
   return {
     theme,
     effect,
+    accentId,
+    accentHex,
     systemDark,
     isAutoStart,
     silentAutoStart,
@@ -524,6 +590,7 @@ export const useAppStore = defineStore('app', () => {
     reorderModules,
     setTheme,
     setEffect,
+    setAccent,
     toggleAutoStart,
     toggleSilentAutoStart,
     applyTheme,
diff --git a/src/stores/feiniuStore.ts b/src/stores/feiniuStore.ts
index 83a4973..5229378 100644
--- a/src/stores/feiniuStore.ts
+++ b/src/stores/feiniuStore.ts
@@ -720,7 +720,7 @@ export const useFeiniuStore = defineStore('feiniu', () => {
     opts: { since?: number; deleteLocal?: boolean } = {}
   ): Promise<{ total: number; ok: number; deleted: number }> {
     if (!webdavReady.value) throw new Error('请先在「设置 → 存储与上传」完成 WebDAV 配置')
-    const r = await invoke<{ items: any[] }>('feiniu_scan_local')
+    const r = await invoke<{ items: { path: string; mtim: number }[] }>('feiniu_scan_local')
     const now = Date.now() / 1000
     const lower = opts.since ?? 0
     const upper = opts.since != null ? Infinity : now - minutes * 60
diff --git a/src/stores/moduleTabsStore.ts b/src/stores/moduleTabsStore.ts
index 3af9c08..16a6372 100644
--- a/src/stores/moduleTabsStore.ts
+++ b/src/stores/moduleTabsStore.ts
@@ -8,7 +8,9 @@ import { ref, computed } from 'vue'
  * 在顶部 TitleBar 中显示一组浮动切换按钮。
  *
  * 工作流程：
- * 1. 模块（如 DownloaderModule）onMounted 时调用 registerTabs()，传入标签定义和当前值
+ * 1. 模块（如 DownloaderModule）**setup 阶段**用 rememberedTab() 把上次停留的 tab
+ *    读回来定成首帧要显示的值（首帧之后再改会闪一下），onMounted 时调用 registerTabs()
+ *    注册标签定义与当前值
  * 2. 模块用 IntersectionObserver 或 scroll 监听检测 TabsList 可见性，调用 setFloatingVisible()
  * 3. 模块通过 watch 将本地 activeTab 同步到 store
  * 4. TitleBar 读取 store 的 tabs / activeTab / floatingVisible 渲染浮动切换器
@@ -67,17 +69,39 @@ export const useModuleTabsStore = defineStore('moduleTabs', () => {
   /** 是否显示保存按钮（当前在设置 tab 且注册了保存处理函数） */
   const saveVisible = computed(() => saveHandler.value !== null && activeTab.value === 'settings')
 
+  /**
+   * 只读取该模块「上次停留的 tab」（不注册、不改动 store 任何状态）。
+   *
+   * 供模块 setup 阶段提前恢复：模块切回来时组件重新挂载，`activeTab` 会退回
+   * 声明时的初始值，若等到 onMounted 再改，首帧已经按初始值渲染过一次
+   * （表现为先闪一下第一页再跳到上次停留页）。
+   * 返回值为 `fallback` 表示没有可用的记忆值。
+   */
+  const rememberedTab = (moduleId: string, tabList: ModuleTab[], fallback: string): string => {
+    const remembered = lastTabByModule.value[moduleId]
+    return remembered && tabList.some((t) => t.value === remembered) ? remembered : fallback
+  }
+
+  /** 只读取待跳转 tab（不消费），供 setup 阶段提前应用，消费仍在 onMounted */
+  const peekPendingTab = (moduleId: string): string | null => {
+    if (pendingTab.value && pendingTab.value.moduleId === moduleId) return pendingTab.value.tab
+    return null
+  }
+
   /**
    * 模块注册标签（onMounted 时调用）。
-   * 返回该模块**应当使用**的 tab：优先复用上次停留的（且在当前 tab 集合内），
-   * 否则用传入的初始值。调用方若拿到不同值，需同步自己的 activeTab。
+   *
+   * `current` 是模块**此刻真实显示**的 tab —— 模块在 setup 阶段已按
+   * 「搜索跳转 > 上次停留 > 初始值」定好（见 useModuleTabs），因此只要它在
+   * tab 集合内就以它为准；不在集合内（初始值写错、tab 集合随版本变更）才退回记忆值。
+   * 返回值为该模块应当使用的 tab，调用方若拿到不同值需同步自己的 activeTab。
    */
   const registerTabs = (moduleId: string, tabList: ModuleTab[], current: string): string => {
     currentModuleId = moduleId
     tabs.value = tabList
-    const remembered = lastTabByModule.value[moduleId]
-    const restored =
-      remembered && tabList.some((t) => t.value === remembered) ? remembered : current
+    const restored = tabList.some((t) => t.value === current)
+      ? current
+      : rememberedTab(moduleId, tabList, current)
     activeTab.value = restored
     floatingVisible.value = false
     return restored
@@ -145,6 +169,8 @@ export const useModuleTabsStore = defineStore('moduleTabs', () => {
     saving,
     saveVisible,
     registerTabs,
+    rememberedTab,
+    peekPendingTab,
     unregisterTabs,
     setFloatingVisible,
     setActiveTab,
diff --git a/src/stores/terminalStore.ts b/src/stores/terminalStore.ts
index 929dad1..53984ad 100644
--- a/src/stores/terminalStore.ts
+++ b/src/stores/terminalStore.ts
@@ -309,6 +309,15 @@ export const useTerminalStore = defineStore('terminal', () => {
       })
     )
 
+    un.push(
+      await listen(EVENTS.terminalSettings, () => {
+        // 其它窗口（主窗口 / 独立窗口）改了终端设置 → 重读一次。
+        // 设置存在 Rust 侧，各窗口各有一份前端副本，没有这个事件时独立窗口会
+        // 一直用旧配色（画布主题、字号、状态栏显隐都不同步），只能重开窗口。
+        void loadSettingsInner().catch(e => logger.warn(`重读终端设置失败：${String(e)}`))
+      })
+    )
+
     unlisteners.value = un
   }
 
diff --git a/src/style.css b/src/style.css
index 26c8987..be8be2c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,13 +1,68 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
 @import "tailwindcss";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
+/* =============================================================================
+   Thing Design Tokens
+   规范见仓库根目录 UI_DESIGN_SYSTEM.md
+
+   本文件是 Token 的唯一事实来源。组件内禁止出现 hex / rgb / oklch 字面量，
+   也禁止使用 Tailwind 原生色阶（bg-blue-500 / text-emerald-700 等）。
+
+   值统一使用 hex，便于与设计稿、设计系统文档逐值核对。
+   ========================================================================== */
+
 @theme inline {
   --font-heading: var(--font-sans);
+
+  /* ---------- 表面 ---------- */
+  --color-canvas: var(--canvas);
+  --color-subtle: var(--subtle);
+  --color-hover: var(--hover);
+  --color-active: var(--active);
+
+  /* ---------- 描边扩展（border 为 shadcn 既有映射，见下方）---------- */
+  --color-border-strong: var(--border-strong);
+  --color-divider: var(--divider);
+
+  /* ---------- 文字层级 ---------- */
+  --color-fg-secondary: var(--fg-secondary);
+  --color-fg-disabled: var(--fg-disabled);
+
+  /* ---------- 强调 ---------- */
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-primary-soft: var(--primary-soft);
+  --color-primary-soft-text: var(--primary-soft-text);
+
+  /* ---------- 语义状态（每个状态三件套：实心 / 浅底 / 浅底文字）---------- */
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-success-text: var(--success-text);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-text: var(--warning-text);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-text: var(--danger-text);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
+  --color-info-text: var(--info-text);
+  --color-neutral: var(--neutral);
+  --color-neutral-soft: var(--neutral-soft);
+  --color-neutral-text: var(--neutral-text);
+
+  /* ---------- 数据方向（与状态语义解耦）---------- */
+  --color-data-down: var(--data-down);
+  --color-data-up: var(--data-up);
+
+  /* ---------- 阴影 ---------- */
+  --shadow-popover: var(--shadow-popover);
+  --shadow-dialog: var(--shadow-dialog);
+  --shadow-card: var(--shadow-card);
+
+  /* ---------- shadcn 既有映射（保持兼容，勿删）---------- */
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -39,121 +94,234 @@
   --color-card: var(--card);
   --color-foreground: var(--foreground);
   --color-background: var(--background);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
 }
 
+/* ---------------------------------------------------------------------------
+   浅色模式
+   ------------------------------------------------------------------------ */
 :root {
-  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  /* 字体：只用系统字体栈。桌面应用不引用外部字体 CDN（离线会阻塞/静默失败） */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
+    'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC',
+    'WenQuanYi Micro Hei', sans-serif;
+  --font-mono: 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;
+
+  /* ── 表面 ─────────────────────────────────────────────────────────── */
+  --canvas: #f5f5f7; /* 应用底 / 模块内容区背景 */
+  --background: #ffffff; /* shadcn 基准面 */
+  --card: #ffffff; /* 卡片 / 面板 */
+  --popover: #ffffff; /* 浮层 */
+  --subtle: #f0f0f2; /* 次级填充：搜索框底、分段控件槽、代码块 */
+  --hover: #ebebed; /* 中性 hover 底色 */
+  --active: #e4e4e7; /* 中性 active 底色 */
+
+  /* ── 描边 ─────────────────────────────────────────────────────────── */
+  --border: #e4e4e7; /* 卡片外框、输入框 */
+  --border-strong: #d1d1d6;
+  --divider: #f0f0f2; /* 卡片内部分隔线 */
+  --input: #e4e4e7;
+
+  /* ── 文字 ─────────────────────────────────────────────────────────── */
+  --foreground: #1d1d1f; /* 主文字：标题、正文、数值 */
+  --fg-secondary: #55555c; /* 次文字：键名、标签说明 */
+  --muted-foreground: #8a8a90; /* 辅助：占位符、规格说明 */
+  --fg-disabled: #b4b4ba; /* 禁用 */
+
+  /* ── 强调 ─────────────────────────────────────────────────────────── */
+  --primary: #0066cc;
+  --primary-hover: #0055b3; /* hover 变深，不用透明度方案 */
+  --primary-active: #004a9e;
+  --primary-foreground: #ffffff;
+  --primary-soft: #e8f1fc; /* 选中底 / 图标按钮 hover 底 */
+  --primary-soft-text: #004f9e; /* 上述底上的文字 */
+  --ring: #0071e3;
+
+  /* ── 语义状态：实心 / 浅底 / 浅底文字 ─────────────────────────────── */
+  --success: #0f7b4f;
+  --success-soft: #e7f5ee;
+  --success-text: #0b5c3b;
+  --warning: #a96b00;
+  --warning-soft: #fdf4e4;
+  --warning-text: #7d4f00;
+  --danger: #c7362f;
+  --danger-soft: #fdecea;
+  --danger-text: #9a2620;
+  --info: #0066cc;
+  --info-soft: #e8f1fc;
+  --info-text: #004f9e;
+  --neutral: #8a8a90;
+  --neutral-soft: #f0f0f2;
+  --neutral-text: #55555c;
+
+  /* shadcn 的 destructive 指向 danger，保持组件兼容 */
+  --destructive: #c7362f;
+
+  /* ── 数据方向 ─────────────────────────────────────────────────────── */
+  --data-down: #0f7b4f;
+  --data-up: #c7362f;
+
+  /* ── shadcn 既有别名（值收敛到上面的体系）───────────────────────── */
+  --secondary: #f0f0f2;
+  --secondary-foreground: #1d1d1f;
+  --muted: #f0f0f2;
+  /* accent 是 shadcn 的通用 hover 底色。必须比旧值 #f5f5f5 深 —— 
+     旧值在纯白背景上只深 4%，hover 完全看不出来 */
+  --accent: #ebebed;
+  --accent-foreground: #1d1d1f;
+  --popover-foreground: #1d1d1f;
+  --card-foreground: #1d1d1f;
+
+  /* ── 圆角 ─────────────────────────────────────────────────────────── */
+  --radius: 12px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* ── 阴影：只属于浮层，卡片靠描边（见规范 P7）──────────────────── */
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-popover: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.1);
+  --shadow-dialog: 0 4px 12px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.16);
+
+  /* ── 图表 ─────────────────────────────────────────────────────────── */
+  --chart-1: #0066cc;
+  --chart-2: #0f7b4f;
+  --chart-3: #a96b00;
+  --chart-4: #7a5af8;
+  --chart-5: #c7362f;
+
+  /* ── 侧边栏 ───────────────────────────────────────────────────────── */
+  --sidebar: #ffffff;
+  --sidebar-foreground: #1d1d1f;
+  --sidebar-primary: #0066cc;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ebebed;
+  --sidebar-accent-foreground: #1d1d1f;
+  --sidebar-border: #e4e4e7;
+  --sidebar-ring: #0071e3;
 }
 
+/* ---------------------------------------------------------------------------
+   深色模式
+   深色不是浅色的机械反相：强调色换成亮蓝（#0066cc 在深底上对比度不足），
+   状态色整体提亮，浅底改为低明度同色调。
+   ------------------------------------------------------------------------ */
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-.effect-mica {
-  --effect-bg: transparent;
-  --effect-blur: none;
-}
-
-.dark.effect-mica {
-  --effect-bg: transparent;
-  --effect-blur: none;
-}
-
-.effect-acrylic {
-  --effect-bg: transparent;
-  --effect-blur: none;
+  --canvas: #16161a;
+  --background: #16161a;
+  --card: #1e1e22;
+  --popover: #1e1e22;
+  --subtle: #26262b;
+  --hover: #2c2c32;
+  --active: #33333a;
+
+  --border: #2e2e34;
+  --border-strong: #3a3a42;
+  --divider: #26262b;
+  --input: #2e2e34;
+
+  --foreground: #f5f5f7;
+  --fg-secondary: #a8a8b0;
+  --muted-foreground: #7a7a82;
+  --fg-disabled: #55555c;
+
+  --primary: #2997ff;
+  --primary-hover: #4aa8ff;
+  --primary-active: #1a85e8;
+  --primary-foreground: #ffffff;
+  --primary-soft: #14304d;
+  --primary-soft-text: #7fc0ff;
+  --ring: #2997ff;
+
+  --success: #3dc77f;
+  --success-soft: #12301f;
+  --success-text: #7fe0ab;
+  --warning: #e0a83c;
+  --warning-soft: #33260e;
+  --warning-text: #f0c976;
+  --danger: #ff6b60;
+  --danger-soft: #3a1a18;
+  --danger-text: #ff9e96;
+  --info: #2997ff;
+  --info-soft: #14304d;
+  --info-text: #7fc0ff;
+  --neutral: #7a7a82;
+  --neutral-soft: #26262b;
+  --neutral-text: #a8a8b0;
+
+  --destructive: #ff6b60;
+
+  --data-down: #3dc77f;
+  --data-up: #ff6b60;
+
+  --secondary: #26262b;
+  --secondary-foreground: #f5f5f7;
+  --muted: #26262b;
+  --accent: #2c2c32;
+  --accent-foreground: #f5f5f7;
+  --popover-foreground: #f5f5f7;
+  --card-foreground: #f5f5f7;
+
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --shadow-popover: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
+  --shadow-dialog: 0 4px 12px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.6);
+
+  --chart-1: #2997ff;
+  --chart-2: #3dc77f;
+  --chart-3: #e0a83c;
+  --chart-4: #9b8afb;
+  --chart-5: #ff6b60;
+
+  --sidebar: #1e1e22;
+  --sidebar-foreground: #f5f5f7;
+  --sidebar-primary: #2997ff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #2c2c32;
+  --sidebar-accent-foreground: #f5f5f7;
+  --sidebar-border: #2e2e34;
+  --sidebar-ring: #2997ff;
 }
 
+/* ---------------------------------------------------------------------------
+   窗口效果
+   Tauri 的 mica / acrylic 由系统合成，Web 层保持透明；
+   normal 模式给出不透明底以免透出桌面。
+   ------------------------------------------------------------------------ */
+.effect-mica,
+.dark.effect-mica,
+.effect-acrylic,
 .dark.effect-acrylic {
   --effect-bg: transparent;
   --effect-blur: none;
 }
 
 .effect-normal {
-  --effect-bg: rgba(255, 255, 255, 0.99);
+  --effect-bg: #ffffff;
   --effect-blur: none;
 }
 
 .dark.effect-normal {
-  --effect-bg: rgba(11, 17, 31, 0.99);
+  --effect-bg: #0b111f;
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
-  html, body {
+  html,
+  body {
     background: transparent !important;
     @apply text-foreground antialiased;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    /* 数值对齐：速率、版本号、计数刷新时不跳动 */
     font-feature-settings: 'tnum', 'lnum';
   }
   body {
@@ -163,11 +331,15 @@
 
 /* 桌面应用体验：默认禁止文本选中（按钮/下拉框/标题等控件文字不可拖动选择），
    输入框、文本域、可编辑区域仍允许选择/复制 */
-html, body, #app {
+html,
+body,
+#app {
   user-select: none;
   -webkit-user-select: none;
 }
-input, textarea, [contenteditable='true'] {
+input,
+textarea,
+[contenteditable='true'] {
   user-select: text;
   -webkit-user-select: text;
 }
@@ -219,31 +391,77 @@ input, textarea, [contenteditable='true'] {
   min-width: 120px;
   height: 36px;
   padding: 0 12px;
-  border-radius: var(--radius);
-  border: 1px solid hsl(var(--input));
-  background-color: hsl(var(--background));
-  font-size: 0.875rem;
-  color: hsl(var(--foreground));
+  border-radius: var(--radius-md);
+  border: 1px solid var(--input);
+  background-color: var(--card);
+  font-size: 0.8125rem;
+  color: var(--foreground);
   cursor: pointer;
   user-select: none;
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
 }
 .hotkey-recorder:hover {
-  border-color: hsl(var(--ring));
+  border-color: var(--border-strong);
 }
 .hotkey-recorder:focus-visible {
-  border-color: hsl(var(--ring));
-  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.4);
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent);
 }
 .hotkey-recorder.recording {
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
   animation: recordPulse 1.2s ease-in-out infinite;
 }
 @keyframes recordPulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+/* Tab 选中下划线 —— ModuleShell 与 shadcn Tabs 共用同一套实现。
+   用下划线而不是实心色块：实心色是「主操作」的语义，Tab 占用它会让一屏出现两个重点。 */
+.tab-underline::after {
+  content: '';
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 0;
+  height: 2px;
+  border-radius: 9999px;
+  background: var(--primary);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.tab-underline[data-state='active']::after,
+.tab-underline[aria-selected='true']::after {
+  opacity: 1;
+}
+
+/* 图标描边统一 1.75 —— lucide 默认 2，在 13px 正文旁边偏粗。
+   全局设置比逐组件写 :stroke-width 更可靠（组件里忘记写就会不一致） */
+.lucide {
+  stroke-width: 1.75;
+}
+
+/* 状态点呼吸动效：仅用于"运行中/连接中"这类持续态，静态状态不要加 */
+@keyframes statusPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+.status-dot-pulse {
+  animation: statusPulse 1.8s ease-in-out infinite;
 }
 
 /* 音乐：正在播放的跳动均衡器指示（列表行与播放队列共用） */
@@ -276,9 +494,26 @@ input, textarea, [contenteditable='true'] {
   animation-play-state: paused;
 }
 @keyframes musicEqBounce {
-  0%, 100% { transform: scaleY(0.45); }
-  50% { transform: scaleY(1); }
+  0%,
+  100% {
+    transform: scaleY(0.45);
+  }
+  50% {
+    transform: scaleY(1);
+  }
 }
+
 @media (prefers-reduced-motion: reduce) {
-  .music-eq > i { animation: none; }
-}
\ No newline at end of file
+  .music-eq > i {
+    animation: none;
+  }
+  .tab-animate {
+    animation: none;
+  }
+  .hotkey-recorder.recording {
+    animation: none;
+  }
+  .status-dot-pulse {
+    animation: none;
+  }
+}
diff --git a/src/types/terminal.ts b/src/types/terminal.ts
index f35d829..52470f5 100644
--- a/src/types/terminal.ts
+++ b/src/types/terminal.ts
@@ -58,6 +58,13 @@ export interface SshHost {
   jumpIds: string[]
   /** 'utf-8'（默认）| 'gbk' 等 */
   encoding: string
+  /**
+   * 是否在远端注入 shell 集成 hook（命令历史 + cwd 跟踪）。
+   *
+   * 注入只影响本次会话：改远端的 `PROMPT_COMMAND`／`precmd`，不落盘。
+   * 默认开启；与 `startupCommand` 里 `exec` 换 shell 之类配置冲突时可关掉。
+   */
+  injectShellIntegration: boolean
 }
 
 /** 主机视图：配置 + 派生凭据状态（**不含密码明文**） */
@@ -120,8 +127,6 @@ export interface SelectionSettings {
 export interface LayoutSettings {
   confirmCloseRunning: boolean
   inheritCwd: boolean
-  sidebarOpen: boolean
-  sidebarWidth: number
   showStatusBar: boolean
   /** 分屏上限（后端封顶 4） */
   maxPanes: number
@@ -138,7 +143,14 @@ export interface ShortcutBinding {
 export interface SecuritySettings {
   /** 主机密钥策略（后端仅支持 "ask"） */
   hostKeyPolicy: string
+  /** 指纹变更时是否阻断连接（关闭 = 自动接受新指纹并记入变更历史） */
   blockOnFingerprintChange: boolean
+  /**
+   * 是否把主机密钥相关的**安全事件**写入日志（默认开）。
+   *
+   * 与会话日志（工具栏按会话显式开启的输出落盘）不是一回事：
+   * 这里写的是「指纹已信任 / 首次见到被接受 / 变更被接受或拒绝」这类事件行。
+   */
   auditLog: boolean
 }