@tfdesign/b-end 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "private": false,
   "type": "module",
   "description": "TFDS B-end React components + Tailwind v4 theme.css; self-contained npm install (no monorepo clone required).",

package/skills/tfds/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: tfds
-description: "体服B端设计系统 v1.1.2，支持一键调用TFDS组件生成符合体服设计规范的UI组件与页面。"
+description: "体服B端设计系统 v1.1.4，支持一键调用TFDS组件生成符合体服设计规范的UI组件与页面。"
 disable-model-invocation: true
 metadata:
   version: "3"
@@ -102,7 +102,7 @@ metadata:
 1. **栈对齐**：项目为 Vite + React + Tailwind v4；全局样式已 `@import "tailwindcss"` 且已 `@import "@tfdesign/b-end/theme.css"`；Tailwind 已扫描 `node_modules/@tfdesign/b-end/**/*.{js,jsx}`。
 2. **先选页面骨架**：按 `PAGE_ARCHETYPES.md` 判断页面范式 → 按 `LAYOUT_RECIPES.md` 选唯一主 recipe → 用 `components.summary.json` 初选 `kind: "page-pattern"` / `kind: "page-template"` → 回查 `components.index.json`：
    - **结构化对象管理** → `BasePageFramePattern`（浅灰底整页 + 多白卡分区，贴浏览器边缘，无外圈圆角/描边）
-   - **从 0 发起 AI 任务** → `ChatHomePagePattern`（右侧主内容区**保持灰底**，⛔ 禁止包大白卡 wrapper；模板卡用 `<Card color="white" />`）
+   - **从 0 发起 AI 任务** → `ChatHomePagePattern`（右侧主内容区**保持灰底**，Hero 标题 + `ChatInput` 必须居中；⛔ 禁止包大白卡 wrapper；⛔ 禁止用 `Form` / `labelAi` 包裹或模拟 Hero 主输入；模板卡用 `<Card color="white" />`）
    - **围绕 AI 任务持续协作** → `ChatConversationPattern`（消息流必须用 `ChatMessage`）
    - **对象编辑 / 产物查看 + AI 侧助** → `CopilotPagePattern`
    - **真实 IM / 客服 / 私信线程** → `IMConversationPattern`（`ChatBubble` + `ChatInput variant="im-basic"`）
@@ -121,6 +121,7 @@ metadata:
    - `card` → Card 头、摘要条
    - 同页必须拉开层级；描述默认隐藏（无说明诉求不写 `description`）；标题状态 Tag 用 `titleSuffix`，⛔ 不进右侧 action 区
    - **页面级 header 直接坐灰底**，⛔ 不得包白卡（详见 LAYOUT_RULES § 1.5 / [CHECKLIST.md §12](./CHECKLIST.md)）
+   - **ChatHome 例外边界**：AI 入口页 Hero 区的“AI / 助手名 / 问候语 + ChatInput”不是表单字段标题，也不是白卡标题；⛔ 禁止写 `<Form items={[{ label: "AI", type: "input" | "textarea" }]} />`、`labelAi` 或 Form 字段标题来实现输入框顶部的 AI 标识。正确做法是按 `ChatHomePagePattern`：Hero 容器 `items-center text-center`，标题/副标题居中，`<ChatInput variant="default" />` 放在 `maxWidth: 680px` 的居中容器内。
 7. **状态徽标 / 图标 / 链接**：状态分类 → `<Tag size="m" />`（⛔ `<span>` 假徽标）；图标 → `<Icon name="kebab-case" size="sm" />`（⛔ `lucide-react` 单独引入）；文字链 → `<Button variant="text-brand" />`（⛔ 裸 `<a>`）。
 8. **整页高度与滚动 / 多栏 / IM 骨架**（详见 `LAYOUT_RULES.md`）：
    - 根容器默认 `h-dvh + overflow-hidden + flex flex-col + w-full min-w-0`

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-14T17:33:55.296Z",
+  "generatedAt": "2026-05-16T18:40:07.215Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
@@ -1566,7 +1566,7 @@
       "kind": "component",
       "name": "InfoDisplayPanel",
       "category": "business",
-      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。",
+      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽，且每个 tab 内容都可由业务完全自定义。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "InfoDisplayPanel"
@@ -1635,7 +1635,7 @@
       ],
       "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 已约定处。",
-        "【组件定位】InfoDisplayPanel 是“信息展示面板框架”，只负责外框、顶部 Tabs、拆分/合并、分栏调宽、内容插槽和基础间距；它不提供业务内容默认占位，不替代 Card、Table、Form、ConversationList 或客服工作台整页框架。",
+        "【组件定位】InfoDisplayPanel 是“信息展示面板框架”，只负责外框、顶部 Tabs、拆分/合并、分栏调宽、内容插槽和基础间距；它不提供业务内容默认占位，不替代 Card、Table、Form、ConversationList 或客服工作台整页框架。每个 tab 的正文区域是开放插槽，可承载任意业务自定义内容。",
         "【触发引用】当页面需要在同一工作区右侧并列查看“托管助手 / 历史工单 / 工单日志 / 信息工具 / 视频信息 / 用户信息 / 沟通记录”等多个详情面板，并且用户需要把当前关注的 tab 临时拆出来并排对照时，优先使用 InfoDisplayPanel；如果只是单块内容展示或普通 tabs 切换，不应使用该业务框架。",
         "【客服业务优先规则】只要页面触及客服业务、客服工作台、客服接待、工单处理、售后处理、订单/商品上下文核对、客服资料查看等场景，并需要展示客服工单信息、商品信息、订单信息、用户信息、客服相关信息或沟通记录等辅助信息板块，默认优先使用 InfoDisplayPanel 承载这些信息区；禁止用多个 Card、div 白卡或自制 tabs 临时拼出客服信息侧栏。",
         "【客服分类 Tabs】客服信息区涉及多个分类时，必须通过 InfoDisplayPanel 顶部 Tabs 切换分类，常见分类包括“工单信息 / 商品信息 / 订单信息 / 用户信息 / 客服信息 / 沟通记录 / 处理日志 / 风险提示”。分类名称、顺序和内容必须来自当前业务上下文；不要把这些示例硬编码成所有页面的固定 tab。",
@@ -1651,12 +1651,14 @@
         "【分栏门槛】每栏最小宽度固定 `200px`，双栏最小需求空间为 `401px`，三栏最小需求空间为 `602px`；小于 `401px` 时只能单栏，`401px-601px` 时最多双栏，`>= 602px` 时最多三栏。",
         "【拖拽调宽】组件整体宽度必须通过左外边界那 1 条手柄统一调整；当拆分为 2 栏或 3 栏后，组件内部只保留栏与栏之间的分隔线拖拽，用于调整左右相邻两栏宽度。禁止在组件最左侧再叠加第二条“第一栏宽度”手柄。所有栏位最小宽度统一为 `200px`，最大宽度不单独限制，只受外层容器可用宽度约束。",
         "【预览验收】组件预览默认撑满预览容器，并提供组件左侧边缘的整体宽度拖拽；单栏、双栏和三栏切换都应通过同一预览宽度拖拽链路验证，不再依赖固定宽度画板。",
-        "【默认内容】组件默认不渲染任何骨架屏、灰色占位卡片或示意内容；InfoDisplayPanel 只提供框架、Tabs、拆分/合并、拖拽调宽和内容插槽。业务内容必须由 `panels[].content` 或 `renderPanelContent` 注入。",
+        "【默认内容】组件默认不渲染任何骨架屏、灰色占位卡片或示意内容；InfoDisplayPanel 只提供框架、Tabs、拆分/合并、拖拽调宽和内容插槽。业务内容必须由 `panels[].content` 或 `renderPanelContent({ panel, index, activeTabId })` 注入。",
         "【内容内距】每栏内容区四周内边距固定 16px，内容块之间纵向间距固定 16px；内容区默认 `flex-col` 排列，子元素默认 `min-width: 0; width: 100%`，需要跟随当前 tab 栏宽度自动伸缩适配。每栏内容区独立滚动，内容多时只滚动当前栏，不撑高外层面板。AI 生成内容时应优先使用响应式宽度、自动换行和内部滚动，避免 `w-[固定值]`、绝对定位和固定大宽度表格。",
         "【Tabs规范】每栏顶部使用页签语义组织，统一使用基础 `Tabs variant=\"line\" size=\"lg\"`；Header 横向内边距为 16px，Tabs 文案之间保持基础 Tabs 的 item padding 与间距，不额外手写按钮间距。右侧动作按钮与 Tabs 区域保持 12px 间距。选中态为基础 Tabs 的 semibold + Brand 500 3px 指示线；未选中态为基础 Tabs 的 normal 字重和次级色。主栏展示未拆分 tabs 集合，拆分栏只展示各自承载的单个 tab。Tabs 只切换本栏内容，不改变页面路由。",
         "【单Tab降级】当业务只有 1 个分类时，容器不应为了形式感渲染 Tabs；运行时会用 `FormTitle variant=\"card\"` 展示该分类标题，内容区仍按 16px 内距承载业务组件。AI 生成页面时，如果只有单个分类，应优先直接使用标题 + 内容结构，除非后续明确会扩展为多 tab。",
