docs/ui/README.md

# UI 效果图

蝦皮圈優化助手桌面应用的界面效果图。SVG 和 HTML 原型都可用浏览器直接打开查看。SVG 命名 `tabN-<名>.svg`，界面改版加后缀（`-T584`、`-v2`）；HTML 原型使用有意义的英文文件名和版本后缀。

| 文件 | 内容 |
| --- | --- |
| [overview-pipeline.svg](overview-pipeline.svg) | 主流水线总览（stage：imported→collected→generated→applied；图中旧AI工场入口已由商品套图替换） |
| [tab1-import-collect.svg](tab1-import-collect.svg) | ① 导入采集：导入 Excel、任务列表、采集旧标题/旧封面、回写、日志 |
| [tab2-ai-generate.svg](tab2-ai-generate.svg) | ② AI生成：提示词、生成、新旧封面对照、重置图片后批量补生成 |
| [tab2-ai-generate-T584.svg](tab2-ai-generate-T584.svg) | ② AI生成（T-584 提案）：标题提示词加模板控件行、封面控件压一行、插入类按钮下移、标题输入框增高 |
| [tab3-update-shopee.svg](tab3-update-shopee.svg) | ③ 更新蝦皮：已生成任务、开始更新确认、执行结果、汇总 |
| [tab4-accounts.svg](tab4-accounts.svg) | 账号管理：账号列表、启动登录、检测登录、账号编辑弹窗 |
| [tab5-settings.svg](tab5-settings.svg) | 设置：AI 模型/Key、路径、端口 |
| [tab5-settings-T677.svg](tab5-settings-T677.svg) | 设置（T-677 已实现）：生成网关来源选择器，默认网关与自定义网关的双面板切换、保存生效语义与商品套图限制说明 |
| [tab6-image-studio.svg](tab6-image-studio.svg) | 图片精修（提案·初版）：商品列表、原主图九宫、照片池、生成控制、终选排序 |
| [tab6-image-studio-v2.svg](tab6-image-studio-v2.svg) | 图片精修（提案·重排）：细图标轨、照片池放大、提示词中心整列、全宽出片盘 |
| [tab6-ai-studio-v3.svg](tab6-ai-studio-v3.svg) | AI工场（需求定稿·v3）：合并提示词、完整模板 CRUD、异步任务照片池、部分导出与终选排序 |
| [tab6-suite-package-v1.svg](tab6-suite-package-v1.svg) | 商品套图（T-622 已实现）：从「虾皮圈电商图生成器」商品套餐交互迁移并替换主界面 AI工场入口；单一套图类型，多任务标签，商品原图，平台/国家/语言/比例，AI 帮写，白底/场景/卖点及自定义分类，结果历史、重试、删除撤销与生成进度 |
| [tab6-suite-prompt-dialog-T637.svg](tab6-suite-prompt-dialog-T637.svg) | 商品套图（T-637 提案）：标题行「AI帮写/取消」紧随 label、最右新增「提示词设置」；提示词设置弹窗——左编辑基础模板（行序对齐调研笔记组装顺序，套图名称+补充描述、插入变量菜单、占位符校验、只读规则占位符内联）、右只读实时最终预览（预览分类下拉）、保存/恢复默认共用原子写盘；第一版不做同类多张序号/差异化 |
| [workbench-redesign-v1.html](workbench-redesign-v1.html) | 工作台视觉提案（HTML 可交互原型）：以当前 6 Tab 信息架构为基础，统一「数据准备区→表格命令区→表格→状态反馈区→完成任务区」页面骨架；命令按作用域分区（导入/筛选/选择集/工作流完成），表格补齐当前行、选择集、三态全选与排序契约；范围确认、部分成功、取消中间态和破坏性确认按干扰层级分配到对话框、信息条与 Toast；覆盖浅色/深色/高对比度近似、键盘（Tab/方向键/F6/Ctrl+F/F5）与 Windows 断点。商品状态相关交互已对齐 T-662b/c/d、T-663~T-665、T-667 定稿（无状态列与状态下拉筛选，③无强制更新入口）。颜色 Token 取自 `app/gui/widgets.py`。使用模拟数据，不接生产接口；页脚「原型说明与验收边界」列出假设与不可仅靠 HTML 验收的项。 |

