@tfdesign/b-end 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "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/CHECKLIST.md

@@ -19,9 +19,12 @@
 
 - `components.index.json` 里有对应组件时，已整体 import 使用。
 - 没有用 `div/span` 手搓 Tag、Button、Tabs、Card、FormTitle、ChatInput、Table。
+- 浏览器 Inspect/检查元素时，所有 TFDS 组件根节点或关键节点能看到 `.tfds-*` 专有类名或 `data-tfds-component` 标识；页面模板根节点能看到 `.tfds-page-*` 类名。若只看到普通 `div/span/button/input` + Tailwind class，说明该处可能是手搓组件，必须回到 `components.index.json` 选择对应 TFDS 组件。
+- 页面级模板使用公开 Page Pattern 时，根节点已带统一 `.tfds-page-*` 类名，例如 `.tfds-page-base-frame`、`.tfds-page-customer-service-workspace`、`.tfds-page-chat-home`、`.tfds-page-im-conversation`；不要在外层再包一层无 TFDS 标识的伪页面根容器。
 - **Tabs 尺寸默认铁律**：页面内/白卡内/面板内/表单分段/筛选维度/Playground 内的 `<Tabs />` **默认一律 SM**（省略 `size` 或显式 `size="sm"`）；只有平台顶部 header / 页面级顶导 / 产品级一级导航才允许使用 `md/lg`。
 - 涉及客服业务、客服工作台、客服接待、工单处理、售后处理、订单/商品上下文核对等场景时，客服工单信息、商品信息、订单信息、用户信息、客服信息、沟通记录、处理日志等辅助信息区已优先使用 `InfoDisplayPanel`，没有用多个 `Card` / `div` / 自制 tabs 拼接信息侧栏。
 - 客服信息区存在多个分类时，已通过 `InfoDisplayPanel` 顶部 Tabs 切换分类；只有单一分类时才降级为标题 + 内容结构。
+- 当右侧信息 tab 命中“托管助手 / 托管助理 / AI 托管 / 辅助回复 / 推荐回复 / HiAI”语义时，已默认使用客服工作台模板托管助手形态：左侧 IM 最新用户消息灰色气泡、`HiAI` 执行流、与 IM 客服回复一致的推荐文案、复制到输入框和发送给用户两个真实交互；没有写成静态 AssistantPanel 或孤立的 AI 文本。
 - 页面标题、白卡标题、面板标题、section 标题全部使用 `FormTitle`。
 - 状态、类型、风险、数量徽标优先使用 `Tag`。
 - 所有纯图标按钮必须使用 `<Button iconOnly tooltip="操作文案" />`，不论 primary / outline / ghost / text 任一变体；禁止只放 icon 让用户猜操作含义。
@@ -33,7 +36,7 @@
 ## 3. 页面范式
 
 - 页面第一屏能看出当前对象、关键状态和下一步操作。
-- 页面主 recipe 与用户第一步动作一致：对象管理走 `base-management`，从 0 发起 AI 任务走 `chat-home`，持续 AI 协作走 `chat-conversation`，对象/产物主工作区 + AI 侧助走 `copilot-workbench`，真人会话走 `im-thread`。
+- 页面主 recipe 与用户第一步动作一致：对象管理走 `base-management`，从 0 发起 AI 任务走 `chat-home`，持续 AI 协作走 `chat-conversation`，对象/产物主工作区 + AI 侧助走 `copilot-workbench`，单线程真人会话走 `im-thread`，客服在线处理工作台或左侧列表 + 中间聊天 + 右侧信息 Tabs 的三栏 IM 工作台走 `customer-service-workspace`。
 - 页面 header 直接坐灰底，没有被错误包进白卡。
 - 内容白卡只承载真实工作区：表格、列表、表单、对话、编辑器、运行结果。
 - 复杂任务使用稳定分屏，而不是纵向堆叠成长页面。
@@ -50,8 +53,9 @@
 - 表格、消息流、编辑器、产物区在自身容器内滚动。
 - Playground、会话、多面板页没有错误地整页滚动。
 - 双栏 / 三栏布局中固定侧 `shrink-0`，主内容 `flex-1 min-w-0`。
-- **横向并列大卡工作区**（如双白卡 / 左筛选 + 右主表）：辅助侧默认具备宽度拖拽（`resizable` + `minWidth` / `maxWidth` / `overflow-visible`），主卡 `flex-1 min-w-0`；对照 `LAYOUT_RULES.md` §3.2 / `McpManagementPage`。
-- 白卡距浏览器边缘约 16px；**纵向叠放**的板块（白卡 ↔ 白卡 / 白卡 ↔ Header / 白卡 ↔ KPI / 白卡 ↔ Tabs / 白卡 ↔ 筛选行）默认 16px (`gap-4`)；**横向并列**的同行多白卡分栏 / 多面板 Playground 默认 8px (`gap-2`)。
+- **横向并列大卡工作区**（如双白卡 / 左筛选 + 右主表）：辅助侧默认具备外层容器级宽度拖拽（父容器维护 `width / min / max` 和拖拽事件，外层 `overflow-visible`），主卡 `flex-1 min-w-0`；`TagBar` 自身不要写 `tone / resizable / onWidthChange`；对照 `LAYOUT_RULES.md` §3.2 / `McpManagementPage`。
+- 通用页面白卡距浏览器边缘约 16px；基础页面框架菜单入口按 `PAGE_FRAME_CONTENT_MARGIN = 16px 16px 16px 0`，页面示例3 按 `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN = 0 16px 16px 0`，NavBar 右侧不得额外加左 padding；**纵向叠放**的板块默认 16px (`gap-4`)；**横向并列**的同行多白卡分栏 / 多面板 Playground 默认 8px (`gap-2`)。
+- 客服工作台框架使用 `CustomerServiceWorkspaceFramePattern` 时，除模板自身内部间距外，外层不得再套 `main p-4`、margin wrapper、白卡或灰底 wrapper；工作台顶部、底部、右侧直接贴浏览器可视区。若左侧有菜单栏，必须是 AppShell 级 `NavBar platform="bytehi"` + 右侧工作台，NavBar 与工作台之间不得额外加 gap/padding。
 - 白卡内部 padding 使用 24px，未误用到页面外框。
 - PageMetaBar / 白卡 Header / 筛选栏 / 卡片网格已按 `LAYOUT_RECIPES.md` 对齐：左侧标题 `min-w-0 flex-1`，右侧操作 `shrink-0 flex-wrap gap-2`；筛选栏固定宽而非全宽；卡片网格使用 `auto-fit/minmax`。
 - 表单正文宽度已按 `GLOBAL_DESIGN_RULES.md` §3.1 对齐：页面主表单、白卡表单、抽屉 / 弹窗正文表单、侧栏详情表单中的 `Input` / `Select` / `TextArea` / `InputNumber` / `DatePicker` / `TimePicker` / `TagInput` 均撑满字段列，并且左右边界一致。
@@ -208,8 +212,8 @@ h-dvh + overflow-hidden                              ← 根：永不滚
 
 ## 13. 全宽撑满 / 左右大空白专项
 
-- `main` padding **只能是 `p-4`（16px）**，⛔ 禁止 `p-2` / `p-6` / `p-8` 当外框间距
+- 通用灰底页面 `main` padding 默认 `p-4`（16px）；基础页面框架 / 菜单栏入口必须使用 `PAGE_FRAME_CONTENT_MARGIN` 或 `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN`
 - ⛔ **禁止**在 `main` 内套 `<div className="max-w-* mx-auto">` 居中容器
