From 38cc2872ea508121dd427daef63d32b006bc51af Mon Sep 17 00:00:00 2001 From: paynezhuang Date: Mon, 29 Jul 2024 16:10:32 +0800 Subject: [PATCH] feat(projects): add full screen watermark --- .../materials/src/libs/admin-layout/index.vue | 12 +++++++- packages/materials/src/types/index.ts | 19 +++++++++++- src/layouts/base-layout/index.vue | 11 +++++++ .../modules/global-watermark/index.vue | 30 +++++++++++++++++++ .../modules/theme-drawer/modules/page-fun.vue | 13 ++++++++ src/locales/langs/en-us.ts | 4 +++ src/locales/langs/zh-cn.ts | 4 +++ src/router/elegant/routes.ts | 2 +- src/theme/settings.ts | 4 +++ src/typings/app.d.ts | 17 +++++++++++ src/typings/components.d.ts | 1 + 11 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 src/layouts/modules/global-watermark/index.vue diff --git a/packages/materials/src/libs/admin-layout/index.vue b/packages/materials/src/libs/admin-layout/index.vue index 543f7dc0..a422d367 100644 --- a/packages/materials/src/libs/admin-layout/index.vue +++ b/packages/materials/src/libs/admin-layout/index.vue @@ -25,7 +25,9 @@ const props = withDefaults(defineProps(), { 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(); @@ -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']]" > + + + diff --git a/packages/materials/src/types/index.ts b/packages/materials/src/types/index.ts index bbcfb9d6..c7932a70 100644 --- a/packages/materials/src/types/index.ts +++ b/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 * diff --git a/src/layouts/base-layout/index.vue b/src/layouts/base-layout/index.vue index 7debe5d1..60b4bf0d 100644 --- a/src/layouts/base-layout/index.vue +++ b/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" > diff --git a/src/layouts/modules/global-watermark/index.vue b/src/layouts/modules/global-watermark/index.vue new file mode 100644 index 00000000..d0dc961a --- /dev/null +++ b/src/layouts/modules/global-watermark/index.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/layouts/modules/theme-drawer/modules/page-fun.vue b/src/layouts/modules/theme-drawer/modules/page-fun.vue index 8f80994f..4595c8a5 100644 --- a/src/layouts/modules/theme-drawer/modules/page-fun.vue +++ b/src/layouts/modules/theme-drawer/modules/page-fun.vue @@ -101,6 +101,19 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra > + + + + + + diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index 6bce00d2..7b991185 100644 --- a/src/locales/langs/en-us.ts +++ b/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: { diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index f7a2c69f..af260159 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -134,6 +134,10 @@ const local: App.I18n.Schema = { height: '底部高度', right: '底部局右' }, + watermark: { + visible: '显示全屏水印', + text: '水印文本' + }, themeDrawerTitle: '主题配置', pageFunTitle: '页面功能', configOperation: { diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts index 0cf51a28..7401ae57 100644 --- a/src/router/elegant/routes.ts +++ b/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' } }, { diff --git a/src/theme/settings.ts b/src/theme/settings.ts index be92e1e8..431668d0 100644 --- a/src/theme/settings.ts +++ b/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: { diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts index 2e30d22f..189d43fb 100644 --- a/src/typings/app.d.ts +++ b/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: { diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts index 98d053de..374de604 100644 --- a/src/typings/components.d.ts +++ b/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']