# 宝塔终端 V5 · 主题与材质规范

2026-11-08 · 适用于 `prototype.html` V6 视觉层。目标不是增加一套新皮肤，而是把现有的石墨灰、宝塔绿和液态玻璃收敛成可验证的角色规则。

## 颜色角色

| 角色 | 色值 | 使用场景 | 禁止场景 |
| --- | --- | --- | --- |
| 宝塔绿 | `#61ca8d` / `#16854a` | 主操作、选中、进行中、在线、成功 | 普通标题、装饰线、无状态含义的图标 |
| 琥珀 | `#d5b676` / `#806021` | 等待确认、需要注意、未完成 | 成功、普通强调、品牌装饰 |
| 珊瑚红 | `#e29393` / `#a73e42` | 错误、危险操作、断线阻断 | 普通未选中、普通提示 |
| 中性灰 | `#0b0d0f` – `#edf1f5` | 页面、表面、分隔、正文、弱化文字 | 用彩色替代层级 |
| 终端语义 | `#83dca7` prompt / `#edf1f5` 输出 / `#89939f` 注释 | 终端输出、错误行、选中文本 | 把终端变成应用主题色的延伸 |

规则：绿色不用于装饰；琥珀只提示等待或注意；红色只表示错误或危险；所有状态都必须同时有文字，不能只靠颜色。执行确认卡、搜索结果、文件连接和终端断线共用同一套状态语义。

## 对比度验证

按 WCAG 2.x 相对亮度计算；正文/小字要求 ≥ 4.5:1，大字号与有意义图形要求 ≥ 3:1。完整机器可读结果见 [`delivery/theme-checks.json`](delivery/theme-checks.json)。

| 主题 | 场景 | 前景 | 背景 | 实测 | 阈值 | 结果 |
| --- | --- | --- | --- | ---: | ---: | --- |
| dark | 正文 | `#edf1f5` | `#0b0d0f` | 17.15:1 | ≥ 4.5:1 | 通过 |
| dark | 次级文字 | `#b0b8c1` | `#0b0d0f` | 9.71:1 | ≥ 4.5:1 | 通过 |
| dark | 弱化文字 | `#89939f` | `#0b0d0f` | 6.25:1 | ≥ 4.5:1 | 通过 |
| dark | 宝塔绿文字 | `#83dca7` | `#0b0d0f` | 11.83:1 | ≥ 4.5:1 | 通过 |
| dark | 主按钮文字 | `#10291a` | `#61ca8d` | 7.64:1 | ≥ 4.5:1 | 通过 |
| dark | 琥珀状态文字 | `#d5b676` | `#0b0d0f` | 10.0:1 | ≥ 4.5:1 | 通过 |
| dark | 珊瑚红状态文字 | `#e29393` | `#0b0d0f` | 8.18:1 | ≥ 4.5:1 | 通过 |
| dark | 琥珀提示底 | `#e2ba7d` | `#332b22` | 7.65:1 | ≥ 4.5:1 | 通过 |
| dark | 珊瑚红错误底 | `#f1a6a5` | `#332326` | 7.62:1 | ≥ 4.5:1 | 通过 |
| dark | 用户气泡 | `#f1f4f6` | `#23332f` | 11.99:1 | ≥ 4.5:1 | 通过 |
| light | 正文 | `#20272e` | `#f5f6f8` | 13.96:1 | ≥ 4.5:1 | 通过 |
| light | 次级文字 | `#596571` | `#f5f6f8` | 5.51:1 | ≥ 4.5:1 | 通过 |
| light | 弱化文字 | `#606c78` | `#f5f6f8` | 4.96:1 | ≥ 4.5:1 | 通过 |
| light | 弱化文字（卡片） | `#606c78` | `#eef0f3` | 4.7:1 | ≥ 4.5:1 | 通过 |
| light | 宝塔绿文字 | `#116e3c` | `#f5f6f8` | 5.85:1 | ≥ 4.5:1 | 通过 |
| light | 主按钮文字 | `#ffffff` | `#16854a` | 4.68:1 | ≥ 4.5:1 | 通过 |
| light | 琥珀状态文字 | `#806021` | `#f5f6f8` | 5.38:1 | ≥ 4.5:1 | 通过 |
| light | 珊瑚红状态文字 | `#a73e42` | `#f5f6f8` | 5.69:1 | ≥ 4.5:1 | 通过 |
| light | 琥珀提示底 | `#745016` | `#f7eddd` | 6.24:1 | ≥ 4.5:1 | 通过 |
| light | 珊瑚红错误底 | `#993f43` | `#f8e8e8` | 5.63:1 | ≥ 4.5:1 | 通过 |
| light | 用户气泡 | `#1c242c` | `#e1efe8` | 13.24:1 | ≥ 4.5:1 | 通过 |
| terminal | 终端提示符 | `#83dca7` | `#0b0d0f` | 11.83:1 | ≥ 4.5:1 | 通过 |
| terminal | 终端正文 | `#edf1f5` | `#0b0d0f` | 17.15:1 | ≥ 4.5:1 | 通过 |
| terminal | 终端弱化文字 | `#89939f` | `#0b0d0f` | 6.25:1 | ≥ 4.5:1 | 通过 |
| dark | 绿色图形 | `#61ca8d` | `#0b0d0f` | 9.59:1 | ≥ 3.0:1 | 通过 |
| light | 绿色图形 | `#16854a` | `#f5f6f8` | 4.33:1 | ≥ 3.0:1 | 通过 |

