From f8dff50951d11022585fa9cdd27dabc73e897dee Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Tue, 3 Sep 2024 18:44:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20main=E7=AA=97=E5=8F=A3=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=AE=8C=E5=96=84=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Main/index copy.vue | 63 +++++++++++++++++++++++
 src/layout/components/Main/index.vue      | 35 ++++---------
 src/router/route-output.ts                |  3 +-
 src/style/global-scrollbar.scss           | 28 ++++++++++
 src/style/global-style.scss               |  5 +-
 src/style/index.scss                      |  1 +
 src/views/about-project/about-project.vue |  3 --
 7 files changed, 106 insertions(+), 32 deletions(-)
 create mode 100644 src/layout/components/Main/index copy.vue
 create mode 100644 src/style/global-scrollbar.scss

diff --git a/src/layout/components/Main/index copy.vue b/src/layout/components/Main/index copy.vue
new file mode 100644
index 0000000..243c912
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue
index 243c912..3e36c1d 100644
--- a/src/layout/components/Main/index.vue
+++ b/src/layout/components/Main/index.vue
@@ -2,17 +2,13 @@
   <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>
+      <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>
     </a-layout-content>
   </a-watermark>
 </template>
@@ -44,20 +40,7 @@ watch(watermarkConfig, newv => {
 <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;
+  display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index 56d14d2..d9e2cf5 100644
--- a/src/router/route-output.ts
+++ b/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;
 };
 
 /**
diff --git a/src/style/global-scrollbar.scss b/src/style/global-scrollbar.scss
new file mode 100644
index 0000000..63f0a1b
--- /dev/null
+++ b/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;
+}
diff --git a/src/style/global-style.scss b/src/style/global-style.scss
index d3c0586..2e89a13 100644
--- a/src/style/global-style.scss
+++ b/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;
 }
 
diff --git a/src/style/index.scss b/src/style/index.scss
index 6d7eee0..1f98390 100644
--- a/src/style/index.scss
+++ b/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";
diff --git a/src/views/about-project/about-project.vue b/src/views/about-project/about-project.vue
index e8a1e06..8129f57 100644
--- a/src/views/about-project/about-project.vue
+++ b/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" />