仿字节跳动数据大屏可视化系统
#

项目简介
#

字节跳动数据大屏可视化系统是一个企业级实时数据监控大屏，模拟抖音/头条场景下的用户增长与内容消费数据监控。系统采用前后端分离架构，通过 WebSocket 实时推送数据，支持多维度图表展示和 AI 智能图表配置生成。

核心亮点
#

实时数据推送：基于 STOMP over WebSocket，实现秒级数据刷新（在线人数 2s，DAU 趋势 5s，排行榜/饼图 10s）
7 种可视化图表：覆盖 DAU 趋势、用户分布、内容结构、实时在线、热点排行、留存漏斗、POI 竞品分析
AI 图表生成：集成 DeepSeek API，通过 SSE 流式返回智能图表配置，无 API Key 时自动 Mock 回退
三级权限体系：匿名浏览 → 注册待审批 → 普通用户(USER) → 管理员(ADMIN)，JWT 无状态认证
响应式设计：支持移动端、平板、桌面端的自适应布局，F 型视觉动线
双数据库适配：开发环境 H2 内存数据库，生产环境 MySQL 8.0，无缝切换

功能特性
#

数据大屏看板
#

编号	图表模块	说明	更新频率
01	DAU 趋势图	日活跃用户数随时间变化趋势，支持时间范围缩放	5s
02	实时在线统计	当前在线用户数量，数字滚动动画效果	2s
03	用户分布地图	中国地图热力图，展示各区域用户密度分布	10s
04	内容消费结构	饼图/环形图，按视频、图文、直播等类型展示消费占比	10s
05	热点内容排行 TOP10	榜单式展示最热门内容，含标题、播放量、增长趋势	10s
06	留存漏斗分析	从新增到次日/7 日/30 日留存转化的漏斗图	—
07	POI 竞品分析	地理位置相关的竞品数据对比分析	—

AI 智能图表
#

自然语言输入：通过聊天面板描述需求，AI 自动生成 ECharts 图表配置
SSE 流式返回：基于 Server-Sent Events，实时展示 AI 生成过程
图表实时预览：生成的图表配置即时渲染预览
Mock 回退：未配置 DeepSeek API Key 时，自动使用预设模板数据

用户管理
#

注册与登录：用户名 + 密码 + 邮箱注册，JWT Token 认证（24h 有效期）
审批工作流：新用户注册后默认 PENDING 状态，需管理员审批通过后方可访问大屏
角色管理：管理员可在后台查看用户列表、审批/拒绝用户、删除用户
路由级权限控制：前端路由守卫 + 后端方法级安全注解双重保障

快速开始
#

环境要求
#

软件	最低版本
Node.js	18.x
Java JDK	17+
Maven	3.8+
MySQL	8.0（生产环境）

1. 克隆项目
#

git clone <repo-url>
cd bigscreen-dev

2. 启动后端
#

cd backend

# 设置环境变量（Windows PowerShell）
$env:JWT_SECRET = "your-secret-key-at-least-256-bits"

# 可选：配置 DeepSeek API Key（不配置则 AI 功能使用 Mock 数据）
$env:DEEPSEEK_API_KEY = "sk-your-api-key"

# 启动（默认 H2 内存数据库）
mvn spring-boot:run

后端启动后监听 http://localhost:8080，H2 控制台地址 http://localhost:8080/h2-console。

3. 启动前端
#

cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

前端启动后访问 http://localhost:3000。

4. 默认账户
#

角色	用户名	密码	说明
管理员	`admin`	`admin123`	系统初始化自动创建，拥有全部权限

项目结构
#

