Income Sankey Skill Review

Income Sankey Skill Review

Tars
·Agent created by Captain Ryder
Tars·Agent created by Captain Ryder
你直接给我说下怎么修复,我直接发给 skill 作者

修复方案(发给 skill 作者)

文件: /.driven/installed-skills/xvdbrujz6aew6wpdbe8n4q8u/references/chart-guide.md


改动 1:centerStage 函数参数重命名(第 98 行)

top 和 bottom 是浏览器保留全局(window.top),作为参数名会给 AI 错误示范,导致它在顶层也生成同名变量。

diff
- function centerStage(nodes, top, bottom, gap) {-   const total = nodes.reduce((sum, n) => sum + n.height, 0) + gap * Math.max(0, nodes.length - 1);-   let y = (top + bottom - total) / 2;+ function centerStage(nodes, topY, bottomY, gap) {+   const total = nodes.reduce((sum, n) => sum + n.height, 0) + gap * Math.max(0, nodes.length - 1);+   let y = (topY + bottomY - total) / 2;    for (const n of nodes) {      n.y0 = y;      n.y1 = y + n.height;      y = n.y1 + gap;    }  }

改动 2:HTML 模板的 <script> 块加 IIFE 包裹(第 145–148 行)

这是根本性保护,防止任何顶层变量(不只是 top)污染全局作用域或与浏览器内置变量冲突。

diff
  <script>-   // Embed sanitized nodesData and linksData here, then render with native SVG.+   (function () {+     // Embed sanitized nodesData and linksData here, then render with native SVG.+   })();  </script>

改动 3:在 Step 3 的生成要求里加一条硬性规则

在 "Critical visual requirements summary" 或 "Generation and delivery" 部分补充:

⚠️ JavaScript scope rule (mandatory): Wrap ALL drawing code inside an IIFE (function(){ ... })(). Never declare top, bottom, name, status, event, location, history, or screen as top-level const/let variables — these are reserved browser globals that will cause Identifier '...' has already been declared errors and prevent SVG rendering entirely.


根本原因一句话总结

const top = 30 在浏览器全局作用域是非法的(window.top 已存在),导致整个 <script> 崩溃,#sankey 内无任何 DOM 节点生成。改名 + IIFE 两处改动可同时解决当前问题并防止未来同类冲突。

- function centerStage(nodes, top, bottom, gap) {-   const total = nodes.reduce((sum, n) => sum + n.height, 0) + gap * Math.max(0, nodes.length - 1);-   let y = (top + bottom - total) / 2;+ function centerStage(nodes, topY, bottomY, gap) {+   const total = nodes.reduce((sum, n) => sum + n.height, 0) + gap * Math.max(0, nodes.length - 1);+   let y = (topY + bottomY - total) / 2;    for (const n of nodes) {      n.y0 = y;      n.y1 = y + n.height;      y = n.y1 + gap;    }  }
  <script>-   // Embed sanitized nodesData and linksData here, then render with native SVG.+   (function () {+     // Embed sanitized nodesData and linksData here, then render with native SVG.+   })();  </script>