From 42e36cde07b1c8c1b8dccb0e84a4912954f00650 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 20 Mar 2026 08:58:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E9=9D=A2=E6=A8=A1=E4=BB=BF=20?=
 =?UTF-8?q?VMRack=20=E6=8E=A7=E5=88=B6=E5=8F=B0=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

布局:
- CSS Grid: 228px侧边栏 + 1fr内容, 64px顶栏 + 1fr内容
- 淡蓝渐变背景 linear-gradient(135deg)
- 磨砂玻璃浮岛 backdrop-filter:blur(12px)
- 侧边栏/内容区: 圆角20px, 半透白背景, 20px间距

风格:
- 透明顶栏(无背景无阴影)
- 顶栏右侧圆形磨砂按钮
- 胶囊菜单高亮(44px高/10px圆角)
- 配色: #1D2129/#4E5969/#165DFF
---
 clientarea/hgcloud/css/dark-override.css | 167 ++++++++++++++---------
 1 file changed, 101 insertions(+), 66 deletions(-)

diff --git a/clientarea/hgcloud/css/dark-override.css b/clientarea/hgcloud/css/dark-override.css
index 0466e99..e161a76 100644
--- a/clientarea/hgcloud/css/dark-override.css
+++ b/clientarea/hgcloud/css/dark-override.css
@@ -7,71 +7,103 @@
  * 在 header.php 中引入，影响所有登录后页面
  */
 
-/* ============ 基础层 ============ */
+/* ============ 基础层 — 渐变背景 ============ */
 html, body {
-  background-color: #F5F7FA !important;
-  color: #1a1a1a !important;
+  background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 30%, #dbeafe 60%, #e0f2fe 100%) !important;
+  background-attachment: fixed !important;
+  color: #1D2129 !important;
+  min-height: 100vh;
 }
 
 #mainLoading {
-  background: #FFFFFF !important;
+  background: rgba(255,255,255,0.6) !important;
 }
 
 #mainLoading.pro-des::before {
-  background: #FFFFFF !important;
+  background: rgba(255,255,255,0.6) !important;
 }
 
 .template:first-child {
   display: none;
 }
 
-/* ============ 布局：CSS Grid 全宽顶栏 ============ */
-/* 外层容器 → Grid: 第一行顶栏全宽, 第二行 aside+main */
+/* ============ 布局：CSS Grid 全宽顶栏 + 浮岛间距 ============ */
 .template > .el-container {
   display: grid !important;
-  grid-template-columns: 190px 1fr !important;
-  grid-template-rows: 60px 1fr !important;
+  grid-template-columns: 228px 1fr !important;
+  grid-template-rows: 64px 1fr !important;
   min-height: 100vh !important;
   width: 100% !important;
+  gap: 0 !important;
+  background: transparent !important;
 }
 
-/* 内层 el-container: display:contents 让子元素直接参与外层 grid */
+/* 内层 el-container: display:contents */
 .template > .el-container > .el-container {
   display: contents !important;
 }
 
-/* top-menu 组件的 <div> 包裹层也 display:contents */
+/* 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;
   width: 100% !important;
-  height: 60px !important;
+  height: 64px !important;
   position: relative !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);
+  background: transparent !important;
+  box-shadow: none !important;
+  border-bottom: none !important;
   z-index: 100 !important;
   display: flex !important;
   align-items: center !important;
+  padding: 0 24px !important;
 }
 
-/* el-aside: 第一列, 第二行, 背景撑满 */
+/* ============ 侧边栏 — 磨砂玻璃浮岛 ============ */
 .template > .el-container > .el-aside {
   grid-column: 1 !important;
   grid-row: 2 !important;
+  width: 228px !important;
+  margin: 0 0 20px 20px !important;
+  border-radius: 20px !important;
+  background: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.8) !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
   min-height: 0 !important;
 }
 
-/* el-main: 第二列, 第二行, 背景色 */
+/* 隐藏侧边栏原有 logo (已移到顶栏) */
+.el-aside > a:first-child {
+  display: none !important;
+}
+
+/* 侧边栏菜单上边距 */
+.el-aside .menu-top {
+  margin-top: 8px !important;
+  padding: 0 12px !important;
+}
+
+/* ============ 主内容区 — 磨砂玻璃浮岛 ============ */
 .el-main {
   grid-column: 2 !important;
   grid-row: 2 !important;
-  background-color: #F5F7FA !important;
+  margin: 0 20px 20px 20px !important;
+  border-radius: 20px !important;
+  background: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.8) !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
+  padding: 24px !important;
   min-height: 0 !important;
 }
 