bigscreen-dev/
├── backend/                          # Spring Boot 后端
│   ├── pom.xml                       # Maven 依赖配置
│   └── src/main/
│       ├── java/com/bigscreen/
│       │   ├── BigScreenApplication.java    # 启动入口
│       │   ├── config/
│       │   │   ├── SecurityConfig.java      # Spring Security 无状态 JWT 配置
│       │   │   ├── JwtAuthFilter.java       # JWT 认证过滤器
│       │   │   ├── WebSocketConfig.java     # STOMP 消息代理配置
│       │   │   ├── CorsConfig.java          # CORS 跨域配置
│       │   │   ├── DataInitializer.java     # 初始化默认管理员账户
│       │   │   └── MyMetaObjectHandler.java # MyBatis-Plus 自动填充
│       │   ├── controller/
│       │   │   ├── AuthController.java      # 认证接口（注册/登录/当前用户）
│       │   │   ├── AdminController.java     # 管理接口（用户审批/删除）
│       │   │   └── AiController.java        # AI 接口（SSE 流式图表生成）
│       │   ├── service/
│       │   │   ├── AuthService.java         # 认证业务逻辑
│       │   │   ├── UserService.java         # 用户 CRUD + 审批
│       │   │   ├── WebSocketService.java    # WebSocket 定时推送 Mock 数据
│       │   │   └── AiService.java           # DeepSeek API 代理 + Mock 回退
│       │   ├── entity/
│       │   │   └── User.java                # 用户实体（t_user 表映射）
│       │   ├── dto/
│       │   │   ├── LoginRequest.java        # 登录请求
│       │   │   ├── RegisterRequest.java     # 注册请求
│       │   │   ├── LoginResponse.java       # 登录响应
│       │   │   ├── UserInfo.java            # 用户信息
│       │   │   └── ChartDataMessage.java    # WebSocket 数据消息体
│       │   ├── mapper/
│       │   │   └── UserMapper.java          # MyBatis-Plus BaseMapper
│       │   └── util/
│       │       ├── JwtUtil.java             # JWT 令牌工具类
│       │       └── MockDataGenerator.java   # 随机模拟数据生成器
│       └── resources/
│           ├── application.yml              # 应用配置
│           └── schema.sql                   # 数据库初始化 DDL
│
├── frontend/                         # Vue 3 前端
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   ├── index.html
│   └── src/
│       ├── main.ts                   # 应用入口
│       ├── App.vue                   # 根组件
│       ├── api/
│       │   ├── index.ts              # Axios 实例 + 拦截器
│       │   ├── admin.ts              # 管理员 API
│       │   └── ai.ts                 # AI SSE 流式请求
│       ├── stores/
│       │   ├── auth.ts               # 认证状态（Pinia）
│       │   ├── dashboard.ts          # 大屏数据状态
│       │   └── theme.ts              # 主题状态
│       ├── composables/
│       │   ├── useBreakpoint.ts      # 响应式断点检测
│       │   ├── useChartInit.ts       # ECharts 实例管理 + 自适应
│       │   └── useWebSocket.ts       # STOMP WebSocket 连接管理
│       ├── router/
│       │   └── index.ts              # 路由表 + 导航守卫
│       ├── types/
│       │   └── index.ts              # TypeScript 类型定义
│       ├── styles/
│       │   ├── variables.css         # CSS 自定义属性
│       │   └── auth-common.css       # 认证页公共样式
│       ├── views/
│       │   ├── LandingPage.vue       # 落地页（公开）
│       │   ├── LoginPage.vue         # 登录页
│       │   ├── RegisterPage.vue      # 注册页
│       │   ├── PendingPage.vue       # 待审批提示页
│       │   ├── DashboardPage.vue     # 数据大屏主页
│       │   └── AdminPage.vue         # 管理员后台
│       ├── components/
│       │   ├── charts/
│       │   │   ├── DauTrendChart.vue      # DAU 趋势折线图
│       │   │   ├── UserMapChart.vue       # 用户分布地图
│       │   │   ├── ContentPieChart.vue    # 内容消费饼图
│       │   │   ├── OnlineCounter.vue      # 实时在线计数器
│       │   │   ├── HotRanking.vue         # 热点内容排行
│       │   │   ├── RetentionFunnel.vue    # 留存漏斗图
│       │   │   ├── PoiAnalysis.vue        # POI 竞品分析
│       │   │   └── PlaceholderChart.vue   # 占位图表
│       │   ├── ai/
│       │   │   ├── AiChatPanel.vue        # AI 对话抽屉面板
│       │   │   └── ChartPreview.vue       # AI 生成的图表预览
│       │   └── layout/
│       │       ├── DashboardLayout.vue    # 大屏 F 型栅格布局
│       │       ├── TopBar.vue             # 顶部导航栏
│       │       └── ChartCard.vue          # 通用图表卡片容器
│       └── utils/
│           └── index.ts                   # 通用工具函数
│
└── docs/                             # 设计文档
    └── superpowers/                  # 需求与设计规范

系统架构
#

