cmshoppe/docs/ui/tab6-suite-prompt-dialog-T637.svg

<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">
  <!-- T-637 商品套图提示词设置弹窗与实时最终预览：标题行新增「提示词设置」入口；弹窗左编辑模板、右只读实时预览，共用同一 renderer；模板行序对齐调研笔记的组装顺序，强制规则为只读占位符内联；已删除分类要求/差异化/序号总数与商品ID行，套图分类改为套图名称+补充描述 -->
  <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:12px;font-weight:600}
      .btn{fill:#fff;stroke:#c5ccd6}.btnT{fill:#3a4150;font-size:11px}
      .panel{fill:#fff;stroke:#e2e6ec}.inp{fill:#fff;stroke:#c5ccd6}.ta{fill:#fbfcfe;stroke:#c5ccd6}
      .sel{fill:#fff;stroke:#c5ccd6}.selT{fill:#2a2f3a;font-size:11px}
      .tpl{fill:#2a2f3a;font-size:11px}.ph{fill:#2f6fed}.rl{fill:#b07d1f}
      .ok{fill:#20a464;font-size:11px}
    </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"/>

  <!-- 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>

  <!-- section: 主界面标题行变更（T-637 第 1 节） -->
  <text class="mut" x="18" y="102">主界面变更 · 「商品卖点与要求」标题行：AI帮写紧随 label，「提示词设置」同行最右</text>
  <rect class="panel" x="18" y="108" width="644" height="32" rx="6"/>
  <text class="sec" x="30" y="129" font-size="12">商品卖点与要求</text>
  <rect class="btn" x="136" y="114" width="58" height="20" rx="5"/><text class="btnT" x="147" y="128">AI帮写</text>
  <rect class="btn" x="200" y="114" width="44" height="20" rx="5" stroke-dasharray="3,2"/><text class="btnT" x="211" y="128" fill="#8a92a0">取消</text>
  <rect class="btn" x="574" y="114" width="78" height="20" rx="5" stroke="#2f6fed"/><text class="btnT" x="585" y="128" fill="#2f6fed">提示词设置</text>
  <text class="mut" x="676" y="120">「取消」仅 AI 帮写运行时显示</text>
  <text class="mut" x="676" y="134">点「提示词设置」→ 打开弹窗</text>
  <line x1="613" y1="140" x2="613" y2="150" stroke="#2f6fed" stroke-dasharray="3,2"/>

  <!-- section: ProductSuitePromptDialog 弹窗 -->
  <rect x="54" y="154" width="840" height="444" rx="8" fill="#1f2733" opacity="0.08"/>
  <rect x="50" y="150" width="840" height="444" rx="8" fill="#fff" stroke="#c5ccd6"/>
  <rect x="50" y="150" width="840" height="32" rx="8" fill="#eef1f6"/><rect x="50" y="166" width="840" height="16" fill="#eef1f6"/>
  <text class="sec" x="66" y="171" font-size="12">套图提示词设置</text>
  <text class="mut" x="866" y="171">✕</text>

  <!-- toolbar: 保存 / 恢复默认 / 预览分类（无步进器） -->
  <rect class="btnP" x="66" y="190" width="60" height="24" rx="5"/><text class="btnPT" x="82" y="206">保存</text>
  <rect class="btn" x="134" y="190" width="76" height="24" rx="5"/><text class="btnT" x="146" y="206">恢复默认</text>
  <text class="mut" x="222" y="206">恢复默认＝二次确认 → 校验内置模板 → 统一原子写盘</text>
  <rect class="sel" x="716" y="190" width="160" height="24" rx="5"/><text class="selT" x="726" y="206">预览分类：白底图 ▼</text>

  <!-- left: 基础模板编辑区（行序对齐调研笔记组装顺序） -->
  <text class="sec" x="66" y="240" font-size="12">基础模板（可编辑）</text>
  <rect class="btn" x="372" y="224" width="90" height="22" rx="5"/><text class="btnT" x="382" y="239">插入变量 ▾</text>
  <rect class="ta" x="66" y="250" width="396" height="244" rx="6"/>
  <text class="tpl" x="76" y="272">套图名称：<tspan class="ph">{套图名称}</tspan><tspan class="ph">{补充描述}</tspan></text>
  <text class="tpl" x="76" y="292">平台：<tspan class="ph">{平台}</tspan>；国家地区：<tspan class="ph">{国家地区}</tspan>；输出语言：<tspan class="ph">{输出语言}</tspan>。</text>
  <text class="tpl" x="76" y="312" fill="#b07d1f">{尺寸与长图规则}</text>
  <text class="tpl" x="76" y="332" fill="#b07d1f">{禁用内容规则}</text>
  <text class="tpl" x="76" y="352" fill="#b07d1f">{价格信息规则}</text>
  <text class="tpl" x="76" y="372" fill="#b07d1f">{尺码信息规则}</text>
  <text class="tpl" x="76" y="392" fill="#b07d1f">{参考图规则}</text>
  <text class="tpl" x="76" y="412">商品卖点与要求：</text>
  <text class="tpl" x="76" y="432" fill="#2f6fed">{商品卖点与要求}</text>
  <text class="tpl" x="76" y="452">本次生成比例：<tspan class="ph">{图片比例}</tspan>。请严格按此比例输出，不能改成其他长宽比。</text>
  <text class="ok" x="66" y="512">✓ 校验通过：9 个必需变量齐全 · 无未知变量</text>
  <text class="mut" x="66" y="528">蓝＝可编辑变量 · 琥珀＝只读规则（内容代码维护，可移位、不可改删）</text>

  <!-- insert variable menu popup -->
  <rect x="309" y="251" width="156" height="176" rx="6" fill="#1f2733" opacity="0.10"/>
  <rect x="306" y="248" width="156" height="176" rx="6" fill="#fff" stroke="#c5ccd6"/>
  <rect x="307" y="253" width="154" height="18" fill="#eef2fb"/>
  <text class="selT" x="316" y="266" fill="#2f6fed">{套图名称}</text><text class="mut" x="416" y="266">必需</text>
  <text class="selT" x="316" y="285" fill="#2f6fed">{补充描述}</text><text class="mut" x="416" y="285">必需</text>
  <text class="selT" x="316" y="304" fill="#2f6fed">{图片比例}</text><text class="mut" x="416" y="304">必需</text>
  <text class="selT" x="316" y="323" fill="#2f6fed">{参考图规则}</text><text class="mut" x="416" y="323">必需</text>
  <text class="selT" x="316" y="342" fill="#b07d1f">{尺寸与长图规则}</text><text class="mut" x="416" y="342">只读</text>
  <text class="selT" x="316" y="361" fill="#b07d1f">{禁用内容规则}</text><text class="mut" x="416" y="361">只读</text>
  <text class="selT" x="316" y="380" fill="#2f6fed">{商品卖点与要求}</text><text class="mut" x="416" y="380">必需</text>
  <text class="selT" x="316" y="399" fill="#8a92a0">{商品ID}</text><text class="mut" x="416" y="399">可选</text>
  <text class="mut" x="316" y="418">… 共 14 个变量 · 插入到光标处</text>

  <!-- splitter -->
  <circle cx="470" cy="362" r="1.5" fill="#c5ccd6"/><circle cx="470" cy="370" r="1.5" fill="#c5ccd6"/><circle cx="470" cy="378" r="1.5" fill="#c5ccd6"/>

  <!-- right: 最终提示词实时预览（规则内联，与调研笔记结构一致） -->
  <text class="sec" x="478" y="240" font-size="12">最终提示词预览（只读）</text>
  <text class="mut" x="740" y="240">实时刷新 · 200ms 防抖</text>
  <rect class="ta" x="478" y="250" width="398" height="270" rx="6"/>
  <text class="tpl" x="488" y="272">套图名称：白底图，白底主图，多角度呈现商品细节</text>
  <text class="tpl" x="488" y="290">平台：Shopee；国家地区：中国台湾；输出语言：繁体中文。</text>
  <rect x="484" y="300" width="386" height="116" rx="4" fill="#fdf6e7" stroke="#e6cf9a"/>
  <text x="820" y="314" font-size="10" fill="#8a6d1f">🔒 只读</text>
  <text class="tpl" x="492" y="317" fill="#6d5a23">最终输出严格符合所选比例的单张完整构图电商图，</text>
  <text class="tpl" x="492" y="332" fill="#6d5a23">禁止海报长图、详情页长图和多宫格拼接版面。</text>
  <text class="tpl" x="492" y="347" fill="#6d5a23">禁止出现国旗、国徽、地图轮廓及政治符号。</text>
  <text class="tpl" x="492" y="362" fill="#6d5a23">未提供价格时，禁止添加价格、币别、折扣或促销金额。</text>
  <text class="tpl" x="492" y="377" fill="#6d5a23">未提供尺码时，禁止编造尺码、尺寸或规格信息。</text>
  <text class="tpl" x="492" y="392" fill="#6d5a23">当前图片（第 1 张上传图）为本任务唯一主参考图；保持</text>
  <text class="tpl" x="492" y="405" fill="#6d5a23" font-size="10">商品主体、款式、颜色和细节准确，不编造未提供的信息。</text>
  <text class="tpl" x="488" y="434">商品卖点与要求：</text>
  <text class="tpl" x="488" y="452">韩版加绒卫衣，显瘦保暖，通勤日常皆宜。</text>
  <text class="tpl" x="488" y="470">本次生成比例：1:1。请严格按此比例输出，不能改成其他长宽比。</text>
  <text class="mut" x="478" y="500">与新建 job 落库的最终 prompt 完全一致 · 预览不产生 cmhub 请求/点数</text>

  <!-- dialog footer -->
  <line x1="66" y1="550" x2="874" y2="550" stroke="#eef0f5"/>
  <text class="mut" x="66" y="572">关闭含未保存修改 → 「保存 / 不保存 / 取消」三选项 · 任何失败不损坏原模板</text>
  <text class="mut" x="586" y="572">默认预览白底图；自定义分类补充描述为空，仅套图名称带出名称</text>

  <!-- footnote -->
  <text class="mut" x="50" y="612">模板行序对齐《虾皮圈电商图生成器提示词组装分析》组装顺序；规则占位符只读内联；已删序号/差异化，同类多张依赖模型随机性区分</text>
</svg>