style: 优化移动端ui逻辑与交互一致性

- 移动端布局:站点卡片统一两列;卡片改为横排左对齐,标题/描述省略防溢出
- 移动端留白:缩短分类卡片与页面边缘的左右间距,扩大可用宽度
- 搜索交互:搜索框常驻置顶;搜索按钮未删除仅隐藏;移除“搜索面板”切换/遮罩逻辑,按钮点击仅聚焦输入框
- 顶部栏:搜索框与菜单按钮同排;菜单按钮磁贴与搜索框风格/高度更契合;加入 safe-area 适配并修复横向溢出
- 侧边栏:移动端限制宽度并隐藏横向溢出,避免撑出右侧
- 磁贴统一:右下角主题/分类按钮在移动端与桌面端统一为同款磨砂卡片风格(含 safe-area 偏移)
This commit is contained in:
rbetree
2026-01-05 22:39:23 +08:00
parent ccd18f5ac5
commit 3e78332b54
2 changed files with 109 additions and 68 deletions

View File

@@ -1104,7 +1104,6 @@ document.addEventListener('DOMContentLoaded', () => {
let currentPageId = homePageId;
let isInitialLoad = true;
let isSidebarOpen = false;
let isSearchOpen = false;
let isLightTheme = false; // 主题状态
let isSidebarCollapsed = false; // 侧边栏折叠状态
let pages; // 页面元素的全局引用
@@ -1342,22 +1341,11 @@ document.addEventListener('DOMContentLoaded', () => {
isSidebarOpen = !isSidebarOpen;
sidebar.classList.toggle('active', isSidebarOpen);
overlay.classList.toggle('active', isSidebarOpen);
if (isSearchOpen) {
toggleSearch();
}
}
// 移动端搜索切换
// 移动端搜索框常驻显示CSS 控制),无需“搜索面板”开关;点击仅聚焦输入框
function toggleSearch() {
isSearchOpen = !isSearchOpen;
searchContainer.classList.toggle('active', isSearchOpen);
overlay.classList.toggle('active', isSearchOpen);
if (isSearchOpen) {
searchInput.focus();
if (isSidebarOpen) {
toggleSidebar();
}
}
searchInput && searchInput.focus();
}
// 关闭所有移动端面板
@@ -1365,9 +1353,6 @@ document.addEventListener('DOMContentLoaded', () => {
if (isSidebarOpen) {
toggleSidebar();
}
if (isSearchOpen) {
toggleSearch();
}
}
// 移动端事件监听
@@ -1390,10 +1375,6 @@ document.addEventListener('DOMContentLoaded', () => {
e.preventDefault();
if (isMobile() && !isSearchOpen) {
toggleSearch();
}
searchInput && searchInput.focus();
});
@@ -1409,7 +1390,6 @@ document.addEventListener('DOMContentLoaded', () => {
searchContainer.classList.remove('active');
overlay.classList.remove('active');
isSidebarOpen = false;
isSearchOpen = false;
} else {
// 在移动设备下,重置侧边栏折叠状态
sidebar.classList.remove('collapsed');
@@ -1886,10 +1866,6 @@ document.addEventListener('DOMContentLoaded', () => {
resetSearch();
} else if (e.key === 'Enter') {
executeSearch(searchInput.value);
// 在移动设备上,执行搜索后自动关闭搜索面板
if (isMobile() && isSearchOpen) {
closeAllPanels();
}
}
});