Files
cmshoppe/docs/ui/README.md
T
chengmaandClaude Fable 5 e65a1595fe docs(ui): rebuild workbench prototype per Windows UI/UX spec
按 windows-ui-ux skill 的核心体验层、Windows 平台层和 Qt 适配方向重写
docs/ui/workbench-redesign-v1.html:

- 对齐已定稿产品决策:移除 ①②③ 的商品状态列与商品状态下拉筛选
  (T-662b/c/d 非目标),范围确认改为纵向全宽按钮 + 警示橙色描边
  (T-663),文案改为「采集/生成架上商品|全部商品」(T-664、T-665),
  ③ 改为后台预检拦截且无强制更新入口(T-662d),移除「待检测」状态
  与状态重检入口(T-667)。
- 统一页面骨架与命令分区:数据准备区、表格命令区、表格、状态反馈区、
  完成任务区;导入/刷新/选择集/工作流完成命令不再混区,每区一个主按钮。
- 补齐表格交互契约:选择复选框列、三态全选、当前行/焦点/选择集分离、
  Ctrl/Shift 多选、排序 aria-sort、隐藏选择计数、空与筛选无结果状态。
- 按干扰层级重排反馈:破坏性操作改真实确认框且默认聚焦取消,部分成功
  与预检结果改页面级信息条,停止增加 cancelling 中间态,Toast 仅承载
  非关键短反馈。
- 平台基线:语义 Token 对齐 app/gui/widgets.py 颜色常量与 4epx 间距,
  新增深色主题与高对比度近似,触控目标 ≥32epx,键盘补 tablist 方向键、
  F6 窗格切换、Ctrl+F、F5,Ctrl+S 仅在设置页生效并接未保存协议。
- 新增「原型说明与验收边界」对话框,记录已对齐决策、待确认假设,以及
  不能仅靠 HTML 验收的原生标题栏、材质、DPI、无障碍与性能项。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-20 15:43:31 +08:00

22 lines
3.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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、路径、端口 |
| [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 验收的项。 |
> 仅为效果图或交互原型,最终样式以实现为准。带 `-T584`/`-v2` 等后缀的为**改版提案**,未定稿。HTML 原型不能验证原生 Qt 标题栏、系统主题、DPI、无障碍树、线程和真实任务生命周期;界面职责与流程见 [../routes.md](../routes.md)。