cmshoppe/docs/ui/tab2-ai-generate.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">
  <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}
    </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">蝦皮圈優化助手 · Shopee 商品批量改标题换封面</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">③ 更新shopee</text>
  <text class="tabT" x="492" y="68">④ 账号管理</text>
  <text class="tabT" x="636" y="68">⑤ 设置</text>

  <!-- LEFT ~1/4: prompts management -->
  <g transform="translate(18,96)">
    <rect class="panel" x="0" y="0" width="218" height="446" rx="6"/>

    <!-- title prompt: single file + save -->
    <text class="sec" x="14" y="24">标题提示词</text>
    <rect class="btn" x="150" y="8" width="54" height="22" rx="5"/><text class="btnT" x="164" y="23">保存</text>
    <rect class="ta" x="14" y="36" width="190" height="78" rx="6"/>
    <text class="cell" x="22" y="56" fill="#586073" font-size="11">精简标题、去「T恤」、</text>
    <text class="cell" x="22" y="72" fill="#586073" font-size="11">突出韩版加绒保暖 ≤60字</text>
    <text class="mut" x="14" y="128">启动自动加载 data/title_prompt.txt 回显</text>

    <!-- cover prompt: multi-template -->
    <text class="sec" x="14" y="160">封面提示词（模板）</text>
    <rect class="inp" x="14" y="170" width="190" height="24" rx="5"/><text class="cell" x="22" y="187" font-size="11">模板：韩版女装 ▼</text>
    <!-- icon toolbar -->
    <g font-size="11">
      <rect class="btn" x="14" y="200" width="34" height="24" rx="5"/><text class="btnT" x="22" y="216">＋</text>
      <rect class="btn" x="52" y="200" width="34" height="24" rx="5"/><text class="btnT" x="60" y="216">💾</text>
      <rect class="btn" x="90" y="200" width="34" height="24" rx="5"/><text class="btnT" x="96" y="216">另存</text>
      <rect class="btn" x="128" y="200" width="34" height="24" rx="5"/><text class="btnT" x="136" y="216">改名</text>
      <rect class="btn" x="166" y="200" width="38" height="24" rx="5"/><text class="btnT" x="176" y="216">删除</text>
    </g>
    <rect class="ta" x="14" y="232" width="190" height="118" rx="6"/>
    <text class="cell" x="22" y="252" fill="#586073" font-size="11">纯白背景、保留主体、</text>
    <text class="cell" x="22" y="268" fill="#586073" font-size="11">呼应标题：</text>
    <text x="22" y="284" fill="#2f6fed" font-size="11">{新标题}</text>
    <!-- insert / preview -->
    <rect class="btn" x="14" y="360" width="92" height="26" rx="6"/><text class="btnT" x="26" y="377">插入标题</text>
    <rect class="btn" x="112" y="360" width="92" height="26" rx="6"/><text class="btnT" x="138" y="377">预览</text>
    <text class="mut" x="14" y="406">变量 {旧标题}{新标题}{商品id}{店铺}</text>
    <text class="mut" x="14" y="422">模型/并发/重试/分辨率/质量 → ⑤设置</text>
  </g>

  <!-- RIGHT: filters + list -->
  <g transform="translate(248,96)">
    <!-- filter bar -->
    <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>

    <!-- table -->
    <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">新标题直接用 AI 输出（不可编辑）· 可对单行右键「重生成」· 无逐条审核</text>
  </g>

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