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

src/composables/common/layout.ts

@@ -1,9 +1,13 @@
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import type { ScrollbarInst } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
+import { useRouteProps } from './route';
 
 export function useLayoutConfig() {
   const theme = useThemeStore();
   const app = useAppStore();
+  const { setScrollbarInstance } = useAppStore();
+  const routeProps = useRouteProps();
 
   /** 反转sider */
   const siderInverted = computed(() => theme.navStyle.theme !== 'light');
@@ -30,13 +34,38 @@ export function useLayoutConfig() {
   /** 全局头部和多页签的总高度 */
   const headerAndMultiTabHeight = computed(() => {
     const {
-      multiTabStyle: { visible, height: tH },
-      headerStyle: { height: hH }
+      multiTabStyle: { visible, height: tabHeight },
+      headerStyle: { height: headerHeight }
     } = theme;
-    const height = visible ? tH + hH : hH;
+    const height = visible ? headerHeight + tabHeight : headerHeight;
     return `${height}px`;
   });
 
+  /** 全局侧边栏的样式 */
+  const globalSiderClassAndStyle = {
+    class: 'transition-all duration-300 ease-in-out',
+    style: 'z-index:12;box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);'
+  };
+
+  /** 纵向flex布局样式 */
+  const flexColumnStyle = 'display:flex;flex-direction:column;height:100%;';
+
+  /** scrollbar的content的样式 */
+  const scrollbarContentStyle = computed(() => {
+    const { fullPage } = routeProps.value;
+    const height = fullPage ? '100%' : 'auto';
+    return `display:flex;flex-direction:column;height:${height};min-height:100%;`;
+  });
+
+  /** 滚动条实例 */
+  const scrollbar = ref<ScrollbarInst | null>(null);
+
+  watch(scrollbar, newValue => {
+    if (newValue) {
+      setScrollbarInstance(newValue);
+    }
+  });
+
   return {
     siderInverted,
     siderMenuWidth,
@@ -44,6 +73,10 @@ export function useLayoutConfig() {
     headerPosition,
     headerHeight,
     multiTabHeight,
-    headerAndMultiTabHeight
+    headerAndMultiTabHeight,
+    globalSiderClassAndStyle,
+    flexColumnStyle,
+    scrollbarContentStyle,
+    scrollbar
   };
 }