# GoFaster 登录功能说明

## 功能概述

GoFaster 前端应用已成功集成了完整的用户登录系统，包括：

- 🔐 登录弹窗组件
- 📱 响应式设计
- 🔒 验证码支持
- 💾 本地状态管理
- 🎨 主题适配

## 使用方法

### 1. 显示登录弹窗

登录弹窗可以通过以下两种方式触发：

#### 方式一：点击顶部导航栏的"登录"按钮
- 在未登录状态下，顶部导航栏会显示"🔐 登录"按钮
- 点击即可打开登录弹窗

#### 方式二：点击首页的登录按钮
- 在首页的欢迎区域，未登录状态下会显示登录提示
- 点击"立即登录"按钮即可打开登录弹窗

### 2. 登录流程

1. **获取验证码**：弹窗打开时自动获取验证码图片
2. **填写信息**：
   - 用户名：输入您的用户名
   - 密码：输入您的密码
   - 验证码：输入图片中显示的4位验证码
3. **提交登录**：点击"登录"按钮提交
4. **验证码刷新**：点击验证码图片可刷新获取新的验证码

### 3. 默认账号

系统提供了默认的管理员账号用于测试：

- **用户名**：`sysadmin`
- **密码**：`sysadmin@123`

## 技术实现

### 组件结构

```
MainLayout.vue (主布局)
├── LoginModal.vue (登录弹窗)
├── Toast.vue (消息提示)
└── 其他组件...
```

### 状态管理

- 使用 Vue 3 Composition API
- 通过 `provide/inject` 在组件间共享登录状态
- 本地存储用户信息和登录状态

### 后端接口

登录功能需要后端提供以下接口：

1. **获取验证码**：`GET /api/auth/captcha`
2. **用户登录**：`POST /api/auth/login`

### 配置说明

前端配置位于 `src/config/app.config.js`，默认连接 `http://localhost:8080/api`

## 样式特性

### 主题适配
- 支持深色/浅色主题切换
- 使用 CSS 变量实现主题一致性
- 响应式设计，支持移动端

### 动画效果
- 弹窗滑入动画
- 加载状态指示器
- 平滑的过渡效果

## 错误处理

- 网络连接失败提示
- 验证码错误处理
- 登录失败重试机制
- 表单验证提示

## 安全特性

- 密码输入框隐藏内容
- 验证码防机器人
- Token 认证机制
- 自动登出处理

## 开发说明

### 添加新的登录相关功能

1. 在 `LoginModal.vue` 中添加新的表单字段
2. 在 `userService.js` 中添加对应的 API 调用
3. 在 `MainLayout.vue` 中处理新的状态变化

### 自定义样式

登录弹窗的样式可以通过修改 `LoginModal.vue` 中的 CSS 变量来调整：

```css
:root {
  --primary-color: #1976d2;
  --primary-hover: #1565c0;
  --bg-primary: #ffffff;
  --text-primary: #2c3e50;
}
```

## 故障排除

### 常见问题

1. **登录弹窗不显示**
   - 检查浏览器控制台是否有错误
   - 确认组件是否正确导入

2. **验证码获取失败**
   - 检查后端服务是否正常运行
   - 确认网络连接正常

3. **登录失败**
   - 检查用户名和密码是否正确
   - 确认验证码输入正确
   - 查看后端日志获取详细错误信息

### 调试模式

在开发环境中，可以打开浏览器开发者工具查看：
- 网络请求状态
- 控制台日志
- Vue 组件状态

## 更新日志

- **v1.0.0**：初始版本，包含基本的登录功能
- 支持用户名/密码登录
- 集成验证码系统
- 响应式设计
- 主题适配