@tfdesign/b-end 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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.0，支持一键调用TFDS组件生成符合体服设计规范的UI组件与页面。"
+description: "体服B端设计系统 v1.1.2，支持一键调用TFDS组件生成符合体服设计规范的UI组件与页面。"
 disable-model-invocation: true
 metadata:
   version: "3"

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-14T14:00:01.732Z",
+  "generatedAt": "2026-05-14T17:33:55.296Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
@@ -7449,7 +7449,7 @@
       "kind": "page-pattern",
       "name": "Copilot 助手",
       "category": "page-pattern",
-      "description": "适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。",
+      "description": "适用于对象详情、产物预览、策略画布、配置编辑等“AI 对话 + 最终结果产物详情”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧白色大面板为左侧 AI 对话沉淀出的最终结果产物详情区。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "CopilotPagePattern"
@@ -7467,8 +7467,8 @@
         "tag"
       ],
       "rules": [
-        "【五模板定位】本模板只用于“对象 / 产物 / 编辑器是主角，AI 是辅助”的页面：策略画布、Prompt/配置编辑、报告预览、文档产物、批测结果、运行数据等。若页面主角是 AI 消息流，改用 `ChatConversationPattern`；若用户尚未进入上下文只是从输入框开始，改用 `ChatHomePagePattern`；若第一步是管理一批对象，改用 `BasePageFramePattern`；若是真实 IM 往返，改用 `IMConversationPattern`。",
-        "【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `copilot-workbench`：页面级 header 直接坐灰底；对象 / 产物 / 编辑器所在主工作区进入白色 WorkSurface；AI 面板只是辅助区，不改变主工作区优先级。",
+        "【五模板定位】本模板只用于“左侧 AI 对话驱动，右侧最终结果产物详情是主角”的页面：策略画布、Prompt/配置编辑、报告预览、文档产物、批测结果、运行数据等。若页面主角是 AI 消息流，改用 `ChatConversationPattern`；若用户尚未进入上下文只是从输入框开始，改用 `ChatHomePagePattern`；若第一步是管理一批对象，改用 `BasePageFramePattern`；若是真实 IM 往返，改用 `IMConversationPattern`。",
+        "【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `copilot-workbench`：页面级 header 直接坐灰底；右侧白色 WorkSurface 承载左侧 AI 对话沉淀出的最终结果产物详情；AI 面板提供追问、分析和生成入口，不改变右侧产物详情区的主工作区优先级。",
         "【组件选型门禁】页面级顶导栏动作必须用 `Button`，页面级切换用 `Tabs variant=\"pill\"` 或内容区 `Tabs variant=\"line/segment\"`；Copilot 输入用 `ChatInput`；编辑区标题用 `FormTitle`；Prompt/JSON/代码/长文本主编辑区用 `TextArea variant=\"code\" fillHeight`；数值参数用 `InputNumber`；枚举用 `Select`；布尔即时开关用 `Switch`；状态用 `Tag`。禁止手写编辑器、参数输入、状态徽标或 AI 侧栏。",
         "【整体风格】默认沿用基础页面框架：浅灰底（blueGrey-200）承载页面元信息和主工作区；内容区用纯白大卡片（12px 圆角、无浅灰描边）做区块分层；业务页面根容器贴浏览器边缘，不额外加外圈圆角或描边",
         "【⭐ 灰底裸顶导栏样板（标杆，其他页面要学）】顶导栏的所有元素（返回按钮 + 主策略名称 + 居中 Pill Tabs + 版本徽章 + 主次操作）**全部直接坐灰底**，无任何白卡背景容器，仅有 `shrink-0 px-4 py-4` 的内边距。这是 TFDS 整个设计系统中页面级 header 的标杆模式：白卡承载\"工作区内容\"，灰底承载\"页面元数据 / 切换 / 触发动作\"。⛔ 严禁把\"标题 + 操作按钮\"包成 `<div bg=surface rounded-lg>` 白卡——会让页面变成上下两张同等大小的白卡、主从混乱。无论是列表页 / 编辑器 / Playground / Dashboard，页面级 header 都要照此模式裸放灰底。详见 LAYOUT_RULES § 1.5 + SKILL.md § 3.6。",
@@ -7476,7 +7476,8 @@
         "【OLA AI按钮】渐变边框胶囊，点击切换 Copilot 展开/收起；展开时边框加深以示激活态",
         "【Copilot面板】宽 280px，固定在内容区左侧；含标题栏（新会话文字+图标按钮组）、欢迎态（头像+OLA AI标题+欢迎语+快捷建议chips）、底部 ChatInput",
         "【快捷建议 chips】白色半透明圆角卡片，右侧箭头图标，hover 加深背景",
-        "【主内容白卡】flex-1撑满，顶部二级Tab栏（灰底+border-bottom）含策略画布Tab+流程数据Switch+操作按钮",
+        "【最终结果产物详情白卡】右侧白色大面板 `flex-1` 撑满，是左侧 AI 对话沉淀出的最终结果产物详情区；顶部二级Tab栏（灰底+border-bottom）承载产物类型/视图切换，如策略画布Tab、流程数据Switch和操作按钮",
+        "【详情区顶部自定义】右侧最终结果产物详情区顶部栏里的图标、标题文案、开关、次级按钮、主按钮和图标按钮都必须跟随具体场景自定义展示；`策略画布`、`流程数据`、`流程单测`、`批量测试` 只是示例占位，不应硬编码到所有 Copilot 页面。",
         "【布局防溢出】外层 `w-full min-w-0 max-w-full` + flex-col，内容区 `flex-wrap` / `min-w-0` 保证窄屏不横向溢出；Copilot shrink-0 且宽度可收缩，白卡 `flex-1 min-w-0`；仅框架层白卡保持纯白背景、不加浅灰描边，内部组件描边保持原样"
       ],
       "code": "// 见 CopilotPagePattern.jsx",
