一个现代化、可扩展的实时数据仪表盘系统，专为企业级应用设计，提供丰富的数据可视化和自定义功能。

• 📊 多种图表类型：折线图、柱状图、饼图、雷达图、热力图等
• 🎨 可自定义仪表盘：拖拽式布局，自由配置组件
• 🔄 实时数据更新：基于Socket.io的双向通信
• 👤 用户认证与权限管理：JWT认证，角色权限控制
• 📱 响应式设计：完美适配各种设备尺寸
• 💾 数据持久化：SQLite数据库存储
• 📤 数据导出：支持JSON、CSV、Excel格式
• 🔍 数据筛选与搜索：强大的数据查询功能
• 🔧 API接口：完整的RESTful API
• 🎯 主题切换：支持浅色/深色主题

• Node.js - JavaScript运行时
• Express - Web应用框架
• Socket.io - 实时双向通信
• TypeScript - 类型安全
• SQLite - 轻量级数据库
• Prisma - ORM框架
• JWT - 认证机制

• React 18 - UI框架
• TypeScript - 类型安全
• Tailwind CSS - 样式框架
• Vite - 构建工具
• Recharts - 图表库
• React Query - 数据管理
• React Router - 路由管理
• Zustand - 状态管理
• Socket.io Client - 实时通信客户端

dashflow/
├── backend/          # 后端服务
│   ├── src/
│   │   ├── controllers/     # 控制器
│   │   ├── middleware/      # 中间件
│   │   ├── models/          # 数据模型
│   │   ├── routes/          # 路由
│   │   ├── services/        # 业务逻辑
│   │   ├── socket/          # Socket.io配置
│   │   └── index.ts         # 入口文件
│   ├── package.json
│   ├── tsconfig.json
│   └── .env
├── frontend/         # 前端应用
│   ├── src/
│   │   ├── components/      # 组件
│   │   ├── hooks/           # 自定义hooks
│   │   ├── pages/           # 页面
│   │   ├── services/        # API服务
│   │   ├── store/           # 状态管理
│   │   ├── types/           # 类型定义
│   │   ├── utils/           # 工具函数
│   │   └── main.tsx         # 入口文件
│   ├── public/
│   ├── package.json
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── tailwind.config.js
├── package.json      # 根配置文件
└── README.md         # 项目说明

• Node.js >= 18.0.0
• npm >= 9.0.0

# 安装根依赖
npm install

# 安装所有工作区依赖
npm install --workspaces

# 同时启动前后端开发服务器
npm run dev

# 或分别启动
npm run dev:backend
npm run dev:frontend

npm run build

npm start

# 服务器配置
PORT=3000
NODE_ENV=development

# JWT配置
JWT_SECRET=your-secret-key
JWT_EXPIRES_IN=24h

# 数据库配置
DATABASE_URL=file:./dev.db

# API配置
VITE_API_URL=http://localhost:3000/api
VITE_SOCKET_URL=http://localhost:3000

# 应用配置
VITE_APP_NAME=DashFlow
VITE_APP_VERSION=1.0.0

• POST /api/auth/login - 用户登录
• POST /api/auth/register - 用户注册
• GET /api/auth/me - 获取当前用户信息

• GET /api/dashboards - 获取所有仪表盘
• POST /api/dashboards - 创建仪表盘
• GET /api/dashboards/:id - 获取单个仪表盘
• PUT /api/dashboards/:id - 更新仪表盘
• DELETE /api/dashboards/:id - 删除仪表盘

• GET /api/charts - 获取所有图表
• POST /api/charts - 创建图表
• GET /api/charts/:id - 获取单个图表
• PUT /api/charts/:id - 更新图表
• DELETE /api/charts/:id - 删除图表

• GET /api/data/:source - 获取数据源
• POST /api/data/:source - 推送数据
• GET /api/data/export - 导出数据

1. 在 frontend/src/components/charts/ 目录下创建新的图表组件
2. 在 frontend/src/types/charts.ts 中添加类型定义
3. 在 frontend/src/hooks/useChartData.ts 中添加数据处理逻辑

1. 在 backend/src/services/ 目录下创建新的数据源服务
2. 在 backend/src/routes/data.ts 中添加路由
3. 在 backend/src/socket/handlers.ts 中添加实时数据处理

MIT License

欢迎提交Issue和Pull Request！

• 项目地址：https://cnb.cool/bugcool/Wanlink/DashFlow
• 邮箱：Cici@wanzon.cn

---

DashFlow - 让数据可视化更简单、更强大！