Traffic-information_Tracking-link-generator/assets/link-generator.js

(() => {
  const templates = window.LINK_TEMPLATES;
  if (!templates?.length) return;

  const { convertTrackingLink } = window.TrackingLinkConverter;

  const $ = (id) => document.getElementById(id);
  const platformSelect = $('platformSelect');
  const macroBody = $('macroTableBody');
  const output = $('urlOutput');
  let activeResult = null;
  let inputTimer;

  $('templateCount').textContent = `${templates.length} 个平台模板`;
  templates.forEach((template, index) => platformSelect.add(new Option(template.name, index)));

  const activeTemplate = () => templates[Number(platformSelect.value || 0)];

  function renderPlatform() {
    const template = activeTemplate();
    const review = template.status.includes('待');
    $('platformStatus').innerHTML = `<span class="template-status ${review ? 'review' : ''}">${escapeHtml(template.status)}</span>`;
    renderMacros();
    if ($('originalLink').value.trim()) convertFromInput(false);
  }

  function renderMacros() {
    const query = $('macroSearch').value.trim().toLowerCase();
    const rows = activeTemplate().macros.filter(([macro, desc]) => `${macro} ${desc}`.toLowerCase().includes(query));
    macroBody.innerHTML = rows.length
      ? rows.map(([macro, desc]) => `<tr><td><code>${escapeHtml(macro)}</code></td><td>${escapeHtml(desc)}</td></tr>`).join('')
      : '<tr><td colspan="2" class="table-empty">没有匹配的媒体宏</td></tr>';
  }

  function renderChanges(changes) {
    const rows = changes.length ? changes : [{ key:'—', from:'原链接参数无需变化', to:'—' }];
    $('mappingTableBody').innerHTML = rows.map((change) => `<tr>
      <td><code>${escapeHtml(change.key)}</code></td>
      <td><span class="old-param">${escapeHtml(change.from || '(空值)')}</span></td>
      <td>${change.to ? `<code>${escapeHtml(change.to)}</code>` : '<span class="empty-param">留空</span>'}</td>
    </tr>`).join('');
  }

  function showEmpty() {
    activeResult = null;
    $('conversionEmpty').classList.remove('hidden');
    $('conversionResult').classList.add('hidden');
    $('detectedType').textContent = '等待链接';
    $('generatorMessage').textContent = '';
    $('copyStatus').textContent = '';
    $('copyLink').disabled = true;
  }

  function showError(message) {
    activeResult = null;
    $('generatorMessage').textContent = message;
    $('conversionEmpty').classList.remove('hidden');
    $('conversionResult').classList.add('hidden');
    $('detectedType').textContent = '无法识别';
    $('copyLink').disabled = true;
  }

  function convertFromInput(showRequiredMessage = true) {
    const original = $('originalLink').value.trim();
    $('copyStatus').textContent = '';
    if (!original) {
      showEmpty();
      if (showRequiredMessage) $('generatorMessage').textContent = '请先粘贴一条完整的 Tracking Link';
      return;
    }

    try {
      const result = convertTrackingLink(original, activeTemplate());
      activeResult = result;
      const typeLabel = result.type === 'imp' ? 'Impression' : 'Click';
      $('detectedType').innerHTML = `<span class="type-chip">${typeLabel}</span>`;
      $('summaryType').textContent = typeLabel;
      $('replacementCount').textContent = result.changes.length;
      $('preservedCount').textContent = result.preservedCount;
      $('urlLength').textContent = `${result.url.length} chars`;
      output.textContent = result.url;
      renderChanges(result.changes);
      $('generatorMessage').textContent = result.changes.length ? '' : '链接有效，但没有发现需要替换的参数';
      $('conversionEmpty').classList.add('hidden');
      $('conversionResult').classList.remove('hidden');
      $('copyLink').disabled = false;
    } catch (error) {
      showError(error.message === 'Invalid URL' ? '链接格式不正确，请粘贴包含 http:// 或 https:// 的完整链接' : error.message);
    }
  }

  function loadSample() {
    $('originalLink').value = 'https://trident.bigpinggo.com/l/click?advid=30&campid=91566789&platform=M_API_Self_Mintegral&pkg=com.salaryse.android&clickid={click_id}&offer_name={offer_name}&creative_id={creative_id}&creative_name={creative_name}&affiliate_id={affiliate_id}&idfa={idfa}&gaid={gaid}&imei={imei}&android_id={android_id}&mac={mac}&oaid={oaid}&uagent={ua}&os_platform={os_platform}&os_version={os_version}&device_model={device_model}&ip={ip}&country_code={country_code}&ext={ext}&rta_token={rta_token}&san_campid=91566789&adset_id=-1&c_cto=0';
    convertFromInput(false);
  }

  async function copyUrl() {
    if (!activeResult) return;
    try {
      await navigator.clipboard.writeText(activeResult.url);
    } catch (_) {
      const range = document.createRange();
      range.selectNodeContents(output);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      selection.removeAllRanges();
    }
    $('copyStatus').textContent = '已复制';
    const toast = $('toast');
    toast.textContent = '转换后的平台链接已复制';
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), 1800);
  }

  function escapeHtml(value) {
    return String(value).replace(/[&<>"']/g, (char) => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' })[char]);
  }

  platformSelect.addEventListener('change', renderPlatform);
  $('macroSearch').addEventListener('input', renderMacros);
  $('convertLink').addEventListener('click', () => convertFromInput(true));
  $('sampleLink').addEventListener('click', loadSample);
  $('copyLink').addEventListener('click', copyUrl);
  $('clearConverter').addEventListener('click', () => { $('originalLink').value = ''; showEmpty(); $('originalLink').focus(); });
  $('originalLink').addEventListener('input', () => {
    clearTimeout(inputTimer);
    inputTimer = setTimeout(() => convertFromInput(false), 220);
  });

  renderPlatform();
  showEmpty();
})();