chengmaandClaude Opus 4.8
fb873aae90
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>
161 lines
14 KiB
XML
161 lines
14 KiB
XML
<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="506" y="107" fill="#5c6573">账号</text>
|
||
<rect class="sel" x="536" y="91" width="104" height="24" rx="5"/><text class="selT" x="544" y="107">女装店</text><text class="selT" x="628" y="107" fill="#8a92a0">▾</text>
|
||
<text class="cell" x="648" y="107" fill="#5c6573">商品ID</text>
|
||
<rect class="inp" x="690" y="91" width="140" height="24" rx="5"/><text class="cell" x="698" y="107" font-family="'Consolas','Courier New',monospace" font-size="12">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 x="22" y="163" font-size="10" fill="#8a92a0">平台</text><text class="selT" x="48" 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 x="140" y="163" font-size="10" fill="#8a92a0">国家</text><text class="selT" x="166" 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 x="22" y="189" font-size="10" fill="#8a92a0">语言</text><text class="selT" x="48" 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 x="140" y="189" font-size="10" fill="#8a92a0">比例</text><text class="selT" x="166" 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>
|
||
|
||
<!-- 商品卖点与要求 -->
|
||
<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="108" 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>
|
||
<!-- P3：引导文案从按钮下移到输入框下方，11px + 加深提高对比度 -->
|
||
<text x="14" y="370" font-size="11" fill="#6b7280">建议写明产品名、卖点、人群、场景、禁用元素</text>
|
||
|
||
<!-- P1：套图结构压成常驻 chips（渐进披露：点分类展开 −/＋），核心控制不再被折叠 -->
|
||
<text class="sec" x="14" y="392">套图结构</text>
|
||
<text class="mut" x="250" y="392" text-anchor="end">合计 5 张 · 点分类调数量</text>
|
||
<rect class="chip" x="14" y="400" width="58" height="24" rx="6"/><text class="cell" x="22" y="416" font-size="11">白底</text><text class="cntT" x="58" y="416" font-weight="600">1</text>
|
||
<rect class="chip" x="76" y="400" width="58" height="24" rx="6"/><text class="cell" x="84" y="416" font-size="11">场景</text><text class="cntT" x="120" y="416" font-weight="600">2</text>
|
||
<rect class="chip" x="138" y="400" width="58" height="24" rx="6"/><text class="cell" x="146" y="416" font-size="11">卖点</text><text class="cntT" x="182" y="416" font-weight="600">2</text>
|
||
<rect class="btn" x="200" y="400" width="50" height="24" rx="6"/><text class="btnT" x="210" y="416" font-size="11">＋类</text>
|
||
</g>
|
||
|
||
<!-- 竖直滚动条：除“生成套图”按钮外，上方所有组件同属一个可滚动区 -->
|
||
<rect x="255" y="8" width="4" height="424" rx="2" fill="#eef0f5"/>
|
||
<rect x="255" y="8" width="4" height="404" 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="446" width="236" height="38" rx="6"/><text class="btnPT" x="132" y="470" text-anchor="middle">▶ 生成套图（5）</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="98" width="64" height="20" rx="5" stroke="#c2473d"/><text x="540" y="112" font-size="11" font-weight="600" fill="#c2473d" text-anchor="middle">重试</text>
|
||
<text x="540" y="132" font-size="9" 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>
|