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

src/components/Application/Application.vue

@@ -1,27 +1,23 @@
+<!--
+ * @Author: thelostword
+ * @Date: 2022-10-25 15:43:12
+ * @LastEditors: thelostword
+ * @LastEditTime: 2022-10-28 18:10:57
+ * @FilePath: \naive-ui-admin\src\components\Application\Application.vue
+-->
 <template>
-  <n-loading-bar-provider>
-    <n-dialog-provider>
-      <DialogContent />
-      <n-notification-provider>
-        <n-message-provider>
-          <MessageContent />
-          <slot name="default"></slot>
-        </n-message-provider>
-      </n-notification-provider>
-    </n-dialog-provider>
-  </n-loading-bar-provider>
+  <n-dialog-provider>
+    <n-notification-provider>
+      <n-message-provider>
+        <slot name="default"></slot>
+      </n-message-provider>
+    </n-notification-provider>
+  </n-dialog-provider>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import {
-    NDialogProvider,
-    NNotificationProvider,
-    NMessageProvider,
-    NLoadingBarProvider,
-  } from 'naive-ui';
-  import { MessageContent } from '@/components/MessageContent';
-  import { DialogContent } from '@/components/DialogContent';
+  import { NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui';
 
   export default defineComponent({
     name: 'Application',
@@ -29,9 +25,6 @@
       NDialogProvider,
       NNotificationProvider,
       NMessageProvider,
-      NLoadingBarProvider,
-      MessageContent,
-      DialogContent,
     },
     setup() {
       return {};

src/components/DialogContent/index.ts

@@ -1,3 +0,0 @@
-import DialogContent from './index.vue';
-
-export { DialogContent };

src/components/DialogContent/index.vue

@@ -1,12 +0,0 @@
-<template></template>
-<script lang="ts">
-  import { useDialog } from 'naive-ui';
-
-  export default {
-    name: 'DialogContent',
-    setup() {
-      //挂载在 window 方便与在js中使用
-      window['$dialog'] = useDialog();
-    },
-  };
-</script>

src/components/LoadingContent/index.ts

@@ -1,3 +0,0 @@
-import LoadingContent from './index.vue';
-
-export { LoadingContent };

src/components/LoadingContent/index.vue

@@ -1,12 +0,0 @@
-<template></template>
-<script lang="ts">
-  import { useLoadingBar } from 'naive-ui';
-
-  export default {
-    name: 'LoadingContent',
-    setup() {
-      //挂载在 window 方便与在js中使用
-      window['$loading'] = useLoadingBar();
-    },
-  };
-</script>

src/components/MessageContent/index.ts

@@ -1,3 +0,0 @@
-import MessageContent from './index.vue';
-
-export { MessageContent };

src/components/MessageContent/index.vue

@@ -1,12 +0,0 @@
-<template></template>
-<script lang="ts">
-  import { useMessage } from 'naive-ui';
-
-  export default {
-    name: 'MessageContent',
-    setup() {
-      //挂载在 window 方便与在js中使用
-      window['$message'] = useMessage();
-    },
-  };
-</script>

src/layout/index.vue

@@ -77,7 +77,6 @@
   import { PageHeader } from './components/Header';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { useLoadingBar } from 'naive-ui';
   import { useRoute } from 'vue-router';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
@@ -185,9 +184,6 @@
   onMounted(() => {
     checkMobileMode();
     window.addEventListener('resize', watchWidth);
-    //挂载在 window 方便与在js中使用
-    window['$loading'] = useLoadingBar();
-    window['$loading'].finish();
   });
 </script>
 

src/main.ts

@@ -1,14 +1,18 @@
+/*
+ * @Author: thelostword
+ * @Date: 2022-10-25 15:43:13
+ * @LastEditors: thelostword
+ * @LastEditTime: 2022-10-28 18:03:36
+ * @FilePath: \naive-ui-admin\src\main.ts
+ */
 import './styles/tailwind.css';
 import { createApp } from 'vue';
+import { setupNaive, setupDirectives } from '@/plugins';
 import App from './App.vue';
 import router, { setupRouter } from './router';
 import { setupStore } from '@/store';
-import { setupNaive, setupDirectives } from '@/plugins';
-import { AppProvider } from '@/components/Application';
 
 async function bootstrap() {
-  const appProvider = createApp(AppProvider);
-
   const app = createApp(App);
 
   // 注册全局常用的 naive-ui 组件
@@ -26,9 +30,6 @@ async function bootstrap() {
   // 挂载状态管理
   setupStore(app);
 
-  //优先挂载一下 Provider 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
-  appProvider.mount('#appProvider', true);
-
   // 挂载路由
   await setupRouter(app);
 

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: [

src/views/list/basicList/index.vue

@@ -63,7 +63,7 @@
 
 <script lang="ts" setup>
   import { h, reactive, ref } from 'vue';
-  import { useMessage } from 'naive-ui';
+  // import { useMessage } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
   import { getTableList } from '@/api/table/list';
@@ -216,7 +216,7 @@
 
   const router = useRouter();
   const formRef: any = ref(null);
-  const message = useMessage();
+  // const message = useMessage();
   const actionRef = ref();
 
   const showModal = ref(false);
@@ -279,7 +279,7 @@
           },
         ],
         select: (key) => {
-          message.info(`您点击了，${key} 按钮`);
+          window['$message'].info(`您点击了，${key} 按钮`);
         },
       });
     },
@@ -312,13 +312,13 @@
     formBtnLoading.value = true;
     formRef.value.validate((errors) => {
       if (!errors) {
-        message.success('新建成功');
+        window['$message'].success('新建成功');
         setTimeout(() => {
           showModal.value = false;
           reloadTable();
         });
       } else {
-        message.error('请填写完整信息');
+        window['$message'].error('请填写完整信息');
       }
       formBtnLoading.value = false;
     });
@@ -331,7 +331,7 @@
 
   function handleDelete(record: Recordable) {
     console.log('点击了删除', record);
-    message.info('点击了删除');
+    window['$message'].info('点击了删除');
   }
 
   function handleSubmit(values: Recordable) {