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/tasks/T-622.md

@@ -83,6 +83,19 @@ UI 已定稿：`docs/ui/tab6-suite-package-v1.svg`（本仓库家风：`#2b3a55`
 - 结果卡片：单击预览大图；右键菜单 预览 / 复制路径 / 打开文件夹 / 重新生成该图 / 删除；`×` 删除该图（移废纸篓 + 「撤销」toast）；失败卡片 `重试`（`retryAsset`，已有生成任务进行中则提示）。
 - `⋯` 更多（`moreMenu`）：删除全部（`confirmDeleteAll`，二次确认，移废纸篓）。
 
+## UI/UX 优化项（ui-ux-pro-max 校验后修订，effect 图已落 P1–P4/P5）
+
+> 桌面 PySide6，取可迁移规则（对比度/标签/反馈/层级/空错态/截断），触控类规则不适用。P1–P4 为前几轮「腾纵向空间」引入的回归，已在 `tab6-suite-package-v1.svg` 修正；P5/P6 为实现期加固。
+
+- **P1 核心控制被折叠**（`visual-hierarchy`/`content-priority`/`progressive-disclosure`）：卖点框加高曾把「套图结构配置」挤到滚动线下，而它决定生成张数（＝按钮 N）。**方案（已落图）**：结构配置压成常驻 chips「白底1 场景2 卖点2 ＋类」，点分类再展开 −/＋（渐进披露），常可见不折叠；卖点框回收到合理高度。
+- **P2 去 4 个下拉 label 影响辨识**（`input-labels`/`truncation-strategy`）：`1:1` 等脱离 label 难认。**方案（已落图）**：下拉值内联前缀「平台 Shopee / 国家 中国台湾 / 语言 繁体中文 / 比例 1:1」，无独立 label 行也保留语义；实现层另加 `setToolTip`。
+- **P3 引导文案字号/对比不足**（`color-contrast` CRITICAL / `contrast-readability`）：原 9.5px + `#8a92a0` 属 gray-on-gray。**方案（已落图）**：移到卖点框下方作 helper text，≥11px、`#6b7280`。
+- **P4 商品ID 压到 60% 会截断**（`truncation-strategy`/`number-tabular`）：Shopee itemid 常 11–13 位，w90 放不下。**方案（已落图）**：恢复到 w140 并用等宽数字；空间靠缩「账号」下拉腾出。
+- **P5 空态与失败原因**（`empty-states`/`error-recovery`/`error-clarity`）：结果区首次未生成需空态引导「还没有生成，点『生成套图』开始」；失败卡除「重试」外显示简短原因（效果图示「上游超时」，实现取上游 error_type/message 截断）。
+- **P6 小控件命中区**（`no-precision-required`，桌面按 ≥24–28px）：计数器 −/＋、chip 的 ×、缩略图删除，**视觉可小、hit area 放大到 ≥24–28px**；图标按钮补 `accessibleName`/tooltip，Tab 顺序符合视觉顺序（`keyboard-nav`）。
+
+已做对、保持不变：单一蓝色主 CTA（`primary-action`）；状态不靠颜色单独表达（打勾/感叹号/转圈，`color-not-only`）；生成⇄停止 toggle + 确认 + 撤销 + 重试反馈完整；家风一致、非 emoji 图标。
+
 ## 边界（不改什么）
 
 - 不改动 `image_studio.py / image_studio_generation.py / image_studio_export.py` 的后端数据契约与异步生图协议（仅按需扩展字段）。

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