360 lines
18 KiB
Markdown
360 lines
18 KiB
Markdown
# Pages目录结构设计总结
|
||
|
||
## 项目概述
|
||
|
||
基于智慧农业生产管理系统的业务需求，为所有7个主要业务模块设计了完整的页面目录结构，遵循模块化、组件化和可维护性的开发原则。
|
||
|
||
## 设计原则
|
||
|
||
### 1. 目录结构规范
|
||
- **标准结构**: 每个页面都采用统一的目录结构
|
||
- **组件拆分**: 大型组件拆分为多个子组件，提高可维护性
|
||
- **职责分离**: 将样式、逻辑、类型定义分离到不同文件
|
||
- **工具函数**: 页面专用工具函数独立管理
|
||
- **常量定义**: 业务常量集中定义
|
||
|
||
### 2. 组件设计规范
|
||
- **单一职责**: 每个组件只负责一个特定功能
|
||
- **可复用性**: 设计可复用的通用组件
|
||
- **性能优化**: 使用 React.memo、useCallback 等优化手段
|
||
- **类型安全**: 完整的 TypeScript 类型定义
|
||
|
||
### 3. 开发规范
|
||
- **命名规范**: 统一的文件和组件命名约定
|
||
- **代码风格**: 一致的代码格式和注释规范
|
||
- **测试覆盖**: 每个组件都应有对应的测试文件
|
||
- **文档完善**: 详细的组件使用说明和API文档
|
||
|
||
## 模块结构总览
|
||
|
||
### 1. AgriculturalMachinery (智能农机管理) 模块
|
||
```
|
||
pages/AgriculturalMachinery/
|
||
├── 📂 Archive/ # 农机档案
|
||
│ ├── 📂 MachineryEntry/ # 农机档案录入与维护
|
||
│ ├── 📂 MachineryClassification/ # 农机分类与标签管理
|
||
│ └── 📂 MachineryQRCode/ # 农机二维码管理
|
||
├── 📂 Driver/ # 驾驶员档案
|
||
│ ├── 📂 DriverInfo/ # 驾驶员信息管理
|
||
│ └── 📂 DriverTask/ # 驾驶员任务管理
|
||
├── 📂 Load/ # 农机负载管理
|
||
│ ├── 📂 LoadDevice/ # 负载管理
|
||
│ ├── 📂 LoadType/ # 负载类型
|
||
│ └── 📂 LoadParameter/ # 负载参数
|
||
├── 📂 Monitoring/ # 设备实时监控与定位
|
||
│ ├── 📂 RealtimeLocation/ # 实时位置追踪
|
||
│ ├── 📂 WorkStatus/ # 工作状态监控
|
||
│ └── 📂 OperationData/ # 作业数据监控
|
||
├── 📂 Fault/ # 远程诊断与故障预警
|
||
│ ├── 📂 FaultWarning/ # 故障诊断与预警
|
||
│ ├── 📂 HealthAssessment/ # 健康评估
|
||
│ └── 📂 ParameterMonitor/ # 运行参数监测
|
||
├── 📂 Operation/ # 精准作业管理与支持
|
||
│ ├── 📂 OperationRecord/ # 作业数据记录
|
||
│ ├── 📂 RoutePlanning/ # 作业路线规划
|
||
│ ├── 📂 PlanDispatch/ # 作业方案下发
|
||
│ └── 📂 Cockpit/ # 农机驾驶舱
|
||
├── 📂 Data/ # 数据管理与分析报告
|
||
│ ├── 📂 OperationAnalysis/ # 作业数据分析
|
||
│ └── 📂 HistoryComparison/ # 历史数据查询与对比
|
||
├── 📂 Scheduling/ # 农机管理与调度
|
||
│ ├── 📂 TaskAssignment/ # 任务分配
|
||
│ ├── 📂 RealtimeDispatch/ # 实时调度监控
|
||
│ └── 📂 TrackPlayback/ # 农机作业轨迹回放
|
||
└── 📂 Security/ # 安全与安防
|
||
└── 📂 GeoFence/ # 电子围栏
|
||
```
|
||
|
||
### 2. LandInformation (地块信息管理) 模块
|
||
```
|
||
pages/LandInformation/
|
||
├── 📂 Archive/ # 地块档案管理
|
||
│ ├── 📂 FieldEntryMaintenance/ # 地块信息录入与维护
|
||
│ └── 📂 FieldClassificationTags/ # 地块分类与标签管理
|
||
├── 📂 Map/ # 地块数字化与地图管理
|
||
│ ├── 📂 GISMap/ # GIS地图管理
|
||
│ ├── 📂 DrawEdit/ # 数字化绘制与编辑
|
||
│ ├── 📂 SpatialQuery/ # 空间数据管理
|
||
│ └── 📂 Satellite/ # 地块影像
|
||
├── 📂 Analysis/ # 空间分析与决策支持
|
||
│ ├── 📂 SoilData/ # 土壤基础数据
|
||
│ ├── 📂 LayerSampling/ # 分层采样分析
|
||
│ └── 📂 SoilQuality/ # 土壤质量评价
|
||
├── 📂 Monitoring/ # 地块环境监测
|
||
│ ├── 📂 WeatherMonitoring/ # 气象监测
|
||
│ └── 📂 EnvironmentMonitoring/ # 环境监测
|
||
├── 📂 Suitability/ # 地块适宜性评价
|
||
│ ├── 📂 ComprehensiveEvaluation/ # 多因子综合评价
|
||
│ ├── 📂 BatchAnalysis/ # 自动化空间分析
|
||
│ ├── 📂 CropRecommendation/ # 作物适配推荐
|
||
│ └── 📂 WeightConfig/ # 权重配置
|
||
├── 📂 Comparison/ # 地块对比分析
|
||
│ ├── 📂 MultiIndicator/ # 多维度指标看板
|
||
│ ├── 📂 ChartAnalysis/ # 可视化图表分析
|
||
│ └── 📂 ReportGeneration/ # 对比报告生成
|
||
└── 📂 Risk/ # 地块风险预警
|
||
├── 📂 RiskMonitoring/ # 实时风险监测
|
||
├── 📂 WarningPush/ # 预警推送管理
|
||
└── 📂 DisposalTracking/ # 预警处置跟踪
|
||
```
|
||
|
||
### 3. FarmingOperation (农事管理) 模块
|
||
```
|
||
pages/FarmingOperation/
|
||
├── 📂 Planning/ # 农事计划
|
||
│ ├── 📂 PlanCreation/ # 计划制定
|
||
│ ├── 📂 ResourceAllocation/ # 资源分配规划
|
||
│ └── 📂 ProgressTracking/ # 计划进度跟踪
|
||
├── 📂 Task/ # 农事任务
|
||
│ ├── 📂 TaskManagement/ # 任务管理
|
||
│ ├── 📂 TaskAssignment/ # 任务分配与派发
|
||
│ ├── 📂 TaskMonitoring/ # 任务状态监控
|
||
│ └── 📂 TaskStatistics/ # 历史与统计
|
||
├── 📂 Execution/ # 农事执行
|
||
│ ├── 📂 OperationType/ # 农事类型
|
||
│ ├── 📂 OperationRecord/ # 操作录入
|
||
│ └── 📂 OperationLog/ # 日志多维查询
|
||
├── 📂 Calendar/ # 农事日历
|
||
│ ├── 📂 CalendarView/ # 可视化视图
|
||
│ ├── 📂 CalendarGantt/ # 甘特图
|
||
│ └── 📂 CalendarProgress/ # 进度状态可视化
|
||
├── 📂 Archive/ # 农事档案
|
||
│ ├── 📂 ArchiveAggregation/ # 档案归集与生成
|
||
│ ├── 📂 ArchiveView/ # 全维度数据视图
|
||
│ └── 📂 ArchiveTrace/ # 追踪与溯源
|
||
├── 📂 Knowledge/ # 农事知识库
|
||
│ ├── 📂 KnowledgeManagement/ # 多模态知识内容管理
|
||
│ ├── 📂 KnowledgeCategory/ # 分类与标签
|
||
│ └── 📂 KnowledgeSearch/ # 智能检索
|
||
├── 📂 Performance/ # 绩效管理
|
||
│ ├── 📂 PerformanceStaff/ # 人员管理
|
||
│ ├── 📂 PerformanceHours/ # 工时记录
|
||
│ ├── 📂 PerformanceStatistics/ # 绩效统计
|
||
│ └── 📂 PerformanceSchedule/ # 排班管理
|
||
└── 📂 Issue/ # 农事问题协同
|
||
├── 📂 IssueReport/ # 问题一键上报
|
||
├── 📂 IssueAssign/ # 问题处理与分派
|
||
└── 📂 IssueCollaborate/ # 在线协同
|
||
```
|
||
|
||
### 4. AgriculturalAsset (农资资产) 模块
|
||
```
|
||
pages/AgriculturalAsset/
|
||
├── 📂 Basic/ # 基础信息管理
|
||
│ ├── 📂 AssetMaterials/ # 农资档案管理
|
||
│ ├── 📂 AssetTools/ # 农具档案管理
|
||
│ ├── 📂 AssetSuppliers/ # 供应商管理
|
||
│ └── 📂 AssetCustomers/ # 客户管理
|
||
├── 📂 Purchase/ # 采购管理
|
||
│ ├── 📂 PurchasePlan/ # 采购计划
|
||
│ └── 📂 PurchaseOrder/ # 采购订单
|
||
├── 📂 Inventory/ # 库存管理
|
||
│ ├── 📂 InventoryIn/ # 入库管理
|
||
│ ├── 📂 InventoryOut/ # 出库管理
|
||
│ ├── 📂 InventoryCheck/ # 盘点管理
|
||
│ ├── 📂 InventoryWarning/ # 库存预警
|
||
│ ├── 📂 InventoryDetail/ # 库存明细
|
||
│ ├── 📂 InventoryLocation/ # 库位管理
|
||
│ └── 📂 InventorySuggest/ # 采购建议
|
||
├── 📂 Requisition/ # 物资领用
|
||
│ ├── 📂 RequisitionApply/ # 领用申请
|
||
│ ├── 📂 RequisitionApproval/ # 领用审批
|
||
│ ├── 📂 RequisitionCheckout/ # 出库与核销
|
||
│ └── 📂 RequisitionRecord/ # 领用记录与溯源
|
||
├── 📂 Return/ # 物资归还
|
||
│ ├── 📂 ReturnRegister/ # 归还登记
|
||
│ ├── 📂 ReturnProcess/ # 归还处理
|
||
│ ├── 📂 ReturnSettlement/ # 领用记录关联核销
|
||
│ └── 📂 ReturnHistory/ # 归还历史与资产台账
|
||
├── 📂 Equipment/ # 农资农具管理
|
||
│ ├── 📂 EquipmentArchive/ # 物资档案
|
||
│ ├── 📂 EquipmentDispatch/ # 使用调度与状态
|
||
│ ├── 📂 EquipmentMaintenance/ # 维修保养
|
||
│ ├── 📂 EquipmentDepreciation/ # 折旧计算
|
||
│ └── 📂 EquipmentDisposal/ # 报废处理
|
||
└── 📂 Report/ # 可视化报表
|
||
├── 📂 ReportOverview/ # 全局概览核心指标
|
||
├── 📂 ReportInventory/ # 库存动态可视化
|
||
└── 📂 ReportConsumption/ # 领用消耗分析
|
||
```
|
||
|
||
### 5. AICropModel (AI模型) 模块
|
||
```
|
||
pages/AICropModel/
|
||
├── 📂 DataCenter/ # 全域数据感知中心
|
||
│ ├── 📂 DataExternal/ # 多源数据接入
|
||
│ └── 📂 DataIoT/ # 物联设备数据接入
|
||
├── 📂 ModelIntegration/ # 模型接入集成
|
||
│ ├── 📂 ModelServiceAccess/ # 模型服务接入
|
||
│ └── 📂 ModelServiceManagement/ # 模型服务管理
|
||
├── 📂 ModelApplication/ # 模型应用中心
|
||
│ ├── 📂 AppGeneration/ # 应用生成
|
||
│ └── 📂 AppScheduling/ # 调度管理
|
||
├── 📂 Decision/ # 智能决策生成
|
||
│ ├── 📂 DecisionFusion/ # 业务融合
|
||
│ ├── 📂 DecisionSimulation/ # 决策模拟
|
||
│ └── 📂 DecisionLog/ # 决策日志
|
||
├── 📂 Support/ # 智能决策支持
|
||
│ ├── 📂 DecisionDashboard/ # 决策看板
|
||
│ └── 📂 DecisionDetail/ # 决策详情
|
||
├── 📂 Application/ # 决策应用
|
||
│ ├── 📂 DeviceControl/ # 设备控制集成
|
||
│ └── 📂 ExternalSystem/ # 外部系统联动
|
||
├── 📂 Knowledge/ # AI知识库
|
||
│ └── 📂 KnowledgeGeneration/ # AI知识自动生成与应用
|
||
└── 📂 Monitoring/ # 监控中心
|
||
├── 📂 ModelMonitoring/ # 模型监控
|
||
├── 📂 AuditLog/ # 全链路审计日志
|
||
└── 📂 AlertManagement/ # 告警管理
|
||
```
|
||
|
||
### 6. WaterFertilizerControl (水肥控制) 模块
|
||
```
|
||
pages/WaterFertilizerControl/
|
||
├── 📂 WFManagement/ # 水肥机管理
|
||
│ ├── 📂 WFDevice/ # 水肥机设备
|
||
│ ├── 📂 WFComponent/ # 水肥机部件配置
|
||
│ ├── 📂 WFParameter/ # 水肥机参数配置
|
||
│ └── 📂 WFMapping/ # 水肥设备映射
|
||
├── 📂 Smart/ # 智能灌溉
|
||
│ ├── 📂 AutoIrrigation/ # 智能灌溉
|
||
│ ├── 📂 ManualIrrigation/ # 人工灌溉
|
||
│ ├── 📂 RealtimeMonitor/ # 水肥机实时监测数据
|
||
│ └── 📂 HistoryMonitor/ # 水肥机历史监测数据
|
||
├── 📂 Fertilizer/ # 施肥配方管理
|
||
│ ├── 📂 WaterControl/ # 加水控制
|
||
│ ├── 📂 LevelSetting/ # 液位设定
|
||
│ ├── 📂 StirringControl/ # 搅拌控制
|
||
│ └── 📂 HistoryData/ # 历史监测数据
|
||
├── 📂 WFControl/ # 水肥控制
|
||
│ ├── 📂 FertilizerParams/ # 施肥参数设置
|
||
│ ├── 📂 TankRealtime/ # 肥料桶实时监测数据
|
||
│ ├── 📂 ValveControl/ # 阀门控制
|
||
│ ├── 📂 ValveRealtime/ # 电动阀实时监测数据
|
||
│ ├── 📂 FertilizerHistory/ # 施肥与配比历史数据
|
||
│ └── 📂 ValveHistory/ # 电动阀历史监测数据
|
||
└── 📂 Monitoring/ # 实时监测与预警
|
||
├── 📂 AlertLogic/ # 预警逻辑管理
|
||
├── 📂 ThresholdAlert/ # 阈值预警与告警
|
||
└── 📂 NotificationPush/ # 多通道告警推送
|
||
```
|
||
|
||
### 7. CentralConfig (中心配置) 模块
|
||
```
|
||
pages/CentralConfig/
|
||
├── 📂 Tenant/ # 租户管理
|
||
│ ├── 📂 EnterpriseAudit/ # 企业审核
|
||
│ ├── 📂 AuditHistory/ # 审核历史
|
||
│ ├── 📂 EnterpriseInfo/ # 企业信息
|
||
│ └── 📂 UserManagement/ # 用户管理
|
||
├── 📂 User/ # 用户管理
|
||
│ ├── 📂 EmployeeManagement/ # 员工管理
|
||
│ ├── 📂 RoleManagement/ # 角色管理
|
||
│ ├── 📂 MenuManagement/ # 菜单管理
|
||
│ └── 📂 PermissionConfig/ # 权限配置管理
|
||
├── 📂 System/ # 系统参数
|
||
│ ├── 📂 SystemSettings/ # 系统设置
|
||
│ ├── 📂 CategoryDictionary/ # 分类字典
|
||
│ └── 📂 DataDictionary/ # 数据字典
|
||
├── 📂 Monitor/ # 系统监控
|
||
│ ├── 📂 LoginLog/ # 登录日志
|
||
│ ├── 📂 OperationLog/ # 操作日志
|
||
│ ├── 📂 PerformanceMonitor/ # 性能监控
|
||
│ └── 📂 NetworkLog/ # 网络日志
|
||
└── 📂 Message/ # 消息中心
|
||
├── 📂 MessageSend/ # 消息发送
|
||
├── 📂 MessageTemplate/ # 消息模版
|
||
└── 📂 MessageLog/ # 消息日志
|
||
```
|
||
|
||
## 技术架构
|
||
|
||
### 1. 文件结构标准
|
||
每个页面目录都包含以下标准结构：
|
||
```
|
||
PageName/
|
||
├── 📄 index.jsx # 主组件
|
||
├── 📄 index.css # 主样式文件
|
||
├── 📄 index.types.ts # 类型定义
|
||
├── 📂 hooks/ # 页面专用Hooks
|
||
├── 📂 utils/ # 工具函数
|
||
├── 📂 constants.tsx # 常量定义
|
||
└── 📂 components/ # 子组件目录
|
||
└── 📂 ComponentName/ # 子组件目录
|
||
├── 📄 index.jsx
|
||
├── 📄 index.css
|
||
└── 📄 types.ts
|
||
```
|
||
|
||
### 2. 组件设计模式
|
||
- **主组件模式**: 负责页面整体布局和状态管理
|
||
- **子组件拆分**: 按功能拆分为独立的子组件
|
||
- **Hook模式**: 使用自定义Hook封装业务逻辑
|
||
- **TypeScript模式**: 完整的类型定义确保类型安全
|
||
|
||
### 3. 开发工具链
|
||
- **构建工具**: Vite + SWC
|
||
- **代码规范**: ESLint + Prettier
|
||
- **类型检查**: TypeScript
|
||
- **测试框架**: Jest + React Testing Library
|
||
- **样式方案**: Tailwind CSS + CSS Modules
|
||
|
||
## 开发指南
|
||
|
||
### 1. 新页面开发流程
|
||
1. 根据功能需求确定页面位置和名称
|
||
2. 创建标准目录结构
|
||
3. 定义类型接口（index.types.ts）
|
||
4. 开发主组件（index.jsx）
|
||
5. 拣选和开发子组件
|
||
6. 创建页面专用Hooks
|
||
7. 编写工具函数和常量
|
||
8. 完善样式文件
|
||
9. 编写单元测试
|
||
10. 编写组件文档
|
||
|
||
### 2. 组件拆分原则
|
||
- **代码行数**: 组件代码超过100行考虑拆分
|
||
- **功能复杂度**: 承担多个职责的组件需要拆分
|
||
- **复用性**: 需要在多个地方使用的功能拆分为独立组件
|
||
- **状态复杂度**: 包含多个useState或useEffect的组件考虑拆分
|
||
|
||
### 3. 性能优化策略
|
||
- **React.memo**: 包装纯组件避免不必要的重渲染
|
||
- **useCallback**: 缓存回调函数避免子组件重渲染
|
||
- **useMemo**: 缓存计算密集型操作的结果
|
||
- **代码分割**: 使用React.lazy进行组件懒加载
|
||
- **虚拟滚动**: 处理大量数据列表时使用虚拟滚动
|
||
|
||
### 4. 质量保证
|
||
- **代码审查**: 所有代码都需要经过代码审查
|
||
- **单元测试**: 核心业务逻辑必须有单元测试覆盖
|
||
- **集成测试**: 关键业务流程需要集成测试
|
||
- **性能测试**: 页面加载和交互性能需要达到标准
|
||
- **兼容性测试**: 确保在主流浏览器中正常工作
|
||
|
||
## 后续计划
|
||
|
||
### 1. 短期目标
|
||
- 完成核心页面的组件开发
|
||
- 建立完整的测试覆盖
|
||
- 优化页面性能和用户体验
|
||
- 完善开发文档和使用指南
|
||
|
||
### 2. 中期目标
|
||
- 建立组件库和设计系统
|
||
- 实现自动化构建和部署
|
||
- 建立代码质量监控体系
|
||
- 优化移动端适配
|
||
|
||
### 3. 长期目标
|
||
- 建立微前端架构
|
||
- 实现多租户支持
|
||
- 建立完善的监控和告警体系
|
||
- 持续优化和迭代
|
||
|
||
## 总结
|
||
|
||
通过为智慧农业生产管理系统设计完整的页面目录结构，我们建立了一个清晰、可维护、可扩展的代码组织架构。这个架构不仅满足了当前的业务需求，也为未来的功能扩展和系统优化奠定了坚实的基础。
|
||
|
||
所有的设计都遵循了现代前端开发的最佳实践，包括组件化、模块化、类型安全、性能优化等方面，确保系统的长期可维护性和开发效率。 |