admin/xyzw_web_helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.0

Browse Source
This commit is contained in:
kirin
2025-10-17 20:56:50 +08:00
commit 90094ccd5a
342 changed files with 144988 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
MD说明文件夹/盐场战绩导出功能v2.1.1.md Normal file
View File

@@ -0,0 +1,404 @@
# 盐场战绩导出功能 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
**状态**：✅ 完成并可测试
🎊 **现在可以刷新页面，测试三种导出功能了！** 🚀