refactor: Refactor Naive UI AppProvider

src/App.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import AppProvider from '@/components/AppProvider/index.vue'
+import AppProvider from '@/components/common/AppProvider.vue'
 </script>
 
 <style lang="scss">

src/components/AppProvider/DialogContent.vue

@@ -1,28 +0,0 @@
-<template></template>
-
-<script setup>
-import { isNullOrUndef } from '@/utils/is'
-import { useDialog } from 'naive-ui'
-
-const NDialog = useDialog()
-
-NDialog.confirm = function (option = {}) {
-  const showIcon = !isNullOrUndef(option.title)
-  return NDialog[option.type || 'warning']({
-    showIcon,
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: option.confirm,
-    onNegativeClick: option.cancel,
-    onMaskClick: option.cancel,
-    ...option,
-  })
-}
-
-window['$dialog'] = NDialog
-Object.freeze(window.$dialog)
-Object.defineProperty(window, '$dialog', {
-  configurable: false,
-  writable: false,
-})
-</script>

src/components/AppProvider/LoadingBar.vue

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

src/components/AppProvider/MessageContent.vue

@@ -1,72 +0,0 @@
-<template></template>
-
-<script setup>
-import { useMessage } from 'naive-ui'
-
-const NMessage = useMessage()
-
-let loadingMessage = null
-
-class Message {
-  /**
-   * 规则：
-   * * loading message只显示一个，新的message会替换正在显示的loading message
-   * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
-   */
-
-  removeMessage(message, duration = 2000) {
-    setTimeout(() => {
-      if (message) {
-        message.destroy()
-        message = null
-      }
-    }, duration)
-  }
-
-  showMessage(type, content, option = {}) {
-    if (loadingMessage && loadingMessage.type === 'loading') {
-      // 如果存在则替换正在显示的loading message
-      loadingMessage.type = type
-      loadingMessage.content = content
-
-      if (type !== 'loading') {
-        // 非loading message需设置自动清除
-        this.removeMessage(loadingMessage, option.duration)
-      }
-    } else {
-      // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
-      let message = NMessage[type](content, option)
-      if (type === 'loading') {
-        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>

src/components/AppProvider/NotificationContent.vue

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

src/components/AppProvider/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
-    <n-loading-bar-provider>
-      <LoadingBar />
-      <n-dialog-provider>
-        <DialogContent />
-        <n-message-provider>
-          <MessageContent />
-          <n-notification-provider>
-            <NotificationContent />
-            <slot></slot>
-          </n-notification-provider>
-        </n-message-provider>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
-  </n-config-provider>
-</template>
-
-<script setup>
-import { useCssVar } from '@vueuse/core'
-import MessageContent from './MessageContent.vue'
-import DialogContent from './DialogContent.vue'
-import LoadingBar from './LoadingBar.vue'
-import NotificationContent from './NotificationContent.vue'
-import { useThemeStore } from '@/store/modules/theme'
-
-const themStore = useThemeStore()
-watch(
-  () => themStore.naiveThemeOverrides.common,
-  (vars) => {
-    for (const key in vars) {
-      useCssVar(`--${key}`, document.documentElement).value = vars[key]
-      if (key === 'primaryColor') {
-        window.localStorage.setItem('__THEME_COLOR__', vars[key])
-      }
-    }
-  },
-  { immediate: true }
-)
-</script>

src/components/Common/AppProvider.vue

@@ -0,0 +1,55 @@
+<template>
+  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
+    <n-loading-bar-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <n-message-provider>
+            <slot></slot>
+            <NaiveProviderContent />
+          </n-message-provider>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { defineComponent, h } from 'vue'
+import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
+
+import { useCssVar } from '@vueuse/core'
+import { useThemeStore } from '@/store/modules/theme'
+import { setupMessage, setupDialog } from '@/utils/common/naiveTools'
+
+const themStore = useThemeStore()
+watch(
+  () => themStore.naiveThemeOverrides.common,
+  (vars) => {
+    for (const key in vars) {
+      useCssVar(`--${key}`, document.documentElement).value = vars[key]
+      if (key === 'primaryColor') {
+        window.localStorage.setItem('__THEME_COLOR__', vars[key])
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// 挂载naive组件的方法至window, 以便在全局使用
+function setupNaiveTools() {
+  window.$loadingBar = useLoadingBar()
+  window.$notification = useNotification()
+
+  window.$message = setupMessage(useMessage())
+  window.$dialog = setupDialog(useDialog())
+}
+
+const NaiveProviderContent = defineComponent({
+  setup() {
+    setupNaiveTools()
+  },
+  render() {
+    return h('div')
+  },
+})
+</script>

src/layout/components/tags/index.vue

@@ -25,7 +25,7 @@
 import ContextMenu from './ContextMenu.vue'
 import { useTagsStore } from '@/store/modules/tags'
 import { useThemeStore } from '@/store/modules/theme'
-import ScrollX from '@/components/Common/ScrollX.vue'
+import ScrollX from '@/components/common/ScrollX.vue'
 
 const route = useRoute()
 const router = useRouter()

src/store/modules/theme.js

@@ -2,9 +2,19 @@ import { defineStore } from 'pinia'
 import { themeSettings } from '@/settings'
 export const useThemeStore = defineStore('theme', {
   state() {
-    return themeSettings
+    return {
+      tags: themeSettings.tag || { visible: true, height: 50 },
+      header: themeSettings.header || { height: 60 },
+      naiveThemeOverrides: themeSettings.naiveThemeOverrides || {
+        common: {
+          primaryColor: '#316C72FF',
+          primaryColorHover: '#316C72E3',
+          primaryColorPressed: '#2B4C59FF',
+          primaryColorSuppl: '#316C7263',
+        },
+      },
+    }
   },
-  getters: {},
   actions: {
     setTabVisible(visible) {
       this.tags.visible = visible

src/utils/common/naiveTools.js

@@ -0,0 +1,79 @@
+import { isNullOrUndef } from '@/utils/is'
+
+export function setupMessage(NMessage) {
+  let loadingMessage = null
+  class Message {
+    /**
+     * 规则：
+     * * loading message只显示一个，新的message会替换正在显示的loading message
+     * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
+     */
+
+    removeMessage(message, duration = 2000) {
+      setTimeout(() => {
+        if (message) {
+          message.destroy()
+          message = null
+        }
+      }, duration)
+    }
+
+    showMessage(type, content, option = {}) {
+      if (loadingMessage && loadingMessage.type === 'loading') {
+        // 如果存在则替换正在显示的loading message
+        loadingMessage.type = type
+        loadingMessage.content = content
+
+        if (type !== 'loading') {
+          // 非loading message需设置自动清除
+          this.removeMessage(loadingMessage, option.duration)
+        }
+      } else {
+        // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
+        let message = NMessage[type](content, option)
+        if (type === 'loading') {
+          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)
+    }
+  }
+
+  return new Message()
+}
+
+export function setupDialog(NDialog) {
+  NDialog.confirm = function (option = {}) {
+    const showIcon = !isNullOrUndef(option.title)
+    return NDialog[option.type || 'warning']({
+      showIcon,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: option.confirm,
+      onNegativeClick: option.cancel,
+      onMaskClick: option.cancel,
+      ...option,
+    })
+  }
+
+  return NDialog
+}

src/views/login/index.vue

@@ -51,7 +51,7 @@ const query = unref(router.currentRoute).query
 
 const loginInfo = ref({
   name: 'admin',
-  password: 123456,
+  password: '123456',
 })
 
 const ls = createLocalStorage({ prefixKey: 'login_' })