feat: ✨ 新增水印

src/App.vue

@@ -1,13 +1,27 @@
 <template>
-  <el-config-provider :locale="appStore.locale" :size="appStore.size">
-    <el-watermark content="vue3-element-admin" class="wh-full">
+  <el-config-provider :locale="locale" :size="size">
+    <!-- 开启水印 -->
+    <el-watermark
+      v-if="watermarkEnabled"
+      :content="watermarkContent"
+      class="wh-full"
+    >
       <router-view />
     </el-watermark>
+    <!-- 关闭水印 -->
+    <router-view v-else />
   </el-config-provider>
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from "@/store/modules/app";
+import { useAppStore, useSettingsStore } from "@/store";
+import defaultSettings from "@/settings";
 
 const appStore = useAppStore();
+const locale = computed(() => appStore.locale);
+const size = computed(() => appStore.size);
+
+const watermarkContent = defaultSettings.watermarkContent;
+const settingsStore = useSettingsStore();
+const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);
 </script>

src/layout/components/AppMain/index.vue

@@ -73,7 +73,13 @@ const cachedViews = computed(() => tagsViewStore.cachedViews); // 缓存页面
 
 .layout-top {
   .fixed-header + .app-main {
-    padding-top: $tags-view-height;
+    padding-top: 0;
+  }
+
+  .hasTagsView {
+    .fixed-header + .app-main {
+      padding-top: $tags-view-height;
+    }
   }
 }
 </style>

src/layout/components/Settings/index.vue

@@ -30,7 +30,7 @@
 
     <div class="py-[8px] flex-x-between">
       <span class="text-xs">开启水印</span>
-      <el-switch v-model="settingsStore.sidebarLogo" />
+      <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
 
     <el-divider>主题颜色</el-divider>

src/layout/index.vue

@@ -25,7 +25,7 @@
           <TagsView v-if="showTagsView" />
         </div>
         <AppMain />
-        <RightPanel v-if="showSettings">
+        <RightPanel v-if="defaultSettings.showSettings">
           <Settings />
         </RightPanel>
       </div>
@@ -38,7 +38,7 @@
         <TagsView v-if="showTagsView" />
       </div>
       <AppMain />
-      <RightPanel v-if="showSettings">
+      <RightPanel v-if="defaultSettings.showSettings">
         <Settings />
       </RightPanel>
     </div>
@@ -47,6 +47,7 @@
 
 <script setup lang="ts">
 import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
+import defaultSettings from "@/settings";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -54,7 +55,6 @@ const permissionStore = usePermissionStore();
 
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 const showTagsView = computed(() => settingsStore.tagsView);
-const showSettings = computed(() => settingsStore.showSettings);
 const layout = computed(() => settingsStore.layout);
 
 const activeTopMenuPath = computed(() => {
@@ -176,7 +176,8 @@ function toggleSidebar() {
   }
 
   .main-container {
-    margin-top: $navbar-height;
+    min-height: (100vh - $navbar-height);
+    padding-top: $navbar-height;
     margin-left: 0;
   }
 }

src/settings.ts

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

src/store/modules/settings.ts

@@ -1,56 +1,63 @@
-import { defineStore } from "pinia";
 import defaultSettings from "@/settings";
 
+type SettingsValue = boolean | string;
+
 export const useSettingsStore = defineStore("setting", () => {
-  const title = defaultSettings.title;
-  const version = defaultSettings.version;
-
+  // 是否显示标签视图
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
-
-  const showSettings = ref<boolean>(defaultSettings.showSettings);
-  const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
+  // 是否显示侧边栏logo
+  const sidebarLogo = useStorage<boolean>(
+    "sidebarLogo",
+    defaultSettings.sidebarLogo
+  );
+  // 是否固定头部
   const fixedHeader = useStorage<boolean>(
     "fixedHeader",
     defaultSettings.fixedHeader
   );
+  // 布局模式：left-左侧模式(默认) top-顶部模式 mix-混合模式
   const layout = useStorage<string>("layout", defaultSettings.layout);
+  // 主题颜色
   const themeColor = useStorage<string>(
     "themeColor",
     defaultSettings.themeColor
   );
+  // 主题：light-亮色(默认) dark-暗色
   const theme = useStorage<string>("theme", defaultSettings.theme);
+  // 是否开启水印
+  const watermarkEnabled = useStorage<boolean>(
+    "watermarkEnabled",
+    defaultSettings.watermarkEnabled
+  );
 
-  const watermark = useStorage<any>("watermark", defaultSettings.watermark);
-
-  const settingsMap: Record<string, Ref<any>> = {
-    showSettings,
+  const settingsMap: Record<string, Ref<SettingsValue>> = {
     fixedHeader,
     tagsView,
     sidebarLogo,
     layout,
     themeColor,
     theme,
-    watermark: watermark.value,
+    watermarkEnabled,
   };
 
-  function changeSetting({ key, value }: { key: string; value: any }) {
+  function changeSetting({
+    key,
+    value,
+  }: {
+    key: string;
+    value: SettingsValue;
+  }) {
     const setting = settingsMap[key];
-    if (setting !== undefined) {
+    if (setting) {
       setting.value = value;
+      // Special handling for theme changes
       if (key === "theme") {
-        if (value === "dark") {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
+        document.documentElement.classList.toggle("dark", value === "dark");
       }
     }
   }
 
   return {
-    title,
-    version,
-    showSettings,
     tagsView,
     fixedHeader,
     sidebarLogo,
@@ -58,6 +65,6 @@ export const useSettingsStore = defineStore("setting", () => {
     themeColor,
     changeSetting,
     theme,
-    watermark,
+    watermarkEnabled,
   };
 });

src/typings/global.d.ts

@@ -65,13 +65,10 @@ declare global {
     size: string;
     /** 语言( zh-cn| en) */
     language: string;
-    /** 水印配置 */
-    watermark: {
-      /** 是否开启水印 */
-      enabled: boolean;
-      /** 水印内容 */
-      content: string;
-    };
+    /** 是否开启水印 */
+    watermarkEnabled: boolean;
+    /** 水印内容 */
+    watermarkContent: string;
   }
 
   /**