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

public/js/pages/install.js

@@ -0,0 +1,109 @@
+const InstallPage = {
+  step: 1,
+
+  async render() {
+    const status = await API.get('/install/status');
+    if (status.installed) { location.hash = '#/login'; return ''; }
+    return `<div style="max-width:600px;margin:0 auto;padding:30px 0"><div id="install-steps"></div></div>`;
+  },
+
+  mount() {
+    this.showStep(1);
+  },
+
+  showStep(n) {
+    this.step = n;
+    const ct = document.getElementById('install-steps');
+    if (n === 1) this.renderDBStep(ct);
+    else if (n === 2) this.renderAdminStep(ct);
+  },
+
+  renderDBStep(ct) {
+    ct.innerHTML = `
+      <div class="card"><div class="card-h"><i class="fas fa-database"></i> 第1步：数据库配置</div><div class="card-b">
+        <form id="install-db">
+          <div class="grid-2"><div class="form-group"><label>MySQL 主机</label><input id="db-host" value="localhost"></div>
+          <div class="form-group"><label>端口</label><input id="db-port" value="3306" type="number"></div></div>
+          <div class="grid-2"><div class="form-group"><label>用户名</label><input id="db-user" value="root" required></div>
+          <div class="form-group"><label>密码</label><input type="password" id="db-pass"></div></div>
+          <div class="form-group"><label>数据库名</label><input id="db-name" value="mc_report" required><span class="help">如不存在将自动创建</span></div>
+          <div id="db-err" class="alert alert-e hidden"></div>
+          <button type="submit" class="btn btn-p"><i class="fas fa-check"></i> 测试连接并继续</button>
+        </form>
+      </div></div>
+    `;
+    document.getElementById('install-db').onsubmit = async e => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      btn.disabled = true;
+      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 测试中...';
+      try {
+        await API.post('/install/check-db', {
+          host: document.getElementById('db-host').value,
+          port: document.getElementById('db-port').value,
+          user: document.getElementById('db-user').value,
+          password: document.getElementById('db-pass').value,
+          database: document.getElementById('db-name').value,
+        });
+        this.dbConfig = {
+          host: document.getElementById('db-host').value,
+          port: document.getElementById('db-port').value,
+          user: document.getElementById('db-user').value,
+          pass: document.getElementById('db-pass').value,
+          name: document.getElementById('db-name').value,
+        };
+        this.showStep(2);
+      } catch (ex) {
+        document.getElementById('db-err').textContent = ex.message;
+        document.getElementById('db-err').classList.remove('hidden');
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-check"></i> 测试连接并继续';
+      }
+    };
+  },
+
+  renderAdminStep(ct) {
+    ct.innerHTML = `
+      <div class="card"><div class="card-h"><i class="fas fa-user-crown"></i> 第2步：创建服主账号</div><div class="card-b">
+        <form id="install-admin">
+          <div class="grid-2"><div class="form-group"><label>站点名称</label><input id="ia-sitename" value="MC举报系统"></div>
+          <div class="form-group"><label>站点地址</label><input id="ia-siteurl" value="${location.origin}"></div></div>
+          <div class="grid-2"><div class="form-group"><label>服主用户名 *</label><input id="ia-username" required placeholder="登录用"></div>
+          <div class="form-group"><label>邮箱 *</label><input type="email" id="ia-email" required></div></div>
+          <div class="grid-2"><div class="form-group"><label>密码 *</label><input type="password" id="ia-password" required minlength="6"></div>
+          <div class="form-group"><label>游戏名称</label><input id="ia-game" placeholder="Minecraft ID"></div></div>
+          <div class="form-group"><label>游戏UID</label><input id="ia-uid" placeholder="游戏唯一ID"></div>
+          <div id="ia-err" class="alert alert-e hidden"></div>
+          <div id="ia-warn" class="alert alert-i"><strong>注意：</strong>安装完成后需要重启服务器才能加载业务路由。请记好账号密码。</div>
+          <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-check"></i> 完成安装</button>
+        </form>
+      </div></div>
+    `;
+    document.getElementById('install-admin').onsubmit = async e => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      btn.disabled = true;
+      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 安装中...';
+      try {
+        await API.post('/install/complete', {
+          ...this.dbConfig,
+          db_host: this.dbConfig.host, db_port: this.dbConfig.port,
+          db_user: this.dbConfig.user, db_pass: this.dbConfig.pass, db_name: this.dbConfig.name,
+          site_name: document.getElementById('ia-sitename').value,
+          site_url: document.getElementById('ia-siteurl').value,
+          admin_username: document.getElementById('ia-username').value,
+          admin_password: document.getElementById('ia-password').value,
+          admin_email: document.getElementById('ia-email').value,
+          admin_game_name: document.getElementById('ia-game').value,
+          admin_game_uid: document.getElementById('ia-uid').value,
+        });
+        document.getElementById('install-admin').innerHTML = '<div class="alert alert-s"><h3><i class="fas fa-check-circle"></i> 安装成功！</h3><p>配置已保存。请重启服务器后刷新页面。</p></div>';
+      } catch (ex) {
+        document.getElementById('ia-err').textContent = ex.message;
+        document.getElementById('ia-err').classList.remove('hidden');
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-check"></i> 完成安装';
+      }
+    };
+  }
+};