@tfdesign/b-end 1.0.11 → 1.0.13

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

@@ -11,7 +11,7 @@ import Icon from '../components/Icon';
  *
  * 右侧内容区从上到下：
  *   1. Hero 区：大标题 + 副标题 + 居中 ChatInput + 快捷建议 chip
- *   2. 筛选行（左 Search + 右胶囊 Tab），左右 40px 边距
+ *   2. 筛选行（左胶囊 Tab + 右固定宽 Search），左右 40px 边距
  *   3. 自适应卡片网格（auto-fill minmax(260px,1fr)），左右 40px 边距
  */
 
@@ -23,6 +23,13 @@ const FILTER_TABS = [
   { label: '数据完善', id: '数据完善' },
 ];
 
+const FILTER_SEARCH_WRAP_STYLE = {
+  flex: '0 0 240px',
+  width: '240px',
+  minWidth: '240px',
+  maxWidth: '240px',
+};
+
 /* ── 示例卡片数据（20 张，category 对应 Tab id）── */
 const MOCK_CARDS = [
   {
@@ -197,16 +204,16 @@ export default function ChatHomePagePattern() {
         />
       </div>
 
-      {/* 右侧内容区 */}
-      <div className="flex flex-1 min-w-0 flex-col min-h-0 overflow-hidden">
+      {/* 右侧内容区：整体滚动，Hero / 筛选 / 卡片一起滑动 */}
+      <div className="flex flex-1 min-w-0 flex-col min-h-0 overflow-y-auto overflow-x-hidden">
 
         {/* ① Hero 区 */}
         <div
           className="flex flex-col items-center shrink-0"
-          style={{ padding: '120px 40px 80px' }}
+          style={{ padding: '84px 40px 80px' }}
         >
           <h1
-            className="m-0 text-center text-3xl [font-weight:var(--font-semibold)] leading-9"
+            className="m-0 text-center text-4xl [font-weight:var(--font-semibold)] leading-10"
             style={{
               color: 'var(--foreground, #0F1C35)',
               marginBottom: '6px',
@@ -219,7 +226,7 @@ export default function ChatHomePagePattern() {
             className="m-0 text-sm text-center"
             style={{
               color: 'var(--foreground-muted, rgba(15,28,53,0.45))',
-              marginBottom: '24px',
+              marginBottom: '48px',
             }}
           >
             直接描述你的需求，或从下方模板快速开始
@@ -230,32 +237,34 @@ export default function ChatHomePagePattern() {
           </div>
         </div>
 
-        {/* ② 筛选行：左侧胶囊 Tab + 右侧搜索，左右 40px */}
+        {/* ② 筛选行：左侧胶囊 Tab + 右侧固定宽搜索，左右 40px */}
         <div
-          className="flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-4"
+          className="flex min-w-0 shrink-0 items-center gap-4"
           style={{ padding: '16px 40px' }}
         >
-          <Tabs
-            variant="pill"
-            size="sm"
-            items={FILTER_TABS}
-            defaultIndex={0}
-            onChange={(index) => setActiveTabIndex(index)}
-          />
-          <Input
-            placeholder="搜索标题、描述"
-            prefix={<Icon name="search-md-stroked" size="sm" />}
-            allowClear
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            className="max-w-full"
-            style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
-          />
+          <div className="flex shrink-0">
+            <Tabs
+              variant="pill"
+              size="sm"
+              items={FILTER_TABS}
+              defaultIndex={0}
+              onChange={(index) => setActiveTabIndex(index)}
+            />
+          </div>
+          <div className="ml-auto shrink-0" style={FILTER_SEARCH_WRAP_STYLE}>
+            <Input
+              placeholder="搜索标题、描述"
+              prefix={<Icon name="search-md-stroked" size="sm" />}
+              allowClear
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
+          </div>
         </div>
 
-        {/* ③ 卡片网格（自适应列，可滚动，左右 40px） */}
+        {/* ③ 卡片网格（随页面整体滚动，左右 40px） */}
         <div
-          className="flex-1 min-h-0 overflow-y-auto"
+          className="shrink-0"
           style={{ padding: '0 40px 32px' }}
         >
           <div

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） */

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

@@ -43,6 +43,8 @@ export const PATTERNS = [
       '【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` 动态计算；拖拽条需支持键盘左右方向键微调。',
@@ -95,6 +97,7 @@ export default function CustomerServicePage() {
       '【布局 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 工作台首页、智能分析入口、模板广场、报告生成入口、用户尚未进入具体上下文的助手首页。此时核心输入区与推荐内容应直接坐落在浅灰大背景上，不要强行套成典型白卡后台页。',
@@ -118,7 +121,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）。内部卡片、列表项、表单控件原有边框/描边保持不变。',
@@ -202,10 +205,10 @@ export default function MyPage({ defaultSelectedItemId = 'example-1' }) {
       '【组件选型门禁】主输入必须用 `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';
@@ -222,6 +225,13 @@ const CATEGORY_TABS = [
   { label: '数据分析', icon: <Icon name="bar-chart-01-stroked" /> },
 ];
 
+const TEMPLATE_SEARCH_WRAP_STYLE = {
+  flex: '0 0 240px',
+  width: '240px',
+  minWidth: '240px',
+  maxWidth: '240px',
+};
+
 export default function ChatHomePage() {
   return (
     <div
@@ -236,44 +246,46 @@ export default function ChatHomePage() {
         <NavBar platform="ola" selectedItemId="knowledge" />
       </div>
 
-      <div className="flex flex-1 min-w-0 min-h-0 flex-col overflow-hidden">
+      <div className="flex flex-1 min-w-0 min-h-0 flex-col overflow-y-auto overflow-x-hidden">
           {/* Hero 区：欢迎语 + ChatInput */}
           <div
             className="flex flex-col items-center shrink-0"
             style={{
-              padding: '120px 40px 80px',
+              padding: '84px 40px 80px',
             }}
           >
             <div className="flex flex-col items-center gap-2 w-full text-center">
-              <h1 className="m-0 text-3xl [font-weight:var(--font-semibold)] leading-9" style={{ color: 'var(--foreground)' }}>
+              <h1 className="m-0 text-4xl [font-weight:var(--font-semibold)] leading-10" style={{ color: 'var(--foreground)' }}>
                 今天想做什么？
               </h1>
               <p className="m-0 text-sm" style={{ color: 'var(--foreground-muted)' }}>
                 从下方搜索助手，或直接输入你的需求，AI 帮你快速搞定
               </p>
             </div>
-            <div className="w-full" style={{ maxWidth: '680px' }}>
+            <div className="w-full" style={{ maxWidth: '680px', marginTop: '48px' }}>
               <ChatInput variant="default" placeholder="描述你想完成的任务…" />
             </div>
           </div>
 
-          {/* 筛选行：Tabs + 搜索，直接坐灰底 */}
+          {/* 筛选行：Tabs + 固定宽搜索，直接坐灰底 */}
           <div
-            className="flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-4"
+            className="flex min-w-0 shrink-0 items-center gap-4"
             style={{ padding: '16px 40px' }}
           >
-            <Tabs variant="pill" size="sm" items={CATEGORY_TABS} defaultIndex={0} />
-            <Input
-              placeholder="搜索标题、描述"
-              prefix={<Icon name="search-md-stroked" size="sm" />}
-              allowClear
-              className="max-w-full"
-              style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
-            />
+            <div className="flex shrink-0">
+              <Tabs variant="pill" size="sm" items={CATEGORY_TABS} defaultIndex={0} />
+            </div>
+            <div className="ml-auto shrink-0" style={TEMPLATE_SEARCH_WRAP_STYLE}>
+              <Input
+                placeholder="搜索标题、描述"
+                prefix={<Icon name="search-md-stroked" size="sm" />}
+                allowClear
+              />
+            </div>
           </div>
 
-          {/* 卡片列表（可滚动）：卡片自身是白卡，外层不包白卡 */}
-          <div className="flex-1 min-h-0 overflow-y-auto" style={{ padding: '0 40px 40px' }}>
+          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}
+          <div className="shrink-0" style={{ padding: '0 40px 40px' }}>
             <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>
               {/* 👉 替换为业务卡片数据 */}
               <Card color="white" title="智能客服助手" description="基于大模型的全渠道客服对话助手" tags={['客服', '对话']} />