docs: 补 T-622 UI/UX 优化项 + 效果图落地 P1-P4/P5

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>

docs/ui/tab6-suite-package-v1.svg

@@ -39,10 +39,10 @@
   <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="532" y="107" fill="#5c6573">账号</text>
-  <rect class="sel" x="560" y="91" width="104" height="24" rx="5"/><text class="selT" x="568" y="107">女装店</text><text class="selT" x="652" y="107" fill="#8a92a0">▾</text>
-  <text class="cell" x="668" y="107" fill="#5c6573">商品ID</text>
-  <rect class="inp" x="724" y="91" width="90" height="24" rx="5"/><text class="cell" x="730" y="107" font-size="11">51100639510</text>
+  <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 ===================== -->
@@ -74,46 +74,38 @@
 
       <!-- 生成设置：平台/国家/语言/比例（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 class="selT" x="22" 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 class="selT" x="140" 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 class="selT" x="22" 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 class="selT" x="140" y="189">1:1</text><text class="selT" x="230" y="189" fill="#8a92a0">▾</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>
 
-      <!-- 商品卖点与要求（去掉 4 个 label 省下的高度并入，输入框更高）-->
+      <!-- 商品卖点与要求 -->
       <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="118" rx="6"/>
+      <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>
 
-      <!-- 套图结构配置 (仅 3 个默认) -->
-      <text class="sec" x="14" y="384">套图结构配置</text>
-      <text class="mut" x="250" y="384" text-anchor="end">合计 5 张</text>
-      <g font-size="12">
-        <rect class="row" x="14" y="390" width="236" height="22" rx="6"/>
-        <text class="cell" x="22" y="405" font-size="11">白底图</text>
-        <g transform="translate(176,391)"><rect class="cnt" x="0" y="0" width="18" height="18" rx="5"/><text class="cntT" x="9" y="14" text-anchor="middle">−</text><text class="cell" x="37" y="14" text-anchor="middle" font-weight="600">1</text><rect class="cnt" x="56" y="0" width="18" height="18" rx="5"/><text class="cntT" x="65" y="14" text-anchor="middle">＋</text></g>
-        <rect class="row" x="14" y="416" width="236" height="22" rx="6"/>
-        <text class="cell" x="22" y="431" font-size="11">场景图</text>
-        <g transform="translate(176,417)"><rect class="cnt" x="0" y="0" width="18" height="18" rx="5"/><text class="cntT" x="9" y="14" text-anchor="middle">−</text><text class="cell" x="37" y="14" text-anchor="middle" font-weight="600">2</text><rect class="cnt" x="56" y="0" width="18" height="18" rx="5"/><text class="cntT" x="65" y="14" text-anchor="middle">＋</text></g>
-        <rect class="row" x="14" y="442" width="236" height="22" rx="6"/>
-        <text class="cell" x="22" y="457" font-size="11">卖点图</text>
-        <g transform="translate(176,443)"><rect class="cnt" x="0" y="0" width="18" height="18" rx="5"/><text class="cntT" x="9" y="14" text-anchor="middle">−</text><text class="cell" x="37" y="14" text-anchor="middle" font-weight="600">2</text><rect class="cnt" x="56" y="0" width="18" height="18" rx="5"/><text class="cntT" x="65" y="14" text-anchor="middle">＋</text></g>
-      </g>
-      <rect x="14" y="470" width="236" height="22" rx="6" fill="#fff" stroke="#c5ccd6" stroke-dasharray="3 3"/>
-      <text x="132" y="485" font-size="11" font-weight="600" fill="#2f6fed" text-anchor="middle">＋ 添加自定义分类（可改名 / 删除）</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="300" rx="2" fill="#c5ccd6"/>
+    <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="438" width="236" height="36" rx="6"/><text class="btnPT" x="132" y="461" text-anchor="middle">▶ 生成套图（5）</text>
-    <text x="14" y="483" font-size="9.5" fill="#8a92a0">建议填写产品名称、核心卖点、目标人群、使用场景与禁用元素</text>
+    <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 ===================== -->
@@ -143,7 +135,8 @@
       <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="102" width="64" height="20" rx="5" stroke="#c2473d"/><text x="540" y="116" font-size="11" font-weight="600" 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 -->