┌──────────────────────────────────────────────────────────────────┐
│                          Browser                                 │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │                   Vue 3 SPA (Vite)                          │  │
│  │  ┌──────────┐  ┌──────────┐  ┌───────────────┐            │  │
│  │  │ Pinia    │  │ ECharts  │  │ Element Plus  │            │  │
│  │  │ 状态管理  │  │ 图表渲染  │  │   UI 组件库   │            │  │
│  │  └──────────┘  └──────────┘  └───────────────┘            │  │
│  │         │              │              │                     │  │
│  │         ▼              ▼              ▼                     │  │
│  │  ┌────────────────────────────────────────────────────┐    │  │
│  │  │          composables (组合式函数)                    │    │  │
│  │  │  useWebSocket  useChartInit  useBreakpoint          │    │  │
│  │  └────────────────────────────────────────────────────┘    │  │
│  │         │              │                                    │  │
│  └─────────┼──────────────┼────────────────────────────────────┘  │
│            │              │                                       │
│       REST API       WebSocket                                    │
│       (Axios)     (STOMP/SockJS)                                 │
└────────────┬──────────────┬───────────────────────────────────────┘
             │              │
             ▼              ▼
┌─────────────────────────────────────────────────────┐
│              Spring Boot 3.2.5                       │
│                                                       │
│  ┌──────────────┐  ┌───────────────┐  ┌───────────┐ │
│  │ Spring       │  │ WebSocket     │  │ CORS      │ │
│  │ Security +   │  │ STOMP Broker  │  │ Config    │ │
│  │ JWT Filter   │  │ /topic/data   │  │           │ │
│  └──────┬───────┘  └───────┬───────┘  └───────────┘ │
│         │                  │                          │
│         ▼                  ▼                          │
│  ┌──────────────────────────────────────┐            │
│  │         Controller 层                 │            │
│  │  AuthController  AdminController     │            │
│  │  AiController                        │            │
│  └────────────────┬─────────────────────┘            │
│                   │                                  │
│                   ▼                                  │
│  ┌──────────────────────────────────────┐            │
│  │          Service 层                   │            │
│  │  AuthService  UserService            │            │
│  │  WebSocketService  AiService         │            │
│  └────┬──────────────┬──────────────────┘            │
│       │              │                                │
│       ▼              ▼                                │
│  ┌──────────┐  ┌──────────────────┐                  │
│  │ MyBatis- │  │  OkHttp Client   │                  │
│  │ Plus     │  │  (DeepSeek SSE)  │                  │
│  └────┬─────┘  └────────┬─────────┘                  │
│       │                 │                             │
└───────┼─────────────────┼─────────────────────────────┘
        │                 │
        ▼                 ▼
┌──────────────┐  ┌─────────────────┐
│  H2 / MySQL  │  │  DeepSeek API   │
│   数据库      │  │  (AI 图表生成)   │
└──────────────┘  └─────────────────┘

数据流说明
#

