@tfdesign/b-end 1.1.4 → 1.1.5

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-16T18:40:07.215Z",
+  "generatedAt": "2026-05-17T06:08:53.310Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
@@ -313,7 +313,9 @@
         "描边图标",
         "plus-stroked",
         "check-stroked",
-        "search-md",
+        "search-md-stroked",
+        "search-sm-stroked",
+        "search-lg-stroked",
         "arrow-down",
         "chevron-down",
         "trash-01-stroked",
@@ -709,19 +711,11 @@
           "type": "function",
           "default": null
         },
-        {
-          "name": "tone",
-          "type": "enum",
-          "options": [
-            "transparent",
-            "panel"
-          ],
-          "default": "transparent"
-        },
         {
           "name": "resizable",
           "type": "boolean",
-          "default": true
+          "default": false,
+          "deprecated": true
         },
         {
           "name": "width",
@@ -750,32 +744,31 @@
         {
           "name": "onWidthChange",
           "type": "function",
-          "default": null
+          "default": null,
+          "deprecated": true
         }
       ],
       "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 已约定处。",
         "【使用场景】用于服务平台、规则平台等左侧业务标签导航，不替代全局站点导航",
-        "【布局分两类，勿混用】① **大卡片 / 双白卡分栏**（灰底上左右各一张白圆角卡，如 McpManagementPage）：这类“横向并列的大卡工作区”默认就要支持宽度拖拽。左侧辅助大卡由**外层容器**提供 `background:#fff`、`border-radius:12px`、`overflow-visible`（便于拖拽把手外露），内层 `<TagBar tone=\"transparent\" />` 且可设 `style={{ background: \"transparent\" }}` + `className=\"!border-r-0\"`；宽度必须用 `width + onWidthChange + minWidth + maxWidth + resizable` 与白卡同步，右侧主卡保持 `flex-1 min-w-0` 弹性撑满。**禁止**把「独立白卡」误当成 `tone=\"panel\"`：`panel` 是**浅灰侧条**，背景固定为 `--color-blueGrey-100`，不是白卡片。② **单一大白卡内嵌**（整块主内容区共一张白底，TagBar 仅占左列一条，如工作台主白卡内顶栏+TagBar+内容）：使用 `tone=\"transparent\"`，让 TagBar **上下撑满**父级高度（父级 `flex` + `min-h-0` 链完整），**不要再**外包一层白圆角容器，避免「白套白」缝。",
-        "【tone 语义】`transparent`（默认）= 组件根节点背景透明，由外层白底或灰底决定视觉；`panel` = 组件自带浅灰底，背景固定为 `--color-blueGrey-100`，用于**灰色独立侧条**场景，不是白色独立卡片。",
+        "【组件无底色】TagBar 默认且始终不提供背景色，组件根节点为透明底；不得生成 `tone` / “样式”配置，也不得通过 `tone=\"panel\"` 或自写 `bg-blueGrey-100` 让 TagBar 自带浅灰底。TagBar 的视觉背景必须由所属父容器决定：嵌入白卡时看起来是白底，嵌入灰底容器时看起来是灰底。",
+        "【布局分两类，勿混用】① **大卡片 / 双白卡分栏**（灰底上左右各一张白圆角卡，如 McpManagementPage）：左侧辅助大卡由**外层容器**提供 `background:#fff`、`border-radius:12px`、`overflow-visible`、宽度状态和容器级拖拽把手；内层 `<TagBar />` 只负责搜索、业务切换、树形标签与底部展开/收起按钮，可设 `style={{ width: \"100%\", background: \"transparent\" }}` + `className=\"!border-r-0\"`。右侧主卡保持 `flex-1 min-w-0` 弹性撑满。② **单一大白卡内嵌**（整块主内容区共一张白底，TagBar 仅占左列一条，如工作台主白卡内顶栏+TagBar+内容）：直接使用 `<TagBar />`，让 TagBar **上下撑满**父级高度（父级 `flex` + `min-h-0` 链完整），**不要再**外包一层白圆角容器，避免「白套白」缝。",
         "【顶部区】展开态支持搜索标签与业务切换；收起到最小宽度时仅在 searchable=true 时显示搜索按钮，searchable=false 时展开态与收起态都不显示搜索入口",
-        "【树形】items 支持多层 children；默认以单选高亮为主，父节点展开与收起仅由箭头按钮控制，点击整行只负责选中节点",
+        "【树形】TagBar 默认必须包含 3 个层级的标签项：一级分类 / 二级分组 / 三级标签。AI 生成页面时不得只写 1 层或 2 层假数据，必须结合业务模拟相应文案，并通过 `defaultExpandedIds` 或受控 `expandedIds/onExpandedChange` 支持真实的上下展开收起能力；父节点展开与收起仅由箭头按钮控制，点击整行只负责选中节点。",
         "【搜索】搜索只过滤标签树，不影响业务切换列表；命中子节点时需保留父级上下文",
         "【业务切换】当前业务以按钮形式展示，点击后以下拉菜单切换其它业务",
