cavin/smart-crop-ui

Fork 0

Files

peng caae0492ee 子仓库提交

2025-11-10 09:19:56 +08:00

6.6 KiB

Raw Blame History

智慧农业生产管理系统

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

📖 开发指南

添加新页面

在对应模块下创建页面组件
在路由配置中添加路由规则
在菜单配置中添加菜单项

添加新组件

在 src/components/ui/ 下创建UI组件
遵循 shadcn/ui 设计规范
添加 TypeScript 类型定义
编写组件文档和使用示例

样式规范

使用 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组件库
📱 实现响应式设计
🌾 添加农业专业化功能

🤝 贡献指南

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

📞 联系我们

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

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

6.6 KiB Raw Blame History Unescape Escape