需先用create-react-app创建typescript项目并安装cursor插件，再生成profilepage.tsx组件，删除mock数据改用props或context传值，通过usestate控制编辑态，用可选链访问useuserprofile返回的用户数据，避免白屏。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor写个人中心页面需要先搭建基础项目结构，再逐步实现用户信息展示、编辑功能和样式布局，整个过程依赖VS Code插件Cursor的AI辅助能力，但必须手动验证每段生成代码的可用性。
初始化React项目并启用Cursor
打开终端，执行 【npx create-react-app personal-center --template typescript】 创建带TypeScript支持的项目；等待安装完成，用VS Code打开该文件夹；在VS Code扩展市场搜索“Cursor”并安装，重启编辑器后点击左下角Cursor图标启用AI服务。
这一步不能跳过模板选择——不加 --template typescript 后续类型校验会频繁报错，修改成本远高于初始多敲几个字符。
生成基础页面组件
在 src 目录下右键→“New File”，命名为 pages/ProfilePage.tsx；光标定位到新文件内，输入注释：// 生成一个带头像、昵称、邮箱、简介字段的个人中心页面，使用Tailwind CSS布局；按 Ctrl+K（Windows/Linux）或 Cmd+K（Mac）唤出Cursor指令框，回车确认生成。
Cursor通常会输出一个包含 useState 和静态数据的函数组件，但【务必删除其中 mock 数据的硬编码赋值，改用 props 或 context 传入】——否则后续接入真实用户数据时要重写全部状态逻辑。
添加用户信息编辑功能
方法一：用表单控制模式
在 ProfilePage.tsx 中定义 const [editing, setEditing] = useState(false)；添加“编辑”按钮，点击触发 setEditing(true)；编辑状态下渲染 input 和 textarea，绑定 value 与 onChange；保存按钮调用模拟API更新逻辑。
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
方法二：用受控组件+一键切换
直接在JSX中写两套UI：非编辑态用 <p classname="text-gray-700">{userInfo.bio}</p>，编辑态换成 <textarea value="{bio}" onchange="{(e)"> setBio(e.target.value)} /></textarea>；切换靠 editing ? (编辑态) : (只读态) 三元判断实现——这种方式比动态替换DOM更稳定，不会丢失焦点。
注意：Textarea默认高度太小，必须加 className="min-h-[100px]"，否则用户输几行就看不见内容了。
接入真实用户数据
第一步：创建 hooks/useUserProfile.ts
用Cursor生成自定义Hook，提示词：“写一个React自定义Hook，名称为 useUserProfile，返回 { loading, error, data, refetch }，内部调用 /api/user/profile GET接口，使用fetch，带token认证”。
第二步：在 ProfilePage.tsx 顶部导入并调用：const { data: user, loading, refetch } = useUserProfile()；
第三步：用 {loading ? <span>加载中…</span> : <div>用户信息区块</div>} 包裹整个UI；
第四步：把所有静态字段替换成 {user?.nickname}、{user?.email} 等可选链访问。
这一步漏掉可选链（?. ）会导致页面白屏——当 user 为 undefined 时，user.nickname 会抛出TypeError。
