From d0223d3e61ea2a348e3d493a6bf6dd7b67754276 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Mon, 23 Dec 2024 10:20:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=BB=E8=89=B2=E8=B0=83?=
 =?UTF-8?q?=E7=9A=84=E9=80=8F=E6=98=8E=E8=89=B2=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             | 30 ++++++++++++++++++-------
 src/components/menu/PersonalizeMenu.vue |  3 ---
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 388ff57..be692e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,8 +57,6 @@ export default defineComponent({
     },
     startUp() {
       this.loadProfile();
-      // 默认主题色
-      this.setCssVar("primary", this.profile.primaryColor);
       this.startUpOnce();
       this.utools.whole.onPluginEnter((enter) => {
         this.enterPlugin(enter);
@@ -239,17 +237,33 @@ export default defineComponent({
       this.utools.delAll("qc_default");
       this.utools.setStorage("st_v300Inited", true);
     },
+    getOpacityColor(color, percent) {
+      return color + parseInt(0xff * percent).toString(16).padStart(2, "0");
+    },
   },
   watch: {
     // 监听 glassEffect 值变化
-    'profile.glassEffect': {
+    "profile.glassEffect": {
       immediate: true,
       handler(val) {
         // 给 body 添加 glass-effect-menu 类和强度值
-        document.body.classList.toggle('glass-effect-menu', val > 0);
-        document.body.style.setProperty('--glass-effect-strength', val);
-      }
-    }
-  }
+        document.body.classList.toggle("glass-effect-menu", val > 0);
+        document.body.style.setProperty("--glass-effect-strength", val);
+      },
+    },
+    // 监听 primaryColor 值变化
+    "profile.primaryColor": {
+      immediate: true,
+      handler(val) {
+        this.setCssVar("primary", val);
+        this.setCssVar("primary-opacity-5", this.getOpacityColor(val, 0.05));
+        this.setCssVar("primary-opacity-10", this.getOpacityColor(val, 0.1));
+        this.setCssVar("primary-opacity-20", this.getOpacityColor(val, 0.2));
+        this.setCssVar("primary-opacity-30", this.getOpacityColor(val, 0.3));
+        this.setCssVar("primary-opacity-40", this.getOpacityColor(val, 0.4));
+        this.setCssVar("primary-opacity-50", this.getOpacityColor(val, 0.5));
+      },
+    },
+  },
 });
 </script>
diff --git a/src/components/menu/PersonalizeMenu.vue b/src/components/menu/PersonalizeMenu.vue
index de4d98e..ef5548a 100644
--- a/src/components/menu/PersonalizeMenu.vue
+++ b/src/components/menu/PersonalizeMenu.vue
@@ -145,8 +145,6 @@
 </template>
 
 <script>
-import { setCssVar } from "quasar";
-
 export default {
   name: "PersonalizeMenu",
   props: {
@@ -160,7 +158,6 @@ export default {
   },
   methods: {
     setPrimaryColor() {
-      setCssVar("primary", this.$root.profile.primaryColor);
       this.$root.saveProfile();
     },
     resetPrimary() {