Dynamic UI

📊 JSON 驱动,一键生成数据可视化图片

将数据动态渲染为可视化图表、表格和仪表板图片,适合快速生成报告截图与数据展示。

收藏
4.7k
安装
1.4k
版本
1.1.0
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心用法

Dynamic UI Skill 是一套基于 HTML 模板和 wkhtmltoimage 的数据可视化渲染工具,支持将 JSON 数据转换为图片格式的表格、柱状图、KPI 卡片、信息卡片及复合仪表板。用户通过命令行调用 ./scripts/render.sh,指定模板类型、传入 JSON 数据、选择主题风格,即可输出 PNG 图片。

关键特性:

  • 模板丰富:内置 table、chart-bar、stats、card、dashboard 五种核心模板
  • 主题切换:支持 modern(紫蓝渐变)、dark(深色模式)、minimal(极简白)三种视觉风格
  • 灵活输入:支持 --data 参数直接传 JSON 或管道从 stdin 读取
  • 输出多样:可指定文件路径输出,或默认以 base64 格式输出到 stdout

显著优点

1. 零代码可视化:无需编写 HTML/CSS,纯 JSON 驱动即可生成专业级图表
2. 跨平台支持:通过 apt/brew 安装依赖,兼容 Ubuntu/Debian 和 macOS

3. 集成友好:输出图片可直接用于消息推送(如 Telegram),提供标准工作流示例

4. 轻量依赖:仅需 wkhtmltopdf + jq,无重型浏览器或复杂运行时

潜在缺点与局限性

  • 静态输出:仅生成图片,无交互功能(如悬停提示、 drill-down)
  • 字体依赖:需安装 fonts-noto-color-emoji 确保表情符号正常渲染
  • 模板封闭:自定义模板需修改脚本,无动态模板加载机制
  • 性能瓶颈:wkhtmltoimage 基于 QtWebKit,大数据量或复杂布局时渲染较慢
  • 安全风险:HTML 模板若未转义用户输入,可能存在 XSS 注入风险(生成图片前执行恶意脚本)

适合人群

  • 运维/数据工程师:快速生成监控指标截图
  • 产品经理/分析师:制作轻量级数据报告
  • Bot 开发者:为聊天机器人添加富媒体数据展示能力

常规风险

| 风险类型 | 说明 | 缓解建议 |
|---------|------|---------|
| 命令注入 | JSON 解析失败或特殊字符可能导致 shell 注入 | 严格校验输入 JSON 格式,避免直接拼接命令 |
| 路径遍历 | `--output` 参数若未限制,可能覆盖系统文件 | 限制输出路径在指定目录(如 ~/.openclaw/media/)|
| 信息泄露 | 敏感数据渲染后留存于临时文件 | 及时清理临时文件,避免使用可预测文件名 |
| 依赖漏洞 | wkhtmltopdf 历史版本存在已知 CVE | 保持依赖更新,关注 wkhtmltopdf 安全公告 |

Dynamic UI 内容

examples文件夹
scripts文件夹
templates文件夹
themes文件夹
手动下载zip · 15.3 kB
card.jsonapplication/json
请选择文件