perf: 单独拆分 naive 全局 API 挂载方法

src/plugins/index.ts

@@ -1,4 +1,5 @@
 export { setupNaive } from '@/plugins/naive';
+export { setupNaiveDiscreteApi } from '@/plugins/naiveDiscreteApi';
 export { setupDirectives } from '@/plugins/directives';
 export { setupCustomComponents } from '@/plugins/customComponents';
 export { setupGlobalMethods } from '@/plugins/globalMethods';

src/plugins/naive.ts

@@ -1,35 +1,5 @@
 import type { App } from 'vue';
 import * as NaiveUI from 'naive-ui';
-import { computed } from 'vue';
-import { useDesignSettingStore } from '@/store/modules/designSetting';
-import { store } from '@/store';
-import { lighten } from '@/utils/index';
-
-// NaiveUI 全局方法注册
-const designStore = useDesignSettingStore(store);
-const configProviderPropsRef = computed(() => ({
-  theme: designStore.darkTheme ? NaiveUI.darkTheme : undefined,
-  themeOverrides: {
-    common: {
-      primaryColor: designStore.appTheme,
-      primaryColorHover: lighten(designStore.appTheme, 6),
-      primaryColorPressed: lighten(designStore.appTheme, 6),
-    },
-    LoadingBar: {
-      colorLoading: designStore.appTheme,
-    },
-  },
-}));
-const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
-  ['message', 'dialog', 'notification', 'loadingBar'],
-  {
-    configProviderProps: configProviderPropsRef,
-  }
-);
-window['$message'] = message;
-window['$dialog'] = dialog;
-window['$notification'] = notification;
-window['$loading'] = loadingBar;
 
 const naive = NaiveUI.create({
   components: [

src/plugins/naiveDiscreteApi.ts

@@ -0,0 +1,39 @@
+import * as NaiveUI from 'naive-ui';
+import { computed } from 'vue';
+import { useDesignSettingWithOut } from '@/store/modules/designSetting';
+import { lighten } from '@/utils/index';
+
+/**
+ * 挂载 Naive-ui 脱离上下文的 API
+ * 如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。
+ * https://www.naiveui.com/zh-CN/dark/components/discrete
+ */
+
+export function setupNaiveDiscreteApi() {
+  const designStore = useDesignSettingWithOut();
+
+  const configProviderPropsRef = computed(() => ({
+    theme: designStore.darkTheme ? NaiveUI.darkTheme : undefined,
+    themeOverrides: {
+      common: {
+        primaryColor: designStore.appTheme,
+        primaryColorHover: lighten(designStore.appTheme, 6),
+        primaryColorPressed: lighten(designStore.appTheme, 6),
+      },
+      LoadingBar: {
+        colorLoading: designStore.appTheme,
+      },
+    },
+  }));
+  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
+    ['message', 'dialog', 'notification', 'loadingBar'],
+    {
+      configProviderProps: configProviderPropsRef,
+    }
+  );
+
+  window['$message'] = message;
+  window['$dialog'] = dialog;
+  window['$notification'] = notification;
+  window['$loading'] = loadingBar;
+}