From 3fb8c851128feb31783ac8cb7296b70ccf38dca8 Mon Sep 17 00:00:00 2001
From: xiangshu233 <xiangshu233@outlook.com>
Date: Sat, 17 Dec 2022 15:39:40 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8D=95=E7=8B=AC=E6=8B=86=E5=88=86=20?=
 =?UTF-8?q?naive=20=E5=85=A8=E5=B1=80=20API=20=E6=8C=82=E8=BD=BD=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                     | 16 +++++++++-----
 src/plugins/index.ts            |  1 +
 src/plugins/naive.ts            | 30 -------------------------
 src/plugins/naiveDiscreteApi.ts | 39 +++++++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 36 deletions(-)
 create mode 100644 src/plugins/naiveDiscreteApi.ts

diff --git a/src/main.ts b/src/main.ts
index b60c4c5..f2fbac9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import './styles/tailwind.css';
 import { createApp } from 'vue';
-import { setupNaive, setupDirectives } from '@/plugins';
+import { setupNaiveDiscreteApi, setupNaive, setupDirectives } from '@/plugins';
 import App from './App.vue';
 import router, { setupRouter } from './router';
 import { setupStore } from '@/store';
@@ -8,9 +8,15 @@ import { setupStore } from '@/store';
 async function bootstrap() {
   const app = createApp(App);
 
+  // 挂载状态管理
+  setupStore(app);
+
   // 注册全局常用的 naive-ui 组件
   setupNaive(app);
 
+  // 挂载 naive-ui 脱离上下文的 Api
+  setupNaiveDiscreteApi();
+
   // 注册全局自定义组件
   //setupCustomComponents();
 
@@ -20,13 +26,11 @@ async function bootstrap() {
   // 注册全局方法，如：app.config.globalProperties.$message = message
   //setupGlobalMethods(app);
 
-  // 挂载状态管理
-  setupStore(app);
-
   // 挂载路由
-  await setupRouter(app);
+  setupRouter(app);
 
-  // 路由准备就绪后挂载APP实例
+  // 路由准备就绪后挂载 APP 实例
+  // https://router.vuejs.org/api/interfaces/router.html#isready
   await router.isReady();
 
   app.mount('#app', true);
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index e5e4ec9..3b09d36 100644
--- a/src/plugins/index.ts
+++ b/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';
diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts
index c61021e..a86832c 100644
--- a/src/plugins/naive.ts
+++ b/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: [
diff --git a/src/plugins/naiveDiscreteApi.ts b/src/plugins/naiveDiscreteApi.ts
new file mode 100644
index 0000000..180dc6b
--- /dev/null
+++ b/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;
+}