这是一个完整的登录注册应用，包含Web端和后端模拟服务，实现了用户登录、注册、忘记密码和用户个人中心等功能。

/workspace/
├── frontend/              # Web端项目
│   ├── src/
│   │   ├── components/    # 公共组件
│   │   │   ├── phone-input/     # 手机号输入组件
│   │   │   ├── code-input/      # 验证码输入组件
│   │   │   └── avatar-upload/   # 头像上传组件
│   │   ├── pages/         # 页面组件
│   │   │   ├── login/           # 登录页面
│   │   │   ├── register/        # 注册页面
│   │   │   ├── forgot-password/ # 忘记密码页面
│   │   │   └── profile/         # 个人中心页面
│   │   ├── router/        # 路由配置
│   │   ├── store/         # 状态管理
│   │   ├── styles/        # 全局样式
│   │   ├── utils/         # 工具函数
│   │   ├── App.vue        # 根组件
│   │   └── main.js        # 入口文件
│   ├── package.json       # 项目依赖配置
│   └── vite.config.js     # 构建配置
├── mock-server.js         # 后端模拟服务
├── package.json           # 后端依赖配置
└── README.md              # 项目说明文档

• 框架: Vue 3 (Composition API)
• UI组件库: Vant UI
• 状态管理: Pinia
• 路由: Vue Router
• 构建工具: Vite
• HTTP请求: 自定义封装

• 框架: Node.js + Express
• 跨域处理: CORS

• 手机号验证码登录
• 用户注册（支持汽修师傅和客户角色）
• 忘记密码重置
• 微信登录（预留接口）

• PhoneInput: 手机号输入组件，带格式验证
• CodeInput: 验证码输入组件，带倒计时功能
• AvatarUpload: 头像上传组件，支持文件验证

• 表单验证（手机号格式、必填项等）
• 加载状态提示
• 友好的错误处理
• 防抖处理
• 倒计时功能
• 即时反馈提示

# 安装前端依赖
cd frontend
npm install

# 安装后端模拟服务依赖
cd ..
npm install express cors

# 启动后端模拟服务（端口3001）
node mock-server.js

# 启动前端开发服务器（端口3000）
cd frontend
npm run dev

打开浏览器访问: http://localhost:3000

后端模拟服务提供了以下API接口：

• POST /auth/send-code - 发送验证码
• POST /auth/login - 手机号验证码登录
• POST /auth/register - 用户注册
• POST /auth/reset-password - 重置密码

• GET /user/profile - 获取用户信息
• PUT /user/profile - 更新用户信息

1. 遵循Vue 3组合式API规范
2. 组件化开发，代码复用
3. 完整的错误处理和用户反馈
4. 响应式设计，适配移动端

1. RESTful API设计
2. 统一的响应格式
3. 完善的错误处理
4. 数据验证和安全防护

1. 组件化设计: 将手机号输入、验证码输入、头像上传等通用功能封装成独立组件，提高代码复用性
2. 用户体验优化: 实现了完整的表单验证、倒计时功能、加载状态提示等，提升用户体验
3. 状态管理: 使用Pinia进行状态管理，统一维护用户登录状态和信息
4. 响应式布局: 适配移动端设备，提供良好的视觉体验
5. 开发效率: 提供了完整的开发环境和模拟服务，便于快速开发和测试

1. 添加微信登录功能
2. 完善个人信息编辑页面
3. 添加修改密码功能
4. 优化性能和用户体验
5. 添加更多安全验证机制
6. 实现完整的测试用例