MC_Report/public/js/pages/settings-page.js

const SettingsPage = {
  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 = '';
    try {
      const settings = await API.get('/settings/settings');
      const ct = document.getElementById('page-content');
      ct.innerHTML = `
        <div class="card"><div class="card-h">站点设置</div><div class="card-b">
          <form id="site-form">
            <div class="grid-2"><div class="form-group"><label>站点å<C2B9><C3A5>称</label><input id="s-name" value="${U.esc(settings.site_name?.value||'')}"></div>
            <div class="form-group"><label>站点地å<C2B0>€</label><input id="s-url" value="${U.esc(settings.site_url?.value||'')}"></div></div>
            <div class="grid-2"><div class="form-group"><label>页尾版æ<CB86>ƒ</label><input id="s-copyright" value="${U.esc(settings.copyright?.value||'')}" placeholder="&copy; 2024 MC举报系统"></div>
            <div class="form-group"><label>ICP备案å<CB86>?/label><input id="s-icp" value="${U.esc(settings.icp?.value||'')}" placeholder="沪ICP备XXXXXXXXå<58>?></div></div>
            <button type="submit" class="btn btn-p btn-sm"><i class="fas fa-save"></i> ä¿<C3A4>存站点设置</button>
          </form>
        </div></div>

        <div class="card"><div class="card-h">SMTP 邮件设置</div><div class="card-b">
          <form id="smtp-form">
            <div class="grid-2"><div class="form-group"><label>SMTPæœ<C3A6>务å™?/label><input id="s-host" value="${U.esc(settings.smtp_host?.value||'')}"></div>
            <div class="form-group"><label>端å<C2AF>£</label><input id="s-port" value="${U.esc(settings.smtp_port?.value||'587')}"></div></div>
            <div class="grid-2"><div class="form-group"><label>用户å<C2B7>?/label><input id="s-user" value="${U.esc(settings.smtp_user?.value||'')}"></div>
            <div class="form-group"><label>密ç <C3A7></label><input type="password" id="s-pass" value="${U.esc(settings.smtp_pass?.value||'')}"></div></div>
            <div class="grid-2"><div class="form-group"><label>å<>‘件地å<C2B0>€</label><input id="s-from" value="${U.esc(settings.smtp_from?.value||'')}"></div>
            <div class="form-group"><label>SSL</label><select id="s-secure"><option value="0" ${settings.smtp_secure?.value!=='1'?'selected':''}>å<>?587)</option><option value="1" ${settings.smtp_secure?.value==='1'?'selected':''}>æ˜?465)</option></select></div></div>
            <button type="submit" class="btn btn-p btn-sm"><i class="fas fa-save"></i> ä¿<C3A4>å­˜SMTP设置</button>
          </form>
        </div></div>
      `;

      document.getElementById('site-form').onsubmit = async e => {
        e.preventDefault();
        try {
          await API.put('/settings/settings', {
            site_name: {value: document.getElementById('s-name').value, label:'站点å<C2B9><C3A5>称'},
            site_url: {value: document.getElementById('s-url').value, label:'站点地å<C2B0>€'},
            copyright: {value: document.getElementById('s-copyright').value, label:'页尾版æ<CB86>ƒ'},
            icp: {value: document.getElementById('s-icp').value, label:'ICP备案å<CB86>?},
          });
          alert('å·²ä¿<EFBFBD>å­?);
        } catch (ex) { alert(ex.message); }
      };

      document.getElementById('smtp-form').onsubmit = async e => {
        e.preventDefault();
        try {
          await API.put('/settings/settings', {
            smtp_host: {value: document.getElementById('s-host').value, label:'SMTPæœ<C3A6>务å™?},
            smtp_port: {value: document.getElementById('s-port').value, label:'SMTP端å<EFBFBD>£'},
            smtp_secure: {value: document.getElementById('s-secure').value, label:'SSL'},
            smtp_user: {value: document.getElementById('s-user').value, label:'SMTP用户å<EFBFBD>?},
            smtp_pass: {value: document.getElementById('s-pass').value, label:'SMTP密ç <C3A7>'},
            smtp_from: {value: document.getElementById('s-from').value, label:'å<>‘件地å<C2B0>€'},
          });
          alert('å·²ä¿<C3A4>å­?);
        } catch (ex) { alert(ex.message); }
      };
    } catch (e) {
      document.getElementById('page-content').innerHTML = `<div class="alert alert-e">${e.message}</div>`;
    }
  }
};