80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<template>
|
|
<a-config-provider :theme="themeV" :locale="locale">
|
|
<div
|
|
:style="{
|
|
'--ant-primary-color': useAppStore().theme.primaryColor,
|
|
'--vxe-primary-color': useAppStore().theme.primaryColor,
|
|
'--vxe-loading-color': useAppStore().theme.primaryColor,
|
|
}"
|
|
>
|
|
<a-watermark :content="config.layout.waterMark">
|
|
<router-view />
|
|
</a-watermark>
|
|
</div>
|
|
</a-config-provider>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useAppStore } from '@/stores/app'
|
|
import { theme } from 'ant-design-vue'
|
|
import { config } from './settings/application'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useI18n } from 'vue-i18n'
|
|
import 'dayjs/locale/zh-cn'
|
|
import { messages, setI18nLanguage } from './locales'
|
|
|
|
const locale = computed(() => {
|
|
return useAppStore().language === 'zh_CN' ? messages.zh_CN : messages.en_US
|
|
})
|
|
setI18nLanguage(useAppStore().language as 'zh_CN' | 'en_US')
|
|
useI18n().locale.value = useAppStore().language
|
|
const themeV = computed(() => {
|
|
return {
|
|
algorithm: app.layout.value.navTheme === 'real-dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
|
token: {
|
|
colorPrimary: useAppStore().theme.primaryColor,
|
|
borderRadius: 2,
|
|
},
|
|
}
|
|
})
|
|
|
|
const app = storeToRefs(useAppStore())
|
|
useTitle(app.isCN.value ? config.title : config.name)
|
|
const colorWeak = computed(() => {
|
|
return app.layout.value.colorWeak
|
|
})
|
|
const gray = computed(() => {
|
|
return app.layout.value.gray
|
|
})
|
|
watch(
|
|
colorWeak,
|
|
(newVal) => {
|
|
const body = document.body
|
|
if (newVal) {
|
|
app.layout.value.gray = false
|
|
body.style.filter = 'invert(80%)'
|
|
} else {
|
|
body.style.removeProperty('filter')
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
watch(
|
|
gray,
|
|
(newVal) => {
|
|
const body = document.body
|
|
if (newVal) {
|
|
app.layout.value.colorWeak = false
|
|
body.style.filter = 'grayscale(0.95)'
|
|
} else {
|
|
body.style.removeProperty('filter')
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
<style lang="css">
|
|
:deep(.ant-btn-link) {
|
|
color: var(--ant-primary-color) !important;
|
|
}
|
|
</style>
|