Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 96b50327f3 finally finish all website check in.

2025-10-01 09:51:06 +08:00

3.3 KiB

Raw Blame History

侧边栏修复说明

问题说明

原有的 ReportSidebar.astro 组件在窄屏幕（移动端）状态下存在以下问题：

目录按钮点击无响应
事件监听器绑定可能失效
面板动画不流畅

修复内容

1. 修复了现有的 ReportSidebar 组件

位置：src/components/report/ReportSidebar.astro

主要修复：

增强了事件处理，添加 preventDefault() 和 stopPropagation()
改进了 setCollapsed 函数，确保移动端面板正确显示/隐藏
添加了键盘事件支持（ESC 键关闭）
增加了背景点击关闭功能
强化了事件监听器绑定机制

2. 创建了统一的脚本文件

新增文件：

src/scripts/toc-sidebar.ts - 基于您提供代码风格的新TOC侧边栏
src/scripts/report-sidebar.ts - 报告侧边栏增强脚本

3. 创建了新版本的 TOC 组件

新增文件：src/components/common/TOCSidebar.astro

基于您提供的代码创建，具有以下特性：

支持嵌套目录结构（h2, h3, h4）
响应式设计（桌面端和移动端）
玻璃质感UI设计
滚动高亮
折叠/展开功能
键盘导航支持

使用方法

方法1：使用修复后的 ReportSidebar

---
import ReportSidebar from '../../../components/report/ReportSidebar.astro';
---

<ReportSidebar title="报告目录" toggleLabel="目录" />
<div class="report-content" data-report-content>
  <!-- 您的内容 -->
</div>

方法2：使用新的 TOCSidebar 组件

---
import TOCSidebar from '../../../components/common/TOCSidebar.astro';
---

<TOCSidebar title="目录" toggleLabel="目录" targetSelector="[data-report-content]" />
<div data-report-content>
  <!-- 您的内容 -->
</div>

主要修复点

事件处理增强

// 修复前
toggleBtn.addEventListener('click', handleToggle);

// 修复后
const handleToggleClick = (e) => {
  e.preventDefault();
  e.stopPropagation();
  const isOpen = sidebar.classList.contains('toc-sidebar--open');
  setSidebarOpen(!isOpen);
};
currentToggleBtn.addEventListener('click', handleToggleClick, { passive: false });

面板动画改进

// 在移动端确保面板正确显示/隐藏
if (!mediaQuery.matches) {
  if (isOpen) {
    panel.style.transform = 'translateY(0)';
    requestAnimationFrame(() => {
      panel.style.transform = 'translateY(0)';
    });
  } else {
    panel.style.transform = 'translateY(100%)';
  }
}

强制重新绑定事件

// 移除可能存在的旧事件监听器，重新绑定
const newToggleBtn = toggleBtn.cloneNode(true);
toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);

调试功能

在修复版本中添加了调试日志：

console.log('Toggle clicked'); // 调试用
console.log('Close clicked'); // 调试用

可以在浏览器开发者工具中查看这些日志，确认事件是否正确触发。

测试建议

在桌面端测试侧边栏展开/收起
在移动端（设备宽度 < 1024px）测试按钮响应
测试目录链接跳转功能
测试滚动高亮效果
测试键盘导航（ESC 键关闭）

样式特性

响应式断点：1024px
移动端：底部弹出式面板
桌面端：左侧固定侧边栏
玻璃质感设计，符合 Morandi 主题
安全区域适配（支持刘海屏等）

3.3 KiB Raw Blame History Unescape Escape