feat(projects): add full screen watermark

Author: honghuangdc

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ConfigProvider } from 'ant-design-vue';
+import type { WatermarkProps } from 'ant-design-vue';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
 import { antdLocales } from './locales/antd';
@@ -15,12 +16,33 @@ const themeStore = useThemeStore();
 const antdLocale = computed(() => {
   return antdLocales[appStore.locale];
 });
+
+const watermarkProps = computed(() => {
+  const props: WatermarkProps = {
+    content: themeStore.watermark.text,
+    width: 120,
+    height: 120,
+    font: {
+      fontSize: 16
+    },
+    offset: [12, 60],
+    rotate: -15,
+    zIndex: 9999
+  };
+
+  return props;
+});
 </script>
 
 <template>
   <ConfigProvider :theme="themeStore.antdTheme" :locale="antdLocale">
     <AppProvider>
       <RouterView class="bg-layout" />
+      <AWatermark
+        v-if="themeStore.watermark.visible"
+        v-bind="watermarkProps"
+        class="pointer-events-none absolute-lt! size-full"
+      />
     </AppProvider>
   </ConfigProvider>
 </template>

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -97,6 +97,12 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <ASwitch v-model:checked="themeStore.footer.right" />
     </SettingItem>
+    <SettingItem v-if="themeStore.watermark" key="8" :label="$t('theme.watermark.visible')">
+      <ASwitch v-model:checked="themeStore.watermark.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.watermark?.visible" key="8-1" :label="$t('theme.watermark.text')">
+      <AInput v-model:value="themeStore.watermark.text" placeholder="SoybeanAdmin" class="w-120px" />
+    </SettingItem>
   </TransitionGroup>
 </template>
 

src/locales/langs/en-us.ts

@@ -133,6 +133,10 @@ const local: App.I18n.Schema = {
       height: 'Footer Height',
       right: 'Right Footer'
     },
+    watermark: {
+      visible: 'Watermark Full Screen Visible',
+      text: 'Watermark Text'
+    },
     themeDrawerTitle: 'Theme Configuration',
     pageFunTitle: 'Page Function',
     configOperation: {

src/locales/langs/zh-cn.ts

@@ -133,6 +133,10 @@ const local: App.I18n.Schema = {
       height: '底部高度',
       right: '底部局右'
     },
+    watermark: {
+      visible: '显示全屏水印',
+      text: '水印文本'
+    },
     themeDrawerTitle: '主题配置',
     pageFunTitle: '页面功能',
     configOperation: {

src/theme/settings.ts

@@ -49,6 +49,10 @@ export const themeSettings: App.Theme.ThemeSetting = {
     height: 48,
     right: true
   },
+  watermark: {
+    visible: false,
+    text: 'SoybeanAdmin'
+  },
   tokens: {
     light: {
       colors: {

src/typings/app.d.ts

@@ -95,6 +95,13 @@ declare namespace App {
         /** Whether float the footer to the right when the layout is 'horizontal-mix' */
         right: boolean;
       };
+      /** Watermark */
+      watermark: {
+        /** Whether to show the watermark */
+        visible: boolean;
+        /** Watermark text */
+        text: string;
+      };
       /** define some theme settings tokens, will transform to css variables */
       tokens: {
         light: ThemeSettingToken;
@@ -371,6 +378,10 @@ declare namespace App {
           height: string;
           right: string;
         };
+        watermark: {
+          visible: string;
+          text: string;
+        };
         themeDrawerTitle: string;
         pageFunTitle: string;
         configOperation: {

src/typings/components.d.ts

@@ -47,6 +47,7 @@ declare module 'vue' {
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATree: typeof import('ant-design-vue/es')['Tree']
+    AWatermark: typeof import('ant-design-vue/es')['Watermark']
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']