加水印

This commit is contained in:
陈红丽 2024-11-21 11:25:50 +08:00
parent 08e7dc4d33
commit 9d0eec83ca
8 changed files with 91 additions and 69 deletions

4
.env
View File

@ -2,10 +2,10 @@
VITE_PORT = 8001 VITE_PORT = 8001
# spa-title # spa-title
VITE_GLOB_APP_TITLE = AdminPro VITE_GLOB_APP_TITLE = 云恒WMS
# spa shortname # spa shortname
VITE_GLOB_APP_SHORT_NAME = AdminPro VITE_GLOB_APP_SHORT_NAME = 云恒WMS
# 生产环境 开启mock # 生产环境 开启mock
VITE_GLOB_PROD_MOCK = true VITE_GLOB_PROD_MOCK = true

View File

@ -1,10 +1,5 @@
<template> <template>
<NConfigProvider <NConfigProvider :date-locale="dateZhCN" :locale="zhCN" :theme="getDarkTheme" :theme-overrides="getThemeOverrides">
:date-locale="dateZhCN"
:locale="zhCN"
:theme="getDarkTheme"
:theme-overrides="getThemeOverrides"
>
<AppProvider> <AppProvider>
<RouterView v-if="!isLock" /> <RouterView v-if="!isLock" />
@ -12,75 +7,82 @@
<LockScreen /> <LockScreen />
</transition> </transition>
</AppProvider> </AppProvider>
<n-watermark v-if="getIsWaterMark" :content="proName" cross fullscreen :font-size="18" :line-height="16" :font-weight="500"
font-color="rgba(200, 200, 200, 0.40)" :width="284" :height="284" :x-offset="12" :y-offset="60" :rotate="-15" />
</NConfigProvider> </NConfigProvider>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue'; import { computed, onMounted, onUnmounted } from 'vue';
import { darkTheme, dateZhCN, zhCN } from 'naive-ui'; import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
import { LockScreen } from '@/components/Lockscreen'; import { LockScreen } from '@/components/Lockscreen';
import { AppProvider } from '@/components/Application'; import { AppProvider } from '@/components/Application';
import { useLockscreenStore } from '@/store/modules/lockscreen'; import { useLockscreenStore } from '@/store/modules/lockscreen';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useDesignSettingStore } from '@/store/modules/designSetting'; import { useDesignSettingStore } from '@/store/modules/designSetting';
import { lighten } from '@/utils'; import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
import { lighten } from '@/utils';
const route = useRoute(); const route = useRoute();
const useLockscreen = useLockscreenStore(); const useLockscreen = useLockscreenStore();
const designStore = useDesignSettingStore(); const designStore = useDesignSettingStore();
const isLock = computed(() => useLockscreen.isLock); const isLock = computed(() => useLockscreen.isLock);
const lockTime = computed(() => useLockscreen.lockTime); const lockTime = computed(() => useLockscreen.lockTime);
/** const proName = import.meta.env.VITE_GLOB_APP_TITLE;
* @type import('naive-ui').GlobalThemeOverrides
*/
const getThemeOverrides = computed(() => {
const appTheme = designStore.appTheme;
const lightenStr = lighten(designStore.appTheme, 6);
return {
common: {
primaryColor: appTheme,
primaryColorSuppl: appTheme,
primaryColorHover: lightenStr,
primaryColorPressed: lightenStr,
},
LoadingBar: {
colorLoading: appTheme,
},
Layout: {
colorEmbedded: '#f5f7f9',
},
};
});
const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined)); const { getIsWaterMark } = useProjectSetting();
let timer; /**
* @type import('naive-ui').GlobalThemeOverrides
const timekeeping = () => { */
clearInterval(timer); const getThemeOverrides = computed(() => {
if (route.name == 'login' || isLock.value) return; const appTheme = designStore.appTheme;
// const lightenStr = lighten(designStore.appTheme, 6);
useLockscreen.setLock(false); return {
// common: {
useLockscreen.setLockTime(); primaryColor: appTheme,
timer = setInterval(() => { primaryColorSuppl: appTheme,
// primaryColorHover: lightenStr,
useLockscreen.setLockTime(lockTime.value - 1); primaryColorPressed: lightenStr,
if (lockTime.value <= 0) { },
// LoadingBar: {
useLockscreen.setLock(true); colorLoading: appTheme,
return clearInterval(timer); },
} Layout: {
}, 1000); colorEmbedded: '#f5f7f9',
},
}; };
});
onMounted(() => { const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
// document.addEventListener('mousedown', timekeeping);
});
onUnmounted(() => { let timer;
// document.removeEventListener('mousedown', timekeeping);
}); const timekeeping = () => {
clearInterval(timer);
if (route.name == 'login' || isLock.value) return;
//
useLockscreen.setLock(false);
//
useLockscreen.setLockTime();
timer = setInterval(() => {
//
useLockscreen.setLockTime(lockTime.value - 1);
if (lockTime.value <= 0) {
//
useLockscreen.setLock(true);
return clearInterval(timer);
}
}, 1000);
};
onMounted(() => {
// document.addEventListener('mousedown', timekeeping);
});
onUnmounted(() => {
// document.removeEventListener('mousedown', timekeeping);
});
</script> </script>

