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

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

  const $ = (id) => document.getElementById(id);
  const platformSelect = $('platformSelect');
  const linkTypeSelect = $('linkTypeSelect');
  const mappingBody = $('mappingTableBody');
  const macroBody = $('macroTableBody');
  const output = $('urlOutput');
  const businessIds = ['advid','campid','pkg','platformCode','sanCampid','adsetId','countryCode'];
  let state = { platformIndex:0, type:'click', mappings:{} };

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

  const activeTemplate = () => templates[state.platformIndex];
  const activeLink = () => activeTemplate().links[state.type];

  function loadPlatform() {
    const template = activeTemplate();
    linkTypeSelect.innerHTML = '';
    Object.keys(template.links).forEach((type) => linkTypeSelect.add(new Option(type === 'click' ? 'Click Link' : 'Impression Link', type)));
    state.type = Object.keys(template.links)[0];
    $('platformCode').value = template.platformCode;
    $('platformStatus').innerHTML = `<span class="template-status ${template.status.includes('待') ? 'review' : ''}">${template.status}</span>`;
    renderMacros();
    loadLink();
  }

  function loadLink() {
    state.mappings = { ...activeLink().mappings };
    renderMappings();
    buildUrl();
  }

  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 renderMappings() {
    mappingBody.innerHTML = Object.entries(state.mappings).map(([key, value]) => `<tr><td><code>${escapeHtml(key)}</code></td><td><input data-key="${escapeHtml(key)}" value="${escapeHtml(value)}" aria-label="${escapeHtml(key)} value"></td></tr>`).join('');
    mappingBody.querySelectorAll('input').forEach((input) => input.addEventListener('input', () => {
      state.mappings[input.dataset.key] = input.value;
      buildUrl();
    }));
  }

  function buildUrl() {
    const link = activeLink();
    const campid = $('campid').value.trim();
    const pkg = $('pkg').value.trim();
    const type = state.type;
    const params = [];
    const addBusiness = (key, value) => params.push(`${key}=${encodeURIComponent(value)}`);
    const addRaw = (key, value) => params.push(`${key}=${value}`);

    if (type === 'click') {
      addBusiness('advid', $('advid').value.trim());
      addBusiness('campid', campid);
      addBusiness('platform', $('platformCode').value.trim());
      addBusiness('pkg', pkg);
    } else {
      addBusiness('campid', campid);
      addBusiness('pkg', pkg);
    }

    Object.entries(state.mappings).forEach(([key, value]) => {
      const finalValue = key === 'country_code' && $('countryCode').value.trim()
        ? $('countryCode').value.trim().toUpperCase()
        : value;
      addRaw(key, finalValue);
    });

    if (type === 'click') {
      if ($('sanCampid').value.trim()) addBusiness('san_campid', $('sanCampid').value.trim());
      if ($('adsetId').value.trim()) addBusiness('adset_id', $('adsetId').value.trim());
      addRaw('c_cto', '0');
    } else {
      addRaw('at_tag', '2');
    }

    const url = `${link.endpoint}?${params.join('&')}`;
    output.textContent = url;
    $('urlLength').textContent = `${url.length} chars`;

    const missing = [];
    if (!campid) missing.push('Campaign ID');
    if (!pkg) missing.push('Package Name');
    $('generatorMessage').textContent = missing.length ? `待填写：${missing.join('、')}` : '';
  }

  function resetGenerator() {
    $('advid').value = '30';
    $('campid').value = '';
    $('pkg').value = '';
    $('platformCode').value = activeTemplate().platformCode;
    $('sanCampid').value = '';
    $('adsetId').value = '-1';
    $('countryCode').value = '';
    loadLink();
  }

  async function copyUrl() {
    if (!$('campid').value.trim() || !$('pkg').value.trim()) {
      $('copyStatus').textContent = '请先补全必填参数';
      return;
    }
    try {
      await navigator.clipboard.writeText(output.textContent);
    } 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', () => { state.platformIndex = Number(platformSelect.value); loadPlatform(); });
  linkTypeSelect.addEventListener('change', () => { state.type = linkTypeSelect.value; loadLink(); });
  $('macroSearch').addEventListener('input', renderMacros);
  businessIds.forEach((id) => $(id).addEventListener('input', buildUrl));
  $('resetGenerator').addEventListener('click', resetGenerator);
  $('copyLink').addEventListener('click', copyUrl);
  loadPlatform();
})();