@tfdesign/b-end 1.0.12 → 1.0.14

package/skills/tfds/components.summary.json

@@ -1,11 +1,11 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-12T06:04:56.982Z",
+  "generatedAt": "2026-05-13T05:01:47.099Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
-    "total": 46,
-    "components": 36,
+    "total": 47,
+    "components": 37,
     "pageTemplates": 4,
     "pagePatterns": 6
   },
@@ -32,7 +32,7 @@
       "category": "basic",
       "description": "单个实体（人/机器人/AI/兜底）的头像锚点。用于表格、会话、导航等需要「一眼认出是谁」的位置；不用于多人交叠缩略（那是 AvatarGroup）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Avatar"
       },
       "keywords": [
@@ -72,7 +72,7 @@
       "category": "basic",
       "description": "多人参与的缩略表达：固定 5 个圆形图片头像、固定交叠间距，用于「协作成员、围观者」等氛围装饰。需要可配置人数/顺序/文案时请用列表 + 多个 Avatar，不要用本组件硬凑。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "AvatarGroup"
       },
       "keywords": [
@@ -110,7 +110,7 @@
       "category": "basic",
       "description": "矢量符号（1198+ 图标名）。用于按钮/输入框前后缀、导航、状态提示等「非人像」图形；需要人像或账号识别请用 Avatar，需要文字标签请用 Button/Tag。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Icon"
       },
       "keywords": [
@@ -151,7 +151,7 @@
       "category": "business",
       "description": "业务竖向导航栏，集成品牌区、业务入口切换、统一 navItems 主导航、底部工具按钮和用户头像。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "NavBar"
       },
       "keywords": [
@@ -192,7 +192,7 @@
       "category": "business",
       "description": "业务标签栏，集成顶部搜索、业务切换、树形标签与最小宽度折叠，适合服务平台左侧标签导航场景。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TagBar"
       },
       "keywords": [
@@ -231,9 +231,9 @@
       "kind": "component",
       "name": "Card",
       "category": "business",
-      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
+      "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Card"
       },
       "keywords": [
@@ -274,7 +274,7 @@
       "category": "business",
       "description": "会话 / 工单 / 线程侧栏列表，用于 IM 对话、即时通讯工作台、客服接待、工单处理、托管队列等需要按状态分组浏览并快速切换当前处理线程的业务场景，默认支持“默认列表 / 卡片列表”双布局切换。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ConversationList"
       },
       "keywords": [
@@ -313,9 +313,9 @@
       "kind": "component",
       "name": "InfoDisplayPanel",
       "category": "business",
-      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。",
+      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "InfoDisplayPanel"
       },
       "keywords": [
@@ -344,7 +344,7 @@
         "多面板工作区",
         "panel tabs"
       ],
-      "ruleCount": 26,
+      "ruleCount": 28,
       "exampleCount": 8,
       "hasCode": false,
       "detailRef": "components.index.json#info-display-panel"
