@tfdesign/b-end 1.0.11 → 1.0.13

package/skills/tfds/components.index.json

@@ -1,8 +1,8 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-11T06:16:09.447Z",
-  "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": [
@@ -1430,7 +1430,7 @@
         "【信息密度】标题最多 1 行，主状态标签建议 1 个，辅助标签建议总数不超过 2 个；超过时优先保留最影响当前决策的信息。",
         "【辅助信息】用户名、单号、时间属于辅助识别信息；空间不足时允许截断，但应通过 Tooltip 提供完整信息。",
         "【标签语义】右侧状态标签只承载“当前处理状态”；待干预 / 异常用 red，托管中 / 正常托管用 green，挂起 / 等待用 orange，已处理 / 已完成用 blue；原因、规则、倒计时等信息作为辅助标签。",
-        "【收起态】仅当空间受限但仍需保留对象切换能力时收起为纯头像态；收起态只承担切换，不承担复杂状态判断，展开后应恢复用户上次工作宽度。",
+        "【收起态】仅当空间受限但仍需保留对象切换能力时收起为纯头像态；收起态只承担切换，不承担复杂状态判断，展开后应恢复用户上次工作宽度。纯头像模式每个头像按钮行高固定为 68px，选中态与未选中态高度必须一致；选中态不得因只包裹头像内容而变成自适应高度，禁止用 h-auto、min-h 或按 Avatar 内容高度撑开替代固定 68px。",
         "【卡片列表限制】`variant=\"card\"` 时顶部 tabs 是唯一的分类切换入口；卡片列表不显示分组标题，也不支持分组展开/收起。选中“全部”时，卡片必须按状态分类顺序 `待干预 → 托管中 → 其它` 自上而下连续排列；禁止再引入独立 `cards` 数据源或把 card 形态拆成另一套列表。",
         "【卡片列表宽度】`variant=\"card\"` 时不进入纯头像收起态，但保留整体宽度拖拽能力；拖拽变宽后卡片宽度必须按实际可用宽度自适应扩展，拖窄时不得小于 333px。",
         "【卡片列表栅格】当 `variant=\"card\"` 时，列数必须基于组件实际可用宽度动态判断：`<=580px` 为 1 列，`>580px` 为 2 列，`>950px` 为 3 列；嵌入客服工作台等外层可拖拽容器时，也必须读取外层给到的实际宽度，而不是固定按默认 400px 判断。卡片横向与纵向间距都统一为 `16px`。",
@@ -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 随机外链头像。",
@@ -2388,10 +2388,12 @@
         "【文本回复】title=\"\" + steps={null} + resultText=\"...\" 即可渲染纯文本 AI 回复（仅 14px/20px 段落 + 可选 actions），常用于短答、确认、致谢等非任务型回复",
         "【执行流·结构】title + steps[] 构成完整执行流；步骤左侧 16px 轨道槽位 + 12px 内容间距 + 14px/20px 正文；右侧 chevron 控制收起展开",
         "【执行流·状态】status=\"completed\" 绿色对勾；status=\"processing\" 旋转环形动效 + 最新一条操作卡片浅灰骨架屏扫光",
-        "【执行流·结果区】resultText 独立通栏文本；resultArtifacts[] 多张产物卡（网页/代码/表格，统一 32px 玻璃感图标 + 标题 + meta + 更多按钮 + 单行省略号）；confirms[] 是结果区的另一种形态——人工确认卡（mode=\"text-card\" 文本+卡片，\"card-only\" 仅卡片）",
+        "【执行流·结果区】resultText 独立通栏文本；resultArtifacts[] 多张产物卡（网页/代码/表格，统一 32px 玻璃感图标 + 标题 + meta + 更多按钮 + 单行省略号）；confirms[] 是结果区的另一种形态——人工确认卡（mode=\"text-card\" 文本+卡片，\"card-only\" 仅卡片，\"option-card\" 澄清确认卡片1，\"form-card\" 澄清确认卡片2）",
         "【执行流·任务进行中徽章】taskBadge 传字符串启用 indigo 徽章 + 星标，位于结果区之后、消息操作之前，常用于\"任务进行中\"提示",
         "【卡片·任务规划】plan 传对象启用：灰底圆角 12 容器 + 头部图标 + 任务数徽章 + chevron；展开后白底内容卡内紫色编号方块（gradient violet）+ 任务标题 + 灰圆点子项；右下\"开始执行任务\"黑底主按钮",
         "【卡片·配置表单】配置表单类卡片复用执行流的 confirms（mode=\"text-card\" 或 \"card-only\"），需要\"次操作 + 主操作\"按钮组的人工确认场景",
+        "【卡片·澄清确认卡片1】凡是涉及用户来确认/澄清以帮助 AI 确认内容的场景，统一使用 confirms mode=\"option-card\"；内部必须复用基础组件 RadioGroup/Radio 的 styleType=\"pureCard\" + variant=\"brand\" 单选卡片，不允许手搓 option div；options 支持 { value, label, disabled }，defaultSelectedValue 设置默认选项，onPrimaryAction 接收 { value, option }；面板尺寸/底色完全对齐【配置表单】（mode=\"text-card\"/\"card-only\"），仅内容由文本换成单选组件",
+        "【卡片·澄清确认卡片2】当 AI 需要用户通过结构化字段（多个选项 + 文本输入）来确认/澄清信息时，统一使用 confirms mode=\"form-card\"；内部必须复用基础组件 Form + FormField，formItems[] 支持 select/input/input-number/textarea/radio/checkbox/switch/date-picker 等字段类型，每项 { id, label, type, placeholder, defaultValue, options?, fullWidth }，不允许手搓 input/select；面板尺寸/底色完全对齐【配置表单】与【澄清确认卡片1】，仅内容由单选组件换成 Form 表单组件",
         "【深度思考·进行中】status=\"thinking\" + thinking={ state:\"thinking\", inProgressLabel:\"深度思考中 ...\" }，仅显示头像 + 思考文案，不渲染其他内容",
         "【深度思考·已完成】thinking={ state:\"completed\", durationLabel, content, defaultExpanded } 渲染\"深度思考（用时 X 秒）\"+ chevron + 灰色引用线左侧 + 思考文本；位于 AI 头像之后、标题/步骤之前",
         "【操作栏】actions 传 true 启用复制/引用/赞/踩四件套；传对象可单独 showCopy/showQuote/showLike/showDislike + copyCount + onXxx 回调；时间戳由 timestamp 字段单独控制",
@@ -2439,6 +2441,14 @@
           "label": "卡片 · 配置表单（人工确认）",
           "code": "<ChatMessage header title=\"\" steps={null} resultText=\"已完成售后政策摘要整理，以下审核口径需要人工确认后再继续生成标准答复。\" confirms={[{ mode: \"text-card\", title: \"售后政策确认\", description: \"请确认退货退款、换货与仅退款的适用范围\", iconName: \"sticker-square-stroked\", secondaryActionLabel: \"返回修改\", primaryActionLabel: \"确认继续\" }]} />"
         },
