cavin/smart-crop-ui

Fork 0

Files

peng 5c783c73e1 next.js搭建路由01

2025-10-20 16:19:41 +08:00

104 KiB

Raw Blame History

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模板

特性优先配置系统架构

配置系统设计原则

基于业界最佳实践，设计了特性优先的配置系统，具备以下特点：

类型安全: 完整的TypeScript类型定义
环境隔离: 开发、测试、UAT、生产环境独立配置
特性开关: 细粒度的功能开关管理
权限控制: 基于配置的权限验证
开发友好: 便捷的API和丰富的工具函数

配置系统核心架构

// 配置系统分层架构 (位于 crop-x/config/ 下)
crop-x/config/
├── types/                 # 类型定义层
├── environments/          # 环境配置层
├── features/              # 特性配置层
├── services/              # 服务配置层
├── build/                 # 构建配置层
├── config-manager.ts      # 配置管理层
└── index.ts               # 统一入口层

配置类型系统

完整的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;
  };
  // ... 其他特性配置
}

环境配置系统

每个环境都有独立的配置文件，支持环境差异化：

// 开发环境配置示例
export const developmentConfig: Partial<Config> = {
  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
    },
    // ... 其他特性
  }
};

特性配置系统

特性配置支持复杂的业务逻辑和权限控制：

// 农机管理特性配置示例
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：

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
}

配置使用示例

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
);

配置系统优势

类型安全: 完整的TypeScript类型支持，编译时错误检查
环境隔离: 每个环境独立配置，避免配置冲突
特性优先: 按业务特性组织配置，提高代码可维护性
权限集成: 配置与权限系统集成，实现动态权限控制
开发友好: 提供丰富的工具函数和便捷API
扩展性强: 支持动态添加新的特性和配置项

配置系统实施计划

Phase 1: 创建配置类型定义和基础架构
Phase 2: 实现环境配置系统
Phase 3: 实现特性配置系统
Phase 4: 开发配置管理器
Phase 5: 集成到现有代码中
Phase 6: 文档和测试完善

静态资源管理架构

Vite项目静态资源标准

基于Vite构建工具的标准项目结构，设计了完整的静态资源管理方案：

1. Public目录 (public/)

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/)

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. 静态资源使用示例

// 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. 静态资源优化策略

// 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. 图片资源管理

// 图片组件封装
import { lazy } from 'react';

const ImageWithFallback = lazy(() => import('@/components/common/ImageWithFallback'));

// 使用示例
<ImageWithFallback
  src="/images/machinery/default.jpg"
  fallback="/images/machinery/placeholder.jpg"
  alt="农机图片"
  className="w-full h-48 object-cover"
  loading="lazy"
/>

6. 字体资源管理

