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,8 +245,79 @@
 </script>
 
 <style lang="less">
-  .menu-wrapper {
+  .arco-menu-vertical {
-    background-color: var(--color-bg-3);
+    .menu-wrapper {
+      background-color: var(--color-bg-3);
+    }
+    .arco-menu-inner {
+      @apply flex flex-col;
+
+      padding: 16px 32px 16px 16px !important;
+      .arco-menu-inline {
+        &--bottom {
+          @apply mt-auto;
+        }
+      }
+      .arco-menu-pop-header {
+        @apply leading-none;
+
+        padding: 11px;
+      }
+      .arco-menu-inline-header {
+        @apply flex items-center;
+      }
+      .arco-menu-inline-header,
+      .arco-menu-item {
+        @apply mb-0 !bg-transparent;
+
+        color: var(--color-text-1) !important;
+        &:hover,
+        .arco-menu-indent-list:hover,
+        .arco-icon:hover {
+          background-color: rgb(var(--primary-1)) !important;
+        }
+        .arco-menu-item-inner,
+        .arco-menu-item-inner:hover {
+          @apply !bg-transparent;
+        }
+        .arco-menu-icon {
+          .arco-icon {
+            &:not(.arco-icon-down) {
+              font-size: 18px;
+            }
+
+            color: var(--color-text-4);
+          }
+        }
+        .arco-menu-title {
+          color: var(--color-text-1);
+        }
+      }
+      .arco-menu-selected {
+        color: rgb(var(--primary-5)) !important;
+        &:not(.arco-menu-inline-header) {
+          background-color: rgb(var(--primary-9)) !important;
+        }
+        .arco-icon {
+          color: rgb(var(--primary-5)) !important;
+          &:hover {
+            background-color: var(--color-bg-6) !important;
+          }
+        }
+        .arco-menu-title {
+          color: rgb(var(--primary-5)) !important;
+        }
+      }
+      .arco-menu-pop {
+        @apply bg-transparent;
+      }
+    }
+  }
+  .arco-menu-overflow-sub-menu {
+    min-width: 60px;
+  }
+  .arco-menu-collapsed {
+    width: 86px;
   }
   .arco-menu {
     &:hover {
@@ -267,70 +338,4 @@
       }
     }
   }
-  .arco-menu-inner {
-    @apply flex flex-col;
-
-    padding: 16px 32px 16px 16px !important;
-    .arco-menu-inline {
-      &--bottom {
-        @apply mt-auto;
-      }
-    }
-    .arco-menu-pop-header {
-      @apply leading-none;
-
-      padding: 11px;
-    }
-    .arco-menu-inline-header {
-      @apply flex items-center;
-    }
-    .arco-menu-inline-header,
-    .arco-menu-item {
-      @apply mb-0 !bg-transparent;
-
-      color: var(--color-text-1) !important;
-      &:hover,
-      .arco-menu-indent-list:hover,
-      .arco-icon:hover {
-        background-color: rgb(var(--primary-1)) !important;
-      }
-      .arco-menu-item-inner,
-      .arco-menu-item-inner:hover {
-        @apply !bg-transparent;
-      }
-      .arco-menu-icon {
-        .arco-icon {
-          &:not(.arco-icon-down) {
-            font-size: 18px;
-          }
-
-          color: var(--color-text-4);
-        }
-      }
-      .arco-menu-title {
-        color: var(--color-text-1);
-      }
-    }
-    .arco-menu-selected {
-      color: rgb(var(--primary-5)) !important;
-      &:not(.arco-menu-inline-header) {
-        background-color: rgb(var(--primary-9)) !important;
-      }
-      .arco-icon {
-        color: rgb(var(--primary-5)) !important;
-        &:hover {
-          background-color: var(--color-bg-6) !important;
-        }
-      }
-      .arco-menu-title {
-        color: rgb(var(--primary-5)) !important;
-      }
-    }
-    .arco-menu-pop {
-      @apply bg-transparent;
-    }
-  }
-  .arco-menu-collapsed {
-    width: 86px;
-  }
 </style>