-- 白卡 div 自身**不加 `mx-` 外边距**，靠 `flex-1` / `shrink-0 w-[Npx]` 控制宽度
+- 通用页面白卡 div 自身不加 `mx-` 外边距；基础页面框架只允许使用 `pageListShared.jsx` 共享 margin token，靠 `flex-1` / `shrink-0 w-[Npx]` 控制宽度
 - ⛔ 禁止根容器 / `main` 加 `max-w-screen-xl` / `max-w-7xl` / `max-w-[1440px]` 等收窄值
 - AI 入口页（`ChatHomePagePattern`）右侧主内容区禁止用 `bg-surface` / 白卡 wrapper 包住 Hero + ChatInput + Tabs + Card 网格；只允许模板卡自身是 `<Card color="white" />`

package/skills/tfds/GLOBAL_DESIGN_RULES.md

@@ -6,6 +6,24 @@
 
 ---
 
+## 0. TFDS Inspect 标识契约
+
+TFDS 组件不只是视觉样式，也必须在 DOM 上保留可检查的组件身份。平台 npm 生成的页面，在浏览器 DevTools / Inspect / 检查元素悬浮提示中，应能通过 `.tfds-*` 专有类名或 `data-tfds-component` 判断该区域是否真正调用了 TFDS 组件。
+
+### 0.1 组件根节点
+
+- 所有已存在的 TFDS 组件必须通过组件 import 调用，根节点应保留 `.tfds-*` 类名，例如 `.tfds-tag`、`.tfds-button`、`.tfds-input`、`.tfds-card`、`.tfds-table`、`.tfds-chat-input`。
+- 页面模板根节点必须保留 `.tfds-page-*` 类名，例如 `.tfds-page-base-frame`、`.tfds-page-customer-service-workspace`、`.tfds-page-chat-home`、`.tfds-page-im-conversation`。
+- 子结构可同时使用 `data-tfds-component="Component.Part"` 标识更细层级；自动化或人工检查时，`.tfds-*` 与 `data-tfds-component` 都是合法 TFDS 身份标识。
+
+### 0.2 禁止伪组件
+
+- 如果 `components.index.json` 中已有对应组件，禁止用裸 `div/span/button/input/textarea/select` + Tailwind class 模拟该组件；这种写法在 Inspect 中不会出现 `.tfds-*` 标识，视为没有严格执行 TFDS 组件规范。
+- 禁止仅复制颜色、圆角、字号、间距后冒充组件，例如 `<span className="rounded bg-...">标签</span>` 不能替代 `<Tag />`，`<button className="...">` 不能替代 `<Button />`。
+- 自定义区块只有在组件库确实没有覆盖时才允许使用普通 DOM；即便如此，也必须使用 TFDS token，并优先给业务根节点补充清晰的 `data-tfds-component` 或业务语义 class，方便检查来源。
+
+---
+
 ## 1. 颜色 Token
 
 ### 1.1 中性色（结构色 = blueGrey 系，11 档）
@@ -311,7 +329,9 @@ B 端主路径的**标题与密集区强调文案**默认以 **600（`--font-sem
 
 | 位置                | 值           | Tailwind          | 用法                                |
 | ----------------- | ----------- | ----------------- | --------------------------------- |
-| 灰底框架（main）→ 白卡外边缘 | **16px**    | `p-4`             | `main` 容器的 padding，白卡距浏览器边缘 16px |
+| 通用灰底页面（main）→ 白卡外边缘 | **16px**    | `p-4`             | 非基础页面框架的 `main` 容器 padding，白卡距浏览器边缘 16px |
+| 基础页面框架普通入口 → 右侧白卡 | **16 / 16 / 16 / 0** | `PAGE_FRAME_CONTENT_MARGIN` | 左侧 NavBar 与右侧白卡之间不额外加 16px 灰底空隙 |
+| 基础页面框架页面示例3 → 内容白卡 | **0 / 16 / 16 / 0** | `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN` | 顶部 Tab 已占位，不再额外加顶部和左侧间距 |
 | **横向并列**：白卡 ↔ 白卡（同行多白卡分栏 / 多面板 Playground） | **8px** | `gap-2` | 父容器 `flex-row` 时使用，仅同组协作场景 |
 | **纵向叠放**：白卡 ↔ 白卡 / 白卡 ↔ 其他板块组件（Header / Pill Tabs / 筛选行 / KPI 区 / 段落区）| **16px** | `gap-4` | 父容器 `flex-col` 时使用；上下两个独立 UI 板块默认 16px |
 | 白卡边缘 → 卡内内容       | **24px**    | `p-6`             | 写在白卡 div 内部的 padding              |
@@ -321,7 +341,7 @@ B 端主路径的**标题与密集区强调文案**默认以 **600（`--font-sem
 | 跨组件之间             | 12px        | `gap-3`           |                                   |
 
 
-⚠️ **最高频误用**：把白卡内部的 `p-6`（24px）误用到 `main` 外框 padding → 白卡距浏览器边缘变成 24px，左右出现大空白，看着像居中布局。`main` 的 padding 永远只能是 `p-4`（16px）。详见 LAYOUT_RULES §1.2。
+⚠️ **最高频误用**：把白卡内部的 `p-6`（24px）误用到通用 `main` 外框 padding → 白卡距浏览器边缘变成 24px，左右出现大空白，看着像居中布局。通用灰底页面 `main` 默认 `p-4`；基础页面框架 / 菜单栏入口必须使用 `pageListShared.jsx` 的 `PAGE_FRAME_CONTENT_MARGIN / PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN`，不要给 NavBar 右侧额外加左 padding。详见 LAYOUT_RULES §1.2。
 
 ⚠️ **AI 入口页例外**：`ChatHomePagePattern` 不套“主内容白卡”，右侧 Hero / `ChatInput` / Tabs / 搜索 / 模板卡网格直接坐 `--color-blueGrey-200` 灰底；只有模板卡片自身使用 `<Card color="white" />`。
 

package/skills/tfds/LAYOUT_RECIPES.md

@@ -30,11 +30,12 @@
 
 | Recipe id | 触发场景 | 首选模板 | 背景 / 容器 | 典型组件 | 禁止项 |
 | --- | --- | --- | --- | --- | --- |
-| `base-management` | 筛选、搜索、浏览一批结构化对象、批量操作、查看详情 | `BasePageFramePattern` + 列表示例 | `main p-4 gap-4` 灰底框架（纵向板块叠放）+ 一张或多张白色 `WorkSurface`；横向并列分栏内部用 `gap-2` | `NavBar`、`FormTitle`、`FilterBar` 组合、`Table`、`TagBar`、`Tag` | 把页面 header 包白卡；`main p-2/px-6/px-8`；`max-w-* mx-auto`；纵向板块叠放误用 `gap-2` |
+| `base-management` | 筛选、搜索、浏览一批结构化对象、批量操作、查看详情 | `BasePageFramePattern` + 列表示例 | 基础页面框架专用间距：普通入口 `PAGE_FRAME_CONTENT_MARGIN = 16px 16px 16px 0`，页面示例3 `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN = 0 16px 16px 0`；横向并列分栏内部用 `PAGE_FRAME_PANEL_GAP = 8px` | `NavBar`、`FormTitle`、`FilterBar` 组合、`Table`、`TagBar`、`Tag` | 把页面 header 包白卡；给 NavBar 右侧额外加左 padding；`main p-2/px-6/px-8`；`max-w-* mx-auto`；纵向板块叠放误用 `gap-2` |
 | `chat-home` | 用户尚未进入上下文，第一步是输入需求 / 搜索助手 / 从模板开始 | `ChatHomePagePattern` | 右侧内容区直接保持 `var(--color-blueGrey-200)`，Hero / ChatInput / Tabs / 搜索 / 卡片网格直接坐灰底 | `NavBar`、`ChatInput`、`Tabs size="sm"`、`Input`、`Card color="white"` | 整块右侧首页内容外包 `bg-surface rounded-*`；模板卡用 `color="grey"` |
 | `chat-conversation` | 已在 AI 任务里持续追问、看执行流和产物 | `ChatConversationPattern` | 浅灰会话工作区，消息流和底部输入各自固定职责 | `ChatMessage`、`ChatInput`、`Button`、产物卡 | 用 `ChatBubble` 手搓 AI 消息；让底部输入随消息滚走 |
 | `copilot-workbench` | 对象 / 产物 / 编辑器是主角，AI 只是侧助 | `CopilotPagePattern` | 页面 header 直接坐灰底，主工作区进入白色 `WorkSurface`，AI 面板按辅助区处理 | `FormTitle`、`Tabs`、`ChatInput`、`TextArea/Input/Select`、产物区 | 做成纯聊天页；AI 侧栏抢主工作区宽度；整页滚动破坏对照 |
