admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

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

9.2 KiB

Raw Permalink Blame History

盐场战绩导出功能 v2.1.1

📅 更新时间

2025-10-12 22:30

🎯 功能概述

为俱乐部盐场战绩添加了 三种导出方式：

✅ Excel 导出 - 生成 CSV 文件（可用 Excel 打开）
✅ 图片导出 - 生成精美的战绩图片
✅ 复制到剪贴板 - 快速复制文本格式战绩

✨ 功能展示

导出按钮

位置：俱乐部信息 → 盐场战绩 Tab → 右上角"导出"按钮
类型：下拉菜单
选项：
- 📄 导出为 Excel
- 🖼️ 导出为图片
- 📋 复制到剪贴板

📄 Excel 导出

文件格式

文件名：军团战战绩-2025-10-11.csv
编码：UTF-8（带 BOM，确保 Excel 正确显示中文）
分隔符：逗号

数据内容

俱乐部盐场战绩,2025/10/11
参战人数,30

排名,昵称,击杀,死亡,攻城,KD
1,苦名无名,18,6,4,3.00
2,苦名阳,12,6,0,2.00
3,苦名皿,8,5,3,1.60
...

总计,,157,167,76,0.94

导出时间,2025/10/12 22:30:15

使用场景

数据分析
长期存档
导入其他工具处理

🖼️ 图片导出

文件格式

文件名：军团战战绩-2025-10-11.png
尺寸：800px 宽，高度自适应
格式：PNG（高质量）

图片样式

1. 标题区（180px）

战场周报（32px 加粗）
日期（20px，灰色）
热场荣誉（24px 加粗，金色）

2. 表头（45px）

深灰色背景
列：# | 昵称 | 击杀 | 死亡 | 攻城 | KD

3. 数据行（每行 45px）

交替行背景（增强可读性）
前三名左侧高亮条：
- 🥇 第一名：金色 #f1c40f
- 🥈 第二名：银色 #95a5a6
- 🥉 第三名：铜色 #cd7f32
数据颜色：
- 击杀：绿色 #2ecc71
- 死亡：红色 #e74c3c
- 攻城：橙色 #f39c12
- KD：白色

4. 总计行（45px）

蓝色半透明背景
显示总人数和各项总计

5. 页脚（100px）

导出时间（14px，灰色）

使用场景

分享到群聊
社交媒体发布
制作周报/月报
快速预览

📋 复制到剪贴板

文本格式

俱乐部盐场战绩 - 2025/10/11
参战人数: 30
────────────────────────────────────────

1. 苦名无名  击杀18  死亡6  攻城4
2. 苦名阳  击杀12  死亡6  攻城0
3. 苦名皿  击杀8  死亡5  攻城3
...

────────────────────────────────────────
总计  击杀157  死亡167  攻城76

导出时间: 2025/10/12 22:30:15

使用场景

快速复制到聊天窗口
粘贴到文档/记事本
临时分享

📁 新增文件

1. `src/utils/clubBattleUtils.js`（新增函数）

// Excel 导出
export function exportToExcel(roleDetailsList, queryDate)

// 图片导出
export async function exportToImage(roleDetailsList, queryDate, clubName)

2. `src/components/ClubBattleRecords.vue`（修改）

导出按钮改为下拉菜单
添加 3 个导出选项
添加 handleExportSelect 函数
引入新图标（Download, Image, Document）

🔧 技术实现

Excel 导出

技术栈：纯 JavaScript（无需第三方库）

核心代码：

// 1. 构建 CSV 数据
let csv = '\uFEFF'  // UTF-8 BOM
csv += `俱乐部盐场战绩,${queryDate}\n`
csv += '排名,昵称,击杀,死亡,攻城,KD\n'

// 2. 添加数据行
sortedMembers.forEach((member, index) => {
  csv += `${index + 1},${name},${kills},${deaths},${sieges},${kd}\n`
})

// 3. 创建 Blob 并下载
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = `军团战战绩-${fileDate}.csv`
link.click()

优势：

✅ 零依赖
✅ 兼容性好
✅ 文件小
✅ Excel 可直接打开

图片导出

技术栈：Canvas API

核心代码：

// 1. 创建 Canvas
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 800
canvas.height = headerHeight + (members.length * rowHeight) + footerHeight

// 2. 绘制背景渐变
const gradient = ctx.createLinearGradient(0, 0, 0, height)
gradient.addColorStop(0, '#2c3e50')
gradient.addColorStop(1, '#34495e')
ctx.fillStyle = gradient
ctx.fillRect(0, 0, width, height)

// 3. 绘制文字
ctx.fillStyle = '#ecf0f1'
ctx.font = 'bold 32px "Microsoft YaHei", sans-serif'
ctx.textAlign = 'center'
ctx.fillText('战场周报', width / 2, 50)

// 4. 绘制表格数据
sortedMembers.forEach((member, index) => {
  // 交替行背景
  if (index % 2 === 0) {
    ctx.fillStyle = 'rgba(44, 62, 80, 0.3)'
    ctx.fillRect(0, y, width, rowHeight)
  }
  
  // 前三名高亮条
  if (index < 3) {
    const colors = ['#f1c40f', '#95a5a6', '#cd7f32']
    ctx.fillStyle = colors[index]
    ctx.fillRect(0, y, 8, rowHeight)
  }
  
  // 绘制文字（击杀绿、死亡红、攻城橙）
  ctx.fillStyle = '#2ecc71'
  ctx.fillText(kills, x, y)
})

// 5. 转换为 PNG 并下载
canvas.toBlob((blob) => {
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `军团战战绩-${fileDate}.png`
  link.click()
}, 'image/png')

