next.js搭建路由01
This commit is contained in:
750
docs/Crop-X-项目完整技术架构方案-Next.js-AppRouter版本.md
Normal file
750
docs/Crop-X-项目完整技术架构方案-Next.js-AppRouter版本.md
Normal file
@@ -0,0 +1,750 @@
|
||||
# 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 系统**
|
||||
|
||||
```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 版本的完整技术架构方案。*
|
||||
Reference in New Issue
Block a user