From e65a1595fee325ee9b3b735f7a1ba0540e9b134a Mon Sep 17 00:00:00 2001 From: chengma Date: Mon, 20 Jul 2026 15:43:31 +0800 Subject: [PATCH] docs(ui): rebuild workbench prototype per Windows UI/UX spec MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 按 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 --- docs/ui/README.md | 7 +- docs/ui/workbench-redesign-v1.html | 2033 ++++++++++++++++++++++++++++ 2 files changed, 2037 insertions(+), 3 deletions(-) create mode 100644 docs/ui/workbench-redesign-v1.html diff --git a/docs/ui/README.md b/docs/ui/README.md index eafca74..3c1ba1d 100644 --- a/docs/ui/README.md +++ b/docs/ui/README.md @@ -1,6 +1,6 @@ -# UI 效果图（SVG 线框） +# UI 效果图 -蝦皮圈優化助手桌面应用的界面效果图。SVG 可用浏览器直接打开查看。命名 `tabN-<名>.svg`，界面改版加后缀（`-T584`、`-v2`）。 +蝦皮圈優化助手桌面应用的界面效果图。SVG 和 HTML 原型都可用浏览器直接打开查看。SVG 命名 `tabN-<名>.svg`，界面改版加后缀（`-T584`、`-v2`）；HTML 原型使用有意义的英文文件名和版本后缀。 | 文件 | 内容 | | --- | --- | @@ -16,5 +16,6 @@ | [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` 等后缀的为**改版提案**，未定稿。界面职责与流程见 [../routes.md](../routes.md)。 +> 仅为效果图或交互原型，最终样式以实现为准。带 `-T584`/`-v2` 等后缀的为**改版提案**，未定稿。HTML 原型不能验证原生 Qt 标题栏、系统主题、DPI、无障碍树、线程和真实任务生命周期；界面职责与流程见 [../routes.md](../routes.md)。 diff --git a/docs/ui/workbench-redesign-v1.html b/docs/ui/workbench-redesign-v1.html new file mode 100644 index 0000000..41f55af --- /dev/null +++ b/docs/ui/workbench-redesign-v1.html @@ -0,0 +1,2033 @@ + + + + + + 蝦皮圈優化助手 - 工作台视觉提案 v1 + + + +
+ +
+ + 蝦皮圈優化助手 + + cmhub 已连接 + +
+ + + +
+
+ + + +
+ + +
+
+

导入采集

+ 读取商品旧标题与原封面，不修改线上商品 + + 批次 2026-07-20 14:32 +
+ +
+ +
+ 7月改版清单.xlsx + 解析 128 行 + 有效 125 + 无效 3 + + + +
+ + +
+ +
+ + +
+
+
+
+
+ + + +
+ + +
+ + + + + + + + + + + + + + + + + + + +
店铺别名商品 ID阶段采集结果
台北生活店taipei_life51513423876待采集等待本轮采集
台北生活店taipei_life51813423856已采集旧标题、原封面已保存
质感好物店quality_goods48663456321略过审核中，按本轮采集范围略过
台北生活店taipei_life52313423890失败账号未登录，请在账号管理确认登录
质感好物店quality_goods49913423712已采集旧标题、原封面已保存
+
+ 当前筛选没有匹配的任务 + 调整筛选条件，或清除筛选查看全部 5 条任务。 +
+
+ + +
+
+ 已选 0 项 + + + +
+
+
+ 上一轮采集部分完成：成功 122，失败 2，按范围略过 1 + 失败原因集中在账号未登录（2 条）。已成功的采集结果已保留，重试只会处理失败项。 +
+
+ + + +
+
+
+ + +
+ 本轮范围：当前筛选 5 条 · 采集只读取商品页面，不修改线上商品 + +
+ + + +
+
+
+
+ + +
+
+

AI生成

+ 调用 cmhub 生成新标题与新封面，会消耗点数 + + 批次 2026-07-20 14:32 + +
+ +
+ + + +
+
+
+
+
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
店铺商品 ID旧标题新标题生成状态
台北生活店51513423876簡約隨行保溫杯大容量隨行保溫杯｜輕巧防漏 316 不鏽鋼标题、图片已生成
台北生活店51813423856棉麻收納籃等待生成待生成
质感好物店48663456321居家小夜燈暖光感應小夜燈｜即插即用图片失败，标题已保存
台北生活店52313423890可折疊購物袋等待生成待生成
质感好物店49913423712厚磅純棉浴巾飯店級厚磅純棉浴巾｜吸水快乾标题、图片已生成
+
+ 当前筛选没有匹配的任务 + 调整筛选条件，或清除筛选查看全部 5 条任务。 +
+
+ +
+
+ 已选 0 项 + + + + +
+ + + +
+
+ + +
+
+ + + +
+
+ +
14:36:12 [就绪] 当前筛选 5 条 · 标题并发 4，图片并发 5。
+
+ +
+
+ + +
+ 本轮范围：当前筛选 5 条 + +
+ + +
+
+
+
+
+ + +
+
+

