@tfdesign/b-end 1.1.3 → 1.1.5

package/src/_b_end_runtime/components.js

@@ -173,7 +173,7 @@ const FORM_TITLE_PREVIEW = {
   variant: {
     form: {
       layout: 'column',
-      titleFontSize: '20px',
+      titleFontSize: '18px',
       titleLineHeight: '28px',
       titleFontWeight: '600',
       titleColor: '#182230',
@@ -876,7 +876,7 @@ export const COMPONENTS = [
       'Icon', 'icon', '图标', '矢量图标', '符号', 'svg icon', 'iconfont',
       'kebab-case', 'stroked', '描边图标',
       // 高频图标名
-      'plus-stroked', 'check-stroked', 'search-md', 'arrow-down', 'chevron-down',
+      'plus-stroked', 'check-stroked', 'search-md-stroked', 'search-sm-stroked', 'search-lg-stroked', 'arrow-down', 'chevron-down',
       'trash-01-stroked', 'edit-01-stroked', 'settings-01-stroked', 'bell-03-stroked',
       // 错误信号词
       'lucide-react', 'lucide', 'Plus icon', 'react-icons', 'antd-icon', 'mui icon',
@@ -1007,55 +1007,51 @@ export const COMPONENTS = [
       { name: 'collapsed', type: 'boolean' },
       { name: 'defaultCollapsed', type: 'boolean', default: false },
       { name: 'onCollapsedChange', type: 'function', default: null },
-      { name: 'tone', type: 'enum', options: ['transparent', 'panel'], default: 'transparent' },
-      { name: 'resizable', type: 'boolean', default: true },
+      { name: 'resizable', type: 'boolean', default: false, deprecated: true },
       { name: 'width', type: 'number' },
       { name: 'defaultWidth', type: 'number', default: 240 },
       { name: 'minWidth', type: 'number', default: 160 },
       { name: 'maxWidth', type: 'number', default: 360 },
       { name: 'collapseThreshold', type: 'number', default: 130 },
-      { name: 'onWidthChange', type: 'function', default: null },
+      { name: 'onWidthChange', type: 'function', default: null, deprecated: true },
     ],
-    labels: {
-      tone: {
-        transparent: '嵌入白底（组件无底色）',
-        panel: '浅灰侧栏条（panel 浅灰底）',
-      },
-    },
     _preview: TAGBAR_PREVIEW,
     rules: [
       FONT_WEIGHT_RUNTIME_RULE,
       '【使用场景】用于服务平台、规则平台等左侧业务标签导航，不替代全局站点导航',
-      '【布局分两类，勿混用】① **大卡片 / 双白卡分栏**（灰底上左右各一张白圆角卡，如 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）', code: '<TagBar />' },
-      { label: '浅灰侧栏条（panel，非白卡）', code: '<TagBar tone="panel" />' },
+      { label: '默认透明底（背景由父容器决定）', code: '<TagBar />' },
       { label: '收起状态', code: '<TagBar collapsed />' },
       { label: '关闭搜索', code: '<TagBar searchable={false} />' },
       { label: '多业务切换', code: '<TagBar businesses={[{ id: "douyin-community", label: "抖音社区" }, { id: "douyin-search", label: "抖音搜索" }, { id: "douyin-ecommerce", label: "抖音电商" }]} />' },
       { label: '受控选中', code: '<TagBar selectedItemId={current} onSelect={(nextId) => setCurrent(nextId)} />' },
       { label: '受控搜索', code: '<TagBar searchValue={keyword} onSearchChange={setKeyword} />' },
       { label: '受控折叠', 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: '<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: '/* 禁止！自制 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: '自定义三级树项', 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: '❌ 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>' },
+      { 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: [
       'TagBar', 'tag-bar', '标签栏', '标签导航', '左侧标签栏', '业务标签栏', 'category bar',
       'tree nav', '树形导航', '业务切换', '业务下拉',
-      '可拖拽宽度', 'resizable', 'collapsed', '折叠', '收起',
-      'tone transparent', 'tone panel', '透明嵌入', '浅灰侧条',
+      '容器级可拖拽宽度', '外层白卡拖拽', 'collapsed', '折叠', '收起',
+      '透明底', '无背景色', '父容器背景', '三级标签', '彩色图标',
       // 高频场景
       'MCP 管理', '规则管理', '策略管理', '账号管理',
       // 错误信号词
@@ -1367,6 +1363,9 @@ export const COMPONENTS = [
       '【内容承载】每一个 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 的内容也必须同步切换到该当前对象对应的数据上下文，例如用户信息、历史工单、工单日志、视频信息、沟通记录都应属于同一个当前处理对象。',
@@ -1379,12 +1378,70 @@ export const COMPONENTS = [
       { label: '监听拆分状态', code: '<InfoDisplayPanel onSplitChange={({ splitTabIds, visibleColumns }) => console.log(splitTabIds, visibleColumns)} />' },
       { label: '可选限制最大栏数', code: '<InfoDisplayPanel defaultColumnCount={2} />' },
       { label: '自定义面板', code: '<InfoDisplayPanel panels={[{ id: "assistant", tabs: [{ id: "overview", label: "托管助手" }], content: <AssistantPanel /> }, { id: "history", tabs: [{ id: "tickets", label: "历史工单" }], content: <HistoryTickets /> }]} />' },
-      { label: '客服工作台自定义信息 Tabs', code: `const infoPanels = [
+      { label: '客服工作台托管助手 Tab（映射 IM 文案）', code: `const latestUserText = getLatestUserText(activeMessages);
+const recommendedReply = getNextAgentReply(activeMessages, latestUserText);
+
+const infoPanels = [
   {
     id: "assistant",
     tabs: [{ id: "assistant", label: "托管助手" }],
-    content: <ChatMessage role="ai" taskGroups={assistantFlow} resultText={recommendedReply} />,
+    content: (
+      <div className="flex flex-col gap-3">
+        <ChatMessage
+          role="user"
+          userBubbleTone="fill"
+          userContent={[{ type: "text", value: latestUserText }]}
+        />
+        <ChatMessage
+          role="ai"
+          header={{ name: "HiAI" }}
+          title=""
+          steps={null}
+          taskGroups={assistantFlow}
+        />
+        <ChatMessage
+          role="ai"
+          title=""
+          steps={null}
+          resultText={recommendedReply}
+        />
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost-black"
+            size="sm"
+            iconOnly
+            tooltip="复制到输入框"
+            icon={<Icon name="copy-06-stroked" size="sm" />}
+            onClick={() => setComposerPrefill(recommendedReply)}
+          />
+          <Button
+            type="button"
+            variant="ghost-black"
+            size="sm"
+            iconOnly
+            tooltip="发送给用户"
+            icon={<Icon name="send-03-stroked" size="sm" />}
+            onClick={() => sendAgentMessage(recommendedReply)}
+          />
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "order",
+    tabs: [{ id: "order", label: "订单信息" }, { id: "risk", label: "风险提示" }],
+    content: <OrderInfoPanel conversationId={activeConversationId} />,
+  },
+  {
+    id: "records",
+    tabs: [{ id: "history", label: "历史工单" }, { id: "logs", label: "工单日志" }],
+    content: <TicketRecordPanel ticketId={currentTicketId} />,
   },
+];
+
+<InfoDisplayPanel panels={infoPanels} className="size-full" />` },
+      { label: '客服工作台自定义信息 Tabs', code: `const infoPanels = [
   {
     id: "order",
     tabs: [{ id: "order", label: "订单信息" }, { id: "risk", label: "风险提示" }],
@@ -1557,6 +1614,8 @@ export const COMPONENTS = [
       '【忙碌】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（忙碌/回复中，黑底图标钮+停止）',
@@ -1976,8 +2035,8 @@ export const COMPONENTS = [
       '【⚡ 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` 模式。',
@@ -2088,8 +2147,10 @@ export const COMPONENTS = [
       '【字段配置】items 数组每项支持 id、label、type、required、labelPosition、middleHelpText、helpText、error、errorText、disabled、value/defaultValue/onChange 等字段；字段项上未被 Form 消费的基础组件 props 应继续透传给对应控件，保证 Form 内控件能力与单独使用基础组件时一致。',
       '【AI推荐能力继承】如果某个字段类型对应的基础组件支持 AI 推荐，那么 Form 中同类型字段必须拥有完全一致的 AI 推荐能力：type="input" 继承 Input 的 aiSuggestion / aiSuggestions / onAdoptSuggestion / onRefreshAiSuggestions；type="textarea" 继承 TextArea 的同名能力；type="select" 在默认 Select 模式下继承 Select 的 AI 推荐能力。Form 不单独创造新的 AI 推荐 UI，也不改变推荐区位置、间距、hover、刷新、采纳、写入值和回调行为。',
       '【AI推荐标题标签】当 Form 的某个字段启用 AI 推荐能力时，该字段标题右侧默认必须展示标准“AI”标签，等价于自动开启 labelAi；AI 标签用于提示该字段正在由智能推荐辅助填写，不需要业务额外再手动配置标题-AI。若字段未启用 AI 推荐，则 labelAi 仍可按普通标题附加样式独立配置。',
+      '【AI推荐标题标签边界】Form 的 `labelAi` 只适用于 Form 内部字段标题，不能外溢为页面 Hero 标题、ChatInput 顶部身份提示或 AI 入口页标题。AI 入口页、AI 对话页、ChatInput Hero 区、消息输入区顶部的“AI / 助手名 / 问候语”都不得用 Form 或 Form 字段 label 实现，应遵守对应页面模板和 ChatInput 规范。',
       '【AI推荐配置预览】组件详情页左侧配置区必须在字段类型支持 AI 推荐时展示“AI推荐”显隐配置项：当字段类型为 Input / TextArea / Select（默认模式）时可切换显示或隐藏推荐区，并实时预览对应基础组件的 AI 推荐交互；当画布预览区显示 AI 推荐时，下方“标题-AI”开关必须自动打开并处于选中态；切换到不支持 AI 推荐的字段类型或“全集”预览时，该配置项必须隐藏且不向字段透传 AI 推荐 props。',
       '【AI推荐透传边界】不支持 AI 推荐的基础组件（如 InputNumber、TagInput、CheckboxGroup、RadioGroup、Switch、DatePicker、TimePicker、Slider、Upload 等）在 Form 中也不应额外展示 AI 推荐区；Select 的 tag 模式仍遵循 Select 自身规则，不支持 AI 推荐。AI 生成 Form 时，只有需求明确出现“AI推荐 / 智能推荐 / 建议填写 / 推荐文案 / 推荐选项”等语义，才给对应字段透传 AI 推荐 props。',
+      '【不适用场景】Form 不用于承载 AI 入口页 Hero 主输入、AI 对话页底部输入、IM/客服消息输入、ChatInput 顶部猫条或输入框上方身份提示；这些场景必须直接使用 `ChatInput` 或对应页面模板。若只是为了显示“AI”标签或标题而使用 Form，属于错误选型。',
       '【标题附加样式】单字段标题支持 labelOptional、labelRequired、labelAi、labelHelp 四个布尔开关，可与纯文字标题组合显示；渲染顺序固定为 可选 -> 必填 -> AI -> Help',
       '【标题字重】字段标题、必填星号与可选文案统一使用 `semibold` token，即 `[font-weight:var(--font-semibold)]`；不要继续使用 `font-bold` 或手写 700 字重',
       '【AI 标签】当 labelAi=true 时，必须复用标准 `<Tag variant="ai" radius="full" fontWeight="bold" size="m">AI</Tag>`；禁止在 Form 内手写渐变胶囊、手写圆角块或用普通文字 span 模拟 AI 标签',
@@ -2161,7 +2222,8 @@ export const COMPONENTS = [
       '【聚焦占位符】聚焦时占位符文字颜色变更浅（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 推荐区，而不是只渲染普通输入态。',
@@ -2178,8 +2240,8 @@ export const COMPONENTS = [
       { label: '默认', code: '<Input placeholder="请输入内容" />' },
       { label: '有值', code: '<Input value="已填写内容" />' },
       { label: '带清除', code: '<Input value="可清除" allowClear onClear={() => {}} />' },
-      { label: '带前缀图标', code: '<Input prefix={<SearchIcon />} placeholder="搜索" />' },
-      { label: '带后缀图标', code: '<Input suffix={<EyeIcon />} placeholder="密码" />' },
+      { label: '带前缀图标', code: '<Input prefix={<Icon name="search-md-stroked" size="sm" aria-hidden="true" />} placeholder="搜索" />' },
+      { label: '带后缀图标', code: '<Input suffix={<Icon name="eye-stroked" size="sm" aria-hidden="true" />} placeholder="密码" />' },
       { label: 'AI推荐-单条', code: '<Input aiSuggestion="您好，您的问题已收到，抖音客服正在为您核实处理。" onRefreshAiSuggestions={() => {}} onAdoptSuggestion={(suggestion) => console.log(suggestion)} />' },
       { label: 'AI推荐-多条', code: '<Input aiSuggestions={["您好，正在为您核实，请稍候。", "抱歉给您带来不便，这边已经帮您加急处理。", "您好，您反馈的问题我们已经收到，建议您先提供订单号和问题截图，方便抖音客服尽快为您核实处理。"]} onRefreshAiSuggestions={() => {}} onAdoptSuggestion={(suggestion) => console.log(suggestion)} />' },
       { label: '智能建议-表单填写', code: '<Input aiSuggestion="建议补充订单号和问题截图，方便客服尽快核实。" onRefreshAiSuggestions={() => {}} onAdoptSuggestion={(suggestion) => console.log(suggestion)} placeholder="请输入处理说明" />' },
@@ -2187,7 +2249,7 @@ export const COMPONENTS = [
       { label: '错误状态', code: '<Input status="error" value="格式不正确" />' },
       { label: '禁用', code: '<Input disabled value="不可编辑" />' },
       { label: '❌ Bad（原生 input，会出现黑色边框）', 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/原生）', code: '/* 禁止！数字字段必须用 InputNumber */\n<input type="number" min={0} max={1} step={0.01} />' },
       { label: '✅ Good（数字用 InputNumber）', code: '<InputNumber min={0} max={1} step={0.01} />' },
     ],
@@ -2855,6 +2917,7 @@ export const COMPONENTS = [
       '【标题与操作】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 手写操作入口。',
@@ -3313,7 +3376,7 @@ export const COMPONENTS = [
     element: 'div',
     category: 'basic',
     description:
-      '筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板、多选、白底常态、填充态、品牌选中态、禁用态和可清除态。',
+      '筛选胶囊项：用于筛选栏中的单个筛选触发器或已选条件展示，36px 高、全圆角、标签 semibold + 值 regular。支持点击展开下拉面板，默认所有筛选下拉都是多选形式，且下拉列表第一个选项默认是“全部”。支持白底常态、填充态、品牌选中态、禁用态和可清除态。',
     componentFile: './components/Filter.jsx',
     tokensFile: './components/Filter.tokens.js',
     props: [
@@ -3345,13 +3408,13 @@ export const COMPONENTS = [
       '【选型·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、字重、焦点态与禁用态一致。',
@@ -3359,7 +3422,7 @@ export const COMPONENTS = [
     examples: [
       { label: '基础筛选项', code: '<Filter label="筛选项" />' },
       { label: '全部默认态', code: '<Filter label="筛选项" options={[{ label: "全部", value: "all" }, { label: "平台申请", value: "platform" }, { label: "外部导入", value: "external" }]} defaultValue="all" />' },
-      { label: '多选下拉（默认）', code: '<Filter label="筛选项" options={[{ label: "全部", value: "all" }, { label: "选项一", value: "1" }, { label: "选项二", value: "2" }]} />' },
+      { label: '多选下拉（默认，首项全部）', code: '<Filter label="筛选项" options={[{ label: "全部", value: "all" }, { label: "选项一", value: "1" }, { label: "选项二", value: "2" }]} />' },
       { label: '单选下拉', code: '<Filter label="状态" multiple={false} options={[{ label: "全部", value: "all" }, { label: "进行中", value: "running" }, { label: "已完成", value: "done" }]} />' },
       { label: '默认已选（多选）', code: '<Filter label="筛选项" options={options} defaultValue={["1"]} />' },
       { label: '默认已选（单选）', code: '<Filter label="状态" multiple={false} options={options} defaultValue="running" />' },

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

@@ -8,7 +8,11 @@ import McpManagementPage from './McpManagementPage';
 import StrategyListPage from './StrategyListPage';
 import TabTopBarListPage from './TabTopBarListPage';
 import VariableManagementPage from './VariableManagementPage';
-import { WHITE_CARD_STYLE } from './pageListShared';
+import {
+  PAGE_FRAME_CONTENT_MARGIN,
+  PAGE_FRAME_PANEL_GAP,
+  WHITE_CARD_STYLE,
+} from './pageListShared';
 
 /**
  * BasePageFramePattern — B 端基础页面框架
@@ -305,11 +309,11 @@ function CreateQAContent() {
   return (
     <div
       className="flex flex-1 min-h-0 min-w-0 overflow-hidden"
-      style={{ padding: '16px' }}
+      style={{ padding: PAGE_FRAME_CONTENT_MARGIN }}
     >
       <div
         className="flex min-h-0 min-w-0 flex-1 overflow-hidden"
-        style={{ gap: '8px' }}
+        style={{ gap: PAGE_FRAME_PANEL_GAP }}
       >
         {QA_PANEL_CONTENT.map((panel) => {
           const limits = QA_PANEL_LIMITS[panel.key];
@@ -354,7 +358,7 @@ function NoAccessPage() {
   return (
     <div
       className="flex flex-1 min-h-0"
-      style={{ margin: '16px' }}
+      style={{ margin: PAGE_FRAME_CONTENT_MARGIN }}
     >
       <div
         className="flex flex-1 min-w-0 items-center justify-center p-6"
@@ -377,7 +381,7 @@ function ConstructionPage() {
   return (
     <div
       className="flex flex-1 min-h-0"
-      style={{ margin: '16px' }}
+      style={{ margin: PAGE_FRAME_CONTENT_MARGIN }}
     >
       <div
         className="flex flex-1 min-w-0 items-center justify-center p-6"