@tfdesign/b-end 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "private": false,
   "type": "module",
   "description": "TFDS B-end React components + Tailwind v4 theme.css; self-contained npm install (no monorepo clone required).",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "bin": {
-    "tfds-setup": "./scripts/setup.mjs"
+    "tfds-setup": "scripts/setup.mjs"
   },
   "scripts": {
     "prepack": "node ../../scripts/generate-tfds-b-end-bundle.mjs && node ../../scripts/generate-tfds-b-end-types.mjs",

package/skills/tfds/CHECKLIST.md

@@ -45,6 +45,8 @@
 ## 4. 布局与滚动
 
 - 根容器 `h-dvh` / `h-full` 链路完整，关键层有 `min-h-0` / `min-w-0`。
+- 已在常见桌面尺寸验证：宽度至少覆盖 `1920 / 1440 / 1280 / 1024`，高度至少覆盖 `900 / 768`；默认浏览器缩放下关键控件、底部操作、表格分页、输入区和结果区都可达，不依赖缩放页面才能使用。
+- 页面没有横向 body 滚动；Tabs、筛选栏、表单网格、按钮组、表格工具条、InfoDisplayPanel 和右侧面板不会撑破父容器。若局部内容超宽，滚动必须发生在该组件或面板内部，而不是把整页撑宽。
 - 表格、消息流、编辑器、产物区在自身容器内滚动。
 - Playground、会话、多面板页没有错误地整页滚动。
 - 双栏 / 三栏布局中固定侧 `shrink-0`，主内容 `flex-1 min-w-0`。
@@ -56,6 +58,7 @@
 - 没有把筛选栏 / 工具条的固定宽 `160/200/240px` 或示意宽 `300px` 套到业务表单正文；只有筛选栏、紧凑查询区、工具条允许固定宽。
 - 使用 `Form children` 或 `item.control` 自定义字段时，自定义控件外层已补 `w-full min-w-0 max-w-full`，没有绕过 `Form` 的字段宽度约束。
 - AI 入口页的 Hero、`ChatInput`、Tabs、搜索和模板网格直接坐灰底；模板卡 `Card color="white"`；网格 `gap-4`；Tabs 为 `size="sm"`。
+- `<Tabs />` 默认保持 `overflow="auto"`，父级具备 `min-w-0 max-w-full`；没有给 Tabs 或其父级添加 `w-fit` / `min-w-max` / 固定大宽度导致溢出。
 - `ChatMessage role="user"` 默认保持 `userBubbleTone="auto"`；白色大背景 / 白色工作卡内用户气泡应自动呈现 `fill-default` 灰底，浅灰或其他非白背景上应呈现白色气泡；不要在白底上强行写 `userBubbleTone="surface"`。
 
 ---
@@ -69,6 +72,8 @@
 - 品牌青绿只用于焦点、激活、链接、品牌状态和标题竖条。
 - AI 渐变只出现在明确 AI 语义面。
 - 每个区域最多一个 primary 主按钮。
+- 密集内容区（表格、表单、日志、配置、代码、结果、长编辑器）使用稳定白底或组件指定背景；不使用 AI 渐变、透明玻璃、弱对比背景或整卡 hover lift。
+- 分隔线只用于真实结构边界：表格头、滚动区边界、弹窗头尾、分栏、工具条；没有在每个卡片 header / section / footer 上习惯性叠加横线。
 
 ---
 

package/skills/tfds/COMMON_FAILURES.md

@@ -22,6 +22,9 @@
 - §14 没有先选布局 Recipe，导致容器和间距混乱
 - §15 头像用了随机外链或手写 img
 - §16 ChatMessage 用户气泡在白底上仍是白色
+- §17 Tabs / 筛选栏 / 按钮组横向溢出
+- §18 结构容器被误加整卡 hover
+- §19 密集内容用了弱对比或渐变背景
 
 ---
 
@@ -152,6 +155,7 @@ style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-lg)' }}
 
 - 同一区域互斥内容切换必须用 `<Tabs />`（禁止用 Button/Tag 冒充）。
 - 内容区（白卡/面板/表单分段/筛选维度/Playground）默认 **一律** `size="sm"`（省略 size 也等价）；只有平台顶部 header / 页面级顶导 / 产品级一级导航才允许 `md/lg`。
+- 保持 Tabs 默认 `overflow="auto"`；窄容器中由 Tabs 内部横向滚动，不要用 `w-fit` / `min-w-max` 把父容器撑宽。
 
 ---
 
@@ -236,3 +240,47 @@ style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-lg)' }}
 - 默认不传 `userBubbleTone`，让组件使用 `auto` 根据最近父级背景自动适配。
 - 白色大背景 / 白色工作卡内应呈现灰色 `fill` 气泡；复杂白底无法识别时显式传 `userBubbleTone="fill"`。
 - 浅灰、蓝灰、AI 会话灰底等非白背景应呈现白色 `surface` 气泡；只有复杂非白背景无法识别时才显式传 `userBubbleTone="surface"`。
+
+---
+
+## 17. Tabs / 筛选栏 / 按钮组横向溢出
+
+**现象**：页面或卡片右侧出现被撑开的空白，Tabs 超出卡片边界，筛选控件或按钮组被裁切、挤出白卡，默认浏览器缩放下需要横向滚动整页。
+
+**原因**：横向 flex 子项漏写 `min-w-0`，或给 Tabs / 筛选行 / 操作区写了 `w-fit`、`min-w-max`、固定大宽度、`overflow-visible`；也可能把所有筛选项强制塞进一行，未允许 wrap 或内部滚动。
+
+**修复**：
+
+- Tabs：直接使用 `<Tabs />` 默认 `overflow="auto"`；父级补 `min-w-0 max-w-full overflow-hidden`，不要覆写为 `w-fit` / `min-w-max`。
+- 筛选栏：使用 `flex items-center flex-wrap gap-2`；搜索约 240px，筛选控件 160-200px，按钮 `shrink-0`。
+- 表单 / 参数网格：使用 `grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))` 或在窄面板降为单列。
+- 操作按钮组：右侧 action 区 `shrink-0 flex flex-wrap justify-end gap-2`；超过可读宽度时收进更多菜单。
+- 表格 / 代码 / 日志超宽时，只允许对应内容区 `overflow-auto`，禁止把整页撑宽。
+
+---
+
+## 18. 结构容器被误加整卡 hover
+
+**现象**：主工作白卡、设置面板、结果面板、详情侧栏等结构容器 hover 时整块变白、加阴影或浮起，页面像入口卡片列表，工作区层级变乱。
+
+**原因**：AI 把“可点击入口卡”的 hover 反馈套到了结构性工作容器上。
+
+**修复**：
+
+- 只有明确可点击的入口卡、列表项、选项卡片、推荐卡片可以做 hover fill / shadow / lift。
+- 主工作白卡、表单面板、表格容器、代码结果面板、对话区、详情侧栏等结构容器不做整卡 hover。
+- 结构容器内部的按钮、行、tab、选项可以保留各自 hover；反馈只发生在真正可交互的子元素上。
+
+---
+
+## 19. 密集内容用了弱对比或渐变背景
+
+**现象**：表格、表单、日志、代码、JSON、配置项、运行结果放在透明、渐变、浅彩色背景上，文字和边界变虚，扫描效率下降。
+
+**原因**：把 AI 语义面、推荐卡或装饰性背景误用于密集工作内容。
+
+**修复**：
+
+- 表格、表单、日志、配置、代码、结果、长文本编辑器必须使用稳定白底、`Card color="grey"` 或组件指定的代码 / 填充背景。
+- AI 渐变只用于 AI 生成内容、推荐、诊断、洞察、AI 标识；不要用于用户可编辑输入区或普通业务数据区。
+- 需要层级时先用 `FormTitle`、间距、行线、轻填充、组件边界，不要用大面积渐变或透明玻璃制造层级。

package/skills/tfds/DESIGN_PRINCIPLES.md

@@ -66,6 +66,7 @@ TFDS 的密度应当像成熟企业软件：信息多，但不乱。
 - 表格、列表、会话、编辑器应撑满可用空间，而不是堆成窄窄一列
 - 重要说明完整展示；列表预览、文件名、模型 ID 可省略，但必须配 Tooltip 或详情入口
 - 不为了“留白好看”牺牲数据对比效率
+- 默认浏览器缩放下必须可用；不要通过缩小页面、扩大浏览器或隐藏控件来掩盖布局碰撞、横向溢出和底部操作不可达的问题
 
 ### 1.5 智能能力是局部身份信号，不是全局装饰主题
 
@@ -99,6 +100,8 @@ TFDS 不只服务 AI 工作台。AI 渐变只在页面存在明确智能能力
 - 禁止整页多个黑色主按钮并列，主操作必须收敛
 - 禁止把 Tag、Button、Tabs、Card、FormTitle 用 `div/span` 手搓相似样式
 - 禁止用随机 `text-[15px]`、`p-[18px]`、`#333`、`bg-gray-*` 填补审美空白
