admin/xyzw_web_helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
xyzw_web_helper/MD说明文件夹/游戏功能重构总结.md
kirin 90094ccd5a 1.0
2025-10-17 20:56:50 +08:00

8.8 KiB
Raw Permalink Blame History

游戏功能模块重构总结

重构完成时间

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 - 游戏数据缓存

命令发送方式保持一致：

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风格不变，大幅提升了代码可维护性和用户体验。所有功能模块的实现细节都有完整记录，便于后续维护和扩展。