从点子到原型只需10分钟：用 Copilot 快速验证产品功能

// 创建一个带搜索框的表格，显示用户列表，支持分页

npm create vite@latest ai-prototype-demo --template react
cd ai-prototype-demo
npm install
npm run dev

// 创建用户管理表格
// 显示字段：姓名、邮箱、注册时间
// 支持搜索和分页
import React, { useState } from 'react';

const mockUsers = new Array(30).fill(null).map((_, i) => ({
  id: i,
  name: `User ${i}`,
  email: `user${i}@demo.com`,
  createdAt: new Date().toLocaleDateString(),
}));

export default function UserList() {
  const [query, setQuery] = useState('');
  const [page, setPage] = useState(1);
  const pageSize = 10;

  const filtered = mockUsers.filter(u =>
    u.name.toLowerCase().includes(query.toLowerCase())
  );
  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);

  return (
    <div>
      <input
        placeholder="搜索用户名"
        value={query}
        onChange={e => setQuery(e.target.value)}
        style={{ marginBottom: '10px' }}
      />
      <table>
        <thead>
          <tr><th>姓名</th><th>邮箱</th><th>注册时间</th></tr>
        </thead>
        <tbody>
          {paged.map(user => (
            <tr key={user.id}>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.createdAt}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div>
        <button onClick={() => setPage(p => Math.max(p - 1, 1))}>上一页</button>
        <span style={{ margin: '0 10px' }}>第 {page} 页</span>
        <button onClick={() => setPage(p => p + 1)}>下一页</button>
      </div>
    </div>
  );
}

// 生成 20 个模拟商品数据，字段：标题、价格、图片
const mockGoods = Array.from({ length: 20 }).map((_, i) => ({
  id: i,
  title: `商品 ${i}`,
  price: (Math.random() * 100).toFixed(2),
  image: `https://picsum.photos/200/200?random=${i}`
}));