@tfdesign/b-end 1.0.12 → 1.0.13

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-12T13:53:18.654Z",
+  "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": [
@@ -850,7 +850,7 @@
       "category": "business",
       "description": "业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Card"
       },
       "props": [
@@ -1284,7 +1284,7 @@
       "category": "business",
       "description": "会话 / 工单 / 线程侧栏列表，用于 IM 对话、即时通讯工作台、客服接待、工单处理、托管队列等需要按状态分组浏览并快速切换当前处理线程的业务场景，默认支持“默认列表 / 卡片列表”双布局切换。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ConversationList"
       },
       "props": [
@@ -1548,7 +1548,7 @@
       "category": "business",
       "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "InfoDisplayPanel"
       },
       "props": [
@@ -1715,7 +1715,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 +1925,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 +2246,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 +2380,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 +2552,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 +2786,7 @@
       "category": "basic",
       "description": "同一页面或同一卡片内，多块平级内容的切换（视图状态保持在本页）。典型：详情子页签、表单分段、筛选维度切换。跨模块站点级导航优先侧栏/路由，而不是 Tabs 堆满一级入口。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tabs"
       },
       "props": [
@@ -2968,7 +2968,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 +3194,7 @@
       "category": "basic",
       "description": "B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Form"
       },
       "props": [
@@ -3367,7 +3367,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 +3584,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 +3891,7 @@
       "category": "basic",
       "description": "数字输入框，复用 Input 触发器视觉，支持最小值、最大值、步长、小数精度，以及外置/内置步进按钮。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "InputNumber"
       },
       "props": [
@@ -4066,7 +4066,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 +4299,7 @@
       "category": "basic",
       "description": "互斥单选：同一组内只能选一个值。支持基础样式、带圆点单选卡片、单选卡片 3 类形态，适合选项少且需要平铺比较的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "RadioGroup",
         "named": [
           "Radio"
@@ -4446,7 +4446,7 @@
       "category": "basic",
       "description": "多选或二元勾选（含「全选/半选」树形父级）。用于权限、标签、筛选条件、同意协议等。互斥单选用 Radio；单一功能开闭且立即生效优先 Switch。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CheckboxGroup",
         "named": [
           "Checkbox"
@@ -4598,7 +4598,7 @@
       "category": "basic",
       "description": "开关组件，两种状态间即时切换，支持品牌绿/主色黑两种视觉变体，尺寸固定为 MD（36px 体系）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Switch"
       },
       "props": [
@@ -4699,7 +4699,7 @@
       "category": "basic",
       "description": "滑动输入条，支持单值和区间双滑块，拖动时显示数值气泡并支持刻度标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Slider"
       },
       "props": [
@@ -4839,7 +4839,7 @@
       "category": "basic",
       "description": "图片宫格上传，96×96 缩略图卡片，支持上传进度、错误重试和禁用态。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Upload"
       },
       "props": [
@@ -4977,7 +4977,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 +5050,7 @@
       "category": "business",
       "description": "B端业务列表表格，支持标准表格与卡片型表单两种类型。标准表格按列配置单元格类型与尺寸；卡片型表单用于策略、流程、脚本、模板等带父项和版本子项的业务列表，并带展开、查看、更多和分页交互。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Table"
       },
       "props": [
@@ -5279,7 +5279,7 @@
       "category": "basic",
       "description": "日期选择器，支持日期、日期时间、日期范围、日期时间范围 4 种类型。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "DatePicker"
       },
       "props": [
@@ -5426,7 +5426,7 @@
       "category": "basic",
       "description": "时间选择器，支持单时间与时间范围，触发器视觉对齐 DatePicker，浮层内按 Figma 滚轮面板选择时/分。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TimePicker"
       },
       "props": [
@@ -5537,7 +5537,7 @@
       "category": "basic",
       "description": "模态弹窗面板，含标题区、内容区和底部按钮。支持居中（center）和全屏弹窗（fullscreen）两种布局变体。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Modal"
       },
       "props": [
@@ -5706,7 +5706,7 @@
       "category": "basic",
       "description": "侧边抽屉面板，从屏幕右侧（或左侧）滑入，含标题区、内容区和底部按钮，3 档宽度，内容超高可滚动。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Sheet"
       },
       "props": [
@@ -5843,7 +5843,7 @@
       "category": "basic",
       "description": "标签输入框，严格复用 Tag 展示已选项与 +N 折叠项，宽度自适应折叠超出标签，并通过 Tooltip 展示被省略标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TagInput"
       },
       "props": [
@@ -6000,7 +6000,7 @@
       "category": "basic",
       "description": "标签组件，用于标记、分类或状态展示。支持 13 种颜色变体、2 档字体粗细、3 档尺寸、3 种圆角、可关闭功能。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tag"
       },
       "props": [
@@ -6224,6 +6224,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 +6392,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 +6540,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 +6696,7 @@
       "category": "basic",
       "description": "空状态占位组件，固定布局（插画 → 文案 → 操作），所有内容区域独立配置、按需组合。10 种内置插画对应常见场景；标题/描述/链接行/三种按钮均可独立传入或省略；buttonLayout 控制横排/竖排。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Empty"
       },
       "props": [
@@ -6735,7 +6896,7 @@
       "category": "business",
       "description": "全屏操作页容器，覆盖整个模版框架（含侧边导航），适合分步骤编辑、创建页面不同板块内容流程，以及内容量大、需沉浸长时间编辑的业务场景。支持白底（直铺/描边面板）和灰底（白卡面板）两种背景模式。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "FullScreenPage"
       },
       "props": [
@@ -6838,7 +6999,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 +7028,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 +7058,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 +7089,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 +7118,7 @@
       "category": "page-pattern",
       "description": "客服 / 在线 Agent 工作台页面框架：顶部在线状态、指标工具区、基础/托管模式切换、半透明工作区与右侧主白卡。适用于客服正在处理会话、工单、质检、托管等工作台页面。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CustomerServiceWorkspaceFramePattern"
       },
       "relatedComponentIds": [
@@ -7029,7 +7190,7 @@
       "category": "page-pattern",
       "description": "B 端列表页模板示例集：左侧 NavBar 业务侧导（5 个\"列表示例\"菜单），每项对应一个独立完整的列表页模板。每个模板自上而下：标题栏 + 筛选栏 + 表格，业务可直接复制单文件作为新页面起点。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "BasePageFramePattern"
       },
       "relatedComponentIds": [
@@ -7080,7 +7241,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 +7302,7 @@
       "category": "page-pattern",
       "description": "AI 产品的入口首页模板：左侧 NavBar + 右侧内容区（顶部 Hero ChatInput + 筛选 Tab + 卡片列表网格）。适用于用户尚未进入具体上下文、第一步是输入需求 / 搜索助手 / 从模板开始的场景。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "ChatHomePagePattern"
       },
       "relatedComponentIds": [
@@ -7161,7 +7322,7 @@
         "【反例扫描】如果同一右侧首页函数里同时出现 `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 下方单独占一行。",
+        "【筛选与分类】分类切换必须用 `Tabs size=\"sm\"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：可用外层 `<div className=\"ml-auto shrink-0\" style={{ flex: \"0 0 240px\", width: \"240px\", minWidth: \"240px\", maxWidth: \"240px\" }}>` 包裹 `Input`，也可直接给 `Input` 传 `style={{ flex: \"0 0 240px\", \"--size-input-width\": \"240px\" }}`；`Input` 的 `style` 作用于根容器。Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。",
         "【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color=\"white\"`；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。",
         "【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义"
       ],
@@ -7204,7 +7365,7 @@
       "category": "page-pattern",
       "description": "适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CopilotPagePattern"
       },
       "relatedComponentIds": [
@@ -7273,7 +7434,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": [
@@ -7346,7 +7507,7 @@
       "category": "page-pattern",
       "description": "IM 对话片段：适用于客服接待、用户私信、站内信、履约沟通、社群协作等以连续消息往返为核心的即时通讯场景。单个白卡内默认包含当前线程顶部信息元素、消息流和底部组合输入框，并支持真实发送；若是 AI 协同型对话，可切换为 AI 输入框。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "IMConversationPattern"
       },
       "relatedComponentIds": [