Seewo-HugoAura/src/aura/ui/pages/config/config.html

<div
  class="aura-config-page-root-inactive aura-config-page-root"
  style="display: none"
>
  <!-- display: none 用于防止 CSS 还未加载完成时, 用户看到错乱的样式 -->
  <div class="header-collapsed aura-config-page-header-area">
    <div class="aura-config-page-app-bar" style="-webkit-app-region: drag">
      <div
        onclick="global.__HUGO_AURA_UI_FUNCTIONS__.config.handleNavBack()"
        style="-webkit-app-region: no-drag; z-index: 2000"
      >
        <i class="iconfont"></i>
      </div>
      <p>雨光之环</p>
    </div>
  </div>

  <div class="aura-config-page-status-container">
    <div class="aura-config-page-status-main">
      <div
        class="aura-config-page-status-side left-side status-side-hidden"
        id="leftStatusContainer"
      >
        <div class="aura-config-page-status-el">
          <p class="version-type">Node</p>
          <p class="version-content" id="nodeVersion">
            v{{ versionInfo.node }}
          </p>
          <!-- I want to use Vue plz 😭😭😭 -->
        </div>
        <hr class="aura-config-hr-vertical" />
        <div class="aura-config-page-status-el">
          <p class="version-type">Electron</p>
          <p class="version-content" id="electronVersion">
            v{{ versionInfo.electron }}
          </p>
        </div>
      </div>

      <img
        src="../../aura/ui/static/aura.svg"
        class="aura-config-page-central-aura-logo"
      />

      <div
        class="aura-config-page-status-side right-side status-side-hidden"
        id="rightStatusContainer"
      >
        <div class="aura-config-page-status-el">
          <p class="version-type">Hugo</p>
          <p class="version-content" id="hugoVersion">
            v{{ versionInfo.hugo }}
          </p>
        </div>
        <hr class="aura-config-hr-vertical" />
        <div class="aura-config-page-status-el">
          <p class="version-type">Aura</p>
          <p class="version-content" id="auraVersion">
            v{{ versionInfo.aura }}
          </p>
        </div>
      </div>
    </div>
    <div class="status-description-hidden aura-config-page-status-description">
      <i class="layui-icon layui-icon-ok" style="font-size: 24px"></i>
      <p>HugoAura 正常运行中</p>
    </div>
  </div>

  <div class="aura-config-page-operation-area">
    <div class="aura-config-page-subpage-container"></div>
    <div class="aura-config-page-operation-container">
      <div class="acp-config-status-notify hidden fully-hidden">
        <div class="acp-config-status-notify-area">
          <div class="acp-config-status-notify-main-content">
            <i class="layui-icon layui-icon-component acsn-main-icon"></i>
            <p class="acsn-main-title">修改的配置暂未保存</p>
            <button
              type="button"
              class="btn btn-outline-primary btn-sm acsn-save-btn"
              onclick="window.__HUGO_AURA_UI_FUNCTIONS__.config.handleSaveConfig()"
            >
              保存配置
            </button>
          </div>

          <div
            class="acp-config-status-notify-success acsn-success-hidden acsn-success-fully-hidden"
          >
            <i class="layui-icon layui-icon-release"></i>
            <p>保存成功</p>
          </div>
        </div>
      </div>
      <div
        class="operation-el-hidden aura-config-page-operation-el"
        onclick="window.__HUGO_AURA_UI_FUNCTIONS__.config.toggleSubConfig('disableLimitations', true)"
      >
        <div class="aura-config-page-operation-body">
          <img src="../../aura/ui/static/config/no_limitations.svg" />
          <div>
            <p class="config-operation-title">限制解除</p>
            <p class="config-operation-description">禁用密码、关闭功能</p>
          </div>
        </div>
      </div>
      <div
        class="operation-el-hidden aura-config-page-operation-el"
        aura-disabled="true"
      >
        <!-- Still WIP -->
        <!-- onclick="window.__HUGO_AURA_UI_FUNCTIONS__.config.toggleSubConfig('behaviourCtrl', true)" -->
        <div class="aura-config-page-operation-body">
          <img src="../../aura/ui/static/config/behaviour_mon.svg" />
          <div>
            <p class="config-operation-title">行为管控</p>
            <p class="config-operation-description">窥屏提醒、数据欺骗</p>
          </div>
        </div>
      </div>
      <div
        class="operation-el-hidden aura-config-page-operation-el"
        aura-disabled="true"
      >
        <div class="aura-config-page-operation-body">
          <img src="../../aura/ui/static/config/plugin.svg" />
          <div>
            <p class="config-operation-title">插件管理</p>
            <p class="config-operation-description">插件列表、安装插件</p>
          </div>
        </div>
      </div>
      <div
        class="operation-el-hidden aura-config-page-operation-el"
        onclick="window.__HUGO_AURA_UI_FUNCTIONS__.config.toggleSubConfig('preferences', true)"
      >
        <div class="aura-config-page-operation-body">
          <img src="../../aura/ui/static/config/about.svg" />
          <div>
            <p class="config-operation-title">偏好设置</p>
            <p class="config-operation-description">Aura 设置、关于项目</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="aura-config-page-auth-dialog-area acp-ada-hidden"
    style="display: none"
    aura-cancel="true"
  >
    <div class="aura-config-page-auth-dialog">
      <p class="acp-auth-dialog-title">验证您的身份</p>

      <input
        type="password"
        class="form-control"
        placeholder="请输入密码..."
        aria-label="Aura Password"
        id="acp-auth-user-input"
      />

      <div class="acp-auth-btns-container">
        <button
          class="acp-auth-cancel-btn"
          onclick="global.__HUGO_AURA_UI_FUNCTIONS__.config.handleNavBack()"
        >
          <i class="layui-icon layui-icon-return"></i>
        </button>

        <button
          class="acp-auth-confirm-btn"
          onclick="global.__HUGO_AURA_UI_FUNCTIONS__.config.verifyAuthPassword()"
        >
          <i class="layui-icon layui-icon-ok"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="aura-config-page-toast-area">
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div
        id="reloadNotifyToast"
        class="toast"
        aria-atomic="true"
        data-bs-autohide="false"
      >
        <div class="toast-header">
          <i class="layui-icon layui-icon-tips"></i>
          <strong class="me-auto">重载页面以应用设置</strong>
        </div>
        <div class="toast-body">
          <p>请重载当前窗口以应用修改的设置</p>
          <p>已修改的配置将自动保存</p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
            onclick="(() => {
              global.__HUGO_AURA_CONFIG_MGR__.writeConfig(global.__HUGO_AURA_CONFIG__);
              window.location.reload();
            })()"
          >
            重载页面
          </button>
        </div>
      </div>
    </div>

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div
        id="relaunchNotifyToast"
        class="toast acp-toast-emerg"
        aria-atomic="true"
        data-bs-autohide="false"
      >
        <div class="toast-header">
          <i class="layui-icon layui-icon-tips"></i>
          <strong class="me-auto">重启进程以应用设置</strong>
        </div>
        <div class="toast-body">
          <p>请重启 Electron 进程以应用修改的设置</p>
          <p>已修改的配置将自动保存</p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
            onclick="(() => {
              global.__HUGO_AURA_CONFIG_MGR__.writeConfig(global.__HUGO_AURA_CONFIG__);
              ipcRenderer.invoke('$aura.base.restartApplication')
            })()"
          >
            重启进程
          </button>
        </div>
      </div>
    </div>

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div
        id="relaunchPlsNotifyToast"
        class="toast acp-toast-emerg"
        aria-atomic="true"
        data-bs-autohide="false"
      >
        <div class="toast-header">
          <i class="layui-icon layui-icon-tips"></i>
          <strong class="me-auto">重启 PLS 进程以应用设置</strong>
        </div>
        <div class="toast-body">
          <p>请重启 PLS 进程以应用修改的设置</p>
          <p>已修改的配置将自动保存</p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
            id="plsRelaunchBtn"
            onclick="ipcRenderer.invoke('$aura.pls.relaunchPls')"
          >
            重启进程
          </button>
        </div>
      </div>
    </div>
  </div>
</div>