@tfdesign/b-end 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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-10T14:01:13.258Z",
+  "generatedAt": "2026-05-10T17:49:25.351Z",
   "summary": "B 端 COMPONENTS 36 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tf-designsystem/b-end。",
   "components": [
     {
@@ -337,7 +337,7 @@
       "kind": "component",
       "name": "NavBar",
       "category": "business",
-      "description": "业务竖向导航栏，集成品牌区、业务入口切换、平台首页模块高亮、主导航、底部工具按钮和用户头像。",
+      "description": "业务竖向导航栏，集成品牌区、业务入口切换、统一 navItems 主导航、底部工具按钮和用户头像。",
       "import": {
         "from": "@tf-designsystem/b-end",
         "default": "NavBar"
@@ -391,6 +391,11 @@
           "type": "string",
           "default": "平台首页"
         },
+        {
+          "name": "moduleIconName",
+          "type": "string",
+          "default": "home-smile-stroked"
+        },
         {
           "name": "activeModule",
           "type": "boolean",
@@ -465,16 +470,16 @@
         "【ByteHi 限定】platform=\"bytehi\" 仅限明确提到“客服工作台”相关页面场景时使用，例如“客服工作台首页”“在线客服工作台”“客服工作台会话页”。普通客服、服务、体验、治理、策略、知识、工具、洞察等页面都不要自动切换 ByteHi，仍默认使用 OLA 类型菜单栏。",
         "【提示词】未显式传 platform 时，默认使用 OLA；只有 prompt / promptText 明确包含“客服工作台”时才默认使用 ByteHi。显式传 platform 时以显式值为准，但 AI 生成页面时不得在非客服工作台场景主动传 platform=\"bytehi\"。",
         "【站点级骨架】`NavBar` 是平台级站点导航锚点，不是普通内容区组件。只要页面使用 `NavBar`，一级骨架默认必须是左侧固定导航 + 右侧弹性主工作区的横向 app shell；`NavBar` 永远默认位于页面最左侧",
-        "【结构】OLA 固定由顶部品牌区、业务入口卡、分割线、主导航滚动区、可选底部操作按钮和用户头像组成；其中 moduleLabel 与主导航项同层级并一起滚动",
+        "【结构】OLA 固定由顶部品牌区、业务入口卡、分割线、主导航滚动区、可选底部操作按钮和用户头像组成；平台首页与其余菜单统一在 navItems 内配置并一起滚动",
         "【布局位置】`NavBar` 必须放在页面一级容器中作为 `shrink-0` 固定区；右侧主内容区用 `flex-1 min-w-0 flex flex-col overflow-hidden`。⛔ 禁止把 `NavBar` 放进白卡，⛔ 禁止把 `NavBar` 放到顶部 header，⛔ 禁止与主内容做上下排列",
         "【尺寸】OLA 版宽度固定 120px；ByteHi 版外层布局占位宽度始终固定为 60px，hover / focus 展开时仅内部面板宽度变为 180px，左侧边缘保持固定并向右覆盖页面内容，不触发右侧主内容区重新布局或被挤压；两者高度都默认跟随父容器撑满，设计稿示例高度为 1080px",
         "【业务入口】业务入口卡始终作为首个高亮块展示，承载当前业务域名与图形标识，不与普通导航项混排；在 OLA 下它不是普通菜单项，而是一个可点击切换的业务方按钮，点击后展开抖音业务方下拉列表",
         "【业务入口下拉】OLA 的业务方下拉样式应复用 TagBar 的业务切换视觉语言：黑底业务图标 + 文字 + 白底浮层列表 + 当前项 check；下拉面板选项之间的上下间距固定使用 `gap-1 / --spacing-1 / 4px`；推荐通过 `appBusinesses` / `currentAppId` / `onAppChange` 控制，默认提供抖音社区 / 抖音生活服务 / 抖音电商三项",
-        "【首页归属】当 AI 新生成一个带 NavBar 的页面，且业务没有明确指定所属菜单时，默认必须归属于第一个菜单入口 `moduleLabel`，即 OLA 的“平台首页”。当用户明确描述某个页面为“首页 / 平台首页 / 工作台首页 / 首页看板”时，也必须默认选中 `moduleLabel=\"平台首页\"`，保持 activeModule=true，不要误选“策略管理”“知识与案例”等普通主导航项。",
-        "【模块】moduleLabel 对应当前主工作区首页，默认文案为“平台首页”；activeModule=true 时使用次级白底 + 白描边 + 主文字 + 品牌色图标；hover 时背景提升到纯白。OLA 中 moduleLabel 是第一层菜单项，不是装饰标题；它与下方“策略管理 / 知识与案例 / 工具管理 / 对话洞察 / 智能盯盘”等主导航项属于同一套可选中菜单体系。",
-        "【导航】moduleLabel 与主导航项都使用 88px × 60px 的固定按钮规格；默认灰字灰图标，hover 进入次级白底但不改字色，selectedItemId / activeNavId 命中时提升为高亮块，图标切换到品牌色",
-        "【自由切换】所有菜单栏项都必须支持自由切换，包括 OLA 的平台首页 module、所有 navItems、可选 utilityItems，以及 ByteHi 的完整导航项。生成页面时必须接入 `selectedItemId` + `onSelect` 受控模式，或至少保留组件非受控点击选中能力；禁止把菜单项做成只展示不可点击的静态文字，也禁止只让当前页菜单可点、其它菜单不可切换。",
-        "【选中状态源】推荐外层页面维护单一 `currentNavId`，通过 `<NavBar selectedItemId={currentNavId} onSelect={setCurrentNavId} />` 驱动右侧主内容切换。首页默认值使用 `\"module\"`；普通导航使用对应 navItems.id；底部工具使用 utilityItems.id。不要同时混用 activeModule、activeNavId、activeUtilityId 和 selectedItemId 造成多个选中源。",
+        "【首页归属】当 AI 新生成一个带 NavBar 的页面，且业务没有明确指定所属菜单时，默认必须归属于 navItems 第一个菜单入口，即 OLA 的“平台首页”。当用户明确描述某个页面为“首页 / 平台首页 / 工作台首页 / 首页看板”时，也必须默认选中 `selectedItemId=\"home\"`，不要误选“策略管理”“知识与案例”等其它主导航项。",
+        "【首页项】平台首页是 navItems[0]，默认配置为 `{ id: \"home\", label: \"平台首页\", iconName: \"home-smile-stroked\" }`；moduleLabel / moduleIconName 仅作为未传 navItems 时生成默认首页项的兼容入口，不再单独渲染独立 module 按钮。",
+        "【导航】平台首页与其它主导航项都使用 88px × 60px 的固定按钮规格；默认灰字灰图标，hover 进入次级白底但不改字色，selectedItemId / activeNavId 命中时提升为高亮块，图标切换到品牌色",
+        "【自由切换】所有菜单栏项都必须支持自由切换，包括 OLA 的平台首页 home、所有 navItems、可选 utilityItems，以及 ByteHi 的完整导航项。生成页面时必须接入 `selectedItemId` + `onSelect` 受控模式，或至少保留组件非受控点击选中能力；禁止把菜单项做成只展示不可点击的静态文字，也禁止只让当前页菜单可点、其它菜单不可切换。",
+        "【选中状态源】推荐外层页面维护单一 `currentNavId`，通过 `<NavBar selectedItemId={currentNavId} onSelect={setCurrentNavId} />` 驱动右侧主内容切换。首页默认值使用 `\"home\"`；普通导航使用对应 navItems.id；底部工具使用 utilityItems.id。不要同时混用 activeModule、activeNavId、activeUtilityId 和 selectedItemId 造成多个选中源。",
         "【工具】showUtilityActions=false 时默认隐藏底部操作按钮；OLA 开启后展示铃铛与设置，ByteHi 开启后展示操作指南与消息，关闭时只保留网络信息区和头像区；底部按钮支持选中态，选中后容器与主导航保持同一套高亮逻辑",
         "【ByteHi】ByteHi 版收起态不显示阴影，仅在 hover 或聚焦展开后显示阴影；展开面板必须是覆盖层，不得撑宽 NavBar 的布局占位，也不得挤压右侧页面内容；导航项默认使用深文字 + 45% 透明辅助态，选中态提升为白底；hover 展开后，未选中导航项文字字重固定为 `[font-weight:var(--font-medium)]`，选中导航项文字字重固定为 `[font-weight:var(--font-semibold)]`，不要使用 font-bold 或手写 700。",
         "【交互】组件支持非受控点击选中（defaultSelectedItemId）和受控选中（selectedItemId + onSelect）；hover 与 selected 的菜单项宽高必须保持一致",
@@ -489,7 +494,7 @@
         },
         {
           "label": "真实平台名称",
-          "code": "<NavBar brandName=\"体验服务\" selectedItemId=\"module\" onSelect={(nextId) => setCurrentNavId(nextId)} />"
+          "code": "<NavBar brandName=\"体验服务\" selectedItemId=\"home\" onSelect={(nextId) => setCurrentNavId(nextId)} />"
         },
         {
           "label": "业务方切换",
@@ -513,11 +518,11 @@
         },
         {
           "label": "首页默认选中平台首页",
-          "code": "<NavBar selectedItemId=\"module\" onSelect={(nextId) => setCurrentNavId(nextId)} />"
+          "code": "<NavBar selectedItemId=\"home\" onSelect={(nextId) => setCurrentNavId(nextId)} />"
         },
         {
           "label": "策略页高亮",
-          "code": "<NavBar activeModule={false} activeNavId=\"strategy\" />"
+          "code": "<NavBar activeNavId=\"strategy\" />"
         },
         {
           "label": "受控选中",
@@ -553,7 +558,7 @@
         },
         {
           "label": "❌ Bad（菜单不可切换）",
-          "code": "/* 禁止！只画出菜单文字但不接 onSelect / selectedItemId，也不保留组件点击选中能力 */\n<NavBar selectedItemId=\"module\" />"
+          "code": "/* 禁止！只画出菜单文字但不接 onSelect / selectedItemId，也不保留组件点击选中能力 */\n<NavBar selectedItemId=\"home\" />"
         },
         {
           "label": "❌ Bad（非客服工作台误用 ByteHi）",
@@ -843,7 +848,7 @@
       "kind": "component",
       "name": "Card",
       "category": "business",
-      "description": "业务信息摘要卡片，支持数据卡片、商品卡片和信息卡片三类结构。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
+      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
       "import": {
         "from": "@tf-designsystem/b-end",
         "default": "Card"
@@ -855,7 +860,9 @@
           "options": [
             "data",
             "product",
-            "info"
+            "info",
+            "info2",
+            "animated"
           ],
           "default": "data"
         },
@@ -977,6 +984,34 @@
           ],
           "default": "inverse"
         },
+        {
+          "name": "animatedTone",
+          "type": "enum",
+          "options": [
+            "brand",
+            "blue",
+            "purple",
+            "green",
+            "orange",
+            "grey"
+          ],
+          "default": "grey"
+        },
+        {
+          "name": "animatedIconName",
+          "type": "string",
+          "default": "magic-wand-01-stroked"
+        },
+        {
+          "name": "animatedBadge",
+          "type": "string",
+          "default": "AI 推荐"
+        },
+        {
+          "name": "animatedActionText",
+          "type": "string",
+          "default": "立即体验"
+        },
         {
           "name": "infoMetaLabel",
           "type": "string",
@@ -1035,30 +1070,41 @@
       ],
       "rules": [
         "【字重实现规范】涉及 semibold / bold 的运行时字重时，不要直接依赖 `font-semibold`、`font-bold` 等 Tailwind 语义类；统一改用显式 `font-weight` token 写法：600 → `[font-weight:var(--font-semibold)]`，700 → `[font-weight:var(--font-bold)]`（需提高优先级时对整条任意属性加 Tailwind important 前缀）。原因：Tailwind v4 下以 `--font-` 开头的 token 名可能被误解析到 font-family 语义，导致字重不稳定。分档与典型落点见 Skill `GLOBAL_DESIGN_RULES.md` §2.2：`FormTitle`/表单字段标题/会话列表项标题/Button/Tabs 选中等主路径为 600；700 仅组件 rules 已约定处。",
-        "【类型】type=data 为数据卡片；type=product 为商品卡片 / 业务对象卡；type=info 为信息卡片，用于展示带图标、主副标题和底部辅助信息的业务信息对象。",
-        "【数据卡片适用场景】数据卡片不仅适用于指标摘要、趋势分析、服务能力入口和工具入口，也适用于模板、脚本、案例类内容入口，例如优秀知识模版、优秀案例模版、脚本模版、话术模版、内容生成模版、服务 SOP 模版等。此类内容仍使用数据卡片的摘要入口结构：标题 + 描述 + 可选指标/元信息 + 标签 + 右侧进入箭头；如果需要突出缩略图/封面图或具体商品、订单、附件对象，应改用商品卡片；如果需要强调 AI 能力、智能体、知识库或应用服务身份，应优先使用信息卡片。",
-        "【数据卡片结构】上半区固定为标题 + 描述 + 1-3 项指标，下半区为左下角标签 + 右侧单步进入按钮。数据卡片支持可选右侧图标：默认 `dataIconVisible=\"hidden\"` 不显示图标；需要图标时设置 `dataIconVisible=\"visible\"` 并传入 `dataIconName`，标题/描述/指标区域居左，图标容器 48×48px、圆角必须使用 rounded-xl token（16px），仅显示在数据卡片右上角并与文字区域顶部对齐，图标与左侧标题内容区左右间距必须等于数据卡片四周 padding，即 p-5 / 20px。图标样式复用信息卡片同名容器逻辑：`dataIconStyle=\"inverse\"` 为黑底白 icon（默认），`dataIconStyle=\"tone\"` 为彩色浅底；色系通过 `dataIconTone` 选取。",
-        "【信息卡片结构】信息卡片支持两种布局：`infoLayout=\"icon-right\"` 为默认布局，即“图标在右”；左侧承载标题/副标题/底部辅助信息，图标整体放在最右侧，状态徽标紧跟主标题右侧。`infoLayout=\"default\"` 即“图标在左”；左侧固定 48px 图标容器，右侧上半区为主标题 + 副标题 + 右上角状态徽标，底部为辅助显示区。信息卡片图标与标题内容区左右间距必须等于信息卡片四周 padding，即 p-6 / 24px。信息卡片适合内容对象、智能体、知识库、应用、服务入口等需要“图标 + 长说明 + 关键辅助信息”的场景。",
-        "【信息卡片主图标】左侧主视觉定义为图标，不使用图片。默认复用组件库 Icon（magic-wand-01-stroked），图标容器为 48×48px、内部图标 24px、圆角 12px。图标支持两层配置：`infoIconStyle` 控制样式，`infoIconTone` 控制色系。默认使用 `infoIconStyle=\"inverse\"`，即黑背景 + 白色 icon 的反色样式；当 `infoIconStyle=\"tone\"` 时走彩色浅底图标容器，并通过 infoIconTone 选择 pink / blue / green / orange / purple / brand / grey，每种都使用同色系 50 背景、100 浅描边、600 或品牌强调图标色。禁止手写 className / style 覆盖图标容器颜色。",
-        "【信息卡片基础组件复用】信息卡片内部禁止手搓标签、标题、图标和头像：主图标和底部辅助项图标必须复用 Icon；主副标题必须复用 FormTitle（variant=form / showDescription）；徽标必须复用 Tag；昵称头像必须复用 Avatar。辅助数字/名称文案使用 Card 内置文字 token 承载，不新增 Text/Typography 组件。",
-        "【信息卡片身份区】默认模拟抖音官方 AI 能力场景：infoMetaBadge 使用“官方能力”，徽标必须复用 Tag variant，可表达官方能力、内测中、已启用、异常、推荐、Beta 等状态。徽标颜色必须与 infoIconStyle 联动：`infoIconStyle=\"tone\"`（彩色浅底）时一律使用 grey 标签样式；`infoIconStyle=\"inverse\"`（黑底白标）时默认使用彩色标签样式，并按 purple（紫色）/ teal（青绿色）/ blue（蓝色）/ cyan（青色）/ orange（橙色）的优先级选色，运行时默认使用 purple，业务可通过 infoMetaBadgeVariant 显式指定这组推荐彩色 Tag variant。信息卡片无论 `infoLayout=\"default\"` 还是 `infoLayout=\"icon-right\"`，徽标都必须紧跟主标题右侧展示，标题与徽标间距固定 8px，且标题文字与徽标需要在同一标题行内垂直居中对齐，不允许把徽标推到标题行最右端。infoMetaLabel 默认使用“段然”，固定在底部左侧，字号 12px，左侧必须显示 Avatar 最小尺寸 token（size=xxs，16px），默认头像使用本地成员头像 team-avatar-assets/duan-ran.png；业务可通过 infoMetaLabel / infoMetaAvatarSrc / infoMetaAvatarAlt 动态适配创建人、负责人、智能体归属或团队头像；头像与名称间距固定 8px，头像图片需取消额外 translate/scale 偏移，保证与文字同一行垂直居中。",
-        "【标题右侧标签统一规则】信息卡片的徽标标签不论图标在左还是图标在右，都必须紧跟主标题右侧展示；凡是使用 `infoLayout=\"icon-right\"` 的卡片，默认标签也必须紧跟主标题右侧展示，不允许被推到标题行最右端；标题与标签固定间距 8px，并在同一标题行内垂直居中对齐。该规则同时适用于商品卡片 icon-right 状态标签和信息卡片所有布局的徽标标签。",
+        "【类型】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。",
+        "【数据卡片结构】上半区固定为标题 + 描述 + 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适合内容对象、智能体、知识库、应用、服务入口等需要“图标 + 长说明 + 关键辅助信息”的场景。",
+        "【信息卡片1主图标】左侧主视觉定义为图标，不使用图片。默认复用组件库 Icon（magic-wand-01-stroked），图标容器为 48×48px、内部图标 24px、圆角 12px。图标支持两层配置：`infoIconStyle` 控制样式，`infoIconTone` 控制色系。默认使用 `infoIconStyle=\"inverse\"`，即黑背景 + 白色 icon 的反色样式；当 `infoIconStyle=\"tone\"` 时走彩色浅底图标容器，并通过 infoIconTone 选择 pink / blue / green / orange / purple / brand / grey；彩色系使用同色系 50 背景、100 浅描边、600 或品牌强调图标色，grey 色系图标背景固定使用 fill-default，描边固定使用 border-default。禁止手写 className / style 覆盖图标容器颜色。",
+        "【信息卡片1图标 Hover】仅当 `infoIconStyle=\"tone\"` 彩色浅底时，卡片 hover 后主图标容器必须自动切换为当前 infoIconTone 对应的 hover 背景、纯白 icon、透明描边：pink→pink-500、brand→brand-500、blue→blue-500、purple→purple-500、green→green-500、orange→orange-500、grey→black。`infoIconStyle=\"inverse\"` 黑底白标不参与此 hover 变色。",
+        "【信息卡片1基础组件复用】信息卡片1内部禁止手搓标签、标题、图标和头像：主图标和底部辅助项图标必须复用 Icon；主副标题必须复用 FormTitle（variant=form / showDescription）；徽标必须复用 Tag；昵称头像必须复用 Avatar。辅助数字/名称文案使用 Card 内置文字 token 承载，不新增 Text/Typography 组件。",
+        "【信息卡片1身份区】默认模拟抖音官方 AI 能力场景：infoMetaBadge 使用“官方能力”，徽标必须复用 Tag variant，可表达官方能力、内测中、已启用、异常、推荐、Beta 等状态。徽标颜色必须与 infoIconStyle 联动：`infoIconStyle=\"tone\"`（彩色浅底）时一律使用 grey 标签样式；`infoIconStyle=\"inverse\"`（黑底白标）时默认使用彩色标签样式，并按 purple（紫色）/ teal（青绿色）/ blue（蓝色）/ cyan（青色）/ orange（橙色）的优先级选色，运行时默认使用 purple，业务可通过 infoMetaBadgeVariant 显式指定这组推荐彩色 Tag variant。信息卡片1无论 `infoLayout=\"default\"` 还是 `infoLayout=\"icon-right\"`，徽标都必须紧跟主标题右侧展示，标题与徽标间距固定 8px，且标题文字与徽标需要在同一标题行内垂直居中对齐，不允许把徽标推到标题行最右端。infoMetaLabel 默认使用“段然”，固定在底部左侧，字号 12px，左侧必须显示 Avatar 最小尺寸 token（size=xxs，16px），默认头像使用本地成员头像 team-avatar-assets/duan-ran.png；业务可通过 infoMetaLabel / infoMetaAvatarSrc / infoMetaAvatarAlt 动态适配创建人、负责人、智能体归属或团队头像；头像与名称间距固定 8px，头像图片需取消额外 translate/scale 偏移，保证与文字同一行垂直居中。",
+        "【标题右侧标签统一规则】信息卡片1的徽标标签不论图标在左还是图标在右，都必须紧跟主标题右侧展示；凡是使用 `infoLayout=\"icon-right\"` 的卡片，默认标签也必须紧跟主标题右侧展示，不允许被推到标题行最右端；标题与标签固定间距 8px，并在同一标题行内垂直居中对齐。该规则同时适用于商品卡片 icon-right 状态标签和信息卡片1所有布局的徽标标签。",
         "【商品卡片适用场景】适用于客服工作台、企业后台、信息查询、商品信息、订单信息等需要在紧凑空间展示“图片 + 关键文字 + 状态”的业务对象场景；对象可以是商品、订单、门店、内容素材、工单附件或查询结果，不仅限商品",
         "【触发条件】当用户需要快速识别一个具体业务对象，并在同一视线内判断当前状态或处理进度时使用；典型位置包括 IM 对话上下文、订单详情摘要、检索结果卡片、关联商品/订单信息块、后台审核或售后处理侧栏",
         "【不适用场景】纯指标摘要、趋势解读、统计入口使用 type=data；需要展示 3 个以上结构化字段、批量比较或排序筛选时优先使用 Table / 列表模板；需要突出大图检查时不要压缩成 56px 商品卡片",
         "【商品卡片结构】商品卡片支持 `infoLayout=\"default\" | \"icon-right\"` 两种主视觉布局。`default` 为左侧商品图 + 右侧标题/副标题/状态；`icon-right` 为左侧标题/副标题/状态，商品图整体移动到右侧。缩略图尺寸固定 56px，圆角 12px（--radius-lg）；商品图与标题内容区左右间距必须等于商品卡片四周 padding，即 p-5 / 20px；封面图高度必须与文案区总高保持一致；未传 productImageSrc 时使用与 Upload 图片预览一致的蓝色图片占位",
         "【商品状态】商品卡片标题栏显示状态 Tag，默认模板为绿色大标签“已使用”，不要放在主标题左侧；`default` 布局下标签位于标题行右上位置，`icon-right` 布局下标签必须紧跟主标题右侧，间距固定 8px。Tag 文案应根据真实业务状态替换，例如“待处理”“退款中”“已完成”“已失效”“审核中”。颜色按语义选择：成功/可用用 green，等待/处理中用 orange，失败/异常用 red，关闭/草稿/失效用 grey；保持 size=l、radius=md",
         "【商品文案】标题最多 1 行，字号统一为 text-base / 16px / 600，优先放用户识别对象所需的名称 / 订单号 / 关键标识；副标题最多 1 行，用于展示数量、价格、规格、订单金额、下单时间、售后进度等辅助信息；不要把长说明、操作指引或多段备注塞入副标题",
-        "【信息卡片文案】默认文案按抖音官方 AI 能力模拟，标题为“抖音 AI 创作助手”，副标题说明短视频脚本、标题推荐、封面文案和热点灵感生成能力。标题建议 1 行，字号统一为 text-base / 16px / 600；副标题建议 2 行内，字号 12px / 400，不要堆叠多段正文。底部辅助项通过 infoStats 自定义，数据结构固定为 `{ iconName, value }`，建议 2-4 项，可表达启用量、评分、调用量、响应率、转化率、更新时间、操作入口等不同类型；默认使用“启用量 / 评分 / 立即体验”，并与数据卡片指标行保持一致：图标 14px、文字 12px / 400、项间距 20px；底部整栏所有头像、图标、文字必须保持 16px 行高内垂直居中并对齐到同一行。",
+        "【信息卡片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 推荐”、操作文案“立即体验”。",
+        "【信息卡片2标签】info2 的 animatedBadge 固定展示在左下角，必须与标题左边界对齐，并与右下角圆形箭头操作按钮保持同一行垂直居中。标签默认一律使用 Tag variant=\"white\" + fontWeight=\"regular\"，不跟随 animatedTone，禁止把标签放到右上角。",
+        "【信息卡片2操作】右下角操作入口必须复用数据卡片同款圆形箭头按钮样式和交互：28×28px、圆形、默认透明描边 + text-tertiary 图标，卡片 hover 或按钮 hover 时变为黑色描边与黑色箭头，按下 active:scale-[0.96]。animatedActionText 只作为操作语义文案，不直接渲染为文字按钮。",
+        "【信息卡片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 分类（数据卡片、商品卡片、信息卡片1、信息卡片2）都必须优先展示“颜色”配置项，并提供白底 / 灰底两种选择。平台预览中切换右上角画布底色时，卡片颜色必须按反衬规则自动同步：灰底画布 → 白底卡片，白底画布 → 灰底卡片。",
         "【一句话记忆】如果卡片背景环境是灰色，就选“白底”分类卡片；如果卡片背景环境是纯白色，就选“灰底”分类卡片。不要让 Card 和父级背景同色相贴。",
         "【状态】白底卡默认态使用 65% 白底 + 轻白描边；hover 后补满白底并出现业务卡片专用投影；灰底卡保持灰底与灰描边并保留投影反馈",
         "【指标】指标项推荐控制在 3 项以内，图标 14px、文字 12px，项间距 20px",
-        "【标签】通用 tags 只用于数据卡片，展示在左下角并与右侧操作按钮水平对齐；商品卡片和信息卡片禁止渲染通用 tags，主标题左侧不得出现“标签”等前缀标签，运行时会隐藏误注入的 white Tag。Card 内所有标签默认必须使用圆角矩形样式 `radius=\"md\"`，不使用全圆胶囊 `radius=\"full\"`；数据卡片、商品状态标签、信息卡片徽标都遵守该规则。数据卡片不论是否展示图标、也不论 dataIconStyle 为 tone 或 inverse，默认标签都必须统一使用 grey 标签样式。商品状态标签和信息卡片徽标仅可展示在右上角并与标题水平对齐。信息卡片徽标与 infoIconStyle 联动：`tone` 时一律 grey，`inverse` 时默认彩色 purple；卡片彩色标签优先使用 purple（紫色）/ teal（青绿色）/ blue（蓝色）/ cyan（青色）/ orange（橙色），避免优先使用 pink、red、yellow 等过强警示或装饰色。商品状态标签复用 green + l + md；不显示图标和关闭按钮，建议使用 2-4 字短标签。",
+        "【标签】通用 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 需说明目标；商品卡片不使用箭头按钮",
-        "【信息卡片语义映射】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 行、副标题 2 行，底部辅助区允许换行但不得撑破卡片宽度。"
+        "【信息卡片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 行，底部辅助区允许换行但不得撑破卡片宽度。"
       ],
       "examples": [
         {
@@ -1078,24 +1124,32 @@
           "code": "<Card type=\"product\" title=\"订单 202604300018\" description=\"共 3 件 · 实付 ¥268.00 · 退款中\" productStatus=\"退款中\" />"
         },
         {
-          "label": "信息卡片",
+          "label": "信息卡片1",
           "code": "<Card type=\"info\" infoIconName=\"magic-wand-01-stroked\" infoIconTone=\"pink\" title=\"抖音 AI 创作助手\" description=\"抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成，帮助创作者提升内容生产效率。\" infoMetaBadge=\"官方能力\" infoMetaLabel=\"段然\" />"
         },
         {
-          "label": "信息卡片（黑底白 icon）",
+          "label": "信息卡片1（黑底白 icon）",
           "code": "<Card type=\"info\" infoIconStyle=\"inverse\" infoIconName=\"magic-wand-01-stroked\" title=\"抖音 AI 创作助手\" description=\"抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成，帮助创作者提升内容生产效率。\" infoMetaBadge=\"官方能力\" infoMetaBadgeVariant=\"pink\" infoMetaLabel=\"段然\" />"
         },
         {
-          "label": "信息卡片（图标在右）",
+          "label": "信息卡片1（图标在右）",
           "code": "<Card type=\"info\" infoLayout=\"icon-right\" infoIconName=\"magic-wand-01-stroked\" infoIconTone=\"pink\" title=\"抖音 AI 创作助手\" description=\"抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成，帮助创作者提升内容生产效率。\" infoMetaBadge=\"官方能力\" infoMetaBadgeVariant=\"pink\" infoMetaLabel=\"段然\" />"
         },
         {
-          "label": "信息卡片（数据洞察）",
-          "code": "<Card type=\"info\" infoIconName=\"bar-chart-10-stroked\" infoIconTone=\"blue\" title=\"直播数据洞察\" description=\"汇总直播间流量、互动、成交和内容表现，自动生成经营分析与优化建议。\" infoMetaBadge=\"已启用\" infoMetaBadgeVariant=\"green\" infoMetaLabel=\"刘德琳\" infoStats={[{ iconName: \"users-01-stroked\", value: \"8.2K\" }, { iconName: \"trend-up-01-stroked\", value: \"转化 +12%\" }, { iconName: \"clock-stroked\", value: \"刚刚更新\" }]} />"
+          "label": "信息卡片1（数据洞察）",
+          "code": "<Card type=\"info\" infoIconName=\"bar-chart-10-stroked\" infoIconTone=\"blue\" title=\"直播数据洞察\" description=\"汇总直播间流量、互动、成交和内容表现，自动生成经营分析与优化建议。\" infoMetaBadge=\"已启用\" infoMetaBadgeVariant=\"green\" infoMetaLabel=\"刘德琳\" infoStats={[{ iconName: \"users-01-stroked\", value: \"8.2K\", tooltip: \"近 7 天直播间累计观看人数\" }, { iconName: \"trend-up-01-stroked\", value: \"转化 +12%\", tooltip: \"相较上一周期的成交转化提升幅度\" }, { iconName: \"clock-stroked\", value: \"刚刚更新\", tooltip: \"数据最近一次同步时间\" }]} />"
+        },
+        {
+          "label": "信息卡片1（风控能力）",
+          "code": "<Card type=\"info\" infoIconName=\"shield-01-stroked\" infoIconTone=\"orange\" title=\"内容安全巡检\" description=\"对视频、评论和私信内容进行风险识别，辅助运营及时处理异常内容。\" infoMetaBadge=\"内测中\" infoMetaBadgeVariant=\"orange\" infoMetaLabel=\"郭泽智\" infoStats={[{ iconName: \"alert-circle-stroked\", value: \"23 条风险\", tooltip: \"当前待处理的高风险内容数量\" }, { iconName: \"check-circle-stroked\", value: \"98.6%\", tooltip: \"系统自动识别准确率\" }]} />"
         },
         {
-          "label": "信息卡片（风控能力）",
-          "code": "<Card type=\"info\" infoIconName=\"shield-01-stroked\" infoIconTone=\"orange\" title=\"内容安全巡检\" description=\"对视频、评论和私信内容进行风险识别，辅助运营及时处理异常内容。\" infoMetaBadge=\"内测中\" infoMetaBadgeVariant=\"orange\" infoMetaLabel=\"郭泽智\" infoStats={[{ iconName: \"alert-circle-stroked\", value: \"23 条风险\" }, { iconName: \"check-circle-stroked\", value: \"98.6%\" }]} />"
+          "label": "信息卡片2",
+          "code": "<Card type=\"info2\" title=\"智能策略生成\" description=\"基于业务目标、历史数据和运营规则，自动生成可执行策略建议。\" animatedIconName=\"magic-wand-01-stroked\" animatedBadge=\"AI 推荐\" animatedActionText=\"立即体验\" onAction={() => {}} />"
+        },
+        {
+          "label": "信息卡片2（报告入口）",
+          "code": "<Card type=\"info2\" animatedTone=\"purple\" title=\"自动生成报告\" description=\"汇总核心指标、异常归因和建议动作，生成可直接复用的业务报告。\" animatedBadge=\"Beta\" animatedActionText=\"开始生成\" onAction={() => {}} />"
         },
         {
           "label": "自定义标题",
@@ -1103,7 +1157,7 @@
         },
         {
           "label": "自定义指标",
-          "code": "<Card stats={[{ iconName: \"users-01-stroked\", value: \"860\" }, { iconName: \"message-chat-square-stroked\", value: \"3,421\" }, { iconName: \"hearts-stroked\", value: \"95\" }]} onAction={() => {}} />"
+          "code": "<Card stats={[{ iconName: \"users-01-stroked\", value: \"860\", tooltip: \"近 7 天触达用户数\" }, { iconName: \"message-chat-square-stroked\", value: \"3,421\", tooltip: \"近 7 天累计会话量\" }, { iconName: \"hearts-stroked\", value: \"95\", tooltip: \"用户收藏或点赞次数\" }]} onAction={() => {}} />"
         },
         {
           "label": "自定义标签",
@@ -1124,12 +1178,45 @@
         {
           "label": "✅ Good（白色背景里用灰底 Card）",
           "code": "<div className=\"bg-white p-6\"><Card color=\"grey\" /></div>"
+        },
+        {
+          "label": "❌ Bad（用数据卡片承载订单对象）",
+          "code": "/* 禁止！订单是具体业务对象，不是指标摘要入口 */\n<Card title=\"订单 202604300018\" description=\"共 3 件 · 实付 ¥268.00 · 退款中\" stats={[{ iconName: \"package-stroked\", value: \"3 件\" }]} />"
+        },
+        {
+          "label": "✅ Good（订单对象用商品卡片）",
+          "code": "<Card type=\"product\" title=\"订单 202604300018\" description=\"共 3 件 · 实付 ¥268.00 · 退款中\" productStatus=\"退款中\" />"
+        },
+        {
+          "label": "❌ Bad（用商品卡片展示纯趋势指标）",
+          "code": "/* 禁止！趋势摘要没有具体商品图或订单对象，不应使用 product */\n<Card type=\"product\" title=\"近 7 天转化趋势\" description=\"成交转化率 +12%，互动提升 8%\" productStatus=\"上涨\" />"
+        },
+        {
+          "label": "✅ Good（趋势摘要用数据卡片）",
+          "code": "<Card title=\"近 7 天转化趋势\" description=\"成交转化率 +12%，互动提升 8%\" stats={[{ iconName: \"trend-up-01-stroked\", value: \"+12%\" }]} tags={[\"趋势\", \"经营\"]} onAction={() => {}} />"
+        },
+        {
+          "label": "❌ Bad（用信息卡片1做单步推荐入口）",
+          "code": "/* 禁止！推荐入口更强调行动，不需要身份区、头像和多项辅助指标 */\n<Card type=\"info\" title=\"智能策略生成\" description=\"一键生成可执行策略建议\" infoMetaBadge=\"AI 推荐\" />"
+        },
+        {
+          "label": "✅ Good（推荐入口用信息卡片2）",
+          "code": "<Card type=\"info2\" title=\"智能策略生成\" description=\"基于业务目标、历史数据和运营规则，自动生成可执行策略建议。\" animatedBadge=\"AI 推荐\" animatedActionText=\"立即体验\" onAction={() => {}} />"
+        },
+        {
+          "label": "❌ Bad（用信息卡片2承载商品对象）",
+          "code": "/* 禁止！商品对象需要图片/状态/关键识别信息，不应用推荐入口卡承载 */\n<Card type=\"info2\" title=\"海底捞门店通用双人套餐\" description=\"数量 1 · ¥128.00 · 月售 2,361\" animatedBadge=\"已使用\" />"
+        },
+        {
+          "label": "✅ Good（商品对象用商品卡片）",
+          "code": "<Card type=\"product\" title=\"海底捞门店通用双人套餐\" description=\"数量 1 · ¥128.00 · 月售 2,361\" productStatus=\"已使用\" />"
         }
       ],
       "keywords": [
         "Card",
         "card",
         "业务卡片",
+        "信息卡片1",
         "信息卡片",
         "摘要卡片",
         "指标卡片",
@@ -1141,6 +1228,12 @@
         "商品卡片",
         "product card",
         "goods card",
+        "info2 card",
+        "信息卡片2",
+        "强调卡片",
+        "推荐卡片",
+        "AI 推荐",
+        "智能入口",
         "订单卡片",
         "order card",
         "图片文字卡片",
@@ -6841,6 +6934,7 @@
       ],
       "rules": [
         "【模板定位】本模板是客服 / 在线 Agent 工作台的页面级框架，用于“客服正在处理会话、工单、质检、托管”等工作台页面；它不是普通业务组件、不是 NavBar，也不是会话列表本体。",
+        "【选型优先级】客服工作台框架在客服业务页面中优先级最高。当用户明确提到“客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent 工作台 / 客服接待台”等客服工作台场景时，优先使用本模板作为整页外框；右侧主白卡默认必须继续使用 `IMConversationPattern + InfoDisplayPanel` 组合，而不是用表格、普通 Card 或 AI 对话页替代 IM 聊天区。",
         "【Figma 对齐】默认视觉对齐 Figma 节点 8279:67909「在线Agent」：根容器浅灰底 `--color-blueGrey-200`、16px 内边距、顶部 24px 状态条、下方左侧半透明板块 + 右侧主白卡；6 个可见圆角统一为 16px：左侧板块左上 / 左下，右侧主白卡四角。",
         "【结构】根节点必须直接作为页面主工作区或右侧主内容区的一级框架；内部顺序固定为 Header（客服名称 / 在线状态 / 指标工具 / 模式切换） + Workspace（左侧上下文占位 + 右侧主面板）。不要再用大白卡或 `bg-surface rounded-*` 包住整个模板。",
         "【顶部栏】左侧显示客服名称与在线时长；中部数据栏必须默认按页面可用宽度动态居中，不随左侧客服名称或右侧模式切换偏移；指标容器使用 `bg-white/60 + border-white + radius-md + px-4 py-1`；在线状态胶囊与工具入口这类按钮化页面元素必须复用基础 `Button`；右侧基础模式 / 托管模式属于同页模式切换，必须复用基础 `Tabs`，默认使用 `variant=\"segment\"`，不要手写 tab button 或用 NavBar 替代。",
@@ -6856,7 +6950,7 @@
         "【状态同步原则】当业务接真实数据、URL 或埋点时，应以左侧当前选中对象 id 作为单一事实源（single source of truth），再派生右侧聊天流和信息面板内容；不要让 IMConversationPattern 和 InfoDisplayPanel 各自维护独立当前对象状态。",
         "【右侧信息栏整体拖拽】在客服工作台框架模版里，右侧 InfoDisplayPanel 必须支持整体宽度拖拽，拖拽热区位于信息栏左边界，默认热区 8px；拖拽时改变的是右侧信息栏整体宽度，左侧 IM 聊天区自动占满剩余空间，而不是改由 InfoDisplayPanel 本体处理页面级宽度。推荐默认宽度约 380px，最小宽度 320px，并保证左侧 IM 区至少保留 360px 可读宽度；同时保留 InfoDisplayPanel 内部相邻栏之间的原生拖拽能力。",
         "【右侧插槽】如业务需要替换右侧主内容，可放 ChatConversationPattern、Table、表单详情或工单处理面板；但客服接待类页面优先保持“IM 对话 + InfoDisplayPanel”的组合，不要用多个普通 Card 临时拼出右侧信息区。",
-        "【AI 选型】当 prompt 出现“客服工作台框架 / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 客服名称在线状态 / 顶部指标工具条”等信号时，优先选本页面模板；如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。",
+        "【AI 选型】当 prompt 出现“客服工作台框架 / 客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 客服名称在线状态 / 顶部指标工具条”等客服工作台信号时，优先选本页面模板；但本模板右侧主内容仍必须包含 IMConversationPattern 聊天区和 InfoDisplayPanel 信息区。如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。",
         "【容器语义】本模板自身已经包含浅灰页面底与右侧主白卡，生成页面时不要外层再套 `Card color=\"grey\"`、`bg-surface rounded-xl` 或大白卡 section，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。",
         "【组件复用】统计图标、工具图标必须复用 `Icon`；在线状态胶囊与工具按钮必须复用 `Button`；右上角模式切换必须复用 `Tabs`；主面板内若有头像，继续遵守本地成员头像素材规则；不要手写 svg、tab button、button div 或随机外链头像。"
       ],
@@ -7222,12 +7316,13 @@
         "icon"
       ],
       "rules": [
-        "【五模板定位】本模板只用于“真实 IM / 客服 / 私信 / 站内信 / 履约沟通”的当前线程：用户第一步是看历史消息并回复。若消息主角是 AI 任务规划、执行流、产物追问，改用 `ChatConversationPattern`；若右侧对象/产物为主且 AI 只是辅助，改用 `CopilotPagePattern`；若是多个会话对象的结构化管理列表，外层应先用 `BasePageFramePattern` 再组合 `ConversationList + IMConversationPattern`。",
+        "【五模板定位】本模板只用于“真实 IM / 客服 / 私信 / 站内信 / 履约沟通”的当前线程：用户第一步是看历史消息并回复。若消息主角是 AI 任务规划、执行流、产物追问，改用 `ChatConversationPattern`；若右侧对象/产物为主且 AI 只是辅助，改用 `CopilotPagePattern`；若是多个会话对象的结构化管理列表，外层可组合 `ConversationList + IMConversationPattern`；若是完整客服工作台页面，则优先使用 `CustomerServiceWorkspaceFramePattern`，但其右侧聊天区仍必须嵌入 IMConversationPattern。",
+        "【非客服 IM 优先】当业务不是客服工作台场景，但用户提到“IM 对话 / IM聊天区 / IM沟通 / 在线沟通 / 用户私信 / 站内信 / 即时通讯 / 聊天对话”等词汇时，必须优先使用本模板作为页面主内容或主工作区，禁止默认套 BasePageFramePattern、ChatConversationPattern 或自制白卡聊天区。",
         "【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `im-thread`：线程列表 / 消息流 / 输入区职责分离，消息滚动只发生在会话流，输入区固定在底部。",
         "【组件选型门禁】当前线程消息必须用 `ChatBubble`；多线程队列用 `ConversationList`；普通 IM 输入用 `ChatInput variant=\"im-basic\"`；AI 协同输入才可改 `ChatInput variant=\"default\"`；参与者身份用 `Avatar`，状态/标签用 `Tag`，线程操作用 `Button` + `Icon`。禁止用 `ChatMessage` 渲染普通客服气泡，禁止手写左右气泡、时间戳和已读态，禁止手写头像、标签、图标按钮或直接复制 Figma SVG。",
         "【头像素材】IM 用户 / 人工客服 / 协作者头像默认使用包内本地成员头像素材；`ChatBubble avatarType=\"image\"` 未传 avatarSrc 时会由 Avatar 自动随机取本地成员头像。生成模板时不要写 pravatar / Unsplash / placeholder 外链头像，除非业务接口真实返回用户头像 URL。",
         "【触发条件】当页面核心任务是“围绕单一会话线程连续查看历史消息并继续发送消息”，且信息以时间顺序展开、交互重心在对话往返而不是结构化管理时，优先使用 `IMConversationPattern`。",
-        "【适用场景】适用于客服接待、售后沟通、订单履约跟进、用户私信、站内信回复、即时通讯协作等单线程聊天场景；客服工作台只是其中一种典型子场景，不是唯一适用范围。",
+        "【适用场景】适用于客服接待、售后沟通、订单履约跟进、用户私信、站内信回复、即时通讯协作等单线程聊天场景；客服工作台只是其中一种典型子场景，不是唯一适用范围。客服工作台整页优先走 CustomerServiceWorkspaceFramePattern，非客服业务只要核心是 IM / 在线沟通线程，则优先走 IMConversationPattern。",
         "【整体风格】本模板不嵌基础页面框架外框，但白卡的“圆角 + 边框 + 内边距”仍需与基础页面框架的卡片风格一致（大圆角白卡承载内容，灰底仅在宿主页面需要时由外层提供）",
         "【默认自适应】`IMConversationPattern` 默认 **不限制宽度**、**不强制高度**、且 **不带边框**；应随外层容器自适应宽高。仅当把它作为“独立卡片”展示时，才由外层白卡（或 `asCard`）提供圆角与描边。",
         "【容器（独立卡片模式）】若需要单独成卡：使用外层白卡（或 `<IMConversationPattern asCard maxWidth={680} />`）实现 max-w-680 + 居中 + 12px 圆角 + 纯白背景 + border-default；组件本身不自带内边距，外边距与留白统一由宿主模板框架控制。",
@@ -7258,6 +7353,12 @@
         "即时通讯",
         "聊天对话",
         "IM 工作台",
+        "IM聊天区",
+        "IM 沟通",
+        "IM沟通",
+        "在线沟通",
+        "在线聊天",
+        "在线会话",
         "客服会话",
         "客服接待",
         "用户私信",

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-10T14:01:13.258Z",
+  "generatedAt": "2026-05-10T17:49:25.351Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 46,
@@ -149,7 +149,7 @@
       "kind": "component",
       "name": "NavBar",
       "category": "business",
-      "description": "业务竖向导航栏，集成品牌区、业务入口切换、平台首页模块高亮、主导航、底部工具按钮和用户头像。",
+      "description": "业务竖向导航栏，集成品牌区、业务入口切换、统一 navItems 主导航、底部工具按钮和用户头像。",
       "import": {
         "from": "@tf-designsystem/b-end",
         "default": "NavBar"
@@ -231,7 +231,7 @@
       "kind": "component",
       "name": "Card",
       "category": "business",
-      "description": "业务信息摘要卡片，支持数据卡片、商品卡片和信息卡片三类结构。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
+      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
       "import": {
         "from": "@tf-designsystem/b-end",
         "default": "Card"
@@ -240,6 +240,7 @@
         "Card",
         "card",
         "业务卡片",
+        "信息卡片1",
         "信息卡片",
         "摘要卡片",
         "指标卡片",
@@ -251,19 +252,18 @@
         "商品卡片",
         "product card",
         "goods card",
+        "info2 card",
+        "信息卡片2",
+        "强调卡片",
+        "推荐卡片",
+        "AI 推荐",
+        "智能入口",
         "订单卡片",
         "order card",
-        "图片文字卡片",
-        "业务对象卡",
-        "object card",
-        "趋势分析",
-        "近 7 天",
-        "指标摘要",
-        "入口卡片",
-        "快捷入口"
+        "图片文字卡片"
       ],
-      "ruleCount": 25,
-      "exampleCount": 16,
+      "ruleCount": 36,
+      "exampleCount": 26,
       "hasCode": false,
       "detailRef": "components.index.json#card"
     },
@@ -1595,7 +1595,7 @@
         "工单处理框架",
         "CustomerServiceWorkspaceFrame"
       ],
-      "ruleCount": 19,
+      "ruleCount": 20,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#customer-service-workspace-frame"
@@ -1783,6 +1783,12 @@
         "即时通讯",
         "聊天对话",
         "IM 工作台",
+        "IM聊天区",
+        "IM 沟通",
+        "IM沟通",
+        "在线沟通",
+        "在线聊天",
+        "在线会话",
         "客服会话",
         "客服接待",
         "用户私信",
@@ -1792,15 +1798,9 @@
         "机器人接待",
         "机器人对话",
         "转人工",
-        "客服跟进",
-        "用户进线",
-        "ChatBubble 气泡",
-        "左气泡 右气泡",
-        "聊天气泡组",
-        "系统提示",
-        "已接入"
+        "客服跟进"
       ],
-      "ruleCount": 25,
+      "ruleCount": 26,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#im-conversation-page"