feat: 多布局的main窗口滚动

src/layout/components/Main/index copy.vue

@@ -1,63 +0,0 @@
-<template>
-  <a-watermark :content="watermark" v-bind="watermarkConfig">
-    <a-layout-content class="layout-main-content">
-      <Tabs v-if="isTabs" />
-      <a-scrollbar style="height: 100%; overflow: auto" :outer-class="isTabs ? 'scrollbar' : 'scrollbar-no-tabs'">
-        <div>
-          <router-view v-slot="{ Component, route }">
-            <MainTransition>
-              <keep-alive :include="cacheRoutes">
-                <component :is="Component" :key="route.name" v-if="refreshPage" />
-              </keep-alive>
-            </MainTransition>
-          </router-view>
-        </div>
-      </a-scrollbar>
-    </a-layout-content>
-  </a-watermark>
-</template>
-
-<script setup lang="ts">
-import Tabs from "@/layout/components/Tabs/index.vue";
-import { storeToRefs } from "pinia";
-import { useThemeConfig } from "@/store/modules/theme-config";
-import { useRoutesListStore } from "@/store/modules/route-list";
-const themeStore = useThemeConfig();
-let { refreshPage, isTabs, watermark, watermarkStyle, watermarkRotate, watermarkGap } = storeToRefs(themeStore);
-const routerStore = useRoutesListStore();
-const { cacheRoutes } = storeToRefs(routerStore);
-
-// 水印配置
-const watermarkConfig = computed(() => {
-  return {
-    font: watermarkStyle.value,
-    rotate: watermarkRotate.value,
-    gap: watermarkGap.value
-  };
-});
-
-watch(watermarkConfig, newv => {
-  console.log(newv);
-});
-</script>
-
-<style lang="scss" scoped>
-.layout-main-content {
-  height: 100%;
-}
-
-.scrollbar {
-  height: calc(100% - 40px); // 去掉tabs的高度
-  background: $color-fill-1; // 背景颜色
-}
-.scrollbar-no-tabs {
-  height: 100%;
-  background: $color-fill-1; // 背景颜色
-}
-
-// 修改左侧滚动条宽度
-:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
-  width: 4px;
-  margin-left: 8px;
-}
-</style>

src/layout/components/Main/index.vue

@@ -43,4 +43,10 @@ watch(watermarkConfig, newv => {
   display: flex;
   flex-direction: column;
 }
+
+// 修改左侧滚动条宽度-主要针对main窗口内的滚动条
+:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
+  width: 4px;
+  margin-left: 8px;
+}
 </style>

src/views/file-management/document-library/components/file-tree.vue

@@ -90,8 +90,4 @@ const sourceTree = ref(fileTreeData.tree);
     }
   }
 }
-
-:deep(.arco-scrollbar-thumb-bar) {
-  width: 4px;
-}
 </style>