+        {
+          "label": "卡片 · 澄清确认卡片1",
+          "code": "<ChatMessage header title=\"\" steps={null} confirms={[{ mode: \"option-card\", title: \"澄清确认\", iconName: \"clipboard-check-stroked\", primaryActionLabel: \"确认\", defaultSelectedValue: \"handoff-guide\", options: [{ value: \"handoff-guide\", label: \"方案1： 用户请求转人工但系统未触发转接，持续引导自助操作\" }, { value: \"handoff\", label: \"方案2： 用户请求转人工\" }, { value: \"self-service\", label: \"方案3： 持续引导自助操作\" }], onPrimaryAction: ({ value, option }) => {} }]} />"
+        },
+        {
+          "label": "卡片 · 澄清确认卡片2",
+          "code": "<ChatMessage header title=\"\" steps={null} confirms={[{ mode: \"form-card\", title: \"澄清确认\", iconName: \"clipboard-check-stroked\", primaryActionLabel: \"确认\", formItems: [{ id: \"scene\", label: \"业务场景\", type: \"select\", placeholder: \"请选择业务场景\", defaultValue: \"after-sales\", options: [{ value: \"after-sales\", label: \"售后服务\" }, { value: \"pre-sales\", label: \"售前咨询\" }, { value: \"logistics\", label: \"物流配送\" }], fullWidth: true }, { id: \"channel\", label: \"处理渠道\", type: \"select\", placeholder: \"请选择处理渠道\", defaultValue: \"self-service\", options: [{ value: \"self-service\", label: \"自助引导\" }, { value: \"handoff\", label: \"转人工\" }], fullWidth: true }, { id: \"remark\", label: \"补充说明\", type: \"input\", placeholder: \"请输入补充说明（可选）\", fullWidth: true }] }]} />"
+        },
         {
           "label": "深度思考 · 思考中",
           "code": "<ChatMessage header status=\"thinking\" steps={null} thinking={{ state: \"thinking\", inProgressLabel: \"深度思考中 ...\" }} />"
@@ -2542,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": [
@@ -2776,7 +2786,7 @@
       "category": "basic",
       "description": "同一页面或同一卡片内，多块平级内容的切换（视图状态保持在本页）。典型：详情子页签、表单分段、筛选维度切换。跨模块站点级导航优先侧栏/路由，而不是 Tabs 堆满一级入口。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tabs"
       },
       "props": [
@@ -2958,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": [
@@ -3184,7 +3194,7 @@
       "category": "basic",
       "description": "B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Form"
       },
       "props": [
@@ -3265,7 +3275,10 @@
         "【组件定位】Form 是字段组合层，只管理 label、提示、错误反馈、top/left 布局和字段编排，不重新定义已有表单控件样式",
         "【控件复用】已有基础组件必须复用：input 复用 Input，textarea 复用 TextArea（仅传基组件已有 props，默认 minRows=3、resize 纵向增高与 TextArea 一致；System Prompt / JSON / 代码参数字段必须传 variant=\"code\"），input-number 复用 InputNumber，select 复用 Select，tag-input 复用 TagInput，checkbox 复用 CheckboxGroup，radio 复用 RadioGroup，switch 复用 Switch，date-picker 复用 DatePicker，time-picker 复用 TimePicker，slider 复用 Slider，upload 复用 Upload",
         "【布局】Form 在页面主内容区、白色卡片容器与纵向堆叠场景中默认 `w-full min-w-0 self-stretch`；labelPosition=\"top\" 时字段容器与控件区都默认全宽，label 与控件间距 4px；labelPosition=\"left\" 时标签列固定 96px、间距 24px、右侧控件区使用 `flex-1 min-w-0 w-full` 撑满剩余宽度",
-        "【表单宽度铁律】页面主表单、白卡表单、抽屉/弹窗正文表单、侧栏详情表单中，Input / Select / TextArea / InputNumber / DatePicker / TimePicker / TagInput 必须默认撑满字段内容列，且同一区域左右边界对齐；只有筛选栏、工具条、紧凑查询区允许固定宽 160/200/240px，禁止把 300px 示意宽或筛选栏固定宽套到业务表单正文",
+        "【正文表单宽度铁律】页面主表单、白卡/卡片内配置表单、澄清确认卡片、抽屉/弹窗正文表单、侧栏详情表单中，Input / Select / TextArea / InputNumber / DatePicker / TimePicker / TagInput / Slider / InputGroup 这类字段型控件必须默认撑满字段内容列，且同一表单区域左右边界对齐、宽度一致。多个字段上下排列在同一卡片容器内时，每个字段都应随卡片内容区动态撑满，不受 240px / 200px / 320px 的筛选搜索宽度限制。",
+        "【筛选工具条宽度例外】只有列表筛选栏、工具条、紧凑查询区、AI 首页模板搜索、Tabs 右侧搜索这类横向辅助查询入口，才允许固定中窄宽：搜索 Input 默认约 240px、最小 200px、最大 320px；Select / DatePicker / TimePicker / TagInput 等筛选控件常用 160-240px（日期时间范围可更宽）。禁止把筛选工具条固定宽套到业务表单正文。",
+        "【筛选栏不是纵向表单】列表页顶部筛选栏、工具条、紧凑查询区不使用 Form 的纵向正文表单排布；搜索 Input、Select/DatePicker/TagInput 等筛选控件、重置/查询 Button 必须放在同一个横向 flex 行流中（推荐 `flex items-center flex-wrap gap-2`），禁止用 `Form layout=\"vertical\"`、`flex-col` 或 `space-y-*` 把筛选条件和按钮上下堆叠。只有真正的配置填写、详情编辑、弹窗正文才使用 Form 的纵向/网格字段布局。",
+        "【紧凑/特殊控件宽度】Switch、普通 CheckboxGroup、普通 RadioGroup 的控件本体按语义保持自然宽度，但字段容器仍占满表单区域并与其它字段左边界对齐；卡片型 Radio/Checkbox 选项可按场景设置 `w-full` 形成等宽选项。Upload 字段区域占满表单区域，内部图片 tile 保持固定尺寸并自动换行，不强行拉伸 tile。",
         "【自定义控件宽度】使用 children 或 item.control 传入自定义字段时，外层必须补 `className=\"w-full min-w-0 max-w-full\"`；否则会绕过 Form 内置的 `!w-full` 控件宽度约束，导致 Input、Select、TextArea 等宽度不一致",
         "【详情页全集预览】组件详情页的“全集”分类按字段类型从上到下单列排列，每个组件间距 40px，超出预览画布时在画布内滚动查看",
         "【字段配置】items 数组每项支持 id、label、type、required、labelPosition、middleHelpText、helpText、error、errorText、disabled、value/defaultValue/onChange 等字段；当字段命中 AI 推荐语义时，可继续透传 aiSuggestion、aiSuggestions、onAdoptSuggestion、onRefreshAiSuggestions 到 Input / Select / TextArea",
@@ -3354,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": [
@@ -3447,7 +3460,8 @@
         "【AI推荐误判边界】普通 placeholder、helpText、默认值、静态示例文案不等于 AI 推荐能力；只有明确存在“推荐/建议/AI辅助填写”语义时，才默认展示 Input 的 AI 推荐区。",
         "【刷新推荐】当存在 AI 推荐时，Input 默认应支持真实刷新；未接业务服务时，组件内部仍需轮换下一组建议，不允许点了刷新但内容不变。若传入 onRefreshAiSuggestions，应在本地刷新闭环之外继续向外通知；按钮位于清空按钮右侧，tooltip 固定为“刷新推荐”，icon 使用 `ai-fill-3` 渐变 token",
         "【采纳回调】点击任一推荐内容时都会触发 onAdoptSuggestion(suggestion)，并默认把推荐值真实写入输入框；受控模式下需配合 value + onChange 完成外部值更新",
-        "【宽度】默认随父容器满宽（避免板块内输入框不撑满）；需要固定宽（如筛选栏）时，用外层 style.width（240/200/160）或传 `style={{ \"--size-input-width\": \"240px\" }}` 控制",
+        "【宽度·正文表单】Input 默认随父容器满宽；在 Form 正文、卡片内纵向表单、配置表单、详情编辑、抽屉/弹窗正文中，Input 必须跟随字段列动态撑满，并与同组 Select / TextArea / InputNumber 等字段宽度一致。不要把搜索框 240px 规则套到正文表单字段。",
+        "【宽度·辅助查询】只有列表筛选栏、工具条、AI 首页模板搜索、Tabs 右侧搜索等横向辅助查询入口，才使用固定中等宽度：默认 240px，最小 200px，最大不超过 320px；可用外层 style.width 或 `style={{ \"--size-input-width\": \"240px\" }}` 控制。此类场景禁止写 `flex-1` / `w-full` 让搜索框撑满整行或撑满 Tabs 右侧全部剩余空间。",
         "【尺寸】仅保留 MD 一种尺寸，高度固定 36px；与 Button md 高度一致",
         "【页面默认】页面主表单、筛选栏、白卡内录入区、侧栏与弹窗正文中的单行 Input 默认使用 36px 高度，不再提供 size 配置"
       ],