-| `im-thread` | 真人客服、私信、站内信、履约沟通 | `IMConversationPattern` | 会话背景按 IM 语义处理，线程列表 / 消息流 / 输入固定 | `ConversationList`、`ChatBubble`、`ChatInput variant="im-basic"` | 用 `ChatMessage` 渲染普通 IM；把推荐层塞到消息流和输入框之间 |
+| `im-thread` | 真人客服、私信、站内信、履约沟通的单线程详情；不需要右侧信息区 | `IMConversationPattern` | 会话背景按 IM 语义处理，线程列表 / 消息流 / 输入固定 | `ConversationList`、`ChatBubble`、`ChatInput variant="im-basic"` | 用 `ChatMessage` 渲染普通 IM；把推荐层塞到消息流和输入框之间；把完整三栏客服 / IM 工作台误判为单线程 IM |
+| `customer-service-workspace` | 客服正在处理会话、工单、质检、托管或在线 Agent 工作流；或页面是左侧会话/工单列表 + 中间 IM 聊天 + 右侧信息 Tabs 的三栏 IM 工作台 | `CustomerServiceWorkspaceFramePattern` | 工作台框架自身贴浏览器顶部 / 底部 / 右侧；只保留模板内部 16px 节奏，不再套外层 `main p-4`；左侧可组合 `NavBar platform="bytehi"` 作为 AppShell 左栏；右侧 InfoDisplayPanel 可用 N 个信息 Tabs 兼容业务信息区 | `NavBar platform="bytehi"`、`CustomerServiceWorkspaceFramePattern`、`ConversationList`、`IMConversationPattern`、`InfoDisplayPanel`；托管助手 tab 用 `ChatMessage` 用户气泡 + `HiAI` 执行流 + 推荐回复 + 复制/发送按钮 | 外层再套 Card / bg-surface 白卡 / `main p-4` / margin wrapper；在 NavBar 与工作台之间加 gap 或 padding；把 ByteHi 菜单塞进工作台内部；新造三栏框架；托管助手与 IM 气泡文案不一致 |
 
 ---
 
@@ -59,7 +60,9 @@
 
 | 层级 | 固定值 | 写法 | 说明 |
 | --- | --- | --- | --- |
-| 灰底框架到白卡 | 16px | `main p-4` | 页面外框间距，禁止 `p-2/px-6/px-8` |
+| 通用灰底页面到白卡 | 16px | `main p-4` | 非基础页面框架的页面外框间距，禁止 `p-2/px-6/px-8` |
+| 基础页面框架普通入口到右侧白卡 | 16 / 16 / 16 / 0 | `PAGE_FRAME_CONTENT_MARGIN` | 左侧 NavBar 与右侧白卡之间不额外加 16px 灰底空隙 |
+| 基础页面框架页面示例3到内容白卡 | 0 / 16 / 16 / 0 | `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN` | 顶部 Tab 已占位，不再额外加顶部和左侧间距 |
 | 纵向叠放的上下板块 | 16px | `gap-4` | **白卡 ↔ 白卡 / 白卡 ↔ 其他板块组件**（`flex-col` 默认值）；包括左侧标签栏到右侧主内容、上方数据卡片到下方对话流列表等所有纵向并列板块 |
 | 横向并列的左右分栏 | 8px | `gap-2` | 仅用于 `flex-row` 同行多白卡分栏 / 多面板 Playground |
 | 白卡内部 padding | 24px | `p-6` 或 `px-6 py-4 + px-6 pb-6` | 只用于白卡内部 |

package/skills/tfds/LAYOUT_RULES.md

@@ -13,7 +13,7 @@
 
 生成整页时先读 `LAYOUT_RECIPES.md` 选择唯一主 recipe，再回到本文件拿骨架细节。
 
-- `LAYOUT_RECIPES.md` 回答：这是 `base-management`、`chat-home`、`chat-conversation`、`copilot-workbench` 还是 `im-thread`？外层是灰底直排还是白色工作卡？
+- `LAYOUT_RECIPES.md` 回答：这是 `base-management`、`chat-home`、`chat-conversation`、`copilot-workbench`、单线程 `im-thread`，还是三栏客服 / IM 工作台 `customer-service-workspace`？外层是灰底直排、白色工作卡，还是客服工作台整页框架？
 - 本文件回答：根容器、`main`、白卡、滚动层、双栏、多栏和响应式具体怎么写？
 - 若 AI 入口页命中 `chat-home`，不得用本文件的通用白卡工作区规则覆盖入口页的“灰底直排”规则。
 
@@ -110,15 +110,15 @@ prompt editor / prompt workspace / runtime / run result /
 | --------------------------- | -------------------------------------------- | ---------------------------------- | -------------------------------------------- |
 | NavBar 跑到页面顶部 / 与内容上下堆叠     | 把 `NavBar` 当普通内容块，根容器仍写成 `flex-col`          | §1.1 的左侧固定 app shell 骨架            | `BasePageFramePattern` + §12.6               |
 | 页面没撑满高度，出现 body 滚动 / 顶底栏被滚走 | 根容器没用 `h-dvh + overflow-hidden`；滚动层放错了       | §1 根容器骨架（根不滚，滚动下沉到内容层）             | `BasePageFramePattern` + `TabTopBarListPage` |
-| 页面左右没撑满或两侧大空白               | `max-w-`* / `mx-auto` / `px-6` 误用在 `main` 外框 | §1.2 三层间距金字塔（`main p-4` + `gap-2`） | `LAYOUT_RULES §1.2` + `McpManagementPage`    |
+| 页面左右没撑满或两侧大空白               | `max-w-`* / `mx-auto` / `px-6` 误用在内容外框；基础页面框架额外给 NavBar 右侧加了左 padding | §1.2 间距金字塔；基础页面框架专用 `PAGE_FRAME_CONTENT_MARGIN` | `LAYOUT_RULES §1.2` + `BasePageFramePattern` + `McpManagementPage`    |
 | 双栏不齐 / 左侧被压缩 / 右侧溢出         | 横向 flex 漏 `min-w-0`；固定侧没写 `shrink-0 w-[Npx]` | §3.1 / §3.2 双栏骨架                   | `McpManagementPage`                          |
 | 表格不撑满、下方空白或撑到很高             | 表格外层缺 `flex-1 min-h-0`（没给高度边界）               | §4.1 表格滚动骨架（表格层内部滚）                | `VariableManagementPage`                     |
 | 卡片内容溢出把整页撑开                 | 卡片正文层没写 `flex-1 min-h-0` 或滚动没下沉              | §3.4 / §3.5（标题固定，正文承担滚动）           | `CreateQAContent`（BasePageFramePattern 内）    |
