docs: add rule—SVG mockups live in docs/ui/; commit tab2/tab6 effect images
AGENTS.md 工作规则新增：SVG 效果图统一存 docs/ui/（不放 scratchpad）， tabN-<名>.svg 命名、改版加后缀、随文档提交、README 登记。一并入库 tab2-ai-generate-T584（②模板重排）、tab6-image-studio(-v2)（⑥图片精修）。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
chengma
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
7e491ed10e
commit
3995d50dd6
@@ -41,6 +41,7 @@
|
|||||||
- `记backlog: <一行>` → 追加进 `docs/06-tasks.md` 待办池并提交（只记一行，不建任务文件）。
|
- `记backlog: <一行>` → 追加进 `docs/06-tasks.md` 待办池并提交（只记一行，不建任务文件）。
|
||||||
- 上下文规则：`落task`/`补` 可带参数（如 `落task <主题>`、`补 T-<编号>`）；新会话或无对话上下文时**必须先问清指代对象，不得猜**。
|
- 上下文规则：`落task`/`补` 可带参数（如 `落task <主题>`、`补 T-<编号>`）；新会话或无对话上下文时**必须先问清指代对象，不得猜**。
|
||||||
- 本条目是这套暗语的**唯一权威源**；agent 记忆和模板库中的副本仅为指针/种子，以此处为准。
|
- 本条目是这套暗语的**唯一权威源**；agent 记忆和模板库中的副本仅为指针/种子，以此处为准。
|
||||||
|
- **SVG 效果图统一存 `docs/ui/`**（不放 scratchpad/tmp）：新 tab 或界面改版的线框/效果图命名 `tabN-<名>.svg`，改版加后缀（如 `-T584`、`-v2`），画完随更新的文档一起提交 git；新增文件在 `docs/ui/README.md` 登记。
|
||||||
|
|
||||||
## 安全红线
|
## 安全红线
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,115 @@
|
|||||||
|
<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">
|
||||||
|
<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}
|
||||||
|
.new{fill:#eef4ff;stroke:#9cc0ff}.newT{fill:#2f6fed;font-size:10px;font-weight:600}
|
||||||
|
</style>
|
||||||
|
</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"/>
|
||||||
|
|
||||||
|
<rect class="tab" x="0.5" y="41" width="939" height="38"/>
|
||||||
|
<rect class="tabA" x="166" y="45" width="138" height="38"/><rect x="166" y="45" width="138" height="3" fill="#2f6fed"/>
|
||||||
|
<text class="tabT" x="34" y="68">① 导入采集</text>
|
||||||
|
<text class="tabTA" x="196" y="68">② AI生成</text>
|
||||||
|
<text class="tabT" x="330" y="68">③ 更新蝦皮</text>
|
||||||
|
<text class="tabT" x="492" y="68">④ 账号管理</text>
|
||||||
|
<text class="tabT" x="636" y="68">⑤ 设置</text>
|
||||||
|
|
||||||
|
<!-- LEFT ~1/4: prompts management (T-584 reorg) -->
|
||||||
|
<g transform="translate(18,96)">
|
||||||
|
<rect class="panel" x="0" y="0" width="218" height="446" rx="6"/>
|
||||||
|
|
||||||
|
<!-- TITLE prompt: NEW template row (label下单独一行) -->
|
||||||
|
<text class="sec" x="14" y="24">标题提示词</text>
|
||||||
|
<rect class="new" x="150" y="11" width="54" height="15" rx="7"/><text class="newT" x="159" y="22">新增模板</text>
|
||||||
|
<!-- template control row: combo + 新建 + 保存 + 操作▾ -->
|
||||||
|
<rect class="inp" x="14" y="32" width="96" height="24" rx="5"/><text class="cell" x="20" y="48" font-size="11">韩版女装标题 ▼</text>
|
||||||
|
<g font-size="11">
|
||||||
|
<rect class="btn" x="114" y="32" width="24" height="24" rx="5"/><text class="btnT" x="121" y="48">＋</text>
|
||||||
|
<rect class="btn" x="142" y="32" width="24" height="24" rx="5"/><text class="btnT" x="149" y="48">💾</text>
|
||||||
|
<rect class="btn" x="170" y="32" width="34" height="24" rx="5"/><text class="btnT" x="176" y="48">操作▾</text>
|
||||||
|
</g>
|
||||||
|
<!-- taller title textarea (吃掉封面压行省出的空间) -->
|
||||||
|
<rect class="ta" x="14" y="62" width="190" height="120" rx="6"/>
|
||||||
|
<text class="cell" x="22" y="82" fill="#586073" font-size="11">精简标题、去「T恤」、</text>
|
||||||
|
<text class="cell" x="22" y="98" fill="#586073" font-size="11">突出韩版加绒保暖 ≤60字，</text>
|
||||||
|
<text class="cell" x="22" y="114" fill="#586073" font-size="11">保留旧标题关键词：</text>
|
||||||
|
<text x="22" y="130" fill="#2f6fed" font-size="11">{旧标题}</text>
|
||||||
|
<!-- bottom toolbar: 插入旧标题 + 保存标题提示词(工作文本) -->
|
||||||
|
<rect class="btn" x="14" y="190" width="92" height="26" rx="6"/><text class="btnT" x="24" y="207">插入旧标题</text>
|
||||||
|
<rect class="btn" x="112" y="190" width="92" height="26" rx="6"/><text class="btnT" x="120" y="207" font-size="11">保存提示词</text>
|
||||||
|
|
||||||
|
<!-- divider -->
|
||||||
|
<line x1="14" y1="230" x2="204" y2="230" stroke="#eef1f6"/>
|
||||||
|
|
||||||
|
<!-- COVER prompt: template controls compressed to ONE row -->
|
||||||
|
<text class="sec" x="14" y="252">封面提示词</text>
|
||||||
|
<rect class="inp" x="14" y="260" width="96" height="24" rx="5"/><text class="cell" x="20" y="276" font-size="11">纯白背景 ▼</text>
|
||||||
|
<g font-size="11">
|
||||||
|
<rect class="btn" x="114" y="260" width="24" height="24" rx="5"/><text class="btnT" x="121" y="276">＋</text>
|
||||||
|
<rect class="btn" x="142" y="260" width="24" height="24" rx="5"/><text class="btnT" x="149" y="276">💾</text>
|
||||||
|
<rect class="btn" x="170" y="260" width="34" height="24" rx="5"/><text class="btnT" x="176" y="276">操作▾</text>
|
||||||
|
</g>
|
||||||
|
<rect class="ta" x="14" y="290" width="190" height="88" rx="6"/>
|
||||||
|
<text class="cell" x="22" y="310" fill="#586073" font-size="11">纯白背景、保留主体、</text>
|
||||||
|
<text class="cell" x="22" y="326" fill="#586073" font-size="11">呼应标题：</text>
|
||||||
|
<text x="22" y="342" fill="#2f6fed" font-size="11">{新标题}</text>
|
||||||
|
<!-- bottom toolbar: 插入标题 + 预览 -->
|
||||||
|
<rect class="btn" x="14" y="386" width="92" height="26" rx="6"/><text class="btnT" x="34" y="403">插入标题</text>
|
||||||
|
<rect class="btn" x="112" y="386" width="92" height="26" rx="6"/><text class="btnT" x="146" y="403">预览</text>
|
||||||
|
<text class="mut" x="14" y="432">标题/封面各自命名模板 · 生成用编辑框当前文本</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- RIGHT: filters + list (unchanged) -->
|
||||||
|
<g transform="translate(248,96)">
|
||||||
|
<rect class="inp" x="0" y="0" width="120" height="28" rx="6"/><text class="cell" x="12" y="18">批次：本次 ▼</text>
|
||||||
|
<rect class="inp" x="130" y="0" width="120" height="28" rx="6"/><text class="cell" x="142" y="18">店铺：全部 ▼</text>
|
||||||
|
<rect class="inp" x="260" y="0" width="120" height="28" rx="6"/><text class="cell" x="272" y="18">状态：全部 ▼</text>
|
||||||
|
<rect class="btn" x="390" y="0" width="64" height="28" rx="6"/><text class="btnT" x="408" y="18">筛选</text>
|
||||||
|
<text class="mut" x="470" y="18">双击某行 → 弹窗看 旧封面 | 新封面</text>
|
||||||
|
|
||||||
|
<rect class="panel" x="0" y="40" width="656" height="362" rx="6"/>
|
||||||
|
<rect x="1" y="41" width="654" height="28" fill="#eef1f6"/>
|
||||||
|
<text class="th" x="14" y="59">店铺名</text><text class="th" x="96" y="59">商品ID</text>
|
||||||
|
<text class="th" x="220" y="59">旧标题</text><text class="th" x="420" y="59">新标题</text><text class="th" x="600" y="59">状态</text>
|
||||||
|
<g font-size="12">
|
||||||
|
<rect x="1" y="69" width="654" height="30" fill="#fafbfc"/>
|
||||||
|
<text class="cell" x="14" y="89">女装店</text><text class="cell" x="96" y="89">51100639510</text>
|
||||||
|
<text class="cell" x="220" y="89">…顯瘦百搭T恤</text><text class="cell" x="420" y="89" fill="#1f6f43">…顯瘦百搭</text>
|
||||||
|
<circle cx="606" cy="85" r="4" fill="#20a464"/><text class="cell" x="616" y="89">已生成</text>
|
||||||
|
|
||||||
|
<text class="cell" x="14" y="119">女装店</text><text class="cell" x="96" y="119">51100640000</text>
|
||||||
|
<text class="cell" x="220" y="119">…加絨打底衫T恤</text><text class="mut" x="420" y="119">—</text>
|
||||||
|
<circle cx="606" cy="115" r="4" fill="#b6bdc7"/><text class="cell" x="616" y="119">待生成</text>
|
||||||
|
|
||||||
|
<rect x="1" y="129" width="654" height="30" fill="#fafbfc"/>
|
||||||
|
<text class="cell" x="14" y="149">my主店</text><text class="cell" x="96" y="149">52000000001</text>
|
||||||
|
<text class="cell" x="220" y="149">Korean Loose Tee</text><text class="cell" x="420" y="149" fill="#1f6f43">Korean Oversize Tee</text>
|
||||||
|
<circle cx="606" cy="145" r="4" fill="#20a464"/><text class="cell" x="616" y="149">已生成</text>
|
||||||
|
|
||||||
|
<text class="cell" x="14" y="179">饰品店</text><text class="cell" x="96" y="179">53000000009</text>
|
||||||
|
<text class="cell" x="220" y="179">…百搭耳環飾品</text><text class="cell" x="420" y="179" fill="#2f6fed">生成中…</text>
|
||||||
|
<circle cx="606" cy="175" r="4" fill="#2f6fed"/><text class="cell" x="616" y="179">处理中</text>
|
||||||
|
</g>
|
||||||
|
<text class="mut" x="14" y="392">可微调新标题 · 封面画廊可「重置图片」· 退出后批量补生成</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- bottom action (unchanged) -->
|
||||||
|
<g transform="translate(0,556)">
|
||||||
|
<text class="sec" x="248" y="24" font-size="12">进度：</text>
|
||||||
|
<text class="cell" x="290" y="24">标题 30/30 · 封面 12/30 ·</text>
|
||||||
|
<text x="470" y="24" font-size="12" fill="#c2473d">失败 1</text>
|
||||||
|
<text class="mut" x="248" y="42">先并发生成标题 → 接着并发生成封面 · 每条完成即写库 · 停止可取消未开始项</text>
|
||||||
|
<rect class="btnP" x="690" y="8" width="130" height="38" rx="6"/><text class="btnPT" x="724" y="32">▶ 开始生成</text>
|
||||||
|
<rect class="btn" x="828" y="8" width="92" height="38" rx="6"/><text class="btnT" x="852" y="32">■ 停止</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,261 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="820" viewBox="0 0 1280 820" font-family="'Segoe UI','Microsoft YaHei',sans-serif">
|
||||||
|
<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}
|
||||||
|
.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}
|
||||||
|
.thumb{stroke:#d3d9e2;cursor:pointer}.thumb:hover{stroke:#2f6fed;stroke-width:2}
|
||||||
|
.btn:hover{fill:#eef4ff}
|
||||||
|
.slotE{fill:#fbfcfe;stroke:#c5ccd6;stroke-dasharray:4 3}
|
||||||
|
.badge{font-size:9px;fill:#fff;font-weight:600}
|
||||||
|
.seg{fill:#fff;stroke:#c5ccd6}.segA{fill:#2f6fed}.segT{fill:#3a4150;font-size:12px}.segTA{fill:#fff;font-size:12px;font-weight:600}
|
||||||
|
.rail{fill:#eef1f6;stroke:#e2e6ec}.railSel{fill:#fff;stroke:#2f6fed;stroke-width:2}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect class="win" x="0.5" y="0.5" width="1279" height="819" rx="8"/>
|
||||||
|
<rect class="hd" x="0.5" y="0.5" width="1279" height="40" rx="8"/><rect class="hd" x="0.5" y="20" width="1279" height="21"/>
|
||||||
|
<text class="title" x="18" y="26">蝦皮圈優化助手 · 蝦皮商品批量改标题换封面</text>
|
||||||
|
<circle cx="1228" cy="20" r="6" fill="#f5bf4f"/><circle cx="1250" cy="20" r="6" fill="#5ac26a"/><circle cx="1206" cy="20" r="6" fill="#e0e4ea"/>
|
||||||
|
|
||||||
|
<!-- tab bar -->
|
||||||
|
<rect class="tab" x="0.5" y="41" width="1279" height="38"/>
|
||||||
|
<rect class="tabA" x="666" y="45" width="132" height="38"/><rect x="666" y="45" width="132" height="3" fill="#2f6fed"/>
|
||||||
|
<text class="tabT" x="30" y="68">① 导入采集</text>
|
||||||
|
<text class="tabT" x="168" y="68">② AI生成</text>
|
||||||
|
<text class="tabT" x="296" y="68">③ 更新蝦皮</text>
|
||||||
|
<text class="tabT" x="434" y="68">④ 账号管理</text>
|
||||||
|
<text class="tabT" x="572" y="68">⑤ 设置</text>
|
||||||
|
<text class="tabTA" x="690" y="68">⑥ 图片精修</text>
|
||||||
|
|
||||||
|
<!-- ===== LEFT: thin product rail (collapsed state B) ===== -->
|
||||||
|
<g transform="translate(16,94)">
|
||||||
|
<rect class="panel" x="0" y="0" width="60" height="692" rx="6"/>
|
||||||
|
<!-- expand button -->
|
||||||
|
<rect class="btn" x="10" y="10" width="40" height="26" rx="6"/><text class="btnT" x="20" y="28" font-size="14">▶</text>
|
||||||
|
<text class="mut" x="8" y="52" font-size="9">商品</text>
|
||||||
|
|
||||||
|
<!-- product avatars w/ status dot -->
|
||||||
|
<rect class="railSel" x="10" y="62" width="40" height="40" rx="8" fill="#d8e2f0"/>
|
||||||
|
<circle cx="46" cy="66" r="5" fill="#2f6fed"/>
|
||||||
|
<text class="mut" x="14" y="116" font-size="9">女装</text>
|
||||||
|
|
||||||
|
<rect class="rail" x="10" y="128" width="40" height="40" rx="8" fill="#e6e0cf"/>
|
||||||
|
<circle cx="46" cy="132" r="5" fill="#20a464"/>
|
||||||
|
<text class="mut" x="16" y="182" font-size="9">my</text>
|
||||||
|
|
||||||
|
<rect class="rail" x="10" y="194" width="40" height="40" rx="8" fill="#e8d9df"/>
|
||||||
|
<circle cx="46" cy="198" r="5" fill="#b6bdc7"/>
|
||||||
|
<text class="mut" x="16" y="248" font-size="9">饰品</text>
|
||||||
|
|
||||||
|
<!-- add -->
|
||||||
|
<rect class="btn" x="10" y="266" width="40" height="40" rx="8" stroke-dasharray="4 3"/><text class="btnT" x="24" y="291" font-size="18" fill="#2f6fed">＋</text>
|
||||||
|
|
||||||
|
<text class="mut" x="8" y="676" font-size="9">点▶</text>
|
||||||
|
<text class="mut" x="8" y="688" font-size="9">展开</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== TOP action bar ===== -->
|
||||||
|
<g transform="translate(84,94)">
|
||||||
|
<rect class="panel" x="0" y="0" width="1180" height="36" rx="6"/>
|
||||||
|
<rect class="btnP" x="8" y="5" width="116" height="26" rx="6"/><text class="btnPT" x="20" y="22">＋ 新增商品</text>
|
||||||
|
<text class="sec" x="140" y="23">当前商品：女装店 · 51100639510</text>
|
||||||
|
<rect class="btn" x="932" y="5" width="118" height="26" rx="6"/><text class="btnT" x="944" y="22">拉取蝦皮主图</text>
|
||||||
|
<rect class="btn" x="1058" y="5" width="114" height="26" rx="6"/><text class="btnT" x="1070" y="22">打开图片文件夹</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== CENTER: original drawer + pool ===== -->
|
||||||
|
<!-- original 9 drawer -->
|
||||||
|
<g transform="translate(84,142)">
|
||||||
|
<rect class="panel" x="0" y="0" width="712" height="72" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="22">蝦皮原主图（9）</text>
|
||||||
|
<text class="mut" x="126" y="22">只读抓取 · 点击加入照片池</text>
|
||||||
|
<text class="btnT" x="690" y="22" fill="#2f6fed" font-size="13">▾</text>
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="14" y="30" width="34" height="34" rx="4" fill="#d8e2f0"/>
|
||||||
|
<rect class="thumb" x="54" y="30" width="34" height="34" rx="4" fill="#cfd8ea"/>
|
||||||
|
<rect class="thumb" x="94" y="30" width="34" height="34" rx="4" fill="#e3d8ce"/>
|
||||||
|
<rect class="thumb" x="134" y="30" width="34" height="34" rx="4" fill="#d2e3d6"/>
|
||||||
|
<rect class="thumb" x="174" y="30" width="34" height="34" rx="4" fill="#e8d9df"/>
|
||||||
|
<rect class="thumb" x="214" y="30" width="34" height="34" rx="4" fill="#d5dde8"/>
|
||||||
|
<rect class="thumb" x="254" y="30" width="34" height="34" rx="4" fill="#dfe6d2"/>
|
||||||
|
<rect class="thumb" x="294" y="30" width="34" height="34" rx="4" fill="#d9d2e8"/>
|
||||||
|
<rect class="thumb" x="334" y="30" width="34" height="34" rx="4" fill="#e6e0cf"/>
|
||||||
|
</g>
|
||||||
|
<text class="mut" x="392" y="52" font-size="10">缩略图远程加载，点选才下载原图落池</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- pool -->
|
||||||
|
<g transform="translate(84,224)">
|
||||||
|
<rect class="panel" x="0" y="0" width="712" height="396" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="24">照片池（12）</text>
|
||||||
|
<text class="mut" x="120" y="24">单击选为源图 · 双击看大图 · 右键移除</text>
|
||||||
|
|
||||||
|
<!-- row 1 -->
|
||||||
|
<rect x="14" y="36" width="96" height="96" rx="5" fill="#d8e2f0" stroke="#2f6fed" stroke-width="3"/>
|
||||||
|
<rect x="14" y="36" width="20" height="14" rx="3" fill="#7a8598"/><text class="badge" x="19" y="46">原</text>
|
||||||
|
<rect x="40" y="116" width="44" height="16" rx="3" fill="#2f6fed"/><text class="badge" x="48" y="127" font-size="10">源图</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="122" y="36" width="96" height="96" rx="5" fill="#cfd8ea"/>
|
||||||
|
<rect x="122" y="36" width="20" height="14" rx="3" fill="#7a8598"/><text class="badge" x="127" y="46">原</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="230" y="36" width="96" height="96" rx="5" fill="#cde3f2"/>
|
||||||
|
<rect x="230" y="36" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="235" y="46">主</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="338" y="36" width="96" height="96" rx="5" fill="#d3ecf5"/>
|
||||||
|
<rect x="338" y="36" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="343" y="46">主</text>
|
||||||
|
|
||||||
|
<!-- 3:4 -->
|
||||||
|
<rect class="thumb" x="446" y="36" width="96" height="96" rx="5" fill="#eceff4"/>
|
||||||
|
<rect x="464" y="40" width="60" height="88" fill="#d6ead9"/>
|
||||||
|
<rect x="446" y="36" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="451" y="46">详</text>
|
||||||
|
<text class="mut" x="500" y="128" font-size="9">3:4</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="554" y="36" width="96" height="96" rx="5" fill="#e5e0f0"/>
|
||||||
|
<rect x="554" y="36" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="559" y="46">主</text>
|
||||||
|
|
||||||
|
<!-- 16:9 -->
|
||||||
|
<rect class="thumb" x="662" y="36" width="96" height="96" rx="5" fill="#eceff4"/>
|
||||||
|
<rect x="666" y="60" width="88" height="49" fill="#dcead2"/>
|
||||||
|
<rect x="662" y="36" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="667" y="46">详</text>
|
||||||
|
<text class="mut" x="712" y="128" font-size="9">16:9</text>
|
||||||
|
|
||||||
|
<!-- row 2 -->
|
||||||
|
<rect class="thumb" x="14" y="150" width="96" height="96" rx="5" fill="#d8f0e2"/>
|
||||||
|
<rect x="14" y="150" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="19" y="160">详</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="122" y="150" width="96" height="96" rx="5" fill="#f0e6d8"/>
|
||||||
|
<rect x="122" y="150" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="127" y="160">主</text>
|
||||||
|
|
||||||
|
<!-- 9:16 -->
|
||||||
|
<rect class="thumb" x="230" y="150" width="96" height="96" rx="5" fill="#eceff4"/>
|
||||||
|
<rect x="254" y="154" width="48" height="88" fill="#e0d6ea"/>
|
||||||
|
<rect x="230" y="150" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="235" y="160">详</text>
|
||||||
|
<text class="mut" x="270" y="242" font-size="9">9:16</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="338" y="150" width="96" height="96" rx="5" fill="#e8dccf"/>
|
||||||
|
<rect x="338" y="150" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="343" y="160">详</text>
|
||||||
|
|
||||||
|
<!-- generating -->
|
||||||
|
<rect x="446" y="150" width="96" height="96" rx="5" fill="#fbfcfe" stroke="#9cc0ff" stroke-dasharray="5 4"/>
|
||||||
|
<g transform="translate(494,190)">
|
||||||
|
<circle r="15" fill="none" stroke="#dbe6fb" stroke-width="4"/>
|
||||||
|
<path d="M 0 -15 A 15 15 0 0 1 15 0" fill="none" stroke="#2f6fed" stroke-width="4" stroke-linecap="round">
|
||||||
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite"/>
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
<text class="mut" x="460" y="242" fill="#2f6fed" font-size="10">生成中 2/3</text>
|
||||||
|
|
||||||
|
<rect x="554" y="150" width="96" height="96" rx="5" fill="#fbfcfe" stroke="#c5ccd6" stroke-dasharray="4 3"/>
|
||||||
|
<text class="mut" x="580" y="202" font-size="10">排队…</text>
|
||||||
|
|
||||||
|
<line x1="14" y1="270" x2="698" y2="270" stroke="#eef1f6"/>
|
||||||
|
<text class="mut" x="14" y="292">角标 <tspan fill="#7a8598" font-weight="600">原</tspan>蝦皮原图 · <tspan fill="#2f6fed" font-weight="600">主</tspan>生成主图 · <tspan fill="#1f8a5b" font-weight="600">详</tspan>生成详情图 · 生成图自动进池，可再选为源图迭代</text>
|
||||||
|
<text class="mut" x="14" y="312">data/images/pool/女装店/51100639510/</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== RIGHT: prompt action center (enlarged, full column) ===== -->
|
||||||
|
<g transform="translate(808,142)">
|
||||||
|
<rect class="panel" x="0" y="0" width="456" height="478" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="24">生成设置</text>
|
||||||
|
<text class="mut" x="86" y="24">写清「不同动作/角度」，多张差异更大</text>
|
||||||
|
|
||||||
|
<!-- source preview + template row -->
|
||||||
|
<rect x="14" y="34" width="88" height="88" rx="5" fill="#d8e2f0" stroke="#2f6fed" stroke-width="2"/>
|
||||||
|
<text class="mut" x="22" y="136" font-size="10">选中源图</text>
|
||||||
|
|
||||||
|
<text class="cell" x="116" y="50">提示词模板</text>
|
||||||
|
<rect class="inp" x="116" y="58" width="196" height="24" rx="5"/><text class="cell" x="124" y="74" font-size="11">韩版女装·棚拍 ▼</text>
|
||||||
|
<rect class="btn" x="318" y="58" width="60" height="24" rx="5"/><text class="btnT" x="330" y="74" font-size="11">新建</text>
|
||||||
|
<rect class="btn" x="382" y="58" width="60" height="24" rx="5"/><text class="btnT" x="394" y="74" font-size="11">保存</text>
|
||||||
|
|
||||||
|
<!-- main prompt (big) -->
|
||||||
|
<text class="cell" x="116" y="102">主提示词</text>
|
||||||
|
<rect class="ta" x="116" y="108" width="326" height="14" rx="4" fill="none" stroke="none"/>
|
||||||
|
|
||||||
|
<rect class="ta" x="14" y="150" width="428" height="86" rx="6"/>
|
||||||
|
<text class="cell" x="24" y="170" fill="#586073" font-size="11">纯白背景棚拍，模特上身展示，保留衣服主体细节，</text>
|
||||||
|
<text class="cell" x="24" y="186" fill="#586073" font-size="11">突出韩版宽松版型，电商主图风格，画面干净。</text>
|
||||||
|
|
||||||
|
<!-- per-image action words (NEW prompt region) -->
|
||||||
|
<text class="cell" x="14" y="256">每张动作词</text>
|
||||||
|
<text class="mut" x="98" y="256" font-size="10">一行一张 · N 行=N 张各不同 · 空则用同一提示词</text>
|
||||||
|
<rect class="ta" x="14" y="264" width="428" height="58" rx="6" fill="#f7fbff" stroke="#c5ccd6"/>
|
||||||
|
<text class="cell" x="24" y="282" fill="#2f6fed" font-size="11">① 正面站姿，双手自然下垂</text>
|
||||||
|
<text class="cell" x="24" y="298" fill="#2f6fed" font-size="11">② 侧身回眸，突出版型</text>
|
||||||
|
<text class="cell" x="24" y="314" fill="#2f6fed" font-size="11">③ 走动抓拍，展示垂感</text>
|
||||||
|
|
||||||
|
<!-- controls row -->
|
||||||
|
<text class="cell" x="14" y="352">类型</text>
|
||||||
|
<rect class="segA" x="46" y="338" width="48" height="24" rx="5"/><text class="segTA" x="56" y="354">主图</text>
|
||||||
|
<rect class="seg" x="94" y="338" width="60" height="24" rx="5"/><text class="segT" x="102" y="354">详情图</text>
|
||||||
|
|
||||||
|
<text class="cell" x="176" y="352">数量</text>
|
||||||
|
<rect class="inp" x="208" y="338" width="40" height="24" rx="5"/><text class="cell" x="222" y="354">3</text>
|
||||||
|
|
||||||
|
<text class="cell" x="266" y="352">比例</text>
|
||||||
|
<rect class="inp" x="298" y="338" width="80" height="24" rx="5"/><text class="cell" x="306" y="354" font-size="11">1:1 ▼</text>
|
||||||
|
<text class="mut" x="388" y="354" font-size="9">3:4 9:16</text>
|
||||||
|
<text class="mut" x="388" y="366" font-size="9">16:9</text>
|
||||||
|
|
||||||
|
<!-- cost + generate -->
|
||||||
|
<line x1="14" y1="384" x2="442" y2="384" stroke="#eef1f6"/>
|
||||||
|
<text class="cell" x="14" y="410">预计 <tspan fill="#c2473d" font-weight="600">30 点</tspan>（3×10） · 余额 3480 点</text>
|
||||||
|
<rect class="btnP" x="14" y="424" width="300" height="40" rx="6"/><text class="btnPT" x="120" y="449">▶ 生成 3 张主图</text>
|
||||||
|
<rect class="btn" x="322" y="424" width="120" height="40" rx="6"/><text class="btnT" x="366" y="449">停止</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== BOTTOM: full-width output tray (signature) ===== -->
|
||||||
|
<g transform="translate(84,632)">
|
||||||
|
<rect class="panel" x="0" y="0" width="1180" height="150" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="26">终选与排序</text>
|
||||||
|
<text class="cell" x="110" y="26">主图 <tspan fill="#2f6fed" font-weight="600">5/9</tspan> · 详情 <tspan fill="#1f8a5b" font-weight="600">3/12</tspan></text>
|
||||||
|
<text class="mut" x="240" y="26">从照片池拖到槽位 · 槽内拖拽换顺序 · 满额提示可导出</text>
|
||||||
|
|
||||||
|
<!-- main slots -->
|
||||||
|
<text class="cell" x="14" y="66">主图</text>
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="52" y="44" width="48" height="48" rx="4" fill="#cde3f2"/><rect x="52" y="80" width="48" height="12" rx="2" fill="#2f6fed"/><text class="badge" x="60" y="90" font-size="8">封面①</text>
|
||||||
|
<rect class="thumb" x="108" y="44" width="48" height="48" rx="4" fill="#d8e2f0"/>
|
||||||
|
<rect class="thumb" x="164" y="44" width="48" height="48" rx="4" fill="#d3ecf5"/>
|
||||||
|
<rect class="thumb" x="220" y="44" width="48" height="48" rx="4" fill="#c9e8f7"/>
|
||||||
|
<rect class="thumb" x="276" y="44" width="48" height="48" rx="4" fill="#e5e0f0"/>
|
||||||
|
<rect class="slotE" x="332" y="44" width="48" height="48" rx="4"/>
|
||||||
|
<rect class="slotE" x="388" y="44" width="48" height="48" rx="4"/>
|
||||||
|
<rect class="slotE" x="444" y="44" width="48" height="48" rx="4"/>
|
||||||
|
<rect class="slotE" x="500" y="44" width="48" height="48" rx="4"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- detail slots -->
|
||||||
|
<text class="cell" x="14" y="122">详情</text>
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="52" y="104" width="36" height="36" rx="4" fill="#d8f0e2"/>
|
||||||
|
<rect class="thumb" x="96" y="104" width="36" height="36" rx="4" fill="#d6ead9"/>
|
||||||
|
<rect class="thumb" x="140" y="104" width="36" height="36" rx="4" fill="#dcead2"/>
|
||||||
|
<rect class="slotE" x="184" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="228" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="272" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="316" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="360" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="404" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="448" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="492" y="104" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="536" y="104" width="36" height="36" rx="4"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- export cluster (right of tray) -->
|
||||||
|
<line x1="900" y1="20" x2="900" y2="130" stroke="#eef1f6"/>
|
||||||
|
<rect x="924" y="30" width="240" height="46" rx="6" fill="#fff7e8" stroke="#f0d9a8"/>
|
||||||
|
<text class="cell" x="940" y="49" fill="#8a6116" font-size="11">还差 主图 4 · 详情 9</text>
|
||||||
|
<text class="mut" x="940" y="66" font-size="10">两类满额后高亮「导出」</text>
|
||||||
|
<rect class="btnP" x="924" y="86" width="150" height="38" rx="6" opacity="0.55"/><text class="btnPT" x="952" y="110">导出到文件夹</text>
|
||||||
|
<rect class="btn" x="1082" y="86" width="82" height="38" rx="6"/><text class="btnT" x="1094" y="110" font-size="11">打开夹</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- status -->
|
||||||
|
<text class="mut" x="84" y="806">v1 导出后手动上传蝦皮 · CDP 自动回传（主图增删排序 / 详情多媒体框）后续版本 · 本商品已消耗 120 点</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,275 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="820" viewBox="0 0 1280 820" font-family="'Segoe UI','Microsoft YaHei',sans-serif">
|
||||||
|
<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}
|
||||||
|
.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}
|
||||||
|
.thumb{stroke:#d3d9e2;cursor:pointer}
|
||||||
|
.thumb:hover{stroke:#2f6fed;stroke-width:2}
|
||||||
|
.btn:hover{fill:#eef4ff}
|
||||||
|
.btnP:hover{fill:#2557c9}
|
||||||
|
.slotE{fill:#fbfcfe;stroke:#c5ccd6;stroke-dasharray:4 3}
|
||||||
|
.badge{font-size:9px;fill:#fff;font-weight:600}
|
||||||
|
.seg{fill:#fff;stroke:#c5ccd6}.segA{fill:#2f6fed}.segT{fill:#3a4150;font-size:12px}.segTA{fill:#fff;font-size:12px;font-weight:600}
|
||||||
|
.rowSel{fill:#eef4ff}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect class="win" x="0.5" y="0.5" width="1279" height="819" rx="8"/>
|
||||||
|
<rect class="hd" x="0.5" y="0.5" width="1279" height="40" rx="8"/><rect class="hd" x="0.5" y="20" width="1279" height="21"/>
|
||||||
|
<text class="title" x="18" y="26">蝦皮圈優化助手 · 蝦皮商品批量改标题换封面</text>
|
||||||
|
<circle cx="1228" cy="20" r="6" fill="#f5bf4f"/><circle cx="1250" cy="20" r="6" fill="#5ac26a"/><circle cx="1206" cy="20" r="6" fill="#e0e4ea"/>
|
||||||
|
|
||||||
|
<!-- tab bar: 6 tabs, ⑥ active -->
|
||||||
|
<rect class="tab" x="0.5" y="41" width="1279" height="38"/>
|
||||||
|
<rect class="tabA" x="666" y="45" width="132" height="38"/><rect x="666" y="45" width="132" height="3" fill="#2f6fed"/>
|
||||||
|
<text class="tabT" x="30" y="68">① 导入采集</text>
|
||||||
|
<text class="tabT" x="168" y="68">② AI生成</text>
|
||||||
|
<text class="tabT" x="296" y="68">③ 更新蝦皮</text>
|
||||||
|
<text class="tabT" x="434" y="68">④ 账号管理</text>
|
||||||
|
<text class="tabT" x="572" y="68">⑤ 设置</text>
|
||||||
|
<text class="tabTA" x="690" y="68">⑥ 图片工场</text>
|
||||||
|
|
||||||
|
<!-- ===== LEFT: product list ===== -->
|
||||||
|
<g transform="translate(16,94)">
|
||||||
|
<rect class="panel" x="0" y="0" width="232" height="692" rx="6"/>
|
||||||
|
<rect class="btnP" x="14" y="14" width="204" height="32" rx="6"/>
|
||||||
|
<text class="btnPT" x="42" y="35">＋ 新增商品（ID＋账号）</text>
|
||||||
|
<text class="mut" x="14" y="62">输入商品ID → 选账号，绑定为一条记录</text>
|
||||||
|
|
||||||
|
<!-- row 1: selected -->
|
||||||
|
<rect class="rowSel" x="1" y="74" width="230" height="66"/>
|
||||||
|
<rect x="1" y="74" width="4" height="66" fill="#2f6fed"/>
|
||||||
|
<text class="cell" x="14" y="94" font-weight="600">51100639510</text>
|
||||||
|
<text class="mut" x="14" y="112">女装店</text>
|
||||||
|
<text class="cell" x="14" y="130" font-size="11">主图 <tspan fill="#2f6fed" font-weight="600">5/9</tspan> · 详情 <tspan fill="#1f8a5b" font-weight="600">3/12</tspan></text>
|
||||||
|
<circle cx="212" cy="94" r="4" fill="#2f6fed"/>
|
||||||
|
|
||||||
|
<!-- row 2 -->
|
||||||
|
<text class="cell" x="14" y="164" font-weight="600">52000000001</text>
|
||||||
|
<text class="mut" x="14" y="182">my主店</text>
|
||||||
|
<text class="cell" x="14" y="200" font-size="11">主图 <tspan fill="#20a464" font-weight="600">9/9</tspan> · 详情 <tspan fill="#20a464" font-weight="600">12/12</tspan> · 已导出</text>
|
||||||
|
<circle cx="212" cy="164" r="4" fill="#20a464"/>
|
||||||
|
<line x1="10" y1="146" x2="222" y2="146" stroke="#eef1f6"/>
|
||||||
|
|
||||||
|
<!-- row 3 -->
|
||||||
|
<text class="cell" x="14" y="234" font-weight="600">53000000009</text>
|
||||||
|
<text class="mut" x="14" y="252">饰品店</text>
|
||||||
|
<text class="cell" x="14" y="270" font-size="11">主图 0/9 · 详情 0/12 · 待拉取</text>
|
||||||
|
<circle cx="212" cy="234" r="4" fill="#b6bdc7"/>
|
||||||
|
<line x1="10" y1="216" x2="222" y2="216" stroke="#eef1f6"/>
|
||||||
|
<line x1="10" y1="286" x2="222" y2="286" stroke="#eef1f6"/>
|
||||||
|
|
||||||
|
<text class="mut" x="14" y="668">照片池按 商品 独立存放：</text>
|
||||||
|
<text class="mut" x="14" y="684">data/images/pool/店铺/商品ID/</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== TOP action bar ===== -->
|
||||||
|
<g transform="translate(262,94)">
|
||||||
|
<rect class="panel" x="0" y="0" width="1002" height="36" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="23">当前商品：女装店 · 51100639510</text>
|
||||||
|
<rect class="btn" x="620" y="5" width="112" height="26" rx="6"/><text class="btnT" x="632" y="22">拉取蝦皮主图</text>
|
||||||
|
<rect class="btn" x="740" y="5" width="104" height="26" rx="6"/><text class="btnT" x="752" y="22">打开图片文件夹</text>
|
||||||
|
<rect class="btn" x="852" y="5" width="140" height="26" rx="6"/><text class="btnT" x="864" y="22" fill="#1f6f43" font-weight="600">导出终选（21张）</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== MIDDLE column ===== -->
|
||||||
|
<!-- source 9 grid -->
|
||||||
|
<g transform="translate(262,142)">
|
||||||
|
<rect class="panel" x="0" y="0" width="470" height="96" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="22">蝦皮原主图（9）</text>
|
||||||
|
<text class="mut" x="130" y="22">只读抓取，点击加入照片池</text>
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="14" y="34" width="44" height="44" rx="4" fill="#d8e2f0"/>
|
||||||
|
<rect class="thumb" x="64" y="34" width="44" height="44" rx="4" fill="#cfd8ea"/>
|
||||||
|
<rect class="thumb" x="114" y="34" width="44" height="44" rx="4" fill="#e3d8ce"/>
|
||||||
|
<rect class="thumb" x="164" y="34" width="44" height="44" rx="4" fill="#d2e3d6"/>
|
||||||
|
<rect class="thumb" x="214" y="34" width="44" height="44" rx="4" fill="#e8d9df"/>
|
||||||
|
<rect class="thumb" x="264" y="34" width="44" height="44" rx="4" fill="#d5dde8"/>
|
||||||
|
<rect class="thumb" x="314" y="34" width="44" height="44" rx="4" fill="#dfe6d2"/>
|
||||||
|
<rect class="thumb" x="364" y="34" width="44" height="44" rx="4" fill="#d9d2e8"/>
|
||||||
|
<rect class="thumb" x="414" y="34" width="44" height="44" rx="4" fill="#e6e0cf"/>
|
||||||
|
</g>
|
||||||
|
<text class="mut" x="14" y="90"></text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- photo pool -->
|
||||||
|
<g transform="translate(262,250)">
|
||||||
|
<rect class="panel" x="0" y="0" width="470" height="536" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="24">照片池（12）</text>
|
||||||
|
<text class="mut" x="120" y="24">单击选为源图 · 双击看大图 · 右键移除</text>
|
||||||
|
|
||||||
|
<!-- row 1 -->
|
||||||
|
<g>
|
||||||
|
<!-- selected as source -->
|
||||||
|
<rect x="12" y="38" width="84" height="84" rx="5" fill="#d8e2f0" stroke="#2f6fed" stroke-width="3"/>
|
||||||
|
<rect x="12" y="38" width="20" height="14" rx="3" fill="#7a8598"/><text class="badge" x="17" y="48">原</text>
|
||||||
|
<rect x="34" y="106" width="40" height="16" rx="3" fill="#2f6fed"/><text class="badge" x="42" y="117" font-size="10">源图</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="106" y="38" width="84" height="84" rx="5" fill="#cfd8ea"/>
|
||||||
|
<rect x="106" y="38" width="20" height="14" rx="3" fill="#7a8598"/><text class="badge" x="111" y="48">原</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="200" y="38" width="84" height="84" rx="5" fill="#cde3f2"/>
|
||||||
|
<rect x="200" y="38" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="205" y="48">主</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="294" y="38" width="84" height="84" rx="5" fill="#d3ecf5"/>
|
||||||
|
<rect x="294" y="38" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="299" y="48">主</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="388" y="38" width="84" height="84" rx="5" fill="#c9e8f7"/>
|
||||||
|
<rect x="388" y="38" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="393" y="48">主</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- row 2 -->
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="12" y="134" width="84" height="84" rx="5" fill="#d8f0e2"/>
|
||||||
|
<rect x="12" y="134" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="17" y="144">详</text>
|
||||||
|
<!-- 3:4 letterboxed -->
|
||||||
|
<g class="thumb">
|
||||||
|
<rect x="106" y="134" width="84" height="84" rx="5" fill="#eceff4" stroke="#d3d9e2"/>
|
||||||
|
<rect x="122" y="138" width="57" height="76" fill="#d6ead9"/>
|
||||||
|
</g>
|
||||||
|
<rect x="106" y="134" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="111" y="144">详</text>
|
||||||
|
<text class="mut" x="150" y="230" font-size="9">3:4</text>
|
||||||
|
|
||||||
|
<!-- 16:9 letterboxed -->
|
||||||
|
<g class="thumb">
|
||||||
|
<rect x="200" y="134" width="84" height="84" rx="5" fill="#eceff4" stroke="#d3d9e2"/>
|
||||||
|
<rect x="204" y="152" width="76" height="43" fill="#dcead2"/>
|
||||||
|
</g>
|
||||||
|
<rect x="200" y="134" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="205" y="144">详</text>
|
||||||
|
<text class="mut" x="240" y="230" font-size="9">16:9</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="294" y="134" width="84" height="84" rx="5" fill="#e5e0f0"/>
|
||||||
|
<rect x="294" y="134" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="299" y="144">主</text>
|
||||||
|
|
||||||
|
<rect class="thumb" x="388" y="134" width="84" height="84" rx="5" fill="#f0e6d8"/>
|
||||||
|
<rect x="388" y="134" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="393" y="144">主</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- row 3: two done + one generating -->
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="12" y="230" width="84" height="84" rx="5" fill="#e8dccf"/>
|
||||||
|
<rect x="12" y="230" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="17" y="240">详</text>
|
||||||
|
|
||||||
|
<!-- 9:16 letterboxed -->
|
||||||
|
<g class="thumb">
|
||||||
|
<rect x="106" y="230" width="84" height="84" rx="5" fill="#eceff4" stroke="#d3d9e2"/>
|
||||||
|
<rect x="130" y="234" width="42" height="76" fill="#e0d6ea"/>
|
||||||
|
</g>
|
||||||
|
<rect x="106" y="230" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="111" y="240">详</text>
|
||||||
|
<text class="mut" x="146" y="326" font-size="9">9:16</text>
|
||||||
|
|
||||||
|
<!-- generating with spinner -->
|
||||||
|
<rect x="200" y="230" width="84" height="84" rx="5" fill="#fbfcfe" stroke="#9cc0ff" stroke-dasharray="5 4"/>
|
||||||
|
<g transform="translate(242,272)">
|
||||||
|
<circle r="14" fill="none" stroke="#dbe6fb" stroke-width="4"/>
|
||||||
|
<path d="M 0 -14 A 14 14 0 0 1 14 0" fill="none" stroke="#2f6fed" stroke-width="4" stroke-linecap="round">
|
||||||
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite"/>
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
<text class="mut" x="216" y="328" fill="#2f6fed">生成中 2/3…</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<line x1="12" y1="348" x2="458" y2="348" stroke="#eef1f6"/>
|
||||||
|
<text class="mut" x="14" y="368">角标：<tspan fill="#7a8598" font-weight="600">原</tspan>=蝦皮原图 · <tspan fill="#2f6fed" font-weight="600">主</tspan>=生成主图 · <tspan fill="#1f8a5b" font-weight="600">详</tspan>=生成详情图</text>
|
||||||
|
<text class="mut" x="14" y="386">生成的新图自动进池，可再选为源图继续生成（迭代）</text>
|
||||||
|
<text class="mut" x="14" y="404">池内文件：data/images/pool/女装店/51100639510/</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ===== RIGHT column ===== -->
|
||||||
|
<!-- generate control -->
|
||||||
|
<g transform="translate(748,142)">
|
||||||
|
<rect class="panel" x="0" y="0" width="516" height="252" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="24">用选中源图生成</text>
|
||||||
|
|
||||||
|
<!-- source preview -->
|
||||||
|
<rect x="14" y="38" width="96" height="96" rx="5" fill="#d8e2f0" stroke="#2f6fed" stroke-width="2"/>
|
||||||
|
<text class="mut" x="24" y="150">源图（池内选中）</text>
|
||||||
|
|
||||||
|
<!-- prompt -->
|
||||||
|
<rect class="ta" x="124" y="38" width="378" height="70" rx="6"/>
|
||||||
|
<text class="cell" x="134" y="58" fill="#586073" font-size="11">纯白背景棚拍，模特换不同姿势与角度展示上身效果，</text>
|
||||||
|
<text class="cell" x="134" y="74" fill="#586073" font-size="11">保留衣服主体细节，突出韩版宽松版型，电商主图风格</text>
|
||||||
|
<text class="mut" x="134" y="98" font-size="10">提示：写清"不同动作/角度"，多张结果差异更大</text>
|
||||||
|
|
||||||
|
<!-- controls row: type segmented + count + ratio -->
|
||||||
|
<text class="cell" x="124" y="132">类型</text>
|
||||||
|
<rect class="segA" x="156" y="118" width="52" height="24" rx="5"/><text class="segTA" x="166" y="134">主图</text>
|
||||||
|
<rect class="seg" x="208" y="118" width="60" height="24" rx="5"/><text class="segT" x="216" y="134">详情图</text>
|
||||||
|
|
||||||
|
<text class="cell" x="288" y="132">数量</text>
|
||||||
|
<rect class="inp" x="320" y="118" width="46" height="24" rx="5"/><text class="cell" x="336" y="134">3</text>
|
||||||
|
|
||||||
|
<text class="cell" x="384" y="132">比例</text>
|
||||||
|
<rect class="inp" x="416" y="118" width="86" height="24" rx="5"/><text class="cell" x="424" y="134" font-size="11">1:1 ▼</text>
|
||||||
|
<text class="mut" x="416" y="156" font-size="10">1:1 / 3:4 / 9:16 / 16:9</text>
|
||||||
|
|
||||||
|
<!-- cost + generate -->
|
||||||
|
<text class="cell" x="14" y="188">预计消耗 <tspan fill="#c2473d" font-weight="600">30 点</tspan>（3 张 × 10 点） · 余额 3480 点</text>
|
||||||
|
<rect class="btnP" x="14" y="202" width="150" height="36" rx="6">
|
||||||
|
<animate attributeName="opacity" values="1;0.82;1" dur="2.4s" repeatCount="indefinite"/>
|
||||||
|
</rect>
|
||||||
|
<text class="btnPT" x="42" y="225">▶ 生成 3 张主图</text>
|
||||||
|
<rect class="btn" x="174" y="202" width="76" height="36" rx="6"/><text class="btnT" x="198" y="225">停止</text>
|
||||||
|
<text class="mut" x="264" y="219">同一提示词请求 cmhub 3 次，异步任务轮询取图；</text>
|
||||||
|
<text class="mut" x="264" y="234">完成的图自动进照片池</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- final slots -->
|
||||||
|
<g transform="translate(748,406)">
|
||||||
|
<rect class="panel" x="0" y="0" width="516" height="380" rx="6"/>
|
||||||
|
<text class="sec" x="14" y="24">终选与排序</text>
|
||||||
|
<text class="mut" x="110" y="24">从照片池拖入槽位 · 槽内拖拽换顺序</text>
|
||||||
|
|
||||||
|
<!-- main slots -->
|
||||||
|
<text class="cell" x="14" y="52">主图 <tspan fill="#2f6fed" font-weight="600">5/9</tspan></text>
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="14" y="62" width="48" height="48" rx="4" fill="#cde3f2"/>
|
||||||
|
<rect class="thumb" x="68" y="62" width="48" height="48" rx="4" fill="#d8e2f0"/>
|
||||||
|
<rect class="thumb" x="122" y="62" width="48" height="48" rx="4" fill="#d3ecf5"/>
|
||||||
|
<rect class="thumb" x="176" y="62" width="48" height="48" rx="4" fill="#c9e8f7"/>
|
||||||
|
<rect class="thumb" x="230" y="62" width="48" height="48" rx="4" fill="#e5e0f0"/>
|
||||||
|
<rect class="slotE" x="284" y="62" width="48" height="48" rx="4"/>
|
||||||
|
<rect class="slotE" x="338" y="62" width="48" height="48" rx="4"/>
|
||||||
|
<rect class="slotE" x="392" y="62" width="48" height="48" rx="4"/>
|
||||||
|
<rect class="slotE" x="446" y="62" width="48" height="48" rx="4"/>
|
||||||
|
</g>
|
||||||
|
<rect x="14" y="112" width="48" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="26" y="122" font-size="9">封面①</text>
|
||||||
|
<text class="mut" x="72" y="123" font-size="10">② ③ ④ ⑤ …空槽虚线</text>
|
||||||
|
|
||||||
|
<!-- detail slots -->
|
||||||
|
<text class="cell" x="14" y="158">详情图 <tspan fill="#1f8a5b" font-weight="600">3/12</tspan></text>
|
||||||
|
<g>
|
||||||
|
<rect class="thumb" x="14" y="168" width="36" height="36" rx="4" fill="#d8f0e2"/>
|
||||||
|
<rect class="thumb" x="55" y="168" width="36" height="36" rx="4" fill="#d6ead9"/>
|
||||||
|
<rect class="thumb" x="96" y="168" width="36" height="36" rx="4" fill="#dcead2"/>
|
||||||
|
<rect class="slotE" x="137" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="178" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="219" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="260" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="301" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="342" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="383" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="424" y="168" width="36" height="36" rx="4"/>
|
||||||
|
<rect class="slotE" x="465" y="168" width="36" height="36" rx="4"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- completion banner -->
|
||||||
|
<rect x="14" y="222" width="488" height="30" rx="6" fill="#fff7e8" stroke="#f0d9a8"/>
|
||||||
|
<text class="cell" x="26" y="242" fill="#8a6116" font-size="12">还差 主图 4 张、详情图 9 张；两类槽位都满时提示可导出</text>
|
||||||
|
|
||||||
|
<line x1="14" y1="266" x2="502" y2="266" stroke="#eef1f6"/>
|
||||||
|
<text class="mut" x="14" y="288">导出命名：final_main_1..9.jpg（1=封面） · final_detail_1..12.jpg</text>
|
||||||
|
<text class="mut" x="14" y="306">v1 导出后手动上传蝦皮；CDP 自动回传（主图9张增删排序/详情多媒体框）后续版本实现</text>
|
||||||
|
|
||||||
|
<rect class="btnP" x="14" y="322" width="150" height="36" rx="6"/><text class="btnPT" x="34" y="345">导出到文件夹</text>
|
||||||
|
<rect class="btn" x="174" y="322" width="120" height="36" rx="6"/><text class="btnT" x="192" y="345">打开导出文件夹</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- status bar -->
|
||||||
|
<text class="mut" x="262" y="806">生成中：主图任务 2/3（异步轮询）… · 本商品已消耗 120 点 · 双击池内图片可查看原始大小</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user