first commit

src/components/AppProvider/DialogContent.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { isNullOrUndef } from '@/utils/is'
+import { useDialog } from 'naive-ui'
+
+const NDialog = useDialog()
+
+class Dialog {
+  success(title, option) {
+    this.showDialog('success', { title, ...option })
+  }
+
+  warning(title, option) {
+    this.showDialog('warning', { title, ...option })
+  }
+
+  error(title, option) {
+    this.showDialog('error', { title, ...option })
+  }
+
+  showDialog(type = 'success', option) {
+    if (isNullOrUndef(option.title)) {
+      // ! 没有title的情况
+      option.showIcon = false
+    }
+    NDialog[type]({
+      positiveText: 'OK',
+      closable: false,
+      ...option,
+    })
+  }
+
+  confirm(option = {}) {
+    this.showDialog(option.type || 'error', {
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: option.confirm,
+      onNegativeClick: option.cancel,
+      onMaskClick: option.cancel,
+      ...option,
+    })
+  }
+}
+
+window['$dialog'] = new Dialog()
+Object.freeze(window.$dialog)
+Object.defineProperty(window, '$dialog', {
+  configurable: false,
+  writable: false,
+})
+</script>
+
+<template></template>

src/components/AppProvider/LoadingBar.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { useLoadingBar } from 'naive-ui'
+window['$loadingBar'] = useLoadingBar()
+Object.defineProperty(window, '$loadingBar', {
+  configurable: false,
+  writable: false,
+})
+</script>
+
+<template></template>

src/components/AppProvider/MessageContent.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useMessage } from 'naive-ui'
+
+const NMessage = useMessage()
+
+let loadingMessage = null
+
+class Message {
+  /**
+   * 规则：
+   * * 同一Message实例只显示一个loading message，如果需要显示多个可以创建多个Message实例
+   * * 新的message会替换正在显示的loading message
+   * * 默认已创建一个Message实例$message挂载到window，同时也将Message类挂载到了window
+   */
+
+  removeMessage(message, duration = 2000) {
+    setTimeout(() => {
+      if (message) {
+        message.destroy()
+        message = null
+      }
+    }, duration)
+  }
+
+  showMessage(type, content, option = {}) {
+    if (this.loadingMessage && this.loadingMessage.type === 'loading') {
+      // 如果存在则替换正在显示的loading message
+      this.loadingMessage.type = type
+      this.loadingMessage.content = content
+
+      if (type !== 'loading') {
+        // 非loading message需设置自动清除
+        this.removeMessage(this.loadingMessage, option.duration)
+      }
+    } else {
+      // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
+      let message = NMessage[type](content, option)
+      if (type === 'loading') {
+        this.loadingMessage = message
+      }
+    }
+  }
+
+  loading(content) {
+    this.showMessage('loading', content, { duration: 0 })
+  }
+
+  success(content, option = {}) {
+    this.showMessage('success', content, option)
+  }
+
+  error(content, option = {}) {
+    this.showMessage('error', content, option)
+  }
+
+  info(content, option = {}) {
+    this.showMessage('info', content, option)
+  }
+
+  warning(content, option = {}) {
+    this.showMessage('warning', content, option)
+  }
+}
+
+window['$message'] = new Message()
+
+Object.defineProperty(window, '$message', {
+  configurable: false,
+  writable: false,
+})
+</script>
+
+<template></template>

src/components/AppProvider/index.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { NConfigProvider, NGlobalStyle, NLoadingBarProvider, NMessageProvider, NDialogProvider } from 'naive-ui'
+
+import MessageContent from './MessageContent.vue'
+import DialogContent from './DialogContent.vue'
+import LoadingBar from './LoadingBar.vue'
+
+import { useAppStore } from '@/store/modules/app'
+const appStore = useAppStore()
+</script>
+
+<template>
+  <n-config-provider :theme-overrides="appStore.themeOverrides">
+    <n-global-style />
+    <n-loading-bar-provider>
+      <loading-bar />
+      <n-dialog-provider>
+        <dialog-content />
+        <n-message-provider>
+          <message-content />
+          <slot name="default"></slot>
+        </n-message-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>