From e696b20c5bc8e1962ad2db056685c6728c2b0e32 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 31 May 2023 19:06:18 +0800
Subject: [PATCH] Fixed scrollbar

---
 ui/src/assets/css/common.css |   2 +-
 ui/src/pages/Main.vue        | 327 ++++++++++++++++++-----------------
 ui/src/router/info.ts        |   4 +-
 ui/src/router/power.ts       |   8 +-
 4 files changed, 178 insertions(+), 163 deletions(-)

diff --git a/ui/src/assets/css/common.css b/ui/src/assets/css/common.css
index 9b249fa..783212f 100644
--- a/ui/src/assets/css/common.css
+++ b/ui/src/assets/css/common.css
@@ -5,7 +5,7 @@
     --font-secondary-color: #9E9E9E;
 }
 
-body {
+.body {
     color: var(--font-main-color);
     user-select: none;
     min-width: 1100px;
diff --git a/ui/src/pages/Main.vue b/ui/src/pages/Main.vue
index 74773db..42baab2 100644
--- a/ui/src/pages/Main.vue
+++ b/ui/src/pages/Main.vue
@@ -1,171 +1,190 @@
 <template>
     <el-backtop target=".main-box" :right="80" :bottom="80" />
-    <div class="background">
-        <el-container class="fill">
-            <el-aside width="collapse" class="background-white aside">
-                <el-scrollbar>
-                    <el-menu
-                        :collapse="isCollapsed"
-                        :unique-opened="true"
-                        :default-active="
-                            this.$route.path.indexOf('/', this.$route.path.indexOf('/') + 1) !== -1
-                                ? this.$route.path.indexOf(
-                                      '/',
-                                      this.$route.path.indexOf(
-                                          '/',
-                                          this.$route.path.indexOf('/') + 1
-                                      ) + 1
-                                  ) !== -1
-                                    ? this.$route.path.substring(
-                                          0,
-                                          this.$route.path.indexOf(
+    <el-scrollbar style="height: 100vh; width: 100vw">
+        <div class="body">
+            <div class="background">
+                <el-container class="fill">
+                    <el-aside width="collapse" class="background-white aside">
+                        <el-scrollbar>
+                            <el-menu
+                                :collapse="isCollapsed"
+                                :unique-opened="true"
+                                :default-active="
+                                    this.$route.path.indexOf(
+                                        '/',
+                                        this.$route.path.indexOf('/') + 1
+                                    ) !== -1
+                                        ? this.$route.path.indexOf(
                                               '/',
                                               this.$route.path.indexOf(
                                                   '/',
                                                   this.$route.path.indexOf('/') + 1
                                               ) + 1
-                                          )
-                                      )
-                                    : this.$route.path
-                                : this.$route.path
-                        "
-                        :router="true"
-                        class="menu"
-                        :text-color="COLOR_FONT_MAIN()"
-                        :active-text-color="COLOR_PRODUCTION()"
-                    >
-                        <el-menu-item
-                            @mousedown.left="changeCollapsed"
-                            :disabled="true"
-                            style="cursor: pointer; opacity: 1; border-bottom: 1px #ddd solid"
-                        >
-                            <el-icon :size="SIZE_ICON_LG()">
-                                <icon-pinnacle-pinnacle :color="COLOR_PRODUCTION()" />
-                            </el-icon>
-                            <template #title>
-                                <span class="menu-production-name">
-                                    {{ PRODUCTION_NAME() }}
-                                </span>
-                            </template>
-                        </el-menu-item>
-                        <template v-for="(route, index) in routes">
-                            <el-menu-item
-                                v-if="!route.children"
-                                :key="index"
-                                :index="route.path ?? ''"
+                                          ) !== -1
+                                            ? this.$route.path.substring(
+                                                  0,
+                                                  this.$route.path.indexOf(
+                                                      '/',
+                                                      this.$route.path.indexOf(
+                                                          '/',
+                                                          this.$route.path.indexOf('/') + 1
+                                                      ) + 1
+                                                  )
+                                              )
+                                            : this.$route.path
+                                        : this.$route.path
+                                "
+                                :router="true"
+                                class="menu"
+                                :text-color="COLOR_FONT_MAIN()"
+                                :active-text-color="COLOR_PRODUCTION()"
                             >
-                                <el-icon>
-                                    <component :is="route.meta.icon" />
-                                </el-icon>
-                                <template #title>{{ route.meta.title }}</template>
-                            </el-menu-item>
-                            <el-sub-menu
-                                v-if="route.children"
-                                :key="index"
-                                :index="route.path ?? ''"
-                            >
-                                <template #title>
-                                    <el-icon>
-                                        <component :is="route.meta.icon" />
-                                    </el-icon>
-                                    <span>{{ route.meta.title }}</span>
-                                </template>
                                 <el-menu-item
-                                    v-for="(sub, index) in route.children"
-                                    :key="index"
-                                    :index="
-                                        sub.path
-                                            ? route.path
-                                                ? route.path + '/' + sub.path
-                                                : ''
-                                            : ''
+                                    @mousedown.left="changeCollapsed"
+                                    :disabled="true"
+                                    style="
+                                        cursor: pointer;
+                                        opacity: 1;
+                                        border-bottom: 1px #ddd solid;
                                     "
                                 >
-                                    <el-icon>
-                                        <component :is="sub.meta.icon" />
+                                    <el-icon :size="SIZE_ICON_LG()">
+                                        <icon-pinnacle-pinnacle :color="COLOR_PRODUCTION()" />
                                     </el-icon>
-                                    <template #title>{{ sub.meta.title }}</template>
+                                    <template #title>
+                                        <span class="menu-production-name">
+                                            {{ PRODUCTION_NAME() }}
+                                        </span>
+                                    </template>
                                 </el-menu-item>
-                            </el-sub-menu>
-                        </template>
-                    </el-menu>
-                </el-scrollbar>
-            </el-aside>
-            <el-container>
-                <el-header height="56px" class="background-white main-header">
-                    <el-badge is-dot>
-                        <el-icon
-                            :size="SIZE_ICON_MD()"
-                            :color="COLOR_PRODUCTION()"
-                            style="cursor: pointer"
-                        >
-                            <icon-pinnacle-chat />
-                        </el-icon>
-                    </el-badge>
-                    <el-badge is-dot>
-                        <el-icon
-                            :size="SIZE_ICON_MD()"
-                            :color="COLOR_PRODUCTION()"
-                            style="cursor: pointer"
-                        >
-                            <icon-pinnacle-notice />
-                        </el-icon>
-                    </el-badge>
-                    <el-divider direction="vertical" />
-                    <el-popover
-                        transition="el-zoom-in-top"
-                        popper-style="box-shadow: rgb(14 18 22 / 20%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;"
-                    >
-                        <template #reference>
-                            <div style="display: flex">
-                                <div class="user-head">
-                                    <el-avatar>
-                                        <el-icon :size="SIZE_ICON_SM()" :color="COLOR_FONT_MAIN()">
-                                            <icon-pinnacle-user />
-                                        </el-icon>
-                                    </el-avatar>
-                                </div>
-                                <div class="user-info">
-                                    <div class="user-name">
-                                        <span>{{ username }}</span>
-                                    </div>
-                                    <div class="user-desc">
-                                        <span>用户介绍</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                        <template #default>
-                            <div style="display: flex; gap: 10px; flex-direction: column">
-                                <div>
-                                    <el-button @click="profile" style="width: 100%"
-                                        >个人档案</el-button
+                                <template v-for="(route, index) in routes">
+                                    <el-menu-item
+                                        v-if="!route.children"
+                                        :key="index"
+                                        :index="route.path ?? ''"
                                     >
-                                </div>
-                                <div>
-                                    <el-button @click="logout" style="width: 100%">退出</el-button>
-                                </div>
-                            </div>
-                        </template>
-                    </el-popover>
-                </el-header>
-                <ElScrollbar v-if="$route.meta.requiresScrollbar">
-                    <ElMain class="main-box" :class="{ noPadding: !$route.meta.requiresPadding }">
-                        <ElBacktop :right="100" :bottom="100" />
-                        <RouterView></RouterView>
-                    </ElMain>
-                </ElScrollbar>
-                <ElMain
-                    v-else
-                    class="main-box"
-                    :class="{ noPadding: !$route.meta.requiresPadding }"
-                >
-                    <ElBacktop :right="100" :bottom="100" />
-                    <RouterView></RouterView>
-                </ElMain>
-            </el-container>
-        </el-container>
-    </div>
+                                        <el-icon>
+                                            <component :is="route.meta.icon" />
+                                        </el-icon>
+                                        <template #title>{{ route.meta.title }}</template>
+                                    </el-menu-item>
+                                    <el-sub-menu
+                                        v-if="route.children"
+                                        :key="index"
+                                        :index="route.path ?? ''"
+                                    >
+                                        <template #title>
+                                            <el-icon>
+                                                <component :is="route.meta.icon" />
+                                            </el-icon>
+                                            <span>{{ route.meta.title }}</span>
+                                        </template>
+                                        <el-menu-item
+                                            v-for="(sub, index) in route.children"
+                                            :key="index"
+                                            :index="
+                                                sub.path
+                                                    ? route.path
+                                                        ? route.path + '/' + sub.path
+                                                        : ''
+                                                    : ''
+                                            "
+                                        >
+                                            <el-icon>
+                                                <component :is="sub.meta.icon" />
+                                            </el-icon>
+                                            <template #title>{{ sub.meta.title }}</template>
+                                        </el-menu-item>
+                                    </el-sub-menu>
+                                </template>
+                            </el-menu>
+                        </el-scrollbar>
+                    </el-aside>
+                    <el-container>
+                        <el-header height="56px" class="background-white main-header">
+                            <el-badge is-dot>
+                                <el-icon
+                                    :size="SIZE_ICON_MD()"
+                                    :color="COLOR_PRODUCTION()"
+                                    style="cursor: pointer"
+                                >
+                                    <icon-pinnacle-chat />
+                                </el-icon>
+                            </el-badge>
+                            <el-badge is-dot>
+                                <el-icon
+                                    :size="SIZE_ICON_MD()"
+                                    :color="COLOR_PRODUCTION()"
+                                    style="cursor: pointer"
+                                >
+                                    <icon-pinnacle-notice />
+                                </el-icon>
+                            </el-badge>
+                            <el-divider direction="vertical" />
+                            <el-popover
+                                transition="el-zoom-in-top"
+                                popper-style="box-shadow: rgb(14 18 22 / 20%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;"
+                            >
+                                <template #reference>
+                                    <div style="display: flex">
+                                        <div class="user-head">
+                                            <el-avatar>
+                                                <el-icon
+                                                    :size="SIZE_ICON_SM()"
+                                                    :color="COLOR_FONT_MAIN()"
+                                                >
+                                                    <icon-pinnacle-user />
+                                                </el-icon>
+                                            </el-avatar>
+                                        </div>
+                                        <div class="user-info">
+                                            <div class="user-name">
+                                                <span>{{ username }}</span>
+                                            </div>
+                                            <div class="user-desc">
+                                                <span>用户介绍</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template #default>
+                                    <div style="display: flex; gap: 10px; flex-direction: column">
+                                        <div>
+                                            <el-button @click="profile" style="width: 100%"
+                                                >个人档案</el-button
+                                            >
+                                        </div>
+                                        <div>
+                                            <el-button @click="logout" style="width: 100%"
+                                                >退出</el-button
+                                            >
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-popover>
+                        </el-header>
+                        <ElScrollbar v-if="$route.meta.requiresScrollbar">
+                            <ElMain
+                                class="main-box"
+                                :class="{ noPadding: !$route.meta.requiresPadding }"
+                            >
+                                <ElBacktop :right="100" :bottom="100" />
+                                <RouterView></RouterView>
+                            </ElMain>
+                        </ElScrollbar>
+                        <ElMain
+                            v-else
+                            class="main-box"
+                            :class="{ noPadding: !$route.meta.requiresPadding }"
+                        >
+                            <ElBacktop :right="100" :bottom="100" />
+                            <RouterView></RouterView>
+                        </ElMain>
+                    </el-container>
+                </el-container>
+            </div>
+        </div>
+    </el-scrollbar>
 </template>
 
 <script lang="ts">
diff --git a/ui/src/router/info.ts b/ui/src/router/info.ts
index 43a9aa5..bf7ed1f 100644
--- a/ui/src/router/info.ts
+++ b/ui/src/router/info.ts
@@ -10,7 +10,7 @@ const infoRouter = {
             meta: {
                 title: '员工信息管理',
                 requiresMenu: true,
-                requiresScrollbar: false,
+                requiresScrollbar: true,
                 requiresPadding: true
             }
         }
@@ -19,8 +19,6 @@ const infoRouter = {
         title: '信息管理',
         icon: shallowRef(IconPinnacleInfo),
         requiresMenu: true,
-        requiresScrollbar: false,
-        requiresPadding: true,
         requiresAuth: true
     }
 }
diff --git a/ui/src/router/power.ts b/ui/src/router/power.ts
index b0755e8..ff513ca 100644
--- a/ui/src/router/power.ts
+++ b/ui/src/router/power.ts
@@ -10,7 +10,7 @@ const powerRouter = {
             meta: {
                 title: '角色管理',
                 requiresMenu: true,
-                requiresScrollbar: false,
+                requiresScrollbar: true,
                 requiresPadding: true
             }
         },
@@ -21,7 +21,7 @@ const powerRouter = {
             meta: {
                 title: '用户组管理',
                 requiresMenu: true,
-                requiresScrollbar: false,
+                requiresScrollbar: true,
                 requiresPadding: true
             }
         },
@@ -32,7 +32,7 @@ const powerRouter = {
             meta: {
                 title: '用户管理',
                 requiresMenu: true,
-                requiresScrollbar: false,
+                requiresScrollbar: true,
                 requiresPadding: true
             }
         }
@@ -41,8 +41,6 @@ const powerRouter = {
         title: '权限管理',
         icon: shallowRef(IconPinnaclePower),
         requiresMenu: true,
-        requiresScrollbar: false,
-        requiresPadding: true,
         requiresAuth: true
     }
 }