yujun/goalfylearning-admin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(): 在文件顶部添加了完整的 Ant Design Menu 深色主题覆盖

Browse Source 
- 包含了常规菜单项、折叠菜单项、悬停状态和选中状态的样式
         - 确保所有状态下的颜色都与深色主题协调一致
This commit is contained in:
yuj
2025-12-04 18:19:18 +08:00
parent ee08889009
commit b4e0470b6e
2 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/DynamicMenu.css
View File

@@ -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;
}
/* 子菜单样式 */

59
src/darkTheme.css
View File

@@ -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;