[✨ Feat] Add AppBar buttons pos customize options

1. [+] 允许用户自定义应用栏上操作类按钮的位置

src/aura/init/shared/default.json

@@ -30,7 +30,11 @@
     "settingsPasswordEnabled": false,
     "settingsPasswordWithSalt": "32703D292460CC9A3B867494D6AD9A8E4A3ADF0FAA4D6867BC4D412CC3927D02E47C6D0B1763BB53E57B2241C6193433561CDA09D7C48CA03983072B876F0965",
     "encryptConfig": false,
-    "appearance": {},
+    "appearance": {
+      "appBar": {
+        "actionBtnsOnRight": false
+      }
+    },
     "uiAccessMethod": {
       "showEntryIcon": true,
       "fallbackAccessMethods": {

src/aura/ui/pages/config/config.html

@@ -13,18 +13,24 @@
         <!-- Chevron Left Icon -->
       </div>
       <p>雨光之环</p>
-      <div class="aura-config-page-app-bar-hr-vertical"></div>
+      <div class="aura-config-page-app-bar-hr-vertical" id="auraConfigPageAppBarVerticalHr"></div>
+      <div class="aura-config-page-app-bar-spacer space-none"></div>
       <div
         onclick="global.__HUGO_AURA_UI_FUNCTIONS__.config.handleNavHome()"
-        style="-webkit-app-region: no-drag; z-index: 2000; margin-left: 6px"
+        style="
+          -webkit-app-region: no-drag;
+          z-index: 2000;
+          margin-left: 6px;
+          margin-right: 0.5rem;
+        "
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="21"
-          height="21"
+          width="22"
+          height="22"
           viewBox="0 0 24 24"
           class="iconfont"
-          style="margin-top: -1.5px"
+          style="margin-top: -1.35px"
         >
           <path
             fill="currentColor"

src/aura/ui/pages/config/config.js

@@ -294,6 +294,27 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
       // TODO: Error handling
     }
   },
+
+  initCustomUIProps: async (refresh = false) => {
+    const verticalHrEl = document.getElementById(
+      "auraConfigPageAppBarVerticalHr"
+    );
+    const spacerElArr = document.getElementsByClassName(
+      "aura-config-page-app-bar-spacer"
+    );
+    if (
+      global.__HUGO_AURA_CONFIG__.auraSettings.appearance.appBar
+        .actionBtnsOnRight
+    ) {
+      verticalHrEl.classList.add("hidden");
+      spacerElArr[0].classList.remove("space-none");
+      spacerElArr[1].classList.add("space-none");
+    } else if (refresh) {
+      verticalHrEl.classList.remove("hidden");
+      spacerElArr[0].classList.add("space-none");
+      spacerElArr[1].classList.remove("space-none");
+    }
+  },
 };
 
 (() => {
@@ -391,6 +412,7 @@ global.__HUGO_AURA_UI_FUNCTIONS__.config = {
   };
 
   const onMounted = () => {
+    global.__HUGO_AURA_UI_FUNCTIONS__.config.initCustomUIProps();
     applyVersionInfo();
 
     showAnimation();

src/aura/ui/pages/config/css/header.css

@@ -58,6 +58,10 @@
   flex-grow: 1;
 }
 
+.aura-config-page-app-bar-spacer.space-none {
+  flex-grow: 0;
+}
+
 .aura-config-page-app-bar-hr-vertical {
   position: relative;
   margin-left: 8px;
@@ -66,3 +70,7 @@
   height: 12px;
   transition: background 0.5s;
 }
+
+.aura-config-page-app-bar-hr-vertical.hidden {
+  display: none;
+}

src/aura/ui/pages/configSubPages/preferences/settings/aura.js

@@ -441,6 +441,35 @@ const auraSettings = [
       },
     ],
   },
+  {
+    id: 2,
+    categoryName: "外观",
+    child: [
+      {
+        index: 0,
+        id: "actionBtnsOnRight",
+        type: "switch",
+        name: "顶栏操作类按钮右置",
+        description: "启用后, 顶栏的<b>返回首页按钮</b>将靠右放置",
+        restart: false,
+        reload: false,
+        auraIf: () => {
+          return true;
+        },
+        defaultValue: false,
+        valueGetter: () => {
+          return global.__HUGO_AURA_CONFIG__.auraSettings.appearance.appBar
+            .actionBtnsOnRight;
+        },
+        callbackFn: async (newVal) => {
+          if (typeof newVal !== "boolean") return;
+          global.__HUGO_AURA_CONFIG__.auraSettings.appearance.appBar.actionBtnsOnRight =
+            newVal;
+          global.__HUGO_AURA_UI_FUNCTIONS__.config.initCustomUIProps(true);
+        },
+      },
+    ],
+  },
 ];
 
 module.exports = { auraSettings };