/* 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资源配置

// 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分发

路由命名映射

基于实际业务名称的路由映射：

// 导航系统实际名称 → 路由名称
智能农机管理系统        → /AgriculturalMachinery
地块信息管理系统        → /LandInformation
农事操作管理系统        → /FarmingOperation
农业资产管理系统        → /AgriculturalAsset
AI作物模型精准决策系统  → /AICropModel
水肥一体化控制系统      → /WaterFertilizerControl
中心配置管理系统        → /CentralConfig

三级路由结构设计

示例：智能农机管理系统 (/AgriculturalMachinery)

/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级：电子围栏

权限数组设计

权限检查逻辑

// 路由权限配置示例
{
  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));
};

完整权限体系

// 系统级权限
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'
];

路由拦截器实现

路由守卫组件

// 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 <Navigate to="/login" replace state={{ from: location }} />;
  }

  // 2. 检查路由是否存在
  if (!routeConfig) {
    return <Navigate to="/404" replace state={{ from: location }} />;
  }

  // 3. 检查权限
  if (routeConfig.auth && routeConfig.auth.length > 0) {
    const hasPermission = routeConfig.auth.some(
      requiredAuth => permissions.includes(requiredAuth)
    );

    if (!hasPermission) {
      return <Navigate to="/404" replace state={{ reason: 'permission' }} />;
    }
  }

  return children;
};

404页面设计

// 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 (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="text-center max-w-md mx-auto p-6">
        {/* 404图案 */}
        <div className="mb-8">
          <div className="w-32 h-32 mx-auto bg-red-100 rounded-full flex items-center justify-center">
            <AlertTriangle className="w-16 h-16 text-red-500" />
          </div>
        </div>

        <h1 className="text-4xl font-bold text-gray-900 mb-2">404</h1>

        {isPermissionDenied ? (
          <>
            <h2 className="text-xl font-semibold text-red-600 mb-4">
              您没有权限访问此页面
            </h2>
            <p className="text-gray-600 mb-6">
              请联系管理员获取相应权限，或返回首页
            </p>
            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-6">
              <p className="text-sm text-yellow-800">
                <strong>提示：</strong>如果这是系统错误，请联系技术支持
              </p>
            </div>
          </>
        ) : (
          <>
            <h2 className="text-xl font-semibold text-gray-700 mb-4">
              页面不存在
            </h2>
            <p className="text-gray-600 mb-6">
              您访问的页面可能已被删除、移动或暂时不可用
            </p>
          </>
        )}

        <div className="space-y-3">
          <Button onClick={() => navigate(-1)} className="w-full">
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回上一页
          </Button>
          <Button variant="outline" onClick={() => navigate('/')} className="w-full">
            <Home className="w-4 h-4 mr-2" />
            返回首页
          </Button>
        </div>
      </div>
    </div>
  );
};

主路由配置

// 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: <Layout />,
    children: [
      { index: true, element: <Navigate to="/AgriculturalMachinery" replace /> },

      // 7大业务系统路由
      ...agriculturalMachineryRoutes,    // 智能农机管理系统
      ...landInformationRoutes,          // 地块信息管理系统
      ...farmingOperationRoutes,         // 农事操作管理系统
      ...agriculturalAssetRoutes,        // 农业资产管理系统
      ...aiCropModelRoutes,              // AI作物模型精准决策系统
      ...waterFertilizerControlRoutes,   // 水肥一体化控制系统
      ...centralConfigRoutes,            // 中心配置管理系统
    ]
  },

  // 认证路由（不需要布局）
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/register',
    element: <Register />
  },

  // 错误页面
  {
    path: '/404',
    element: <NotFound404 />
  },
  {
    path: '*',
    element: <Navigate to="/404" replace />
  }
]);

农机系统路由示例

// 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: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator'] }}>
              <MachineryEntry />
            </RouteGuard>
          },
          {
            path: '/ClassificationManagement',
            element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin'] }}>
              <ClassificationManagement />
            </RouteGuard>
          },
          {
            path: '/QRCodeManagement',
            element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator'] }}>
              <QRCodeManagement />
            </RouteGuard>
          }
        ]
      },

      // 监控模块
      {
        path: '/Monitoring',
        auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:monitor'],
        children: [
          {
            path: '/RealTimeLocationTracking',
            element: <RouteGuard routeConfig={{ auth: ['system:admin', 'agricultural:machinery:admin', 'agricultural:machinery:operator', 'agricultural:machinery:monitor'] }}>
              <RealTimeLocationTracking />
            </RouteGuard>
          },
          // ... 其他监控页面
        ]
      },

      // ... 其他模块
    ]
  }
];

实施计划

Phase 1: 基础架构搭建（3-5天）

创建项目骨架

# 在根目录下创建新项目
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

配置开发环境
- 配置 Tailwind CSS
- 设置 TypeScript 严格模式
- 配置 Vite 开发服务器
- 设置 shadcn/ui 组件库
创建基础目录结构
- router/、stores/、pages/、components/、hooks/、utils/、types/
- 建立基础的文件结构

Phase 2: 路由系统实现（3-4天）

