创建迁移文件为 users 表添加头像字段：

# Laravel 迁移命令
php artisan make:migration add_avatar_to_users_table

迁移文件位置：database/migrations/2024_01_01_000001_add_avatar_to_users_table.php

执行迁移：

php artisan migrate

创建用户控制器：

# Laravel 控制器创建命令
php artisan make:controller Api/UserController

控制器位置：app/Http/Controllers/Api/UserController.php

路由文件：frontend/src/components/TodoList/api.php

新增的用户资料相关路由：

• GET /api/user/profile - 获取用户资料
• PUT /api/user/profile - 更新用户资料
• POST /api/user/avatar - 上传头像
• DELETE /api/user/avatar - 删除头像
• PUT /api/user/password - 修改密码

创建用户 API 服务文件：frontend/src/api/user.js

更新 TopAppBar 组件：frontend/src/components/TodoList/TopAppBar.vue

新增功能：

• 个人资料设置弹窗
• 头像上传/删除
• 用户名和邮箱修改
• 密码修改
• 表单验证
• 加载状态处理

• 支持 JPEG、PNG、JPG、GIF 格式
• 文件大小限制 2MB
• 自动删除旧头像
• 头像预览功能

• 用户名修改
• 邮箱修改（唯一性验证）
• 实时表单验证

• 当前密码验证
• 新密码长度验证（最少8位）
• 密码确认验证

• 响应式设计
• 加载状态提示
• 错误处理和提示
• 主题适配

1. 点击顶部导航栏用户头像
2. 在下拉菜单中选择「个人设置」
3. 在弹窗中可以：
   • 切换「基本资料」和「修改密码」标签页
   • 上传/删除头像
   • 修改用户名和邮箱
   • 修改登录密码

• Laravel 11
• Laravel Sanctum (认证)
• 文件存储 (Storage)

• Vue 3 Composition API
• Axios (HTTP 请求)
• 响应式设计
• CSS 变量主题系统

• 文件类型验证
• 文件大小限制
• 密码哈希存储
• 认证中间件保护
• CSRF 保护
• 输入验证和清理