fix：抽离首页主题设置成hooks

src/App.vue

@@ -12,50 +12,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
-import {
-  zhCN,
-  dateZhCN,
-  darkTheme,
-  NConfigProvider,
-  GlobalThemeOverrides
-} from 'naive-ui'
 import { AppProvider } from '@/components/Application'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { borderRadius } from '@/settings/designSetting'
+
+import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'
 
 const designStore = useDesignStore()
 
 // 返回暗黑主题
-const getDarkTheme = computed(() =>
+const getDarkTheme = getDarkThemeHook()
-  designStore.getDarkTheme ? darkTheme : undefined
-)
 
 // 主题配置
-const getThemeOverrides = computed(
+const getThemeOverrides = getThemeOverridesHook()
-  (): GlobalThemeOverrides => {
-    const commonObj = {
-      common: {
-        borderRadius
-      }
-    }
-    const lightObject = {
-      common: {
-        ...commonObj.common
-      }
-    }
-    const dartObject = {
-      common: {
-        primaryColor: designStore.appTheme,
-        ...commonObj.common
-      },
-      LoadingBar: {
-        colorLoading: designStore.appTheme
-      }
-    }
-    return designStore.getDarkTheme ? dartObject : lightObject
-  }
-)
 </script>
 
 <style lang="scss"></style>

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from '@/hooks/themeHook'

src/hooks/themeHook.ts

@@ -0,0 +1,42 @@
+import { computed } from 'vue'
+import { darkTheme, GlobalThemeOverrides } from 'naive-ui'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { borderRadius } from '@/settings/designSetting'
+
+/**
+ * 设置全局主题
+ */
+export const getThemeOverridesHook = () => {
+  const designStore = useDesignStore()
+  const getDarkTheme = computed(
+    (): GlobalThemeOverrides => {
+      const commonObj = {
+        common: {
+          borderRadius
+        }
+      }
+      const lightObject = {
+        common: {
+          ...commonObj.common
+        }
+      }
+      const dartObject = {
+        common: {
+          primaryColor: designStore.appTheme,
+          ...commonObj.common
+        },
+        LoadingBar: {
+          colorLoading: designStore.appTheme
+        }
+      }
+      return designStore.getDarkTheme ? dartObject : lightObject
+    }
+  )
+  return getDarkTheme
+}
+
+// 返回暗黑主题
+export const getDarkThemeHook = () => {
+  const designStore = useDesignStore()
+  return computed(() => (designStore.getDarkTheme ? darkTheme : undefined))
+}

src/styles/common/mixins/mixins.scss

@@ -10,7 +10,7 @@
 }
 
 @mixin deep() {
-  ::v-deep *{
+  ::v-deep {
     @content;
   }
 }

src/utils/plugin.ts

@@ -26,7 +26,7 @@ import { renderIcon } from '@/utils'
   const tip = {
     delete: '是否删除此数据'
   }
-  dialogFn({
+  const instance = dialogFn({
     title: '提示',
     icon: renderIcon(InformationCircleIcon, { size: dialogIconSize }),
     content: message || tip[type] || '',
@@ -34,10 +34,10 @@ import { renderIcon } from '@/utils'
     negativeText: '取消',
     maskClosable: maskClosable,
     onPositiveClick: () => {
-      onPositiveCallback && onPositiveCallback()
+      onPositiveCallback && onPositiveCallback(instance)
     },
     onNegativeClick: () => {
-      onNegativeCallback && onNegativeCallback()
+      onNegativeCallback && onNegativeCallback(instance)
     }
   })
 }