ruoyi-plus-soybean/src/layouts/BasicLayout/index.vue

<template>
  <n-layout class="h-full" has-sider>
    <global-sider v-if="theme.isVerticalNav" :z-index="2" />
    <global-header v-if="isHorizontalMix" :z-index="2" />
    <div class="flex-1-hidden flex h-full">
      <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="1" />
      <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
        <div
          class="inline-flex-col-stretch w-full"
          :class="[{ 'content-padding': isHorizontalMix }, fullPage ? 'h-full' : 'min-h-100vh']"
        >
          <global-header v-if="!isHorizontalMix" :z-index="1" />
          <global-tab :z-index="1" />
          <n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
            <router-view v-slot="{ Component }">
              <keep-alive v-if="keepAlive">
                <component :is="Component" />
              </keep-alive>
              <component :is="Component" v-else />
            </router-view>
          </n-layout-content>
          <global-footer />
        </div>
      </n-scrollbar>
    </div>
    <setting-drawer />
  </n-layout>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
import { useThemeStore } from '@/store';
import { useScrollBehavior } from '@/hooks';
import { GlobalSider, GlobalHeader, GlobalTab, GlobalFooter, SettingDrawer } from './components';

const route = useRoute();
const theme = useThemeStore();
const { scrollbar, resetScrollWatcher } = useScrollBehavior();

const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
const headerAndMultiTabHeight = computed(() => {
  const {
    headerStyle: { height: hHeight },
    multiTabStyle: { height: mHeight }
  } = theme;
  return `${hHeight + mHeight}px`;
});

/** 缓存页面 */
const keepAlive = computed(() => Boolean(route.meta?.keepAlive));

/** 100%视高 */
const fullPage = computed(() => Boolean(route.meta?.fullPage));

// 路由切换，重置滚动行为
resetScrollWatcher();
</script>
<style scoped>
:deep(.n-scrollbar-rail) {
  z-index: 11;
}
.sider-margin {
  margin-top: v-bind(headerAndMultiTabHeight);
}
.content-padding {
  padding-top: v-bind(headerAndMultiTabHeight);
}
</style>