网页付费 已验证

深色平衡图表界面组件

用于展示流入、流出及净结余的深色图表区块,并明确标注报告周期。以清晰的浅色标签和克制的青绿色、陶土色区分数据,同时说明图表展示的是总额构成还是随时间变化的余额。

你会得到

  • 包含明确报告周期的响应式深色图表区块。
  • 数值与净结余计算一致且标注清楚的对比图。
  • 可编辑的系列名称、数值、单位和结论。
  • 不依赖颜色也能理解结果的文字说明。

适合

  • 展示运营流入、流出与结余的高管报告。
  • 需要清晰财务对比的研究或产品页面。

不适合

  • 需要导航和多视图控制的完整分析产品。
  • 仅有汇总数据却需要展示逐月趋势的场景。

你需要提供

  • 采用相同币种和单位的流入与流出数值。
  • 报告周期;如需展示随时间变化的余额,还需提供各期数值。

运行要求

  • A modern browser
  • Node.js 20+ for the validator

运行成本

No external services. Runs entirely on your agent.

试试这个提示词

/sl-dark-balance-chart-ui-block 为高管受众制作一个深色高管报告统计区块,展示六个月报告窗口中的第二季度运营收支。使用标题“Q2: $2.84M inflows - $2.31M outflows = +$530K net”,并展示三项统计:“$2.31M” / “Q2 outflows · share of inflows”、“$0.53M” / “Q2 retained · +$530K net”、“6 months” / “Reporting window · Q2 figures shown”。采用 Warm Tidal Balance 风格。

后续提示词

  • 在图表下方添加紧凑且无障碍的数据表,同时保持现有视觉层级。
  • 将图表调整为移动端报告布局,并确保数值和结论清晰易读。
  • 将示例比较改为目标值与实际值,并清楚标出差异。

验证情况

已验证

render-checkpass4.0 / 543s

常见问题

整个区块都需要使用深色吗?

需要。页面背景和图表面板都使用深色,文字保持浅色且清晰可读,并用青绿色和陶土色区分数据。

可以替换图表数据吗?

可以。请明确标注单位和报告周期,并核对流入减去流出是否等于所写的净结余。

环形图能展示六个月内的余额变化吗?

不能。环形图只能展示汇总流入在流出与留存结余之间的分配。若要展示随时间变化的余额,需要各期数据和带零基线的时间图表。

相似技能