@tfdesign/b-end 1.0.12 → 1.0.14

package/src/_b_end_runtime/page-patterns/IMConversationPattern.jsx

@@ -453,19 +453,18 @@ function IMThreadHeader({ thread }) {
 
 function ThreadActionButton({ action, ariaExpanded, onClick, ref }) {
   return (
-    <Tooltip content={action.label} placement="top" triggerClassName="inline-flex shrink-0">
-      <Button
-        ref={ref}
-        type="button"
-        variant="ghost-black"
-        size="md"
-        iconOnly
-        aria-label={action.label}
-        aria-expanded={ariaExpanded}
-        onClick={onClick}
-        icon={<Icon name={action.iconName} size="sm" aria-hidden="true" />}
-      />
-    </Tooltip>
+    <Button
+      ref={ref}
+      type="button"
+      variant="ghost-black"
+      size="md"
+      iconOnly
+      tooltip={action.label}
+      aria-label={action.label}
+      aria-expanded={ariaExpanded}
+      onClick={onClick}
+      icon={<Icon name={action.iconName} size="sm" aria-hidden="true" />}
+    />
   );
 }
 

package/src/_b_end_runtime/page-patterns/McpManagementPage.jsx

@@ -34,7 +34,20 @@ import {
  */
 
 const PAGE_TITLE = 'MCP 工具管理';
-const MCP_FILTERS = ['MCP 类型', '创建人', '状态'];
+const MCP_FILTERS = [
+  {
+    label: 'MCP 类型',
+    options: ['数据接入', '画像服务', '订单服务', '营销服务', '推荐服务', '策略服务'],
+  },
+  {
+    label: '创建人',
+    options: ['林小北', '陈一诺', '周知远', '顾清禾'],
+  },
+  {
+    label: '状态',
+    options: ['已启用', '调试中', '已停用', '审核中'],
+  },
+];
 const MCP_TAGBAR_WIDTH_LIMITS = {
   initial: 260,
   min: 200,

package/src/_b_end_runtime/page-patterns/StrategyListPage.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Modal from '../components/Modal';
 import Button from '../components/Button';
+import Filter from '../components/Filter';
 import Icon from '../components/Icon';
 import Input from '../components/Input';
 import Table from '../components/Table';
@@ -93,7 +94,20 @@ const MOCK_STRATEGIES = [
   },
 ];
 
-const STRATEGY_FILTERS = ['管理员', '发布状态', '策略类型'];
+const STRATEGY_FILTERS = [
+  {
+    label: '管理员',
+    options: ['林小北', '陈一诺', '周知远', '顾清禾'],
+  },
+  {
+    label: '发布状态',
+    options: ['线上生效', '实验中', '暂未生效', '草稿中', '已发布'],
+  },
+  {
+    label: '策略类型',
+    options: ['账号服务', '权益申诉', '账号处罚', '举报处理', '售后协同'],
+  },
+];
 
 export default function StrategyListPage() {
   const [expandedId, setExpandedId] = useState('experience-1');
@@ -170,19 +184,12 @@ function StrategyFilterBar({ filters = [] }) {
       <Input
         placeholder="搜索"
         prefix={<Icon name="search-md-stroked" />}
-        className="max-w-full"
-        style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
+        className="shrink-0"
+        style={{ flex: '0 0 240px', '--size-input-width': '240px' }}
       />
 
-      {filters.map((label) => (
-        <button
-          key={label}
-          type="button"
-          className="inline-flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-full border border-border-default bg-white px-3 text-sm [font-weight:var(--font-semibold)] text-blueGrey-800 transition-colors duration-150 hover:bg-fill"
-        >
-          <span>{label}</span>
-          <Icon name="chevron-down-stroked" className="text-blueGrey-600" />
-        </button>
+      {filters.map((item) => (
+        <Filter key={item.label} {...item} />
       ))}
     </div>
   );

package/src/_b_end_runtime/page-patterns/TabTopBarListPage.jsx

@@ -26,7 +26,20 @@ import { FilterBar, WHITE_CARD_STYLE } from './pageListShared';
  */
 
 const SCENE_LABEL = '渠道切换';
-const FILTERS = ['知识类型', '创建人', '状态'];
+const FILTERS = [
+  {
+    label: '知识类型',
+    options: ['QA', '文档', '案例'],
+  },
+  {
+    label: '创建人',
+    options: ['林小北', '陈一诺', '周知远', '顾清禾'],
+  },
+  {
+    label: '状态',
+    options: ['生效', '已发布', '草稿', '审核中', '已停用'],
+  },
+];
 const DETAIL_WIDTH = 'min(460px, 40vw)';
 
 /* 状态 → Tag 颜色变体（Tag.variant） */
@@ -266,6 +279,7 @@ export default function TabTopBarListPage({ onCreateQA }) {
             variant="ghost-black"
             iconOnly
             icon={<Icon name="dots-horizontal-stroked" />}
+            tooltip="更多操作"
             aria-label="更多操作"
           />
           <Button variant="outline-black">知识测试</Button>
@@ -455,6 +469,7 @@ function DetailPanel({ card, typeLabel, open }) {
                 variant="ghost-black"
                 iconOnly
                 icon={<Icon name="dots-horizontal-stroked" />}
+                tooltip="更多操作"
                 aria-label="更多操作"
               />
               <Button

package/src/_b_end_runtime/page-patterns/VariableManagementPage.jsx

@@ -16,7 +16,7 @@ import {
  *
  * 模板结构（自上而下）：
  *   · 标题栏：左侧竖条 + 标题 + 业务上下文胶囊 + 右侧"新建变量"按钮
- *   · 筛选栏：搜索框 + 下拉筛选胶囊 + Checkbox"我创建的"
+ *   · 筛选栏：搜索框 + 标准 Filter 下拉筛选项
  *   · 表格：列定义共享自 pageListShared
  *
  * 业务接入：
@@ -25,7 +25,20 @@ import {
  */
 
 const PAGE_TITLE = '变量管理';
-const VARIABLE_FILTERS = ['变量类型', '创建人', '流程引用'];
+const VARIABLE_FILTERS = [
+  {
+    label: '变量类型',
+    options: ['String', 'Number', 'Boolean', 'Enum'],
+  },
+  {
+    label: '创建人',
+    options: ['林小北', '陈一诺', '周知远', '顾清禾'],
+  },
+  {
+    label: '流程引用',
+    options: ['已引用', '未引用'],
+  },
+];
 
 const VARIABLE_DATA = [
   { name: 'user_id', tag: 'String', desc: '当前对话用户的统一标识，登录态自动注入。' },

package/src/_b_end_runtime/page-patterns/pageListShared.jsx

@@ -6,7 +6,7 @@
  * 业务接入时只需替换数据源（list）和文案配置（标题/筛选项/按钮）。
  */
 
-import Checkbox from '../components/Checkbox';
+import Filter from '../components/Filter';
 import FormTitle from '../components/FormTitle';
 import Icon from '../components/Icon';
 import Input from '../components/Input';
@@ -45,6 +45,15 @@ const STATUS_OPTIONS = [
   { label: '审核中', tone: 'warning' },
 ];
 
+const DEFAULT_FILTER_OPTIONS = {
+  创建人: TEAM_MEMBERS.slice(0, 4).map((member) => ({ label: member.name, value: member.name })),
+  状态: STATUS_OPTIONS.map((item) => ({ label: item.label, value: item.label })),
+  '我创建的': [
+    { label: '是', value: 'yes' },
+    { label: '否', value: 'no' },
+  ],
+};
+
 const UPDATED_AT_POOL = [
   '2026-04-21 10:30:00',
   '2026-04-20 18:45:00',
@@ -68,6 +77,36 @@ function makeStatus(index) {
   return STATUS_OPTIONS[index % STATUS_OPTIONS.length];
 }
 
+function fallbackFilterOptions(label) {
+  return ['选项一', '选项二', '选项三'].map((suffix) => ({
+    label: `${label}${suffix}`,
+    value: `${label}-${suffix}`,
+  }));
+}
+
+function getFilterOptions(label, options) {
+  if (Array.isArray(options) && options.length > 0) return options;
+  return DEFAULT_FILTER_OPTIONS[label] || fallbackFilterOptions(label);
+}
+
+function normalizeFilterItem(item) {
+  if (typeof item === 'string') {
+    return {
+      label: item,
+      options: getFilterOptions(item),
+    };
+  }
+
+  if (!item || typeof item !== 'object') return null;
+  const label = item.label;
+  if (!label) return null;
+
+  return {
+    ...item,
+    options: getFilterOptions(label, item.options),
+  };
+}
+
 /**
  * 把"业务原始数据"批量套上 mock 的创建人 / 状态 / 更新时间 / 操作按钮，
  * 形成 Table 可直接消费的 dataSource。
@@ -127,51 +166,30 @@ export function PageHeader({ title, contextLabel, actions }) {
 
 /**
  * 筛选栏（白卡内、标题栏之下）
- * 结构：左侧 300px 搜索框 + 一组 FilterPill（白底圆角胶囊 + 文字 + 下拉箭头）
- *       + 1 个 Checkbox 胶囊"我创建的"。
+ * 结构：左侧固定 240px 搜索框 + 一组标准 Filter 基础组件
+ *       + 1 个标准 Filter"我创建的"。
  *
- * @param {string[]} filters — 下拉筛选项的标签文案数组
- * @param {string} [checkboxLabel='我创建的'] — 末尾 Checkbox 胶囊文案；传 null 则隐藏
+ * @param {Array<string|{label:string,options?:Array}>} filters — 下拉筛选项配置
+ * @param {string} [checkboxLabel='我创建的'] — 末尾"我创建的"筛选项文案；传 null 则隐藏
  */
 export function FilterBar({ filters = [], checkboxLabel = '我创建的' }) {
+  const filterItems = filters.map(normalizeFilterItem).filter(Boolean);
+  const ownerFilter = checkboxLabel
+    ? normalizeFilterItem({ label: checkboxLabel, options: DEFAULT_FILTER_OPTIONS[checkboxLabel] })
+    : null;
+
   return (
     <div className="flex items-center shrink-0 flex-wrap" style={{ gap: '8px' }}>
       <Input
         placeholder="搜索"
         prefix={<Icon name="search-md-stroked" />}
-        className="max-w-full"
-        style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
+        className="shrink-0"
+        style={{ flex: '0 0 240px', '--size-input-width': '240px' }}
       />
-      {filters.map((label) => (
-        <FilterPill key={label} label={label} />
+      {filterItems.map((item) => (
+        <Filter key={item.label} {...item} />
       ))}
-      {checkboxLabel && <FilterCheckPill label={checkboxLabel} />}
-    </div>
-  );
-}
-
-/* 单个筛选触发器：白底 + 描边 + 圆角胶囊 + 文字 + chevron */
-function FilterPill({ label }) {
-  return (
-    <button
-      type="button"
-      className="inline-flex items-center shrink-0 cursor-pointer bg-white rounded-full border border-border-default text-sm font-semibold text-blueGrey-800 hover:bg-fill transition-colors duration-150"
-      style={{ height: '32px', padding: '0 12px', gap: '8px' }}
-    >
-      <span>{label}</span>
-      <Icon name="chevron-down-stroked" className="text-blueGrey-600" />
-    </button>
-  );
-}
-
-/* Checkbox 类型的筛选项：白底圆角胶囊里嵌一个 Checkbox */
-function FilterCheckPill({ label }) {
-  return (
-    <div
-      className="inline-flex items-center shrink-0 bg-white rounded-full border border-border-default"
-      style={{ height: '32px', padding: '0 12px' }}
-    >
-      <Checkbox size="md">{label}</Checkbox>
+      {ownerFilter && <Filter key={ownerFilter.label} {...ownerFilter} />}
     </div>
   );
 }

package/src/_b_end_runtime/patterns.js

@@ -47,6 +47,7 @@ export const PATTERNS = [
       '【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 3 个按钮，超出时应按平台级优先级裁切；按钮必须复用 `Button iconOnly` 并提供 `tooltip` / `aria-label`，不要放置页面内局部操作或业务表单操作。',
       '【工作区层级】Workspace 外层只负责横向布局、覆盖层级与拖拽，不承担可见圆角；左侧板块自身为 `bg-white/50 + border-white + rounded-xl`，右侧主面板自身为白色 `surface + border-white + rounded-xl`，两者高度一致、宽度不同，并通过主面板 `margin-left: -32px` 形成“右侧白板覆盖在左侧灰板上”的叠压视觉，而不是中间留缝的并排关系。',
       '【可见圆角】最终可见的 6 个角统一为 16px：左侧板块左上 / 左下两个角露出；右侧主白卡四角露出；左侧板块右上 / 右下两个角必须被右侧主白卡完整覆盖。主面板覆盖量必须大于圆角半径（推荐 32px = 2 × 16px），防止主面板左上 / 左下圆角切角处露出左侧板块的右边界或描边，避免出现“残缺一块”的视觉。',
+      '【框架级能力不可删减】当 AI 生成页面使用客服工作台框架时，必须完整保留框架级交互能力：左侧列表 / 卡片容器宽度拖拽、左侧与右侧主白卡之间的覆盖式拖拽、右侧 InfoDisplayPanel 整体宽度拖拽、InfoDisplayPanel 内部栏间拖拽、响应式最小宽度保护、自动折叠、动态分栏和上下文同步。禁止只复刻截图外观却删除拖拽条、键盘微调、宽度下限、自动适配或 tab 拆分逻辑。',
       '【左右拖拽】左侧区域与右侧主白卡之间必须提供纵向拖拽热区，默认热区 8px；拖拽热区覆盖在主面板左边缘上，不占用布局宽度、不制造中间空隙；拖动时调整左侧区域宽度并让右侧主面板 `flex-1 min-w-0` 自动占满剩余空间；左侧默认宽度 432px（400px 可视会话列表 + 32px 主面板覆盖区）；拖拽最小宽度优先由左侧业务组件最小可用宽度决定，例如 ConversationList 默认列表纯头像锁定 88px 时，左侧板块最小宽度为 `max(100px 框架兜底, 88px + 32px 覆盖区) = 120px`；ConversationList 卡片列表最小内容宽度为 333px，左侧板块最小宽度为 365px；右侧纯白主容器最小宽度 380px，左侧最大可拖宽度需按 `工作区宽度 + 32px 覆盖量 - 380px` 动态计算；拖拽条需支持键盘左右方向键微调。',
       '【左侧插槽】左侧半透明容器默认承载平台业务组件 `ConversationList`，用于会话 / 工单 / 托管队列切换；左侧内容区必须扣除右侧 32px 覆盖安全区，避免被主白卡裁切；`ConversationList` 展开态四周内容间距固定 16px。嵌入时 `ConversationList` 必须设置 `resizable={false}`、保留 `collapsible` 与 `autoCollapseOnNarrow`、`style={{ width: "100%", height: "100%" }}`，并在外层框架接入 `onLayoutWidthRequest` 与 `onVariantChange`：默认列表传 `leftContentMinWidth={88}`，卡片列表切换为 `leftContentMinWidth={333}`。框架统一管理宽度拖拽，但拖拽下限跟随子组件能力；点击会话列表左上角收起按钮时，外层左侧半透明容器必须同步吸附缩窄到 120px，不允许只把 ConversationList 缩到头像列而外层仍保留大片空白。',
       '【左侧选中项 = 右侧上下文源】客服工作台框架内左侧 `ConversationList` 默认必须存在一个当前选中项；它不是单纯的导航高亮，而是整个右侧主白卡的上下文源。切换左侧会话 / 工单 / 托管项时，右侧纯白容器里的 IM 对话区和 InfoDisplayPanel 信息区都必须同步切换到同一个当前处理对象，禁止出现“左侧已切到 B 会话，但右侧聊天仍是 A、信息区还是 C”的上下文错位。预览实现必须以 `activeConversationId` 作为单一事实源：左侧列表头像、标题、单号与右侧 IM Header 的头像、标题、会话 ID、渠道、沟通时长和消息脚本必须一一对应，不能只更新高亮而复用固定聊天剧本。',
@@ -56,6 +57,8 @@ export const PATTERNS = [
       '【右侧纯白卡语义】右侧纯白色主卡定义的是“当前处理对象的完整工作区”，不是两个彼此独立的小组件容器。IMConversationPattern 负责当前线程消息往返，InfoDisplayPanel 负责同一对象的辅助信息、历史工单、日志、视频信息、用户信息等；两者必须共享同一个当前会话 / 工单 / 线程上下文。',
       '【状态同步原则】当业务接真实数据、URL 或埋点时，应以左侧当前选中对象 id 作为单一事实源（single source of truth），再派生右侧聊天流和信息面板内容；不要让 IMConversationPattern 和 InfoDisplayPanel 各自维护独立当前对象状态。',
       '【右侧信息栏整体拖拽】在客服工作台框架模版里，右侧 InfoDisplayPanel 必须支持整体宽度拖拽，拖拽热区位于信息栏左边界，默认热区 8px；拖拽时改变的是右侧信息栏整体宽度，左侧 IM 聊天区自动占满剩余空间，而不是改由 InfoDisplayPanel 本体处理页面级宽度。推荐默认宽度约 380px，最小宽度 320px，并保证左侧 IM 区至少保留 360px 可读宽度；同时保留 InfoDisplayPanel 内部相邻栏之间的原生拖拽能力。',
+      '【InfoDisplayPanel 动态 tab 拆分】右侧信息展示区必须保留 InfoDisplayPanel 的动态 tab1 / tab2 / tab3 栏拆分能力：业务只有 1 个分类时降级为单栏标题 + 内容；业务有 2 个分类时最多支持拆成 2 栏；业务有 3 个及以上分类且宽度达到三栏门槛时支持拆成 3 栏。tab 数量、名称、顺序和内容必须来自当前会话 / 工单上下文的业务数据，不允许固定写死 3 个静态按钮，也不允许用多个 Card 或 div 手搓三栏替代。',
+      '【拖拽与拆分保留验收】客服工作台生成页必须同时满足：拖动左侧列表边界时 ConversationList 默认列表 / 卡片列表容器实时适配；拖动右侧 InfoDisplayPanel 左边界时信息栏整体宽度变化且 IM 区自动吃剩余空间；拆出 InfoDisplayPanel tab 后，栏间分隔线可继续调节相邻栏宽，且每栏不小于 200px。任一能力缺失都视为没有正确使用客服工作台框架。',
       '【右侧插槽】如业务需要替换右侧主内容，可放 ChatConversationPattern、Table、表单详情或工单处理面板；但客服接待类页面优先保持“IM 对话 + InfoDisplayPanel”的组合，不要用多个普通 Card 临时拼出右侧信息区。',
       '【AI 选型】当 prompt 出现“客服工作台框架 / 客服工作台 / 客服在线工作台 / 在线客服工作台 / 在线 Agent / Agent 工作台 / 基础模式 / 托管模式 / 客服名称在线状态 / 顶部指标工具条”等客服工作台信号时，优先选本页面模板；但本模板右侧主内容仍必须包含 IMConversationPattern 聊天区和 InfoDisplayPanel 信息区。如果只是全局左侧导航，选 NavBar；如果只是会话队列，选 ConversationList；如果只是单条消息，选 ChatMessage / ChatBubble。',
       '【容器语义】本模板自身已经包含浅灰页面底与右侧主白卡，生成页面时不要外层再套 `Card color="grey"`、`bg-surface rounded-xl` 或大白卡 section，否则会形成“灰底 + 大白卡 + 框架”的错误嵌套。',
@@ -121,7 +124,7 @@ export default function CustomerServicePage() {
       '【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）。内部卡片、列表项、表单控件原有边框/描边保持不变。',
@@ -207,8 +210,8 @@ export default function MyPage({ defaultSelectedItemId = 'example-1' }) {
       '【反例扫描】如果同一右侧首页函数里同时出现 `ChatInput`、模板 `Card` 网格，并且外层存在 `background: var(--color-surface)` / `bg-surface rounded-*` 包住 Hero + 输入框 + Tabs + 网格，说明 AI 把入口页误生成成白卡管理页，必须拆掉这层 wrapper。',
       '【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-y-auto overflow-x-hidden`，由右侧内容区作为唯一滚动容器承载整体页面滚动；Hero、ChatInput、筛选行、卡片网格要一起被滑动，禁止只让下方卡片列表单独 `overflow-y-auto`。',
       '【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；Hero 主标题使用 `text-4xl leading-10`；默认使用 `ChatInput variant="default"` 作为入口主输入；标准节奏为 `padding: 84px 40px 80px`，标题区较旧版整体上移 36px。标题区副标题与 ChatInput 之间必须保留 48px 间距（比普通标题说明节奏额外增加 24px），保证输入框不贴近标题区。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。',
-      '【筛选与分类】分类切换必须用 `Tabs size="sm"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：用外层 `<div className="ml-auto shrink-0" style={{ flex: "0 0 240px", width: "240px", minWidth: "240px", maxWidth: "240px" }}>` 包裹 `Input`。注意 Input 组件的 `style` 会透传到原生 input，不要把固定宽直接写在 Input 上；Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。',
-      '【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color="white"`；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。',
+      '【筛选与分类】分类切换必须用 `Tabs size="sm"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：可用外层 `<div className="ml-auto shrink-0" style={{ flex: "0 0 240px", width: "240px", minWidth: "240px", maxWidth: "240px" }}>` 包裹 `Input`，也可直接给 `Input` 传 `style={{ flex: "0 0 240px", "--size-input-width": "240px" }}`；`Input` 的 `style` 作用于根容器。Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。',
+      '【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；当前列表直接坐浅灰页面底，所以卡片统一使用 `Card color="white"`。通用铁律是：纯白容器里必须改用 `color="grey"`，灰色/浅灰/其他非纯白容器里必须使用 `color="white"`，且这条规则对所有 Card 分类都生效；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。',
       '【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义',
     ],
     code: `import NavBar from './components/NavBar';
@@ -284,7 +287,7 @@ export default function ChatHomePage() {
             </div>
           </div>
 
-          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}
+          {/* 卡片列表：当前直接坐浅灰页面底，所以卡片统一使用白底 Card；若未来改成纯白容器，必须同步切换为 grey 灰底卡 */}
           <div className="shrink-0" style={{ padding: '0 40px 40px' }}>
             <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>
               {/* 👉 替换为业务卡片数据 */}
@@ -356,9 +359,10 @@ export default function ChatHomePage() {
     rules: [
       '【五模板定位】本模板只用于“AI 任务会话 / AI 助手会话”的持续协作页：用户第一步是继续追问、确认规划、查看流式执行、查看 AI 产物卡或 follow-up。若用户还没开始任务，用 `ChatHomePagePattern`；若右侧主产物/主编辑区才是页面主角，AI 只是侧助，用 `CopilotPagePattern`；若是真人客服/私信/站内信回复，用 `IMConversationPattern`；若是管理一批会话/任务列表，用 `BasePageFramePattern`。',
       '【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `chat-conversation`：消息流和底部输入是主工作流，滚动归属消息流；底部 `ChatInput` 固定吸底，不随消息滚动。',
-      '【组件选型门禁】所有消息必须用 `ChatMessage`：用户消息用 `role="user"`，AI 消息用 `header` 并按需要组合 `thinking` / `plan` / `taskGroups` / `resultText` / `resultArtifacts` / `followUps`；底部输入必须用 `ChatInput`；顶部和消息操作用 `Button` + `Icon`；欢迎/空会话态可用 `Empty` 或模板内欢迎屏。禁止用 `ChatBubble`、Card 或裸 div 模拟 AI 消息。',
+      '【组件选型门禁】所有消息必须用 `ChatMessage`：用户消息用 `role="user"`，AI 消息用 `header` 并按需要组合 `thinking` / `plan` / `taskGroups` / `resultText` / `resultArtifacts` / `followUps`；底部输入必须用 `ChatInput`；顶部和消息操作用 `Button` + `Icon`；空会话必须使用模板内置的「新建会话页」，不要退回 `Empty`、空白消息区或自制欢迎卡。禁止用 `ChatBubble`、Card 或裸 div 模拟 AI 消息。',
       '【整体框架】外框灰底（color-blueGrey-200）；不带左侧 NavBar，整页就是一个独立会话工作区；不嵌中间白卡，顶导栏 / 消息区 / ChatInput 三层都直接坐灰底上；业务页面根容器不额外加外圈圆角或描边',
       '【顶导栏】shrink-0，左侧 ghost-black 返回箭头 + 会话标题（truncate），右侧按权重递增：share-07 / 会话详情 outline-black / 更多 dots / 新会话 primary（主操作唯一固定最右）',
+      '【顶导栏图标按钮】顶导栏内所有仅图标操作必须使用 `Button iconOnly tooltip="操作文案"`，hover/focus 时展示 Tooltip，且 tooltip 为字符串时由 Button 自动补 `aria-label`；禁止只传 `aria-label` 或只放 Icon 让用户猜操作。',
       '【布局结构】flex h-full flex-col：① 顶导栏 shrink-0 ② 中部消息区 flex-1 + min-h-0 + overflow-y-auto 独立内滚 ③ ChatInput shrink-0 吸底；不要给中部加白卡背景',
       '【宽度规格】对话流和 ChatInput 都用 800px + mx-auto 居中；对话流相对 ChatInput 左右各缩进 12px（消息区 padding "0 20px"，ChatInput padding "0 8px"），让消息看起来比输入框窄一圈',
       '【消息组件统一】所有消息（用户 / AI）一律用 ChatMessage 渲染。用户消息 role="user" + userContent / userAttachments；AI 消息 header=true + 任意组合 thinking / leadText / plan / taskGroups / resultText / resultArtifacts / followUps。禁止用 ChatBubble 渲染 AI 回复',
@@ -369,7 +373,7 @@ export default function ChatHomePage() {
       '【取消链路】用户点任务规划卡的「取消」：1) 卡片变 confirmed 置灰 2) 追加用户消息「取消」 3) 600ms 后追加 AI 短答寒暄（"已取消任务，还有其他问题随时找我～"）',
       '【追问交互】followUps 字符串数组在父组件 wrap 成 { items, onSelect: onSend } 形式，点击 chip 必须等价于立即发送该文本：先追加一条右侧 user 气泡，再由 AI 追加对应的新答复 / 产物 / 下一组 followUps；不要只回填输入框等待用户二次发送',
       '【自动滚底】用 ResizeObserver 监听消息列表 firstElementChild 的高度变化，任何高度增长都 scrollTo({ top: scrollHeight, behavior: smooth })；覆盖新消息追加 / 流式 step / 折叠展开 三种触发场景，比单独 useEffect([messages]) 更稳',
-      '【欢迎屏】点「新会话」→ phase 切到 welcome：清空 messages，中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；ChatInput 仍 shrink-0 吸底（位置和 chat 阶段保持一致），placeholder 改成"需要我为你做什么…"；用户在欢迎屏发送或点 chip → phase 自动切回 chat 走完整链路',
+      '【新建会话页 = 空对话唯一标准态】只要当前会话没有消息（初次进入空会话、外部传入 `messages=[]`、或用户点击「新会话」清空消息），都必须展示统一的新建会话页：中部居中展示 CATCAT 头像（66px 渐变描边圆 + 蓝色投影 + 32px catcat.svg）+「OLA AI」标题 + 欢迎语 + 3 条推荐 chip（白底 0.6 透明 + inset 1px 白边 + 右箭头）；底部 `ChatInput` 仍 shrink-0 吸底，placeholder 固定为"需要我为你做什么…"；禁止出现空白消息区、默认 mock 对话残留或与图示不一致的空状态。',
       '【关键词路由】① 含「整理 / 分析 / 生成 / 梳理 / 输出 / 汇总」→ 任务规划卡链路（待用户点开始/取消） ② 含「停止 / 取消」→ AI 短答「已停止当前任务，需要时再叫我。」 ③ 其他 → AI 短答从备选句池随机一句，避免机械化',
       '【任务规划卡 defaultConfirmed】历史消息（mock 中的已处理卡片）通过 plan.defaultConfirmed=true 让卡片初始就处于禁用置灰态；TaskPlanCard 内部用 useState(plan.defaultConfirmed === true) 初始化 confirmed，并用 useEffect 同步 props 变化',
     ],

package/src/_b_end_runtime/preview-registry.jsx

@@ -37,6 +37,7 @@ import DatePicker from './components/DatePicker';
 import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Tag from './components/Tag';
+import Filter from './components/Filter';
 import TagInput from './components/TagInput';
 import TagGridPreview from './components/TagGridPreview';
 import TablePreview, {
@@ -77,6 +78,7 @@ import { DATEPICKER_TOKEN_MAP } from './components/DatePicker.tokens';
 import { TIMEPICKER_TOKEN_MAP } from './components/TimePicker.tokens';
 import { TOAST_TOKEN_MAP } from './components/Toast.tokens';
 import { TAG_TOKEN_MAP } from './components/Tag.tokens';
+import { FILTER_TOKEN_MAP } from './components/Filter.tokens';
 import { TAGINPUT_TOKEN_MAP } from './components/TagInput.tokens';
 import { TABLE_TOKEN_MAP } from './components/Table.tokens';
 import { TOOLTIP_TOKEN_MAP } from './components/Tooltip.tokens';
@@ -112,6 +114,7 @@ import datePickerJsxRaw from './components/DatePicker.jsx?raw';
 import timePickerJsxRaw from './components/TimePicker.jsx?raw';
 import toastJsxRaw from './components/Toast.jsx?raw';
 import tagJsxRaw from './components/Tag.jsx?raw';
+import filterJsxRaw from './components/Filter.jsx?raw';
 import tagInputJsxRaw from './components/TagInput.jsx?raw';
 import tableJsxRaw from './components/Table.jsx?raw';
 import tooltipJsxRaw from './components/Tooltip.jsx?raw';
@@ -136,6 +139,37 @@ function SwitchPreview({ variant = 'brand', defaultChecked, disabled }) {
   );
 }
 
+const FILTER_SAMPLE_OPTIONS = [
+  { label: '选项一', value: 'option-1' },
+  { label: '选项二', value: 'option-2' },
+  { label: '选项三', value: 'option-3' },
+  { label: '禁用项', value: 'option-4', disabled: true },
+];
+
+function FilterPreview({
+  initial = 'empty',
+  disabled = false,
+}) {
+  const [singleValues, setSingleValues] = useState(
+    initial === 'selected' ? ['option-1'] : [],
+  );
+
+  useEffect(() => {
+    setSingleValues(initial === 'selected' ? ['option-1'] : []);
+  }, [initial]);
+
+  return (
+    <Filter
+      label="筛选项"
+      options={FILTER_SAMPLE_OPTIONS}
+      selectedValues={singleValues}
+      onChange={setSingleValues}
+      disabled={disabled}
+      onClear={() => {}}
+    />
+  );
+}
+
 const FORM_CONTROL_PREVIEW_WIDTH_STYLE = {
   width: 'min(300px, 100%)',
   maxWidth: '100%',
@@ -1207,10 +1241,10 @@ export const PREVIEW_REGISTRY = {
       }
 
       if (color === 'grey') {
-        lines.push('/* 白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
+        lines.push('/* 所有 Card 分类都遵守同一规则：白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
         lines.push('<div className="bg-white p-6">');
       } else {
-        lines.push('/* 灰色背景容器里，推荐使用白底 Card 做内容承载 */');
+        lines.push('/* 所有 Card 分类都遵守同一规则：灰色、浅灰或其他非纯白背景容器里，推荐使用白底 Card 做内容承载 */');
         lines.push('<div className="bg-blueGrey-200 p-6">');
       }
       lines.push('  <Card');
@@ -4158,6 +4192,67 @@ export const PREVIEW_REGISTRY = {
     },
   },
 
+  filter: {
+    component: FilterPreview,
+    tokenMap: FILTER_TOKEN_MAP,
+    jsxSource: filterJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'auto',
+      padding: '32px',
+    }),
+
+    controls: [
+      {
+        id: 'initial',
+        label: '初始值',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '空' },
+          { id: 'selected', label: '已选' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => ({
+      initial: cv.initial || 'empty',
+      disabled: cv.state === 'disabled',
+    }),
+
+    generateUsage: (_enums, cv) => {
+      const lines = [`import Filter from './components/Filter';`];
+      const props = ['label="筛选项"'];
+      props.push('options={options}');
+      if ((cv.initial || 'empty') === 'selected') props.push('defaultValue={["option-1"]}');
+      if (cv.state === 'disabled') props.push('disabled');
+
+      lines.push('');
+      lines.push('const options = [');
+      lines.push('  { label: "选项一", value: "option-1" },');
+      lines.push('  { label: "选项二", value: "option-2" },');
+      lines.push('  { label: "选项三", value: "option-3" },');
+      lines.push('];');
+      lines.push('');
+      lines.push('<Filter');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
   'tag-input': {
     component: TagInputPreview,
     tokenMap: TAGINPUT_TOKEN_MAP,

package/src/index.d.ts

@@ -155,7 +155,7 @@ export interface TagBarProps extends TfdsCommonProps {
 }
 export const TagBar: React.FC<TagBarProps>;
 
-/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。 */
+/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。 */
 export interface CardProps extends TfdsCommonProps {
   /** enum<data | product | info | info2 | animated>, default: "data" */
   type?: "data" | "product" | "info" | "info2" | "animated";
@@ -261,7 +261,7 @@ export interface ConversationListProps extends TfdsCommonProps {
 }
 export const ConversationList: React.FC<ConversationListProps>;
 
-/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。 */
+/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。 */
 export interface InfoDisplayPanelProps extends TfdsCommonProps {
   /** array, default: null */
   panels?: unknown[];
@@ -951,6 +951,33 @@ export interface TagProps extends TfdsCommonProps {
 }
 export const Tag: React.FC<TagProps>;
 
+/** Filter — 筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。 */
+export interface FilterProps extends TfdsCommonProps {
+  /** string, default: "筛选项" */
+  label?: string;
+  /** string|number|null, default: null */
+  value?: unknown;
+  /** array, default: [] */
+  options?: unknown[];
+  /** array, default: undefined */
+  selectedValues?: unknown[];
+  /** array, default: [] */
+  defaultValue?: unknown[];
+  /** function, default: null */
+  onChange?: (...args: any[]) => any;
+  /** boolean, default: false */
+  selected?: boolean;
+  /** boolean, default: false */
+  filled?: boolean;
+  /** boolean, default: false */
+  disabled?: boolean;
+  /** boolean, default: false */
+  closable?: boolean;
+  /** function, default: null */
+  onClear?: (...args: any[]) => any;
+}
+export const Filter: React.FC<FilterProps>;
+
 /** Toast — 轻量反馈条：信息/成功/警示/错误四态，左侧状态图标（相对行首额外 4px 左边距）+ 主文案 + 可选文字操作（绿色文字 Button）+ 可关闭；宽度随内容收缩（w-fit），最大不超过 min(100%,560px)；圆角 12px、可选语义描边（bordered）、内距 12px、主文案 14px 半粗，行内纵向居中对齐。规范仅覆盖单条条目视觉；全局队列、停留时长与 Portal 由业务集成（对齐 HiUI Toast）。 */
 export interface ToastProps extends TfdsCommonProps {
   /** enum<info | success | warning | error>, default: "info" */

package/src/index.js

@@ -1,5 +1,5 @@
 /**
- * @tf-designsystem/b-end 公开 API（由 scripts/generate-tfds-b-end-bundle.mjs 生成，勿手改）
+ * @tfdesign/b-end 公开 API（由 scripts/generate-tfds-b-end-bundle.mjs 生成，勿手改）
  * 实现位于包内 ./src/_b_end_runtime/（与主仓 src/data/systems/b-end 同步，可独立 npm 安装）
  */
 
@@ -35,6 +35,7 @@ export { default as Modal } from './_b_end_runtime/components/Modal.jsx';
 export { default as Sheet } from './_b_end_runtime/components/Sheet.jsx';
 export { default as TagInput } from './_b_end_runtime/components/TagInput.jsx';
 export { default as Tag } from './_b_end_runtime/components/Tag.jsx';
+export { default as Filter } from './_b_end_runtime/components/Filter.jsx';
 export { default as Toast } from './_b_end_runtime/components/Toast.jsx';
 export { default as Tooltip } from './_b_end_runtime/components/Tooltip.jsx';
 export { default as Empty } from './_b_end_runtime/components/Empty.jsx';