@@ -3570,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": [
@@ -3694,7 +3708,7 @@
         "【自动增高】resize=\"vertical\" 时高度随正文 scrollHeight 变化；禁止原生拖拽（resize-none）。resize=\"none\" 时高度锁定在 minRows 对应高度，超出部分框内滚动",
         "【撑满父容器】fillHeight=true 时，TextArea 外层、字段框和正文区都会进入 `flex-1 min-h-0` 撑满模式，并强制正文区内部滚动；父容器若缺 `flex-1 min-h-0 overflow-hidden`，撑满不会生效。",
         "【字数】maxLength 可选，不传则不限制字数、不施加原生 maxLength；showCount=true 且无 maxLength 时仅展示已输入字数；有 maxLength 时展示「当前/上限」，enforceMaxLength=false 可超出仅标红",
-        "【宽度】默认随父容器满宽；筛选栏/工具条等并排场景才使用固定宽（240/200/160）。主编辑区配合 fillHeight 可撑满高度，宽度仍默认满宽",
+        "【宽度】默认随父容器满宽；在 Form 正文、卡片内纵向表单、配置表单、详情编辑、抽屉/弹窗正文中，TextArea 必须跟随字段列动态撑满，并与同组 Input / Select 等字段宽度一致。筛选栏/工具条等并排辅助查询场景才允许固定宽（240/200/160）。主编辑区配合 fillHeight 可撑满高度，宽度仍默认满宽",
         "【AI推荐】支持单条 aiSuggestion 和多条 aiSuggestions；推荐区固定展示在 TextArea 下方，并支持真实点击采纳与刷新推荐。未接业务服务时，组件内部也必须能够轮换下一组草稿建议，不能只展示静态文案",
         "【AI推荐采纳】点击推荐草稿后，TextArea 默认应真实写入推荐内容，并触发 onAdoptSuggestion(suggestion)；若传入 onRefreshAiSuggestions，应在本地轮换草稿之外继续对外通知",
         "【详情预览·侧栏默认】与 _preview.panelDefaults 一致：内容「空」、超长计数「关」、可用性「默认可用」、默认高度「3 行」、校验态「默认」、高度适配「纵向拉伸」",
