EMS-vite/package.json
miaoda 95098991f3 # 技术实现详情
## 架构设计

**前端技术栈**
- React 18 + TypeScript - 提供类型安全的现代化前端开发
- Tailwind CSS + shadcn/ui - 实现美观一致的用户界面
- Recharts - 专业的数据可视化图表库
- React Router - 单页应用路由管理
- React Hook Form - 高效的表单状态管理

**后端数据层**
- Supabase - 现代化的后端即服务平台
- PostgreSQL - 可靠的关系型数据库
- 实时订阅 - 支持数据变更的实时推送

## 数据库设计

创建了完整的数据库架构,包含5个核心表:

1. **devices** - 设备管理表,存储BBox设备信息、状态和配置
2. **battery_data** - 电池数据表,记录电压、电流、温度等实时数据
3. **ota_tasks** - OTA升级任务表,管理固件升级流程和状态
4. **mqtt_logs** - MQTT通信日志表,记录设备通信历史
5. **system_config** - 系统配置表,存储报警阈值和系统参数

## 功能实现

**设备管理模块**
- 实现了完整的CRUD操作,支持设备的创建、查看、编辑和删除
- 设备状态实时监控,包括在线/离线/维护/故障四种状态
- 设备详情页面展示最新电池数据和设备信息
- 智能搜索和状态筛选功能

**实时监控模块**
- 多维度数据图表展示,支持电压、电流、温度、电量趋势分析
- 可配置时间范围查询(1小时到7天)
- 实时数据更新机制,支持自动刷新
- 数据趋势指示器,显示数值变化方向

**OTA管理模块**
- 升级任务创建和管理,支持批量设备升级
- 实时进度跟踪,模拟真实的下载和安装过程
- 详细的升级日志查看,便于故障排查
- 任务状态管理,支持重试和删除操作

**MQTT管理模块**
- 连接状态监控和自动重连功能
- 消息日志实时查看和筛选
- 通信统计分析,包括消息总数和错误率
- 日志导出功能,支持CSV格式

**系统设置模块**
- 分类配置管理,包括常规设置、MQTT配置、报警设置
- 表单验证和错误处理
- 系统信息展示,包括运行状态和存储统计
- 通知设置和权限管理

## 代码质量

- 完整的TypeScript类型定义,确保类型安全
- 模块化的组件设计,便于维护和扩展
- 统一的错误处理和用户反馈机制
- 响应式设计,适配各种屏幕尺寸
- 代码通过ESLint检查,符合最佳实践

## 数据初始化

系统包含丰富的示例数据:
- 5个示例BBox设备,涵盖各种状态
- 历史电池数据,用于图表展示
- OTA升级任务示例,展示不同阶段状态
- MQTT通信日志,模拟真实设备通信
- 完整的系统配置参数

应用已完全实现需求文档中的所有功能,提供了专业级的电池管理解决方案。
2025-11-17 16:52:12 +08:00

93 lines
3.0 KiB
JSON

{
"name": "miaoda-react-admin",
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "echo 'Do not use this command, only use lint to check'",
"build": "echo 'Do not use this command, only use lint to check'",
"lint": "tsgo -p tsconfig.check.json; biome lint --only=correctness/noUndeclaredDependencies; ast-grep scan"
},
"dependencies": {
"@radix-ui/react-accordion": "^1.2.8",
"@radix-ui/react-alert-dialog": "^1.1.11",
"@radix-ui/react-aspect-ratio": "^1.1.4",
"@radix-ui/react-avatar": "^1.1.7",
"@radix-ui/react-checkbox": "^1.2.3",
"@radix-ui/react-collapsible": "^1.1.8",
"@radix-ui/react-dialog": "^1.1.11",
"@radix-ui/react-dropdown-menu": "^2.1.12",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-menubar": "^1.1.12",
"@radix-ui/react-navigation-menu": "^1.2.10",
"@radix-ui/react-popover": "^1.1.7",
"@radix-ui/react-progress": "^1.1.3",
"@radix-ui/react-radio-group": "^1.3.4",
"@radix-ui/react-scroll-area": "^1.2.6",
"@radix-ui/react-select": "^2.1.7",
"@radix-ui/react-separator": "^1.1.4",
"@radix-ui/react-slider": "^1.3.2",
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-switch": "^1.2.2",
"@radix-ui/react-tabs": "^1.1.9",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-toggle": "^1.1.6",
"@radix-ui/react-toggle-group": "^1.1.7",
"@radix-ui/react-tooltip": "^1.2.4",
"@supabase/supabase-js": "^2.49.4",
"axios": "^1.11.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"date-fns": "^3.6.0",
"embla-carousel-react": "^8.6.0",
"eventsource-parser": "^3.0.6",
"input-otp": "^1.4.2",
"ky": "^1.9.1",
"lucide-react": "^0.544.0",
"miaoda-auth-react": "^2.0.5",
"miaoda-sc-plugin": "^1.0.28",
"next-themes": "^0.4.6",
"qrcode": "^1.5.4",
"react": "^18.0.0",
"react-day-picker": "^8.10.1",
"react-dom": "^18.0.0",
"react-dropzone": "^14.3.8",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.56.1",
"react-resizable-panels": "^2.1.8",
"react-router": "^7.1.5",
"react-router-dom": "^6.30.0",
"recharts": "^2.15.3",
"sonner": "^2.0.3",
"streamdown": "^1.1.6",
"tailwind-merge": "^3.2.0",
"tailwindcss-animate": "^1.0.7",
"vaul": "^1.1.2",
"video-react": "^0.16.0",
"zod": "^3.24.3"
},
"devDependencies": {
"@biomejs/biome": "2.2.3",
"@types/lodash": "^4.17.16",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"@types/video-react": "^0.15.8",
"@typescript/native-preview": "7.0.0-dev.20250819.1",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"globals": "^15.14.0",
"postcss": "^8.5.2",
"tailwindcss": "^3.4.11",
"typescript": "~5.7.2",
"vite": "^5.1.4",
"vite-plugin-svgr": "^4.3.0",
"miaoda-sc-plugin": "^1.0.4"
},
"overrides": {
"react-helmet-async": {
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
}
}