# Crop-X 项目完整技术架构方案 **Session Date:** 2025-10-16 **Facilitator:** Business Analyst Mary **Project:** 智慧农业系统 crop-x 重构 --- ## 项目概述 基于现有的智慧农业生产管理系统，在根目录下创建全新的 `crop-x` 项目，采用 React 19 + Zustand + shadcn + Tailwind CSS 技术栈，实现现代化的路由系统、用户认证模块、API管理系统和完整的业务架构。 ## 技术栈 - **前端框架**: Next.js 14 + React 19 + TypeScript - **构建工具**: Next.js 内置构建系统 - **状态管理**: Zustand - **UI框架**: shadcn/ui + Tailwind CSS - **路由**: Next.js App Router - **HTTP客户端**: Axios - **图标**: Lucide React - **提示组件**: Sonner ## 新项目目录结构 ``` 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 # 消息中心状态 │ ├── 📂 app/ # 🆕 Next.js App Router 页面组件 - 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变量 │ ├── 📄 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模板 ``` ## 特性优先配置系统架构 ### 配置系统设计原则 基于业界最佳实践，设计了特性优先的配置系统，具备以下特点： 1. **类型安全**: 完整的TypeScript类型定义 2. **环境隔离**: 开发、测试、UAT、生产环境独立配置 3. **特性开关**: 细粒度的功能开关管理 4. **权限控制**: 基于配置的权限验证 5. **开发友好**: 便捷的API和丰富的工具函数 ### 配置系统核心架构 ```typescript // 配置系统分层架构 (位于 crop-x/config/ 下) crop-x/config/ ├── types/ # 类型定义层 ├── environments/ # 环境配置层 ├── features/ # 特性配置层 ├── services/ # 服务配置层 ├── build/ # 构建配置层 ├── config-manager.ts # 配置管理层 └── index.ts # 统一入口层 ``` ### 配置类型系统 完整的TypeScript类型定义确保配置的类型安全： ```typescript // 核心配置类型 export interface Config { environment: Environment; app: AppConfig; // 应用基础配置 api: ApiConfig; // API配置 features: FeatureConfig; // 功能开关配置 map: MapConfig; // 地图服务配置 upload: UploadConfig; // 文件上传配置 websocket: WebSocketConfig; // WebSocket配置 cache: CacheConfig; // 缓存配置 thirdParty: ThirdPartyConfig; // 第三方服务配置 security: SecurityConfig; // 安全配置 featureFlags: FeatureFlags; // 特性开关配置 build: BuildConfig; // 构建配置 } // 特性开关配置 export interface FeatureFlags { agriculturalMachinery: { enabled: boolean; realTimeTracking: boolean; faultDiagnosis: boolean; precisionFarming: boolean; }; landInformation: { enabled: boolean; gisMapping: boolean; spatialAnalysis: boolean; soilAnalysis: boolean; }; // ... 其他特性配置 } ``` ### 环境配置系统 每个环境都有独立的配置文件，支持环境差异化： ```typescript // 开发环境配置示例 export const developmentConfig: Partial = { environment: 'development', app: { title: '智慧农业生产管理系统', version: '1.0.0', port: 3001, host: 'localhost' }, api: { baseURL: 'http://localhost:8080', timeout: 10000, isMock: true, // 开发环境默认开启Mock数据 enableLog: true }, features: { mock: true, devtools: true, consoleLog: true, sourceMap: true }, // 开发环境特性开关：全开 featureFlags: { agriculturalMachinery: { enabled: true, realTimeTracking: true, faultDiagnosis: true, precisionFarming: true }, // ... 其他特性 } }; ``` ### 特性配置系统 特性配置支持复杂的业务逻辑和权限控制： ```typescript // 农机管理特性配置示例 export const agriculturalMachineryConfig = { meta: { name: '智能农机管理系统', version: '1.0.0', icon: '🚙', order: 1 }, modules: { archive: { enabled: true, permissions: { view: ['agricultural:machinery:view'], create: ['agricultural:machinery:create'], edit: ['agricultural:machinery:edit'] }, features: { qrCode: true, classification: true, batchImport: true } }, monitoring: { enabled: true, permissions: { view: ['agricultural:monitoring:view'], control: ['agricultural:monitoring:control'] }, settings: { updateInterval: 5000, maxMarkers: 1000 } } }, businessRules: { workingHours: { start: '06:00', end: '20:00' }, maintenance: { interval: { engine: 200 } }, fuelConsumption: { thresholds: { low: 10 } } } }; ``` ### 配置管理器 统一的配置管理器提供便捷的配置访问API： ```typescript class ConfigManager { // 获取完整配置 public getConfig(): Config // 环境判断 public getEnvironment(): Environment public isDevelopment(): boolean public isProduction(): boolean // 特性开关检查 public isFeatureEnabled(feature: keyof FeatureFlags): boolean public isSubFeatureEnabled(feature: string, subFeature: string): boolean // 配置获取器 public getAppConfig(): AppConfig public getApiConfig(): ApiConfig public getFeatureFlags(): FeatureFlags // 权限检查 public checkPermission(feature: string, module: string, action: string, permissions: string[]): boolean } ``` ### 配置使用示例 ```typescript import { config, isFeatureEnabled, features, api } from '@/config'; // 环境判断 if (config.environment === 'development') { console.log('开发环境'); } // 特性开关检查 if (isFeatureEnabled('agriculturalMachinery')) { // 显示农机管理模块 } // 子特性检查 if (features.agriculturalMachinery.realTimeTracking()) { // 启用实时追踪功能 } // API配置访问 const response = await fetch(api.baseURL() + '/machinery/list'); // 权限检查 const canEdit = configManager.checkPermission( 'agriculturalMachinery', 'archive', 'edit', userPermissions ); ``` ### 配置系统优势 1. **类型安全**: 完整的TypeScript类型支持，编译时错误检查 2. **环境隔离**: 每个环境独立配置，避免配置冲突 3. **特性优先**: 按业务特性组织配置，提高代码可维护性 4. **权限集成**: 配置与权限系统集成，实现动态权限控制 5. **开发友好**: 提供丰富的工具函数和便捷API 6. **扩展性强**: 支持动态添加新的特性和配置项 ### 配置系统实施计划 1. **Phase 1**: 创建配置类型定义和基础架构 2. **Phase 2**: 实现环境配置系统 3. **Phase 3**: 实现特性配置系统 4. **Phase 4**: 开发配置管理器 5. **Phase 5**: 集成到现有代码中 6. **Phase 6**: 文档和测试完善 ## 静态资源管理架构 ### Vite项目静态资源标准 基于Vite构建工具的标准项目结构，设计了完整的静态资源管理方案： #### 1. Public目录 (public/) ```bash crop-x/public/ ├── favicon.ico # 网站图标 ├── logo.png # 应用Logo ├── manifest.json # PWA配置文件 ├── robots.txt # 搜索引擎爬虫配置 ├── humans.txt # 人类可读的项目信息 └── images/ # 静态图片资源 ├── logos/ # 各种尺寸的Logo ├── icons/ # 应用图标 ├── banners/ # 横幅图片 └── backgrounds/ # 背景图片 ``` **Public目录特点：** - ✅ 直接复制到构建输出目录 - ✅ 支持子目录访问 - ✅ 适合大型静态资源 - ✅ 可以通过根路径直接访问 #### 2. Assets目录 (src/assets/) ```bash crop-x/src/assets/ ├── images/ # 项目图片资源 │ ├── common/ # 通用图片 │ ├── components/ # 组件专用图片 │ └── pages/ # 页面专用图片 ├── icons/ # 图标资源 │ ├── svg/ # SVG图标 │ ├── png/ # PNG图标 │ └── favicon/ # 网站图标变体 ├── fonts/ # 字体文件 │ ├── chinese/ # 中文字体 │ └── english/ # 英文字体 ├── data/ # 静态数据文件 │ ├── mock/ # Mock数据文件 │ ├── config/ # 配置文件 │ └── dictionaries/ # 字典数据 └── media/ # 多媒体资源 ├── videos/ # 视频文件 └── audio/ # 音频文件 ``` **Assets目录特点：** - ✅ 支持构建时处理（压缩、优化） - ✅ 支持版本控制和缓存破坏 - ✅ 支持模块化导入 - ✅ 支持TypeScript类型检查 #### 3. 静态资源使用示例 ```typescript // Public目录资源使用 (直接通过绝对路径访问) const logoUrl = '/logo.png'; const faviconUrl = '/favicon.ico'; // Assets目录资源使用 (通过模块导入) import logoImage from '@/assets/images/logo.png'; import iconSvg from '@/assets/icons/svg/menu.svg'; import chineseFont from '@/assets/fonts/chinese/NotoSansCJK-Regular.woff2'; // 动态导入资源 const loadImage = async (imageName: string) => { const module = await import(`@/assets/images/${imageName}.png`); return module.default; }; // CSS中引用资源 .my-component { background-image: url('@/assets/images/background.jpg'); font-family: 'Noto Sans CJK', sans-serif; } ``` #### 4. 静态资源优化策略 ```typescript // vite.config.js 静态资源配置 export default { build: { assetsInlineLimit: 4096, // 小于4kb的资源内联为base64 rollupOptions: { output: { assetFileNames: 'assets/[name].[hash].[ext]', // 资源文件命名 chunkFileNames: 'js/[name].[hash].js', entryFileNames: 'js/[name].[hash].js' } } }, // 静态资源服务配置 server: { fs: { allow: ['..'] // 允许访问上级目录的静态资源 } } }; ``` #### 5. 图片资源管理 ```typescript // 图片组件封装 import { lazy } from 'react'; const ImageWithFallback = lazy(() => import('@/components/common/ImageWithFallback')); // 使用示例 ``` #### 6. 字体资源管理 ```css /* globals.css */ @font-face { font-family: 'CropX Chinese'; src: url('@/assets/fonts/chinese/NotoSansCJK-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* 优化字体加载性能 */ } /* 响应式字体大小 */ :root { --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --font-size-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem); --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); } ``` #### 7. PWA资源配置 ```json // public/manifest.json { "name": "智慧农业生产管理系统", "short_name": "智慧农业", "description": "Smart Agriculture Production Management System", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#10b981", "icons": [ { "src": "/images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } ``` #### 8. 静态资源性能优化 - **图片优化**: WebP格式支持、响应式图片、懒加载 - **字体优化**: 字体子集化、font-display策略 - **资源压缩**: Gzip/Brotli压缩、资源合并 - **缓存策略**: 长期缓存、版本控制 - **CDN支持**: 静态资源CDN分发 ## 路由命名映射 基于实际业务名称的路由映射： ```javascript // 导航系统实际名称 → 路由名称 智能农机管理系统 → /AgriculturalMachinery 地块信息管理系统 → /LandInformation 农事操作管理系统 → /FarmingOperation 农业资产管理系统 → /AgriculturalAsset AI作物模型精准决策系统 → /AICropModel 水肥一体化控制系统 → /WaterFertilizerControl 中心配置管理系统 → /CentralConfig ``` ## 三级路由结构设计 ### 示例：智能农机管理系统 (/AgriculturalMachinery) ```javascript /AgriculturalMachinery/ // A级：系统主入口 ├── /Archive/ // B级：农机档案模块 │ ├── /MachineryEntry // C级：农机档案录入与维护 │ ├── /ClassificationManagement // C级：农机分类与标签管理 │ └── /QRCodeManagement // C级：农机二维码管理 ├── /DriverArchive/ // B级：驾驶员档案模块 │ ├── /DriverInfoManagement // C级：驾驶员信息管理 │ └── /DriverTaskManagement // C级：驾驶员任务管理 ├── /LoadManagement/ // B级：负载管理模块 │ ├── /LoadDeviceManagement // C级：负载管理 │ ├── /LoadTypeManagement // C级：负载类型 │ └── /LoadParameterManagement // C级：负载参数 ├── /Monitoring/ // B级：实时监控模块 │ ├── /RealTimeLocationTracking // C级：实时位置追踪 │ ├── /WorkStatusMonitoring // C级：工作状态监控 │ └── /OperationDataMonitoring // C级：作业数据监控 ├── /FaultDiagnosis/ // B级：故障诊断模块 │ ├── /FaultWarning // C级：故障诊断与预警 │ ├── /HealthAssessment // C级：健康评估 │ └── /ParameterMonitoring // C级：运行参数监测 ├── /PrecisionOperation/ // B级：精准作业模块 │ ├── /OperationRecord // C级：作业数据记录 │ ├── /RoutePlanning // C级：作业路线规划 │ ├── /PlanDispatch // C级：作业方案下发 │ └── /DrivingCockpit // C级：农机驾驶舱 ├── /DataAnalysis/ // B级：数据分析模块 │ ├── /OperationAnalysis // C级：作业数据分析 │ └── /HistoricalDataComparison // C级：历史数据查询与对比 ├── /Scheduling/ // B级：调度管理模块 │ ├── /TaskAssignment // C级：任务分配 │ ├── /RealTimeDispatch // C级：实时调度监控 │ └── /TrackPlayback // C级：农机作业轨迹回放 └── /Security/ // B级：安全安防模块 └── /GeoFence // C级：电子围栏 ``` ## 权限数组设计 ### 权限检查逻辑 ```javascript // 路由权限配置示例 { path: '/AgriculturalMachinery/Archive/MachineryEntry', component: MachineryEntry, auth: [ 'system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator' ] } // 权限检查函数 const hasAuth = (userAuths, requiredAuths) => { if (!requiredAuths || requiredAuths.length === 0) return true; return requiredAuths.some(auth => userAuths.includes(auth)); }; ``` ### 完整权限体系 ```javascript // 系统级权限 const SYSTEM_PERMISSIONS = [ 'system:admin', // 系统管理员 'system:operator', // 系统操作员 'system:view' // 系统查看者 ]; // 农机系统权限 const AGRICULTURAL_PERMISSIONS = [ 'agricultural:machinery:admin', // 农机管理员 'agricultural:machinery:operator', // 农机操作员 'agricultural:machinery:driver', // 驾驶员 'agricultural:machinery:monitor', // 监控员 'agricultural:machinery:analyst' // 分析员 ]; // 地块系统权限 const LAND_PERMISSIONS = [ 'land:information:admin', 'land:information:manager', 'land:information:analyst', 'land:monitoring:operator' ]; // 农事系统权限 const FARMING_PERMISSIONS = [ 'farming:operation:admin', 'farming:operation:manager', 'farming:operation:staff', 'farming:planning:analyst' ]; // 资产系统权限 const ASSET_PERMISSIONS = [ 'asset:management:admin', 'asset:procurement:manager', 'asset:inventory:keeper', 'asset:report:viewer' ]; // AI系统权限 const AI_PERMISSIONS = [ 'ai:model:admin', 'ai:model:operator', 'ai:decision:analyst', 'ai:monitoring:viewer' ]; // 灌溉系统权限 const IRRIGATION_PERMISSIONS = [ 'irrigation:control:admin', 'irrigation:control:operator', 'irrigation:monitoring:staff' ]; // 配置系统权限 const CONFIG_PERMISSIONS = [ 'config:system:admin', 'config:user:manager', 'config:tenant:admin', 'config:monitoring:viewer' ]; ``` ## 路由拦截器实现 ### 路由守卫组件 ```javascript // crop-x/src/router/guard.js import { Navigate, useLocation } from 'react-router-dom'; import { useAuthStore } from '../stores/authStore'; export const RouteGuard = ({ children, routeConfig }) => { const { permissions, isAuthenticated } = useAuthStore(); const location = useLocation(); // 1. 检查认证状态 if (!isAuthenticated && routeConfig?.auth?.length > 0) { return ; } // 2. 检查路由是否存在 if (!routeConfig) { return ; } // 3. 检查权限 if (routeConfig.auth && routeConfig.auth.length > 0) { const hasPermission = routeConfig.auth.some( requiredAuth => permissions.includes(requiredAuth) ); if (!hasPermission) { return ; } } return children; }; ``` ### 404页面设计 ```javascript // crop-x/src/pages/Error/NotFound404.jsx import { Button } from '@/components/ui/button'; import { useNavigate, useLocation } from 'react-router-dom'; import { AlertTriangle, Home, ArrowLeft } from 'lucide-react'; export const NotFound404 = () => { const navigate = useNavigate(); const location = useLocation(); const isPermissionDenied = location.state?.reason === 'permission'; return (
{/* 404图案 */}

