feat: ✨ 新增 element-plus 水印

src/App.vue

@@ -1,11 +1,13 @@
+<template>
+  <el-config-provider :locale="appStore.locale" :size="appStore.size">
+    <el-watermark content="vue3-element-admin" class="wh-full">
+      <router-view />
+    </el-watermark>
+  </el-config-provider>
+</template>
+
 <script setup lang="ts">
 import { useAppStore } from "@/store/modules/app";
 
 const appStore = useAppStore();
 </script>
-
-<template>
-  <el-config-provider :locale="appStore.locale" :size="appStore.size">
-    <router-view />
-  </el-config-provider>
-</template>

src/layout/components/Settings/index.vue

@@ -18,19 +18,24 @@
       <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="py-[8px] flex justify-between">
+    <div class="py-[8px] flex-x-between">
       <span class="text-xs">固定 Header</span>
       <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="py-[8px] flex justify-between">
+    <div class="py-[8px] flex-x-between">
       <span class="text-xs">侧边栏 Logo</span>
       <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
+    <div class="py-[8px] flex-x-between">
+      <span class="text-xs">开启水印</span>
+      <el-switch v-model="settingsStore.sidebarLogo" />
+    </div>
+
     <el-divider>主题颜色</el-divider>
 
-    <ul class="w-full space-x-2 flex justify-center py-2">
+    <ul class="w-full space-x-2 flex-x-center py-2">
       <li
         v-for="(color, index) in themeColors"
         :key="index"
@@ -165,7 +170,7 @@ const currentThemeColor = computed(() => {
 });
 
 /**
- * 切换主题
+ * 切换暗黑模式
  */
 const isDark = ref<boolean>(settingsStore.theme === "dark");
 const handleThemeChange = (isDark: any) => {

src/layout/index.vue

@@ -6,7 +6,6 @@
       class="fixed z-1000 bg-black bg-opacity-20"
       @click="handleOutsideClick"
     ></div>
-
     <Sidebar class="sidebar-container" />
 
     <!-- 混合布局 -->

src/settings.ts

@@ -10,7 +10,7 @@ const defaultSettings: AppSettings = {
   size: "default",
   language: "zh-cn",
   themeColor: "#409EFF",
-  watermark: { enabled: false, content: "有来技术" },
+  watermark: { enabled: false, content: "vue3-element-admin" },
 };
 
 export default defaultSettings;

src/store/modules/settings.ts

@@ -20,7 +20,6 @@ export const useSettingsStore = defineStore("setting", () => {
   );
   const theme = useStorage<string>("theme", defaultSettings.theme);
 
-  // Whether to enable watermark
   const watermark = useStorage<any>("watermark", defaultSettings.watermark);
 
   const settingsMap: Record<string, Ref<any>> = {