971 lines
53 KiB
Markdown
971 lines
53 KiB
Markdown
# 智慧农业系统架构分析与设计方案
|
||
|
||
## 1. 现有系统架构分析
|
||
|
||
### 1.1 技术栈概览
|
||
|
||
基于对现有代码的深入分析，当前系统采用以下技术栈：
|
||
|
||
**前端框架**
|
||
- React 18.3.1 + TypeScript
|
||
- Vite 6.3.5 + SWC 构建工具
|
||
- Tailwind CSS v4.1.3 样式框架
|
||
|
||
**UI组件库**
|
||
- Radix UI 原子组件（@radix-ui/*）
|
||
- shadcn/ui 组件库
|
||
- Lucide React 图标库
|
||
- Sonner 通知系统
|
||
|
||
**状态管理**
|
||
- React Context (AuthContext)
|
||
- 本地 useState 管理组件状态
|
||
|
||
**数据处理**
|
||
- React Hook Form v7.55.0 表单处理
|
||
- date-fns 日期处理
|
||
- Recharts 图表库
|
||
- QRCode 生成库
|
||
|
||
### 1.2 项目结构分析
|
||
|
||
```
|
||
src/
|
||
├── components/
|
||
│ ├── ui/ # shadcn/ui 基础组件库
|
||
│ ├── auth/ # 认证相关组件
|
||
│ │ ├── AuthContext.tsx # 认证上下文管理
|
||
│ │ ├── Login.tsx # 登录页面
|
||
│ │ └── CaptchaInput.tsx # 验证码输入
|
||
│ ├── dashboard/ # 7大业务系统主组件
|
||
│ │ ├── MachineryManagement.tsx # 智能农机管理
|
||
│ │ ├── FieldManagement.tsx # 地块信息管理
|
||
│ │ ├── OperationManagement.tsx # 农事操作管理
|
||
│ │ ├── AssetManagement.tsx # 农业资产管理
|
||
│ │ ├── AIModelSystem.tsx # AI作物模型
|
||
│ │ ├── IrrigationControl.tsx # 水肥控制系统
|
||
│ │ └── ConfigManagement.tsx # 中心配置管理
|
||
│ ├── machinery/ # 农机管理子组件 (50+ 文件)
|
||
│ ├── field/ # 地块管理子组件
|
||
│ ├── operation/ # 农事操作子组件
|
||
│ ├── asset/ # 资产管理子组件
|
||
│ ├── ai-model/ # AI模型子组件
|
||
│ ├── irrigation/ # 灌溉控制子组件
|
||
│ └── config/ # 配置管理子组件
|
||
├── types/ # TypeScript 类型定义
|
||
│ ├── navigation.ts # 导航菜单类型
|
||
│ ├── machinery.ts # 农机数据类型
|
||
│ ├── auth.ts # 认证相关类型
|
||
│ └── ...
|
||
├── lib/
|
||
│ └── authStorage.ts # 认证存储管理
|
||
├── App.tsx # 主应用组件
|
||
├── main.tsx # 应用入口
|
||
└── index.css # 全局样式
|
||
```
|
||
|
||
### 1.3 路由系统分析
|
||
|
||
**当前路由机制：**
|
||
- 基于路径字符串的自定义路由系统
|
||
- 使用 `activeTab` 状态管理当前业务系统（7个主标签）
|
||
- 使用 `activePath` 状态管理当前页面路径
|
||
- 路径格式：`/module/submodule/page`
|
||
|
||
**路由流程：**
|
||
1. App.tsx 根据路径加载对应的业务系统组件
|
||
2. 业务系统组件根据 activePath 渲染具体页面
|
||
3. 导航组件处理系统间切换和页面跳转
|
||
|
||
**路由层级结构：**
|
||
```
|
||
/ (系统级)
|
||
├── /machinery/ (农机系统)
|
||
│ ├── /archive/entry (农机档案录入)
|
||
│ ├── /driver/info (驾驶员信息)
|
||
│ └── ...
|
||
├── /field/ (地块系统)
|
||
├── /operation/ (农事系统)
|
||
├── /asset/ (资产系统)
|
||
├── /ai-model/ (AI模型系统)
|
||
├── /irrigation/ (灌溉系统)
|
||
└── /config/ (配置系统)
|
||
```
|
||
|
||
### 1.4 认证系统分析
|
||
|
||
**认证流程：**
|
||
1. 基于 JWT token 的认证机制
|
||
2. 自动 token 刷新（24小时有效期）
|
||
3. 支持密码登录和手机验证码登录
|
||
4. 自动登录默认管理员账号（admin/admin123）
|
||
|
||
**认证组件：**
|
||
- AuthContext：全局认证状态管理
|
||
- Login.tsx：登录页面组件
|
||
- authStorage.ts：认证存储和验证逻辑
|
||
|
||
**用户权限体系：**
|
||
- 企业租户隔离
|
||
- 基于角色的权限控制（RBAC）
|
||
- 细粒度权限配置
|
||
|
||
### 1.5 组件架构模式
|
||
|
||
**业务组件模式：**
|
||
1. **模块组件**：每个业务系统有一个主组件，负责路由分发
|
||
2. **页面组件**：具体的功能页面组件
|
||
3. **功能组件**：可复用的功能模块组件
|
||
4. **UI组件**：shadcn/ui 基础组件
|
||
|
||
**数据流模式：**
|
||
- Props 自上而下传递
|
||
- 状态提升到父组件管理
|
||
- Mock 数据直接在组件中定义
|
||
|
||
**表单处理模式：**
|
||
- React Hook Form + Zod 验证
|
||
- 支持多标签页复杂表单
|
||
- 实时验证和错误提示
|
||
|
||
### 1.6 数据模型分析
|
||
|
||
**核心业务实体：**
|
||
1. **农机管理**：MachineryRecord, Driver, Task, Maintenance
|
||
2. **地块管理**：Field, SoilData, WeatherData, SpatialData
|
||
3. **农事操作**：Operation, Crop, Planting, Harvesting
|
||
4. **资产管理**：Asset, Equipment, Inventory, Procurement
|
||
5. **AI模型**：Model, Prediction, Recommendation, Analysis
|
||
6. **灌溉控制**：Irrigation, Fertilizer, Sensor, Control
|
||
7. **系统配置**：User, Role, Permission, Enterprise, SystemConfig
|
||
|
||
**数据关系特点：**
|
||
- 农业业务逻辑复杂，实体关系紧密
|
||
- 支持多租户数据隔离
|
||
- 时间序列数据较多（监测数据）
|
||
|
||
### 1.7 UI/UX 设计系统
|
||
|
||
**设计主题：**
|
||
- 绿色农业主题（green-600 主色调）
|
||
- 现代化扁平设计风格
|
||
- 99.5% 视觉一致性要求
|
||
|
||
**组件规范：**
|
||
- shadcn/ui + Tailwind CSS 组件系统
|
||
- 响应式设计（移动端优化）
|
||
- 深色/浅色主题支持
|
||
- 无障碍性合规（WCAG AA）
|
||
|
||
**交互模式：**
|
||
- 表格组件支持筛选、排序、搜索
|
||
- 复杂表单采用标签页组织
|
||
- 状态颜色编码（运行中/空闲/待维护/报废）
|
||
|
||
## 2. 现有系统架构优势与问题
|
||
|
||
### 2.1 架构优势
|
||
|
||
1. **技术栈现代化**：React 18 + TypeScript + Vite，开发体验良好
|
||
2. **组件库完善**：shadcn/ui 提供了高质量的基础组件
|
||
3. **业务逻辑清晰**：7大业务系统分工明确
|
||
4. **类型安全**：完整的 TypeScript 类型定义
|
||
5. **认证体系完善**：支持多种登录方式和权限控制
|
||
|
||
### 2.2 架构问题
|
||
|
||
1. **路由系统简陋**：缺乏专业路由库，路径硬编码
|
||
2. **状态管理混乱**：各组件独立管理状态，缺乏全局状态管理
|
||
3. **数据层缺失**：没有统一的API请求层和数据管理
|
||
4. **代码组织混乱**：组件文件过多，缺乏清晰的分层架构
|
||
5. **测试缺失**：没有单元测试和集成测试
|
||
6. **构建优化不足**：缺乏代码分割和懒加载
|
||
7. **Mock数据固化**：Mock数据与组件代码耦合
|
||
|
||
## 3. 新架构设计方案
|
||
|
||
### 3.1 设计原则
|
||
|
||
1. **功能一致性**：确保与原系统功能完全一致
|
||
2. **技术现代化**：采用最佳实践和成熟技术方案
|
||
3. **代码质量**：高内聚、低耦合，易于维护和扩展
|
||
4. **开发效率**：清晰的开发规范和工具链
|
||
5. **性能优化**：代码分割、懒加载、缓存策略
|
||
|
||
### 3.2 技术栈升级
|
||
|
||
**核心框架（保持稳定）：**
|
||
- React 18.3.1 + TypeScript
|
||
- Vite + SWC 构建工具
|
||
- Tailwind CSS + shadcn/ui
|
||
|
||
**新增技术方案：**
|
||
- React Router v6：专业路由管理
|
||
- Zustand：轻量级状态管理
|
||
- TanStack Query：数据获取和缓存
|
||
- MSW：Mock Service Worker 统一Mock管理
|
||
- Vitest + Testing Library：测试框架
|
||
- ESLint + Prettier：代码规范
|
||
|
||
### 3.3 新项目结构设计
|
||
|
||
基于路由系统重构方案，采用特性优先的现代化架构：
|
||
|
||
```
|
||
D:\code\repotest\smart-crop-x\ # 原项目（保留不变）
|
||
├── 📂 crop-x/ # 🆕 全新的重构项目
|
||
│ ├── 📂 config/ # 🆕 特性优先配置系统
|
||
│ │ ├── 📂 types/ # 配置类型定义
|
||
│ │ │ └── 📄 config.types.ts # 完整的配置类型系统
|
||
│ │ ├── 📂 environments/ # 环境配置
|
||
│ │ │ ├── 📄 development.ts # 开发环境配置
|
||
│ │ │ ├── 📄 test.ts # 测试环境配置
|
||
│ │ │ ├── 📄 uat.ts # 用户测试环境配置
|
||
│ │ │ ├── 📄 production.ts # 生产环境配置
|
||
│ │ │ └── 📄 index.ts # 环境配置入口
|
||
│ │ ├── 📂 features/ # 特性配置
|
||
│ │ │ ├── 📄 agricultural-machinery.ts # 农机管理特性配置
|
||
│ │ │ ├── 📄 land-information.ts # 地块信息特性配置
|
||
│ │ │ ├── 📄 farming-operation.ts # 农事操作特性配置
|
||
│ │ │ ├── 📄 agricultural-asset.ts # 农业资产特性配置
|
||
│ │ │ ├── 📄 ai-crop-model.ts # AI作物模型特性配置
|
||
│ │ │ ├── 📄 irrigation-control.ts # 灌溉控制特性配置
|
||
│ │ │ ├── 📄 central-config.ts # 配置管理特性配置
|
||
│ │ │ └── 📄 index.ts # 特性配置入口
|
||
│ │ ├── 📂 services/ # 服务配置（预留）
|
||
│ │ ├── 📂 build/ # 构建配置（预留）
|
||
│ │ ├── 📄 config-manager.ts # 配置管理器
|
||
│ │ ├── 📄 index.ts # 配置系统入口
|
||
│ │ └── 📄 README.md # 配置系统使用文档
|
||
│ ├── 📂 router/ # 🚀 路由管理核心
|
||
│ │ ├── 📄 agriculturalMachineryRoutes.js # 🚙 智能农机管理系统
|
||
│ │ ├── 📄 landInformationRoutes.js # 🌾 地块信息管理系统
|
||
│ │ ├── 📄 farmingOperationRoutes.js # 📋 农事操作管理系统
|
||
│ │ ├── 📄 agriculturalAssetRoutes.js # 📦 农业资产管理系统
|
||
│ │ ├── 📄 aiCropModelRoutes.js # 🤖 AI作物模型精准决策系统
|
||
│ │ ├── 📄 waterFertilizerControlRoutes.js # 💧 水肥一体化控制系统
|
||
│ │ ├── 📄 centralConfigRoutes.js # ⚙️ 中心配置管理系统
|
||
│ │ ├── 📄 index.js # 路由汇总和导出
|
||
│ │ └── 📄 guard.js # 路由守卫
|
||
│ ├── 📂 apis/ # 🆕 API管理系统
|
||
│ │ ├── 📄 index.js # API统一入口，环境配置
|
||
│ │ ├── 📄 interceptor.js # 请求拦截器，认证处理
|
||
│ │ └── 📂 subModules/ # 7大业务模块API
|
||
│ │ ├── 📄 agriculturalMachinery.js # 🚙 农机系统API
|
||
│ │ ├── 📄 landInformation.js # 🌾 地块信息API
|
||
│ │ ├── 📄 farmingOperation.js # 📋 农事操作API
|
||
│ │ ├── 📄 agriculturalAsset.js # 📦 农业资产API
|
||
│ │ ├── 📄 aiCropModel.js # 🤖 AI作物模型API
|
||
│ │ ├── 📄 waterFertilizerControl.js # 💧 水肥控制API
|
||
│ │ └── 📄 centralConfig.js # ⚙️ 配置管理API
|
||
│ ├── 📂 stores/ # Zustand状态管理
|
||
│ │ ├── 📄 authStore.js # 认证状态管理
|
||
│ │ ├── 📂 agriculturalMachinery/ # 🚙 智能农机管理系统状态
|
||
│ │ │ ├── 📄 machineryStore.js # 农机档案状态
|
||
│ │ │ ├── 📄 driverStore.js # 驾驶员档案状态
|
||
│ │ │ ├── 📄 loadStore.js # 负载管理状态
|
||
│ │ │ ├── 📄 monitoringStore.js # 实时监控状态
|
||
│ │ │ ├── 📄 faultStore.js # 故障诊断状态
|
||
│ │ │ ├── 📄 operationStore.js # 精准作业状态
|
||
│ │ │ ├── 📄 analysisStore.js # 数据分析状态
|
||
│ │ │ ├── 📄 schedulingStore.js # 调度管理状态
|
||
│ │ │ └── 📄 securityStore.js # 安全安防状态
|
||
│ │ ├── 📂 landInformation/ # 🌾 地块信息管理系统状态
|
||
│ │ │ ├── 📄 fieldStore.js # 地块档案状态
|
||
│ │ │ ├── 📄 mapStore.js # 地图管理状态
|
||
│ │ │ ├── 📄 analysisStore.js # 空间分析状态
|
||
│ │ │ ├── 📄 monitoringStore.js # 环境监测状态
|
||
│ │ │ ├── 📄 suitabilityStore.js # 适宜性评价状态
|
||
│ │ │ ├── 📄 comparisonStore.js # 对比分析状态
|
||
│ │ │ └── 📄 riskStore.js # 风险预警状态
|
||
│ │ ├── 📂 farmingOperation/ # 📋 农事操作管理系统状态
|
||
│ │ │ ├── 📄 planningStore.js # 农事计划状态
|
||
│ │ │ ├── 📄 taskStore.js # 农事任务状态
|
||
│ │ │ ├── 📄 executionStore.js # 农事执行状态
|
||
│ │ │ ├── 📄 calendarStore.js # 农事日历状态
|
||
│ │ │ ├── 📄 archiveStore.js # 农事档案状态
|
||
│ │ │ ├── 📄 knowledgeStore.js # 知识库状态
|
||
│ │ │ ├── 📄 performanceStore.js # 绩效管理状态
|
||
│ │ │ └── 📄 issueStore.js # 问题协同状态
|
||
│ │ ├── 📂 agriculturalAsset/ # 📦 农业资产管理系统状态
|
||
│ │ │ ├── 📄 basicStore.js # 基础信息状态
|
||
│ │ │ ├── 📄 purchaseStore.js # 采购管理状态
|
||
│ │ │ ├── 📄 inventoryStore.js # 库存管理状态
|
||
│ │ │ ├── 📄 requisitionStore.js # 物资领用状态
|
||
│ │ │ ├── 📄 returnStore.js # 物资归还状态
|
||
│ │ │ ├── 📄 equipmentStore.js # 农资农具状态
|
||
│ │ │ └── 📄 reportStore.js # 可视化报表状态
|
||
│ │ ├── 📂 aiCropModel/ # 🤖 AI作物模型精准决策系统状态
|
||
│ │ │ ├── 📄 dataCenterStore.js # 数据感知中心状态
|
||
│ │ │ ├── 📄 modelIntegrationStore.js # 模型接入集成状态
|
||
│ │ │ ├── 📄 modelApplicationStore.js # 模型应用中心状态
|
||
│ │ │ ├── 📄 decisionStore.js # 智能决策生成状态
|
||
│ │ │ ├── 📄 supportStore.js # 智能决策支持状态
|
||
│ │ │ ├── 📄 applicationStore.js # 决策应用状态
|
||
│ │ │ ├── 📄 knowledgeStore.js # AI知识库状态
|
||
│ │ │ └── 📄 monitoringStore.js # 监控中心状态
|
||
│ │ ├── 📂 waterFertilizerControl/ # 💧 水肥一体化控制系统状态
|
||
│ │ │ ├── 📄 managementStore.js # 水肥机管理状态
|
||
│ │ │ ├── 📄 irrigationStore.js # 智能灌溉状态
|
||
│ │ │ ├── 📄 formulaStore.js # 施肥配方管理状态
|
||
│ │ │ ├── 📄 controlStore.js # 水肥控制状态
|
||
│ │ │ └── 📄 monitoringStore.js # 实时监测与预警状态
|
||
│ │ └── 📂 centralConfig/ # ⚙️ 中心配置管理系统状态
|
||
│ │ ├── 📄 tenantStore.js # 租户管理状态
|
||
│ │ ├── 📄 userStore.js # 用户管理状态
|
||
│ │ ├── 📄 systemStore.js # 系统参数状态
|
||
│ │ ├── 📄 monitorStore.js # 系统监控状态
|
||
│ │ └── 📄 messageStore.js # 消息中心状态
|
||
│ ├── 📂 pages/ # 🆕 页面组件 - 7大业务模块完整层级结构
|
||
│ │ ├── 📂 AgriculturalMachinery/ # 🚙 智能农机管理系统页面
|
||
│ │ │ ├── 📂 Archive/ # B级：农机档案
|
||
│ │ │ │ ├── 📂 MachineryEntry/ # C级：农机档案录入与维护
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ClassificationManagement/ # C级：农机分类与标签管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 QRCodeManagement/ # C级：农机二维码管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DriverArchive/ # B级：驾驶员档案
|
||
│ │ │ │ ├── 📂 DriverInfoManagement/ # C级：驾驶员信息管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DriverTaskManagement/ # C级：驾驶员任务管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 LoadManagement/ # B级：负载管理
|
||
│ │ │ │ ├── 📂 LoadDeviceManagement/ # C级：负载管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 LoadTypeManagement/ # C级：负载类型
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 LoadParameterManagement/ # C级：负载参数
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 Monitoring/ # B级：设备实时监控与定位
|
||
│ │ │ │ ├── 📂 RealTimeLocationTracking/ # C级：实时位置追踪
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 WorkStatusMonitoring/ # C级：工作状态监控
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 OperationDataMonitoring/ # C级：作业数据监控
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 FaultDiagnosis/ # B级：远程诊断与故障预警
|
||
│ │ │ │ ├── 📂 FaultWarning/ # C级：故障诊断与预警
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 HealthAssessment/ # C级：健康评估
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ParameterMonitoring/ # C级：运行参数监测
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 PrecisionOperation/ # B级：精准作业管理与支持
|
||
│ │ │ │ ├── 📂 OperationRecord/ # C级：作业数据记录
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RoutePlanning/ # C级：作业路线规划
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 PlanDispatch/ # C级：作业方案下发
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DrivingCockpit/ # C级：农机驾驶舱
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DataAnalysis/ # B级：数据管理与分析报告
|
||
│ │ │ │ ├── 📂 OperationAnalysis/ # C级：作业数据分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 HistoricalDataComparison/ # C级：历史数据查询与对比
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 Scheduling/ # B级：农机管理与调度
|
||
│ │ │ │ ├── 📂 TaskAssignment/ # C级：任务分配
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RealTimeDispatch/ # C级：实时调度监控
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TrackPlayback/ # C级：农机作业轨迹回放
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 Security/ # B级：安全与安防
|
||
│ │ │ └── 📂 GeoFence/ # C级：电子围栏
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 LandInformation/ # 🌾 地块信息管理系统页面
|
||
│ │ │ ├── 📂 FieldManagement/ # B级：地块档案管理
|
||
│ │ │ │ ├── 📂 FieldEntry/ # C级：地块信息录入
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ClassificationManagement/ # C级：地块分类管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 BatchOperation/ # C级：批量操作
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 MapManagement/ # B级：地图管理
|
||
│ │ │ │ ├── 📂 GISData/ # C级：GIS数据管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 DigitalDrawing/ # C级：数字化绘制
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 SpatialQuery/ # C级：空间查询
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 SatelliteImagery/ # C级：卫星影像管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SpatialAnalysis/ # B级：空间分析
|
||
│ │ │ │ ├── 📂 SoilData/ # C级：土壤数据分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 LayeredSampling/ # C级：分层采样分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 QualityEvaluation/ # C级：质量评价
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 EnvironmentalMonitoring/ # B级：环境监测
|
||
│ │ │ │ ├── 📂 WeatherData/ # C级：气象数据监测
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 SensorData/ # C级：环境传感器数据
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MonitoringHistory/ # C级：监测历史记录
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SuitabilityEvaluation/ # B级：适宜性评价
|
||
│ │ │ │ ├── 📂 ComprehensiveEvaluation/ # C级：综合评价分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 BatchAnalysis/ # C级：批量分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 CropRecommendation/ # C级：作物推荐分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 WeightConfiguration/ # C级：权重配置管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ComparativeAnalysis/ # B级：对比分析
|
||
│ │ │ │ ├── 📂 MultiDimensionalMetrics/ # C级：多维指标分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ChartAnalysis/ # C级：图表分析展示
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ReportGeneration/ # C级：报告生成管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 RiskWarning/ # B级：风险预警
|
||
│ │ │ ├── 📂 RealTimeMonitoring/ # C级：实时监测预警
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 EarlyWarningPush/ # C级：预警信息推送
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 DisposalTracking/ # C级：处置情况跟踪
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 FarmingOperation/ # 📋 农事操作管理系统页面
|
||
│ │ │ ├── 📂 FarmPlanning/ # B级：农事计划管理
|
||
│ │ │ │ ├── 📂 PlanFormulation/ # C级：计划制定
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ResourceAllocation/ # C级：资源分配管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ProgressTracking/ # C级：进度跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 TaskManagement/ # B级：农事任务管理
|
||
│ │ │ │ ├── 📂 TaskCreation/ # C级：任务创建管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 TaskAssignment/ # C级：任务分配派发
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 TaskStatusMonitoring/ # C级：任务状态监控
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TaskHistoryStatistics/ # C级：任务历史统计
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 OperationExecution/ # B级：农事执行管理
|
||
│ │ │ │ ├── 📂 OperationTypeManagement/ # C级：操作类型管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 OperationRecording/ # C级：操作记录管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 OperationLogQuery/ # C级：操作日志查询
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 FarmingCalendar/ # B级：农事日历管理
|
||
│ │ │ │ ├── 📂 CalendarVisualization/ # C级：日历可视化视图
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 GanttChartManagement/ # C级：甘特图管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ProgressVisualization/ # C级：进度可视化
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 OperationArchive/ # B级：农事档案管理
|
||
│ │ │ │ ├── 📂 ArchiveGeneration/ # C级：档案归集生成
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 FullDimensionView/ # C级：全维视图管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TraceabilityTracking/ # C级：追踪溯源管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 KnowledgeBase/ # B级：知识库管理
|
||
│ │ │ │ ├── 📂 ContentManagement/ # C级：内容管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ClassificationTagging/ # C级：分类标签管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 IntelligentSearch/ # C级：智能检索功能
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 PerformanceManagement/ # B级：绩效管理
|
||
│ │ │ │ ├── 📂 PersonnelManagement/ # C级：人员管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 WorkHourRecording/ # C级：工时记录管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 StatisticalReports/ # C级：统计报表管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 SchedulingManagement/ # C级：排班管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 IssueCollaboration/ # B级：问题协同管理
|
||
│ │ │ ├── 📂 IssueReporting/ # C级：问题上报管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ProcessingAssignment/ # C级：处理分派管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 OnlineCollaboration/ # C级：在线协作功能
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 AgriculturalAsset/ # 📦 农业资产管理系统页面
|
||
│ │ │ ├── 📂 BasicInformation/ # B级：基础信息管理
|
||
│ │ │ │ ├── 📂 AssetEntry/ # C级：资产信息录入
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 AssetClassification/ # C级：资产分类管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 AssetLabeling/ # C级：资产标签管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ProcurementManagement/ # B级：采购管理
|
||
│ │ │ │ ├── 📂 ProcurementPlanning/ # C级：采购计划制定
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 SupplierManagement/ # C级：供应商管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ProcurementTracking/ # C级：采购跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 InventoryManagement/ # B级：库存管理
|
||
│ │ │ │ ├── 📂 StockMonitoring/ # C级：库存监控管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 StockAdjustment/ # C级：库存调整管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 InventoryReport/ # C级：库存报表管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 MaterialRequisition/ # B级：物资领用管理
|
||
│ │ │ │ ├── 📂 RequisitionApplication/ # C级：领用申请管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ApprovalWorkflow/ # C级：审批流程管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 RequisitionTracking/ # C级：领用跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 MaterialReturn/ # B级：物资归还管理
|
||
│ │ │ │ ├── 📂 ReturnApplication/ # C级：归还申请管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ReturnApproval/ # C级：归还审批管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ReturnTracking/ # C级：归还跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 AgriculturalSupplies/ # B级：农资农具管理
|
||
│ │ │ │ ├── 📂 ToolManagement/ # C级：农具管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 MaterialManagement/ # C级：农资管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MaintenanceTracking/ # C级：维护跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 VisualizationReports/ # B级：可视化报表
|
||
│ │ │ ├── 📂 AssetStatement/ # C级：资产报表管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 InventoryStatement/ # C级：库存报表管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 CostAnalysis/ # C级：成本分析管理
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 AICropModel/ # 🤖 AI作物模型精准决策系统页面
|
||
│ │ │ ├── 📂 DataPerceptionCenter/ # B级：数据感知中心
|
||
│ │ │ │ ├── 📂 RealTimeDataCollection/ # C级：实时数据采集
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 HistoricalDataAnalysis/ # C级：历史数据分析
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MultiSourceDataFusion/ # C级：多源数据融合
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ModelIntegrationCenter/ # B级：模型接入集成中心
|
||
│ │ │ │ ├── 📂 ModelAccessManagement/ # C级：模型接入管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ModelVersionControl/ # C级：模型版本控制
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 APIServiceIntegration/ # C级：API服务集成
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 ModelApplicationCenter/ # B级：模型应用中心
|
||
│ │ │ │ ├── 📂 PredictionAnalysis/ # C级：预测分析管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 OptimizationRecommendation/ # C级：优化建议管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ScenarioSimulation/ # C级：场景模拟管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 IntelligentDecisionGeneration/ # B级：智能决策生成
|
||
│ │ │ │ ├── 📂 DecisionEngine/ # C级：决策引擎管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RuleConfiguration/ # C级：规则配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DecisionOptimization/ # C级：决策优化管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 IntelligentDecisionSupport/ # B级：智能决策支持
|
||
│ │ │ │ ├── 📂 DecisionVisualization/ # C级：决策可视化
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ImpactAssessment/ # C级：影响评估管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 DecisionTracking/ # C级：决策跟踪管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DecisionApplication/ # B级：决策应用
|
||
│ │ │ │ ├── 📂 AutomaticExecution/ # C级：自动执行管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 ManualAdjustment/ # C级：手动调整管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 FeedbackCollection/ # C级：反馈收集管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 AIKnowledgeBase/ # B级：AI知识库
|
||
│ │ │ │ ├── 📂 ModelDocumentation/ # C级：模型文档管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 CaseDatabase/ # C级：案例数据库管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ExpertSystem/ # C级：专家系统管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 MonitoringCenter/ # B级：监控中心
|
||
│ │ │ ├── 📂 ModelPerformance/ # C级：模型性能监控
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 DecisionQuality/ # C级：决策质量监控
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 SystemHealth/ # C级：系统健康监控
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 WaterFertilizerControl/ # 💧 水肥一体化控制系统页面
|
||
│ │ │ ├── 📂 IrrigationSystemManagement/ # B级：水肥机管理
|
||
│ │ │ │ ├── 📂 DeviceRegistration/ # C级：设备注册管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 StatusMonitoring/ # C级：状态监控管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 MaintenanceManagement/ # C级：维护管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SmartIrrigation/ # B级：智能灌溉
|
||
│ │ │ │ ├── 📂 IrrigationPlanning/ # C级：灌溉计划管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 AutomatedControl/ # C级：自动控制管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 IrrigationOptimization/ # C级：灌溉优化管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 FertilizerFormulaManagement/ # B级：施肥配方管理
|
||
│ │ │ │ ├── 📂 FormulaConfiguration/ # C级：配方配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 CropSpecificFormulas/ # C级：作物专用配方
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 FormulaOptimization/ # C级：配方优化管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 IntegratedControl/ # B级：水肥一体化控制
|
||
│ │ │ │ ├── 📂 SynchronizedControl/ # C级：同步控制管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 PrecisionApplication/ # C级：精准施用管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 RealTimeAdjustment/ # C级：实时调整管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 RealTimeMonitoring/ # B级：实时监测与预警
|
||
│ │ │ ├── 📂 ParameterDisplay/ # C级：参数显示管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 WarningSystem/ # C级：预警系统管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 HistoricalAnalysis/ # C级：历史分析管理
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 CentralConfig/ # ⚙️ 中心配置管理系统页面
|
||
│ │ │ ├── 📂 TenantManagement/ # B级：租户管理
|
||
│ │ │ │ ├── 📂 TenantCreation/ # C级：租户创建管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 TenantConfiguration/ # C级：租户配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 TenantAuthorization/ # C级：租户授权管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 UserManagement/ # B级：用户管理
|
||
│ │ │ │ ├── 📂 UserAccountManagement/ # C级：用户账号管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 RolePermissionManagement/ # C级：角色权限管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 UserBehaviorTracking/ # C级：用户行为跟踪
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SystemParameters/ # B级：系统参数
|
||
│ │ │ │ ├── 📂 BasicConfiguration/ # C级：基础配置管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 BusinessRuleSettings/ # C级：业务规则设置
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 InterfaceConfiguration/ # C级：接口配置管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 SystemMonitoring/ # B级：系统监控
|
||
│ │ │ │ ├── 📂 PerformanceMonitoring/ # C级：性能监控管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ ├── 📂 LogManagement/ # C级：日志管理
|
||
│ │ │ │ │ └── 📄 index.jsx
|
||
│ │ │ │ └── 📂 ExceptionHandling/ # C级：异常处理管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 MessageCenter/ # B级：消息中心
|
||
│ │ │ ├── 📂 MessagePushManagement/ # C级：消息推送管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ ├── 📂 NotificationSettings/ # C级：通知设置管理
|
||
│ │ │ │ └── 📄 index.jsx
|
||
│ │ │ └── 📂 FeedbackManagement/ # C级：反馈管理
|
||
│ │ │ └── 📄 index.jsx
|
||
│ │ ├── 📂 Auth/ # 🔐 认证页面
|
||
│ │ │ ├── 📄 Login.jsx # 登录页面
|
||
│ │ │ └── 📄 Register.jsx # 注册页面
|
||
│ │ └── 📂 Error/ # 🚨 错误页面
|
||
│ │ └── 📄 NotFound404.jsx # 404页面
|
||
│ ├── 📂 components/ # 组件库
|
||
│ │ ├── 📂 ui/ # 基础UI组件(shadcn)
|
||
│ │ ├── 📂 layout/ # 布局组件
|
||
│ │ │ ├── 📄 Header.jsx # 顶部导航
|
||
│ │ │ ├── 📄 Sidebar.jsx # 侧边栏
|
||
│ │ │ └── 📄 Layout.jsx # 主布局
|
||
│ │ ├── 📂 common/ # 通用业务组件
|
||
│ │ └── 📂 business/ # 业务组件
|
||
│ ├── 📂 hooks/ # 自定义Hooks
|
||
│ │ ├── 📄 useAuth.js # 认证Hook
|
||
│ │ ├── 📄 usePermission.js # 权限Hook
|
||
│ │ └── 📄 useRouter.js # 路由Hook
|
||
│ ├── 📂 utils/ # 工具函数
|
||
│ │ ├── 📄 authUtils.js # 认证工具
|
||
│ │ ├── 📄 routeUtils.js # 路由工具
|
||
│ │ └── 📄 formatUtils.js # 格式化工具
|
||
│ ├── 📂 types/ # TypeScript类型
|
||
│ │ ├── 📄 auth.ts # 认证类型
|
||
│ │ ├── 📄 router.ts # 路由类型
|
||
│ │ └── 📄 business.ts # 业务类型
|
||
│ ├── 📂 public/ # 🆕 静态资源目录
|
||
│ │ ├── 📄 favicon.ico # 网站图标
|
||
│ │ ├── 📄 logo.png # 应用Logo
|
||
│ │ ├── 📄 manifest.json # PWA配置文件
|
||
│ │ └── 📂 images/ # 图片资源
|
||
│ ├── 📂 assets/ # 🆕 编译时静态资源
|
||
│ │ ├── 📂 images/ # 图片资源
|
||
│ │ ├── 📂 icons/ # 图标资源
|
||
│ │ ├── 📂 fonts/ # 字体文件
|
||
│ │ └── 📂 data/ # 静态数据文件
|
||
│ ├── 📂 styles/ # 样式文件
|
||
│ │ ├── 📄 globals.css # 全局样式
|
||
│ │ ├── 📄 components.css # 组件样式
|
||
│ │ └── 📄 variables.css # CSS变量
|
||
│ ├── 📂 viteEnv/ # 🆕 环境配置目录
|
||
│ │ ├── 📄 .env.development # 开发环境配置
|
||
│ │ ├── 📄 .env.test # 测试环境配置
|
||
│ │ ├── 📄 .env.uat # 用户测试环境配置
|
||
│ │ └── 📄 .env.production # 生产环境配置
|
||
│ ├── 📂 mocks/ # 🆕 Mock数据目录
|
||
│ │ ├── 📂 AgriculturalMachinery/ # 农机系统Mock数据
|
||
│ │ ├── 📂 LandInformation/ # 地块信息Mock数据
|
||
│ │ ├── 📂 FarmingOperation/ # 农事操作Mock数据
|
||
│ │ ├── 📂 AgriculturalAsset/ # 农业资产Mock数据
|
||
│ │ ├── 📂 AICropModel/ # AI模型Mock数据
|
||
│ │ ├── 📂 WaterFertilizerControl/ # 水肥控制Mock数据
|
||
│ │ ├── 📂 CentralConfig/ # 配置管理Mock数据
|
||
│ │ └── 📂 Auth/ # 认证Mock数据
|
||
│ ├── 📄 package.json # 项目配置
|
||
│ ├── 📄 vite.config.js # Vite配置
|
||
│ ├── 📄 tailwind.config.js # Tailwind配置
|
||
│ ├── 📄 tsconfig.json # TypeScript配置
|
||
│ ├── 📄 .eslintrc.js # ESLint配置
|
||
│ ├── 📄 .prettierrc # Prettier配置
|
||
│ ├── 📄 App.jsx # 主应用组件
|
||
│ ├── 📄 main.jsx # 应用入口
|
||
│ └── 📄 index.html # HTML模板
|
||
```
|
||
|
||
### 3.4 路由系统重设计
|
||
|
||
**路由架构：**
|
||
```typescript
|
||
// router/index.ts
|
||
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
|
||
import { ProtectedRoute } from '../components/ProtectedRoute'
|
||
import { Layout } from '../components/layout/Layout'
|
||
|
||
export const router = createBrowserRouter([
|
||
{
|
||
path: '/login',
|
||
element: <LoginPage />
|
||
},
|
||
{
|
||
path: '/',
|
||
element: (
|
||
<ProtectedRoute>
|
||
<Layout />
|
||
</ProtectedRoute>
|
||
),
|
||
children: [
|
||
// 7大业务系统路由
|
||
{
|
||
path: 'machinery/*',
|
||
children: [
|
||
{ path: 'archive/entry', element: <MachineryEntry /> },
|
||
{ path: 'driver/list', element: <DriverList /> },
|
||
// ... 其他农机路由
|
||
]
|
||
},
|
||
{
|
||
path: 'field/*',
|
||
children: [
|
||
{ path: 'archive/entry', element: <FieldEntry /> },
|
||
// ... 其他地块路由
|
||
]
|
||
},
|
||
// ... 其他业务系统
|
||
]
|
||
}
|
||
])
|
||
```
|
||
|
||
**路由特性：**
|
||
- 嵌套路由支持层级结构
|
||
- 路由级别的权限控制
|
||
- 懒加载和代码分割
|
||
- 路由参数和查询字符串处理
|
||
|
||
### 3.5 状态管理架构
|
||
|
||
**Zustand Store 设计：**
|
||
```typescript
|
||
// stores/authStore.ts
|
||
interface AuthState {
|
||
user: User | null
|
||
token: string | null
|
||
isAuthenticated: boolean
|
||
login: (credentials: LoginCredentials) => Promise<void>
|
||
logout: () => void
|
||
refreshToken: () => Promise<void>
|
||
}
|
||
|
||
// stores/machineryStore.ts
|
||
interface MachineryState {
|
||
machinery: MachineryRecord[]
|
||
drivers: DriverRecord[]
|
||
loading: boolean
|
||
error: string | null
|
||
fetchMachinery: () => Promise<void>
|
||
createMachinery: (data: CreateMachineryDto) => Promise<void>
|
||
updateMachinery: (id: string, data: UpdateMachineryDto) => Promise<void>
|
||
deleteMachinery: (id: string) => Promise<void>
|
||
}
|
||
```
|
||
|
||
**状态管理原则：**
|
||
- 按业务领域拆分 Store
|
||
- 使用 TanStack Query 管理服务端状态
|
||
- 组件内状态用 useState 管理
|
||
- 避免过度抽象
|
||
|
||
### 3.6 数据层架构
|
||
|
||
**API 服务层：**
|
||
```typescript
|
||
// services/api/machineryApi.ts
|
||
export const machineryApi = {
|
||
getAll: (params?: MachineryQueryParams) =>
|
||
api.get<MachineryRecord[]>('/machinery', { params }),
|
||
getById: (id: string) =>
|
||
api.get<MachineryRecord>(`/machinery/${id}`),
|
||
create: (data: CreateMachineryDto) =>
|
||
api.post<MachineryRecord>('/machinery', data),
|
||
update: (id: string, data: UpdateMachineryDto) =>
|
||
api.put<MachineryRecord>(`/machinery/${id}`, data),
|
||
delete: (id: string) =>
|
||
api.delete(`/machinery/${id}`)
|
||
}
|
||
```
|
||
|
||
**Mock 数据管理：**
|
||
```typescript
|
||
// services/mock/handlers/machineryHandlers.ts
|
||
import { rest } from 'msw'
|
||
|
||
export const machineryHandlers = [
|
||
rest.get('/api/machinery', (req, res, ctx) => {
|
||
const page = Number(req.url.searchParams.get('page')) || 1
|
||
const limit = Number(req.url.searchParams.get('limit')) || 10
|
||
|
||
return res(
|
||
ctx.status(200),
|
||
ctx.json({
|
||
data: mockMachinery.slice((page - 1) * limit, page * limit),
|
||
total: mockMachinery.length,
|
||
page,
|
||
limit
|
||
})
|
||
)
|
||
}),
|
||
// ... 其他 handlers
|
||
]
|
||
```
|
||
|
||
### 3.7 组件架构重设计
|
||
|
||
**页面组件模式：**
|
||
```typescript
|
||
// pages/machinery/MachineryListPage.tsx
|
||
export function MachineryListPage() {
|
||
const { data: machinery, loading, error } = useQuery({
|
||
queryKey: ['machinery'],
|
||
queryFn: machineryApi.getAll
|
||
})
|
||
|
||
const { createMachinery } = useMachineryStore()
|
||
|
||
return (
|
||
<div className="container">
|
||
<PageHeader title="农机档案管理" />
|
||
<MachineryList
|
||
data={machinery || []}
|
||
loading={loading}
|
||
onCreate={createMachinery}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
**业务组件模式：**
|
||
```typescript
|
||
// components/business/MachineryCard.tsx
|
||
interface MachineryCardProps {
|
||
machinery: MachineryRecord
|
||
onEdit: (machinery: MachineryRecord) => void
|
||
onDelete: (id: string) => void
|
||
}
|
||
|
||
export function MachineryCard({ machinery, onEdit, onDelete }: MachineryCardProps) {
|
||
return (
|
||
<Card>
|
||
{/* 农机卡片内容 */}
|
||
</Card>
|
||
)
|
||
}
|
||
```
|
||
|
||
### 3.8 测试策略
|
||
|
||
**测试架构：**
|
||
- 单元测试：Vitest + Testing Library
|
||
- 组件测试：重点测试业务组件
|
||
- 集成测试：关键业务流程测试
|
||
- Mock 测试：MSW 一致性 Mock
|
||
|
||
**测试目录结构：**
|
||
```
|
||
tests/
|
||
├── __mocks__/ # 全局 Mock
|
||
├── fixtures/ # 测试数据
|
||
├── unit/ # 单元测试
|
||
├── integration/ # 集成测试
|
||
└── setup.ts # 测试配置
|
||
```
|
||
|
||
## 4. 实施计划
|
||
|
||
### 4.1 迁移策略
|
||
|
||
**分阶段实施：**
|
||
1. **阶段一**：基础架构搭建（路由、状态管理、API层）
|
||
2. **阶段二**：核心组件迁移（农机管理模块）
|
||
3. **阶段三**：其他模块逐步迁移
|
||
4. **阶段四**：测试完善和性能优化
|
||
|
||
**风险控制：**
|
||
- 保持原系统运行，新系统并行开发
|
||
- 分模块验证，确保功能一致性
|
||
- 建立完善的测试覆盖
|
||
|
||
### 4.2 技术债务处理
|
||
|
||
1. **代码重构**：统一代码风格和架构模式
|
||
2. **类型完善**：补充完整的 TypeScript 类型
|
||
3. **错误处理**：建立统一的错误处理机制
|
||
4. **性能优化**：代码分割和懒加载
|
||
5. **可访问性**：WCAG AA 合规性改进
|
||
|
||
### 4.3 质量保证
|
||
|
||
1. **代码规范**：ESLint + Prettier 自动化
|
||
2. **类型检查**：严格 TypeScript 配置
|
||
3. **测试覆盖**：关键功能 80%+ 覆盖率
|
||
4. **代码审查**：强制 Code Review 流程
|
||
5. **CI/CD**：自动化构建和部署
|
||
|
||
## 5. 总结
|
||
|
||
本架构设计方案基于对现有系统的深入分析，在保持功能完整性的前提下，对技术架构进行全面现代化改造。新架构将显著提升代码质量、开发效率和系统性能，为智慧农业系统的长期发展奠定坚实基础。
|
||
|
||
**核心改进点：**
|
||
1. 专业路由系统替代简单路径匹配
|
||
2. Zustand + TanStack Query 现代化状态管理
|
||
3. 统一的 API 服务层和 Mock 数据管理
|
||
4. 清晰的分层架构和组件组织
|
||
5. 完善的测试体系和质量保证
|
||
|
||
**预期收益：**
|
||
1. 开发效率提升 40%+
|
||
2. 代码可维护性显著改善
|
||
3. 系统性能和用户体验优化
|
||
4. 技术债务大幅减少
|
||
5. 支持未来功能扩展需求 |