pi-feishu-cli 0.1.0

package/skills/lark-whiteboard/scenes/flywheel.md

@@ -0,0 +1,195 @@
+# 增长飞轮图 (Flywheel)
+
+> **必须写脚本生成 JSON。** 飞轮图需要极坐标计算阶段标签位置和 SVG 圆环切割，直接手写 JSON 无法正确实现同心圆环结构。请用下方脚本模板。
+
+## Content 约束
+
+- 阶段 4-6 个，每阶段短标签（title + 可选 subtitle/desc）
+- 中心放置飞轮主题标题
+
+## Layout 选型
+
+- **脚本生成坐标**（必须）：用 .cjs 脚本极坐标计算阶段标签位置、SVG 圆环切割，脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.11` 渲染
+
+## 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`，减小文字字号，确保相邻文本框不互相覆盖
+
+## 骨架示例
+
+此场景必须用 .cjs 脚本生成。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/skills/lark-whiteboard/scenes/funnel.md

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="favicon.ico" />
+  <title></title>
+  <style>
+      * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+      }
+
+      .open-platform-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100vh;
+          background-color: #ffffff;
+      }
+
+      .open-platform-icon {
+          width: 120px;
+          height: 120px;
+          display: block;
+      }
+
+      .open-platform-desc {
+          margin-top: 16px;
+          line-height: 22px;
+          font-size: 14px;
+          color: #646a73;
+          text-align: center
+      }
+
+      .open-platform-back {
+          border-radius: 6px;
+          font-size: 14px;
+          height: 32px;
+          line-height: 22px;
+          min-width: 80px;
+          padding: 4px 11px;
+          text-align: center;
+          text-decoration: none;
+          touch-action: manipulation;
+          transition: color .1s ease-in, background-color .1s ease-in, border-color .1s ease-in, width .2s ease-in;
+          user-select: none;
+          white-space: nowrap;
+          background: #1456f0;
+          border: 1px solid #1456f0;
+          color: #ffffff;
+          margin-top: 16px;
+      }
+  </style>
+</head>
+<body>
+<div class="open-platform-wrapper">
+  <img class="open-platform-icon"
+       src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjkxMyA1NS4yNDRjLTUuNjMyIDIuOTUtOC4yNDYgNi4yODQtOC4yNDYgOS40NHY5LjcyYzAtMy4xNTYgMi42MTQtNi40OSA4LjI0Ni05LjQ0di05LjcyWm05NC4xNjMtMTIuMDg0di05LjcyNmM1LjkzNC0zLjE5IDguOTgxLTYuODkxIDguOTgxLTEwLjcyNXY5LjcyYzAgMy44NC0zLjA0NyA3LjU0My04Ljk4MSAxMC43MzJaIiBmaWxsPSIjMEMyOTZFIi8+PHBhdGggZD0iTTYwLjIyOSAxOS4wNTkgNDguNzMgNDkuOTIyIDYwLjM2NSA3Mi45MmwtOC40NzQgMjMuODczSDE2LjkyM2E0IDQgMCAwIDEtNC00VjIzLjA2YTQgNCAwIDAgMSA0LTRINjAuMjNaIiBmaWxsPSIjQkJCRkM0IiBmaWxsLW9wYWNpdHk9Ii40NSIvPjxwYXRoIGQ9Ik03MS40MDggMTkuMDU5IDYwLjAxMyA0OS45MjIgNzEuNDYgNzIuOTJsLTguMzI1IDIzLjg3M2gzOS45NDNhNCA0IDAgMCAwIDQtNFYyMy4wNmE0IDQgMCAwIDAtNC00aC0zMS42N1oiIGZpbGw9IiNCQkJGQzQiIGZpbGwtb3BhY2l0eT0iLjQ1Ii8+PHBhdGggZD0iTTIxLjkyMyAyNi4xYTIgMiAwIDEgMSAwIDQgMiAyIDAgMCAxIDAtNFptMyAyYTMgMyAwIDEgMC02IDAgMyAzIDAgMCAwIDYgMFptNi45MTUtMmEyIDIgMCAxIDEgMCA0IDIgMiAwIDAgMSAwLTRabTMgMmEzIDMgMCAxIDAtNiAwIDMgMyAwIDAgMCA2IDBabS0xNS43NjMgNy4zOTRhLjUuNSAwIDAgMSAuNS0uNWgzMS41ODFhLjUuNSAwIDAgMSAwIDFIMTkuNTc1YS41LjUgMCAwIDEtLjUtLjVabTQ4LjQ3NyAwYS41LjUgMCAwIDEgLjUtLjVoMzIuNDY1YS41LjUgMCAwIDEgMCAxSDY4LjA1MmEuNS41IDAgMCAxLS41LS41WiIgZmlsbD0iIzhGOTU5RSIvPjxwYXRoIGQ9Ik05OCAxMTFjOS45NDEgMCAxOC04LjA1OSAxOC0xOHMtOC4wNTktMTgtMTgtMThjLTkuOTQyIDAtMTggOC4wNTktMTggMThzOC4wNTggMTggMTggMThaIiBmaWxsPSIjRjgwIi8+PHBhdGggZD0iTTk3LjE4MSA4NC44MThhLjgxOC44MTggMCAwIDAtLjgxOC44MTl2OS44MThjMCAuNDUyLjM2Ni44MTguODE4LjgxOGgxLjYzN2EuODE4LjgxOCAwIDAgMCAuODE4LS44MTh2LTkuODE5YS44MTguODE4IDAgMCAwLS44MTgtLjgxOEg5Ny4xOFptMCAxMy4wOTJhLjgxOC44MTggMCAwIDAtLjgxOC44MTh2MS42MzZjMCAuNDUyLjM2Ni44MTguODE4LjgxOGgxLjYzN2EuODE4LjgxOCAwIDAgMCAuODE4LS44MTh2LTEuNjM2YS44MTguODE4IDAgMCAwLS44MTgtLjgxOUg5Ny4xOFoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNC4wMjcgODUuMzFjMi40OSA1LjUxIDE0Ljc3IDkuOTQgNDEuNDUgOS45M3Y5LjcyMWMtMjYuNjguMDEtMzguOTYtNC40Mi00MS40NS05Ljkzdi05LjcyWm04NC44MS0yNy4yN2MxNy41Mi0yLjY5IDI1LjgwNy03LjAyNiAyNy4yLTExLjcxdjkuNzJjLS4zMyA0LjY3LTkuNjggOS4wMi0yNy4yIDExLjcxdi05LjcyWiIgZmlsbD0iIzMzNzBGRiIvPjxwYXRoIGQ9Ik04OS4yMzcgMTMuMDFjMTguMDU4IDAgMjYuOCAzLjI1IDI2LjggOS43MnY5LjcyYzAtNi40Ny04Ljc0Mi05LjcyLTI2LjgtOS43MnYtOS43MlptLTg0LjU3IDUxLjdjMCA2LjYgMTEuMzcgMTIuNDUgMzAuNDcgMTIuNDR2OS43MmMtMTkuMSAwLTMwLjQ3LTUuODQtMzAuNDctMTIuNDR2LTkuNzJaIiBmaWxsPSIjMDBENkI5Ii8+PC9zdmc+"
+       alt="">
+  <div class="open-platform-desc">The page does not exist.</div>
+  <a class="open-platform-back" href="/">Go to homepage</a>
+</div>
+<script>window.gfdatav1={"env":"prod","ver":"1.0.0.13","canary":0,"garrModules":null,"envName":"prod","region":"CN","idc":"hl","webServerCodeType":"DeployServerlessWebServer","runtime":"node","extra":{"canaryType":null}}</script><script>
+
+  function parseQueryString(queryString) {
+    // 移除开头的 "?"
+    if (queryString.charAt(0) === '?') {
+      queryString = queryString.substring(1);
+    }
+
+    var params = {};
+    if (!queryString) return params;
+
+    // 分割参数对
+    var paramPairs = queryString.split('&');
+
+    for (var i = 0; i < paramPairs.length; i++) {
+      var paramPair = paramPairs[i].split('=');
+      var key = decodeURIComponent(paramPair[0]);
+      var value = paramPair.length > 1 ? decodeURIComponent(paramPair[1]) : '';
+
+      // 处理重复参数（转为数组）
+      if (params[key] === undefined) {
+        params[key] = value;
+      } else if (!Array.isArray(params[key])) {
+        params[key] = [params[key], value];
+      } else {
+        params[key].push(value);
+      }
+    }
+
+    return params;
+  }
+
+  function getLocale() {
+    var zhLang = 'zh-CN';
+    var enLang = 'en-US';
+
+    var queryLang = parseQueryString(window.location.search).lang;
+    var cookieLang = getCookieLocale();
+    var lang = enLang;
+
+    <!--从cookie中取值-->
+    function getCookieLocale() {
+      var locale = '';
+      var cookies = document.cookie.split('; ');
+      var loclaeKey = 'open_locale';
+
+      for (var i = 0; i < cookies.length; i++) {
+        var cookie = cookies[i].trim();
+        var cookieArr = cookie.split('=');
+        if (cookieArr[0] === loclaeKey) {
+          locale = cookieArr[1];
+          break;
+        }
+      }
+      return locale;
+    }
+
+    function setLocaleCookie(lang) {
+      var date = new Date();
+      // 300天到期
+      date.setTime(date.getTime() + (300 * 24 * 60 * 60 * 1000));
+      var expires = 'expires=' + date.toUTCString();
+      document.cookie = 'open_locale=' + lang + '; ' + expires + '; path=/;';
+    }
+
+    // 获取浏览器默认语言
+    if (navigator.language.indexOf('en') !== -1) {
+      lang = enLang;
+    } else if (navigator.language.indexOf('zh') !== -1) {
+      lang = zhLang;
+    }
+    if (cookieLang === enLang) {
+      lang = enLang;
+    } else if (cookieLang === zhLang) {
+      lang = zhLang;
+    }
+    if (queryLang === enLang) {
+      lang = enLang;
+    } else if (queryLang === zhLang) {
+      lang = zhLang;
+    }
+    // 设置cookie
+    setLocaleCookie(lang);
+    return lang;
+  }
+
+  // 根据域名获取当前brand
+  function isLarkDomain() {
+    var defaultBrandMap = {
+      lark: ['larksuite'],
+      feishu: ['feishu', 'larkoffice', 'larkenterprise'],
+    };
+    const { hostname } = window.location;
+
+    if (defaultBrandMap.feishu.some((item) => hostname.includes(item))) {
+      return false;
+    }
+
+    if (defaultBrandMap.lark.some((item) => hostname.includes(item))) {
+      return true;
+    }
+
+    if (window.domainBrand) {
+      return window.domainBrand === 'lark';
+    }
+
+    return false;
+  }
+
+  var isLarkBrand = isLarkDomain();
+
+  var config = {
+    'zh-CN': {
+      'desc': '抱歉，您访问的页面不存在',
+      'back': '返回首页',
+      'title': (isLarkBrand ? 'Lark' : '飞书') + '开放平台',
+    },
+    'en-US': {
+      'desc': 'The page does not exist.',
+      'back': 'Go to homepage',
+      'title': (isLarkBrand ? 'Lark': 'Feishu') + ' Open Platform',
+    },
+  };
+  var locale = getLocale();
+  var descObj = document.querySelector('.open-platform-desc');
+  var backObj = document.querySelector('.open-platform-back');
+  descObj.innerHTML = config[locale].desc;
+  backObj.innerHTML = config[locale].back;
+  document.title = config[locale].title;
+
+</script>
+</body>
+</html>

