@deppon/deppon-prd-mcp 0.1.1 → 2.5.10

package/dist/core/tldraw-wireframe.js

@@ -0,0 +1,205 @@
+import crypto from 'node:crypto';
+const WIDGET_COLORS = {
+    ShellSidebar: 'light-blue',
+    PageHeader: 'grey',
+    FilterBar: 'yellow',
+    DataTable: 'light-green',
+};
+function shapeId() {
+    return `shape:${crypto.randomBytes(4).toString('hex')}`;
+}
+function pageId() {
+    return `page:${crypto.randomBytes(4).toString('hex')}`;
+}
+function indexAt(i) {
+    return `a${i + 1}`;
+}
+function geoShape(page, idx, x, y, w, h, text, color) {
+    return {
+        id: shapeId(),
+        typeName: 'shape',
+        type: 'geo',
+        x,
+        y,
+        rotation: 0,
+        isLocked: false,
+        opacity: 1,
+        parentId: page,
+        index: indexAt(idx),
+        meta: {},
+        props: {
+            w,
+            h,
+            geo: 'rectangle',
+            color,
+            fill: 'semi',
+            text,
+            dash: 'draw',
+            size: 'm',
+        },
+    };
+}
+function textShape(page, idx, x, y, text) {
+    return {
+        id: shapeId(),
+        typeName: 'shape',
+        type: 'text',
+        x,
+        y,
+        rotation: 0,
+        isLocked: false,
+        opacity: 1,
+        parentId: page,
+        index: indexAt(idx),
+        meta: {},
+        props: {
+            color: 'black',
+            size: 's',
+            w: 280,
+            text,
+            font: 'draw',
+            autoSize: true,
+        },
+    };
+}
+export function buildTldrawWireframeDocument(project, widgets) {
+    const pid = pageId();
+    const records = [
+        {
+            id: 'document:document',
+            typeName: 'document',
+            gridSize: 10,
+            name: `${project.pageName} · 线框`,
+            meta: { slug: project.slug, source: 'deppon-prd-mcp' },
+        },
+        {
+            id: pid,
+            typeName: 'page',
+            name: project.pageName,
+            index: 'a1',
+            meta: {},
+        },
+        {
+            id: `instance_page_state:${pid}`,
+            typeName: 'instance_page_state',
+            pageId: pid,
+            selectedShapeIds: [],
+            hintingShapeIds: [],
+            erasingShapeIds: [],
+            hoveredShapeId: null,
+            editingShapeId: null,
+            croppingShapeId: null,
+            focusedGroupId: null,
+            meta: {},
+        },
+        {
+            id: `camera:${pid}`,
+            typeName: 'camera',
+            x: -20,
+            y: -20,
+            z: 0.85,
+            meta: {},
+        },
+    ];
+    let shapeIdx = 0;
+    records.push(geoShape(pid, shapeIdx++, 0, 0, 1440, 900, `${project.pageName} · B端线框 1440×900`, 'black'));
+    for (const widget of widgets) {
+        const color = WIDGET_COLORS[widget.type] || 'violet';
+        const label = `${widget.type}${widget.props.menuPath || widget.props.title || widget.props.activeItem
+            ? `\n${String(widget.props.menuPath || widget.props.title || widget.props.activeItem)}`
+            : ''}`;
+        records.push(geoShape(pid, shapeIdx++, widget.x, widget.y, widget.w, widget.h, label.slice(0, 120), color));
+    }
+    if (project.filters.length > 0) {
+        const filterWidget = widgets.find(w => w.type === 'FilterBar');
+        if (filterWidget) {
+            const cols = Math.min(project.filters.length, 4);
+            const cellW = Math.floor((filterWidget.w - 32) / cols);
+            project.filters.forEach((f, i) => {
+                const col = i % cols;
+                const row = Math.floor(i / cols);
+                records.push(geoShape(pid, shapeIdx++, filterWidget.x + 16 + col * cellW, filterWidget.y + 48 + row * 44, cellW - 12, 36, f.name, 'light-violet'));
+            });
+        }
+    }
+    if (project.columns.length > 0) {
+        const table = widgets.find(w => w.type === 'DataTable');
+        if (table) {
+            const colW = Math.floor(table.w / (project.columns.length + 1));
+            project.columns.forEach((c, i) => {
+                records.push(textShape(pid, shapeIdx++, table.x + 8 + i * colW, table.y + 36, c.name));
+            });
+        }
+    }
+    records.push(textShape(pid, shapeIdx++, 240, 16, `PRD 线框 · ${project.pageName}\n${project.menuPath}\n打开：tldraw.com 或 VS Code tldraw 扩展`));
+    return {
+        document: records[0],
+        pageId: pid,
+        records,
+    };
+}
+export function buildTldrawFile(project, widgets) {
+    const { records } = buildTldrawWireframeDocument(project, widgets);
+    return {
+        tldrawFileFormatVersion: 1,
+        schema: {
+            schemaVersion: 2,
+            sequences: {
+                'com.tldraw.store': 4,
+                'com.tldraw.asset': 1,
+                'com.tldraw.camera': 1,
+                'com.tldraw.document': 2,
+                'com.tldraw.instance': 25,
+                'com.tldraw.instance_page_state': 5,
+                'com.tldraw.page': 1,
+                'com.tldraw.pointer': 1,
+                'com.tldraw.shape': 4,
+                'com.tldraw.shape.geo': 10,
+                'com.tldraw.shape.text': 3,
+                'com.tldraw.shape.note': 9,
+                'com.tldraw.shape.arrow': 6,
+            },
+        },
+        records,
+    };
+}
+export function buildTldrawPrompt(project, handoff, tldrRelativePath) {
+    const widgetLines = handoff.widgets.map(w => `- ${w.type} (${w.x},${w.y}) ${w.w}×${w.h}`).join('\n');
+    return `# tldraw 线框任务：${project.pageName}
+
+基于 deppon-prd-mcp 已生成 PRD，在 tldraw 中绘制 **B 端后台线框**（低精度布局，用于评审与流程说明）。
+
+## 文件
+- 相对路径（TLDRAW_DIR 下）：\`${tldrRelativePath}\`
+- 已预生成线框：\`${handoff.paths.tldrawWireframe || `<slug>/wireframe.tldr`}\`
+- 可用 tldraw MCP 继续 \`tldraw_add_shape\` / \`tldraw_update_shape\` 微调
+
+## 页面背景
+${project.background}
+
+## 布局区块
+${widgetLines}
+
+## 筛选项
+${project.filters.map(f => `- ${f.name}（${f.type}）`).join('\n') || '（无）'}
+
+## 表格列
+${project.columns.map(c => `- ${c.name}`).join('\n')}
+
+## 工具栏 / 行操作
+- 工具栏：${project.toolbarButtons.join('、')}
+- 行操作：${project.rowActions.join('、')}
+
+## MCP 操作建议
+1. \`tldraw_read\` 读取 \`${tldrRelativePath}\` 查看现有线框
+2. 按需 \`tldraw_add_shape\` 补充流程箭头（type: arrow）或备注（type: note）
+3. 高保真视觉稿请用 Penpot/Reframe；tldraw 专注 **线框与流程**
+
+## 打开方式
+- [tldraw.com](https://www.tldraw.com/) → File → Open → 选择 wireframe.tldr
+- VS Code 安装 tldraw 扩展后直接打开文件
+
+## 关联 PRD
+${handoff.paths.prd}
+`;
+}

