@tfdesign/b-end 1.0.13 → 1.0.15

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-12T13:53:18.654Z",
+  "generatedAt": "2026-05-13T11:12:08.290Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
@@ -848,7 +848,7 @@
       "kind": "component",
       "name": "Card",
       "category": "business",
-      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
+      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "Card"
@@ -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,19 +1090,22 @@
         "【商品文案】标题最多 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 描边",
-        "【容器映射（强约束）】Card 的颜色必须与所处背景做反衬：当 Card 所在父容器是“灰底页面/灰底区块”（如 blueGrey-200 页面底、白卡内的浅灰分区）→ Card 用 `color=\"white\"`；当父容器本身是“白底卡片/白底面板”→ Card 用 `color=\"grey\"`，用灰底卡片做二级区块分层，避免白底叠白底",
+        "【容器映射（强约束）】Card 的颜色必须与所处背景做反衬，而且这条规则对所有 Card 分类统一生效：当 Card 所在父容器是“灰底页面/灰底区块/浅灰分区/其他非纯白背景”→ Card 用 `color=\"white\"`；当父容器本身是“纯白底卡片/纯白底面板”→ Card 用 `color=\"grey\"`，用灰底卡片做二级区块分层，避免白底叠白底",
         "【配置面板颜色】所有 Card 分类（数据卡片、商品卡片、信息卡片1、信息卡片2）都必须优先展示“颜色”配置项，并提供白底 / 灰底两种选择。平台预览中切换右上角画布底色时，卡片颜色必须按反衬规则自动同步：灰底画布 → 白底卡片，白底画布 → 灰底卡片。",
-        "【一句话记忆】如果卡片背景环境是灰色，就选“白底”分类卡片；如果卡片背景环境是纯白色，就选“灰底”分类卡片。不要让 Card 和父级背景同色相贴。",
+        "【一句话记忆】如果卡片背景环境是灰色、浅灰色或其他非纯白色，就选“白底”分类卡片；如果卡片背景环境是纯白色，就选“灰底”分类卡片。不要让 Card 和父级背景同色相贴。",
         "【状态】白底卡默认态使用 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=\"已使用\" />"
@@ -1546,7 +1561,7 @@
       "kind": "component",
       "name": "InfoDisplayPanel",
       "category": "business",
-      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。",
+      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "InfoDisplayPanel"
@@ -1623,6 +1638,7 @@
         "【不适用场景】整页客服工作台外框用 CustomerServiceWorkspaceFrame；左侧会话 / 工单队列用 ConversationList；单个业务摘要用 Card；字段型详情或可批量操作数据用 Form / Table。",
         "【结构】外层为一个白色圆角容器，默认使用 `w-full` 撑满父容器可用宽度；内部按“拆分栏数组 + 主栏”组织。每一栏都必须包含 56px 顶部 Tabs 栏和内容区；顶部横线只保留 Header 内 1 条通栏下描边，左右贴满当前栏容器。Tabs 交互、文字、选中态与 3px Brand 指示线必须复用基础 `Tabs variant=\"line\" size=\"lg\"`，禁止手写 tab button 或手写选中线。栏与栏之间用 1px 垂直分隔线，禁止通过 gap 制造分栏空隙。",
         "【分栏能力】默认单栏时，全部 tabs 位于主栏；主栏永远在最右侧，拆分出的独立栏固定追加在主栏左侧。每栏右上角始终只有 1 个动作按钮，拆分与合并统一使用 `Button variant=\"ghost-black\" size=\"md\" iconOnly tooltip=\"拆分/合并\"` 显示提示文案。最多支持 3 栏，即 1 个主栏 + 最多 2 个拆分栏。",