@@ -3877,7 +3891,7 @@
       "category": "basic",
       "description": "数字输入框，复用 Input 触发器视觉，支持最小值、最大值、步长、小数精度，以及外置/内置步进按钮。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "InputNumber"
       },
       "props": [
@@ -3948,7 +3962,7 @@
       ],
       "rules": [
         "【⛔ AI 强制使用场景】所有数字类参数字段必须使用 InputNumber，禁止用 `<input type=\"number\">` 或 Input 组件代替。典型场景：Temperature（0~2 精度 0.01）、Top-P（0~1 精度 0.01）、Max Tokens（整数步进）、学习率、权重、阈值等一切数值配置项。原生 input 会产生黑色边框并丢失步进、范围约束、精度控制能力",
-        "【组件定位】InputNumber 是数字输入原子组件，输入框视觉必须复用 Input：表单正文默认随字段列满宽，MD 高 36px、圆角 8px、白底灰边框、聚焦 1px 绿色描边；仅筛选栏/工具条/详情预览示意可由父容器限制为 160/200/240/300px",
+        "【组件定位】InputNumber 是数字输入原子组件，输入框视觉必须复用 Input：表单正文、卡片内纵向表单、配置表单、详情编辑和抽屉/弹窗正文默认随字段列满宽，并与同组 Input / Select 等字段宽度一致；MD 高 36px、圆角 8px、白底灰边框、聚焦 1px 绿色描边。仅筛选栏/工具条/详情预览示意可由父容器限制为 160/200/240/300px",
         "【按钮布局】默认 outer 外置步进按钮：位于输入框右侧，宽 16px、高 36px，与输入框间距 4px，上下两个箭头图标均为 8×8px",
         "【内置按钮】innerButtons=true 时步进按钮内嵌在输入框右侧，默认隐藏，仅在容器 hover 或 focus-within 时显示，输入内容需预留右侧空间",
         "【禁用态】disabled 时输入框与步进按钮同步进入浅灰底、禁用文字和 0.6 透明度；按钮不可点击",
@@ -4052,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": [
@@ -4157,7 +4171,8 @@
         "【关闭】点击触发器、选项或外部 mousedown（触发器与面板均排除）关闭",
         "【键盘】Enter/Space 展开或选中高亮项；↑/↓ 移动高亮；Esc 关闭；Tab 失焦关闭",
         "【无障碍】触发器 role=\"combobox\" aria-expanded；列表 role=\"listbox\" 与 role=\"option\"",
-        "【宽度】触发器为 w-full min-w-0 max-w-full，表单正文默认随字段列满宽；筛选栏、工具条或详情预览示意才允许由父容器限制宽度，禁止在业务表单正文把 Select 固定为 300px 导致与 Input / TextArea 不对齐",
+        "【宽度·正文表单】触发器为 w-full min-w-0 max-w-full；在 Form 正文、卡片内纵向表单、配置表单、详情编辑、抽屉/弹窗正文中，Select 必须默认随字段列满宽，并与同组 Input / TextArea / DatePicker 等字段宽度一致。禁止在业务表单正文把 Select 固定为 240px / 300px 导致与其它字段不对齐。",
+        "【宽度·辅助查询】仅筛选栏、工具条、紧凑查询区等横向辅助查询入口允许由父容器限制为中窄宽，常用 160-240px；该限制不作用于正文表单字段。",
         "【右侧图标】下拉箭头、清除按钮与自定义 indicator 均固定为 16×16px",
         "【尺寸】仅保留 MD 一种尺寸，触发器高度固定 36px；与 Input 保持一致"
       ],
@@ -4282,9 +4297,9 @@
       "kind": "component",
       "name": "Radio",
       "category": "basic",
-      "description": "互斥单选：同一组内只能选一个值。适合选项少、需要并排或纵列展示全部标签的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。",
+      "description": "互斥单选：同一组内只能选一个值。支持基础样式、带圆点单选卡片、单选卡片 3 类形态，适合选项少且需要平铺比较的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "RadioGroup",
         "named": [
           "Radio"
@@ -4300,6 +4315,16 @@
           ],
           "default": "brand"
         },