应用图标（非效果图，是随程序发布的资源）：`app/assets/cmshopee-logo.svg` 是可编辑母版，`cmshopee.ico`（16–256 共 9 档）用于 exe 图标和 GUI 窗口左上角，`cmshopee-256.png` 为预览与非 Windows 回退。三者由 `py -3.10 scripts/gen_logo.py` 从同一份几何定义生成，改样式请改脚本后重新生成，不要单独手改某一个文件。

> 仅为效果图或交互原型，最终样式以实现为准。带 `-T584`/`-v2` 等后缀的为**改版提案**，未定稿。HTML 原型不能验证原生 Qt 标题栏、系统主题、DPI、无障碍树、线程和真实任务生命周期；界面职责与流程见 [../routes.md](../routes.md)。
-											docs(ui): rebuild workbench prototype per Windows UI/UX spec
										
										
											2026-07-20 15:43:31 +08:00
+								# UI 效果图
-											docs: 初始化 cmshopee 文档、设计与项目骨架
										
										
											2026-06-26 15:30:37 +08:00
-											docs(ui): rebuild workbench prototype per Windows UI/UX spec
										
										
											2026-07-20 15:43:31 +08:00
+								蝦皮圈優化助手桌面应用的界面效果图。SVG 和 HTML 原型都可用浏览器直接打开查看。SVG 命名 `tabN-<名>.svg`，界面改版加后缀（`-T584`、`-v2`）；HTML 原型使用有意义的英文文件名和版本后缀。
-											docs: 初始化 cmshopee 文档、设计与项目骨架
										
										
											2026-06-26 15:30:37 +08:00
 								| 文件 | 内容 |
 								| --- | --- |
-											refactor(navigation): simplify main tab labels
										
										
											2026-07-17 12:24:05 +08:00
+								| [overview-pipeline.svg](overview-pipeline.svg) | 主流水线总览（stage：imported→collected→generated→applied；图中旧AI工场入口已由商品套图替换） |
-											docs: 初始化 cmshopee 文档、设计与项目骨架
										
										
											2026-06-26 15:30:37 +08:00
+								| [tab1-import-collect.svg](tab1-import-collect.svg) | ① 导入采集：导入 Excel、任务列表、采集旧标题/旧封面、回写、日志 |
-											T-577 封面画廊重置图片
										
										
											2026-07-09 18:15:14 +08:00
+								| [tab2-ai-generate.svg](tab2-ai-generate.svg) | ② AI生成：提示词、生成、新旧封面对照、重置图片后批量补生成 |
-											docs(ui): register tab2-T584 and tab6 image-studio mockups in README
										
										
											2026-07-11 10:19:42 +08:00
+								| [tab2-ai-generate-T584.svg](tab2-ai-generate-T584.svg) | ② AI生成（T-584 提案）：标题提示词加模板控件行、封面控件压一行、插入类按钮下移、标题输入框增高 |
-											feat: localize Shopee GUI wording
										
										
											2026-07-07 14:58:54 +08:00
+								| [tab3-update-shopee.svg](tab3-update-shopee.svg) | ③ 更新蝦皮：已生成任务、开始更新确认、执行结果、汇总 |
-											refactor(navigation): simplify main tab labels
										
										
											2026-07-17 12:24:05 +08:00
+								| [tab4-accounts.svg](tab4-accounts.svg) | 账号管理：账号列表、启动登录、检测登录、账号编辑弹窗 |
 								| [tab5-settings.svg](tab5-settings.svg) | 设置：AI 模型/Key、路径、端口 |
-											feat(settings): support gateway source switching
										
										
											2026-07-20 16:29:28 +08:00
