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

public/js/pages/users.js

@@ -0,0 +1,84 @@
+const UsersPage = {
+  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 = '<button class="btn btn-p btn-sm" onclick="UsersPage.createUser()"><i class="fas fa-user-plus"></i> 添加用户</button>';
+    await this.load();
+  },
+
+  async load() {
+    const ct = document.getElementById('page-content');
+    try {
+      const users = await API.get('/users');
+      ct.innerHTML = `
+        <div class="card table-wrap"><table><thead><tr>
+          <th>#</th><th>用户名</th><th>邮箱</th><th>游戏名</th><th>游戏UID</th><th>角色</th><th>状态</th><th>时间</th><th>操作</th>
+        </tr></thead><tbody>${users.map(u => `
+          <tr>
+            <td>${u.id}</td><td>${U.esc(u.username)}</td><td>${U.esc(u.email)}</td>
+            <td>${U.esc(u.game_name)}</td><td>${U.esc(u.game_uid)}</td>
+            <td>${U.badge(u.role,'role')}</td>
+            <td>${u.active ? '<span class="badge bg-resolved">启用</span>' : '<span class="badge bg-rejected">禁用</span>'}</td>
+            <td class="ts">${U.date(u.created_at)}</td>
+            <td><button class="btn btn-o btn-sm" onclick="UsersPage.editUser(${u.id}, '${U.esc(u.username)}', '${U.esc(u.email)}', '${U.esc(u.game_name)}', '${U.esc(u.game_uid)}', '${u.role}', ${u.active})"><i class="fas fa-edit"></i></button></td>
+          </tr>`).join('')}</tbody></table></div>
+      `;
+    } catch (e) { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
+  },
+
+  createUser() {
+    U.modal('添加用户', `
+      <form id="cu-form">
+        <div class="grid-2"><div class="form-group"><label>用户名 *</label><input id="cu-u" required></div><div class="form-group"><label>密码 *</label><input type="password" id="cu-p" required minlength="6"></div></div>
+        <div class="grid-2"><div class="form-group"><label>邮箱 *</label><input type="email" id="cu-e" required></div><div class="form-group"><label>角色 *</label><select id="cu-r"><option value="owner">服主</option><option value="admin">管理员</option><option value="player">玩家</option></select></div></div>
+        <div class="grid-2"><div class="form-group"><label>游戏名 *</label><input id="cu-gn" required></div><div class="form-group"><label>游戏UID *</label><input id="cu-gu" required></div></div>
+        <div class="modal-f"><button type="button" class="btn btn-o" onclick="App.closeModal()">取消</button><button type="submit" class="btn btn-p">创建</button></div>
+      </form>
+    `);
+    document.getElementById('cu-form').onsubmit = async e => {
+      e.preventDefault();
+      try {
+        await API.post('/users', {
+          username: document.getElementById('cu-u').value,
+          password: document.getElementById('cu-p').value,
+          email: document.getElementById('cu-e').value,
+          role: document.getElementById('cu-r').value,
+          game_name: document.getElementById('cu-gn').value,
+          game_uid: document.getElementById('cu-gu').value,
+        });
+        App.closeModal();
+        this.load();
+      } catch (ex) { alert(ex.message); }
+    };
+  },
+
+  editUser(id, username, email, gameName, gameUid, role, active) {
+    U.modal('编辑用户', `
+      <form id="eu-form">
+        <div class="form-group"><label>用户名</label><input value="${username}" disabled style="background:var(--g100)"></div>
+        <div class="grid-2"><div class="form-group"><label>邮箱</label><input type="email" id="eu-e" value="${email}"></div><div class="form-group"><label>角色</label><select id="eu-r">${['owner','admin','player'].map(r=>`<option value="${r}" ${r===role?'selected':''}>${U.ROLE[r]}</option>`).join('')}</select></div></div>
+        <div class="grid-2"><div class="form-group"><label>游戏名</label><input id="eu-gn" value="${gameName}"></div><div class="form-group"><label>游戏UID</label><input id="eu-gu" value="${gameUid}"></div></div>
+        <div class="grid-2"><div class="form-group"><label>新密码(留空不变)</label><input type="password" id="eu-p"></div><div class="form-group"><label>状态</label><select id="eu-a"><option value="1" ${active?'selected':''}>启用</option><option value="0" ${!active?'selected':''}>禁用</option></select></div></div>
+        <div class="modal-f"><button type="button" class="btn btn-o" onclick="App.closeModal()">取消</button><button type="submit" class="btn btn-p">保存</button></div>
+      </form>
+    `);
+    document.getElementById('eu-form').onsubmit = async e => {
+      e.preventDefault();
+      const data = {
+        email: document.getElementById('eu-e').value,
+        role: document.getElementById('eu-r').value,
+        game_name: document.getElementById('eu-gn').value,
+        game_uid: document.getElementById('eu-gu').value,
+        active: document.getElementById('eu-a').value === '1',
+      };
+      const pw = document.getElementById('eu-p').value;
+      if (pw) data.password = pw;
+      try {
+        await API.put(`/users/${id}`, data);
+        App.closeModal();
+        this.load();
+      } catch (ex) { alert(ex.message); }
+    };
+  }
+};