feat(project): 移除页脚，增加全局水印

src/layouts/BasicLayout/index.vue

@@ -57,7 +57,6 @@
         <div
           class="h-full"
           :class="{
-            'p-b-40px': appStore.fixedFooter,
             'p-t-122px': appStore.fixedHeader && appStore.showTabs,
             'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
           }"
@@ -79,14 +78,7 @@
         </div>
       </n-layout-content>
       <BackTop />
-      <n-layout-footer
+      <Watermark :show-watermark="appStore.showWatermark" />
-        :position="appStore.fixedFooter ? 'absolute' : 'static'"
-        bordered
-        class="flex-center h-40px"
-        style="margin-top: auto"
-      >
-        {{ appStore.footerText }}
-      </n-layout-footer>
     </n-layout>
   </n-layout>
 </template>
@@ -107,6 +99,7 @@ import {
 	Reload,
 	TabBar,
 	BackTop,
+	Watermark,
 } from '../components';
 import { useAppStore, useRouteStore } from '@/store';
 

src/layouts/components/common/Watermark.vue

@@ -0,0 +1,24 @@
+<template>
+  <n-watermark
+    v-if="props.showWatermark"
+    content="Ench-Admin"
+    cross
+    fullscreen
+    :font-size="16"
+    :line-height="16"
+    :width="384"
+    :height="384"
+    :x-offset="12"
+    :y-offset="60"
+    :rotate="-15"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+	showWatermark: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+	showWatermark: false,
+});
+</script>

src/layouts/components/header/Setting.vue

@@ -1,55 +1,91 @@
 <template>
-  <n-tooltip placement="bottom" trigger="hover">
+  <n-tooltip
+    placement="bottom"
+    trigger="hover"
+  >
     <template #trigger>
       <HeaderButton @click="openSetting">
         <div>
           <i-icon-park-outline-setting-two />
-          <n-drawer v-model:show="drawerActive" :width="300">
+          <n-drawer
+            v-model:show="drawerActive"
+            :width="300"
+          >
             <n-drawer-content title="系统设置">
               <n-divider>主题设置</n-divider>
               <n-space vertical>
                 <n-space justify="space-between">
                   深色模式
-                  <n-switch :value="appStore.darkMode" @update:value="appStore.toggleDarkMode()" />
+                  <n-switch
+                    :value="appStore.darkMode"
+                    @update:value="appStore.toggleDarkMode()"
+                  />
                 </n-space>
                 <n-space justify="space-between">
                   色弱模式
-                  <n-switch :value="appStore.colorWeak" @update:value="appStore.toggleColorWeak()" />
+                  <n-switch
+                    :value="appStore.colorWeak"
+                    @update:value="appStore.toggleColorWeak()"
+                  />
                 </n-space>
                 <n-space justify="space-between">
                   灰色模式
-                  <n-switch :value="appStore.grayMode" @update:value="appStore.toggleGrayMode()" />
+                  <n-switch
+                    :value="appStore.grayMode"
+                    @update:value="appStore.toggleGrayMode()"
+                  />
                 </n-space>
               </n-space>
               <n-divider>界面显示</n-divider>
               <n-space vertical>
                 <n-space justify="space-between">
                   LOGO显示
-                  <n-switch :value="appStore.showLogo" @update:value="appStore.toggleShowLogo()" />
+                  <n-switch
+                    :value="appStore.showLogo"
+                    @update:value="appStore.toggleShowLogo()"
+                  />
                 </n-space>
                 <n-space justify="space-between">
                   多页签
-                  <n-switch :value="appStore.showTabs" @update:value="appStore.toggleShowTabs()" />
+                  <n-switch
+                    :value="appStore.showTabs"
+                    @update:value="appStore.toggleShowTabs()"
+                  />
                 </n-space>
                 <n-space justify="space-between">
                   面包屑
-                  <n-switch :value="appStore.showBreadcrumb" @update:value="appStore.toggleShowBreadcrumb()" />
+                  <n-switch
+                    :value="appStore.showBreadcrumb"
+                    @update:value="appStore.toggleShowBreadcrumb()"
+                  />
                 </n-space>
                 <n-space justify="space-between">
                   固定头部和多页签