package/skills/lark-whiteboard/scenes/line-chart.md

@@ -0,0 +1,214 @@
+# 折线图
+
+## Content 约束
+
+- 数据点 ≤ 15
+- Y 轴必须有单位标注（如 "万元"、"%"）
+- 折线系列 ≤ 3（超过太密看不清）
+
+## Layout 选型
+
+- **脚本生成坐标**（推荐）：用 .cjs 脚本计算数据点坐标和折线路径，脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.11` 渲染
+
+## Layout 规则
+
+- 白板坐标系 Y 轴向下为正，图表"底部原点"拥有最大 Y 值，数据点向上分布时 Y 减小
+- 数据点用小 ellipse 标记（width: 12, height: 12）
+- 折线用 connector straight 连接相邻数据点，endArrow: "none"
+- 坐标轴用 connector 直线，末端带箭头（endArrow: "arrow"）
+- 格线用虚线 connector（lineStyle: "dashed"，endArrow: "none"）
+- 刻度线短横线 connector（endArrow: "none"）
+- 数值标注放在数据点上方
+- 类别标签放在 X 轴下方，居中对齐数据点
+
+## 坐标与尺寸计算指南
+
+白板坐标系中，**X 轴向右为正，Y 轴向下为正**。图表的"底部原点"拥有最大的 Y 坐标，数据点向上分布时 Y 坐标减小。
+
+1. **确定图表区域**：
+   - 设定图表区高度 `chartHeight` 和宽度 `chartWidth`
+   - 设定左下角坐标原点 `(originX, originY)`
+   - 示例：originX=80, originY=480, chartWidth=900, chartHeight=400
+2. **Y 轴范围自适应**：
+   - 找出数据最小值 `dataMin` 和最大值 `dataMax`
+   - yMin 不一定为 0：若数据集中在 80-120，Y 轴从 0 开始会让折线挤在顶部一小段区域
+   - 推荐：yMin = 向下取整到合适刻度（如 dataMin=82 → yMin=80），yMax = 向上取整（如 dataMax=118 → yMax=120）
+   - 当数据波动极小时（如 98-102），适当扩大范围避免折线过于平坦
+3. **数据点坐标计算**：
+   - X 坐标：在可用宽度内均匀分布。`pointX = originX + (i / (pointCount - 1)) * chartWidth`
+   - Y 坐标：按比例映射到高度。`pointY = originY - ((value - yMin) / (yMax - yMin)) * chartHeight`
+   - ellipse 定位：`ellipseX = pointX - 6, ellipseY = pointY - 6`（圆心对齐数据点）
+4. **连线逻辑**：
+   - 用 connector straight 将相邻数据点连接
+   - `from` = 点[i] 的 (pointX, pointY)，`to` = 点[i+1] 的 (pointX, pointY)
+   - startArrow: "none", endArrow: "none"
+5. **Y 轴刻度计算**：
+   - 将 yMin 到 yMax 等分为 4-5 个刻度
+   - 每个刻度的 Y 坐标：`gridY = originY - ((tickValue - yMin) / (yMax - yMin)) * chartHeight`
+
+## 完整 JSON 示例
+
+以下示例：4 个数据点，数据 [120, 200, 150, 180]，yMin=100, yMax=220，originX=80, originY=480, chartWidth=900, chartHeight=400。
+
+- 刻度：100, 130, 160, 190, 220（每 30 一格）
+- 点0 (120): pointX=80, pointY=480-((120-100)/120)*400=480-66.7=413
+- 点1 (200): pointX=80+300=380, pointY=480-((200-100)/120)*400=480-333.3=147
+- 点2 (150): pointX=80+600=680, pointY=480-((150-100)/120)*400=480-166.7=313
+- 点3 (180): pointX=80+900=980, pointY=480-((180-100)/120)*400=480-266.7=213
+
+```json
+{
+  "version": 2,
+  "nodes": [
+    { "type": "rect", "x": 0, "y": 0, "width": 1100, "height": 580 },
+
+    { "type": "text", "x": 80, "y": 10, "width": 900, "height": "fit-content",
+      "text": "季度销售额趋势", "fontSize": 24, "textAlign": "center" },
+
+    { "type": "text", "x": 10, "y": 40, "width": 60, "height": "fit-content",
+      "text": "万元", "fontSize": 12, "textAlign": "center" },
+
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 480 }, "to": { "x": 80, "y": 55 },
+      "lineShape": "straight", "lineWidth": 2, "endArrow": "arrow"
+    }},
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 480 }, "to": { "x": 1000, "y": 480 },
+      "lineShape": "straight", "lineWidth": 2, "endArrow": "arrow"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 480 }, "to": { "x": 80, "y": 480 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 470, "width": 50, "height": 20,
+      "text": "100", "fontSize": 12, "textAlign": "right" },
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 380 }, "to": { "x": 80, "y": 380 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 370, "width": 50, "height": 20,
+      "text": "130", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 380 }, "to": { "x": 980, "y": 380 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 280 }, "to": { "x": 80, "y": 280 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 270, "width": 50, "height": 20,
+      "text": "160", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 280 }, "to": { "x": 980, "y": 280 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 180 }, "to": { "x": 80, "y": 180 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 170, "width": 50, "height": 20,
+      "text": "190", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 180 }, "to": { "x": 980, "y": 180 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 80 }, "to": { "x": 80, "y": 80 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 70, "width": 50, "height": 20,
+      "text": "220", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 80 }, "to": { "x": 980, "y": 80 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 413 }, "to": { "x": 380, "y": 147 },
+      "lineShape": "straight", "lineWidth": 3,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "connector", "connector": {
+      "from": { "x": 380, "y": 147 }, "to": { "x": 680, "y": 313 },
+      "lineShape": "straight", "lineWidth": 3,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "connector", "connector": {
+      "from": { "x": 680, "y": 313 }, "to": { "x": 980, "y": 213 },
+      "lineShape": "straight", "lineWidth": 3,
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "ellipse", "id": "pt-0", "x": 74, "y": 407,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 55, "y": 383,
+      "width": 50, "height": 20,
+      "text": "120", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 50, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q1", "fontSize": 14, "textAlign": "center" },
+
+    { "type": "ellipse", "id": "pt-1", "x": 374, "y": 141,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 355, "y": 117,
+      "width": 50, "height": 20,
+      "text": "200", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 350, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q2", "fontSize": 14, "textAlign": "center" },
+
+    { "type": "ellipse", "id": "pt-2", "x": 674, "y": 307,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 655, "y": 283,
+      "width": 50, "height": 20,
+      "text": "150", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 650, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q3", "fontSize": 14, "textAlign": "center" },
+
+    { "type": "ellipse", "id": "pt-3", "x": 974, "y": 207,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 955, "y": 183,
+      "width": 50, "height": 20,
+      "text": "180", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 950, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q4", "fontSize": 14, "textAlign": "center" }
+  ]
+}
+```
+
+坐标推导验证：
+- 点0 (Q1, 120): pointX = 80 + (0/3)*900 = 80, pointY = 480 - ((120-100)/120)*400 = 413
+- 点1 (Q2, 200): pointX = 80 + (1/3)*900 = 380, pointY = 480 - ((200-100)/120)*400 = 147
+- 点2 (Q3, 150): pointX = 80 + (2/3)*900 = 680, pointY = 480 - ((150-100)/120)*400 = 313
+- 点3 (Q4, 180): pointX = 80 + (3/3)*900 = 980, pointY = 480 - ((180-100)/120)*400 = 213
+- ellipse 定位：ellipseX = pointX - 6, ellipseY = pointY - 6
+
+## 陷阱
+
+- Y 轴范围不合理：若数据集中在 80-120，Y 轴从 0 到 120 会让折线挤在顶部一小段区域，应设 yMin 接近数据最小值
+- 缺 Y 轴单位标注，读者无法理解数值含义
+- 数据点太密时标注互相遮挡（超过 10 个点考虑隔一个标注一次）
+- 折线段忘记设 endArrow: "none"，默认带箭头
+- 多系列时折线颜色相近难以区分，应使用对比度高的不同色系
+
+此场景必须用 .cjs 脚本生成。Agent 使用时只需修改 `data` 数组，其余坐标与折线生成全自动计算。
+
+```javascript
+const { writeFileSync } = require('fs');
+```