Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 96b50327f3 finally finish all website check in.

2025-10-01 09:51:06 +08:00

5.3 KiB

Raw Blame History

侧边栏布局优化说明

🎯 优化目标

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

✨ 主要改进

1. 宽度调整

调整前：

--sidebar-width: clamp(260px, 22vw, 320px);

调整后：

--sidebar-width: clamp(280px, 20vw, 300px);

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

2. 位置优化

新的定位算法：

--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. 样式增强

玻璃质感优化：

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);

滚动条美化：

scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.3) transparent;

4. 高度自适应

改进前： 固定高度，可能造成内容溢出

height: 100%;
max-height: 100%;

改进后： 灵活高度，更好适应内容

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) （蓝色高亮）

动效优化

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

使用缓动函数提升动画质感
统一的过渡时间确保一致性

📱 响应式断点

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

🔧 技术优化

性能优化

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

可访问性

@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
渐进增强的滚动条样式
安全区域适配（刘海屏等）

📝 使用建议

在报告页面中应用

<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 变量自定义

:root {
  --report-sidebar-width: 280px; /* 自定义宽度 */
  --sidebar-z-index: 30;         /* 自定义层级 */
}

🚀 效果预期

通过这些优化，侧边栏将：

✅ 与主内容区域完美对齐
✅ 在各种屏幕尺寸下表现良好
✅ 提供更好的视觉层次感
✅ 增强整体设计的专业感
✅ 保持良好的可用性和可访问性

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

5.3 KiB Raw Blame History Unescape Escape