Files
cmshoppe/docs/ui
chengmaandClaude Opus 4.8 fb873aae90 docs: 补 T-622 UI/UX 优化项 + 效果图落地 P1-P4/P5
ui-ux-pro-max 校验后修订(桌面可迁移规则):
- P1 套图结构压成常驻 chips + 渐进披露,核心控制不再被折叠
- P2 下拉值内联前缀(平台/国家/语言/比例),无 label 也保留语义
- P3 引导文案移到卖点框下、11px #6b7280 提高对比度
- P4 商品ID 恢复 w140 + 等宽数字,避免截断
- P5 失败卡加简短原因;空态引导记为实现期
- P6 小控件命中区/accessibleName 记为实现期加固

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-14 09:02:50 +08:00
..

UI 效果图(SVG 线框)

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

文件 内容
overview-pipeline.svg 主流水线总览(stage:imported→collected→generated→applied;⑥ AI工场为图片候选工作区)
tab1-import-collect.svg ① 导入采集:导入 Excel、任务列表、采集旧标题/旧封面、回写、日志
tab2-ai-generate.svg ② AI生成:提示词、生成、新旧封面对照、重置图片后批量补生成
tab2-ai-generate-T584.svg ② AI生成(T-584 提案):标题提示词加模板控件行、封面控件压一行、插入类按钮下移、标题输入框增高
tab3-update-shopee.svg ③ 更新蝦皮:已生成任务、开始更新确认、执行结果、汇总
tab4-accounts.svg ④ 账号管理:账号列表、启动登录、检测登录、账号编辑弹窗
tab5-settings.svg ⑤ 设置:AI 模型/Key、路径、端口
tab6-image-studio.svg ⑥ 图片精修(提案·初版):商品列表、原主图九宫、照片池、生成控制、终选排序
tab6-image-studio-v2.svg ⑥ 图片精修(提案·重排):细图标轨、照片池放大、提示词中心整列、全宽出片盘
tab6-ai-studio-v3.svg ⑥ AI工场(需求定稿·v3):合并提示词、完整模板 CRUD、异步任务照片池、部分导出与终选排序
tab6-suite-package-v1.svg ⑥ 商品套图(迁移提案·v1):从「虾皮圈电商图生成器」商品套餐模块迁移,替换 AI工场;已去掉「详情图」(与套图合并为单一图片类型)。采用本仓库既有模块风格(#2b3a55 头栏 / #2f6fed 蓝 / 微软雅黑)。多任务标签页、左侧配置面板(商品原图上传、生成设置、AI 帮写、套图结构配置:白底/场景/模特/细节/卖点+自定义分类计数)、右侧生成结果网格、底部进度与生成/停止

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