+- 禁止把结构性工作容器做成可点击卡片效果：主白卡、表单面板、结果面板、对话区、详情侧栏不做整卡 hover 变色、投影或浮起
+- 禁止把密集表格、表单、日志、代码、配置、结果区放在渐变、透明或弱对比背景上
 
 ---
 
@@ -130,6 +133,7 @@ TFDS 的选中、激活、当前态都很克制。
 - 顶部模块选中：可以使用黑色胶囊，形成明确当前模式
 - 状态徽标：使用低饱和浅底 Tag，避免大面积红/绿/橙背景
 - hover 只做轻微底色、描边或阴影变化，不做浮夸动效
+- hover 反馈必须跟随交互对象本身：按钮、行、选项、入口卡可以响应；工作区容器、设置面板、结果面板只提供稳定边界，不因鼠标经过整体变成“可点击卡”
 
 ### 3.4 信息密度高，但阅读路径清楚
 
@@ -139,6 +143,7 @@ TFDS 的选中、激活、当前态都很克制。
 - 核心对象名用 600 字重，描述和时间戳用 muted 色
 - 筛选区靠近内容标题，筛选控件横向排布且固定宽
 - 分页、总数、每页数量固定在列表底部，不漂浮在内容中间
+- Tabs、筛选栏、按钮组、表单网格和工具条必须适配容器宽度；当信息过多时优先局部滚动、换行或收进更多菜单，不能把卡片或页面撑宽
 
 ### 3.5 工作台优先分屏，不堆叠
 

package/skills/tfds/GLOBAL_DESIGN_RULES.md

@@ -308,6 +308,7 @@ B 端主路径的**标题与密集区强调文案**默认以 **600（`--font-sem
 ⛔ **禁止**：`shadow-[0_4px_8px_rgba(0,0,0,0.1)]`、`drop-shadow-2xl`。
 ✅ **只有浮层**（dropdown / dialog / popover / picker）才能加阴影，且由组件自带。
 ✅ **业务语义投影**（如 `shadow-card`、`shadow-list`）只在设计系统已命名的明确场景中使用，不能把任意业务块都升级成新的 shadow primitive。
+✅ **hover 投影仅限可点击对象**：入口卡、列表项、选项卡片、推荐卡片可使用组件约定的 hover 反馈；主工作白卡、表单面板、结果面板、对话区、详情侧栏等结构容器不做整卡 hover、投影或浮起。
 
 
 | ❌ Bad                                                   | ✅ Good           |
@@ -367,6 +368,25 @@ B 端主路径的**标题与密集区强调文案**默认以 **600（`--font-sem
 
 判别口诀：背景色是 `--color-blueGrey-200`（灰）就允许有 border；背景色是 `--color-surface`（白）就**禁止**有 border。
 
+### 5.5.5 分隔线使用纪律
+
+分隔线只用于表达真实结构边界，不能作为“让页面看起来更细”的装饰。
+
+✅ **允许**：
+
+- 表格表头 / 表格行线
+- Modal / Sheet / Drawer 的 header / footer 边界
+- 工具条与可滚动正文之间的边界
+- Split pane / 可拖拽分栏边界
+- 白卡内部不同功能区之间的少量 `borderTop` / `borderBottom`
+
+⛔ **禁止**：
+
+- 每个 Card header 都习惯性加一条线
+- 用分隔线替代间距和 FormTitle 层级
+- 在白卡外边界再套一圈 border / ring
+- 为了“精致感”给普通说明区、KPI 块、入口卡片反复加横线
+
 ---
 
 ## 6. 过渡 / 动效规则
@@ -550,6 +570,17 @@ Tabs 是“切换视图”的控件，不是动作按钮；它在内容区需要
 
 ---
 
+## 10.5 密集内容背景规则
+
+表格、表单、日志、配置、代码、运行结果、长文本编辑器属于“工作内容”，首要目标是扫描和编辑效率。
+
+- ✅ 使用稳定白底、`Card color="grey"`、TextArea code variant 或组件自身指定的填充背景。
+- ✅ 需要层级时优先使用 `FormTitle`、间距、表格行线、输入框描边、轻填充，不用装饰背景制造层级。
+- ⛔ 禁止把密集内容放在 AI 渐变、透明玻璃、浅彩色装饰、低对比图片或弱对比背景上。
+- ⛔ 禁止让密集内容区整卡 hover 浮起；只允许行、按钮、选项、tab 等真实交互对象响应 hover。
+
+---
+
 ## 11. 链接（文本品牌色）规则
 
 - ⛔ **禁止**裸 `<a className="text-blue-600 hover:underline" />`

package/skills/tfds/LAYOUT_RULES.md

@@ -35,6 +35,20 @@ TFDS 是**桌面优先**的 B 端工具产品，响应式策略和 C 端不同
 ⛔ **禁止**给 B 端页加 `@media (max-width: 480px)` 的移动端样式（除非用户明确要求）。
 ✅ B 端首要任务是**桌面宽屏可用**，不是 mobile-first。
 
+### 0.1 桌面视口验收点（交付前必查）
+
+生成页面至少按以下桌面尺寸做布局自检，不能只看一个大屏截图：
+
+| 视口 | 必查项 |
+| --- | --- |
+| `1920 × 900` | 页面不被过度居中或收窄；白卡、表格、主工作区充分利用宽度 |
+| `1440 × 900` | 主工作流完整；右侧面板不挤压主区到不可读宽度 |
+| `1280 × 768` | 筛选栏、Tabs、按钮组、表格工具条不溢出；底部操作 / 输入区可达 |
+| `1024 × 768` | 次要侧栏允许折叠 / 收窄 / 内滚；主内容仍可完成核心任务 |
+
+⛔ **禁止**通过浏览器缩放、隐藏关键控件或让 body 横向滚动来掩盖布局问题。
+✅ 横向超宽内容只能在对应组件 / 面板内部滚动，例如 Table、代码区、Tabs viewport、InfoDisplayPanel 栏内内容。
+
 ---
 
 ## 0.5 滚动模型决策树（生成页面**前**必判）
@@ -101,6 +115,7 @@ prompt editor / prompt workspace / runtime / run result /
 | 表格不撑满、下方空白或撑到很高             | 表格外层缺 `flex-1 min-h-0`（没给高度边界）               | §4.1 表格滚动骨架（表格层内部滚）                | `VariableManagementPage`                     |
 | 卡片内容溢出把整页撑开                 | 卡片正文层没写 `flex-1 min-h-0` 或滚动没下沉              | §3.4 / §3.5（标题固定，正文承担滚动）           | `CreateQAContent`（BasePageFramePattern 内）    |
 | 组件基线不齐（标题、筛选、表格上沿对不齐）       | 乱用 margin/padding；没有“外框/白卡/白卡内容”三层节奏         | 统一按：外框 `p-4`、白卡间 `gap-2`、白卡内 `p-6` | `pageListShared.jsx`（节奏参考）                   |
+| Tabs / 筛选栏 / 按钮组撑破卡片或页面 | 横向 flex 漏 `min-w-0`；Tabs 或父级被写成 `w-fit` / `min-w-max` / 固定大宽度 | Tabs 保持默认内部横向滚动；父级 `min-w-0 max-w-full overflow-hidden`；筛选和操作区允许 wrap / 更多菜单 | `Tabs` 组件规则 + `pageListShared.jsx` |
 
 
 > ⚠️ 说明：样例文件里可能存在“为了 demo 嵌入 NavBar 框架而写的局部 margin/padding”。**你在生成新页面时，不要复制这些零散 margin**；只复制“骨架关系”（`flex-1 / min-h-0 / min-w-0 / overflow-`*）与“三层间距金字塔”的层级节奏。
@@ -320,7 +335,7 @@ prompt editor / prompt workspace / runtime / run result /
 
 ### 1.5.5 AI 入口页（ChatHomePagePattern）背景与白卡边界（强约束）
 
-AI 入口页的核心是「**从 0 发起任务**」：用户第一步是输入一句需求 / 搜索助手 / 从模板开始。它的视觉应该是**浅灰大背景承载整页氛围**，并在灰底上直接组织 Hero、筛选行与卡片网格。  
+AI 入口页的核心是「**从 0 发起任务**」：用户第一步是输入一句需求 / 搜索助手 / 从模板开始。它的视觉应该是**浅灰大背景承载整页氛围**，并在灰底上直接组织 Hero、筛选行与卡片网格。
 ⚠️ 这里最常见的误用是：为了“看起来更像后台”，在右侧内容区外又包了一整张白色大卡片容器，导致页面层级变成“灰底 → 大白卡 → 卡片”，整体像嵌套面板，入口页气质被破坏。
 
 - ✅ **正确**：灰底为主，白卡只出现在**推荐卡片本身**（`<Card color="white" />`）
@@ -837,6 +852,17 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 
 > ⚠️ 自检：如果你看到 `Input` 出现在白卡正文里但没有 `w-full`（或没有明确 `width`），先按本节修复；不要用 margin/justify 去“摆正”，那只是掩盖问题。
 