@@ -79,65 +111,68 @@ html, body {
 .header-logo-link {
   display: flex;
   align-items: center;
-  margin-right: 16px;
+  margin-right: 20px;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .header-logo {
-  height: 32px;
+  height: 36px;
   width: auto;
 }
 
-/* ============ 侧边栏 ============ */
-/* 隐藏侧边栏原有 logo (已移到顶栏) */
-.el-aside > a:first-child {
-  display: none !important;
+/* ============ 顶栏右侧按钮 — 圆形磨砂 ============ */
+.header-right .header-right-item .right-item,
+.header-right .header-right-item .el-dropdown-header {
+  background: rgba(255, 255, 255, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.9) !important;
+  border-radius: 50% !important;
+  backdrop-filter: blur(8px) !important;
+  -webkit-backdrop-filter: blur(8px) !important;
+  transition: all 0.2s ease !important;
 }
 
-.el-aside {
-  background: #FFFFFF !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;
+.header-right .header-right-item .right-item:hover,
+.header-right .header-right-item .el-dropdown-header:hover {
+  background: rgba(255, 255, 255, 0.85) !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
 }
 
 .ali-logo {
   filter: none;
 }
 
-/* ============ 侧边栏菜单 — 胶囊高亮（白底） ============ */
+/* ============ 侧边栏菜单 — 胶囊高亮 ============ */
 .menu-top .el-menu-item {
-  color: #5f6368 !important;
-  border-radius: 8px !important;
+  color: #4E5969 !important;
+  border-radius: 10px !important;
   margin: 2px 0 !important;
+  height: 44px !important;
+  line-height: 44px !important;
   transition: all 0.2s !important;
   border-bottom: none !important;
 }
 
 .menu-top .el-menu-item i {
-  color: #5f6368 !important;
+  color: #4E5969 !important;
   transition: color 0.2s !important;
 }
 
 .menu-top .el-menu-item:hover {
-  background-color: rgba(0, 0, 0, 0.04) !important;
-  color: #1a1a1a !important;
+  background-color: rgba(22, 93, 255, 0.04) !important;
+  color: #1D2129 !important;
   border-bottom: none !important;
 }
 
 .menu-top .el-menu-item:hover i {
-  color: #1a1a1a !important;
+  color: #1D2129 !important;
 }
 
 .menu-top .el-menu-item.is-active {
   background-color: rgba(22, 93, 255, 0.08) !important;
   color: #165DFF !important;
   border-bottom: none !important;
+  font-weight: 500 !important;
 }
 
 .menu-top .el-menu-item.is-active i {
@@ -146,32 +181,35 @@ html, body {
 
 /* 子菜单 */
 .menu-top .el-submenu__title {
-  color: #5f6368 !important;
-  border-radius: 8px !important;
+  color: #4E5969 !important;
+  border-radius: 10px !important;
+  height: 44px !important;
+  line-height: 44px !important;
   transition: all 0.2s !important;
 }
 
 .menu-top .el-submenu__title i {
-  color: #5f6368 !important;
+  color: #4E5969 !important;
 }
 
 .menu-top .el-submenu__title:hover {
-  background-color: rgba(0, 0, 0, 0.04) !important;
-  color: #1a1a1a !important;
+  background-color: rgba(22, 93, 255, 0.04) !important;
+  color: #1D2129 !important;
 }
 
 .menu-top .el-submenu__title:hover i {
-  color: #1a1a1a !important;
+  color: #1D2129 !important;
 }
 
 .menu-top .el-submenu .el-menu-item:hover {
-  background-color: rgba(0, 0, 0, 0.04) !important;
-  color: #1a1a1a !important;
+  background-color: rgba(22, 93, 255, 0.04) !important;
+  color: #1D2129 !important;
 }
 
 .menu-top .el-submenu .el-menu-item.is-active {
   background-color: rgba(22, 93, 255, 0.08) !important;
   color: #165DFF !important;
+  font-weight: 500 !important;
 }
 
 /* Element UI 菜单整体背景 */
@@ -184,7 +222,7 @@ html, body {
 
 .el-header .search-value,
 .el-header .search-name {
-  color: #8B949E !important;
+  color: #4E5969 !important;
 }
 
 .header-right .header-right-item .el-dropdown-header .head-box {
@@ -192,41 +230,38 @@ html, body {
 }
 
 .header-right .header-right-item .un-login {
-  color: #5f6368 !important;
+  color: #4E5969 !important;
 }
 
 .header-right .header-right-item .cloum-line {
-  border-color: rgba(0,0,0,0.08) !important;
+  border-color: rgba(0,0,0,0.06) !important;
 }
 
 .header-left .el-input input {
-  background: transparent !important;
-  color: #1a1a1a !important;
+  background: rgba(255,255,255,0.4) !important;
+  color: #1D2129 !important;
+  border-radius: 10px !important;
 }
 
 /* 顶栏图标颜色 */
 .header-right .header-right-item i {
-  color: #5f6368 !important;
+  color: #4E5969 !important;
 }
 
 .header-right .header-right-item i:hover {
   color: #165DFF !important;
 }
 
-/* ============ 主内容区 ============ */
-.el-main {
-  background: #F5F7FA !important;
-}
-
 .main-card {
-  background: #FFFFFF !important;
-  color: #1a1a1a !important;
-  border-radius: 12px !important;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
+  background: rgba(255,255,255,0.7) !important;
+  color: #1D2129 !important;
+  border-radius: 16px !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
+  border: 1px solid rgba(255,255,255,0.8);
 }
 
 .main-card-title {
-  color: #1a1a1a !important;
+  color: #1D2129 !important;
 }
 
 /* ============ Element UI 输入框 ============ */