18 KiB
18 KiB
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. 新页面开发流程
- 根据功能需求确定页面位置和名称
- 创建标准目录结构
- 定义类型接口（index.types.ts）
- 开发主组件（index.jsx）
- 拣选和开发子组件
- 创建页面专用Hooks
- 编写工具函数和常量
- 完善样式文件
- 编写单元测试
- 编写组件文档
2. 组件拆分原则
- 代码行数: 组件代码超过100行考虑拆分
- 功能复杂度: 承担多个职责的组件需要拆分
- 复用性: 需要在多个地方使用的功能拆分为独立组件
- 状态复杂度: 包含多个useState或useEffect的组件考虑拆分
3. 性能优化策略
- React.memo: 包装纯组件避免不必要的重渲染
- useCallback: 缓存回调函数避免子组件重渲染
- useMemo: 缓存计算密集型操作的结果
- 代码分割: 使用React.lazy进行组件懒加载
- 虚拟滚动: 处理大量数据列表时使用虚拟滚动
4. 质量保证
- 代码审查: 所有代码都需要经过代码审查
- 单元测试: 核心业务逻辑必须有单元测试覆盖
- 集成测试: 关键业务流程需要集成测试
- 性能测试: 页面加载和交互性能需要达到标准
- 兼容性测试: 确保在主流浏览器中正常工作
后续计划
1. 短期目标
- 完成核心页面的组件开发
- 建立完整的测试覆盖
- 优化页面性能和用户体验
- 完善开发文档和使用指南
2. 中期目标
- 建立组件库和设计系统
- 实现自动化构建和部署
- 建立代码质量监控体系
- 优化移动端适配
3. 长期目标
- 建立微前端架构
- 实现多租户支持
- 建立完善的监控和告警体系
- 持续优化和迭代
总结
通过为智慧农业生产管理系统设计完整的页面目录结构，我们建立了一个清晰、可维护、可扩展的代码组织架构。这个架构不仅满足了当前的业务需求，也为未来的功能扩展和系统优化奠定了坚实的基础。
所有的设计都遵循了现代前端开发的最佳实践，包括组件化、模块化、类型安全、性能优化等方面，确保系统的长期可维护性和开发效率。