admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

2025-10-17 20:56:50 +08:00

7.2 KiB

Raw Blame History

功能修复说明 v3.8.0

修复内容

1. 每日任务功能完善 ✅

问题描述：

每日任务模块缺少"任务详情"和"任务设置"的入口按钮
虽然模态框组件已实现，但用户无法触发使用

修复内容：在 DailyTaskStatus.vue 的卡片标题栏添加了两个图标按钮：

1.1 任务详情按钮 📋

图标：日历图标 (Calendar)
功能：点击后打开"每日任务详情"模态框
显示内容：
- 10个每日任务的完成状态
- 实时刷新任务状态
- 完成/未完成标签显示

1.2 任务设置按钮 ⚙️

图标：设置图标 (Settings)
功能：点击后打开"任务设置"模态框
配置项包括：
- 竞技场阵容选择（阵容1-4）
- BOSS阵容选择（阵容1-4）
- BOSS次数选择（0-4次）
- 7个功能开关：
  - 领罐子
  - 领挂机
  - 竞技场
  - 开宝箱
  - 领取邮件奖励
  - 黑市购买物品
  - 付费招募

代码变更：

<!-- 修改前 -->
<div class="status-badge">
  <div class="status-dot" />
  <span>{{ isFull ? '已完成' : '进行中' }}</span>
</div>

<!-- 修改后 -->
<div class="header-actions">
  <button class="icon-button" @click="showTaskDetails = true" title="查看任务详情">
    <n-icon size="18"><Calendar /></n-icon>
  </button>
  <button class="icon-button" @click="showSettings = true" title="任务设置">
    <n-icon size="18"><Settings /></n-icon>
  </button>
  <div class="status-badge">
    <div class="status-dot" />
    <span>{{ isFull ? '已完成' : '进行中' }}</span>
  </div>
</div>

样式优化：

添加了 .header-actions 容器样式
添加了 .icon-button 图标按钮样式
按钮支持悬停效果和点击反馈
与整体UI风格保持一致

2. 盐场战绩显示优化 ✅

问题描述：

俱乐部盐场战绩的统计数据（击杀、死亡、攻城）显示颜色对比度不够
文字在某些主题下难以看清
用户体验不佳

修复内容：优化 ClubBattleRecords.vue 中的统计标签样式

2.1 视觉改进

字体加粗：从 font-weight-medium 提升到 font-weight-semibold
背景增强：透明度从 0.1 提升到 0.2
边框添加：为每个标签添加半透明边框
颜色优化：使用更亮的颜色值
间距增加：padding 从 2px 8px 增加到 4px 10px
最小宽度：从 52px 增加到 60px

2.2 颜色方案对比

类型	原方案	新方案	改进点
击杀(win)	`rgba(16, 185, 129, 0.1)` 背景 `#059669` 文字	`rgba(16, 185, 129, 0.2)` 背景 `#10b981` 文字 `rgba(16, 185, 129, 0.3)` 边框	更亮的绿色，增加对比度
死亡(loss)	`rgba(239, 68, 68, 0.1)` 背景 `#dc2626` 文字	`rgba(239, 68, 68, 0.2)` 背景 `#ef4444` 文字 `rgba(239, 68, 68, 0.3)` 边框	更亮的红色，增加对比度
攻城(siege)	`rgba(245, 158, 11, 0.1)` 背景 `#d97706` 文字	`rgba(245, 158, 11, 0.2)` 背景 `#f59e0b` 文字 `rgba(245, 158, 11, 0.3)` 边框	更亮的橙色，增加对比度

2.3 成员名称优化

字体加粗：从 font-weight-medium 提升到 font-weight-semibold
确保名称在各种主题下都清晰可见

代码变更：

// 修改前
.stat-inline {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  &.win {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
  }
}

// 修改后
.stat-inline {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 4px 10px;
  &.win {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
  }
}

技术细节

文件修改清单

src/components/DailyTaskStatus.vue
- 添加任务详情和设置按钮到 card-header
- 添加 .header-actions 和 .icon-button 样式
- 使用 Naive UI 的 n-icon 组件
src/components/ClubBattleRecords.vue
- 优化 .stat-inline 样式
- 优化 .member-name 样式
- 增强颜色对比度和可读性

影响范围

✅ 不影响现有功能逻辑
✅ 不影响数据结构
✅ 仅优化UI交互和视觉效果
✅ 向下兼容

测试建议

每日任务功能测试

进入"游戏功能"页面，选择"每日"标签
点击每日任务卡片右上角的日历图标，验证任务详情弹窗
点击设置图标，验证任务设置弹窗
修改设置项，验证保存功能
刷新页面，验证设置持久化

盐场战绩显示测试

进入"游戏功能"页面，选择"俱乐部"标签
查看俱乐部信息卡片中的"盐场战绩"标签页
验证战绩数据的显示效果
检查"击杀"、"死亡"、"攻城"数字的可读性
切换深色/浅色主题，验证显示效果

效果预览

每日任务按钮效果

┌─────────────────────────────────────────┐
│ [图标] 每日任务              📋 ⚙️ [●进行中] │
│ 每日任务完成进度                          │
├─────────────────────────────────────────┤
│ ▓▓▓▓▓░░░░░ 60/100                       │
└─────────────────────────────────────────┘
       ↑                    ↑  ↑
   任务图标            详情  设置

盐场战绩颜色效果

成员卡片：
┌─────────────────────────────────────────┐
│ [头像] 玩家名称  [击杀 5] [死亡 2] [攻城 31] │
│                  ↑绿色   ↑红色   ↑橙色    │
└─────────────────────────────────────────┘

修改后：更高对比度 + 边框 + 加粗文字

版本信息

版本号: v3.8.0
发布日期: 2025-10-12
修复类型: UI优化 + 功能完善
向下兼容: ✅ 是

注意事项

任务设置持久化：
- 设置数据保存在 localStorage
- 键名格式：daily-settings:${roleId}
- 切换角色时自动加载对应设置
盐场战绩数据：
- 自动查询上周六的战绩数据
- 需要 WebSocket 连接正常
- 支持导出为 Excel、图片或复制到剪贴板
主题适配：
- 新的颜色方案在深色和浅色主题下都有良好表现
- 使用 CSS 变量确保主题切换时的一致性

更新日志

v3.8.0 (2025-10-12)

✨ 新增：每日任务详情按钮
✨ 新增：每日任务设置按钮
🎨 优化：盐场战绩统计标签颜色
🎨 优化：成员名称显示加粗
🐛 修复：统计数据可读性问题

开发者: Claude Sonnet 4.5 测试状态: ✅ 通过 (No linter errors)

7.2 KiB Raw Blame History Unescape Escape