-| 组件基线不齐（标题、筛选、表格上沿对不齐）       | 乱用 margin/padding；没有“外框/白卡/白卡内容”三层节奏         | 统一按：外框 `p-4`、白卡间 `gap-2`、白卡内 `p-6` | `pageListShared.jsx`（节奏参考）                   |
+| 组件基线不齐（标题、筛选、表格上沿对不齐）       | 乱用 margin/padding；没有“外框/白卡/白卡内容”三层节奏         | 通用页面按：外框 `p-4`、白卡间 `gap-2`、白卡内 `p-6`；基础页面框架按 `pageListShared.jsx` 专用 token | `pageListShared.jsx`（节奏参考）                   |
 | Tabs / 筛选栏 / 按钮组撑破卡片或页面 | 横向 flex 漏 `min-w-0`；Tabs 或父级被写成 `w-fit` / `min-w-max` / 固定大宽度 | Tabs 保持默认内部横向滚动；父级 `min-w-0 max-w-full overflow-hidden`；筛选和操作区允许 wrap / 更多菜单 | `Tabs` 组件规则 + `pageListShared.jsx` |
 
 
-> ⚠️ 说明：样例文件里可能存在“为了 demo 嵌入 NavBar 框架而写的局部 margin/padding”。**你在生成新页面时，不要复制这些零散 margin**；只复制“骨架关系”（`flex-1 / min-h-0 / min-w-0 / overflow-`*）与“三层间距金字塔”的层级节奏。
+> ⚠️ 说明：基础页面框架的 6 个页面示例是最高优先级样例。生成 `BasePageFramePattern` / 菜单栏入口页时，必须复制 `pageListShared.jsx` 的间距 token，而不是回退到通用 `main p-4`。
 
 ---
 
@@ -166,6 +166,8 @@ prompt editor / prompt workspace / runtime / run result /
 - ✅ `NavBar` 永远放在最左侧，并作为 `shrink-0` 固定区存在
 - ✅ 右侧主内容区必须是 `flex-1 min-w-0 flex flex-col overflow-hidden`
 - ✅ `NavBar` 属于平台壳层，不进入白卡，不进入顶部 header，不与主内容上下堆叠
+- ✅ 当右侧是 `CustomerServiceWorkspaceFramePattern` 时，工作台框架直接作为右侧 `flex-1 min-w-0 min-h-0 overflow-hidden` 主工作区，不再套 `main p-4`、白卡 wrapper、外层 margin 或额外 padding；工作台顶部、底部、右侧贴浏览器边界，仅保留框架自身内部 16px 节奏
+- ✅ 客服工作台左侧可组合 `NavBar platform="bytehi"` / ByteHi 菜单栏；该 NavBar 是 AppShell 左栏，不属于客服工作台内部插槽
 - ✅ 只有用户**明确指定**“顶部导航”或“移动端降级”时，才允许偏离左侧固定模式
 
 **标准骨架**：
@@ -183,6 +185,27 @@ prompt editor / prompt workspace / runtime / run result /
 </div>
 ```
 
+**客服工作台 + ByteHi/NavBar 骨架**：
+
+```jsx
+<div
+  className="h-dvh w-full min-w-0 flex flex-row overflow-hidden"
+  style={{ background: 'var(--color-blueGrey-200)' }}
+>
+  <NavBar platform="bytehi" className="shrink-0" />
+  <div className="flex flex-1 min-w-0 min-h-0 overflow-hidden">
+    <CustomerServiceWorkspaceFramePattern />
+  </div>
+</div>
+```
+
+⛔ **客服工作台组合禁止项**：
+
+- 不要写 `<main className="p-4"><CustomerServiceWorkspaceFramePattern /></main>`
+- 不要写 `<Card><CustomerServiceWorkspaceFramePattern /></Card>`
+- 不要在 `NavBar` 与客服工作台之间插入 `gap`、`ml-*`、`padding-left` 或灰底空隙
+- 不要再给工作台右侧、顶部、底部增加外层框架间距；这些边界应直接贴浏览器可视区
+
 ⛔ **禁止**：
 
 - `<div className="flex flex-col"><NavBar /> <main>...</main></div>`
@@ -201,12 +224,12 @@ prompt editor / prompt workspace / runtime / run result /
 >
 > **第二高频问题**：把"横向并列卡间距（8px）"误用到"上下板块叠放"上，导致 KPI 区紧贴下方列表卡、筛选行紧贴 Tabs，节奏过紧、缺少呼吸。
 
-### 三层间距金字塔（按"横向并列 / 纵向叠放"区分）
+### 三层间距金字塔（按"通用灰底页面 / 基础页面框架"区分）
 
 ```
 ┌────────────────────────────────────────────────────────────┐
 │  浏览器可视区（灰底，background: var(--color-blueGrey-200)） │
-│  ←── main wrapper: p-4（16px）—————————————————————————    │
+│  ←── 通用页面 main wrapper: p-4（16px）———————————————    │
 │  │  ┌─ 板块 A（KPI 区 / 工作区 / 列表卡）────────────────┐  │
 │  │  │  ┌──────────┐  ←─ gap-2（8px）→  ┌──────────┐  │  │
 │  │  │  │  白  卡  │  横向并列 8px      │  白  卡  │  │  │
@@ -218,14 +241,16 @@ prompt editor / prompt workspace / runtime / run result /
 │  │  │  │           白卡（p-6 卡内 24px）            │ │  │
 │  │  │  └────────────────────────────────────────────┘ │  │
 │  │  └────────────────────────────────────────────────┘  │