+### 6.4 横向控件组防溢出（Tabs / 筛选 / 操作区）
+
+横向控件组的目标是“保持同一行流内可用”，不是“强行把所有内容完整铺开”。当空间不足时，优先局部滚动、自然换行或收进更多菜单，禁止撑破白卡或整页。
+
+| 场景 | 正确策略 | 禁止写法 |
+| --- | --- | --- |
+| Tabs / segment | 保持 `<Tabs />` 默认 `overflow="auto"`；父级 `min-w-0 max-w-full overflow-hidden` | `w-fit` / `min-w-max` / `overflow-visible` / 固定大宽 |
+| 筛选栏 | `flex items-center flex-wrap gap-2`；搜索约 240px，筛选控件 160-200px | `flex-nowrap` 强塞一行、每个控件 `w-full`、筛选行 `overflow-hidden` 裁切 |
+| Header 操作区 | `shrink-0 flex flex-wrap justify-end gap-2`；超过 3-4 个动作时收进更多菜单 | 所有按钮固定一行并挤压标题 / Tabs |
+| 表单参数网格 | `auto-fit + minmax(min(100%, 240px), 1fr)`，窄面板降单列 | 两列固定宽导致标签与控件重叠 |
+
 ### 6.2 例外：表单页可局部收窄
 
 表单页/详情页**主标题区**可以**局部**加 `max-w-[1280px] mx-auto` 防止单行表单过长难读：
@@ -943,6 +969,8 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 | 弹窗被裁              | 高度超出视口看不到底部                                     | 弹窗加 `max-height: 80vh + overflow-y-auto`                                                                                                       |
 | 文字溢出              | 长字符把容器撑爆                                        | 文本节点加 `truncate` 或 `break-words`，父容器加 `min-w-0`                                                                                                |
 | 白叠白               | 白卡里直接放白 Card                                    | 内层 Card 改 `color="grey"`                                                                                                                       |
+| Tabs / 筛选栏 / 按钮组溢出 | 控件超出卡片右边界或把页面撑出横向滚动 | Tabs 保持默认 `overflow="auto"`；父级补 `min-w-0 max-w-full overflow-hidden`；筛选和操作区允许 wrap，超出动作收进更多菜单 |
+| 密集内容弱对比 | 表格 / 表单 / 代码 / 日志放在渐变或透明背景上，文字发虚 | 改回稳定白底、组件指定代码背景或灰底 Card；AI 渐变只用于 AI 语义内容，不用于编辑和数据密集区 |
 | 整页有外圈圆角           | 灰底没贴浏览器边                                        | 移除根容器 `rounded` 与 `border`                                                                                                                     |
 | Playground 多面板整页滚 | 调参数得滚下去看结果 / 写 prompt 得滚回去看输入                   | 按 § 3.4 / § 12.7 改造：根容器 `h-dvh + overflow-hidden`、main `overflow-hidden`、面板正文 `flex-1 min-h-0 overflow-y-auto`                                 |
 | 子面板互相挤压（A 撑死 B）   | 上下两块卡片其中一块完全看不见 / 高度不对                          | 父 `flex-col gap-2`；定高块 `shrink-0`，弹性块 `flex-1 min-h-0` + 内部 `overflow-y-auto`                                                                  |
@@ -1057,6 +1085,9 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 - ✅ 正确：外层用 **flex 两栏**，左栏 `shrink-0`，右栏 `flex-1 min-w-0`
 - ⛔ 禁止：把左栏写成固定宽度网格列（如 `grid-cols-[400px_1fr]`）或外层固定 `w-[400px]`，否则会出现“内容缩了但列不缩”的大空白，右侧无法自适应扩展
 - ✅ 若必须用 grid：左列必须是 `auto`（`grid-cols-[auto_1fr]`）
+- ✅ 当 `ConversationList variant="card"` 作为客服工作台左侧卡片列表时，卡片消息区是右侧 `IMConversationPattern` 完整气泡流的缩小窗口：若右侧有 20 条可展示气泡，左侧卡片必须通过固定高度 + `overflow-y-auto` 内滚查看同一批 20 条气泡
+- ⛔ 禁止把左侧卡片消息流当摘要：不要 `.slice()` 只取最后几条、不要只展示最近 3-4 条、不要改写成营销摘要或状态总结；左侧每条气泡的文案、角色和气泡颜色语义必须与右侧 IM 一一对应
+- ✅ 角色/颜色映射必须保持同源：`user` → 左灰 / `incomingTone="grey"`，`bot` → AI 渐变 / `outgoingTone="ai"`，`agent` → 人工客服浅青 / `outgoingTone="default"`；左侧允许隐藏 `system` 提示、头像、时间或降低字号，但不允许减少气泡消息条数
 
 推荐骨架（直接照抄）：
 

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-13T05:01:47.099Z",
+  "generatedAt": "2026-05-13T13:51:39.617Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
@@ -1073,7 +1073,7 @@
         "【类型】type=data 为数据卡片；type=product 为商品卡片 / 业务对象卡；type=info 为信息卡片1，用于展示带图标、主副标题和底部辅助信息的业务信息对象；type=info2 为信息卡片2，用于 AI 能力、推荐工具、重点入口等静态信息入口场景。type=animated 仅作为旧版兼容别名，生成新页面时不要使用。",
         "【分类决策表】选择 Card 类型时按业务对象优先级判断：1. 如果内容是指标摘要、趋势解读、工具入口、模板入口、脚本/话术/SOP/案例入口，使用 `type=\"data\"`；2. 如果内容是具体商品、订单、门店、素材、工单附件、查询结果等可识别业务对象，使用 `type=\"product\"`；3. 如果内容是智能体、知识库、应用、服务、官方能力等需要表达“身份 + 说明 + 辅助指标”的对象，使用 `type=\"info\"`（信息卡片1）；4. 如果内容是 AI 推荐、重点能力、首页推荐、配置向导、单步启动入口，且需要更强入口感，使用 `type=\"info2\"`。当同一内容同时满足多个条件时，优先级为 product（具体对象）> info（身份对象）> info2（推荐入口）> data（摘要入口）。",
         "【分类 Bad Case】禁止用 `type=\"data\"` 承载具体商品/订单对象；禁止用 `type=\"product\"` 展示纯指标趋势或工具入口；禁止用 `type=\"info\"` 只做强推荐按钮或首页营销入口；禁止用 `type=\"info2\"` 承载商品/订单/复杂详情或列表型内容。AI 生成页面时，必须先判断内容语义，再选择卡片分类，不要仅根据是否有图标、是否有标签或视觉喜好选择类型。",
-        "【数据卡片适用场景】数据卡片不仅适用于指标摘要、趋势分析、服务能力入口和工具入口，也适用于模板、脚本、案例类内容入口，例如优秀知识模版、优秀案例模版、脚本模版、话术模版、内容生成模版、服务 SOP 模版等。此类内容仍使用数据卡片的摘要入口结构：标题 + 描述 + 可选指标/元信息 + 标签 + 右侧进入箭头；如果需要突出缩略图/封面图或具体商品、订单、附件对象，应改用商品卡片；如果需要强调 AI 能力、智能体、知识库或应用服务身份，应优先使用信息卡片1。",
+        "【数据卡片适用场景】数据卡片不仅适用于指标摘要、趋势分析、服务能力入口和工具入口，也适用于模板、脚本、案例类内容入口，例如优秀知识模版、优秀案例模版、脚本模版、话术模版、内容生成模版、服务 SOP 模版等。此类内容仍使用数据卡片的摘要入口结构：标题 + 描述 + 可选指标/元信息 + 标签 + 右侧进入提示箭头；如果需要突出缩略图/封面图或具体商品、订单、附件对象，应改用商品卡片；如果需要强调 AI 能力、智能体、知识库或应用服务身份，应优先使用信息卡片1。",
         "【数据卡片结构】上半区固定为标题 + 描述 + 1-3 项指标，下半区为左下角标签 + 右侧单步进入按钮。数据卡片支持可选右侧图标：默认 `dataIconVisible=\"hidden\"` 不显示图标；需要图标时设置 `dataIconVisible=\"visible\"` 并传入 `dataIconName`，标题/描述/指标区域居左，图标容器 48×48px、圆角必须使用 rounded-xl token（16px），仅显示在数据卡片右上角并与文字区域顶部对齐，图标与左侧标题内容区左右间距必须等于数据卡片四周 padding，即 p-5 / 20px。图标样式复用信息卡片1同名容器逻辑：`dataIconStyle=\"inverse\"` 为黑底白 icon（默认），`dataIconStyle=\"tone\"` 为彩色浅底；色系通过 `dataIconTone` 选取。",
         "【数据卡片数据项】数据卡片的指标数据通过 `stats` 动态配置，用于按场景展示摘要维度，例如触达用户、会话量、收藏量、转化率、完成率、运行次数、更新时间、异常数量等。数据结构固定为 `{ iconName, value, tooltip? }`，其中 iconName 必须复用 Icon，value 为短数字或短文字，tooltip 用于 hover/focus 展示该数据项的详细说明。最多展示 3 组，超出运行时自动截断；每组样式固定为 14px 图标 + 12px / 400 文案，项间距 20px。Tooltip 只做补充解释，不承载核心操作路径。",
         "【信息卡片1结构】信息卡片1支持两种布局：`infoLayout=\"icon-right\"` 为默认布局，即“图标在右”；左侧承载标题/副标题/底部辅助信息，图标整体放在最右侧，状态徽标紧跟主标题右侧。`infoLayout=\"default\"` 即“图标在左”；左侧固定 48px 图标容器，右侧上半区为主标题 + 副标题 + 右上角状态徽标，底部为辅助显示区。信息卡片1图标与标题内容区左右间距必须等于信息卡片1四周 padding，即 p-6 / 24px。信息卡片1适合内容对象、智能体、知识库、应用、服务入口等需要“图标 + 长说明 + 关键辅助信息”的场景。",
