chengma/cmshoppe
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ed1d8ee7641bcf295240838bd1337545f2003bb2
cmshoppe/docs/ui/tab6-image-studio-v2.svg
T

262 lines
16 KiB
XML
Raw Normal View History

docs: add rule—SVG mockups live in docs/ui/; commit tab2/tab6 effect images
2026-07-11 10:18:50 +08:00
<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>
refactor(navigation): simplify main tab labels
2026-07-17 12:24:05 +08:00
<text class="tabT" x="434" y="68">账号管理</text>
<text class="tabT" x="572" y="68">设置</text>
<text class="tabTA" x="690" y="68">图片精修</text>
docs: add rule—SVG mockups live in docs/ui/; commit tab2/tab6 effect images
2026-07-11 10:18:50 +08:00
<!-- ===== 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>
Reference in New Issue Copy Permalink