176 lines
5.3 KiB
Markdown
176 lines
5.3 KiB
Markdown
# 侧边栏布局优化说明
|
||
|
||
## 🎯 优化目标
|
||
让侧边栏与整体布局更加和谐，确保在不同屏幕尺寸下都有良好的视觉效果和用户体验。
|
||
|
||
## ✨ 主要改进
|
||
|
||
### 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; /* 自定义层级 */
|
||
}
|
||
```
|
||
|
||
## 🚀 效果预期
|
||
|
||
通过这些优化，侧边栏将：
|
||
- ✅ 与主内容区域完美对齐
|
||
- ✅ 在各种屏幕尺寸下表现良好
|
||
- ✅ 提供更好的视觉层次感
|
||
- ✅ 增强整体设计的专业感
|
||
- ✅ 保持良好的可用性和可访问性
|
||
|
||
这次优化让侧边栏不再是页面的"附加元素"，而是成为整体设计的和谐组成部分。 |