+        {
+          "name": "styleType",
+          "type": "enum",
+          "options": [
+            "basic",
+            "card",
+            "pureCard"
+          ],
+          "default": "basic"
+        },
         {
           "name": "layout",
           "type": "enum",
@@ -4341,7 +4366,11 @@
         "【受控】RadioGroup 使用 value + onChange(nextValue, event)；非受控用 defaultValue",
         "【禁用】RadioGroup disabled 禁用整组；Radio 可单独 disabled",
         "【变体】brand 为选中实心主色 + 白点；black 为深灰主色 + 白点",
-        "【布局】vertical 组间距 12px；horizontal 组间距 16px（对齐 Semi radioGroup）",
+        "【样式分类】styleType=basic 为基础样式；styleType=card 为带圆点单选卡片；styleType=pureCard 为单选卡片。3 类都支持 variant=brand/black",
+        "【卡片样式】带圆点单选卡片保留左侧 16px 圆点指示器，适合需要强调“单选控件感”的配置项；单选卡片隐藏圆点，仅用卡片描边/浅底表达选中，适合更轻量的枚举切换",
+        "【卡片文案】card / pureCard 的文案默认左对齐并向右撑满；当组件宽度受限时单行省略，hover 文案区域通过 Tooltip 展示完整内容",
+        "【选中强调】card / pureCard 选中后文案字重自动变粗；未选中保持常规字重。基础样式不跟随这条规则变化",
+        "【布局】vertical 组间距 12px；horizontal 组间距 16px，全部选项优先横向排列，整组容器宽度不够时自动换行到下一行",
         "【样式来源】HIUIpackage/es/components/radio-group 为 Semi 封装，视觉以 umd/view.css 为准",
         "【表单】未传 name 时自动用稳定 id，同一组内各 input 共享 name",
         "【无障碍】使用原生 type=\"radio\" 与 radiogroup 容器；聚焦可见环在指示圈上",
@@ -4352,6 +4381,14 @@
           "label": "基础",
           "code": "<RadioGroup defaultValue=\"b\" onChange={(v) => {}}><Radio value=\"a\">选项 A</Radio><Radio value=\"b\">选项 B</Radio></RadioGroup>"
         },