更新蝦皮

+ 把已生成的标题与封面提交到蝦皮线上商品 + + 线上写入操作 +
+ +
+
+
+ + +
+ 将按店铺顺序执行，最多 2 个账号并行 + + 开始前会检测账号 Chrome 与登录状态 +
+ +
+
+
+
+
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
店铺商品 ID新标题新封面更新状态
台北生活店51513423876大容量隨行保溫杯｜輕巧防漏 316 不鏽鋼new_51513423876.jpg待更新
质感好物店49913423712飯店級厚磅純棉浴巾｜吸水快乾new_49913423712.jpg待更新
台北生活店51813423856缺新标题new_51813423856.jpg内容不完整
质感好物店48663456321暖光感應小夜燈｜即插即用new_48663456321.jpg上一轮失败
台北生活店52313423890輕便折疊購物袋｜大容量耐重new_52313423890.jpg已更新
+
+ 当前筛选没有匹配的任务 + 调整筛选条件，或清除筛选查看全部 5 条任务。 +
+
+ +
+
+ 已选 0 项 + + +
+ +
+
+ 本轮可更新 3 条，已排除 2 条 + 缺新标题 1 条；商品未上架 1 条。商品状态异常的记录不会提交，也不提供强制更新。 +
+
+ +
+
+
+ +
+ 本轮范围：当前筛选中通过预检的 3 条 · 提交后会修改线上商品，无法自动回滚 + +
+ + + +
+
+
+
+ + +
+
+

商品套图

+ 为单个商品生成白底、场景、细节与卖点图 + + +
+ +
+ + +
+
+
+
+ + +
+
+ + +
+ + + + +
+ +
+
+ 商品原图 + 已选 3 / 6 张 + + + +
+
+ + + + + + +
+
+ +
+
+ 生成结果 + 白底图 1 · 场景图 1 · 卖点图 1 + + +
+
+ + + +
+
+
+ +
+
+ + +
+
+ + +
+ 3 类共 3 张 · 预计消耗 6 点 + +
+ + +
+
+
+
+
+ + +
+
+

账号管理

+ 管理店铺账号、Chrome 数据目录与登录状态 + + +
+ +
+ + +
+
+

账号详情

+
+
+
+
+
+
+
+
+
+

常用操作

+
+ + + + + +
+
+
+
+
+ + +
+
+

设置

+ 网关、模型、路径与更新安全参数 + + + + +
+ +
+
+

cmhub 网关

+
+
只填写网关根地址，保存时自动规整路径。
+
保存在本地配置，不会写入日志。
+
+
+
+
+
+
+

生成参数

+
+
+
+
+
+
+
+
+
+
+

路径与更新安全

+
+
+
+
+
+
+
+
+
+
+
+ +
+ 就绪 + ② AI生成 · 当前筛选 5 条 + + +
+
+ +
+ + + + + +
+

选择本轮采集范围

+

程序会逐个打开商品详情页检测并保存商品状态，再按所选范围读取旧标题与原封面。本步骤只读取页面，不修改线上商品。

+
+ + +
+
+
+ + + + +
+

选择本轮生成范围

+

当前筛选包含 5 条商品，其中架上商品 4 条、状态异常 1 条。

+
+ + +
+
+
+ + + + +
+

更新 3 件蝦皮商品？

+

将把新标题和新封面提交到蝦皮线上商品。提交后无法由本程序自动回滚，需要到蝦皮賣家中心手动改回。

+
+
更新内容标题和封面
+
涉及账号2 个
+
通过预检的商品3 件
+
51513423876、49913423712、52313423890
+
+
+
+ + +
+ + + + +
+

本轮更新预检结果

+

共 5 条记录进入预检，可更新 3 条，排除 2 条。同一条记录只计一次排除，按原因优先级归类。

+
+
可更新51513423876、49913423712、523134238903
+
缺新标题518134238561
+
商品未上架486634563211
+
审核中—0
+
状态未知—0
+
+