-        "【折叠】collapsed=true 时整栏宽度收为 72px，仍保留选中高亮、hover、focus-visible 与 aria-label；宽度说明、预览和实现需保持一致",
-        "【拖拽调宽（独立白卡）】当 TagBar 作为横向大卡工作区中的辅助白卡时，默认必须支持调宽：至少同时提供 `resizable`、`width`、`onWidthChange`、`minWidth`、`maxWidth`，并让外层白卡保持 `overflow-visible`，否则拖拽条会被裁切；`McpManagementPage` 是该规则的标准示例。",
+        "【一级分类彩色图标】一级分类必须和组件默认样式一致包含彩色图标：每个一级 item 都要配置 `iconName` 与 `iconBgToken`，图标容器使用 token 色阶（如 brand-50 / blue-50 / pink-50 / purple-50），禁止一级分类无图标或使用纯灰占位。",
+        "【折叠】底部默认都有展开/收起按钮并吸附在组件底部；`collapsed=true` 时整栏宽度收为 72px，仍保留选中高亮、hover、focus-visible 与 aria-label。当 TagBar 嵌入独立白卡时，底部展开/收起按钮必须联动**整个白色卡片容器**一起展开/收起，而不是只让 TagBar 内部变窄、外层白卡不变。",
+        "【组件自身不拖拽】TagBar 组件自身不再绘制右侧拖拽把手，也不应生成 `<TagBar resizable />` 来表达拖拽能力；`resizable / onWidthChange` 属于历史兼容字段，不作为新页面生成依据。TagBar 的宽度变化由父容器控制，组件只通过 `collapsed / onCollapsedChange` 暴露底部展开/收起交互。",
+        "【拖拽调宽（独立白卡）】当 TagBar 作为横向大卡工作区中的辅助白卡时，默认必须支持**外层白卡容器级调宽**：父级白卡维护 `tagBarWidth`，自身设置 `width: tagBarWidth` 和 `overflow: visible`，拖拽把手挂在白卡右侧；TagBar 内部使用 `style={{ width: \"100%\" }}` 撑满容器。`McpManagementPage` 是该规则的标准示例。",
         "【图标】标签前置图标统一复用 B 端 Icon 库，图标槽尺寸固定 24px；背景色必须来自 token，不允许写死色值",
         "【复用】搜索框复用 Input，前置图标与折叠/展开箭头复用 Icon，不与 NavBar 或 Tabs 混用语义"
       ],
       "examples": [
         {
-          "label": "嵌入白底（默认 transparent）",
+          "label": "默认透明底（背景由父容器决定）",
           "code": "<TagBar />"
         },
-        {
-          "label": "浅灰侧栏条（panel，非白卡）",
-          "code": "<TagBar tone=\"panel\" />"
-        },
         {
           "label": "收起状态",
           "code": "<TagBar collapsed />"
@@ -801,20 +794,28 @@
           "code": "<TagBar collapsed={collapsed} onCollapsedChange={setCollapsed} />"
         },
         {
-          "label": "自定义树项",
-          "code": "<TagBar items={[{ id: \"account\", label: \"账号\", iconName: \"user-01-stroked\", iconBgToken: \"blueGrey-100\", children: [{ id: \"account-security\", label: \"账号安全\", iconName: \"lock-03-stroked\", iconBgToken: \"red-50\" }] }]} />"
+          "label": "自定义三级树项",
+          "code": "<TagBar items={[{ id: \"account\", label: \"账号\", iconName: \"user-01-stroked\", iconBgToken: \"brand-50\", children: [{ id: \"account-security\", label: \"账号安全\", children: [{ id: \"account-risk\", label: \"账号风险校验\" }, { id: \"account-recovery\", label: \"账号找回申诉\" }] }] }]} defaultExpandedIds={[\"account\", \"account-security\"]} />"
+        },
+        {
+          "label": "双白卡左列（容器级可拖拽辅助大卡）",
+          "code": "<div className=\"relative flex shrink-0 overflow-visible\" style={{ background: \"var(--color-white)\", borderRadius: 12, width: tagBarWidth }}>\n  <TagBar className=\"!border-r-0\" style={{ width: \"100%\", background: \"transparent\" }} collapsed={collapsed} onCollapsedChange={setCollapsed} />\n  <div role=\"separator\" aria-label=\"调整标签栏白卡宽度\" className=\"absolute top-0 bottom-0 -right-[6px] w-3 cursor-col-resize\" />\n</div>"
         },
         {
-          "label": "双白卡左列（可拖拽辅助大卡）",
-          "code": "<div style={{ background: \"var(--color-white)\", borderRadius: 12, overflow: \"visible\", width: tagBarWidth }}><TagBar tone=\"transparent\" className=\"!border-r-0\" style={{ background: \"transparent\" }} width={tagBarWidth} onWidthChange={setTagBarWidth} minWidth={200} maxWidth={360} resizable /></div>"
+          "label": "❌ Bad（样式配置）",
+          "code": "/* 禁止！TagBar 不再提供样式配置，组件背景必须由所属父容器决定 */\n<TagBar tone=\"panel\" />"
+        },
+        {
+          "label": "❌ Bad（TagBar 自身拖拽）",
+          "code": "/* 禁止！TagBar 自身不再绘制右侧拖拽把手；独立白卡场景应由外层白卡容器负责拖拽 */\n<TagBar resizable width={tagBarWidth} onWidthChange={setTagBarWidth} />"
         },
         {
           "label": "❌ Bad（手搓树形导航）",
-          "code": "/* 禁止！自制 aside + ul/li 树缺搜索/折叠/选中/拖拽宽 */\n<aside className=\"w-[240px] border-r\">\n  <input placeholder=\"搜索\" />\n  <ul>\n    <li>账号 <ul><li>账号安全</li></ul></li>\n  </ul>\n</aside>"
+          "code": "/* 禁止！自制 aside + ul/li 树缺搜索/折叠/选中/容器级拖拽 */\n<aside className=\"w-[240px] border-r\">\n  <input placeholder=\"搜索\" />\n  <ul>\n    <li>账号 <ul><li>账号安全</li></ul></li>\n  </ul>\n</aside>"
         },
         {
-          "label": "✅ Good（用 TagBar）",
-          "code": "<TagBar items={[{ id: \"account\", label: \"账号\", iconName: \"user-01-stroked\", children: [{ id: \"account-security\", label: \"账号安全\" }] }]} resizable />"
+          "label": "✅ Good（用 TagBar 三级树）",
+          "code": "<TagBar items={[{ id: \"account\", label: \"账号\", iconName: \"user-01-stroked\", iconBgToken: \"brand-50\", children: [{ id: \"account-security\", label: \"账号安全\", children: [{ id: \"account-risk\", label: \"账号风险校验\" }] }] }]} />"
         }
       ],
       "keywords": [
@@ -829,15 +830,16 @@
         "树形导航",
         "业务切换",
         "业务下拉",
-        "可拖拽宽度",
-        "resizable",
+        "容器级可拖拽宽度",
+        "外层白卡拖拽",
         "collapsed",
         "折叠",
         "收起",
-        "tone transparent",
-        "tone panel",
-        "透明嵌入",
-        "浅灰侧条",
+        "透明底",
+        "无背景色",
+        "父容器背景",
+        "三级标签",
+        "彩色图标",
         "MCP 管理",
         "规则管理",
         "策略管理",
@@ -1658,6 +1660,9 @@
         "【内容承载】每一个 tab 栏都可以承载任意业务组件元素，包括 ChatMessage 托管助手、信息卡片、表单、表格片段、日志列表、图片/视频信息、实验命中详情、风险提示、订单/商品详情、售后策略、处理工具或自定义复合组件；被承载组件必须优先使用 `w-full min-w-0`、自动换行和内部滚动等自适应写法，避免固定宽度导致拆分栏变窄时溢出。",
         "【自定义接入方式】简单场景优先把内容直接放在 `panels[].content`：例如 `{ id: \"order\", tabs: [{ id: \"order\", label: \"订单信息\" }], content: <OrderInfo data={currentOrder} /> }`。复杂场景使用 `renderPanelContent` 按 `panel.id` / `activeTabId` 动态返回内容，适合多个 tab 共享同一个当前会话上下文、按 tab 懒渲染，或把内容生成逻辑集中管理。",
         "【客服工作台自定义内容】嵌入客服工作台时，InfoDisplayPanel 的 tab 内容必须由外层当前 `activeConversationId` / `currentTicketId` 派生后注入，确保托管助手、用户画像、历史工单、工单日志、商品/订单信息、沟通记录等内容和左侧 IM 聊天区指向同一处理对象；不要让信息面板内部自行维护另一套当前对象状态。",
+        "【托管助手语义 Tab 默认形态】当 `tabs[].label`、`panel.id` 或业务语义命中“托管助手 / 托管助理 / AI 托管 / 托管模式 / 辅助回复 / 推荐回复 / HiAI”时，如果该 InfoDisplayPanel 嵌入 `CustomerServiceWorkspaceFrame`，默认内容必须等价复用页面模板里的托管助手形态：`ChatMessage role=\"user\"` 展示左侧 IM 最新用户消息灰色气泡，`ChatMessage role=\"ai\" header={{ name: \"HiAI\" }}` 展示理解/检索/生成执行流，执行结束后 `ChatMessage role=\"ai\" resultText={recommendedReply}` 展示推荐回复，并在下方放置“复制到输入框 / 发送给用户”两个 `Button iconOnly variant=\"ghost-black\"`。不要只渲染单条 AI 文本、静态说明卡片或没有交互的 AssistantPanel。",
+        "【托管助手文案映射】托管助手里的用户气泡文案必须与左侧 IM 聊天区当前线程最新一条用户消息完全一致；推荐回复文案必须与该用户消息之后左侧 IM 客服侧实际回复一致。接真实数据时，应从外层当前线程消息数组派生 `latestUserText` 与 `recommendedReply`，再传入 `panels[].content`；禁止为托管助手单独编一套与 IM 气泡不一致的 mock 文案。",
+        "【托管助手交互映射】“复制”必须把推荐回复写入左侧 IM 输入框，“发送”必须把推荐回复作为客服侧消息追加到当前 IM 聊天区；交互由 `CustomerServiceWorkspaceFrame` 外层统一维护，例如通过 `composerPrefill` / `autoSendSignal` 传给 `IMConversationPattern`。InfoDisplayPanel 内部不要自行维护独立 IM 发送状态。",
         "【AI生成约束】AI 生成具体业务页面时，应把真实信息卡片、表单、工单日志、ChatMessage 托管助手或内容详情放进 `panels[].content` 或 `renderPanelContent`；不要手写外层分栏容器、不要用多个 Card + gap 临时拼出三栏框架，也不要依赖 InfoDisplayPanel 的默认占位内容。",
         "【组合关系】InfoDisplayPanel 可作为 CustomerServiceWorkspaceFrame 的 mainPanel 内容；放入主白卡时宽高使用 `size-full` 或父容器约束，外层不要再套一层大白卡。",
         "【嵌入客服工作台时的语义】在客服工作台框架模版里，InfoDisplayPanel 不是独立静态侧栏，而是“当前左侧选中会话 / 工单”的辅助信息区。左侧会话列表默认选中项变化时，InfoDisplayPanel 内各 tab 的内容也必须同步切换到该当前对象对应的数据上下文，例如用户信息、历史工单、工单日志、视频信息、沟通记录都应属于同一个当前处理对象。",
@@ -1682,9 +1687,13 @@
           "label": "自定义面板",
           "code": "<InfoDisplayPanel panels={[{ id: \"assistant\", tabs: [{ id: \"overview\", label: \"托管助手\" }], content: <AssistantPanel /> }, { id: \"history\", tabs: [{ id: \"tickets\", label: \"历史工单\" }], content: <HistoryTickets /> }]} />"
         },
