feat: add traffic intelligence toolkit

channel-recommendation.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="按包名、品类和国家生成渠道投放建议">
+  <title>渠道投放建议 · Traffic Intelligence</title>
+  <link rel="stylesheet" href="assets/styles.css">
+</head>
+<body>
+  <header class="site-header inner-header">
+    <a class="brand" href="index.html"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span><strong>Traffic Intelligence</strong><small>投放决策工作台</small></span></a>
+    <nav class="main-nav" aria-label="主导航"><a class="active" href="channel-recommendation.html">渠道建议</a><a href="link-generator.html">链接生成器</a></nav>
+    <a class="home-link" href="index.html">返回首页</a>
+  </header>
+
+  <main class="shell page-main">
+    <section class="page-heading">
+      <div><p class="eyebrow"><span></span> CHANNEL ADVISOR / 01</p><h1>渠道投放建议</h1><p>通过产品信息快速筛选候选渠道，并展示每个排序结果的匹配依据。</p></div>
+      <div class="data-badge"><span class="pulse-dot"></span><p><strong>规则基线 v0.1</strong><small>正式绩效数据待接入</small></p></div>
+    </section>
+
+    <section class="workspace recommendation-layout">
+      <aside class="panel form-panel">
+        <div class="panel-title"><span>INPUT</span><h2>填写产品信息</h2><p>带 * 的字段为必填项</p></div>
+        <form id="recommendationForm" novalidate>
+          <label class="field-label" for="packageName">应用包名 <b>*</b></label>
+          <div class="input-wrap"><span class="input-prefix">PKG</span><input id="packageName" name="packageName" autocomplete="off" placeholder="如 com.example.app" required></div>
+          <p class="field-help">支持 Android Package Name 或 iOS Bundle ID</p>
+
+          <label class="field-label" for="category">产品品类 <b>*</b></label>
+          <select id="category" name="category" required><option value="">请选择产品品类</option></select>
+
+          <label class="field-label" for="country">投放国家 / 地区 <b>*</b></label>
+          <select id="country" name="country" required><option value="">请选择目标国家</option></select>
+
+          <label class="field-label" for="os">操作系统</label>
+          <div class="segmented" id="osOptions">
+            <label><input type="radio" name="os" value="ALL" checked><span>不限</span></label>
+            <label><input type="radio" name="os" value="AOS"><span>Android</span></label>
+            <label><input type="radio" name="os" value="IOS"><span>iOS</span></label>
+          </div>
+
+          <div class="form-message" id="formMessage" role="alert"></div>
+          <button class="primary-btn full-btn" type="submit"><span>生成渠道建议</span><b>→</b></button>
+          <button class="text-btn" type="button" id="sampleBtn">填入示例数据</button>
+        </form>
+        <div class="form-footnote"><b>i</b><p>当前结果用于验证页面与评分结构，不代表实际投放效果承诺。下一阶段将接入历史消耗、转化及渠道状态。</p></div>
+      </aside>
+
+      <section class="panel result-panel" aria-live="polite">
+        <div class="result-head">
+          <div><span class="section-index">OUTPUT</span><h2>优先渠道</h2></div>
+          <button class="outline-btn hidden" id="resetBtn" type="button">重新填写</button>
+        </div>
+        <div id="resultEmpty" class="result-empty">
+          <div class="empty-graphic"><span>PKG</span><i>+</i><span>CAT</span><i>+</i><span>GEO</span></div>
+          <h3>等待输入产品信息</h3><p>完成左侧三个必填字段后，这里会显示候选渠道、优先级和详细匹配原因。</p>
+        </div>
+        <div id="resultContent" class="hidden">
+          <div class="query-summary" id="querySummary"></div>
+          <div class="result-list" id="resultList"></div>
+          <div class="method-note"><strong>本版排序逻辑</strong><span>品类匹配 35%</span><span>国家覆盖 30%</span><span>基础能力 20%</span><span>系统与包名特征 15%</span></div>
+        </div>
+      </section>
+    </section>
+  </main>
+
+  <footer class="site-footer shell"><span>Traffic Intelligence Hub</span><span>© <b data-year></b> Media Operations</span></footer>
+  <script src="assets/data/channel-rules.js"></script>
+  <script src="assets/common.js"></script>
+  <script src="assets/channel.js"></script>
+</body>
+</html>