+        {
+          "label": "带圆点单选卡片",
+          "code": "<RadioGroup styleType=\"card\" layout=\"horizontal\" defaultValue=\"a\"><Radio value=\"a\">单选框标题</Radio><Radio value=\"b\">单选框标题</Radio></RadioGroup>"
+        },
+        {
+          "label": "单选卡片",
+          "code": "<RadioGroup styleType=\"pureCard\" layout=\"horizontal\" defaultValue=\"a\"><Radio value=\"a\">单选框标题</Radio><Radio value=\"b\">单选框标题</Radio></RadioGroup>"
+        },
         {
           "label": "横向",
           "code": "<RadioGroup layout=\"horizontal\" defaultValue=\"a\"><Radio value=\"a\">月付</Radio><Radio value=\"b\">年付</Radio></RadioGroup>"
@@ -4409,7 +4446,7 @@
       "category": "basic",
       "description": "多选或二元勾选（含「全选/半选」树形父级）。用于权限、标签、筛选条件、同意协议等。互斥单选用 Radio；单一功能开闭且立即生效优先 Switch。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CheckboxGroup",
         "named": [
           "Checkbox"
@@ -4561,7 +4598,7 @@
       "category": "basic",
       "description": "开关组件，两种状态间即时切换，支持品牌绿/主色黑两种视觉变体，尺寸固定为 MD（36px 体系）。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Switch"
       },
       "props": [
@@ -4662,7 +4699,7 @@
       "category": "basic",
       "description": "滑动输入条，支持单值和区间双滑块，拖动时显示数值气泡并支持刻度标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Slider"
       },
       "props": [
@@ -4802,7 +4839,7 @@
       "category": "basic",
       "description": "图片宫格上传，96×96 缩略图卡片，支持上传进度、错误重试和禁用态。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Upload"
       },
       "props": [
@@ -4940,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": [
@@ -5013,7 +5050,7 @@
       "category": "business",
       "description": "B端业务列表表格，支持标准表格与卡片型表单两种类型。标准表格按列配置单元格类型与尺寸；卡片型表单用于策略、流程、脚本、模板等带父项和版本子项的业务列表，并带展开、查看、更多和分页交互。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Table"
       },
       "props": [
@@ -5242,7 +5279,7 @@
       "category": "basic",
       "description": "日期选择器，支持日期、日期时间、日期范围、日期时间范围 4 种类型。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "DatePicker"
       },
       "props": [
@@ -5300,7 +5337,8 @@
         "【场景·daterange / datetimerange】表格/列表顶部时间范围筛选、统计报表数据周期选择、合同有效期区间",
         "【禁忌】不要用 type=\"date\" 代替 type=\"datetime\"（会丢失时分信息）；不要把两个 DatePicker 手拼成范围选择（直接用 type=\"daterange\"）；不要在极紧凑行内（宽度 < 200px）使用，面板最小宽度 280px",
         "【类型说明】date / datetime → 单月面板单值选择；daterange / datetimerange → 双月面板范围选择，范围中间区间浅色连续高亮",
-        "【宽度】表单正文默认随字段列满宽；筛选栏、工具条或详情预览示意才允许由父容器限制宽度（date / datetime / daterange 常用 300px，datetimerange 常用 400px）。禁止在业务表单正文把 DatePicker 固定为 300px 导致与 Input / Select 不对齐",
+        "【宽度·正文表单】表单正文、卡片内纵向表单、配置表单、详情编辑和抽屉/弹窗正文默认随字段列满宽，并与同组 Input / Select / TimePicker 等字段宽度一致；禁止在业务表单正文把 DatePicker 固定为 300px 导致字段不对齐。",
+        "【宽度·辅助查询】仅筛选栏、工具条或详情预览示意允许由父容器限制宽度（date / datetime / daterange 常用 240-300px，datetimerange 常用 320-400px）。该限制不作用于正文表单字段。",
         "【面板行为】单值点击即选中并关闭；范围需点击两次确定起止后自动关闭",
         "【时间栏】datetime / datetimerange 面板底部固定显示 52px 日期/时间信息栏",
         "【组合·表单】配 Form 使用时包在 Form.Item（type=\"date-picker\"）里；时间范围筛选常配合 Table 顶部工具栏 + \"查询\"Button 使用",
@@ -5388,7 +5426,7 @@
       "category": "basic",
       "description": "时间选择器，支持单时间与时间范围，触发器视觉对齐 DatePicker，浮层内按 Figma 滚轮面板选择时/分。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TimePicker"
       },
       "props": [
@@ -5438,7 +5476,8 @@
       "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 已约定处。",
         "【类型】time 为单时间输入框；timerange 为时间范围输入框",
-        "【触发器】视觉对齐 Figma / DatePicker：表单正文默认随字段列满宽，详情预览示意可用 300px；36px 高、白底、1px 默认描边、8px 圆角，内容默认左对齐，右侧时钟图标固定为 16×16px",
+        "【触发器】视觉对齐 Figma / DatePicker：表单正文、卡片内纵向表单、配置表单、详情编辑和抽屉/弹窗正文默认随字段列满宽，并与同组 Input / Select / DatePicker 等字段宽度一致；详情预览示意可用 300px。36px 高、白底、1px 默认描边、8px 圆角，内容默认左对齐，右侧时钟图标固定为 16×16px",
+        "【宽度·辅助查询】仅筛选栏、工具条、紧凑查询区等横向辅助查询入口允许由父容器限制为中窄宽，time 常用 160-200px，timerange 常用 200-240px；该限制不作用于正文表单字段。",
         "【面板】点击 Trigger 展开浮层；面板默认与 Trigger 等宽，最小宽度 150px；单时间面板高 252px，无标题；时间范围面板高 304px，顶部显示开始/结束标题",
         "【固定选择区】面板中间固定 36px 高浅绿选择区，时/分列按面板宽度等分并居中对齐；timerange 使用同一条横跨四列的固定选择区，四列都支持真实滚动选择",
         "【选择】点击任一时间项会滚动到中间选择区；滚动时/分列时实时同步选择区内最近项，停止后自动吸附",
@@ -5498,7 +5537,7 @@
       "category": "basic",
       "description": "模态弹窗面板，含标题区、内容区和底部按钮。支持居中（center）和全屏弹窗（fullscreen）两种布局变体。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Modal"
       },
       "props": [
@@ -5667,7 +5706,7 @@
       "category": "basic",
       "description": "侧边抽屉面板，从屏幕右侧（或左侧）滑入，含标题区、内容区和底部按钮，3 档宽度，内容超高可滚动。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Sheet"
       },
       "props": [
@@ -5804,7 +5843,7 @@
       "category": "basic",
       "description": "标签输入框，严格复用 Tag 展示已选项与 +N 折叠项，宽度自适应折叠超出标签，并通过 Tooltip 展示被省略标签。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "TagInput"
       },
       "props": [
@@ -5887,7 +5926,8 @@
         }
       ],
       "rules": [
-        "【视觉】容器对齐 Figma taginput：表单正文默认随字段列满宽，详情预览示意可用 300px；36px 高、白底、1px 默认描边、8px 圆角，空态显示“请输入”",
+        "【视觉】容器对齐 Figma taginput：表单正文、卡片内纵向表单、配置表单、详情编辑和抽屉/弹窗正文默认随字段列满宽，并与同组 Input / Select 等字段宽度一致；详情预览示意可用 300px。36px 高、白底、1px 默认描边、8px 圆角，空态显示“请输入”",
+        "【宽度·辅助查询】仅筛选栏、工具条、紧凑查询区等横向辅助查询入口允许由父容器限制为中窄宽，常用 200-240px；该限制不作用于正文表单字段。",
         "【Tag 复用】已选项、+N 折叠项、Tooltip 内省略项、隐藏测量项都必须使用平台现有 Tag 组件；TagInput 不自绘任何标签视觉",
         "【宽度自适应】通过 ResizeObserver 监听容器宽度，按真实 Tag 宽度计算可见数量；宽度变窄自动折叠，变宽自动展开",
         "【溢出折叠】可见区域放不下的标签折叠为 +N，+N 固定在末尾并以 Tag 渲染；悬浮 +N 使用白底 tone=\"light\" Tooltip 展示被省略的所有 Tag，该白底样式仅用于 TagInput 更多标签场景",
@@ -5960,7 +6000,7 @@
       "category": "basic",
       "description": "标签组件，用于标记、分类或状态展示。支持 13 种颜色变体、2 档字体粗细、3 档尺寸、3 种圆角、可关闭功能。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Tag"
       },
       "props": [
@@ -6184,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",
@@ -6191,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": [
@@ -6339,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": [
@@ -6495,7 +6696,7 @@
       "category": "basic",
       "description": "空状态占位组件，固定布局（插画 → 文案 → 操作），所有内容区域独立配置、按需组合。10 种内置插画对应常见场景；标题/描述/链接行/三种按钮均可独立传入或省略；buttonLayout 控制横排/竖排。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "Empty"
       },
       "props": [
@@ -6695,7 +6896,7 @@
       "category": "business",
       "description": "全屏操作页容器，覆盖整个模版框架（含侧边导航），适合分步骤编辑、创建页面不同板块内容流程，以及内容量大、需沉浸长时间编辑的业务场景。支持白底（直铺/描边面板）和灰底（白卡面板）两种背景模式。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "FullScreenPage"
       },
       "props": [
@@ -6798,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": [],
@@ -6827,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": [],
@@ -6857,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": [],
@@ -6888,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": [],
@@ -6917,7 +7118,7 @@
       "category": "page-pattern",
       "description": "客服 / 在线 Agent 工作台页面框架：顶部在线状态、指标工具区、基础/托管模式切换、半透明工作区与右侧主白卡。适用于客服正在处理会话、工单、质检、托管等工作台页面。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CustomerServiceWorkspaceFramePattern"
       },
       "relatedComponentIds": [
@@ -6938,6 +7139,8 @@
         "【Figma 对齐】默认视觉对齐 Figma 节点 8279:67909「在线Agent」：根容器浅灰底 `--color-blueGrey-200`、16px 内边距、顶部 24px 状态条、下方左侧半透明板块 + 右侧主白卡；6 个可见圆角统一为 16px：左侧板块左上 / 左下，右侧主白卡四角。",
         "【结构】根节点必须直接作为页面主工作区或右侧主内容区的一级框架；内部顺序固定为 Header（客服名称 / 在线状态 / 指标工具 / 模式切换） + Workspace（左侧上下文占位 + 右侧主面板）。不要再用大白卡或 `bg-surface rounded-*` 包住整个模板。",
         "【顶部栏】左侧显示客服名称与在线时长；中部数据栏必须默认按页面可用宽度动态居中，不随左侧客服名称或右侧模式切换偏移；指标容器使用 `bg-white/60 + border-white + radius-md + px-4 py-1`；在线状态胶囊与工具入口这类按钮化页面元素必须复用基础 `Button`；右侧基础模式 / 托管模式属于同页模式切换，必须复用基础 `Tabs`，默认使用 `variant=\"segment\"`，不要手写 tab button 或用 NavBar 替代。",
+        "【顶部数据】指标区左侧数据仅用于展示当前页面相关的高优关注数据，形式固定为 Icon + 数字值；最多展示 4 类数据，超出时应按业务优先级裁切；每一类数据都必须支持 hover/focus 通过 Tooltip 查看文案解释，tooltip 文案优先来自 `tooltip` / `description`，否则回退到 `label`。",
+        "【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 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），防止主面板左上 / 左下圆角切角处露出左侧板块的右边界或描边，避免出现“残缺一块”的视觉。",
         "【左右拖拽】左侧区域与右侧主白卡之间必须提供纵向拖拽热区，默认热区 8px；拖拽热区覆盖在主面板左边缘上，不占用布局宽度、不制造中间空隙；拖动时调整左侧区域宽度并让右侧主面板 `flex-1 min-w-0` 自动占满剩余空间；左侧默认宽度 432px（400px 可视会话列表 + 32px 主面板覆盖区）；拖拽最小宽度优先由左侧业务组件最小可用宽度决定，例如 ConversationList 默认列表纯头像锁定 88px 时，左侧板块最小宽度为 `max(100px 框架兜底, 88px + 32px 覆盖区) = 120px`；ConversationList 卡片列表最小内容宽度为 333px，左侧板块最小宽度为 365px；右侧纯白主容器最小宽度 380px，左侧最大可拖宽度需按 `工作区宽度 + 32px 覆盖量 - 380px` 动态计算；拖拽条需支持键盘左右方向键微调。",
@@ -6987,7 +7190,7 @@
       "category": "page-pattern",
       "description": "B 端列表页模板示例集：左侧 NavBar 业务侧导（5 个\"列表示例\"菜单），每项对应一个独立完整的列表页模板。每个模板自上而下：标题栏 + 筛选栏 + 表格，业务可直接复制单文件作为新页面起点。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "BasePageFramePattern"
       },
       "relatedComponentIds": [
@@ -7014,6 +7217,7 @@
         "【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `base-management`：灰底 AppShell + `main p-4 gap-2` + 一张或多张白色 WorkSurface；页面 header / 顶部 Tabs / 主次操作直接坐灰底。",
         "【五模板定位】本模板只解决“管理一批结构化对象”的 B 端工作区：变量、MCP、策略、知识库、数据资产、审核任务、配置列表等。用户第一步必须是筛选 / 搜索 / 浏览对象 / 批量操作 / 查看详情；如果第一步是“输入一句需求开始 AI 任务”，改用 `ChatHomePagePattern`；如果第一步是“继续追问 AI 任务”，改用 `ChatConversationPattern`；如果右侧主角是对象/产物编辑且 AI 只是侧助，改用 `CopilotPagePattern`；如果是真实客服/私信线程，改用 `IMConversationPattern`。",
         "【组件选型门禁】白卡标题必须用 `FormTitle`；筛选字段按语义用 `Input` / `Select` / `DatePicker` / `TagInput` / `Checkbox`；结构化列表必须用 `Table`；状态/类型/数量徽标必须用 `Tag`；所有操作必须用 `Button`；左侧分类维度必须用 `TagBar`；弹层按复杂度用 `Modal` 或 `Sheet`；空状态用 `Empty`。禁止手写标题、状态徽标、表格、筛选胶囊或按钮。",
+        "【筛选栏同一行硬约束】列表页白卡顶部筛选栏是查询工具条，不是业务正文表单；搜索框、下拉框 / 日期 / 标签等筛选控件、重置与查询按钮必须处在同一行流内，默认使用 `flex items-center flex-wrap gap-2`。搜索框建议宽 240px，下拉筛选建议 160-200px，按钮 `shrink-0`；仅当容器宽度不足时允许在同一个 flex 行流中自然换行，禁止每个控件独占一行、禁止用 `flex-col` / `space-y-*` / `Form layout=\"vertical\"` 把搜索框、下拉框和按钮上下堆叠。",
         "【页面范式选型总则】TFDS 页面框架不只有一种白卡管理页范式。生成页面前必须先判断“用户当前要完成什么任务”，再在 `BasePageFramePattern`、`ChatHomePagePattern`、`ChatConversationPattern`（必要时 `CopilotPagePattern`）之间选最合适的页面模板，禁止把所有页面默认都生成成白卡单栏/双栏/多栏管理页。",
         "【判断标准】用“用户进入页面后的第一步动作”决定布局：第一步是“发起一个 AI 任务 / 输入一句需求 / 从模板开始”→ 优先 `ChatHomePagePattern`（AI 入口页）；第一步是“围绕一个已开始的任务持续追问、查看消息流、继续与 AI 协作”→ 优先 `ChatConversationPattern`（AI 对话页）；第一步是“筛选、搜索、浏览对象列表、查看详情、批量操作结构化信息”→ 优先 `BasePageFramePattern`（白卡管理页）。",
         "【AI入口页适用场景】当 `ChatInput` 本身就是页面的核心主功能，且页面目标是“帮助用户开始一件事”而不是“先管理一批对象”时，必须优先使用 `ChatHomePagePattern`。典型场景：AI 工作台首页、智能分析入口、模板广场、报告生成入口、用户尚未进入具体上下文的助手首页。此时核心输入区与推荐内容应直接坐落在浅灰大背景上，不要强行套成典型白卡后台页。",
@@ -7037,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）。内部卡片、列表项、表单控件原有边框/描边保持不变。",
@@ -7098,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": [
@@ -7116,13 +7320,13 @@
         "【组件选型门禁】主输入必须用 `ChatInput`，不可用原生 textarea 或 Input 冒充 AI 输入；模板/助手/案例推荐必须用 `Card`；分类切换必须用 `Tabs`；搜索框用 `Input` + `Icon` 前缀；无结果用 `Empty`。禁止用 Button/Tag 排一行冒充 Tabs，禁止手写卡片。",
         "【整体背景】页面以浅灰大背景（`--color-blueGrey-200`）为主：Hero、筛选行、卡片网格**直接坐灰底**，不要再额外包一整张“右侧白色大卡片容器”（白卡只用于推荐卡片本身）。",
         "【反例扫描】如果同一右侧首页函数里同时出现 `ChatInput`、模板 `Card` 网格，并且外层存在 `background: var(--color-surface)` / `bg-surface rounded-*` 包住 Hero + 输入框 + Tabs + 网格，说明 AI 把入口页误生成成白卡管理页，必须拆掉这层 wrapper。",
-        "【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-hidden`，由内部区域控制滚动。",
-        "【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；默认使用 `ChatInput variant=\"default\"` 作为入口主输入；标准节奏为 `padding: 120px 40px 80px`。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。",
-        "【筛选与分类】分类切换必须用 `Tabs size=\"sm\"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索，搜索框约 240px，空间不足允许换行。",
-        "【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color=\"white\"`；列表区域 `flex-1 min-h-0 overflow-y-auto` 独立滚动，不挤压上方区域。",
+        "【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-y-auto overflow-x-hidden`，由右侧内容区作为唯一滚动容器承载整体页面滚动；Hero、ChatInput、筛选行、卡片网格要一起被滑动，禁止只让下方卡片列表单独 `overflow-y-auto`。",
+        "【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；Hero 主标题使用 `text-4xl leading-10`；默认使用 `ChatInput variant=\"default\"` 作为入口主输入；标准节奏为 `padding: 84px 40px 80px`，标题区较旧版整体上移 36px。标题区副标题与 ChatInput 之间必须保留 48px 间距（比普通标题说明节奏额外增加 24px），保证输入框不贴近标题区。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。",
+        "【筛选与分类】分类切换必须用 `Tabs size=\"sm\"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：可用外层 `<div className=\"ml-auto shrink-0\" style={{ flex: \"0 0 240px\", width: \"240px\", minWidth: \"240px\", maxWidth: \"240px\" }}>` 包裹 `Input`，也可直接给 `Input` 传 `style={{ flex: \"0 0 240px\", \"--size-input-width\": \"240px\" }}`；`Input` 的 `style` 作用于根容器。Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。",
+        "【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color=\"white\"`；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。",
         "【内容可扩展】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\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-hidden\">\n          {/* Hero 区：欢迎语 + ChatInput */}\n          <div\n            className=\"flex flex-col items-center shrink-0\"\n            style={{\n              padding: '120px 40px 80px',\n            }}\n          >\n            <div className=\"flex flex-col items-center gap-2 w-full text-center\">\n              <h1 className=\"m-0 text-3xl [font-weight:var(--font-semibold)] leading-9\" 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' }}>\n              <ChatInput variant=\"default\" placeholder=\"描述你想完成的任务…\" />\n            </div>\n          </div>\n\n          {/* 筛选行：Tabs + 搜索，直接坐灰底 */}\n          <div\n            className=\"flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-4\"\n            style={{ padding: '16px 40px' }}\n          >\n            <Tabs variant=\"pill\" size=\"sm\" items={CATEGORY_TABS} defaultIndex={0} />\n            <Input\n              placeholder=\"搜索标题、描述\"\n              prefix={<Icon name=\"search-md-stroked\" size=\"sm\" />}\n              allowClear\n              className=\"max-w-full\"\n              style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}\n            />\n          </div>\n\n          {/* 卡片列表（可滚动）：卡片自身是白卡，外层不包白卡 */}\n          <div className=\"flex-1 min-h-0 overflow-y-auto\" 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          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}\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 入口页",
@@ -7161,7 +7365,7 @@
       "category": "page-pattern",
       "description": "适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "CopilotPagePattern"
       },
       "relatedComponentIds": [
@@ -7230,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": [
@@ -7303,7 +7507,7 @@
       "category": "page-pattern",
       "description": "IM 对话片段：适用于客服接待、用户私信、站内信、履约沟通、社群协作等以连续消息往返为核心的即时通讯场景。单个白卡内默认包含当前线程顶部信息元素、消息流和底部组合输入框，并支持真实发送；若是 AI 协同型对话，可切换为 AI 输入框。",
       "import": {
-        "from": "@tf-designsystem/b-end",
+        "from": "@tfdesign/b-end",
         "default": "IMConversationPattern"
       },
       "relatedComponentIds": [