+        {
+          "label": "客服工作台托管助手 Tab（映射 IM 文案）",
+          "code": "const latestUserText = getLatestUserText(activeMessages);\nconst recommendedReply = getNextAgentReply(activeMessages, latestUserText);\n\nconst infoPanels = [\n  {\n    id: \"assistant\",\n    tabs: [{ id: \"assistant\", label: \"托管助手\" }],\n    content: (\n      <div className=\"flex flex-col gap-3\">\n        <ChatMessage\n          role=\"user\"\n          userBubbleTone=\"fill\"\n          userContent={[{ type: \"text\", value: latestUserText }]}\n        />\n        <ChatMessage\n          role=\"ai\"\n          header={{ name: \"HiAI\" }}\n          title=\"\"\n          steps={null}\n          taskGroups={assistantFlow}\n        />\n        <ChatMessage\n          role=\"ai\"\n          title=\"\"\n          steps={null}\n          resultText={recommendedReply}\n        />\n        <div className=\"flex items-center gap-1\">\n          <Button\n            type=\"button\"\n            variant=\"ghost-black\"\n            size=\"sm\"\n            iconOnly\n            tooltip=\"复制到输入框\"\n            icon={<Icon name=\"copy-06-stroked\" size=\"sm\" />}\n            onClick={() => setComposerPrefill(recommendedReply)}\n          />\n          <Button\n            type=\"button\"\n            variant=\"ghost-black\"\n            size=\"sm\"\n            iconOnly\n            tooltip=\"发送给用户\"\n            icon={<Icon name=\"send-03-stroked\" size=\"sm\" />}\n            onClick={() => sendAgentMessage(recommendedReply)}\n          />\n        </div>\n      </div>\n    ),\n  },\n  {\n    id: \"order\",\n    tabs: [{ id: \"order\", label: \"订单信息\" }, { id: \"risk\", label: \"风险提示\" }],\n    content: <OrderInfoPanel conversationId={activeConversationId} />,\n  },\n  {\n    id: \"records\",\n    tabs: [{ id: \"history\", label: \"历史工单\" }, { id: \"logs\", label: \"工单日志\" }],\n    content: <TicketRecordPanel ticketId={currentTicketId} />,\n  },\n];\n\n<InfoDisplayPanel panels={infoPanels} className=\"size-full\" />"
+        },
         {
           "label": "客服工作台自定义信息 Tabs",
-          "code": "const infoPanels = [\n  {\n    id: \"assistant\",\n    tabs: [{ id: \"assistant\", label: \"托管助手\" }],\n    content: <ChatMessage role=\"ai\" taskGroups={assistantFlow} resultText={recommendedReply} />,\n  },\n  {\n    id: \"order\",\n    tabs: [{ id: \"order\", label: \"订单信息\" }, { id: \"risk\", label: \"风险提示\" }],\n    content: <OrderInfoPanel conversationId={activeConversationId} />,\n  },\n  {\n    id: \"records\",\n    tabs: [{ id: \"history\", label: \"历史工单\" }, { id: \"logs\", label: \"工单日志\" }],\n    content: <TicketRecordPanel ticketId={currentTicketId} />,\n  },\n];\n\n<InfoDisplayPanel panels={infoPanels} className=\"size-full\" />"
+          "code": "const infoPanels = [\n  {\n    id: \"order\",\n    tabs: [{ id: \"order\", label: \"订单信息\" }, { id: \"risk\", label: \"风险提示\" }],\n    content: <OrderInfoPanel conversationId={activeConversationId} />,\n  },\n  {\n    id: \"records\",\n    tabs: [{ id: \"history\", label: \"历史工单\" }, { id: \"logs\", label: \"工单日志\" }],\n    content: <TicketRecordPanel ticketId={currentTicketId} />,\n  },\n];\n\n<InfoDisplayPanel panels={infoPanels} className=\"size-full\" />"
         },
         {
           "label": "动态渲染 Tab 内容",
@@ -2099,6 +2108,8 @@
         "【忙碌】AI 执行中或排队中（statusText 区分场景）；渐变彩虹背景 + 36×36 停止按钮",
         "【只读】无编辑权限的两类场景：他人分享的只读预览 / 系统抢单引导（actionText 区分动作）；白底 + md 文字按钮",
         "【猫条文案 catBarText · 动态 AI 上下文建议区】猫条（灰色背景条，位于输入框正上方）的文案通过 catBarText prop 注入，是 AI 基于当前页面场景实时生成的建议或互动引导，而非固定标语。文案内容应随页面状态、用户行为、数据上下文动态变化。写法原则：① 感知当前页面——结合用户正在查看的内容给出针对性建议（如\"检测到 3 条待回复工单，需要我帮你起草回复？\"）；② 延续上下文——用户上次对话后可衔接追问（如\"上次分析了 Q1 数据，需要继续看 Q2 吗？\"）；③ 主动互动——首次进入或无历史时用轻松引导（如\"Hi~ 我是 AI 小助手，快来试试和我交流吧~\"）；④ 执行状态反馈——busy/replying 时展示执行进度（如\"正在查询知识库…\"）。catBarText 不传时猫条区域仍会渲染但文案为空；catBarIcon 可替换猫头图标为自定义节点。AI 生成页面时应根据页面业务场景设计合理的 catBarText 内容，而非直接留空或使用通用占位文案",
+        "【完整设计框 · 禁止外部重排】ChatInput 是完整设计框组件，不是 textarea、顶部提示、工具栏和发送按钮的零件集合。AI 生成页面时必须直接使用 `<ChatInput />` 并通过 props 配置 catBarText / placeholder / toolbar / imActions / onSend；禁止把猫条文案、placeholder、工具栏或发送按钮拆到组件外手写，禁止在外层额外包一层标题/说明来模拟组件内部结构。",
+        "【内部对齐不可改写】ChatInput 内部内容必须保持组件默认布局：catBarText、placeholder、编辑区文字均为左对齐；猫头 icon 在左侧，提示文案从输入框内容左边界开始排列。禁止对 ChatInput 或其内部选择器追加 `text-center`、`justify-center`、`items-center`、绝对定位等样式来居中猫条文案或输入文案；类似“可直接提问：用户催退款时如何解释到账时效？”这类文案只能通过 `catBarText` 传入并保持左对齐。",
         "【三层结构】底层氛围背景(z-1) → 输入区域白色卡片(z-2) → 猫条(z-3)",
         "【工具栏】不传 toolbar prop 时自动渲染内置默认工具栏（Agent / @ / 指令 / 附件，全部 36px）",
         "【发送按钮】三态自动切换：disabled（无内容，灰底图标钮） / active（有内容，黑底胶囊+发送） / running（忙碌/回复中，黑底图标钮+停止）",
@@ -3076,8 +3087,8 @@
         "【⚡ FormTitle 真伪自检·五件套】生成完区块标题后**必须**逐项目测，任一不中即视为\"伪 FormTitle\"必须改：① **标题字重 = 600**（实现上应来自组件内置 `[font-weight:var(--font-semibold)]`，不要手写 `font-bold`）；② **标题字色 = `var(--color-foreground)` 深色**（不是 secondary 灰色）；③ **竖条 = brand-500 蓝绿色 3×14/16px 圆角条**（不是品牌浅底、不是 border-left 1px 直线）；④ **描述默认隐藏**——没有明确说明诉求时不写 `description`，需要说明时必须同时写 `showDescription`；⑤ **描述位置正确**——`form` / `level-1` 描述在**标题下方独占一行**，`level-2` / `level-3` 描述在**标题同行右侧**（次要色），`card` 标题描述同排且无竖条。任一项目测偏离 → 100% 是 AI 手搓了\"伪 FormTitle\"或选错了 variant，⛔ 必须删除手搓代码、改用正确 variant 的 `<FormTitle />`。",
         "【⛔ 伪 FormTitle 识别表（高频误用）】凡命中下面任一形态 → **必须**整体替换为 `<FormTitle />`，⛔ 严禁保留：① **手搓竖条**：`<div className=\"w-1 h-4 bg-teal-500 rounded\" />` + 相邻 `<h3 / span / p>` —— 字重很容易偏离 600，是 AI 最常犯的错；② **错用 card variant 当主标题**：白卡顶栏 / 面板头用 `<FormTitle variant=\"card\" />` —— card 是\"弱化标题\"（字色 secondary），只能用于 Card 内嵌摘要条，不能当面板主标题；③ **用了 FormTitle 但 className 压回了字重**：`<FormTitle className=\"font-normal text-gray-600\" />` —— 违反【⛔ 字体样式硬约束】；④ **变体选错**：整体页面左上角总标题用了 `variant=\"level-1\"` 或 `variant=\"level-2\"` —— 应该用 `form`；白卡/面板一级主标题用了 `variant=\"form\"` —— 应该用 `level-1` 或 `level-2`；⑤ **把\"标题 + 描述\"压成同一行 plain text**：`<div>System Prompt 使用 TFDS TextArea 重构编辑区域。</div>` —— 完全没用组件，更没有字重和竖条；⑥ **用 `<p className=\"text-sm text-secondary\">` 代替 `description`**：描述应作为 prop 传给 FormTitle，不是单独 `<p>`。",
         "【⚡ 卡片标题专项 Bad/Good（图同款）】白卡内出现\"Prompt Workspace / System Prompt / Conversation / Tools / Run Result / Model Settings / Inspector / Inputs / Outputs\"等**面板/区块标题**：⛔ Bad：`<div className=\"flex gap-2\"><div className=\"w-1 h-4 bg-brand-500 rounded\" /><span className=\"text-base\">Prompt Workspace</span><span className=\"text-sm text-gray-500\">结构化信息支持组件化编辑。</span></div>`（字重缺失、颜色错且默认不应堆描述）；✅ Good：`<FormTitle variant=\"level-2\" title=\"Prompt Workspace\" />`。只有确实需要解释该板块作用时才写：`<FormTitle variant=\"level-2\" title=\"Prompt Workspace\" description=\"结构化信息支持组件化编辑。\" showDescription />`。",
-        "【各变体字体规格（只读参考，不可手动设置）】form → 20px / line-height 28px / font-weight **600（semibold）** / 颜色 text-foreground-primary / **无竖条**；level-1 → 16px / 22px / **600** / primary + 左侧 3px brand-500 竖条；level-2 → 14px / 20px / **600** / primary + 左侧 3px brand-500 竖条；level-3 → 14px / 20px / **600** / primary + 左侧 3px brand-500 竖条；card → 14px / 20px / **600** / text-foreground-secondary（无竖条）。所有变体标题统一 600 semibold，描述文案均为 text-foreground-secondary 常规字重",
-        "【表单标题】form 只用于整体页面左上角总标题、工作台名、Playground 页名等页面级标题；标题为 20px/28px/600 semibold，且左侧无品牌竖条；描述默认隐藏，有整体说明诉求时通过 `showDescription` 显示在标题下方",
+        "【各变体字体规格（只读参考，不可手动设置）】form → 18px / line-height 28px / font-weight **600（semibold）** / 颜色 text-foreground-primary / **无竖条**；level-1 → 16px / 22px / **600** / primary + 左侧 3px brand-500 竖条；level-2 → 14px / 20px / **600** / primary + 左侧 3px brand-500 竖条；level-3 → 14px / 20px / **600** / primary + 左侧 3px brand-500 竖条；card → 14px / 20px / **600** / text-foreground-secondary（无竖条）。所有变体标题统一 600 semibold，描述文案均为 text-foreground-secondary 常规字重",
+        "【表单标题】form 只用于整体页面左上角总标题、工作台名、Playground 页名等页面级标题；标题字号 token 固定为 `--text-lg`（18px），行高 28px，字重 600 semibold，且左侧无品牌竖条；描述默认隐藏，有整体说明诉求时通过 `showDescription` 显示在标题下方",
         "【一级标题】level-1 使用左侧 3×16px 品牌色竖条（brand-500），标题 16px/22px/600 semibold；用于页面总标题之下的一级白卡/大板块主标题，以及表单页主编辑区标题，不用于整页左上角总标题；描述默认隐藏，有模块介绍诉求时通过 `showDescription` 显示在标题**下方**",
         "【二三级标题】level-2 与 level-3 都使用左侧 3×14px 品牌色竖条（brand-500），标题 14px/20px/600 semibold；描述默认隐藏，有板块说明诉求时通过 `showDescription` 显示在标题**同行右侧**；同级多个分区按内容深度在 2/3 间择一，保持全页一致",
         "【标题描述换行规则】仅当 `showDescription` 开启时，level-2 / level-3 / card 的右侧描述允许自动换行，窄卡片中会从标题右侧折到下一行，确保说明文字完整可读；但主标题本身永远不逐字换行。AI 不得在 FormTitle 外层包 `overflow-hidden` / `whitespace-nowrap` 强行裁切描述；如果描述不是核心说明而只是资源名/ID，才可在外层另行使用 `truncate + Tooltip` 模式。",
@@ -3522,7 +3533,8 @@
         "【聚焦占位符】聚焦时占位符文字颜色变更浅（text-disabled），引导用户输入",
         "【错误状态】status=\"error\" 改为浅红底，聚焦时 1px 红色描边",
         "【禁用态】在当前状态（有值或无值）基础上叠加浅灰底 + 降低透明度，保留内容展示",
-        "【前后缀】通过 prefix / suffix 传入 ReactNode（图标或文字），传入才显示；输入框右侧图标插槽与内部 svg 必须固定为 16×16px",
+        "【前后缀】通过 prefix / suffix 传入 ReactNode（图标或文字），传入才显示；输入框左右图标插槽与内部 svg 必须固定为 16×16px。图标必须使用包内 `Icon` 组件，不要使用未定义的 `SearchIcon` / `EyeIcon` 变量或外部图标库。",
+        "【搜索框前缀图标】凡是“搜索框 / 搜索模板 / 搜索标题 / 搜索描述 / 关键词搜索 / 查询关键词”等搜索语义场景，Input 默认必须展示左侧搜索图标：`prefix={<Icon name=\"search-md-stroked\" size=\"sm\" aria-hidden=\"true\" />}`。禁止只写 placeholder=\"搜索...\" 而缺少 prefix；禁止使用无效图标名 `search-md`。",
         "【清除按钮】allowClear=true 且有值时，容器 hover 或聚焦时出现清除按钮",
         "【AI推荐】支持单条 aiSuggestion 和多条 aiSuggestions 两种模式；当 aiSuggestions 有值时优先按多条列表渲染，列表容器使用 AI Fill-1，Hover 条目使用 AI Fill-2",
         "【AI推荐默认触发】当需求、字段说明或页面描述中出现“AI推荐”“智能推荐”“推荐回复”“刷新推荐”“智能建议”“推荐文案”“建议填写”“AI帮助填写”等语义时，Input 默认应展示 AI 推荐区，而不是只渲染普通输入态。",
@@ -3550,11 +3562,11 @@
         },
         {
           "label": "带前缀图标",
-          "code": "<Input prefix={<SearchIcon />} placeholder=\"搜索\" />"
+          "code": "<Input prefix={<Icon name=\"search-md-stroked\" size=\"sm\" aria-hidden=\"true\" />} placeholder=\"搜索\" />"
         },
         {
           "label": "带后缀图标",
-          "code": "<Input suffix={<EyeIcon />} placeholder=\"密码\" />"
+          "code": "<Input suffix={<Icon name=\"eye-stroked\" size=\"sm\" aria-hidden=\"true\" />} placeholder=\"密码\" />"
         },
         {
           "label": "AI推荐-单条",
@@ -3585,8 +3597,8 @@
           "code": "/* 禁止！原生 input 浏览器默认黑边，破坏设计一致性 */\n<input type=\"text\" placeholder=\"搜索\" className=\"border rounded px-2 py-1\" />"
         },
         {
-          "label": "✅ Good（用 Input 组件）",
-          "code": "<Input placeholder=\"搜索\" />"
+          "label": "✅ Good（搜索框带标准前缀图标）",
+          "code": "<Input placeholder=\"搜索\" prefix={<Icon name=\"search-md-stroked\" size=\"sm\" aria-hidden=\"true\" />} />"
         },
         {
           "label": "❌ Bad（数字录入用 Input/原生）",
@@ -5236,6 +5248,7 @@
         "【标题与操作】link、actions 使用 Button 的 text-brand 变体；textButton 使用 Button 的 iconOnly 组合；linkDescription 保留标题+描述双行信息密度",
         "【标准表格 actions 尾栏定位】只要标准表格使用 type=\"actions\"，该列就是行级决策区，视觉位置必须默认在 table 最右侧尾栏。即使 columns 传入顺序不是最后，Table 渲染时也会把 actions 列归位到尾栏；AI 生成 columns 时应主动把 actions 写在最后，避免读代码时产生误判。",
         "【标准表格 actions 自适应宽度】actions 尾栏宽度必须由当前页真实操作按钮内容统一计算，只包住“编辑 / 查看 / 更多图标”等可见操作及必要单元格内边距；表头与表体必须共用同一列宽，不能让表头按“操作”两个字单独收窄而和表体错位。actions 不参与普通数据列的 fr 比例分配，禁止留大段空白尾距，也不要用固定大宽度制造对齐假象。",
+        "【标准表格 actions 列宽禁忌】生成标准列表页 columns 时，`type=\"actions\"` 默认不要显式写 `width`，让 Table 按操作内容自动计算紧凑尾栏宽度；除非业务确有额外操作或超长动作文案，才允许设置贴合内容的紧凑宽度。禁止为“编辑 / 详情 / 更多”这类 2 个文字按钮 + 更多图标配置 160px、168px、180px 等偏大固定宽度，避免操作按钮右侧出现大块空白。",
         "【标准表格 actions 首屏可见】当页面容器宽度不足、表格发生横向滚动时，actions 尾栏必须自动 sticky 吸附在右侧可视边界，保证“编辑 / 查看 / 更多图标”等行操作在第一屏始终可见。不要要求用户先横向滚到最右才能操作；也不要把操作按钮复制到首列或悬浮到表格外。",
         "【标准表格 actions 固定列关系】actions 自动吸附是组件默认交互，不依赖 fixedColumnsMode。fixedColumnsMode 只用于额外固定首列或非 actions 尾列；当 actions 与 fixedColumnsMode=\"first\"/\"both\" 同时存在时，首列可固定在左侧，actions 仍固定在右侧，形成左右锚点，服务宽表的扫读与快速决策。",
         "【标准表格 actions 省略】actions 类型必须直接传完整操作数组，Table 默认只露出前 2 个文字 Button；当存在第 3 个及后续操作时，第 3 个位置自动渲染 Button iconOnly + Icon(dots-horizontal-stroked) 作为更多按钮，禁止把“…”当文字文案渲染。hover/focus 更多按钮会展示所有被省略操作（从原第 3 项开始），省略浮层内的每个选项也必须复用基础 Button，禁止用原生 button、span 或 div 手写操作入口。",
@@ -6305,7 +6318,7 @@
       "kind": "component",
       "name": "Filter",
       "category": "basic",
-      "description": "筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。",
+      "description": "筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板，默认所有筛选下拉都是多选形式，且下拉列表第一个选项默认是“全部”。支持白底常态、填充态、品牌选中态、禁用态和可清除态。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "Filter"
@@ -6387,13 +6400,13 @@
         "【选型·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 中 `value` 等于 `allValue`（默认 \"all\"）的选项视为未筛选基准态，兼容旧写法中 label 以“全部”开头的选项；默认推荐文案只写“全部”，触发器呈现为“筛选项 全部”这一类标题+值组合，保持白底常规样式、不显示清除入口；只有选中非“全部”值或显式 selected=true 时才变为品牌绿色筛选态。",
-        "【下拉单/多选】传入 options 后点击胶囊展开下拉面板；通过 `multiple` 切换：默认 `multiple={true}` 多选（行尾 checkbox 方框，可同时勾多项）；`multiple={false}` 单选（行尾 ✓，点击即提交并自动关闭面板，再次点击已选项可反选清空）。两种模式都支持 selectedValues 受控、defaultValue 非受控、onChange 回调；点击外部或 Escape 关闭。",
+        "【文字】label 使用 semibold 600，默认标签色固定为 `--text-secondary`（#475467），value 使用 normal 400；文案建议 label 2-6 字、value 1-8 字，过长值应在业务层截断或改用 Tooltip。",
+        "【全部基准态】options 中 `value` 等于 `allValue`（默认 \"all\"）的选项视为未筛选基准态，兼容旧写法中 label 以“全部”开头的选项；所有筛选下拉列表的第一个选项默认都必须是 `{ label: \"全部\", value: \"all\" }`，文案只写“全部”。触发器呈现为“筛选项 全部”这一类标题+值组合，保持白底常规样式、不显示清除入口；只有选中非“全部”值或显式 selected=true 时才变为品牌绿色筛选态。",
+        "【下拉默认多选】传入 options 后点击胶囊展开下拉面板；Filter 下拉列表默认全部使用多选形式（`multiple={true}`，行尾 checkbox 方框，可同时勾多项），不要因为首项是“全部”就误生成单选。只有用户明确要求“单选筛选 / 互斥状态 / 点击即关闭”时才传 `multiple={false}`；单选模式行尾为 ✓，点击即提交并自动关闭面板，再次点击已选项可反选清空。两种模式都支持 selectedValues 受控、defaultValue 非受控、onChange 回调；点击外部或 Escape 关闭。",
         "【受控/回调签名】多选：selectedValues 传数组，onChange 返回数组；单选：selectedValues 可传单值或单元素数组，onChange 返回单值（无“全部”基准值时清空返回 null）。defaultValue 同样支持单值/数组两种形态。",
         "【值展示】未显式传 value 时，单选/多选选中 1 项都展示该项 label，多选选中 ≥2 项展示“已选 N 项”，单选始终最多 1 项 label；显式 value 优先用于自定义展示。",
         "【状态】selected=true 使用品牌浅底 + 品牌描边 + 品牌文字；filled=true 使用中性填充底；disabled=true 使用禁用文字与禁用底，且不可点击。",
-        "【图标】无选中值时显示 12px 下拉箭头；closable=true 或已选中且未禁用时显示 16px 清除按钮（视觉与 Select 清除入口一致），点击清空多选值、关闭下拉并触发 onClear，不触发展开。",
+        "【图标】无选中值时显示 12px 下拉箭头；closable=true 或已选中且未禁用时显示 16px 清除按钮（视觉与 Select 清除入口一致），点击清空多选值、关闭下拉并触发 onClear，不触发展开。当 Filter 有具体筛选内容并进入品牌绿色选中态时，右侧清除图标颜色固定为 `--color-brand-500`，hover 改为 `--color-brand-700`；普通未选中态清除入口继续使用 text-disabled / text-secondary。",
         "【语义结构】外层使用 role=\"combobox/button\" 的 div 触发器，避免清除 button 嵌套在 button 内；不要改回 button 包 button 的非法 DOM。",
         "【组合】有值但仍可展开修改时传 options；已选条件需要一键移除时使用 closable 或依赖默认已选清除入口。",
         "【禁止手搓】不要用 div/span + rounded-full 自行拼筛选 chip；筛选入口统一使用 Filter 保证 token、字重、焦点态与禁用态一致。"
@@ -6408,7 +6421,7 @@
           "code": "<Filter label=\"筛选项\" options={[{ label: \"全部\", value: \"all\" }, { label: \"平台申请\", value: \"platform\" }, { label: \"外部导入\", value: \"external\" }]} defaultValue=\"all\" />"
         },
         {
-          "label": "多选下拉（默认）",
+          "label": "多选下拉（默认，首项全部）",
           "code": "<Filter label=\"筛选项\" options={[{ label: \"全部\", value: \"all\" }, { label: \"选项一\", value: \"1\" }, { label: \"选项二\", value: \"2\" }]} />"
         },
         {
@@ -7245,7 +7258,11 @@
       "rules": [
         "【模板定位】本模板是客服 / 在线 Agent 工作台的页面级框架，用于“客服正在处理会话、工单、质检、托管”等工作台页面；它不是普通业务组件、不是 NavBar，也不是会话列表本体。",
         "【选型优先级】客服工作台框架在客服业务页面中优先级最高。当用户明确提到“客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent 工作台 / 客服接待台”等客服工作台场景时，优先使用本模板作为整页外框；右侧主白卡默认必须继续使用 `IMConversationPattern + InfoDisplayPanel` 组合，而不是用表格、普通 Card 或 AI 对话页替代 IM 聊天区。",
+        "【结构命中优先】当用户提到“IM 工作台 / 客服 IM 工作台 / 三栏 IM / 左侧 IM 列表 / 会话列表 + 沟通聊天区 + 信息区 / 右侧信息 Tabs / 托管助手 + 历史工单 + 工单日志”等结构信号时，默认先判断 `CustomerServiceWorkspaceFramePattern` 是否可兼容；只要页面主结构是左侧会话/工单队列、中间 IM 沟通聊天区、右侧信息展示区或 N 个信息 tab，就应优先使用客服工作台框架，而不是新造三栏框架、手搓 `ConversationList + IMConversationPattern + Card Tabs`，也不是只用单独 `IMConversationPattern`。",
+        "【IM 模板边界】只有“单个当前线程详情页 / 私信详情 / 站内信详情”这类不需要左侧多会话队列和右侧信息区的场景，才优先使用 `IMConversationPattern`。一旦出现客服工作台、IM 工作台、左侧会话列表、右侧信息栏、托管助手、历史工单、工单日志或多信息 tab，就升级为 `CustomerServiceWorkspaceFramePattern`。",
         "【Figma 对齐】默认视觉对齐 Figma 节点 8279:67909「在线Agent」：根容器浅灰底 `--color-blueGrey-200`、16px 内边距、顶部 24px 状态条、下方左侧半透明板块 + 右侧主白卡；6 个可见圆角统一为 16px：左侧板块左上 / 左下，右侧主白卡四角。",
+        "【外层间距边界】客服工作台框架自身已经包含页面模版所需的四周内部间距（例如根容器 16px 内边距和工作区内部节奏），当页面使用 `CustomerServiceWorkspaceFramePattern` 时，外层不得再额外包 `main p-4`、`section margin`、`Card`、`bg-surface rounded-*` 或任何 padding/margin wrapper。理解为：除框架自身内部间距外，工作台的顶部、底部、右侧边界就是浏览器页面打开时的顶部、底部、右侧边界。",
+        "【左侧菜单栏组合】客服工作台可以在最左侧自动组合平台菜单栏组件，例如 `NavBar platform=\"bytehi\"` / ByteHi 菜单栏。组合方式必须是 AppShell 级横向骨架：`<NavBar className=\"shrink-0\" />` 在最左侧，`<CustomerServiceWorkspaceFramePattern />` 作为右侧 `flex-1 min-w-0 min-h-0 overflow-hidden` 工作区；禁止在 NavBar 与客服工作台之间再插入额外间距或白卡外壳。",
         "【结构】根节点必须直接作为页面主工作区或右侧主内容区的一级框架；内部顺序固定为 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`。",
@@ -7265,10 +7282,11 @@
         "【右侧信息栏整体拖拽】在客服工作台框架模版里，右侧 InfoDisplayPanel 必须支持整体宽度拖拽，拖拽热区位于信息栏左边界，默认热区 8px；拖拽时改变的是右侧信息栏整体宽度，左侧 IM 聊天区自动占满剩余空间，而不是改由 InfoDisplayPanel 本体处理页面级宽度。推荐默认宽度约 380px，最小宽度 320px，并保证左侧 IM 区至少保留 360px 可读宽度；同时保留 InfoDisplayPanel 内部相邻栏之间的原生拖拽能力。",
         "【InfoDisplayPanel 动态 tab 拆分】右侧信息展示区必须保留 InfoDisplayPanel 的动态 tab1 / tab2 / tab3 栏拆分能力：业务只有 1 个分类时降级为单栏标题 + 内容；业务有 2 个分类时最多支持拆成 2 栏；业务有 3 个及以上分类且宽度达到三栏门槛时支持拆成 3 栏。tab 数量、名称、顺序和内容必须来自当前会话 / 工单上下文的业务数据，不允许固定写死 3 个静态按钮，也不允许用多个 Card 或 div 手搓三栏替代。",
         "【右侧信息 Tab 区内容定义】客服工作台右侧 InfoDisplayPanel 是“当前处理对象的辅助信息工作区”，每个 tab 都是业务内容插槽而不是固定占位。业务可在 `panels[].content` 中直接传入任意 React 内容，或通过 `renderPanelContent({ panel, index, activeTabId })` 按当前 tab 动态渲染；允许承载托管助手 ChatMessage 执行流、用户画像、订单/商品详情、历史工单、工单日志、沟通记录、风险提示、售后策略、处理工具、表单、表格片段、图文/视频信息或自定义复合组件。",
+        "【托管助手 Tab 默认规则】当右侧信息 tab 的名称或语义命中“托管助手 / 托管助理 / AI 托管 / 托管模式 / 辅助回复 / 推荐回复 / HiAI”时，默认必须使用本模板内置托管助手交互形态：先展示一条与左侧 IM 聊天区最新用户气泡文案完全一致的 `ChatMessage role=\"user\"` 灰色气泡，再展示 `HiAI` 的 `ChatMessage` 执行流，执行完成后展示推荐回复文本，推荐回复必须映射该用户消息之后左侧 IM 客服侧实际回复文案，并提供“复制到输入框”和“发送给用户”两个纯图标 Button 的真实交互。禁止只写一个静态 AssistantPanel、普通 Card 或单条 AI 文本。",
         "【右侧信息 Tab 区自定义约束】自定义内容只能替换每个 tab 的内容区，不能替换 InfoDisplayPanel 的外框、Tabs、拆分/合并按钮、栏间拖拽、最小宽度、响应式列数和滚动容器。内容组件必须使用 `w-full min-w-0`、自动换行和内部滚动适配窄栏；禁止写固定大宽度、绝对定位撑破栏位，禁止为了展示自定义内容而改用多个 Card、自制 Tabs 或普通 div 拼出右侧信息栏。",
         "【拖拽与拆分保留验收】客服工作台生成页必须同时满足：拖动左侧列表边界时 ConversationList 默认列表 / 卡片列表容器实时适配；拖动右侧 InfoDisplayPanel 左边界时信息栏整体宽度变化且 IM 区自动吃剩余空间；拆出 InfoDisplayPanel tab 后，栏间分隔线可继续调节相邻栏宽，且每栏不小于 200px。任一能力缺失都视为没有正确使用客服工作台框架。",
         "【右侧插槽】如业务需要替换右侧主内容，可放 ChatConversationPattern、Table、表单详情或工单处理面板；但客服接待类页面优先保持“IM 对话 + InfoDisplayPanel”的组合，不要用多个普通 Card 临时拼出右侧信息区。",
-        "【AI 选型】当 prompt 出现“客服工作台框架 / 客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 客服名称在线状态 / 顶部指标工具条”等客服工作台信号时，优先选本页面模板；但本模板右侧主内容仍必须包含 IMConversationPattern 聊天区和 InfoDisplayPanel 信息区。如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。",
+        "【AI 选型】当 prompt 出现“客服工作台框架 / 客服工作台 / 客服在线工作台 / 在线客服工作台 / IM 工作台 / 三栏 IM / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 托管助手 / 客服名称在线状态 / 顶部指标工具条”等客服工作台信号时，优先选本页面模板；但本模板右侧主内容仍必须包含 IMConversationPattern 聊天区和 InfoDisplayPanel 信息区。如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。",
         "【容器语义】本模板自身已经包含浅灰页面底与右侧主白卡，生成页面时不要外层再套 `Card color=\"grey\"`、`bg-surface rounded-xl` 或大白卡 section，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。",
         "【组件复用】统计图标、工具图标必须复用 `Icon`；在线状态胶囊与工具按钮必须复用 `Button`；右上角模式切换必须复用 `Tabs`；主面板内若有头像，继续遵守本地成员头像素材规则；不要手写 svg、tab button、button div 或随机外链头像。"
       ],
@@ -7347,12 +7365,12 @@
         "【标题区防竖排铁律】白卡/面板标题是板块语义锚点，必须横向可读，⛔ 禁止出现“原始信息只读”这类一字一行的竖状标题。禁止 `writing-mode` / `text-orientation` / `break-all` / `w-[16px]` / `max-w-[24px]` 等压窄标题的写法。标题栏标准结构：左侧标题容器 `min-w-[120px] flex-1` + `<FormTitle />`，右侧 Tabs/按钮容器 `shrink-0 flex flex-wrap justify-end gap-2`；窄面板保持默认无描述，必要时把 Tabs/按钮移到下一行或正文顶部，不能挤压标题。详见 LAYOUT_RULES §3.4.1 / GLOBAL_DESIGN_RULES §8.4。",
         "【标题状态 Tag 归位铁律】如果白卡/面板标题右侧有数量、状态、身份、分类 Tag（如 `0 条消息`、`Beta`、`只读`、`推荐`），它属于主标题语义，必须写进 `<FormTitle titleSuffix={<Tag ... />} />` 并紧跟主标题显示；⛔ 禁止把 Tag 放到 `justify-between` 的右侧操作区，也禁止 `<FormTitle ... /><Tag ... />` 让标签跟在整个标题组件后面。右侧操作区只放 Button、Tabs、筛选和更多菜单。",
         "【页面 header 灰底裸放铁律】**页面级 header（标题 + 描述 + 返回 + 面包屑 + 页面级 Pill Tabs + 主次操作按钮）必须直接坐灰底，绝不包白卡**。白卡的语义是\"工作区容器\"——里面只装真正在做事的内容（列表 / 表格 / 对话流 / 参数表单 / 运行结果 / 编辑器主体）；页面 header 是\"页面元数据 / 切换位置 / 触发动作\"，必须直接坐 `var(--color-blueGrey-200)` 灰底上。⛔ 严禁把\"标题 + 描述 + 操作按钮\"包成 `<div bg=surface rounded-lg p-6>`——这会让顶部\"标题白卡\"和下方\"内容白卡\"形成同等大小的两张白卡，主从混乱、气息感丢失。参考样本：CopilotPagePattern 的 TopBar 是标杆（返回 + 标题 + Pill Tabs + 主次操作全部直接坐灰底）。详见 LAYOUT_RULES § 1.5。",
-        "【全宽撑满铁律（左右大空白专项）】**白卡必须撑满浏览器全宽，main 的 padding 只能是 p-4（16px）**：⛔ 严禁用 `p-2` / `px-6` / `px-8` 当 main 外框间距（常见误区：把白卡内部 padding p-6 错用到 main）；⛔ 严禁在 main 内套 `<div className=\"max-w-* mx-auto\">` 居中容器——这是左右大空白的主因；⛔ 严禁根容器 / main 加 `max-w-screen-xl` / `max-w-7xl` 等收窄值；白卡 div 自身不加 `mx-*` 外边距，靠 `flex-1` 或 `shrink-0 w-[Npx]` 控制宽度。三层间距金字塔：浏览器边→白卡边缘 16px（main p-4）、白卡间距 8px（gap-2）、白卡内 padding 24px（p-6）。详见 LAYOUT_RULES §1.2 / §6.1。",
+        "【全宽撑满铁律（左右大空白专项）】**白卡必须撑满浏览器全宽**：⛔ 严禁用 `p-2` / `px-6` / `px-8` 当 main 外框间距（常见误区：把白卡内部 padding p-6 错用到 main）；⛔ 严禁在 main 内套 `<div className=\"max-w-* mx-auto\">` 居中容器——这是左右大空白的主因；⛔ 严禁根容器 / main 加 `max-w-screen-xl` / `max-w-7xl` 等收窄值；白卡 div 自身不加 `mx-*` 外边距，靠 `flex-1` 或 `shrink-0 w-[Npx]` 控制宽度。基础页面框架的右侧内容区外距统一使用 `PAGE_FRAME_CONTENT_MARGIN = 16px 16px 16px 0`，即左侧 NavBar 与右侧白卡之间不再额外加 16px 灰底空隙；页面示例3因顶部 Tab 占位，白卡使用 `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN = 0 16px 16px 0`。三层间距金字塔：右侧内容区外距 16/16/16/0、白卡间距 8px（`PAGE_FRAME_PANEL_GAP`）、白卡内 padding 24px（p-6）。详见 LAYOUT_RULES §1.2 / §6.1。",
         "【白卡纯白无描边铁律】**最外层大白卡容器必须是\"纯白底 + 12px 圆角 + 无 border + 无 shadow\"**：⛔ 严禁在背景为 `var(--color-surface)` 的最外层 div / Card 上加 `border` / `outline` / `ring` / `borderColor` / `border-border-default` 等任何描边；白卡的层级感**唯一靠\"灰底 vs 白卡的明度差 + 12px 圆角\"**承担，加 border 会让明度差被划线覆盖、视觉权重变硬、气息感丢失。✅ **保留**：白卡**内部**所有 TFDS 组件自带的描边（Input / Select / TagInput / Tag / Tabs line / Table 行线 / 内嵌 grey Card 等——这些是控件功能边界，不是卡片层级边界）。判别口诀：背景色 `--color-surface`（白）→ **禁止** border；背景色 `--color-blueGrey-200`（灰，页面外框）→ **允许** border。详见 GLOBAL_DESIGN_RULES § 5.5。",
         "【Copilot详情页补充】当页面既不是纯入口页，也不是纯消息流页，而是“左侧/中部展示上下文结果，右侧或顶部继续让 AI 协助处理”的混合协作场景，可使用 `CopilotPagePattern`。它适用于“带上下文结果面板的 AI 协同详情页”，但仍不应被误写成纯白卡列表管理页。",
         "【Tabs 硬约束】主工作区内凡多块互斥内容的面板切换**必须**用基础组件 `<Tabs />`；**卡片内**小模块切换、**内容区顶部**布局级切换**默认优先** `variant=\"segment\"`（分段器）；所有 4 种 Tabs 变体在白卡/内容区/表单分段/筛选维度/Playground 面板内默认尺寸统一为 **SM**（省略 size 或 `size=\"sm\"`），⛔ 禁止内容区默认 `size=\"md\"` / `size=\"lg\"`；只有平台顶部 header / 页面级顶导 Tabs 可按场景使用 MD/LG。Tabs 默认内置横向滚动，父级必须 `min-w-0 max-w-full`，禁止 `w-fit` / `min-w-max` / 固定大宽度导致 Tabs 撑破卡片、侧栏或页面；禁止 `Button` 排一行或 `Tag` 冒充切换器",
         "【模板独立】每个\"列表示例\"对应一个独立 .jsx 文件（如 VariableManagementPage / McpManagementPage），业务接入直接复制单文件即可",
-        "【示例映射（选型入口）】页面示例0=StrategyListPage（树形可展开列表+版本子行+分页）；页面示例1=VariableManagementPage（单白卡：标题/筛选/表格）；页面示例2=McpManagementPage（双白卡：左侧可拖拽辅助大卡 + 右侧弹性主白卡列表，是“横向大卡默认支持宽度拖拽”的标准示例）；页面示例3=TabTopBarListPage（TopBar 胶囊场景切换 + 一级 Tab + 操作组；白卡内“列表+详情面板”联动）；页面示例4=NoAccessPage（空状态+主行动：申请权限）；页面示例5=ConstructionPage（空状态：功能建设中）",
+        "【示例映射（选型入口）】页面示例0=StrategyListPage（树形可展开列表+版本子行+分页）；页面示例1=VariableManagementPage（单白卡：标题/筛选/表格）；页面示例2=McpManagementPage（双白卡：左侧可拖拽辅助大卡 + 右侧弹性主白卡列表，是“横向大卡默认支持宽度拖拽”的标准示例）；页面示例3=TabTopBarListPage（TopBar 一级胶囊 Tab + 操作组，左上角不展示“渠道切换”场景胶囊，也不展示其右侧竖向分割线；白卡内“列表+详情面板”联动）；页面示例4=NoAccessPage（空状态+主行动：申请权限）；页面示例5=ConstructionPage（空状态：功能建设中）",
         "【页面示例3·信息卡片3】TabTopBarListPage 的左侧知识列表条目必须引用业务组件 `Card type=\"info3\"`（信息卡片3），不得在页面内手写重复卡片样式。信息卡片3适用于知识库知识列表、规则列表、策略列表等密集信息场景，结构固定为“标题 + 右上状态 Tag + 描述 + 底部元信息”，圆角固定 12px（rounded-lg）。页面示例3只负责传入 question/answer/status/typeLabel/updatedAt/creator 与 selected/onAction；页面示例3的列表卡片处于白色工作区内，必须显式使用 `color=\"grey\"` 灰色卡片样式；信息卡片3的背景色、描边和 hover 规则必须与其它 Card 分类一致，统一遵守 `color=white/grey` 的背景反衬规则；整卡选中 UI 由 Card 的 `selected` 统一控制，语义是“原本同一条灰色描边变为绿色描边”，禁止新增 ring / outline / 外扩描边，也不允许改写卡片背景色。点击已选卡片收起详情、点击其它卡片切换详情的交互状态仍由页面模板维护。",
         "【关键词→示例】“策略管理/策略列表/版本子行/引用次数/渠道”→示例0；“变量管理/字段变量/流程引用”→示例1；“MCP/工具管理/分类树筛选/左侧标签树”→示例2；“知识库/QA对/文档知识/案例库/右侧详情面板/TopBar胶囊Tab”→示例3；“无权限/申请权限/无访问权限”→示例4；“建设中/敬请期待/开发中”→示例5",
         "【NavBar】通过 navItems 自定义菜单项（id / label / iconName），通过 selectedItemId 高亮当前菜单；菜单 id 与右侧模板一一对应",
@@ -7360,7 +7378,7 @@
         "【标题栏·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 必须和 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",
+        "【双白卡变体】当列表需要左侧维度筛选（如按分类树过滤）时，在主白卡左侧再加一张**独立白圆角辅助大卡**包住 `TagBar`。该类“横向并列的大卡工作区”默认就要支持宽度拖拽：左卡外层白卡维护 `tagBarWidth`、`collapsed`、`onCollapsedChange` 与容器级拖拽把手，外层保持 `overflow-visible` 以露出拖拽把手，右侧主卡保持 `flex-1 min-w-0` 弹性撑满；两白卡间距 8px。TagBar 自身始终透明底，不提供“样式/tone”配置，背景由左侧白卡容器决定；TagBar 默认使用三级标签树，一级分类必须包含彩色图标。参见 McpManagementPage",
         "【多白卡分区（通用）】当页面右侧需要多个业务板块时，必须拆分为多个独立白卡（而不是一整张通栏白底背景）。推荐：灰底内容区外层统一用 `padding: 16px` 或等价 `margin: 16px` 外框节奏；框架层最外层白卡统一 `纯白背景 + 12px 圆角`，不加浅灰描边；白卡之间 `gap: 8px`；白卡内部布局用 `padding: 24px` + `gap: 16px`（参见 VariableManagementPage / McpManagementPage）。内部卡片、列表项、表单控件原有边框/描边保持不变。",
         "【表格】使用 Table fixedColumnsMode=\"last\" 让操作列固定在最右，pagination.total 与当前 dataSource.length 同步",
         "【共享子组件】PageHeader / FilterBar / 列定义 / mock 工具集中在 pageListShared.jsx，避免每个模板重复实现",
@@ -7438,8 +7456,10 @@
         "【整体背景】页面以浅灰大背景（`--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-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 白底。",
-        "【Hero 输入区禁止 Form】Hero 区的标题、副标题、AI 身份提示和主 ChatInput 都属于入口页居中启动区，不是表单字段。禁止用 `<Form />`、Form 的 `items[].label`、`labelAi` 或字段标题来包裹 / 模拟输入框顶部的“AI”标题；如果需要在输入框上方展示“AI / 助手名 / 问候语”，必须作为 Hero 内容用普通居中布局实现，并保持 `text-center`、`items-center`、`maxWidth: 680px` 的 ChatInput 容器。",
+        "【Hero 区】Hero 内容整体居中，但标题组和 ChatInput 必须共用同一个最大宽 680px 的居中容器（`width: 100%; maxWidth: 680px; margin: 0 auto`），不能标题单独全页居中、输入框单独居中造成视觉错位。Hero 主标题使用 `text-4xl leading-10`；默认使用 `ChatInput variant=\"default\"` 作为入口主输入；标准节奏为 `padding: 84px 40px 80px`，标题区较旧版整体上移 36px。标题区副标题与 ChatInput 之间必须保留 48px 间距（比普通标题说明节奏额外增加 24px），保证输入框不贴近标题区。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。",
+        "【Hero 标题统一对齐容器】标题、描述、助手名/问候语必须放在与 ChatInput 同一个 680px 容器内对齐：知识库/模板库/工具入口等带明确业务标题的场景，标题组默认 `text-left w-full`，左边界对齐输入框左边界；纯欢迎语/个人助手问候场景才允许在同一容器内 `text-center`。禁止标题组使用页面全宽居中，而 ChatInput 使用另一套宽度。",
+        "【Hero 输入区禁止 Form】Hero 区的标题、副标题、AI 身份提示和主 ChatInput 都属于入口页启动区，不是表单字段。禁止用 `<Form />`、Form 的 `items[].label`、`labelAi` 或字段标题来包裹 / 模拟输入框顶部的“AI”标题；如果需要在输入框上方展示“AI / 助手名 / 问候语”，必须作为 Hero 标题组放在与 ChatInput 相同的 680px 居中容器内，不得使用 Form。",
+        "【ChatInput 内部不可重排】入口页主输入必须直接使用 `<ChatInput variant=\"default\" />`，并通过 `catBarText` 和 `placeholder` 配置内容。禁止把 `catBarText`（如“可直接提问：用户催退款时如何解释到账时效？”）抽到 ChatInput 外部另写一行文字；禁止给 ChatInput 内部猫条、placeholder 或输入文案加 `text-center` / `justify-center`，组件内部文案必须保持左对齐。",
         "【Hero 反例扫描】同一 ChatHome 页面中如果出现 `<Form items={[{ label: \"AI\", type: \"input\" | \"textarea\" }]}>`、`labelAi` 或 Form 字段标题紧贴主 ChatInput 上方，说明 AI 把入口页主输入误生成为表单字段，必须删除 Form，改回居中 Hero 标题 + `<ChatInput variant=\"default\" />`。",
         "【筛选与分类】分类切换必须用 `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` 造成只有卡片区滚动。",

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-16T18:40:07.215Z",
+  "generatedAt": "2026-05-17T06:08:53.310Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 47,
@@ -126,7 +126,9 @@
         "描边图标",
         "plus-stroked",
         "check-stroked",
-        "search-md",
+        "search-md-stroked",
+        "search-sm-stroked",
+        "search-lg-stroked",
         "arrow-down",
         "chevron-down",
         "trash-01-stroked",
@@ -135,9 +137,7 @@
         "bell-03-stroked",
         "lucide-react",
         "lucide",
-        "Plus icon",
-        "react-icons",
-        "antd-icon"
+        "Plus icon"
       ],
       "ruleCount": 8,
       "exampleCount": 8,
