与 AI 结对编程：V0 / Cursor 提效

// ── ① 契约层：第 21 篇的 Zod schema，字段、校验规则、错误文案全在里面 ──
const orderSchema = z.object({
  orderId: z.string().regex(/^ORD-\d+$/, "订单号形如 ORD-1001"),
  amount: z.number().positive("金额必须大于 0"),
  status: z.enum(["PENDING", "PAID", "CLOSED"]),
});
type OrderInput = z.infer<typeof orderSchema>;

// ── ② 边界层：第 28 篇的 Props 接口，组件对外长什么样 ──
interface OrderFormProps {
  initial?: OrderInput;
  onSubmit: (data: OrderInput) => Promise<void>;
  onCancel?: () => void;
}

// ── ③ 需求层：技术栈、禁止项、验收标准，像验收清单一样写 ──
// 用 React 18 + TS 函数组件 + react-hook-form + zodResolver 实现 OrderForm；
// 不引入 UI 库；提交中按钮 loading 且禁用；错误文案展示在对应字段下方；
// 表单用受控方式管理（第 24 篇），不要用 ref 裸取值。

// 反例：一次梭哈，生成 500 行黑盒——跑不起来就废，跑起来了也不敢改
// 「帮我写一个完整的订单管理页面，带列表、筛选、分页、详情。」

// 正例：拆成小步，每步一个可验证的交付物
// 第 1 步：「只写 OrderTable 组件，props 收 orders 数组，按第 28 篇的接口定义来。」
// 第 2 步：「加筛选：关键词由父组件传下来（第 14 篇状态提升），别让表格自己管状态。」
// 第 3 步：「分页抽成 useOrderPagination 自定义 Hook（第 13 篇），UI 只管渲染。」

function OrderList({ keyword }: { keyword: string }) {
  const [orders, setOrders] = useState<any[]>([]); // 病灶①：any，字段契约全丢（第 28 篇）

  useEffect(() => {
    fetch(`/api/orders?kw=${keyword}`)
      .then((r) => r.json())
      .then(setOrders);
    // 病灶②：没有清理函数，快速切关键词会竞态回填（第 9 / 34 篇）
  }); // 病灶③：依赖数组没写，每次渲染后都重新请求

  return (
    <ul>
      {orders.map((o, i) => (
        <li key={i}>{o.id}</li> // 病灶④：index 当 key（第 7 篇）
      ))}
    </ul>
  );
}

// V0 交付物里的数据层：写死的 mock，UI 已经七成像
const orders = [
  { id: "ORD-1001", amount: 199, status: "PAID" },
  { id: "ORD-1002", amount: 59, status: "PENDING" },
];

// 手工替换：UI 结构一行不动，只换数据来源
const [orders, setOrders] = useState<Order[]>([]);
const [error, setError] = useState(false);

useEffect(() => {
  const controller = new AbortController();
  fetch("/api/orders", { signal: controller.signal })
    .then((r) => r.json())
    .then((data) => setOrders(data.items))
    .catch(() => setError(true)); // 加载态 / 错误态：第 34 篇的功课这时派上用场
  return () => controller.abort(); // 清理函数——第 9 篇的习惯，此刻最值钱
}, []);