View File

@ -26,6 +26,8 @@ export function useProjectSetting() {
const getIsPageAnimate = computed(() => projectStore.isPageAnimate); const getIsPageAnimate = computed(() => projectStore.isPageAnimate);
const getIsWaterMark = computed(() => projectStore.isWaterMark);
const getPageAnimateType = computed(() => projectStore.pageAnimateType); const getPageAnimateType = computed(() => projectStore.pageAnimateType);
const getIsProjectSetting = computed(() => projectStore.isProjectSetting); const getIsProjectSetting = computed(() => projectStore.isProjectSetting);
@ -42,6 +44,7 @@ export function useProjectSetting() {
getCollapsedNav, getCollapsedNav,
getShowFooter, getShowFooter,
getIsPageAnimate, getIsPageAnimate,
getIsWaterMark,
getPageAnimateType, getPageAnimateType,
getIsProjectSetting, getIsProjectSetting,
}; };

View File

@ -177,6 +177,15 @@
<n-switch v-model:value="settingStore.multiTabsSetting.show" /> <n-switch v-model:value="settingStore.multiTabsSetting.show" />
</div> </div>
</div> </div>
<div class="drawer-setting-item">
<div class="drawer-setting-item-title"> 水印 </div>
<div class="drawer-setting-item-action">
<n-switch v-model:value="settingStore.isWaterMark" @change="handleWaterChange" />
</div>
</div>
<!--1.15废弃没啥用占用操作空间--> <!--1.15废弃没啥用占用操作空间-->
<!-- <div class="drawer-setting-item">--> <!-- <div class="drawer-setting-item">-->
<!-- <div class="drawer-setting-item-title"> 显示页脚 </div>--> <!-- <div class="drawer-setting-item-title"> 显示页脚 </div>-->

View File

@ -12,7 +12,7 @@
> >
<div v-if="navMode === 'horizontal'" class="logo"> <div v-if="navMode === 'horizontal'" class="logo">
<img alt="" src="~@/assets/images/logo.png" /> <img alt="" src="~@/assets/images/logo.png" />
<h2 v-show="!collapsed" class="title">NaiveAdmin</h2> <h2 v-show="!collapsed" class="title">云恒WMS</h2>
</div> </div>
<AsideMenu <AsideMenu
v-model:location="getMenuLocation" v-model:location="getMenuLocation"

View File

@ -7,7 +7,7 @@
v-if="isMixMenuNoneSub" v-if="isMixMenuNoneSub"
> >
<img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !isCollapsed }" /> <img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !isCollapsed }" />
<h2 v-show="!isCollapsed" class="mt-0 title">NaiveAdmin</h2> <h2 v-show="!isCollapsed" class="mt-0 title">云恒WMS</h2>
</div> </div>
</template> </template>

View File

@ -52,6 +52,8 @@ const setting = {
permissionMode: 'BACK', permissionMode: 'BACK',
//是否开启路由动画 //是否开启路由动画
isPageAnimate: true, isPageAnimate: true,
//是否开启水印
isWaterMark: true,
//路由动画类型 默认消退 //路由动画类型 默认消退
pageAnimateType: 'fade', pageAnimateType: 'fade',
//显示项目配置 //显示项目配置

View File

@ -20,6 +20,7 @@ const {
crumbsSetting, crumbsSetting,
permissionMode, permissionMode,
isPageAnimate, isPageAnimate,
isWaterMark,
pageAnimateType, pageAnimateType,
isProjectSetting, isProjectSetting,
} = projectSetting; } = projectSetting;
@ -35,6 +36,7 @@ interface ProjectSettingState {
crumbsSetting: IcrumbsSetting; //面包屑 crumbsSetting: IcrumbsSetting; //面包屑
permissionMode: string; //权限模式 permissionMode: string; //权限模式
isPageAnimate: boolean; //是否开启路由动画 isPageAnimate: boolean; //是否开启路由动画
isWaterMark: boolean; //是否开启水印
pageAnimateType: string; //路由动画类型 pageAnimateType: string; //路由动画类型
isProjectSetting: boolean; //显示项目配置 isProjectSetting: boolean; //显示项目配置
} }
@ -52,6 +54,7 @@ export const useProjectSettingStore = defineStore({
crumbsSetting, crumbsSetting,
permissionMode, permissionMode,
isPageAnimate, isPageAnimate,
isWaterMark,
pageAnimateType, pageAnimateType,
isProjectSetting, isProjectSetting,
}), }),
@ -86,6 +89,9 @@ export const useProjectSettingStore = defineStore({
getIsPageAnimate(): boolean { getIsPageAnimate(): boolean {
return this.isPageAnimate; return this.isPageAnimate;
}, },
getIsWaterMark(): boolean {
return this.isWaterMark;
},
getPageAnimateType(): string { getPageAnimateType(): string {
return this.pageAnimateType; return this.pageAnimateType;
}, },