feat(projects): add full screen watermark

packages/materials/src/libs/admin-layout/index.vue

@@ -25,7 +25,9 @@ const props = withDefaults(defineProps<AdminLayoutProps>(), {
   siderCollapsedWidth: 64,
   footerVisible: true,
   footerHeight: 48,
-  rightFooter: false
+  rightFooter: false,
+  watermarkVisible: true,
+  watermarkText: 'SoybeanAdmin'
 });
 
 interface Emits {
@@ -48,6 +50,8 @@ type Slots = {
   sider?: SlotFn;
   /** Footer */
   footer?: SlotFn;
+  /** Watermark */
+  watermark?: SlotFn;
 };
 
 const slots = defineSlots<Slots>();
@@ -60,6 +64,7 @@ const showTab = computed(() => Boolean(slots.tab) && props.tabVisible);
 const showSider = computed(() => !props.isMobile && Boolean(slots.sider) && props.siderVisible);
 const showMobileSider = computed(() => props.isMobile && Boolean(slots.sider) && props.siderVisible);
 const showFooter = computed(() => Boolean(slots.footer) && props.footerVisible);
+const showWatermark = computed(() => Boolean(slots.watermark) && props.watermarkVisible);
 
 // scroll mode
 const isWrapperScroll = computed(() => props.scrollMode === 'wrapper');
@@ -230,6 +235,11 @@ function handleClickMask() {
           :class="[style['layout-footer-placement']]"
         ></div>
       </template>
+
+      <!-- Watermark -->
+      <template v-if="showWatermark">
+        <slot name="watermark"></slot>
+      </template>
     </div>
   </div>
 </template>

packages/materials/src/types/index.ts

@@ -132,6 +132,22 @@ export interface AdminLayoutFooterConfig {
   rightFooter?: boolean;
 }
 
+/** Watermark config */
+export interface AdminLayoutWatermarkConfig {
+  /**
+   * Whether watermark is visible
+   *
+   * @default: true
+   */
+  watermarkVisible?: boolean;
+  /**
+   * Watermark text
+   *
+   * @default: SoybeanAdmin
+   */
+  watermarkText?: string;
+}
+
 /**
  * Layout mode
  *
@@ -156,7 +172,8 @@ export interface AdminLayoutProps
     AdminLayoutTabConfig,
     AdminLayoutSiderConfig,
     AdminLayoutContentConfig,
-    AdminLayoutFooterConfig {
+    AdminLayoutFooterConfig,
+    AdminLayoutWatermarkConfig {
   /**
    * Layout mode
    *

src/layouts/base-layout/index.vue

@@ -9,6 +9,7 @@ import GlobalSider from '../modules/global-sider/index.vue';
 import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
+import GlobalWatermark from '../modules/global-watermark/index.vue';
 import ThemeDrawer from '../modules/theme-drawer/index.vue';
 import { setupMixMenuContext } from '../context';
 
@@ -67,6 +68,11 @@ const siderWidth = computed(() => getSiderWidth());
 
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
+const watermarkProps = computed(() => {
+  const { text } = themeStore.watermark;
+  return { text };
+});
+
 function getSiderWidth() {
   const { reverseHorizontalMix } = themeStore.layout;
   const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
@@ -122,6 +128,8 @@ function getSiderCollapsedWidth() {
     :footer-height="themeStore.footer.height"
     :fixed-footer="themeStore.footer.fixed"
     :right-footer="themeStore.footer.right"
+    :watermark-visible="themeStore.watermark.visible"
+    :watermark-text="themeStore.watermark.text"
   >
     <template #header>
       <GlobalHeader v-bind="headerProps" />
@@ -138,6 +146,9 @@ function getSiderCollapsedWidth() {
     <template #footer>
       <GlobalFooter />
     </template>
+    <template #watermark>
+      <GlobalWatermark v-bind="watermarkProps" />
+    </template>
   </AdminLayout>
 </template>
 

src/layouts/modules/global-watermark/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'GlobalWatermark'
+});
+
+interface Props {
+  text?: App.Global.WatermarkProps['text'];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <NWatermark
+    :content="text"
+    cross
+    fullscreen
+    :font-size="16"
+    :line-height="16"
+    :width="384"
+    :height="384"
+    :x-offset="12"
+    :y-offset="60"
+    :rotate="-15"
+    :z-index="9999"
+    class="pointer-events-none"
+  />
+</template>
+
+<style scoped></style>

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

@@ -101,6 +101,19 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <NSwitch v-model:value="themeStore.footer.right" />
     </SettingItem>
+    <SettingItem key="8" :label="$t('theme.watermark.visible')">
+      <NSwitch v-model:value="themeStore.watermark.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.watermark.visible" key="8-1" :label="$t('theme.watermark.text')">
+      <NInput
+        v-model:value="themeStore.watermark.text"
+        autosize
+        type="text"
+        size="small"
+        class="w-120px"
+        placeholder="SoybeanAdmin"
+      />
+    </SettingItem>
   </TransitionGroup>
 </template>
 

src/locales/langs/en-us.ts

@@ -134,6 +134,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

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

src/router/elegant/routes.ts

@@ -451,7 +451,7 @@ export const generatedRoutes: GeneratedRoute[] = [
         meta: {
           title: 'plugin_pdf',
           i18nKey: 'route.plugin_pdf',
-          icon:'uiw:file-pdf'
+          icon: 'uiw:file-pdf'
         }
       },
       {

src/theme/settings.ts

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

src/typings/app.d.ts

@@ -93,6 +93,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;
@@ -169,6 +176,12 @@ declare namespace App {
       showMenu?: boolean;
     }
 
+    /** The global watermark props */
+    interface WatermarkProps {
+      /** Whether to show the watermark */
+      text?: string;
+    }
+
     /** The global menu */
     type Menu = {
       /**
@@ -372,6 +385,10 @@ declare namespace App {
           height: string;
           right: string;
         };
+        watermark: {
+          visible: string;
+          text: string;
+        };
         themeDrawerTitle: string;
         pageFunTitle: string;
         configOperation: {

src/typings/components.d.ts

@@ -98,6 +98,7 @@ declare module 'vue' {
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
+    NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']