加水印

.env

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

src/App.vue

@@ -1,10 +1,5 @@
 <template>
-  <NConfigProvider
-    :date-locale="dateZhCN"
-    :locale="zhCN"
-    :theme="getDarkTheme"
-    :theme-overrides="getThemeOverrides"
-  >
+  <NConfigProvider :date-locale="dateZhCN" :locale="zhCN" :theme="getDarkTheme" :theme-overrides="getThemeOverrides">
     <AppProvider>
       <RouterView v-if="!isLock" />
 
@@ -12,75 +7,82 @@
         <LockScreen />
       </transition>
     </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>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted } from 'vue';
-  import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
-  import { LockScreen } from '@/components/Lockscreen';
-  import { AppProvider } from '@/components/Application';
-  import { useLockscreenStore } from '@/store/modules/lockscreen';
-  import { useRoute } from 'vue-router';
-  import { useDesignSettingStore } from '@/store/modules/designSetting';
-  import { lighten } from '@/utils';
+import { computed, onMounted, onUnmounted } from 'vue';
+import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
+import { LockScreen } from '@/components/Lockscreen';
+import { AppProvider } from '@/components/Application';
+import { useLockscreenStore } from '@/store/modules/lockscreen';
+import { useRoute } from 'vue-router';
+import { useDesignSettingStore } from '@/store/modules/designSetting';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+import { lighten } from '@/utils';
 
-  const route = useRoute();
-  const useLockscreen = useLockscreenStore();
-  const designStore = useDesignSettingStore();
+const route = useRoute();
+const useLockscreen = useLockscreenStore();
+const designStore = useDesignSettingStore();
 
-  const isLock = computed(() => useLockscreen.isLock);
-  const lockTime = computed(() => useLockscreen.lockTime);
+const isLock = computed(() => useLockscreen.isLock);
+const lockTime = computed(() => useLockscreen.lockTime);
 
-  /**
-   * @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 proName = import.meta.env.VITE_GLOB_APP_TITLE;
 
-  const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
+const { getIsWaterMark } = useProjectSetting();
 
-  let timer;
-
-  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);
+/**
+ * @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',
+    },
   };
+});
 
-  onMounted(() => {
-    // document.addEventListener('mousedown', timekeeping);
-  });
+const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
 
-  onUnmounted(() => {
-    // document.removeEventListener('mousedown', timekeeping);
-  });
+let timer;
+
+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>

src/hooks/setting/useProjectSetting.ts

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

src/layout/components/Header/ProjectSetting.vue

@@ -177,6 +177,15 @@
             <n-switch v-model:value="settingStore.multiTabsSetting.show" />
           </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废弃，没啥用，占用操作空间-->
         <!--        <div class="drawer-setting-item">-->
         <!--          <div class="drawer-setting-item-title"> 显示页脚 </div>-->

src/layout/components/Header/index.vue

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

src/layout/components/Logo/index.vue

@@ -7,7 +7,7 @@
     v-if="isMixMenuNoneSub"
   >
     <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>
 </template>
 

src/settings/projectSetting.ts

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

src/store/modules/projectSetting.ts

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