cmshoppe/docs/ui/tab3-update-shopee.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:12px;font-weight:600}.btn{fill:#fff;stroke:#c5ccd6}.btnT{fill:#3a4150;font-size:12px}
    .panel{fill:#fff;stroke:#e2e6ec}.warn{fill:#fff7e6;stroke:#f0d089}
  </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="304" y="45" width="162" height="38"/><rect x="304" y="45" width="162" height="3" fill="#2f6fed"/>
  <text class="tabT" x="34" y="68">① 导入采集</text><text class="tabT" x="186" y="68">② AI生成</text>
  <text class="tabTA" x="334" y="68">③ 更新蝦皮</text>
  <text class="tabT" x="492" y="68">④ 账号管理</text><text class="tabT" x="636" y="68">⑤ 设置</text>

  <!-- filter bar -->
  <g transform="translate(18,94)">
    <rect class="btn" x="0" y="0" width="120" height="28" rx="6"/><text class="btnT" x="12" y="18">批次：本次 ▼</text>
    <rect class="btn" x="130" y="0" width="120" height="28" rx="6"/><text class="btnT" x="142" y="18">店铺：全部 ▼</text>
    <rect class="btn" x="260" y="0" width="130" height="28" rx="6"/><text class="btnT" x="272" y="18">状态：已生成 ▼</text>
    <rect class="btnP" x="400" y="0" width="64" height="28" rx="6"/><text class="btnPT" x="418" y="18">筛选</text>
  </g>
  <!-- warn bar -->
  <g transform="translate(18,128)">
    <rect x="0" y="0" width="904" height="24" rx="6" fill="#fdeceb" stroke="#f3c2bd"/>
    <text x="14" y="16" font-size="12" fill="#b23b30">⚠ 点击「开始更新」后确认【当前筛选结果】：确认后改标题+换封面并提交线上</text>
  </g>

  <!-- table -->
  <g transform="translate(18,162)">
    <rect class="panel" x="0" y="0" width="904" height="250" rx="6"/>
    <rect x="1" y="1" width="902" height="28" fill="#eef1f6"/>
    <text class="th" x="14" y="19">别名</text><text class="th" x="120" y="19">商品ID</text>
    <text class="th" x="250" y="19">新标题</text><text class="th" x="560" y="19">新封面</text>
    <text class="th" x="690" y="19">阶段</text><text class="th" x="800" y="19">结果</text>
    <g font-size="12">
      <rect x="1" y="29" width="902" height="34" fill="#fafbfc"/>
      <text class="cell" x="14" y="51">女装店</text><text class="cell" x="120" y="51">51100639510</text>
      <text class="cell" x="250" y="51">…顯瘦百搭</text><text class="cell" x="560" y="51">new_…01.jpg</text>
      <circle cx="696" cy="47" r="4" fill="#20a464"/><text class="cell" x="706" y="51">已应用</text>
      <text class="cell" x="800" y="51" fill="#1f6f43">成功·已提交</text>

      <text class="cell" x="14" y="85">女装店</text><text class="cell" x="120" y="85">51100640200</text>
      <text class="cell" x="250" y="85">…加絨上衣</text><text class="cell" x="560" y="85">new_…02.jpg</text>
      <circle cx="696" cy="81" r="4" fill="#2f6fed"/><text class="cell" x="706" y="85">处理中…</text>
      <text class="mut" x="800" y="85">—</text>

      <rect x="1" y="97" width="902" height="34" fill="#fafbfc"/>
      <text class="cell" x="14" y="119">my主店</text><text class="cell" x="120" y="119">52000000001</text>
      <text class="cell" x="250" y="119">Korean Loose Tee</text><text class="cell" x="560" y="119">new_…07.jpg</text>
      <circle cx="696" cy="115" r="4" fill="#b6bdc7"/><text class="cell" x="706" y="119">待应用</text><text class="mut" x="800" y="119">—</text>

      <text class="cell" x="14" y="153">饰品店</text><text class="cell" x="120" y="153">53000000009</text>
      <text class="cell" x="250" y="153">…百搭耳環</text><text class="cell" x="560" y="153">new_…03.jpg</text>
      <circle cx="696" cy="149" r="4" fill="#c2473d"/><text class="cell" x="706" y="153">失败</text>
      <text class="cell" x="800" y="153" fill="#c2473d">更新按钮禁用</text>
    </g>
    <text class="mut" x="14" y="234">dry-run/串行/按账号并行 · 单条失败继续 · 写运行日志</text>
  </g>

  <!-- actions -->
  <g transform="translate(18,420)">
    <rect class="btnP" x="0" y="0" width="120" height="34" rx="6"/><text class="btnPT" x="26" y="22">▶ 开始更新</text>
    <rect class="btn" x="132" y="0" width="64" height="34" rx="6"/><text class="btnT" x="150" y="22">■ 停止</text>
    <rect class="btn" x="700" y="0" width="204" height="34" rx="6"/><text class="btnT" x="724" y="22">回写结果到 Excel</text>
  </g>

  <!-- summary box -->
  <g transform="translate(18,470)">
    <rect class="warn" x="0" y="0" width="904" height="138" rx="6"/>
    <text class="sec" x="16" y="26">结束汇总</text>
    <text class="cell" x="16" y="54">成功：2　失败：1（更新按钮禁用 / 校验未过）　略过：0</text>
    <text class="cell" x="16" y="80">结果已写回原 Excel（旧/新标题、旧/新封面、更新状态）。</text>
    <text class="mut" x="16" y="104">⚠ 原 Excel 被打开锁定时回写失败 → 提示关闭后重试，或另存副本（SQLite 为事实来源）。</text>
  </g>
</svg>