AI原生前端开发（040）：AI驱动的组件设计与开发

前言

组件是前端开发的基石！AI可以帮我们设计和开发高质量的组件！

---

1. AI辅助组件设计流程

1.1 组件需求 → 完整组件

/* 提示词：
"设计一个任务卡片组件，需求：
1. 显示任务标题、描述、截止日期、状态
2. 支持编辑、删除、完成操作
3. 响应式设计
4. 使用Tailwind CSS
5. React 19 + TypeScript"
*/

// AI生成的完整组件
import { useState } from 'react';

interface Task {
  id: string;
  title: string;
  description?: string;
  dueDate?: Date;
  status: 'todo' | 'in-progress' | 'done';
}

interface TaskCardProps {
  task: Task;
  onEdit?: (task: Task) => void;
  onDelete?: (id: string) => void;
  onStatusChange?: (id: string, status: Task['status']) => void;
}

const statusStyles = {
  'todo': 'bg-yellow-100 text-yellow-800',
  'in-progress': 'bg-blue-100 text-blue-800',
  'done': 'bg-green-100 text-green-800'
};

const statusLabels = {
  'todo': '待办',
  'in-progress': '进行中',
  'done': '已完成'
};

export default function TaskCard({ 
  task, 
  onEdit, 
  onDelete, 
  onStatusChange 
}: TaskCardProps) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className={`p-4 border rounded-lg shadow-sm ${task.status === 'done' ? 'opacity-60' : ''}`}>
      {isEditing ? (
        <div className="space-y-3">
          <input
            defaultValue={task.title}
            className="w-full p-2 border rounded"
            placeholder="标题"
          />
          <textarea
            defaultValue={task.description}
            className="w-full p-2 border rounded"
            placeholder="描述"
            rows={2}
          />
          <div className="flex gap-2">
            <button
              onClick={() => setIsEditing(false)}
              className="px-3 py-1 bg-gray-200 rounded"
            >
              取消
            </button>
            <button
              onClick={() => setIsEditing(false)}
              className="px-3 py-1 bg-blue-600 text-white rounded"
            >
              保存
            </button>
          </div>
        </div>
      ) : (
        <div className="space-y-3">
          <div className="flex justify-between items-start">
            <h3 className={`font-bold ${task.status === 'done' ? 'line-through' : ''}`}>
              {task.title}
            </h3>
            <span className={`px-2 py-1 text-xs rounded-full ${statusStyles[task.status]}`}>
              {statusLabels[task.status]}
            </span>
          </div>
          
          {task.description && (
            <p className="text-gray-600 text-sm">{task.description}</p>
          )}
          
          {task.dueDate && (
            <p className="text-xs text-gray-500">
              截止: {new Date(task.dueDate).toLocaleDateString()}
            </p>
          )}
          
          <div className="flex gap-2 pt-2 border-t">
            {onEdit && (
              <button
                onClick={() => setIsEditing(true)}
                className="text-sm text-blue-600 hover:underline"
              >
                编辑
              </button>
            )}
            {onStatusChange && task.status !== 'done' && (
              <button
                onClick={() => onStatusChange(task.id, 'done')}
                className="text-sm text-green-600 hover:underline"
              >
                完成
              </button>
            )}
            {onDelete && (
              <button
                onClick={() => onDelete(task.id)}
                className="text-sm text-red-600 hover:underline"
              >
                删除
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

---

2. 组件设计原则

原则	说明
单一职责	一个组件只做一件事
可复用	组件设计为可复用
可扩展	组件易于扩展新功能
可测试	组件易于编写测试
类型安全	完善的TypeScript类型

---

3. 今日小结

这一篇我们学习了：

1. AI辅助组件设计流程
2. 组件设计原则

---

4. 下篇预告

下一篇，我们学习 AI辅助的状态管理（Zustand/Pinia）！