feat: 左侧菜单样式

frontend/src/assets/style/arco-reset.less

@@ -242,15 +242,18 @@
   font-size: 16px;
 }
 
-/** 下拉菜单 **/
+/** 下拉菜单,trigger触发器,select选择器 **/
 .arco-dropdown,
-.arco-trigger-menu {
+.arco-trigger-menu,
+.arco-select-dropdown {
   border: 0.5px solid var(--color-text-n8);
   box-shadow: 0 3px 14px 2px rgb(0 0 0 / 5%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 5px 5px -3px rgb(0 0 0 / 10%);
   .arco-dropdown-list,
+  .arco-select-dropdown-list,
   .arco-trigger-menu-inner {
     @apply relative flex w-full flex-col overflow-hidden;
     .arco-dropdown-option,
+    .arco-select-option,
     .arco-trigger-menu-item {
       @apply flex w-auto items-center;
 
@@ -278,6 +281,26 @@
     }
   }
 }
+.arco-dropdown-option-content {
+  @apply flex items-center;
+
+  gap: 8px;
+}
+.arco-select-option:not(:disabled) {
+  &:hover {
+    background-color: rgb(var(--primary-1)) !important;
+  }
+}
+.arco-select-option-selected {
+  color: rgb(var(--primary-7)) !important;
+  background-color: rgb(var(--primary-1)) !important;
+}
+.arco-select-view-value {
+  @apply !block;
+}
+.arco-select-view-suffix {
+  @apply !pl-0;
+}
 
 /** 全局容器 **/
 .ms-contentiner {
@@ -352,3 +375,23 @@
     }
   }
 }
+
+/** 滚动条 **/
+.arco-scrollbar-track-direction-horizontal {
+  height: 8px;
+  .arco-scrollbar-thumb-bar {
+    @apply m-0;
+
+    height: 8px;
+    background-color: var(--color-text-input-border);
+  }
+}
+.arco-scrollbar-track-direction-vertical {
+  width: 8px;
+  .arco-scrollbar-thumb-bar {
+    @apply m-0;
+
+    width: 8px;
+    background-color: var(--color-text-input-border);
+  }
+}

frontend/src/components/pure/menu/index.vue

@@ -245,28 +245,10 @@
 </script>
 
 <style lang="less">
+  .arco-menu-vertical {
     .menu-wrapper {
       background-color: var(--color-bg-3);
     }
-  .arco-menu {
-    &:hover {
-      .arco-menu-collapse-button {
-        @apply flex;
-      }
-    }
-    .arco-menu-collapse-button {
-      @apply hidden rounded-full;
-
-      top: 22px;
-      right: 4px;
-      border: 1px solid #ffffff;
-      background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
-      box-shadow: 0 0 7px rgb(15 0 78 / 9%);
-      .arco-icon {
-        color: rgb(var(--primary-5));
-      }
-    }
-  }
     .arco-menu-inner {
       @apply flex flex-col;
 
@@ -330,7 +312,30 @@
         @apply bg-transparent;
       }
     }
+  }
+  .arco-menu-overflow-sub-menu {
+    min-width: 60px;
+  }
   .arco-menu-collapsed {
     width: 86px;
   }
+  .arco-menu {
+    &:hover {
+      .arco-menu-collapse-button {
+        @apply flex;
+      }
+    }
+    .arco-menu-collapse-button {
+      @apply hidden rounded-full;
+
+      top: 22px;
+      right: 4px;
+      border: 1px solid #ffffff;
+      background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
+      box-shadow: 0 0 7px rgb(15 0 78 / 9%);
+      .arco-icon {
+        color: rgb(var(--primary-5));
+      }
+    }
+  }
 </style>