refactor: naive-ui版本升级,naive全局API挂载方式修改

src/plugins/naive.ts

@@ -1,5 +1,42 @@
+/*
+ * @Author: thelostword
+ * @Date: 2022-10-28 17:13:52
+ * @LastEditors: thelostword
+ * @LastEditTime: 2022-10-28 18:01:54
+ * @FilePath: \naive-ui-admin\src\plugins\naive.ts
+ */
 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: [