@@ -1090,9 +1090,12 @@
         "【商品文案】标题最多 1 行，字号统一为 text-base / 16px / 600，优先放用户识别对象所需的名称 / 订单号 / 关键标识；副标题最多 1 行，用于展示数量、价格、规格、订单金额、下单时间、售后进度等辅助信息；不要把长说明、操作指引或多段备注塞入副标题",
         "【信息卡片1底部数据项】右下角数据项通过 `infoStats` 动态配置，用于按场景展示该信息对象的关键辅助数据，例如启用量、评分、调用量、响应率、转化率、更新时间、风险数量、操作入口等。数据结构固定为 `{ iconName, value, tooltip? }`，其中 iconName 必须复用 Icon，value 为短数字或短文字，tooltip 用于 hover/focus 展示该数据项的详细说明。最多展示 3 组，超出运行时自动截断；每组样式固定为 14px 图标 + 12px / 400 文案，项间距 20px，必须与底部身份区保持 16px 行高内垂直居中。",
         "【信息卡片1文案】默认文案按抖音官方 AI 能力模拟，标题为“抖音 AI 创作助手”，副标题说明短视频脚本、标题推荐、封面文案和热点灵感生成能力。标题建议 1 行，字号统一为 text-base / 16px / 600；副标题建议 2 行内，字号 12px / 400，不要堆叠多段正文。默认底部数据项使用“启用量 / 评分 / 成功率”，并通过 Tooltip 解释每组数据含义；底部整栏所有头像、图标、文字必须保持 16px 行高内垂直居中并对齐到同一行。信息卡片1右下角数据项应优先展示真实数据维度，不默认展示“立即体验”这类操作文案；单步进入操作应使用信息卡片2或页面内独立按钮。",
-        "【信息卡片2】info2 不是通用卡片替代品，只用于需要突出推荐、智能能力、配置向导、重点工具入口的静态信息入口。结构为左上图标 + 标题/描述 + 左下角徽标 + 右下角圆形箭头操作入口；默认标题“智能策略生成”、默认图标色系 grey、徽标“AI 推荐”、操作文案“立即体验”。",
+        "【整卡点击（强约束）】所有 Card 分类只要传入 `onAction`（表示存在详情页 / 二级页 / 深入工作页），默认整张卡片区域都必须可点击进入，并支持鼠标点击与 `Enter / Space` 键盘触发；不要把查看交互只缩成右下角一个小箭头热区。数据卡片和信息卡片2可保留右下角圆形箭头作为“进入提示”，但箭头只做辅助热区，点击后与整卡复用同一回调。若卡片内未来存在独立按钮、更多菜单或 Tag 操作，子交互需阻止冒泡，避免误触整卡跳转。",
+        "【onAction 语义】`onAction` 不是“箭头按钮专属回调”，而是 Card 的统一详情跳转能力。data / product / info / info2 四类卡片都可以传 `onAction`；传入后整卡即视为可进入对象，`actionAriaLabel` 同时作为整卡和辅助箭头按钮的无障碍文案。",
+        "【数据卡片适用场景】数据卡片不仅适用于指标摘要、趋势分析、服务能力入口和工具入口，也适用于模板、脚本、案例类内容入口，例如优秀知识模版、优秀案例模版、脚本模版、话术模版、内容生成模版、服务 SOP 模版等。此类内容仍使用数据卡片的摘要入口结构：标题 + 描述 + 可选指标/元信息 + 标签 + 右侧进入提示箭头；如果需要突出缩略图/封面图或具体商品、订单、附件对象，应改用商品卡片；如果需要强调 AI 能力、智能体、知识库或应用服务身份，应优先使用信息卡片1。",
+        "【信息卡片2】info2 不是通用卡片替代品，只用于需要突出推荐、智能能力、配置向导、重点工具入口的静态信息入口。结构为左上图标 + 标题/描述 + 左下角徽标 + 右下角圆形箭头提示入口；默认标题“智能策略生成”、默认图标色系 grey、徽标“AI 推荐”、操作文案“立即体验”。",
         "【信息卡片2标签】info2 的 animatedBadge 固定展示在左下角，必须与标题左边界对齐，并与右下角圆形箭头操作按钮保持同一行垂直居中。标签默认一律使用 Tag variant=\"white\" + fontWeight=\"regular\"，不跟随 animatedTone，禁止把标签放到右上角。",
-        "【信息卡片2操作】右下角操作入口必须复用数据卡片同款圆形箭头按钮样式和交互：28×28px、圆形、默认透明描边 + text-tertiary 图标，卡片 hover 或按钮 hover 时变为黑色描边与黑色箭头，按下 active:scale-[0.96]。animatedActionText 只作为操作语义文案，不直接渲染为文字按钮。",
+        "【信息卡片2操作】右下角操作入口必须复用数据卡片同款圆形箭头按钮样式和交互：28×28px、圆形、默认透明描边 + text-tertiary 图标，卡片 hover 或按钮 hover 时变为黑色描边与黑色箭头，按下 active:scale-[0.96]。animatedActionText 只作为操作语义文案，不直接渲染为文字按钮。只要传了 `onAction`，默认整张 info2 卡片和右下角箭头都能进入同一个详情目标。",
         "【信息卡片2视觉】info2 不包含柔光、流动光带或特殊 hover 位移；背景颜色、边框颜色和 hover 投影完全复用普通 Card 的 color=white / grey 规则。animatedTone 只影响左上图标容器色系，不影响卡片背景、边框和底部标签。",
         "【信息卡片2图标 Hover】卡片 hover 时，左上图标容器必须自动切换为当前 animatedTone 对应的 hover 背景、纯白 icon、透明描边：brand→brand-500、blue→blue-500、purple→purple-500、green→green-500、orange→orange-500、grey→black。禁止 hover 后继续显示浅底、深色 icon 或描边色。",
         "【颜色】color=white 使用 65% 白底 + 白色描边；color=grey 使用 Blue Grey 100 背景 + Blue Grey 300 描边",
@@ -1102,7 +1105,7 @@
         "【状态】白底卡默认态使用 65% 白底 + 轻白描边；hover 后补满白底并出现业务卡片专用投影；灰底卡保持灰底与灰描边并保留投影反馈",
         "【指标】指标项推荐控制在 3 项以内，图标 14px、文字 12px，项间距 20px",
         "【标签】通用 tags 只用于数据卡片，展示在左下角并与右侧操作按钮水平对齐；商品卡片和信息卡片1禁止渲染通用 tags，主标题左侧不得出现“标签”等前缀标签，运行时会隐藏误注入的 white Tag。Card 内所有标签默认必须使用圆角矩形样式 `radius=\"md\"`，不使用全圆胶囊 `radius=\"full\"`；数据卡片、商品状态标签、信息卡片1徽标都遵守该规则。数据卡片不论是否展示图标、也不论 dataIconStyle 为 tone 或 inverse，默认标签都必须统一使用 grey 标签样式。商品状态标签和信息卡片1徽标仅可展示在右上角并与标题水平对齐。信息卡片1徽标与 infoIconStyle 联动：`tone` 时一律 grey，`inverse` 时默认彩色 purple；卡片彩色标签优先使用 purple（紫色）/ teal（青绿色）/ blue（蓝色）/ cyan（青色）/ orange（橙色），避免优先使用 pink、red、yellow 等过强警示或装饰色。商品状态标签复用 green + l + md；不显示图标和关闭按钮，建议使用 2-4 字短标签。",
-        "【操作】数据卡片右侧箭头按钮只承载进入 / 查看详情等单步操作，aria-label 需说明目标；商品卡片不使用箭头按钮",
+        "【操作】当 `onAction` 存在时，整张 Card 是主进入热区；数据卡片 / 信息卡片2 的右侧圆形箭头只承载同一个进入动作的视觉提示，aria-label 需说明目标；商品卡片和信息卡片1不额外渲染箭头按钮，但仍应支持整卡点击查看。",
         "【信息卡片1语义映射】AI / 智能能力推荐使用 magic-wand-01-stroked + pink 或 brand；数据洞察可用 bar-chart / line-chart 类图标 + blue；任务自动化可用 zap / settings 类图标 + orange；安全、审核、风控可用 shield / alert 类图标 + red 或 orange；知识库、文档、客服可用 book / message 类图标 + green 或 blue。色系只表达类别和状态，不用于装饰。",
         "【文案长度】数据卡片标题优先控制在 1 行内，描述建议 2 行内；商品卡片标题和副标题均为 1 行截断，避免状态标签被挤压或换行；信息卡片1标题 1 行、副标题 2 行，底部辅助区允许换行但不得撑破卡片宽度。"
       ],
