smart-crop-ui/crop-x-new

智慧农业生产管理系统

基于 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

安装依赖

npm install

开发环境

npm run dev

项目将在 http://localhost:3000 启动（如果端口被占用会自动切换）

✅ React应用验证:

• 启动时间: < 2秒（实测2012ms）
• 热重载: 正常工作
• 主题切换: 支持深色/浅色模式
• 响应式设计: 支持桌面端和移动端

构建生产版本

npm run build

预览生产版本

npm run preview

🛠️ 开发工具

项目配置了可选的开发工具链，默认禁用，可通过以下命令启用：

查看开发工具状态

npm run scripts:setup

启用所有开发工具

npm run scripts:enable

禁用所有开发工具

npm run scripts:disable

代码检查

# ESLint检查
npm run lint

# ESLint自动修复
npm run lint:fix

代码格式化

# Prettier格式化
npm run format

# 检查格式
npm run format:check

类型检查

npm run type-check

📁 功能模块

🚜 农机管理 (Machinery)

• 农机档案管理
• 驾驶员管理
• 负载管理
• 运行监控
• 故障管理
• 作业管理
• 数据分析
• 调度管理
• 安全管理

🌾 地块管理 (Field)

• 地块档案
• 土壤信息
• 作物管理
• 种植计划

📋 农事管理 (Operation)

• 作业计划
• 进度跟踪
• 成本核算
• 产量预测

💰 资产管理 (Asset)

• 设备资产
• 库存管理
• 采购管理
• 维护记录

🤖 AI模型 (AI Model)

• 智能预测
• 图像识别
• 数据分析
• 决策支持

💧 灌溉控制 (Irrigation)

• 智能灌溉
• 水资源管理
• 设备控制
• 用水统计

⚙️ 配置管理 (Config)

• 系统配置
• 用户管理
• 权限设置
• 数据字典

🎨 设计系统

颜色系统

• 主色调: 农业绿色 (#16a34a)
• 辅助色: 技术蓝色 (#3b82f6)
• 状态色: 运行(绿)、空闲(灰)、维护(黄)、故障(红)、离线(深灰)

组件规范

• 基于 shadcn/ui 组件库
• 遵循 Material Design 设计规范
• 支持深色/浅色主题切换
• 完整的无障碍支持

🔧 配置说明

环境变量

# API地址
VITE_API_BASE_URL=http://localhost:8080/api

# 应用标题
VITE_APP_TITLE=智慧农业生产管理系统

# 开发模式
VITE_DEV_MODE=true

开发工具配置

通过 .dev-tools-config.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 命名规范
• 响应式设计优先
• 支持深色模式

🧪 测试

# 运行测试
npm run test

# 运行测试覆盖率
npm run test:coverage

📤 部署

Docker部署

# 构建镜像
docker build -t agriculture-management .

# 运行容器
docker run -p 3000:3000 agriculture-management

传统部署

# 构建项目
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 文件了解详情

📞 联系我们

• 项目地址: GitHub Repository
• 问题反馈: Issues
• 邮箱: your-email@example.com

---

⭐ 如果这个项目对你有帮助，请给我们一个星标！