⚙️ 设置页（SettingsPage）

用户账户设置，包括个人资料修改、通知偏好、AI 功能开关、订阅升级、账号注销等。

页面结构

个人资料卡片：头像上传 + 昵称 + 手机号（只读）+ 邮箱 + 登录密码修改
通知设置卡片：AI 错误通知 / 周报通知 / 预算预警通知（三个开关）
AI 功能卡片：AI 对话、聊天建议、OCR 扫描、异常检测、趋势预测开关
订阅升级卡片：当前方案 + 升级 Pro 按钮（跳转外部支付页）
危险操作卡片：注销账号（红色警告区）

触发时机详解

个人资料 — 头像上传

1. 点击头像 → 文件选择 → POST /api/auth/avatar

触发条件：点击头像区域 → 文件选择框 → 选图片 → 自动上传（无确认按钮）

POST /api/auth/avatar

✅ 选择图片后立即自动上传（FormData，multipart/form-data）

参数	类型	必填	说明
`avatar`	File	必填	头像图片文件

响应: {"avatar_url": "https://..."}

副作用：成功后 AuthContext 重新 GET /api/auth/me（刷新用户信息）

个人资料 — 修改昵称

2. 修改昵称 → PUT /api/auth/me

触发条件：修改昵称输入框 → 失去焦点（onBlur）→ 自动 PUT（无需确认按钮）

PUT /api/auth/me

✅ onBlur 时自动触发（无需点击确认按钮）

参数	类型	必填	说明
`nickname`	string	选填	新昵称（2-50字符）
`avatar_url`	string	选填	头像 URL（头像上传后自动填充）

副作用：成功后 AuthContext 重新 GET /api/auth/me

个人资料 — 修改邮箱

3. 修改邮箱 → PUT /api/auth/me

触发条件：修改邮箱输入框 → 失去焦点（onBlur）→ 自动 PUT

PUT /api/auth/me

✅ onBlur 时自动触发

参数：{"email": "new@example.com"}

副作用：成功后 AuthContext 重新 GET /api/auth/me

个人资料 — 修改密码

4. 修改密码 → POST /api/auth/change-password

触发条件：填写旧密码+新密码+确认密码 → 点击"确认修改"按钮

POST /api/auth/change-password

✅ 点击"确认修改"按钮触发

参数	类型	必填	说明
`oldPassword`	string	必填	当前密码
`newPassword`	string	必填	新密码（至少6位）

前端校验：新密码 ≠ 确认密码 → 提示"两次输入密码不一致"

通知偏好

5. 切换通知开关 → PUT /api/auth/preferences

触发条件：点击通知类型开关（AI错误/周报/预算预警）→ Toggle 状态 → 自动 PUT

PUT /api/auth/preferences

✅ 开关 Toggle 时自动触发（onChange，无需确认按钮）

参数	类型	必填	说明
`ai_api_error_notification`	boolean	选填	AI API 错误通知
`weekly_report`	boolean	选填	每周报告
`budget_alert`	boolean	选填	预算预警通知

副作用：成功后 AuthContext 重新 GET /api/auth/me（刷新偏好设置）

AI 功能开关

6. 切换 AI 功能开关 → PUT /api/auth/preferences

触发条件：点击 AI 功能开关（对话建议/OCR扫描/异常检测/趋势预测）→ Toggle → 自动 PUT

PUT /api/auth/preferences

✅ 开关 Toggle 时自动触发

参数	类型	必填	说明
`ai_conversation_suggestions`	boolean	选填	对话建议
`ocr_scan`	boolean	选填	OCR 扫描
`anomaly_detection`	boolean	选填	异常检测
`trend_prediction`	boolean	选填	趋势预测

副作用：成功后 AuthContext 重新 GET /api/auth/me

订阅升级

7. 点击「升级 Pro」→ 跳转外部支付页

触发条件：点击升级 Pro 按钮 → window.open 打开支付链接

危险操作

8. 注销账号 → DELETE /api/auth/account

触发条件：点击"注销账号" → 输入密码 → confirm() 二次确认 → 发送 DELETE

DELETE /api/auth/account

✅ 二次确认后触发

参数	类型	必填	说明
`password`	string	必填	当前密码（验证身份）

副作用：成功后清除 localStorage token → Navigate to /login，并弹出 alert("账号已注销")

← 💰 账单 🔧 开发者 →