-│  ←── main wrapper: p-4（16px）—————————————————————————    │
+│  ←── 通用页面 main wrapper: p-4（16px）———————————————    │
 └────────────────────────────────────────────────────────────┘
 ```
 
 
 | 位置                         | 值        | Tailwind            | 含义                                     |
 | -------------------------- | -------- | ------------------- | -------------------------------------- |
-| 灰底框架 → 白卡边缘                | **16px** | `p-4` / `px-4 py-4` | main 容器的 padding，白卡距浏览器边 16px          |
+| 通用灰底页面 → 白卡边缘                | **16px** | `p-4` / `px-4 py-4` | 非基础页面框架的通用 main 容器 padding，白卡距浏览器边 16px          |
+| 基础页面框架普通入口 → 右侧白卡/工作区 | **16 / 16 / 16 / 0** | `PAGE_FRAME_CONTENT_MARGIN` | `margin/padding: 16px 16px 16px 0`，左侧 NavBar 与右侧白卡之间不额外加 16px 灰底空隙 |
+| 基础页面框架页面示例3 → 内容白卡 | **0 / 16 / 16 / 0** | `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN` | 页面示例3 顶部 Tab 已占据上方节奏，内容白卡不再额外加顶部和左侧间距 |
 | **横向并列**：白卡 ↔ 白卡（同一工作区组内）  | **8px**  | `gap-2`             | 双白卡分栏 / 多面板 Playground 横向相邻；属于"同组协作"语义 |
 | **纵向叠放**：白卡 ↔ 白卡 / 白卡 ↔ 其他板块组件（页面 header / Pill Tabs / 筛选行 / KPI 区 / 段落区）| **16px** | `gap-4`             | 上下两个独立 UI 板块默认 16px；不只对白卡，所有"块级板块"上下排列都按此节奏 |
 | 白卡边缘 → 卡内内容                | **24px** | `p-6`               | 白卡内部 padding，仅写在白卡 div 上               |
@@ -235,6 +260,7 @@ prompt editor / prompt workspace / runtime / run result /
 - `flex-row` 父容器的子项 → 同组协作 → `gap-2`
 - `flex-col` 父容器的子项（含 main、aside 子面板纵向叠放、灰底纵向板块栈）→ 跨板块呼吸 → `gap-4`
 - 唯一例外：白卡**内部**多个子区块上下排（卡内层级），按 [§3.5 / §6.x] 的 `gap-4 / gap-6` 走，本节只管"灰底框架级"间距
+- 基础页面框架菜单入口 → 直接使用 `pageListShared.jsx` 的 `PAGE_FRAME_CONTENT_MARGIN / PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN / PAGE_FRAME_PANEL_GAP`，不要自行写 `main p-4`
 
 
 ⛔ **禁止混淆（图同款误用）**：
@@ -242,17 +268,18 @@ prompt editor / prompt workspace / runtime / run result /
 
 | ❌ Bad                                                        | 后果                 | ✅ Fix                                                                             |
 | ------------------------------------------------------------ | ------------------ | --------------------------------------------------------------------------------- |
-| `<main className="... px-6 py-6">`                           | 白卡距浏览器边 24px，左右偏空  | `<main className="... p-4 gap-2">`                                                |
-| `<main className="... px-8">`                                | 白卡距浏览器边 32px，明显过宽  | `<main className="... p-4 gap-2">`                                                |
-| `<main className="... p-2">`                                 | 白卡距浏览器边 8px，外框过窄   | `<main className="... p-4 gap-2">`                                                |
+| `<main className="... px-6 py-6">`                           | 白卡距浏览器边 24px，左右偏空  | 通用页面改 `p-4 gap-2`；基础页面框架改用 `PAGE_FRAME_CONTENT_MARGIN`                                                |
+| `<main className="... px-8">`                                | 白卡距浏览器边 32px，明显过宽  | 通用页面改 `p-4 gap-2`；基础页面框架改用 `PAGE_FRAME_CONTENT_MARGIN`                                                |
+| `<main className="... p-2">`                                 | 白卡距浏览器边 8px，外框过窄   | 通用页面改 `p-4 gap-2`；基础页面框架改用 `PAGE_FRAME_CONTENT_MARGIN`                                                |
 | `<main>` 内再套 `<div className="max-w-[1440px] mx-auto px-8">` | 内容被居中收窄，左右出现大空白    | **禁止在 main 内套居中容器**，white cards 直接放 main 下                                        |
-| `<main className="... p-4">` 但白卡自身再加 `mx-4`                  | 白卡有额外 margin，不紧贴框架 | 白卡 div 上**只写 `flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden`，不加任何 margin** |
+| 基础页面框架右侧主区写 `<main className="p-4">`                  | NavBar 与右侧白卡之间多出 16px 灰底空隙 | 使用 `PAGE_FRAME_CONTENT_MARGIN = 16px 16px 16px 0` 或页面示例3的 `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN = 0 16px 16px 0` |
+| 通用页面 `<main className="... p-4">` 但白卡自身再加 `mx-4`                  | 白卡有额外 margin，不紧贴框架 | 通用页面白卡 div 不加 `mx-*`；基础页面框架只允许使用共享 margin token |
 
 
-✅ **正确骨架（必须照此写）**：
+✅ **通用灰底页面正确骨架**：
 
 ```jsx
-{/* main：p-4 撑出 16px 灰底框架；纵向叠放统一 gap-4（16px） */}
+{/* 通用页面 main：p-4 撑出 16px 灰底框架；纵向叠放统一 gap-4（16px） */}
 <main className="flex-1 min-h-0 flex flex-col p-4 gap-4 overflow-hidden w-full">
   <header className="shrink-0 ...">...</header>  {/* 页面 header，直接坐灰底；与下方板块间距 16px */}
 
@@ -273,13 +300,38 @@ prompt editor / prompt workspace / runtime / run result /
 </main>
 ```
 
+✅ **基础页面框架菜单入口正确骨架**：
+
+```jsx
+import {
+  PAGE_FRAME_CONTENT_MARGIN,
+  PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN,
+  PAGE_FRAME_PANEL_GAP,
+  WHITE_CARD_STYLE,
+} from './pageListShared';
+
+{/* 普通入口：示例0/1/2/4/5，左侧 NavBar 到右侧白卡不额外加 16px */}
+<section className="flex flex-1 min-h-0 min-w-0" style={{ margin: PAGE_FRAME_CONTENT_MARGIN }}>
+  <div className="flex flex-1 min-w-0 flex-col overflow-hidden" style={WHITE_CARD_STYLE}>
+    {/* 白卡内容，内部 padding 24px */}
+  </div>
+</section>
+
+{/* 页面示例3：顶部 Tab 已占位，内容白卡使用 0/16/16/0 */}
+<section className="flex flex-1 min-h-0 min-w-0" style={{ margin: PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN }}>
+  <div className="flex flex-1 min-w-0 overflow-hidden" style={{ ...WHITE_CARD_STYLE, gap: PAGE_FRAME_PANEL_GAP }}>
+    {/* 列表 + 详情面板 */}
+  </div>
+</section>
+```
+
 ⚠️ **宽度 + 间距自检**：在生成完整页面后，检查代码中所有 `main` / `section` / 最外层白卡 div：
 
-1. `main` 上的 padding 值**只能是 `p-4`（或 `px-4 pb-4`）**，不是 `p-2` / `p-6` / `p-8` / `px-[Npx]`
+1. 通用灰底页面 `main` padding 默认是 `p-4`（或 `px-4 pb-4`）；基础页面框架菜单入口必须使用 `PAGE_FRAME_CONTENT_MARGIN / PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN`
 2. `main` 内**不允许**再套 `max-w-*` / `mx-auto` 的居中容器
 3. **纵向叠放**（`flex-col` 父容器、main 直系子项、白卡 + KPI 区 + 筛选行 + Tab 栏 + header 上下排）→ **统一 `gap-4`（16px）**
 4. **横向并列**（`flex-row` 父容器，双白卡分栏 / 多面板 Playground 横向相邻）→ **统一 `gap-2`（8px）**
-5. 白卡自身**不加 `mx-` / `my-` 外边距**，间距统一交给父容器的 `gap-*`
+5. 通用页面白卡自身不加 `mx-* / my-*`；基础页面框架只允许使用 `pageListShared.jsx` 共享 margin token，禁止散落硬编码 margin
 6. 所有横向 `flex` 父容器补 `min-w-0`，纵向补 `min-h-0`——缺失会让某一层被内容撑开而不撑满
 
 ---
@@ -480,10 +532,10 @@ Bad / Good 对照：
 ```jsx
 const [leftCardWidth, setLeftCardWidth] = useState(260);
 
-<div className="flex-1 min-h-0 flex flex-row gap-2 p-4 min-w-0">
-  {/* 左白卡：默认支持拖拽调宽 */}
+<div className="flex-1 min-h-0 flex flex-row min-w-0" style={{ margin: PAGE_FRAME_CONTENT_MARGIN, gap: PAGE_FRAME_PANEL_GAP }}>
+  {/* 左白卡：容器级拖拽调宽；TagBar 自身透明、无拖拽把手 */}
   <aside
