# 盐场战绩导出功能 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  
**状态**：✅ 完成并可测试  

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

