@fectivnfy112358/minimax-code-web 0.1.0-preview.0 → 0.1.0-preview.3

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/flowchart.md

@@ -0,0 +1,185 @@
+# 流程图 (Flowchart)
+
+适用于：各种业务流转图、决策树、审批流、时序控制逻辑、带条件判断的链路、系统架构拓扑等。
+
+通用字段语义详见 `references/schema.md`，通用布局原则详见 `references/layout.md`；本文件只描述流程图场景下的选型边界与范式。
+
+> [!IMPORTANT]
+> **流程图必须走 DSL 路径，不再使用 Mermaid！**
+> 复杂分支、判断、回路、跳级关系优先使用 `layout: "dagre"` 计算拓扑；如果只是规整的单线流水线，且卡片强对齐比自动拓扑更重要，也可以使用 Flex + 顶层 `connector` 组合实现。
+
+## 美学规范
+
+- **摒弃简陋节点，推崇全卡片化**：核心业务节点不要只用一个纯文本 `rect`。**应优先采用 Flex 组合卡片**（如：在 `vertical` frame 内上下组合【Emoji 标题项】和【补充说明项】），使得节点信息结构化、层级分明。
+- **语义化色彩编排**：节点底色严禁随机分配。必须按状态语义映射：常规链路用浅蓝/浅紫、核心风控/检查用预警黄、成功通过用生命绿、失败熔断用危险红。边框颜色可同色系加深，以凸显卡片边缘。
+- **统一判定逻辑**：条件分支必须使用 `diamond` 菱形节点，并且**严禁漏掉** `layoutOptions.edges` 边定义里的第三个标签参数（必须清晰写明"是/否"、"通过/拒绝"）。
+- **形状多样化**：合理搭配不同形状来表达语义 —— `ellipse` 用于外部实体/起终点、`diamond` 用于判断路由、`rect` 用于业务处理节点、`cylinder` 用于持久化存储。
+
+## Layout 选型
+
+| 模式             | 适用条件                                       | 核心配置                                                                                                 |
+| ---------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| **主体用 Dagre** | 有判断、分支、回路、回退、跳级关系的标准流程图 | 主体 frame 设定 `layout: "dagre"`，按需配置 `rankdir: "TB"` 或 `rankdir: "LR"`。                          |
+| **局部复合节点** | 流程中的某一步本身是一个小型 UI 组合体         | 外层仍用 `dagre`，复合步骤内部改用 `layout: "vertical"` / `"horizontal"`。此类节点为**不透明节点**，外层连线只能连到外壳。 |
+| **透明子图**     | 需按业务区域分组，且连线穿越区域边界           | 子容器声明 `layout: "dagre"` + `layoutOptions: { isCluster: true }`，成为透明子图。内部节点直接参与外层拓扑运算。 |
+| **规整流水线**   | 基本是单线 A → B → C → D，且卡片对齐要求极高   | 主体可用 Flex 排版，连线改用顶层 `connector`；不要为了"自动"而硬上 Dagre。                                  |
+
+## 核心属性
+
+- **`rankdir`**: `TB`（上下）或 `LR`（左右）。**强烈推荐优先使用 `LR`**，充分利用宽屏横向空间。
+- **`edges`**: 在根 Dagre 的 `layoutOptions.edges` 中按 `[fromId, toId, "标签"]` 声明。**支持反向连接**实现闭环。所有 edges 统一写在**最外层根 Dagre**，不要写在 cluster 内部。
+- **`ranksep` 与边文本**: 若边上标注了说明文字，**必须根据字数调大间距**：`ranksep = max(60, 字数 × 16)`。
+- **自适应尺寸**: dagre 容器**必须**设定 `width: "fit-content"` 和 `height: "fit-content"`。
+- **`clusterTitle`**: 透明子图可通过 `clusterTitle` 声明悬浮标题（自动吸附左上角、加粗 14px），搭配 `clusterTitleColor` 指定标题颜色。
+
+## 两种嵌套模式
+
+### 不透明节点（Opaque Node）
+Dagre 内的子容器，只要未声明 `isCluster: true`，对外层 Dagre 就是具有确定宽高的原子节点。外层连线无法寻址其内部子节点。适合封装复杂的组合卡片（如带图标、版本号、多行描述的业务模块）。
+
+### 透明子图（Compound Cluster）
+子容器同时声明 `layout: "dagre"` 与 `layoutOptions: { isCluster: true }` 时，成为外层 Dagre 的复合子图。其内部子节点直接参与外层拓扑运算，连线可穿越子图边界。适合划分网络区域、功能层级、命名空间等边界容器。推荐搭配 `borderDash: "dashed"` 虚线边框 + 淡色背景。
+
+## 骨架示例（推荐范本）
+
+以下是一个混合架构拓扑的完整示例。它同时展示了**透明子图**（Kubernetes Zone，连线可穿透）和**不透明复合节点**（DB 集群、AI 引擎，连线只能连外壳）的标准写法，以及多种形状（ellipse / diamond / rect / cylinder）和语义化配色规范。
+
+```json
+{
+  "version": 2,
+  "nodes": [
+    {
+      "type": "frame",
+      "id": "root",
+      "x": 20, "y": 20,
+      "layout": "dagre",
+      "width": "fit-content", "height": "fit-content",
+      "padding": 60,
+      "fillColor": "#F8FAFC",
+      "borderColor": "#CBD5E1",
+      "borderWidth": 1,
+      "borderRadius": 16,
+      "layoutOptions": {
+        "rankdir": "LR",
+        "nodesep": 60,
+        "ranksep": 120,
+        "edges": [
+          ["user", "k8s_ingress", "HTTPS request"],
+          ["k8s_ingress", "web_pod", "Route UI"],
+          ["k8s_ingress", "api_pod", "Route API"],
+          ["web_pod", "api_pod", "Internal REST"],
+          ["api_pod", "db_cluster", "SQL Query"],
+          ["api_pod", "ai_service", "gRPC Stream"]
+        ]
+      },
+      "children": [
+        {
+          "type": "ellipse", "id": "user", "text": "Global Users",
+          "width": 110, "height": 60,
+          "fillColor": "#E2E8F0", "borderColor": "#64748B", "borderWidth": 1,
+          "fontSize": 14, "textColor": "#334155"
+        },
+        {
+          "type": "frame", "id": "zone_k8s",
+          "layout": "dagre",
+          "layoutOptions": {
+            "isCluster": true,
+            "clusterTitle": "☸️ Kubernetes Zone (isCluster)",
+            "clusterTitleColor": "#2563EB"
+          },
+          "fillColor": "#EFF6FF", "borderColor": "#60A5FA",
+          "borderWidth": 2, "borderDash": "dashed", "borderRadius": 24,
+          "children": [
+            {
+              "type": "diamond", "id": "k8s_ingress", "text": "Nginx Ingress",
+              "width": 130, "height": 70,
+              "fillColor": "#DBEAFE", "borderColor": "#3B82F6", "borderWidth": 2,
+              "textColor": "#1E40AF"
+            },
+            {
+              "type": "rect", "id": "web_pod", "text": "Next.js SSR Pod",
+              "width": 140, "height": 48,
+              "fillColor": "#BFDBFE", "borderColor": "#2563EB", "borderWidth": 2,
+              "borderRadius": 8, "textColor": "#1E3A8A"
+            },
+            {
+              "type": "rect", "id": "api_pod", "text": "Go Lang API Pod",
+              "width": 140, "height": 48,
+              "fillColor": "#BFDBFE", "borderColor": "#2563EB", "borderWidth": 2,
+              "borderRadius": 8, "textColor": "#1E3A8A"
+            }
+          ]
+        },
+        {
+          "type": "frame", "id": "db_cluster",
+          "layout": "vertical", "gap": 16, "padding": [20, 24],
+          "alignItems": "center",
+          "fillColor": "#F0FDF4", "borderColor": "#22C55E",
+          "borderWidth": 2, "borderRadius": 16,
+          "children": [
+            {
+              "type": "text", "id": "db_title",
+              "text": "🗄️ Highly Available DB (不透明)", "fontSize": 14, "textColor": "#14532D"
+            },
+            {
+              "type": "frame", "id": "db_row", "layout": "horizontal", "gap": 20,
+              "children": [
+                {
+                  "type": "cylinder", "id": "db_master", "text": "Master",
+                  "width": 80, "height": 50,
+                  "fillColor": "#DCFCE7", "borderColor": "#16A34A", "borderWidth": 1,
+                  "textColor": "#166534"
+                },
+                {
+                  "type": "cylinder", "id": "db_replica", "text": "Replica",
+                  "width": 80, "height": 50,
+                  "fillColor": "#DCFCE7", "borderColor": "#16A34A", "borderWidth": 1,
+                  "textColor": "#166534"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "frame", "id": "ai_service",
+          "layout": "vertical", "gap": 10, "padding": [16, 20],
+          "alignItems": "center",
+          "fillColor": "#FAF5FF", "borderColor": "#A855F7",
+          "borderWidth": 2, "borderRadius": 12,
+          "children": [
+            {
+              "type": "text", "id": "ai_title",
+              "text": "🧠 Multi-Modal Engine (不透明)", "fontSize": 14, "textColor": "#6B21A8"
+            },
+            {
+              "type": "rect", "id": "ai_version",
+              "text": "v4.2.1-beta", "width": 90, "height": 22,
+              "fillColor": "#E9D5FF", "borderColor": "#C084FC", "borderWidth": 1,
+              "borderRadius": 4, "fontSize": 11, "textColor": "#581C87"
+            },
+            {
+              "type": "text", "id": "ai_desc",
+              "text": "Includes Vector Store\n& Transformer Blocks",
+              "fontSize": 12, "textColor": "#7E22CE", "textAlign": "center"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+**范本要点**：
+- `zone_k8s` 是**透明子图**（`isCluster: true` + `clusterTitle`），外部连线穿越虚线边界直达 `k8s_ingress`、`web_pod`、`api_pod`。
+- `db_cluster` 和 `ai_service` 是**不透明节点**（`layout: "vertical"`），内部用 Flex 组合了多行结构化信息，对外层 Dagre 是固定宽高的原子。连线只能连到外壳 ID。
+- 所有 `edges` 统一写在最外层根 Dagre 的 `layoutOptions` 中。
+- 本范本中用到了 `ellipse`（外部实体）、`diamond`（路由判断）、`rect`（业务节点）、`cylinder`（数据库存储）四种形状。
+
+## 陷阱与常见报错防范
+
+- **误用 Mermaid**：只要用户没有带 `mermaid` 具体语法代码，哪怕描述明确是"流程图"，也**强制使用 DSL 框架下的 Dagre 模式**。
+- **重复画线**：`dagre` 里的所有子节点关系通过 `edges` 定义，引擎会自动生成连线。**绝对不要再去外层用 `connector` 节点重复连一次**。
+- **穿透黑盒**：普通子容器是不透明节点，外部连线无法直接寻址其内部子节点（引擎会自动重定向至外壳）。若需穿透，必须声明 `layout: "dagre"` 与 `layoutOptions: { isCluster: true }`。
+- **`id` 缺失**：只要是在 `edges` 里出现的标识符，`children` 里一定能找到同名 `id` 的节点对应，拼写必须完全一致。
+- **宽度灾难**：Dagre 内容器禁止子框使用 `fill-container`，因为 dagre 父容器本身是被内容撑开的。

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/flywheel.md

@@ -0,0 +1,195 @@
+# 增长飞轮图 (Flywheel)
+
+> **必须写脚本生成 JSON。** 飞轮图需要极坐标计算阶段标签位置和 SVG 圆环切割，直接手写 JSON 无法正确实现同心圆环结构。请用下方脚本模板。
+
+## Content 约束
+
+- 阶段 4-6 个，每阶段短标签（title + 可选 subtitle/desc）
+- 中心放置飞轮主题标题
+
+## Layout 选型
+
+- **脚本生成坐标**（必须）：用 .js 脚本极坐标计算阶段标签位置、SVG 圆环切割，脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
+
+## Layout 规则
+
+- 同心圆遮挡法构建圆环：大圆（底色）+ 小圆（白色遮罩）+ 中心文字
+- nodes 数组顺序决定 z-index：先大圆 -> 小圆 -> 中心文字 -> SVG 切割 -> 外围卡片
+- 阶段标签均匀分布在圆环外围，每个标签到圆心距离相等
+- SVG polyline 切割圆环形成分段 + 箭头方向感
+- 阶段数多时需动态放大半径、缩小箭头折角、收紧文字容器
+
+### 同心圆遮挡法详解
+
+画一个大圆（作为飞轮的底层颜色），然后在它正中心画一个小圆（填充为白色 `#FFFFFF`）。大圆和小圆都设置 `borderWidth: 0`，通过叠加遮挡形成圆环。
+
+nodes 数组中的图层顺序（必须严格遵守）：
+
+1. **底层大圆** (`type: 'ellipse'`, 填色, `borderWidth: 0`)
+2. **遮罩小圆** (`type: 'ellipse'`, 白色填色, `borderWidth: 0`)
+3. **中心文字** — 必须在两个圆之后添加，否则被白色小圆盖住
+4. **SVG 切割箭头** — 覆盖在圆环上，用白色粗线 polyline 切出分段
+5. **外围阶段卡片** — 极坐标计算位置
+
+### SVG 箭头线切割分段
+
+通过插入一个铺满大圆区域的 `svg` 节点，利用极坐标计算每个分段交界处的坐标，使用 `<polyline>` 画与背景色相同的粗线条（白色、20px+ 宽度）。线条从内圆边缘穿过大圆边缘，并在穿过时产生一定角度的偏转（`da` 参数），在视觉上"切断"圆环并形成箭头方向感。
+
+### 外围文字环绕布局
+
+- 利用极坐标 `x = cx + R * cos(θ)` 计算每个分段的中心角度
+- 在计算出的坐标点放置 `frame` 容器（`layout: 'vertical'`）
+- 外围文字容器内部的 `text` 节点不能用 `width: 'fill-container'`，必须指定固定 width 配合 `height: 'fit-content'`
+
+### 动态缩放优化（阶段数 >= 8 时必须）
+
+当阶段数量较多（8 个、12 个或 16 个以上）时，必须动态调整：
+
+- **放大画布与圆环半径**：节点越多，需要越长的圆周容纳外围文字。适当调大 `rOut` 和 `rIn`（如 16 阶段时 `rOut` 可设为 400+），同步放大 `cx`/`cy` 避免超出边界
+- **缩小箭头切割角度**：段数增多时每段夹角变小，保持默认折角会导致缝隙过大。应减小 `da`（如 `da = 4`）
+- **收紧外围文字容器**：缩窄 `boxWidth`，减小文字字号，确保相邻文本框不互相覆盖
+
+## 骨架示例
+
+此场景必须用 .js 脚本生成。Agent 使用时只需修改 `stages` 数组和 `centerTitle`/`centerSubtitle`，其余坐标全自动计算。
+
+```javascript
+const { writeFileSync } = require('fs');
+
+// ══════════════════════════════════════════════════════════════
+// 只需修改这里 -- 填入用户要求的阶段数据和中心标题
+// ══════════════════════════════════════════════════════════════
+
+const centerTitle = '{{CENTER_TITLE}}';
+const centerSubtitle = '{{CENTER_SUBTITLE}}'; // 可选，不需要就留空字符串
+
+const stages = [
+  { title: '{{STAGE_1}}', subtitle: '{{SUB_1}}', desc: '{{DESC_1}}' },
+  { title: '{{STAGE_2}}', subtitle: '{{SUB_2}}', desc: '{{DESC_2}}' },
+  { title: '{{STAGE_3}}', subtitle: '{{SUB_3}}', desc: '{{DESC_3}}' },
+  { title: '{{STAGE_4}}', subtitle: '{{SUB_4}}', desc: '{{DESC_4}}' },
+];
+
+// ══════════════════════════════════════════════════════════════
+// 以下是自动计算逻辑，不需要修改
+// ══════════════════════════════════════════════════════════════
+
+// --- 布局参数 ---
+const numSegments = stages.length;
+const cx = 600, cy = 450; // 画布中心
+const rOut = 240, rIn = 160; // 内外圆半径
+const textDist = rOut + 40; // 文字离圆心距离
+const boxWidth = 220; // 外围文字卡片宽度
+const boxHeight = 80; // 估算高度（用于偏移计算）
+const da = 8; // 箭头折角
+
+const nodes = [];
+
+// --- 图层 1：底层大圆（圆环底色） ---
+nodes.push({
+  type: 'ellipse',
+  x: cx - rOut, y: cy - rOut,
+  width: rOut * 2, height: rOut * 2,
+  borderWidth: 0,
+});
+
+// --- 图层 2：遮罩小圆（白色） ---
+nodes.push({
+  type: 'ellipse',
+  x: cx - rIn, y: cy - rIn,
+  width: rIn * 2, height: rIn * 2,
+  borderWidth: 0,
+});
+
+// --- 图层 3：中心文字（必须在两个圆之后） ---
+nodes.push({
+  type: 'text',
+  x: cx - rIn, y: cy - (centerSubtitle ? 30 : 20),
+  width: rIn * 2, height: 'fit-content',
+  text: [{ content: centerTitle, bold: true, fontSize: 32 }],
+  textAlign: 'center',
+});
+if (centerSubtitle) {
+  nodes.push({
+    type: 'text',
+    x: cx - rIn, y: cy + 20,
+    width: rIn * 2, height: 'fit-content',
+    text: [{ content: centerSubtitle, fontSize: 18 }],
+    textAlign: 'center',
+  });
+}
+
+// --- 图层 4：SVG 切割箭头 ---
+let svg = `<svg viewBox="0 0 ${rOut * 2} ${rOut * 2}" xmlns="http://www.w3.org/2000/svg">`;
+for (let i = 0; i < numSegments; i++) {
+  const a = -90 + i * (360 / numSegments);
+  const rad = (a * Math.PI) / 180;
+  const radMid = ((a + da) * Math.PI) / 180;
+  const R1 = rIn - 5, R2 = rOut + 5, Rm = (rIn + rOut) / 2;
+  const x1 = rOut + R1 * Math.cos(rad), y1 = rOut + R1 * Math.sin(rad);
+  const x2 = rOut + Rm * Math.cos(radMid), y2 = rOut + Rm * Math.sin(radMid);
+  const x3 = rOut + R2 * Math.cos(rad), y3 = rOut + R2 * Math.sin(rad);
+  svg += `<polyline points="${x1},${y1} ${x2},${y2} ${x3},${y3}" stroke="#FFFFFF" stroke-width="20" fill="none" stroke-linejoin="round" stroke-linecap="round" />`;
+}
+svg += `</svg>`;
+nodes.push({
+  type: 'svg',
+  x: cx - rOut, y: cy - rOut,
+  width: rOut * 2, height: rOut * 2,
+  svg: { code: svg },
+});
+
+// --- 图层 5：外围阶段卡片（极坐标计算位置） ---
+for (let i = 0; i < numSegments; i++) {
+  const stage = stages[i];
+  const a = -90 + (360 / numSegments) / 2 + i * (360 / numSegments);
+  const rad = (a * Math.PI) / 180;
+  const tx = cx + textDist * Math.cos(rad);
+  const ty = cy + textDist * Math.sin(rad);
+
+  // 动态偏移：根据角度将文本框向外推
+  let offsetX = 0, offsetY = 0;
+  if (Math.cos(rad) > 0.1) offsetX = 0;
+  else if (Math.cos(rad) < -0.1) offsetX = -boxWidth;
+  else offsetX = -boxWidth / 2;
+  if (Math.sin(rad) > 0.1) offsetY = 0;
+  else if (Math.sin(rad) < -0.1) offsetY = -boxHeight;
+  else offsetY = -boxHeight / 2;
+
+  const textW = boxWidth - 24; // 卡片 padding 12 * 2
+  nodes.push({
+    type: 'frame',
+    x: tx + offsetX, y: ty + offsetY,
+    width: boxWidth, height: 'fit-content',
+    layout: 'vertical', gap: 8, padding: 12,
+    alignItems: 'start',
+    borderWidth: 2, borderRadius: 8,
+    children: [
+      { type: 'text', width: textW, height: 'fit-content',
+        text: [{ content: stage.title, bold: true, fontSize: 18 }], textAlign: 'left' },
+      { type: 'text', width: textW, height: 'fit-content',
+        text: [{ content: stage.subtitle, fontSize: 14 }], textAlign: 'left' },
+      { type: 'text', width: textW, height: 'fit-content',
+        text: [{ content: stage.desc, fontSize: 12 }], textAlign: 'left' },
+    ],
+  });
+}
+
+// --- 图表标题 ---
+nodes.push({
+  type: 'text',
+  x: cx - rOut - 100, y: 30,
+  width: (rOut + 100) * 2, height: 'fit-content',
+  text: [{ content: centerTitle, bold: true, fontSize: 24 }],
+  textAlign: 'center',
+});
+
+writeFileSync('diagram.json', JSON.stringify({ version: 2, nodes }, null, 2));
+```
+
+## 陷阱
+
+- **中心文字被 SVG 遮挡**：中心文字节点必须在大圆和小圆之后、SVG 之前添加，确保 z-index 正确
+- **缺方向指示箭头**：SVG polyline 切割线必须带角度偏转（da 参数），形成顺时针/逆时针箭头感
+- **标签位置不对称**：外围卡片必须用极坐标公式 `x = cx + R * cos(θ)` 均匀分布，不可手动摆放
+- **外围文字容器死锁**：`layout: 'vertical'` 的 frame 内部 text 节点不能用 `width: 'fill-container'`，必须指定固定 width

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/funnel.md

