chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 微调ui布局

Browse Source
This commit is contained in:
rbetree
2025-12-22 22:43:14 +08:00
parent 03b743e337
commit ba78c8e564
6 changed files with 204 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/menav.svg
View File

@@ -2,5 +2,5 @@
<!-- 黑色的字母 M -->
<path d="M 22 78 L 22 22 L 34 22 L 50 48 L 66 22 L 78 22 L 78 78 L 66 78 L 66 45 L 55 62 L 45 62 L 34 45 L 34 78 Z" fill="#1A1B1E"/>
<!-- 蓝色的向上箭头 -->
<path d="M 45 70 L 45 45 L 36 48 L 50 28 L 64 48 L 55 45 L 55 70 Z" fill="#00a9e0"/>
<path d="M 45 70 L 45 45 L 36 48 L 50 28 L 64 48 L 55 45 L 55 70 Z" fill="#7694B9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 353 B

After

Width:  |  Height:  |  Size: 353 B

206
assets/style.css
View File

@@ -14,17 +14,17 @@
--secondary-bg: #3a3b3f;
--border-color: rgba(255, 255, 255, 0.05);
--shadow-color: rgba(0, 0, 0, 0.15);
--highlight-bg: rgba(74, 158, 255, 0.3);
--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: #4a9eff;
--accent-hover: #3a8eef;
--accent-color: #7694B9;
--accent-hover: #6684A9;
--nav-item-color: #a1a2a5;
--success-color: #4caf50;
--error-color: #f44336;
--white-color: #ffffff;
--gradient-color: linear-gradient(135deg, #4a9eff 0%, #a855f7 50%, #ff6b6b 100%);
--gradient-color-simple: linear-gradient(135deg, #4a9eff 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;
@@ -69,17 +69,17 @@ body.light-theme {
--secondary-bg: #d9d9d4;
--border-color: rgba(0, 0, 0, 0.08);
--shadow-color: rgba(0, 0, 0, 0.1);
--highlight-bg: rgba(74, 158, 255, 0.15);
--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: #4a9eff;
--accent-hover: #3a8eef;
--accent-color: #7694B9;
--accent-hover: #6684A9;
--nav-item-color: #666666;
--success-color: #4caf50;
--error-color: #f44336;
--white-color: #ffffff;
--gradient-color: linear-gradient(135deg, #4a9eff 0%, #a855f7 50%, #ff6b6b 100%);
--gradient-color-simple: linear-gradient(135deg, #4a9eff 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;
}
@@ -364,7 +364,6 @@ body.loaded .layout {
padding: 1.2rem 1.2rem 0.6rem; /* 调整上下padding更紧凑 */
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden; /* 防止内容溢出 */
position: relative; /* 添加相对定位，作为按钮的参考 */
height: 3.75rem; /* 固定高度 60px */
@@ -372,6 +371,29 @@ body.loaded .layout {
transition: padding 0.3s ease; /* 添加padding过渡，避免突变 */
}
.logo-brand {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
flex: 1;
padding-right: 2.2rem; /* 预留右侧折叠按钮空间 */
}
.logo-brand h1 {
padding-left: 0;
}
.logo-image {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.sidebar.collapsed .logo-image {
display: none;
}
.logo h1 {
font-size: 1.4rem;
color: var(--text-bright);
@@ -714,6 +736,11 @@ body .content.expanded {
position: relative;
width: 100%;
max-width: 600px;
--search-control-size: 32px;
--search-control-gap: 0.4rem;
--search-toggle-right: 0.8rem;
--search-icon-right: calc(var(--search-toggle-right) + var(--search-control-size) + var(--search-control-gap));
--search-indicator-right: calc(var(--search-icon-right) + var(--search-control-size));
background: rgba(var(--card-bg-rgb), 0.65);
border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
@@ -731,7 +758,7 @@ body .content.expanded {
.search-box::after {
content: '';
position: absolute;
right: 4rem;
right: var(--search-indicator-right);
top: 50%;
transform: translateY(-50%);
width: 6px;
@@ -754,7 +781,7 @@ body .content.expanded {
.search-box input {
width: 100%;
padding: var(--spacing-md) 6rem var(--spacing-md) var(--spacing-lg); /* 扩大右侧内边距，给左移的点留空间 */
padding: var(--spacing-md) calc(var(--search-indicator-right) + 1rem) var(--spacing-md) var(--spacing-lg);
border: none;
border-radius: var(--radius-lg);
background-color: transparent;
@@ -798,11 +825,11 @@ body .content.expanded {
/* 搜索图标和搜索引擎切换图标位置调整 */
.search-box .search-icon {
right: 2.0rem;
right: var(--search-icon-right);
cursor: pointer;
transition: all 0.3s ease;
width: 32px;
height: 32px;
width: var(--search-control-size);
height: var(--search-control-size);
display: flex;
align-items: center;
justify-content: center;
@@ -814,11 +841,11 @@ body .content.expanded {
.search-box.dropdown-open .search-engine-toggle { transform: translateY(-50%) rotate(180deg); }
.search-box .search-engine-toggle {
right: 0.8rem;
right: var(--search-toggle-right);
cursor: pointer;
font-size: 0.8rem;
width: 32px;
height: 32px;
width: var(--search-control-size);
height: var(--search-control-size);
display: flex;
align-items: center;
justify-content: center;
@@ -924,7 +951,7 @@ body .content.expanded {
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
text-shadow: 0 0 20px rgba(74, 158, 255, 0.1);
text-shadow: 0 0 20px rgba(118, 148, 185, 0.1);
animation: glow 2s ease-in-out infinite alternate;
}
@@ -950,11 +977,11 @@ body .content.expanded {
@keyframes glow {
from {
filter: drop-shadow(0 0 2px rgba(74, 158, 255, 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(74, 158, 255, 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));
}
}
@@ -975,21 +1002,27 @@ body .content.expanded {
transition: background var(--transition-normal), box-shadow var(--transition-normal);
}
/* 分类标题容器 - 添加交互效果 */
/* 分类标题容器 */
.category-header {
cursor: pointer;
border-radius: var(--radius-md);
padding: 0.5rem;
margin: -0.5rem -0.5rem 1rem -0.5rem;
transition: all var(--transition-normal);
}
.category-header:hover {
/* 仅可折叠的标题显示交互态 */
.category-header[data-toggle="category"],
.group-header[data-toggle="group"] {
cursor: pointer;
user-select: none;
}
.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));
}
.category-header:active {
.category-header[data-toggle="category"]:active {
transform: translateY(0);
}
@@ -1004,13 +1037,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:hover h2 i {
.category-header[data-toggle="category"]:hover h2 > i {
transform: scale(1.1);
color: var(--accent-hover);
}
@@ -1033,28 +1066,22 @@ body .content.expanded {
/* 层级2: 子分类 */
.category-level-2 {
margin-top: 2rem;
margin-bottom: 1.5rem;
margin-top: 0;
margin-bottom: 0;
padding-left: 0.5rem;
border-left: none;
}
/* 层级2: 标题样式 */
.category-level-2 .category-header {
margin: 0 0 1rem 0;
padding: 0.5rem 0;
margin: 0 -0.5rem 1rem -0.5rem;
padding: 0.5rem;
background: none;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
}
.category-level-2 .category-header:hover {
background: none;
transform: none;
border-radius: var(--radius-md);
}
.category-level-2 .category-header h3 {
font-size: 1.3rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-bright);
display: flex;
@@ -1062,7 +1089,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;
@@ -1070,8 +1097,8 @@ body .content.expanded {
/* 层级3: 分组 */
.group-level-3, .category-level-3 {
margin-top: 1.5rem;
margin-bottom: 1rem;
margin-top: 0;
margin-bottom: 0;
padding-left: 0.5rem;
}
@@ -1091,7 +1118,7 @@ body .content.expanded {
.group-level-3 .group-header h4,
.category-level-3 .category-header h4 {
font-size: 1.1rem;
font-size: 1rem;
font-weight: 500;
color: var(--text-color);
display: flex;
@@ -1107,11 +1134,26 @@ body .content.expanded {
/* 层级4: 子分组 */
.group-level-4, .category-level-4 {
margin-top: 1rem;
margin-bottom: 0.8rem;
margin-top: 0;
margin-bottom: 0;
padding-left: 0.5rem;
}
/* 嵌套层级间距：仅在同级相邻时增加间距，避免首项被额外下推 */
.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 {
margin-top: 0.8rem;
}
.subgroups-container > .group-level-4 + .group-level-4,
.subcategories-container > .category-level-4 + .category-level-4 {
margin-top: 0.6rem;
}
/* 层级4: 标题样式 */
.group-level-4 .group-header,
.category-level-4 .category-header {
@@ -1128,7 +1170,7 @@ body .content.expanded {
.group-level-4 .group-header h5,
.category-level-4 .category-header h5 {
font-size: 0.95rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
display: flex;
@@ -1143,7 +1185,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,
@@ -1152,16 +1194,33 @@ body .content.expanded {
}
/* 切换图标样式 */
.toggle-icon {
display: inline-block;
.category-header .toggle-icon,
.group-header .toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: auto;
transition: transform 0.3s ease;
color: var(--text-muted);
font-size: 0.9rem;
}
.category-header:hover .toggle-icon,
.group-header:hover .toggle-icon {
.category-header .toggle-icon i,
.group-header .toggle-icon i {
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 {
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 {
color: var(--accent-color);
}
@@ -1202,10 +1261,7 @@ body .content.expanded {
margin-bottom: 0;
}
.category.collapsed .toggle-icon i,
.group.collapsed .toggle-icon i {
transform: rotate(-90deg);
}
/* 收起态默认向下，无需额外旋转（保持 0deg） */
/* 空内容提示 */
.empty-content {
@@ -1224,22 +1280,22 @@ body .content.expanded {
/* 当分类同时包含子分类和站点时的样式优化 */
.category-content .subcategories-container + .sites-grid {
margin-top: 2rem;
padding-top: 1.5rem;
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
/* 当分类同时包含分组和站点时的样式优化 */
.category-content .groups-container + .sites-grid {
margin-top: 2rem;
padding-top: 1.5rem;
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
/* 子分类容器底部间距调整 */
.category-content .subcategories-container:not(:last-child),
.category-content .groups-container:not(:last-child) {
margin-bottom: 1rem;
margin-bottom: 0.6rem;
}
/* 确保嵌套的网站网格正确显示 */
@@ -1248,7 +1304,7 @@ body .content.expanded {
.category-level-3 .sites-grid,
.group-level-4 .sites-grid,
.category-level-4 .sites-grid {
margin-top: 1rem;
margin-top: 0;
gap: var(--spacing-md);
/* 保持与顶层一致的网格布局 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -1257,20 +1313,30 @@ body .content.expanded {
/* 响应式设计 - 嵌套结构 */
@media (max-width: 768px) {
.category-level-2 {
margin-top: 1.5rem;
margin-bottom: 1rem;
padding-left: 0;
}
.group-level-3, .category-level-3 {
margin-top: 1.2rem;
padding-left: 0;
}
.group-level-4, .category-level-4 {
margin-top: 1rem;
padding-left: 0;
}
.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 {
margin-top: 0.7rem;
}
.subgroups-container > .group-level-4 + .group-level-4,
.subcategories-container > .category-level-4 + .category-level-4 {
margin-top: 0.55rem;
}
.category-level-2 .sites-grid,
.group-level-3 .sites-grid,
@@ -1656,7 +1722,7 @@ body .content.expanded {
outline: none;
background-color: var(--secondary-bg);
border-color: var(--accent-color);
box-shadow: 0 2px 8px rgba(74, 158, 255, 0.15);
box-shadow: 0 2px 8px rgba(118, 148, 185, 0.15);
}
.form-group input::placeholder {
@@ -1691,7 +1757,7 @@ body .content.expanded {
.btn-primary:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 158, 255, 0.2);
box-shadow: 0 4px 12px rgba(118, 148, 185, 0.2);
}
.btn-secondary {
@@ -2203,7 +2269,7 @@ body .content.expanded {
}
.social-icon:focus-visible {
outline: 2px solid rgba(74, 158, 255, 0.35);
outline: 2px solid rgba(118, 148, 185, 0.35);
outline-offset: 2px;
}

47
src/script.js
View File

@@ -426,10 +426,32 @@ window.MeNav = {
};
// 多层级嵌套书签功能
function getCollapsibleNestedContainers(root) {
if (!root) return [];
const headers = root.querySelectorAll(
'.category > .category-header[data-toggle="category"], .group > .group-header[data-toggle="group"]'
);
return Array.from(headers).map(header => header.parentElement).filter(Boolean);
}
function isNestedContainerCollapsible(container) {
if (!container) return false;
if (container.classList.contains('category')) {
return Boolean(container.querySelector(':scope > .category-header[data-toggle="category"]'));
}
if (container.classList.contains('group')) {
return Boolean(container.querySelector(':scope > .group-header[data-toggle="group"]'));
}
return false;
}
window.MeNav.expandAll = function() {
const activePage = document.querySelector('.page.active');
if (activePage) {
activePage.querySelectorAll('.category.collapsed, .group.collapsed').forEach(element => {
getCollapsibleNestedContainers(activePage).forEach(element => {
element.classList.remove('collapsed');
saveToggleState(element, 'expanded');
});
@@ -439,7 +461,7 @@ window.MeNav.expandAll = function() {
window.MeNav.collapseAll = function() {
const activePage = document.querySelector('.page.active');
if (activePage) {
activePage.querySelectorAll('.category:not(.collapsed), .group:not(.collapsed)').forEach(element => {
getCollapsibleNestedContainers(activePage).forEach(element => {
element.classList.add('collapsed');
saveToggleState(element, 'collapsed');
});
@@ -451,8 +473,9 @@ window.MeNav.toggleCategories = function() {
const activePage = document.querySelector('.page.active');
if (!activePage) return;
const allElements = activePage.querySelectorAll('.category, .group');
const collapsedElements = activePage.querySelectorAll('.category.collapsed, .group.collapsed');
const allElements = getCollapsibleNestedContainers(activePage);
const collapsedElements = allElements.filter(element => element.classList.contains('collapsed'));
if (allElements.length === 0) return;
// 如果收起的数量 >= 总数的一半，执行展开；否则执行收起
if (collapsedElements.length >= allElements.length / 2) {
@@ -505,6 +528,7 @@ window.MeNav.getNestedStructure = function() {
// 切换嵌套元素
function toggleNestedElement(container) {
if (!isNestedContainerCollapsible(container)) return;
const isCollapsed = container.classList.contains('collapsed');
if (isCollapsed) {
@@ -1462,13 +1486,16 @@ document.addEventListener('DOMContentLoaded', () => {
}, index * 100);
});
// 初始展开当前页面的子菜单
const activeNavItem = document.querySelector('.nav-item.active');
if (activeNavItem) {
const activeWrapper = activeNavItem.closest('.nav-item-wrapper');
if (activeWrapper) {
// 初始展开当前页面的子菜单：高亮项如果有子菜单，需要同步展开
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 => {

26
templates/components/category.hbs
View File

@@ -6,13 +6,25 @@
data-level="{{#if level}}{{level}}{{else}}1{{/if}}"
data-container="categories">
<div class="category-header" data-toggle="category">
<div class="category-header"{{#if level}}{{#ifCond level '===' 2}} data-toggle="category"{{/ifCond}}{{else}}{{#unless subcategories}}{{#unless groups}} data-toggle="category"{{/unless}}{{/unless}}{{/if}}>
<h{{#if level}}{{add level 1}}{{else}}2{{/if}} data-editable="category-name">
<i class="{{icon}}"></i>
{{name}}
<span class="toggle-icon">
<i class="fas fa-chevron-down"></i>
</span>
{{#if level}}
{{#ifCond level '===' 2}}
<span class="toggle-icon">
<i class="fas fa-chevron-down"></i>
</span>
{{/ifCond}}
{{else}}
{{#unless subcategories}}
{{#unless groups}}
<span class="toggle-icon">
<i class="fas fa-chevron-down"></i>
</span>
{{/unless}}
{{/unless}}
{{/if}}
</h{{#if level}}{{add level 1}}{{else}}2{{/if}}>
</div>
@@ -20,7 +32,11 @@
{{#if subcategories}}
<div class="subcategories-container" data-container="subcategories">
{{#each subcategories}}
{{> category level=2}}
{{#if ../level}}
{{> category level=(add ../level 1)}}
{{else}}
{{> category level=2}}
{{/if}}
{{/each}}
</div>
{{/if}}

9
templates/components/group.hbs
View File

@@ -4,14 +4,11 @@
data-icon="{{icon}}"
data-level="{{#if level}}{{level}}{{else}}3{{/if}}">
<div class="group-header" data-toggle="group">
<h{{#if level}}{{add level 1}}{{else}}3{{/if}} data-editable="group-name">
<div class="group-header">
<h{{#if level}}{{add level 1}}{{else}}4{{/if}} data-editable="group-name">
<i class="{{icon}}"></i>
{{name}}
<span class="toggle-icon">
<i class="fas fa-chevron-down"></i>
</span>
</h{{#if level}}{{add level 1}}{{else}}3{{/if}}>
</h{{#if level}}{{add level 1}}{{else}}4{{/if}}>
</div>
<div class="group-content">

7
templates/layouts/default.hbs
View File

@@ -66,7 +66,12 @@
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<h1 data-editable="logo-text">{{site.logo_text}}</h1>
<div class="logo-brand">
{{#if site.favicon}}
<img class="logo-image" src="./{{site.favicon}}" alt="{{site.title}} logo" width="26" height="26">
{{/if}}
<h1 data-editable="logo-text">{{site.logo_text}}</h1>
</div>
<button class="sidebar-toggle" aria-label="收起/展开侧边栏">
<i class="fas fa-chevron-left toggle-icon"></i>
</button>