jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): basicLayout布局组件重构完成：根据NavMode拆分为多个布局组件

Browse Source
This commit is contained in:
Soybean
2021-11-20 20:14:02 +08:00
parent 0e0d559d2f
commit ffe987832f
110 changed files with 743 additions and 1713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/layouts/BasicLayout/index.vue
View File

@ -1,51 +1,25 @@
<template>
<n-layout class="h-full" has-sider>
<global-sider v-if="theme.isVerticalNav" :z-index="13" />
<global-header v-if="isHorizontalMix" :z-index="14" />
<div class="flex-1-hidden flex h-full">
<global-sider v-if="isHorizontalMix" :z-index="13" />
<n-scrollbar class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
<div
class="inline-flex-col-stretch w-full"
:class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
>
<global-header v-if="!isHorizontalMix" :z-index="12" />
<global-tab v-if="theme.multiTabStyle.visible" :z-index="11" />
<global-content />
<global-footer />
</div>
</n-scrollbar>
</div>
<setting-drawer />
</n-layout>
<component :is="layoutComponent[theme.navStyle.mode]" />
<setting-drawer />
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { NLayout, NScrollbar } from 'naive-ui';
<script setup lang="ts">
import type { Component } from 'vue';
import { useThemeStore } from '@/store';
import { useRouteProps } from '@/composables';
import { GlobalSider, GlobalHeader, GlobalTab, GlobalContent, GlobalFooter, SettingDrawer } from './components';
import type { NavMode } from '@/interface';
import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout, SettingDrawer } from './components';
type LayoutComponent = {
[key in NavMode]: Component;
};
const theme = useThemeStore();
const routeProps = useRouteProps();
const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
const headerAndMultiTabHeight = computed(() => {
const {
headerStyle: { height: hHeight },
multiTabStyle: { height: mHeight }
} = theme;
return `${hHeight + mHeight}px`;
});
const layoutComponent: LayoutComponent = {
vertical: VerticalLayout,
'vertical-mix': VerticalMixLayout,
horizontal: HorizontalLayout,
'horizontal-mix': HorizontalMixLayout
};
</script>
<style scoped>
:deep(.n-scrollbar-rail) {
z-index: 11;
}
.content-padding {
padding-top: v-bind(headerAndMultiTabHeight);
}
</style>
<style></style>