SoonDesign/frontend-web/pages/admin/assets/js/views/settings.js

(function () {
  'use strict';

  var Api = function () { return window.AdminApi; };
  var Ui = function () { return window.AdminUi; };
  var I = function () { return window.AdminI18n; };
  var Form = function () { return window.AdminForm; };
  var Filter = function () { return window.AdminFilter; };
  var State = function () { return window.AdminState; };
  var Router = function () { return window.AdminRouter; };

  var SETTING_LABELS = {
    'site.base_url': 'API 站点外网地址（见支付配置）',
    'payment.display_channels': '前端展示渠道（见支付配置）',
    'alipay.app_id': '支付宝 APPID（见支付配置）',
    'wechat.app_id': '微信 AppID（见支付配置）',
    'wechat.mch_id': '微信商户号（见支付配置）',
    'wechat.mch_serial_no': '商户证书序列号（见支付配置）',
  };

  var valuesByKey = {};
  var allItems = [];

  function settingLabel(key) {
    if (SETTING_LABELS[key]) {
      return I().esc(key) + '<br><span class="soon-admin-setting-hint">' + I().esc(SETTING_LABELS[key]) + '</span>';
    }
    return I().esc(key);
  }

  function maskValue(key, val) {
    if (/secret|password|key/i.test(key) && val) return '******';
    return I().esc(val);
  }

  function allSettingsHtml(filterQ) {
    var q = (filterQ || '').toLowerCase();
    var items = allItems.filter(function (s) {
      if (!q) return true;
      return String(s.key).toLowerCase().indexOf(q) >= 0 ||
        String(s.value || '').toLowerCase().indexOf(q) >= 0;
    });
    var rows = items.map(function (s) {
      return '<tr><td>' + settingLabel(s.key) + '</td><td>' + maskValue(s.key, s.value) + '</td><td>' +
        I().formatDateTime(s.updated_at) + '</td><td>' +
        '<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost setting-edit" data-key="' +
        I().esc(s.key) + '">编辑</button></td></tr>';
    }).join('');
    var filter = Filter().bar(
      Filter().field('搜索', Filter().searchInput('settingsSearchQ', filterQ, '按 key 或 value 搜索')),
      '<button type="button" class="soon-btn soon-btn--sm" id="settingsSearchBtn">搜索</button>' +
      '<button type="button" class="soon-btn soon-btn--sm soon-btn--ghost" id="settingsSearchReset">重置</button>'
    );
    return filter + Ui().dataTable(['配置项', '当前值', '更新时间', '操作'], rows);
  }

  function bindAllSettings() {
    var st = State().settings;
    var searchBtn = Ui().el('settingsSearchBtn');
    var resetBtn = Ui().el('settingsSearchReset');
    if (searchBtn) {
      searchBtn.onclick = function () {
        st.q = Ui().el('settingsSearchQ').value.trim();
        st.tab = 'all';
        Router().syncQuery();
        render();
      };
    }
    if (resetBtn) {
      resetBtn.onclick = function () {
        st.q = '';
        st.tab = 'all';
        Router().syncQuery();
        render();
      };
    }
    var searchInput = Ui().el('settingsSearchQ');
    if (searchInput) {
      searchInput.onkeydown = function (e) {
        if (e.key === 'Enter' && searchBtn) searchBtn.click();
      };
    }
    document.querySelectorAll('#panel-settings .setting-edit').forEach(function (btn) {
      btn.onclick = function () {
        var key = btn.dataset.key;
        var val = valuesByKey[key] != null ? valuesByKey[key] : '';
        var form = '<div class="soon-admin-form">' +
          Form().field('配置键', '<input class="soon-input soon-input--sm" value="' + I().esc(key) + '" disabled>') +
          Form().field('配置值', Form().input('settingVal', { value: val, type: 'textarea', rows: 5 })) +
          Form().actions('保存', 'adminModalSave') + '</div>';
        Ui().openFormModal('修改 ' + key, form, function () {
          Ui().confirm('确认保存该配置？', function () {
            var saveBtn = Ui().el('adminModalSave');
            Ui().setBtnLoading(saveBtn, true);
            Api().postJson('settings', { key: key, value: Ui().el('settingVal').value }).then(function (r) {
              if (r) {
                soonLayerDismiss();
                soonToast('配置已保存', 'success');
                render();
              }
            }).finally(function () {
              Ui().setBtnLoading(saveBtn, false);
              if (typeof window.soonCleanupLayerMask === 'function') window.soonCleanupLayerMask();
            });
          });
        });
      };
    });
  }

  function render() {
    var panel = Ui().el('panel-settings');
    if (!panel) return;
    var st = State().settings;
    var header = Ui().pageHeader('系统设置', '运行时参数；支付相关请在「支付配置」维护');
    panel.innerHTML = '<div class="soon-admin-page">' + header + Ui().skeletonTable() + '</div>';

    Api().get('settings').then(function (j) {
      if (!j) {
        panel.innerHTML = '<div class="soon-admin-page">' + header +
          Ui().listError('设置加载失败', 'settingsRetry') + '</div>';
        Ui().el('settingsRetry').onclick = render;
        return;
      }
      valuesByKey = {};
      allItems = j.data.items || [];
      allItems.forEach(function (s) { valuesByKey[s.key] = s.value; });

      panel.innerHTML = '<div class="soon-admin-page">' + header + allSettingsHtml(st.q) + '</div>';
      bindAllSettings();
    });
  }

  window.AdminViews = window.AdminViews || {};
  window.AdminViews.settings = { render: render };
})();