322 lines
6.6 KiB
Markdown
322 lines
6.6 KiB
Markdown
# 智慧农业生产管理系统
|
||
|
||
基于 React 18 + Vite 6 + TypeScript + shadcn/ui 构建的现代化农业管理平台。
|
||
|
||
## 🌟 项目特色
|
||
|
||
- 🚀 **现代化技术栈**: React 18 + Vite 6 + TypeScript
|
||
- 🎨 **优美UI设计**: 基于 shadcn/ui + Tailwind CSS
|
||
- 📱 **响应式布局**: 支持桌面端和移动端
|
||
- 🌾 **农业专业化**: 针对农业生产场景定制
|
||
- 🔧 **开发工具**: ESLint + Prettier + Husky（可选启用）
|
||
- 📊 **数据可视化**: 集成 Recharts 图表库
|
||
|
||
## 🏗️ 技术架构
|
||
|
||
### 核心技术栈
|
||
|
||
- **前端框架**: React 18.3.1
|
||
- **构建工具**: Vite 6.3.5
|
||
- **类型系统**: TypeScript 5.6.2
|
||
- **UI组件库**: shadcn/ui + Radix UI
|
||
- **样式方案**: Tailwind CSS 3.4.13
|
||
- **状态管理**: React Context + Hooks
|
||
- **路由系统**: 自定义基于路径的路由
|
||
- **图表库**: Recharts 2.15.2
|
||
- **图标库**: Lucide React 0.487.0
|
||
- **日期处理**: date-fns 4.1.0
|
||
|
||
### 项目结构
|
||
|
||
```
|
||
crop-x/
|
||
├── 📄 public/ # 静态资源
|
||
├── 📄 src/
|
||
│ ├── 📄 components/ # 组件目录
|
||
│ │ ├── ui/ # shadcn/ui基础组件
|
||
│ │ ├── common/ # 通用业务组件
|
||
│ │ └── layouts/ # 布局组件
|
||
│ ├── 📄 pages/ # 页面组件
|
||
│ │ ├── machinery/ # 农机管理
|
||
│ │ ├── field/ # 地块管理
|
||
│ │ ├── operation/ # 农事管理
|
||
│ │ ├── asset/ # 资产管理
|
||
│ │ ├── ai-model/ # AI模型
|
||
│ │ ├── irrigation/ # 灌溉控制
|
||
│ │ └── config/ # 配置管理
|
||
│ ├── 📄 hooks/ # 自定义Hooks
|
||
│ ├── 📄 lib/ # 工具库
|
||
│ ├── 📄 config/ # 配置文件
|
||
│ ├── 📄 types/ # 类型定义
|
||
│ ├── 📄 utils/ # 工具函数
|
||
│ ├── 📄 assets/ # 资源文件
|
||
│ ├── 📄 styles/ # 样式文件
|
||
│ └── 📄 App.tsx # 主应用组件
|
||
├── 📄 docs/ # 文档目录
|
||
├── 📄 scripts/ # 构建脚本
|
||
└── 📄 .vscode/ # VSCode配置
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 18.0.0
|
||
- npm >= 8.0.0
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发环境
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
项目将在 http://localhost:3000 启动（如果端口被占用会自动切换）
|
||
|
||
**✅ React应用验证**:
|
||
- 启动时间: < 2秒（实测2012ms）
|
||
- 热重载: 正常工作
|
||
- 主题切换: 支持深色/浅色模式
|
||
- 响应式设计: 支持桌面端和移动端
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 🛠️ 开发工具
|
||
|
||
项目配置了可选的开发工具链，默认禁用，可通过以下命令启用：
|
||
|
||
### 查看开发工具状态
|
||
|
||
```bash
|
||
npm run scripts:setup
|
||
```
|
||
|
||
### 启用所有开发工具
|
||
|
||
```bash
|
||
npm run scripts:enable
|
||
```
|
||
|
||
### 禁用所有开发工具
|
||
|
||
```bash
|
||
npm run scripts:disable
|
||
```
|
||
|
||
### 代码检查
|
||
|
||
```bash
|
||
# ESLint检查
|
||
npm run lint
|
||
|
||
# ESLint自动修复
|
||
npm run lint:fix
|
||
```
|
||
|
||
### 代码格式化
|
||
|
||
```bash
|
||
# Prettier格式化
|
||
npm run format
|
||
|
||
# 检查格式
|
||
npm run format:check
|
||
```
|
||
|
||
### 类型检查
|
||
|
||
```bash
|
||
npm run type-check
|
||
```
|
||
|
||
## 📁 功能模块
|
||
|
||
### 🚜 农机管理 (Machinery)
|
||
- 农机档案管理
|
||
- 驾驶员管理
|
||
- 负载管理
|
||
- 运行监控
|
||
- 故障管理
|
||
- 作业管理
|
||
- 数据分析
|
||
- 调度管理
|
||
- 安全管理
|
||
|
||
### 🌾 地块管理 (Field)
|
||
- 地块档案
|
||
- 土壤信息
|
||
- 作物管理
|
||
- 种植计划
|
||
|
||
### 📋 农事管理 (Operation)
|
||
- 作业计划
|
||
- 进度跟踪
|
||
- 成本核算
|
||
- 产量预测
|
||
|
||
### 💰 资产管理 (Asset)
|
||
- 设备资产
|
||
- 库存管理
|
||
- 采购管理
|
||
- 维护记录
|
||
|
||
### 🤖 AI模型 (AI Model)
|
||
- 智能预测
|
||
- 图像识别
|
||
- 数据分析
|
||
- 决策支持
|
||
|
||
### 💧 灌溉控制 (Irrigation)
|
||
- 智能灌溉
|
||
- 水资源管理
|
||
- 设备控制
|
||
- 用水统计
|
||
|
||
### ⚙️ 配置管理 (Config)
|
||
- 系统配置
|
||
- 用户管理
|
||
- 权限设置
|
||
- 数据字典
|
||
|
||
## 🎨 设计系统
|
||
|
||
### 颜色系统
|
||
|
||
- **主色调**: 农业绿色 (#16a34a)
|
||
- **辅助色**: 技术蓝色 (#3b82f6)
|
||
- **状态色**: 运行(绿)、空闲(灰)、维护(黄)、故障(红)、离线(深灰)
|
||
|
||
### 组件规范
|
||
|
||
- 基于 shadcn/ui 组件库
|
||
- 遵循 Material Design 设计规范
|
||
- 支持深色/浅色主题切换
|
||
- 完整的无障碍支持
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 环境变量
|
||
|
||
```bash
|
||
# API地址
|
||
VITE_API_BASE_URL=http://localhost:8080/api
|
||
|
||
# 应用标题
|
||
VITE_APP_TITLE=智慧农业生产管理系统
|
||
|
||
# 开发模式
|
||
VITE_DEV_MODE=true
|
||
```
|
||
|
||
### 开发工具配置
|
||
|
||
通过 `.dev-tools-config.json` 文件控制开发工具的启用状态：
|
||
|
||
```json
|
||
{
|
||
"tools": {
|
||
"eslint": { "enabled": false },
|
||
"prettier": { "enabled": false },
|
||
"husky": { "enabled": false }
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📖 开发指南
|
||
|
||
### 添加新页面
|
||
|
||
1. 在对应模块下创建页面组件
|
||
2. 在路由配置中添加路由规则
|
||
3. 在菜单配置中添加菜单项
|
||
|
||
### 添加新组件
|
||
|
||
1. 在 `src/components/ui/` 下创建UI组件
|
||
2. 遵循 shadcn/ui 设计规范
|
||
3. 添加 TypeScript 类型定义
|
||
4. 编写组件文档和使用示例
|
||
|
||
### 样式规范
|
||
|
||
- 使用 Tailwind CSS 类名
|
||
- 遵循 BEM 命名规范
|
||
- 响应式设计优先
|
||
- 支持深色模式
|
||
|
||
## 🧪 测试
|
||
|
||
```bash
|
||
# 运行测试
|
||
npm run test
|
||
|
||
# 运行测试覆盖率
|
||
npm run test:coverage
|
||
```
|
||
|
||
## 📤 部署
|
||
|
||
### Docker部署
|
||
|
||
```bash
|
||
# 构建镜像
|
||
docker build -t agriculture-management .
|
||
|
||
# 运行容器
|
||
docker run -p 3000:3000 agriculture-management
|
||
```
|
||
|
||
### 传统部署
|
||
|
||
```bash
|
||
# 构建项目
|
||
npm run build
|
||
|
||
# 部署build目录到Web服务器
|
||
```
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.0.0 (2024-01-20)
|
||
- ✨ 初始版本发布
|
||
- 🚀 完成基础架构搭建
|
||
- 🎨 集成shadcn/ui组件库
|
||
- 📱 实现响应式设计
|
||
- 🌾 添加农业专业化功能
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 创建 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
|
||
|
||
## 📞 联系我们
|
||
|
||
- 项目地址: [GitHub Repository](https://github.com/your-username/agriculture-management)
|
||
- 问题反馈: [Issues](https://github.com/your-username/agriculture-management/issues)
|
||
- 邮箱: your-email@example.com
|
||
|
||
---
|
||
|
||
⭐ 如果这个项目对你有帮助，请给我们一个星标！ |