# 侧边栏修复说明

## 问题说明
原有的 `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 主题
- 安全区域适配（支持刘海屏等）