cmshoppe/docs/ui/README.md

# UI 效果图（SVG 线框）

蝦皮圈優化助手桌面应用的界面效果图。SVG 可用浏览器直接打开查看。命名 `tabN-<名>.svg`，界面改版加后缀（`-T584`、`-v2`）。

| 文件 | 内容 |
| --- | --- |
| [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) | ⑥ 商品套图（迁移提案·v1）：从「虾皮圈电商图生成器」商品套餐模块迁移，替换 AI工场；已去掉「详情图」（与套图合并为单一图片类型）。采用本仓库既有模块风格（#2b3a55 头栏 / #2f6fed 蓝 / 微软雅黑）。多任务标签页、左侧配置面板（商品原图上传、生成设置、AI 帮写、套图结构配置：白底/场景/模特/细节/卖点+自定义分类计数）、右侧生成结果网格、底部进度与生成/停止 |

> 仅为线框效果图，最终样式以实现为准。带 `-T584`/`-v2` 等后缀的为**改版提案**，未定稿。界面职责与流程见 [../routes.md](../routes.md)。