feat: 全站导航改为 Ant Design Pro 左侧边栏布局（issue #131）
- pro-header.js 重构：深色 Sider（#001529，AntD Pro 经典）+ 顶部 48px 细栏 - Sider 菜单 = 门户 + 模块按登录角色过滤，当前页高亮 #1677ff， 底部折叠按钮可收成 48px 图标栏；窄屏（≤720px）自动隐藏退回纯顶栏 - 菜单/高亮按 URL 自动计算站点根前缀，六个模块页零改动接入
This commit is contained in:
+96
-34
@@ -69,26 +69,34 @@ body {
|
||||
line-height: 1.5715;
|
||||
}
|
||||
|
||||
/* ---- 统一全站导航条（pro-header.js 注入） ------------------------------ */
|
||||
.pro-header {
|
||||
/* ---- Ant Design Pro 左侧边栏布局（pro-header.js 注入） ------------------- */
|
||||
/* 深色 Sider（#001529，AntD Pro 默认）+ 顶部白色细栏 + 内容区右移 */
|
||||
.pro-sider {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 208px;
|
||||
background: #001529;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
transition: width 0.2s;
|
||||
}
|
||||
.pro-sider-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 10px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
background: var(--ant-bg-container);
|
||||
box-shadow: var(--ant-shadow-header);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.pro-header .pro-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pro-header .pro-logo-badge {
|
||||
.pro-sider-logo .pro-logo-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--ant-radius);
|
||||
@@ -100,19 +108,82 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pro-header .pro-logo-text {
|
||||
.pro-sider-logo-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.pro-sider-menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.pro-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 40px;
|
||||
margin: 4px 8px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--ant-radius);
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
.pro-menu-item:hover { color: #fff; }
|
||||
.pro-menu-item.active {
|
||||
background: var(--ant-primary);
|
||||
color: #fff;
|
||||
}
|
||||
.pro-menu-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
|
||||
.pro-menu-text { overflow: hidden; text-overflow: ellipsis; }
|
||||
.pro-sider-trigger {
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
border: none !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.pro-sider-trigger:hover { color: #fff !important; }
|
||||
|
||||
/* 内容区右移：Sider 固定定位，页面原内容整体让位 */
|
||||
body.has-pro-sider { padding-left: 208px; transition: padding-left 0.2s; }
|
||||
body.has-pro-sider.pro-sider-collapsed { padding-left: 48px; }
|
||||
body.pro-sider-collapsed .pro-sider { width: 48px; }
|
||||
body.pro-sider-collapsed .pro-sider-logo-text,
|
||||
body.pro-sider-collapsed .pro-menu-text { display: none; }
|
||||
body.pro-sider-collapsed .pro-menu-item { justify-content: center; padding: 0; }
|
||||
body.pro-sider-collapsed .pro-sider-logo { justify-content: center; padding: 0; }
|
||||
|
||||
/* ---- 顶部白色细栏（页标题 + 用户区） ------------------------------------- */
|
||||
.pro-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
background: var(--ant-bg-container);
|
||||
box-shadow: var(--ant-shadow-header);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.pro-header-page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ant-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pro-header .pro-page-title {
|
||||
font-size: 14px;
|
||||
color: var(--ant-text-tertiary);
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--ant-split);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -140,16 +211,6 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pro-header a.pro-nav-link {
|
||||
color: var(--ant-text-secondary);
|
||||
text-decoration: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--ant-radius);
|
||||
}
|
||||
.pro-header a.pro-nav-link:hover {
|
||||
color: var(--ant-primary);
|
||||
background: var(--ant-bg-fill);
|
||||
}
|
||||
.pro-header .pro-logout {
|
||||
border: none;
|
||||
background: none;
|
||||
@@ -288,8 +349,9 @@ table th, table td {
|
||||
.status-dot.ok, .dot.ok { color: var(--ant-success) !important; }
|
||||
.status-dot.down, .dot.down { color: var(--ant-error) !important; }
|
||||
|
||||
/* ---- 窄屏适配：导航条允许换行收缩 --------------------------------------- */
|
||||
/* ---- 窄屏适配：隐藏 Sider 退回纯顶栏 ------------------------------------- */
|
||||
@media (max-width: 720px) {
|
||||
.pro-header .pro-page-title { display: none; }
|
||||
.pro-header .pro-logo-text { font-size: 14px; }
|
||||
.pro-sider { display: none; }
|
||||
body.has-pro-sider, body.has-pro-sider.pro-sider-collapsed { padding-left: 0; }
|
||||
.pro-header-page-title { font-size: 14px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user