@@ -7500,6 +7501,15 @@
         "OLA AI 触发按钮",
         "混合协作",
         "上下文结果面板",
+        "最终结果产物详情",
+        "最终产物详情区",
+        "AI 对话结果详情",
+        "左侧 AI 对话最终结果",
+        "产物详情白卡",
+        "详情区顶部自定义",
+        "产物顶部栏自定义",
+        "自定义产物标题",
+        "自定义产物操作按钮",
         "右侧/顶部 AI 协助",
         "边查看边追问",
         "左主内容右 AI",

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-14T14:00:01.732Z",
+  "generatedAt": "2026-05-14T17:33:55.296Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 47,
@@ -1728,7 +1728,7 @@
       "kind": "page-pattern",
       "name": "Copilot 助手",
       "category": "page-pattern",
-      "description": "适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。",
+      "description": "适用于对象详情、产物预览、策略画布、配置编辑等“AI 对话 + 最终结果产物详情”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧白色大面板为左侧 AI 对话沉淀出的最终结果产物详情区。",
       "import": {
         "from": "@tfdesign/b-end",
         "default": "CopilotPagePattern"
@@ -1753,13 +1753,13 @@
         "OLA AI 触发按钮",
         "混合协作",
         "上下文结果面板",
-        "右侧/顶部 AI 协助",
-        "边查看边追问",
-        "左主内容右 AI",
-        "AI 侧边栏",
-        "灰底裸顶导栏"
+        "最终结果产物详情",
+        "最终产物详情区",
+        "AI 对话结果详情",
+        "左侧 AI 对话最终结果",
+        "产物详情白卡"
       ],
-      "ruleCount": 11,
+      "ruleCount": 12,
       "exampleCount": 0,
       "hasCode": true,
       "detailRef": "components.index.json#copilot-page"

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