REST API 通信：前端 Axios → /api/* 接口 → Controller → Service → Mapper → 数据库（认证、管理操作、AI 生成）
WebSocket 推送：服务端 @Scheduled 定时生成 → SimpMessagingTemplate 广播 → /topic/data → 前端 STOMP.js 订阅 → Pinia Store → ECharts 渲染
SSE 流式：前端发起 → /api/ai/generate-chart → AiService 代理 DeepSeek API → SseEmitter 逐字流式返回 → 前端 EventSource 接收 → 图表预览

技术栈
#

前端
#

技术	版本	用途
Vue	3.5	UI 框架（Composition API + `<script setup>`）
Vite	8	构建工具
TypeScript	6	类型安全
Pinia	2	状态管理
Vue Router	4	路由管理（含导航守卫）
ECharts	6	数据可视化图表
Element Plus	2	UI 组件库
Axios	—	HTTP 客户端
STOMP.js	—	WebSocket STOMP 客户端
SockJS	—	WebSocket 降级兼容

后端
#

技术	版本	用途
Spring Boot	3.2.5	应用框架
Spring Security	6	认证与授权
jjwt	0.12.5	JWT 令牌生成与验证
MyBatis-Plus	3.5.6	ORM 持久层
H2	—	开发环境内存数据库
MySQL	8.0	生产环境关系型数据库
BCrypt	—	密码加密
OkHttp	4	HTTP 客户端（DeepSeek API 调用）
Lombok	—	样板代码精简
Spring WebSocket	—	STOMP 消息代理

API 接口
#

REST API（共 8 个端点）
#

认证接口 — `/api/auth`
#

方法	路径	说明	认证
`POST`	`/api/auth/register`	用户注册	否
`POST`	`/api/auth/login`	用户登录，返回 JWT Token	否
`GET`	`/api/auth/me`	获取当前登录用户信息	是

管理接口 — `/api/admin`
#

方法	路径	说明	角色
`GET`	`/api/admin/users`	获取所有用户列表	ADMIN
`PUT`	`/api/admin/users/{id}/approve`	审批通过用户	ADMIN
`PUT`	`/api/admin/users/{id}/reject`	拒绝用户注册	ADMIN
`DELETE`	`/api/admin/users/{id}`	删除用户	ADMIN

AI 接口 — `/api/ai`
#

方法	路径	说明	认证
`POST`	`/api/ai/generate-chart`	AI 图表配置生成（SSE 流式）	否

WebSocket 端点
#

端点	协议	目的地	说明	频率
`/ws/data`	STOMP + SockJS	`/topic/data`	实时数据广播	推送频率见下表

消息类型
#

消息类型	内容	推送频率
`DATA_UPDATE`	DAU 趋势数据、内容饼图数据	5s / 10s
`ONLINE_COUNT`	实时在线人数	2s
`RANKING_UPDATE`	热点内容排行 TOP10	10s

环境变量
#

变量名	是否必需	默认值	说明
`JWT_SECRET`	必需	无	JWT 签名密钥，建议 256 位以上随机字符串
`DEEPSEEK_API_KEY`	可选	无	DeepSeek API Key，未配置时 AI 功能自动回退到 Mock 模式

配置示例
#

Windows PowerShell:

$env:JWT_SECRET = "my-super-secret-key-at-least-256-bits-long"
$env:DEEPSEEK_API_KEY = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Linux / macOS (bash/zsh):

export JWT_SECRET="my-super-secret-key-at-least-256-bits-long"
export DEEPSEEK_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

IDE 配置（IntelliJ IDEA）： 在 Run Configuration → Environment Variables 中添加上述变量。

截图说明
#

数据大屏主页
#

大屏采用深色科技风主题，F 型视觉动线布局：

顶部栏：显示系统名称、当前时间、实时在线人数滚动数字，以及用户头像/AI 助手按钮
左上区域：DAU 趋势折线图，展示过去 24 小时日活跃用户变化曲线，支持鼠标悬停查看具体数值
中上区域：用户分布中国地图，以热力图颜色深浅展示各省市用户密度
右上区域：内容消费结构饼图，按视频/图文/直播/音频四大类展示消费占比百分比
左下区域：热点内容排行 TOP10 榜单，每条内容展示标题、播放量、24h 增长趋势箭头
中下区域：留存漏斗分析，从新增用户逐步收窄至次日、7 日、30 日留存率
右下区域：POI 竞品分析，双维度对比展示本平台与竞品在各 POI 维度的差异

AI 对话面板
#

点击右上角 AI 助手图标，从右侧滑出抽屉面板：

在输入框输入图表需求（如"帮我生成一张最近 7 天的用户增长柱状图"）
AI 通过 SSE 逐字流式返回 ECharts 图表配置 JSON
右侧实时预览渲染结果
可以将生成的图表添加到主大屏中替换对应位置图表

管理员后台
#

列表式展示所有注册用户：用户名、邮箱、角色、审批状态（PENDING / APPROVED / REJECTED）、注册时间，支持审批通过、拒绝、删除操作。

许可证
#

本项目采用 MIT License 开源协议。

贡献指南
#

欢迎提交 Issue 和 Pull Request。在提交代码前，请确保：

遵循项目现有的代码风格
所有新功能都有对应的类型定义
提交信息使用中文，格式：<type>: <描述>

本系统为字节跳动风格的企业数据大屏教学演示项目。

仿字节跳动数据大屏可视化系统#

项目简介#

核心亮点#

功能特性#

数据大屏看板#

AI 智能图表#

用户管理#

快速开始#

环境要求#

1. 克隆项目#

2. 启动后端#

3. 启动前端#

4. 默认账户#

项目结构#

系统架构#

数据流说明#

技术栈#

前端#

后端#

API 接口#

REST API（共 8 个端点）#

认证接口 — /api/auth#

管理接口 — /api/admin#

AI 接口 — /api/ai#

WebSocket 端点#

消息类型#

环境变量#

配置示例#

截图说明#

数据大屏主页#

AI 对话面板#

管理员后台#

许可证#

贡献指南#