@tfdesign/b-end 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": false,
   "type": "module",
   "description": "TFDS B-end React components + Tailwind v4 theme.css; self-contained npm install (no monorepo clone required).",

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-13T05:01:47.099Z",
   "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"
@@ -1096,9 +1096,9 @@
         "【信息卡片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 字短标签。",
@@ -1546,7 +1546,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 +1623,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 +1640,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": [
@@ -7143,6 +7145,7 @@
         "【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 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、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。",
@@ -7152,6 +7155,8 @@
         "【右侧纯白卡语义】右侧纯白色主卡定义的是“当前处理对象的完整工作区”，不是两个彼此独立的小组件容器。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，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。",
@@ -7323,10 +7328,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 入口页",
@@ -7447,9 +7452,10 @@
       "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 回复",
@@ -7460,7 +7466,7 @@
         "【取消链路】用户点任务规划卡的「取消」：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 走完整链路",
+        "【新建会话页 = 空对话唯一标准态】只要当前会话没有消息（初次进入空会话、外部传入 `messages=[]`、或用户点击「新会话」清空消息），都必须展示统一的新建会话页：中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；底部 `ChatInput` 仍 shrink-0 吸底，placeholder 固定为\"需要我为你做什么…\"；禁止出现空白消息区、默认 mock 对话残留或与图示不一致的空状态。",
         "【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 任务规划卡链路（待用户点开始/取消） ② 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」 ③ 其他 → AI 短答从备选句池随机一句，避免机械化",
         "【任务规划卡 defaultConfirmed】历史消息（mock 中的已处理卡片）通过 plan.defaultConfirmed=true 让卡片初始就处于禁用置灰态；TaskPlanCard 内部用 useState(plan.defaultConfirmed === true) 初始化 confirmed，并用 useEffect 同步 props 变化"
       ],

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-13T05:01:47.099Z",
   "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"
@@ -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"
@@ -1634,7 +1634,7 @@
         "工单处理框架",
         "CustomerServiceWorkspaceFrame"
       ],
-      "ruleCount": 22,
+      "ruleCount": 25,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#customer-service-workspace-frame"
@@ -1798,7 +1798,7 @@
         "流式执行",
         "任务规划卡"
       ],
-      "ruleCount": 18,
+      "ruleCount": 19,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#chat-conversation-page"

package/src/_b_end_runtime/components/Card.jsx

