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

public/js/pages/unclaimed.js

@@ -0,0 +1,69 @@
+const UnclaimedPage = {
+  filters: {},
+
+  async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },
+
+  async mount() {
+    document.getElementById('page-title').textContent = '待处理工单';
+    document.getElementById('page-actions').innerHTML = '';
+
+    const ct = document.getElementById('page-content');
+    ct.innerHTML = `
+      <div class="filter-bar">
+        <select id="u-type" onchange="UnclaimedPage.applyFilters()"><option value="">全部类型</option>${Object.entries(U.TYPE).map(([k,v])=>`<option value="${k}">${v}</option>`).join('')}</select>
+        <button class="btn btn-o btn-sm" onclick="UnclaimedPage.applyFilters()"><i class="fas fa-filter"></i></button>
+        <button class="btn btn-o btn-sm" onclick="UnclaimedPage.reset()"><i class="fas fa-undo"></i></button>
+      </div>
+      <div id="unclaimed-list"></div>
+    `;
+    await this.load();
+  },
+
+  async load() {
+    const list = document.getElementById('unclaimed-list');
+    U.loading(list);
+    try {
+      const params = new URLSearchParams();
+      if (this.filters.type) params.set('type', this.filters.type);
+      const qs = params.toString();
+      const tickets = await API.get('/tickets/unclaimed' + (qs ? '?' + qs : ''));
+      this.renderList(list, tickets);
+    } catch (e) { list.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
+  },
+
+  renderList(ct, tickets) {
+    ct.innerHTML = tickets.length === 0
+      ? `<div class="empty"><i class="fas fa-check-circle"></i><p>所有工单已处理完毕</p></div>`
+      : `<div class="card"><div class="card-h"><span>${tickets.length} 个待处理工单</span><span class="ts tm">按状态优先级排序</span></div><div class="table-wrap"><table><thead><tr>
+        <th>#</th><th>类型</th><th>标题</th><th>提交者</th><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><a href="#" onclick="App.navigate('ticket',${t.id});return false" style="color:var(--p);text-decoration:none;font-weight:600">${U.esc(t.title)}</a></td>
+          <td>${U.esc(t.reporter_game_name)}<br><span class="tm ts">UID:${U.esc(t.reporter_game_uid)}</span></td>
+          <td>${t.type==='report'?`${U.esc(t.target_game_name||'?')}<br><span class="tm ts">${U.esc(t.reason||'')}</span>`
+            :t.type==='appeal'?`<span class="tm ts">${U.esc(t.reason||'')}</span>`
+            :`<span class="tm ts">${U.esc((t.description||'').substring(0,30))}</span>`}</td>
+          <td>${U.badge(t.status,'status')}</td>
+          <td>${U.badge(t.priority,'priority')}</td>
+          <td class="ts">${U.date(t.created_at)}</td>
+          <td>
+            <button class="btn btn-s btn-sm" onclick="UnclaimedPage.quickClaim(${t.id})"><i class="fas fa-hand-paper"></i> 接单</button>
+            <button class="btn btn-o btn-sm" onclick="App.navigate('ticket',${t.id})"><i class="fas fa-eye"></i></button>
+          </td>
+        </tr>`).join('')}</tbody></table></div></div>`;
+  },
+
+  async quickClaim(id) {
+    U.modal('接单认领', `<form id="qc-form"><div class="form-group"><label>初始回复 (玩家可见)</label><textarea id="qc-reply" rows="3" placeholder="接单时发送给玩家的回复..."></textarea></div><div class="form-group"><label>处理备注 (内部)</label><textarea id="qc-note" rows="2" placeholder="内部备注，玩家不可见"></textarea></div><div class="modal-f"><button type="button" class="btn btn-o" onclick="App.closeModal()">取消</button><button type="submit" class="btn btn-s"><i class="fas fa-hand-paper"></i> 确认接单</button></div></form>`);
+    document.getElementById('qc-form').onsubmit = async e => { e.preventDefault();
+      try { await API.post(`/tickets/${id}/claim`, {claim_note: document.getElementById('qc-note').value, initial_reply: document.getElementById('qc-reply').value}); App.closeModal(); this.load(); } catch(ex){alert(ex.message);}
+    };
+  },
+
+  applyFilters() {
+    this.filters.type = document.getElementById('u-type').value;
+    this.load();
+  },
+  reset() { this.filters = {}; this.load(); }
+};