405 lines
9.2 KiB
Markdown
405 lines
9.2 KiB
Markdown
# 盐场战绩导出功能 v2.1.1
|
||
|
||
## 📅 更新时间
|
||
2025-10-12 22:30
|
||
|
||
## 🎯 功能概述
|
||
|
||
为俱乐部盐场战绩添加了 **三种导出方式**：
|
||
1. ✅ **Excel 导出** - 生成 CSV 文件（可用 Excel 打开）
|
||
2. ✅ **图片导出** - 生成精美的战绩图片
|
||
3. ✅ **复制到剪贴板** - 快速复制文本格式战绩
|
||
|
||
---
|
||
|
||
## ✨ 功能展示
|
||
|
||
### 导出按钮
|
||
- 位置：俱乐部信息 → 盐场战绩 Tab → 右上角"导出"按钮
|
||
- 类型：下拉菜单
|
||
- 选项：
|
||
- 📄 导出为 Excel
|
||
- 🖼️ 导出为图片
|
||
- 📋 复制到剪贴板
|
||
|
||
---
|
||
|
||
## 📄 Excel 导出
|
||
|
||
### 文件格式
|
||
- **文件名**：`军团战战绩-2025-10-11.csv`
|
||
- **编码**：UTF-8（带 BOM，确保 Excel 正确显示中文）
|
||
- **分隔符**：逗号
|
||
|
||
### 数据内容
|
||
```csv
|
||
俱乐部盐场战绩,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`（新增函数）
|
||
```javascript
|
||
// 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（无需第三方库）
|
||
|
||
**核心代码**：
|
||
```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
|
||
|
||
**核心代码**：
|
||
```javascript
|
||
// 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')
|
||
```
|
||
|
||
**优势**：
|
||
- ✅ 零依赖
|
||
- ✅ 高质量输出
|
||
- ✅ 自定义样式
|
||
- ✅ 跨平台兼容
|
||
|
||
---
|
||
|
||
## 📊 数据处理
|
||
|
||
### 排序逻辑
|
||
```javascript
|
||
const sortedMembers = [...roleDetailsList].sort((a, b) =>
|
||
(b.winCnt || 0) - (a.winCnt || 0)
|
||
)
|
||
```
|
||
**按击杀数降序排列**
|
||
|
||
### KD 计算
|
||
```javascript
|
||
const kd = deaths > 0 ? (kills / deaths).toFixed(2) : kills.toFixed(2)
|
||
```
|
||
- 有死亡：击杀 ÷ 死亡
|
||
- 零死亡：直接显示击杀数
|
||
|
||
### 总计统计
|
||
```javascript
|
||
let totalKills = 0, totalDeaths = 0, totalSieges = 0
|
||
sortedMembers.forEach(member => {
|
||
totalKills += member.winCnt || 0
|
||
totalDeaths += member.loseCnt || 0
|
||
totalSieges += member.buildingCnt || 0
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 UI 设计
|
||
|
||
### 导出按钮样式
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
### 下拉菜单选项
|
||
```javascript
|
||
const exportOptions = [
|
||
{ label: '导出为 Excel', key: 'excel', icon: () => Document },
|
||
{ label: '导出为图片', key: 'image', icon: () => Image },
|
||
{ label: '复制到剪贴板', key: 'clipboard', icon: () => Copy }
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 测试用例
|
||
|
||
### Excel 导出
|
||
1. ✅ 点击"导出"→"导出为 Excel"
|
||
2. ✅ 文件自动下载：`军团战战绩-2025-10-11.csv`
|
||
3. ✅ 用 Excel 打开，中文正常显示
|
||
4. ✅ 数据完整（标题、表头、数据、总计、导出时间）
|
||
|
||
### 图片导出
|
||
1. ✅ 点击"导出"→"导出为图片"
|
||
2. ✅ 图片自动下载：`军团战战绩-2025-10-11.png`
|
||
3. ✅ 打开图片，样式美观
|
||
4. ✅ 前三名有高亮标识
|
||
5. ✅ 颜色区分明显（绿/红/橙）
|
||
|
||
### 剪贴板复制
|
||
1. ✅ 点击"导出"→"复制到剪贴板"
|
||
2. ✅ 提示"战绩已复制到剪贴板"
|
||
3. ✅ 粘贴到记事本，格式正确
|
||
|
||
### 边界情况
|
||
1. ✅ 无数据时禁用导出按钮
|
||
2. ✅ 加载中禁用导出按钮
|
||
3. ✅ 导出失败显示错误提示
|
||
|
||
---
|
||
|
||
## 💡 使用说明
|
||
|
||
### 导出 Excel
|
||
1. 进入 **游戏功能** 页面
|
||
2. 点击 **俱乐部信息** 卡片
|
||
3. 切换到 **盐场战绩** Tab
|
||
4. 点击右上角 **导出** 按钮
|
||
5. 选择 **导出为 Excel**
|
||
6. 文件自动下载到浏览器默认下载目录
|
||
7. 使用 Excel/WPS 打开查看
|
||
|
||
### 导出图片
|
||
1. 同上1-4步
|
||
2. 选择 **导出为图片**
|
||
3. PNG 图片自动下载
|
||
4. 可直接分享到微信/QQ群
|
||
|
||
### 复制到剪贴板
|
||
1. 同上1-4步
|
||
2. 选择 **复制到剪贴板**
|
||
3. 提示复制成功
|
||
4. Ctrl+V 粘贴到任何地方
|
||
|
||
---
|
||
|
||
## 🔄 与开源代码对比
|
||
|
||
### 开源代码（v2.1.1）
|
||
- ✅ 支持文本导出（剪贴板）
|
||
- ❌ 不支持 Excel 导出
|
||
- ❌ 不支持图片导出
|
||
|
||
### 本地代码（当前版本）
|
||
- ✅ 支持文本导出（剪贴板）
|
||
- ✅ **新增** Excel 导出
|
||
- ✅ **新增** 图片导出
|
||
- ✅ 三种导出方式集成到下拉菜单
|
||
|
||
---
|
||
|
||
## 📝 后续优化建议
|
||
|
||
### 1. Excel 增强
|
||
- [ ] 添加条件格式（Top 3 高亮）
|
||
- [ ] 添加图表（柱状图/饼图）
|
||
- [ ] 支持 XLSX 格式（需要引入 xlsx 库）
|
||
|
||
### 2. 图片增强
|
||
- [ ] 支持自定义主题颜色
|
||
- [ ] 添加俱乐部 Logo
|
||
- [ ] 支持长图模式（20+ 成员）
|
||
- [ ] 添加水印
|
||
|
||
### 3. 其他导出方式
|
||
- [ ] 导出为 PDF
|
||
- [ ] 导出为 JSON
|
||
- [ ] 直接分享到微信/QQ
|
||
|
||
---
|
||
|
||
## 📦 文件清单
|
||
|
||
### 已修改文件（2个）
|
||
1. **`src/utils/clubBattleUtils.js`**
|
||
- 新增 `exportToExcel` 函数
|
||
- 新增 `exportToImage` 函数
|
||
|
||
2. **`src/components/ClubBattleRecords.vue`**
|
||
- 导出按钮改为下拉菜单
|
||
- 新增 `exportOptions` 配置
|
||
- 新增 `handleExportSelect` 处理函数
|
||
- 引入新图标（Download, Image, Document）
|
||
|
||
---
|
||
|
||
**更新时间**：2025-10-12 22:30
|
||
**开发人员**：Claude Sonnet 4.5
|
||
**状态**：✅ 完成并可测试
|
||
|
||
🎊 **现在可以刷新页面，测试三种导出功能了！** 🚀
|
||
|