@@ -408,28 +408,15 @@ function TopBarLead({ copilotOpen, onToggleCopilot }) {
           variant="outline-black"
           radius="full"
           onClick={onToggleCopilot}
-          className="shrink-0 border-transparent bg-[image:var(--gradient-ai-fill-2)] p-[1.5px] hover:bg-[image:var(--gradient-ai-fill-2)] active:bg-[image:var(--gradient-ai-fill-2)] focus-visible:outline-[var(--color-brand-200)]"
+          className="shrink-0 !h-[40px] !gap-2 !border-transparent !px-4 !py-0 hover:!border-transparent active:!scale-100 focus-visible:outline-[var(--color-brand-200)]"
           style={{
+            border: '1.5px solid transparent',
+            background: 'var(--gradient-ai-fill-1) padding-box, var(--gradient-ai-fill-2) border-box',
             boxShadow: '0 0 0 1px rgba(255,255,255,0.6) inset',
           }}
         >
-          <span
-            className="inline-flex items-center gap-2 rounded-full"
-            style={{
-              height: '34px',
-              padding: '0 14px',
-              borderRadius: '999px',
-              background: 'var(--gradient-ai-fill-1)',
-              fontSize: '14px',
-              fontWeight: 600,
-              color: 'var(--foreground, #0F1C35)',
-              fontFamily: 'inherit',
-              userSelect: 'none',
-            }}
-          >
-            <img src={catcatSvg} alt="OLA AI" style={{ width: '20px', height: '20px', display: 'block' }} />
-            <span>OLA AI</span>
-          </span>
+          <img src={catcatSvg} alt="OLA AI" style={{ width: '20px', height: '20px', display: 'block' }} />
+          <span>OLA AI</span>
         </Button>
       )}
     </>

package/src/_b_end_runtime/patterns.js

