2026-07-01 17:19:35 +08:00
|
|
|
|
# 界面配色设计（语义色规范）
|
|
|
|
|
|
|
|
|
|
|
|
> 立场：以 UI 设计师视角，为当前灰白 GUI 定义一套**语义色**规范。核心原则是"颜色编码含义、加速判断、降低误操作"，不是装饰。
|
|
|
|
|
|
> 基线：`app/gui.py` 现状——除顶部 Tab 栏（`TAB_STYLE`，GitHub 风浅灰/悬停浅蓝）外，任务状态、校验数字、登录状态、动作按钮均为 Qt 默认灰白。
|
|
|
|
|
|
> 性质：设计规范，不改代码。落地时按文末"实现映射"接入，遵守 `docs/05-coding-rules.md` 验证清单。
|
|
|
|
|
|
|
|
|
|
|
|
## 为什么上色（用户视角）
|
|
|
|
|
|
|
|
|
|
|
|
本工具是**带风险分级的流水线**（①②只读/安全 → ③写 Shopee 线上，高风险）。纯灰白本身不是缺点：中性界面对长时间操作不易疲劳、显得专业。所以目标不是"变好看"，而是让**承载判断的关键信息**用颜色加速识别、并对高风险动作形成潜意识提醒。
|
|
|
|
|
|
|
|
|
|
|
|
**反面**：给大面积表格/面板刷底色、堆品牌色、加渐变，会让密集工具界面变吵、变"玩具感"，是负分。因此本规范只给"承载含义的元素"上色。
|
|
|
|
|
|
|
|
|
|
|
|
## 三条纪律（决定成败）
|
|
|
|
|
|
|
|
|
|
|
|
1. **背景保持中性**：只给状态文字、关键按钮、指示点上色；不给表格行/面板大面积刷底色（失败行可用极浅底色，见下）。
|
|
|
|
|
|
2. **不能只靠颜色**：色盲用户约 8%。状态必须"颜色 + 文字/图标"双编码——现有状态已有中文文字（达标）；③ 高风险按钮第一版不强制图标，避免 Windows/Qt 字体渲染不稳。
|
|
|
|
|
|
3. **一套色板全局复用 + 对比度达标**：绿/红/琥珀/蓝各定唯一值，禁止每处手写不同的红；文字色对白底满足 WCAG AA（对比度 ≥ 4.5）。
|
|
|
|
|
|
|
|
|
|
|
|
## 语义色板（浅色主题）
|
|
|
|
|
|
|
|
|
|
|
|
| 语义 | 名称 | 十六进制 | 用途 | 白底对比 |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| 成功 | success | `#1a7f37` | 已更新成功、已登录 | AA ✓ |
|
|
|
|
|
|
| 失败 | danger | `#cf222e` | 失败状态、校验错误数、破坏性按钮文字 | AA ✓ |
|
|
|
|
|
|
| 进行中 | info | `#0969da` | 采集中/生成中/更新中、安全主操作按钮 | AA ✓ |
|
|
|
|
|
|
| 待处理 | pending | `#9a6700` | 待采集/待生成/待更新 | AA ✓ |
|
|
|
|
|
|
| 略过/禁用 | muted | `#6e7781` | 略过、禁用态、次级文字 | AA ✓ |
|
|
|
|
|
|
| 危险动作强调 | warning | `#bc4c00` | ③ 写线上的高风险按钮 | AA ✓ |
|
|
|
|
|
|
| 极浅失败底 | danger-bg | `#ffebe9` | 失败行可选浅底（谨慎用） | 底色 |
|
|
|
|
|
|
|
|
|
|
|
|
> 若将来做深色主题，另出一套等义映射；本规范先服务当前浅色。
|
|
|
|
|
|
|
|
|
|
|
|
## 组件配色映射（按价值排序）
|
|
|
|
|
|
|
|
|
|
|
|
### 1）任务状态列（①②③表格核心）— 最高 ROI
|
|
|
|
|
|
|
|
|
|
|
|
`TaskTableModel` / `GenerateTaskTableModel` / `ApplyTaskTableModel` 的状态/阶段列，按值上前景色：
|
|
|
|
|
|
|
|
|
|
|
|
| 显示 | 语义色 |
|
|
|
|
|
|
| --- | --- |
|
|
|
|
|
|
| 已采集 / 已生成 / 已更新成功 | success `#1a7f37` |
|
|
|
|
|
|
| 失败 | danger `#cf222e` |
|
|
|
|
|
|
| 略过 | muted `#6e7781` |
|
|
|
|
|
|
| 待采集 / 待生成 | pending `#9a6700` |
|
|
|
|
|
|
| 采集中 / 生成中 / 更新中（如有进行态） | info `#0969da` |
|
|
|
|
|
|
|
|
|
|
|
|
- 收益：扫上百行时一眼分辨成功/失败/待办，是全项目颜色投入产出比最高处。
|
|
|
|
|
|
- 可选：失败行整行加 `danger-bg #ffebe9` 极浅底，但仅失败一种、不叠加其他行底色，避免花。
|
|
|
|
|
|
|
|
|
|
|
|
### 2）③ 高风险动作按钮
|
|
|
|
|
|
|
|
|
|
|
|
- `开始更新`（写 Shopee 线上，`objectName=startUpdateButton`，现仅粗体）：改用 **warning `#bc4c00`** 系（暖色描边或填充；图标可后置评估），与②安全流程的 info 蓝主操作明确区分。目的是每次点它都有"这一步动线上"的潜意识提醒。
|
|
|
|
|
|
- `停止`：保持中性或 muted，不与主操作抢视觉。
|
|
|
|
|
|
|
|
|
|
|
|
### 3）校验数字（①导入汇总栏）
|
|
|
|
|
|
|
|
|
|
|
|
- 未匹配数 **> 0** 时用 danger `#cf222e`，并保持当前「未匹配(n)」按钮可点击筛出；= 0 时保持中性。
|
|
|
|
|
|
- 无效行数 **> 0** 时同样用 danger 标红提示，但第一版不承诺在任务表筛出，因为脏行不会入库；若要点击查看，需要后续新增「导入错误明细」。匹配数可用 success 或保持中性。
|
|
|
|
|
|
|
|
|
|
|
|
### 4）登录状态点（④账号管理）
|
|
|
|
|
|
|
2026-07-02 09:06:52 +08:00
|
|
|
|
- `● 已登录` = success `#1a7f37`；`● 未登录 / 检测失败` = danger `#cf222e`；`● 未检测 / 已启动 / 检测中` = muted `#6e7781` 或 info `#0969da`。落地时优先在④账号表登录状态单元格显示 `● 状态文本`，并通过 `QTableWidgetItem.setForeground(QColor(...))` 上色，保留文字，不只靠颜色。
|
2026-07-01 17:19:35 +08:00
|
|
|
|
|
|
|
|
|
|
### 5）③ Tab 危险区标识（克制）
|
|
|
|
|
|
|
2026-07-02 09:06:52 +08:00
|
|
|
|
- 给 ③ 更新shopee 加一个**克制**的暖色标识时，不依赖 QSS 硬选第 3 个 Tab。普通 `QTabBar` stylesheet 没有稳定的 nth-tab 选择器；本轮 T-513 采用 `QTabWidget.setTabIcon(2, ...)` 设置 10-12px warning 小圆点图标，Tab 文案仍保持 `③ 更新shopee`，不改文字色、不整条刷红。目的：让用户始终知道自己在"碰线上"的那个 Tab。
|
2026-07-01 17:19:35 +08:00
|
|
|
|
|
|
|
|
|
|
### 6）破坏性按钮（低优先）
|
|
|
|
|
|
|
2026-07-02 09:06:52 +08:00
|
|
|
|
- `删除批次`（①）、`删除账号`（④）等不可逆动作：按钮文字和描边用 danger `#cf222e`，与普通灰按钮区分；保持原有启用/禁用和二次确认逻辑不变。二次确认弹窗仍是主防线，颜色只是二级提示。
|
2026-07-01 17:19:35 +08:00
|
|
|
|
|
2026-07-06 15:12:38 +08:00
|
|
|
|
### 7）状态栏全局提示色（建议，未落地）
|
|
|
|
|
|
|
|
|
|
|
|
左下角状态栏是低打扰反馈，不应做成醒目的大色块。建议只改变状态栏文字颜色，并在每次显示普通提示时重置样式，避免上一条红色/绿色残留到下一条普通消息。
|
|
|
|
|
|
|
|
|
|
|
|
| 提示类型 | 语义色 | 示例 |
|
|
|
|
|
|
| --- | --- | --- |
|
|
|
|
|
|
| 普通/就绪 | muted `#6e7781` 或系统默认 | `就绪`、`当前：② AI生成` |
|
|
|
|
|
|
| 信息/进行中 | info `#0969da` | `正在生成标题 3/10`、`检测登录中` |
|
|
|
|
|
|
| 成功 | success `#1a7f37` | `设置已保存`、`AI 生成完成`、`已回写 Excel` |
|
|
|
|
|
|
| 警告/需用户处理 | warning `#bc4c00` 或 pending `#9a6700` | `当前筛选结果没有待生成任务`、`请先到①完成旧数据采集`、`请先配置 cmhub` |
|
|
|
|
|
|
| 错误/阻断 | danger `#cf222e` | `更新失败`、`账号未登录`、`点数不足` |
|
|
|
|
|
|
|
|
|
|
|
|
- 状态栏只做辅助反馈，不能替代弹窗、空状态、运行日志和按钮禁用等主反馈。
|
|
|
|
|
|
- 高频进度信息用 info；不会继续执行、但用户可通过配置/选择修复的问题用 warning；已经失败或阻断当前动作的问题用 danger。
|
|
|
|
|
|
- 不建议给所有状态栏消息都上强颜色；普通导航、就绪、筛选数量等信息保持 muted 或默认色，避免长期使用时视觉疲劳。
|
|
|
|
|
|
|
2026-07-01 17:19:35 +08:00
|
|
|
|
## 实现映射（PySide6，落地时参考）
|
|
|
|
|
|
|
|
|
|
|
|
- **状态色**：在各 TableModel 的 `data()` 里响应 `Qt.ForegroundRole`（必要时 `Qt.BackgroundRole`）按内部 `stage/status` 返回 `QColor`；不要按中文显示文案硬匹配，不要在 QSS 里做，表格单元格上色走 model role 最稳。
|
|
|
|
|
|
- **按钮/汇总数字**：用 `objectName` + 集中 QSS。建议把语义色板定义为 `app/gui.py` 顶部的一组常量（如 `COLOR_SUCCESS = "#1a7f37"`），QSS 与 `QColor` 都引用同一常量，杜绝散落硬编码。③ Tab 单独标识如需落地，用 `setTabIcon(2, ...)`，不要试图用 QSS nth 选择器。
|
|
|
|
|
|
- **登录点**：文字前缀 `●` 用 `QColor`，或状态列走 ForegroundRole。
|
2026-07-06 15:12:38 +08:00
|
|
|
|
- **状态栏**：建议在 `MainWindow` 增加统一入口（如 `show_status(message, level="info")`），内部映射 level 到色板并调用 `statusBar().showMessage(message)`；现有 `self.statusBar().showMessage(...)` 后续逐步替换为该入口。第一版如需兼容旧调用，可用轻量关键词兜底分类（失败/错误/异常/点数不足/未登录→danger，完成/成功/已保存/已回写→success，没有/请先/未配置→warning，正在/开始/进度/检测中→info），但新增代码应优先显式传 `level`，不要长期依赖中文字符串匹配。
|
2026-07-01 17:19:35 +08:00
|
|
|
|
- **复用**：所有红/绿/蓝/琥珀只从色板常量取值，新增组件一律引用，不新造颜色。
|
|
|
|
|
|
|
|
|
|
|
|
## 非目标（明确不做）
|
|
|
|
|
|
|
|
|
|
|
|
- 不做整体换肤 / 品牌主题 / 渐变 / 大面积彩色背景。
|
|
|
|
|
|
- 不给普通只读表格行刷底色（失败行浅底是唯一例外且可选）。
|
|
|
|
|
|
- 不改变顶部 Tab 栏既有的防误点尺寸与灰白基调；③ 风险标识必须克制，且可在第一版跳过。
|
|
|
|
|
|
- 不引入第三方 QSS 主题库；用现有 `TAB_STYLE` + objectName + model role 即可。
|
|
|
|
|
|
|
|
|
|
|
|
## 落地建议顺序
|
|
|
|
|
|
|
|
|
|
|
|
1. 状态列上色（映射 1）——收益最高、风险最低，建议先做。
|
|
|
|
|
|
2. ③ 高风险按钮 + 校验数字标红（映射 2、3）——直接服务防误操作与导入纠错；无效行第一版只标红，不做筛表。
|
|
|
|
|
|
3. 登录点、③ Tab 标识、破坏性按钮（映射 4、5、6）——体验打磨。
|
2026-07-06 15:12:38 +08:00
|
|
|
|
4. 状态栏提示色（映射 7）——低风险体验增强，适合在现有语义色稳定后作为小任务落地。
|
2026-07-01 17:19:35 +08:00
|
|
|
|
|
|
|
|
|
|
> 每步落任务时补现状/方案/验收，并跑 `python -m unittest discover -s tests`（GUI 逻辑测试）确认无回归。
|
