提交

web-admin/src/components/core/layouts/art-header-bar/widget/ArtUserMenu.vue

@@ -167,6 +167,11 @@
     }
   }
 
+  .user-menu-root :deep(.el-avatar) {
+    --el-avatar-bg-color: transparent;
+    background: transparent;
+  }
+
   .btn-item {
     display: flex;
     align-items: center;

web-admin/src/components/core/layouts/art-header-bar/widget/UserProfileDialog.vue

@@ -301,6 +301,11 @@
     display: flex;
     gap: 16px;
     align-items: center;
+
+    :deep(.el-avatar) {
+      --el-avatar-bg-color: transparent;
+      background: transparent;
+    }
   }
 
   .profile-avatar-actions {

web-admin/src/components/core/layouts/art-menus/art-mixed-menu/index.vue

@@ -280,7 +280,7 @@
       background-color 0.2s ease,
       color 0.2s ease;
 
-    &:hover {
+    &:hover:not(.menu-item-active) {
       background: var(--primary-bg, #e8f4ee);
     }
   }
@@ -292,7 +292,7 @@
     color: var(--mint-text-muted, #64748b);
 
     &.is-active {
-      color: var(--theme-color);
+      color: #fff;
     }
   }
 
@@ -308,12 +308,16 @@
 
     &.is-active {
       font-weight: 600;
-      color: var(--theme-color);
+      color: #fff;
     }
   }
 
   .menu-item-active {
-    background: var(--primary-bg, #e8f4ee);
+    background: var(--primary, #10b981);
+
+    &:hover {
+      background: var(--primary, #10b981);
+    }
   }
 
   @media (width <= 1440px) {

web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue

@@ -466,21 +466,24 @@
   @use './theme';
 
   .layout-sidebar {
-    // 侧栏容器宽度固定，内部菜单可横向滚动
+    // 侧栏容器宽度固定，内部菜单在容器内完整展示
     .menu-left-open {
       width: v-bind(menuopenwidth);
+      min-width: v-bind(menuopenwidth);
       flex-shrink: 0;
     }
 
     .menu-left-close {
       width: v-bind(menuclosewidth);
+      min-width: v-bind(menuclosewidth);
       flex-shrink: 0;
     }
 
-    // 展开的宽度：侧栏容器固定，菜单内容可随长标题撑开并横向滚动
+    // 展开：菜单宽度与侧栏一致，避免右侧被内容区压住
     .el-menu:not(.el-menu--collapse) {
-      width: max-content;
-      min-width: v-bind(menuopenwidth);
+      width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
 
     // 折叠后宽度

web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/style.scss

@@ -1,5 +1,7 @@
 .layout-sidebar {
   display: flex;
+  flex-shrink: 0;
+  width: fit-content;
   height: 100%;
   user-select: none;
   scrollbar-width: none;
@@ -75,11 +77,11 @@
           }
 
           &.is-active {
-            background: var(--el-color-primary-light-9);
+            background: var(--primary, #10b981);
 
             .art-svg-icon,
             span {
-              color: var(--theme-color) !important;
+              color: #fff !important;
             }
           }
         }
@@ -102,18 +104,18 @@
     overflow: hidden;
     background: var(--mint-surface, #fff);
 
-    // 长菜单名完整展示：侧栏宽度不变，内容区可横向滚动
+    // 长菜单名在侧栏内省略展示，不再横向撑出被内容区遮挡
     :deep(.el-scrollbar__wrap) {
-      overflow-x: auto !important;
+      overflow-x: hidden !important;
     }
 
     :deep(.el-scrollbar__view) {
-      width: max-content;
-      min-width: 100%;
+      width: 100%;
+      min-width: 0;
     }
 
     :deep(.el-scrollbar__bar.is-horizontal) {
-      height: 4px;
+      display: none;
     }
 
     @media only screen and (width <= 640px) {

web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/theme.scss

@@ -10,16 +10,23 @@ $popup-menu-padding: 8px;
 $popup-menu-margin: 5px;
 $popup-menu-radius: 6px;
 
-// 通用菜单项样式（min-width 保证短标题仍铺满侧栏；width: max-content 允许长标题撑开以配合横向滚动）
+// 通用菜单项样式（宽度铺满侧栏，长标题省略）
 @mixin menu-item-base {
-  width: max-content;
-  min-width: calc(100% - 12px);
-  margin-left: 6px;
+  width: 100%;
+  min-width: 0;
+  margin-left: 0;
   border-radius: 8px;
 
   .menu-icon {
     margin-left: -5px;
   }
+
+  .menu-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 // 通用 hover 样式
@@ -31,17 +38,26 @@ $popup-menu-radius: 6px;
 }
 
 // 通用选中样式
-@mixin menu-active($color, $bg-color, $icon-color: var(--theme-color)) {
+@mixin menu-active($color, $bg-color, $icon-color: $color) {
   .el-menu-item.is-active {
     color: $color !important;
     background-color: $bg-color;
     font-weight: 600;
 
+    &:hover {
+      background-color: $bg-color !important;
+    }
+
     .menu-icon {
       .art-svg-icon {
         color: $icon-color !important;
       }
     }
+
+    span,
+    .menu-name {
+      color: $color !important;
+    }
   }
 }
 
@@ -141,13 +157,17 @@ $popup-menu-radius: 6px;
   // 菜单高度
   .el-sub-menu__title,
   .el-menu-item {
+    display: flex !important;
+    align-items: center;
+    min-width: 0;
     height: $menu-height !important;
     margin-bottom: 2px;
     line-height: $menu-height !important;
-    overflow: visible !important;
+    overflow: hidden !important;
 
     .menu-name {
-      flex-shrink: 0;
+      flex-shrink: 1;
+      min-width: 0;
       font-size: $menu-font-size !important;
       font-weight: 500;
       // Fresh Mint：默认菜单项为中性色（demo `.nav a`）
@@ -156,6 +176,8 @@ $popup-menu-radius: 6px;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -183,24 +205,32 @@ $popup-menu-radius: 6px;
   .el-menu--collapse {
     .el-sub-menu.is-active {
       .el-sub-menu__title {
+        background-color: var(--primary, #10b981);
+
         .menu-icon {
           .art-svg-icon {
-            // 选中菜单图标颜色
-            color: var(--theme-color) !important;
+            color: #fff !important;
           }
         }
       }
     }
+
+    .el-menu-item.is-active {
+      background-color: var(--primary, #10b981);
+      color: #fff !important;
+
+      span,
+      .menu-name,
+      .menu-icon .art-svg-icon {
+        color: #fff !important;
+      }
+    }
   }
 
   // ---------------------- Design theme menu ----------------------
   .el-menu-design {
     @include theme-menu-base;
-    @include menu-active(
-      var(--mint-primary-dark, #065f46),
-      var(--mint-primary-bg, #e8f4ee),
-      var(--mint-primary-dark, #065f46)
-    );
+    @include menu-active(#fff, var(--primary, #10b981), #fff);
     @include menu-hover($hover-bg-color);
 
     .el-menu-item,
@@ -208,12 +238,6 @@ $popup-menu-radius: 6px;
       color: var(--mint-text, #1e293b) !important;
     }
 
-    // 选中态：以浅底+图标强化为主，文字保持中性色（对齐 fresh-mint demo）
-    .el-menu-item.is-active span {
-      color: var(--mint-primary-dark, #065f46) !important;
-      font-weight: 600 !important;
-    }
-
     .el-sub-menu__icon-arrow {
       color: var(--mint-text-muted, #64748b);
     }
@@ -240,17 +264,18 @@ $popup-menu-radius: 6px;
     }
 
     .el-menu-item.is-active {
-      background-color: var(--mint-primary-bg, #e8f4ee);
-      color: var(--mint-primary-dark, #065f46) !important;
+      background-color: var(--primary, #10b981);
+      color: #fff !important;
       font-weight: 600;
 
-      span {
-        color: var(--mint-primary-dark, #065f46) !important;
+      span,
+      .menu-name {
+        color: #fff !important;
         font-weight: 600 !important;
       }
 
       .art-svg-icon {
-        color: var(--mint-primary-dark, #065f46) !important;
+        color: #fff !important;
       }
     }
 
@@ -282,6 +307,22 @@ $popup-menu-radius: 6px;
   @include popup-menu-base(var(--art-gray-200), var(--art-gray-900), var(--art-gray-200));
 }
 
+.menu-left-design-popper,
+.menu-left-light-popper {
+  .el-menu--popup {
+    .el-menu-item.is-active {
+      color: #fff !important;
+      background-color: var(--primary, #10b981) !important;
+
+      span,
+      .menu-name,
+      .art-svg-icon {
+        color: #fff !important;
+      }
+    }
+  }
+}
+
 // 暗黑模式菜单样式
 .dark {
   .el-menu--vertical,
@@ -296,8 +337,19 @@ $popup-menu-radius: 6px;
       color: var(--art-gray-800) !important;
     }
 
-    // 选中的文字颜色跟图标颜色
-    .el-menu-item.is-active {
+    // 选中的文字颜色跟图标颜色（design / light 为深绿底白字）
+    .el-menu-design,
+    .el-menu-light {
+      .el-menu-item.is-active {
+        span,
+        .menu-name,
+        .menu-icon .art-svg-icon {
+          color: #fff !important;
+        }
+      }
+    }
+
+    .el-menu-dark .el-menu-item.is-active {
       span,
       .menu-icon .art-svg-icon {
         color: var(--theme-color) !important;