From 4b2f74aa11e76ae96623bbe041e8776f93b517fa Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Wed, 21 Feb 2024 00:14:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=B0=B4=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              | 20 +++++++--
 src/layout/components/AppMain/index.vue  |  8 +++-
 src/layout/components/Settings/index.vue |  2 +-
 src/layout/index.vue                     |  9 ++--
 src/settings.ts                          |  3 +-
 src/store/modules/settings.ts            | 53 ++++++++++++++----------
 src/typings/global.d.ts                  | 11 ++---
 7 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d866a185..3d61f642 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/layout/components/AppMain/index.vue b/src/layout/components/AppMain/index.vue
index ca1ef366..16280f70 100644
--- a/src/layout/components/AppMain/index.vue
+++ b/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>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index efe3f278..c59dd24c 100644
--- a/src/layout/components/Settings/index.vue
+++ b/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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 97958bf5..7c695161 100644
--- a/src/layout/index.vue
+++ b/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;
   }
 }
diff --git a/src/settings.ts b/src/settings.ts
index 5b536f5b..91c8e9df 100644
--- a/src/settings.ts
+++ b/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;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index ff6bb671..2d12d764 100644
--- a/src/store/modules/settings.ts
+++ b/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,
   };
 });
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index c4bb3362..fc27d1fb 100644
--- a/src/typings/global.d.ts
+++ b/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;
   }
 
   /**