-    className="shrink-0 flex flex-col overflow-visible"
+    className="relative shrink-0 flex flex-col overflow-visible"
     style={{
       width: `${leftCardWidth}px`,
       background: 'var(--color-surface)',
@@ -491,14 +543,16 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
     }}
   >
     <TagBar
-      tone="transparent"
       className="!border-r-0"
-      style={{ background: 'transparent' }}
-      width={leftCardWidth}
-      onWidthChange={setLeftCardWidth}
-      minWidth={200}
-      maxWidth={360}
-      resizable
+      style={{ width: '100%', background: 'transparent' }}
+      collapsed={leftCollapsed}
+      onCollapsedChange={setLeftCollapsed}
+    />
+    <div
+      role="separator"
+      aria-label="调整标签栏白卡宽度"
+      className="absolute top-0 bottom-0 -right-[6px] z-20 w-3 cursor-col-resize"
+      onPointerDown={handleLeftCardResizePointerDown}
     />
   </aside>
 
@@ -518,8 +572,10 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 **默认规则（新铁律）**：
 
 - ✅ 只要是这种**横向并列的大卡工作区**，辅助白卡默认就要支持宽度拖拽；不要先写成固定宽死板双栏
-- ✅ 主白卡始终保持 `flex-1 min-w-0`，辅助白卡用 `width + onWidthChange + minWidth + maxWidth`
-- ✅ 拖拽把手所在卡片外层必须 `overflow-visible`，不能把把手裁掉
+- ✅ 主白卡始终保持 `flex-1 min-w-0`，辅助白卡由父容器维护 `width / min / max` 和拖拽事件
+- ✅ TagBar 自身不再提供样式配置或右侧拖拽能力：不要写 `tone`、`resizable`、`onWidthChange`；TagBar 默认透明底，背景由所属白卡容器决定
+- ✅ TagBar 底部展开/收起按钮必须保留，收起/展开语义是所属白卡容器一起收起/展开
+- ✅ 拖拽把手挂在白卡容器外层，外层必须 `overflow-visible`，不能把把手裁掉
 - ⛔ KPI 小卡、入口网格卡、列表项卡片不适用本规则；本规则只针对“主工作区级别”的大卡容器
 
 ⚠️ 左右同时存在辅助大卡时，左右都应允许在各自边界内调宽；不要默认只保留一个不可调的固定侧栏。
@@ -985,9 +1041,9 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 | 输入框被顶走            | ChatInput 滚出视口                                  | 输入框外层 `shrink-0`，不在 overflow 容器内                                                                                                               |
 | 网格挤压              | 卡片缩到不可读                                         | grid 改 `auto-fit + minmax(min(XX, 100%), 1fr)`                                                                                                 |
 | 双栏断裂              | 左栏被压成 0 宽                                       | 左栏 `shrink-0 w-[XXXpx]`，右栏 `flex-1 min-w-0`                                                                                                    |
-| **白卡左右大空白**       | 白卡与浏览器边缘间距明显大于 16px，看着像居中留白                     | ① 检查 `main` padding 只能是 `p-4`（不是 `p-2` / `px-6` / `px-8`）；② 删除 `main` 内的居中容器（`max-w-* mx-auto`）；③ 检查白卡 div 没有 `mx-`* 外边距（详见 §1.2）              |
+| **白卡左右大空白**       | 白卡与浏览器边缘间距明显大于 16px，看着像居中留白；或 NavBar 右侧多出一段灰底空隙 | ① 通用页面检查 `main` padding 默认 `p-4`（不是 `p-2` / `px-6` / `px-8`）；② 基础页面框架检查是否使用 `PAGE_FRAME_CONTENT_MARGIN / PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN`；③ 删除 `main` 内的居中容器（`max-w-* mx-auto`）；④ 通用页面白卡 div 不加 `mx-*`，基础页面框架只用共享 margin token（详见 §1.2） |
 | **内容区不撑全宽**       | 某层容器宽度跟随内容，没撑满父容器                               | 检查横向 `flex` 父容器有 `w-full` + `min-w-0`，各子项有 `flex-1 min-w-0`（弹性）或 `shrink-0 w-[Npx]`（固定），不能漏 `min-w-0`                                          |
-| 横向大卡不可调宽          | 左右大白卡都写死宽度，用户无法按工作流分配空间                         | 按 §3.2 / §3.4 / §12.2 改造：辅助大卡提供宽度拖拽，主卡保持 `flex-1 min-w-0`，并补齐 `minWidth / maxWidth / overflow-visible`                                         |
+| 横向大卡不可调宽          | 左右大白卡都写死宽度，用户无法按工作流分配空间                         | 按 §3.2 / §3.4 / §12.2 改造：辅助大卡外层容器提供宽度拖拽，主卡保持 `flex-1 min-w-0`，拖拽把手外层 `overflow-visible`；TagBar 自身不写 `resizable / onWidthChange`                                         |
 | 表格行错乱             | 表格高度无限撑开                                        | 表格父容器 `flex-1 min-h-0 overflow-auto`                                                                                                           |
 | 弹窗被裁              | 高度超出视口看不到底部                                     | 弹窗加 `max-height: 80vh + overflow-y-auto`                                                                                                       |
 | 文字溢出              | 长字符把容器撑爆                                        | 文本节点加 `truncate` 或 `break-words`，父容器加 `min-w-0`                                                                                                |
@@ -1070,19 +1126,23 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 >
   <Topbar />
 
-  <main className="flex-1 min-h-0 flex flex-row p-4 gap-2 overflow-hidden min-w-0">
-    {/* 左白卡：默认支持拖拽调宽 */}
+  <main className="flex-1 min-h-0 flex flex-row overflow-hidden min-w-0" style={{ margin: PAGE_FRAME_CONTENT_MARGIN, gap: PAGE_FRAME_PANEL_GAP }}>
+    {/* 左白卡：外层容器级拖拽调宽 */}
     <aside
-      className="shrink-0 flex flex-col overflow-visible"
+      className="relative shrink-0 flex flex-col overflow-visible"
       style={{ width: `${leftCardWidth}px`, background: 'var(--color-surface)', borderRadius: 'var(--radius-lg)' }}
     >
       <TagBar
-        tone="transparent"
-        width={leftCardWidth}
-        onWidthChange={setLeftCardWidth}
-        minWidth={200}
-        maxWidth={360}
-        resizable
+        className="!border-r-0"
+        style={{ width: '100%', background: 'transparent' }}
+        collapsed={leftCollapsed}
+        onCollapsedChange={setLeftCollapsed}
+      />
+      <div
+        role="separator"
+        aria-label="调整标签栏白卡宽度"
+        className="absolute top-0 bottom-0 -right-[6px] z-20 w-3 cursor-col-resize"
+        onPointerDown={handleLeftCardResizePointerDown}
       />
     </aside>
 

package/skills/tfds/PAGE_ARCHETYPES.md

