finally finish all website check in.

docs/SIDEBAR_FIX.md

@@ -0,0 +1,123 @@
+# 侧边栏修复说明
+
+## 问题说明
+原有的 `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 主题
+- 安全区域适配（支持刘海屏等）