@@ -356,7 +356,7 @@
       "category": "business",
       "description": "IM 聊天气泡，支持左右 2 种角色布局、单条/多条 2 种气泡组织，以及图片/机器人/AI/隐藏 4 种头像类型，并支持 hover 查看分层消息时间。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatBubble"
       },
       "keywords": [
@@ -397,7 +397,7 @@
       "category": "business",
       "description": "对话/消息发送输入框，统一覆盖所有「输入内容并发出」场景。变体选择只看一个维度——UI 上是否有 Agent/工具栏：有（Agent 切换 / @ / 指令 / 附件）→ default；没有 → im-basic。im-basic（基础输入框）是使用频率最高的变体，适用范围：IM 消息输入、会话底部发送栏、评论框、工单回复、模型 Playground 发送栏（type prompt → 「发送并运行模型」）、任何 user/assistant 测试界面。default/default-sm/replying/busy/readonly 专用于内置完整 AI 工具栏的 Agent 对话场景（三层结构：底层氛围背景 → 输入区域 → 猫条）。im-basic 左下角按钮通过声明式 `imActions` 场景化配置，默认是图片 + 表情，最多展示 5 个。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatInput"
       },
       "keywords": [
@@ -438,7 +438,7 @@
       "category": "business",
       "description": "AI 对话页「一条消息」原子单元（行业对齐 assistant-ui Message / Microsoft ChatMessage）。一个 ChatMessage = 一条消息（user 气泡 / AI 头像 / 文本回复 / 执行流 / 卡片回复 / 深度思考 / 操作栏），按 role 与 7 类子能力组合呈现。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatMessage"
       },
       "keywords": [
@@ -479,7 +479,7 @@
       "category": "basic",
       "description": "触发一次性动作（提交、取消、打开弹窗、行内「编辑/删除」）。不负责在同一视图内切换多块内容（那是 Tabs）；不负责从枚举里选题（那是 Select/Radio）。primary 为每视图唯一主按钮（黑底）。⚠️ 尺寸硬规则：全局默认 size=\"md\"（36px），AI 生成页面时禁止擅自使用 size=\"sm\"，仅在设计明确标注或卡片空间极度受限时才可使用 SM。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Button"
       },
       "keywords": [
@@ -520,7 +520,7 @@
       "category": "basic",
       "description": "同一页面或同一卡片内，多块平级内容的切换（视图状态保持在本页）。典型：详情子页签、表单分段、筛选维度切换。跨模块站点级导航优先侧栏/路由，而不是 Tabs 堆满一级入口。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tabs"
       },
       "keywords": [
@@ -561,7 +561,7 @@
       "category": "basic",
       "description": "B端标题组件，统一收敛整体页面总标题、工作台标题、一级/二级/三级标题和卡片标题 5 种变体；描述文案默认隐藏，仅在有板块介绍/场景说明/明确要求时通过 showDescription 显示；支持标题后缀 titleSuffix（如状态 Tag）。⚠️ 字体强约束：所有变体的标题文字均通过组件内部 `[font-weight:var(--font-semibold)]` 固定为 600 semibold，字号、行高、颜色由组件 token 固定，禁止通过 className 或 style 覆写字体粗细、字号、颜色。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "FormTitle"
       },
       "keywords": [
@@ -602,7 +602,7 @@
       "category": "basic",
       "description": "B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Form"
       },
       "keywords": [
@@ -643,7 +643,7 @@
       "category": "basic",
       "description": "用户自输入的短文本/搜索词。值不可穷举或需键盘高效录入时用 Input；若合法值来自有限枚举列表，应优先 Select 或 Radio，避免用 Input 接收「只能是 A/B/C」的值。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Input"
       },
       "keywords": [
@@ -684,7 +684,7 @@
       "category": "basic",
       "description": "多行文本输入，与 Input 共用边框与状态语义；固定 MD 尺寸（14px 字、与 Input md 一致的内边距）。新增 code 类型用于代码 / Prompt 编辑，左侧显示行号并使用等宽字体。默认占位 3 行高度，可选 1～5 行作为最小高度（1 行与 Input md 同高）。高度仅按内容与规则自动变化，不可拖拽改高。maxLength 可选，不设则字数不限。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TextArea"
       },
       "keywords": [
@@ -725,7 +725,7 @@
       "category": "basic",
       "description": "数字输入框，复用 Input 触发器视觉，支持最小值、最大值、步长、小数精度，以及外置/内置步进按钮。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "InputNumber"
       },
       "keywords": [
@@ -766,7 +766,7 @@
       "category": "basic",
       "description": "从预定义 options 中选值：节省纵向空间、选项可较多、与 Input 视觉同构。单选枚举默认 mode=default；同一字段多选且以标签形式回显用 mode=tag。少量互斥项且需一眼比较布局 → 优先 Radio。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Select"
       },
       "keywords": [
@@ -807,7 +807,7 @@
       "category": "basic",
       "description": "互斥单选：同一组内只能选一个值。支持基础样式、带圆点单选卡片、单选卡片 3 类形态，适合选项少且需要平铺比较的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "RadioGroup",
         "named": [
           "Radio"
@@ -845,7 +845,7 @@
       "category": "basic",
       "description": "多选或二元勾选（含「全选/半选」树形父级）。用于权限、标签、筛选条件、同意协议等。互斥单选用 Radio；单一功能开闭且立即生效优先 Switch。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CheckboxGroup",
         "named": [
           "Checkbox"
@@ -883,7 +883,7 @@
       "category": "basic",
       "description": "开关组件，两种状态间即时切换，支持品牌绿/主色黑两种视觉变体，尺寸固定为 MD（36px 体系）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Switch"
       },
       "keywords": [
@@ -916,7 +916,7 @@
       "category": "basic",
       "description": "滑动输入条，支持单值和区间双滑块，拖动时显示数值气泡并支持刻度标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Slider"
       },
       "keywords": [
@@ -954,7 +954,7 @@
       "category": "basic",
       "description": "图片宫格上传，96×96 缩略图卡片，支持上传进度、错误重试和禁用态。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Upload"
       },
       "keywords": [
@@ -991,7 +991,7 @@
       "category": "business",
       "description": "纵向堆叠 Form 的业务片段（无独立背景/描边、无 FormTitle、无底栏按钮）：按 FormFieldStack 间距样式规范（p-6、gap-6、全宽 stretch）组合任意数量与类型的基础表单控件。stackLayout=select-stack 为 5 段单列 select 示意；stackLayout=mixed-fields 为单 Form 内含 2×input / 2×select / 2×radio / 2×checkbox / 3×textarea 示意。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "FormFieldStack"
       },
       "keywords": [
@@ -1023,7 +1023,7 @@
       "category": "business",
       "description": "B端业务列表表格，支持标准表格与卡片型表单两种类型。标准表格按列配置单元格类型与尺寸；卡片型表单用于策略、流程、脚本、模板等带父项和版本子项的业务列表，并带展开、查看、更多和分页交互。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Table"
       },
       "keywords": [
@@ -1064,7 +1064,7 @@
       "category": "basic",
       "description": "日期选择器，支持日期、日期时间、日期范围、日期时间范围 4 种类型。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "DatePicker"
       },
       "keywords": [
@@ -1105,7 +1105,7 @@
       "category": "basic",
       "description": "时间选择器，支持单时间与时间范围，触发器视觉对齐 DatePicker，浮层内按 Figma 滚轮面板选择时/分。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TimePicker"
       },
       "keywords": [
@@ -1134,7 +1134,7 @@
       "category": "basic",
       "description": "模态弹窗面板，含标题区、内容区和底部按钮。支持居中（center）和全屏弹窗（fullscreen）两种布局变体。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Modal"
       },
       "keywords": [
@@ -1175,7 +1175,7 @@
       "category": "basic",
       "description": "侧边抽屉面板，从屏幕右侧（或左侧）滑入，含标题区、内容区和底部按钮，3 档宽度，内容超高可滚动。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Sheet"
       },
       "keywords": [
@@ -1212,7 +1212,7 @@
       "category": "basic",
       "description": "标签输入框，严格复用 Tag 展示已选项与 +N 折叠项，宽度自适应折叠超出标签，并通过 Tooltip 展示被省略标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TagInput"
       },
       "keywords": [
@@ -1248,7 +1248,7 @@
       "category": "basic",
       "description": "标签组件，用于标记、分类或状态展示。支持 13 种颜色变体、2 档字体粗细、3 档尺寸、3 种圆角、可关闭功能。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tag"
       },
       "keywords": [
@@ -1282,6 +1282,45 @@
       "hasCode": false,
       "detailRef": "components.index.json#tag"
     },
+    {
+      "id": "filter",
+      "kind": "component",
+      "name": "Filter",
+      "category": "basic",
+      "description": "筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。",
+      "import": {
+        "from": "@tfdesign/b-end",
+        "default": "Filter"
+      },
+      "keywords": [
+        "Filter",
+        "filter",
+        "筛选",
+        "筛选项",
+        "筛选组件",
+        "筛选胶囊",
+        "筛选 chip",
+        "筛选触发器",
+        "已选筛选",
+        "过滤条件",
+        "filter item",
+        "filter chip",
+        "pill filter",
+        "closable",
+        "clear",
+        "清除筛选",
+        "下拉筛选",
+        "多选筛选",
+        "selected filter",
+        "span rounded-full border",
+        "手搓筛选",
+        "自制筛选 chip"
+      ],
+      "ruleCount": 13,
+      "exampleCount": 12,
+      "hasCode": false,
+      "detailRef": "components.index.json#filter"
+    },
     {
       "id": "toast",
       "kind": "component",
@@ -1289,7 +1328,7 @@
       "category": "basic",
       "description": "轻量反馈条：信息/成功/警示/错误四态，左侧状态图标（相对行首额外 4px 左边距）+ 主文案 + 可选文字操作（绿色文字 Button）+ 可关闭；宽度随内容收缩（w-fit），最大不超过 min(100%,560px)；圆角 12px、可选语义描边（bordered）、内距 12px、主文案 14px 半粗，行内纵向居中对齐。规范仅覆盖单条条目视觉；全局队列、停留时长与 Portal 由业务集成（对齐 HiUI Toast）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Toast"
       },
       "keywords": [
@@ -1330,7 +1369,7 @@
       "category": "basic",
       "description": "文字提示气泡，hover/focus 触发，支持 12 个方位与视口边缘自动翻转。默认深色变体（grey-800 背景 + 白字），light 白底变体仅用于 TagInput +N 更多标签场景；文本容器固定规格（圆角 8px、内距 8/12、字号 14px），通过 Portal 渲染到 body 以避开父容器裁切。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tooltip"
       },
       "keywords": [
@@ -1371,7 +1410,7 @@
       "category": "basic",
       "description": "空状态占位组件，固定布局（插画 → 文案 → 操作），所有内容区域独立配置、按需组合。10 种内置插画对应常见场景；标题/描述/链接行/三种按钮均可独立传入或省略；buttonLayout 控制横排/竖排。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Empty"
       },
       "keywords": [
@@ -1412,7 +1451,7 @@
       "category": "business",
       "description": "全屏操作页容器，覆盖整个模版框架（含侧边导航），适合分步骤编辑、创建页面不同板块内容流程，以及内容量大、需沉浸长时间编辑的业务场景。支持白底（直铺/描边面板）和灰底（白卡面板）两种背景模式。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "FullScreenPage"
       },
       "keywords": [
@@ -1453,7 +1492,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/VariableManagementPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "VariableManagementPage"
       },
       "keywords": [
@@ -1481,7 +1520,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/McpManagementPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "McpManagementPage"
       },
       "keywords": [
@@ -1510,7 +1549,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/TabTopBarListPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TabTopBarListPage"
       },
       "keywords": [
@@ -1540,7 +1579,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/StrategyListPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "StrategyListPage"
       },
       "keywords": [
@@ -1568,7 +1607,7 @@
       "category": "page-pattern",
       "description": "客服 / 在线 Agent 工作台页面框架：顶部在线状态、指标工具区、基础/托管模式切换、半透明工作区与右侧主白卡。适用于客服正在处理会话、工单、质检、托管等工作台页面。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CustomerServiceWorkspaceFramePattern"
       },
       "keywords": [
@@ -1595,7 +1634,7 @@
         "工单处理框架",
         "CustomerServiceWorkspaceFrame"
       ],
-      "ruleCount": 22,
+      "ruleCount": 25,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#customer-service-workspace-frame"
@@ -1607,7 +1646,7 @@
       "category": "page-pattern",
       "description": "B 端列表页模板示例集：左侧 NavBar 业务侧导（5 个\"列表示例\"菜单），每项对应一个独立完整的列表页模板。每个模板自上而下：标题栏 + 筛选栏 + 表格，业务可直接复制单文件作为新页面起点。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "BasePageFramePattern"
       },
       "keywords": [
@@ -1648,7 +1687,7 @@
       "category": "page-pattern",
       "description": "AI 产品的入口首页模板：左侧 NavBar + 右侧内容区（顶部 Hero ChatInput + 筛选 Tab + 卡片列表网格）。适用于用户尚未进入具体上下文、第一步是输入需求 / 搜索助手 / 从模板开始的场景。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatHomePagePattern"
       },
       "keywords": [
@@ -1689,7 +1728,7 @@
       "category": "page-pattern",
       "description": "适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CopilotPagePattern"
       },
       "keywords": [
@@ -1730,7 +1769,7 @@
       "category": "page-pattern",
       "description": "独立的 AI 助手会话详情页：顶导栏（返回 + 标题 + 操作按钮组）+ 800px 居中消息流 + 底部吸底 ChatInput。所有消息（用户 / AI）一律用 ChatMessage 渲染（用户走 role=\"user\"，AI 走 header=true）。支持 phase 切换：默认 chat 阶段展示端到端 mock 对话，点「新会话」清空回到 welcome 欢迎屏（CATCAT 头像 + 推荐 chip）。关键词驱动完整任务流：「整理 / 分析 / 生成」→ 任务规划卡 → 用户点开始 → 流式执行流（每 600ms 推一步） → 同条消息更新为总结+产物+追问。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatConversationPattern"
       },
       "keywords": [
@@ -1759,7 +1798,7 @@
         "流式执行",
         "任务规划卡"
       ],
-      "ruleCount": 18,
+      "ruleCount": 19,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#chat-conversation-page"
@@ -1771,7 +1810,7 @@
       "category": "page-pattern",
       "description": "IM 对话片段：适用于客服接待、用户私信、站内信、履约沟通、社群协作等以连续消息往返为核心的即时通讯场景。单个白卡内默认包含当前线程顶部信息元素、消息流和底部组合输入框，并支持真实发送；若是 AI 协同型对话，可切换为 AI 输入框。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "IMConversationPattern"
       },
       "keywords": [

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/ChatMessage.jsx

@@ -3,7 +3,7 @@
  *
  * 行业对齐：assistant-ui Message / Vercel AI SDK Message / Microsoft Copilot ChatMessage。
  * 与 ChatBubble（仅气泡）、ChatInput（输入器）共同组成 Chat 命名空间。
- * 样式依赖：入口 CSS 须 @import "@tf-designsystem/b-end/theme.css"（提供 --color-border-default、--color-blueGrey-*、--tfds-ai-execution-* 等）；缺失时 var() 无效，追问/执行流等易出现深黑描边。
+ * 样式依赖：入口 CSS 须 @import "@tfdesign/b-end/theme.css"（提供 --color-border-default、--color-blueGrey-*、--tfds-ai-execution-* 等）；缺失时 var() 无效，追问/执行流等易出现深黑描边。
  * 一个 ChatMessage = 一条会话消息，按 role 渲染：
  *   · role='ai'   AI 输出消息（默认）：header / thinking / plan / 执行流(title+steps/taskGroups)
  *                  / 结果(resultText+resultArtifacts+confirms) / taskBadge / actions / followUps