fix(web-admin): 对齐门户顶栏 brand 与侧栏右边框，并修复侧栏竖线被遮挡

将侧栏右边框改画在 #app-sidebar 上，内部菜单改为宽度 100%，避免等宽子项盖住边框；顶栏 brand 宽度与侧栏展开宽度对齐。

Co-authored-by: Cursor <cursoragent@cursor.com>

web-admin/src/assets/styles/core/app.scss

@@ -1515,9 +1515,14 @@ body {
   background: var(--mint-surface);
 }
 
+.app-layout-portal #app-sidebar {
+  border-right: 1px solid var(--mint-border, #d9e8e2) !important;
+}
+
 .app-layout-portal #app-sidebar .layout-sidebar {
   height: 100%;
-  border-right: 1px solid var(--mint-border) !important;
+  /* 避免与 #app-sidebar 双边框；竖线由 aside 绘制，不会被 .menu-left 盖住 */
+  border-right: none !important;
   background: var(--mint-surface);
 }
 

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

@@ -196,7 +196,8 @@
       maxWidth: width,
       flexShrink: '0',
       boxSizing: 'border-box',
-      borderRight: '1px solid var(--mint-border, #d9e8e2)'
+      // 门户：竖线由 #app-sidebar 绘制，避免被内部等宽 .menu-left 盖住
+      borderRight: isPortalMenu.value ? 'none' : '1px solid var(--mint-border, #d9e8e2)'
     } as Record<string, string>
   })
 
@@ -469,18 +470,18 @@
   @use './theme';
 
   .layout-sidebar {
-    // 侧栏容器宽度固定，内部菜单在容器内完整展示
+    // 侧栏容器宽度固定，内部菜单在容器内完整展示（用 100% 避免等宽子项盖住容器右边框）
     .menu-left-open {
-      width: v-bind(menuopenwidth);
+      width: 100%;
-      min-width: v-bind(menuopenwidth);
+      min-width: 0;
-      max-width: v-bind(menuopenwidth);
+      max-width: 100%;
       flex-shrink: 0;
     }
 
     .menu-left-close {
-      width: v-bind(menuclosewidth);
+      width: 100%;
-      min-width: v-bind(menuclosewidth);
+      min-width: 0;
-      max-width: v-bind(menuclosewidth);
+      max-width: 100%;
       flex-shrink: 0;
     }
 
@@ -494,7 +495,7 @@
 
     // 折叠后宽度
     .el-menu--collapse {
-      width: v-bind(menuclosewidth);
+      width: 100%;
     }
   }
 </style>

web-admin/src/components/core/layouts/art-portal-header/index.vue

@@ -90,7 +90,8 @@
     justify-content: space-between;
     width: 100%;
     height: 56px;
-    padding: 0 var(--mint-content-padding, 24px);
+    /* 左侧无 padding：brand 区与侧栏同宽，右边框才能纵向对齐 */
+    padding: 0 var(--mint-content-padding, 24px) 0 0;
     user-select: none;
     background: var(--mint-primary, #1ca851);
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
@@ -106,12 +107,18 @@
   }
 
   .portal-header-brand {
+    box-sizing: border-box;
     display: flex;
     flex-shrink: 0;
     gap: 12px;
     align-items: center;
-    margin-right: 4px;
+    /* +1px：与侧栏 #app-sidebar 外边框（内容宽 + 1px border）纵向对齐 */
+    width: calc(var(--app-sidebar-open-width, 270px) + 1px);
+    min-width: calc(var(--app-sidebar-open-width, 270px) + 1px);
+    max-width: calc(var(--app-sidebar-open-width, 270px) + 1px);
+    padding-left: var(--mint-content-padding, 24px);
     padding-right: 16px;
+    overflow: hidden;
     cursor: pointer;
     border-right: 1px solid rgba(255, 255, 255, 0.22);
   }
@@ -121,8 +128,11 @@
   }
 
   .portal-header-title {
-    max-width: 290px;
+    flex: 1;
+    min-width: 0;
     margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.35;

web-admin/src/views/index/index.vue

@@ -1,11 +1,11 @@
 <!-- 布局容器 -->
 <template>
-  <div v-if="isPortalLayout" class="app-layout app-layout-portal">
+  <div v-if="isPortalLayout" class="app-layout app-layout-portal" :style="appLayoutStyle">
     <div id="app-portal-header">
       <ArtPortalHeader />
     </div>
 
-    <div id="app-portal-body" :style="appLayoutStyle">
+    <div id="app-portal-body">
       <aside id="app-sidebar">
         <ArtSidebarMenu />
       </aside>

web-admin/src/views/index/style.portal.scss

@@ -23,6 +23,7 @@
   #app-sidebar {
     flex-shrink: 0;
     height: 100%;
+    /* 边框画在 aside 上：内部 .menu-left 与侧栏同宽时会盖住 .layout-sidebar 的 border */
     border-right: 1px solid var(--mint-border, #d9e8e2);
     background: var(--mint-surface, #fff);
     box-sizing: border-box;