perf: layout组件样式优化

src/components/_base/menu/index.vue

@@ -121,7 +121,7 @@ export default defineComponent({
         auto-open={false}
         selected-keys={selectedKey.value}
         auto-open-selected={true}
-        level-indent={34}
+        level-indent={24}
         style="height: 100%;width:100%;"
         onCollapse={setCollapse}
       >
@@ -132,16 +132,59 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 :deep(.arco-menu-inner) {
+  padding: 20px 24px 0 12px !important;
   .arco-menu-inline-header {
     display: flex;
     align-items: center;
+    height: 40px;
+    margin-bottom: 12px;
+    border-radius: 8px;
+    .arco-menu-icon {
+      margin-right: 8px;
+    }
+    .arco-menu-title {
+      color: var(--Text-2, #3c4043);
+      font-family: 'PuHuiTi-Regular';
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 137.5% */
+    }
+    &:hover {
+      background: var(--BG-200, #f2f3f5) !important;
+    }
+    &.arco-menu-selected {
+      .arco-menu-title {
+        color: var(--Brand-Brand-6, #6d4cfe) !important;
+      }
+    }
   }
   .arco-icon {
     &:not(.arco-icon-down) {
       font-size: 18px;
     }
   }
+  .arco-menu-item {
+    border-radius: 8px;
+    .arco-menu-item-inner {
+      color: var(--Text-3, #737478);
+      font-family: 'PuHuiTi-Regular';
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 137.5% */
+    }
+    &:hover {
+      background: var(--BG-200, #f2f3f5) !important;
+    }
+    &.arco-menu-selected {
+      background: var(--Brand-Brand-1, #f0edff) !important;
+      .arco-menu-item-inner {
+        color: var(--Brand-Brand-6, #6d4cfe) !important;
+      }
+    }
+  }
 }
 </style>

src/components/_base/navbar/index.vue

@@ -80,27 +80,34 @@ const handleDopdownClick = (index: any, ind: any) => {
 <template>
   <div class="navbar">
     <div class="left-side">
-      <a-space>
+      <a-space class="cursor-pointer" @click="router.push('/')">
         <img src="@/assets/logo.svg" alt="" />
       </a-space>
     </div>
     <div class="center-side">
-      <div class="menu-demo">
+      <div class="menu-demo h-100%">
         <a-menu
           mode="horizontal"
           :selected-keys="selectedKey"
           :default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
         >
+          <template #collapse-icon>
+            <icon-caret-down size="16" />
+            <icon-caret-up size="16" />
+          </template>
           <a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
-            <view>工作台</view>
+            <span class="menu-item-text">工作台</span>
           </a-menu-item>
           <a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
-            <a-dropdown :popup-max-height="false">
-              <a-button>{{ item.name }}<icon-caret-down /></a-button>
+            <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
+              <a-button>
+                <span class="menu-item-text mr-2px"> {{ item.name }}</span>
+                <icon-caret-down size="16" />
+              </a-button>
               <template #content>
-                <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">{{
-                  child.name
-                }}</a-doption>
+                <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
+                  <span class="menu-item-text"> {{ child.name }}</span>
+                </a-doption>
               </template>
             </a-dropdown>
           </a-menu-item>
@@ -144,7 +151,7 @@ const handleDopdownClick = (index: any, ind: any) => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .navbar {
   display: flex;
   justify-content: space-between;
@@ -163,6 +170,40 @@ const handleDopdownClick = (index: any, ind: any) => {
   align-items: center;
 
   margin-left: 40px;
+  .menu-item-text {
+    color: var(--Text-2, #3c4043);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  :deep(.arco-menu) {
+    height: 100%;
+    .arco-menu-inner {
+      padding: 0 20px;
+    }
+    .arco-menu-item {
+      padding: 0;
+      position: relative;
+      &.arco-menu-selected {
+        .menu-item-text,
+        .arco-menu-selected-label {
+          color: #6d4cfe;
+        }
+        .arco-menu-selected-label {
+          background: var(--Brand-Brand-6, #6d4cfe);
+          height: 4px;
+          border-radius: 4px;
+          width: 50%;
+          position: absolute;
+          bottom: -8px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
 }
 .cneter-tip {
   font-size: 16px;
@@ -192,3 +233,40 @@ const handleDopdownClick = (index: any, ind: any) => {
   }
 }
 </style>
+
+<style lang="scss">
+.layout-menu-item-dropdown {
+  .arco-dropdown {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 0px;
+    .arco-dropdown-option {
+      padding: 0 12px;
+      margin-bottom: 4px;
+      &-content {
+        display: flex;
+        height: 40px;
+        width: 100%;
+        padding: 10px 24px;
+        align-items: center;
+        .menu-item-text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'PuHuiTi-Regular';
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 137.5% */
+        }
+      }
+      &:not(.arco-dropdown-option-disabled):hover {
+        background-color: transparent;
+        .arco-dropdown-option-content {
+          border-radius: 8px;
+          background: var(--BG-200, #f2f3f5);
+        }
+      }
+    }
+  }
+}
+</style>

src/layouts/Basic.vue

@@ -14,7 +14,7 @@ const route = useRoute();
 console.log({ appStore });
 
 useResponsive(true);
-const navbarHeight = `60px`;
+const navbarHeight = `72px`;
 const navbar = computed(() => appStore.navbar);
 const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
 const hideMenu = computed(() => appStore.hideMenu);
@@ -74,7 +74,7 @@ provide('toggleDrawerMenu', () => {
           breakpoint="xl"
           :collapsed="collapsed"
           :width="menuWidth"
-          :style="{ paddingTop: navbar ? '60px' : '' }"
+          :style="{ paddingTop: navbar ? '72px' : '' }"
           collapsible
           hide-trigger
           @collapse="setCollapsed"
@@ -107,7 +107,7 @@ provide('toggleDrawerMenu', () => {
 </template>
 
 <style scoped lang="less">
-@nav-size-height: 60px;
+@nav-size-height: 72px;
 @layout-max-width: 1100px;
 
 .layout {