共 26 项，通过 26 项，未通过 0 项。浅色弱化文字从 `#68747f` 调整为 `#606c78`，以覆盖卡片表面上的小字场景。

## 液态玻璃材质

| 层级 | 使用位置 | 配方 | 降级 |
| --- | --- | --- | --- |
| Chrome | 状态栏、一级页头、工作页头、设置子页头 | `blur(8px) saturate(125%)` + 底部渐隐 mask | 减少透明/增强对比时改实色 `--page` |
| Floating | 悬浮底栏 | `blur(20px) saturate(125%)` + 半透明填充、内高光、`1px` 细描边 | 改实色 `--bg`，去掉高光与模糊 |
| Composer | 对话输入区 | `blur(14px) saturate(135%)` + 94%/97% 密实填充、内高光、`1px` 细描边 | 改实色 `--bg`，去掉高光与模糊 |
| Overlay | 底部面板、抽屉 | `blur(24px) saturate(130%)` + 32px 顶部圆角、遮罩、grip | 改实色面板，遮罩保留 |

输入区新增了更密实的填充（深色 `--page` 94%，浅色 `#f8fafb` 97%），避免滚动内容中的绿色按钮透过玻璃形成大块色斑；同时保留顶部高光、细描边和轻微透明，维持液态玻璃的层次。`prefers-reduced-transparency`、`prefers-contrast`、`prefers-reduced-motion` 与设置页开关继续生效。

## 布局与控件一致性

- 一级页头 64px；右侧操作与返回按钮 44×44px，图形 23px；页头左右 `20px`。
- 工作页头与设置子页头统一为 `44px / 1fr / 44px` 三列，标题在中间列垂直居中；设置子页不再左对齐压住返回按钮。
- 悬浮底栏 56px，四项等宽；进入具体对话、终端、文件预览后隐藏；搜索展开时下沉淡出，取消时上升淡入。
- 列表卡 20px 圆角；正文 14–15px，辅助信息 11–12px；主要触控区不小于 44px。
- 底部面板标题 18px，关闭按钮 44px；所有浮层支持遮罩、Escape、焦点回收。
- 终端保留深色背景和等宽字体，不随浅色主题切换；但终端页签、快捷键、输入区、软键盘和主机会话卡片使用与全站一致的触控节奏（44px 为主，320px 快捷键压缩到 40px）和 12–18px 圆角。

## 交互流程检查

- AI：新建对话 → 选择主机/模型 → 发送 → 生成中/停止 → 读取确认 → 修改确认/拒绝 → 结果或失败 → 复制/查看终端；打开已有对话自动滚动到最新轮次，输入区悬浮在内容上方。
- 对话管理：长按/左滑/右键 → 置顶、删除、更多；多选 → 批量置顶/删除；重命名校验空值与 60 字符；删除确认，取消保留选择。
- 连接：主机 → 认证 → 首次指纹 → 连接/取消 → 终端；断线 → 恢复远端或新建 Shell；同主机多会话分别保留目录、草稿和输出。
- 文件：文件首页 → 选择主机 → 独立连接/认证/指纹 → 目录浏览/搜索/只读预览 → 返回原主机或终端目录。
- 设置：设置首页 → 账户/模型/外观/AI/终端/辅助功能/设备/数据；设置子页标题居中，返回明确；终端设置页不再被误路由到终端会话。
- 空态、错误、加载、成功、拒绝、断线和删除确认均有独立状态；不出现没有下一步的死路。

## 参考取向

- Apple HIG：大标题 + 居中工作页标题、底部面板、44px 触控区、材质降级与动态效果偏好。
- 主流 AI 对话：消息与执行卡分层、单一输入区、主机/模型上下文、历史抽屉、滚动到最新、停止与重试。
- Termius / NeoServer 类终端：会话身份、连接状态、快捷键栏、输出选择、恢复与新建分离。
- 只借鉴信息结构和交互，不引入外部品牌资产、图标包或第二套配色。

## 主题预览

- [`浅色主题预览.png`](浅色主题预览.png)：AI 对话、账户、文件、设置、外观、主机管理六个浅色页面。
- [`材质对比预览.png`](材质对比预览.png)：同一 AI 对话的深色玻璃、减少透明效果、增强对比度、浅色玻璃四种状态。

单页源图放在 [`previews/`](previews/)；88 张主图集仍以深色为主，浅色和材质降级通过上述预览与对比度检查验证。

## 验证边界

本规范验证的是浏览器中的颜色、材质、布局与交互状态；尚未做 iPhone 真机触控、VoiceOver、Dynamic Type、真实软键盘、真实 SSH/SFTP/AI 服务和跨启动持久化验收。原型仍为样例数据。