@@ -207,22 +207,22 @@
         "树形导航",
         "业务切换",
         "业务下拉",
-        "可拖拽宽度",
-        "resizable",
+        "容器级可拖拽宽度",
+        "外层白卡拖拽",
         "collapsed",
         "折叠",
         "收起",
-        "tone transparent",
-        "tone panel",
-        "透明嵌入",
-        "浅灰侧条",
+        "透明底",
+        "无背景色",
+        "父容器背景",
+        "三级标签",
+        "彩色图标",
         "MCP 管理",
         "规则管理",
-        "策略管理",
-        "账号管理"
+        "策略管理"
       ],
-      "ruleCount": 12,
-      "exampleCount": 12,
+      "ruleCount": 14,
+      "exampleCount": 13,
       "hasCode": false,
       "detailRef": "components.index.json#tag-bar"
     },
@@ -344,8 +344,8 @@
         "多面板工作区",
         "panel tabs"
       ],
-      "ruleCount": 30,
-      "exampleCount": 10,
+      "ruleCount": 33,
+      "exampleCount": 11,
       "hasCode": false,
       "detailRef": "components.index.json#info-display-panel"
     },
@@ -426,7 +426,7 @@
         "IM 客服",
         "评论框"
       ],
-      "ruleCount": 21,
+      "ruleCount": 23,
       "exampleCount": 24,
       "hasCode": false,
       "detailRef": "components.index.json#chat-input"
