342 lines
8.8 KiB
Markdown
342 lines
8.8 KiB
Markdown
# 游戏功能模块重构总结
|
||
|
||
## 重构完成时间
|
||
2025年10月12日
|
||
|
||
## 重构目标
|
||
将游戏功能模块从单一页面重构为三个标签页（每日、俱乐部、活动），以提升用户体验和代码可维护性。
|
||
|
||
## 重构内容
|
||
|
||
### 一、新增独立组件（共6个）
|
||
|
||
#### 1. HangUpStatus.vue - 挂机时间管理
|
||
**位置**: `src/components/HangUpStatus.vue`
|
||
|
||
**功能**:
|
||
- 显示挂机剩余时间和已挂机时间
|
||
- 加钟功能（发送4次分享回调）
|
||
- 领取挂机奖励
|
||
|
||
**命令**:
|
||
- 加钟: `system_mysharecallback` (参数: `{ isSkipShareCard: true, type: 2 }`)
|
||
- 领取: `system_claimhangupreward`
|
||
|
||
**UI特点**:
|
||
- 实时倒计时显示
|
||
- 红色渐变主题色 (#d03050)
|
||
- 双按钮布局（加钟 + 领取奖励）
|
||
|
||
---
|
||
|
||
#### 2. BottleHelperStatus.vue - 盐罐机器人管理
|
||
**位置**: `src/components/BottleHelperStatus.vue`
|
||
|
||
**功能**:
|
||
- 显示盐罐机器人运行状态
|
||
- 显示剩余时间倒计时
|
||
- 启动/重启盐罐机器人
|
||
|
||
**命令**:
|
||
- 停止: `bottlehelper_stop`
|
||
- 启动: `bottlehelper_start`
|
||
|
||
**UI特点**:
|
||
- 实时倒计时显示
|
||
- 绿色渐变主题色 (#18a058)
|
||
- 自动重启功能（先停止后启动）
|
||
|
||
---
|
||
|
||
#### 3. StudyStatus.vue - 咸鱼大冲关
|
||
**位置**: `src/components/StudyStatus.vue`
|
||
|
||
**功能**:
|
||
- 每周答题任务
|
||
- 一键自动答题
|
||
- 显示答题进度和完成状态
|
||
|
||
**命令**:
|
||
- 开始答题: `study_startgame`
|
||
|
||
**UI特点**:
|
||
- 蓝色渐变主题色 (#3b82f6)
|
||
- 完成状态显示（✅ 已完成）
|
||
- 答题进度实时显示
|
||
|
||
---
|
||
|
||
#### 4. LegionSigninStatus.vue - 俱乐部签到
|
||
**位置**: `src/components/LegionSigninStatus.vue`
|
||
|
||
**功能**:
|
||
- 俱乐部每日签到
|
||
- 显示签到状态
|
||
- 显示当前俱乐部名称
|
||
|
||
**命令**:
|
||
- 签到: `legion_signin`
|
||
|
||
**UI特点**:
|
||
- 绿色渐变主题色 (#10b981)
|
||
- 签到状态标识
|
||
- 已签到状态下按钮禁用
|
||
|
||
---
|
||
|
||
#### 5. LegionMatchStatus.vue - 俱乐部排位
|
||
**位置**: `src/components/LegionMatchStatus.vue`
|
||
|
||
**功能**:
|
||
- 俱乐部排位报名
|
||
- 显示报名状态
|
||
- 赛事说明（周三周四周五）
|
||
|
||
**命令**:
|
||
- 报名: `legionmatch_rolesignup`
|
||
|
||
**UI特点**:
|
||
- 橙色渐变主题色 (#f59e0b)
|
||
- 报名状态标识
|
||
- 已报名状态下按钮禁用
|
||
|
||
---
|
||
|
||
#### 6. MonthlyTaskStatus.vue - 月度任务系统
|
||
**位置**: `src/components/MonthlyTaskStatus.vue`
|
||
|
||
**功能**:
|
||
- 月度钓鱼任务（目标320次）
|
||
- 月度竞技场任务（目标240次）
|
||
- 自动补齐功能（按当日进度）
|
||
- 一键完成功能（补齐到满额）
|
||
|
||
**命令**:
|
||
- 获取进度: `activity_get`
|
||
- 钓鱼: `artifact_lottery` (参数: `{ lotteryNumber, newFree: true, type: 1 }`)
|
||
- 竞技场开始: `arena_startarea`
|
||
- 获取目标: `arena_getareatarget` (参数: `{ refresh }`)
|
||
- 战斗: `fight_startareaarena` (参数: `{ targetId }`)
|
||
|
||
**智能补齐逻辑**:
|
||
1. 钓鱼：优先消耗免费3次，再批量付费（每次最多10）
|
||
2. 竞技场：贪心算法，假设每胜+2，动态校准
|
||
|
||
**UI特点**:
|
||
- 进度百分比显示
|
||
- 剩余天数倒计时
|
||
- 下拉菜单（补齐 / 一键完成）
|
||
- 详细补齐规则说明
|
||
|
||
---
|
||
|
||
### 二、重构后的组件结构
|
||
|
||
```
|
||
GameStatus.vue (新版 - 使用 n-tabs)
|
||
├── IdentityCard (常驻顶部)
|
||
└── n-tabs
|
||
├── Tab 1: 每日
|
||
│ ├── TeamStatus (队伍阵容)
|
||
│ ├── DailyTaskStatus (每日任务)
|
||
│ ├── TowerStatus (咸将塔)
|
||
│ ├── HangUpStatus (挂机时间) ★新增
|
||
│ ├── StudyStatus (咸鱼大冲关) ★新增
|
||
│ └── BottleHelperStatus (盐罐机器人) ★新增
|
||
├── Tab 2: 俱乐部
|
||
│ ├── LegionSigninStatus (俱乐部签到) ★新增
|
||
│ ├── CarManagement (俱乐部赛车)
|
||
│ ├── ClubInfo (俱乐部信息)
|
||
│ └── LegionMatchStatus (俱乐部排位) ★新增
|
||
└── Tab 3: 活动
|
||
├── MonthlyTaskStatus (月度任务) ★新增
|
||
└── UpgradeModule (咸将升级模块)
|
||
```
|
||
|
||
---
|
||
|
||
### 三、保留的现有组件
|
||
|
||
以下组件保持不变，只是引用方式改变：
|
||
|
||
1. **TeamStatus.vue** - 队伍阵容管理
|
||
2. **DailyTaskStatus.vue** - 每日任务状态
|
||
3. **TowerStatus.vue** - 咸将塔功能
|
||
4. **CarManagement.vue** - 俱乐部赛车
|
||
5. **ClubInfo.vue** - 俱乐部信息
|
||
6. **UpgradeModule.vue** - 咸将升级模块
|
||
7. **IdentityCard.vue** - 玩家身份牌（常驻顶部）
|
||
|
||
---
|
||
|
||
### 四、UI/UX 改进
|
||
|
||
#### 1. 标签页设计
|
||
- 使用 Naive UI 的 `n-tabs` 组件
|
||
- `type="card"` 卡片式标签
|
||
- `size="large"` 大尺寸更易点击
|
||
- `animated` 平滑切换动画
|
||
|
||
#### 2. 主题色系统
|
||
每个功能模块都有独特的渐变主题色：
|
||
|
||
| 功能模块 | 主题色 | 色值 |
|
||
|---------|--------|------|
|
||
| 挂机时间 | 红色渐变 | #d03050 → #de576d |
|
||
| 盐罐机器人 | 绿色渐变 | #18a058 → #36ad6a |
|
||
| 咸鱼大冲关 | 蓝色渐变 | #3b82f6 → #60a5fa |
|
||
| 俱乐部签到 | 绿松石渐变 | #10b981 → #34d399 |
|
||
| 俱乐部排位 | 橙色渐变 | #f59e0b → #fbbf24 |
|
||
| 咸将塔 | 琥珀渐变 | #f59e0b → #fbbf24 |
|
||
| 队伍阵容 | 靛蓝渐变 | #6366f1 → #818cf8 |
|
||
|
||
#### 3. 响应式布局
|
||
- 桌面：自适应网格布局（minmax(350px, 1fr)）
|
||
- 平板：自适应网格布局（minmax(300px, 1fr)）
|
||
- 移动：单列布局
|
||
|
||
#### 4. 交互优化
|
||
- 卡片悬停效果（阴影 + 位移）
|
||
- 按钮渐变光泽效果
|
||
- 禁用状态明确标识
|
||
- Loading 状态旋转动画
|
||
- 状态点闪烁动画
|
||
|
||
---
|
||
|
||
### 五、数据流保持不变
|
||
|
||
所有组件继续使用：
|
||
- `tokenStore` - Token 和 WebSocket 管理
|
||
- `batchTaskStore` - 批量任务状态（月度任务日志）
|
||
- `gameData` - 游戏数据缓存
|
||
|
||
命令发送方式保持一致：
|
||
```javascript
|
||
tokenStore.sendMessage(tokenId, command, params)
|
||
tokenStore.sendMessageWithPromise(tokenId, command, params, timeout)
|
||
```
|
||
|
||
---
|
||
|
||
### 六、完整的文件清单
|
||
|
||
#### 新增文件（7个）
|
||
1. `src/components/HangUpStatus.vue`
|
||
2. `src/components/BottleHelperStatus.vue`
|
||
3. `src/components/StudyStatus.vue`
|
||
4. `src/components/LegionSigninStatus.vue`
|
||
5. `src/components/LegionMatchStatus.vue`
|
||
6. `src/components/MonthlyTaskStatus.vue`
|
||
7. `游戏功能实现文档.md` （技术文档）
|
||
|
||
#### 修改文件（1个）
|
||
1. `src/components/GameStatus.vue` （完全重写）
|
||
|
||
#### 保留文件（无修改）
|
||
- `src/components/TeamStatus.vue`
|
||
- `src/components/DailyTaskStatus.vue`
|
||
- `src/components/TowerStatus.vue`
|
||
- `src/components/CarManagement.vue`
|
||
- `src/components/ClubInfo.vue`
|
||
- `src/components/UpgradeModule.vue`
|
||
- `src/components/IdentityCard.vue`
|
||
|
||
---
|
||
|
||
### 七、测试检查清单
|
||
|
||
#### 功能测试
|
||
- [ ] 每日标签页所有功能正常
|
||
- [ ] 队伍阵容切换
|
||
- [ ] 每日任务显示
|
||
- [ ] 咸将塔爬塔
|
||
- [ ] 挂机加钟和领取
|
||
- [ ] 咸鱼大冲关答题
|
||
- [ ] 盐罐机器人启动
|
||
|
||
- [ ] 俱乐部标签页所有功能正常
|
||
- [ ] 俱乐部签到
|
||
- [ ] 俱乐部赛车
|
||
- [ ] 俱乐部信息显示
|
||
- [ ] 俱乐部排位报名
|
||
|
||
- [ ] 活动标签页所有功能正常
|
||
- [ ] 月度任务进度显示
|
||
- [ ] 月度任务补齐
|
||
- [ ] 咸将升级模块
|
||
|
||
#### UI/UX 测试
|
||
- [ ] 标签页切换流畅
|
||
- [ ] 身份牌在所有标签页上方显示
|
||
- [ ] 响应式布局正常
|
||
- [ ] 桌面端（>1024px）
|
||
- [ ] 平板端（768px-1024px）
|
||
- [ ] 移动端（<768px）
|
||
- [ ] 深色主题适配
|
||
- [ ] 所有按钮交互正常
|
||
- [ ] Loading 状态显示正确
|
||
|
||
#### WebSocket 通信测试
|
||
- [ ] 所有命令正常发送
|
||
- [ ] 响应正常接收和处理
|
||
- [ ] 数据状态正确更新
|
||
|
||
---
|
||
|
||
### 八、优势总结
|
||
|
||
#### 1. 代码可维护性提升
|
||
- ✅ 每个功能模块独立封装
|
||
- ✅ 单一职责原则
|
||
- ✅ 便于单独测试和调试
|
||
- ✅ 降低代码耦合度
|
||
|
||
#### 2. 用户体验提升
|
||
- ✅ 功能分类清晰（每日/俱乐部/活动）
|
||
- ✅ 减少页面滚动
|
||
- ✅ 快速切换功能模块
|
||
- ✅ 视觉层次分明
|
||
|
||
#### 3. 扩展性提升
|
||
- ✅ 新增功能模块容易
|
||
- ✅ 只需创建新组件并添加到相应标签页
|
||
- ✅ 不影响现有功能
|
||
|
||
#### 4. 性能优化
|
||
- ✅ 标签页懒加载支持
|
||
- ✅ 组件按需渲染
|
||
- ✅ 减少首屏渲染内容
|
||
|
||
---
|
||
|
||
### 九、后续优化建议
|
||
|
||
1. **标签页记忆功能**
|
||
- 使用 localStorage 记住用户最后选择的标签页
|
||
- 下次打开自动跳转到该标签页
|
||
|
||
2. **功能搜索**
|
||
- 添加搜索框快速定位功能模块
|
||
- 支持中文搜索
|
||
|
||
3. **快捷键支持**
|
||
- `Ctrl+1/2/3` 快速切换标签页
|
||
- `Ctrl+R` 刷新当前标签页数据
|
||
|
||
4. **批量操作**
|
||
- 每日任务一键执行所有
|
||
- 俱乐部任务一键完成
|
||
|
||
5. **数据统计**
|
||
- 每日完成度统计
|
||
- 每周活跃度报告
|
||
- 月度任务完成趋势图
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
本次重构成功将游戏功能从单一页面分离为三个清晰的功能分类（每日、俱乐部、活动），创建了6个独立的功能组件，保持了原有功能和UI风格不变，大幅提升了代码可维护性和用户体验。所有功能模块的实现细节都有完整记录，便于后续维护和扩展。
|
||
|