rbetree
479
assets/style.css
479
assets/style.css
@@ -17,15 +17,15 @@
|
||||
--highlight-bg: rgba(118, 148, 185, 0.3);
|
||||
--scrollbar-color: rgba(255, 255, 255, 0.15);
|
||||
--scrollbar-hover-color: rgba(255, 255, 255, 0.25);
|
||||
--accent-color: #7694B9;
|
||||
--accent-hover: #6684A9;
|
||||
--accent-color: #7694b9;
|
||||
--accent-hover: #6684a9;
|
||||
--accent-rgb: 118, 148, 185;
|
||||
--nav-item-color: #a1a2a5;
|
||||
--success-color: #4caf50;
|
||||
--error-color: #f44336;
|
||||
--white-color: #ffffff;
|
||||
--gradient-color: linear-gradient(135deg, #7694B9 0%, #a855f7 50%, #ff6b6b 100%);
|
||||
--gradient-color-simple: linear-gradient(135deg, #7694B9 0%, #a855f7 100%);
|
||||
--gradient-color: linear-gradient(135deg, #7694b9 0%, #a855f7 50%, #ff6b6b 100%);
|
||||
--gradient-color-simple: linear-gradient(135deg, #7694b9 0%, #a855f7 100%);
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-collapsed-width: 60px;
|
||||
/* 统一视口高度：由 JS 动态写入（移动端避免 100vh 被浏览器 UI 影响） */
|
||||
@@ -78,15 +78,15 @@ body.light-theme {
|
||||
--highlight-bg: rgba(118, 148, 185, 0.15);
|
||||
--scrollbar-color: rgba(0, 0, 0, 0.1);
|
||||
--scrollbar-hover-color: rgba(0, 0, 0, 0.2);
|
||||
--accent-color: #7694B9;
|
||||
--accent-hover: #6684A9;
|
||||
--accent-color: #7694b9;
|
||||
--accent-hover: #6684a9;
|
||||
--accent-rgb: 118, 148, 185;
|
||||
--nav-item-color: #666666;
|
||||
--success-color: #4caf50;
|
||||
--error-color: #f44336;
|
||||
--white-color: #ffffff;
|
||||
--gradient-color: linear-gradient(135deg, #7694B9 0%, #a855f7 50%, #ff6b6b 100%);
|
||||
--gradient-color-simple: linear-gradient(135deg, #7694B9 0%, #a855f7 100%);
|
||||
--gradient-color: linear-gradient(135deg, #7694b9 0%, #a855f7 50%, #ff6b6b 100%);
|
||||
--gradient-color-simple: linear-gradient(135deg, #7694b9 0%, #a855f7 100%);
|
||||
--card-bg-rgb: 240, 240, 235;
|
||||
}
|
||||
|
||||
@@ -219,9 +219,18 @@ html {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif);
|
||||
font-family: var(
|
||||
--font-body,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Noto Sans',
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif
|
||||
);
|
||||
font-weight: var(--font-weight-body, normal);
|
||||
line-height: 1.6;
|
||||
background-color: var(--bg-color);
|
||||
@@ -231,7 +240,9 @@ body {
|
||||
/* 防止body滚动 */
|
||||
padding-right: 0 !important;
|
||||
/* 防止滚动条导致的布局偏移 */
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 布局 */
|
||||
@@ -334,10 +345,10 @@ body.loaded .layout {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto auto;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"content"
|
||||
"social"
|
||||
"footer";
|
||||
'header'
|
||||
'content'
|
||||
'social'
|
||||
'footer';
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-color) transparent;
|
||||
overflow-y: hidden;
|
||||
@@ -362,13 +373,6 @@ body.loaded .layout {
|
||||
/* 收起态同样拉开与按钮的间距 */
|
||||
}
|
||||
|
||||
/* 折叠状态下的侧边栏内容区域调整 */
|
||||
.sidebar.collapsed .sidebar-content {
|
||||
padding: 0;
|
||||
scrollbar-width: none;
|
||||
/* 隐藏滚动条 */
|
||||
}
|
||||
|
||||
/* 调整折叠侧边栏的部分元素间距 */
|
||||
.sidebar.collapsed .nav-section {
|
||||
gap: 2px;
|
||||
@@ -384,11 +388,6 @@ body.loaded .layout {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* 隐藏WebKit浏览器的滚动条 */
|
||||
}
|
||||
|
||||
/* 侧边栏头部区域 */
|
||||
.sidebar .logo {
|
||||
grid-area: header;
|
||||
@@ -438,7 +437,9 @@ body.loaded .layout {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -512,31 +513,65 @@ body.loaded .layout {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 侧边栏内容区域 - 可滚动 */
|
||||
/* 侧边栏内容区域：导航项常驻显示，分类列表在独立面板内滚动 */
|
||||
.sidebar-content {
|
||||
grid-area: content;
|
||||
min-height: 0;
|
||||
/* 允许在 CSS Grid 内正确收缩与滚动，避免把 footer 挤出可视区域 */
|
||||
overflow-y: auto;
|
||||
/* 只有内容区域可滚动 */
|
||||
overflow: hidden;
|
||||
/* 导航项常驻显示，分类列表在独立面板内滚动 */
|
||||
padding: 0 1.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
/* 从1rem减小到0.6rem */
|
||||
/* 隐藏滚动条但保持滚动功能 */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
.sidebar-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Webkit browsers */
|
||||
/* Webkit browsers（默认不滚动，保留兼容） */
|
||||
}
|
||||
|
||||
/* 展开态：子菜单不在导航项内部展开，改在独立面板展示（避免把“页面列表”挤出首屏） */
|
||||
.sidebar:not(.collapsed) .nav-item-wrapper > .submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 侧边栏：页面分类面板（容器本身可滚动，隐藏滚动条） */
|
||||
.sidebar-submenu-panel {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0 0 0.6rem;
|
||||
/* 移除顶部 padding，避免标题上方出现缝隙 */
|
||||
scrollbar-width: none;
|
||||
/* Firefox 隐藏滚动条 */
|
||||
}
|
||||
|
||||
.sidebar-submenu-panel:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-submenu-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Webkit 浏览器隐藏滚动条 */
|
||||
}
|
||||
|
||||
/* 面板内的 submenu 始终可见（不依赖 wrapper.expanded） */
|
||||
.sidebar-submenu-panel .submenu {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
margin-left: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* 折叠状态下的内容区域调整 */
|
||||
.sidebar.collapsed .sidebar-content {
|
||||
padding: 0 0.5rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
/* 隐藏滚动条 */
|
||||
}
|
||||
@@ -546,6 +581,108 @@ body.loaded .layout {
|
||||
/* 隐藏WebKit浏览器的滚动条 */
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-submenu-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 子菜单标题：默认隐藏（在导航栏内折叠时） */
|
||||
.submenu-header {
|
||||
display: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.8rem 1rem 0.6rem;
|
||||
margin-bottom: 0.2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 当子菜单在面板中显示时：显示标题并固定在顶部 */
|
||||
.sidebar-submenu-panel .submenu-header {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.2rem;
|
||||
/* 覆盖基础样式的 margin-bottom */
|
||||
background-color: var(--sidebar-bg);
|
||||
opacity: 1;
|
||||
/* 覆盖基础样式的半透明，确保背景完全不透明 */
|
||||
z-index: 1;
|
||||
/* 确保标题在滚动时覆盖下方内容 */
|
||||
}
|
||||
|
||||
/* 子菜单项样式优化 */
|
||||
.submenu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.6rem 1rem;
|
||||
color: var(--nav-item-color);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-normal);
|
||||
margin-bottom: 2px;
|
||||
font-size: 0.95rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submenu-item i {
|
||||
width: 1.4rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.submenu-item span {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 悬浮状态 */
|
||||
.submenu-item:hover {
|
||||
background-color: var(--secondary-bg);
|
||||
color: var(--text-bright);
|
||||
padding-left: 1.2rem; /* 悬浮时轻微右移增加动感 */
|
||||
}
|
||||
|
||||
.submenu-item:hover i {
|
||||
transform: scale(1.1);
|
||||
color: var(--accent-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 激活状态 */
|
||||
.submenu-item.active {
|
||||
background-color: rgba(var(--accent-rgb), 0.15);
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.submenu-item.active i {
|
||||
color: var(--accent-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 在激活状态左侧添加指示条 */
|
||||
.submenu-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
/* 折叠状态下的Logo文本 */
|
||||
.sidebar.collapsed .logo h1 {
|
||||
opacity: 0;
|
||||
@@ -561,8 +698,12 @@ body.loaded .layout {
|
||||
.nav-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
/* 增大按钮间距 */
|
||||
gap: 0;
|
||||
/* wrapper 之间不需要 gap，由 nav-item 的 margin 控制 */
|
||||
flex: 0 0 auto;
|
||||
/* 不伸缩，根据内容大小 */
|
||||
overflow: visible;
|
||||
/* 导航项不滚动，保持常驻显示 */
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -652,13 +793,23 @@ body.loaded .layout {
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 0.9rem;
|
||||
margin-bottom: 0.4rem;
|
||||
/* 导航按钮之间的间距 */
|
||||
color: var(--nav-item-color);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
|
||||
transition:
|
||||
background-color var(--transition-normal),
|
||||
color var(--transition-normal),
|
||||
box-shadow var(--transition-normal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item-wrapper:last-child .nav-item {
|
||||
margin-bottom: 0;
|
||||
/* 最后一个导航按钮不需要底部间距 */
|
||||
}
|
||||
|
||||
.nav-item .icon-container {
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
@@ -671,7 +822,9 @@ body.loaded .layout {
|
||||
|
||||
.nav-item .nav-text {
|
||||
flex: 1;
|
||||
transition: opacity var(--transition-normal), transform var(--transition-normal);
|
||||
transition:
|
||||
opacity var(--transition-normal),
|
||||
transform var(--transition-normal);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -768,11 +921,16 @@ body .content.expanded {
|
||||
|
||||
/* 仅在交互时启用布局相关过渡，避免首帧闪烁 */
|
||||
.with-anim .sidebar {
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
transition:
|
||||
width 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.with-anim .content {
|
||||
transition: background-color 0.3s ease, margin-left 0.3s ease, width 0.3s ease;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
margin-left 0.3s ease,
|
||||
width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 搜索框容器 - 固定在顶部 */
|
||||
@@ -842,12 +1000,16 @@ body .content.expanded {
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 16px var(--shadow-color);
|
||||
transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
|
||||
transition:
|
||||
background var(--transition-normal),
|
||||
border-color var(--transition-normal),
|
||||
box-shadow var(--transition-normal);
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
border-color: rgba(var(--accent-rgb), 0.55);
|
||||
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28),
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(var(--accent-rgb), 0.28),
|
||||
0 0 18px rgba(var(--accent-rgb), 0.18),
|
||||
0 6px 24px var(--shadow-color);
|
||||
}
|
||||
@@ -888,7 +1050,9 @@ body .content.expanded {
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: 1rem;
|
||||
transition: background-color var(--transition-normal), color var(--transition-normal);
|
||||
transition:
|
||||
background-color var(--transition-normal),
|
||||
color var(--transition-normal);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -940,7 +1104,10 @@ body .content.expanded {
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
transition: background var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
|
||||
transition:
|
||||
background var(--transition-normal),
|
||||
color var(--transition-normal),
|
||||
transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.search-engine-button:hover {
|
||||
@@ -1128,7 +1295,17 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
.welcome-section h3 {
|
||||
font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif);
|
||||
font-family: var(
|
||||
--font-body,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Noto Sans',
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif
|
||||
);
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
@@ -1185,11 +1362,13 @@ body .content.expanded {
|
||||
|
||||
@keyframes glow {
|
||||
from {
|
||||
filter: drop-shadow(0 0 2px rgba(118, 148, 185, 0.2)) drop-shadow(0 0 4px rgba(168, 85, 247, 0.2));
|
||||
filter: drop-shadow(0 0 2px rgba(118, 148, 185, 0.2))
|
||||
drop-shadow(0 0 4px rgba(168, 85, 247, 0.2));
|
||||
}
|
||||
|
||||
to {
|
||||
filter: drop-shadow(0 0 4px rgba(118, 148, 185, 0.4)) drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
|
||||
filter: drop-shadow(0 0 4px rgba(118, 148, 185, 0.4))
|
||||
drop-shadow(0 0 8px rgba(168, 85, 247, 0.4));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1206,7 +1385,9 @@ body .content.expanded {
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 20px var(--shadow-color);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: background var(--transition-normal), box-shadow var(--transition-normal);
|
||||
transition:
|
||||
background var(--transition-normal),
|
||||
box-shadow var(--transition-normal);
|
||||
}
|
||||
|
||||
/* 分类标题容器 */
|
||||
@@ -1218,8 +1399,8 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 标题前图标固定宽度：避免不同图标宽度导致标题文本不对齐 */
|
||||
.category-header [data-editable="category-name"]>i,
|
||||
.group-header [data-editable="group-name"]>i {
|
||||
.category-header [data-editable='category-name'] > i,
|
||||
.group-header [data-editable='group-name'] > i {
|
||||
width: 1.25em;
|
||||
min-width: 1.25em;
|
||||
text-align: center;
|
||||
@@ -1233,27 +1414,27 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 仅可折叠的标题显示交互态 */
|
||||
.category-header[data-toggle="category"],
|
||||
.group-header[data-toggle="group"] {
|
||||
.category-header[data-toggle='category'],
|
||||
.group-header[data-toggle='group'] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.category-header[data-toggle="category"]:hover {
|
||||
.category-header[data-toggle='category']:hover {
|
||||
transform: translateY(-2px);
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
|
||||
}
|
||||
|
||||
.group-header[data-toggle="group"]:hover {
|
||||
.group-header[data-toggle='group']:hover {
|
||||
transform: translateY(-2px);
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
|
||||
}
|
||||
|
||||
.category-header[data-toggle="category"]:active {
|
||||
.category-header[data-toggle='category']:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.group-header[data-toggle="group"]:active {
|
||||
.group-header[data-toggle='group']:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@@ -1268,13 +1449,13 @@ body .content.expanded {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.category h2>i {
|
||||
.category h2 > i {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.3rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.category-header[data-toggle="category"]:hover h2>i {
|
||||
.category-header[data-toggle='category']:hover h2 > i {
|
||||
transform: scale(1.1);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
@@ -1320,7 +1501,7 @@ body .content.expanded {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.category-level-2 .category-header h3>i {
|
||||
.category-level-2 .category-header h3 > i {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
@@ -1367,17 +1548,17 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 嵌套层级间距：仅在同级相邻时增加间距，避免首项被额外下推 */
|
||||
.subcategories-container>.category-level-2+.category-level-2 {
|
||||
.subcategories-container > .category-level-2 + .category-level-2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.groups-container>.group-level-3+.group-level-3,
|
||||
.groups-container>.category-level-3+.category-level-3 {
|
||||
.groups-container > .group-level-3 + .group-level-3,
|
||||
.groups-container > .category-level-3 + .category-level-3 {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.subgroups-container>.group-level-4+.group-level-4,
|
||||
.subcategories-container>.category-level-4+.category-level-4 {
|
||||
.subgroups-container > .group-level-4 + .group-level-4,
|
||||
.subcategories-container > .category-level-4 + .category-level-4 {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
@@ -1406,7 +1587,7 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 移除悬停时的缩放效果，保持简洁 */
|
||||
.category-level-2 .category-header:hover h3>i,
|
||||
.category-level-2 .category-header:hover h3 > i,
|
||||
.group-level-3 .group-header:hover h4 i,
|
||||
.category-level-3 .category-header:hover h4 i,
|
||||
.group-level-4 .group-header:hover h5 i,
|
||||
@@ -1429,35 +1610,36 @@ body .content.expanded {
|
||||
|
||||
.category-header .toggle-icon i,
|
||||
.group-header .toggle-icon i {
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
color 0.3s ease;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
/* 展开态：图标旋转 180°（类似参考样式1） */
|
||||
.category:not(.collapsed)>.category-header .toggle-icon i,
|
||||
.group:not(.collapsed)>.group-header .toggle-icon i {
|
||||
.category:not(.collapsed) > .category-header .toggle-icon i,
|
||||
.group:not(.collapsed) > .group-header .toggle-icon i {
|
||||
transform: rotate(180deg);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.category-header[data-toggle="category"]:hover .toggle-icon i,
|
||||
.group-header[data-toggle="group"]:hover .toggle-icon i {
|
||||
.category-header[data-toggle='category']:hover .toggle-icon i,
|
||||
.group-header[data-toggle='group']:hover .toggle-icon i {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* 分类/分组折叠图标：桌面端默认隐藏，悬停/收起时显示，避免按钮过多 */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
|
||||
.category-header .toggle-icon,
|
||||
.group-header .toggle-icon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.category-header[data-toggle="category"]:hover .toggle-icon,
|
||||
.category.collapsed>.category-header .toggle-icon,
|
||||
.group-header[data-toggle="group"]:hover .toggle-icon,
|
||||
.group.collapsed>.group-header .toggle-icon {
|
||||
.category-header[data-toggle='category']:hover .toggle-icon,
|
||||
.category.collapsed > .category-header .toggle-icon,
|
||||
.group-header[data-toggle='group']:hover .toggle-icon,
|
||||
.group.collapsed > .group-header .toggle-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1466,7 +1648,8 @@ body .content.expanded {
|
||||
.category-content,
|
||||
.group-content {
|
||||
overflow: visible;
|
||||
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transition:
|
||||
max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
max-height: 5000px;
|
||||
opacity: 1;
|
||||
@@ -1481,22 +1664,22 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 收起状态下调整header的下边距 */
|
||||
.category.collapsed>.category-header {
|
||||
.category.collapsed > .category-header {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.category-level-2.collapsed>.category-header {
|
||||
.category-level-2.collapsed > .category-header {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.group-level-3.collapsed>.group-header,
|
||||
.category-level-3.collapsed>.category-header {
|
||||
.group-level-3.collapsed > .group-header,
|
||||
.category-level-3.collapsed > .category-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-level-4.collapsed>.group-header,
|
||||
.category-level-4.collapsed>.category-header {
|
||||
.group-level-4.collapsed > .group-header,
|
||||
.category-level-4.collapsed > .category-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -1518,14 +1701,14 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 当分类同时包含子分类和站点时的样式优化 */
|
||||
.category-content .subcategories-container+.sites-grid {
|
||||
.category-content .subcategories-container + .sites-grid {
|
||||
margin-top: 1.2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* 当分类同时包含分组和站点时的样式优化 */
|
||||
.category-content .groups-container+.sites-grid {
|
||||
.category-content .groups-container + .sites-grid {
|
||||
margin-top: 1.2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
@@ -1565,17 +1748,17 @@ body .content.expanded {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.subcategories-container>.category-level-2+.category-level-2 {
|
||||
.subcategories-container > .category-level-2 + .category-level-2 {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.groups-container>.group-level-3+.group-level-3,
|
||||
.groups-container>.category-level-3+.category-level-3 {
|
||||
.groups-container > .group-level-3 + .group-level-3,
|
||||
.groups-container > .category-level-3 + .category-level-3 {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.subgroups-container>.group-level-4+.group-level-4,
|
||||
.subcategories-container>.category-level-4+.category-level-4 {
|
||||
.subgroups-container > .group-level-4 + .group-level-4,
|
||||
.subcategories-container > .category-level-4 + .category-level-4 {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
@@ -1679,7 +1862,9 @@ body .content.expanded {
|
||||
font-size: 1.15rem;
|
||||
color: var(--nav-item-color);
|
||||
opacity: 0.85;
|
||||
transition: color 0.3s ease, opacity 0.3s ease;
|
||||
transition:
|
||||
color 0.3s ease,
|
||||
opacity 0.3s ease;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@@ -1759,12 +1944,20 @@ body .content.expanded {
|
||||
|
||||
/* 网站卡片样式 */
|
||||
.site-card {
|
||||
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
var(--site-card-bg-gradient-1),
|
||||
var(--site-card-bg-gradient-2)
|
||||
);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0.85rem 1rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
|
||||
transition:
|
||||
background var(--transition-normal),
|
||||
transform var(--transition-normal),
|
||||
box-shadow var(--transition-normal),
|
||||
border-color var(--transition-normal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
@@ -1806,7 +1999,7 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* articles：文章元信息（日期 + 来源） */
|
||||
.site-card[data-type="article"] .site-card-meta {
|
||||
.site-card[data-type='article'] .site-card-meta {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--nav-item-color);
|
||||
@@ -1816,35 +2009,35 @@ body .content.expanded {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] .site-card-meta-sep {
|
||||
.site-card[data-type='article'] .site-card-meta-sep {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* articles：文章卡片布局（首行：图标+标题；下方：时间/来源 + 简介 全宽对齐） */
|
||||
.site-card[data-type="article"] {
|
||||
.site-card[data-type='article'] {
|
||||
display: block;
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] .article-card-header {
|
||||
.site-card[data-type='article'] .article-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] .article-card-title {
|
||||
.site-card[data-type='article'] .article-card-title {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] .article-card-body {
|
||||
.site-card[data-type='article'] .article-card-body {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] h3 {
|
||||
.site-card[data-type='article'] h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] p {
|
||||
.site-card[data-type='article'] p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1867,14 +2060,14 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* articles：标题/描述允许两行显示（更适合多列宽卡片，也适用于搜索结果页） */
|
||||
.site-card[data-type="article"] h3 {
|
||||
.site-card[data-type='article'] h3 {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.site-card[data-type="article"] p {
|
||||
.site-card[data-type='article'] p {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
@@ -1897,7 +2090,9 @@ body .content.expanded {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.site-card .site-icon {
|
||||
@@ -1921,7 +2116,9 @@ body .content.expanded {
|
||||
height: 1.8rem;
|
||||
border-radius: var(--radius-sm);
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.site-card .icon-placeholder,
|
||||
@@ -1935,7 +2132,9 @@ body .content.expanded {
|
||||
text-align: center;
|
||||
line-height: 1.8rem;
|
||||
font-size: 1.5rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@@ -2099,7 +2298,11 @@ body .content.expanded {
|
||||
|
||||
/* 添加网站按钮 */
|
||||
.add-site-btn {
|
||||
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
var(--site-card-bg-gradient-1),
|
||||
var(--site-card-bg-gradient-2)
|
||||
);
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
@@ -2352,7 +2555,10 @@ body .content.expanded {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding-top: calc(var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
|
||||
padding-top: calc(env(safe-area-inset-top) + var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
|
||||
padding-top: calc(
|
||||
env(safe-area-inset-top) + var(--spacing-md) + var(--mobile-top-button-size) +
|
||||
var(--spacing-sm)
|
||||
);
|
||||
/* 缩短分类卡片与页面边缘的左右留白，扩大分类卡片可用宽度 */
|
||||
padding-left: calc(var(--spacing-sm) + var(--spacing-xs));
|
||||
padding-right: calc(var(--spacing-sm) + var(--spacing-xs));
|
||||
@@ -2428,7 +2634,10 @@ body .content.expanded {
|
||||
/* 给左侧菜单按钮留出空间 */
|
||||
left: calc(var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
|
||||
right: var(--spacing-md);
|
||||
left: calc(env(safe-area-inset-left) + var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
|
||||
left: calc(
|
||||
env(safe-area-inset-left) + var(--spacing-md) + var(--mobile-top-button-size) +
|
||||
var(--spacing-sm)
|
||||
);
|
||||
right: calc(env(safe-area-inset-right) + var(--spacing-md));
|
||||
width: auto;
|
||||
padding: 0;
|
||||
@@ -2593,7 +2802,6 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.welcome-section {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -2608,7 +2816,10 @@ body .content.expanded {
|
||||
.search-container {
|
||||
left: calc(var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
|
||||
right: var(--spacing-md);
|
||||
left: calc(env(safe-area-inset-left) + var(--spacing-md) + var(--mobile-top-button-size) + var(--spacing-sm));
|
||||
left: calc(
|
||||
env(safe-area-inset-left) + var(--spacing-md) + var(--mobile-top-button-size) +
|
||||
var(--spacing-sm)
|
||||
);
|
||||
right: calc(env(safe-area-inset-right) + var(--spacing-md));
|
||||
}
|
||||
|
||||
@@ -2777,23 +2988,23 @@ body .content.expanded {
|
||||
}
|
||||
|
||||
/* 搜索结果页：按来源页面复用对应网格规则（方案 2：复用原卡片 DOM） */
|
||||
#search-results [data-section="projects"] .sites-grid {
|
||||
#search-results [data-section='projects'] .sites-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#search-results [data-section="articles"] .sites-grid {
|
||||
#search-results [data-section='articles'] .sites-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#search-results [data-section="articles"] .sites-grid {
|
||||
#search-results [data-section='articles'] .sites-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#search-results [data-section="articles"] .sites-grid {
|
||||
#search-results [data-section='articles'] .sites-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@@ -2859,7 +3070,9 @@ body .content.expanded {
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--nav-item-color);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast), transform var(--transition-fast);
|
||||
transition:
|
||||
color var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-icon:hover {
|
||||
@@ -2892,7 +3105,10 @@ body .content.expanded {
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: var(--sidebar-bg);
|
||||
/* 使用变量 */
|
||||
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-footer .copyright {
|
||||
@@ -2925,18 +3141,6 @@ body .content.expanded {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 子菜单切换图标 */
|
||||
.submenu-toggle {
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 子菜单展开状态图标旋转 */
|
||||
.nav-item-wrapper.expanded .submenu-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 子菜单容器 */
|
||||
.submenu {
|
||||
max-height: 0;
|
||||
@@ -2949,19 +3153,10 @@ body .content.expanded {
|
||||
|
||||
/* 子菜单展开状态 */
|
||||
.nav-item-wrapper.expanded .submenu {
|
||||
max-height: 300px;
|
||||
/* 设置合理的最大高度 */
|
||||
overflow-y: scroll;
|
||||
/* 改为scroll确保始终能滚动 */
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
scrollbar-width: none;
|
||||
/* Firefox隐藏滚动条 */
|
||||
}
|
||||
|
||||
/* 为WebKit浏览器隐藏滚动条 */
|
||||
.nav-item-wrapper.expanded .submenu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 子菜单项样式 */
|
||||
@@ -3066,10 +3261,6 @@ body .content.expanded {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .submenu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 移动端样式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar .submenu {
|
||||
|
||||
@@ -2,7 +2,7 @@ const nested = require('../nested');
|
||||
|
||||
module.exports = function initRouting(state, dom, api) {
|
||||
const { ui, search } = api;
|
||||
const { searchInput, content } = dom;
|
||||
const { searchInput, content, sidebar } = dom;
|
||||
|
||||
function showPage(pageId, skipSearchReset = false) {
|
||||
if (state.currentPageId === pageId && !skipSearchReset && !state.isInitialLoad) return;
|
||||
@@ -52,6 +52,83 @@ module.exports = function initRouting(state, dom, api) {
|
||||
const normalizeText = (value) =>
|
||||
String(value === null || value === undefined ? '' : value).trim();
|
||||
|
||||
// 侧边栏子菜单面板：将“当前页面的分类列表”放到独立区域滚动，避免挤压“页面列表”
|
||||
const submenuPanel = document.querySelector('.sidebar-submenu-panel');
|
||||
const submenuByPageId = new Map();
|
||||
let submenuPanelPageId = '';
|
||||
|
||||
navItemWrappers.forEach((wrapper) => {
|
||||
const nav = wrapper.querySelector('.nav-item');
|
||||
const pageId = nav ? normalizeText(nav.getAttribute('data-page')) : '';
|
||||
const submenu = wrapper.querySelector('.submenu');
|
||||
if (!pageId || !submenu) return;
|
||||
submenuByPageId.set(pageId, { wrapper, submenu });
|
||||
});
|
||||
|
||||
const isSidebarCollapsed = () => Boolean(sidebar && sidebar.classList.contains('collapsed'));
|
||||
|
||||
const clearSubmenuPanel = () => {
|
||||
if (!submenuPanel) return;
|
||||
|
||||
const pageId = normalizeText(submenuPanelPageId);
|
||||
if (pageId) {
|
||||
const entry = submenuByPageId.get(pageId);
|
||||
if (entry && entry.wrapper && entry.submenu) {
|
||||
entry.wrapper.appendChild(entry.submenu);
|
||||
}
|
||||
}
|
||||
|
||||
submenuPanel.textContent = '';
|
||||
submenuPanelPageId = '';
|
||||
};
|
||||
|
||||
const renderSubmenuPanelForPage = (pageId) => {
|
||||
if (!submenuPanel) return;
|
||||
|
||||
const id = normalizeText(pageId);
|
||||
if (!id) {
|
||||
clearSubmenuPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
// 折叠态：子菜单使用 hover 弹出，不使用面板
|
||||
if (isSidebarCollapsed()) {
|
||||
clearSubmenuPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
const entry = submenuByPageId.get(id);
|
||||
if (!entry || !entry.wrapper || !entry.submenu) {
|
||||
clearSubmenuPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
// 仅当 wrapper 处于 expanded 时展示（与 UI 行为保持一致）
|
||||
if (!entry.wrapper.classList.contains('expanded')) {
|
||||
clearSubmenuPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
if (normalizeText(submenuPanelPageId) === id && submenuPanel.contains(entry.submenu)) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearSubmenuPanel();
|
||||
submenuPanel.appendChild(entry.submenu);
|
||||
submenuPanelPageId = id;
|
||||
};
|
||||
|
||||
// 监听侧边栏折叠状态变化：折叠时归还子菜单；展开时渲染当前页子菜单
|
||||
if (sidebar && typeof MutationObserver === 'function') {
|
||||
const observer = new MutationObserver(() => {
|
||||
const activeNav = document.querySelector('.nav-item.active');
|
||||
const activePageId = activeNav ? normalizeText(activeNav.getAttribute('data-page')) : '';
|
||||
renderSubmenuPanelForPage(activePageId);
|
||||
});
|
||||
|
||||
observer.observe(sidebar, { attributes: true, attributeFilter: ['class'] });
|
||||
}
|
||||
|
||||
const isValidPageId = (pageId) => {
|
||||
const id = normalizeText(pageId);
|
||||
if (!id) return false;
|
||||
@@ -119,10 +196,13 @@ module.exports = function initRouting(state, dom, api) {
|
||||
navItemWrappers.forEach((wrapper) => {
|
||||
const nav = wrapper.querySelector('.nav-item');
|
||||
if (!nav) return;
|
||||
const hasSubmenu = Boolean(wrapper.querySelector('.submenu'));
|
||||
const pageId = normalizeText(nav.getAttribute('data-page'));
|
||||
const hasSubmenu = pageId ? submenuByPageId.has(pageId) : false;
|
||||
const shouldExpand = hasSubmenu && nav === activeItem;
|
||||
wrapper.classList.toggle('expanded', shouldExpand);
|
||||
});
|
||||
|
||||
renderSubmenuPanelForPage(id);
|
||||
};
|
||||
|
||||
const escapeSelector = (value) => {
|
||||
@@ -270,17 +350,6 @@ module.exports = function initRouting(state, dom, api) {
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
// 初始展开当前页面的子菜单：高亮项如果有子菜单，需要同步展开
|
||||
document.querySelectorAll('.nav-item.active').forEach((activeItem) => {
|
||||
const activeWrapper = activeItem.closest('.nav-item-wrapper');
|
||||
if (!activeWrapper) return;
|
||||
|
||||
const hasSubmenu = activeWrapper.querySelector('.submenu');
|
||||
if (hasSubmenu) {
|
||||
activeWrapper.classList.add('expanded');
|
||||
}
|
||||
});
|
||||
|
||||
// 导航项点击效果
|
||||
navItems.forEach((item) => {
|
||||
item.addEventListener('click', (e) => {
|
||||
@@ -290,33 +359,20 @@ module.exports = function initRouting(state, dom, api) {
|
||||
|
||||
// 获取当前项的父级 wrapper
|
||||
const wrapper = item.closest('.nav-item-wrapper');
|
||||
const hasSubmenu = wrapper && wrapper.querySelector('.submenu');
|
||||
const pageId = normalizeText(item.getAttribute('data-page'));
|
||||
const hasSubmenu = Boolean(wrapper && pageId && submenuByPageId.has(pageId));
|
||||
|
||||
if (!pageId) return;
|
||||
|
||||
// 处理子菜单展开/折叠
|
||||
if (hasSubmenu) {
|
||||
// 如果点击的导航项已经激活且有子菜单，则切换子菜单展开状态
|
||||
if (item.classList.contains('active')) {
|
||||
wrapper.classList.toggle('expanded');
|
||||
if (hasSubmenu && item.classList.contains('active')) {
|
||||
// 当前页：保持子菜单展开状态，不做任何操作
|
||||
return;
|
||||
} else {
|
||||
// 关闭所有已展开的子菜单
|
||||
navItemWrappers.forEach((navWrapper) => {
|
||||
if (navWrapper !== wrapper) {
|
||||
navWrapper.classList.remove('expanded');
|
||||
}
|
||||
});
|
||||
|
||||
// 展开当前子菜单
|
||||
wrapper.classList.add('expanded');
|
||||
}
|
||||
// 切换页面：统一由 setActiveNavByPageId 管理 active/expanded
|
||||
setActiveNavByPageId(pageId);
|
||||
}
|
||||
|
||||
// 激活导航项
|
||||
navItems.forEach((nav) => {
|
||||
nav.classList.toggle('active', nav === item);
|
||||
});
|
||||
|
||||
const pageId = item.getAttribute('data-page');
|
||||
if (pageId) {
|
||||
const prevPageId = state.currentPageId;
|
||||
showPage(pageId);
|
||||
|
||||
@@ -329,7 +385,6 @@ module.exports = function initRouting(state, dom, api) {
|
||||
if (ui.isMobile() && state.isSidebarOpen && !hasSubmenu) {
|
||||
ui.closeAllPanels();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -352,10 +407,8 @@ module.exports = function initRouting(state, dom, api) {
|
||||
// 激活当前子菜单项
|
||||
item.classList.add('active');
|
||||
|
||||
// 激活相应的导航项
|
||||
navItems.forEach((nav) => {
|
||||
nav.classList.toggle('active', nav.getAttribute('data-page') === pageId);
|
||||
});
|
||||
// 激活导航项并同步子菜单展开状态
|
||||
setActiveNavByPageId(pageId);
|
||||
|
||||
// 显示对应页面
|
||||
showPage(pageId);
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
<i class="{{icon}}"></i>
|
||||
</div>
|
||||
<span class="nav-text" data-editable="nav-item-name">{{name}}</span>
|
||||
{{#if submenu}}<i class="fas fa-chevron-down submenu-toggle"></i>{{/if}}
|
||||
</a>
|
||||
{{#if submenu}}
|
||||
<div class="submenu">
|
||||
<div class="submenu-header">{{name}}</div>
|
||||
{{#each submenu}}
|
||||
<a href="?page={{../id}}#{{#if slug}}{{slug}}{{else}}{{name}}{{/if}}" class="submenu-item" data-page="{{../id}}" data-category="{{name}}" data-category-id="{{#if slug}}{{slug}}{{else}}{{name}}{{/if}}">
|
||||
<i class="{{icon}}"></i>
|
||||
|
||||
30
test/sidebar-submenu-panel-and-theme-mode.node-test.js
Normal file
30
test/sidebar-submenu-panel-and-theme-mode.node-test.js
Normal file
@@ -0,0 +1,30 @@
|
||||
const test = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
|
||||
test('默认布局：应包含侧边栏分类面板容器（避免子菜单过长挤压页面列表）', () => {
|
||||
const repoRoot = path.resolve(__dirname, '..');
|
||||
const layoutPath = path.join(repoRoot, 'templates', 'layouts', 'default.hbs');
|
||||
const content = fs.readFileSync(layoutPath, 'utf8');
|
||||
|
||||
assert.ok(
|
||||
content.includes('sidebar-submenu-panel'),
|
||||
'templates/layouts/default.hbs 应包含 sidebar-submenu-panel 容器'
|
||||
);
|
||||
assert.ok(
|
||||
content.includes('data-container="sidebar-submenu"'),
|
||||
'sidebar-submenu-panel 容器应包含 data-container="sidebar-submenu"'
|
||||
);
|
||||
});
|
||||
|
||||
test('默认布局：应输出 data-theme-mode，支持 dark/light/system 默认模式', () => {
|
||||
const repoRoot = path.resolve(__dirname, '..');
|
||||
const layoutPath = path.join(repoRoot, 'templates', 'layouts', 'default.hbs');
|
||||
const content = fs.readFileSync(layoutPath, 'utf8');
|
||||
|
||||
assert.ok(
|
||||
content.includes('data-theme-mode='),
|
||||
'templates/layouts/default.hbs 应输出 data-theme-mode 属性'
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user