feat: MC Report System - MySQL + Express + Vanilla JS SPA

public/js/pages/tracking.js

@@ -0,0 +1,38 @@
+const TrackingPage = {
+  async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },
+
+  mount() {
+    const ct = document.getElementById('page-content');
+    document.getElementById('page-title').textContent = '追踪工单';
+    document.getElementById('page-actions').innerHTML = '';
+
+    const token = document.cookie.split('; ').find(r => r.startsWith('tracking_token='))?.split('=')[1] || '';
+
+    ct.innerHTML = `
+      <div class="card"><div class="card-b">
+        <div class="form-group"><label>追踪标识 (从Cookie自动读取)</label><input id="track-token" value="${token}"></div>
+        <button class="btn btn-p" onclick="TrackingPage.search()"><i class="fas fa-search"></i> 查询</button>
+        <div id="track-result" class="mt-4"></div>
+      </div></div>
+    `;
+  },
+
+  async search() {
+    const token = document.getElementById('track-token').value.trim();
+    if (!token) return alert('请输入追踪标识');
+    const ct = document.getElementById('track-result');
+    U.loading(ct);
+    try {
+      const tickets = await API.get(`/tickets/tracking?token=${token}`);
+      ct.innerHTML = tickets.length ? `
+        <div class="table-wrap"><table><thead><tr><th>#</th><th>类型</th><th>标题</th><th>状态</th><th>时间</th></tr></thead><tbody>${tickets.map(t => `
+          <tr>
+            <td>${t.id}</td><td>${U.badge(t.type,'type')}</td>
+            <td><strong>${U.esc(t.title)}</strong></td>
+            <td>${U.badge(t.status,'status')}</td><td class="ts">${U.date(t.created_at)}</td>
+          </tr>`).join('')}</tbody></table></div>
+        <p class="tm ts mt-4">如需获取更详细的跟踪和回复通知，请<a href="#/register" style="color:var(--p)">注册账号</a></p>
+      ` : '<div class="empty"><i class="fas fa-inbox"></i><p>未找到工单</p></div>';
+    } catch (e) { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
+  }
+};