@@ -1151,6 +1154,14 @@
           "label": "信息卡片2（报告入口）",
           "code": "<Card type=\"info2\" animatedTone=\"purple\" title=\"自动生成报告\" description=\"汇总核心指标、异常归因和建议动作，生成可直接复用的业务报告。\" animatedBadge=\"Beta\" animatedActionText=\"开始生成\" onAction={() => {}} />"
         },
+        {
+          "label": "商品卡片整卡点击",
+          "code": "<Card type=\"product\" title=\"订单 202604300018\" description=\"共 3 件 · 实付 ¥268.00 · 退款中\" productStatus=\"退款中\" actionAriaLabel=\"查看订单详情\" onAction={() => {}} />"
+        },
+        {
+          "label": "信息卡片1整卡点击",
+          "code": "<Card type=\"info\" infoIconName=\"magic-wand-01-stroked\" title=\"抖音 AI 创作助手\" description=\"抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成。\" infoMetaBadge=\"官方能力\" actionAriaLabel=\"查看创作助手详情\" onAction={() => {}} />"
+        },
         {
           "label": "自定义标题",
           "code": "<Card title=\"重点客户满意度追踪\" description=\"汇总近 7 天满意度变化、问题归因和渠道分布，并给出跟进建议。\" onAction={() => {}} />"
@@ -1203,6 +1214,10 @@
           "label": "✅ Good（推荐入口用信息卡片2）",
           "code": "<Card type=\"info2\" title=\"智能策略生成\" description=\"基于业务目标、历史数据和运营规则，自动生成可执行策略建议。\" animatedBadge=\"AI 推荐\" animatedActionText=\"立即体验\" onAction={() => {}} />"
         },
