# 🤖 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组件库
- 确保与现有系统架构兼容