应将重复表单逻辑抽离为通用EditableField组件：先定义EditableProps接口，再用Cursor AI生成受控组件，按type分发渲染器，配置Rules约束行为，最后用Visual Editor验证。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor开发React项目时，需要把重复出现的表单字段、状态切换逻辑、校验反馈等抽离成可复用的通用组件，避免每个页面都写一套编辑器、每种类型都复制粘贴渲染逻辑。
第一步：明确封装边界与输入契约
打开 Cursor 编辑器，在项目根目录新建 src/components/EditableField 文件夹。不要直接写组件，先创建 EditableField.types.ts —— 这是后续所有 AI 生成和类型推导的基础。
在该文件中定义核心接口：type EditableProps<T = any> = { value: T; onChange: (v: T) => void; type: 'text' | 'number' | 'date' | 'select'; disabled?: boolean; placeholder?: string; validator?: (v: T) => boolean | string; };
【必须导出且命名规范】 接口名必须以 Props 结尾，且泛型参数为 T，否则 Cursor 的 TypeScript 插件无法自动补全 props 类型。
第二步：用自然语言驱动AI生成骨架
右键点击 EditableField 文件夹 → “Ask Cursor about this folder”，输入提示词：
“你是一个有 5 年 React + TypeScript 经验的前端架构师。根据 EditableProps 接口，生成一个受控模式的通用编辑组件。要求：双击进入编辑态，失焦或回车提交；支持 text/number/date/select 四种 type；select 类型需接收 options 属性并渲染下拉；所有输入框需绑定 placeholder 和 disabled 状态；错误时显示红色边框和下方提示文字。”
等待 Cursor 输出完整组件文件（含 EditableField.tsx 和配套 hooks），不要手动修改结构——AI 会自动按接口契约注入类型检查。
第三步：注册渲染器插件系统
在 EditableField.tsx 同级新建 renderers/ 目录，并执行以下操作：
方法一：让 Cursor 生成基础渲染器
聚焦于空的 renderers/TextRenderer.tsx 文件，输入：“生成一个纯文本输入渲染器，接收 value、onChange、placeholder、disabled，使用 Tailwind 样式，聚焦时加 border-blue-500，错误时加 border-red-500”。
方法二：复用已有组件
若项目中已存在 NumberInput 组件，直接在 renderers/index.ts 中导出：export { default as NumberRenderer } from '@/components/NumberInput'; —— Cursor 会自动识别路径并完成类型对齐。
方法三：动态加载渲染器
在主组件内用 const Renderer = renderers[type] || renderers.text; 分发，【type 值必须严格匹配字符串字面量】，比如传入 'NUMBER' 会导致运行时报错，只能是 'number'。
第四步：配置 Rules 锁定组件行为规范
进入项目根目录，确认存在 .cursor/rules/react-editable.mdc 文件。若无，新建它并填入：
---
description: "通用编辑组件强制规则"
globs: ["src/components/EditableField/**"]
---
- 所有渲染器必须接收 value 和 onChange 两个必传 prop
- 编辑态必须触发 onBlur 和 onKeyDown(Enter) 双提交机制
- 错误状态必须通过 isValid prop 控制，不可依赖内部 useState
- 不得在组件内发起 API 请求或访问 localStorage
保存后重启 Cursor，后续对该目录下任意文件提问，AI 将自动遵守这些约束，不再生成带副作用的代码。
第五步：用 Visual Editor 快速验证与微调
启动本地开发服务器 → 在浏览器中打开含 <EditableField type="text" value="hello" onChange={...} /> 的页面 → 点击 Cursor 工具栏的 “Visual Editor” 图标。
步骤一：双击页面中的编辑区域，触发编辑态
步骤二：在右侧 Props 面板中修改 value 值，观察实时渲染变化
步骤三：勾选 disabled 复选框，确认输入框置灰且不可交互
步骤四：手动在输入框中输入非法字符（如给 number 类型输字母），验证错误边框是否出现
所有调整完成后，点击 “Apply Changes”，Cursor 自动将 UI 操作反写为 JSX 代码，无需手敲 class 或 style。