+        {
+          "label": "❌ Bad（有详情页却只让小箭头可点）",
+          "code": "/* 禁止！传了 onAction 的 Card 默认整卡都应可点，不要在外层再手动禁用主热区或只保留右下角小按钮 */\n<Card type=\"info2\" onAction={() => {}} className=\"pointer-events-auto\" />"
+        },
         {
           "label": "❌ Bad（用信息卡片2承载商品对象）",
           "code": "/* 禁止！商品对象需要图片/状态/关键识别信息，不应用推荐入口卡承载 */\n<Card type=\"info2\" title=\"海底捞门店通用双人套餐\" description=\"数量 1 · ¥128.00 · 月售 2,361\" animatedBadge=\"已使用\" />"
@@ -2832,6 +2847,15 @@
           "name": "onChange",
           "type": "function",
           "default": null
+        },
+        {
+          "name": "overflow",
+          "type": "enum",
+          "options": [
+            "auto",
+            "visible"
+          ],
+          "default": "auto"
         }
       ],
       "rules": [
@@ -2841,6 +2865,8 @@
         "【尺寸默认铁律·最新】所有 4 种 Tabs 变体（line / button / pill / segment）在内容展示区、白卡内、卡片内、表单分段、筛选维度、Playground 面板内切换时，**默认尺寸统一为 `size=\"sm\"`**。AI 生成页面时可以省略 size（组件默认即 SM），或显式写 `size=\"sm\"`；⛔ 禁止在内容区默认写 `size=\"md\"` / `size=\"lg\"`。",
         "【尺寸例外】只有 Tabs 位于**整个平台顶部 header / 页面级顶导 / 产品级一级导航**时，才允许根据场景使用 `size=\"md\"` 或 `size=\"lg\"`：例如页面级 Pill Tabs、平台顶部模块切换、顶部导航胶囊。只要 Tabs 在白卡、面板、内容区、表单区、筛选区内，就回到 SM。",
         "【分段器 = segment 变体】设计稿「分段器」对应代码 **`variant=\"segment\"`**（灰底轨道 + 白底选中块），与 `Tag` 无关。① **卡片内**小模块、指标维度、白/灰卡内并列区块切换 → **默认优先** `variant=\"segment\" size=\"sm\"`。② **页面主内容区顶部**、整块**布局级**主视图切换（并排等大内容区，如「列表/看板/日历」并列）→ **默认优先** `variant=\"segment\" size=\"sm\"`，除非它是页面级顶部 header 导航。",
+        "【防溢出铁律】Tabs 默认 `overflow=\"auto\"`，根节点内置 `max-w-full min-w-0 overflow-x-auto`，内层按 `w-max` 保持单行内容宽度；当 tab 总宽度超过卡片 / 侧栏 / 面板宽度时，必须在组件内部横向滚动，禁止把父容器、白卡或页面撑宽。AI 生成页面时不要给 Tabs 或父级写 `w-fit`、`min-w-max`、固定大宽度、`overflow-visible` 来强行展示全部 tab。",
+        "【父容器适配】Tabs 所在的横向 flex 区、白卡 header、侧栏卡片、抽屉面板内必须允许收缩：父级建议 `min-w-0 max-w-full overflow-hidden`，标题区与操作区并排时，Tabs 容器放在 `min-w-0 flex-1` 或 `max-w-full` 区域内。禁止让 Tabs 与标题互相挤压导致标题竖排、页面横向滚动或卡片越界。",
         "【其它 variant 自判】详情子页签、面板内横向主导航感 → `line`；内容区内强调「块状」分类 → `button`；顶导/浮层/工具条胶囊规格 → `pill`；表单分段、筛选维度、与上两类「分段器优先」场景之外的 2～6 项切换 → 可用 `segment` 或按视觉在 `line`/`button` 间选择。",
         "【选型·与 Button】Tabs 的每一项是「切换可见内容」；Button 是「执行操作」。同一组互斥展示若无需下划线/胶囊视觉，且只有 2 个选项，可用 Radio horizontal，但「多面板」仍优先 Tabs",
         "【选型·与 Select】2～6 个面板级分区用 Tabs；单个字段在表单里从 10+ 枚举中选一个值 → Select，不要把每个枚举值做成 Tab",
@@ -2850,9 +2876,9 @@
         "【内描边】pill 容器的白色描边为内描边（ring-inset / box-shadow inset），不占布局空间，所以容器实际高度 = padding × 2 + 选项高度。若手写胶囊，描边必须用 ring-inset 或 box-shadow inset，不能用 border，否则会撑高 2px",
         "【表单/筛选器】segment（分段器）用于表单切换、筛选条件等场景，灰色容器 + 白色选中块",
         "【悬浮反馈】button、pill、segment 三种变体的非选中项悬浮均使用语义填充色（fill-default）",
-        "【标签数量】建议 2-6 个标签，超过时考虑可折叠或下拉",
-        "【文字长度】标签文字推荐 2-4 个汉字，保持简洁",
-        "【无障碍】每个标签使用 role=\"tab\"，容器使用 role=\"tablist\"，选中态用 aria-selected"
+        "【标签数量】建议 2-6 个标签；2-6 个但容器较窄时保持单行横向滚动，不允许溢出；超过 6 个或标签会动态增长时，优先改用 Select / Filter / 更多菜单，不要继续横排堆满 Tabs。",
+        "【文字长度】标签文字推荐 2-4 个汉字，保持简洁；业务必须展示长标签时保持 `whitespace-nowrap` 并依赖横向滚动，不要逐字换行或压缩字间距。",
+        "【无障碍】每个标签使用 role=\"tab\"，容器使用 role=\"tablist\"，选中态用 aria-selected；组件支持 ArrowLeft / ArrowRight / Home / End 键盘切换。"
       ],
       "examples": [
         {
@@ -2883,6 +2909,10 @@
           "label": "主区顶部分段器（布局切换，默认 SM）",
           "code": "<Tabs variant=\"segment\" items={[{label:\"列表\"},{label:\"看板\"},{label:\"日历\"}]} />"
         },
+        {
+          "label": "窄卡片内自动滚动",
+          "code": "<div className=\"min-w-0 max-w-full overflow-hidden\"><Tabs variant=\"segment\" items={[{label:\"全部\"},{label:\"通用\"},{label:\"社区\"},{label:\"电商\"},{label:\"生服\"},{label:\"直播\"}]} /></div>"
+        },
         {
           "label": "内容区显式 SM",
           "code": "<Tabs variant=\"line\" size=\"sm\" items={[{label:\"Tab1\"},{label:\"Tab2\"}]} />"
@@ -2914,6 +2944,10 @@
         {
           "label": "❌ Bad（用 Tag 当面板切换）",
           "code": "/* 禁止！Tag 是状态/分类标签，不承担面板切换；切换面板必须 Tabs */\n<div className=\"flex gap-2\"><Tag variant=\"brand\">Input</Tag><Tag variant=\"grey\">Output</Tag></div>"
+        },
+        {
+          "label": "❌ Bad（Tabs 撑破窄容器）",
+          "code": "/* 禁止！w-fit/min-w-max 会把卡片撑破；保持默认 overflow=\"auto\" 即可 */\n<Tabs className=\"w-fit min-w-max\" variant=\"segment\" items={categoryTabs} />"
         }
       ],
       "keywords": [
@@ -7147,8 +7181,9 @@
         "【可见圆角】最终可见的 6 个角统一为 16px：左侧板块左上 / 左下两个角露出；右侧主白卡四角露出；左侧板块右上 / 右下两个角必须被右侧主白卡完整覆盖。主面板覆盖量必须大于圆角半径（推荐 32px = 2 × 16px），防止主面板左上 / 左下圆角切角处露出左侧板块的右边界或描边，避免出现“残缺一块”的视觉。",
         "【框架级能力不可删减】当 AI 生成页面使用客服工作台框架时，必须完整保留框架级交互能力：左侧列表 / 卡片容器宽度拖拽、左侧与右侧主白卡之间的覆盖式拖拽、右侧 InfoDisplayPanel 整体宽度拖拽、InfoDisplayPanel 内部栏间拖拽、响应式最小宽度保护、自动折叠、动态分栏和上下文同步。禁止只复刻截图外观却删除拖拽条、键盘微调、宽度下限、自动适配或 tab 拆分逻辑。",
         "【左右拖拽】左侧区域与右侧主白卡之间必须提供纵向拖拽热区，默认热区 8px；拖拽热区覆盖在主面板左边缘上，不占用布局宽度、不制造中间空隙；拖动时调整左侧区域宽度并让右侧主面板 `flex-1 min-w-0` 自动占满剩余空间；左侧默认宽度 432px（400px 可视会话列表 + 32px 主面板覆盖区）；拖拽最小宽度优先由左侧业务组件最小可用宽度决定，例如 ConversationList 默认列表纯头像锁定 88px 时，左侧板块最小宽度为 `max(100px 框架兜底, 88px + 32px 覆盖区) = 120px`；ConversationList 卡片列表最小内容宽度为 333px，左侧板块最小宽度为 365px；右侧纯白主容器最小宽度 380px，左侧最大可拖宽度需按 `工作区宽度 + 32px 覆盖量 - 380px` 动态计算；拖拽条需支持键盘左右方向键微调。",
-        "【左侧插槽】左侧半透明容器默认承载平台业务组件 `ConversationList`，用于会话 / 工单 / 托管队列切换；左侧内容区必须扣除右侧 32px 覆盖安全区，避免被主白卡裁切；`ConversationList` 展开态四周内容间距固定 16px。嵌入时 `ConversationList` 必须设置 `resizable={false}`、保留 `collapsible` 与 `autoCollapseOnNarrow`、`style={{ width: \"100%\", height: \"100%\" }}`，并在外层框架接入 `onLayoutWidthRequest` 与 `onVariantChange`：默认列表传 `leftContentMinWidth={88}`，卡片列表切换为 `leftContentMinWidth={333}`。框架统一管理宽度拖拽，但拖拽下限跟随子组件能力；点击会话列表左上角收起按钮时，外层左侧半透明容器必须同步吸附缩窄到 120px，不允许只把 ConversationList 缩到头像列而外层仍保留大片空白。",
-        "【左侧选中项 = 右侧上下文源】客服工作台框架内左侧 `ConversationList` 默认必须存在一个当前选中项；它不是单纯的导航高亮，而是整个右侧主白卡的上下文源。切换左侧会话 / 工单 / 托管项时，右侧纯白容器里的 IM 对话区和 InfoDisplayPanel 信息区都必须同步切换到同一个当前处理对象，禁止出现“左侧已切到 B 会话，但右侧聊天仍是 A、信息区还是 C”的上下文错位。预览实现必须以 `activeConversationId` 作为单一事实源：左侧列表头像、标题、单号与右侧 IM Header 的头像、标题、会话 ID、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。",
+        "【左侧插槽】左侧半透明容器默认承载平台业务组件 `ConversationList`，用于会话 / 工单 / 托管队列切换；左侧内容区必须扣除右侧 32px 覆盖安全区，避免被主白卡裁切；`ConversationList` 展开态四周内容间距固定 16px。嵌入时 `ConversationList` 必须设置 `resizable={false}`、保留 `collapsible` 与 `autoCollapseOnNarrow`、`style={{ width: \"100%\", height: \"100%\" }}`，并在外层框架接入 `onLayoutWidthRequest` 与 `onVariantChange`：默认列表传 `leftContentMinWidth={88}`，卡片列表切换为 `leftContentMinWidth={333}`。框架统一管理宽度拖拽，但拖拽下限跟随子组件能力；点击会话列表左上角收起按钮时，外层左侧半透明容器必须同步吸附缩窄到 120px，不允许只把 ConversationList 缩到头像列而外层仍保留大片空白。收起后的纯头像列表项高度必须固定为 68px，包含 `h-[68px] min-h-[68px] shrink-0` 级别约束；选中态头像胶囊也不得被父级 flex 均分或可用高度不足压扁。",
+        "【左侧选中项 = 右侧上下文源】客服工作台框架内左侧 `ConversationList` 默认必须存在一个当前选中项；它不是单纯的导航高亮，而是整个右侧主白卡的上下文源。切换左侧会话 / 工单 / 托管项时，右侧纯白容器里的 IM 对话区和 InfoDisplayPanel 信息区都必须同步切换到同一个当前处理对象，禁止出现“左侧已切到 B 会话，但右侧聊天仍是 A、信息区还是 C”的上下文错位。预览实现必须以 `activeConversationId` 作为单一事实源：左侧列表头像、标题、单号、标签数组与右侧 IM Header 的头像、标题、标签数组、会话 ID、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。右侧标题右侧的标签必须复用左侧当前选中 item.tags 的 label / variant / iconName，禁止只传单个 tagLabel 或统一渲染成白色标签；标签排序必须遵循状态优先：red / green / orange / blue 这类带颜色的会话状态标签默认排在最左侧，grey 辅助标签排在其后；灰色辅助标签 mock 文案必须控制在 4 个字以内。",
+        "【左侧卡片消息流 = 右侧完整气泡流缩小版】当 `ConversationList variant=\"card\"` 展示选中会话卡片时，卡片内的消息区不是“只看几条摘要”的精简预览，而是右侧 IMConversationPattern 当前会话完整气泡消息流的缩小版窗口。若右侧聊天区存在 20 条可展示气泡消息，左侧卡片消息区也必须通过固定高度 + `overflow-y-auto` 的内部滚动查看这同一批 20 条气泡；禁止按条数截断、禁止只保留最后几条。左侧每条气泡的文案内容、发送方角色、气泡颜色语义必须与右侧聊天区对应消息完全一致：用户消息统一使用右侧用户气泡的浅灰语义，bot 回复统一使用 AI 渐变语义，人工客服回复统一使用右侧客服气泡的浅青语义。允许因为卡片更小而降低字号、压缩内边距、隐藏头像/时间或继续省略 system 提示，但禁止改写文案、调换角色、改颜色，或让左侧显示右侧不存在的消息。",
         "【左侧卡片列表】`ConversationList variant=\"card\"` 嵌入左栏时，卡片列数必须基于左侧内容区实际宽度动态判断：`<=580px` 为 1 列，`>580px` 为 2 列，`>950px` 为 3 列；外层拖拽变宽 / 变窄时卡片栅格必须实时跟随，不能固定按默认 400px 宽度生成单列。",
         "【右侧主白卡默认内容】右侧主白卡默认采用左右分栏：左侧嵌入 IMConversationPattern 作为当前会话处理区，右侧嵌入 InfoDisplayPanel 作为用户信息、历史工单、工单日志、视频信息等辅助信息区；外层主白卡只负责容器、裁切、间距和分栏，不再额外套大白卡。",
         "【右侧布局规则】右侧主白卡内默认 `p-4 + gap-4`，左侧 IM 对话区使用 `flex-1 min-w-0` 吃剩余空间，右侧 InfoDisplayPanel 为独立信息栏；框架 mainMinWidth 建议不低于 720px，避免 IM 对话与信息面板互相挤压。IMConversationPattern 和 InfoDisplayPanel 都必须 `height: 100%` 填满主白卡高度，并由各自组件自管内部滚动。",
@@ -7207,6 +7242,7 @@
         "icon",
         "input",
         "select",
+        "card",
         "date-picker",
         "tag-input",
         "checkbox",
@@ -7239,9 +7275,10 @@
         "【全宽撑满铁律（左右大空白专项）】**白卡必须撑满浏览器全宽，main 的 padding 只能是 p-4（16px）**：⛔ 严禁用 `p-2` / `px-6` / `px-8` 当 main 外框间距（常见误区：把白卡内部 padding p-6 错用到 main）；⛔ 严禁在 main 内套 `<div className=\"max-w-* mx-auto\">` 居中容器——这是左右大空白的主因；⛔ 严禁根容器 / main 加 `max-w-screen-xl` / `max-w-7xl` 等收窄值；白卡 div 自身不加 `mx-*` 外边距，靠 `flex-1` 或 `shrink-0 w-[Npx]` 控制宽度。三层间距金字塔：浏览器边→白卡边缘 16px（main p-4）、白卡间距 8px（gap-2）、白卡内 padding 24px（p-6）。详见 LAYOUT_RULES §1.2 / §6.1。",
         "【白卡纯白无描边铁律】**最外层大白卡容器必须是\"纯白底 + 12px 圆角 + 无 border + 无 shadow\"**：⛔ 严禁在背景为 `var(--color-surface)` 的最外层 div / Card 上加 `border` / `outline` / `ring` / `borderColor` / `border-border-default` 等任何描边；白卡的层级感**唯一靠\"灰底 vs 白卡的明度差 + 12px 圆角\"**承担，加 border 会让明度差被划线覆盖、视觉权重变硬、气息感丢失。✅ **保留**：白卡**内部**所有 TFDS 组件自带的描边（Input / Select / TagInput / Tag / Tabs line / Table 行线 / 内嵌 grey Card 等——这些是控件功能边界，不是卡片层级边界）。判别口诀：背景色 `--color-surface`（白）→ **禁止** border；背景色 `--color-blueGrey-200`（灰，页面外框）→ **允许** border。详见 GLOBAL_DESIGN_RULES § 5.5。",
         "【Copilot详情页补充】当页面既不是纯入口页，也不是纯消息流页，而是“左侧/中部展示上下文结果，右侧或顶部继续让 AI 协助处理”的混合协作场景，可使用 `CopilotPagePattern`。它适用于“带上下文结果面板的 AI 协同详情页”，但仍不应被误写成纯白卡列表管理页。",
-        "【Tabs 硬约束】主工作区内凡多块互斥内容的面板切换**必须**用基础组件 `<Tabs />`；**卡片内**小模块切换、**内容区顶部**布局级切换**默认优先** `variant=\"segment\"`（分段器）；所有 4 种 Tabs 变体在白卡/内容区/表单分段/筛选维度/Playground 面板内默认尺寸统一为 **SM**（省略 size 或 `size=\"sm\"`），⛔ 禁止内容区默认 `size=\"md\"` / `size=\"lg\"`；只有平台顶部 header / 页面级顶导 Tabs 可按场景使用 MD/LG。禁止 `Button` 排一行或 `Tag` 冒充切换器",
+        "【Tabs 硬约束】主工作区内凡多块互斥内容的面板切换**必须**用基础组件 `<Tabs />`；**卡片内**小模块切换、**内容区顶部**布局级切换**默认优先** `variant=\"segment\"`（分段器）；所有 4 种 Tabs 变体在白卡/内容区/表单分段/筛选维度/Playground 面板内默认尺寸统一为 **SM**（省略 size 或 `size=\"sm\"`），⛔ 禁止内容区默认 `size=\"md\"` / `size=\"lg\"`；只有平台顶部 header / 页面级顶导 Tabs 可按场景使用 MD/LG。Tabs 默认内置横向滚动，父级必须 `min-w-0 max-w-full`，禁止 `w-fit` / `min-w-max` / 固定大宽度导致 Tabs 撑破卡片、侧栏或页面；禁止 `Button` 排一行或 `Tag` 冒充切换器",
         "【模板独立】每个\"列表示例\"对应一个独立 .jsx 文件（如 VariableManagementPage / McpManagementPage），业务接入直接复制单文件即可",
         "【示例映射（选型入口）】页面示例0=StrategyListPage（树形可展开列表+版本子行+分页）；页面示例1=VariableManagementPage（单白卡：标题/筛选/表格）；页面示例2=McpManagementPage（双白卡：左侧可拖拽辅助大卡 + 右侧弹性主白卡列表，是“横向大卡默认支持宽度拖拽”的标准示例）；页面示例3=TabTopBarListPage（TopBar 胶囊场景切换 + 一级 Tab + 操作组；白卡内“列表+详情面板”联动）；页面示例4=NoAccessPage（空状态+主行动：申请权限）；页面示例5=ConstructionPage（空状态：功能建设中）",
+        "【页面示例3·信息卡片3】TabTopBarListPage 的左侧知识列表条目必须引用业务组件 `Card type=\"info3\"`（信息卡片3），不得在页面内手写重复卡片样式。信息卡片3适用于知识库知识列表、规则列表、策略列表等密集信息场景，结构固定为“标题 + 右上状态 Tag + 描述 + 底部元信息”，圆角固定 12px（rounded-lg）。页面示例3只负责传入 question/answer/status/typeLabel/updatedAt/creator 与 selected/onAction；页面示例3的列表卡片处于白色工作区内，必须显式使用 `color=\"grey\"` 灰色卡片样式；信息卡片3的背景色、描边和 hover 规则必须与其它 Card 分类一致，统一遵守 `color=white/grey` 的背景反衬规则；整卡选中 UI 由 Card 的 `selected` 统一控制，语义是“原本同一条灰色描边变为绿色描边”，禁止新增 ring / outline / 外扩描边，也不允许改写卡片背景色。点击已选卡片收起详情、点击其它卡片切换详情的交互状态仍由页面模板维护。",
         "【关键词→示例】“策略管理/策略列表/版本子行/引用次数/渠道”→示例0；“变量管理/字段变量/流程引用”→示例1；“MCP/工具管理/分类树筛选/左侧标签树”→示例2；“知识库/QA对/文档知识/案例库/右侧详情面板/TopBar胶囊Tab”→示例3；“无权限/申请权限/无访问权限”→示例4；“建设中/敬请期待/开发中”→示例5",
         "【NavBar】通过 navItems 自定义菜单项（id / label / iconName），通过 selectedItemId 高亮当前菜单；菜单 id 与右侧模板一一对应",
         "【列表页结构】标题栏 → 筛选栏 → 表格，垂直 16px 间距，与白卡四边各 24px 边距",
@@ -7437,7 +7474,7 @@
       "kind": "page-pattern",
       "name": "AI 对话页",
       "category": "page-pattern",
-      "description": "独立的 AI 助手会话详情页：顶导栏（返回 + 标题 + 操作按钮组）+ 800px 居中消息流 + 底部吸底 ChatInput。所有消息（用户 / AI）一律用 ChatMessage 渲染（用户走 role=\"user\"，AI 走 header=true）。支持 phase 切换：默认 chat 阶段展示端到端 mock 对话，点「新会话」清空回到 welcome 欢迎屏（CATCAT 头像 + 推荐 chip）。关键词驱动完整任务流：「整理 / 分析 / 生成」→ 任务规划卡 → 用户点开始 → 流式执行流（每 600ms 推一步） → 同条消息更新为总结+产物+追问。",
+      "description": "独立的 AI 助手会话详情页：顶导栏（返回 + 标题 + 操作按钮组）+ 800px 居中消息流 + 底部吸底 ChatInput。所有消息（用户 / AI）一律用 ChatMessage 渲染（用户走 role=\"user\"，AI 走 header=true）。支持 phase 切换：默认 welcome 阶段直接展示新对话页（CATCAT 头像 + 推荐 chip）；点「新会话」后也回到该欢迎屏。若外部显式传入 initialMessages，则可直接打开已有会话。底部输入框真实发送后自动编排完整 AI 输出链路：用户气泡 → AI 深度思考 → 人工澄清确认卡片 → AI 自动执行流加载/完成 → AI 结论 + 最终产物 + 追问；追问继续追加在同一会话流，并自动继承上一轮账号、环境、Mock、结论和产物上下文。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "ChatConversationPattern"
@@ -7461,16 +7498,19 @@
         "【消息组件统一】所有消息（用户 / AI）一律用 ChatMessage 渲染。用户消息 role=\"user\" + userContent / userAttachments；AI 消息 header=true + 任意组合 thinking / leadText / plan / taskGroups / resultText / resultArtifacts / followUps。禁止用 ChatBubble 渲染 AI 回复",
         "【消息间距】flex-col gap-2（8px），符合现代 AI 对话的紧凑节奏",
         "【操作栏 historyMode】只有最后一条消息 historyMode=false（常显），其余消息 historyMode=true（hover 才显示，占位高度始终保留）；待用户处理的交互卡片（plan / confirms）未操作时整条消息不显示操作栏，处理后才变成历史消息走 historyMode 规则",
-        "【流式执行流】用 useStreamingTaskGroups(taskGroups, { intervalMs: 600 }) 把最终态 taskGroups 转成\"按 600ms 节奏一步步推出\"的切片：当前组 status=processing 带扫光，每过一格推一个 step，本组 step 出齐后切到下一组首步；流式期间整条 AI 消息不显示操作栏（actions=null）",
-        "【任务规划链路】关键词触发 → AI 推送 ai-task-plan 消息（leadText \"我开始规划啦...\" + 任务规划卡）→ 卡片有「取消」+「开始执行任务」两个按钮 → 用户点「开始执行任务」：1) 卡片变 confirmed 置灰 2) 追加用户消息「开始执行任务」3) 追加流式执行流消息（stream=true，无操作栏） 4) totalSteps×600ms 后更新同条消息：stream=false + taskGroups 全部 completed + 补上总结 resultText / resultArtifacts / followUps",
-        "【取消链路】用户点任务规划卡的「取消」：1) 卡片变 confirmed 置灰 2) 追加用户消息「取消」 3) 600ms 后追加 AI 短答寒暄（\"已取消任务，还有其他问题随时找我～\"）",
-        "【追问交互】followUps 字符串数组在父组件 wrap 成 { items, onSelect: onSend } 形式，点击 chip 必须等价于立即发送该文本：先追加一条右侧 user 气泡，再由 AI 追加对应的新答复 / 产物 / 下一组 followUps；不要只回填输入框等待用户二次发送",
-        "【自动滚底】用 ResizeObserver 监听消息列表 firstElementChild 的高度变化，任何高度增长都 scrollTo({ top: scrollHeight, behavior: smooth })；覆盖新消息追加 / 流式 step / 折叠展开 三种触发场景，比单独 useEffect([messages]) 更稳",
+        "【流式执行流】用 useStreamingTaskGroups(taskGroups, { intervalMs: 600 }) 把最终态 taskGroups 转成\"按 600ms 节奏一步步推出\"的切片：当前组 status=processing 带扫光，每过一格推一个 step，本组 step 出齐后切到下一组首步；流式期间整条 AI 消息不显示操作栏（actions=null），完成后同一条消息更新为 stream=false + taskGroups 全部 completed + resultText / resultArtifacts / followUps。",
+        "【自动编排链路（强约束）】底部 ChatInput 或 followUps 发送任意有效文本后，必须立即追加右侧 user 气泡，并自动按时间推进：1) AI 深度思考中 2) AI 深度思考完成并说明已理解上下文 3) 若出现卡片型节点则按“统一人工闸门”规则判断是否暂停 4) 展示 AI 自动执行流加载状态（ai-flow stream=true）5) 执行流加载完成（stream=false + completed）6) 展示 AI 结论、最终产物 resultArtifacts 和下一组追问 followUps。禁止只回复一条静态短文本。",
+        "【统一人工闸门（强约束）】任务规划卡、澄清确认卡片、配置表单等卡片型节点，只要右下角存在可操作按钮，尤其是黑色主按钮（如“确认执行 / 确认提交 / 确认并继续 / 开始执行任务”），就必须暂停后续模拟链路；只有用户真实点击该主按钮后，才能恢复并继续执行下一段流程。不得在按钮未点击前自动跳过到执行流或最终结果。",
+        "【内容型卡片不暂停】如果卡片型节点仅用于展示内容，没有右下角可操作按钮，或没有可触发继续执行的主按钮，则该节点视为 AI 自动输出内容的一部分，不需要停下来等待人工确认，应继续自动推进后续链路。",
+        "【人工澄清确认卡片】AI 对话页的人工澄清确认必须复用 `ChatMessage` 的 `confirms` 能力，默认使用 `mode=\"form-card\"`（澄清确认卡片2）样式：灰色外层确认容器 + 白色表单面板 + 业务场景 / 处理渠道 / 补充说明三段纵向表单 + 右下角黑色主按钮。不得在本模板中改回 option-card 单选列表或手写 Card/div 模拟澄清卡片；当 confirms 卡片存在右下角主按钮时，必须进入人工闸门暂停；当 confirms 仅展示信息且无按钮时，可自动继续后续执行。",
+        "【同会话上下文继承规则】同一会话内用户继续追问时，系统规则必须自动带上上一轮上下文：账号 account、环境 environment、Mock 数据说明 mock、上一轮结论 conclusion、上一轮产物 artifacts；这些上下文不需要用户重复输入，也不能因为点击 followUps 或底部继续输入而丢失。实现上建议维护 conversationContextRef / conversationContext 状态，每轮完成时回写本轮结论和产物，下一轮 thinking 与执行 payload 从该上下文读取。",
+        "【追问交互】followUps 字符串数组在父组件 wrap 成 { items, onSelect: onSend } 形式，点击 chip 必须等价于立即发送该文本：先追加一条右侧 user 气泡，再进入同一套自动编排链路（深度思考 → 卡片节点按是否有按钮决定暂停/自动继续 → 执行流 → 结论/产物/追问）；不要只回填输入框等待用户二次发送，不要新开会话或替换历史消息。",
+        "【自动滚底与最新锚点】用 ResizeObserver 监听消息列表 firstElementChild 的高度变化，并在消息列表底部放置 latestAnchorRef；任何高度增长、阶段推进、流式 step、折叠展开都必须 `scrollIntoView({ block: \"end\", behavior: \"smooth\" })` 或 scrollTo bottom，保证 AI 输出过程中最新 thinking / confirm / execution / result 始终出现在可视会话流区域。",
         "【新建会话页 = 空对话唯一标准态】只要当前会话没有消息（初次进入空会话、外部传入 `messages=[]`、或用户点击「新会话」清空消息），都必须展示统一的新建会话页：中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；底部 `ChatInput` 仍 shrink-0 吸底，placeholder 固定为\"需要我为你做什么…\"；禁止出现空白消息区、默认 mock 对话残留或与图示不一致的空状态。",
-        "【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 任务规划卡链路（待用户点开始/取消） ② 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」 ③ 其他 → AI 短答从备选句池随机一句，避免机械化",
+        "【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 自动编排任务链路 ② 命中 followUps 文案 → 自动编排追问链路，并输出对应结论/产物/下一组追问 ③ 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」并停止后续定时器 ④ 其他有效输入 → 仍进入自动编排链路，基于通用 mock 输出结果，避免对话页退化成普通问答短答。",
         "【任务规划卡 defaultConfirmed】历史消息（mock 中的已处理卡片）通过 plan.defaultConfirmed=true 让卡片初始就处于禁用置灰态；TaskPlanCard 内部用 useState(plan.defaultConfirmed === true) 初始化 confirmed，并用 useEffect 同步 props 变化"
       ],
-      "code": "// 见 ChatConversationPattern.jsx —— 完整可交互的会话页骨架（含欢迎屏 / 流式执行 / 取消链路）\n// 关键拼装（全部消息走 ChatMessage，无 ChatBubble）：\n//   用户消息:    <ChatMessage role=\"user\" userContent={[{type:\"text\",value:\"...\"}, {type:\"entity\",label:\"...\"}]} userAttachments={[...]} />\n//   AI 思考+卡:  <ChatMessage header thinking={...} leadText=\"我开始规划啦...\" plan={{...DEFAULT_CHAT_PLAN, defaultConfirmed:true, onPrimaryAction, onSecondaryAction}} />\n//   AI 流式:     <StreamingChatMessage taskGroups={DEFAULT_CHAT_TASK_GROUPS} />  // 内部 useStreamingTaskGroups\n//   AI 完整态:   <ChatMessage header taskGroups={...} resultText={...} resultArtifacts={...} followUps={{items, onSelect:onSend}} actions={{historyMode:false}} />\n//   底部输入:    <ChatInput onSend={handleSend} />  // handleSend 路由：任务/停止/兜底短答\n// phase 切换: 'chat'（默认）<-> 'welcome'（点新会话）\n// 自动滚底: ResizeObserver 监听内容高度变化，任意增长 → scrollTo bottom smooth",
+      "code": "// 见 ChatConversationPattern.jsx —— 完整可交互的会话页骨架（含欢迎屏 / 自动编排 / 流式执行 / 追问上下文继承）\n// 关键拼装（全部消息走 ChatMessage，无 ChatBubble）：\n//   用户消息:    <ChatMessage role=\"user\" userContent={[{type:\"text\",value:\"...\"}, {type:\"entity\",label:\"...\"}]} userAttachments={[...]} />\n//   AI 思考:     <ChatMessage header thinking={{state:\"thinking\"|\"completed\", ...}} />\n//   澄清确认:    <ChatMessage header leadText=\"请确认...\" confirms={[...DEFAULT_CHAT_FORM_CONFIRM]} />  // mode=\"form-card\"（澄清确认卡片2）\n//   AI 流式:     <StreamingChatMessage taskGroups={DEFAULT_CHAT_TASK_GROUPS} />  // 内部 useStreamingTaskGroups，stream=true 时展示加载态\n//   AI 完整态:   <ChatMessage header taskGroups={...} resultText={...} resultArtifacts={...} followUps={{items, onSelect:onSend}} actions={{historyMode:false}} />\n//   底部输入:    <ChatInput onSend={handleSend} />  // handleSend 路由：用户气泡 → thinking → confirms → ai-flow → resultArtifacts → followUps\n//   上下文继承:  conversationContextRef 每轮回写 account/environment/mock/conclusion/artifacts，下一轮追问自动读取\n// phase 切换: 'chat'（默认）<-> 'welcome'（点新会话）\n// 自动滚底: ResizeObserver + latestAnchorRef，任意增长 / 阶段推进 / 流式输出 → scrollIntoView bottom smooth",
       "keywords": [
         "ChatConversationPattern",
         "AI 对话页",
@@ -7495,6 +7535,8 @@
         "推荐 chip",
         "新会话",
         "流式执行",
+        "自动编排",
+        "人工澄清确认卡片",
         "任务规划卡",
         "执行流消息",
         "产物卡 + 追问",