@tfdesign/b-end 1.0.12 → 1.0.14

package/skills/tfds/components.index.json

@@ -1,8 +1,8 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-12T06:04:56.982Z",
-  "summary": "B 端 COMPONENTS 36 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tf-designsystem/b-end。",
+  "generatedAt": "2026-05-13T05:01:47.099Z",
+  "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
       "id": "avatar",
@@ -11,7 +11,7 @@
       "category": "basic",
       "description": "单个实体（人/机器人/AI/兜底）的头像锚点。用于表格、会话、导航等需要「一眼认出是谁」的位置；不用于多人交叠缩略（那是 AvatarGroup）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Avatar"
       },
       "props": [
@@ -152,7 +152,7 @@
       "category": "basic",
       "description": "多人参与的缩略表达：固定 5 个圆形图片头像、固定交叠间距，用于「协作成员、围观者」等氛围装饰。需要可配置人数/顺序/文案时请用列表 + 多个 Avatar，不要用本组件硬凑。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "AvatarGroup"
       },
       "props": [
@@ -229,7 +229,7 @@
       "category": "basic",
       "description": "矢量符号（1198+ 图标名）。用于按钮/输入框前后缀、导航、状态提示等「非人像」图形；需要人像或账号识别请用 Avatar，需要文字标签请用 Button/Tag。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Icon"
       },
       "props": [
@@ -339,7 +339,7 @@
       "category": "business",
       "description": "业务竖向导航栏，集成品牌区、业务入口切换、统一 navItems 主导航、底部工具按钮和用户头像。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "NavBar"
       },
       "props": [
@@ -609,7 +609,7 @@
       "category": "business",
       "description": "业务标签栏，集成顶部搜索、业务切换、树形标签与最小宽度折叠，适合服务平台左侧标签导航场景。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TagBar"
       },
       "props": [
@@ -848,9 +848,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"
       },
       "props": [
@@ -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 字短标签。",
@@ -1284,7 +1284,7 @@
       "category": "business",
       "description": "会话 / 工单 / 线程侧栏列表，用于 IM 对话、即时通讯工作台、客服接待、工单处理、托管队列等需要按状态分组浏览并快速切换当前处理线程的业务场景，默认支持“默认列表 / 卡片列表”双布局切换。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ConversationList"
       },
       "props": [
@@ -1546,9 +1546,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"
       },
       "props": [
@@ -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": [
@@ -1715,7 +1717,7 @@
       "category": "business",
       "description": "IM 聊天气泡，支持左右 2 种角色布局、单条/多条 2 种气泡组织，以及图片/机器人/AI/隐藏 4 种头像类型，并支持 hover 查看分层消息时间。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatBubble"
       },
       "props": [
@@ -1925,7 +1927,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"
       },
       "props": [
@@ -2246,7 +2248,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"
       },
       "props": [
@@ -2380,7 +2382,7 @@
         "【消息原子】一个 ChatMessage = AI 对话页中的一条消息原子，role=\"ai\" 渲染 AI 消息（适配容器宽度），role=\"user\" 渲染用户气泡（右对齐 + 8% 容器宽度左缩进 ≈ 500px 容器下 40px 缩进）",
         "【AI 友好命名】props 一律用最短同义词：header / thinking / plan / confirms / followUps / actions / userContent；读 props 即知 DOM 结构（<ChatMessage header thinking plan ... />）",
         "【7 类子组件】内部按 AI 头像 / 文本回复 / 执行流 / 卡片回复 / 深度思考 / 操作栏 / 用户气泡 7 类子组件按需组合，全部通过 props 启用，互相正交不冲突",
-        "【theme 必引】入口 CSS 必须 @import \"@tf-designsystem/b-end/theme.css\"。ChatMessage 子区块使用 --color-border-default、--color-neutral、--color-neutral-500/300/700、--tfds-ai-execution-* 等；未引入 theme 时 var() 无效，描边易退化为浏览器默认深黑（追问按钮等）。",
+        "【theme 必引】入口 CSS 必须 @import \"@tfdesign/b-end/theme.css\"。ChatMessage 子区块使用 --color-border-default、--color-neutral、--color-neutral-500/300/700、--tfds-ai-execution-* 等；未引入 theme 时 var() 无效，描边易退化为浏览器默认深黑（追问按钮等）。",
         "【禁止手搓描边】勿包一层 div 并加 border-black / ring-black；追问 followUps 为白底 + border-border-default + hover:border-border-strong。",
         "【AI 头像】header 传 true 启用默认 \"OLA AI\" + catcat 头像；传对象 { name, avatarSrc } 自定义名称与头像；建议每条 AI 消息都开启，保持身份一致；不传则该消息没有头像",
         "【自定义头像素材】ChatMessage 默认 AI 头像使用包内 catcat.svg；若 header 对象自定义 avatarSrc（如拟人助手、成员身份或人工协作身份），优先使用包内本地成员头像图片素材，不要使用 pravatar/Unsplash/placeholder 随机外链头像。",
@@ -2552,7 +2554,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"
       },
       "props": [
@@ -2786,7 +2788,7 @@
       "category": "basic",
       "description": "同一页面或同一卡片内，多块平级内容的切换（视图状态保持在本页）。典型：详情子页签、表单分段、筛选维度切换。跨模块站点级导航优先侧栏/路由，而不是 Tabs 堆满一级入口。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tabs"
       },
       "props": [
@@ -2968,7 +2970,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"
       },
       "props": [
@@ -3194,7 +3196,7 @@
       "category": "basic",
       "description": "B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Form"
       },
       "props": [
@@ -3367,7 +3369,7 @@
       "category": "basic",
       "description": "用户自输入的短文本/搜索词。值不可穷举或需键盘高效录入时用 Input；若合法值来自有限枚举列表，应优先 Select 或 Radio，避免用 Input 接收「只能是 A/B/C」的值。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Input"
       },
       "props": [
@@ -3584,7 +3586,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"
       },
       "props": [
@@ -3891,7 +3893,7 @@
       "category": "basic",
       "description": "数字输入框，复用 Input 触发器视觉，支持最小值、最大值、步长、小数精度，以及外置/内置步进按钮。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "InputNumber"
       },
       "props": [
@@ -4066,7 +4068,7 @@
       "category": "basic",
       "description": "从预定义 options 中选值：节省纵向空间、选项可较多、与 Input 视觉同构。单选枚举默认 mode=default；同一字段多选且以标签形式回显用 mode=tag。少量互斥项且需一眼比较布局 → 优先 Radio。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Select"
       },
       "props": [
@@ -4299,7 +4301,7 @@
       "category": "basic",
       "description": "互斥单选：同一组内只能选一个值。支持基础样式、带圆点单选卡片、单选卡片 3 类形态，适合选项少且需要平铺比较的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "RadioGroup",
         "named": [
           "Radio"
@@ -4446,7 +4448,7 @@
       "category": "basic",
       "description": "多选或二元勾选（含「全选/半选」树形父级）。用于权限、标签、筛选条件、同意协议等。互斥单选用 Radio；单一功能开闭且立即生效优先 Switch。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CheckboxGroup",
         "named": [
           "Checkbox"
@@ -4598,7 +4600,7 @@
       "category": "basic",
       "description": "开关组件，两种状态间即时切换，支持品牌绿/主色黑两种视觉变体，尺寸固定为 MD（36px 体系）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Switch"
       },
       "props": [
@@ -4699,7 +4701,7 @@
       "category": "basic",
       "description": "滑动输入条，支持单值和区间双滑块，拖动时显示数值气泡并支持刻度标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Slider"
       },
       "props": [
@@ -4839,7 +4841,7 @@
       "category": "basic",
       "description": "图片宫格上传，96×96 缩略图卡片，支持上传进度、错误重试和禁用态。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Upload"
       },
       "props": [
@@ -4977,7 +4979,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"
       },
       "props": [
@@ -5050,7 +5052,7 @@
       "category": "business",
       "description": "B端业务列表表格，支持标准表格与卡片型表单两种类型。标准表格按列配置单元格类型与尺寸；卡片型表单用于策略、流程、脚本、模板等带父项和版本子项的业务列表，并带展开、查看、更多和分页交互。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Table"
       },
       "props": [
@@ -5279,7 +5281,7 @@
       "category": "basic",
       "description": "日期选择器，支持日期、日期时间、日期范围、日期时间范围 4 种类型。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "DatePicker"
       },
       "props": [
@@ -5426,7 +5428,7 @@
       "category": "basic",
       "description": "时间选择器，支持单时间与时间范围，触发器视觉对齐 DatePicker，浮层内按 Figma 滚轮面板选择时/分。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TimePicker"
       },
       "props": [
@@ -5537,7 +5539,7 @@
       "category": "basic",
       "description": "模态弹窗面板，含标题区、内容区和底部按钮。支持居中（center）和全屏弹窗（fullscreen）两种布局变体。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Modal"
       },
       "props": [
@@ -5706,7 +5708,7 @@
       "category": "basic",
       "description": "侧边抽屉面板，从屏幕右侧（或左侧）滑入，含标题区、内容区和底部按钮，3 档宽度，内容超高可滚动。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Sheet"
       },
       "props": [
@@ -5843,7 +5845,7 @@
       "category": "basic",
       "description": "标签输入框，严格复用 Tag 展示已选项与 +N 折叠项，宽度自适应折叠超出标签，并通过 Tooltip 展示被省略标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TagInput"
       },
       "props": [
@@ -6000,7 +6002,7 @@
       "category": "basic",
       "description": "标签组件，用于标记、分类或状态展示。支持 13 种颜色变体、2 档字体粗细、3 档尺寸、3 种圆角、可关闭功能。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tag"
       },
       "props": [
@@ -6224,6 +6226,167 @@
         "px-2 py-1 bg-red-100"
       ]
     },
+    {
+      "id": "filter",
+      "kind": "component",
+      "name": "Filter",
+      "category": "basic",
+      "description": "筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。",
+      "import": {
+        "from": "@tfdesign/b-end",
+        "default": "Filter"
+      },
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": "筛选项"
+        },
+        {
+          "name": "value",
+          "type": "string|number|null",
+          "default": null
+        },
+        {
+          "name": "options",
+          "type": "array",
+          "default": []
+        },
+        {
+          "name": "selectedValues",
+          "type": "array"
+        },
+        {
+          "name": "defaultValue",
+          "type": "array",
+          "default": []
+        },
+        {
+          "name": "onChange",
+          "type": "function",
+          "default": null
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "filled",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "onClear",
+          "type": "function",
+          "default": null
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "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 已约定处。",
+        "【定位】Filter 是筛选栏中的单个胶囊触发器/已选筛选项，不是完整筛选条；完整筛选区域由多个 Filter 横向组合。",
+        "【选型·vs Tag】Tag 是展示型短标签，不承载打开筛选面板；Filter 可点击、可打开筛选面板、可展示筛选值和清除入口。",
+        "【选型·vs Button】Filter 只用于筛选条件选择/收起/清除；普通动作（提交、取消、导出、新建）仍使用 Button。",
+        "【尺寸】固定高度 36px（--size-control-md），左右内距 12px（--spacing-3，对齐 Select md），内容 gap 8px（--spacing-2）；不要随意压缩为 24px 或 32px，以保证和 B 端 Input/Select 默认高度对齐。",
+        "【文字】label 使用 semibold 600，value 使用 normal 400；文案建议 label 2-6 字、value 1-8 字，过长值应在业务层截断或改用 Tooltip。",
+        "【下拉多选】传入 options 后点击胶囊展开下拉面板；支持 selectedValues 受控、defaultValue 非受控、onChange(nextValues) 回调；点击外部或 Escape 关闭。",
+        "【值展示】未显式传 value 时，单选中展示选项 label，多选中展示“已选 N 项”；显式 value 优先用于自定义展示。",
+        "【状态】selected=true 使用品牌浅底 + 品牌描边 + 品牌文字；filled=true 使用中性填充底；disabled=true 使用禁用文字与禁用底，且不可点击。",
+        "【图标】无选中值时显示 12px 下拉箭头；closable=true 或已选中且未禁用时显示 16px 清除按钮（视觉与 Select 清除入口一致），点击清空多选值、关闭下拉并触发 onClear，不触发展开。",
+        "【语义结构】外层使用 role=\"combobox/button\" 的 div 触发器，避免清除 button 嵌套在 button 内；不要改回 button 包 button 的非法 DOM。",
+        "【组合】有值但仍可展开修改时传 options；已选条件需要一键移除时使用 closable 或依赖默认已选清除入口。",
+        "【禁止手搓】不要用 div/span + rounded-full 自行拼筛选 chip；筛选入口统一使用 Filter 保证 token、字重、焦点态与禁用态一致。"
+      ],
+      "examples": [
+        {
+          "label": "基础筛选项",
+          "code": "<Filter label=\"筛选项\" />"
+        },
+        {
+          "label": "多选下拉",
+          "code": "<Filter label=\"筛选项\" options={[{ label: \"选项一\", value: \"1\" }, { label: \"选项二\", value: \"2\" }]} />"
+        },
+        {
+          "label": "默认已选",
+          "code": "<Filter label=\"筛选项\" options={options} defaultValue={[\"1\"]} />"
+        },
+        {
+          "label": "受控多选",
+          "code": "<Filter label=\"筛选项\" options={options} selectedValues={values} onChange={setValues} />"
+        },
+        {
+          "label": "选中态",
+          "code": "<Filter label=\"筛选项\" options={options} defaultValue={[\"1\"]} selected />"
+        },
+        {
+          "label": "填充态",
+          "code": "<Filter label=\"筛选项\" filled />"
+        },
+        {
+          "label": "可清除",
+          "code": "<Filter label=\"筛选项\" options={options} defaultValue={[\"1\"]} filled closable onClear={() => {}} />"
+        },
+        {
+          "label": "选中可清除",
+          "code": "<Filter label=\"筛选项\" options={options} defaultValue={[\"1\"]} selected closable onClear={() => {}} />"
+        },
+        {
+          "label": "禁用态",
+          "code": "<Filter label=\"筛选项\" disabled />"
+        },
+        {
+          "label": "禁用选中态",
+          "code": "<Filter label=\"筛选项\" options={options} defaultValue={[\"1\"]} selected disabled />"
+        },
+        {
+          "label": "❌ Bad（手搓筛选 chip）",
+          "code": "/* 禁止！筛选入口不要手写 span/div */\n<span className=\"rounded-full border px-4 py-2\">筛选项</span>"
+        },
+        {
+          "label": "✅ Good（用 Filter）",
+          "code": "<Filter label=\"筛选项\" options={options} defaultValue={[\"1\"]} selected />"
+        }
+      ],
+      "keywords": [
+        "Filter",
+        "filter",
+        "筛选",
+        "筛选项",
+        "筛选组件",
+        "筛选胶囊",
+        "筛选 chip",
+        "筛选触发器",
+        "已选筛选",
+        "过滤条件",
+        "filter item",
+        "filter chip",
+        "pill filter",
+        "closable",
+        "clear",
+        "清除筛选",
+        "下拉筛选",
+        "多选筛选",
+        "selected filter",
+        "span rounded-full border",
+        "手搓筛选",
+        "自制筛选 chip"
+      ]
+    },
     {
       "id": "toast",
       "kind": "component",
@@ -6231,7 +6394,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"
       },
       "props": [
@@ -6379,7 +6542,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"
       },
       "props": [
@@ -6535,7 +6698,7 @@
       "category": "basic",
       "description": "空状态占位组件，固定布局（插画 → 文案 → 操作），所有内容区域独立配置、按需组合。10 种内置插画对应常见场景；标题/描述/链接行/三种按钮均可独立传入或省略；buttonLayout 控制横排/竖排。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Empty"
       },
       "props": [
@@ -6735,7 +6898,7 @@
       "category": "business",
       "description": "全屏操作页容器，覆盖整个模版框架（含侧边导航），适合分步骤编辑、创建页面不同板块内容流程，以及内容量大、需沉浸长时间编辑的业务场景。支持白底（直铺/描边面板）和灰底（白卡面板）两种背景模式。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "FullScreenPage"
       },
       "props": [
@@ -6838,7 +7001,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/VariableManagementPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "VariableManagementPage"
       },
       "props": [],