@@ -306,13 +306,16 @@ export default function ChatHomePage() {
   {
     id: 'copilot-page',
     name: 'Copilot 助手',
-    description: '适用于对象详情、产物预览、策略画布、配置编辑等“主工作区 + AI 侧助”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧为主内容区。',
+    description: '适用于对象详情、产物预览、策略画布、配置编辑等“AI 对话 + 最终结果产物详情”的混合协作页。左侧 Copilot 面板可通过顶栏按钮一键展开/收起，右侧白色大面板为左侧 AI 对话沉淀出的最终结果产物详情区。',
     keywords: [
       'Copilot 页面', 'Copilot 助手', 'Copilot 协同页', 'Copilot 详情页', 'AI 协同详情页',
       '左 Copilot 右内容', '左 AI 右画布', 'AI 辅助编辑',
       '策略画布 + AI', '配置编辑 + AI', '流程画布 + Copilot', '编辑页 + AI 助手',
       '展开 Copilot', '收起 Copilot', 'OLA AI 触发按钮',
-      '混合协作', '上下文结果面板', '右侧/顶部 AI 协助',
+      '混合协作', '上下文结果面板',
+      '最终结果产物详情', '最终产物详情区', 'AI 对话结果详情', '左侧 AI 对话最终结果', '产物详情白卡',
+      '详情区顶部自定义', '产物顶部栏自定义', '自定义产物标题', '自定义产物操作按钮',
+      '右侧/顶部 AI 协助',
       // 错误信号词
       '边查看边追问', '左主内容右 AI', 'AI 侧边栏',
       // 灰底裸顶导栏（页面级 header 不包白卡）的标杆样本——其他页面要学这个模式
@@ -324,8 +327,8 @@ export default function ChatHomePage() {
     previewPadding: 0,
     components: ['button', 'tabs', 'chat-input', 'switch', 'icon', 'form-title', 'textarea', 'input-number', 'select', 'tag'],
     rules: [
-      '【五模板定位】本模板只用于“对象 / 产物 / 编辑器是主角，AI 是辅助”的页面：策略画布、Prompt/配置编辑、报告预览、文档产物、批测结果、运行数据等。若页面主角是 AI 消息流，改用 `ChatConversationPattern`；若用户尚未进入上下文只是从输入框开始，改用 `ChatHomePagePattern`；若第一步是管理一批对象，改用 `BasePageFramePattern`；若是真实 IM 往返，改用 `IMConversationPattern`。',
-      '【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `copilot-workbench`：页面级 header 直接坐灰底；对象 / 产物 / 编辑器所在主工作区进入白色 WorkSurface；AI 面板只是辅助区，不改变主工作区优先级。',
+      '【五模板定位】本模板只用于“左侧 AI 对话驱动，右侧最终结果产物详情是主角”的页面：策略画布、Prompt/配置编辑、报告预览、文档产物、批测结果、运行数据等。若页面主角是 AI 消息流，改用 `ChatConversationPattern`；若用户尚未进入上下文只是从输入框开始，改用 `ChatHomePagePattern`；若第一步是管理一批对象，改用 `BasePageFramePattern`；若是真实 IM 往返，改用 `IMConversationPattern`。',
+      '【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `copilot-workbench`：页面级 header 直接坐灰底；右侧白色 WorkSurface 承载左侧 AI 对话沉淀出的最终结果产物详情；AI 面板提供追问、分析和生成入口，不改变右侧产物详情区的主工作区优先级。',
       '【组件选型门禁】页面级顶导栏动作必须用 `Button`，页面级切换用 `Tabs variant="pill"` 或内容区 `Tabs variant="line/segment"`；Copilot 输入用 `ChatInput`；编辑区标题用 `FormTitle`；Prompt/JSON/代码/长文本主编辑区用 `TextArea variant="code" fillHeight`；数值参数用 `InputNumber`；枚举用 `Select`；布尔即时开关用 `Switch`；状态用 `Tag`。禁止手写编辑器、参数输入、状态徽标或 AI 侧栏。',
       '【整体风格】默认沿用基础页面框架：浅灰底（blueGrey-200）承载页面元信息和主工作区；内容区用纯白大卡片（12px 圆角、无浅灰描边）做区块分层；业务页面根容器贴浏览器边缘，不额外加外圈圆角或描边',
       '【⭐ 灰底裸顶导栏样板（标杆，其他页面要学）】顶导栏的所有元素（返回按钮 + 主策略名称 + 居中 Pill Tabs + 版本徽章 + 主次操作）**全部直接坐灰底**，无任何白卡背景容器，仅有 `shrink-0 px-4 py-4` 的内边距。这是 TFDS 整个设计系统中页面级 header 的标杆模式：白卡承载"工作区内容"，灰底承载"页面元数据 / 切换 / 触发动作"。⛔ 严禁把"标题 + 操作按钮"包成 `<div bg=surface rounded-lg>` 白卡——会让页面变成上下两张同等大小的白卡、主从混乱。无论是列表页 / 编辑器 / Playground / Dashboard，页面级 header 都要照此模式裸放灰底。详见 LAYOUT_RULES § 1.5 + SKILL.md § 3.6。',
@@ -333,7 +336,8 @@ export default function ChatHomePage() {
       '【OLA AI按钮】渐变边框胶囊，点击切换 Copilot 展开/收起；展开时边框加深以示激活态',
       '【Copilot面板】宽 280px，固定在内容区左侧；含标题栏（新会话文字+图标按钮组）、欢迎态（头像+OLA AI标题+欢迎语+快捷建议chips）、底部 ChatInput',
       '【快捷建议 chips】白色半透明圆角卡片，右侧箭头图标，hover 加深背景',
-      '【主内容白卡】flex-1撑满，顶部二级Tab栏（灰底+border-bottom）含策略画布Tab+流程数据Switch+操作按钮',
+      '【最终结果产物详情白卡】右侧白色大面板 `flex-1` 撑满，是左侧 AI 对话沉淀出的最终结果产物详情区；顶部二级Tab栏（灰底+border-bottom）承载产物类型/视图切换，如策略画布Tab、流程数据Switch和操作按钮',
+      '【详情区顶部自定义】右侧最终结果产物详情区顶部栏里的图标、标题文案、开关、次级按钮、主按钮和图标按钮都必须跟随具体场景自定义展示；`策略画布`、`流程数据`、`流程单测`、`批量测试` 只是示例占位，不应硬编码到所有 Copilot 页面。',
       '【布局防溢出】外层 `w-full min-w-0 max-w-full` + flex-col，内容区 `flex-wrap` / `min-w-0` 保证窄屏不横向溢出；Copilot shrink-0 且宽度可收缩，白卡 `flex-1 min-w-0`；仅框架层白卡保持纯白背景、不加浅灰描边，内部组件描边保持原样',
     ],
     code: `// 见 CopilotPagePattern.jsx`,