[Feat] New settings passwd UX & Config enc support

2026-06-22 08:14:26 +08:00 · 2025-06-05 00:35:50 +08:00
parent fbc5cf1f57
commit 7c8d3d4fbc
33 changed files with 2006 additions and 675 deletions
--- a/src/aura/ui/composables/settingsRenderer.js
+++ b/src/aura/ui/composables/settingsRenderer.js
@@ -141,9 +141,9 @@ const settingsRenderer = (pendingEl, settingsObj, isPls = false) => {
            const elValue = entry.valueGetter();
            switchEl.value = elValue;
            switchEl.checked = elValue;
-            switchEl.addEventListener("change", (event) => {
+            switchEl.addEventListener("change", async (event) => {
              showToast(entry);
-              entry.callbackFn(event.target.checked);
+              await entry.callbackFn(event.target.checked);
            });
            entryOperationArea.classList.add("form-check", "form-switch");
            entryOperationArea.appendChild(switchEl);
@@ -167,10 +167,10 @@ const settingsRenderer = (pendingEl, settingsObj, isPls = false) => {
                template
              )}`;
              radioEl.checked = template === elValue ? true : false;
-              radioEl.addEventListener("change", (event) => {
+              radioEl.addEventListener("change", async (event) => {
                if (event.target.checked) {
                  showToast(entry);
-                  entry.callbackFn(event.target.value);
+                  await entry.callbackFn(event.target.value);
                }
              });
              inlineContainerEl.appendChild(radioEl);
@@ -192,8 +192,8 @@ const settingsRenderer = (pendingEl, settingsObj, isPls = false) => {
            inputEl.value = entry.valueGetter();
            inputEl.placeholder = entry.placeHolder;
            inputEl.id = entry.id;
-            inputEl.addEventListener("change", (event) => {
-              const result = entry.callbackFn(event.target.value);
+            inputEl.addEventListener("change", async (event) => {
+              const result = await entry.callbackFn(event.target.value);
              const success = result.valid;
              if (success) {
                showToast(entry);
--- a/src/aura/ui/pages/config/config.css
+++ b/src/aura/ui/pages/config/config.css
@@ -1,486 +1,27 @@
 /* General */

-#aura-container-Aura-UI-Assistant-Config {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 1000;
-}
-
-.aura-config-page-root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: url("../../../../app.asar/public/ae247697b4639c92bd008d0ea7d13b53.png");
-  /* 这里不用 background-size: cover; 的效果反而更舒服一些... */
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  opacity: 1;
-  transform: scale(1);
-
-  transition: all 0.5s;
-}
-
-.aura-config-page-root-inactive {
-  opacity: 0;
-  transform: scale(1.5);
-}
+@import url("./css/general.css");

 /* Header */

-.aura-config-page-header-area {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  width: 100%;
-  padding-left: 8px;
-  padding-right: 8px;
-  color: white;
-  z-index: 12000;
-
-  opacity: 1;
-  transform: translateY(0);
-
-  transition: all 0.5s;
-}
-
-.aura-config-page-header-area .iconfont {
-  font-size: 24px;
-
-  transition: all 0.25s;
-}
-
-.aura-config-page-header-area .iconfont:hover {
-  opacity: 0.75;
-  cursor: pointer;
-}
-
-.aura-config-page-header-area .iconfont:active {
-  opacity: 0.375;
-}
-
-.aura-config-page-header-area p {
-  margin-top: -2px;
-}
-
-.aura-config-page-header-area.header-collapsed {
-  transform: translateY(-1rem);
-  opacity: 0;
-}
-
-.aura-config-page-app-bar {
-  height: 40px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-}
+@import url("./css/header.css");

 /* Status */

-.aura-config-page-status-container {
-  flex: 1;
-  width: 100%;
-  align-self: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  opacity: 1;
-
-  transition: all 0.5s;
-}
-
-.aura-config-page-status-container-hidden {
-  position: absolute;
-  opacity: 0;
-}
-
-.aura-config-page-status-main,
-.aura-config-page-status-description {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-
-.aura-config-page-status-description {
-  margin-top: 0.5rem;
-  transform: translateY(0);
-  opacity: 1;
-
-  transition: all 0.5s;
-}
-
-.aura-config-page-status-description.status-description-hidden {
-  transform: translateY(-2rem);
-  opacity: 0;
-}
-
-.aura-config-page-status-description p {
-  font-size: 18px;
-  margin-left: 15px;
-  margin-top: -2px;
-  color: white;
-  font-family: "Consolas", "Microsoft YaHei", sans-serif;
-}
-
-.aura-config-page-status-description i {
-  color: white;
-}
-
-.aura-config-page-central-aura-logo {
-  margin: 0.5rem 3rem;
-  width: 17.5%;
-}
-
-.aura-config-hr-vertical {
-  height: 3.75rem;
-  width: 1px;
-  background-color: rgba(255, 255, 255, 0.3);
-  margin-left: 30px;
-  margin-right: 30px;
-  border: none;
-}
-
-.aura-config-page-status-el {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: "Consolas", monospace;
-  color: white;
-
-  /*
-  .version-type {
-    content: "I want to use scss plz 😇"
-  }
-  */
-}
-
-.aura-config-page-status-side {
-  height: 30%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1;
-
-  transform: translateX(0);
-  opacity: 1;
-
-  transition: transform 0.5s, opacity 0.5s;
-}
-
-.aura-config-page-status-side.left-side {
-  justify-content: flex-end;
-}
-
-.aura-config-page-status-side.left-side.status-side-hidden {
-  transform: translateX(5rem);
-  opacity: 0;
-}
-
-.aura-config-page-status-side.right-side {
-  justify-content: flex-start;
-}
-
-.aura-config-page-status-side.right-side.status-side-hidden {
-  transform: translateX(-5rem);
-  opacity: 0;
-}
-
-.aura-config-page-status-el .version-type {
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.aura-config-page-status-el .version-content {
-  font-size: 16px;
-  margin-top: 5px;
-  opacity: 0.625;
-}
+@import url("./css/status.css");

 /* Operation */

-.aura-config-page-operation-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  flex: 1;
-  width: 100%;
-  overflow-y: auto;
-}
+@import url("./css/operation.css");

-.aura-config-page-operation-area::-webkit-scrollbar {
-  display: none;
-}
+/* Config Status Notify */

-.aura-config-page-operation-area.subpage-expanded {
-  flex: 15;
-}
-
-.aura-config-page-subpage-container {
-  width: 100%;
-  height: 0;
-  background-color: rgba(255, 255, 255, 0.825);
-  z-index: 6000;
-  overflow-y: scroll;
-
-  opacity: 0;
-
-  transition: all 0.5s;
-}
-
-.aura-config-page-subpage-container::-webkit-scrollbar {
-  display: none;
-}
-
-.aura-config-page-operation-area.subpage-expanded
-  .aura-config-page-subpage-container {
-  height: calc(100% - 40px - 4rem);
-  opacity: 1;
-}
-
-.aura-config-page-operation-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.aura-config-page-operation-container.hide-other-operations
-  .aura-config-page-operation-el:not(.preserve-operation) {
-  max-width: 0;
-  opacity: 0;
-}
-
-.aura-config-page-operation-container.hide-other-operations
-  .aura-config-page-operation-el.preserve-operation {
-  flex: 0.25;
-}
-
-.aura-config-page-operation-el {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  overflow: hidden;
-  white-space: nowrap;
-
-  max-width: 25%;
-  opacity: 1;
-  transform: translateY(0);
-
-  transition: opacity 0.5s, transform 0.5s,
-    max-width cubic-bezier(0, 0.42, 0.18, 1) 0.5s;
-}
-
-.aura-config-page-operation-el.operation-el-show:hover {
-  cursor: pointer;
-}
-
-.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:hover {
-  cursor: not-allowed;
-}
-
-.aura-config-page-operation-el.operation-el-hidden {
-  transform: translateY(2rem);
-  opacity: 0;
-}
-
-.aura-config-page-operation-el.operation-el-show
-  .aura-config-page-operation-body {
-  opacity: 1;
-  transition: opacity 0.25s;
-}
-
-.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]
-  .aura-config-page-operation-body {
-  transition: opacity 0.5s;
-}
-
-.aura-config-page-operation-el.operation-el-show:not(.preserve-operation):hover
-  .aura-config-page-operation-body {
-  opacity: 0.625;
-}
-
-.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:hover
-  .aura-config-page-operation-body {
-  opacity: 0.25;
-}
-
-.aura-config-page-operation-el.operation-el-show:not(.preserve-operation):active
-  .aura-config-page-operation-body {
-  opacity: 0.25;
-}
-
-.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]::after {
-  content: "别急嘛, 还在开发呢...";
-  font-size: 16px;
-  opacity: 0;
-  color: white;
-  position: absolute;
-
-  transition: all 0.5s;
-}
-
-.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:hover::after,
-.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:active::after {
-  opacity: 1;
-}
-
-.aura-config-page-operation-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.aura-config-page-operation-el img {
-  max-width: 40px;
-  margin-right: 20px;
-}
-
-.aura-config-page-operation-el .config-operation-title {
-  color: white;
-  font-size: large;
-}
-
-.aura-config-page-operation-el .config-operation-description {
-  color: white;
-  opacity: 0.75;
-  font-size: small;
-}
+@import url("./css/configStatusNotify.css");

 /* Auth Dialog */

-.aura-config-page-auth-dialog-area {
-  position: absolute;
-  height: calc(100% - 40px);
-  width: 100%;
-  top: 40px;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10000;
-  background-color: rgba(255, 255, 255, 0.35);
-
-  opacity: 1;
-  transition: all 0.5s;
-}
-
-.aura-config-page-auth-dialog-area.blur-enabled {
-  height: 100%;
-  top: 0;
-  background-color: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(5px);
-  filter: blur(0.1px);
-  /* ↑ 似乎会导致性能问题 */
-}
-
-.acp-ada-hidden {
-  opacity: 0;
-}
-
-.acp-ada-hidden.blur-enabled {
-  backdrop-filter: blur(0.1px);
-  filter: unset;
-}
-
-.aura-config-page-auth-dialog {
-  height: 40%;
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.625);
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  align-items: center;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.acp-auth-dialog-title {
-  font-size: x-large;
-  margin-bottom: 1.5rem;
-}
-
-#acp-auth-user-input {
-  max-width: 50%;
-  /* background-color: rgba(255, 255, 255, 0.5); */
-  border-radius: 35px;
-  margin-bottom: 2rem;
-}
-
-#acp-auth-user-input.invalid {
-  animation: invalidShake 0.6s linear;
-}
-
-.acp-auth-confirm-btn {
-  background-color: transparent;
-  border-radius: 35px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  padding: 0.5rem;
-}
-
-.acp-auth-confirm-btn .layui-icon {
-  font-size: 24px;
-  margin-left: 2px;
-}
+@import url("./css/authDialog.css");

 /* Toast */

-.aura-config-page-toast-area {
-  z-index: 9000;
-}
-
-.aura-config-page-toast-area .toast {
-  --bs-toast-border-width: 0 !important;
-  --bs-toast-bg: #fff !important;
-}
-
-.aura-config-page-toast-area .toast-header {
-  background-color: rgb(255, 234, 202);
-
-  border-top-left-radius: var(--bs-toast-border-radius);
-  border-top-right-radius: var(--bs-toast-border-radius);
-}
-
-.aura-config-page-toast-area .toast.acp-toast-emerg .toast-header {
-  background-color: rgb(255, 202, 202);
-}
-
-.aura-config-page-toast-area .toast-header * {
-  color: rgba(234, 126, 14, 0.85);
-}
-
-.aura-config-page-toast-area .toast.acp-toast-emerg .toast-header * {
-  color: rgba(234, 65, 14, 0.85);
-}
-
-.aura-config-page-toast-area .toast-body p {
-  margin-bottom: var(--bs-toast-padding-x);
-}
-
-.aura-config-page-toast-area .toast-header .layui-icon {
-  font-weight: bolder;
-  margin-right: 0.5rem;
-  font-size: 18px;
-}
+@import url("./css/toast.css");
--- a/src/aura/ui/pages/config/config.html
+++ b/src/aura/ui/pages/config/config.html
@@ -1,4 +1,8 @@
-<div class="aura-config-page-root-inactive aura-config-page-root">
+<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
@@ -66,6 +70,28 @@
  <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)"
@@ -122,6 +148,7 @@
  <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>
@@ -134,12 +161,21 @@
        id="acp-auth-user-input"
      />

-      <button
-        class="acp-auth-confirm-btn"
-        onclick="global.__HUGO_AURA_UI_FUNCTIONS__.config.verifyAuthPassword()"
-      >
-        <i class="layui-icon layui-icon-right"></i>
-      </button>
+      <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>

@@ -157,10 +193,14 @@
        </div>
        <div class="toast-body">
          <p>请重载当前窗口以应用修改的设置</p>
+          <p>已修改的配置将自动保存</p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
-            onclick="window.location.reload()"
+            onclick="(() => {
+              global.__HUGO_AURA_CONFIG_MGR__.writeConfig(global.__HUGO_AURA_CONFIG__);
+              window.location.reload();
+            })()"
          >
            重载页面
          </button>
@@ -181,10 +221,14 @@
        </div>
        <div class="toast-body">
          <p>请重启 Electron 进程以应用修改的设置</p>
+          <p>已修改的配置将自动保存</p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
-            onclick="ipcRenderer.invoke('$aura.base.restartApplication')"
+            onclick="(() => {
+              global.__HUGO_AURA_CONFIG_MGR__.writeConfig(global.__HUGO_AURA_CONFIG__);
+              ipcRenderer.invoke('$aura.base.restartApplication')
+            })()"
          >
            重启进程
          </button>
@@ -205,6 +249,7 @@
        </div>
        <div class="toast-body">
          <p>请重启 PLS 进程以应用修改的设置</p>
+          <p>已修改的配置将自动保存</p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
--- a/src/aura/ui/pages/config/config.js
+++ b/src/aura/ui/pages/config/config.js
@@ -2,11 +2,23 @@ global.__HUGO_AURA_UI_REACTIVES__.config = {
  isInSubPage: false,
  currentActiveSubPage: "",
  authenticated: false,
+  isConfigPendingWrite: false,
 };

 global.__HUGO_AURA_UI_FUNCTIONS__.config = {
  handleNavBack: () => {
    if (global.__HUGO_AURA_UI_REACTIVES__.config.isInSubPage) {
+      const acsDialogAreaEl = document.getElementsByClassName(
+        "aura-config-page-auth-dialog-area"
+      )[0];
+      if (!Array.from(acsDialogAreaEl.classList).includes("acp-ada-hidden")) {
+        global.__HUGO_AURA_UI_FUNCTIONS__.config.hideAndResetAuthDialog();
+        return;
+      }
+
+      if (global.__HUGO_AURA_UI_REACTIVES__.config.isConfigPendingWrite) {
+        global.__HUGO_AURA_UI_FUNCTIONS__.config.handleSaveConfig();
+      }
      global.__HUGO_AURA_UI_FUNCTIONS__.config.toggleSubConfig(
        global.__HUGO_AURA_UI_REACTIVES__.config.currentActiveSubPage,
        false
@@ -156,13 +168,8 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
      encPasswd ===
      global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordWithSalt
    ) {
-      const acsDialogAreaEl = document.getElementsByClassName(
-        "aura-config-page-auth-dialog-area"
-      )[0];
-      acsDialogAreaEl.classList.add("acp-ada-hidden");
-      await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
-      acsDialogAreaEl.style = "display: none;";
-      await window.__HUGO_AURA_GLOBAL__.utils.sleep(250);
+      await global.__HUGO_AURA_UI_FUNCTIONS__.config.hideAndResetAuthDialog();
+      await global.__HUGO_AURA_GLOBAL__.utils.sleep(250);
      global.__HUGO_AURA_UI_REACTIVES__.config.authenticated = true;
      global.__HUGO_AURA_UI_FUNCTIONS__.config.showSecondPhaseAnim();
      return true;
@@ -171,6 +178,91 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
      return false;
    }
  },
+
+  hideAndResetAuthDialog: async () => {
+    const acsDialogAreaEl = document.getElementsByClassName(
+      "aura-config-page-auth-dialog-area"
+    )[0];
+    const acpAppBarEl = document.getElementsByClassName(
+      "aura-config-page-header-area"
+    )[0];
+    const acpDialogTitleEl = document.getElementsByClassName(
+      "acp-auth-dialog-title"
+    )[0];
+    const acpDialogConfirmBtnEl = document.getElementsByClassName(
+      "acp-auth-confirm-btn"
+    )[0];
+    const acpDialogCancelBtnEl = document.getElementsByClassName(
+      "acp-auth-cancel-btn"
+    )[0];
+    const inputEl = document.getElementById("acp-auth-user-input");
+    acsDialogAreaEl.classList.add("acp-ada-hidden");
+    acpAppBarEl.classList.remove("color-reverse");
+    await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
+    acsDialogAreaEl.style = "display: none;";
+    acpDialogTitleEl.textContent = "验证您的身份";
+    inputEl.value = "";
+    inputEl.classList.remove("invalid");
+    inputEl.classList.remove("is-invalid");
+    acpDialogConfirmBtnEl.onclick = (_evt) => {
+      global.__HUGO_AURA_UI_FUNCTIONS__.config.verifyAuthPassword();
+    };
+    acpDialogCancelBtnEl.onclick = (_evt) => {
+      global.__HUGO_AURA_UI_FUNCTIONS__.config.handleNavBack();
+    };
+  },
+
+  handleACSNShow: async () => {
+    const acsnRootEl = document.getElementsByClassName(
+      "acp-config-status-notify"
+    )[0];
+    acsnRootEl.classList.remove("fully-hidden");
+    await global.__HUGO_AURA_GLOBAL__.utils.sleep(10);
+    acsnRootEl.classList.remove("hidden");
+    return true;
+  },
+
+  handleSaveConfig: async () => {
+    const result = global.__HUGO_AURA_CONFIG_MGR__.writeConfig(
+      global.__HUGO_AURA_CONFIG__
+    );
+
+    if (result) {
+      global.__HUGO_AURA_UI_REACTIVES__.config.isConfigPendingWrite = false;
+      const acsnRootEl = document.getElementsByClassName(
+        "acp-config-status-notify"
+      )[0];
+      const acsnMainContentEl = document.getElementsByClassName(
+        "acp-config-status-notify-main-content"
+      )[0];
+      const acsnSuccessEl = document.getElementsByClassName(
+        "acp-config-status-notify-success"
+      )[0];
+      const acsnAreaEl = document.getElementsByClassName(
+        "acp-config-status-notify-area"
+      )[0];
+      acsnMainContentEl.classList.add("acsn-main-content-hidden");
+      acsnAreaEl.classList.add("transparent");
+      await global.__HUGO_AURA_GLOBAL__.utils.sleep(250);
+      acsnMainContentEl.classList.add("acsn-main-content-fully-hidden");
+      acsnSuccessEl.classList.remove("acsn-success-fully-hidden");
+      await global.__HUGO_AURA_GLOBAL__.utils.sleep(50);
+      acsnSuccessEl.classList.remove("acsn-success-hidden");
+      await global.__HUGO_AURA_GLOBAL__.utils.sleep(1500);
+      acsnRootEl.classList.add("hidden");
+      await global.__HUGO_AURA_GLOBAL__.utils.sleep(500);
+      acsnRootEl.classList.add("fully-hidden");
+      await global.__HUGO_AURA_GLOBAL__.utils.sleep(10);
+      // Reset class
+      acsnMainContentEl.className = "acp-config-status-notify-main-content";
+      acsnAreaEl.className = "acp-config-status-notify-area";
+      acsnSuccessEl.className =
+        "acp-config-status-notify-success acsn-success-hidden acsn-success-fully-hidden";
+      return true;
+    } else {
+      // TODO: Error handling
+    }
+  },
 };

 (() => {
@@ -237,15 +329,13 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
      const acsDialogAreaEl = document.getElementsByClassName(
        "aura-config-page-auth-dialog-area"
      )[0];
+      const acpAppBarEl = document.getElementsByClassName(
+        "aura-config-page-header-area"
+      )[0];
      acsDialogAreaEl.style = "";
-      if (
-        global.__HUGO_AURA_CONFIG__.auraSettings.appearance
-          .enablePasswdDialogBlur
-      ) {
-        acsDialogAreaEl.classList.add("blur-enabled");
-      }
      await window.__HUGO_AURA_GLOBAL__.utils.sleep(500);
      acsDialogAreaEl.classList.remove("acp-ada-hidden");
+      acpAppBarEl.classList.add("color-reverse");
    }
  };

--- a/src/aura/ui/pages/config/css/authDialog.css
+++ b/src/aura/ui/pages/config/css/authDialog.css
@@ -0,0 +1,95 @@
+.aura-config-page-auth-dialog-area {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  background-color: rgba(255, 255, 255, 0.5);
+
+  opacity: 1;
+  transition: all 0.5s;
+}
+
+.acp-ada-hidden {
+  opacity: 0;
+}
+
+.aura-config-page-auth-dialog {
+  height: 40%;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.75);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.acp-auth-dialog-title {
+  font-size: x-large;
+  margin-bottom: 1.5rem;
+}
+
+#acp-auth-user-input {
+  max-width: 50%;
+  /* background-color: rgba(255, 255, 255, 0.5); */
+  border-radius: 35px;
+  margin-bottom: 2rem;
+}
+
+#acp-auth-user-input.invalid {
+  animation: invalidShake 0.6s linear;
+}
+
+.acp-auth-btns-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.acp-auth-btns-container button {
+  transition: all 0.25s;
+}
+
+.acp-auth-btns-container button:hover {
+  opacity: 0.5;
+}
+
+.acp-auth-btns-container button:active {
+  opacity: 0.25;
+}
+
+.acp-auth-confirm-btn,
+.acp-auth-cancel-btn {
+  border-radius: 35px;
+  padding: 0.5rem;
+}
+
+.acp-auth-confirm-btn {
+  background: linear-gradient(135deg, #218fff 0%, #3fbaff 100%);
+  border: 0;
+}
+
+.acp-auth-confirm-btn .layui-icon {
+  font-size: 24px;
+  color: white;
+}
+
+.acp-auth-cancel-btn .layui-icon {
+  font-size: 24px;
+}
+
+.acp-auth-cancel-btn {
+  background-color: transparent;
+  margin-right: 3rem;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.aura-config-page-auth-dialog-area[aura-cancel="false"] .acp-auth-cancel-btn {
+  display: none;
+}
--- a/src/aura/ui/pages/config/css/configStatusNotify.css
+++ b/src/aura/ui/pages/config/css/configStatusNotify.css
@@ -0,0 +1,114 @@
+.acp-config-status-notify {
+  position: absolute;
+  height: calc(40px + 4rem);
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+  filter: blur(0.1px);
+  z-index: 15000;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: all 0.5s;
+}
+
+.acp-config-status-notify.hidden {
+  backdrop-filter: blur(0.1px);
+  filter: unset;
+  opacity: 0;
+}
+
+.acp-config-status-notify.fully-hidden {
+  display: none;
+}
+
+.acp-config-status-notify-area {
+  height: 100%;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  color: rgba(0, 0, 0, 0.6);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  transition: background-color 0.25s;
+}
+
+.acp-config-status-notify-area.transparent {
+  background-color: transparent;
+}
+
+.acp-config-status-notify-main-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  /* margin-bottom: 0.75rem; */
+
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.acp-config-status-notify-main-content.acsn-main-content-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.acp-config-status-notify-main-content.acsn-main-content-fully-hidden {
+  display: none;
+}
+
+.acp-config-status-notify-area .acsn-main-icon {
+  font-size: 24px;
+}
+
+.acp-config-status-notify-area .acsn-main-title {
+  font-size: large;
+  margin-left: 0.5rem;
+  margin-right: 2.25rem;
+}
+
+.acp-config-status-notify-area .acsn-save-btn {
+  margin-top: 2px; /* 可能是中文导致的 */
+
+  opacity: 1;
+  transition: all 0.25s;
+}
+
+.acp-config-status-notify-area .acsn-save-btn:active {
+  opacity: 0.625;
+}
+
+.acp-config-status-notify-success {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  color: white;
+
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.acp-config-status-notify-success.acsn-success-hidden {
+  opacity: 0;
+}
+
+.acp-config-status-notify-success.acsn-success-fully-hidden {
+  display: none;
+}
+
+.acp-config-status-notify-success .layui-icon {
+  font-size: 26px;
+}
+
+.acp-config-status-notify-success p {
+  font-size: large;
+  margin-top: 0.2rem;
+}
--- a/src/aura/ui/pages/config/css/general.css
+++ b/src/aura/ui/pages/config/css/general.css
@@ -0,0 +1,33 @@
+#aura-container-Aura-UI-Assistant-Config {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1000;
+}
+
+.aura-config-page-root {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: url("../../../../../app.asar/public/ae247697b4639c92bd008d0ea7d13b53.png");
+  /* 这里不用 background-size: cover; 的效果反而更舒服一些... */
+
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  opacity: 1;
+  transform: scale(1);
+
+  transition: all 0.5s;
+}
+
+.aura-config-page-root-inactive {
+  opacity: 0;
+  transform: scale(1.5);
+}
--- a/src/aura/ui/pages/config/css/header.css
+++ b/src/aura/ui/pages/config/css/header.css
@@ -0,0 +1,50 @@
+.aura-config-page-header-area {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 100%;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: white;
+  z-index: 12000;
+
+  opacity: 1;
+  transform: translateY(0);
+
+  transition: all 0.5s;
+}
+
+.aura-config-page-header-area.color-reverse {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.aura-config-page-header-area .iconfont {
+  font-size: 24px;
+}
+
+.aura-config-page-header-area .iconfont:hover {
+  opacity: 0.75;
+  cursor: pointer;
+}
+
+.aura-config-page-header-area .iconfont:active {
+  opacity: 0.375;
+}
+
+.aura-config-page-header-area p {
+  margin-top: -1px;
+}
+
+.aura-config-page-header-area.header-collapsed {
+  transform: translateY(-1rem);
+  opacity: 0;
+}
+
+.aura-config-page-app-bar {
+  height: 40px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+}
--- a/src/aura/ui/pages/config/css/operation.css
+++ b/src/aura/ui/pages/config/css/operation.css
@@ -0,0 +1,155 @@
+.aura-config-page-operation-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.aura-config-page-operation-area::-webkit-scrollbar {
+  display: none;
+}
+
+.aura-config-page-operation-area.subpage-expanded {
+  flex: 15;
+}
+
+.aura-config-page-subpage-container {
+  width: 100%;
+  height: 0;
+  background-color: rgba(255, 255, 255, 0.825);
+  z-index: 6000;
+  overflow-y: scroll;
+
+  opacity: 0;
+
+  transition: all 0.5s;
+}
+
+.aura-config-page-subpage-container::-webkit-scrollbar {
+  display: none;
+}
+
+.aura-config-page-operation-area.subpage-expanded
+  .aura-config-page-subpage-container {
+  height: calc(100% - 40px - 4rem);
+  opacity: 1;
+}
+
+.aura-config-page-operation-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.aura-config-page-operation-container.hide-other-operations
+  .aura-config-page-operation-el:not(.preserve-operation) {
+  max-width: 0;
+  opacity: 0;
+}
+
+.aura-config-page-operation-container.hide-other-operations
+  .aura-config-page-operation-el.preserve-operation {
+  flex: 0.25;
+}
+
+.aura-config-page-operation-el {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+
+  max-width: 25%;
+  opacity: 1;
+  transform: translateY(0);
+
+  transition: opacity 0.5s, transform 0.5s,
+    max-width cubic-bezier(0, 0.42, 0.18, 1) 0.5s;
+}
+
+.aura-config-page-operation-el.operation-el-show:hover {
+  cursor: pointer;
+}
+
+.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:hover {
+  cursor: not-allowed;
+}
+
+.aura-config-page-operation-el.operation-el-hidden {
+  transform: translateY(2rem);
+  opacity: 0;
+}
+
+.aura-config-page-operation-el.operation-el-show
+  .aura-config-page-operation-body {
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]
+  .aura-config-page-operation-body {
+  transition: opacity 0.5s;
+}
+
+.aura-config-page-operation-el.operation-el-show:not(.preserve-operation):hover
+  .aura-config-page-operation-body {
+  opacity: 0.625;
+}
+
+.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:hover
+  .aura-config-page-operation-body {
+  opacity: 0.25;
+}
+
+.aura-config-page-operation-el.operation-el-show:not(.preserve-operation):active
+  .aura-config-page-operation-body {
+  opacity: 0.25;
+}
+
+.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]::after {
+  content: "别急嘛, 还在开发呢...";
+  font-size: 16px;
+  opacity: 0;
+  color: white;
+  position: absolute;
+
+  transition: all 0.5s;
+}
+
+.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:hover::after,
+.aura-config-page-operation-el.operation-el-show[aura-disabled="true"]:active::after {
+  opacity: 1;
+}
+
+.aura-config-page-operation-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aura-config-page-operation-el img {
+  max-width: 40px;
+  margin-right: 20px;
+}
+
+.aura-config-page-operation-el .config-operation-title {
+  color: white;
+  font-size: large;
+}
+
+.aura-config-page-operation-el .config-operation-description {
+  color: white;
+  opacity: 0.75;
+  font-size: small;
+}
--- a/src/aura/ui/pages/config/css/status.css
+++ b/src/aura/ui/pages/config/css/status.css
@@ -0,0 +1,123 @@
+.aura-config-page-status-container {
+  flex: 1;
+  width: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  opacity: 1;
+
+  transition: all 0.5s;
+}
+
+.aura-config-page-status-container-hidden {
+  position: absolute;
+  opacity: 0;
+}
+
+.aura-config-page-status-main,
+.aura-config-page-status-description {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.aura-config-page-status-description {
+  margin-top: 0.5rem;
+  transform: translateY(0);
+  opacity: 1;
+
+  transition: all 0.5s;
+}
+
+.aura-config-page-status-description.status-description-hidden {
+  transform: translateY(-2rem);
+  opacity: 0;
+}
+
+.aura-config-page-status-description p {
+  font-size: 18px;
+  margin-left: 15px;
+  margin-top: -2px;
+  color: white;
+  font-family: "Consolas", "Microsoft YaHei", sans-serif;
+}
+
+.aura-config-page-status-description i {
+  color: white;
+}
+
+.aura-config-page-central-aura-logo {
+  margin: 0.5rem 3rem;
+  width: 17.5%;
+}
+
+.aura-config-hr-vertical {
+  height: 3.75rem;
+  width: 1px;
+  background-color: rgba(255, 255, 255, 0.3);
+  margin-left: 30px;
+  margin-right: 30px;
+  border: none;
+}
+
+.aura-config-page-status-el {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: "Consolas", monospace;
+  color: white;
+
+  /*
+  .version-type {
+    content: "I want to use scss plz 😇"
+  }
+  */
+}
+
+.aura-config-page-status-side {
+  height: 30%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+
+  transform: translateX(0);
+  opacity: 1;
+
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.aura-config-page-status-side.left-side {
+  justify-content: flex-end;
+}
+
+.aura-config-page-status-side.left-side.status-side-hidden {
+  transform: translateX(5rem);
+  opacity: 0;
+}
+
+.aura-config-page-status-side.right-side {
+  justify-content: flex-start;
+}
+
+.aura-config-page-status-side.right-side.status-side-hidden {
+  transform: translateX(-5rem);
+  opacity: 0;
+}
+
+.aura-config-page-status-el .version-type {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.aura-config-page-status-el .version-content {
+  font-size: 16px;
+  margin-top: 5px;
+  opacity: 0.625;
+}
--- a/src/aura/ui/pages/config/css/toast.css
+++ b/src/aura/ui/pages/config/css/toast.css
@@ -0,0 +1,37 @@
+.aura-config-page-toast-area {
+  z-index: 20000;
+}
+
+.aura-config-page-toast-area .toast {
+  --bs-toast-border-width: 0 !important;
+  --bs-toast-bg: #fff !important;
+}
+
+.aura-config-page-toast-area .toast-header {
+  background-color: rgb(255, 234, 202);
+
+  border-top-left-radius: var(--bs-toast-border-radius);
+  border-top-right-radius: var(--bs-toast-border-radius);
+}
+
+.aura-config-page-toast-area .toast.acp-toast-emerg .toast-header {
+  background-color: rgb(255, 202, 202);
+}
+
+.aura-config-page-toast-area .toast-header * {
+  color: rgba(234, 126, 14, 0.85);
+}
+
+.aura-config-page-toast-area .toast.acp-toast-emerg .toast-header * {
+  color: rgba(234, 65, 14, 0.85);
+}
+
+.aura-config-page-toast-area .toast-body p {
+  margin-bottom: var(--bs-toast-padding-x);
+}
+
+.aura-config-page-toast-area .toast-header .layui-icon {
+  font-weight: bolder;
+  margin-right: 0.5rem;
+  font-size: 18px;
+}
--- a/src/aura/ui/pages/configSubPages/behaviourCtrl/plsStatus.html
+++ b/src/aura/ui/pages/configSubPages/behaviourCtrl/plsStatus.html
@@ -1,7 +1,7 @@
 <div class="acs-behaviour-control-pls-status-page">
  <p class="acs-bc-pls-status-page-pls-description">
-    HugoAura ProxyLayerServices (Aura-PLS) 是基于 Python + MITMProxy 实现的代理服务,
-    用于解密并修改希沃基础服务 (SeewoCore) 的 MQTT 数据包,
+    HugoAura ProxyLayerServices (Aura-PLS) 是基于 Python + MITMProxy
+    实现的代理服务, 用于解密并修改希沃基础服务 (SeewoCore) 的 MQTT 数据包,
    实现行为监控、伪造上报等功能
  </p>
  <img
--- a/src/aura/ui/pages/configSubPages/disableLimitations/settings/audit.js
+++ b/src/aura/ui/pages/configSubPages/disableLimitations/settings/audit.js
@@ -8,7 +8,8 @@ const banAuditSettings = [
        id: "disableFridayReport",
        type: "switch",
        name: "禁用 Friday 错误统计",
-        description: "重置 CVTE 的 Friday 错误收集服务载入 URL, 避免意外的信息上传",
+        description:
+          "重置 CVTE 的 Friday 错误收集服务载入 URL, 避免意外的信息上传",
        restart: true,
        reload: false,
        associateVal: null,
@@ -39,7 +40,8 @@ const banAuditSettings = [
        restart: true,
        reload: false,
        tip: true,
-        tipTitle: '启用后, 可能造成部分操作出现较长延迟 (如冰点操作)。希沃管家会尝试五次上报, 均失败后才会进行下一步操作',
+        tipTitle:
+          "启用后, 可能造成部分操作出现较长延迟 (如冰点操作)。希沃管家会尝试五次上报, 均失败后才会进行下一步操作",
        associateVal: null,
        auraIf: () => true,
        defaultValue: false,
--- a/src/aura/ui/pages/configSubPages/disableLimitations/settings/auth.js
+++ b/src/aura/ui/pages/configSubPages/disableLimitations/settings/auth.js
@@ -225,8 +225,8 @@ const authSettings = [
        auraIf: () => {
          return (
            global.__HUGO_AURA_CONFIG__.rewrite["vendor/screenLock"].enabled &&
-            global.__HUGO_AURA_CONFIG__.rewrite["vendor/screenLock"].authRewriteType ===
-              "customActivationCode"
+            global.__HUGO_AURA_CONFIG__.rewrite["vendor/screenLock"]
+              .authRewriteType === "customActivationCode"
          );
        },
        defaultValue: "",
--- a/src/aura/ui/pages/configSubPages/preferences/settings/aura.js
+++ b/src/aura/ui/pages/configSubPages/preferences/settings/aura.js
@@ -1,3 +1,162 @@
+// @ts-check
+
+const functions = {
+  /**
+   *
+   * @param {"enc" | "update"} mode
+   * @param {SHA256EncryptedPassword | null} password
+   */
+  handleEnableConfigEncryption: async (mode, password) => {
+    let exiPassword = "";
+    if (!password) {
+      exiPassword =
+        global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordWithSalt;
+    }
+
+    switch (mode) {
+      case "enc":
+        ipcRenderer.invoke("$aura.config.setConfigEncSettings", {
+          target: true,
+        });
+        global.ipcRenderer.invoke("$aura.config.dispatchConfigFromRenderer", {
+          data: JSON.stringify(global.__HUGO_AURA_CONFIG__),
+        });
+        global.__HUGO_AURA_CONFIG_MGR__.encryptConfig(
+          global.__HUGO_AURA_CONFIG__,
+          password ? password : exiPassword
+        );
+        global.__HUGO_AURA_CONFIG_MGR__.saveEncPassword(
+          password ? password : exiPassword
+        );
+        break;
+      case "update":
+        const result = global.__HUGO_AURA_CONFIG_MGR__.switchToDecConfig(
+          global.__HUGO_AURA_CONFIG__,
+          null
+        );
+        if (result.success) {
+          ipcRenderer.invoke("$aura.config.setConfigEncSettings", {
+            target: true,
+          });
+          global.ipcRenderer.invoke("$aura.config.dispatchConfigFromRenderer", {
+            data: JSON.stringify(global.__HUGO_AURA_CONFIG__),
+          });
+          global.__HUGO_AURA_CONFIG_MGR__.encryptConfig(
+            global.__HUGO_AURA_CONFIG__,
+            password ? password : exiPassword
+          );
+          global.__HUGO_AURA_CONFIG_MGR__.saveEncPassword(
+            password ? password : exiPassword
+          );
+        } else {
+          // TODO: Error handling
+        }
+        break;
+    }
+  },
+
+  /**
+   *
+   * @param {SHA256EncryptedPassword} password
+   */
+  handle2ndPasswordPrompt: async (password) => {
+    const acsDialogAreaEl = document.getElementsByClassName(
+      "aura-config-page-auth-dialog-area"
+    )[0];
+    const acpAppBarEl = document.getElementsByClassName(
+      "aura-config-page-header-area"
+    )[0];
+    const acpDialogTitleEl = document.getElementsByClassName(
+      "acp-auth-dialog-title"
+    )[0];
+    const acpDialogConfirmBtnEl = document.getElementsByClassName(
+      "acp-auth-confirm-btn"
+    )[0];
+    const acpDialogCancelBtnEl = document.getElementsByClassName(
+      "acp-auth-cancel-btn"
+    )[0];
+    // @ts-expect-error
+    acsDialogAreaEl.style = "";
+    acpDialogTitleEl.textContent = "请再次输入密码";
+    await window.__HUGO_AURA_GLOBAL__.utils.sleep(50);
+    acpAppBarEl.classList.add("color-reverse");
+    acsDialogAreaEl.classList.remove("acp-ada-hidden");
+
+    const showFailedAnimation = async (el) => {
+      el.classList.remove("invalid");
+      await window.__HUGO_AURA_GLOBAL__.utils.sleep(50);
+      el.classList.add("invalid"); // Custom Anim
+      el.classList.add("is-invalid"); // Bootstrap
+    };
+
+    let resolveFn = null;
+    const awaitCompletePromise = new Promise((resolve) => {
+      resolveFn = resolve;
+    });
+
+    const handleExit = async () => {
+      const result = await awaitCompletePromise;
+      console.debug(result);
+      if (result) {
+        console.debug("ret true");
+        return { valid: true };
+      } else {
+        console.debug("ret false");
+        const inputEl = document.getElementById("auraSettingsPasswd");
+        // @ts-expect-error
+        inputEl.value = "";
+        return { valid: false, hint: "未能验证密码, 请重试" };
+      }
+    };
+
+    const verifyPassword = async (_clickEvt) => {
+      const inputEl = document.getElementById("acp-auth-user-input");
+      const acpDialogTitleEl = document.getElementsByClassName(
+        "acp-auth-dialog-title"
+      )[0];
+      // @ts-expect-error
+      const userPasswdInput = inputEl.value;
+      if (!userPasswdInput) {
+        showFailedAnimation(inputEl);
+        acpDialogTitleEl.textContent = "密码不能为空";
+      }
+
+      const crypto = require("crypto");
+      const encPasswd = crypto
+        .createHash("sha512")
+        .update(userPasswdInput + "EndlessX")
+        .digest("hex")
+        .toUpperCase();
+
+      if (encPasswd === password) {
+        await global.__HUGO_AURA_UI_FUNCTIONS__.config.hideAndResetAuthDialog();
+
+        global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordWithSalt =
+          password;
+        if (global.__HUGO_AURA_CONFIG__.auraSettings.encryptConfig) {
+          functions.handleEnableConfigEncryption("update", password);
+        }
+        if (resolveFn) resolveFn(true);
+        return;
+      } else {
+        showFailedAnimation(inputEl);
+        acpDialogTitleEl.textContent = "请再试一次";
+        return;
+      }
+    };
+
+    // @ts-expect-error
+    acpDialogConfirmBtnEl.onclick = verifyPassword;
+    // @ts-expect-error
+    acpDialogCancelBtnEl.onclick = (_evt) => {
+      if (resolveFn) resolveFn(false);
+      global.__HUGO_AURA_UI_FUNCTIONS__.config.handleNavBack();
+    };
+
+    return await handleExit();
+  },
+};
+
 const auraSettings = [
  {
    id: 0,
@@ -12,7 +171,7 @@ const auraSettings = [
        restart: false,
        reload: false,
        tip: true,
-        tipTitle: "在 0.1.1-beta 版本发布后, 启用访问密码将加密配置文件",
+        tipTitle: "启用访问密码将自动加密配置文件",
        associateVal: null,
        auraIf: () => true,
        defaultValue: false,
@@ -24,11 +183,58 @@ const auraSettings = [
          if (typeof newVal !== "boolean") return;
          global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordEnabled =
            newVal;
-          // TODO: Trigger enc config
+          if (
+            newVal &&
+            global.__HUGO_AURA_CONFIG__.auraSettings.encryptConfig
+          ) {
+            functions.handleEnableConfigEncryption("enc", null);
+          } else if (
+            !newVal &&
+            global.__HUGO_AURA_CONFIG__.auraSettings.encryptConfig
+          ) {
+            global.__HUGO_AURA_CONFIG_MGR__.switchToDecConfig(
+              global.__HUGO_AURA_CONFIG__,
+              null
+            );
+          }
        },
      },
      {
        index: 1,
+        id: "enableConfigEncryption",
+        type: "switch",
+        name: "加密配置文件",
+        description: "启用后, 本地配置文件将加密保存",
+        restart: false,
+        reload: false,
+        tip: true,
+        tipTitle: "配置文件将以 AES-256-GCM 加密算法在本地保存",
+        warning: true,
+        warningContent: "这可能导致性能问题",
+        associateVal: ["auraSettings.settingsPasswordEnabled"],
+        auraIf: () => {
+          return global.__HUGO_AURA_CONFIG__.auraSettings
+            .settingsPasswordEnabled;
+        },
+        defaultValue: false,
+        valueGetter: () => {
+          return global.__HUGO_AURA_CONFIG__.auraSettings.encryptConfig;
+        },
+        callbackFn: (newVal) => {
+          if (typeof newVal !== "boolean") return;
+          global.__HUGO_AURA_CONFIG__.auraSettings.encryptConfig = newVal;
+          if (newVal) {
+            functions.handleEnableConfigEncryption("enc", null);
+          } else {
+            global.__HUGO_AURA_CONFIG_MGR__.switchToDecConfig(
+              global.__HUGO_AURA_CONFIG__,
+              null
+            );
+          }
+        },
+      },
+      {
+        index: 2,
        id: "auraSettingsPasswd",
        type: "input",
        subType: "password",
@@ -48,7 +254,7 @@ const auraSettings = [
        valueGetter: () => {
          return "";
        },
-        callbackFn: (newVal) => {
+        callbackFn: async (newVal) => {
          if (newVal === "" || !newVal) return { valid: true };
          if (newVal.length < 8)
            return { valid: false, hint: "请输入至少 8 位密码" };
@@ -74,9 +280,8 @@ const auraSettings = [
            .update(newVal + "EndlessX")
            .digest("hex")
            .toUpperCase();
-          global.__HUGO_AURA_CONFIG__.auraSettings.settingsPasswordWithSalt =
-            result;
-          return { valid: true };
+
+          return await functions.handle2ndPasswordPrompt(result);
        },
      },
    ],
@@ -84,31 +289,7 @@ const auraSettings = [
  {
    id: 1,
    categoryName: "外观",
-    child: [
-      {
-        index: 0,
-        id: "enablePasswdDialogBlur",
-        type: "switch",
-        name: "密码验证框毛玻璃效果",
-        description: "启用后, 密码验证时, 背景将具有毛玻璃效果",
-        restart: false,
-        reload: false,
-        warning: true,
-        warningContent: "不建议在较旧 (如 i5 8 代) 机型上开启, 可能导致性能问题",
-        associateVal: null,
-        auraIf: () => true,
-        defaultValue: true,
-        valueGetter: () => {
-          return global.__HUGO_AURA_CONFIG__.auraSettings.appearance
-            .enablePasswdDialogBlur;
-        },
-        callbackFn: (newVal) => {
-          if (typeof newVal !== "boolean") return;
-          global.__HUGO_AURA_CONFIG__.auraSettings.appearance.enablePasswdDialogBlur =
-            newVal;
-        },
-      },
-    ],
+    child: [],
  },
 ];