为什么你的React开发效率还这么低：Prompt工程改变了什么

const [errors, setErrors] = useState({})

const validateForm = (data) => {
const newErrors = {}

if (!data.name || data.name.trim().length < 3) {
    newErrors.name = "商品名称至少3个字"
  }
if (data.name && data.name.trim().length > 100) {
    newErrors.name = "商品名称最多100个字"
  }

// 价格验证...
if (!data.price || isNaN(data.price)) {
    newErrors.price = "请输入正确的价格"
  } elseif (data.price < 0.01 || data.price > 999999) {
    newErrors.price = "价格范围0.01-999999元"
  } elseif (!/^\d+(\.\d{1,2})?$/.test(data.price)) {
    newErrors.price = "价格最多2位小数"
  }

// ... 20多行类似的重复代码

return Object.keys(newErrors).length === 0
}

// 在表单里用：
const handleSubmit = () => {
if (validateForm(formData)) {
    // 提交
  } else {
    setErrors(newErrors)
  }
}

我在用react-hook-form和Zod做一个报价表单。需要以下字段验证：
- 商品名称：3-100字
- 单价：0.01-999999元，最多2位小数
- 数量：1-1000000
- 备注：可选，最多500字
- 交货期：不能是过去的日期

给出完整代码，包括schema和form组件。代码要能直接用。

import { useForm } from"react-hook-form"
import { zodResolver } from"@hookform/resolvers/zod"
import { z } from"zod"

const quoteSchema = z.object({
name: z.string()
    .trim()
    .min(3, "商品名称至少3个字")
    .max(100, "商品名称最多100个字"),

price: z.number()
    .positive("价格必须大于0")
    .min(0.01)
    .max(999999)
    .multipleOf(0.01, "最多2位小数"),

quantity: z.number()
    .int()
    .min(1)
    .max(1000000),

remark: z.string().max(500).optional(),

deliveryDate: z.date()
    .min(newDate(), "交货期不能早于今天")
})

export default function QuoteForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(quoteSchema)
  })

return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 所有验证逻辑自动生效 */}
    </form>
  )
}

文件结构：
- actions.js (100行)
- types.js (30行)
- reducer.js (200行)
- selectors.js (80行)
- middleware.js (100行)

总计：500+行，而且逻辑分散在各处

用Zustand管理一个内容列表页面的状态。

需要的状态：
- 列表数据
- 当前页码
- 每页条数
- 总记录数
- 排序字段和方向
- 多个筛选条件（比如状态、日期范围、搜索关键词）
- 加载状态

需要的操作：
- fetchList(filters, sort, page)
- setFilter
- setSortBy
- setPage
- reset

用TypeScript，数据要自动保存到localStorage。给出完整代码。

import { create } from'zustand'
import { persist } from'zustand/middleware'

interface ListState {
items: any[]
page: number
pageSize: number
total: number
sortBy: string
sortOrder: 'asc' | 'desc'
filters: Record<string, any>
  isLoading: boolean
error: string | null

setPage: (page: number) =>void
setFilter: (key: string, value: any) =>void
setSortBy: (field: string, order: 'asc' | 'desc') =>void
fetchList: () =>Promise<void>
  reset: () =>void
}

exportconst useListStore = create<ListState>()(
  persist(
    (set, get) => ({
      items: [],
      page: 1,
      pageSize: 20,
      total: 0,
      sortBy: 'createdAt',
      sortOrder: 'desc',
      filters: {},
      isLoading: false,
      error: null,
      
      setPage: (page) =>set({ page }),
      setFilter: (key, value) =>set(state => ({
        filters: { ...state.filters, [key]: value },
        page: 1// 改变筛选时重置到第一页
      })),
      setSortBy: (field, order) =>set({ sortBy: field, sortOrder: order }),
      
      fetchList: async () => {
        set({ isLoading: true })
        try {
          const { page, pageSize, filters, sortBy, sortOrder } = get()
          const res = await api.getList({
            page,
            pageSize,
            ...filters,
            sortBy,
            sortOrder
          })
          set({
            items: res.data,
            total: res.total,
            isLoading: false
          })
        } catch (error) {
          set({ error: error.message, isLoading: false })
        }
      },
      
      reset: () =>set({
        filters: {},
        page: 1,
        sortBy: 'createdAt',
        sortOrder: 'desc'
      })
    }),
    { name: 'list-store' }
  )
)

const { items, page, filters, fetchList, setFilter } = useListStore()

用React和react-window做一个虚拟滚动列表。

要求：
- 初始显示100条项目，用户滑到底部自动加载下一批
- 每条项目高度120px（固定）
- 列表容器高度600px
- 当用户滑过来时，异步加载该项的详细信息
- 用TypeScript

给出完整可用的代码。

📝 Prompt模板
├─ React组件
│  ├─ 表单组件
│  ├─ 列表组件
│  ├─ 模态框
│  └─ 数据表格
├─ 状态管理
│  ├─ Zustand store
│  ├─ Context API
│  └─ SWR配置
├─ 业务逻辑
│  ├─ 表单验证
│  ├─ API请求封装
│  └─ 错误处理

我需要用[技术栈]做[功能描述]。

具体需求：
1. [功能点1]
2. [功能点2]
3. [功能点3]

技术要求：
- 用[相关库]
- TypeScript类型要完整
- 代码要考虑[某某场景]

给出完整可用的代码。

代码里有问题：[具体描述]

请修改[某个部分]，改成[具体需求]。

生成的代码太复杂了，可以简化一下吗？
特别是[某个函数]部分。