修改

src/assets/styles/ruoyi.scss

@@ -355,7 +355,7 @@ $colors: (
   flex-direction: column;
   box-sizing: border-box;
   padding: 16px;
-  height: calc(100vh - 54px);
+  height: calc(100vh - 88px);
 }
 
 .border-bottom {

src/layout/components/AppMain.vue

@@ -1,15 +1,15 @@
 <template>
-  <section class="app-main">
-    <router-view v-slot="{ Component, route }">
-      <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews">
-        <component :is="Component" v-if="!route.meta.link" :key="route.path" />
-      </keep-alive>
-      <transition v-if="route.meta.noCache" :enter-active-class="animante" mode="out-in">
-        <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.path" />
-      </transition>
-    </router-view>
-    <iframe-toggle />
-  </section>
+    <section class="app-main">
+        <router-view v-slot="{ Component, route }">
+            <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews">
+                <component :is="Component" v-if="!route.meta.link" :key="route.path" />
+            </keep-alive>
+            <transition v-if="route.meta.noCache" :enter-active-class="animante" mode="out-in">
+                <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.path" />
+            </transition>
+        </router-view>
+        <iframe-toggle />
+    </section>
 </template>
 
 <script setup name="AppMain" lang="ts">
@@ -25,77 +25,77 @@ const tagsViewStore = useTagsViewStore();
 const animante = ref<string>('');
 const animationEnable = ref(useSettingsStore().animationEnable);
 watch(
-  () => useSettingsStore().animationEnable,
-  (val: boolean) => {
-    animationEnable.value = val;
-    if (val) {
-      animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
-    } else {
-      animante.value = proxy?.animate.defaultAnimate as string;
-    }
-  },
-  { immediate: true }
+    () => useSettingsStore().animationEnable,
+    (val: boolean) => {
+        animationEnable.value = val;
+        if (val) {
+            animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
+        } else {
+            animante.value = proxy?.animate.defaultAnimate as string;
+        }
+    },
+    { immediate: true }
 );
 
 onMounted(() => {
-  addIframe()
-})
+    addIframe();
+});
 
 watchEffect((route) => {
-  addIframe()
-})
+    addIframe();
+});
 
 function addIframe() {
-  if (route.meta.link) {
-    useTagsViewStore().addIframeView(route)
-  }
+    if (route.meta.link) {
+        useTagsViewStore().addIframeView(route);
+    }
 }
 </script>
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 54px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  background-color: #f5f5f5;
+    /* 50= navbar  50  */
+    min-height: calc(100vh - 54px);
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: #f5f5f5;
 }
 
-.fixed-header+.app-main {
-  padding-top: 50px;
+.fixed-header + .app-main {
+    padding-top: 50px;
 }
 
 .hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
-  }
+    .app-main {
+        /* 84 = navbar + tags-view = 50 + 34 */
+        min-height: calc(100vh - 84px);
+    }
 
-  .fixed-header+.app-main {
-    padding-top: 84px;
-  }
+    .fixed-header + .app-main {
+        padding-top: 84px;
+    }
 }
 </style>
 <style lang="scss">
 // fix css style bug in open el-dialog
 .el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 6px;
-  }
+    .fixed-header {
+        padding-right: 6px;
+    }
 }
 
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+    width: 6px;
+    height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
+    background-color: #f1f1f1;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #c0c0c0;
-  border-radius: 3px;
+    background-color: #c0c0c0;
+    border-radius: 3px;
 }
 </style>

src/settings.ts

@@ -25,7 +25,7 @@ const setting: DefaultSettings = {
     /**
      * 是否显示 tagsView
      */
-    tagsView: false,
+    tagsView: true,
 
     /**
      * 是否固定头部

src/store/modules/settings.ts

@@ -3,45 +3,45 @@ import defaultSettings from '@/settings';
 import { useDynamicTitle } from '@/utils/dynamicTitle';
 
 export const useSettingsStore = defineStore('setting', () => {
-  const storageSetting = useStorage<LayoutSetting>('layout-setting', {
-    topNav: defaultSettings.topNav,
-    tagsView: defaultSettings.tagsView,
-    fixedHeader: defaultSettings.fixedHeader,
-    sidebarLogo: defaultSettings.sidebarLogo,
-    dynamicTitle: defaultSettings.dynamicTitle,
-    sideTheme: defaultSettings.sideTheme,
-    theme: defaultSettings.theme
-  });
-  const title = ref<string>(defaultSettings.title);
-  const theme = ref<string>(storageSetting.value.theme);
-  const sideTheme = ref<string>(storageSetting.value.sideTheme);
-  const showSettings = ref<boolean>(defaultSettings.showSettings);
-  const topNav = ref<boolean>(storageSetting.value.topNav);
-  const tagsView = ref<boolean>(storageSetting.value.tagsView);
-  const fixedHeader = ref<boolean>(storageSetting.value.fixedHeader);
-  const sidebarLogo = ref<boolean>(storageSetting.value.sidebarLogo);
-  const dynamicTitle = ref<boolean>(storageSetting.value.dynamicTitle);
-  const animationEnable = ref<boolean>(defaultSettings.animationEnable);
-  const dark = ref<boolean>(defaultSettings.dark);
+    const storageSetting = useStorage<LayoutSetting>('layout-setting', {
+        topNav: defaultSettings.topNav,
+        tagsView: defaultSettings.tagsView,
+        fixedHeader: defaultSettings.fixedHeader,
+        sidebarLogo: defaultSettings.sidebarLogo,
+        dynamicTitle: defaultSettings.dynamicTitle,
+        sideTheme: defaultSettings.sideTheme,
+        theme: defaultSettings.theme
+    });
+    const title = ref<string>(defaultSettings.title);
+    const theme = ref<string>(storageSetting.value.theme);
+    const sideTheme = ref<string>(storageSetting.value.sideTheme);
+    const showSettings = ref<boolean>(defaultSettings.showSettings);
+    const topNav = ref<boolean>(storageSetting.value.topNav);
+    const tagsView = ref<boolean>(storageSetting.value.tagsView);
+    const fixedHeader = ref<boolean>(storageSetting.value.fixedHeader);
+    const sidebarLogo = ref<boolean>(storageSetting.value.sidebarLogo);
+    const dynamicTitle = ref<boolean>(storageSetting.value.dynamicTitle);
+    const animationEnable = ref<boolean>(defaultSettings.animationEnable);
+    const dark = ref<boolean>(defaultSettings.dark);
 
-  const setTitle = (value: string) => {
-    title.value = value;
-    useDynamicTitle();
-  };
-  return {
-    title,
-    theme,
-    sideTheme,
-    showSettings,
-    topNav,
-    tagsView,
-    fixedHeader,
-    sidebarLogo,
-    dynamicTitle,
-    animationEnable,
-    dark,
-    setTitle
-  };
+    const setTitle = (value: string) => {
+        title.value = value;
+        useDynamicTitle();
+    };
+    return {
+        title,
+        theme,
+        sideTheme,
+        showSettings,
+        topNav,
+        tagsView,
+        fixedHeader,
+        sidebarLogo,
+        dynamicTitle,
+        animationEnable,
+        dark,
+        setTitle
+    };
 });
 
 export default useSettingsStore;