-                  <n-switch :value="appStore.fixedHeader" @update:value="appStore.toggleFixedHeader()" />
+                  <n-switch
-                </n-space>
+                    :value="appStore.fixedHeader"
-                <n-space justify="space-between">
+                    @update:value="appStore.toggleFixedHeader()"
-                  固定底部
+                  />
-                  <n-switch :value="appStore.fixedFooter" @update:value="appStore.toggleFixedFooter()" />
                 </n-space>
                 <n-space justify="space-between">
                   侧边栏反转色
-                  <n-switch :value="appStore.invertedSider" @update:value="appStore.toggleInvertedSider()" />
+                  <n-switch
+                    :value="appStore.invertedSider"
+                    @update:value="appStore.toggleInvertedSider()"
+                  />
                 </n-space>
                 <n-space justify="space-between">
                   头部反转色
-                  <n-switch :value="appStore.invertedHeader" @update:value="appStore.toggleInvertedHeader()" />
+                  <n-switch
+                    :value="appStore.invertedHeader"
+                    @update:value="appStore.toggleInvertedHeader()"
+                  />
+                </n-space>
+                <n-space justify="space-between">
+                  水印
+                  <n-switch
+                    :value="appStore.showWatermark"
+                    @update:value="appStore.toggleShowWatermark()"
+                  />
                 </n-space>
               </n-space>
             </n-drawer-content>
@@ -69,7 +105,7 @@ const appStore = useAppStore();
 
 const drawerActive = ref(false);
 const openSetting = () => {
-  drawerActive.value = !drawerActive.value;
+	drawerActive.value = !drawerActive.value;
 };
 </script>
 

src/layouts/components/index.ts

@@ -20,19 +20,22 @@ import TabBar from './tab/TabBar.vue';
 /* 其他组件 */
 // 返回顶部
 import BackTop from './common/BackTop.vue';
+import Watermark from './common/Watermark.vue';
+
 export {
-  Breadcrumb,
+	Breadcrumb,
-  CollapaseButton,
+	CollapaseButton,
-  Menu,
+	Menu,
-  Logo,
+	Logo,
-  FullScreen,
+	FullScreen,
-  DarkMode,
+	DarkMode,
-  Setting,
+	Setting,
-  Github,
+	Github,
-  Notices,
+	Notices,
-  UserCenter,
+	UserCenter,
-  Search,
+	Search,
-  Reload,
+	Reload,
-  TabBar,
+	TabBar,
-  BackTop,
+	BackTop,
+	Watermark,
 };

src/store/modules/app.ts

@@ -15,9 +15,9 @@ interface AppStatus {
 	showTabs: boolean;
 	showBreadcrumb: boolean;
 	fixedHeader: boolean;
-	fixedFooter: boolean;
 	invertedSider: boolean;
 	invertedHeader: boolean;
+	showWatermark: boolean;
 }
 
 const docEle = document.documentElement;
@@ -37,9 +37,9 @@ export const useAppStore = defineStore('app-store', {
 			showTabs: true,
 			showBreadcrumb: true,
 			fixedHeader: false,
-			fixedFooter: true,
 			invertedSider: false,
 			invertedHeader: false,
+			showWatermark: false,
 		};
 	},
 	actions: {
@@ -119,10 +119,6 @@ export const useAppStore = defineStore('app-store', {
 			this.fixedHeader = !this.fixedHeader;
 		},
 		/* 切换固定底部 */
-		toggleFixedFooter() {
-			this.fixedFooter = !this.fixedFooter;
-		},
-		/* 切换固定底部 */
 		toggleInvertedSider() {
 			this.invertedSider = !this.invertedSider;
 		},
@@ -130,5 +126,9 @@ export const useAppStore = defineStore('app-store', {
 		toggleInvertedHeader() {
 			this.invertedHeader = !this.invertedHeader;
 		},
+		/* 切换固定底部 */
+		toggleShowWatermark() {
+			this.showWatermark = !this.showWatermark;
+		},
 	},
 });