40 KiB
40 KiB
Crop-X 项目完整技术架构方案 (Next.js App Router 版本)
Session Date: 2025-10-16 Facilitator: Business Analyst Mary Project: 智慧农业系统 crop-x 重构 (Next.js App Router 版本)
项目概述
基于现有的智慧农业生产管理系统，在根目录下创建全新的 crop-x 项目，采用 Next.js 14 App Router + 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
Next.js App Router 目录结构
D:\code\repotest\smart-crop-ui\ # 原项目（保留不变）
├── 📂 crop-x/ # 🆕 全新的重构项目 (Next.js App Router)
│ ├── 📂 app/ # 🆕 Next.js App Router 页面组件 - 7大业务模块完整层级结构
│ │ ├── 📄 layout.tsx # 🆕 根布局组件
│ │ ├── 📄 page.tsx # 🆕 首页组件
│ │ ├── 📄 loading.tsx # 🆕 全局加载组件
│ │ ├── 📄 error.tsx # 🆕 全局错误组件
│ │ ├── 📄 not-found.tsx # 🆕 404页面组件
│ │ ├── 📂 (auth)/ # 🆕 认证路由组
│ │ │ ├── 📄 layout.tsx # 认证布局
│ │ │ ├── 📂 login/ # 登录页面
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 register/ # 注册页面
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 agricultural-machinery/ # 🚙 智能农机管理系统页面
│ │ │ ├── 📄 layout.tsx # 🆕 农机系统布局
│ │ │ ├── 📄 page.tsx # 🆕 农机系统主页面
│ │ │ ├── 📄 loading.tsx # 🆕 农机系统加载组件
│ │ │ ├── 📄 error.tsx # 🆕 农机系统错误组件
│ │ │ ├── 📂 archive/ # B级：农机档案
│ │ │ │ ├── 📄 page.tsx # 🆕 档案主页
│ │ │ │ ├── 📂 machinery-entry/ # C级：农机档案录入与维护
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 classification-management/ # C级：农机分类与标签管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 qr-code-management/ # C级：农机二维码管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 driver-archive/ # B级：驾驶员档案
│ │ │ │ ├── 📄 page.tsx # 🆕 驾驶员档案主页
│ │ │ │ ├── 📂 driver-info-management/ # C级：驾驶员信息管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 driver-task-management/ # C级：驾驶员任务管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 monitoring/ # B级：设备实时监控与定位
│ │ │ │ ├── 📄 page.tsx # 🆕 监控主页
│ │ │ │ ├── 📂 real-time-location-tracking/ # C级：实时位置追踪
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 work-status-monitoring/ # C级：工作状态监控
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 operation-data-monitoring/ # C级：作业数据监控
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 fault-diagnosis/ # B级：远程诊断与故障预警
│ │ │ │ ├── 📄 page.tsx # 🆕 故障诊断主页
│ │ │ │ ├── 📂 fault-warning/ # C级：故障诊断与预警
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 health-assessment/ # C级：健康评估
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 parameter-monitoring/ # C级：运行参数监测
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 precision-operation/ # B级：精准作业管理与支持
│ │ │ │ ├── 📄 page.tsx # 🆕 精准作业主页
│ │ │ │ ├── 📂 operation-record/ # C级：作业数据记录
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 route-planning/ # C级：作业路线规划
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 plan-dispatch/ # C级：作业方案下发
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 driving-cockpit/ # C级：农机驾驶舱
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 data-analysis/ # B级：数据管理与分析报告
│ │ │ │ ├── 📄 page.tsx # 🆕 数据分析主页
│ │ │ │ ├── 📂 operation-analysis/ # C级：作业数据分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 historical-data-comparison/ # C级：历史数据查询与对比
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 scheduling/ # B级：农机管理与调度
│ │ │ │ ├── 📄 page.tsx # 🆕 调度管理主页
│ │ │ │ ├── 📂 task-assignment/ # C级：任务分配
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 real-time-dispatch/ # C级：实时调度监控
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 track-playback/ # C级：农机作业轨迹回放
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 security/ # B级：安全与安防
│ │ │ ├── 📄 page.tsx # 🆕 安全安防主页
│ │ │ └── 📂 geo-fence/ # C级：电子围栏
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 land-information/ # 🌾 地块信息管理系统页面
│ │ │ ├── 📄 layout.tsx # 🆕 地块系统布局
│ │ │ ├── 📄 page.tsx # 🆕 地块系统主页面
│ │ │ ├── 📂 field-management/ # B级：地块档案管理
│ │ │ │ ├── 📄 page.tsx # 🆕 地块档案主页
│ │ │ │ ├── 📂 field-entry/ # C级：地块信息录入
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 classification-management/ # C级：地块分类管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 batch-operation/ # C级：批量操作
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 map-management/ # B级：地图管理
│ │ │ │ ├── 📄 page.tsx # 🆕 地图管理主页
│ │ │ │ ├── 📂 gis-data/ # C级：GIS数据管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 digital-drawing/ # C级：数字化绘制
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 spatial-query/ # C级：空间查询
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 satellite-imagery/ # C级：卫星影像管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 spatial-analysis/ # B级：空间分析
│ │ │ │ ├── 📄 page.tsx # 🆕 空间分析主页
│ │ │ │ ├── 📂 soil-data/ # C级：土壤数据分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 layered-sampling/ # C级：分层采样分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 quality-evaluation/ # C级：质量评价
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 environmental-monitoring/ # B级：环境监测
│ │ │ │ ├── 📄 page.tsx # 🆕 环境监测主页
│ │ │ │ ├── 📂 weather-data/ # C级：气象数据监测
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 sensor-data/ # C级：环境传感器数据
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 monitoring-history/ # C级：监测历史记录
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 suitability-evaluation/ # B级：适宜性评价
│ │ │ │ ├── 📄 page.tsx # 🆕 适宜性评价主页
│ │ │ │ ├── 📂 comprehensive-evaluation/ # C级：综合评价分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 batch-analysis/ # C级：批量分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 crop-recommendation/ # C级：作物推荐分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 weight-configuration/ # C级：权重配置管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 comparative-analysis/ # B级：对比分析
│ │ │ │ ├── 📄 page.tsx # 🆕 对比分析主页
│ │ │ │ ├── 📂 multi-dimensional-metrics/ # C级：多维指标分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 chart-analysis/ # C级：图表分析展示
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 report-generation/ # C级：报告生成管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 risk-warning/ # B级：风险预警
│ │ │ ├── 📄 page.tsx # 🆕 风险预警主页
│ │ │ ├── 📂 real-time-monitoring/ # C级：实时监测预警
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 early-warning-push/ # C级：预警信息推送
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 disposal-tracking/ # C级：处置情况跟踪
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 farming-operation/ # 📋 农事操作管理系统页面
│ │ │ ├── 📄 layout.tsx # 🆕 农事系统布局
│ │ │ ├── 📄 page.tsx # 🆕 农事系统主页面
│ │ │ ├── 📂 farm-planning/ # B级：农事计划管理
│ │ │ │ ├── 📄 page.tsx # 🆕 农事计划主页
│ │ │ │ ├── 📂 plan-formulation/ # C级：计划制定
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 resource-allocation/ # C级：资源分配管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 progress-tracking/ # C级：进度跟踪管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 task-management/ # B级：农事任务管理
│ │ │ │ ├── 📄 page.tsx # 🆕 农事任务主页
│ │ │ │ ├── 📂 task-creation/ # C级：任务创建管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 task-assignment/ # C级：任务分配派发
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 task-status-monitoring/ # C级：任务状态监控
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 task-history-statistics/ # C级：任务历史统计
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 operation-execution/ # B级：农事执行管理
│ │ │ │ ├── 📄 page.tsx # 🆕 农事执行主页
│ │ │ │ ├── 📂 operation-type-management/ # C级：操作类型管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 operation-recording/ # C级：操作记录管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 operation-log-query/ # C级：操作日志查询
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 farming-calendar/ # B级：农事日历管理
│ │ │ │ ├── 📄 page.tsx # 🆕 农事日历主页
│ │ │ │ ├── 📂 calendar-visualization/ # C级：日历可视化视图
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 gantt-chart-management/ # C级：甘特图管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 progress-visualization/ # C级：进度可视化
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 operation-archive/ # B级：农事档案管理
│ │ │ │ ├── 📄 page.tsx # 🆕 农事档案主页
│ │ │ │ ├── 📂 archive-generation/ # C级：档案归集生成
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 full-dimension-view/ # C级：全维视图管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 traceability-tracking/ # C级：追踪溯源管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 knowledge-base/ # B级：知识库管理
│ │ │ │ ├── 📄 page.tsx # 🆕 知识库主页
│ │ │ │ ├── 📂 content-management/ # C级：内容管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 classification-tagging/ # C级：分类标签管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 intelligent-search/ # C级：智能检索功能
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 performance-management/ # B级：绩效管理
│ │ │ │ ├── 📄 page.tsx # 🆕 绩效管理主页
│ │ │ │ ├── 📂 personnel-management/ # C级：人员管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 work-hour-recording/ # C级：工时记录管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 statistical-reports/ # C级：统计报表管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 scheduling-management/ # C级：排班管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 issue-collaboration/ # B级：问题协同管理
│ │ │ ├── 📄 page.tsx # 🆕 问题协同主页
│ │ │ ├── 📂 issue-reporting/ # C级：问题上报管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 processing-assignment/ # C级：处理分派管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 online-collaboration/ # C级：在线协作功能
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 agricultural-asset/ # 📦 农业资产管理系统页面
│ │ │ ├── 📄 layout.tsx # 🆕 资产系统布局
│ │ │ ├── 📄 page.tsx # 🆕 资产系统主页面
│ │ │ ├── 📂 basic-information/ # B级：基础信息管理
│ │ │ │ ├── 📄 page.tsx # 🆕 基础信息主页
│ │ │ │ ├── 📂 asset-entry/ # C级：资产信息录入
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 asset-classification/ # C级：资产分类管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 asset-labeling/ # C级：资产标签管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 procurement-management/ # B级：采购管理
│ │ │ │ ├── 📄 page.tsx # 🆕 采购管理主页
│ │ │ │ ├── 📂 procurement-planning/ # C级：采购计划制定
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 supplier-management/ # C级：供应商管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 procurement-tracking/ # C级：采购跟踪管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 inventory-management/ # B级：库存管理
│ │ │ │ ├── 📄 page.tsx # 🆕 库存管理主页
│ │ │ │ ├── 📂 stock-monitoring/ # C级：库存监控管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 stock-adjustment/ # C级：库存调整管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 inventory-report/ # C级：库存报表管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 material-requisition/ # B级：物资领用管理
│ │ │ │ ├── 📄 page.tsx # 🆕 物资领用主页
│ │ │ │ ├── 📂 requisition-application/ # C级：领用申请管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 approval-workflow/ # C级：审批流程管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 requisition-tracking/ # C级：领用跟踪管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 material-return/ # B级：物资归还管理
│ │ │ │ ├── 📄 page.tsx # 🆕 物资归还主页
│ │ │ │ ├── 📂 return-application/ # C级：归还申请管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 return-approval/ # C级：归还审批管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 return-tracking/ # C级：归还跟踪管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 agricultural-supplies/ # B级：农资农具管理
│ │ │ │ ├── 📄 page.tsx # 🆕 农资农具主页
│ │ │ │ ├── 📂 tool-management/ # C级：农具管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 material-management/ # C级：农资管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 maintenance-tracking/ # C级：维护跟踪管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 visualization-reports/ # B级：可视化报表
│ │ │ ├── 📄 page.tsx # 🆕 可视化报表主页
│ │ │ ├── 📂 asset-statement/ # C级：资产报表管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 inventory-statement/ # C级：库存报表管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 cost-analysis/ # C级：成本分析管理
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 ai-crop-model/ # 🤖 AI作物模型精准决策系统页面
│ │ │ ├── 📄 layout.tsx # 🆕 AI模型系统布局
│ │ │ ├── 📄 page.tsx # 🆕 AI模型系统主页面
│ │ │ ├── 📂 data-perception-center/ # B级：数据感知中心
│ │ │ │ ├── 📄 page.tsx # 🆕 数据感知主页
│ │ │ │ ├── 📂 real-time-data-collection/ # C级：实时数据采集
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 historical-data-analysis/ # C级：历史数据分析
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 multi-source-data-fusion/ # C级：多源数据融合
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 model-integration-center/ # B级：模型接入集成中心
│ │ │ │ ├── 📄 page.tsx # 🆕 模型集成主页
│ │ │ │ ├── 📂 model-access-management/ # C级：模型接入管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 model-version-control/ # C级：模型版本控制
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 api-service-integration/ # C级：API服务集成
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 model-application-center/ # B级：模型应用中心
│ │ │ │ ├── 📄 page.tsx # 🆕 模型应用主页
│ │ │ │ ├── 📂 prediction-analysis/ # C级：预测分析管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 optimization-recommendation/ # C级：优化建议管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 scenario-simulation/ # C级：场景模拟管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 intelligent-decision-generation/ # B级：智能决策生成
│ │ │ │ ├── 📄 page.tsx # 🆕 智能决策主页
│ │ │ │ ├── 📂 decision-engine/ # C级：决策引擎管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 rule-configuration/ # C级：规则配置管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 decision-optimization/ # C级：决策优化管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 intelligent-decision-support/ # B级：智能决策支持
│ │ │ │ ├── 📄 page.tsx # 🆕 智能决策支持主页
│ │ │ │ ├── 📂 decision-visualization/ # C级：决策可视化
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 impact-assessment/ # C级：影响评估管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 decision-tracking/ # C级：决策跟踪管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 decision-application/ # B级：决策应用
│ │ │ │ ├── 📄 page.tsx # 🆕 决策应用主页
│ │ │ │ ├── 📂 automatic-execution/ # C级：自动执行管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 manual-adjustment/ # C级：手动调整管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 feedback-collection/ # C级：反馈收集管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 ai-knowledge-base/ # B级：AI知识库
│ │ │ │ ├── 📄 page.tsx # 🆕 AI知识库主页
│ │ │ │ ├── 📂 model-documentation/ # C级：模型文档管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 case-database/ # C级：案例数据库管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 expert-system/ # C级：专家系统管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 monitoring-center/ # B级：监控中心
│ │ │ ├── 📄 page.tsx # 🆕 监控中心主页
│ │ │ ├── 📂 model-performance/ # C级：模型性能监控
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 decision-quality/ # C级：决策质量监控
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 system-health/ # C级：系统健康监控
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 water-fertilizer-control/ # 💧 水肥一体化控制系统页面
│ │ │ ├── 📄 layout.tsx # 🆕 水肥控制布局
│ │ │ ├── 📄 page.tsx # 🆕 水肥控制主页面
│ │ │ ├── 📂 irrigation-system-management/ # B级：水肥机管理
│ │ │ │ ├── 📄 page.tsx # 🆕 水肥机管理主页
│ │ │ │ ├── 📂 device-registration/ # C级：设备注册管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 status-monitoring/ # C级：状态监控管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 maintenance-management/ # C级：维护管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 smart-irrigation/ # B级：智能灌溉
│ │ │ │ ├── 📄 page.tsx # 🆕 智能灌溉主页
│ │ │ │ ├── 📂 irrigation-planning/ # C级：灌溉计划管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 automated-control/ # C级：自动控制管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 irrigation-optimization/ # C级：灌溉优化管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 fertilizer-formula-management/ # B级：施肥配方管理
│ │ │ │ ├── 📄 page.tsx # 🆕 施肥配方主页
│ │ │ │ ├── 📂 formula-configuration/ # C级：配方配置管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 crop-specific-formulas/ # C级：作物专用配方
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 formula-optimization/ # C级：配方优化管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 integrated-control/ # B级：水肥一体化控制
│ │ │ │ ├── 📄 page.tsx # 🆕 水肥一体化主页
│ │ │ │ ├── 📂 synchronized-control/ # C级：同步控制管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ ├── 📂 precision-application/ # C级：精准施用管理
│ │ │ │ │ └── 📄 page.tsx
│ │ │ │ └── 📂 real-time-adjustment/ # C级：实时调整管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 real-time-monitoring/ # B级：实时监测与预警
│ │ │ ├── 📄 page.tsx # 🆕 实时监测主页
│ │ │ ├── 📂 parameter-display/ # C级：参数显示管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 warning-system/ # C级：预警系统管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 historical-analysis/ # C级：历史分析管理
│ │ │ └── 📄 page.tsx
│ │ └── 📂 central-config/ # ⚙️ 中心配置管理系统页面
│ │ ├── 📄 layout.tsx # 🆕 配置系统布局
│ │ ├── 📄 page.tsx # 🆕 配置系统主页面
│ │ ├── 📂 tenant-management/ # B级：租户管理
│ │ │ ├── 📄 page.tsx # 🆕 租户管理主页
│ │ │ ├── 📂 tenant-creation/ # C级：租户创建管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 tenant-configuration/ # C级：租户配置管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 tenant-authorization/ # C级：租户授权管理
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 user-management/ # B级：用户管理
│ │ │ ├── 📄 page.tsx # 🆕 用户管理主页
│ │ │ ├── 📂 user-account-management/ # C级：用户账号管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 role-permission-management/ # C级：角色权限管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 user-behavior-tracking/ # C级：用户行为跟踪
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 system-parameters/ # B级：系统参数
│ │ │ ├── 📄 page.tsx # 🆕 系统参数主页
│ │ │ ├── 📂 basic-configuration/ # C级：基础配置管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 business-rule-settings/ # C级：业务规则设置
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 interface-configuration/ # C级：接口配置管理
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 system-monitoring/ # B级：系统监控
│ │ │ ├── 📄 page.tsx # 🆕 系统监控主页
│ │ │ ├── 📂 performance-monitoring/ # C级：性能监控管理
│ │ │ │ └── 📄 page.tsx
│ │ │ ├── 📂 log-management/ # C级：日志管理
│ │ │ │ └── 📄 page.tsx
│ │ │ └── 📂 exception-handling/ # C级：异常处理管理
│ │ │ └── 📄 page.tsx
│ │ └── 📂 message-center/ # B级：消息中心
│ │ ├── 📄 page.tsx # 🆕 消息中心主页
│ │ ├── 📂 message-push-management/ # C级：消息推送管理
│ │ │ └── 📄 page.tsx
│ │ ├── 📂 notification-settings/ # C级：通知设置管理
│ │ │ └── 📄 page.tsx
│ │ └── 📂 feedback-management/ # C级：反馈管理
│ │ └── 📄 page.tsx
│ ├── 📂 components/ # 组件库
│ │ ├── 📂 ui/ # 基础UI组件(shadcn)
│ │ ├── 📂 layout/ # 布局组件
│ │ │ ├── 📄 Header.tsx # 顶部导航
│ │ │ ├── 📄 Sidebar.tsx # 侧边栏
│ │ │ └── 📄 MainLayout.tsx # 主布局
│ │ ├── 📂 common/ # 通用业务组件
│ │ └── 📂 business/ # 业务组件
│ ├── 📂 lib/ # 🆕 工具库 (Next.js 标准)
│ │ ├── 📄 utils.ts # 工具函数
│ │ ├── 📄 validations.ts # 表单验证
│ │ ├── 📄 constants.ts # 常量定义
│ │ └── 📄 helpers.ts # 辅助函数
│ ├── 📂 hooks/ # 自定义Hooks
│ │ ├── 📄 useAuth.ts # 认证Hook
│ │ ├── 📄 usePermission.ts # 权限Hook
│ │ └── 📄 useRouterParams.ts # 路由参数Hook
│ ├── 📂 store/ # Zustand状态管理
│ │ ├── 📄 authStore.ts # 认证状态管理
│ │ ├── 📄 globalStore.ts # 全局状态管理
│ │ └── 📂 [modules]/ # 各业务模块状态管理
│ ├── 📂 types/ # TypeScript类型
│ │ ├── 📄 auth.ts # 认证类型
│ │ ├── 📄 navigation.ts # 导航类型
│ │ └── 📄 business.ts # 业务类型
│ ├── 📂 styles/ # 样式文件
│ │ ├── 📄 globals.css # 全局样式
│ │ └── 📄 components.css # 组件样式
│ ├── 📂 public/ # 🆕 静态资源目录
│ │ ├── 📄 favicon.ico # 网站图标
│ │ ├── 📄 logo.png # 应用Logo
│ │ ├── 📄 manifest.json # PWA配置文件
│ │ └── 📂 images/ # 图片资源
│ ├── 📂 config/ # 🆕 特性优先配置系统
│ │ ├── 📂 types/ # 配置类型定义
│ │ ├── 📂 environments/ # 环境配置
│ │ ├── 📂 features/ # 特性配置
│ │ └── 📄 config-manager.ts # 配置管理器
│ ├── 📂 apis/ # 🆕 API管理系统
│ │ ├── 📄 index.ts # API统一入口
│ │ ├── 📄 interceptor.ts # 请求拦截器
│ │ └── 📂 subModules/ # 7大业务模块API
│ ├── 📄 package.json # 项目配置
│ ├── 📄 next.config.js # Next.js 配置
│ ├── 📄 tailwind.config.js # Tailwind 配置
│ ├── 📄 tsconfig.json # TypeScript 配置
│ ├── 📄 .eslintrc.js # ESLint 配置
│ ├── 📄 .prettierrc # Prettier 配置
│ └── 📄 README.md # 项目说明
Next.js App Router 核心特性
1. 路由系统变更
原 React Router 系统 → Next.js App Router 系统
// 原路由方式 (React Router)
/agricultural-machinery/archive/machinery-entry
// 新路由方式 (Next.js App Router)
/agricultural-machinery/archive/machinery-entry
2. 文件命名规范
| React Router | Next.js App Router | 说明 |
|---|---|---|
index.jsx |
page.tsx |
页面组件 |
| - | layout.tsx |
布局组件 |
| - | loading.tsx |
加载组件 |
| - | error.tsx |
错误组件 |
| - | not-found.tsx |
404页面 |
| - | route.ts |
API路由 |
3. 布局系统
Next.js App Router 提供了嵌套布局系统：
// app/layout.tsx - 根布局
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh-CN">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
// app/agricultural-machinery/layout.tsx - 农机系统布局
export default function MachineryLayout({ children }: { children: React.ReactNode }) {
return (
<div className="machinery-layout">
<Sidebar />
<div className="main-content">
{children}
</div>
</div>
);
}
4. 路由组和权限控制
使用路由组 (auth) 实现权限控制：
// app/(auth)/layout.tsx - 认证布局
export default function AuthLayout({ children }: { children: React.ReactNode }) {
return (
<div className="auth-layout">
{children}
</div>
);
}
// app/(auth)/login/page.tsx - 登录页面
export default function LoginPage() {
return <LoginForm />;
}
5. 数据获取方式
// Server Components - 服务器端数据获取
async function getMachineryData() {
const res = await fetch('http://localhost:8080/api/machinery', {
cache: 'no-store'
});
return res.json();
}
export default async function MachineryPage() {
const data = await getMachineryData();
return <MachineryList data={data} />;
}
// Client Components - 客户端数据获取
'use client';
import { useState, useEffect } from 'react';
export default function MachineryPage() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('/api/machinery')
.then(res => res.json())
.then(setData);
}, []);
return <MachineryList data={data} />;
}
6. API路由
// app/api/machinery/route.ts
import { NextRequest, NextResponse } from 'next/server';
export async function GET(request: NextRequest) {
// 获取农机列表
return NextResponse.json({ machinery: [] });
}
export async function POST(request: NextRequest) {
// 创建农机
const body = await request.json();
return NextResponse.json({ success: true });
}
7. 错误处理
// app/error.tsx - 全局错误处理
'use client';
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
return (
<div>
<h2>出现了错误！</h2>
<button onClick={() => reset()}>重试</button>
</div>
);
}
// app/agricultural-machinery/error.tsx - 农机系统错误处理
export default function MachineryError({ error }: { error: Error }) {
return (
<div className="machinery-error">
<h3>农机系统错误</h3>
<p>{error.message}</p>
</div>
);
}
8. 加载状态
// app/agricultural-machinery/loading.tsx
export default function MachineryLoading() {
return (
<div className="machinery-loading">
<div className="spinner"></div>
<p>正在加载农机数据...</p>
</div>
);
}
Next.js App Router 优势
1. 性能优化
- 自动代码分割
- 服务器组件渲染
- 客户端组件按需加载
- 流式渲染支持
2. SEO 友好
- 服务器端渲染 (SSR)
- 静态站点生成 (SSG)
- 增量静态再生 (ISR)
3. 开发体验
- 文件系统路由
- 内置类型安全
- 热模块替换
- 快速刷新
4. 布局系统
- 嵌套布局
- 共享布局
- 路由组
- 并行路由
迁移指南
从 React Router 到 Next.js App Router
-
目录结构迁移
pages/ → app/ index.jsx → page.tsx -
路由配置移除
// 移除 React Router 配置 // 删除 router/index.js // 删除路由守卫组件 -
布局组件重构
// 原 Layout.jsx export default function Layout({ children }) { return <div>{children}</div>; } // 新 layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <body>{children}</body> </html> ); } -
数据获取重构
// 原 useEffect 方式 useEffect(() => { fetchData().then(setData); }, []); // 新 async/await 方式 const data = await fetchData(); -
导航方式变更
// 原 useNavigate const navigate = useNavigate(); navigate('/machinery'); // 新 useRouter const router = useRouter(); router.push('/machinery');
本文档基于 Mary 的头脑风暴分析结果生成，为 crop-x 项目提供 Next.js App Router 版本的完整技术架构方案。