@tfdesign/b-end 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.1.5",
+  "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,6 +19,8 @@
 
 - `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 切换分类；只有单一分类时才降级为标题 + 内容结构。

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 档）

package/skills/tfds/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: tfds
-description: "体服B端设计系统 v1.1.5，支持一键调用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 + 自定义样式"。

package/skills/tfds/components.index.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-17T06:08:53.310Z",
+  "generatedAt": "2026-05-17T08:20:48.347Z",
   "summary": "B 端 COMPONENTS 37 条 + 列表页模板 4 + PATTERNS 6；import 一律来自 @tfdesign/b-end。",
   "components": [
     {
@@ -7058,7 +7058,8 @@
         "【面板样式·白底】bg=\"white\" 时，步骤面板/表单分组应表现为“轻面板”：推荐 transparent 或 surface 底色 + border border-default + rounded-xl；重点是保持页面整体一体化，不要在白底里再堆叠大面积白卡",
         "【面板样式·灰底】bg=\"grey\" 时，步骤面板/表单分组应表现为“白卡面板”：必须使用 bg-white + rounded-xl + 合理内边距（通常 p-6）；通过灰底页面与白卡面板的对比拉开层次，避免灰底上直接裸露复杂表单内容",
         "【覆盖范围】使用 absolute inset-0，须挂在 relative 定位的父级容器内；会完全覆盖包括侧边导航在内的所有区域，用户进入后只能通过顶栏返回按钮退出",
-        "【顶栏结构】左：返回箭头（传 onBack 才渲染）+ 标题（16px/600）；右：headerActions 插槽，按钮组从左到右权重递增，最右侧放主操作（如\"发布\"用 primary，\"保存草稿\"用 outline-black）",
+        "【顶栏结构】左：返回箭头（传 onBack 才渲染）+ 标题（16px/600）；右：headerActions 插槽，按钮组从左到右权重递增，最右侧放主操作（如\"发布\"用 primary，\"保存草稿\"用 outline-black）。顶栏左右内距固定 16px，必须与下方内容板块的左右外边界对齐，不允许顶栏使用 24px 而内容区使用 16px 导致错位。",
+        "【页面间距】FullScreenPage 的页面级四周间距统一为 16px：header 顶部/左右/底部内距固定 16px，内容区左右/底部外距固定 16px。header 到下方板块顶部的可见距离只能是 16px，因此 children 外层内容容器默认写 `px-4 pb-4 pt-0 h-full`，不要再给内容区加 `pt-4 / p-4 / p-6 / px-6 / pt-6`，否则会与 header 底部 16px 叠加成 32px。",
         "【灰底模式注意】bg=\"grey\" 时页面背景为浅灰，内容区块必须在 children 内自行包白色卡片（rounded-xl + bg-white + p-6），组件本身不自动生成卡片",
         "【切换原则】不要只把背景色从 white 改成 grey 却沿用同一套面板样式；背景模式切换时，内部面板样式也必须同步切换为“白底描边面板”或“灰底白卡面板”这两套规范之一",
         "【禁忌】不要在 FullScreenPage 内再弹 FullScreenPage（层级混乱）；不要把 FullScreenPage 当普通路由页面用（它的定位是覆盖在现有页面之上的操作层，不是新页面）"
@@ -7066,11 +7067,11 @@
       "examples": [
         {
           "label": "白底创建页（描边面板）",
-          "code": "<FullScreenPage title=\"创建QA对\" onBack={() => handleBack()} headerActions={<><Button variant=\"outline-black\">保存草稿</Button><Button variant=\"primary\">发布</Button></>}><div className=\"flex gap-4 p-6 h-full\"><section className=\"flex-1 rounded-xl border border-default p-6\">基础信息面板</section><aside className=\"w-60 rounded-xl border border-default p-6\">辅助配置面板</aside></div></FullScreenPage>"
+          "code": "<FullScreenPage title=\"创建QA对\" onBack={() => handleBack()} headerActions={<><Button variant=\"outline-black\">保存草稿</Button><Button variant=\"primary\">发布</Button></>}><div className=\"flex gap-4 px-4 pb-4 pt-0 h-full\"><section className=\"flex-1 rounded-xl border border-default p-6\">基础信息面板</section><aside className=\"w-60 rounded-xl border border-default p-6\">辅助配置面板</aside></div></FullScreenPage>"
         },
         {
           "label": "灰底编辑页（白卡面板）",
-          "code": "<FullScreenPage bg=\"grey\" title=\"编辑策略\" onBack={() => handleBack()} headerActions={<Button variant=\"primary\">保存</Button>}><div className=\"flex gap-4 p-6 h-full\"><section className=\"flex-1 rounded-xl bg-white p-6\">主编辑面板</section><aside className=\"w-60 rounded-xl bg-white p-6\">配置侧栏面板</aside></div></FullScreenPage>"
+          "code": "<FullScreenPage bg=\"grey\" title=\"编辑策略\" onBack={() => handleBack()} headerActions={<Button variant=\"primary\">保存</Button>}><div className=\"flex gap-4 px-4 pb-4 pt-0 h-full\"><section className=\"flex-1 rounded-xl bg-white p-6\">主编辑面板</section><aside className=\"w-60 rounded-xl bg-white p-6\">配置侧栏面板</aside></div></FullScreenPage>"
         },
         {
           "label": "❌ Bad（用 Modal fullscreen 当沉浸式编辑器）",

package/skills/tfds/components.summary.json

@@ -1,7 +1,7 @@
 {
   "system": "b-end",
   "skill": "tfds",
-  "generatedAt": "2026-05-17T06:08:53.310Z",
+  "generatedAt": "2026-05-17T08:20:48.347Z",
   "purpose": "轻量组件与页面模板目录。AI 先读本文件做选型；确定命中组件后，再到 components.index.json 按 id 读取 props / rules / examples。",
   "counts": {
     "total": 47,
@@ -1482,7 +1482,7 @@
         "详情编辑",
         "多区块编辑"
       ],
-      "ruleCount": 14,
+      "ruleCount": 15,
       "exampleCount": 4,
       "hasCode": false,
       "detailRef": "components.index.json#full-screen-page"

package/src/_b_end_runtime/components/FullScreenPage.jsx

@@ -35,10 +35,10 @@ const BG_CLASS = {
   grey: 'bg-blueGrey-200',
 };
 
-/* ── 顶栏：透明背景，无分割线，左右 24px / 上下 16px ── */
+/* ── 顶栏：透明背景，无分割线，左右/上下均使用页面四周间距 16px ── */
 const HEADER = [
   'flex shrink-0 items-center justify-between gap-3',
-  'px-6 py-4',
+  'px-4 py-4',
 ].join(' ');
 
 /* ── 顶栏标题 ── */

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

@@ -1,8 +1,9 @@
 export const FULL_SCREEN_PAGE_TOKEN_MAP = {
   顶栏: [
     { label: '背景色', cssProp: 'background', value: 'transparent' },
-    { label: '高度', cssProp: 'height', value: '56px' },
-    { label: '横向内距', cssProp: 'padding-inline', value: '16px' },
+    { label: '横向内距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+    { label: '纵向内距', cssProp: 'padding-block', token: '--spacing-4', value: '16px' },
+    { label: '与内容区左右对齐', cssProp: 'alignment', value: '对齐内容区四周外距' },
   ],
   标题: [
     { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230' },
@@ -12,6 +13,9 @@ export const FULL_SCREEN_PAGE_TOKEN_MAP = {
   内容区: [
     { label: '白底背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
     { label: '灰底背景', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'bg=grey' },
+    { label: '内容左右/底部外距', cssProp: 'padding-inline + padding-bottom', token: '--spacing-4', value: '16px' },
+    { label: '内容顶部外距', cssProp: 'padding-top', value: '0px', description: '避免与顶栏底部 16px 叠加成 32px' },
+    { label: '顶栏到板块间距', cssProp: 'visual-gap', token: '--spacing-4', value: '16px' },
   ],
   引用组件: [
     { label: '返回按钮', cssProp: '—', value: 'Button ghost-black sm iconOnly' },

package/src/_b_end_runtime/components.js

@@ -3744,14 +3744,15 @@ const infoPanels = [
       '【面板样式·白底】bg="white" 时，步骤面板/表单分组应表现为“轻面板”：推荐 transparent 或 surface 底色 + border border-default + rounded-xl；重点是保持页面整体一体化，不要在白底里再堆叠大面积白卡',
       '【面板样式·灰底】bg="grey" 时，步骤面板/表单分组应表现为“白卡面板”：必须使用 bg-white + rounded-xl + 合理内边距（通常 p-6）；通过灰底页面与白卡面板的对比拉开层次，避免灰底上直接裸露复杂表单内容',
       '【覆盖范围】使用 absolute inset-0，须挂在 relative 定位的父级容器内；会完全覆盖包括侧边导航在内的所有区域，用户进入后只能通过顶栏返回按钮退出',
-      '【顶栏结构】左：返回箭头（传 onBack 才渲染）+ 标题（16px/600）；右：headerActions 插槽，按钮组从左到右权重递增，最右侧放主操作（如"发布"用 primary，"保存草稿"用 outline-black）',
+      '【顶栏结构】左：返回箭头（传 onBack 才渲染）+ 标题（16px/600）；右：headerActions 插槽，按钮组从左到右权重递增，最右侧放主操作（如"发布"用 primary，"保存草稿"用 outline-black）。顶栏左右内距固定 16px，必须与下方内容板块的左右外边界对齐，不允许顶栏使用 24px 而内容区使用 16px 导致错位。',
+      '【页面间距】FullScreenPage 的页面级四周间距统一为 16px：header 顶部/左右/底部内距固定 16px，内容区左右/底部外距固定 16px。header 到下方板块顶部的可见距离只能是 16px，因此 children 外层内容容器默认写 `px-4 pb-4 pt-0 h-full`，不要再给内容区加 `pt-4 / p-4 / p-6 / px-6 / pt-6`，否则会与 header 底部 16px 叠加成 32px。',
       '【灰底模式注意】bg="grey" 时页面背景为浅灰，内容区块必须在 children 内自行包白色卡片（rounded-xl + bg-white + p-6），组件本身不自动生成卡片',
       '【切换原则】不要只把背景色从 white 改成 grey 却沿用同一套面板样式；背景模式切换时，内部面板样式也必须同步切换为“白底描边面板”或“灰底白卡面板”这两套规范之一',
       '【禁忌】不要在 FullScreenPage 内再弹 FullScreenPage（层级混乱）；不要把 FullScreenPage 当普通路由页面用（它的定位是覆盖在现有页面之上的操作层，不是新页面）',
     ],
     examples: [
-      { label: '白底创建页（描边面板）', code: '<FullScreenPage title="创建QA对" onBack={() => handleBack()} headerActions={<><Button variant="outline-black">保存草稿</Button><Button variant="primary">发布</Button></>}><div className="flex gap-4 p-6 h-full"><section className="flex-1 rounded-xl border border-default p-6">基础信息面板</section><aside className="w-60 rounded-xl border border-default p-6">辅助配置面板</aside></div></FullScreenPage>' },
-      { label: '灰底编辑页（白卡面板）', code: '<FullScreenPage bg="grey" title="编辑策略" onBack={() => handleBack()} headerActions={<Button variant="primary">保存</Button>}><div className="flex gap-4 p-6 h-full"><section className="flex-1 rounded-xl bg-white p-6">主编辑面板</section><aside className="w-60 rounded-xl bg-white p-6">配置侧栏面板</aside></div></FullScreenPage>' },
+      { label: '白底创建页（描边面板）', code: '<FullScreenPage title="创建QA对" onBack={() => handleBack()} headerActions={<><Button variant="outline-black">保存草稿</Button><Button variant="primary">发布</Button></>}><div className="flex gap-4 px-4 pb-4 pt-0 h-full"><section className="flex-1 rounded-xl border border-default p-6">基础信息面板</section><aside className="w-60 rounded-xl border border-default p-6">辅助配置面板</aside></div></FullScreenPage>' },
+      { label: '灰底编辑页（白卡面板）', code: '<FullScreenPage bg="grey" title="编辑策略" onBack={() => handleBack()} headerActions={<Button variant="primary">保存</Button>}><div className="flex gap-4 px-4 pb-4 pt-0 h-full"><section className="flex-1 rounded-xl bg-white p-6">主编辑面板</section><aside className="w-60 rounded-xl bg-white p-6">配置侧栏面板</aside></div></FullScreenPage>' },
       { label: '❌ Bad（用 Modal fullscreen 当沉浸式编辑器）', code: '/* 禁止！长时间编辑应升级到 FullScreenPage，覆盖侧栏 */\n<Modal layout="fullscreen" title="编辑策略">…</Modal>' },
       { label: '✅ Good（用 FullScreenPage）', code: '<FullScreenPage title="编辑策略" onBack={() => {}} headerActions={<Button variant="primary">保存</Button>}>…</FullScreenPage>' },
     ],

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

@@ -98,7 +98,7 @@ export default function BasePageFramePattern({
 
   return (
     <div
-      className="relative flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
+      className="tfds-page-base-frame relative flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
       style={{
         flex: '1 1 auto',
         alignSelf: 'stretch',

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

@@ -1010,7 +1010,7 @@ export default function ChatConversationPattern({
 
   return (
     <div
-      className="flex h-full w-full min-h-0 flex-col overflow-hidden"
+      className="tfds-page-chat-conversation flex h-full w-full min-h-0 flex-col overflow-hidden"
       style={{
         flex: '1 0 auto',
         alignSelf: 'stretch',

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

@@ -188,7 +188,7 @@ export default function ChatHomePagePattern() {
 
   return (
     <div
-      className="flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
+      className="tfds-page-chat-home flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
       style={{
         background: 'var(--color-blueGrey-200, #F2F4F7)',
         borderRadius: 0,

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

@@ -345,7 +345,7 @@ export default function CopilotPagePattern() {
 
   return (
     <div
-      className="flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden"
+      className="tfds-page-copilot-workbench flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden"
       style={{
         background: 'var(--color-blueGrey-200, #F2F4F7)',
         borderRadius: 'inherit',

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

@@ -664,7 +664,7 @@ export default function CustomerServiceWorkspaceFramePattern() {
 
   return (
     <div
-      className="flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
+      className="tfds-page-customer-service-workspace flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
       style={{
         background: 'var(--color-blueGrey-200, #F2F4F7)',
         borderRadius: 0,

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

@@ -300,7 +300,7 @@ export default function IMConversationPattern({
 
   return (
     <div
-      className={['flex w-full min-w-0 flex-col overflow-hidden', className].filter(Boolean).join(' ')}
+      className={['tfds-page-im-conversation flex w-full min-w-0 flex-col overflow-hidden', className].filter(Boolean).join(' ')}
       style={{
         ...maxWidthStyle,
         ...cardStyle,

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

@@ -274,7 +274,7 @@ export default function McpManagementPage() {
 
   return (
     <div
-      className="flex flex-1 min-h-0 min-w-0 relative"
+      className="tfds-page-mcp-management flex flex-1 min-h-0 min-w-0 relative"
       style={{ margin: PAGE_FRAME_CONTENT_MARGIN, gap: PAGE_FRAME_PANEL_GAP }}
     >
       {/* 新建 MCP Sheet 侧边抽屉 */}

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

@@ -115,7 +115,7 @@ export default function StrategyListPage() {
 
   return (
     <div
-      className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
+      className="tfds-page-strategy-list flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
       style={{
         margin: PAGE_FRAME_CONTENT_MARGIN,
         ...WHITE_CARD_STYLE,

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

@@ -250,7 +250,7 @@ export default function TabTopBarListPage({ onCreateQA }) {
   }
 
   return (
-    <>
+    <div className="tfds-page-tab-top-bar-list flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden">
       {/* 顶部：胶囊 Tab 标题栏 */}
       <div
         className="flex min-w-0 shrink-0 items-center gap-2 overflow-x-auto"
@@ -329,7 +329,7 @@ export default function TabTopBarListPage({ onCreateQA }) {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

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

@@ -55,7 +55,7 @@ export default function VariableManagementPage({ onNewVariable }) {
 
   return (
     <div
-      className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
+      className="tfds-page-variable-management flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
       style={{
         margin: PAGE_FRAME_CONTENT_MARGIN,
         ...WHITE_CARD_STYLE,

package/src/_b_end_runtime/preview-registry.jsx

@@ -5022,7 +5022,7 @@ export const PREVIEW_REGISTRY = {
         : { background: 'transparent', border: '1px solid #E4E7EC', borderRadius: '12px', overflow: 'hidden' };
 
       const demoContent = (
-        <div style={{ display: 'flex', flex: 1, minHeight: 0, gap: '8px', padding: '16px' }}>
+        <div style={{ display: 'flex', flex: 1, minHeight: 0, gap: '16px', padding: '0 16px 16px' }}>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, ...cardStyle }}>
             <StepCardHeader step="1" title="步骤标题一" hint="辅助信息" />
           </div>
@@ -5066,13 +5066,13 @@ export const PREVIEW_REGISTRY = {
       lines.push('>');
       if (bg === 'grey') {
         lines.push('  {/* 灰底模式：页面是浅灰底，内部面板必须切换为白卡样式 */}');
-        lines.push('  <div className="flex gap-4 p-6 h-full">');
+        lines.push('  <div className="flex gap-4 px-4 pb-4 pt-0 h-full">');
         lines.push('    <div className="flex-1 bg-white rounded-xl p-6">主编辑面板</div>');
         lines.push('    <div className="w-60 bg-white rounded-xl p-6">配置侧栏面板</div>');
         lines.push('  </div>');
       } else {
         lines.push('  {/* 白底模式：页面保持一体化，内部面板用描边样式，不再叠加白卡 */}');
-        lines.push('  <div className="flex gap-4 p-6 h-full">');
+        lines.push('  <div className="flex gap-4 px-4 pb-4 pt-0 h-full">');
         lines.push('    <div className="flex-1 rounded-xl border border-border-default p-6">基础信息面板</div>');
         lines.push('    <div className="w-60 rounded-xl border border-border-default p-6">辅助配置面板</div>');
         lines.push('  </div>');