UserCenterPage.jsx是结构完整、带权限控制和响应式布局的React用户中心页面骨架，含Outlet嵌套路由、左侧导航菜单（个人资料/账户设置/安全中心/通知偏好）、右侧主内容区及移动端折叠菜单逻辑。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor快速生成一个结构完整、带权限控制和响应式布局的React用户中心页面，避免手动搭建路由、状态管理、表单验证等重复模块。
创建用户中心页面骨架
在项目根目录下，右键选择“New File”，命名为UserCenterPage.jsx。光标置于文件顶部空白处，按下Cmd+K（Mac）或 Ctrl+K（Windows），输入以下提示词：
“生成一个React函数组件，名为UserCenterPage，使用React Router v6的Outlet实现嵌套路由，包含左侧导航菜单（个人资料、账户设置、安全中心、通知偏好）和右侧主内容区。使用Tailwind CSS布局，适配移动端折叠菜单。”
确认生成后，Cursor会自动输出含useNavigate、useLocation和Outlet的完整组件，同时在App.jsx中插入对应Route配置片段。
生成个人资料子页面
新建文件UserProfile.jsx，光标置于文件内，执行Cmd+K，输入：
“创建用户个人资料页：显示头像上传区域（支持拖拽）、姓名/邮箱/手机号编辑字段、生日选择器、个人简介文本域。所有字段需实时校验（邮箱格式、手机号11位），提交按钮禁用态随表单有效性同步变化。”
Cursor将生成基于React Hook Form的完整表单，含useForm初始化、register绑定、handleSubmit处理及errors渲染逻辑。注意：生成的defaultValues会从useAuthContext()读取当前用户数据——【若项目未实现AuthContext，请先运行Cmd+K生成AuthProvider】。
添加账户设置与安全中心
方法一：分步生成
第一步：新建AccountSettings.jsx，Cmd+K输入：“生成账户设置页：包含语言切换下拉框、时区选择器、双因素认证开关（开启后显示二维码扫描区域）、密码修改表单（旧密码+新密码+确认新密码，三次输入需联动校验）。”
第二步：新建SecurityCenter.jsx，Cmd+K输入：“生成安全中心页：展示最近5次登录记录（时间、IP、设备类型、位置），提供‘退出其他设备’按钮，点击后调用/api/auth/logout-others接口。”
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
第三步：在UserCenterPage.jsx的导航菜单中，将新增的两个路由项加入items数组，并确保Menu.Item的key与Route的path严格一致。
方法二：批量生成
直接在src/pages/UserCenter/目录下，Cmd+K输入：“为用户中心生成账户设置和安全中心两个子页面，要求共用同一套表单验证规则（zod schema），密码修改字段必须满足8位以上+大小写字母+数字组合，错误提示统一显示在字段下方。”
Cursor会自动创建validationSchemas.js并分别导入两个页面，避免重复定义校验逻辑。
注入响应式交互逻辑
光标放在UserCenterPage.jsx文件末尾，Cmd+K输入：
“为用户中心页面添加响应式行为：当视口宽度小于768px时，左侧导航菜单自动收起，顶部显示汉堡图标；点击图标展开菜单，再次点击或点击外部区域关闭；菜单展开时背景遮罩层半透明覆盖主内容区。”
Cursor将注入useState控制菜单显隐、useEffect监听window.innerWidth、以及useRef绑定菜单DOM用于点击外部关闭。生成的遮罩层使用fixed inset-0 bg-black/50 z-40，确保层级高于所有内容但低于全局Toast提示。
这一步操作起来很简单，直接把生成的MobileMenuToggle组件插入到Header区域即可。