+								| [tab5-settings-T677.svg](tab5-settings-T677.svg) | 设置（T-677 已实现）：生成网关来源选择器，默认网关与自定义网关的双面板切换、保存生效语义与商品套图限制说明 |
-											refactor(navigation): simplify main tab labels
										
										
											2026-07-17 12:24:05 +08:00
+								| [tab6-image-studio.svg](tab6-image-studio.svg) | 图片精修（提案·初版）：商品列表、原主图九宫、照片池、生成控制、终选排序 |
 								| [tab6-image-studio-v2.svg](tab6-image-studio-v2.svg) | 图片精修（提案·重排）：细图标轨、照片池放大、提示词中心整列、全宽出片盘 |
 								| [tab6-ai-studio-v3.svg](tab6-ai-studio-v3.svg) | AI工场（需求定稿·v3）：合并提示词、完整模板 CRUD、异步任务照片池、部分导出与终选排序 |
 								| [tab6-suite-package-v1.svg](tab6-suite-package-v1.svg) | 商品套图（T-622 已实现）：从「虾皮圈电商图生成器」商品套餐交互迁移并替换主界面 AI工场入口；单一套图类型，多任务标签，商品原图，平台/国家/语言/比例，AI 帮写，白底/场景/卖点及自定义分类，结果历史、重试、删除撤销与生成进度 |
 								| [tab6-suite-prompt-dialog-T637.svg](tab6-suite-prompt-dialog-T637.svg) | 商品套图（T-637 提案）：标题行「AI帮写/取消」紧随 label、最右新增「提示词设置」；提示词设置弹窗——左编辑基础模板（行序对齐调研笔记组装顺序，套图名称+补充描述、插入变量菜单、占位符校验、只读规则占位符内联）、右只读实时最终预览（预览分类下拉）、保存/恢复默认共用原子写盘；第一版不做同类多张序号/差异化 |
-											docs(ui): rebuild workbench prototype per Windows UI/UX spec
										
										
											2026-07-20 15:43:31 +08:00
+								| [workbench-redesign-v1.html](workbench-redesign-v1.html) | 工作台视觉提案（HTML 可交互原型）：以当前 6 Tab 信息架构为基础，统一「数据准备区→表格命令区→表格→状态反馈区→完成任务区」页面骨架；命令按作用域分区（导入/筛选/选择集/工作流完成），表格补齐当前行、选择集、三态全选与排序契约；范围确认、部分成功、取消中间态和破坏性确认按干扰层级分配到对话框、信息条与 Toast；覆盖浅色/深色/高对比度近似、键盘（Tab/方向键/F6/Ctrl+F/F5）与 Windows 断点。商品状态相关交互已对齐 T-662b/c/d、T-663~T-665、T-667 定稿（无状态列与状态下拉筛选，③无强制更新入口）。颜色 Token 取自 `app/gui/widgets.py`。使用模拟数据，不接生产接口；页脚「原型说明与验收边界」列出假设与不可仅靠 HTML 验收的项。 |
-											docs: 初始化 cmshopee 文档、设计与项目骨架
										
										
											2026-06-26 15:30:37 +08:00
-											feat(brand): add application logo for exe and window icon
										
										
											2026-07-20 16:39:18 +08:00
+								应用图标（非效果图，是随程序发布的资源）：`app/assets/cmshopee-logo.svg` 是可编辑母版，`cmshopee.ico`（16–256 共 9 档）用于 exe 图标和 GUI 窗口左上角，`cmshopee-256.png` 为预览与非 Windows 回退。三者由 `py -3.10 scripts/gen_logo.py` 从同一份几何定义生成，改样式请改脚本后重新生成，不要单独手改某一个文件。
-											docs(ui): rebuild workbench prototype per Windows UI/UX spec
										
										
											2026-07-20 15:43:31 +08:00
+								> 仅为效果图或交互原型，最终样式以实现为准。带 `-T584`/`-v2` 等后缀的为**改版提案**，未定稿。HTML 原型不能验证原生 Qt 标题栏、系统主题、DPI、无障碍树、线程和真实任务生命周期；界面职责与流程见 [../routes.md](../routes.md)。