go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

refactor: Refactor Naive UI AppProvider

Browse Source
This commit is contained in:
张传龙 2022-06-19 17:11:38 +08:00
parent 21c1d6d3aa
commit e128dfabc7
11 changed files with 149 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -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">

28
src/components/AppProvider/DialogContent.vue
View File

@ -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>

10
src/components/AppProvider/LoadingBar.vue
View File

@ -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>

72
src/components/AppProvider/MessageContent.vue
View File

@ -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>

10
src/components/AppProvider/NotificationContent.vue
View File

@ -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>

40
src/components/AppProvider/index.vue
View File

@ -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>

55
src/components/Common/AppProvider.vue Normal file
View File

@ -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>

2
src/layout/components/tags/index.vue
View File

@ -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()

14
src/store/modules/theme.js
View File

@ -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

79
src/utils/common/naiveTools.js Normal file
View File

@ -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
}

2
src/views/login/index.vue
View File

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