@@ -672,7 +672,7 @@
         "后缀图标",
         "prefix"
       ],
-      "ruleCount": 19,
+      "ruleCount": 20,
       "exampleCount": 15,
       "hasCode": false,
       "detailRef": "components.index.json#input"
@@ -1052,7 +1052,7 @@
         "avatar",
         "avatarText"
       ],
-      "ruleCount": 30,
+      "ruleCount": 31,
       "exampleCount": 12,
       "hasCode": false,
       "detailRef": "components.index.json#table"
@@ -1287,7 +1287,7 @@
       "kind": "component",
       "name": "Filter",
       "category": "basic",
-      "description": "筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。",
+      "description": "筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板，默认所有筛选下拉都是多选形式，且下拉列表第一个选项默认是“全部”。支持白底常态、填充态、品牌选中态、禁用态和可清除态。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "Filter"
@@ -1636,7 +1636,7 @@
         "工单处理框架",
         "CustomerServiceWorkspaceFrame"
       ],
-      "ruleCount": 28,
+      "ruleCount": 33,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#customer-service-workspace-frame"
@@ -1718,7 +1718,7 @@
         "今天想做什么",
         "帮我快速搞定"
       ],
-      "ruleCount": 12,
+      "ruleCount": 14,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#chat-home-page"

