fix: 修复快捷键异常占用 & 去除部分动画效果

src/components/Global/Provider.vue

@@ -35,12 +35,13 @@ import {
   useNotification,
 } from "naive-ui";
 import { storeToRefs } from "pinia";
-import { siteSettings, siteData } from "@/stores";
+import { siteSettings, siteStatus } from "@/stores";
 import themeColorData from "@/assets/themeColor.json";
 
-const data = siteData();
-const osThemeRef = useOsTheme();
+const status = siteStatus();
 const settings = siteSettings();
+const osThemeRef = useOsTheme();
+const { coverTheme } = storeToRefs(status);
 const { themeType, themeAuto, themeTypeName, themeTypeData, themeAutoCover } =
   storeToRefs(settings);
 
@@ -63,62 +64,63 @@ const changeTheme = () => {
 
 // 配置主题色
 const changeThemeColor = (val, isCover = false) => {
-  const color =
-    isCover && Object.keys(val)?.length
+  try {
+    // 获取主色数据
+    const mainColorData =
+      isCover && Object.keys(val)?.length
+        ? val[themeType.value]
+        : val !== "custom"
+        ? themeColorData[val]
+        : themeTypeData.value;
+    // 微调主题色
+    const primaryColor = isCover ? `rgb(${mainColorData.bg})` : mainColorData.primaryColor;
+    const primaryColorHover = isCover ? `rgba(${mainColorData.bg}, 0.29)` : primaryColor + "29";
+    const primaryColorPressed = isCover ? `rgba(${mainColorData.bg}, 0.26)` : primaryColor + "26";
+    const primaryColorSuppl = isCover ? `rgba(${mainColorData.bg}, 0.05)` : primaryColor + "05";
+    // 自适应主题背景色
+    const coverAutobgCover = isCover
       ? themeType.value === "dark"
         ? val.light.bg
-        : val.dark.bg
-      : val !== "custom"
-      ? themeColorData[val]
-      : themeTypeData.value;
-  // 微调主题色
-  const primaryColor = isCover ? `rgb(${color})` : color.primaryColor;
-  const primaryColorHover = isCover ? `rgba(${color}, 0.29)` : primaryColor + "29";
-  const primaryColorPressed = isCover ? `rgba(${color}, 0.26)` : primaryColor + "26";
-  const primaryColorSuppl = isCover ? `rgba(${color}, 0.05)` : primaryColor + "05";
-  // 自适应主题背景色
-  const coverAutobgCover = isCover
-    ? themeType.value === "dark"
-      ? val.dark.bg
-      : "239, 239, 239"
-    : null;
-  // 更新主题覆盖
-  themeOverrides.value = {
-    common:
-      isCover && Object.keys(val)?.length
-        ? {
-            primaryColor,
-            primaryColorHover,
-            primaryColorPressed,
-            primaryColorSuppl,
-            textColor1: `rgba(${color}, 0.9)`,
-            textColor2: `rgba(${color}, 0.82)`,
-            textColor3: `rgba(${color}, 0.52)`,
-            bodyColor: `rgba(${val.dark.mainBg}, 0.52)`,
-            cardColor: `rgb(${coverAutobgCover})`,
-            tagColor: `rgb(${coverAutobgCover})`,
-            modalColor: `rgb(${coverAutobgCover})`,
-            popoverColor: `rgb(${coverAutobgCover})`,
-          }
-        : color,
-    Icon: { color: isCover ? primaryColor : null },
-  };
-  if (!isCover) themeTypeData.value = color;
-  // 更新全局颜色变量
-  setCssVariable("--main-color", primaryColor);
-  setCssVariable(
-    "--main-color-bg",
-    isCover ? `rgb(${val[themeType.value]?.bg})` : "rgb(16, 16, 20)",
-  );
-  setCssVariable("--main-second-color", primaryColorHover);
-  setCssVariable("--main-boxshadow-color", primaryColorPressed);
-  setCssVariable("--main-boxshadow-hover-color", primaryColorSuppl);
+        : "239, 239, 239"
+      : null;
+    // 更新主题覆盖
+    themeOverrides.value = {
+      common:
+        isCover && Object.keys(val)?.length
+          ? {
+              primaryColor,
+              primaryColorHover,
+              primaryColorPressed,
+              primaryColorSuppl,
+              textColor1: `rgba(${mainColorData.bg}, 0.9)`,
+              textColor2: `rgba(${mainColorData.bg}, 0.82)`,
+              textColor3: `rgba(${mainColorData.bg}, 0.52)`,
+              bodyColor: `rgba(${val.dark.mainBg}, 0.52)`,
+              cardColor: `rgb(${coverAutobgCover})`,
+              tagColor: `rgb(${coverAutobgCover})`,
+              modalColor: `rgb(${coverAutobgCover})`,
+              popoverColor: `rgb(${coverAutobgCover})`,
+            }
+          : mainColorData,
+      Icon: { color: isCover ? primaryColor : null },
+    };
+    if (!isCover) themeTypeData.value = mainColorData;
+    // 更新全局颜色变量
+    setCssVariable("--main-color", primaryColor);
+    setCssVariable("--main-second-color", primaryColorHover);
+    setCssVariable("--main-boxshadow-color", primaryColorPressed);
+    setCssVariable("--main-boxshadow-hover-color", primaryColorSuppl);
+  } catch (error) {
+    themeOverrides.value = {};
+    console.error("切换主题色出现错误：", error);
+    $message.error("切换主题色出现错误，已使用默认配置");
+  }
 };
 
 // 修改全局颜色
 const setCssVariable = (name, value) => {
-  document.documentElement.style.setProperty(name, value);
-  // document.body.style.setProperty(name, value);
+  // document.documentElement.style.setProperty(name, value);
+  document.body.style.setProperty(name, value);
 };
 
 // 挂载 naive 组件
@@ -148,8 +150,10 @@ watch(
   () => {
     changeTheme();
     changeThemeColor(
-      themeAutoCover.value ? data.coverTheme : themeTypeName.value,
-      themeAutoCover.value,
+      themeAutoCover.value && Object.keys(coverTheme.value)?.length
+        ? coverTheme.value
+        : themeTypeName.value,
+      themeAutoCover.value && Object.keys(coverTheme.value)?.length,
     );
   },
 );
@@ -170,9 +174,8 @@ watch(
   (val) => changeThemeColor(val.label),
 );
 watch(
-  () => data.coverTheme,
+  () => coverTheme.value,
   (val) => {
-    console.log(val);
     if (themeAutoCover.value) changeThemeColor(val, themeAutoCover.value);
   },
 );