# 侧边栏布局优化说明

## 🎯 优化目标
让侧边栏与整体布局更加和谐，确保在不同屏幕尺寸下都有良好的视觉效果和用户体验。

## ✨ 主要改进

### 1. 宽度调整
**调整前：**
```css
--sidebar-width: clamp(260px, 22vw, 320px);
```

**调整后：**
```css
--sidebar-width: clamp(280px, 20vw, 300px);
```

- 增加了最小宽度（260px → 280px）
- 减少了视窗宽度比例（22vw → 20vw）
- 降低了最大宽度（320px → 300px）
- 结果：更紧凑但仍然实用的侧边栏

### 2. 位置优化
**新的定位算法：**
```css
--container-max-width: 1200px;
--container-padding: 1rem;
--sidebar-offset: calc(
  max(var(--container-padding), (100vw - var(--container-max-width)) / 2) 
  - var(--sidebar-width) 
  - 1.5rem
);
left: clamp(1rem, var(--sidebar-offset), 2rem);
```

**优势：**
- 🎯 精确对齐主内容容器（max-width: 1200px）
- 📱 响应式适配不同屏幕尺寸
- 🚫 避免侧边栏与内容重叠
- ⚖️ 保持视觉平衡

### 3. 样式增强
**玻璃质感优化：**
```css
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px) saturate(120%);
border: 1px solid rgba(91, 119, 142, 0.25);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
```

**滚动条美化：**
```css
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
```

### 4. 高度自适应
**改进前：** 固定高度，可能造成内容溢出
```css
height: 100%;
max-height: 100%;
```

**改进后：** 灵活高度，更好适应内容
```css
height: auto;
max-height: calc(100vh - 8rem);
min-height: 60vh;
```

## 📐 布局协调性

### 桌面端布局（≥1280px）
```
┌─────────────────────────────────────────────┐
│                 浏览器窗口                     │
├────┬──────────────────────────────────┬─────┤
│侧边栏│           主内容区域               │ 边距 │
│300px│        max-width: 1200px        │     │
├────┴──────────────────────────────────┴─────┤
│              底部区域                        │
└─────────────────────────────────────────────┘
```

### 移动端布局（<1280px）
```
┌─────────────────────────────────────────────┐
│                主内容区域                     │
│            全宽显示                          │
├─────────────────────────────────────────────┤
│              底部区域                        │
├─────────────────────────────────────────────┤
│                                      [目录] │ ← 浮动按钮
└─────────────────────────────────────────────┘
```

## 🎨 视觉效果

### 和谐配色方案
- **主色调：** `#011a2d` （深蓝）
- **辅助色：** `rgba(91, 119, 142, 0.25)` （柔和边框）
- **背景：** `rgba(255, 255, 255, 0.25)` （半透明白）
- **高亮：** `rgba(59, 130, 246, 0.15)` （蓝色高亮）

### 动效优化
```css
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
```
- 使用缓动函数提升动画质感
- 统一的过渡时间确保一致性

## 📱 响应式断点

| 屏幕尺寸 | 布局模式 | 侧边栏状态 |
|---------|---------|-----------|
| < 768px | 移动端 | 底部浮动按钮 |
| 768px - 1279px | 平板端 | 底部浮动按钮（较大） |
| ≥ 1280px | 桌面端 | 固定左侧边栏 |

## 🔧 技术优化

### 性能优化
- 使用 `transform` 而非 `left/top` 进行动画
- `will-change` 属性优化渲染性能
- 合理的 `z-index` 层级管理

### 可访问性
```css
@media (prefers-reduced-motion: reduce) {
  transition: none !important;
}

@media (prefers-contrast: high) {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.3);
}
```

### 兼容性
- 支持 Safari 的 `-webkit-backdrop-filter`
- 渐进增强的滚动条样式
- 安全区域适配（刘海屏等）

## 📝 使用建议

### 在报告页面中应用
```astro
<main class="report-main">
  <div class="report-layout container mx-auto px-4">
    <ReportSidebar title="报告目录" toggleLabel="目录" />
    <div class="report-content" data-report-content>
      <!-- 内容 -->
    </div>
  </div>
</main>
```

### CSS 变量自定义
```css
:root {
  --report-sidebar-width: 280px; /* 自定义宽度 */
  --sidebar-z-index: 30;         /* 自定义层级 */
}
```

## 🚀 效果预期

通过这些优化，侧边栏将：
- ✅ 与主内容区域完美对齐
- ✅ 在各种屏幕尺寸下表现良好
- ✅ 提供更好的视觉层次感
- ✅ 增强整体设计的专业感
- ✅ 保持良好的可用性和可访问性

这次优化让侧边栏不再是页面的"附加元素"，而是成为整体设计的和谐组成部分。