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

src/App.vue

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

src/components/common/app-provider.vue

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

src/components/common/app-watermark.vue

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