159 lines
4.4 KiB
Markdown
159 lines
4.4 KiB
Markdown
|
# 游戏功能重构 - 快速启动指南
|
|||
|
|
|
|||
|
|
## 🎯 重构概述
|
|||
|
|
|
|||
|
|
已成功将游戏功能从单一页面重构为**三个标签页**：
|
|||
|
|
- **每日** - 包含队伍阵容、每日任务、咸将塔、挂机时间、咸鱼大冲关、盐罐机器人
|
|||
|
|
- **俱乐部** - 包含俱乐部签到、俱乐部赛车、俱乐部信息、俱乐部排位
|
|||
|
|
- **活动** - 包含月度任务、咸将升级模块
|
|||
|
|
|
|||
|
|
## 📦 新增组件清单
|
|||
|
|
|
|||
|
|
已创建 **6个** 新的独立组件：
|
|||
|
|
|
|||
|
|
1. **HangUpStatus.vue** - 挂机时间管理 ⏰
|
|||
|
|
2. **BottleHelperStatus.vue** - 盐罐机器人管理 🤖
|
|||
|
|
3. **StudyStatus.vue** - 咸鱼大冲关 📚
|
|||
|
|
4. **LegionSigninStatus.vue** - 俱乐部签到 ✅
|
|||
|
|
5. **LegionMatchStatus.vue** - 俱乐部排位 🏆
|
|||
|
|
6. **MonthlyTaskStatus.vue** - 月度任务系统 📊
|
|||
|
|
|
|||
|
|
## 🚀 启动应用
|
|||
|
|
|
|||
|
|
### 方法1：开发模式
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方法2：生产预览
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方法3：使用批处理（Windows）
|
|||
|
|
```bash
|
|||
|
|
start-local.bat
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📍 访问路径
|
|||
|
|
|
|||
|
|
启动后访问：`http://localhost:5173`（或显示的端口）
|
|||
|
|
|
|||
|
|
导航路径：**首页 → 游戏功能**
|
|||
|
|
|
|||
|
|
## ✅ 验证清单
|
|||
|
|
|
|||
|
|
### 1. 基础验证（必须）
|
|||
|
|
- [ ] 能看到三个标签页：每日、俱乐部、活动
|
|||
|
|
- [ ] 身份牌在标签页上方显示
|
|||
|
|
- [ ] 标签页可以正常切换
|
|||
|
|
- [ ] 所有卡片正常显示
|
|||
|
|
|
|||
|
|
### 2. 功能验证（建议）
|
|||
|
|
参考 `测试指南.md` 进行详细测试
|
|||
|
|
|
|||
|
|
### 3. 响应式验证（建议）
|
|||
|
|
- [ ] 桌面端布局正常（>1024px）
|
|||
|
|
- [ ] 平板端布局正常（768-1024px）
|
|||
|
|
- [ ] 移动端布局正常（<768px）
|
|||
|
|
|
|||
|
|
## 📄 相关文档
|
|||
|
|
|
|||
|
|
| 文档名称 | 说明 |
|
|||
|
|
|---------|------|
|
|||
|
|
| `游戏功能实现文档.md` | 详细记录每个功能的实现方式（命令、参数、响应） |
|
|||
|
|
| `游戏功能重构总结.md` | 重构内容、优势、文件清单的完整总结 |
|
|||
|
|
| `测试指南.md` | 详细的测试步骤和检查清单 |
|
|||
|
|
|
|||
|
|
## 🔧 可能的问题
|
|||
|
|
|
|||
|
|
### 问题1：页面空白或报错
|
|||
|
|
**解决方案**：
|
|||
|
|
1. 检查控制台错误信息
|
|||
|
|
2. 确认所有依赖已安装：`npm install`
|
|||
|
|
3. 清除缓存：`npm run build --clean`
|
|||
|
|
|
|||
|
|
### 问题2：标签页无法切换
|
|||
|
|
**解决方案**：
|
|||
|
|
1. 确认 Naive UI 已安装
|
|||
|
|
2. 检查浏览器控制台是否有错误
|
|||
|
|
|
|||
|
|
### 问题3：WebSocket连接失败
|
|||
|
|
**解决方案**：
|
|||
|
|
1. 确认已选择有效的Token
|
|||
|
|
2. 检查Token管理页面的连接状态
|
|||
|
|
3. 等待连接成功后再操作
|
|||
|
|
|
|||
|
|
## 💡 使用提示
|
|||
|
|
|
|||
|
|
### 第一次使用
|
|||
|
|
1. 登录系统
|
|||
|
|
2. 进入 **Token管理** 页面
|
|||
|
|
3. 添加或选择一个Token
|
|||
|
|
4. 等待WebSocket连接成功（显示"已连接"）
|
|||
|
|
5. 进入 **游戏功能** 页面
|
|||
|
|
6. 选择相应的标签页使用功能
|
|||
|
|
|
|||
|
|
### 日常使用
|
|||
|
|
- 每日标签页：日常任务、爬塔、挂机等
|
|||
|
|
- 俱乐部标签页：签到、赛车、查看信息
|
|||
|
|
- 活动标签页：月度任务补齐、咸将升级
|
|||
|
|
|
|||
|
|
## 🎨 UI特性
|
|||
|
|
|
|||
|
|
### 主题色系统
|
|||
|
|
每个功能模块都有独特的主题色，便于快速识别：
|
|||
|
|
- 🔴 挂机时间 - 红色渐变
|
|||
|
|
- 🟢 盐罐机器人 - 绿色渐变
|
|||
|
|
- 🔵 咸鱼大冲关 - 蓝色渐变
|
|||
|
|
- 🟢 俱乐部签到 - 绿松石渐变
|
|||
|
|
- 🟠 俱乐部排位 - 橙色渐变
|
|||
|
|
|
|||
|
|
### 交互效果
|
|||
|
|
- ✨ 卡片悬停动画
|
|||
|
|
- ✨ 按钮点击反馈
|
|||
|
|
- ✨ 状态实时更新
|
|||
|
|
- ✨ 平滑过渡动画
|
|||
|
|
|
|||
|
|
## 🎯 核心功能速查
|
|||
|
|
|
|||
|
|
### 每日标签页
|
|||
|
|
| 功能 | 按钮 | 说明 |
|
|||
|
|
|-----|------|-----|
|
|||
|
|
| 队伍阵容 | 切换/刷新 | 管理战斗阵容 |
|
|||
|
|
| 咸将塔 | 开始爬塔 | 自动爬塔功能 |
|
|||
|
|
| 挂机时间 | 加钟/领取奖励 | 延长挂机时间或领取奖励 |
|
|||
|
|
| 咸鱼大冲关 | 一键答题 | 自动完成答题任务 |
|
|||
|
|
| 盐罐机器人 | 启动/重启 | 管理盐罐机器人 |
|
|||
|
|
|
|||
|
|
### 俱乐部标签页
|
|||
|
|
| 功能 | 按钮 | 说明 |
|
|||
|
|
|-----|------|-----|
|
|||
|
|
| 俱乐部签到 | 立即签到 | 每日签到领奖 |
|
|||
|
|
| 俱乐部排位 | 立即报名 | 参加排位赛 |
|
|||
|
|
| 俱乐部信息 | 刷新 | 查看俱乐部详情 |
|
|||
|
|
|
|||
|
|
### 活动标签页
|
|||
|
|
| 功能 | 按钮 | 说明 |
|
|||
|
|
|-----|------|-----|
|
|||
|
|
| 月度任务 | 刷新进度 | 更新任务进度 |
|
|||
|
|
| 月度任务 | 钓鱼补齐 | 自动补齐钓鱼任务 |
|
|||
|
|
| 月度任务 | 竞技场补齐 | 自动补齐竞技场任务 |
|
|||
|
|
| 咸将升级 | 开始升级 | 批量升级咸将 |
|
|||
|
|
|
|||
|
|
## 📞 技术支持
|
|||
|
|
|
|||
|
|
如遇到问题，请：
|
|||
|
|
1. 查看浏览器控制台错误信息
|
|||
|
|
2. 参考 `测试指南.md` 排查
|
|||
|
|
3. 检查 WebSocket 连接状态
|
|||
|
|
4. 确认Token有效性
|
|||
|
|
|
|||
|
|
## 🎉 完成
|
|||
|
|
|
|||
|
|
重构已完成！所有功能保持不变，仅UI布局更加清晰合理。
|
|||
|
|
|
|||
|
|
**享受更好的使用体验！** ✨
|
|||
|
|
|