@@ -6867,7 +7030,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/McpManagementPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "McpManagementPage"
       },
       "props": [],
@@ -6897,7 +7060,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/TabTopBarListPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TabTopBarListPage"
       },
       "props": [],
@@ -6928,7 +7091,7 @@
       "category": "page-template",
       "description": "列表页示例片段（与 BasePageFramePattern 配套），可直接复制改造。源文件：./page-patterns/StrategyListPage.jsx",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "StrategyListPage"
       },
       "props": [],
@@ -6957,7 +7120,7 @@
       "category": "page-pattern",
       "description": "客服 / 在线 Agent 工作台页面框架：顶部在线状态、指标工具区、基础/托管模式切换、半透明工作区与右侧主白卡。适用于客服正在处理会话、工单、质检、托管等工作台页面。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CustomerServiceWorkspaceFramePattern"
       },
       "relatedComponentIds": [
@@ -6982,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、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。",
@@ -6991,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，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。",
@@ -7029,7 +7195,7 @@
       "category": "page-pattern",
       "description": "B 端列表页模板示例集：左侧 NavBar 业务侧导（5 个\"列表示例\"菜单），每项对应一个独立完整的列表页模板。每个模板自上而下：标题栏 + 筛选栏 + 表格，业务可直接复制单文件作为新页面起点。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "BasePageFramePattern"
       },
       "relatedComponentIds": [
@@ -7080,7 +7246,7 @@
         "【NavBar】通过 navItems 自定义菜单项（id / label / iconName），通过 selectedItemId 高亮当前菜单；菜单 id 与右侧模板一一对应",
         "【列表页结构】标题栏 → 筛选栏 → 表格，垂直 16px 间距，与白卡四边各 24px 边距",
         "【标题栏·FormTitle】新写页面时白卡顶栏主标题必须用 `<FormTitle variant=\"level-1\" title=\"…\" />`（默认不显示副标题），标题旁状态/数量 Tag 用 `titleSuffix` 贴主标题；与右侧主按钮同一行用 `flex items-start justify-between gap-3` 组合；左侧标题区 `min-w-[120px] flex-1`，右侧操作区 `shrink-0 flex-wrap`，**禁止**再手写竖条 + `h2`，也禁止把标题挤成竖排。`pageListShared.jsx` 中的 `PageHeader` 仅为既有模板实现参考。",
-        "【筛选栏】搜索 Input 与筛选项同栏时不要撑满整行，默认使用约 240px 的中等宽度（空间不足再换行）；后接多个 FilterPill（白底圆角胶囊 + 文字 + chevron）+ 末尾 Checkbox 胶囊\"我创建的\"；项与项之间 8px、整体 36px 高、wrap 多行容错",
+        "【筛选栏】搜索 Input 必须和 Filter 在同一 flex 行，默认固定 240px（`flex: 0 0 240px` + `--size-input-width: 240px`），禁止 `--size-input-width: 100%` / `flex-1` / `w-full` 撑满整行；后接多个带 options 的标准 `<Filter />` 基础组件，包含\"我创建的\"也必须使用 Filter；项与项之间 8px、整体 36px 高、wrap 多行容错，禁止再手写 FilterPill / Checkbox 胶囊 / rounded-full 筛选按钮",
         "【表单宽度判断】所有 form 类型组件都要按字段语义决定宽度，而不是统一 `w-full`：搜索/短关键词=中宽；枚举筛选/状态/时间范围=窄到中宽；名称/标题=中到宽；描述/备注/多行文本=宽或全宽；多值标签输入按内容与容器宽度决定",
         "【双白卡变体】当列表需要左侧维度筛选（如按分类树过滤）时，在主白卡左侧再加一张**独立白圆角辅助大卡**包住 `TagBar`。该类“横向并列的大卡工作区”默认就要支持宽度拖拽：左卡用 `width + onWidthChange + minWidth + maxWidth + resizable`，外层保持 `overflow-visible` 以露出拖拽把手，右侧主卡保持 `flex-1 min-w-0` 弹性撑满；两白卡间距 8px。**勿**用 `tone=\"panel\"` 代替白卡（panel 为浅灰侧条，不是白卡片）。参见 McpManagementPage",
         "【多白卡分区（通用）】当页面右侧需要多个业务板块时，必须拆分为多个独立白卡（而不是一整张通栏白底背景）。推荐：灰底内容区外层统一用 `padding: 16px` 或等价 `margin: 16px` 外框节奏；框架层最外层白卡统一 `纯白背景 + 12px 圆角`，不加浅灰描边；白卡之间 `gap: 8px`；白卡内部布局用 `padding: 24px` + `gap: 16px`（参见 VariableManagementPage / McpManagementPage）。内部卡片、列表项、表单控件原有边框/描边保持不变。",
@@ -7141,7 +7307,7 @@
       "category": "page-pattern",
       "description": "AI 产品的入口首页模板：左侧 NavBar + 右侧内容区（顶部 Hero ChatInput + 筛选 Tab + 卡片列表网格）。适用于用户尚未进入具体上下文、第一步是输入需求 / 搜索助手 / 从模板开始的场景。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatHomePagePattern"
       },
       "relatedComponentIds": [
@@ -7161,11 +7327,11 @@
         "【反例扫描】如果同一右侧首页函数里同时出现 `ChatInput`、模板 `Card` 网格，并且外层存在 `background: var(--color-surface)` / `bg-surface rounded-*` 包住 Hero + 输入框 + Tabs + 网格，说明 AI 把入口页误生成成白卡管理页，必须拆掉这层 wrapper。",
         "【框架不动】外框灰底 + 左侧 `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` 会透传到原生 input，不要把固定宽直接写在 Input 上；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` 造成只有卡片区滚动。",
+        "【筛选与分类】分类切换必须用 `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\"`。通用铁律是：纯白容器里必须改用 `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 入口页",
@@ -7204,7 +7370,7 @@
       "category": "page-pattern",
       "description": "适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CopilotPagePattern"
       },
       "relatedComponentIds": [
@@ -7273,7 +7439,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"
       },
       "relatedComponentIds": [
@@ -7286,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 回复",
@@ -7299,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 变化"
       ],
@@ -7346,7 +7513,7 @@
       "category": "page-pattern",
       "description": "IM 对话片段：适用于客服接待、用户私信、站内信、履约沟通、社群协作等以连续消息往返为核心的即时通讯场景。单个白卡内默认包含当前线程顶部信息元素、消息流和底部组合输入框，并支持真实发送；若是 AI 协同型对话，可切换为 AI 输入框。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "IMConversationPattern"
       },
       "relatedComponentIds": [