feat: add persistent link summary

This commit is contained in:
王源
2026-10-19 20:24:00 +08:00
parent 969bab77a7
commit 903b058340
3 changed files with 155 additions and 41 deletions
+32 -21
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="粘贴原始 Tracking Link,自动替换为目标自投平台宏">
<meta name="description" content="粘贴原始 Tracking Link,自动替换为 Mintegral 平台宏">
<title>自投链接转换器 · Traffic Intelligence</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
@@ -16,7 +16,7 @@
<main class="shell page-main">
<section class="page-heading">
<div><p class="eyebrow"><span></span> TRACKING CONVERTER / 02</p><h1>自投平台链接转换器</h1><p>粘贴一条原始 Tracking Link,自动替换为目标平台要求的宏参数。</p></div>
<div><p class="eyebrow"><span></span> TRACKING CONVERTER / 02</p><h1>自投平台链接转换器</h1><p>粘贴一条原始 Tracking Link,自动替换为 Mintegral 要求的宏参数。</p></div>
<div class="data-badge"><span class="pulse-dot"></span><p><strong id="templateCount">— 个平台模板</strong><small>Mintegral Click URL 转换</small></p></div>
</section>
@@ -29,7 +29,7 @@
<div class="detect-card"><span>识别类型</span><strong id="detectedType">等待链接</strong></div>
</div>
<label class="textarea-label" for="originalLink"><span>原始 Tracking Link *</span><small>原有业务参数与固定值会保留</small></label>
<textarea id="originalLink" class="link-textarea" rows="6" spellcheck="false" placeholder="在这里粘贴完整的 Click 或 Impression Link…"></textarea>
<textarea id="originalLink" class="link-textarea" rows="6" spellcheck="false" placeholder="在这里粘贴完整的 Mintegral Click Link…"></textarea>
<div class="converter-actions">
<button class="primary-btn" id="convertLink" type="button"><span>转换为平台链接</span><b>→</b></button>
<button class="text-inline-btn" id="sampleLink" type="button">载入示例链接</button>
@@ -37,28 +37,39 @@
</div>
</section>
<section class="generator-columns">
<section class="panel macro-panel">
<div class="panel-title compact"><span>PLATFORM MACROS</span><h2>目标平台宏参考</h2><p>当前平台可用于替换的动态参数</p></div>
<details class="panel macro-disclosure">
<summary><span class="disclosure-icon">+</span><div><span class="section-index">REFERENCE</span><strong>Mintegral 平台宏参考</strong></div><small id="macroCount">点击展开完整宏清单</small></summary>
<div class="macro-content">
<div class="macro-search"><input id="macroSearch" placeholder="搜索宏或说明…" aria-label="搜索媒体宏"></div>
<div class="macro-table-wrap"><table class="macro-table"><thead><tr><th>媒体宏</th><th>说明</th></tr></thead><tbody id="macroTableBody"></tbody></table></div>
</section>
</div>
</details>
<section class="panel output-panel">
<div class="config-topline output-title"><span class="section-index">STEP 02</span><h2>转换结果</h2><span class="live-chip"><i></i> AUTO</span></div>
<div class="conversion-empty" id="conversionEmpty"><div>↳</div><h3>等待原始链接</h3><p>转换后将在这里展示参数替换明细与最终链接。</p></div>
<div id="conversionResult" class="hidden">
<div class="conversion-summary">
<div><span>链接类型</span><strong id="summaryType">—</strong></div>
<div><span>已替换参数</span><strong id="replacementCount">0</strong></div>
<div><span>保留参数</span><strong id="preservedCount">0</strong></div>
</div>
<div class="mapping-table-wrap"><table class="mapping-table conversion-table"><thead><tr><th>参数 Key</th><th>原始值</th><th>替换后的平台宏</th></tr></thead><tbody id="mappingTableBody"></tbody></table></div>
<div class="output-label"><span>最终平台链接</span><small id="urlLength">0 chars</small></div>
<pre class="url-output" id="urlOutput"></pre>
<div class="output-actions"><button class="primary-btn" id="copyLink" type="button" disabled><span>复制最终链接</span><b>⧉</b></button><span id="copyStatus" class="copy-status" role="status"></span></div>
<section class="panel output-panel output-panel-wide">
<div class="config-topline output-title"><span class="section-index">STEP 02</span><h2>转换结果</h2><span class="live-chip"><i></i> AUTO</span></div>
<div class="conversion-empty" id="conversionEmpty"><div>↳</div><h3>等待原始链接</h3><p>转换后将在这里展示参数替换明细与最终链接。</p></div>
<div id="conversionResult" class="hidden">
<div class="conversion-summary">
<div><span>链接类型</span><strong id="summaryType">—</strong></div>
<div><span>已替换参数</span><strong id="replacementCount">0</strong></div>
<div><span>保留参数</span><strong id="preservedCount">0</strong></div>
</div>
</section>
<div class="mapping-table-wrap"><table class="mapping-table conversion-table"><thead><tr><th>参数 Key</th><th>原始值</th><th>替换后的平台宏</th></tr></thead><tbody id="mappingTableBody"></tbody></table></div>
<div class="output-label"><span>最终平台链接</span><small id="urlLength">0 chars</small></div>
<pre class="url-output" id="urlOutput"></pre>
<div class="output-actions"><button class="primary-btn" id="copyLink" type="button" disabled><span>复制最终链接</span><b>⧉</b></button><span id="copyStatus" class="copy-status" role="status"></span></div>
</div>
</section>
<section class="panel history-panel">
<div class="history-heading">
<div><span class="section-index">LINK SUMMARY</span><h2>平台链接总结 <em id="historyCount">0</em></h2><p>保存已转换链接的平台、PKG、时间和最终结果,仅存储在当前浏览器。</p></div>
<button class="outline-btn" id="clearHistory" type="button" disabled>清空记录</button>
</div>
<div class="history-empty" id="historyEmpty"><span>⌁</span><p>还没有转换记录</p></div>
<div class="history-table-wrap hidden" id="historyTableWrap">
<table class="history-table"><thead><tr><th>转换时间</th><th>平台</th><th>PKG</th><th>最终链接</th><th>操作</th></tr></thead><tbody id="historyTableBody"></tbody></table>
</div>
</section>
</section>
</main>