添加水印开关

src/App.vue

@@ -17,6 +17,7 @@
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useRoute } from 'vue-router';
   import { PageEnum } from '@/enums/pageEnum';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import Watermark from '@/utils/wartermark';
 
   const route = useRoute();
@@ -26,7 +27,7 @@
   const lockTime = computed(() => useLockscreen.lockTime);
 
   const zIndex = ref(3000);
-
+  const {getIsWaterMark} = useProjectSetting();
   const LoginName = PageEnum.BASE_LOGIN_NAME;
 
   let timer;
@@ -50,8 +51,12 @@
   };
  
   onMounted(() => {
-    const waterText = import.meta.env.VITE_GLOB_APP_TITLE;
+    if(getIsWaterMark.value) {
-    Watermark.set(waterText)
+      const waterText = import.meta.env.VITE_GLOB_APP_TITLE;
+      Watermark.set(waterText)
+    } else {
+      Watermark.del()
+    }
   });
   onUnmounted(() => {
     // document.removeEventListener('mousedown', timekeeping);

src/hooks/setting/useProjectSetting.ts

@@ -18,6 +18,8 @@ export function useProjectSetting() {
 
   const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
 
+  const getIsWaterMark = computed(() => projectStore.isWaterMark);
+
   const getPermissionMode = computed(() => projectStore.permissionMode);
 
   const getShowFooter = computed(() => projectStore.showFooter);
@@ -46,6 +48,7 @@ export function useProjectSetting() {
     getPageAnimateType,
     getMenuWidth,
     getMenuMinWidth,
+    getIsWaterMark,
     getIsProjectSetting,
   };
 }

src/layout/components/Header/ProjectSetting.vue

@@ -246,6 +246,12 @@
           <el-switch v-model="settingStore.multiTabsSetting.show" />
         </div>
       </div>
+      <div class="drawer-setting-item">
+        <div class="drawer-setting-item-title"> 水印 </div>
+        <div class="drawer-setting-item-action">
+          <el-switch v-model="settingStore.isWaterMark" @change="handleWaterChange" />
+        </div>
+      </div>
       <!--1.15废弃，没啥用，占用操作空间-->
       <!--        <div class="drawer-setting-item">-->
       <!--          <div class="drawer-setting-item-title"> 显示页脚 </div>-->
@@ -294,7 +300,7 @@
   import { animates as animateOptions } from '@/settings/animateSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
   import colorTool from '@/utils/color';
-
+  import Watermark from '@/utils/wartermark';
   defineProps({
     title: {
       type: String,
@@ -348,6 +354,15 @@
     settingStore.menuSetting.mixMenu = false;
   }
 
+  function handleWaterChange(val){
+  if(val) {
+    const waterText = import.meta.env.VITE_GLOB_APP_TITLE;
+    Watermark.set(waterText)
+  } else {
+    Watermark.del()
+  }
+ }
+
   //主题色切换
   function themeColorChange(color) {
     document.documentElement.style.setProperty('--el-color-primary', color);

src/settings/projectSetting.ts

@@ -58,5 +58,7 @@ const setting = {
   pageAnimateType: 'fade',
   //显示项目配置
   isProjectSetting: true,
+  //显示水印
+  isWaterMark:true
 };
 export default setting;

src/store/modules/projectSetting.ts

@@ -22,6 +22,7 @@ const {
   isPageAnimate,
   pageAnimateType,
   isProjectSetting,
+  isWaterMark
 } = projectSetting;
 
 interface ProjectSettingState {
@@ -37,6 +38,7 @@ interface ProjectSettingState {
   isPageAnimate: boolean; //是否开启路由动画
   pageAnimateType: string; //路由动画类型
   isProjectSetting: boolean; //显示项目配置
+  isWaterMark:boolean //显示水印
 }
 
 export const useProjectSettingStore = defineStore({
@@ -54,6 +56,7 @@ export const useProjectSettingStore = defineStore({
     isPageAnimate,
     pageAnimateType,
     isProjectSetting,
+    isWaterMark
   }),
   getters: {
     getNavMode(): string {
@@ -92,6 +95,9 @@ export const useProjectSettingStore = defineStore({
     getIsProjectSetting(): boolean {
       return this.isProjectSetting;
     },
+    getIsWaterMark(): boolean {
+      return this.isWaterMark;
+    },
   },
   actions: {
     setNavTheme(value: string): void {