feat: main窗口滚动完善中

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

@@ -0,0 +1,63 @@
+<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

@@ -2,8 +2,6 @@
   <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">
@@ -11,8 +9,6 @@
           </keep-alive>
         </MainTransition>
       </router-view>
-        </div>
-      </a-scrollbar>
     </a-layout-content>
   </a-watermark>
 </template>
@@ -44,20 +40,7 @@ watch(watermarkConfig, newv => {
 <style lang="scss" scoped>
 .layout-main-content {
   height: 100%;
-}
+  display: flex;
-
+  flex-direction: column;
-.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/router/route-output.ts

@@ -99,13 +99,12 @@ export const treeSort = (tree: Menu.MenuOptions[]) => {
   });
 
   // 深层递归
-  let sortAfter = tree.map((item: any) => {
+  return tree.map((item: any) => {
     if (item?.children?.length > 0) {
       item.children = treeSort(item.children);
     }
     return item;
   });
-  return sortAfter;
 };
 
 /**

src/style/global-scrollbar.scss

@@ -0,0 +1,28 @@
+// 设置滚动条的样式
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+// 基于 WebKit 内核的浏览器
+// 设置滚动条的样式，宽、圆角、背景颜色
+::-webkit-scrollbar-thumb {
+  width: 6px;
+  border-radius: 6px;
+  background-color: $color-border-2;
+}
+// 设置滚动条hover样式，宽、圆角、背景颜色
+::-webkit-scrollbar-thumb:hover {
+  width: 6px;
+  background-color: $color-border-3;
+}
+
+// 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
+::-ms-scrollbar-thumb {
+  width: 6px;
+  border-radius: 6px;
+  background-color: $color-border-2;
+}
+::-ms-scrollbar-thumb:hover {
+  width: 6px;
+  background-color: $color-border-3;
+}

src/style/global-style.scss

@@ -3,8 +3,11 @@
 // 有背景色的页面
 .snow-page {
   // margin 和 padding 边距一致，是为了保持视觉上的内外统一
-  margin: $padding;
+  // margin: $padding;
+  box-sizing: border-box;
+  flex: 1;
   padding: $padding;
+  overflow-y: auto;
   background: $color-bg-1;
 }
 

src/style/index.scss

@@ -1,6 +1,7 @@
 @import "@/style/global-theme.scss";
 @import "@/style/global-transition.scss";
 @import "@/style/global-style.scss";
+@import "@/style/global-scrollbar.scss";
 @import "@/style/loading-page.scss";
 @import "@/style/card-animation.scss";
 @import "@/style/media/media.scss";

src/views/about-project/about-project.vue

@@ -11,12 +11,9 @@
       <a-descriptions :column="2" bordered>
       <a-descriptions-item v-for="item of projectInfo" :key="item.label" :label="item.label">
         <a-link :href="item.value" v-if="item.link">{{ item.label }}</a-link>
-        
-        <!-- <a-tag  :default-checked="true">Lark</a-tag> -->
         <span v-else>{{ item.value }}</span>
       </a-descriptions-item>
     </a-descriptions>
-      <!-- <a-descriptions :data="projectInfo" bordered :column="2" /> -->
     </a-card>
     <a-card class="margin-top" title="生产环境依赖">
       <a-descriptions :data="dependencies" bordered :column="2" />