Skills — 仪表盘自动生成

1. 功能介绍

jimubi-dashboard 是 Claude Code 的 AI Skill，能够将自然语言的看板需求转换为 drag page 配置，并通过 API 自动创建栅格布局数据仪表盘。

核心能力：

24 列栅格布局，亮色主题，卡片式设计
适用于日常数据看板、运营统计面板
支持数字卡片、折线图、柱状图、饼图、表格、排行榜、仪表盘等组件
智能栅格分配：数字卡片 4 个一行，图表半宽或全宽自动排列
卡片头与 ECharts 标题智能去重

注意：仪表盘与大屏使用完全不同的布局和样式体系，大屏请使用 jimubi-bigscreen。

不确定该用哪个 Skill？请查看 AI Skills 技能清单。下载地址：https://github.com/jeecgboot/skills

2. 前置条件

使用前需要准备两个信息：

信息	获取方式	示例
API 地址	JeecgBoot 后端服务地址	`https://api3.boot.jeecg.com`
X-Access-Token	浏览器 F12 → Network → 任意请求的 Request Headers	`eyJhbGciOiJIUzI1NiIs...`

3. 使用方式

在 Claude Code 中直接用自然语言描述看板需求即可。以下是触发关键词：

创建仪表盘、生成仪表盘、做一个仪表盘、数据看板、
做一个看板、创建看板、数据面板、统计看板、运营看板、
create dashboard、generate dashboard、design dashboard、
data kanban、KPI dashboard

4. 仪表盘特征

特征	说明
布局方式	24 列栅格，坐标和尺寸单位为栅格单位（如 x=0, y=0, w=6, h=17）
默认主题	`default`，白色背景，深色文字
无背景图	仪表盘通常不设背景图
卡片头	支持卡片头，但图表组件的 `card.title` 应留空（避免标题重复）

仪表盘颜色体系：

白底 #FFFFFF
深灰标题 #464646
浅灰轴标签 #909198
浅灰网格 #F3F3F3
边框 #E8E8E8

5. 栅格布局规则

5.1 推荐组件尺寸

组件类型	推荐 w	推荐 h	说明
JNumber	6	17	数字卡片，4 个一行正好 24 列
JLine/JBar/JSmoothLine	12-14	28-35	图表，通常半宽或更宽
JPie/JRing/JRose	10-12	28-35	饼图/环形图
JHorizontalBar	12	28-35	横向柱状图
JTable/JCommonTable	12	30-40	数据表格
JScrollTable	12	30-40	滚动表格
JScrollRankingBoard	12	30-35	排行榜
JGauge	6-8	25-30	仪表盘表盘
JLiquid	6	25-30	水球图

5.2 布局原则

总宽度 24 列，组件 w 之和不要超过 24
第一行通常放 4 个 JNumber（w=6×4=24）
第二行放图表组合（如 JLine w=14 + JPie w=10 = 24）
第三行放表格/排行等

6. 支持的组件类型

用户描述关键词	组件 component	说明
数字/KPI/指标/总数	`JNumber`	数字指标卡（带卡片头）
柱状图	`JBar`	基础柱状图
横向柱状图	`JHorizontalBar`	水平柱状图
折线图/趋势	`JLine`	折线图
曲线图	`JSmoothLine`	平滑曲线
柱线混合	`JMixLineBar`	柱状+折线混合
饼图	`JPie`	饼图
环形图	`JRing`	环形图
玫瑰图	`JRose`	南丁格尔玫瑰图
表盘	`JGauge`	仪表盘表盘
水球图	`JLiquid`	水球图
进度条	`JProgress`	进度条
雷达图	`JRadar`	雷达图
漏斗图	`JFunnel`	漏斗图
地图	`JAreaMap`	区域地图
数据表格	`JTable` / `JCommonTable`	数据表格
滚动表格	`JScrollTable`	自动滚动表格
排行榜	`JScrollRankingBoard`	滚动排行榜
日历	`JCalendar`	日历组件

7. 交互流程

Step 1: 解析用户需求

AI 从用户描述中提取：

信息	默认值	示例
页面名称	用户指定	"运营数据看板"
主题	default	default
组件列表	从描述中解析	用户总数(数字)、增长趋势(折线)、来源分布(饼图)

Step 2: 展示设计摘要并确认

AI 展示仪表盘设计摘要，包括页面名称、主题、组件列表（名称、类型、位置、尺寸、数据源），等待用户确认后执行。

Step 3: 调用 API 创建仪表盘

使用共通工具库 bi_utils.py 创建仪表盘：

from bi_utils import *

init_api('https://api3.boot.jeecg.com', 'your-token')

# 创建仪表盘（style='default'，栅格坐标）
page_id = create_page('运营数据看板', style='default', theme='default')

# 第一行：4 个数字卡片（w=6×4=24，h=17）
add_number(page_id, '总用户数', x=0, y=0, w=6, h=17, value=15890, suffix='人')
add_number(page_id, '今日活跃', x=6, y=0, w=6, h=17, value=3256, suffix='人')
add_number(page_id, '今日收入', x=12, y=0, w=6, h=17, value=89600, prefix='¥')
add_number(page_id, '转化率', x=18, y=0, w=6, h=17, value=23.5, suffix='%')