@@ -29,6 +29,7 @@
 | 用户尚未进入具体上下文，第一步是输入一句需求、搜索助手、从模板 / 案例开始 | `ChatHomePagePattern` | `chat-home` | `NavBar`、`ChatInput`、`Tabs`、`Card`、`Input`、`Icon`；右侧主区保持浅灰底，模板卡用白底 Card | 不要做成“标题 + 筛选 + 表格”的白卡管理页；不要在右侧内容区外包一整张白色大卡 |
 | 用户已在一个 AI 任务 / 会话里，第一步是继续追问、看执行进度、看 AI 消息流 | `ChatConversationPattern` | `chat-conversation` | `ChatMessage`、`ChatInput`、`Button`、`Icon` | 不要用 `ChatBubble` 手搓 AI 回复，也不要把消息流塞进表格 / 白卡列表 |
 | 用户正在编辑 / 查看一个对象或产物，同时需要 AI 辅助分析、改写、解释、侧边追问 | `CopilotPagePattern` | `copilot-workbench` | `Button`、`Tabs`、`ChatInput`、`Switch`、`Icon`，编辑区按内容补 `FormTitle/TextArea/InputNumber/Select` | 不要选纯 `ChatConversationPattern`，因为主角不是消息流，而是右侧对象 / 产物 / 画布 |
+| 用户正在客服工作台 / IM 工作台处理会话，页面是三栏结构：左侧会话/工单列表，中间沟通聊天区，右侧信息区或 N 个信息 Tabs（托管助手、历史工单、工单日志等） | `CustomerServiceWorkspaceFramePattern` | `customer-service-workspace` | `ConversationList`、`IMConversationPattern`、`InfoDisplayPanel`、`ChatBubble`、`ChatInput variant="im-basic"`；托管助手 tab 用 `ChatMessage` 执行流 | 不要新造三栏框架；不要只用 `IMConversationPattern + ConversationList` 拼装；不要用 Card / div 手搓右侧信息 Tabs |
 | 用户处理真实人际消息、客服接待、私信、站内信、履约沟通，第一步是查看历史消息并回复 | `IMConversationPattern`，多线程时外层组合 `ConversationList` | `im-thread` | `ChatBubble`、`ChatInput variant="im-basic"`，多线程加 `ConversationList` | 不要用 `ChatMessage` 渲染普通 IM 气泡；不要把普通客服会话误判为 AI 对话页 |
 | 无权限、建设中、无数据 | `BasePageFramePattern` 的 NoAccess / Construction 子示例或 `Empty` | 跟随承载页面，通常 `base-management` | `Empty`、`Button` | 不要新造插画、空状态卡片或手写状态徽标 |
 
@@ -36,11 +37,12 @@
 
 当用户描述同时命中多个模板时，按下面顺序裁决，裁决依据是“用户进入页面后的第一步动作”和“页面主角”，不是页面里出现了哪个组件名。
 
-1. **普通 IM / 客服沟通优先判 `IMConversationPattern`**：只要主线是人与人 / 人与客服 / 用户与机器人按时间线往返，且业务目标是继续回复当前线程，就用 IM；AI 只作为机器人角色存在时也仍是 IM。
-2. **AI 消息流优先判 `ChatConversationPattern`**：如果主线是一条 AI 任务会话，用户要追问、确认任务规划、看流式执行、查看 AI 产物卡，就用 AI 对话页。
-3. **对象编辑 + AI 侧助优先判 `CopilotPagePattern`**：如果右侧对象、文档、策略画布、报告预览是主工作区，AI 只是辅助解释 / 改写 / 追问，就用 Copilot。
-4. **从 0 开始发起任务优先判 `ChatHomePagePattern`**：如果用户还没选对象、没进入会话，只是要搜索助手、输入需求、从模板开始，就用 AI 入口页。
-5. **结构化对象管理默认判 `BasePageFramePattern`**：只要第一步是筛选、浏览、批量处理一批对象，就回到白卡管理页，不因为“AI 变量 / 智能策略 / 机器人列表”等名词改变模板。
+1. **客服 / IM 三栏工作台优先判 `CustomerServiceWorkspaceFramePattern`**：只要出现“客服工作台 / IM 工作台 / 三栏 IM / 左侧 IM 列表 / 会话列表 + 沟通聊天区 + 信息区 / 托管助手 / 历史工单 / 工单日志 / 右侧信息 Tabs”等结构信号，先判断客服工作台框架是否兼容。若页面主结构是左侧多会话队列、中间 IM 聊天、右侧信息区，就不要新造框架。
+2. **普通单线程 IM 优先判 `IMConversationPattern`**：只有当前页面主角是单个线程的历史消息与回复，且不需要左侧多会话队列和右侧信息区时，才用 IM。
+3. **AI 消息流优先判 `ChatConversationPattern`**：如果主线是一条 AI 任务会话，用户要追问、确认任务规划、看流式执行、查看 AI 产物卡，就用 AI 对话页。
+4. **对象编辑 + AI 侧助优先判 `CopilotPagePattern`**：如果右侧对象、文档、策略画布、报告预览是主工作区，AI 只是辅助解释 / 改写 / 追问，就用 Copilot。
+5. **从 0 开始发起任务优先判 `ChatHomePagePattern`**：如果用户还没选对象、没进入会话，只是要搜索助手、输入需求、从模板开始，就用 AI 入口页。
+6. **结构化对象管理默认判 `BasePageFramePattern`**：只要第一步是筛选、浏览、批量处理一批对象，就回到白卡管理页，不因为“AI 变量 / 智能策略 / 机器人列表”等名词改变模板。
 
 ### 0.2 模板到组件的生成矩阵
 
@@ -50,6 +52,7 @@
 | `ChatHomePagePattern` | 主入口必须是 `ChatInput`；模板 / 助手推荐用 `Card`；分类切换用 `Tabs`；搜索只用 `Input`；卡片网格用 `auto-fit/minmax` | 把入口页改成白卡筛选表格、用普通 `<textarea>` 当 AI 输入框、固定 3 列导致窄屏溢出 |
 | `ChatConversationPattern` | 每条消息统一用 `ChatMessage`；用户消息走 `role="user"`；AI 消息走 `header` + `thinking/plan/taskGroups/resultArtifacts/followUps`；底部吸底 `ChatInput` | 用 `ChatBubble` 或裸 div 模拟 AI 消息、把执行流拆成多张随机卡片、输入框随消息滚走 |
 | `CopilotPagePattern` | 页面级 header 直接坐灰底；主内容白卡是主角；AI 面板用 `ChatInput`；对象编辑区按字段语义使用 `TextArea/InputNumber/Select/Switch/Tabs`；长编辑器必须内部滚动 | 把 header 包白卡、让 AI 侧栏抢主内容宽度、把对象编辑页做成纯聊天页 |
+| `CustomerServiceWorkspaceFramePattern` | 整页框架承载左侧 `ConversationList`、中间 `IMConversationPattern`、右侧 `InfoDisplayPanel`；托管助手 tab 默认用模板内置 `ChatMessage role="user"` + `HiAI` 执行流 + 推荐回复 + 复制/发送交互，并映射当前 IM 线程文案 | 新造三栏 AppShell、用多个 Card 手搓信息区、托管助手只写静态 AssistantPanel、让信息区与 IM 当前线程上下文错位 |
 | `IMConversationPattern` | 当前线程消息用 `ChatBubble`；普通回复输入用 `ChatInput variant="im-basic"`；多线程列表用 `ConversationList`；系统事件用居中弱化文字 | 用 `ChatMessage` 做普通客服气泡、在消息区和输入框之间插入额外推荐层、横向滚动查看气泡 |
 
 ### 0.3 选型后立即读取 Recipe
@@ -60,6 +63,7 @@
 - `ChatHomePagePattern` → `chat-home`
 - `ChatConversationPattern` → `chat-conversation`
 - `CopilotPagePattern` → `copilot-workbench`
+- `CustomerServiceWorkspaceFramePattern` → `customer-service-workspace`
 - `IMConversationPattern` → `im-thread`
 
 ⛔ 禁止只凭“白卡承载工作内容”这句通用原则生成整页。页面级 header、AI 入口页、会话输入区、产物预览区分别有不同容器语义，必须由 recipe 决定。

