379 lines
11 KiB
Markdown
379 lines
11 KiB
Markdown
# 🤖 Crop-X 智慧农业系统 AI前端开发提示
|
||
|
||
## 📋 提示使用说明
|
||
|
||
这是一个为AI前端开发工具（如Vercel v0、Lovable.ai等）设计的综合提示，用于快速生成Crop-X智慧农业管理系统的现代化界面。
|
||
|
||
---
|
||
|
||
## 🎯 核心提示
|
||
|
||
### 高层目标
|
||
创建一个现代化的智慧农业管理系统，使用React 19 + TypeScript + Tailwind CSS + shadcn/ui技术栈，包含7大业务模块：智能农机管理、地块信息管理、农事操作管理、农业资产管理、AI作物模型、水肥控制系统、中心配置管理。保持与现有系统99.5%的视觉一致性，同时引入现代化的交互体验。
|
||
|
||
### 详细步骤说明
|
||
|
||
#### 第1步：项目初始化和基础架构
|
||
1. 创建项目基础结构，包括components、pages、hooks、utils等目录
|
||
2. 配置React 19 + TypeScript + Vite开发环境
|
||
3. 集成shadcn/ui组件库和Tailwind CSS
|
||
4. 设置基础布局组件（Navigation、Sidebar、MainLayout）
|
||
|
||
#### 第2步：核心业务组件开发
|
||
1. 实现登录/注册页面（支持密码登录和手机验证码登录）
|
||
2. 创建主导航系统（7大业务系统标签切换）
|
||
3. 开发农机管理系统（优先级最高）
|
||
4. 实现用户认证和权限管理
|
||
5. 添加消息通知和用户中心功能
|
||
|
||
#### 第3步：数据管理和交互
|
||
1. 实现农机档案的CRUD操作
|
||
2. 创建数据表格组件（支持排序、筛选、搜索）
|
||
3. 开发表单组件（支持验证和错误处理）
|
||
4. 添加数据可视化图表组件
|
||
5. 实现导出功能（Excel/PDF）
|
||
|
||
#### 第4步：移动端优化
|
||
1. 实现响应式设计，重点优化移动端体验
|
||
2. 添加触摸友好的交互
|
||
3. 优化田间作业场景的界面
|
||
4. 实现离线数据缓存机制
|
||
|
||
### 代码示例和数据结构
|
||
|
||
#### 核心数据结构
|
||
```typescript
|
||
// 农机设备数据结构
|
||
interface MachineryRecord {
|
||
id: string;
|
||
name: string;
|
||
model: string;
|
||
category: string;
|
||
status: 'active' | 'maintenance' | 'retired';
|
||
manufacturer: string;
|
||
purchaseDate: string;
|
||
currentLocation: string;
|
||
operator?: string;
|
||
qrCode: string;
|
||
createdAt: string;
|
||
updatedAt: string;
|
||
}
|
||
|
||
// 用户认证数据结构
|
||
interface User {
|
||
id: string;
|
||
username: string;
|
||
realName: string;
|
||
phone: string;
|
||
role: 'admin' | 'operator' | 'technician';
|
||
enterpriseName?: string;
|
||
lastLoginTime?: string;
|
||
}
|
||
|
||
// 消息通知数据结构
|
||
interface Message {
|
||
id: string;
|
||
title: string;
|
||
content: string;
|
||
time: string;
|
||
read: boolean;
|
||
type: 'info' | 'warning' | 'success' | 'error';
|
||
}
|
||
```
|
||
|
||
#### API接口示例
|
||
```typescript
|
||
// 登录API
|
||
POST /api/auth/login
|
||
{
|
||
"username": "admin",
|
||
"password": "admin123",
|
||
"captcha": "1234"
|
||
}
|
||
|
||
// 农机列表API
|
||
GET /api/machinery/list?page=1&limit=20&category=拖拉机&status=active
|
||
|
||
// 新增农机API
|
||
POST /api/machinery/create
|
||
{
|
||
"name": "约翰迪尔拖拉机",
|
||
"model": "JD-6M-1654",
|
||
"category": "拖拉机",
|
||
"manufacturer": "约翰迪尔",
|
||
"purchaseDate": "2024-01-15",
|
||
"status": "active"
|
||
}
|
||
```
|
||
|
||
#### 样式约束
|
||
```css
|
||
/* 主要色彩 */
|
||
--primary-green: #16a34a;
|
||
--secondary-blue: #3b82f6;
|
||
--warning-amber: #f59e0b;
|
||
--success-green: #22c55e;
|
||
--danger-red: #ef4444;
|
||
|
||
/* 字体 */
|
||
--font-primary: 'Inter', system-ui, sans-serif;
|
||
--font-secondary: 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
||
|
||
/* 间距 */
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing-md: 16px;
|
||
--spacing-lg: 24px;
|
||
--spacing-xl: 32px;
|
||
```
|
||
|
||
### 严格范围定义
|
||
|
||
**必须使用的技术栈：**
|
||
- React 19 + TypeScript
|
||
- Tailwind CSS
|
||
- shadcn/ui组件库
|
||
- Lucide React图标库
|
||
- Zustand状态管理
|
||
|
||
**不能使用的技术：**
|
||
- jQuery或其他传统库
|
||
- 内联样式（特殊情况除外）
|
||
- 不符合WCAG AA标准的无障碍性实现
|
||
- 不支持响应式设计的固定布局
|
||
|
||
**文件组织约束：**
|
||
- 组件文件放在 `src/components/` 目录下
|
||
- 页面组件放在 `src/pages/` 目录下
|
||
- 工具函数放在 `src/utils/` 目录下
|
||
- 类型定义放在 `src/types/` 目录下
|
||
|
||
## 🎨 具体组件生成提示
|
||
|
||
### 登录页面提示
|
||
|
||
```
|
||
创建一个现代化的登录页面，包含以下元素：
|
||
1. 顶部Logo和系统标题"智慧农业生产管理系统"
|
||
2. 两个标签页：密码登录和手机登录
|
||
3. 密码登录表单：用户名、密码、图形验证码
|
||
4. 手机登录表单：手机号、短信验证码、图形验证码
|
||
5. 记住登录状态功能
|
||
6. 测试账号提示：admin/admin123
|
||
7. 加载状态和错误处理
|
||
8. 绿色主题配色，渐变背景
|
||
```
|
||
|
||
### 导航栏提示
|
||
|
||
```
|
||
创建顶部导航栏组件，包含：
|
||
1. 左侧Logo和系统标题
|
||
2. 中间7个业务系统标签：智能农机管理、地块信息管理、农事操作管理、农业资产管理、AI作物模型、水肥控制系统、中心配置管理
|
||
3. 右侧消息通知图标（带未读数量徽章）
|
||
4. 用户头像和用户菜单（下拉菜单）
|
||
5. 响应式设计：移动端简化显示
|
||
6. 激活状态的绿色背景和底部指示线
|
||
7. 悬停效果的过渡动画
|
||
```
|
||
|
||
### 农机管理表格提示
|
||
|
||
```
|
||
创建农机档案管理页面，包含：
|
||
1. 页面标题"农机档案录入与维护"和"新增农机"按钮
|
||
2. 数据表格显示农机信息（设备名称、型号、类型、状态、位置等）
|
||
3. 每行操作按钮：编辑、详情、二维码、删除
|
||
4. 表格功能：排序、筛选、搜索、分页
|
||
5. 新增/编辑农机表单（包含所有必要字段）
|
||
6. 农机详情弹窗（显示完整信息和历史记录）
|
||
7. 批量操作功能（批量删除、批量导出）
|
||
8. 空数据状态和加载状态
|
||
```
|
||
|
||
### 移动端优化提示
|
||
|
||
```
|
||
为移动设备优化界面，重点包括：
|
||
1. 导航栏折叠为汉堡菜单
|
||
2. 表格优化为卡片式布局
|
||
3. 按钮尺寸加大（最小44px触摸区域）
|
||
4. 表单字段垂直布局
|
||
5. 添加手势支持（滑动、长按等）
|
||
6. 优化字体大小和间距
|
||
7. 实现离线数据缓存
|
||
8. 添加下拉刷新功能
|
||
```
|
||
|
||
## 🎯 具体页面生成请求
|
||
|
||
### 请求1：登录页面生成
|
||
|
||
**高层目标:** 创建安全、易用的登录界面，支持多种登录方式
|
||
|
||
**详细步骤：**
|
||
1. 创建Login.tsx组件，使用React hooks管理状态
|
||
2. 实现双标签切换（密码登录/手机登录）
|
||
3. 使用shadcn/ui的Card、Input、Button、Tabs组件
|
||
4. 实现图形验证码组件
|
||
5. 添加表单验证和错误处理
|
||
6. 实现登录状态管理和跳转逻辑
|
||
7. 添加加载状态和成功提示
|
||
8. 确保响应式设计和无障碍性
|
||
|
||
**代码结构示例：**
|
||
```typescript
|
||
// 登录页面组件结构
|
||
import { useState } from 'react'
|
||
import { Card } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
|
||
export default function Login() {
|
||
const [loginType, setLoginType] = useState<'password' | 'phone'>('password')
|
||
const [loading, setLoading] = useState(false)
|
||
// ... 其他状态管理
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-cyan-50 flex items-center justify-center p-4">
|
||
<Card className="w-full max-w-md p-8">
|
||
{/* 组件内容 */}
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
**严格范围：**
|
||
- 只创建Login.tsx文件
|
||
- 使用shadcn/ui组件，不修改其内部实现
|
||
- 实现与现有系统99.5%视觉一致性
|
||
- 支持键盘导航和屏幕阅读器
|
||
- 不实现后端API调用，只创建前端界面
|
||
|
||
### 请求2：导航栏组件生成
|
||
|
||
**高层目标:** 创建直观的导航系统，支持7大业务模块快速切换
|
||
|
||
**详细步骤：**
|
||
1. 创建Navigation.tsx组件
|
||
2. 实现7个业务系统标签的横向布局
|
||
3. 使用Lucide React图标（Tractor, Map, Clipboard等）
|
||
4. 实现消息通知中心（Popover组件）
|
||
5. 创建用户菜单（Popover组件）
|
||
6. 添加激活状态的视觉反馈
|
||
7. 实现消息详情弹窗
|
||
8. 添加用户退出登录功能
|
||
|
||
**组件交互要求：**
|
||
- 标签切换时保持用户会话
|
||
- 消息通知支持标记已读状态
|
||
- 用户菜单显示用户基本信息
|
||
- 支持键盘导航（Tab键）
|
||
|
||
**严格范围：**
|
||
- 创建Navigation.tsx和相关子组件
|
||
- 使用Tailwind CSS进行样式设计
|
||
- 保持与现有导航系统的99.5%一致性
|
||
- 不修改App.tsx的导航逻辑
|
||
- 确保响应式设计在移动端正常工作
|
||
|
||
### 请求3：农机档案表格生成
|
||
|
||
**高层目标:** 创建功能完整的农机档案管理界面，支持数据的增删改查
|
||
|
||
**详细步骤：**
|
||
1. 创建MachineryList.tsx组件
|
||
2. 实现数据表格显示农机列表
|
||
3. 添加表格操作列（编辑、详情、二维码、删除）
|
||
4. 实现搜索和筛选功能
|
||
5. 创建分页控制组件
|
||
6. 实现新增农机弹窗（Modal组件）
|
||
7. 创建农机详情弹窗，显示完整信息
|
||
8. 添加批量操作功能
|
||
9. 实现数据导出功能
|
||
|
||
**数据表格要求：**
|
||
- 支持列排序（点击表头）
|
||
- 支持列显示/隐藏自定义
|
||
- 行悬停效果和选中状态
|
||
- 空数据状态和加载状态
|
||
- 虚拟滚动支持大数据量
|
||
|
||
**表单验证要求：**
|
||
- 实时验证（输入后300ms）
|
||
- 清晰的错误提示信息
|
||
- 必填字段标记
|
||
- 表单重置和草稿保存
|
||
|
||
**严格范围：**
|
||
- 创建MachineryList.tsx及相关子组件
|
||
- 使用现有的数据结构和API接口格式
|
||
- 保持与现有农机管理功能的一致性
|
||
- 不修改数据存储逻辑，只创建前端界面
|
||
- 确保表格性能优化，支持大数据量
|
||
|
||
## 📱 移动优先生成请求
|
||
|
||
### 移动端登录页面
|
||
|
||
**目标:** 为田地现场的农机操作员创建移动友好的登录界面
|
||
|
||
**移动优化要求：**
|
||
1. 垂直布局，适应手机屏幕
|
||
2. 大按钮设计（最小44px高度）
|
||
3. 简化的表单字段布局
|
||
4. 支持手势操作（滑动画验证码）
|
||
5. 优化键盘弹出体验
|
||
6. 添加网络状态指示器
|
||
7. 实现离线登录支持
|
||
|
||
### 移动端农机管理
|
||
|
||
**目标:** 为移动设备优化的农机管理界面
|
||
|
||
**移动优化要求：**
|
||
1. 卡片式布局替代表格
|
||
2. 底部固定的操作按钮
|
||
3. 下拉刷新和上拉加载更多
|
||
4. 触摸友好的操作菜单
|
||
5. 简化的信息展示
|
||
6. 快速搜索和筛选
|
||
7. 离线数据缓存和同步
|
||
|
||
## 🚨 重要提醒
|
||
|
||
### 所有AI生成代码的要求：
|
||
|
||
1. **代码审查**: 所有AI生成的代码都需要人工审查和测试
|
||
2. **功能测试**: 确保生成的组件功能正常
|
||
3. **样式检查**: 验证视觉效果符合设计规范
|
||
4. **无障碍性测试**: 检查键盘导航和屏幕阅读器支持
|
||
5. **性能测试**: 确保组件性能满足要求
|
||
6. **浏览器兼容性**: 测试主流浏览器支持
|
||
|
||
### 质量保证清单：
|
||
|
||
- [ ] TypeScript类型安全，无类型错误
|
||
- [ ] 组件可复用，props接口清晰
|
||
- [ ] 样式响应式，支持多设备
|
||
- [ ] 无障碍性符合WCAG AA标准
|
||
- [ ] 性能优化，无明显卡顿
|
||
- [ ] 错误处理完善，用户友好
|
||
- [ ] 加载状态清晰，用户体验良好
|
||
|
||
---
|
||
|
||
**使用说明：**
|
||
1. 复制相应的提示内容到AI工具中
|
||
2. 根据生成的代码进行人工审查和调整
|
||
3. 测试组件功能和性能
|
||
4. 集成到现有项目架构中
|
||
5. 迭代优化用户体验
|
||
|
||
**技术支持：**
|
||
- 使用React 19 + TypeScript
|
||
- 遵循Tailwind CSS设计规范
|
||
- 使用shadcn/ui组件库
|
||
- 确保与现有系统架构兼容 |