# 盐场战绩导出功能 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 导出 ``` ### 下拉菜单选项 ```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 **状态**：✅ 完成并可测试 🎊 **现在可以刷新页面，测试三种导出功能了！** 🚀