<script setup lang="ts">
|
import { computed } from 'vue';
|
import { NConfigProvider, darkTheme } from 'naive-ui';
|
import type { WatermarkProps } from 'naive-ui';
|
import { useAppStore } from './store/modules/app';
|
import { useThemeStore } from './store/modules/theme';
|
import { naiveDateLocales, naiveLocales } from './locales/naive';
|
|
defineOptions({
|
name: 'App'
|
});
|
|
const appStore = useAppStore();
|
const themeStore = useThemeStore();
|
|
const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));
|
|
const naiveLocale = computed(() => {
|
return naiveLocales[appStore.locale];
|
});
|
|
const naiveDateLocale = computed(() => {
|
return naiveDateLocales[appStore.locale];
|
});
|
|
const watermarkProps = computed<WatermarkProps>(() => {
|
return {
|
content: themeStore.watermarkContent,
|
cross: true,
|
fullscreen: true,
|
fontSize: 14,
|
lineHeight: 14,
|
width: 384,
|
height: 384,
|
xOffset: 12,
|
yOffset: 60,
|
rotate: -13,
|
zIndex: 9999,
|
fontColor: themeStore.darkMode ? 'rgba(200, 200, 200, 0.03)' : 'rgba(200, 200, 200, 0.2)'
|
};
|
});
|
</script>
|
|
<template>
|
<NConfigProvider
|
:theme="naiveDarkTheme"
|
:theme-overrides="themeStore.naiveTheme"
|
:locale="naiveLocale"
|
:date-locale="naiveDateLocale"
|
class="h-full"
|
>
|
<AppProvider>
|
<RouterView class="bg-layout" />
|
<NWatermark v-if="themeStore.watermark.visible" v-bind="watermarkProps" />
|
</AppProvider>
|
</NConfigProvider>
|
</template>
|
|
<style scoped></style>
|