404

{isPermissionDenied ? ( <>

您没有权限访问此页面

请联系管理员获取相应权限，或返回首页

提示：如果这是系统错误，请联系技术支持

) : ( <>

页面不存在

您访问的页面可能已被删除、移动或暂时不可用

)}
); }; ``` ## 主路由配置 ```javascript // crop-x/src/router/index.js import { createBrowserRouter, Navigate } from 'react-router-dom'; import { Layout } from '@/components/layout/Layout'; import { RouteGuard } from './guard'; import { NotFound404 } from '@/pages/Error/NotFound404'; // 导入各系统路由 import { agriculturalMachineryRoutes } from './agriculturalMachineryRoutes'; import { landInformationRoutes } from './landInformationRoutes'; import { farmingOperationRoutes } from './farmingOperationRoutes'; import { agriculturalAssetRoutes } from './agriculturalAssetRoutes'; import { aiCropModelRoutes } from './aiCropModelRoutes'; import { waterFertilizerControlRoutes } from './waterFertilizerControlRoutes'; import { centralConfigRoutes } from './centralConfigRoutes'; // 导入认证页面 import { Login } from '@/pages/Auth/Login'; import { Register } from '@/pages/Auth/Register'; export const router = createBrowserRouter([ { path: '/', element: , children: [ { index: true, element: }, // 7大业务系统路由 ...agriculturalMachineryRoutes, // 智能农机管理系统 ...landInformationRoutes, // 地块信息管理系统 ...farmingOperationRoutes, // 农事操作管理系统 ...agriculturalAssetRoutes, // 农业资产管理系统 ...aiCropModelRoutes, // AI作物模型精准决策系统 ...waterFertilizerControlRoutes, // 水肥一体化控制系统 ...centralConfigRoutes, // 中心配置管理系统 ] }, // 认证路由（不需要布局） { path: '/login', element: }, { path: '/register', element: }, // 错误页面 { path: '/404', element: }, { path: '*', element: } ]); ``` ## 农机系统路由示例 ```javascript // crop-x/src/router/agriculturalMachineryRoutes.js import { lazy } from 'react'; // 懒加载页面组件 const MachineryEntry = lazy(() => import('@/pages/AgriculturalMachinery/Archive/MachineryEntry')); const ClassificationManagement = lazy(() => import('@/pages/AgriculturalMachinery/Archive/ClassificationManagement')); const QRCodeManagement = lazy(() => import('@/pages/AgriculturalMachinery/Archive/QRCodeManagement')); // ... 其他页面组件 // 路由配置 export const agriculturalMachineryRoutes = [ { path: '/AgriculturalMachinery', auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:view'], children: [ // 档案管理模块 { path: '/Archive', auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator'], children: [ { path: '/MachineryEntry', element: }, { path: '/ClassificationManagement', element: }, { path: '/QRCodeManagement', element: } ] }, // 监控模块 { path: '/Monitoring', auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:monitor'], children: [ { path: '/RealTimeLocationTracking', element: }, // ... 其他监控页面 ] }, // ... 其他模块 ] } ]; ``` ## 实施计划 ### Phase 1: 基础架构搭建（3-5天） 1. **创建项目骨架** ```bash # 在根目录下创建新项目 mkdir crop-x cd crop-x # 初始化新项目 npm create vite@latest . -- --template react-ts npm install # 安装核心依赖 npm install zustand react-router-dom lucide-react npm install -D tailwindcss postcss autoprefixer @types/node npx tailwindcss init -p ``` 2. **配置开发环境** - 配置 Tailwind CSS - 设置 TypeScript 严格模式 - 配置 Vite 开发服务器 - 设置 shadcn/ui 组件库 3. **创建基础目录结构** - router/、stores/、pages/、components/、hooks/、utils/、types/ - 建立基础的文件结构 ### Phase 2: 路由系统实现（3-4天） 1. **实现路由核心** - 创建 router/guard.js 路由守卫 - 实现 router/index.js 主路由配置 - 创建 7 个业务系统的路由文件 2. **实现权限系统** - 设计权限数组验证逻辑 - 创建权限检查工具函数 - 实现权限数据管理 3. **创建错误页面** - 设计 404 权限提示页面 - 实现路由拦截机制 - 添加错误边界组件 ### Phase 3: 用户认证模块（4-5天） 1. **状态管理** - 创建 authStore.js - 实现用户登录/注册逻辑 - 管理权限数据 2. **认证页面** - 实现登录页面 UI - 实现注册页面 UI - 添加表单验证 3. **认证流程** - 实现登录认证流程 - 添加 token 管理 - 实现自动登录功能 ### Phase 4: 布局组件开发（3-4天） 1. **主布局组件** - 创建 Layout.jsx 主布局 - 实现响应式设计 - 集成路由守卫 2. **导航组件** - 创建 Header.jsx 顶部导航 - 实现 Sidebar.jsx 侧边栏 - 添加用户菜单和通知 3. **UI组件库** - 配置 shadcn/ui 基础组件 - 创建通用业务组件 - 建立设计规范 ### Phase 5: 业务页面开发（1-2周） 1. **农机系统页面**（优先级最高） - 档案管理页面 - 监控页面 - 作业管理页面 2. **其他系统页面** - 按优先级依次实现其他6个系统 - 保持UI一致性和交互规范 ### Phase 6: 测试和优化（3-5天） 1. **功能测试** - 路由跳转测试 - 权限控制测试 - 用户认证测试 2. **性能优化** - 代码分割优化 - 组件懒加载 - 状态管理优化 3. **文档和部署** - API文档编写 - 部署配置 - 上线准备 ## 技术特性 ### React 19 特性集成 - **并发特性**: 使用 useTransition 和 useDeferredValue - **Suspense**: 实现组件懒加载和错误边界 - **服务器组件**: 为未来SSR做准备 ### Zustand 状态管理 - **轻量级**: 相比 Redux 更简洁 - **TypeScript友好**: 完整的类型支持 - **中间件支持**: 持久化、开发工具等 ### shadcn/ui 设计系统 - **现代化设计**: 基于 Radix UI 的无障碍组件 - **高度可定制**: 配合 Tailwind CSS - **开发体验**: 优秀的开发工具和文档 ### 权限系统特性 - **数组权限**: 支持多权限验证 - **细粒度控制**: 页面级和功能级权限 - **动态权限**: 支持权限动态更新 ## API 系统架构设计 ### 环境配置管理 ```javascript // crop-x/apis/index.js - 环境配置和API统一入口 const ENV_CONFIG = { development: { baseURL: 'http://localhost:8080', timeout: 10000, enableLogging: true, isMock: true // 开发环境默认开启Mock数据 }, test: { baseURL: 'http://test-api.smart-crop.com', timeout: 15000, enableLogging: true, isMock: false // 测试环境使用真实接口 }, production: { baseURL: 'https://api.smart-crop.com', timeout: 20000, enableLogging: false, isMock: false // 生产环境使用真实接口 } }; ``` ### API 统一导出 ```javascript // 统一导出所有模块API export const API = { // 7大业务系统 agriculturalMachinery: agriculturalMachineryAPI(api), landInformation: landInformationAPI(api), farmingOperation: farmingOperationAPI(api), agriculturalAsset: agriculturalAssetAPI(api), aiCropModel: aiCropModelAPI(api), waterFertilizerControl: waterFertilizerControlAPI(api), centralConfig: centralConfigAPI(api), // 认证API auth: { login: (credentials) => api.post('/auth/login', credentials), register: (userInfo) => api.post('/auth/register', userInfo), logout: () => api.post('/auth/logout'), // ... 其他认证接口 }, // 通用API common: { uploadFile: (fileData) => api.post('/common/upload', fileData), downloadFile: (fileId) => api.get(`/common/download/${fileId}`), // ... 其他通用接口 } }; ``` ### 请求拦截器设计 ```javascript // crop-x/apis/interceptor.js - 请求拦截器 // 核心功能： // 1. 为除登录接口外的所有请求添加身份信息 // 2. 自动刷新token机制 // 3. 统一错误处理 // 4. 请求/响应日志记录 // 5. Mock数据开关控制 // 身份信息字段 // auth: JWT token // user_id: 用户ID（手机号码） // Mock数据控制 // isMock: true/false - 控制是否使用Mock数据 ``` ### Mock数据系统设计 ```javascript // crop-x/apis/mockManager.js - Mock数据管理器 export const createMockManager = (config) => { const { isMock } = config; // Mock数据获取函数 const getMockData = async (mockPath) => { try { // 动态导入Mock数据文件 const mockModule = await import(`../mocks/${mockPath}`); return mockModule.default || mockModule; } catch (error) { console.error(`Mock数据文件不存在: ${mockPath}`, error); throw new Error(`Mock数据文件不存在: ${mockPath}`); } }; return { // 判断是否使用Mock数据 shouldUseMock: () => isMock, // 获取Mock数据 getMockData, // 模拟延迟（模拟网络请求） mockDelay: (min = 100, max = 500) => new Promise(resolve => setTimeout(resolve, Math.random() * (max - min) + min)) }; }; ``` ### Mock数据文件命名规范 ```javascript // Mock数据文件命名规则： // 1. 与pages目录结构完全一致 // 2. 文件名前缀加"Mock"四个字母 // 3. 每个页面对应一个Mock数据文件 // 示例： // pages/AgriculturalMachinery/Archive/MachineryEntry/index.jsx // 对应： // mocks/AgriculturalMachinery/Archive/MachineryEntry/MockMachineryEntry.js // Mock数据文件结构示例： export default { code: 200, message: '获取成功', data: { list: [ { id: 'machinery_001', name: '约翰迪尔拖拉机 JD-001', type: '拖拉机', brand: '约翰迪尔', model: 'JD-001', status: '运行中', // ... 其他字段 } // ... 更多数据 ], pagination: { current: 1, pageSize: 10, total: 50 } } }; ``` ### API请求与Mock数据集成 ```javascript // crop-x/apis/interceptor.js - 请求拦截器增强版 import { createMockManager } from './mockManager'; // 在请求拦截器中集成Mock数据 api.interceptors.request.use( async (config) => { const mockManager = createMockManager(envConfig); // 如果开启Mock数据且非登录接口 if (mockManager.shouldUseMock() && !config.url?.includes('/auth/')) { // 拦截请求，返回Mock数据 const mockPath = config.mockPath || generateMockPath(config.url); const mockData = await mockManager.getMockData(mockPath); await mockManager.mockDelay(); // 模拟网络延迟 // 直接返回Mock数据，不发送真实请求 return Promise.reject({ __mock: true, data: mockData, config }); } // 正常请求流程 return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器处理Mock数据 api.interceptors.response.use( (response) => { return response; }, (error) => { // 如果是Mock数据请求，返回Mock数据 if (error.__mock) { return { data: error.data, status: 200, statusText: 'OK', headers: {}, config: error.config, request: {} }; } // 正常错误处理 return Promise.reject(error); } ); ``` ### 模块化API设计 每个业务模块的API都采用函数式设计，接收axios实例并返回模块化的API对象： ```javascript // 示例：农机管理API结构 export const agriculturalMachineryAPI = (api) => ({ // 农机档案 archive: { getMachineryList: (params) => api.get('/agricultural/machinery/archive/list', { params }), createMachinery: (data) => api.post('/agricultural/machinery/archive/create', data), // ... 其他档案接口 }, // 驾驶员档案 driver: { getDriverList: (params) => api.get('/agricultural/driver/archive/list', { params }), createDriver: (data) => api.post('/agricultural/driver/archive/create', data), // ... 其他驾驶员接口 }, // 其他模块... }); ``` ### API 使用示例 ```javascript import { API } from '@/apis'; // 使用农机管理API const machineryList = await API.agriculturalMachinery.archive.getMachineryList(); const newMachinery = await API.agriculturalMachinery.archive.createMachinery(data); // 使用认证API const loginResult = await API.auth.login({ username, password }); // 使用通用API const uploadResult = await API.common.uploadFile(formData); ``` ## API 模块详细设计 ### 1. 智能农机管理系统 API (agriculturalMachinery.js) - **农机档案管理**: CRUD、分类管理、QR码管理 - **驾驶员档案管理**: 信息管理、任务分配 - **负载管理**: 设备管理、类型管理、参数配置 - **实时监控**: 位置追踪、状态监控、数据获取 - **故障诊断**: 故障报告、健康评估、参数监测 - **精准作业**: 作业记录、路线规划、方案下发、驾驶舱 - **数据分析**: 作业分析、历史对比、统计报表 - **调度管理**: 任务分配、实时调度、轨迹回放 - **安全安防**: 电子围栏管理 ### 2. 地块信息管理系统 API (landInformation.js) - **地块档案管理**: 地块CRUD、分类标签、批量操作 - **地图管理**: GIS数据、数字化绘制、空间查询、卫星影像 - **空间分析**: 土壤数据、分层采样、质量评价 - **环境监测**: 气象数据、环境传感器、监测历史 - **适宜性评价**: 综合评价、批量分析、作物推荐、权重配置 - **对比分析**: 多维指标、图表分析、报告生成 - **风险预警**: 实时监测、预警推送、处置跟踪 ### 3. 农事操作管理系统 API (farmingOperation.js) - **农事计划**: 计划制定、资源分配、进度跟踪 - **农事任务**: 任务管理、分配派发、状态监控、历史统计 - **农事执行**: 类型管理、操作录入、日志查询 - **农事日历**: 可视化视图、甘特图、进度可视化 - **农事档案**: 归集生成、全维视图、追踪溯源 - **知识库**: 内容管理、分类标签、智能检索 - **绩效管理**: 人员管理、工时记录、统计报表、排班管理 - **问题协同**: 问题上报、处理分派、在线协作 ### 4-7. 其他系统API (agriculturalAsset.js, aiCropModel.js, waterFertilizerControl.js, centralConfig.js) - 采用相同的模块化设计结构 - 每个模块包含完整的CRUD操作和业务特定接口 - 支持文件上传、数据导出、批量操作等通用功能 ## 技术特性 ### API拦截器特性 - **智能认证**: 自动为所有非认证接口添加JWT token和用户ID - **token刷新**: 自动检测token过期并刷新 - **错误处理**: 统一的HTTP错误处理和用户提示 - **日志记录**: 开发环境下的完整请求/响应日志 - **性能监控**: 请求耗时统计和分析 - **Mock数据控制**: 智能切换Mock/真实数据，支持开发调试 ### Mock数据系统特性 - **目录结构一致性**: Mock目录与pages目录完全对应 - **命名规范统一**: 文件名前缀"Mock"四个字母 - **动态加载**: 按需动态导入Mock数据文件 - **网络模拟**: 自动模拟网络请求延迟 - **数据格式统一**: Mock数据与真实接口返回格式一致 - **环境切换**: 通过isMock字段灵活控制Mock开关 ### 环境管理特性 - **多环境支持**: development/test/production环境自动切换 - **配置灵活**: 每个环境独立的域名、端口、超时配置 - **调试友好**: 开发环境详细日志，生产环境性能优化 ### 模块化特性 - **高度解耦**: 每个业务模块独立API设计 - **类型安全**: 完整的TypeScript类型定义 - **易于维护**: 清晰的API结构和命名规范 - **扩展性强**: 支持动态添加新的业务模块 ## 环境架构设计 ### Vite环境变量管理 在根目录下创建 `viteEnv/` 文件夹，包含4个环境配置文件： ```bash viteEnv/ ├── .env.development # 开发环境 ├── .env.test # 测试环境 ├── .env.uat # 用户测试环境 └── .env.production # 生产环境 ``` ### 环境配置详情 #### 1. 开发环境 (.env.development) ```bash # 应用配置 VITE_APP_TITLE=智慧农业生产管理系统 VITE_APP_VERSION=1.0.0 VITE_NODE_ENV=development VITE_APP_ENV=dev # API配置 VITE_API_BASE_URL=http://localhost:8080 VITE_API_TIMEOUT=10000 # 功能开关 VITE_ENABLE_MOCK=true VITE_ENABLE_DEVTOOLS=true VITE_ENABLE_CONSOLE_LOG=true VITE_ENABLE_API_LOG=true # 应用端口 VITE_APP_PORT=3001 VITE_APP_HOST=localhost ``` #### 2. 测试环境 (.env.test) ```bash # 应用配置 VITE_APP_TITLE=智慧农业生产管理系统 VITE_NODE_ENV=production VITE_APP_ENV=test # API配置 VITE_API_BASE_URL=http://test-api.smart-crop.com VITE_API_TIMEOUT=15000 # 功能开关 VITE_ENABLE_MOCK=false VITE_ENABLE_DEVTOOLS=false VITE_ENABLE_CONSOLE_LOG=true VITE_ENABLE_API_LOG=true ``` #### 3. 用户测试环境 (.env.uat) ```bash # 应用配置 VITE_APP_TITLE=智慧农业生产管理系统 VITE_NODE_ENV=production VITE_APP_ENV=uat # API配置 VITE_API_BASE_URL=http://uat-api.smart-crop.com VITE_API_TIMEOUT=15000 # 功能开关 VITE_ENABLE_MOCK=false VITE_ENABLE_DEVTOOLS=false VITE_ENABLE_CONSOLE_LOG=true VITE_ENABLE_API_LOG=false ``` #### 4. 生产环境 (.env.production) ```bash # 应用配置 VITE_APP_TITLE=智慧农业生产管理系统 VITE_NODE_ENV=production VITE_APP_ENV=production # API配置 VITE_API_BASE_URL=https://api.smart-crop.com VITE_API_TIMEOUT=20000 # 功能开关 VITE_ENABLE_MOCK=false VITE_ENABLE_DEVTOOLS=false VITE_ENABLE_CONSOLE_LOG=false VITE_ENABLE_API_LOG=false ``` ### Package.json 构建命令 ```json { "scripts": { "dev": "vite --mode development", "build:dev": "vite build --mode development", "build:test": "vite build --mode test", "build:uat": "vite build --mode uat", "build:prod": "vite build --mode production", "preview": "vite preview" } } ``` ### 环境配置特性 #### 配置分类 - **应用基础配置**: 标题、版本、描述等 - **环境标识**: 环境类型和节点环境 - **API配置**: 基础URL、超时时间、重试次数 - **功能开关**: Mock、开发工具、日志等 - **第三方服务**: 地图、监控、分析工具 - **安全配置**: CSP、报告URL等 - **性能配置**: 源码映射、包分析等 #### 环境差异化配置 - **开发环境**: 本地API、开发工具、详细日志 - **测试环境**: 测试API、基础日志、部分监控 - **用户测试环境**: 准生产API、简化日志、完整监控 - **生产环境**: 生产API、关闭日志、性能优化 #### 配置使用方式 ```javascript // 在代码中使用环境变量 const config = { apiUrl: import.meta.env.VITE_API_BASE_URL, appTitle: import.meta.env.VITE_APP_TITLE, enableMock: import.meta.env.VITE_ENABLE_MOCK === 'true', timeout: parseInt(import.meta.env.VITE_API_TIMEOUT) }; // 条件性功能开启 if (import.meta.env.VITE_ENABLE_DEVTOOLS) { // 开启开发工具 } ``` #### 构建命令说明 - `npm run dev` - 启动开发服务器 - `npm run build:dev` - 开发环境构建 - `npm run build:test` - 测试环境构建 - `npm run build:uat` - 用户测试环境构建 - `npm run build:prod` - 生产环境构建 ### 环境管理优势 1. **配置隔离**: 每个环境独立配置，避免相互影响 2. **安全性**: 生产环境敏感信息与开发环境分离 3. **灵活性**: 支持根据环境开启不同功能 4. **可维护性**: 配置文件化管理，易于维护和更新 5. **部署便利**: 一键构建不同环境的部署包 ## Mock数据系统完整规范 ### Mock数据设计原则 1. **真实性**: 数据符合实际业务场景，包含合理的业务逻辑 2. **随机性**: 每次请求返回不同数据，模拟真实环境变化 3. **多样性**: 提供5组固定的数据集，覆盖不同业务场景 4. **完整性**: 包含完整的字段结构和关联关系 5. **性能优化**: 合理的数据量和响应延迟 ### Mock数据文件结构规范 ```javascript // 每个Mock数据文件的标准结构 export default { code: 200, // 响应状态码 message: '获取成功', // 响应消息 timestamp: Date.now(), // 响应时间戳 data: { // 主要数据内容 }, // 分页信息（如适用） pagination: { current: 1, pageSize: 10, total: 50 } }; ``` ### 1. 智能农机管理系统 Mock数据规范 #### 1.1 农机档案录入与维护 (MockMachineryEntry.js) ```javascript // 农机品牌池 const MACHINERY_BRANDS = [ '约翰迪尔', '久保田', '福田雷沃', '中国一拖', '时风集团', '五征集团', '常州东风', '江苏悦达', '山东临工', '柳工机械' ]; // 农机类型池 const MACHINERY_TYPES = [ '拖拉机', '收割机', '播种机', '插秧机', '施肥机', '喷药机', '灌溉设备', '耕地机械', '植保无人机', '粮食烘干机' ]; // 状态池 const STATUS_OPTIONS = ['运行中', '维护中', '故障', '闲置', '作业中']; // 5组农机数据集 const MACHINERY_DATA_SETS = [ // 数据集1: 大型农机 [ { id: 'JD001', name: '约翰迪尔拖拉机 JD-8R-412', type: '拖拉机', brand: '约翰迪尔', model: 'JD-8R-412', serialNumber: 'JD8R4122024001', purchaseDate: '2024-01-15', purchasePrice: 680000, status: '运行中', location: { lat: 31.2304, lng: 121.4737, address: '上海市浦东新区农场路1号' }, specifications: { power: '412马力', weight: '12.5吨', fuelType: '柴油', fuelCapacity: '400升' }, maintenance: { lastMaintenanceDate: '2024-09-15', nextMaintenanceDate: '2024-12-15', maintenanceInterval: '2000小时', totalHours: 1850 }, operator: { id: 'driver001', name: '张师傅', phone: '13812345678', experience: '8年' } } ], // 数据集2: 中型农机 [ { id: 'KT002', name: '久保田收割机 PRO-488', type: '收割机', brand: '久保田', model: 'PRO-488', serialNumber: 'KTP4882024002', purchaseDate: '2024-03-20', purchasePrice: 450000, status: '作业中', location: { lat: 30.2741, lng: 120.1551, address: '浙江省杭州市余杭区农业园' }, specifications: { power: '88马力', cuttingWidth: '4.8米', fuelType: '柴油', fuelCapacity: '180升' } } ], // 数据集3: 小型农机 [ { id: 'FL003', name: '福田雷沃播种机 2BQ-8', type: '播种机', brand: '福田雷沃', model: '2BQ-8', serialNumber: 'FL2BQ82024003', purchaseDate: '2024-05-10', purchasePrice: 120000, status: '闲置', location: { lat: 32.0603, lng: 118.7969, address: '江苏省南京市江宁区' } } ], // 数据集4: 无人机设备 [ { id: 'DJI004', name: '大疆植保无人机 T40', type: '植保无人机', brand: '大疆创新', model: 'T40', serialNumber: 'DJI402024004', purchaseDate: '2024-06-25', purchasePrice: 85000, status: '运行中', location: { lat: 22.5431, lng: 114.0579, address: '广东省深圳市龙岗区' }, specifications: { payload: '40公斤', flightTime: '18分钟', sprayWidth: '9米', batteryCapacity: '20000mAh' } } ], // 数据集5: 灌溉设备 [ { id: 'IR005', name: '智能灌溉系统 IR-2000', type: '灌溉设备', brand: '中国一拖', model: 'IR-2000', serialNumber: 'YTOIR20002024005', purchaseDate: '2024-04-15', purchasePrice: 220000, status: '维护中', location: { lat: 34.3416, lng: 108.9398, address: '陕西省西安市未央区' } } ] ]; export default { code: 200, message: '获取农机档案列表成功', timestamp: Date.now(), data: { list: MACHINERY_DATA_SETS[Math.floor(Math.random() * MACHINERY_DATA_SETS.length)], pagination: { current: Math.floor(Math.random() * 5) + 1, pageSize: 10, total: Math.floor(Math.random() * 50) + 20 } } }; ``` #### 1.2 驾驶员信息管理 (MockDriverInfoManagement.js) ```javascript const DRIVER_NAMES = ['张师傅', '李师傅', '王师傅', '陈师傅', '刘师傅', '赵师傅', '孙师傅', '周师傅']; const LICENSE_TYPES = ['A1', 'A2', 'B1', 'B2', 'C1']; const SKILL_LEVELS = ['初级', '中级', '高级', '特级']; const DRIVER_DATA_SETS = [ // 数据集1: 资深驾驶员 [ { id: 'driver001', name: '张建国', phone: '13812345678', idCard: '320102198001011234', licenseType: 'A2', licenseNumber: '320102198001011234', licenseExpiry: '2025-12-31', experience: '12年', skillLevel: '特级', specialSkills: ['大型拖拉机操作', '精准农业设备', '故障排查'], status: '在职', hireDate: '2020-03-15', salary: 8500, performance: { totalHours: 8760, accidentCount: 0, efficiency: 98.5, rating: 4.9 }, currentAssignment: { machineryId: 'JD001', machineryName: '约翰迪尔拖拉机 JD-8R-412', taskType: '耕地作业', field: 'A区-1号地块' } } ], // 数据集2: 中级驾驶员 [ { id: 'driver002', name: '李明华', phone: '13923456789', idCard: '310101198502022345', licenseType: 'B2', licenseNumber: '310101198502022345', licenseExpiry: '2026-06-30', experience: '7年', skillLevel: '高级', specialSkills: ['收割机操作', '播种设备'], status: '在职', hireDate: '2022-08-20', salary: 7200, performance: { totalHours: 5110, accidentCount: 1, efficiency: 96.2, rating: 4.6 } } ], // 数据集3: 新手驾驶员 [ { id: 'driver003', name: '王小军', phone: '13634567890', idCard: '440101199203033456', licenseType: 'B1', licenseNumber: '440101199203033456', licenseExpiry: '2027-03-15', experience: '2年', skillLevel: '初级', specialSkills: ['小型拖拉机'], status: '在职', hireDate: '2023-06-01', salary: 5500, performance: { totalHours: 1460, accidentCount: 0, efficiency: 91.5, rating: 4.2 } } ], // 数据集4: 无人机飞手 [ { id: 'driver004', name: '陈志强', phone: '13745678901', idCard: '510101199204044567', licenseType: 'C1', licenseNumber: '510101199204044567', licenseExpiry: '2028-04-20', experience: '5年', skillLevel: '高级', specialSkills: ['植保无人机操作', '航拍测绘', '精准施药'], status: '在职', hireDate: '2021-11-10', salary: 7800, performance: { totalHours: 3650, accidentCount: 0, efficiency: 97.8, rating: 4.7 } } ], // 数据集5: 多技能驾驶员 [ { id: 'driver005', name: '刘德明', phone: '13856789012', idCard: '330101198005055678', licenseType: 'A1', licenseNumber: '330101198005055678', licenseExpiry: '2025-05-25', experience: '15年', skillLevel: '特级', specialSkills: ['全系列农机操作', '设备维修', '新设备培训'], status: '在职', hireDate: '2019-02-01', salary: 9200, performance: { totalHours: 10950, accidentCount: 2, efficiency: 99.2, rating: 4.95 } } ] ]; export default { code: 200, message: '获取驾驶员列表成功', timestamp: Date.now(), data: { list: DRIVER_DATA_SETS[Math.floor(Math.random() * DRIVER_DATA_SETS.length)], pagination: { current: Math.floor(Math.random() * 3) + 1, pageSize: 10, total: Math.floor(Math.random() * 30) + 15 } } }; ``` #### 1.3 实时位置追踪 (MockRealTimeLocationTracking.js) ```javascript const LOCATION_DATA_SETS = [ // 数据集1: 上海地区农机 [ { machineryId: 'JD001', machineryName: '约翰迪尔拖拉机 JD-8R-412', driverId: 'driver001', driverName: '张建国', location: { lat: 31.2304 + (Math.random() - 0.5) * 0.01, lng: 121.4737 + (Math.random() - 0.5) * 0.01, address: '上海市浦东新区农场路1号', accuracy: 5 }, status: '作业中', speed: Math.random() * 10 + 2, heading: Math.random() * 360, altitude: Math.random() * 50 + 5, timestamp: Date.now(), battery: Math.floor(Math.random() * 30) + 70, fuel: Math.floor(Math.random() * 40) + 30, engineHours: Math.floor(Math.random() * 1000) + 500, workArea: 'A区-1号地块', workProgress: Math.floor(Math.random() * 100), taskType: '耕地作业', estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 4).toISOString() } ], // 数据集2: 杭州地区农机 [ { machineryId: 'KT002', machineryName: '久保田收割机 PRO-488', driverId: 'driver002', driverName: '李明华', location: { lat: 30.2741 + (Math.random() - 0.5) * 0.01, lng: 120.1551 + (Math.random() - 0.5) * 0.01, address: '浙江省杭州市余杭区农业园', accuracy: 8 }, status: '收割作业', speed: Math.random() * 6 + 1, heading: Math.random() * 360, altitude: Math.random() * 30 + 2, timestamp: Date.now(), battery: Math.floor(Math.random() * 25) + 75, fuel: Math.floor(Math.random() * 35) + 25, engineHours: Math.floor(Math.random() * 800) + 200, workArea: 'B区-3号地块', workProgress: Math.floor(Math.random() * 100), taskType: '水稻收割', estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 2).toISOString() } ], // 数据集3: 南京地区农机 [ { machineryId: 'FL003', machineryName: '福田雷沃播种机 2BQ-8', driverId: 'driver003', driverName: '王小军', location: { lat: 32.0603 + (Math.random() - 0.5) * 0.01, lng: 118.7969 + (Math.random() - 0.5) * 0.01, address: '江苏省南京市江宁区', accuracy: 6 }, status: '移动中', speed: Math.random() * 15 + 5, heading: Math.random() * 360, altitude: Math.random() * 40 + 3, timestamp: Date.now(), battery: Math.floor(Math.random() * 20) + 80, fuel: Math.floor(Math.random() * 50) + 20, engineHours: Math.floor(Math.random() * 600) + 100, workArea: 'C区-2号地块', workProgress: Math.floor(Math.random() * 100), taskType: '玉米播种', estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 3).toISOString() } ], // 数据集4: 深圳地区无人机 [ { machineryId: 'DJI004', machineryName: '大疆植保无人机 T40', driverId: 'driver004', driverName: '陈志强', location: { lat: 22.5431 + (Math.random() - 0.5) * 0.01, lng: 114.0579 + (Math.random() - 0.5) * 0.01, address: '广东省深圳市龙岗区', accuracy: 2 }, status: '飞行作业', speed: Math.random() * 8 + 4, heading: Math.random() * 360, altitude: Math.random() * 20 + 30, timestamp: Date.now(), battery: Math.floor(Math.random() * 40) + 40, fuel: Math.floor(Math.random() * 60) + 10, engineHours: Math.floor(Math.random() * 300) + 50, workArea: 'D区-1号果园', workProgress: Math.floor(Math.random() * 100), taskType: '果树病虫害防治', estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 1.5).toISOString() } ], // 数据集5: 西安地区灌溉设备 [ { machineryId: 'IR005', machineryName: '智能灌溉系统 IR-2000', driverId: 'driver005', driverName: '刘德明', location: { lat: 34.3416 + (Math.random() - 0.5) * 0.01, lng: 108.9398 + (Math.random() - 0.5) * 0.01, address: '陕西省西安市未央区', accuracy: 3 }, status: '灌溉作业', speed: 0, heading: 0, altitude: 0, timestamp: Date.now(), battery: Math.floor(Math.random() * 15) + 85, fuel: 0, engineHours: Math.floor(Math.random() * 2000) + 1000, workArea: 'E区-4号大棚', workProgress: Math.floor(Math.random() * 100), taskType: '自动灌溉', estimatedCompletion: new Date(Date.now() + Math.random() * 3600000 * 6).toISOString() } ] ]; export default { code: 200, message: '获取实时位置数据成功', timestamp: Date.now(), data: { locations: LOCATION_DATA_SETS[Math.floor(Math.random() * LOCATION_DATA_SETS.length)], summary: { totalMachinery: Math.floor(Math.random() * 20) + 10, activeMachinery: Math.floor(Math.random() * 15) + 5, idleMachinery: Math.floor(Math.random() * 5) + 2, maintenanceMachinery: Math.floor(Math.random() * 3) + 1 } } }; ``` #### 1.4 故障诊断与预警 (MockFaultWarning.js) ```javascript const FAULT_TYPES = ['发动机故障', '液压系统故障', '电气系统故障', '传动系统故障', '控制系统故障']; const FAULT_LEVELS = ['轻微', '一般', '严重', '紧急']; const FAULT_STATUSES = ['待处理', '处理中', '已解决', '已关闭']; const FAULT_DATA_SETS = [ // 数据集1: 发动机故障 [ { id: 'fault001', machineryId: 'JD001', machineryName: '约翰迪尔拖拉机 JD-8R-412', faultType: '发动机故障', faultCode: 'E001', faultLevel: '严重', description: '发动机温度过高，冷却系统异常', detail: '发动机水温达到95°C，超出正常工作温度范围，冷却风扇转速异常', status: '待处理', reportTime: '2024-10-16 14:30:00', reporter: '张建国', reporterPhone: '13812345678', location: { lat: 31.2304, lng: 121.4737, address: '上海市浦东新区农场路1号' }, impact: { workStoppage: true, estimatedDowntime: '4小时', economicLoss: 2000 }, diagnosis: { possibleCauses: ['冷却液不足', '冷却水泵故障', '散热器堵塞', '温度传感器故障'], recommendedActions: ['检查冷却液位', '检查冷却水泵', '清理散热器', '更换温度传感器'] }, assignedTechnician: { id: 'tech001', name: '技术员王师傅', phone: '13987654321', estimatedArrival: '2024-10-16 15:00:00' } } ], // 数据集2: 液压系统故障 [ { id: 'fault002', machineryId: 'KT002', machineryName: '久保田收割机 PRO-488', faultType: '液压系统故障', faultCode: 'H002', faultLevel: '一般', description: '液压系统压力不足，升降机构动作缓慢', detail: '液压系统压力仅为15MPa，低于正常工作压力25MPa', status: '处理中', reportTime: '2024-10-16 10:15:00', location: { lat: 30.2741, lng: 120.1551 }, diagnosis: { possibleCauses: ['液压泵磨损', '液压油泄漏', '溢流阀故障'], recommendedActions: ['检查液压泵', '查找泄漏点', '调整溢流阀压力'] } } ], // 数据集3: 电气系统故障 [ { id: 'fault003', machineryId: 'DJI004', machineryName: '大疆植保无人机 T40', faultType: '电气系统故障', faultCode: 'E003', faultLevel: '轻微', description: '电池管理系统报警，电池容量显示异常', status: '已解决', reportTime: '2024-10-16 08:45:00', resolvedTime: '2024-10-16 09:30:00' } ], // 数据集4: 传动系统故障 [ { id: 'fault004', machineryId: 'FL003', machineryName: '福田雷沃播种机 2BQ-8', faultType: '传动系统故障', faultCode: 'T004', faultLevel: '紧急', description: '传动链条断裂，播种作业中断', status: '待处理', reportTime: '2024-10-16 16:20:00' } ], // 数据集5: 控制系统故障 [ { id: 'fault005', machineryId: 'IR005', machineryName: '智能灌溉系统 IR-2000', faultType: '控制系统故障', faultCode: 'C005', faultLevel: '一般', description: 'PLC控制器通讯异常，部分区域无法正常灌溉', status: '处理中', reportTime: '2024-10-16 12:00:00' } ] ]; export default { code: 200, message: '获取故障预警数据成功', timestamp: Date.now(), data: { list: FAULT_DATA_SETS[Math.floor(Math.random() * FAULT_DATA_SETS.length)], statistics: { totalFaults: Math.floor(Math.random() * 20) + 5, pendingFaults: Math.floor(Math.random() * 8) + 2, processingFaults: Math.floor(Math.random() * 5) + 1, resolvedFaults: Math.floor(Math.random() * 10) + 3, emergencyFaults: Math.floor(Math.random() * 3) } } }; ``` ### 2. 地块信息管理系统 Mock数据规范 #### 2.1 地块档案管理 (MockFieldManagement.js) ```javascript const CROP_TYPES = ['水稻', '小麦', '玉米', '大豆', '棉花', '蔬菜', '果树', '茶叶']; const SOIL_TYPES = ['沙壤土', '黏土', '壤土', '砂土', '泥炭土']; const IRRIGATION_TYPES = ['漫灌', '喷灌', '滴灌', '微喷', '渗灌']; const FIELD_DATA_SETS = [ // 数据集1: 大型水稻田 [ { id: 'field001', name: '东区1号地块', code: 'E-001', area: 125.6, areaUnit: '亩', shape: '不规则多边形', coordinates: [ { lat: 31.2304, lng: 121.4737 }, { lat: 31.2314, lng: 121.4747 }, { lat: 31.2309, lng: 121.4757 }, { lat: 31.2299, lng: 121.4747 } ], centerPoint: { lat: 31.2307, lng: 121.4747 }, elevation: 12.5, soilType: '黏土', phValue: 6.8, organicMatter: 2.3, irrigationType: '漫灌', drainageCondition: '良好', currentCrop: '水稻', cropVariety: '东北大米', plantingDate: '2024-05-15', expectedHarvest: '2024-10-20', growthStage: '灌浆期', owner: { id: 'farmer001', name: '李农户', phone: '13512345678', contractStart: '2024-01-01', contractEnd: '2024-12-31' }, infrastructure: { irrigation: '有', drainage: '有', electricity: '有', road: '水泥路', storage: '简易仓库' }, yieldHistory: [ { year: 2021, crop: '水稻', yield: 520, unit: 'kg/亩' }, { year: 2022, crop: '水稻', yield: 535, unit: 'kg/亩' }, { year: 2023, crop: '水稻', yield: 548, unit: 'kg/亩' } ] } ], // 数据集2: 蔬菜大棚 [ { id: 'field002', name: '西区蔬菜大棚A区', code: 'W-GA-001', area: 8.5, areaUnit: '亩', shape: '矩形', coordinates: [ { lat: 30.2741, lng: 120.1551 }, { lat: 30.2751, lng: 120.1551 }, { lat: 30.2751, lng: 120.1561 }, { lat: 30.2741, lng: 120.1561 } ], soilType: '壤土', currentCrop: '西红柿', cropVariety: '粉冠王', growthStage: '结果期', infrastructure: { greenhouse: '钢结构大棚', irrigation: '滴灌', heating: '有', ventilation: '自动通风' } } ], // 数据集3: 果园 [ { id: 'field003', name: '南区苹果园', code: 'S-003', area: 45.2, areaUnit: '亩', currentCrop: '苹果', cropVariety: '红富士', treeAge: '8年', plantingDensity: '56株/亩', infrastructure: { irrigation: '喷灌', frostProtection: '防霜冻系统', supportSystem: '支架系统' } } ], // 数据集4: 茶园 [ { id: 'field004', name: '北区生态茶园', code: 'N-004', area: 28.8, areaUnit: '亩', currentCrop: '茶叶', cropVariety: '龙井43号', teaPlantAge: '5年', terrain: '丘陵地', slope: '15-25度' } ], // 数据集5: 实验田 [ { id: 'field005', name: '科研实验田', code: 'R-005', area: 12.3, areaUnit: '亩', purpose: '新品种试验', experimentType: '品种对比试验', testCrops: ['新品种小麦A', '新品种小麦B', '对照品种'], researchInstitution: '农业科学院', principalInvestigator: '王研究员' } ] ]; export default { code: 200, message: '获取地块档案成功', timestamp: Date.now(), data: { list: FIELD_DATA_SETS[Math.floor(Math.random() * FIELD_DATA_SETS.length)], summary: { totalFields: Math.floor(Math.random() * 50) + 20, totalArea: Math.floor(Math.random() * 2000) + 500, cultivatedArea: Math.floor(Math.random() * 1800) + 400, averageYield: Math.floor(Math.random() * 200) + 300 } } }; ``` ### 3. 认证系统 Mock数据规范 #### 3.1 用户登录 (MockLogin.js) ```javascript const USER_DATA_SETS = [ // 数据集1: 系统管理员 { user: { id: 'user001', username: 'admin', phone: '13800000001', email: 'admin@smart-crop.com', name: '系统管理员', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin', role: 'system_admin', department: '信息技术部', position: '系统管理员', status: 'active', lastLoginTime: '2024-10-16 08:30:00', createTime: '2020-01-01 00:00:00' }, permissions: [ 'system:admin', 'agricultural:machinery:admin', 'land:information:admin', 'farming:operation:admin', 'asset:management:admin', 'ai:model:admin', 'irrigation:control:admin', 'config:system:admin' ], token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.admin.token.mock', refreshToken: 'refresh.token.admin.mock', expiresIn: 7200 }, // 数据集2: 农机管理员 { user: { id: 'user002', username: 'machinery_manager', phone: '13800000002', name: '农机管理员', role: 'machinery_manager', department: '农机管理部', position: '农机管理员' }, permissions: [ 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'land:information:view' ], token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.machinery.token.mock', refreshToken: 'refresh.token.machinery.mock', expiresIn: 7200 }, // 数据集3: 普通操作员 { user: { id: 'user003', username: 'operator001', phone: '13800000003', name: '操作员张三', role: 'operator', department: '田间作业部', position: '农机操作员' }, permissions: [ 'agricultural:machinery:operator', 'land:information:view', 'farming:operation:staff' ], token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.operator.token.mock', refreshToken: 'refresh.token.operator.mock', expiresIn: 7200 } ]; export default { code: 200, message: '登录成功', timestamp: Date.now(), data: USER_DATA_SETS[Math.floor(Math.random() * USER_DATA_SETS.length)] }; ``` ### Mock数据使用指南 #### 1. 数据随机化策略 每个Mock数据文件都包含多个数据集，通过以下方式实现随机性： ```javascript // 随机选择数据集 const selectedData = DATA_SETS[Math.floor(Math.random() * DATA_SETS.length)]; // 随机生成分页信息 const pagination = { current: Math.floor(Math.random() * 5) + 1, pageSize: 10, total: Math.floor(Math.random() * 50) + 20 }; // 随机生成位置偏移（模拟实时移动） const location = { lat: baseLat + (Math.random() - 0.5) * 0.01, lng: baseLng + (Math.random() - 0.5) * 0.01 }; ``` #### 2. 数据关联性 不同Mock数据文件之间通过ID保持关联性： ```javascript // 农机数据中的operatorId与驾驶员数据中的id对应 // 位置数据中的machineryId与农机数据中的id对应 // 故障数据中的machineryId与农机数据中的id对应 ``` #### 3. 业务逻辑模拟 Mock数据包含真实的业务逻辑： ```javascript // 农机状态影响作业数据 // 驾驶员技能影响作业效率 // 地块属性影响产量预测 // 故障类型影响维修时间和成本 ``` #### 4. 性能优化 - 合理控制数据量，避免返回过多数据 - 模拟真实的网络延迟（100-500ms） - 支持分页和筛选功能 - 提供统计数据用于图表展示 --- *本文档基于 Mary 的头脑风暴分析结果生成，为 crop-x 项目提供完整的技术架构方案，包括路由系统、API管理、认证机制、环境配置、业务架构设计和详细的Mock数据规范。*