package/dist/core/types.d.ts

@@ -56,6 +56,25 @@ export declare const PermissionRowSchema: z.ZodObject<{
     scope?: string | undefined;
     dataScope?: string | undefined;
 }>;
+export declare const PrototypeLayoutSchema: z.ZodObject<{
+    blockOrder: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    filterOrder: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
+    columnOrder: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
+    toolbarOrder: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
+    hiddenBlocks: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+}, "strip", z.ZodTypeAny, {
+    blockOrder?: string[] | undefined;
+    filterOrder?: number[] | undefined;
+    columnOrder?: number[] | undefined;
+    toolbarOrder?: number[] | undefined;
+    hiddenBlocks?: string[] | undefined;
+}, {
+    blockOrder?: string[] | undefined;
+    filterOrder?: number[] | undefined;
+    columnOrder?: number[] | undefined;
+    toolbarOrder?: number[] | undefined;
+    hiddenBlocks?: string[] | undefined;
+}>;
 export declare const PrdProjectSchema: z.ZodObject<{
     slug: z.ZodString;
     pageName: z.ZodString;
@@ -124,6 +143,25 @@ export declare const PrdProjectSchema: z.ZodObject<{
     createButtonLabel: z.ZodOptional<z.ZodString>;
     enableCrud: z.ZodDefault<z.ZodBoolean>;
     mockRows: z.ZodDefault<z.ZodArray<z.ZodRecord<z.ZodString, z.ZodString>, "many">>;
+    layout: z.ZodOptional<z.ZodObject<{
+        blockOrder: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+        filterOrder: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
+        columnOrder: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
+        toolbarOrder: z.ZodOptional<z.ZodArray<z.ZodNumber, "many">>;
+        hiddenBlocks: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    }, "strip", z.ZodTypeAny, {
+        blockOrder?: string[] | undefined;
+        filterOrder?: number[] | undefined;
+        columnOrder?: number[] | undefined;
+        toolbarOrder?: number[] | undefined;
+        hiddenBlocks?: string[] | undefined;
+    }, {
+        blockOrder?: string[] | undefined;
+        filterOrder?: number[] | undefined;
+        columnOrder?: number[] | undefined;
+        toolbarOrder?: number[] | undefined;
+        hiddenBlocks?: string[] | undefined;
+    }>>;
 }, "strip", z.ZodTypeAny, {
     slug: string;
     pageName: string;
@@ -158,6 +196,13 @@ export declare const PrdProjectSchema: z.ZodObject<{
     mockRows: Record<string, string>[];
     batchDate?: string | undefined;
     createButtonLabel?: string | undefined;
+    layout?: {
+        blockOrder?: string[] | undefined;
+        filterOrder?: number[] | undefined;
+        columnOrder?: number[] | undefined;
+        toolbarOrder?: number[] | undefined;
+        hiddenBlocks?: string[] | undefined;
+    } | undefined;
 }, {
     slug: string;
     pageName: string;
@@ -192,6 +237,13 @@ export declare const PrdProjectSchema: z.ZodObject<{
     createButtonLabel?: string | undefined;
     enableCrud?: boolean | undefined;
     mockRows?: Record<string, string>[] | undefined;
+    layout?: {
+        blockOrder?: string[] | undefined;
+        filterOrder?: number[] | undefined;
+        columnOrder?: number[] | undefined;
+        toolbarOrder?: number[] | undefined;
+        hiddenBlocks?: string[] | undefined;
+    } | undefined;
 }>;
 export type PrdProject = z.infer<typeof PrdProjectSchema>;
 export declare const PAGE_TYPE_LABELS: Record<PageType, string>;

package/dist/core/types.js

@@ -28,11 +28,21 @@ export const PermissionRowSchema = z.object({
     scope: z.string().default(''),
     dataScope: z.string().default('全量'),
 });
+export const PrototypeLayoutSchema = z.object({
+    blockOrder: z.array(z.string()).optional(),
+    filterOrder: z.array(z.number()).optional(),
+    columnOrder: z.array(z.number()).optional(),
+    toolbarOrder: z.array(z.number()).optional(),
+    hiddenBlocks: z.array(z.string()).optional(),
+});
 export const PrdProjectSchema = z.object({
     slug: z.string().min(1),
     pageName: z.string().min(1),
     pageType: PageTypeSchema.default('list-crud'),
-    batchDate: z.string().regex(/^\d{8}$/).optional(),
+    batchDate: z
+        .string()
+        .regex(/^\d{8}$/)
+        .optional(),
     useDpItTitle: z.boolean().default(true),
     background: z.string().min(1),
     features: z.array(FeatureRowSchema).default([]),
@@ -44,9 +54,8 @@ export const PrdProjectSchema = z.object({
     rowActions: z.array(z.string()).default(['查看', '编辑', '删除']),
     createButtonLabel: z.string().optional(),
     enableCrud: z.boolean().default(true),
-    mockRows: z
-        .array(z.record(z.string()))
-        .default([]),
+    mockRows: z.array(z.record(z.string())).default([]),
+    layout: PrototypeLayoutSchema.optional(),
 });
 export const PAGE_TYPE_LABELS = {
     'list-crud': '后台列表 + CRUD',

package/dist/http/server.js

@@ -4,7 +4,7 @@ import path from 'node:path';
 import { getHttpHost, getHttpPort, getPrototypesRoot, getWebRoot } from '../config.js';
 import { generatePrdMarkdown } from '../core/prd-generator.js';
 import { generatePrototypeHtml } from '../core/prototype-generator.js';
-import { applyOverrides, listProjects, loadProject, readProjectFiles, saveProject, } from '../core/project-store.js';
+import { applyOverrides, listProjects, loadProject, readProjectFiles, saveDesignLayout, saveProject, } from '../core/project-store.js';
 import { createDefaultProject, PAGE_TYPE_LABELS, PrdProjectSchema } from '../core/types.js';
 let started = false;
 export async function startHttpServer() {
@@ -87,6 +87,17 @@ export async function startHttpServer() {
             res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
         }
     });
+    app.post('/api/projects/:slug/design', (req, res) => {
+        try {
+            const updated = saveDesignLayout(req.params.slug, req.body || {});
+            if (!updated)
+                return res.status(404).json({ error: '项目不存在' });
+            res.json({ ok: true, project: updated, slug: updated.slug });
+        }
+        catch (e) {
+            res.status(400).json({ error: e instanceof Error ? e.message : String(e) });
+        }
+    });
     app.get('/api/projects/:slug/prototype', (req, res) => {
         const files = readProjectFiles(req.params.slug);
         if (!files)

package/dist/mcp/server.js

@@ -4,8 +4,9 @@ import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprot
 import { getHttpBaseUrl } from '../config.js';
 import { generatePrdMarkdown } from '../core/prd-generator.js';
 import { generatePrototypeHtml } from '../core/prototype-generator.js';
-import { applyOverrides, listProjects, loadProject, readProjectFiles, saveProject, } from '../core/project-store.js';
-import { createDefaultProject, PAGE_TYPE_LABELS, PageTypeSchema, PrdProjectSchema, } from '../core/types.js';
+import { applyOverrides, listProjects, loadProject, readProjectFiles, saveProject } from '../core/project-store.js';
+import { createDefaultProject, PAGE_TYPE_LABELS, PageTypeSchema, PrdProjectSchema } from '../core/types.js';
+import { saveCanvasHandoff } from '../core/canvas-handoff.js';
 import { startHttpServer } from '../http/server.js';
 export async function startMcpServer() {
     await startHttpServer();
@@ -79,6 +80,22 @@ export async function startMcpServer() {
                     },
                 },
             },
+            {
+                name: 'export_canvas_handoff',
+                description: 'PRD 项目导出 canvas-handoff.json + penpot/reframe/tldraw Prompt + wireframe.tldr，供外部 MCP 绘制原型（PRD 仍由 deppon-prd-mcp 管理）。',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        slug: { type: 'string', description: '项目 slug' },
+                        target: {
+                            type: 'string',
+                            enum: ['all', 'both', 'penpot', 'reframe', 'tldraw'],
+                            description: 'handoff 目标，默认 all（含 tldraw 线框）',
+                        },
+                    },
+                    required: ['slug'],
+                },
+            },
         ],
     }));
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
@@ -181,6 +198,46 @@ export async function startMcpServer() {
                     ],
                 };
             }
