feat(style): 使用Antd组件提供的切换主题功能 (#3051)

* perf(style): 使用antd4的暗黑主题

* refactor: 抽离切换暗黑主题模式

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider :locale="getAntdLocale">
+  <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -11,11 +11,15 @@
   import { AppProvider } from '@/components/Application';
   import { useTitle } from '@/hooks/web/useTitle';
   import { useLocale } from '@/locales/useLocale';
+
   import 'dayjs/locale/zh-cn';
+  import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
 
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
+  const { isDark, darkTheme } = useDarkModeTheme();
+
   // Listening to page changes and dynamically changing site titles
   useTitle();
 </script>

src/components/Modal/src/index.less

@@ -64,7 +64,7 @@
   &-close {
     width: auto !important;
     outline: none;
-    background: #fff !important;
+    background: transparent !important;
     font-weight: normal;
   }
 

src/hooks/setting/useDarkModeTheme.ts

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+import { theme } from 'ant-design-vue';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { ThemeEnum } from '/@/enums/appEnum';
+
+export function useDarkModeTheme() {
+  const { getDarkMode } = useRootSetting();
+  const { darkAlgorithm } = theme;
+  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+  const darkTheme = {
+    algorithm: [darkAlgorithm],
+  };
+
+  return {
+    isDark,
+    darkTheme,
+  };
+}