足迹地图 - 布局设计方案

1. 整体布局结构

新的足迹地图页面采用现代化的响应式布局，主要由以下几个部分组成：

• 头部标题栏：固定在页面顶部，包含标题和控制按钮
• 主内容区域：包含侧边栏和地图显示区
• 侧边栏：包含足迹列表、筛选器和统计信息
• 地图显示区：展示地图和控制按钮
• 模态框：用于显示足迹详情

2. 各功能元素的位置和尺寸关系

2.1 页面容器

• 主容器 (#footprint-map-container):
  • 宽度：100% 视口宽度
  • 高度：100% 视口高度
  • 定位：相对定位，作为所有子元素的容器基准

2.2 头部标题栏

• 头部 (map-header):
  • 高度：60px
  • 宽度：100%
  • 位置：固定在页面顶部
  • 内部元素布局：使用 Flexbox，标题左对齐，控制按钮右对齐
  • 与其他元素的关系：覆盖在主内容区域上方，z-index: 100

2.3 主内容区域

• 内容区域 (map-content):
  • 宽度：100%
  • 高度：calc(100vh - 60px)（减去头部高度）
  • 布局方式：Flexbox，包含侧边栏和地图区域
  • 位置：头部下方，占据剩余空间

2.4 侧边栏

• 侧边栏 (#footprint-sidebar):

  • 宽度：桌面端 320px，移动端根据状态变化
  • 高度：100%
  • 位置：页面左侧
  • 背景色：--sidebar-bg-color（白色）
  • 阴影：--sidebar-shadow
  • 移动状态：使用 transform 属性进行平移，默认隐藏时移至屏幕左侧外

• 侧边栏固定头部 (sidebar-fixed-header):

  • 高度：210px（包含标题、筛选器和统计信息）
  • 位置：侧边栏顶部，固定不滚动
  • 背景色：--sidebar-bg-color
  • 边框：底部有 1px 边框线

• 侧边栏标题 (sidebar-header):

  • 高度：50px
  • 布局：Flexbox，标题左对齐，关闭按钮右对齐

• 筛选器 (filter-container):

  • 高度：50px
  • 输入框宽度：100%
  • 输入框高度：40px

• 统计信息 (stat-info):

  • 高度：100px
  • 布局：Flexbox 垂直排列
  • 统计项间距：12px

• 足迹列表 (footprint-list):

  • 高度：calc(100% - 210px)（侧边栏高度减去固定头部高度）
  • 溢出：自动滚动

• 足迹列表项 (footprint-item):

  • 最小高度：80px
  • 内边距：16px
  • 边框：底部有 1px 分割线

2.5 地图区域

• 地图容器 (map-wrapper):

  • 宽度：calc(100% - 320px)（桌面端，减去侧边栏宽度）
  • 高度：100%
  • 位置：侧边栏右侧

• 地图显示区 (#footprint-map):

  • 宽度：100%
  • 高度：100%
  • 背景色：--map-bg-color

• 地图控制按钮 (map-controls):

  • 位置：地图右下角，绝对定位
  • 底部间距：20px
  • 右侧间距：20px
  • 按钮尺寸：每个按钮 44x44px
  • 按钮间距：12px

2.6 模态框

• 模态框背景 (#footprint-modal):

  • 位置：固定定位，覆盖整个视口
  • z-index: 1000
  • 背景色：半透明黑色 rgba(0, 0, 0, 0.6)

• 模态框内容 (modal-content):

  • 最大宽度：600px
  • 最大高度：80vh
  • 最小宽度：300px
  • 位置：屏幕中央
  • 背景色：--modal-bg-color
  • 圆角：12px
  • 阴影：--modal-shadow

• 模态框头部 (modal-header):

  • 高度：60px
  • 布局：Flexbox，标题左对齐，关闭按钮右对齐

• 模态框主体 (modal-body):

  • 布局：Flexbox 垂直排列
  • 图片区域高度：200px
  • 信息区域高度：自适应

• 模态框底部 (modal-footer):

  • 高度：60px
  • 布局：Flexbox，两端对齐

2.7 侧边栏遮罩层

• 遮罩层 (sidebar-overlay):
  • 位置：固定定位，覆盖整个视口
  • z-index: 99
  • 背景色：半透明黑色 rgba(0, 0, 0, 0.4)
  • 默认状态：隐藏

3. 响应式设计的布局变化

3.1 断点定义

• 桌面端：屏幕宽度 > 768px
• 平板端：768px ≥ 屏幕宽度 > 480px
• 移动端：屏幕宽度 ≤ 480px

3.2 布局变化

桌面端布局（> 768px）

• 侧边栏固定显示在左侧，宽度 320px
• 地图区域位于右侧，占据剩余空间
• 侧边栏遮罩层默认隐藏
• 头部标题栏完整显示

平板端布局（481px - 768px）

• 侧边栏默认折叠，宽度收缩为 0
• 点击切换按钮时侧边栏滑入，宽度 300px
• 侧边栏滑入时显示遮罩层
• 地图区域占据整个可用空间
• 头部标题栏完整显示

移动端布局（≤ 480px）

• 侧边栏默认隐藏（移至屏幕左侧外）
• 点击切换按钮时侧边栏从左侧滑入，占据整个屏幕宽度
• 侧边栏滑入时显示遮罩层并禁用背景滚动
• 地图区域在侧边栏隐藏时占据整个屏幕
• 地图控制按钮尺寸减小为 40x40px
• 模态框宽度自适应屏幕，最大宽度 90%

4. 元素间距和对齐关系

4.1 间距规范

• 大间距：24px（用于主要区域之间的分隔）
• 中等间距：16px（用于组件内部元素之间）
• 小间距：12px（用于小元素之间）
• 微间距：8px（用于标签、图标等）

4.2 对齐原则

• 水平对齐：所有元素使用 Flexbox 进行对齐，确保视觉上的一致性
• 垂直对齐：内容居中对齐
• 网格对齐：主要元素遵循 8px 网格系统，确保布局的协调性
• 间距一致性：相同级别的元素保持一致的间距

5. 重叠层级关系

• 模态框：z-index: 1000
• 头部标题栏：z-index: 100
• 侧边栏遮罩层：z-index: 99
• 侧边栏：z-index: 98
• 地图控制按钮：z-index: 90
• 地图标记点：z-index: 80
• 地图基础层：z-index: 10

通过以上详细的尺寸和位置规范，确保足迹地图页面在各种设备上都能保持良好的布局效果和用户体验。