Skills — 仪表盘生成器
1. 功能介绍
jimubi-dashboard 是 Claude Code 的 AI Skill，能够将自然语言需求自动转换为栅格布局数据仪表盘，并通过 API 自动创建到积木报表系统中。
核心能力：
- 24 列栅格布局，亮色主题，卡片式设计
- 适用于日常数据看板、运营统计面板
- 支持数字卡片、折线图、柱状图、饼图、表格、排行榜、仪表盘等组件
- 智能栅格分配：数字卡片 4 个一行，图表半宽或全宽自动排列
- 卡片头与 ECharts 标题智能去重
下载地址： https://github.com/jeecgboot/skills注意：仪表盘与大屏使用完全不同的布局和样式体系，大屏请使用
jimubi-bigscreen。
2. 前置条件
- 积木报表系统已部署并可访问
- 已获取系统的
X-Access-Token（参考 Token 获取方式） - Claude Code 已安装
jimubi-dashboardSkill
3. 使用方式
在 Claude Code 中直接用自然语言描述看板需求即可。以下是触发关键词：
创建仪表盘、生成仪表盘、做一个仪表盘、数据看板、做一个看板、
创建看板、数据面板、统计看板、运营看板、KPI看板、
create dashboard、data kanban
4. 支持的组件
| 组件类型 | 说明 | 适用场景 |
|---|---|---|
| 数字卡片 | 展示核心指标数值，支持同比/环比 | KPI 指标展示 |
| 折线图 | 展示数据趋势变化 | 时序数据、趋势分析 |
| 柱状图 | 对比不同类别的数据 | 分类对比、排名 |
| 饼图 | 展示数据占比分布 | 占比分析、构成分析 |
| 表格 | 数据列表展示 | 明细数据、列表查看 |
| 排行榜 | 排名展示组件 | TOP N 排名展示 |
| 仪表盘 | 仪表盘样式的指标展示 | 达成率、完成度 |
5. 智能栅格布局规则
仪表盘采用 24 列栅格布局系统，AI 会根据组件类型自动分配宽度：
| 组件类型 | 默认栅格宽度 | 排列方式 |
|---|---|---|
| 数字卡片 | 6 列 | 4 个一行 |
| 图表（半宽） | 12 列 | 两个图表并排 |
| 图表（全宽） | 24 列 | 单个图表独占一行 |
| 表格 | 24 列 | 通常独占一行 |
| 排行榜 | 12 列 | 可并排展示 |
5.1 卡片头与 ECharts 标题去重
当 ECharts 图表本身有标题时，AI 会智能判断是否需要显示卡片头部标题，避免标题重复显示。
6. 实战示例
6.1 创建运营数据看板
第一步：描述需求
帮我创建一个运营数据看板，包含今日访客数、订单量、
销售额、转化率4个数字卡片，近30天访客趋势折线图、
各渠道订单柱状图、用户来源饼图和最新订单表格
第二步：AI 询问配置
AI 会询问后端地址和 Token：
请提供以下信息：
1. 积木报表后端地址（如 http://localhost:8085）
2. X-Access-Token
第三步：AI 展示配置摘要
## 仪表盘配置摘要
- 名称：运营数据看板
- 布局：24 列栅格
- 主题：亮色
| 组件 | 类型 | 栅格宽度 |
|------|------|---------|
| 今日访客数 | 数字卡片 | 6 列 |
| 订单量 | 数字卡片 | 6 列 |
| 销售额 | 数字卡片 | 6 列 |
| 转化率 | 数字卡片 | 6 列 |
| 访客趋势 | 折线图 | 12 列 |
| 渠道订单 | 柱状图 | 12 列 |
| 用户来源 | 饼图 | 12 列 |
| 最新订单 | 表格 | 24 列 |
确认生成？(y/n)
第四步：自动生成
确认后，AI 自动通过 API 创建仪表盘，返回访问地址。
6.2 更多提示词示例
销售统计看板：
创建销售统计仪表盘，包含月销售额、月订单数、客单价、
退货率4个指标卡片，月度销售趋势折线图，各区域销售柱状图
项目管理看板：
做一个项目管理看板，显示进行中项目数、已完成数、延期数、
总工时4个数字卡片，项目进度表格，任务状态饼图
HR 人事看板：
创建HR数据看板，包含在职人数、本月入职、本月离职、
离职率4个卡片，各部门人数柱状图，学历分布饼图，近12月入离职趋势折线图
7. 仪表盘 vs 大屏对比
| 对比项 | 仪表盘（dashboard） | 大屏（bigscreen） |
|---|---|---|
| 布局方式 | 24 列栅格布局 | 绝对定位（像素坐标） |
| 主题风格 | 亮色主题 | 深色主题 |
| 适配方式 | 响应式适配 | 固定 1920×1080 |
| 适用场景 | 日常看板、运营统计 | 监控室、展厅、展示墙 |
| 设计风格 | 卡片式设计 | 科技感边框/装饰 |
| Skill 名称 | jimubi-dashboard | jimubi-bigscreen |
8. Token 获取方式
- 打开积木报表系统并登录
- 按 F12 打开浏览器开发者工具
- 切换到 Network 标签页
- 点击任意请求，在 Request Headers 中找到
X-Access-Token - 复制完整的 Token 值
9. 安装方法
将 Skill 目录复制到 Claude Code 的 skills 目录：
# macOS / Linux
cp -r jimubi-dashboard ~/.claude/skills/
# Windows
xcopy jimubi-dashboard %USERPROFILE%\.claude\skills\jimubi-dashboard\ /E /I
10. 常见问题
10.1 仪表盘创建后在哪里查看？
在积木报表系统的仪表盘设计器列表中可以找到新创建的仪表盘，点击即可查看。
10.2 数字卡片的数据从哪来？
AI 生成的仪表盘默认使用静态示例数据。创建后可以在仪表盘设计器中绑定真实的数据集或 API 接口。
10.3 我应该用仪表盘还是大屏？
- 仪表盘：日常看板、亮色主题、栅格布局，适合办公场景
- 大屏：全屏展示、深色科技风、固定分辨率，适合监控室和展厅
如需创建大屏，请使用 AI大屏生成器。