package/src/_b_end_runtime/components/Filter.jsx

@@ -74,15 +74,17 @@ const TONE_CLASS = {
 };
 
 const LABEL_CLASS = '[font-weight:var(--font-semibold)]';
+const LABEL_DEFAULT_COLOR_CLASS = '[color:var(--tfds-text-secondary,var(--color-foreground-secondary))]';
 const VALUE_CLASS = '[font-weight:var(--font-normal)]';
 const ICON_CLASS = 'inline-flex size-[var(--spacing-3)] shrink-0 items-center justify-center [&>svg]:size-[var(--spacing-3)]';
 const CLEAR_CLASS = [
   'inline-flex items-center justify-center shrink-0 size-[var(--spacing-4)]',
   'rounded-full cursor-pointer',
-  'text-foreground-disabled hover:text-foreground-secondary',
   'transition-opacity duration-150',
   'bg-transparent border-none p-0 mr-[var(--spacing-1)]',
 ].join(' ');
+const CLEAR_DEFAULT_CLASS = 'text-foreground-disabled hover:text-foreground-secondary';
+const CLEAR_SELECTED_CLASS = '![color:var(--color-brand-500)] hover:![color:var(--color-brand-700)]';
 const PANEL_CLASS = [
   'rounded-[var(--radius-md)] border border-solid border-border-default',
   'bg-surface shadow-lg',
@@ -441,13 +443,19 @@ export default function Filter({
         onKeyDown={handleKeyDown}
         {...rest}
       >
-        <span className={LABEL_CLASS}>{label}</span>
+        <span className={[
+          LABEL_CLASS,
+          tone === 'outline' || tone === 'fill' ? LABEL_DEFAULT_COLOR_CLASS : '',
+        ].filter(Boolean).join(' ')}>{label}</span>
         {hasValue ? <span className={VALUE_CLASS}>{derivedValue}</span> : null}
         {children}
         {showClear ? (
           <button
             type="button"
-            className={CLEAR_CLASS}
+            className={[
+              CLEAR_CLASS,
+              isSelected ? CLEAR_SELECTED_CLASS : CLEAR_DEFAULT_CLASS,
+            ].filter(Boolean).join(' ')}
             tabIndex={-1}
             aria-label="清除"
             onClick={handleClear}