refactor(components): blankLayout引入GlobalContent

src/layouts/BasicLayout/components/HorizontalLayout/index.vue

@@ -16,7 +16,7 @@
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '../common';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const { headerInverted, headerPosition, scrollbarContentStyle, scrollbar } = useLayoutConfig();

src/layouts/BasicLayout/components/HorizontalMixLayout/index.vue

@@ -39,7 +39,7 @@
 import { NLayout, NLayoutContent, NLayoutSider, NLayoutHeader, NScrollbar } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalMenu, SpacePlaceholder } from '../common';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalMenu, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const app = useAppStore();

src/layouts/BasicLayout/components/VerticalLayout/index.vue

@@ -45,7 +45,7 @@ import {
   SpacePlaceholder,
   GlobalLogo,
   GlobalMenu
-} from '../common';
+} from '@/layouts/common';
 
 const theme = useThemeStore();
 const app = useAppStore();

src/layouts/BasicLayout/components/VerticalMixLayout/index.vue

@@ -21,7 +21,7 @@
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { MixSider, GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '../common';
+import { MixSider, GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const { headerInverted, headerPosition, globalSiderClassAndStyle, scrollbarContentStyle, scrollbar } =

src/layouts/BasicLayout/components/index.ts

@@ -4,4 +4,3 @@ import HorizontalLayout from './HorizontalLayout/index.vue';
 import HorizontalMixLayout from './HorizontalMixLayout/index.vue';
 
 export { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout };
-export * from './common';

src/layouts/BasicLayout/index.vue

@@ -7,7 +7,8 @@
 import type { Component } from 'vue';
 import { useThemeStore } from '@/store';
 import type { NavMode } from '@/interface';
-import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout, SettingDrawer } from './components';
+import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout } from './components';
+import { SettingDrawer } from '../common';
 
 type LayoutComponent = {
   [key in NavMode]: Component;

src/layouts/BlankLayout/index.vue

@@ -1,31 +1,14 @@
 <template>
-  <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
-    <div class="inline-block wh-full bg-[#f6f9f8] dark:bg-dark">
-      <router-view v-slot="{ Component, route: itemRoute }">
-        <transition :name="theme.pageAnimateType" mode="out-in" appear>
-          <keep-alive :include="cacheRoutes">
-            <component
-              :is="Component"
-              v-if="app.reloadFlag"
-              :key="itemRoute.fullPath"
-              :class="{ 'min-h-100vh': !routeProps.fullPage }"
-            />
-          </keep-alive>
-        </transition>
-      </router-view>
-    </div>
+  <n-scrollbar ref="scrollbar" class="h-full" :content-style="scrollbarContentStyle">
+    <global-content :show-padding="false" />
   </n-scrollbar>
 </template>
 
 <script lang="ts" setup>
 import { NScrollbar } from 'naive-ui';
-import { useThemeStore, useAppStore } from '@/store';
-import { cacheRoutes } from '@/router';
-import { useRouteProps } from '@/composables';
+import { useLayoutConfig } from '@/composables';
+import { GlobalContent } from '../common';
 
-const theme = useThemeStore();
-const app = useAppStore();
-
-const routeProps = useRouteProps();
+const { scrollbarContentStyle } = useLayoutConfig();
 </script>
 <style scoped></style>

src/layouts/common/GlobalContent/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="flex-1 flex-col-stretch bg-[#f6f9f8] dark:bg-deep-dark p-16px transition-all duration-300 ease-in-out"
-    :class="{ 'overflow-hidden': routeProps.fullPage }"
+    class="flex-1 flex-col-stretch bg-[#f6f9f8] dark:bg-deep-dark transition-all duration-300 ease-in-out"
+    :class="{ 'overflow-hidden': routeProps.fullPage, 'p-16px': showPadding }"
   >
     <router-view v-slot="{ Component, route }">
       <transition :name="theme.pageAnimateType" mode="out-in" appear>
@@ -18,6 +18,15 @@ import { cacheRoutes } from '@/router';
 import { useAppStore, useThemeStore } from '@/store';
 import { useRouteProps } from '@/composables';
 
+interface Props {
+  /** 显示padding */
+  showPadding?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showPadding: true
+});
+
 const theme = useThemeStore();
 const app = useAppStore();
 const routeProps = useRouteProps();