123 lines
3.3 KiB
Markdown
123 lines
3.3 KiB
Markdown
# 侧边栏修复说明
|
||
|
||
## 问题说明
|
||
原有的 `ReportSidebar.astro` 组件在窄屏幕（移动端）状态下存在以下问题：
|
||
1. 目录按钮点击无响应
|
||
2. 事件监听器绑定可能失效
|
||
3. 面板动画不流畅
|
||
|
||
## 修复内容
|
||
|
||
### 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
|
||
```astro
|
||
---
|
||
import ReportSidebar from '../../../components/report/ReportSidebar.astro';
|
||
---
|
||
|
||
<ReportSidebar title="报告目录" toggleLabel="目录" />
|
||
<div class="report-content" data-report-content>
|
||
<!-- 您的内容 -->
|
||
</div>
|
||
```
|
||
|
||
### 方法2：使用新的 TOCSidebar 组件
|
||
```astro
|
||
---
|
||
import TOCSidebar from '../../../components/common/TOCSidebar.astro';
|
||
---
|
||
|
||
<TOCSidebar title="目录" toggleLabel="目录" targetSelector="[data-report-content]" />
|
||
<div data-report-content>
|
||
<!-- 您的内容 -->
|
||
</div>
|
||
```
|
||
|
||
## 主要修复点
|
||
|
||
### 事件处理增强
|
||
```javascript
|
||
// 修复前
|
||
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 });
|
||
```
|
||
|
||
### 面板动画改进
|
||
```javascript
|
||
// 在移动端确保面板正确显示/隐藏
|
||
if (!mediaQuery.matches) {
|
||
if (isOpen) {
|
||
panel.style.transform = 'translateY(0)';
|
||
requestAnimationFrame(() => {
|
||
panel.style.transform = 'translateY(0)';
|
||
});
|
||
} else {
|
||
panel.style.transform = 'translateY(100%)';
|
||
}
|
||
}
|
||
```
|
||
|
||
### 强制重新绑定事件
|
||
```javascript
|
||
// 移除可能存在的旧事件监听器，重新绑定
|
||
const newToggleBtn = toggleBtn.cloneNode(true);
|
||
toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);
|
||
```
|
||
|
||
## 调试功能
|
||
在修复版本中添加了调试日志：
|
||
```javascript
|
||
console.log('Toggle clicked'); // 调试用
|
||
console.log('Close clicked'); // 调试用
|
||
```
|
||
|
||
可以在浏览器开发者工具中查看这些日志，确认事件是否正确触发。
|
||
|
||
## 测试建议
|
||
1. 在桌面端测试侧边栏展开/收起
|
||
2. 在移动端（设备宽度 < 1024px）测试按钮响应
|
||
3. 测试目录链接跳转功能
|
||
4. 测试滚动高亮效果
|
||
5. 测试键盘导航（ESC 键关闭）
|
||
|
||
## 样式特性
|
||
- 响应式断点：1024px
|
||
- 移动端：底部弹出式面板
|
||
- 桌面端：左侧固定侧边栏
|
||
- 玻璃质感设计，符合 Morandi 主题
|
||
- 安全区域适配（支持刘海屏等） |