# 第二行：折线图 + 饼图
add_chart(page_id, 'JLine', '用户增长趋势', x=0, y=17, w=14, h=35,
          categories=['周一','周二','周三','周四','周五','周六','周日'],
          series=[{'name':'新增用户', 'data':[120,200,150,80,70,110,130]}])

add_chart(page_id, 'JPie', '用户来源', x=14, y=17, w=10, h=35,
          pie_data=[
              {'name':'微信','value':40},
              {'name':'APP','value':30},
              {'name':'网页','value':20},
              {'name':'其他','value':10},
          ])

save_page(page_id)
print(f'仪表盘创建成功！ID: {page_id}')

Step 4: 输出结果

创建完成后输出页面 ID、名称、预览地址和组件数量。

8. 可用的快捷函数

API 初始化

init_api(api_base, token) — 初始化 API 地址和 Token

页面管理

create_page(name, style='default', theme='default') — 创建仪表盘
query_page(page_id) — 查询页面详情
list_pages(style='default') — 列表查询
save_page(page_id) — 保存设计
delete_page(page_id, physical) — 删除
recover_page(page_id) — 恢复
copy_page(page_id) — 复制

添加组件（栅格坐标）

add_number(page_id, title, x, y, w, h, value, prefix, suffix) — 数字指标
add_chart(page_id, chart_type, title, x, y, w, h, categories, series, pie_data) — 图表
add_table(page_id, title, x, y, w, h, columns, data) — 数据表格
add_scroll_table(page_id, title, x, y, w, h, columns, data) — 滚动表格
add_ranking(page_id, title, x, y, w, h, data) — 排行榜
add_text(page_id, title, x, y, w, h, content, font_size, color) — 文本
add_image(page_id, title, x, y, w, h, src) — 图片
add_gauge(page_id, title, x, y, w, h, value, max_val, unit, color) — 仪表盘表盘
add_liquid(page_id, title, x, y, w, h, value, color) — 水球图
add_component(page_id, component, title, x, y, w, h, config) — 通用组件

9. 仪表盘标题规则

图表组件：card.title 留空

图表组件（JBar/JLine/JPie/JRing 等）在仪表盘模式下 card.title 应为空字符串，标题通过 ECharts option.title.text 显示。如果两者都设置，标题会重复出现。

bi_utils.py 的 add_chart() 已自动处理。

JNumber 等非图表组件

可以使用 card.title 显示标题。

大屏 vs 仪表盘标题对比

特征	大屏（bigScreen）	仪表盘（default）
图表标题	`option.title.text`（ECharts 内部）	`option.title.text`（ECharts 内部）
card.title（图表）	必须为空 `''`	必须为空 `''`（避免重复）
card.title（JNumber等）	为空 `''`	可填标题
页面主标题	JText 组件（fontSize 40+）	不需要

10. 编辑与删除

编辑已有仪表盘

from bi_utils import *
init_api('https://api3.boot.jeecg.com', 'your-token')

page = query_page(page_id)
add_chart(page_id, 'JBar', '新增图表', x=0, y=52, w=12, h=35,
          categories=['A','B','C'], series=[{'name':'值','data':[10,20,30]}])
save_page(page_id)

删除仪表盘

delete_page(page_id)                # 软删除
delete_page(page_id, physical=True) # 硬删除
recover_page(page_id)               # 恢复

11. 修改组件样式

参考 references/bi-comp-option-config.md 获取每种组件的完整配置项路径。

关键规则：

颜色使用色值（#000000），不用英文单词
customColor 格式：[{color1:'#xxx',color:'#xxx'}]
卡片头样式：option.card.textStyle.color、option.card.headColor
背景色：config.background（仪表盘默认 #FFFFFF）
边框色：config.borderColor（仪表盘默认 #E8E8E8）

12. 常见问题

问题	解决方案
Token 过期（401）	重新获取 X-Access-Token
`updateCount` 不匹配	重新查询页面获取最新值
组件不显示	检查 dataType、chartData（必须是 JSON 字符串）、option 是否完整
图表缩成小点	检查 `config.size` 是否用了像素值，仪表盘需 `w75` / `h11`
标题重复显示	图表组件的 `option.card.title` 设为空，仅用 `option.title.text`
布局错乱	确认使用栅格坐标（不是像素），w 总和 ≤ 24
chartData 不渲染	`config.chartData` 必须是 `json.dumps(...)` 后的字符串
多系列图表格式	chartData 需要 `type` 字段区分系列
HTTPS 连接问题	api3.boot.jeecg.com 使用 HTTP 协议

1. 功能介绍​

2. 前置条件​

3. 使用方式​

4. 仪表盘特征​

5. 栅格布局规则​

5.1 推荐组件尺寸​

5.2 布局原则​

6. 支持的组件类型​

7. 交互流程​

Step 1: 解析用户需求​

Step 2: 展示设计摘要并确认​

Step 3: 调用 API 创建仪表盘​

Step 4: 输出结果​

8. 可用的快捷函数​

API 初始化​

页面管理​

添加组件（栅格坐标）​

9. 仪表盘标题规则​

图表组件：card.title 留空​

JNumber 等非图表组件​

大屏 vs 仪表盘标题对比​

10. 编辑与删除​

编辑已有仪表盘​

删除仪表盘​

11. 修改组件样式​

12. 常见问题​