+        "【动态 tab1/tab2/tab3 拆分】InfoDisplayPanel 必须按业务实际 tabs 动态决定可见栏数，而不是写死三栏：只有 1 个分类时自动降级为单栏标题 + 内容；有 2 个分类时最多支持 2 栏；有 3 个及以上分类且容器宽度达到三栏门槛时才支持 3 栏。tab 的数量、名称、顺序、内容都必须来自 `panels[].tabs` / `panels[].content` 或 `renderPanelContent`，不要把“托管助手 / 历史工单 / 工单日志”等示例固定写死到所有业务页面。",
         "【Tabs来源】Tabs 的数量、名称和顺序必须跟随具体生成页面的业务信息架构动态生成，由 `panels[].tabs` 提供；不要把默认示例 tabs 当作真实业务规则，也不要为了凑满 3 栏强行生成无意义的 tab。",
         "【Tab数量与拆分上限】可拆栏数同时受容器宽度和 tab 总数限制：仅 1 个 tab 时不使用 Tabs，运行时自动降级为 `FormTitle variant=\"card\"` 标题展示且不显示拆分按钮；仅 2 个 tab 时最多拆分为 2 栏；大于等于 3 个 tab 且容器宽度达到 602px 时才允许拆分为 3 栏。",
         "【拆分规则】点击主栏右上角“拆分”时，只拆出当前选中的主栏 tab；拆分后该 tab 从主栏 tabs 中移除，并以独立栏形式出现在主栏左侧。主栏保留剩余未拆分 tabs，顺序始终保持传入时的原始顺序。",
@@ -1639,6 +1655,7 @@
         "【组合关系】InfoDisplayPanel 可作为 CustomerServiceWorkspaceFrame 的 mainPanel 内容；放入主白卡时宽高使用 `size-full` 或父容器约束，外层不要再套一层大白卡。",
         "【嵌入客服工作台时的语义】在客服工作台框架模版里，InfoDisplayPanel 不是独立静态侧栏，而是“当前左侧选中会话 / 工单”的辅助信息区。左侧会话列表默认选中项变化时，InfoDisplayPanel 内各 tab 的内容也必须同步切换到该当前对象对应的数据上下文，例如用户信息、历史工单、工单日志、视频信息、沟通记录都应属于同一个当前处理对象。",
         "【联动边界】客服工作台里的右侧白卡应被视为一个整体工作区：左侧 IM 对话区负责当前线程，右侧 InfoDisplayPanel 负责同一线程的辅助信息。两者由外层模板统一接收当前对象 id 并同步刷新；InfoDisplayPanel 不应自己脱离左侧上下文单独维持另一份“当前对象”。",