优势：

✅ 零依赖
✅ 高质量输出
✅ 自定义样式
✅ 跨平台兼容

📊 数据处理

排序逻辑

const sortedMembers = [...roleDetailsList].sort((a, b) => 
  (b.winCnt || 0) - (a.winCnt || 0)
)

按击杀数降序排列

KD 计算

const kd = deaths > 0 ? (kills / deaths).toFixed(2) : kills.toFixed(2)

有死亡：击杀 ÷ 死亡
零死亡：直接显示击杀数

总计统计

let totalKills = 0, totalDeaths = 0, totalSieges = 0
sortedMembers.forEach(member => {
  totalKills += member.winCnt || 0
  totalDeaths += member.loseCnt || 0
  totalSieges += member.buildingCnt || 0
})

🎨 UI 设计

导出按钮样式

<n-dropdown trigger="click" :options="exportOptions" @select="handleExportSelect">
  <n-button type="primary" size="small">
    <template #icon>
      <n-icon><Download /></n-icon>
    </template>
    导出
    <template #icon-right>
      <n-icon><ChevronDown /></n-icon>
    </template>
  </n-button>
</n-dropdown>

下拉菜单选项

const exportOptions = [
  { label: '导出为 Excel', key: 'excel', icon: () => Document },
  { label: '导出为图片', key: 'image', icon: () => Image },
  { label: '复制到剪贴板', key: 'clipboard', icon: () => Copy }
]

🧪 测试用例

Excel 导出

✅ 点击"导出"→"导出为 Excel"
✅ 文件自动下载：军团战战绩-2025-10-11.csv
✅ 用 Excel 打开，中文正常显示
✅ 数据完整（标题、表头、数据、总计、导出时间）

图片导出

✅ 点击"导出"→"导出为图片"
✅ 图片自动下载：军团战战绩-2025-10-11.png
✅ 打开图片，样式美观
✅ 前三名有高亮标识
✅ 颜色区分明显（绿/红/橙）

剪贴板复制

✅ 点击"导出"→"复制到剪贴板"
✅ 提示"战绩已复制到剪贴板"
✅ 粘贴到记事本，格式正确

边界情况

✅ 无数据时禁用导出按钮
✅ 加载中禁用导出按钮
✅ 导出失败显示错误提示

💡 使用说明

导出 Excel

进入 游戏功能 页面
点击 俱乐部信息 卡片
切换到 盐场战绩 Tab
点击右上角导出按钮
选择 导出为 Excel
文件自动下载到浏览器默认下载目录
使用 Excel/WPS 打开查看

导出图片

同上1-4步
选择 导出为图片
PNG 图片自动下载
可直接分享到微信/QQ群

复制到剪贴板

同上1-4步
选择 复制到剪贴板
提示复制成功
Ctrl+V 粘贴到任何地方

🔄 与开源代码对比

开源代码（v2.1.1）

✅ 支持文本导出（剪贴板）
❌ 不支持 Excel 导出
❌ 不支持图片导出

本地代码（当前版本）

✅ 支持文本导出（剪贴板）
✅ 新增 Excel 导出
✅ 新增图片导出
✅ 三种导出方式集成到下拉菜单

📝 后续优化建议

1. Excel 增强

添加条件格式（Top 3 高亮）
添加图表（柱状图/饼图）
支持 XLSX 格式（需要引入 xlsx 库）

2. 图片增强

支持自定义主题颜色
添加俱乐部 Logo
支持长图模式（20+ 成员）
添加水印

3. 其他导出方式

导出为 PDF
导出为 JSON
直接分享到微信/QQ

📦 文件清单

已修改文件（2个）

src/utils/clubBattleUtils.js
- 新增 exportToExcel 函数
- 新增 exportToImage 函数
src/components/ClubBattleRecords.vue
- 导出按钮改为下拉菜单
- 新增 exportOptions 配置
- 新增 handleExportSelect 处理函数
- 引入新图标（Download, Image, Document）

更新时间：2025-10-12 22:30
开发人员：Claude Sonnet 4.5
状态：✅ 完成并可测试

🎊 现在可以刷新页面，测试三种导出功能了！ 🚀

9.2 KiB Raw Permalink Blame History Unescape Escape

盐场战绩导出功能 v2.1.1

📅 更新时间

🎯 功能概述

✨ 功能展示

导出按钮

📄 Excel 导出

文件格式

数据内容

使用场景

🖼️ 图片导出

文件格式

图片样式

1. 标题区（180px）

2. 表头（45px）

3. 数据行（每行 45px）

4. 总计行（45px）

5. 页脚（100px）

使用场景

📋 复制到剪贴板

文本格式

使用场景

📁 新增文件

1. src/utils/clubBattleUtils.js（新增函数）

2. src/components/ClubBattleRecords.vue（修改）

🔧 技术实现

Excel 导出

图片导出

📊 数据处理

排序逻辑

KD 计算

总计统计

🎨 UI 设计

导出按钮样式

下拉菜单选项

🧪 测试用例

Excel 导出

图片导出

剪贴板复制

边界情况

💡 使用说明

导出 Excel

导出图片

复制到剪贴板

🔄 与开源代码对比

开源代码（v2.1.1）

本地代码（当前版本）

📝 后续优化建议

1. Excel 增强

2. 图片增强

3. 其他导出方式

📦 文件清单

已修改文件（2个）

9.2 KiB

Raw Permalink Blame History

1. `src/utils/clubBattleUtils.js`（新增函数）

2. `src/components/ClubBattleRecords.vue`（修改）