-        "【内容承载】每一个 tab 栏都可以承载任意业务组件元素，包括信息卡片、表单、表格片段、日志列表、图片/视频信息、实验命中详情或自定义复合组件；被承载组件必须优先使用 `w-full min-w-0` 等自适应写法，避免固定宽度导致拆分栏变窄时溢出。",
-        "【AI生成约束】AI 生成具体业务页面时，应把真实信息卡片、表单、工单日志或内容详情放进 `panels[].content` 或 `renderPanelContent`；不要手写外层分栏容器、不要用多个 Card + gap 临时拼出三栏框架，也不要依赖 InfoDisplayPanel 的默认占位内容。",
+        "【内容承载】每一个 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 聊天区指向同一处理对象；不要让信息面板内部自行维护另一套当前对象状态。",
+        "【AI生成约束】AI 生成具体业务页面时，应把真实信息卡片、表单、工单日志、ChatMessage 托管助手或内容详情放进 `panels[].content` 或 `renderPanelContent`；不要手写外层分栏容器、不要用多个 Card + gap 临时拼出三栏框架，也不要依赖 InfoDisplayPanel 的默认占位内容。",
         "【组合关系】InfoDisplayPanel 可作为 CustomerServiceWorkspaceFrame 的 mainPanel 内容；放入主白卡时宽高使用 `size-full` 或父容器约束，外层不要再套一层大白卡。",
         "【嵌入客服工作台时的语义】在客服工作台框架模版里，InfoDisplayPanel 不是独立静态侧栏，而是“当前左侧选中会话 / 工单”的辅助信息区。左侧会话列表默认选中项变化时，InfoDisplayPanel 内各 tab 的内容也必须同步切换到该当前对象对应的数据上下文，例如用户信息、历史工单、工单日志、视频信息、沟通记录都应属于同一个当前处理对象。",
         "【联动边界】客服工作台里的右侧白卡应被视为一个整体工作区：左侧 IM 对话区负责当前线程，右侧 InfoDisplayPanel 负责同一线程的辅助信息。两者由外层模板统一接收当前对象 id 并同步刷新；InfoDisplayPanel 不应自己脱离左侧上下文单独维持另一份“当前对象”。",
@@ -1680,6 +1682,14 @@
           "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 = [\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\" />"
+        },
+        {
+          "label": "动态渲染 Tab 内容",
+          "code": "<InfoDisplayPanel\n  panels={[\n    { id: \"assistant\", tabs: [{ id: \"assistant\", label: \"托管助手\" }] },\n    { id: \"context\", tabs: [{ id: \"user\", label: \"用户信息\" }, { id: \"order\", label: \"订单信息\" }] },\n  ]}\n  renderPanelContent={({ panel, activeTabId }) => {\n    if (panel.id === \"assistant\") return <AssistantPanel conversationId={activeConversationId} />;\n    if (activeTabId === \"user\") return <UserProfile userId={currentUserId} />;\n    if (activeTabId === \"order\") return <OrderInfo orderId={currentOrderId} />;\n    return null;\n  }}\n/>"
+        },
         {
           "label": "单分类自动降级为标题",
           "code": "<InfoDisplayPanel panels={[{ id: \"profile\", tabs: [{ id: \"profile\", label: \"用户信息\" }], content: <UserProfile /> }]} />"
@@ -3233,7 +3243,7 @@
       "kind": "component",
       "name": "Form",
       "category": "basic",
-      "description": "B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。",
+      "description": "B端表单组合组件，本质是字段标题 / 说明 / 错误反馈与各类表单基础组件的组合层；字段控件完整复用对应基础组件的默认能力、交互、状态、尺寸和 AI 推荐能力。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "Form"
@@ -3313,8 +3323,9 @@
         }
       ],
       "rules": [
-        "【组件定位】Form 是字段组合层，只管理 label、提示、错误反馈、top/left 布局和字段编排，不重新定义已有表单控件样式",
-        "【控件复用】已有基础组件必须复用：input 复用 Input，textarea 复用 TextArea（仅传基组件已有 props，默认 minRows=3、resize 纵向增高与 TextArea 一致；System Prompt / JSON / 代码参数字段必须传 variant=\"code\"），input-number 复用 InputNumber，select 复用 Select，tag-input 复用 TagInput，checkbox 复用 CheckboxGroup，radio 复用 RadioGroup，switch 复用 Switch，date-picker 复用 DatePicker，time-picker 复用 TimePicker，slider 复用 Slider，upload 复用 Upload",
+        "【组件定位】Form 是字段组合层，本质是 `FormTitle` / 字段标题 / 提示 / 错误反馈 / top-left 布局 + 各类型表单基础组件的组合；它不重新定义已有表单控件样式、交互或能力，也不是一套新的输入控件体系。",
+        "【控件复用】已有基础组件必须复用：input 复用 Input，textarea 复用 TextArea（仅传基组件已有 props，默认 minRows=3、resize 纵向增高与 TextArea 一致；System Prompt / JSON / 代码参数字段必须传 variant=\"code\"），input-number 复用 InputNumber，select 复用 Select，tag-input 复用 TagInput，checkbox 复用 CheckboxGroup，radio 复用 RadioGroup，switch 复用 Switch，date-picker 复用 DatePicker，time-picker 复用 TimePicker，slider 复用 Slider，upload 复用 Upload。",
+        "【能力继承】Form 中字段类型对应哪个基础组件，就完整继承该基础组件的默认能力、交互、状态、尺寸、token、禁用态、错误态、值受控方式和回调语义；Form 只负责把 label / helpText / errorText / required 等字段外壳组合起来，不允许在 Form 内把同类型控件做成与基础组件不同的行为。",
         "【布局】Form 在页面主内容区、白色卡片容器与纵向堆叠场景中默认 `w-full min-w-0 self-stretch`；labelPosition=\"top\" 时字段容器与控件区都默认全宽，label 与控件间距 4px；labelPosition=\"left\" 时标签列固定 96px、间距 24px、右侧控件区使用 `flex-1 min-w-0 w-full` 撑满剩余宽度",
         "【正文表单宽度铁律】页面主表单、白卡/卡片内配置表单、澄清确认卡片、抽屉/弹窗正文表单、侧栏详情表单中，Input / Select / TextArea / InputNumber / DatePicker / TimePicker / TagInput / Slider / InputGroup 这类字段型控件必须默认撑满字段内容列，且同一表单区域左右边界对齐、宽度一致。多个字段上下排列在同一卡片容器内时，每个字段都应随卡片内容区动态撑满，不受 240px / 200px / 320px 的筛选搜索宽度限制。",
         "【筛选工具条宽度例外】只有列表筛选栏、工具条、紧凑查询区、AI 首页模板搜索、Tabs 右侧搜索这类横向辅助查询入口，才允许固定中窄宽：搜索 Input 默认约 240px、最小 200px、最大 320px；Select / DatePicker / TimePicker / TagInput 等筛选控件常用 160-240px（日期时间范围可更宽）。禁止把筛选工具条固定宽套到业务表单正文。",
@@ -3322,12 +3333,18 @@
         "【紧凑/特殊控件宽度】Switch、普通 CheckboxGroup、普通 RadioGroup 的控件本体按语义保持自然宽度，但字段容器仍占满表单区域并与其它字段左边界对齐；卡片型 Radio/Checkbox 选项可按场景设置 `w-full` 形成等宽选项。Upload 字段区域占满表单区域，内部图片 tile 保持固定尺寸并自动换行，不强行拉伸 tile。",
         "【自定义控件宽度】使用 children 或 item.control 传入自定义字段时，外层必须补 `className=\"w-full min-w-0 max-w-full\"`；否则会绕过 Form 内置的 `!w-full` 控件宽度约束，导致 Input、Select、TextArea 等宽度不一致",
         "【详情页全集预览】组件详情页的“全集”分类按字段类型从上到下单列排列，每个组件间距 40px，超出预览画布时在画布内滚动查看",
-        "【字段配置】items 数组每项支持 id、label、type、required、labelPosition、middleHelpText、helpText、error、errorText、disabled、value/defaultValue/onChange 等字段；当字段命中 AI 推荐语义时，可继续透传 aiSuggestion、aiSuggestions、onAdoptSuggestion、onRefreshAiSuggestions 到 Input / Select / TextArea",
+        "【字段配置】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 标签",
         "【标题必填】labelRequired 用于标题星号装饰；若未单独配置，仍可通过 required + requiredMark 复用现有星号逻辑",
-        "【配置联动】组件详情页切换字段类型时，左侧配置区需动态追加当前被引用基础组件自身的枚举配置，并透传到对应字段控件（textarea 与 TextArea 详情配置侧栏一致：内容、超长计数、状态、默认高度、状态、高度适配）",
+        "【配置联动】组件详情页切换字段类型时，左侧配置区需动态追加当前被引用基础组件自身的枚举配置，并透传到对应字段控件（textarea 与 TextArea 详情配置侧栏一致：内容、超长计数、状态、默认高度、状态、高度适配）；AI 推荐显隐也必须按字段类型动态出现/隐藏。",
         "【TagInput 字段】Form 中 type=\"tag-input\" 的标签颜色固定为灰色、Tag 尺寸固定为 M，不暴露颜色或尺寸配置",
         "【反馈优先级】error=true 时展示红色图标 + 错误文案，并将可复用控件 status 设为 error；无错误时展示 helpText",
         "【未独立组件】InputGroup 尚未作为独立基础组件存在，Form 内部仅做轻量组合展示；如后续沉淀为基础组件，应替换为独立组件引用",
@@ -3355,6 +3372,18 @@
           "label": "选择器字段",
           "code": "<Form items={[{ id: \"city\", label: \"城市\", type: \"select\", options: [{ value: \"hz\", label: \"杭州\" }] }]} />"
         },
