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
   };
 }

src/composables/common/route.ts

@@ -5,7 +5,6 @@ import type { RouteKey } from '@/interface';
 
 /**
  * 路由属性
- * @description - 必须要在setup里面调用
  */
 export function useRouteProps() {
   const route = useRoute();
@@ -29,7 +28,6 @@ export function useRouteProps() {
 
 /**
  * 路由查询参数
- * @description - 必须要在setup里面调用
  */
 export function useRouteQuery() {
   const route = useRoute();
@@ -61,3 +59,17 @@ export function routeNameWatcher(callback: (name: RouteKey) => void) {
     }
   );
 }
+
+/**
+ * 路由全路径变化后的回调
+ * @param callback
+ */
+export function routeFullPathWatcher(callback: (fullPath: string) => void) {
+  const route = useRoute();
+  watch(
+    () => route.fullPath,
+    newValue => {
+      callback(newValue);
+    }
+  );
+}

src/composables/common/router.ts

@@ -50,6 +50,8 @@ export function useRouterPush(inSetup: boolean = true) {
     if (route) {
       const { query } = route;
       router.push({ path: routePath('login'), query: { ...query, module } });
+    } else {
+      throw Error('该函数必须在setup里面调用！');
     }
   }