+            if (name === 'export_canvas_handoff') {
+                const slug = String(input.slug || '');
+                const target = String(input.target || 'all');
+                const project = loadProject(slug);
+                if (!project)
+                    throw new Error(`项目不存在: ${slug}`);
+                const result = saveCanvasHandoff(project);
+                const referenceUrl = `${getHttpBaseUrl()}/projects/${slug}/prototype.html`;
+                const tldrawWireframeUrl = `${getHttpBaseUrl()}/projects/${slug}/wireframe.tldr`;
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                ok: true,
+                                slug,
+                                target,
+                                handoffPath: result.handoffPath,
+                                penpotPromptPath: result.penpotPromptPath,
+                                reframePromptPath: result.reframePromptPath,
+                                tldrawPromptPath: result.tldrawPromptPath,
+                                tldrawWireframePath: result.tldrawWireframePath,
+                                tldrawWireframeUrl,
+                                referencePrototypeUrl: referenceUrl,
+                                widgetCount: result.handoff.widgets.length,
+                                penpotPromptPreview: result.handoff.penpot.prompt.slice(0, 400),
+                                reframePromptPreview: result.handoff.reframe.prompt.slice(0, 400),
+                                tldrawPromptPreview: result.handoff.tldraw.prompt.slice(0, 400),
+                                nextSteps: result.nextSteps,
+                                cursorWorkflow: [
+                                    '1. deppon-prd: generate_prd → export_canvas_handoff',
+                                    '2. tldraw: 打开 wireframe.tldr，Agent 读 tldraw-prompt.md 用 tldraw MCP 补充线框',
+                                    '3. penpot: yarn penpot:mcp，Agent 读 penpot-prompt.md',
+                                    '4. reframe: yarn reframe:platform，Agent 读 reframe-prompt.md',
+                                ],
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
             throw new Error(`Unknown tool: ${name}`);
         }
         catch (error) {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@deppon/deppon-prd-mcp",
-    "version": "0.1.1",
-    "mcpName": "io.github.wangyang1103/deppon-prd-mcp",
+    "version": "2.5.10",
+    "mcpName": "io.github.chriswong1103/deppon-prd-mcp",
     "description": "私有化 PRD 生成 + 交互原型 MCP 服务（基于 deppon-prd-generator skill）",
     "license": "MIT",
     "type": "module",
@@ -30,7 +30,10 @@
         "dev:web": "npm run build && node dist/cli.js --web-only",
         "prepack": "npm run build",
         "publish:auto": "npm publish",
-        "publish:registry": "mcp-publisher publish"
+        "publish:registry": "mcp-publisher publish",
+        "penpot:mcp": "bash scripts/start-penpot-mcp.sh",
+        "reframe:setup": "bash scripts/setup-reframe.sh",
+        "reframe:platform": "cd \"$HOME/.deppon/reframe\" && npm start"
     },
     "dependencies": {
         "@modelcontextprotocol/sdk": "^1.12.1",

package/templates/examples/README.md

@@ -2,14 +2,14 @@
 
 本目录存放**已完成的对照示例**（非业务仓库的 `src/prototypes/` 交付物），供生成 PRD / 可选 `prototype.html` 时对齐**章节结构、表格粒度、标注与 `prd.md` 联动（`fetch` + `marked`）**。各子目录内 `prd.md` 文首含指向**同目录** `prototype.html` 的 Markdown 相对链接（与 `SKILL.md`「PRD 与原型互链」一致）；正文与原型 UI 默认**简体中文**。
 
-| 子目录 | 对应模板文件 | 页面类型 / 场景 |
-| ------ | ------------ | ---------------- |
-| `list-crud/` | `template/backend-list-prd-template.md` | 后台列表 **+ 完整 CRUD**（筛选/分页/详情/表单/删除） |
-| `backend-list/` | `template/backend-list-prd-template.md` | 后台 **纯列表**（筛选 + 表 + 分页，无弹层 CRUD） |
-| `form-edit/` | `template/backend-form-edit-prd-template.md` | 后台 **整页表单编辑**（字段/联动/保存取消） |
-| `form-preview/` | `template/backend-form-preview-prd-template.md` | 后台 **只读详情 / 预览** |
-| `data-dashboard/` | `template/data-prd-template.md` | **数据看板**（筛选 + 卡 + 图 + 表 + 指标总览） |
-| `user-frontend/` | `template/user-frontend-prd-template.md` | **用户前台 / C 端**活动页 |
+| 子目录                  | 对应模板文件                                    | 页面类型 / 场景                                                 |
+| ----------------------- | ----------------------------------------------- | --------------------------------------------------------------- |
+| `list-crud/`            | `template/backend-list-prd-template.md`         | 后台列表 **+ 完整 CRUD**（筛选/分页/详情/表单/删除）            |
+| `backend-list/`         | `template/backend-list-prd-template.md`         | 后台 **纯列表**（筛选 + 表 + 分页，无弹层 CRUD）                |
+| `form-edit/`            | `template/backend-form-edit-prd-template.md`    | 后台 **整页表单编辑**（字段/联动/保存取消）                     |
+| `form-preview/`         | `template/backend-form-preview-prd-template.md` | 后台 **只读详情 / 预览**                                        |
+| `data-dashboard/`       | `template/data-prd-template.md`                 | **数据看板**（筛选 + 卡 + 图 + 表 + 指标总览）                  |
+| `user-frontend/`        | `template/user-frontend-prd-template.md`        | **用户前台 / C 端**活动页                                       |
 | `app-shell-navigation/` | `template/app-shell-navigation-prd-template.md` | **管理台壳层 + 多页文档中心**（侧栏/顶栏/栅格 + `pages/` 互跳） |
 
 **打开原型**：各 `prototype.html` 须通过**本地 HTTP**访问同目录，以便 `fetch('prd.md')`；勿依赖 `file://`。**`app-shell-navigation/`** 还须从该子目录打开，保证 iframe 内 `pages/*.html` 相对路径可用。

package/templates/examples/app-shell-navigation/layout-spec.md

@@ -4,37 +4,37 @@
 
 ## 1. 整体结构（左右 + 顶）
 
-| 区域 | 位置 | 说明 |
-| ---- | ---- | ---- |
-| 侧栏 | 左侧固定 | 主导航；展开宽 **180px**，收起 **56px** |
-| 顶栏 | 主区上方 | 高 **56px**；Logo/标题左，工具右 |
-| 主工作区 | 顶栏下方、侧栏右侧 | 内嵌 **iframe** 或路由 `router-view` |
+| 区域     | 位置               | 说明                                    |
+| -------- | ------------------ | --------------------------------------- |
+| 侧栏     | 左侧固定           | 主导航；展开宽 **180px**，收起 **56px** |
+| 顶栏     | 主区上方           | 高 **56px**；Logo/标题左，工具右        |
+| 主工作区 | 顶栏下方、侧栏右侧 | 内嵌 **iframe** 或路由 `router-view`    |
 
 ## 2. 间距（与视觉稿一致时可照抄）
 
-| 名称 | 数值 | 用途 |
-| ---- | ---- | ---- |
-| 侧栏—主区 | **16px** | 水平间隙 |
-| 顶栏—内容 | **16px** | 顶栏底到主区顶 |
-| 主区内块间距 | **16px** | 卡片/区块之间 |
-| 页面底边距 | **24px** | 主区 `padding-bottom` |
+| 名称         | 数值     | 用途                  |
+| ------------ | -------- | --------------------- |
+| 侧栏—主区    | **16px** | 水平间隙              |
+| 顶栏—内容    | **16px** | 顶栏底到主区顶        |
+| 主区内块间距 | **16px** | 卡片/区块之间         |
+| 页面底边距   | **24px** | 主区 `padding-bottom` |
 
 ## 3. 24 栅格（主区内逻辑分栏）
 
-| 区块 | 建议占位 | 说明 |
-| ---- | -------- | ---- |
-| 顶通栏 | **24 / 24** | 全宽 KPI / 筛选横条 |
-| 下区左 | **16 / 24**（约 2/3） | 列表、大图表 |
-| 下区右 | **8 / 24**（约 1/3） | 辅信息、快捷入口 |
+| 区块   | 建议占位              | 说明                |
+| ------ | --------------------- | ------------------- |
+| 顶通栏 | **24 / 24**           | 全宽 KPI / 筛选横条 |
+| 下区左 | **16 / 24**（约 2/3） | 列表、大图表        |
+| 下区右 | **8 / 24**（约 1/3）  | 辅信息、快捷入口    |
 
 ## 4. 侧栏导航层级（交互摘要）
 
-| 层级 | 行高参考 | 交互 |
-| ---- | -------- | ---- |
+| 层级 | 行高参考 | 交互                                |
+| ---- | -------- | ----------------------------------- |
 | 一级 | **52px** | 图标 + 文案 + chevron；点击展开二级 |
-| 二级 | 略缩进 | 无图标或弱图标 |
-| 三级 | 飞层卡片 | 悬停二级项右侧浮出；点击进子页 |
-| 收起 | 宽 56px | 仅图标 + Tooltip |
+| 二级 | 略缩进   | 无图标或弱图标                      |
+| 三级 | 飞层卡片 | 悬停二级项右侧浮出；点击进子页      |
+| 收起 | 宽 56px  | 仅图标 + Tooltip                    |
 
 ## 5. 多页文档中心文件约定