## 架构设计 **前端技术栈** - 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通信日志,模拟真实设备通信 - 完整的系统配置参数 应用已完全实现需求文档中的所有功能,提供了专业级的电池管理解决方案。
93 lines
3.0 KiB
JSON
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"
|
|
}
|
|
}
|
|
}
|