chengma/cmshoppe
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 落 T-622 ⑥商品套图替换AI工场（迁移套餐模块）+ 效果图

Browse Source 
- 新增 docs/tasks/T-622.md：需求定稿+落地事实（全原生PySide6、复用image_studio后端与异步生图、绑账号+商品ID、去详情图、原生重写不引WebView）
- 新增 docs/ui/tab6-suite-package-v1.svg：家风效果图（顶部账号+商品ID、6图上传、2×2下拉去label、卖点框加高、结构3类、生成按钮toggle、可滚动区、右侧结果+进度）
- docs/ui/README.md 登记该效果图

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
chengma
2026-07-13 15:20:42 +08:00
co-authored by Claude Opus 4.8
parent a86e2bb162
commit e2fbae2ee1
3 changed files with 234 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/ui/README.md
+1
View File
@@ -14,5 +14,6 @@
| [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)。
docs/ui/tab6-suite-package-v1.svg
+167
View File
@@ -0,0 +1,167 @@
<svg xmlns="http://www.w3.org/2000/svg" width="940" height="620" viewBox="0 0 940 620" font-family="'Segoe UI','Microsoft YaHei',sans-serif">
<!-- ⑥ 商品套图（迁移自「虾皮圈电商图生成器」商品套餐模块，替换原 AI工场；已去掉「详情图」，与套图合并为单一图片类型；顶部绑定账号+商品ID，复用现有 image_studio 后端）-->
<defs>
<style>
.win{fill:#f4f6f9;stroke:#d3d9e2}.hd{fill:#2b3a55}.title{fill:#fff;font-size:14px;font-weight:600}
.tab{fill:#e8ebf0}.tabA{fill:#f4f6f9}.tabT{fill:#5c6573;font-size:13px}.tabTA{fill:#2f6fed;font-size:13px;font-weight:600}
.sec{fill:#1f2733;font-size:13px;font-weight:600}.mut{fill:#8a92a0;font-size:11px}
.cell{fill:#2a2f3a;font-size:12px}.th{fill:#5c6573;font-size:12px;font-weight:600}
.btnP{fill:#2f6fed}.btnPT{fill:#fff;font-size:13px;font-weight:600}
.btn{fill:#fff;stroke:#c5ccd6}.btnT{fill:#3a4150;font-size:12px}
.panel{fill:#fff;stroke:#e2e6ec}.inp{fill:#fff;stroke:#c5ccd6}.ta{fill:#fbfcfe;stroke:#c5ccd6}
.img{fill:#e3ebf7;stroke:#d6ddea}.card{fill:#fff;stroke:#e2e6ec}
.row{fill:#fbfcfe;stroke:#eef0f5}.cnt{fill:#eef2fb}.cntT{fill:#2f6fed;font-size:12px}
.chip{fill:#eef2fb;stroke:#cdd8ef}.chipA{fill:#fff;stroke:#2f6fed}
.sel{fill:#fff;stroke:#c5ccd6}.selT{fill:#2a2f3a;font-size:11px}
</style>
<clipPath id="leftScroll"><rect x="2" y="6" width="260" height="426" rx="6"/></clipPath>
</defs>
<rect class="win" x="0.5" y="0.5" width="939" height="619" rx="8"/>
<rect class="hd" x="0.5" y="0.5" width="939" height="40" rx="8"/><rect class="hd" x="0.5" y="20" width="939" height="21"/>
<text class="title" x="18" y="26">蝦皮圈優化助手 · 商品套图生成</text>
<circle cx="888" cy="20" r="6" fill="#f5bf4f"/><circle cx="910" cy="20" r="6" fill="#5ac26a"/><circle cx="866" cy="20" r="6" fill="#e0e4ea"/>
<!-- tab bar (⑥ active) -->
<rect class="tab" x="0.5" y="41" width="939" height="38"/>
<rect class="tabA" x="590" y="45" width="150" height="38"/><rect x="590" y="45" width="150" height="3" fill="#2f6fed"/>
<text class="tabT" x="24" y="68">① 导入采集</text>
<text class="tabT" x="150" y="68">② AI生成</text>
<text class="tabT" x="256" y="68">③ 更新蝦皮</text>
<text class="tabT" x="386" y="68">④ 账号管理</text>
<text class="tabT" x="516" y="68">⑤ 设置</text>
<text class="tabTA" x="604" y="68">⑥ 商品套图</text>
<!-- top context bar: 套图任务标签 + 账号选择 + 商品ID（每个任务绑定一个账号+商品ID）-->
<rect class="chipA" x="18" y="90" width="112" height="26" rx="6"/>
<circle cx="34" cy="103" r="4" fill="#2f6fed"/><text class="cell" x="44" y="107">套图任务 1</text><text class="mut" x="116" y="107">×</text>
<rect class="chip" x="136" y="90" width="112" height="26" rx="6"/>
<circle cx="152" cy="103" r="4" fill="#20a464"/><text class="cell" x="162" y="107" fill="#5c6573">套图任务 2</text><text class="mut" x="234" y="107">×</text>
<rect class="btn" x="254" y="90" width="30" height="26" rx="6"/><text class="btnT" x="264" y="108">＋</text>
<!-- account + item id（整组右靠边，账号下拉紧邻商品ID）-->
<text class="cell" x="532" y="107" fill="#5c6573">账号</text>
<rect class="sel" x="560" y="91" width="104" height="24" rx="5"/><text class="selT" x="568" y="107">女装店</text><text class="selT" x="652" y="107" fill="#8a92a0">▾</text>
<text class="cell" x="668" y="107" fill="#5c6573">商品ID</text>
<rect class="inp" x="724" y="91" width="90" height="24" rx="5"/><text class="cell" x="730" y="107" font-size="11">51100639510</text>
<rect class="btn" x="838" y="90" width="100" height="26" rx="6"/><text class="btnT" x="854" y="108">拉取蝦皮主图</text>
<!-- ===================== LEFT CONFIG PANEL ===================== -->
<g transform="translate(18,126)">
<rect class="panel" x="0" y="0" width="264" height="488" rx="6"/>
<!-- 可滚动内容区（clip 到可视窗口，超出部分靠滚动查看）-->
<g clip-path="url(#leftScroll)">
<!-- 商品原图：两行共 6 张缩略图 + 添加 -->
<text class="sec" x="14" y="18">商品原图</text>
<text class="mut" x="250" y="18" text-anchor="end">6 / 16</text>
<!-- row 1 -->
<rect class="img" x="14" y="24" width="46" height="40" rx="6"/>
<rect class="btnP" x="14" y="50" width="26" height="12" rx="4"/><text x="27" y="59" font-size="8" font-weight="600" fill="#fff" text-anchor="middle">主图</text>
<rect class="img" x="72" y="24" width="46" height="40" rx="6"/>
<rect x="72" y="50" width="32" height="12" rx="4" fill="#8a92a0"/><text x="88" y="59" font-size="8" font-weight="600" fill="#fff" text-anchor="middle">参考1</text>
<rect class="img" x="130" y="24" width="46" height="40" rx="6"/>
<rect x="130" y="50" width="32" height="12" rx="4" fill="#8a92a0"/><text x="146" y="59" font-size="8" font-weight="600" fill="#fff" text-anchor="middle">参考2</text>
<rect x="188" y="24" width="46" height="40" rx="6" fill="#f7f9fd" stroke="#c5ccd6" stroke-dasharray="3 3"/>
<text x="211" y="44" font-size="14" fill="#2f6fed" text-anchor="middle">＋</text><text x="211" y="57" font-size="8" fill="#8a92a0" text-anchor="middle">添加</text>
<!-- row 2 (新增 3 张) -->
<rect class="img" x="14" y="68" width="46" height="40" rx="6"/>
<rect x="14" y="94" width="32" height="12" rx="4" fill="#8a92a0"/><text x="30" y="103" font-size="8" font-weight="600" fill="#fff" text-anchor="middle">参考3</text>
<rect class="img" x="72" y="68" width="46" height="40" rx="6"/>
<rect x="72" y="94" width="32" height="12" rx="4" fill="#8a92a0"/><text x="88" y="103" font-size="8" font-weight="600" fill="#fff" text-anchor="middle">参考4</text>
<rect class="img" x="130" y="68" width="46" height="40" rx="6"/>
<rect x="130" y="94" width="32" height="12" rx="4" fill="#8a92a0"/><text x="146" y="103" font-size="8" font-weight="600" fill="#fff" text-anchor="middle">参考5</text>
<text class="mut" x="14" y="122">点击 / 拖拽 / 粘贴，或「拉取蝦皮主图」带入；第 1 张为主图，最多 16 张</text>
<!-- 生成设置：平台/国家/语言/比例（2×2 可切换下拉，已去 4 个 label）+ 每张主图 -->
<text class="sec" x="14" y="142">生成设置</text>
<rect class="sel" x="14" y="148" width="108" height="22" rx="5"/><text class="selT" x="22" y="163">Shopee</text><text class="selT" x="112" y="163" fill="#8a92a0">▾</text>
<rect class="sel" x="132" y="148" width="108" height="22" rx="5"/><text class="selT" x="140" y="163">中国台湾</text><text class="selT" x="230" y="163" fill="#8a92a0">▾</text>
<rect class="sel" x="14" y="174" width="108" height="22" rx="5"/><text class="selT" x="22" y="189">繁体中文</text><text class="selT" x="112" y="189" fill="#8a92a0">▾</text>
<rect class="sel" x="132" y="174" width="108" height="22" rx="5"/><text class="selT" x="140" y="189">1:1</text><text class="selT" x="230" y="189" fill="#8a92a0">▾</text>
<rect x="14" y="206" width="14" height="14" rx="3" fill="#2f6fed"/><path d="M17 213 l2.6 2.6 4.4-4.4" fill="none" stroke="#fff" stroke-width="1.6"/>
<text class="cell" x="34" y="217" font-size="11">每张上传图分别作为主图生成</text>
<!-- 商品卖点与要求（去掉 4 个 label 省下的高度并入，输入框更高）-->
<text class="sec" x="14" y="240">商品卖点与要求</text>
<rect x="168" y="227" width="82" height="20" rx="5" fill="#eef2fb" stroke="#cdd8ef"/><text class="cntT" x="209" y="241" text-anchor="middle">✧ AI 帮写</text>
<rect class="ta" x="14" y="246" width="236" height="118" rx="6"/>
<text x="22" y="264" fill="#98a1b0" font-size="11">降噪蓝牙耳机，40 小时续航，亲肤皮革</text>
<text x="22" y="280" fill="#98a1b0" font-size="11">耳罩，适合通勤与办公场景…</text>
<!-- 套图结构配置 (仅 3 个默认) -->
<text class="sec" x="14" y="384">套图结构配置</text>
<text class="mut" x="250" y="384" text-anchor="end">合计 5 张</text>
<g font-size="12">
<rect class="row" x="14" y="390" width="236" height="22" rx="6"/>
<text class="cell" x="22" y="405" font-size="11">白底图</text>
<g transform="translate(176,391)"><rect class="cnt" x="0" y="0" width="18" height="18" rx="5"/><text class="cntT" x="9" y="14" text-anchor="middle">−</text><text class="cell" x="37" y="14" text-anchor="middle" font-weight="600">1</text><rect class="cnt" x="56" y="0" width="18" height="18" rx="5"/><text class="cntT" x="65" y="14" text-anchor="middle">＋</text></g>
<rect class="row" x="14" y="416" width="236" height="22" rx="6"/>
<text class="cell" x="22" y="431" font-size="11">场景图</text>
<g transform="translate(176,417)"><rect class="cnt" x="0" y="0" width="18" height="18" rx="5"/><text class="cntT" x="9" y="14" text-anchor="middle">−</text><text class="cell" x="37" y="14" text-anchor="middle" font-weight="600">2</text><rect class="cnt" x="56" y="0" width="18" height="18" rx="5"/><text class="cntT" x="65" y="14" text-anchor="middle">＋</text></g>
<rect class="row" x="14" y="442" width="236" height="22" rx="6"/>
<text class="cell" x="22" y="457" font-size="11">卖点图</text>
<g transform="translate(176,443)"><rect class="cnt" x="0" y="0" width="18" height="18" rx="5"/><text class="cntT" x="9" y="14" text-anchor="middle">−</text><text class="cell" x="37" y="14" text-anchor="middle" font-weight="600">2</text><rect class="cnt" x="56" y="0" width="18" height="18" rx="5"/><text class="cntT" x="65" y="14" text-anchor="middle">＋</text></g>
</g>
<rect x="14" y="470" width="236" height="22" rx="6" fill="#fff" stroke="#c5ccd6" stroke-dasharray="3 3"/>
<text x="132" y="485" font-size="11" font-weight="600" fill="#2f6fed" text-anchor="middle">＋ 添加自定义分类（可改名 / 删除）</text>
</g>
<!-- 竖直滚动条：除“生成套图”按钮外，上方所有组件同属一个可滚动区 -->
<rect x="255" y="8" width="4" height="424" rx="2" fill="#eef0f5"/>
<rect x="255" y="8" width="4" height="300" rx="2" fill="#c5ccd6"/>
<line x1="8" y1="432" x2="256" y2="432" stroke="#eef0f5"/>
<!-- 生成套图 button (fixed at bottom, OUTSIDE scroll area; toggles to 停止生成) -->
<rect class="btnP" x="14" y="438" width="236" height="36" rx="6"/><text class="btnPT" x="132" y="461" text-anchor="middle">▶ 生成套图（5）</text>
<text x="14" y="483" font-size="9.5" fill="#8a92a0">建议填写产品名称、核心卖点、目标人群、使用场景与禁用元素</text>
</g>
<!-- ===================== RIGHT: RESULTS ===================== -->
<g transform="translate(298,126)">
<!-- toolbar -->
<text class="sec" x="0" y="20">生成结果</text>
<rect x="76" y="6" width="120" height="20" rx="5" fill="#eef2fb"/><text class="cntT" x="136" y="20" text-anchor="middle" font-size="11">共 5 张 · 成功 3 张</text>
<rect class="btn" x="470" y="4" width="72" height="24" rx="6"/><text class="btnT" x="484" y="20">历史生成</text>
<rect class="btn" x="550" y="4" width="90" height="24" rx="6"/><text class="btnT" x="562" y="20">打开文件夹</text>
<!-- cards grid (card 144x136, img 128x96) -->
<g>
<!-- r1c1 done 白底图 -->
<rect class="card" x="0" y="36" width="144" height="136" rx="8"/><rect class="img" x="8" y="44" width="128" height="96" rx="6"/>
<circle cx="128" cy="52" r="7" fill="#20a464"/><path d="M125 52 l2 2 4-4" fill="none" stroke="#fff" stroke-width="1.6"/>
<text class="cell" x="10" y="160" font-size="11">白底图</text><text class="mut" x="136" y="160" text-anchor="end">×</text>
<!-- r1c2 done 场景图1 -->
<rect class="card" x="156" y="36" width="144" height="136" rx="8"/><rect class="img" x="164" y="44" width="128" height="96" rx="6"/>
<circle cx="284" cy="52" r="7" fill="#20a464"/><path d="M281 52 l2 2 4-4" fill="none" stroke="#fff" stroke-width="1.6"/>
<text class="cell" x="166" y="160" font-size="11">场景图 1</text><text class="mut" x="292" y="160" text-anchor="end">×</text>
<!-- r1c3 generating 场景图2 -->
<rect class="card" x="312" y="36" width="144" height="136" rx="8"/><rect x="320" y="44" width="128" height="96" rx="6" fill="#f2f5fb" stroke="#dfe4ee"/>
<circle cx="384" cy="84" r="12" fill="none" stroke="#2f6fed" stroke-width="3" stroke-dasharray="50 24"/>
<text class="cntT" x="384" y="116" text-anchor="middle" font-size="11">生成中…</text>
<text class="cell" x="322" y="160" font-size="11">场景图 2</text>
<!-- r1c4 failed 卖点图1 -->
<rect class="card" x="468" y="36" width="144" height="136" rx="8"/>
<rect x="476" y="44" width="128" height="96" rx="6" fill="#fdecea" stroke="#f3c0bb"/>
<circle cx="540" cy="80" r="12" fill="#f7d3ce"/><text x="540" y="85" font-size="14" font-weight="700" fill="#c2473d" text-anchor="middle">!</text>
<rect class="btn" x="508" y="102" width="64" height="20" rx="5" stroke="#c2473d"/><text x="540" y="116" font-size="11" font-weight="600" fill="#c2473d" text-anchor="middle">重试</text>
<text class="cell" x="478" y="160" font-size="11">卖点图 1</text>
<!-- r2c1 done 卖点图2 -->
<rect class="card" x="0" y="184" width="144" height="136" rx="8"/><rect class="img" x="8" y="192" width="128" height="96" rx="6"/>
<circle cx="128" cy="200" r="7" fill="#20a464"/><path d="M125 200 l2 2 4-4" fill="none" stroke="#fff" stroke-width="1.6"/>
<text class="cell" x="10" y="308" font-size="11">卖点图 2</text><text class="mut" x="136" y="308" text-anchor="end">×</text>
<!-- r2c2 ghost -->
<rect x="156" y="184" width="144" height="136" rx="8" fill="#fff" stroke="#e6ebf3" stroke-dasharray="4 4"/>
<rect x="164" y="192" width="128" height="96" rx="6" fill="#f8fafd"/>
<text x="228" y="234" font-size="10" fill="#aab2c0" text-anchor="middle">右键单图：预览 /</text>
<text x="228" y="250" font-size="10" fill="#aab2c0" text-anchor="middle">复制路径 / 重新生成</text>
</g>
<!-- progress + summary（整行下移，与左侧“生成套图”按钮同一行）-->
<rect x="0" y="440" width="612" height="7" rx="3.5" fill="#e6edfb"/>
<rect x="0" y="440" width="490" height="7" rx="3.5" fill="#2f6fed"/>
<text class="cell" x="0" y="466" font-size="12">套图 4 / 5（38 秒）·</text>
<text x="130" y="466" font-size="12" fill="#c2473d">失败 1</text>
<text class="mut" x="612" y="466" text-anchor="end">每张完成即落盘 · 失败可单张重试</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB