From d991d9af1c158c3c932bc18c0fdf0a17148bcf62 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 20 Mar 2026 08:46:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B6=E6=A0=8F=E5=85=A8=E5=AE=BD+Lo?=
 =?UTF-8?q?go=E7=A7=BB=E5=88=B0=E9=A1=B6=E6=A0=8F+CSS=20Grid=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

组件修改:
- topMenu.js: el-header 左侧添加 logo (header-logo class)

CSS Grid 布局:
- 外层 el-container → grid(190px+1fr, 60px+1fr)
- 内层 el-container → display:contents
- top-menu的div包裹 → display:contents
- el-header: grid-column 1/-1 跨两列全宽第一行
- el-aside: 第一列第二行
- el-main: 第二列第二行

其他:
- 隐藏侧边栏原有 logo (.el-aside > a:first-child)
- menu-top margin-top: 86px → 12px
---
 .../hgcloud/components/topMenu/topMenu.js     |  3 +
 clientarea/hgcloud/css/dark-override.css      | 77 +++++++++++++++----
 2 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/clientarea/hgcloud/components/topMenu/topMenu.js b/clientarea/hgcloud/components/topMenu/topMenu.js
index 7dc1c99..e381ad4 100644
--- a/clientarea/hgcloud/components/topMenu/topMenu.js
+++ b/clientarea/hgcloud/components/topMenu/topMenu.js
@@ -75,6 +75,9 @@ const topMenu = {
 
   <el-header>
     <div class="header-left">
+      <a :href="commonData.clientarea_logo_url || '/home.htm'" onclick="return false" class="header-logo-link" @click="goHome">
+        <img class="header-logo" :src="logo" v-show="logo">
+      </a>
       <img src="${url}/img/common/menu.png" class="menu-img" @click="showMenu">
       <img v-if="isShowMore" src="${url}/img/common/search.png" class="left-img">
       <el-autocomplete v-if="isShowMore" v-model="topInput" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
diff --git a/clientarea/hgcloud/css/dark-override.css b/clientarea/hgcloud/css/dark-override.css
index 92a5ec9..271ce90 100644
--- a/clientarea/hgcloud/css/dark-override.css
+++ b/clientarea/hgcloud/css/dark-override.css
@@ -25,27 +25,81 @@ html, body {
   display: none;
 }
 
-/* ============ 布局容器方向强制覆盖 ============ */
-/* 外层容器：水平方向（aside 左 + container 右） */
+/* ============ 布局：CSS Grid 全宽顶栏 ============ */
+/* 外层容器 → Grid: 第一行顶栏全宽, 第二行 aside+main */
 .template > .el-container {
-  flex-direction: row !important;
+  display: grid !important;
+  grid-template-columns: 190px 1fr !important;
+  grid-template-rows: 60px 1fr !important;
+  min-height: 100vh !important;
+  width: 100% !important;
 }
 
-/* 内层容器：垂直方向（top-menu 上 + el-main 下） */
+/* 内层 el-container: display:contents 让子元素直接参与外层 grid */
 .template > .el-container > .el-container {
-  flex-direction: column !important;
+  display: contents !important;
+}
+
+/* top-menu 组件的 <div> 包裹层也 display:contents */
+.template > .el-container > .el-container > div {
+  display: contents !important;
+}
+
+/* el-header: 跨两列, 第一行, 全宽 */
+.el-header {
+  grid-column: 1 / -1 !important;
+  grid-row: 1 !important;
+  background: #FFFFFF !important;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  z-index: 100 !important;
+  position: sticky !important;
+  top: 0 !important;
+}
+
+/* el-aside: 第一列, 第二行 */
+.template > .el-container > .el-aside {
+  grid-column: 1 !important;
+  grid-row: 2 !important;
+}
+
+/* el-main: 第二列, 第二行 */
+.el-main {
+  grid-column: 2 !important;
+  grid-row: 2 !important;
+}
+
+/* ============ 顶栏 Logo ============ */
+.header-logo-link {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+  cursor: pointer;
+}
+
+.header-logo {
+  height: 32px;
+  width: auto;
 }
 
 /* ============ 侧边栏 ============ */
+/* 隐藏侧边栏原有 logo (已移到顶栏) */
+.el-aside > a:first-child {
+  display: none !important;
+}
+
 .el-aside {
   background: #FFFFFF !important;
-  border-right: none !important;
-  border-radius: 0 16px 16px 0 !important;
-  box-shadow: 1px 0 3px rgba(0,0,0,0.04) !important;
+  border-right: 1px solid rgba(0,0,0,0.06) !important;
   overflow-y: auto !important;
   overflow-x: hidden !important;
 }
 
+/* 侧边栏菜单不再需要 86px 的 logo 占位 */
+.el-aside .menu-top {
+  margin-top: 12px !important;
+}
+
 .ali-logo {
   filter: none;
 }
@@ -120,12 +174,7 @@ html, body {
   border-right: none !important;
 }
 
-/* ============ 顶栏 ============ */
-.el-header {
-  background: #FFFFFF !important;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
-  border-bottom: 1px solid rgba(0,0,0,0.06);
-}
+/* ============ 顶栏子元素 ============ */
 
 .el-header .search-value,
 .el-header .search-name {