+        {
+          "label": "AI推荐 · Input字段",
+          "code": "<Form items={[{ id: \"reply\", label: \"推荐回复\", type: \"input\", aiSuggestions: [\"您好，正在为您核实，请稍候。\", \"抱歉给您带来不便，这边已经帮您加急处理。\"], onAdoptSuggestion: (suggestion) => console.log(suggestion), onRefreshAiSuggestions: () => {} }]} />"
+        },
+        {
+          "label": "AI推荐 · TextArea字段",
+          "code": "<Form items={[{ id: \"remark\", label: \"处理备注\", type: \"textarea\", aiSuggestions: [\"建议优先整理用户诉求、处理时效和需补充的材料信息。\", \"如果需要后续交接，可一并记录当前判责结论和预计回访时间。\"], onAdoptSuggestion: (suggestion) => console.log(suggestion), onRefreshAiSuggestions: () => {} }]} />"
+        },
+        {
+          "label": "AI推荐 · Select字段",
+          "code": "<Form items={[{ id: \"category\", label: \"问题分类\", type: \"select\", options: [{ value: \"refund\", label: \"退款问题\" }, { value: \"invoice\", label: \"发票问题\" }, { value: \"account\", label: \"账号问题\" }], aiSuggestions: [\"退款问题\", \"账号问题\"], onAdoptSuggestion: (value, option) => console.log(value, option), onRefreshAiSuggestions: () => {} }]} />"
+        },
         {
           "label": "全量示例",
           "code": "<Form className=\"!gap-10\" />"
@@ -7235,6 +7264,8 @@
         "【状态同步原则】当业务接真实数据、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 手搓三栏替代。",
+        "【右侧信息 Tab 区内容定义】客服工作台右侧 InfoDisplayPanel 是“当前处理对象的辅助信息工作区”，每个 tab 都是业务内容插槽而不是固定占位。业务可在 `panels[].content` 中直接传入任意 React 内容，或通过 `renderPanelContent({ panel, index, activeTabId })` 按当前 tab 动态渲染；允许承载托管助手 ChatMessage 执行流、用户画像、订单/商品详情、历史工单、工单日志、沟通记录、风险提示、售后策略、处理工具、表单、表格片段、图文/视频信息或自定义复合组件。",
+        "【右侧信息 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。",
@@ -7403,11 +7434,13 @@
       "rules": [
         "【五模板定位】本模板只用于“从 0 发起 AI 任务”的入口页：用户还没进入某个对象、会话或产物，第一步是输入一句需求、搜索助手、选择模板/案例/推荐 Agent。若用户要管理一批助手/模板/机器人列表，用 `BasePageFramePattern`；若用户已经在任务内持续追问，用 `ChatConversationPattern`；若右侧有主文档/主画布/主配置，AI 只是辅助，用 `CopilotPagePattern`；若是客服/私信线程，用 `IMConversationPattern`。",
         "【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `chat-home`：右侧主内容区是 gray-direct，不是白色 `WorkSurface`；Hero / ChatInput / Tabs / 搜索 / 模板卡网格直接坐 `var(--color-blueGrey-200)`。",
-        "【组件选型门禁】主输入必须用 `ChatInput`，不可用原生 textarea 或 Input 冒充 AI 输入；模板/助手/案例推荐必须用 `Card`；分类切换必须用 `Tabs`；搜索框用 `Input` + `Icon` 前缀；无结果用 `Empty`。禁止用 Button/Tag 排一行冒充 Tabs，禁止手写卡片。",
+        "【组件选型门禁】主输入必须用 `ChatInput`，不可用原生 textarea、Input 或 Form 字段冒充 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-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 反例扫描】同一 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` 造成只有卡片区滚动。",
         "【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义"

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-14T17:33:55.296Z",
+  "generatedAt": "2026-05-16T18:40:07.215Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 47,
@@ -313,7 +313,7 @@
       "kind": "component",
       "name": "InfoDisplayPanel",
       "category": "business",
-      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。",
+      "description": "信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽，且每个 tab 内容都可由业务完全自定义。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "InfoDisplayPanel"
@@ -344,8 +344,8 @@
         "多面板工作区",
         "panel tabs"
       ],
-      "ruleCount": 28,
-      "exampleCount": 8,
+      "ruleCount": 30,
+      "exampleCount": 10,
       "hasCode": false,
       "detailRef": "components.index.json#info-display-panel"
     },
@@ -600,7 +600,7 @@
       "kind": "component",
       "name": "Form",
       "category": "basic",
-      "description": "B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。",
+      "description": "B端表单组合组件，本质是字段标题 / 说明 / 错误反馈与各类表单基础组件的组合层；字段控件完整复用对应基础组件的默认能力、交互、状态、尺寸和 AI 推荐能力。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "Form"
@@ -631,8 +631,8 @@
         "top 布局",
         "left 布局"
       ],
-      "ruleCount": 20,
-      "exampleCount": 8,
+      "ruleCount": 27,
+      "exampleCount": 11,
       "hasCode": false,
       "detailRef": "components.index.json#form"
     },
@@ -1636,7 +1636,7 @@
         "工单处理框架",
         "CustomerServiceWorkspaceFrame"
       ],
-      "ruleCount": 26,
+      "ruleCount": 28,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#customer-service-workspace-frame"
@@ -1718,7 +1718,7 @@
         "今天想做什么",
         "帮我快速搞定"
       ],
-      "ruleCount": 10,
+      "ruleCount": 12,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#chat-home-page"

package/src/_b_end_runtime/components/Card.jsx

@@ -67,7 +67,7 @@ const CARD_INTERACTIVE = [
 ].join(' ');
 
 const DATA_CARD = 'min-h-[var(--size-card-min-height)] flex-col justify-between gap-7';
