style: 优化移动端ui逻辑与交互一致性
- 移动端布局:站点卡片统一两列;卡片改为横排左对齐,标题/描述省略防溢出 - 移动端留白:缩短分类卡片与页面边缘的左右间距,扩大可用宽度 - 搜索交互:搜索框常驻置顶;搜索按钮未删除仅隐藏;移除“搜索面板”切换/遮罩逻辑,按钮点击仅聚焦输入框 - 顶部栏:搜索框与菜单按钮同排;菜单按钮磁贴与搜索框风格/高度更契合;加入 safe-area 适配并修复横向溢出 - 侧边栏:移动端限制宽度并隐藏横向溢出,避免撑出右侧 - 磁贴统一:右下角主题/分类按钮在移动端与桌面端统一为同款磨砂卡片风格(含 safe-area 偏移)
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user