# 云酒馆 Vue 前台 - 快速启动指南

## ✅ 已完成的功能

### 认证模块
- ✅ 用户登录
- ✅ 用户注册
- ✅ Token 管理
- ✅ 路由守卫
- ✅ 自动登录检查

### 页面
- ✅ 登录页面（/auth/login）
- ✅ 注册页面（/auth/register）
- ✅ 首页（/）

### 技术栈
- ✅ Vue 3 + TypeScript
- ✅ Vite 5
- ✅ Element Plus
- ✅ Pinia
- ✅ Vue Router 4
- ✅ Axios

## 🚀 启动步骤

### 1. 启动 Go 后端
```bash
# 在项目根目录
cd server
go run main.go
```

**确认后端启动成功：**
- 看到日志：`register table success`
- 看到日志：`前台静态文件服务已启动`
- 访问：http://localhost:8888/app/auth/login （应该返回 404 或错误，这是正常的）

### 2. 启动 Vue 前端
```bash
# 在项目根目录
cd web-app-vue
npm run dev
```

**确认前端启动成功：**
- 看到：`VITE v5.x.x ready in xxx ms`
- 看到：`Local: http://localhost:3000/`
- 看到：`Network: use --host to expose`

### 3. 访问应用
打开浏览器访问：**http://localhost:3000**

应该会自动跳转到登录页：**http://localhost:3000/auth/login**

## 🧪 测试流程

### 第一步：注册新用户
1. 点击「立即注册」链接，或直接访问 http://localhost:3000/auth/register
2. 填写注册信息：
   ```
   用户名：test001
   密码：123456
   确认密码：123456
   昵称：测试用户（可选）
   邮箱：test@example.com（可选）
   ```
3. 点击「注册」按钮
4. 看到成功提示：「注册成功，请登录」
5. 自动跳转到登录页

### 第二步：登录
1. 在登录页输入刚才注册的信息：
   ```
   用户名：test001
   密码：123456
   ```
2. 点击「登录」按钮
3. 看到成功提示：「登录成功」
4. 自动跳转到首页

### 第三步：查看首页
1. 应该看到欢迎信息：「欢迎回来，测试用户！」
2. 看到用户统计数据（对话数量、消息数量等）
3. 右上角显示用户头像和昵称

### 第四步：退出登录
1. 点击右上角用户头像
2. 选择「退出登录」
3. 看到提示：「已退出登录」
4. 自动跳转到登录页

### 第五步：测试路由守卫
1. 退出登录状态
2. 直接访问 http://localhost:3000/
3. 应该自动跳转到 http://localhost:3000/auth/login
4. 看到提示：「请先登录」

## 📊 端口说明

| 服务 | 端口 | 地址 |
|-----|------|------|
| Go 后端 | 8888 | http://localhost:8888 |
| Vue 前端 | 3000 | http://localhost:3000 |
| API 代理 | - | /app/* → http://localhost:8888 |

## 🔍 调试技巧

### 查看网络请求
1. 打开浏览器开发者工具（F12）
2. 切换到 Network 标签
3. 筛选 Fetch/XHR
4. 查看登录/注册的请求和响应

### 查看存储的数据
在浏览器控制台运行：
```javascript
// 查看 Token
console.log(localStorage.getItem('st_access_token'))

// 查看用户信息
console.log(JSON.parse(localStorage.getItem('st_user_info')))

// 清除登录状态
localStorage.clear()
```

### 查看 Pinia Store 状态
安装 Vue DevTools 浏览器扩展，可以查看：
- Pinia Stores 状态
- 组件树
- 路由信息

## ❗ 常见问题

### Q1: 启动前端后，页面空白？
**A:** 检查浏览器控制台是否有错误。可能原因：
- 路由配置问题
- 组件导入路径错误
- 刷新页面试试

### Q2: 登录时提示「网络错误」？
**A:** 检查：
1. Go 后端是否正在运行
2. 后端地址是否正确（http://localhost:8888）
3. 浏览器控制台的网络请求详情
4. 是否有 CORS 错误

### Q3: 点击登录没反应？
**A:** 检查：
1. 浏览器控制台是否有错误
2. 表单验证是否通过
3. 网络请求是否发出

### Q4: 登录成功但没跳转？
**A:** 检查：
1. 路由配置是否正确
2. 浏览器控制台是否有路由错误
3. localStorage 是否保存了 token

## 📝 开发技巧

### 热更新
修改代码后，浏览器会自动刷新，无需手动刷新。

### 查看类型提示
在 VSCode 中，鼠标悬停在变量上可以看到类型信息。

### 快捷键
- `Ctrl + C` - 停止开发服务器
- `Ctrl + Shift + I` - 打开浏览器开发者工具

## 🎯 下一步开发

### 立即可做
1. 测试注册和登录功能
2. 检查 UI 效果
3. 优化样式细节

### 后续开发
1. 角色管理模块
2. 对话功能模块
3. 设置页面
4. WebSocket 集成

## 🎉 恭喜

Vue 认证模块已经完成！你现在拥有：
- 🎨 现代化的 UI
- 🔐 完整的认证流程
- 💪 类型安全的代码
- 🏗️ 清晰的项目结构

**开始测试吧！** 🚀

---

**创建日期**: 2026-02-10  
**版本**: v1.0.0