+        "【嵌入客服工作台时的能力保留】当 InfoDisplayPanel 被客服工作台框架使用时，必须保留整体信息栏宽度拖拽、内部栏间拖拽、动态 tab 拆分 / 合并、单 tab 降级、宽度门槛和最小栏宽保护。AI 生成页面不得把 InfoDisplayPanel 替换成静态 Card 列、普通 Tabs 面板或固定宽 div，也不得删除拖拽热区和拆分按钮。",
         "【可控状态】业务需要同步 URL / 埋点 / 右侧主区状态时，使用 `activeTabs + onTabChange` 控制每栏当前 tab，并使用 `onSplitChange` 感知当前拆分出来的 tab 列表与实际栏数；`columnCount` / `defaultColumnCount` 仅保留为兼容字段，不再作为主交互入口推荐，默认最大栏数按组件逻辑自动支持到 3 栏。"
       ],
       "examples": [
@@ -2830,6 +2847,15 @@
           "name": "onChange",
           "type": "function",
           "default": null
+        },
+        {
+          "name": "overflow",
+          "type": "enum",
+          "options": [
+            "auto",
+            "visible"
+          ],
+          "default": "auto"
         }
       ],
       "rules": [
@@ -2839,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",
@@ -2848,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": [
         {
@@ -2881,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\"}]} />"
@@ -2912,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": [
@@ -7143,15 +7179,19 @@
         "【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 3 个按钮，超出时应按平台级优先级裁切；按钮必须复用 `Button iconOnly` 并提供 `tooltip` / `aria-label`，不要放置页面内局部操作或业务表单操作。",
         "【工作区层级】Workspace 外层只负责横向布局、覆盖层级与拖拽，不承担可见圆角；左侧板块自身为 `bg-white/50 + border-white + rounded-xl`，右侧主面板自身为白色 `surface + border-white + rounded-xl`，两者高度一致、宽度不同，并通过主面板 `margin-left: -32px` 形成“右侧白板覆盖在左侧灰板上”的叠压视觉，而不是中间留缝的并排关系。",
         "【可见圆角】最终可见的 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%` 填满主白卡高度，并由各自组件自管内部滚动。",
         "【右侧纯白卡语义】右侧纯白色主卡定义的是“当前处理对象的完整工作区”，不是两个彼此独立的小组件容器。IMConversationPattern 负责当前线程消息往返，InfoDisplayPanel 负责同一对象的辅助信息、历史工单、日志、视频信息、用户信息等；两者必须共享同一个当前会话 / 工单 / 线程上下文。",
         "【状态同步原则】当业务接真实数据、URL 或埋点时，应以左侧当前选中对象 id 作为单一事实源（single source of truth），再派生右侧聊天流和信息面板内容；不要让 IMConversationPattern 和 InfoDisplayPanel 各自维护独立当前对象状态。",
         "【右侧信息栏整体拖拽】在客服工作台框架模版里，右侧 InfoDisplayPanel 必须支持整体宽度拖拽，拖拽热区位于信息栏左边界，默认热区 8px；拖拽时改变的是右侧信息栏整体宽度，左侧 IM 聊天区自动占满剩余空间，而不是改由 InfoDisplayPanel 本体处理页面级宽度。推荐默认宽度约 380px，最小宽度 320px，并保证左侧 IM 区至少保留 360px 可读宽度；同时保留 InfoDisplayPanel 内部相邻栏之间的原生拖拽能力。",
+        "【InfoDisplayPanel 动态 tab 拆分】右侧信息展示区必须保留 InfoDisplayPanel 的动态 tab1 / tab2 / tab3 栏拆分能力：业务只有 1 个分类时降级为单栏标题 + 内容；业务有 2 个分类时最多支持拆成 2 栏；业务有 3 个及以上分类且宽度达到三栏门槛时支持拆成 3 栏。tab 数量、名称、顺序和内容必须来自当前会话 / 工单上下文的业务数据，不允许固定写死 3 个静态按钮，也不允许用多个 Card 或 div 手搓三栏替代。",
+        "【拖拽与拆分保留验收】客服工作台生成页必须同时满足：拖动左侧列表边界时 ConversationList 默认列表 / 卡片列表容器实时适配；拖动右侧 InfoDisplayPanel 左边界时信息栏整体宽度变化且 IM 区自动吃剩余空间；拆出 InfoDisplayPanel tab 后，栏间分隔线可继续调节相邻栏宽，且每栏不小于 200px。任一能力缺失都视为没有正确使用客服工作台框架。",
         "【右侧插槽】如业务需要替换右侧主内容，可放 ChatConversationPattern、Table、表单详情或工单处理面板；但客服接待类页面优先保持“IM 对话 + InfoDisplayPanel”的组合，不要用多个普通 Card 临时拼出右侧信息区。",
         "【AI 选型】当 prompt 出现“客服工作台框架 / 客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 客服名称在线状态 / 顶部指标工具条”等客服工作台信号时，优先选本页面模板；但本模板右侧主内容仍必须包含 IMConversationPattern 聊天区和 InfoDisplayPanel 信息区。如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。",
         "【容器语义】本模板自身已经包含浅灰页面底与右侧主白卡，生成页面时不要外层再套 `Card color=\"grey\"`、`bg-surface rounded-xl` 或大白卡 section，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。",
@@ -7202,6 +7242,7 @@
         "icon",
         "input",
         "select",
+        "card",
         "date-picker",
         "tag-input",
         "checkbox",
@@ -7234,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 边距",
@@ -7323,10 +7365,10 @@
         "【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-y-auto overflow-x-hidden`，由右侧内容区作为唯一滚动容器承载整体页面滚动；Hero、ChatInput、筛选行、卡片网格要一起被滑动，禁止只让下方卡片列表单独 `overflow-y-auto`。",
         "【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；Hero 主标题使用 `text-4xl leading-10`；默认使用 `ChatInput variant=\"default\"` 作为入口主输入；标准节奏为 `padding: 84px 40px 80px`，标题区较旧版整体上移 36px。标题区副标题与 ChatInput 之间必须保留 48px 间距（比普通标题说明节奏额外增加 24px），保证输入框不贴近标题区。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。",
         "【筛选与分类】分类切换必须用 `Tabs size=\"sm\"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：可用外层 `<div className=\"ml-auto shrink-0\" style={{ flex: \"0 0 240px\", width: \"240px\", minWidth: \"240px\", maxWidth: \"240px\" }}>` 包裹 `Input`，也可直接给 `Input` 传 `style={{ flex: \"0 0 240px\", \"--size-input-width\": \"240px\" }}`；`Input` 的 `style` 作用于根容器。Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。",
-        "【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color=\"white\"`；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。",
+        "【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；当前列表直接坐浅灰页面底，所以卡片统一使用 `Card color=\"white\"`。通用铁律是：纯白容器里必须改用 `color=\"grey\"`，灰色/浅灰/其他非纯白容器里必须使用 `color=\"white\"`，且这条规则对所有 Card 分类都生效；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。",
         "【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义"
       ],
-      "code": "import NavBar from './components/NavBar';\nimport Tabs from './components/Tabs';\nimport ChatInput from './components/ChatInput';\nimport Card from './components/Card';\nimport Icon from './components/Icon';\nimport Input from './components/Input';\n\nconst CATEGORY_TABS = [\n  { label: '全部' },\n  { label: '推荐', icon: <Icon name=\"star-01-stroked\" /> },\n  { label: '对话助手', icon: <Icon name=\"message-chat-square-stroked\" /> },\n  { label: '数据分析', icon: <Icon name=\"bar-chart-01-stroked\" /> },\n];\n\nconst TEMPLATE_SEARCH_WRAP_STYLE = {\n  flex: '0 0 240px',\n  width: '240px',\n  minWidth: '240px',\n  maxWidth: '240px',\n};\n\nexport default function ChatHomePage() {\n  return (\n    <div\n      className=\"flex w-full items-stretch overflow-hidden\"\n      style={{\n        flex: '1 0 auto', alignSelf: 'stretch', minHeight: '720px',\n        background: 'var(--color-blueGrey-200)',\n        borderRadius: 0,\n      }}\n    >\n      <div className=\"flex shrink-0\">\n        <NavBar platform=\"ola\" selectedItemId=\"knowledge\" />\n      </div>\n\n      <div className=\"flex flex-1 min-w-0 min-h-0 flex-col overflow-y-auto overflow-x-hidden\">\n          {/* Hero 区：欢迎语 + ChatInput */}\n          <div\n            className=\"flex flex-col items-center shrink-0\"\n            style={{\n              padding: '84px 40px 80px',\n            }}\n          >\n            <div className=\"flex flex-col items-center gap-2 w-full text-center\">\n              <h1 className=\"m-0 text-4xl [font-weight:var(--font-semibold)] leading-10\" style={{ color: 'var(--foreground)' }}>\n                今天想做什么？\n              </h1>\n              <p className=\"m-0 text-sm\" style={{ color: 'var(--foreground-muted)' }}>\n                从下方搜索助手，或直接输入你的需求，AI 帮你快速搞定\n              </p>\n            </div>\n            <div className=\"w-full\" style={{ maxWidth: '680px', marginTop: '48px' }}>\n              <ChatInput variant=\"default\" placeholder=\"描述你想完成的任务…\" />\n            </div>\n          </div>\n\n          {/* 筛选行：Tabs + 固定宽搜索，直接坐灰底 */}\n          <div\n            className=\"flex min-w-0 shrink-0 items-center gap-4\"\n            style={{ padding: '16px 40px' }}\n          >\n            <div className=\"flex shrink-0\">\n              <Tabs variant=\"pill\" size=\"sm\" items={CATEGORY_TABS} defaultIndex={0} />\n            </div>\n            <div className=\"ml-auto shrink-0\" style={TEMPLATE_SEARCH_WRAP_STYLE}>\n              <Input\n                placeholder=\"搜索标题、描述\"\n                prefix={<Icon name=\"search-md-stroked\" size=\"sm\" />}\n                allowClear\n              />\n            </div>\n          </div>\n\n          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}\n          <div className=\"shrink-0\" style={{ padding: '0 40px 40px' }}>\n            <div className=\"grid gap-4\" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>\n              {/* 👉 替换为业务卡片数据 */}\n              <Card color=\"white\" title=\"智能客服助手\" description=\"基于大模型的全渠道客服对话助手\" tags={['客服', '对话']} />\n              <Card color=\"white\" title=\"数据洞察报告\" description=\"上传数据，自动输出可视化洞察报告\" tags={['数据', '分析']} />\n              <Card color=\"white\" title=\"知识库 QA 问答\" description=\"基于私有知识文档，快速搭建专属问答\" tags={['知识库', 'RAG']} />\n            </div>\n          </div>\n      </div>\n    </div>\n  );\n}",
+      "code": "import NavBar from './components/NavBar';\nimport Tabs from './components/Tabs';\nimport ChatInput from './components/ChatInput';\nimport Card from './components/Card';\nimport Icon from './components/Icon';\nimport Input from './components/Input';\n\nconst CATEGORY_TABS = [\n  { label: '全部' },\n  { label: '推荐', icon: <Icon name=\"star-01-stroked\" /> },\n  { label: '对话助手', icon: <Icon name=\"message-chat-square-stroked\" /> },\n  { label: '数据分析', icon: <Icon name=\"bar-chart-01-stroked\" /> },\n];\n\nconst TEMPLATE_SEARCH_WRAP_STYLE = {\n  flex: '0 0 240px',\n  width: '240px',\n  minWidth: '240px',\n  maxWidth: '240px',\n};\n\nexport default function ChatHomePage() {\n  return (\n    <div\n      className=\"flex w-full items-stretch overflow-hidden\"\n      style={{\n        flex: '1 0 auto', alignSelf: 'stretch', minHeight: '720px',\n        background: 'var(--color-blueGrey-200)',\n        borderRadius: 0,\n      }}\n    >\n      <div className=\"flex shrink-0\">\n        <NavBar platform=\"ola\" selectedItemId=\"knowledge\" />\n      </div>\n\n      <div className=\"flex flex-1 min-w-0 min-h-0 flex-col overflow-y-auto overflow-x-hidden\">\n          {/* Hero 区：欢迎语 + ChatInput */}\n          <div\n            className=\"flex flex-col items-center shrink-0\"\n            style={{\n              padding: '84px 40px 80px',\n            }}\n          >\n            <div className=\"flex flex-col items-center gap-2 w-full text-center\">\n              <h1 className=\"m-0 text-4xl [font-weight:var(--font-semibold)] leading-10\" style={{ color: 'var(--foreground)' }}>\n                今天想做什么？\n              </h1>\n              <p className=\"m-0 text-sm\" style={{ color: 'var(--foreground-muted)' }}>\n                从下方搜索助手，或直接输入你的需求，AI 帮你快速搞定\n              </p>\n            </div>\n            <div className=\"w-full\" style={{ maxWidth: '680px', marginTop: '48px' }}>\n              <ChatInput variant=\"default\" placeholder=\"描述你想完成的任务…\" />\n            </div>\n          </div>\n\n          {/* 筛选行：Tabs + 固定宽搜索，直接坐灰底 */}\n          <div\n            className=\"flex min-w-0 shrink-0 items-center gap-4\"\n            style={{ padding: '16px 40px' }}\n          >\n            <div className=\"flex shrink-0\">\n              <Tabs variant=\"pill\" size=\"sm\" items={CATEGORY_TABS} defaultIndex={0} />\n            </div>\n            <div className=\"ml-auto shrink-0\" style={TEMPLATE_SEARCH_WRAP_STYLE}>\n              <Input\n                placeholder=\"搜索标题、描述\"\n                prefix={<Icon name=\"search-md-stroked\" size=\"sm\" />}\n                allowClear\n              />\n            </div>\n          </div>\n\n          {/* 卡片列表：当前直接坐浅灰页面底，所以卡片统一使用白底 Card；若未来改成纯白容器，必须同步切换为 grey 灰底卡 */}\n          <div className=\"shrink-0\" style={{ padding: '0 40px 40px' }}>\n            <div className=\"grid gap-4\" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>\n              {/* 👉 替换为业务卡片数据 */}\n              <Card color=\"white\" title=\"智能客服助手\" description=\"基于大模型的全渠道客服对话助手\" tags={['客服', '对话']} />\n              <Card color=\"white\" title=\"数据洞察报告\" description=\"上传数据，自动输出可视化洞察报告\" tags={['数据', '分析']} />\n              <Card color=\"white\" title=\"知识库 QA 问答\" description=\"基于私有知识文档，快速搭建专属问答\" tags={['知识库', 'RAG']} />\n            </div>\n          </div>\n      </div>\n    </div>\n  );\n}",
       "keywords": [
         "ChatHomePagePattern",
         "AI 入口页",
@@ -7432,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"
@@ -7447,24 +7489,28 @@
       "rules": [
         "【五模板定位】本模板只用于“AI 任务会话 / AI 助手会话”的持续协作页：用户第一步是继续追问、确认规划、查看流式执行、查看 AI 产物卡或 follow-up。若用户还没开始任务，用 `ChatHomePagePattern`；若右侧主产物/主编辑区才是页面主角，AI 只是侧助，用 `CopilotPagePattern`；若是真人客服/私信/站内信回复，用 `IMConversationPattern`；若是管理一批会话/任务列表，用 `BasePageFramePattern`。",
         "【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `chat-conversation`：消息流和底部输入是主工作流，滚动归属消息流；底部 `ChatInput` 固定吸底，不随消息滚动。",
-        "【组件选型门禁】所有消息必须用 `ChatMessage`：用户消息用 `role=\"user\"`，AI 消息用 `header` 并按需要组合 `thinking` / `plan` / `taskGroups` / `resultText` / `resultArtifacts` / `followUps`；底部输入必须用 `ChatInput`；顶部和消息操作用 `Button` + `Icon`；欢迎/空会话态可用 `Empty` 或模板内欢迎屏。禁止用 `ChatBubble`、Card 或裸 div 模拟 AI 消息。",
+        "【组件选型门禁】所有消息必须用 `ChatMessage`：用户消息用 `role=\"user\"`，AI 消息用 `header` 并按需要组合 `thinking` / `plan` / `taskGroups` / `resultText` / `resultArtifacts` / `followUps`；底部输入必须用 `ChatInput`；顶部和消息操作用 `Button` + `Icon`；空会话必须使用模板内置的「新建会话页」，不要退回 `Empty`、空白消息区或自制欢迎卡。禁止用 `ChatBubble`、Card 或裸 div 模拟 AI 消息。",
         "【整体框架】外框灰底（color-blueGrey-200）；不带左侧 NavBar，整页就是一个独立会话工作区；不嵌中间白卡，顶导栏 / 消息区 / ChatInput 三层都直接坐灰底上；业务页面根容器不额外加外圈圆角或描边",
         "【顶导栏】shrink-0，左侧 ghost-black 返回箭头 + 会话标题（truncate），右侧按权重递增：share-07 / 会话详情 outline-black / 更多 dots / 新会话 primary（主操作唯一固定最右）",
+        "【顶导栏图标按钮】顶导栏内所有仅图标操作必须使用 `Button iconOnly tooltip=\"操作文案\"`，hover/focus 时展示 Tooltip，且 tooltip 为字符串时由 Button 自动补 `aria-label`；禁止只传 `aria-label` 或只放 Icon 让用户猜操作。",
         "【布局结构】flex h-full flex-col：① 顶导栏 shrink-0 ② 中部消息区 flex-1 + min-h-0 + overflow-y-auto 独立内滚 ③ ChatInput shrink-0 吸底；不要给中部加白卡背景",
         "【宽度规格】对话流和 ChatInput 都用 800px + mx-auto 居中；对话流相对 ChatInput 左右各缩进 12px（消息区 padding \"0 20px\"，ChatInput padding \"0 8px\"），让消息看起来比输入框窄一圈",
         "【消息组件统一】所有消息（用户 / 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]) 更稳",
-        "【欢迎屏】点「新会话」→ phase 切到 welcome：清空 messages，中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；ChatInput 仍 shrink-0 吸底（位置和 chat 阶段保持一致），placeholder 改成\"需要我为你做什么…\"；用户在欢迎屏发送或点 chip → phase 自动切回 chat 走完整链路",
-        "【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 任务规划卡链路（待用户点开始/取消） ② 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」 ③ 其他 → AI 短答从备选句池随机一句，避免机械化",
+        "【流式执行流】用 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 对话残留或与图示不一致的空状态。",
+        "【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 自动编排任务链路 ② 命中 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 对话页",
@@ -7489,6 +7535,8 @@
         "推荐 chip",
         "新会话",
         "流式执行",
+        "自动编排",
+        "人工澄清确认卡片",
         "任务规划卡",
         "执行流消息",
         "产物卡 + 追问",

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-12T13:53:18.654Z",
+  "generatedAt": "2026-05-13T11:12:08.290Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 47,
@@ -231,7 +231,7 @@
       "kind": "component",
       "name": "Card",
       "category": "business",
-      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
+      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "Card"
@@ -262,8 +262,8 @@
         "order card",
         "图片文字卡片"
       ],
-      "ruleCount": 36,
-      "exampleCount": 26,
+      "ruleCount": 39,
+      "exampleCount": 29,
       "hasCode": false,
       "detailRef": "components.index.json#card"
     },
@@ -313,7 +313,7 @@
       "kind": "component",
       "name": "InfoDisplayPanel",
       "category": "business",
-      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。",
+      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "InfoDisplayPanel"
@@ -344,7 +344,7 @@
         "多面板工作区",
         "panel tabs"
       ],
-      "ruleCount": 26,
+      "ruleCount": 28,
       "exampleCount": 8,
       "hasCode": false,
       "detailRef": "components.index.json#info-display-panel"
@@ -549,8 +549,8 @@
         "Input Output 切换",
         "Playground 切换"
       ],
-      "ruleCount": 18,
-      "exampleCount": 15,
+      "ruleCount": 20,
+      "exampleCount": 17,
       "hasCode": false,
       "detailRef": "components.index.json#tabs"
     },
@@ -1634,7 +1634,7 @@
         "工单处理框架",
         "CustomerServiceWorkspaceFrame"
       ],
-      "ruleCount": 22,
+      "ruleCount": 26,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#customer-service-workspace-frame"
@@ -1675,7 +1675,7 @@
         "数据资产管理",
         "筛选栏"
       ],
-      "ruleCount": 36,
+      "ruleCount": 37,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#base-page-frame"
@@ -1767,7 +1767,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"
@@ -1796,9 +1796,9 @@
         "推荐 chip",
         "新会话",
         "流式执行",
-        "任务规划卡"
+        "自动编排"
       ],
-      "ruleCount": 18,
+      "ruleCount": 22,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#chat-conversation-page"