# 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. 长期目标 - 建立微前端架构 - 实现多租户支持 - 建立完善的监控和告警体系 - 持续优化和迭代 ## 总结 通过为智慧农业生产管理系统设计完整的页面目录结构，我们建立了一个清晰、可维护、可扩展的代码组织架构。这个架构不仅满足了当前的业务需求，也为未来的功能扩展和系统优化奠定了坚实的基础。 所有的设计都遵循了现代前端开发的最佳实践，包括组件化、模块化、类型安全、性能优化等方面，确保系统的长期可维护性和开发效率。