fix(projects): 修复vertical-mix布局、重构初始化的loading

src/store/subscribe/theme.ts

@@ -1,17 +1,60 @@
+import { watch, onUnmounted } from 'vue';
+import { useOsTheme } from 'naive-ui';
+import { useElementSize } from '@vueuse/core';
+import { EnumStorageKey } from '@/enum';
 import { useThemeStore } from '../modules';
 
-/** 订阅app store */
-export default function subscribeAppStore() {
+/** 订阅theme store */
+export default function subscribeThemeStore() {
   const theme = useThemeStore();
+  const osTheme = useOsTheme();
+  const { width } = useElementSize(document.documentElement);
   const { addDarkClass, removeDarkClass } = handleWindicssDarkMode();
 
-  theme.$subscribe((_mutation, state) => {
-    // 监听暗黑模式
-    if (state.darkMode) {
-      addDarkClass();
-    } else {
-      removeDarkClass();
+  const stopThemeColor = watch(
+    () => theme.themeColor,
+    newValue => {
+      window.localStorage.setItem(EnumStorageKey['theme-color'], `--primary-color: ${newValue};`);
+    },
+    { immediate: true }
+  );
+
+  // 监听暗黑模式
+  const stopDarkMode = watch(
+    () => theme.darkMode,
+    newValue => {
+      if (newValue) {
+        addDarkClass();
+      } else {
+        removeDarkClass();
+      }
     }
+  );
+
+  // 监听操作系统主题模式
+  const stopOsTheme = watch(
+    osTheme,
+    newValue => {
+      const isDark = newValue === 'dark';
+      theme.setDarkMode(isDark);
+    },
+    { immediate: true }
+  );
+
+  // 禁用横向滚动(页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止)
+  const stopWidth = watch(width, newValue => {
+    if (newValue < theme.layout.minWidth) {
+      document.documentElement.style.overflowX = 'auto';
+    } else {
+      document.documentElement.style.overflowX = 'hidden';
+    }
+  });
+
+  onUnmounted(() => {
+    stopThemeColor();
+    stopDarkMode();
+    stopOsTheme();
+    stopWidth();
   });
 }