# 智慧农业生产管理系统 基于 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 --- ⭐ 如果这个项目对你有帮助，请给我们一个星标！