TCG Pocket Collection Tracker：交易卡片快速复制功能设计与实现

TCG Pocket Collection Tracker：交易卡片快速复制功能设计与实现

tcg-pocket-collection-tracker Simple application to track your Pokemon Pocket collection 项目地址: https://gitcode.com/gh_mirrors/tc/tcg-pocket-collection-tracker

功能背景

在TCG Pocket Collection Tracker项目中，用户经常需要在交易页面与其他玩家交换卡片。传统方式需要手动记录或复制卡片信息，过程繁琐且容易出错。本文介绍如何实现一个高效的"一键复制"功能，帮助用户快速获取交易卡片清单。

功能需求分析

该功能需要满足以下核心需求：

1. 双列表复制：同时复制"寻找中"和"可交易"两个列表的卡片信息
2. 智能筛选：根据稀有度自动匹配，只显示与"寻找中"列表相同稀有度的"可交易"卡片
3. 标准化格式：每张卡片信息以固定格式呈现：[卡片编号] - [卡片名称] - [稀有度图标]

技术实现方案

数据结构设计

首先需要设计合理的数据结构来存储卡片信息：

interface Card {
  id: string;       // 卡片唯一标识符
  number: string;   // 卡片编号（如A1-82）
  name: string;     // 卡片名称
  rarity: number;   // 稀有度等级（1-4星）
  type: 'wanted' | 'forTrade'; // 卡片类型
}

核心算法实现

实现智能筛选和格式化的核心函数：

function generateTradeText(wantedCards, forTradeCards) {
  // 获取所有"寻找中"卡片的稀有度集合
  const wantedRarities = new Set(wantedCards.map(card => card.rarity));
  
  // 筛选匹配稀有度的"可交易"卡片
  const matchedForTrade = forTradeCards.filter(card => 
    wantedRarities.has(card.rarity)
  );
  
  // 生成格式化文本
  const wantedText = "Looking for:\n" + 
    wantedCards.map(formatCard).join("\n");
  
  const forTradeText = "For trade:\n" + 
    matchedForTrade.map(formatCard).join("\n");
  
  return `${wantedText}\n\n${forTradeText}`;
}

function formatCard(card) {
  const raritySymbols = '◊'.repeat(card.rarity);
  return `${card.number} - ${card.name} ${raritySymbols}`;
}

剪贴板集成

使用现代浏览器的Clipboard API实现一键复制：

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
    // 降级方案：使用document.execCommand
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
}

前端组件设计

在交易页面添加复制按钮及相关UI元素：

<button id="copyTradeBtn" class="btn btn-primary">
  <i class="icon-copy"></i> 复制交易清单
</button>
<div id="copyStatus" class="status-message"></div>

添加事件处理：

document.getElementById('copyTradeBtn').addEventListener('click', async () => {
  const wantedCards = getWantedCards(); // 获取"寻找中"卡片
  const forTradeCards = getForTradeCards(); // 获取"可交易"卡片
  const tradeText = generateTradeText(wantedCards, forTradeCards);
  
  await copyToClipboard(tradeText);
  
  // 显示成功反馈
  const statusEl = document.getElementById('copyStatus');
  statusEl.textContent = '已复制到剪贴板！';
  statusEl.classList.add('show');
  setTimeout(() => statusEl.classList.remove('show'), 2000);
});

用户体验优化

1. 视觉反馈：复制成功后显示短暂的通知提示
2. 错误处理：当剪贴板访问被拒绝时，提供备选方案
3. 性能考虑：对于大型卡片集合，使用虚拟滚动等技术优化渲染性能
4. 国际化支持：根据用户语言设置显示不同语言的标题文本

测试用例设计

为确保功能可靠性，应设计以下测试场景：

1. 基础功能测试：验证能否正确复制两个列表的卡片
2. 稀有度过滤测试：验证是否只显示匹配稀有度的"可交易"卡片
3. 格式验证：检查生成的文本格式是否符合规范
4. 边界测试：空列表、大量卡片等特殊情况处理
5. 浏览器兼容性测试：不同浏览器下的剪贴板API行为

总结

通过实现这个一键复制交易卡片功能，TCG Pocket Collection Tracker极大地提升了用户的交易效率。该方案不仅解决了手动复制的痛点，还通过智能筛选确保了交易信息的精准匹配。技术上结合了现代浏览器API和优雅降级方案，确保了功能的广泛兼容性。未来可考虑扩展支持更多自定义格式选项，如包含卡片图像链接等，进一步增强用户体验。

tcg-pocket-collection-tracker Simple application to track your Pokemon Pocket collection 项目地址: https://gitcode.com/gh_mirrors/tc/tcg-pocket-collection-tracker