gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(1.3.0-beta1): 修复双层水印问题

Browse Source
This commit is contained in:
xlsea 2025-01-04 17:12:17 +08:00
parent 19d3341d11
commit 58900a3dd3
4 changed files with 5667 additions and 4878 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10487
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

20
src/App.vue
View File

@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { NConfigProvider, darkTheme } from 'naive-ui';
import type { WatermarkProps } from 'naive-ui'; import type { WatermarkProps } from 'naive-ui';
import { NConfigProvider, darkTheme } from 'naive-ui';
import { useAppStore } from './store/modules/app'; import { useAppStore } from './store/modules/app';
import { useThemeStore } from './store/modules/theme'; import { useThemeStore } from './store/modules/theme';
import { naiveDateLocales, naiveLocales } from './locales/naive'; import { naiveDateLocales, naiveLocales } from './locales/naive';
import { useAuthStore } from './store/modules/auth';
defineOptions({ defineOptions({
name: 'App' name: 'App'
@ -12,6 +13,7 @@ defineOptions({
const appStore = useAppStore(); const appStore = useAppStore();
const themeStore = useThemeStore(); const themeStore = useThemeStore();
const { userInfo } = useAuthStore();
const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined)); const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));
@ -24,17 +26,19 @@ const naiveDateLocale = computed(() => {
}); });
const watermarkProps = computed<WatermarkProps>(() => { const watermarkProps = computed<WatermarkProps>(() => {
const appTitle = import.meta.env.VITE_APP_TITLE || themeStore.watermark.text;
return { return {
content: themeStore.watermark?.text || 'SoybeanAdmin', content: userInfo.userName ? `${userInfo.userName}@${appTitle} ${userInfo.username}` : appTitle,
cross: true, cross: true,
fullscreen: true, fullscreen: true,
fontSize: 16, fontSize: 14,
lineHeight: 16, fontColor: themeStore.darkMode ? 'rgba(200, 200, 200, 0.03)' : 'rgba(200, 200, 200, 0.2)',
width: 384, lineHeight: 14,
height: 384, width: 200,
height: 300,
xOffset: 12, xOffset: 12,
yOffset: 60, yOffset: 60,
rotate: -15, rotate: -18,
zIndex: 9999 zIndex: 9999
}; };
}); });
@ -50,7 +54,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
> >
<AppProvider> <AppProvider>
<RouterView class="bg-layout" /> <RouterView class="bg-layout" />
<NWatermark v-if="themeStore.watermark?.visible" v-bind="watermarkProps" /> <NWatermark v-if="themeStore.watermark.visible" v-bind="watermarkProps" />
</AppProvider> </AppProvider>
</NConfigProvider> </NConfigProvider>
</template> </template>

1
src/components/common/app-provider.vue
View File

@ -30,7 +30,6 @@ const ContextHolder = defineComponent({
<NMessageProvider> <NMessageProvider>
<ContextHolder /> <ContextHolder />
<slot></slot> <slot></slot>
<AppWatermark />
</NMessageProvider> </NMessageProvider>
</NNotificationProvider> </NNotificationProvider>
</NDialogProvider> </NDialogProvider>

37
src/components/common/app-watermark.vue
View File

@ -1,37 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { useThemeStore } from '@/store/modules/theme';
defineOptions({
name: 'AppWatermark'
});
const { watermark } = useThemeStore();
const { userInfo } = useAuthStore();
const watermarkContent = computed(() => {
const appTitle = import.meta.env.VITE_APP_TITLE || 'Snail Job';
return userInfo.userName ? `${userInfo.userName}@${appTitle}` : appTitle;
});
</script>
<template>
<NWatermark
v-if="watermark.visible"
:content="watermarkContent"
cross
fullscreen
:font-size="14"
:line-height="14"
:width="200"
:height="300"
:x-offset="12"
:y-offset="60"
:rotate="-18"
:z-index="999"
font-color="rgba(200, 200, 200, 0.3)"
/>
</template>
<style scoped></style>