商品状态异常的记录不会提交到蝦皮，也不提供强制更新入口。需要处理这些商品时，请先在蝦皮賣家中心恢复上架，再回到①重新采集刷新状态。

+
+
+ + + + +
+

3 行未能导入

+

以下行已跳过，其余 125 行已正常导入。修正后可用“追加导入到当前批次”重新导入这些行。

+
+
第 12 行商品 ID 为空
+
第 47 行商品 ID 含非数字字符
+
第 88 行店铺别名 unknown_shop 未匹配到账号
+
+
+
+ + +
+ + + + +
+

替换当前批次数据？

+

当前批次已有 3 条采集结果和 2 条生成结果。替换后这些结果会被移除，且无法恢复。选择“追加导入”可以保留现有结果。

+
+
+ + +
+ + + + +
+

重置所选商品的生成结果？

+

已生成的新标题和新封面会被清空，需要重新消耗点数才能再次生成。原图与旧标题不受影响。

+
+
+ + +
+ + + + +
+

删除账号“台北生活店”？

+

将从本程序移除该账号配置。Chrome 数据目录 data/chrome/taipei_life 会保留在磁盘，需要手动清理。已导入且属于该账号的 62 条任务会失去账号匹配，无法继续采集或更新。

+
+
+ + +
+ + + + +
+

删除套图项目 51513423876？

+

将永久删除该项目的 6 张原图和 3 张生成结果，无法恢复。已导出到其他位置的图片不受影响。

+
+
+ + +
+ + + + +
+

生成商品套图？

+

将使用已选的 3 张原图，生成白底图、场景图和卖点图各 1 张，预计消耗 6 点。生成期间可以切换到其他标签页继续工作。

+
+
+ + +
+ + + + +
+

保存设置更改？

+

设置中有未保存的更改。离开前可以保存、放弃，或留在设置页继续编辑。

+
+
+ + + +
+ + + + +
+

原型说明与验收边界

+

本页是 HTML 交互原型，用于确认信息架构、命令分区、状态反馈和视觉方向。数据为模拟数据，不连接 cmhub、蝦皮或本地数据库，任何按钮都不会产生真实副作用。

+ +

本原型已对齐的产品决策

+
    +
  • ①②③ 均不设商品状态列和商品状态下拉筛选（T-662b/c/d 非目标）。商品状态通过①采集前的范围确认、②生成前的范围确认，以及③的后台预检拦截来表达。
    • +
  • ①②范围确认使用纵向全宽按钮，最小内容宽度 520px，扩大范围选项为警示橙色描边而非红色，语义为非破坏性（T-663）。
    • +
  • 按钮文案为「采集架上商品 / 采集全部商品」与「生成架上商品 / 生成全部商品」（T-664、T-665）。
    • +
  • ③不提供任何强制更新异常商品的入口，商品状态异常一律后台拦截（T-662d）。
    • +
  • 历史批次已由数据库迁移默认为架上商品，不出现「待检测」状态和状态重检入口（T-667）。
    • +
+ +

仍需确认的假设

+
    +
  • 表格新增选择复选框列与批量命令（仅重新采集所选 / 仅生成所选 / 重置所选生成结果）。当前实现以“当前筛选范围”为唯一作用域，此项为新增交互，需确认是否纳入范围。
    • +
  • ①数据准备区的「追加导入 / 替换当前批次」区分，以及替换前的确认，需确认与现有导入行为是否一致。
    • +
  • ③的预检结果信息条常驻在表格下方，替代原先只在点击后弹窗告知的方式。
    • +
  • 部分成功后的「查看失败项 / 重试失败项」入口位置。
    • +
+ +

不能仅靠本原型验收的内容

+
    +
  • 原生标题栏、系统菜单、Snap Layouts、多窗口与任务栏行为；本页标题栏仅为示意。
    • +
  • Qt 原生控件的精确尺寸、字体栅格化、输入法与系统主题差异。
    • +
  • Mica/Acrylic 材质、真实 Windows 高对比度主题、多显示器 DPI 切换。
    • +
  • Narrator 与 UI Automation 树的最终语义。
    • +
  • 大批量数据下的虚拟化、线程、内存与启动性能。
    • +
+ +

目标实现：PySide6 6.5.3（Qt Widgets）。颜色 Token 取自 app/gui/widgets.py，便于交接时直接映射到现有 QSS 常量。

+
+
+ + + + +