实现路由核心
- 创建 router/guard.js 路由守卫
- 实现 router/index.js 主路由配置
- 创建 7 个业务系统的路由文件
实现权限系统
- 设计权限数组验证逻辑
- 创建权限检查工具函数
- 实现权限数据管理
创建错误页面
- 设计 404 权限提示页面
- 实现路由拦截机制
- 添加错误边界组件

Phase 3: 用户认证模块（4-5天）

状态管理
- 创建 authStore.js
- 实现用户登录/注册逻辑
- 管理权限数据
认证页面
- 实现登录页面 UI
- 实现注册页面 UI
- 添加表单验证
认证流程
- 实现登录认证流程
- 添加 token 管理
- 实现自动登录功能

Phase 4: 布局组件开发（3-4天）

主布局组件
- 创建 Layout.jsx 主布局
- 实现响应式设计
- 集成路由守卫
导航组件
- 创建 Header.jsx 顶部导航
- 实现 Sidebar.jsx 侧边栏
- 添加用户菜单和通知
UI组件库
- 配置 shadcn/ui 基础组件
- 创建通用业务组件
- 建立设计规范

Phase 5: 业务页面开发（1-2周）

农机系统页面（优先级最高）
- 档案管理页面
- 监控页面
- 作业管理页面
其他系统页面
- 按优先级依次实现其他6个系统
- 保持UI一致性和交互规范

Phase 6: 测试和优化（3-5天）

功能测试
- 路由跳转测试
- 权限控制测试
- 用户认证测试
性能优化
- 代码分割优化
- 组件懒加载
- 状态管理优化
文档和部署
- API文档编写
- 部署配置
- 上线准备

技术特性

React 19 特性集成

并发特性: 使用 useTransition 和 useDeferredValue
Suspense: 实现组件懒加载和错误边界
服务器组件: 为未来SSR做准备

Zustand 状态管理

轻量级: 相比 Redux 更简洁
TypeScript友好: 完整的类型支持
中间件支持: 持久化、开发工具等

shadcn/ui 设计系统

现代化设计: 基于 Radix UI 的无障碍组件
高度可定制: 配合 Tailwind CSS
开发体验: 优秀的开发工具和文档

权限系统特性

数组权限: 支持多权限验证
细粒度控制: 页面级和功能级权限
动态权限: 支持权限动态更新

API 系统架构设计

环境配置管理

// 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 统一导出

// 统一导出所有模块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}`),
    // ... 其他通用接口
  }
};

请求拦截器设计

// crop-x/apis/interceptor.js - 请求拦截器
// 核心功能：
// 1. 为除登录接口外的所有请求添加身份信息
// 2. 自动刷新token机制
// 3. 统一错误处理
// 4. 请求/响应日志记录
// 5. Mock数据开关控制

// 身份信息字段
// auth: JWT token
// user_id: 用户ID（手机号码）

// Mock数据控制
// isMock: true/false - 控制是否使用Mock数据

Mock数据系统设计

// 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数据文件命名规范

// 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数据集成

// 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对象：

// 示例：农机管理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 使用示例

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个环境配置文件：

viteEnv/
├── .env.development    # 开发环境
├── .env.test           # 测试环境
├── .env.uat            # 用户测试环境
└── .env.production     # 生产环境

环境配置详情

1. 开发环境 (.env.development)

# 应用配置
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)

# 应用配置
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)

# 应用配置
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)

# 应用配置
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 构建命令

