cmshoppe/docs/ui/tab6-image-studio.svg

<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}
      .btnP:hover{fill:#2557c9}
      .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}
      .rowSel{fill:#eef4ff}
    </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: 6 tabs, 图片工场 active -->
  <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>
  <text class="tabT" x="434" y="68">账号管理</text>
  <text class="tabT" x="572" y="68">设置</text>
  <text class="tabTA" x="690" y="68">图片工场</text>

  <!-- ===== LEFT: product list ===== -->
  <g transform="translate(16,94)">
    <rect class="panel" x="0" y="0" width="232" height="692" rx="6"/>
    <rect class="btnP" x="14" y="14" width="204" height="32" rx="6"/>
    <text class="btnPT" x="42" y="35">＋ 新增商品（ID＋账号）</text>
    <text class="mut" x="14" y="62">输入商品ID → 选账号，绑定为一条记录</text>

    <!-- row 1: selected -->
    <rect class="rowSel" x="1" y="74" width="230" height="66"/>
    <rect x="1" y="74" width="4" height="66" fill="#2f6fed"/>
    <text class="cell" x="14" y="94" font-weight="600">51100639510</text>
    <text class="mut" x="14" y="112">女装店</text>
    <text class="cell" x="14" y="130" font-size="11">主图 <tspan fill="#2f6fed" font-weight="600">5/9</tspan> · 详情 <tspan fill="#1f8a5b" font-weight="600">3/12</tspan></text>
    <circle cx="212" cy="94" r="4" fill="#2f6fed"/>

    <!-- row 2 -->
    <text class="cell" x="14" y="164" font-weight="600">52000000001</text>
    <text class="mut" x="14" y="182">my主店</text>
    <text class="cell" x="14" y="200" font-size="11">主图 <tspan fill="#20a464" font-weight="600">9/9</tspan> · 详情 <tspan fill="#20a464" font-weight="600">12/12</tspan> · 已导出</text>
    <circle cx="212" cy="164" r="4" fill="#20a464"/>
    <line x1="10" y1="146" x2="222" y2="146" stroke="#eef1f6"/>

    <!-- row 3 -->
    <text class="cell" x="14" y="234" font-weight="600">53000000009</text>
    <text class="mut" x="14" y="252">饰品店</text>
    <text class="cell" x="14" y="270" font-size="11">主图 0/9 · 详情 0/12 · 待拉取</text>
    <circle cx="212" cy="234" r="4" fill="#b6bdc7"/>
    <line x1="10" y1="216" x2="222" y2="216" stroke="#eef1f6"/>
    <line x1="10" y1="286" x2="222" y2="286" stroke="#eef1f6"/>

    <text class="mut" x="14" y="668">照片池按 商品 独立存放：</text>
    <text class="mut" x="14" y="684">data/images/pool/店铺/商品ID/</text>
  </g>

  <!-- ===== TOP action bar ===== -->
  <g transform="translate(262,94)">
    <rect class="panel" x="0" y="0" width="1002" height="36" rx="6"/>
    <text class="sec" x="14" y="23">当前商品：女装店 · 51100639510</text>
    <rect class="btn" x="620" y="5" width="112" height="26" rx="6"/><text class="btnT" x="632" y="22">拉取蝦皮主图</text>
    <rect class="btn" x="740" y="5" width="104" height="26" rx="6"/><text class="btnT" x="752" y="22">打开图片文件夹</text>
    <rect class="btn" x="852" y="5" width="140" height="26" rx="6"/><text class="btnT" x="864" y="22" fill="#1f6f43" font-weight="600">导出终选（21张）</text>
  </g>

  <!-- ===== MIDDLE column ===== -->
  <!-- source 9 grid -->
  <g transform="translate(262,142)">
    <rect class="panel" x="0" y="0" width="470" height="96" rx="6"/>
    <text class="sec" x="14" y="22">蝦皮原主图（9）</text>
    <text class="mut" x="130" y="22">只读抓取，点击加入照片池</text>
    <g>
      <rect class="thumb" x="14"  y="34" width="44" height="44" rx="4" fill="#d8e2f0"/>
      <rect class="thumb" x="64"  y="34" width="44" height="44" rx="4" fill="#cfd8ea"/>
      <rect class="thumb" x="114" y="34" width="44" height="44" rx="4" fill="#e3d8ce"/>
      <rect class="thumb" x="164" y="34" width="44" height="44" rx="4" fill="#d2e3d6"/>
      <rect class="thumb" x="214" y="34" width="44" height="44" rx="4" fill="#e8d9df"/>
      <rect class="thumb" x="264" y="34" width="44" height="44" rx="4" fill="#d5dde8"/>
      <rect class="thumb" x="314" y="34" width="44" height="44" rx="4" fill="#dfe6d2"/>
      <rect class="thumb" x="364" y="34" width="44" height="44" rx="4" fill="#d9d2e8"/>
      <rect class="thumb" x="414" y="34" width="44" height="44" rx="4" fill="#e6e0cf"/>
    </g>
    <text class="mut" x="14" y="90"></text>
  </g>

  <!-- photo pool -->
  <g transform="translate(262,250)">
    <rect class="panel" x="0" y="0" width="470" height="536" rx="6"/>
    <text class="sec" x="14" y="24">照片池（12）</text>
    <text class="mut" x="120" y="24">单击选为源图 · 双击看大图 · 右键移除</text>

    <!-- row 1 -->
    <g>
      <!-- selected as source -->
      <rect x="12" y="38" width="84" height="84" rx="5" fill="#d8e2f0" stroke="#2f6fed" stroke-width="3"/>
      <rect x="12" y="38" width="20" height="14" rx="3" fill="#7a8598"/><text class="badge" x="17" y="48">原</text>
      <rect x="34" y="106" width="40" height="16" rx="3" fill="#2f6fed"/><text class="badge" x="42" y="117" font-size="10">源图</text>

      <rect class="thumb" x="106" y="38" width="84" height="84" rx="5" fill="#cfd8ea"/>
      <rect x="106" y="38" width="20" height="14" rx="3" fill="#7a8598"/><text class="badge" x="111" y="48">原</text>

      <rect class="thumb" x="200" y="38" width="84" height="84" rx="5" fill="#cde3f2"/>
      <rect x="200" y="38" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="205" y="48">主</text>

      <rect class="thumb" x="294" y="38" width="84" height="84" rx="5" fill="#d3ecf5"/>
      <rect x="294" y="38" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="299" y="48">主</text>

      <rect class="thumb" x="388" y="38" width="84" height="84" rx="5" fill="#c9e8f7"/>
      <rect x="388" y="38" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="393" y="48">主</text>
    </g>

    <!-- row 2 -->
    <g>
      <rect class="thumb" x="12" y="134" width="84" height="84" rx="5" fill="#d8f0e2"/>
      <rect x="12" y="134" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="17" y="144">详</text>
      <!-- 3:4 letterboxed -->
      <g class="thumb">
        <rect x="106" y="134" width="84" height="84" rx="5" fill="#eceff4" stroke="#d3d9e2"/>
        <rect x="122" y="138" width="57" height="76" fill="#d6ead9"/>
      </g>
      <rect x="106" y="134" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="111" y="144">详</text>
      <text class="mut" x="150" y="230" font-size="9">3:4</text>

      <!-- 16:9 letterboxed -->
      <g class="thumb">
        <rect x="200" y="134" width="84" height="84" rx="5" fill="#eceff4" stroke="#d3d9e2"/>
        <rect x="204" y="152" width="76" height="43" fill="#dcead2"/>
      </g>
      <rect x="200" y="134" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="205" y="144">详</text>
      <text class="mut" x="240" y="230" font-size="9">16:9</text>

      <rect class="thumb" x="294" y="134" width="84" height="84" rx="5" fill="#e5e0f0"/>
      <rect x="294" y="134" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="299" y="144">主</text>

      <rect class="thumb" x="388" y="134" width="84" height="84" rx="5" fill="#f0e6d8"/>
      <rect x="388" y="134" width="20" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="393" y="144">主</text>
    </g>

    <!-- row 3: two done + one generating -->
    <g>
      <rect class="thumb" x="12" y="230" width="84" height="84" rx="5" fill="#e8dccf"/>
      <rect x="12" y="230" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="17" y="240">详</text>

      <!-- 9:16 letterboxed -->
      <g class="thumb">
        <rect x="106" y="230" width="84" height="84" rx="5" fill="#eceff4" stroke="#d3d9e2"/>
        <rect x="130" y="234" width="42" height="76" fill="#e0d6ea"/>
      </g>
      <rect x="106" y="230" width="20" height="14" rx="3" fill="#1f8a5b"/><text class="badge" x="111" y="240">详</text>
      <text class="mut" x="146" y="326" font-size="9">9:16</text>

      <!-- generating with spinner -->
      <rect x="200" y="230" width="84" height="84" rx="5" fill="#fbfcfe" stroke="#9cc0ff" stroke-dasharray="5 4"/>
      <g transform="translate(242,272)">
        <circle r="14" fill="none" stroke="#dbe6fb" stroke-width="4"/>
        <path d="M 0 -14 A 14 14 0 0 1 14 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="216" y="328" fill="#2f6fed">生成中 2/3…</text>
    </g>

    <line x1="12" y1="348" x2="458" y2="348" stroke="#eef1f6"/>
    <text class="mut" x="14" y="368">角标：<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="386">生成的新图自动进池，可再选为源图继续生成（迭代）</text>
    <text class="mut" x="14" y="404">池内文件：data/images/pool/女装店/51100639510/</text>
  </g>

  <!-- ===== RIGHT column ===== -->
  <!-- generate control -->
  <g transform="translate(748,142)">
    <rect class="panel" x="0" y="0" width="516" height="252" rx="6"/>
    <text class="sec" x="14" y="24">用选中源图生成</text>

    <!-- source preview -->
    <rect x="14" y="38" width="96" height="96" rx="5" fill="#d8e2f0" stroke="#2f6fed" stroke-width="2"/>
    <text class="mut" x="24" y="150">源图（池内选中）</text>

    <!-- prompt -->
    <rect class="ta" x="124" y="38" width="378" height="70" rx="6"/>
    <text class="cell" x="134" y="58" fill="#586073" font-size="11">纯白背景棚拍，模特换不同姿势与角度展示上身效果，</text>
    <text class="cell" x="134" y="74" fill="#586073" font-size="11">保留衣服主体细节，突出韩版宽松版型，电商主图风格</text>
    <text class="mut" x="134" y="98" font-size="10">提示：写清"不同动作/角度"，多张结果差异更大</text>

    <!-- controls row: type segmented + count + ratio -->
    <text class="cell" x="124" y="132">类型</text>
    <rect class="segA" x="156" y="118" width="52" height="24" rx="5"/><text class="segTA" x="166" y="134">主图</text>
    <rect class="seg" x="208" y="118" width="60" height="24" rx="5"/><text class="segT" x="216" y="134">详情图</text>

    <text class="cell" x="288" y="132">数量</text>
    <rect class="inp" x="320" y="118" width="46" height="24" rx="5"/><text class="cell" x="336" y="134">3</text>

    <text class="cell" x="384" y="132">比例</text>
    <rect class="inp" x="416" y="118" width="86" height="24" rx="5"/><text class="cell" x="424" y="134" font-size="11">1:1 ▼</text>
    <text class="mut" x="416" y="156" font-size="10">1:1 / 3:4 / 9:16 / 16:9</text>

    <!-- cost + generate -->
    <text class="cell" x="14" y="188">预计消耗 <tspan fill="#c2473d" font-weight="600">30 点</tspan>（3 张 × 10 点） · 余额 3480 点</text>
    <rect class="btnP" x="14" y="202" width="150" height="36" rx="6">
      <animate attributeName="opacity" values="1;0.82;1" dur="2.4s" repeatCount="indefinite"/>
    </rect>
    <text class="btnPT" x="42" y="225">▶ 生成 3 张主图</text>
    <rect class="btn" x="174" y="202" width="76" height="36" rx="6"/><text class="btnT" x="198" y="225">停止</text>
    <text class="mut" x="264" y="219">同一提示词请求 cmhub 3 次，异步任务轮询取图；</text>
    <text class="mut" x="264" y="234">完成的图自动进照片池</text>
  </g>

  <!-- final slots -->
  <g transform="translate(748,406)">
    <rect class="panel" x="0" y="0" width="516" height="380" rx="6"/>
    <text class="sec" x="14" y="24">终选与排序</text>
    <text class="mut" x="110" y="24">从照片池拖入槽位 · 槽内拖拽换顺序</text>

    <!-- main slots -->
    <text class="cell" x="14" y="52">主图 <tspan fill="#2f6fed" font-weight="600">5/9</tspan></text>
    <g>
      <rect class="thumb" x="14"  y="62" width="48" height="48" rx="4" fill="#cde3f2"/>
      <rect class="thumb" x="68"  y="62" width="48" height="48" rx="4" fill="#d8e2f0"/>
      <rect class="thumb" x="122" y="62" width="48" height="48" rx="4" fill="#d3ecf5"/>
      <rect class="thumb" x="176" y="62" width="48" height="48" rx="4" fill="#c9e8f7"/>
      <rect class="thumb" x="230" y="62" width="48" height="48" rx="4" fill="#e5e0f0"/>
      <rect class="slotE" x="284" y="62" width="48" height="48" rx="4"/>
      <rect class="slotE" x="338" y="62" width="48" height="48" rx="4"/>
      <rect class="slotE" x="392" y="62" width="48" height="48" rx="4"/>
      <rect class="slotE" x="446" y="62" width="48" height="48" rx="4"/>
    </g>
    <rect x="14" y="112" width="48" height="14" rx="3" fill="#2f6fed"/><text class="badge" x="26" y="122" font-size="9">封面①</text>
    <text class="mut" x="72" y="123" font-size="10">其余位置为空槽虚线</text>

    <!-- detail slots -->
    <text class="cell" x="14" y="158">详情图 <tspan fill="#1f8a5b" font-weight="600">3/12</tspan></text>
    <g>
      <rect class="thumb" x="14"  y="168" width="36" height="36" rx="4" fill="#d8f0e2"/>
      <rect class="thumb" x="55"  y="168" width="36" height="36" rx="4" fill="#d6ead9"/>
      <rect class="thumb" x="96"  y="168" width="36" height="36" rx="4" fill="#dcead2"/>
      <rect class="slotE" x="137" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="178" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="219" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="260" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="301" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="342" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="383" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="424" y="168" width="36" height="36" rx="4"/>
      <rect class="slotE" x="465" y="168" width="36" height="36" rx="4"/>
    </g>

    <!-- completion banner -->
    <rect x="14" y="222" width="488" height="30" rx="6" fill="#fff7e8" stroke="#f0d9a8"/>
    <text class="cell" x="26" y="242" fill="#8a6116" font-size="12">还差 主图 4 张、详情图 9 张；两类槽位都满时提示可导出</text>

    <line x1="14" y1="266" x2="502" y2="266" stroke="#eef1f6"/>
    <text class="mut" x="14" y="288">导出命名：final_main_1..9.jpg（1=封面） · final_detail_1..12.jpg</text>
    <text class="mut" x="14" y="306">v1 导出后手动上传蝦皮；CDP 自动回传（主图9张增删排序/详情多媒体框）后续版本实现</text>

    <rect class="btnP" x="14" y="322" width="150" height="36" rx="6"/><text class="btnPT" x="34" y="345">导出到文件夹</text>
    <rect class="btn" x="174" y="322" width="120" height="36" rx="6"/><text class="btnT" x="192" y="345">打开导出文件夹</text>
  </g>

  <!-- status bar -->
  <text class="mut" x="262" y="806">生成中：主图任务 2/3（异步轮询）… · 本商品已消耗 120 点 · 双击池内图片可查看原始大小</text>
</svg>