From 31cbd310ee96f98559694b77a654e861d6bf6794 Mon Sep 17 00:00:00 2001
From: renqian805 <1743369777@qq.com>
Date: Thu, 14 Jul 2022 00:19:57 +0800
Subject: [PATCH] fix: some css style issues

---
 .../src/components/tool-bar/index.vue         |  3 +-
 src/store/modules/projectConfig.ts            | 46 +++++++++++++------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/core/dynamic-table/src/components/tool-bar/index.vue b/src/components/core/dynamic-table/src/components/tool-bar/index.vue
index a41bad493..7ee68e81c 100644
--- a/src/components/core/dynamic-table/src/components/tool-bar/index.vue
+++ b/src/components/core/dynamic-table/src/components/tool-bar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between p-y-16px">
+  <div class="flex justify-between p-16px">
     <slot name="headerTitle">
       <div class="title">
         {{ title }}
@@ -42,7 +42,6 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    color: rgba(0, 0, 0, 0.85);
     font-weight: 500;
     font-size: 16px;
   }
diff --git a/src/store/modules/projectConfig.ts b/src/store/modules/projectConfig.ts
index c3a3d31c5..116c3a4c9 100644
--- a/src/store/modules/projectConfig.ts
+++ b/src/store/modules/projectConfig.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import darkThemeCss from 'ant-design-vue/dist/antd.dark.css?raw';
+import { useMutationObserver } from '@vueuse/core';
 import { ConfigProvider } from 'ant-design-vue';
 import type { Theme } from 'ant-design-vue/es/config-provider/';
 import { store } from '@/store';
@@ -11,6 +12,20 @@ styleDom.dataset.type = 'theme-dark';
 styleDom.textContent = darkThemeCss;
 document.head.appendChild(styleDom);
 
+useMutationObserver(
+  document.head,
+  (mutations) => {
+    const hasCustomStyleEl = mutations.some((n) => Array.from(n.addedNodes).includes(styleDom));
+    if (!hasCustomStyleEl) {
+      document.head.appendChild(styleDom);
+      styleDom.disabled = !document.documentElement.classList.contains('dark');
+    }
+  },
+  {
+    childList: true,
+  },
+);
+
 /**
  * 项目默认配置项
  * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
@@ -71,20 +86,23 @@ const setRealDarkTheme = (navTheme?: ThemeName) => {
   }
 };
 
-let localThemeConfig: Partial<ThemeState> = {};
-try {
-  localThemeConfig = JSON.parse(Storage.get(THEME_KEY, '{}'));
-  const { primaryColor, navTheme } = localThemeConfig;
-  setRealDarkTheme(navTheme);
-  primaryColor &&
-    ConfigProvider.config({
-      theme: {
-        primaryColor,
-      },
-    });
-} catch {
-  localThemeConfig = {};
-}
+const getLocalThemeConfig = (): Partial<ThemeState> => {
+  try {
+    return JSON.parse(Storage.get(THEME_KEY, '{}'));
+  } catch {
+    return {};
+  }
+};
+
+const localThemeConfig = getLocalThemeConfig();
+const { primaryColor, navTheme } = localThemeConfig;
+setRealDarkTheme(navTheme);
+primaryColor &&
+  ConfigProvider.config({
+    theme: {
+      primaryColor,
+    },
+  });
 
 export const useThemeStore = defineStore({
   id: 'theme',