# 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/              # B级：租户管理
│   │       │   ├── 📄 page.tsx         # 🆕 租户管理主页
│   │       │   ├── 📂 enterprise-audit/ # C级：企业审核
│   │       │   │   └── 📄 page.tsx     # 路径: /config/tenant/enterprise-audit
│   │       │   ├── 📂 audit-history/   # C级：审核历史
│   │       │   │   └── 📄 page.tsx     # 路径: /config/tenant/audit-history
│   │       │   ├── 📂 enterprise-info/ # C级：企业信息
│   │       │   │   └── 📄 page.tsx     # 路径: /config/tenant/enterprise-info
│   │       │   └── 📂 user-management/ # C级：用户管理
│   │       │       └── 📄 page.tsx     # 路径: /config/tenant/user-management
│   │       ├── 📂 user/                # B级：用户管理
│   │       │   ├── 📄 page.tsx         # 🆕 用户管理主页
│   │       │   ├── 📂 employee/        # C级：员工管理
│   │       │   │   └── 📄 page.tsx     # 路径: /config/user/employee
│   │       │   ├── 📂 role/            # C级：角色管理
│   │       │   │   └── 📄 page.tsx     # 路径: /config/user/role
│   │       │   ├── 📂 menu/            # C级：菜单管理
│   │       │   │   └── 📄 page.tsx     # 路径: /config/user/menu
│   │       │   └── 📂 permission/      # C级：权限配置管理
│   │       │       └── 📄 page.tsx     # 路径: /config/user/permission
│   │       ├── 📂 system/              # B级：系统参数
│   │       │   ├── 📄 page.tsx         # 🆕 系统参数主页
│   │       │   ├── 📂 settings/        # C级：系统设置
│   │       │   │   └── 📄 page.tsx     # 路径: /config/system/settings
│   │       │   ├── 📂 category/        # C级：分类字典
│   │       │   │   └── 📄 page.tsx     # 路径: /config/system/category
│   │       │   └── 📂 dictionary/      # C级：数据字典
│   │       │       └── 📄 page.tsx     # 路径: /config/system/dictionary
│   │       ├── 📂 monitor/             # B级：系统监控
│   │       │   ├── 📄 page.tsx         # 🆕 系统监控主页
│   │       │   ├── 📂 login-log/        # C级：登录日志
│   │       │   │   └── 📄 page.tsx     # 路径: /config/monitor/login-log
│   │       │   ├── 📂 operation-log/    # C级：操作日志
│   │       │   │   └── 📄 page.tsx     # 路径: /config/monitor/operation-log
│   │       │   ├── 📂 performance/     # C级：性能监控
│   │       │   │   └── 📄 page.tsx     # 路径: /config/monitor/performance
│   │       │   └── 📂 network-log/      # C级：网络日志
│   │       │       └── 📄 page.tsx     # 路径: /config/monitor/network-log
│   │       └── 📂 message/             # B级：消息中心
│   │           ├── 📄 page.tsx         # 🆕 消息中心主页
│   │           ├── 📂 send/            # C级：消息发送
│   │           │   └── 📄 page.tsx     # 路径: /config/message/send
│   │           ├── 📂 template/        # C级：消息模版
│   │           │   └── 📄 page.tsx     # 路径: /config/message/template
│   │           └── 📂 log/             # C级：消息日志
│   │               └── 📄 page.tsx     # 路径: /config/message/log
│   ├── 📂 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 系统**

```typescript
// 原路由方式 (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 提供了嵌套布局系统：

```typescript
// 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)` 实现权限控制：

```typescript
// 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. 数据获取方式

```typescript
// 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路由

```typescript
// 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. 错误处理

```typescript
// 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. 加载状态

```typescript
// 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

1. **目录结构迁移**
   ```
   pages/ → app/
   index.jsx → page.tsx
   ```

2. **路由配置移除**
   ```typescript
   // 移除 React Router 配置
   // 删除 router/index.js
   // 删除路由守卫组件
   ```

3. **布局组件重构**
   ```typescript
   // 原 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>
     );
   }
   ```

4. **数据获取重构**
   ```typescript
   // 原 useEffect 方式
   useEffect(() => {
     fetchData().then(setData);
   }, []);

   // 新 async/await 方式
   const data = await fetchData();
   ```

5. **导航方式变更**
   ```typescript
   // 原 useNavigate
   const navigate = useNavigate();
   navigate('/machinery');

   // 新 useRouter
   const router = useRouter();
   router.push('/machinery');
   ```

---

*本文档基于 Mary 的头脑风暴分析结果生成，为 crop-x 项目提供 Next.js App Router 版本的完整技术架构方案。*