面向前端初学者的教学向数据可视化大屏项目。基于 Vue 3 + TypeScript + ECharts，采用国风科技风视觉，内置可实时演化的 mock 数据，帮助你从 0 到 1 理解一个真实数据大屏的工程结构。
预览图由内置截图脚本自动生成（
npm run screenshot），默认输出到docs/screenshots/dashboard-1920x1080.png。如果你尚未生成截图，请先按下文步骤启动项目并执行截图命令。
这是一个 1920×1080 的教学示例大屏，用等比缩放适配不同窗口，展示访问趋势、分类占比、课程排行、能力雷达、数据中枢拓扑以及实时动态告警等常见看板模块。
它适合：
- 正在学习 Vue 3 组件化开发的前端初学者
- 想了解数据大屏工程结构的同学
- 希望理解 mock 数据、service 分层、状态管理如何协作的学习者
- 使用 AI 辅助编程练习工程组织方式的学习者
通过阅读与运行本项目，你可以理解一个数据大屏从数据、服务、状态到图表组件是如何组织在一起的。
- 1920×1080 等比缩放布局，16:9 不变形、无滚动条
- 国风科技风统一视觉：靛青 / 鎏金 / 青碧配色 + 水墨底纹 + HUD 描边
- 四个核心指标卡片（访问量、实时订单、活跃用户、系统可用率）
- 访问 / 订单双折线趋势图
- 学习行为分类占比环形图
- 热门课程横向排行榜
- 综合能力雷达图
- 数据中枢拓扑图：中心节点 + 环绕业务节点 + 动态能量连线
- 实时动态 / 告警滚动列表
- 内置实时数据模拟，页面按固定间隔平滑刷新
- mock / api 双数据源开关，便于后续接入真实后端
| 分类 | 选型 |
|---|---|
| 前端框架 | Vue 3（<script setup> + 组合式 API） |
| 构建工具 | Vite |
| 语言 | TypeScript（strict 模式） |
| 图表 | ECharts |
| 状态管理 | Pinia |
| 请求库 | Axios |
| 接口 mock | MSW（Mock Service Worker） |
| 单元测试 | Vitest |
| 端到端测试 | Playwright |
| 代码规范 | ESLint + Prettier + Stylelint |
- 顶部标题栏与实时时钟
- 顶部核心指标卡片
- 访问趋势折线图
- 分类占比环形图
- 课程排行柱状图
- 能力雷达图
- 数据中枢拓扑图
- 底部实时动态 / 告警滚动列表
项目已实现前端实时模拟，数据像真实业务系统一样逐帧演化（当前仍为纯前端 mock，未接入真实后端）：
- 核心指标持续变化：访问量只增不减、实时订单上下波动、活跃用户按比例浮动、可用率偶尔跌破阈值触发预警
- 趋势图滑动刷新：每帧追加新时间点并移除最旧点，窗口稳定保持 8-10 个点
- 实时动态每隔数秒新增一条，最多保留 8 条，
warning出现概率受控 - 数据中枢节点活跃度小幅漂移，坐标固定，状态随数值切换颜色
- 排行榜与分类占比低频变化，分类总和恒为 100
- 能力雷达低频小幅变化
所有实时逻辑集中在 src/mocks/realtimeDashboardSimulator.ts，通过 MSW handler → service → store 的链路驱动页面刷新，实时代码不散落到组件中。
.
├─ index.html
├─ scripts/
│ └─ capture-dashboard.mjs # 自动截图脚本
├─ src/
│ ├─ app/ # 应用入口与全局样式
│ │ ├─ App.vue
│ │ ├─ main.ts
│ │ └─ styles.css
│ ├─ components/ # 通用组件（面板 / 指标卡 / 头部）
│ ├─ charts/ # ECharts 图表组件与主题
│ ├─ layouts/ # 大屏等比缩放布局
│ ├─ views/ # 页面（DashboardView）
│ ├─ services/ # 数据访问层（http / dataSource / dashboardService）
│ ├─ mocks/ # mock 数据、实时模拟器、MSW
│ ├─ stores/ # Pinia 状态管理
│ ├─ utils/ # 格式化 / 自适应工具
│ ├─ logs/ # 统一日志模块
│ ├─ types/ # 领域模型类型
│ └─ tests/ # 单元测试与 E2E 测试
├─ docs/screenshots/ # 项目展示截图
└─ 各类配置文件（vite / tsconfig / eslint / prettier / stylelint / playwright）
环境要求：Node.js 18 及以上。
安装依赖：
npm install首次运行需生成 MSW worker 文件（已在依赖安装后可用）：
npm run prepare:msw启动开发服务器（端口固定为 10001）：
npm run dev -- --host 127.0.0.1 --port 10001浏览器访问：
http://127.0.0.1:10001/
npm run dev— 启动开发服务器npm run build— 类型检查并构建生产包npm run preview— 预览构建产物npm run lint— 运行 ESLint 与 Stylelintnpm run format— 使用 Prettier 格式化代码npm run test— 运行 Vitest 单元测试npm run test:e2e— 运行 Playwright 端到端测试npm run screenshot— 生成大屏截图到docs/screenshots/
项目通过环境变量 VITE_DATA_SOURCE 切换数据源：
mock（默认）：请求/dashboard由 MSW 拦截，返回实时模拟器推进后的数据api：走真实后端接口，基础地址由VITE_API_BASE_URL指定
页面与 store 只依赖 dashboardService，不直接接触 mock 或 axios 细节，因此从 mock 切换到真实接口时业务代码无需改动。
项目内置截图脚本，用于生成 GitHub 展示图：
# 先在一个终端启动 dev server
npm run dev -- --host 127.0.0.1 --port 10001
# 再在另一个终端执行截图
npm run screenshot截图默认保存到：
docs/screenshots/dashboard-1920x1080.png
脚本会等待页面关键内容渲染并让实时数据刷新一轮后再截图，同时收集控制台错误，若存在错误将以非 0 退出码结束。
- TypeScript strict 类型检查
- ESLint 代码规范校验
- Stylelint 样式校验
- Vitest 单元测试（格式化函数、实时模拟器、数据服务）
- Playwright 端到端测试（页面渲染与控制台错误检查）
在提交前建议依次运行：
npm run lint
npm run test
npm run build对前端初学者与初级开发者来说，你可以从本项目学习：
- Vue 3 项目的组织与组件化拆分
- 数据大屏的整体布局与等比缩放适配
- ECharts 图表封装与主题统一
- mock 数据、service 分层与数据源开关
- Pinia 状态管理与实时轮询控制
- 自动化测试（单元 + 端到端）
- 自动截图与工程规范配置
- 接入真实后端 API
- 增加更多图表与联动交互
- 主题与配色可切换
- 更完善的视觉与告警规则
- 补充更多测试用例
本项目基于 MIT License 开源。