-const PRODUCT_CARD = 'min-h-[96px] flex-row items-center gap-5 [&_.tfds-tag.bg-white]:hidden';
+const PRODUCT_CARD = 'min-h-[96px] flex-row items-center gap-5 !rounded-lg [&_.tfds-tag.bg-white]:hidden';
 const INFO_CARD = 'min-h-[148px] flex-row items-start gap-6 p-6 [&_.tfds-tag.bg-white]:hidden';
 
 const CARD_VARIANT_CLASS = {
@@ -281,7 +281,7 @@ const ANIMATED_TONE_STYLE = {
 
 /* ── 信息卡片3 ── */
 const INFO3_CARD = [
-  'min-h-[148px] flex-col gap-2 rounded-lg p-4',
+  'min-h-[148px] flex-col gap-2 !rounded-lg p-4',
   'text-left',
 ].join(' ');
 const INFO3_HEADER = 'flex items-start justify-between gap-2';

package/src/_b_end_runtime/components/Card.tokens.js

@@ -34,6 +34,7 @@ export const CARD_TOKEN_MAP = {
   ],
   商品卡片: [
     { label: '布局模式', cssProp: 'prop', value: 'infoLayout: 图标在左(default) / 图标在右(icon-right)' },
+    { label: '卡片圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px，使用 rounded-lg 覆盖通用卡片 16px' },
     { label: '图片尺寸', cssProp: 'width/height', value: '56px' },
     { label: '右侧文案区高度', cssProp: 'height', value: '56px' },
     { label: '图片圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },

package/src/_b_end_runtime/components/TextArea.jsx

@@ -30,7 +30,6 @@
 import { useState, useCallback, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
 import AiSuggestionPanel, {
   AiRefreshButton,
-  AI_REFRESH_VISIBLE_CLASS,
   buildSuggestionGroupsFromFlatList,
 } from './AiSuggestionShared';
 
@@ -58,7 +57,7 @@ function getTextAreaVerticalPaddingClass(minRows) {
 
 /* ── 根容器 ── */
 const WRAPPER_BASE = [
-  'inline-flex flex-col items-start w-[var(--size-input-width,100%)] max-w-full',
+  'inline-flex flex-col items-start w-[var(--size-input-width,100%)] max-w-full gap-1',
   '[font-family:inherit]',
 ].join(' ');
 
@@ -119,7 +118,20 @@ const COUNT_ROW = 'flex w-full shrink-0 items-center justify-end px-3 pb-[6px] p
 const COUNT_TEXT_CLASS = 'text-xs leading-4 tabular-nums text-foreground-muted';
 const COUNT_TEXT_DISABLED = 'text-xs leading-4 tabular-nums text-foreground-disabled';
 const COUNT_OVERFLOW_CLASS = 'text-xs leading-4 tabular-nums text-red-500';
-const SUGGESTION_ACTION_ROW = 'flex w-full justify-end';
+const AI_REFRESH_FLOATING_WRAPPER_CLASS = [
+  'absolute top-2 right-2 z-[1] inline-flex',
+  'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',
+  'transition-opacity duration-150',
+].join(' ');
+
+const AI_REFRESH_BUTTON_CLASS = [
+  'inline-flex items-center justify-center shrink-0',
+  'h-6 w-6 rounded-md',
+  'bg-surface border border-border-default',
+  'cursor-pointer p-0',
+  'hover:border-border-strong',
+  'transition-colors duration-150',
+].join(' ');
 
 const TEXTAREA_LOCAL_FALLBACK_SUGGESTION_GROUPS = [
   ['您好，这边已根据当前对话内容整理出一版备注草稿，您可以继续补充后保存。'],
@@ -268,6 +280,7 @@ export default function TextArea({
     FIELD_BASE,
     shouldFillHeight ? FIELD_FILL_HEIGHT : '',
     disabled ? DISABLED_CLASS : STATUS_CLASS[status],
+    !disabled && isCodeVariant && status === 'default' ? '!bg-blueGrey-100' : '',
   ].filter(Boolean).join(' ');
 
   const bodyCls = [
@@ -296,6 +309,14 @@ export default function TextArea({
   return (
     <div className={[`tfds-textarea`, wrapperCls].filter(Boolean).join(' ')} data-tfds-component="TextArea">
       <div className={fieldCls}>
+        {showAiRefresh ? (
+          <div className={AI_REFRESH_FLOATING_WRAPPER_CLASS}>
+            <AiRefreshButton
+              onClick={handleRefreshAiSuggestions}
+              className={AI_REFRESH_BUTTON_CLASS}
+            />
+          </div>
+        ) : null}
         {isCodeVariant ? (
           <div className={codeRowCls}>
             <div className={codeGutterCls} aria-hidden="true">
@@ -344,11 +365,6 @@ export default function TextArea({
           </div>
         ) : null}
       </div>
-      {showAiRefresh ? (
-        <div className={SUGGESTION_ACTION_ROW}>
-          <AiRefreshButton onClick={handleRefreshAiSuggestions} className={AI_REFRESH_VISIBLE_CLASS} />
-        </div>
-      ) : null}
       {showSuggestion ? (
         <AiSuggestionPanel
           suggestions={suggestionList}

package/src/_b_end_runtime/components.js

@@ -1310,7 +1310,7 @@ export const COMPONENTS = [
     name: 'InfoDisplayPanel',
     element: 'section',
     category: 'business',
-    description: '信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。',
+    description: '信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽，且每个 tab 内容都可由业务完全自定义。',
     componentFile: './components/InfoDisplayPanel.jsx',
     tokensFile: './components/InfoDisplayPanel.tokens.js',
     props: [
@@ -1344,7 +1344,7 @@ export const COMPONENTS = [
     },
     rules: [
       FONT_WEIGHT_RUNTIME_RULE,
-      '【组件定位】InfoDisplayPanel 是“信息展示面板框架”，只负责外框、顶部 Tabs、拆分/合并、分栏调宽、内容插槽和基础间距；它不提供业务内容默认占位，不替代 Card、Table、Form、ConversationList 或客服工作台整页框架。',
+      '【组件定位】InfoDisplayPanel 是“信息展示面板框架”，只负责外框、顶部 Tabs、拆分/合并、分栏调宽、内容插槽和基础间距；它不提供业务内容默认占位，不替代 Card、Table、Form、ConversationList 或客服工作台整页框架。每个 tab 的正文区域是开放插槽，可承载任意业务自定义内容。',
       '【触发引用】当页面需要在同一工作区右侧并列查看“托管助手 / 历史工单 / 工单日志 / 信息工具 / 视频信息 / 用户信息 / 沟通记录”等多个详情面板，并且用户需要把当前关注的 tab 临时拆出来并排对照时，优先使用 InfoDisplayPanel；如果只是单块内容展示或普通 tabs 切换，不应使用该业务框架。',
       '【客服业务优先规则】只要页面触及客服业务、客服工作台、客服接待、工单处理、售后处理、订单/商品上下文核对、客服资料查看等场景，并需要展示客服工单信息、商品信息、订单信息、用户信息、客服相关信息或沟通记录等辅助信息板块，默认优先使用 InfoDisplayPanel 承载这些信息区；禁止用多个 Card、div 白卡或自制 tabs 临时拼出客服信息侧栏。',
       '【客服分类 Tabs】客服信息区涉及多个分类时，必须通过 InfoDisplayPanel 顶部 Tabs 切换分类，常见分类包括“工单信息 / 商品信息 / 订单信息 / 用户信息 / 客服信息 / 沟通记录 / 处理日志 / 风险提示”。分类名称、顺序和内容必须来自当前业务上下文；不要把这些示例硬编码成所有页面的固定 tab。',
@@ -1360,12 +1360,14 @@ export const COMPONENTS = [
       '【分栏门槛】每栏最小宽度固定 `200px`，双栏最小需求空间为 `401px`，三栏最小需求空间为 `602px`；小于 `401px` 时只能单栏，`401px-601px` 时最多双栏，`>= 602px` 时最多三栏。',
       '【拖拽调宽】组件整体宽度必须通过左外边界那 1 条手柄统一调整；当拆分为 2 栏或 3 栏后，组件内部只保留栏与栏之间的分隔线拖拽，用于调整左右相邻两栏宽度。禁止在组件最左侧再叠加第二条“第一栏宽度”手柄。所有栏位最小宽度统一为 `200px`，最大宽度不单独限制，只受外层容器可用宽度约束。',
       '【预览验收】组件预览默认撑满预览容器，并提供组件左侧边缘的整体宽度拖拽；单栏、双栏和三栏切换都应通过同一预览宽度拖拽链路验证，不再依赖固定宽度画板。',
-      '【默认内容】组件默认不渲染任何骨架屏、灰色占位卡片或示意内容；InfoDisplayPanel 只提供框架、Tabs、拆分/合并、拖拽调宽和内容插槽。业务内容必须由 `panels[].content` 或 `renderPanelContent` 注入。',
+      '【默认内容】组件默认不渲染任何骨架屏、灰色占位卡片或示意内容；InfoDisplayPanel 只提供框架、Tabs、拆分/合并、拖拽调宽和内容插槽。业务内容必须由 `panels[].content` 或 `renderPanelContent({ panel, index, activeTabId })` 注入。',
       '【内容内距】每栏内容区四周内边距固定 16px，内容块之间纵向间距固定 16px；内容区默认 `flex-col` 排列，子元素默认 `min-width: 0; width: 100%`，需要跟随当前 tab 栏宽度自动伸缩适配。每栏内容区独立滚动，内容多时只滚动当前栏，不撑高外层面板。AI 生成内容时应优先使用响应式宽度、自动换行和内部滚动，避免 `w-[固定值]`、绝对定位和固定大宽度表格。',
       '【Tabs规范】每栏顶部使用页签语义组织，统一使用基础 `Tabs variant="line" size="lg"`；Header 横向内边距为 16px，Tabs 文案之间保持基础 Tabs 的 item padding 与间距，不额外手写按钮间距。右侧动作按钮与 Tabs 区域保持 12px 间距。选中态为基础 Tabs 的 semibold + Brand 500 3px 指示线；未选中态为基础 Tabs 的 normal 字重和次级色。主栏展示未拆分 tabs 集合，拆分栏只展示各自承载的单个 tab。Tabs 只切换本栏内容，不改变页面路由。',
       '【单Tab降级】当业务只有 1 个分类时，容器不应为了形式感渲染 Tabs；运行时会用 `FormTitle variant="card"` 展示该分类标题，内容区仍按 16px 内距承载业务组件。AI 生成页面时，如果只有单个分类，应优先直接使用标题 + 内容结构，除非后续明确会扩展为多 tab。',
-      '【内容承载】每一个 tab 栏都可以承载任意业务组件元素，包括信息卡片、表单、表格片段、日志列表、图片/视频信息、实验命中详情或自定义复合组件；被承载组件必须优先使用 `w-full min-w-0` 等自适应写法，避免固定宽度导致拆分栏变窄时溢出。',
-      '【AI生成约束】AI 生成具体业务页面时，应把真实信息卡片、表单、工单日志或内容详情放进 `panels[].content` 或 `renderPanelContent`；不要手写外层分栏容器、不要用多个 Card + gap 临时拼出三栏框架，也不要依赖 InfoDisplayPanel 的默认占位内容。',
+      '【内容承载】每一个 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 聊天区指向同一处理对象；不要让信息面板内部自行维护另一套当前对象状态。',
+      '【AI生成约束】AI 生成具体业务页面时，应把真实信息卡片、表单、工单日志、ChatMessage 托管助手或内容详情放进 `panels[].content` 或 `renderPanelContent`；不要手写外层分栏容器、不要用多个 Card + gap 临时拼出三栏框架，也不要依赖 InfoDisplayPanel 的默认占位内容。',
       '【组合关系】InfoDisplayPanel 可作为 CustomerServiceWorkspaceFrame 的 mainPanel 内容；放入主白卡时宽高使用 `size-full` 或父容器约束，外层不要再套一层大白卡。',
       '【嵌入客服工作台时的语义】在客服工作台框架模版里，InfoDisplayPanel 不是独立静态侧栏，而是“当前左侧选中会话 / 工单”的辅助信息区。左侧会话列表默认选中项变化时，InfoDisplayPanel 内各 tab 的内容也必须同步切换到该当前对象对应的数据上下文，例如用户信息、历史工单、工单日志、视频信息、沟通记录都应属于同一个当前处理对象。',
       '【联动边界】客服工作台里的右侧白卡应被视为一个整体工作区：左侧 IM 对话区负责当前线程，右侧 InfoDisplayPanel 负责同一线程的辅助信息。两者由外层模板统一接收当前对象 id 并同步刷新；InfoDisplayPanel 不应自己脱离左侧上下文单独维持另一份“当前对象”。',
@@ -1377,6 +1379,37 @@ 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 = [
+  {
+    id: "assistant",
+    tabs: [{ id: "assistant", label: "托管助手" }],
+    content: <ChatMessage role="ai" taskGroups={assistantFlow} resultText={recommendedReply} />,
+  },
+  {
+    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: '动态渲染 Tab 内容', code: `<InfoDisplayPanel
+  panels={[
+    { id: "assistant", tabs: [{ id: "assistant", label: "托管助手" }] },
+    { id: "context", tabs: [{ id: "user", label: "用户信息" }, { id: "order", label: "订单信息" }] },
+  ]}
+  renderPanelContent={({ panel, activeTabId }) => {
+    if (panel.id === "assistant") return <AssistantPanel conversationId={activeConversationId} />;
+    if (activeTabId === "user") return <UserProfile userId={currentUserId} />;
+    if (activeTabId === "order") return <OrderInfo orderId={currentOrderId} />;
+    return null;
+  }}
+/>` },
       { label: '单分类自动降级为标题', code: '<InfoDisplayPanel panels={[{ id: "profile", tabs: [{ id: "profile", label: "用户信息" }], content: <UserProfile /> }]} />' },
       { label: '放入客服工作台主面板', code: '<CustomerServiceWorkspaceFrame mainPanel={<InfoDisplayPanel className="size-full" />} />' },
       { label: '❌ Bad（手搓三栏信息区）', code: '/* 禁止！缺少 200px 最小栏宽判断、主栏固定最右与 tab 拆分/合并逻辑 */\n<div className="flex gap-4"><Card /><Card /><Card /></div>' },
@@ -1996,7 +2029,7 @@ export const COMPONENTS = [
     name: 'Form',
     element: 'form',
     category: 'basic',
-    description: 'B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。',
+    description: 'B端表单组合组件，本质是字段标题 / 说明 / 错误反馈与各类表单基础组件的组合层；字段控件完整复用对应基础组件的默认能力、交互、状态、尺寸和 AI 推荐能力。',
     componentFile: './components/Form.jsx',
     tokensFile: './components/Form.tokens.js',
     props: [
@@ -2042,8 +2075,9 @@ export const COMPONENTS = [
     },
     _preview: FORM_PREVIEW,
     rules: [
-      '【组件定位】Form 是字段组合层，只管理 label、提示、错误反馈、top/left 布局和字段编排，不重新定义已有表单控件样式',
-      '【控件复用】已有基础组件必须复用：input 复用 Input，textarea 复用 TextArea（仅传基组件已有 props，默认 minRows=3、resize 纵向增高与 TextArea 一致；System Prompt / JSON / 代码参数字段必须传 variant="code"），input-number 复用 InputNumber，select 复用 Select，tag-input 复用 TagInput，checkbox 复用 CheckboxGroup，radio 复用 RadioGroup，switch 复用 Switch，date-picker 复用 DatePicker，time-picker 复用 TimePicker，slider 复用 Slider，upload 复用 Upload',
+      '【组件定位】Form 是字段组合层，本质是 `FormTitle` / 字段标题 / 提示 / 错误反馈 / top-left 布局 + 各类型表单基础组件的组合；它不重新定义已有表单控件样式、交互或能力，也不是一套新的输入控件体系。',
+      '【控件复用】已有基础组件必须复用：input 复用 Input，textarea 复用 TextArea（仅传基组件已有 props，默认 minRows=3、resize 纵向增高与 TextArea 一致；System Prompt / JSON / 代码参数字段必须传 variant="code"），input-number 复用 InputNumber，select 复用 Select，tag-input 复用 TagInput，checkbox 复用 CheckboxGroup，radio 复用 RadioGroup，switch 复用 Switch，date-picker 复用 DatePicker，time-picker 复用 TimePicker，slider 复用 Slider，upload 复用 Upload。',
+      '【能力继承】Form 中字段类型对应哪个基础组件，就完整继承该基础组件的默认能力、交互、状态、尺寸、token、禁用态、错误态、值受控方式和回调语义；Form 只负责把 label / helpText / errorText / required 等字段外壳组合起来，不允许在 Form 内把同类型控件做成与基础组件不同的行为。',
       '【布局】Form 在页面主内容区、白色卡片容器与纵向堆叠场景中默认 `w-full min-w-0 self-stretch`；labelPosition="top" 时字段容器与控件区都默认全宽，label 与控件间距 4px；labelPosition="left" 时标签列固定 96px、间距 24px、右侧控件区使用 `flex-1 min-w-0 w-full` 撑满剩余宽度',
       '【正文表单宽度铁律】页面主表单、白卡/卡片内配置表单、澄清确认卡片、抽屉/弹窗正文表单、侧栏详情表单中，Input / Select / TextArea / InputNumber / DatePicker / TimePicker / TagInput / Slider / InputGroup 这类字段型控件必须默认撑满字段内容列，且同一表单区域左右边界对齐、宽度一致。多个字段上下排列在同一卡片容器内时，每个字段都应随卡片内容区动态撑满，不受 240px / 200px / 320px 的筛选搜索宽度限制。',
       '【筛选工具条宽度例外】只有列表筛选栏、工具条、紧凑查询区、AI 首页模板搜索、Tabs 右侧搜索这类横向辅助查询入口，才允许固定中窄宽：搜索 Input 默认约 240px、最小 200px、最大 320px；Select / DatePicker / TimePicker / TagInput 等筛选控件常用 160-240px（日期时间范围可更宽）。禁止把筛选工具条固定宽套到业务表单正文。',
@@ -2051,12 +2085,18 @@ export const COMPONENTS = [
       '【紧凑/特殊控件宽度】Switch、普通 CheckboxGroup、普通 RadioGroup 的控件本体按语义保持自然宽度，但字段容器仍占满表单区域并与其它字段左边界对齐；卡片型 Radio/Checkbox 选项可按场景设置 `w-full` 形成等宽选项。Upload 字段区域占满表单区域，内部图片 tile 保持固定尺寸并自动换行，不强行拉伸 tile。',
       '【自定义控件宽度】使用 children 或 item.control 传入自定义字段时，外层必须补 `className="w-full min-w-0 max-w-full"`；否则会绕过 Form 内置的 `!w-full` 控件宽度约束，导致 Input、Select、TextArea 等宽度不一致',
       '【详情页全集预览】组件详情页的“全集”分类按字段类型从上到下单列排列，每个组件间距 40px，超出预览画布时在画布内滚动查看',
-      '【字段配置】items 数组每项支持 id、label、type、required、labelPosition、middleHelpText、helpText、error、errorText、disabled、value/defaultValue/onChange 等字段；当字段命中 AI 推荐语义时，可继续透传 aiSuggestion、aiSuggestions、onAdoptSuggestion、onRefreshAiSuggestions 到 Input / Select / TextArea',
+      '【字段配置】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 标签',
       '【标题必填】labelRequired 用于标题星号装饰；若未单独配置，仍可通过 required + requiredMark 复用现有星号逻辑',
-      '【配置联动】组件详情页切换字段类型时，左侧配置区需动态追加当前被引用基础组件自身的枚举配置，并透传到对应字段控件（textarea 与 TextArea 详情配置侧栏一致：内容、超长计数、状态、默认高度、状态、高度适配）',
+      '【配置联动】组件详情页切换字段类型时，左侧配置区需动态追加当前被引用基础组件自身的枚举配置，并透传到对应字段控件（textarea 与 TextArea 详情配置侧栏一致：内容、超长计数、状态、默认高度、状态、高度适配）；AI 推荐显隐也必须按字段类型动态出现/隐藏。',
       '【TagInput 字段】Form 中 type="tag-input" 的标签颜色固定为灰色、Tag 尺寸固定为 M，不暴露颜色或尺寸配置',
       '【反馈优先级】error=true 时展示红色图标 + 错误文案，并将可复用控件 status 设为 error；无错误时展示 helpText',
       '【未独立组件】InputGroup 尚未作为独立基础组件存在，Form 内部仅做轻量组合展示；如后续沉淀为基础组件，应替换为独立组件引用',
@@ -2069,6 +2109,9 @@ export const COMPONENTS = [
       { label: '错误反馈', code: '<Form items={[{ id: "email", label: "邮箱", type: "input", error: true, errorText: "该项目为必填项" }]} />' },
       { label: '标题附加样式', code: '<Form items={[{ id: "name", label: "字段标题", type: "input", labelOptional: true, labelAi: true, labelHelp: true }]} />' },
       { label: '选择器字段', code: '<Form items={[{ id: "city", label: "城市", type: "select", options: [{ value: "hz", label: "杭州" }] }]} />' },
+      { label: 'AI推荐 · Input字段', code: '<Form items={[{ id: "reply", label: "推荐回复", type: "input", aiSuggestions: ["您好，正在为您核实，请稍候。", "抱歉给您带来不便，这边已经帮您加急处理。"], onAdoptSuggestion: (suggestion) => console.log(suggestion), onRefreshAiSuggestions: () => {} }]} />' },
+      { label: 'AI推荐 · TextArea字段', code: '<Form items={[{ id: "remark", label: "处理备注", type: "textarea", aiSuggestions: ["建议优先整理用户诉求、处理时效和需补充的材料信息。", "如果需要后续交接，可一并记录当前判责结论和预计回访时间。"], onAdoptSuggestion: (suggestion) => console.log(suggestion), onRefreshAiSuggestions: () => {} }]} />' },
+      { label: 'AI推荐 · Select字段', code: '<Form items={[{ id: "category", label: "问题分类", type: "select", options: [{ value: "refund", label: "退款问题" }, { value: "invoice", label: "发票问题" }, { value: "account", label: "账号问题" }], aiSuggestions: ["退款问题", "账号问题"], onAdoptSuggestion: (value, option) => console.log(value, option), onRefreshAiSuggestions: () => {} }]} />' },
       { label: '全量示例', code: '<Form className="!gap-10" />' },
       { label: '❌ Bad（手搓 form + label）', code: '/* 禁止！手搓表单缺统一 label 间距、必填星号、错误反馈 */\n<form><label>姓名</label><input /></form>' },
       { label: '✅ Good（用 Form 组件）', code: '<Form items={[{ id: "name", label: "姓名", type: "input", required: true }]} />' },

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

@@ -2,6 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CustomerServiceWorkspaceFrame from '../components/CustomerServiceWorkspaceFrame';
 import ConversationList, { CONVERSATION_LIST_SAMPLE_SECTIONS } from '../components/ConversationList';
 import InfoDisplayPanel from '../components/InfoDisplayPanel';
+import ChatMessage, { useStreamingTaskGroups } from '../components/ChatMessage';
+import Button from '../components/Button';
+import Icon from '../components/Icon';
 import { getTeamMemberByName } from '../teamMembers';
 import IMConversationPattern from './IMConversationPattern';
 
@@ -251,6 +254,176 @@ function buildConversationCardPreviewMessages(messages = []) {
     }));
 }
 
+/**
+ * 客服托管助手 Mock：
+ * 完整还原一轮"用户进线 → AI 思考 → 推荐回复"的流程：
+ *   1. 顶部展示一条与左侧 IM 完全一致的用户消息气泡（取剧本中最近一条 user 消息）
+ *   2. 中部执行流（理解 → 检索 → 生成）按 600ms 节奏流式刷出
+ *   3. 末尾推荐回复文本与该用户消息之后客服在左侧实际发出的回复保持一致
+ */
+
+function buildTrustModeTaskGroups(latestUserText) {
+  const summary = (latestUserText || '').trim();
+  const truncated = summary.length > 36 ? `${summary.slice(0, 36)}…` : summary;
+  const firstStepDetail = truncated
+    ? `User_Intent_Agent /msg "${truncated}"`
+    : 'User_Intent_Agent /msg/latest';
+  return [
+    {
+      id: 'trust-understand',
+      title: '理解用户最新消息与诉求',
+      status: 'completed',
+      defaultExpanded: true,
+      steps: [
+        {
+          id: 'trust-understand-parse',
+          title: '解析用户最新消息中的核心诉求与情绪',
+          actionLabel: '正在调用意图识别 Agent',
+          actionDetail: firstStepDetail,
+          actionIconName: 'message-question-circle-stroked',
+        },
+      ],
+    },
+    {
+      id: 'trust-retrieve',
+      title: '检索规则、订单上下文与会话历史',
+      status: 'completed',
+      defaultExpanded: true,
+      steps: [
+        {
+          id: 'trust-retrieve-rules',
+          title: '匹配平台售后规则与商家补充条款',
+          actionLabel: '正在调用知识库 Agent',
+          actionDetail: 'Knowledge_Agent /policy/match',
+          actionIconName: 'line-chart-up-04-stroked',
+        },
+        {
+          id: 'trust-retrieve-context',
+          title: '汇总订单状态与近 N 轮会话上下文',
+          actionLabel: '正在调用上下文 Agent',
+          actionDetail: 'Context_Agent /thread/recent',
+          actionIconName: 'line-chart-up-04-stroked',
+        },
+      ],
+    },
+    {
+      id: 'trust-compose',
+      title: '生成推荐回复口径',
+      status: 'processing',
+      defaultExpanded: true,
+      steps: [
+        {
+          id: 'trust-compose-tone',
+          title: '校准回复语气：先安抚 → 同步处理 → 给确定方案',
+          actionLabel: '正在调用话术 Agent',
+          actionDetail: 'Tone_Agent /reply/calibrate',
+          actionIconName: 'sticker-square-stroked',
+        },
+        {
+          id: 'trust-compose-draft',
+          title: '生成可一键发送的推荐回复文本',
+          actionLabel: '正在调用生成 Agent',
+          actionDetail: 'Reply_Agent /reply/draft',
+          actionIconName: 'code-square-01-stroked',
+        },
+      ],
+    },
+  ];
+}
+
+/**
+ * 找到剧本中最近一条 user 消息，并取其后第一条 agent 回复作为"客服侧已发出的回复"
+ * （保证托管助手推荐文案与左侧 IM 客服气泡完全一致）。
+ */
+function getLatestUserTurn(messages = []) {
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    if (messages[i]?.kind === 'user') {
+      const userText = messages[i].text || '';
+      let agentReply = '';
+      for (let j = i + 1; j < messages.length; j += 1) {
+        if (messages[j]?.kind === 'agent') {
+          agentReply = messages[j].text || '';
+          break;
+        }
+      }
+      return { userText, agentReply };
+    }
+  }
+  return { userText: '', agentReply: '' };
+}
+
+const TRUST_MODE_FALLBACK_REPLY = '已读取最新一条用户消息并完成上下文检索，建议先安抚情绪、确认核心诉求，再按平台规则给出统一处理口径。';
+
+function isStreamingFinished(streamed, fullGroups) {
+  if (!Array.isArray(streamed) || !Array.isArray(fullGroups)) return false;
+  if (streamed.length !== fullGroups.length) return false;
+  const lastStreamed = streamed[streamed.length - 1];
+  const lastFull = fullGroups[fullGroups.length - 1];
+  if (!lastStreamed || !lastFull) return false;
+  return (
+    lastStreamed.status === 'completed'
+    && (lastStreamed.steps?.length ?? 0) >= (lastFull.steps?.length ?? 0)
+  );
+}
+
+function TrustModeAssistantMessage({ threadId, latestUserText, recommendedReply, onCopyToInput, onSendToUser }) {
+  const fullTaskGroups = useMemo(
+    () => buildTrustModeTaskGroups(latestUserText),
+    [latestUserText],
+  );
+  const streamed = useStreamingTaskGroups(fullTaskGroups, { intervalMs: 600 });
+  const finished = isStreamingFinished(streamed, fullTaskGroups);
+
+  return (
+    <div className="flex flex-col gap-3" key={threadId}>
+      {latestUserText ? (
+        <ChatMessage
+          role="user"
+          userBubbleTone="fill"
+          userContent={[{ type: 'text', value: latestUserText }]}
+        />
+      ) : null}
+      <ChatMessage
+        role="ai"
+        header={{ name: 'HiAI' }}
+        title=""
+        steps={null}
+        taskGroups={streamed}
+      />
+      {finished ? (
+        <ChatMessage
+          role="ai"
+          title=""
+          steps={null}
+          resultText={recommendedReply}
+        />
+      ) : null}
+      {finished ? (
+        <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" color="currentColor" aria-hidden="true" />}
+            onClick={() => onCopyToInput?.(recommendedReply)}
+          />
+          <Button
+            type="button"
+            variant="ghost-black"
+            size="sm"
+            iconOnly
+            tooltip="发送给用户"
+            icon={<Icon name="send-03-stroked" size="sm" color="currentColor" aria-hidden="true" />}
+            onClick={() => onSendToUser?.(recommendedReply)}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 function buildWorkspaceConversationSections(sections = WORKSPACE_CONVERSATION_SECTIONS) {
   return sections.map((section) => ({
     ...section,
@@ -295,6 +468,61 @@ export default function CustomerServiceWorkspaceFramePattern() {
     [activeConversationItem],
   );
   const activeMessages = WORKSPACE_THREAD_CONTENT[activeThread.id]?.messages || [];
+  const { userText: latestUserText, agentReply: scriptAgentReply } = useMemo(
+    () => getLatestUserTurn(activeMessages),
+    [activeMessages],
+  );
+  const recommendedReply = scriptAgentReply || TRUST_MODE_FALLBACK_REPLY;
+  const [composerPrefill, setComposerPrefill] = useState({ text: '', seed: 0 });
+  const [autoSendSignal, setAutoSendSignal] = useState({ text: '', seed: 0 });
+
+  /* 切换会话时清空待回填/待发送信号，避免历史信号影响新会话 */
+  useEffect(() => {
+    setComposerPrefill({ text: '', seed: 0 });
+    setAutoSendSignal({ text: '', seed: 0 });
+  }, [activeThread.id]);
+
+  const handleAssistantCopy = useCallback((text) => {
+    setComposerPrefill((prev) => ({ text: text || '', seed: prev.seed + 1 }));
+  }, []);
+  const handleAssistantSend = useCallback((text) => {
+    setAutoSendSignal((prev) => ({ text: text || '', seed: prev.seed + 1 }));
+  }, []);
+
+  const infoPanels = useMemo(
+    () => [
+      {
+        id: 'assistant',
+        tabs: [{ id: 'assistant', label: '托管助手' }],
+        content: (
+          <TrustModeAssistantMessage
+            threadId={activeThread.id}
+            latestUserText={latestUserText}
+            recommendedReply={recommendedReply}
+            onCopyToInput={handleAssistantCopy}
+            onSendToUser={handleAssistantSend}
+          />
+        ),
+      },
+      {
+        id: 'tickets',
+        tabs: [
+          { id: 'history', label: '历史工单' },
+          { id: 'logs', label: '工单日志' },
+          { id: 'tools', label: '信息工具' },
+        ],
+      },
+      {
+        id: 'info',
+        tabs: [
+          { id: 'video', label: '视频信息' },
+          { id: 'user', label: '用户命中实验' },
+          { id: 'records', label: '沟通记录' },
+        ],
+      },
+    ],
+    [activeThread.id, latestUserText, recommendedReply, handleAssistantCopy, handleAssistantSend],
+  );
 
   const handleConversationLayoutWidthRequest = useCallback((contentWidth) => {
     setSideWidth(contentWidth + PANEL_OVERLAP);
@@ -407,6 +635,8 @@ export default function CustomerServiceWorkspaceFramePattern() {
           style={{ height: '100%' }}
           thread={activeThread}
           messages={activeMessages}
+          composerPrefill={composerPrefill}
+          autoSendSignal={autoSendSignal}
         />
       </div>
       <div className={INFO_PANEL_FRAME} style={{ width: `${currentInfoPanelWidth}px` }}>
@@ -424,6 +654,7 @@ export default function CustomerServiceWorkspaceFramePattern() {
           <span className={INFO_PANEL_RESIZE_HANDLE_LINE} aria-hidden="true" />
         </button>
         <InfoDisplayPanel
+          panels={infoPanels}
           className="!h-full w-full"
           style={{ height: '100%' }}
         />

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

@@ -201,6 +201,10 @@ export default function IMConversationPattern({
   messages,
   className = '',
   style,
+  /* 外部驱动：把指定文本回填到底部输入框（不发送），由 seed 触发 */
+  composerPrefill = null,
+  /* 外部驱动：把指定文本作为人工客服消息直接发出（追加到对话），由 seed 触发 */
+  autoSendSignal = null,
 } = {}) {
   const [runtimeMessages, setRuntimeMessages] = useState([]);
   const scrollRef = useRef(null);
@@ -276,6 +280,24 @@ export default function IMConversationPattern({
     onSend?.(content, ctx);
   }, [onSend]);
 
+  /* 外部 autoSendSignal 触发：把推荐回复直接作为人工客服消息追加到对话 */
+  useEffect(() => {
+    if (!autoSendSignal || !autoSendSignal.seed) return;
+    const content = (autoSendSignal.text || '').trim();
+    if (!content) return;
+    setRuntimeMessages((prev) => [
+      ...prev,
+      {
+        id: `runtime-agent-auto-${autoSendSignal.seed}-${prev.length}`,
+        kind: 'agent',
+        text: content,
+        time: formatCurrentTimestamp(),
+      },
+    ]);
+    onSend?.(content, { source: 'trust-mode' });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoSendSignal?.seed]);
+
   return (
     <div
       className={['flex w-full min-w-0 flex-col overflow-hidden', className].filter(Boolean).join(' ')}
@@ -306,6 +328,8 @@ export default function IMConversationPattern({
             placeholder={resolvedComposerPlaceholder}
             acceptFiles={resolvedComposerVariant === 'im-basic' ? 'image/*' : '*'}
             onSend={handleSend}
+            prefillText={composerPrefill?.text || ''}
+            prefillSeed={composerPrefill?.seed || 0}
           />
         </div>
       )}

package/src/_b_end_runtime/patterns.js

@@ -59,6 +59,8 @@ export const PATTERNS = [
       '【状态同步原则】当业务接真实数据、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 手搓三栏替代。',
+      '【右侧信息 Tab 区内容定义】客服工作台右侧 InfoDisplayPanel 是“当前处理对象的辅助信息工作区”，每个 tab 都是业务内容插槽而不是固定占位。业务可在 `panels[].content` 中直接传入任意 React 内容，或通过 `renderPanelContent({ panel, index, activeTabId })` 按当前 tab 动态渲染；允许承载托管助手 ChatMessage 执行流、用户画像、订单/商品详情、历史工单、工单日志、沟通记录、风险提示、售后策略、处理工具、表单、表格片段、图文/视频信息或自定义复合组件。',
+      '【右侧信息 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。',
@@ -207,11 +209,13 @@ export default function MyPage({ defaultSelectedItemId = 'example-1' }) {
     rules: [
       '【五模板定位】本模板只用于“从 0 发起 AI 任务”的入口页：用户还没进入某个对象、会话或产物，第一步是输入一句需求、搜索助手、选择模板/案例/推荐 Agent。若用户要管理一批助手/模板/机器人列表，用 `BasePageFramePattern`；若用户已经在任务内持续追问，用 `ChatConversationPattern`；若右侧有主文档/主画布/主配置，AI 只是辅助，用 `CopilotPagePattern`；若是客服/私信线程，用 `IMConversationPattern`。',
       '【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `chat-home`：右侧主内容区是 gray-direct，不是白色 `WorkSurface`；Hero / ChatInput / Tabs / 搜索 / 模板卡网格直接坐 `var(--color-blueGrey-200)`。',
-      '【组件选型门禁】主输入必须用 `ChatInput`，不可用原生 textarea 或 Input 冒充 AI 输入；模板/助手/案例推荐必须用 `Card`；分类切换必须用 `Tabs`；搜索框用 `Input` + `Icon` 前缀；无结果用 `Empty`。禁止用 Button/Tag 排一行冒充 Tabs，禁止手写卡片。',
+      '【组件选型门禁】主输入必须用 `ChatInput`，不可用原生 textarea、Input 或 Form 字段冒充 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-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 反例扫描】同一 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` 造成只有卡片区滚动。',
       '【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义',

package/src/_b_end_runtime/preview-registry.jsx

@@ -452,6 +452,27 @@ const TEXTAREA_SINGLE_SUGGESTIONS = [
   '可先生成一版客服备注草稿，后续结合人工判断再做补充和修订。',
 ];
 
+const TEXTAREA_CODE_SINGLE_SUGGESTIONS = [
+  'export async function handleUserQuery(input) {\n  const intent = await detectIntent(input);\n  return generateReply(intent);\n}',
+  'if (user.role === "admin") {\n  return next();\n}\nreturn res.status(403).send("Forbidden");',
+  'const config = {\n  model: "tf-base-v2",\n  temperature: 0.3,\n  maxTokens: 1024,\n};',
+];
+
+const TEXTAREA_CODE_MULTI_SUGGESTION_GROUPS = [
+  [
+    'const reply = await callModel(prompt, { temperature: 0.3 });',
+    'logger.info("[chat] reply.length=", reply.length);',
+  ],
+  [
+    'try {\n  await retry(fetchKnowledge, 3);\n} catch (err) {\n  reportError(err);\n}',
+    'return formatResponse({ status: "ok", data });',
+  ],
+  [
+    '// 命中知识库后再调用大模型，避免无依据生成',
+    'const hits = await searchKnowledge(query);\nconst answer = await llm.complete({ context: hits, query });',
+  ],
+];
+
 const TEXTAREA_MULTI_SUGGESTION_GROUPS = [
   [
     '根据当前对话内容，建议先记录用户诉求、异常现象和下一步处理动作。',
@@ -482,7 +503,7 @@ function TextAreaPreview({
 }) {
   const isCodeVariant = variant === 'code';
   const sample = isCodeVariant
-    ? '# 角色\n你是抖音安全中心的小安智能助手，负责理解用户诉求并给出清晰答案。\n\n# 注意\n1. 回答前先判断是否需要调用知识库。\n2. 需要给出可执行、可验证的处理建议。'
+    ? 'import { createServer } from "node:http";\n\nconst server = createServer(async (req, res) => {\n  if (req.url === "/health") {\n    res.writeHead(200, { "Content-Type": "application/json" });\n    res.end(JSON.stringify({ status: "ok" }));\n    return;\n  }\n  res.writeHead(404);\n  res.end("Not Found");\n});\n\nserver.listen(3000, () => {\n  console.log("server listening on :3000");\n});'
     : '我们非常高兴地向您介绍我们的最新产品 HiUI。HiUI是一个创新的在线客服解决方案，旨在帮助企业更好地理解并服务他们的客户。';
   const defaultValue = fillMode === 'filled' ? sample : '';
   const enforceMaxLength = !countOverflow;
@@ -493,16 +514,18 @@ function TextAreaPreview({
   const [multiIndex, setMultiIndex] = useState(0);
   const hasSingleSuggestion = typeof aiSuggestion === 'string' && aiSuggestion.trim().length > 0;
   const hasMultiSuggestions = Array.isArray(aiSuggestions) && aiSuggestions.length > 0;
+  const singlePool = isCodeVariant ? TEXTAREA_CODE_SINGLE_SUGGESTIONS : TEXTAREA_SINGLE_SUGGESTIONS;
+  const multiPool = isCodeVariant ? TEXTAREA_CODE_MULTI_SUGGESTION_GROUPS : TEXTAREA_MULTI_SUGGESTION_GROUPS;
 
   const handleRefresh = useCallback(() => {
     if (hasMultiSuggestions) {
-      setMultiIndex((prev) => (prev + 1) % TEXTAREA_MULTI_SUGGESTION_GROUPS.length);
+      setMultiIndex((prev) => (prev + 1) % multiPool.length);
       return;
     }
     if (hasSingleSuggestion) {
-      setSingleIndex((prev) => (prev + 1) % TEXTAREA_SINGLE_SUGGESTIONS.length);
+      setSingleIndex((prev) => (prev + 1) % singlePool.length);
     }
-  }, [hasMultiSuggestions, hasSingleSuggestion]);
+  }, [hasMultiSuggestions, hasSingleSuggestion, multiPool.length, singlePool.length]);
 
   return (
     <FormControlPreviewWidth>
@@ -518,8 +541,8 @@ function TextAreaPreview({
         {...(showCountDemo ? { maxLength: 140, enforceMaxLength } : {})}
         resize={resize}
         fillHeight={fillHeight}
-        aiSuggestion={hasSingleSuggestion ? TEXTAREA_SINGLE_SUGGESTIONS[singleIndex] : undefined}
-        aiSuggestions={hasMultiSuggestions ? TEXTAREA_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
+        aiSuggestion={hasSingleSuggestion ? singlePool[singleIndex] : undefined}
+        aiSuggestions={hasMultiSuggestions ? multiPool[multiIndex] : undefined}
         onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
         className={fillHeight ? 'flex-1 min-h-0 w-full' : ''}
       />
@@ -842,11 +865,30 @@ const FORM_FIELD_ATOM_ENUM_PROPS = {
 
 const FORM_TEXTAREA_SAMPLE =
   '我们非常高兴地向您介绍我们的最新产品 HiUI。HiUI是一个创新的在线客服解决方案，旨在帮助企业更好地理解并服务他们的客户。';
+const FORM_AI_SUGGESTION_FIELD_TYPES = ['input', 'textarea', 'select'];
+const FORM_AI_SUGGESTIONS = {
+  input: ['您好，正在为您核实，请稍候。', '抱歉给您带来不便，这边已经帮您加急处理。'],
+  textarea: ['建议优先整理用户诉求、处理时效和需补充的材料信息。', '如果需要后续交接，可一并记录当前判责结论和预计回访时间。'],
+  select: ['选项 A', '选项 B'],
+};
 
 function getFormFieldAtomEnumProps(fieldType) {
   return FORM_FIELD_ATOM_ENUM_PROPS[fieldType] || [];
 }
 
+function supportsFormAiSuggestion(fieldType) {
+  return FORM_AI_SUGGESTION_FIELD_TYPES.includes(fieldType);
+}
+
+function buildFormAiSuggestionProps(fieldType, enabled) {
+  if (!enabled || !supportsFormAiSuggestion(fieldType)) return {};
+  return {
+    aiSuggestions: FORM_AI_SUGGESTIONS[fieldType],
+    onRefreshAiSuggestions: () => {},
+    onAdoptSuggestion: () => {},
+  };
+}
+
 function buildFormFieldAtomProps(fieldType, enums, controlValues = {}) {
   if (fieldType === 'radio' || fieldType === 'checkbox') {
     return {
@@ -963,6 +1005,7 @@ function FormPreview({
   labelRequired,
   labelAi,
   labelHelp,
+  formAiSuggestion,
   fieldAtomProps,
 }) {
   const baseItems = buildFormPreviewItems({
@@ -994,7 +1037,7 @@ function FormPreview({
 
   const preview = (
     <Form
-      key={`form-${previewMode}-${fieldType}-${labelPosition}-${helpMode}-${validationState}-${size}-${labelOptional}-${labelRequired}-${labelAi}-${labelHelp}-${JSON.stringify(fieldAtomProps || {})}`}
+      key={`form-${previewMode}-${fieldType}-${labelPosition}-${helpMode}-${validationState}-${size}-${labelOptional}-${labelRequired}-${labelAi}-${labelHelp}-${formAiSuggestion}-${JSON.stringify(fieldAtomProps || {})}`}
       layout="vertical"
       columns={1}
       labelPosition={labelPosition}
@@ -2737,9 +2780,18 @@ export const PREVIEW_REGISTRY = {
     component: FormPreview,
     tokenMap: FORM_TOKEN_MAP,
 
-    normalizeControlValues: ({ changedControlId, nextControlValues, prevControlValues }) => (
-      normalizeSliderPreviewControls(nextControlValues, prevControlValues, changedControlId, 'slider')
-    ),
+    normalizeControlValues: ({ changedControlId, nextControlValues, prevControlValues }) => {
+      const normalized = normalizeSliderPreviewControls(nextControlValues, prevControlValues, changedControlId, 'slider');
+      const previewMode = normalized.previewMode || 'single';
+      const fieldType = normalized.fieldType || 'input';
+      const supportsAi = previewMode === 'single' && supportsFormAiSuggestion(fieldType);
+      const formAiSuggestion = supportsAi ? (normalized.formAiSuggestion || 'off') : 'off';
+      return {
+        ...normalized,
+        formAiSuggestion,
+        labelAi: formAiSuggestion === 'on' ? true : normalized.labelAi,
+      };
+    },
 
     getPreviewAreaStyle: ({ controlValues }) => ({
       alignItems: (controlValues.previewMode || 'single') === 'all' ? 'flex-start' : 'center',
@@ -2784,6 +2836,20 @@ export const PREVIEW_REGISTRY = {
         default: 'input',
         hidden: ({ controlValues }) => (controlValues.previewMode || 'single') === 'all',
       },
+      {
+        id: 'formAiSuggestion',
+        label: 'AI推荐',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'off',
+        hidden: ({ controlValues }) => (
+          (controlValues.previewMode || 'single') === 'all'
+          || !supportsFormAiSuggestion(controlValues.fieldType || 'input')
+        ),
+      },
       {
         id: 'labelPosition',
         label: '标签位置',
@@ -2871,9 +2937,13 @@ export const PREVIEW_REGISTRY = {
       size: 'md',
       labelOptional: cv.labelOptional === true,
       labelRequired: cv.labelRequired === true,
-      labelAi: cv.labelAi === true,
+      labelAi: cv.labelAi === true || (cv.formAiSuggestion === 'on' && supportsFormAiSuggestion(cv.fieldType || 'input')),
       labelHelp: cv.labelHelp === true,
-      fieldAtomProps: buildFormFieldAtomProps(cv.fieldType || 'input', enums, cv),
+      formAiSuggestion: cv.formAiSuggestion || 'off',
+      fieldAtomProps: {
+        ...buildFormFieldAtomProps(cv.fieldType || 'input', enums, cv),
+        ...buildFormAiSuggestionProps(cv.fieldType || 'input', cv.formAiSuggestion === 'on'),
+      },
     }),
 
     generateUsage: (enums, cv) => {
@@ -2885,9 +2955,13 @@ export const PREVIEW_REGISTRY = {
       const validationState = cv.validationState || 'default';
       const labelOptional = cv.labelOptional === true;
       const labelRequired = cv.labelRequired === true;
-      const labelAi = cv.labelAi === true;
+      const labelAi = cv.labelAi === true || (cv.formAiSuggestion === 'on' && supportsFormAiSuggestion(fieldType));
       const labelHelp = cv.labelHelp === true;
-      const fieldAtomProps = buildFormFieldAtomProps(fieldType, enums, cv);
+      const showAiSuggestion = cv.formAiSuggestion === 'on' && supportsFormAiSuggestion(fieldType);
+      const fieldAtomProps = {
+        ...buildFormFieldAtomProps(fieldType, enums, cv),
+        ...buildFormAiSuggestionProps(fieldType, showAiSuggestion),
+      };
 
       if (previewMode === 'all') {
         lines.push('');
@@ -2947,6 +3021,11 @@ export const PREVIEW_REGISTRY = {
         lines.push('  onChange: (value) => {},');
         lines.push('  onAfterChange: (value) => {},');
       }
+      if (showAiSuggestion) {
+        lines.push(`  aiSuggestions: ${formatUsageLiteral(FORM_AI_SUGGESTIONS[fieldType])},`);
+        lines.push('  onRefreshAiSuggestions: () => {},');
+        lines.push('  onAdoptSuggestion: (value) => {},');
+      }
       lines.push('}];');
       lines.push('');
       lines.push('<Form');

package/src/index.d.ts

@@ -261,7 +261,7 @@ export interface ConversationListProps extends TfdsCommonProps {
 }
 export const ConversationList: React.FC<ConversationListProps>;
 
-/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。 */
+/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽，且每个 tab 内容都可由业务完全自定义。 */
 export interface InfoDisplayPanelProps extends TfdsCommonProps {
   /** array, default: null */
   panels?: unknown[];
@@ -472,7 +472,7 @@ export interface FormTitleProps extends TfdsCommonProps {
 }
 export const FormTitle: React.FC<FormTitleProps>;
 
-/** Form — B端表单组合组件，负责字段标题、说明、错误反馈与 top/left 布局；字段控件复用平台已有基础组件，覆盖 13 类表单字段。 */
+/** Form — B端表单组合组件，本质是字段标题 / 说明 / 错误反馈与各类表单基础组件的组合层；字段控件完整复用对应基础组件的默认能力、交互、状态、尺寸和 AI 推荐能力。 */
 export interface FormProps extends TfdsCommonProps {
   /** enum<vertical | grid>, default: "vertical" */
   layout?: "vertical" | "grid";