@@ -0,0 +1,101 @@
+# 漏斗图 (Funnel)
+
+## Content 约束
+
+- 阶段 3-6 个
+- 每阶段一行标签 + 数值（如 "{{STAGE_NAME}} ({{PERCENTAGE}})"）
+- 文案尽量简短；长文案外置到漏斗旁边，图形内仅保留核心短文案
+
+## Layout 选型
+
+绝对定位。用 `trapezoid` / `triangle` 节点从宽到窄排列，height 用 `fit-content`。
+
+## Layout 规则
+
+- 外层 frame 使用 `layout: "vertical"` + `alignItems: "center"` 居中对齐
+- 所有层必须使用脚本计算宽度，以保证**绝对完美的等斜率（直线边缘）**。切勿手写拍脑袋的宽度！
+- 每层间 gap 0-8px（紧密堆叠视觉效果好），从上到下宽度递减。注意 children 数组第一个元素是最顶层（最宽）
+- 所有图形节点必须设置 `"vFlip": false`（引擎默认朝上翻转，漏斗需要朝下）
+- 注意：因为 `vFlip: false` 且是倒金字塔结构，所以 `topWidth` 实际控制的是漏斗各层的**底部较窄边缘**。底层可用 `triangle`（`topWidth: 0`）收窄为尖角，或继续用 `trapezoid` 保持平底。
+
+> **严格的斜率算法（必须在脚本中实现）**：
+> 要让漏斗的侧边形成一条完美的直线，**宽度的递减必须与高度和 gap 严格挂钩**。
+> 1. 设定整体宽度收缩系数 `angleK`（建议值 1.5 到 2.5，表示高度每增加1px，总宽度减少的像素数）。
+> 2. 因为从上往下变窄，所以公式是减法：`bottomWidth(即 topWidth 属性) = currentWidth - (height * angleK)`
+> 3. 下一层的顶宽公式（必须考虑 gap 带来的额外内收）：`nextLayerWidth = bottomWidth - (gap * angleK)`
+
+## 脚本构建模板
+
+必须使用 `node` 运行脚本生成 JSON。
+
+```javascript
+import fs from 'fs';
+
+// 1. 配置基础参数
+const GAP = 4;
+const ANGLE_K = 2; // 斜率系数：高度每下降1px，宽度减少2px
+const LAYER_HEIGHT = 80;
+
+const data = [
+  { text: "展现 (100%)", fillColor: "#F0F4FC", textColor: "#1F2329" },
+  { text: "点击 (50%)", fillColor: "#EAE2FE", textColor: "#1F2329" },
+  { text: "加购 (20%)", fillColor: "#DFF5E5", textColor: "#1F2329" },
+  { text: "成交 (5%)", fillColor: "#1F2329", textColor: "#FFFFFF" }
+];
+
+// 计算第一层的初始宽度 (保证最底层缩到0或平底)
+// 倒推公式：startWidth = 最后一层底宽 + 所有高度消耗 + 所有gap消耗
+const totalHeightLoss = data.length * LAYER_HEIGHT * ANGLE_K;
+const totalGapLoss = (data.length - 1) * GAP * ANGLE_K;
+// 设定最底层为一个尖角 (底宽为0)
+let currentWidth = 0 + totalHeightLoss + totalGapLoss;
+
+const children = data.map((layer, index) => {
+  // 2. 根据公式计算当前层的底宽 (对应节点的 topWidth 属性)
+  const currentBottomWidth = currentWidth - (LAYER_HEIGHT * ANGLE_K);
+  
+  const node = {
+    type: currentBottomWidth <= 0 ? "triangle" : "trapezoid",
+    width: currentWidth,
+    // 注意：漏斗中 topWidth 表示的是下方的窄边！如果 <=0 就用 triangle
+    topWidth: Math.max(0, currentBottomWidth), 
+    height: LAYER_HEIGHT,
+    vFlip: false, // 必须为 false
+    text: layer.text,
+    textAlign: "center",
+    fillColor: layer.fillColor,
+    borderColor: layer.fillColor,
+    borderWidth: 2,
+    fontSize: 16,
+    textColor: layer.textColor
+  };
+
+  // 3. 关键：计算下一层的顶宽。必须减去 gap 的向内收缩量！
+  currentWidth = currentBottomWidth - (GAP * ANGLE_K);
+  
+  return node;
+});
+
+const output = {
+  version: 2,
+  nodes: [
+    {
+      type: "frame",
+      layout: "vertical",
+      alignItems: "center",
+      gap: GAP,
+      padding: 40,
+      children: children
+    }
+  ]
+};
+
+fs.writeFileSync('diagram.json', JSON.stringify(output, null, 2));
+```
+
+## 陷阱
+
+- **不要手写随意递减的宽度**：这会导致漏斗侧边变成折线，不直。必须严格使用上述 `angleK` 公式计算。
+- **忘记计算 gap 带来的收缩**：如果下一层的 `width` 只是简单等于上一层的 `topWidth`，在有 gap 的情况下，衔接处会产生锯齿折角。必须减去 `gap * angleK`。
+- **vFlip 未设置**：忘记 `"vFlip": false` 会导致梯形朝上翻转，漏斗形状错误
+- **文字溢出底层**：底层越窄空间越小，短文案用 `\n` 换行，长文案外置到漏斗旁边（外层套 `layout: "horizontal"` 的 frame，漏斗一侧，说明文字另一侧）