From b4e0470b6e4e9d4070b1cb1cf5ed21073e713c57 Mon Sep 17 00:00:00 2001 From: yuj Date: Thu, 4 Dec 2025 18:19:18 +0800 Subject: [PATCH] =?UTF-8?q?fix():=20=20=E5=9C=A8=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=B7=BB=E5=8A=A0=E4=BA=86=E5=AE=8C=E6=95=B4?= =?UTF-8?q?=E7=9A=84=20Ant=20Design=20Menu=20=E6=B7=B1=E8=89=B2=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E8=A6=86=E7=9B=96=20=20=20=20=20=20=20=20=20=20-=20?= =?UTF-8?q?=E5=8C=85=E5=90=AB=E4=BA=86=E5=B8=B8=E8=A7=84=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B9=E3=80=81=E6=8A=98=E5=8F=A0=E8=8F=9C=E5=8D=95=E9=A1=B9?= =?UTF-8?q?=E3=80=81=E6=82=AC=E5=81=9C=E7=8A=B6=E6=80=81=E5=92=8C=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E7=8A=B6=E6=80=81=E7=9A=84=E6=A0=B7=E5=BC=8F=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20-=20=E7=A1=AE=E4=BF=9D=E6=89=80=E6=9C=89?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8B=E7=9A=84=E9=A2=9C=E8=89=B2=E9=83=BD?= =?UTF-8?q?=E4=B8=8E=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98=E5=8D=8F=E8=B0=83?= =?UTF-8?q?=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DynamicMenu.css | 19 +++++++++++ src/darkTheme.css | 59 ++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+) diff --git a/src/components/DynamicMenu.css b/src/components/DynamicMenu.css index 2810975..897e295 100644 --- a/src/components/DynamicMenu.css +++ b/src/components/DynamicMenu.css @@ -78,6 +78,7 @@ /* 折叠时的样式 */ .dynamic-menu-wrapper .ant-menu-inline-collapsed { width: 100% !important; + background: transparent !important; } .dynamic-menu-wrapper .ant-menu-inline-collapsed > .ant-menu-item, @@ -89,6 +90,13 @@ display: flex; justify-content: center; align-items: center; + background: transparent !important; +} + +.dynamic-menu-wrapper .ant-menu-inline-collapsed > .ant-menu-item:hover, +.dynamic-menu-wrapper .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title:hover { + background: linear-gradient(135deg, rgba(124, 92, 255, 0.08) 0%, rgba(124, 92, 255, 0.05) 100%) !important; + border-color: rgba(124, 92, 255, 0.15) !important; } .dynamic-menu-wrapper .ant-menu-inline-collapsed .ant-menu-item-icon { @@ -100,6 +108,17 @@ font-size: 22px; line-height: 42px; margin: 0 !important; + color: var(--text) !important; +} + +.dynamic-menu-wrapper .ant-menu-inline-collapsed > .ant-menu-item-selected, +.dynamic-menu-wrapper .ant-menu-inline-collapsed > .ant-menu-item-selected:hover { + background: linear-gradient(135deg, rgba(124, 92, 255, 0.12) 0%, rgba(124, 92, 255, 0.08) 100%) !important; + border-color: rgba(124, 92, 255, 0.2) !important; +} + +.dynamic-menu-wrapper .ant-menu-inline-collapsed > .ant-menu-item-selected .anticon { + color: var(--accent) !important; } /* 子菜单样式 */ diff --git a/src/darkTheme.css b/src/darkTheme.css index bf91ddd..7f4e6e1 100644 --- a/src/darkTheme.css +++ b/src/darkTheme.css @@ -1,5 +1,64 @@ /* 深色科技风主题覆盖样式 - 参考 x.ai */ +/* Ant Design 深色主题覆盖 */ +.ant-menu { + background: transparent !important; + color: var(--text) !important; +} + +.ant-menu-item, +.ant-menu-submenu-title { + color: var(--text) !important; +} + +.ant-menu-item:hover, +.ant-menu-submenu-title:hover { + color: var(--text) !important; +} + +.ant-menu-item-selected { + color: var(--text) !important; +} + +.ant-menu-item .anticon, +.ant-menu-submenu-title .anticon { + color: var(--text) !important; +} + +/* 折叠菜单深色样式 */ +.ant-menu-inline-collapsed { + background: transparent !important; +} + +.ant-menu-inline-collapsed .ant-menu-item { + background: transparent !important; + color: var(--text) !important; +} + +.ant-menu-inline-collapsed .ant-menu-item .anticon { + color: var(--text) !important; +} + +.ant-menu-inline-collapsed .ant-menu-item-selected .anticon { + color: var(--accent) !important; +} + +/* Tooltip 深色主题 */ +.ant-tooltip { + background: var(--panel-solid) !important; +} + +.ant-tooltip-inner { + background: var(--panel-solid) !important; + color: var(--text) !important; + border: 1px solid var(--border); +} + +.ant-tooltip-arrow::before { + background: var(--panel-solid) !important; + border: 1px solid var(--border); +} + /* 容器层级 */ .container { position: relative;