@@ -284,7 +284,7 @@ const ACTION = [
  * @prop {'data'|'product'|'info'|'info2'|'animated'} [type='data'] — 卡片类型：data 为数据卡片，product 为商品卡片，info 为信息卡片1，info2 为信息卡片2；animated 为旧版兼容别名
  * @prop {string} [title] — 卡片标题，商品卡片中为商品标题
  * @prop {string} [description] — 卡片描述，商品卡片中为数量、价格等辅助信息
- * @prop {'white'|'grey'} [color='white'] — 卡片颜色：white 为白底默认样式，grey 为 Blue Grey 灰底样式
+ * @prop {'white'|'grey'} [color='white'] — 卡片颜色：white 为白底样式，适用于灰/浅灰/非纯白容器；grey 为 Blue Grey 灰底样式，适用于纯白容器
  * @prop {Array<{iconName: string, value: string, tooltip?: string}>|null} [stats=null] — 数据卡片指标数组，最多展示 3 项；tooltip 用于 hover/focus 展示详细说明
  * @prop {string[]|null} [tags=null] — 数据卡片标签数组，建议 1-2 个短标签；商品卡片和信息卡片1不渲染通用 tags
  * @prop {string} [productStatus='已使用'] — 商品状态标签文案
@@ -314,7 +314,8 @@ const ACTION = [
  * @prop {object} [style] — 内联样式
  *
  * 通用 tags 仅用于数据卡片左下角；商品和信息卡片1不渲染标题左侧通用标签。
- * 卡片容器默认半透明白底，hover 后补满白底并出现业务卡片专用投影。
+ * 所有 Card 分类都遵循“背景反衬”规则：父容器是纯白色时必须使用灰底卡；父容器是灰色、浅灰色或其他非纯白底时必须使用白底卡。
+ * 卡片容器默认半透明白底，hover 后补满白底并出现业务卡片专用投影；灰底卡保持灰底与灰描边，并保留相同投影反馈。
  */
 export default function Card({
   type = 'data',
@@ -353,6 +354,7 @@ export default function Card({
   const resolvedType = type === 'product' || type === 'info'
     ? type
     : (type === 'info2' || type === 'animated' ? 'info2' : 'data');
+  // Card 颜色依赖父级背景做反衬，不按卡片类型区分。
   const resolvedColor = color === 'grey' ? 'grey' : 'white';
   const resolvedTitle = title || (
     resolvedType === 'product'

package/src/_b_end_runtime/components/Card.tokens.js

@@ -116,6 +116,8 @@ export const CARD_TOKEN_MAP = {
     { label: '操作文案', cssProp: 'a11y-label', value: 'animatedActionText 作为圆形箭头按钮语义文案，不直接渲染为文字按钮' },
   ],
   卡片: [
+    { label: '容器映射规则', cssProp: 'usage', value: '所有卡片分类统一按父容器背景反衬：纯白容器用 grey 灰底卡；灰色 / 浅灰 / 其他非纯白容器用 white 白底卡' },
+    { label: '规则适用范围', cssProp: 'scope', value: '数据卡片 / 商品卡片 / 信息卡片1 / 信息卡片2 全部生效，不因卡片类型变化' },
     { label: '白底背景', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'default' },
     { label: '白底 Hover 背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'hover' },
     { label: '白底描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF' },

package/src/_b_end_runtime/components/ConversationList.jsx

@@ -499,6 +499,7 @@ function ConversationCardFooter({ card, onSend }) {
             icon={<Icon name="send-01-stroked" size={16} aria-hidden="true" />}
             iconOnly
             className="!h-6 !w-6 !rounded-md !p-1"
+            tooltip="发送回复"
             onKeyDown={(event) => {
               event.stopPropagation();
             }}
@@ -1049,17 +1050,16 @@ function ConversationListDefaultVariant({
       {!isCardVariant && isAvatarOnly ? (
         <>
           <div className={AVATAR_ONLY_HEADER}>
-            <Tooltip content="展开会话列表">
-              <Button
-                type="button"
-                variant="ghost-black"
-                size="sm"
-                icon={<Icon name="layout-right-stroked" size={16} />}
-                iconOnly
-                onClick={handleExpandFromAvatarOnly}
-                aria-label="展开会话列表"
-              />
-            </Tooltip>
+            <Button
+              type="button"
+              variant="ghost-black"
+              size="sm"
+              icon={<Icon name="layout-right-stroked" size={16} />}
+              iconOnly
+              tooltip="展开会话列表"
+              onClick={handleExpandFromAvatarOnly}
+              aria-label="展开会话列表"
+            />
           </div>
           <div className={AVATAR_ONLY_LIST}>
             {avatarOnlyItems.map((item) => (
@@ -1077,65 +1077,60 @@ function ConversationListDefaultVariant({
           <header className={HEADER}>
             <div className={HEADER_MAIN}>
               {!isCardVariant && collapsible ? (
-                <Tooltip content="收起会话列表">
-                  <Button
-                    type="button"
-                    variant="ghost-black"
-                    size="sm"
-                    icon={<Icon name="layout-right-stroked" size={16} />}
-                    iconOnly
-                    onClick={handleCollapseToAvatarOnly}
-                    aria-label="收起会话列表"
-                  />
-                </Tooltip>
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="layout-right-stroked" size={16} />}
+                  iconOnly
+                  tooltip="收起会话列表"
+                  onClick={handleCollapseToAvatarOnly}
+                  aria-label="收起会话列表"
+                />
               ) : null}
               <h2 className={TITLE}>{title}</h2>
             </div>
             {showActions ? (
               <div className={ACTIONS}>
                 {showLayoutToggle ? (
-                  <Tooltip content={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}>
-                    <Button
-                      type="button"
-                      variant="ghost-black"
-                      size="sm"
-                      icon={<Icon name="switch-horizontal-01-stroked" size={16} />}
-                      iconOnly
-                      onClick={handleVariantToggle}
-                      aria-label={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
-                    />
-                  </Tooltip>
-                ) : null}
-                <Tooltip content="搜索会话">
                   <Button
                     type="button"
                     variant="ghost-black"
                     size="sm"
-                    icon={<Icon name="search-lg-stroked" size={16} />}
+                    icon={<Icon name="switch-horizontal-01-stroked" size={16} />}
                     iconOnly
-                    aria-label="搜索会话"
+                    tooltip={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
+                    onClick={handleVariantToggle}
+                    aria-label={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
                   />
-                </Tooltip>
-                <Tooltip content="筛选会话">
-                  <Button
-                    type="button"
-                    variant="ghost-black"
-                    size="sm"
-                    icon={<Icon name="filter-funnel-01-stroked" size={16} />}
-                    iconOnly
-                    aria-label="筛选会话"
-                  />
-                </Tooltip>
-                <Tooltip content="查看工单文件">
-                  <Button
-                    type="button"
-                    variant="ghost-black"
-                    size="sm"
-                    icon={<Icon name="file-05-stroked" size={16} />}
-                    iconOnly
-                    aria-label="查看工单文件"
-                  />
-                </Tooltip>
+                ) : null}
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="search-lg-stroked" size={16} />}
+                  iconOnly
+                  tooltip="搜索会话"
+                  aria-label="搜索会话"
+                />
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="filter-funnel-01-stroked" size={16} />}
+                  iconOnly
+                  tooltip="筛选会话"
+                  aria-label="筛选会话"
+                />
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="file-05-stroked" size={16} />}
+                  iconOnly
+                  tooltip="查看工单文件"
+                  aria-label="查看工单文件"
+                />
               </div>
             ) : null}
           </header>

package/src/_b_end_runtime/components/FullScreenPage.jsx

@@ -75,6 +75,7 @@ export default function FullScreenPage({
               icon={<ArrowLeft size={16} strokeWidth={2} />}
               iconOnly
               onClick={onBack}
+              tooltip="返回"
               aria-label="返回"
               className="shrink-0"
               data-tfds-component="FullScreenPage.Back"

package/src/_b_end_runtime/components/InfoDisplayPanel.jsx

@@ -3,6 +3,8 @@
  *
  * 用于客服工作台 / 在线 Agent / 工单详情右侧信息区，将多个可切换的信息面板
  * 组织为“主栏 + 拆分栏”结构。组件只负责框架、拆分/合并和 Tabs，不规定 tabs 内容。
+ * tabs 来自业务数据动态配置：1 个分类单栏展示，2 个分类最多双栏，3 个及以上分类且宽度足够时最多三栏。
+ * 嵌入客服工作台框架时，必须保留整体信息栏拖拽、内部栏间拖拽、拆分/合并和最小宽度保护。
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -10,7 +12,6 @@ import Button from './Button';
 import FormTitle from './FormTitle';
 import Icon from './Icon';
 import Tabs from './Tabs';
-import Tooltip from './Tooltip';
 
 const DEFAULT_PANELS = [
   {
@@ -307,20 +308,17 @@ function PanelHeader({
 
       {!useTitleFallback ? (
         <div className={ACTIONS}>
-          <Tooltip content={splitActionTooltip} placement="top">
-            <span className="inline-flex">
-              <Button
-                type="button"
-                variant="ghost-black"
-                size="md"
-                icon={<Icon name={splitActionIcon} size={16} />}
-                iconOnly
-                disabled={splitActionDisabled}
-                aria-label={splitActionLabel}
-                onClick={onSplitAction}
-              />
-            </span>
-          </Tooltip>
+          <Button
+            type="button"
+            variant="ghost-black"
+            size="md"
+            icon={<Icon name={splitActionIcon} size={16} />}
+            iconOnly
+            tooltip={splitActionTooltip}
+            disabled={splitActionDisabled}
+            aria-label={splitActionLabel}
+            onClick={onSplitAction}
+          />
         </div>
       ) : null}
       <span className={HEADER_LINE} aria-hidden="true" />

package/src/_b_end_runtime/components/InfoDisplayPanel.tokens.js

@@ -17,6 +17,7 @@ export const INFO_DISPLAY_PANEL_TOKEN_MAP = {
   分栏: [
     { label: '布局模型', cssProp: 'layout', value: '主栏 + 拆分栏；主栏永远在最右侧，拆分栏固定追加在主栏左侧' },
     { label: '最大栏数', cssProp: 'max-columns', value: '3 栏（1 个主栏 + 最多 2 个拆分栏）' },
+    { label: '动态拆分能力', cssProp: 'split-model', value: '按业务 tabs 动态支持 tab1 / tab2 / tab3：1 个分类单栏展示，2 个分类最多双栏，3 个及以上分类且宽度足够时最多三栏' },
     { label: 'Tab数量上限', cssProp: 'max-columns', value: '可见栏数同时受 tab 总数限制：1 个 tab 不拆分，2 个 tab 最多 2 栏，>= 3 个 tab 才允许 3 栏' },
     { label: '单栏最小宽度', cssProp: 'minPanelWidth', value: '200px' },
     { label: '双栏门槛', cssProp: 'container-width', value: '>= 401px（200px * 2 + 1px 分隔线）' },
@@ -24,6 +25,7 @@ export const INFO_DISPLAY_PANEL_TOKEN_MAP = {
     { label: '栏间分隔线', cssProp: 'border-left', token: 'border-default', value: '1px' },
     { label: '空间不足策略', cssProp: 'split-limit', value: '容器宽度 < 401px 时只允许单栏；401px-601px 允许双栏；>= 602px 才允许三栏。宽度不足时主栏拆分按钮进入 Button disabled 态' },
     { label: '拖拽边界', cssProp: 'resize-handle', value: '组件整体宽度由左外边界单独拖拽；组件内部仅栏与栏之间的分隔线支持拖拽调宽' },
+    { label: '客服工作台保留能力', cssProp: 'customer-service-rule', value: '嵌入客服工作台框架时，必须完整保留整体信息栏拖拽、内部栏间拖拽、拆分/合并、宽度门槛和最小栏宽保护' },
     { label: '拖拽最小宽度', cssProp: 'min-column-width', value: '每栏最小 200px' },
     { label: '预览验证', cssProp: 'preview-resize', value: '预览态默认撑满容器，并支持从组件左侧边缘拖拽整体宽度，用于验证单栏 / 双栏 / 三栏门槛' },
   ],

package/src/_b_end_runtime/components/Modal.jsx

@@ -122,6 +122,7 @@ export default function Modal({
             icon={<X size={16} strokeWidth={2} />}
             iconOnly
             onClick={onClose}
+            tooltip="关闭"
             aria-label="关闭"
             className="shrink-0"
           />

package/src/_b_end_runtime/components/Sheet.jsx

@@ -94,6 +94,7 @@ export default function Sheet({
             icon={<X size={16} strokeWidth={2} />}
             iconOnly
             onClick={onClose}
+            tooltip="关闭"
             aria-label="关闭"
             className="shrink-0"
           />

package/src/_b_end_runtime/components/Table.jsx

@@ -607,6 +607,7 @@ function renderTextButtonValue(value) {
         iconOnly
         icon={<Icon name={iconName} size="sm" />}
         className={[ICON_ONLY_BUTTON_RESET, TEXT_BUTTON_ICON_CLASS, 'ml-[2px]'].join(' ')}
+        tooltip={typeof value === 'object' ? value.tooltip || value.ariaLabel || value.label || '单元格操作' : '单元格操作'}
         aria-label="单元格操作"
         onClick={onClick}
       />
@@ -720,6 +721,7 @@ function renderActionsValue(value) {
               icon={<Icon name={action.iconName || 'dots-horizontal-stroked'} size="sm" />}
               className={[ICON_ONLY_BUTTON_RESET, MORE_ACTION_BUTTON_CLASS].join(' ')}
               onClick={action.onClick}
+              tooltip={action.tooltip || action.ariaLabel || action.label || '更多操作'}
               aria-label={action.ariaLabel || action.label || '更多操作'}
             />
           );
@@ -755,6 +757,7 @@ function renderDragHandleValue(value) {
       iconOnly
       icon={<Icon name="dots-grid-stroked" size="sm" />}
       className={[ICON_ONLY_BUTTON_RESET, DRAG_HANDLE_BUTTON_CLASS].join(' ')}
+      tooltip="拖拽排序"
       aria-label="拖拽排序"
       onClick={onClick}
     />
@@ -888,6 +891,7 @@ function CardFormActions({ record, context, onView, onMore }) {
         variant="ghost-black"
         iconOnly
         icon={<Icon name="dots-horizontal-stroked" />}
+        tooltip="更多"
         aria-label="更多"
         onClick={() => onMore?.(record, context)}
       />
@@ -956,6 +960,7 @@ function CardFormItem({
             variant="ghost-black"
             iconOnly
             icon={<Icon name="chevron-right-stroked" />}
+            tooltip={expanded ? '收起子项' : '展开子项'}
             aria-label={expanded ? '收起子项' : '展开子项'}
             aria-expanded={hasChildren ? expanded : undefined}
             onClick={(event) => {
@@ -1169,6 +1174,7 @@ export default function Table({
               className={[ICON_ONLY_BUTTON_RESET, PAGE_ARROW_BUTTON_CLASS].join(' ')}
               onClick={() => handlePageChange(safeCurrent - 1)}
               disabled={safeCurrent <= 1}
+              tooltip="上一页"
               aria-label="上一页"
               data-tfds-component="Table.Pagination"
             />
@@ -1207,6 +1213,7 @@ export default function Table({
               className={[ICON_ONLY_BUTTON_RESET, PAGE_ARROW_BUTTON_CLASS].join(' ')}
               onClick={() => handlePageChange(safeCurrent + 1)}
               disabled={safeCurrent >= totalPages}
+              tooltip="下一页"
               aria-label="下一页"
               data-tfds-component="Table.Pagination"
             />

package/src/_b_end_runtime/components/TagBar.jsx

@@ -566,6 +566,7 @@ function BusinessSwitcher({
           iconOnly
           icon={<Icon name="switch-horizontal-01-stroked" size="xs" className="text-foreground-muted" aria-hidden="true" />}
           className="shrink-0"
+          tooltip="切换业务线"
           aria-label="切换业务线"
           aria-haspopup="menu"
           aria-expanded={menuOpen}
@@ -1097,6 +1098,7 @@ export default function TagBar({
             radius="rounded"
             iconOnly
             icon={<Icon name="layout-left-stroked" size="sm" aria-hidden="true" />}
+            tooltip={isCollapsed ? '展开标签栏' : '收起标签栏'}
             aria-label={isCollapsed ? '展开标签栏' : '收起标签栏'}
             onClick={() => updateCollapsed(!isCollapsed)}
             data-tfds-component="TagBar.CollapseToggle"

package/src/_b_end_runtime/components/Toast.jsx

@@ -111,6 +111,7 @@ export default function Toast({
           icon={<X size={16} strokeWidth={2} />}
           iconOnly
           onClick={onClose}
+          tooltip="关闭"
           aria-label="关闭"
           className="shrink-0 border-transparent bg-transparent shadow-none"
         />

package/src/_b_end_runtime/components/Upload.jsx

@@ -413,6 +413,7 @@ export const Upload = ({
                       radius="rounded"
                       iconOnly
                       icon={<Icon name="refresh-cw-01-stroked" size="xs" />}
+                      tooltip="重试上传"
                       onClick={(e) => {
                         e.stopPropagation();
                         retryItem(fileItem);

package/src/_b_end_runtime/components.js

@@ -1065,7 +1065,7 @@ export const COMPONENTS = [
     name: 'Card',
     element: 'article',
     category: 'business',
-    description: '业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。',
+    description: '业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。',
     componentFile: './components/Card.jsx',
     tokensFile: './components/Card.tokens.js',
     props: [
@@ -1137,9 +1137,9 @@ export const COMPONENTS = [
       '【信息卡片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 字短标签。',
@@ -1302,7 +1302,7 @@ export const COMPONENTS = [
     name: 'InfoDisplayPanel',
     element: 'section',
     category: 'business',
-    description: '信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。',
+    description: '信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。',
     componentFile: './components/InfoDisplayPanel.jsx',
     tokensFile: './components/InfoDisplayPanel.tokens.js',
     props: [
@@ -1344,6 +1344,7 @@ export const COMPONENTS = [
       '【不适用场景】整页客服工作台外框用 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，顺序始终保持传入时的原始顺序。',
@@ -1360,6 +1361,7 @@ export const COMPONENTS = [
       '【组合关系】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: [

package/src/_b_end_runtime/page-patterns/ChatConversationPattern.jsx

@@ -22,8 +22,9 @@ import ChatMessage, {
  *   - 800px 居中对话流
  *
  * 状态：
- *   - phase = 'chat'    → 默认进入，展示端到端 mock 对话（覆盖全部 ChatMessage 子组件）
- *   - phase = 'welcome' → 点「新会话」清空回到欢迎屏（Hero + 居中 ChatInput + 推荐 prompt）
+ *   - 空对话 / 新建会话态 → 当消息为空时，必须展示新建会话页面（Hero + 居中 ChatInput + 推荐 prompt）
+ *   - phase = 'chat'      → 有消息时展示消息流
+ *   - phase = 'welcome'   → 点「新会话」后进入空对话 / 新建会话态
  *
  * 关键词路由（输入框发送文本时）：
  *   - 含「整理 / 分析 / 生成 / 梳理」 → 走完整任务规划链路：
@@ -325,9 +326,15 @@ function messageToChatProps(msg, isLatest, handlers = {}) {
 
 export default function ChatConversationPattern({
   title = '抖音电商客服售后政策梳理',
+  initialMessages,
 }) {
-  const [phase, setPhase] = useState('chat'); // 'chat' | 'welcome'
-  const [messages, setMessages] = useState(buildInitMessages);
+  const resolvedInitialMessagesRef = useRef(
+    Array.isArray(initialMessages) ? initialMessages : buildInitMessages(),
+  );
+  const [messages, setMessages] = useState(() => resolvedInitialMessagesRef.current);
+  const [phase, setPhase] = useState(() => (
+    resolvedInitialMessagesRef.current.length === 0 ? 'welcome' : 'chat'
+  )); // 'chat' | 'welcome'
   /* ── ChatInput 受控状态机 ──
    * inputView：'default' | 'replying' | 'busy'
    *   · default  → 静止 / 失焦 / AI 完成回复（含 replying & busy 完成）
@@ -361,7 +368,7 @@ export default function ChatConversationPattern({
   /* 自动滚到底：用 ResizeObserver 监听消息容器内容高度变化
    * 覆盖所有场景：新消息追加、流式 step 逐步推出、ChatMessage 内部折叠展开 */
   useEffect(() => {
-    if (phase !== 'chat') return undefined;
+    if (phase !== 'chat' || messages.length === 0) return undefined;
     const el = scrollRef.current;
     if (!el) return undefined;
     const inner = el.firstElementChild;
@@ -371,12 +378,14 @@ export default function ChatConversationPattern({
     });
     ro.observe(inner);
     return () => ro.disconnect();
-  }, [phase]);
+  }, [phase, messages.length]);
 
   /* 重置回欢迎状态 */
   const handleNewSession = useCallback(() => {
     setMessages([]);
     setPhase('welcome');
+    setPrefillText('');
+    setPrefillSeed((s) => s + 1);
   }, []);
 
   /* ── 取消链路：用户在任务规划卡里点「取消」 ──
@@ -610,9 +619,10 @@ export default function ChatConversationPattern({
   }, [handleNewSession]);
 
   const lastIdx = messages.length - 1;
+  const isNewConversationState = phase === 'welcome' || messages.length === 0;
 
-  /* 当前阶段标题：欢迎屏标题简化为「新会话」 */
-  const displayTitle = phase === 'welcome' ? '新会话' : title;
+  /* 当前阶段标题：空对话 / 新建会话态统一显示「新会话」 */
+  const displayTitle = isNewConversationState ? '新会话' : title;
 
   return (
     <div
@@ -625,9 +635,18 @@ export default function ChatConversationPattern({
         border: '1px solid var(--color-border-default, #E4E7EC)',
       }}
     >
-      <TopBar title={displayTitle} onNewSession={handleNewSessionFull} disableNewSession={phase === 'welcome'} />
+      <TopBar title={displayTitle} onNewSession={handleNewSessionFull} disableNewSession={isNewConversationState} />
 
-      {phase === 'chat' ? (
+      {isNewConversationState ? (
+        <NewConversationPhase
+          onSend={handleSend}
+          onStop={handleStop}
+          onPrefill={prefillInput}
+          inputView={inputView}
+          prefillText={prefillText}
+          prefillSeed={prefillSeed}
+        />
+      ) : (
         <ChatPhase
           scrollRef={scrollRef}
           messages={messages}
@@ -643,15 +662,6 @@ export default function ChatConversationPattern({
           prefillText={prefillText}
           prefillSeed={prefillSeed}
         />
-      ) : (
-        <WelcomePhase
-          onSend={handleSend}
-          onStop={handleStop}
-          onPrefill={prefillInput}
-          inputView={inputView}
-          prefillText={prefillText}
-          prefillSeed={prefillSeed}
-        />
       )}
     </div>
   );
@@ -755,10 +765,10 @@ function ChatPhase({ scrollRef, messages, lastIdx, handlers, onSend, onStop, inp
 }
 
 /* ============================================================
- * WelcomePhase — 欢迎阶段：CATCAT 头像 + OLA AI 标题 + 欢迎语 + 推荐 chip
- * 复用 CopilotPagePattern 的欢迎态视觉，ChatInput 仍底部吸底
+ * NewConversationPhase — AI 对话页的唯一空会话 / 新建会话页面
+ * 当 messages 为空时，必须展示该页面；复用 Copilot welcome 视觉，ChatInput 仍底部吸底
  * ============================================================ */
-function WelcomePhase({ onSend, onStop, onPrefill, inputView, prefillText, prefillSeed }) {
+function NewConversationPhase({ onSend, onStop, onPrefill, inputView, prefillText, prefillSeed }) {
   return (
     <>
       {/* 中部 hero：自适应剩余高度，居中展示头像/标题/欢迎语/chips */}
@@ -936,12 +946,14 @@ function TopBar({ title, onNewSession, disableNewSession }) {
             icon={<Icon name="message-plus-square-stroked" />}
             onClick={onNewSession}
             disabled={disableNewSession}
+            tooltip="新建会话"
             aria-label="新建会话"
           />
           <Button
             variant="ghost-black"
             iconOnly
             icon={<Icon name="clock-rewind-stroked" />}
+            tooltip="历史记录"
             aria-label="历史记录"
           />
         </div>

package/src/_b_end_runtime/page-patterns/ChatHomePagePattern.jsx

@@ -262,7 +262,7 @@ export default function ChatHomePagePattern() {
           </div>
         </div>
 
-        {/* ③ 卡片网格（随页面整体滚动，左右 40px） */}
+        {/* ③ 卡片网格（当前直接坐浅灰页面底，所以统一使用白底 Card 做内容承载） */}
         <div
           className="shrink-0"
           style={{ padding: '0 40px 32px' }}

package/src/_b_end_runtime/page-patterns/CopilotPagePattern.jsx

@@ -91,7 +91,7 @@ function TopBar({ copilotOpen, onToggleCopilot }) {
 function TopBarLead({ copilotOpen, onToggleCopilot }) {
   return (
     <>
-      <Button variant="outline-black" iconOnly icon={<Icon name="arrow-left-stroked" />} aria-label="返回" />
+      <Button variant="outline-black" iconOnly icon={<Icon name="arrow-left-stroked" />} tooltip="返回" aria-label="返回" />
 
       <span
         className="font-semibold text-base leading-[22px] whitespace-nowrap"
@@ -158,7 +158,7 @@ function TopBarActions() {
       </div>
 
       <div className="flex items-center gap-2">
-        <Button variant="ghost-black" iconOnly icon={<Icon name="dots-horizontal-stroked" />} aria-label="更多" />
+        <Button variant="ghost-black" iconOnly icon={<Icon name="dots-horizontal-stroked" />} tooltip="更多" aria-label="更多" />
         <Button variant="outline-black">次操作</Button>
         <Button variant="primary" icon={<Icon name="plus-stroked" />}>主操作</Button>
       </div>
@@ -191,9 +191,9 @@ function CopilotPanel({ onClose }) {
           </span>
         </div>
         <div className="flex items-center gap-0.5 shrink-0">
-          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} aria-label="新建会话" />
-          <Button variant="ghost-black" iconOnly icon={<Icon name="clock-stroked" />} aria-label="历史记录" />
-          <Button variant="ghost-black" iconOnly icon={<Icon name="layout-left-stroked" />} aria-label="收起面板" onClick={onClose} />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} tooltip="新建会话" aria-label="新建会话" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="clock-stroked" />} tooltip="历史记录" aria-label="历史记录" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="layout-left-stroked" />} tooltip="收起面板" aria-label="收起面板" onClick={onClose} />
         </div>
       </div>
 
@@ -362,7 +362,7 @@ function ContentCard() {
 
           <Button variant="ghost-black">流程单测</Button>
           <Button variant="ghost-black">批量测试</Button>
-          <Button variant="ghost-black" iconOnly icon={<Icon name="git-branch-02-stroked" />} aria-label="对比" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="git-branch-02-stroked" />} tooltip="对比" aria-label="对比" />
         </div>
       </div>
 

package/src/_b_end_runtime/page-patterns/IMConversationPattern.jsx

@@ -453,19 +453,18 @@ function IMThreadHeader({ thread }) {
 
 function ThreadActionButton({ action, ariaExpanded, onClick, ref }) {
   return (
-    <Tooltip content={action.label} placement="top" triggerClassName="inline-flex shrink-0">
-      <Button
-        ref={ref}
-        type="button"
-        variant="ghost-black"
-        size="md"
-        iconOnly
-        aria-label={action.label}
-        aria-expanded={ariaExpanded}
-        onClick={onClick}
-        icon={<Icon name={action.iconName} size="sm" aria-hidden="true" />}
-      />
-    </Tooltip>
+    <Button
+      ref={ref}
+      type="button"
+      variant="ghost-black"
+      size="md"
+      iconOnly
+      tooltip={action.label}
+      aria-label={action.label}
+      aria-expanded={ariaExpanded}
+      onClick={onClick}
+      icon={<Icon name={action.iconName} size="sm" aria-hidden="true" />}
+    />
   );
 }
 

package/src/_b_end_runtime/page-patterns/TabTopBarListPage.jsx

@@ -279,6 +279,7 @@ export default function TabTopBarListPage({ onCreateQA }) {
             variant="ghost-black"
             iconOnly
             icon={<Icon name="dots-horizontal-stroked" />}
+            tooltip="更多操作"
             aria-label="更多操作"
           />
           <Button variant="outline-black">知识测试</Button>
@@ -468,6 +469,7 @@ function DetailPanel({ card, typeLabel, open }) {
                 variant="ghost-black"
                 iconOnly
                 icon={<Icon name="dots-horizontal-stroked" />}
+                tooltip="更多操作"
                 aria-label="更多操作"
               />
               <Button

package/src/_b_end_runtime/patterns.js

@@ -47,6 +47,7 @@ export const PATTERNS = [
       '【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 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、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。',
@@ -56,6 +57,8 @@ export const PATTERNS = [
       '【右侧纯白卡语义】右侧纯白色主卡定义的是“当前处理对象的完整工作区”，不是两个彼此独立的小组件容器。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，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。',
@@ -208,7 +211,7 @@ export default function MyPage({ defaultSelectedItemId = 'example-1' }) {
       '【框架不动】外框灰底 + 左侧 `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';
@@ -284,7 +287,7 @@ export default function ChatHomePage() {
             </div>
           </div>
 
-          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}
+          {/* 卡片列表：当前直接坐浅灰页面底，所以卡片统一使用白底 Card；若未来改成纯白容器，必须同步切换为 grey 灰底卡 */}
           <div className="shrink-0" style={{ padding: '0 40px 40px' }}>
             <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>
               {/* 👉 替换为业务卡片数据 */}
@@ -356,9 +359,10 @@ export default function ChatHomePage() {
     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 回复',
@@ -369,7 +373,7 @@ export default function ChatHomePage() {
       '【取消链路】用户点任务规划卡的「取消」：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 走完整链路',
+      '【新建会话页 = 空对话唯一标准态】只要当前会话没有消息（初次进入空会话、外部传入 `messages=[]`、或用户点击「新会话」清空消息），都必须展示统一的新建会话页：中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；底部 `ChatInput` 仍 shrink-0 吸底，placeholder 固定为"需要我为你做什么…"；禁止出现空白消息区、默认 mock 对话残留或与图示不一致的空状态。',
       '【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 任务规划卡链路（待用户点开始/取消） ② 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」 ③ 其他 → AI 短答从备选句池随机一句，避免机械化',
       '【任务规划卡 defaultConfirmed】历史消息（mock 中的已处理卡片）通过 plan.defaultConfirmed=true 让卡片初始就处于禁用置灰态；TaskPlanCard 内部用 useState(plan.defaultConfirmed === true) 初始化 confirmed，并用 useEffect 同步 props 变化',
     ],

package/src/_b_end_runtime/preview-registry.jsx

@@ -1241,10 +1241,10 @@ export const PREVIEW_REGISTRY = {
       }
 
       if (color === 'grey') {
-        lines.push('/* 白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
+        lines.push('/* 所有 Card 分类都遵守同一规则：白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
         lines.push('<div className="bg-white p-6">');
       } else {
-        lines.push('/* 灰色背景容器里，推荐使用白底 Card 做内容承载 */');
+        lines.push('/* 所有 Card 分类都遵守同一规则：灰色、浅灰或其他非纯白背景容器里，推荐使用白底 Card 做内容承载 */');
         lines.push('<div className="bg-blueGrey-200 p-6">');
       }
       lines.push('  <Card');

package/src/index.d.ts

@@ -155,7 +155,7 @@ export interface TagBarProps extends TfdsCommonProps {
 }
 export const TagBar: React.FC<TagBarProps>;
 
-/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。 */
+/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。 */
 export interface CardProps extends TfdsCommonProps {
   /** enum<data | product | info | info2 | animated>, default: "data" */
   type?: "data" | "product" | "info" | "info2" | "animated";
@@ -261,7 +261,7 @@ export interface ConversationListProps extends TfdsCommonProps {
 }
 export const ConversationList: React.FC<ConversationListProps>;
 
-/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。 */
+/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。 */
 export interface InfoDisplayPanelProps extends TfdsCommonProps {
   /** array, default: null */
   panels?: unknown[];