fix: 修复系统名太长会使菜单栏右侧黑边过长的问题

continew-org · Sep 28, 2024 · d1d29df · d1d29df
1 parent 0594ae9
commit d1d29df
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/layout/components/Asider/index.vue b/src/layout/components/Asider/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="isDesktop" class="asider" :class="{ 'app-menu-dark': appStore.menuDark }"
     :style="appStore.menuDark ? appStore.themeCSSVar : undefined">
-    <Logo :collapsed="appStore.menuCollapse"></Logo>
-    <a-layout-sider class="menu" collapsible breakpoint="xl" hide-trigger :width="225"
+    <a-layout-sider class="menu" collapsible breakpoint="xl" hide-trigger :width="230"
       :collapsed="appStore.menuCollapse" @collapse="handleCollapse">
-      <a-scrollbar outer-class="h-full" style="height: 100%; overflow: auto">
+      <Logo :collapsed="appStore.menuCollapse"></Logo>
+      <a-scrollbar outer-class="menu-scroll-view" style="height: 100%; overflow: auto">
         <Menu></Menu>
       </a-scrollbar>
     </a-layout-sider>
@@ -47,6 +47,8 @@ const handleCollapse = (isCollapsed: boolean) => {
 
 :deep(.arco-layout-sider-children) {
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .asider {
@@ -58,6 +60,11 @@ const handleCollapse = (isCollapsed: boolean) => {
   color: var(--color-text-1);
   background-color: var(--color-bg-1);
 
+  .menu-scroll-view {
+    flex: 1;
+    overflow: hidden;
+  }
+
   .menu {
     flex: 1;
     overflow: hidden;

diff --git a/src/layout/components/Logo.vue b/src/layout/components/Logo.vue
@@ -2,7 +2,7 @@
   <section class="system-logo" :class="{ collapsed: props.collapsed }" @click="toHome">
     <img v-if="logo" class="logo" :src="logo" alt="logo" />
     <img v-else class="logo" src="/logo.svg" alt="logo" />
-    <span class="system-name">{{ title }}</span>
+    <span class="system-name gi_line_1">{{ title }}</span>
   </section>
 </template>
 
@@ -39,6 +39,7 @@ const toHome = () => {
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
+
   &.collapsed {
     padding: 0;
     display: flex;
@@ -48,6 +49,7 @@ const toHome = () => {
       display: none;
     }
   }
+
   .logo {
     width: 32px;
     height: 32px;
@@ -56,10 +58,12 @@ const toHome = () => {
     overflow: hidden;
     flex-shrink: 0;
   }
+
   .system-name {
     padding-left: 6px;
     white-space: nowrap;
     transition: color 0.3s;
+
     &:hover {
       color: $color-theme !important;
       cursor: pointer;