生产管理系统 nextjs标准化改造
This commit is contained in:
@@ -1,322 +1,36 @@
|
||||
# 智慧农业生产管理系统
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
基于 React 18 + Vite 6 + TypeScript + shadcn/ui 构建的现代化农业管理平台。
|
||||
## Getting Started
|
||||
|
||||
## 🌟 项目特色
|
||||
|
||||
- 🚀 **现代化技术栈**: 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
|
||||
```
|
||||
|
||||
### 开发环境
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
项目将在 http://localhost:3000 启动（如果端口被占用会自动切换）
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
**✅ React应用验证**:
|
||||
- 启动时间: < 2秒（实测2012ms）
|
||||
- 热重载: 正常工作
|
||||
- 主题切换: 支持深色/浅色模式
|
||||
- 响应式设计: 支持桌面端和移动端
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
### 构建生产版本
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
## Learn More
|
||||
|
||||
### 预览生产版本
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
## 🛠️ 开发工具
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
项目配置了可选的开发工具链，默认禁用，可通过以下命令启用：
|
||||
## Deploy on Vercel
|
||||
|
||||
### 查看开发工具状态
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
```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
|
||||
|
||||
---
|
||||
|
||||
⭐ 如果这个项目对你有帮助，请给我们一个星标！
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
|
||||
Reference in New Issue
Block a user