🎨 重构用户端前端为vue开发，完善基础类和角色相关接口

web-app-vue/启动指南.md

@@ -0,0 +1,199 @@
+# 云酒馆 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