package/skills/tfds/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: tfds
-description: "体服B端设计系统 v1.1.4，支持一键调用TFDS组件生成符合体服设计规范的UI组件与页面。"
+description: "体服B端设计系统 v1.1.6，支持一键调用TFDS组件生成符合体服设计规范的UI组件与页面。"
 disable-model-invocation: true
 metadata:
   version: "3"
@@ -49,6 +49,7 @@ metadata:
 1. ✅ **优先调用私有组件，整体复用**
    组件索引里有对应组件 → **必须**直接 `import` 整体使用 + 通过 props 配置；
    ⛔ **禁止**"参考样式自己手搓相似组件"；⛔ **禁止**仅改颜色/字号等样式片段后冒充组件（如把 `<Tag />` 写成 `<span className="rounded bg-… text-…">`）。
+   **Inspect 标识契约**：通过平台组件生成的 DOM，在浏览器检查元素时必须能看到 `.tfds-*` 专有类名或 `data-tfds-component` 标识。若某个区域本应使用 `Tag/Button/Input/Card/Table/FormTitle/ChatInput` 等现有组件，却在 Inspect 中只看到普通 `div/span/button/input` 和 Tailwind 样式，视为没有严格执行 TFDS 组件规范，必须改为 import 对应 TFDS 组件。
    **标题是最高频组件，不是排版细节**：任何页面标题、白卡标题、面板标题、卡片左上角标题、section 标题、workspace 标题、Conversation/Settings/Result 标题，必须先 `import { FormTitle } from '@tfdesign/b-end'` 并用 `<FormTitle />`；⛔ 禁止手写 `h2/h3/span + 自绘竖条`。
 2. ✅ **私有未覆盖时走通用规范**
    组件索引找不到对应模块 → **必须**按 `LAYOUT_RULES.md` + `GLOBAL_DESIGN_RULES.md` 用现有 token 拼装出新模块，**不**回退到"裸 div + 自定义样式"。
@@ -106,7 +107,8 @@ metadata:
    - **围绕 AI 任务持续协作** → `ChatConversationPattern`（消息流必须用 `ChatMessage`）
    - **对象编辑 / 产物查看 + AI 侧助** → `CopilotPagePattern`
    - **真实 IM / 客服 / 私信线程** → `IMConversationPattern`（`ChatBubble` + `ChatInput variant="im-basic"`）
-   - **客服多模块工作台框架** → `CustomerServiceWorkspaceFramePattern`（`activeConversationId` 单一事实源，左右联动）
+   - **客服多模块工作台框架 / IM 三栏工作台** → `CustomerServiceWorkspaceFramePattern`（`activeConversationId` 单一事实源，左右联动；框架自身贴浏览器顶部/底部/右侧，外层不得再加 padding/margin；左侧可组合 `NavBar platform="bytehi"`）
+   - **客服工作台选型门禁**：当 prompt 命中“客服工作台 / IM 工作台 / 三栏 IM / 左侧 IM 列表 / 会话列表 + 沟通聊天区 + 信息区 / 右侧信息 Tabs / 托管助手 / 历史工单 / 工单日志”等结构信号时，优先判断 `CustomerServiceWorkspaceFramePattern` 是否兼容；只有单线程详情且无右侧信息区时才使用单独 `IMConversationPattern`
    - **页面模板示例**：`StrategyListPage` / `VariableManagementPage` / `McpManagementPage`（双白卡 + 横向拖拽标杆）/ `TabTopBarListPage`；无权限 / 建设中先用 `Empty + Card + Button` 按通用规范组合，除非 `components.index.json` 明确导出对应模板
 3. **有组件不手搓**：
    - 顶/侧导 → `NavBar`（命中即一级骨架切到 `flex-row` app shell，⛔ 禁止纵向堆叠）；列表 → `Table`；表单 → `Input/Select/Button`；对话 → `ChatInput/ChatMessage`
@@ -126,12 +128,14 @@ metadata:
 8. **整页高度与滚动 / 多栏 / IM 骨架**（详见 `LAYOUT_RULES.md`）：
    - 根容器默认 `h-dvh + overflow-hidden + flex flex-col + w-full min-w-0`
    - **NavBar 命中**：一级骨架切到 `flex-row`，左侧 `shrink-0`，右侧 `flex-1 min-w-0 flex flex-col overflow-hidden`
+   - **客服工作台 + NavBar**：左侧可放 ByteHi/NavBar 菜单栏，右侧直接放 `CustomerServiceWorkspaceFramePattern`，不要再套 `main p-4`、白卡 wrapper 或额外 margin；工作台顶部/底部/右侧就是浏览器边界
+   - **托管助手 Tab**：客服工作台右侧 `InfoDisplayPanel` 中只要出现“托管助手 / 托管助理 / AI 托管 / 辅助回复 / 推荐回复 / HiAI”语义，默认复用模板内置形态：左侧 IM 最新用户消息 → `HiAI` 执行流 → 与 IM 客服回复一致的推荐文案 → 复制到输入框 / 发送给用户两个真实交互；禁止写静态 AssistantPanel 或与 IM 文案不一致的 mock
    - 内容区 `flex-1 min-h-0 overflow-y-auto`；底部 `shrink-0` 吸底
-   - 双栏：辅助大卡默认支持宽度拖拽（`width + onWidthChange + minWidth + maxWidth + resizable`）；主卡 `flex-1 min-w-0`
+   - 双栏：辅助大卡默认支持**外层容器级**宽度拖拽（父容器维护 `width / min / max` 和拖拽事件）；主卡 `flex-1 min-w-0`；`TagBar` 自身不要写 `tone / resizable / onWidthChange`
    - 多栏卡片用 `grid auto-fit + minmax(min(Npx, 100%), 1fr)`，⛔ 禁止固定 `grid-cols-N`
    - 表格容器 `flex-1 min-h-0 overflow-auto`
    - **滚动模型**：命中 Playground / 调试 / IDE / 多面板 / Prompt Editor / A-B 对比 → 整页绝不滚（详见 [CHECKLIST.md §11](./CHECKLIST.md)）；仅 Dashboard / 入口聚合首页 / KPI 看板才允许整页滚
-   - **全宽撑满铁律**：`main` padding 只能 `p-4`；⛔ 禁止 `max-w-* mx-auto` 居中容器；⛔ 禁止 `max-w-screen-xl` / `max-w-7xl` 收窄值（详见 [CHECKLIST.md §13](./CHECKLIST.md)）
+   - **全宽撑满铁律**：通用灰底页面 `main` padding 默认 `p-4`；基础页面框架 / 菜单栏入口必须使用 `pageListShared.jsx` 的 `PAGE_FRAME_CONTENT_MARGIN = 16px 16px 16px 0`，页面示例3 使用 `PAGE_FRAME_CONTENT_WITH_TOPBAR_MARGIN = 0 16px 16px 0`；⛔ 禁止给 NavBar 右侧额外加左 padding；⛔ 禁止 `max-w-* mx-auto` 居中容器；⛔ 禁止 `max-w-screen-xl` / `max-w-7xl` 收窄值（详见 [CHECKLIST.md §13](./CHECKLIST.md)）
 9. **Card 颜色映射**：父容器灰底 → `Card color="white"`；父容器白底 → `Card color="grey"`（避免白叠白）。
 10. **可运行交付**：输出完整 JSX 与文件路径级改动说明，保证 `npm run dev` 直接看到结果。