{
  "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、关闭日志、性能优化

配置使用方式

// 在代码中使用环境变量
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 - 生产环境构建

环境管理优势

配置隔离: 每个环境独立配置，避免相互影响
安全性: 生产环境敏感信息与开发环境分离
灵活性: 支持根据环境开启不同功能
可维护性: 配置文件化管理，易于维护和更新
部署便利: 一键构建不同环境的部署包

Mock数据系统完整规范

Mock数据设计原则

真实性: 数据符合实际业务场景，包含合理的业务逻辑
随机性: 每次请求返回不同数据，模拟真实环境变化
多样性: 提供5组固定的数据集，覆盖不同业务场景
完整性: 包含完整的字段结构和关联关系
性能优化: 合理的数据量和响应延迟

Mock数据文件结构规范

// 每个Mock数据文件的标准结构
export default {
  code: 200,                    // 响应状态码
  message: '获取成功',          // 响应消息
  timestamp: Date.now(),        // 响应时间戳
  data: {
    // 主要数据内容
  },
  // 分页信息（如适用）
  pagination: {
    current: 1,
    pageSize: 10,
    total: 50
  }
};

1. 智能农机管理系统 Mock数据规范

1.1 农机档案录入与维护 (MockMachineryEntry.js)

// 农机品牌池
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)

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)

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)

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)

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)

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数据文件都包含多个数据集，通过以下方式实现随机性：

// 随机选择数据集
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保持关联性：

// 农机数据中的operatorId与驾驶员数据中的id对应
// 位置数据中的machineryId与农机数据中的id对应
// 故障数据中的machineryId与农机数据中的id对应

3. 业务逻辑模拟

Mock数据包含真实的业务逻辑：

// 农机状态影响作业数据
// 驾驶员技能影响作业效率
// 地块属性影响产量预测
// 故障类型影响维修时间和成本

4. 性能优化

合理控制数据量，避免返回过多数据
模拟真实的网络延迟（100-500ms）
支持分页和筛选功能
提供统计数据用于图表展示

本文档基于 Mary 的头脑风暴分析结果生成，为 crop-x 项目提供完整的技术架构方案，包括路由系统、API管理、认证机制、环境配置、业务架构设计和详细的Mock数据规范。

104 KiB Raw Blame History Unescape Escape

Crop-X 项目完整技术架构方案

项目概述

技术栈

新项目目录结构

特性优先配置系统架构

配置系统设计原则

配置系统核心架构

配置类型系统

环境配置系统

特性配置系统

配置管理器

配置使用示例

配置系统优势

配置系统实施计划

静态资源管理架构

Vite项目静态资源标准

1. Public目录 (public/)

2. Assets目录 (src/assets/)

3. 静态资源使用示例

4. 静态资源优化策略

5. 图片资源管理

6. 字体资源管理

7. PWA资源配置

8. 静态资源性能优化

路由命名映射

三级路由结构设计

示例：智能农机管理系统 (/AgriculturalMachinery)

权限数组设计

权限检查逻辑

完整权限体系

路由拦截器实现

路由守卫组件

404页面设计

主路由配置

农机系统路由示例

实施计划

Phase 1: 基础架构搭建（3-5天）

Phase 2: 路由系统实现（3-4天）

Phase 3: 用户认证模块（4-5天）

Phase 4: 布局组件开发（3-4天）

Phase 5: 业务页面开发（1-2周）

Phase 6: 测试和优化（3-5天）

技术特性

React 19 特性集成

Zustand 状态管理

shadcn/ui 设计系统

权限系统特性

API 系统架构设计

环境配置管理

API 统一导出

请求拦截器设计

Mock数据系统设计

Mock数据文件命名规范

API请求与Mock数据集成

模块化API设计

API 使用示例

API 模块详细设计

1. 智能农机管理系统 API (agriculturalMachinery.js)

2. 地块信息管理系统 API (landInformation.js)

3. 农事操作管理系统 API (farmingOperation.js)

4-7. 其他系统API (agriculturalAsset.js, aiCropModel.js, waterFertilizerControl.js, centralConfig.js)

技术特性

API拦截器特性

Mock数据系统特性

环境管理特性

模块化特性

环境架构设计

Vite环境变量管理

环境配置详情

1. 开发环境 (.env.development)

2. 测试环境 (.env.test)

3. 用户测试环境 (.env.uat)

4. 生产环境 (.env.production)

Package.json 构建命令

环境配置特性

配置分类

环境差异化配置

配置使用方式

构建命令说明

104 KiB

Raw Blame History