smart-crop-ui/docs/AI前端开发提示.md

🤖 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. 实现离线数据缓存机制

代码示例和数据结构

核心数据结构

// 农机设备数据结构
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接口示例

// 登录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"
}

样式约束

/* 主要色彩 */
--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. 确保响应式设计和无障碍性

代码结构示例：

// 登录页面组件结构
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组件库
• 确保与现有系统架构兼容