跳到主要内容

Skills — 大屏生成器

1. 功能介绍​

jimubi-bigscreen 是 Claude Code 的 AI Skill，能够将自然语言需求自动转换为全屏数据可视化大屏，并通过 API 自动创建到积木报表系统中。

核心能力：

  • 全屏展示模式，绝对定位（像素坐标），深色主题
  • 默认 1920×1080 分辨率，适用于监控室、展厅、展示墙
  • 丰富组件支持：数字翻牌、折线图、柱状图、饼图、地图、滚动表格、排行榜等
  • 装饰元素：边框（JDragBorder）、装饰条（JDragDecoration）增强视觉效果
  • 自定义背景图和主题配色

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

下载地址： https://github.com/jeecgboot/skills

2. 前置条件​

  • 积木报表系统已部署并可访问
  • 已获取系统的 X-Access-Token（参考 Token 获取方式）
  • Claude Code 已安装 jimubi-bigscreen Skill

3. 使用方式​

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

创建大屏、生成大屏、新建大屏、设计大屏、做一个大屏、BI大屏、
数据大屏、可视化大屏、监控大屏、展厅大屏、create big screen

4. 支持的组件​

组件类型说明适用场景
数字翻牌动态数字翻转展示核心 KPI 指标展示
折线图展示数据趋势变化时序数据、趋势分析
柱状图对比不同类别的数据分类对比、排名
饼图展示数据占比分布占比分析、构成分析
地图地理数据可视化展示区域分布、全国数据
滚动表格自动滚动的数据表格实时数据流、订单列表
排行榜排名展示组件TOP N 排名展示

4.1 装饰元素​

大屏支持丰富的装饰元素，提升视觉效果：

装饰组件说明
JDragBorder（边框）为图表和内容区域添加科技感边框
JDragDecoration（装饰条）分隔区域、增强视觉层次感

5. 实战示例​

5.1 创建销售监控大屏​

第一步：描述需求

帮我创建一个销售数据监控大屏，包含今日销售额翻牌器、
近7天销售趋势折线图、各区域销售柱状图、产品类别饼图、
全国销售地图和实时订单滚动表格

第二步：AI 询问配置

AI 会询问后端地址和 Token：

请提供以下信息：
1. 积木报表后端地址（如 http://localhost:8085）
2. X-Access-Token

第三步：AI 展示配置摘要

## 大屏配置摘要
- 名称：销售数据监控大屏
- 分辨率：1920 × 1080
- 主题：深色

| 组件 | 类型 | 位置 |
|------|------|------|
| 今日销售额 | 数字翻牌 | 顶部居中 |
| 销售趋势 | 折线图 | 左侧中部 |
| 区域销售 | 柱状图 | 右侧中部 |
| 产品类别 | 饼图 | 右下角 |
| 全国销售 | 地图 | 中央 |
| 实时订单 | 滚动表格 | 底部 |

确认生成？(y/n)

第四步：自动生成

确认后，AI 自动通过 API 创建大屏，返回访问地址。

5.2 更多提示词示例​

基础监控大屏：

创建一个服务器监控大屏，包含CPU使用率、内存使用率、磁盘使用率、网络流量

运营数据大屏：

做一个电商运营大屏，展示今日GMV、订单数、用户数翻牌器，
24小时交易趋势折线图，各品类销售柱状图，全国订单地图

生产监控大屏：

创建工厂生产监控大屏，包含产量翻牌器、良品率仪表盘、
各产线产量柱状图、近7天产量趋势折线图、实时告警滚动表格

6. 布局说明​

大屏采用绝对定位布局，所有组件通过像素坐标精确定位：

属性说明默认值
画布宽度大屏总宽度1920px
画布高度大屏总高度1080px
定位方式绝对定位（x, y 坐标）—
背景主题深色背景默认深色

7. 大屏 vs 仪表盘对比​

对比项大屏（bigscreen）仪表盘（dashboard）
布局方式绝对定位（像素坐标）24 列栅格布局
主题风格深色主题亮色主题
分辨率固定 1920×1080响应式适配
适用场景监控室、展厅、展示墙日常看板、运营统计
装饰元素支持边框、装饰条卡片式设计
Skill 名称jimubi-bigscreenjimubi-dashboard

8. Token 获取方式​

  1. 打开积木报表系统并登录
  2. 按 F12 打开浏览器开发者工具
  3. 切换到 Network 标签页
  4. 点击任意请求，在 Request Headers 中找到 X-Access-Token
  5. 复制完整的 Token 值

9. 安装方法​

将 Skill 目录复制到 Claude Code 的 skills 目录：

# macOS / Linux
cp -r jimubi-bigscreen ~/.claude/skills/

# Windows
xcopy jimubi-bigscreen %USERPROFILE%\.claude\skills\jimubi-bigscreen\ /E /I

10. 常见问题​

10.1 大屏创建后在哪里查看？​

在积木报表系统的大屏设计器列表中可以找到新创建的大屏，点击预览即可全屏查看。

10.2 可以修改已创建的大屏吗？​

可以在同一会话中继续用自然语言描述修改需求，AI 会通过 API 更新大屏配置。也可以直接在大屏设计器中手动编辑。

10.3 我应该用大屏还是仪表盘？​

  • 大屏：全屏展示、深色科技风、固定分辨率，适合监控室和展厅
  • 仪表盘：日常看板、亮色主题、栅格布局，适合办公场景

如需创建仪表盘，请使用 AI仪表盘生成器。