企业官网建设流程全解析

Lap日历视图指南：年/月/日三级导航重温每一次快门瞬间

【免费下载链接】lapAn offline-first photo manager for large local libraries项目地址: https://gitcode.com/GitHub_Trending/lap3/lap

Lap 是一款离线优先的本地照片管理器（offline-first photo manager），专为大规模本地图库设计。它的日历视图（Calendar View）提供年 / 月 / 日三级导航，让你按拍摄日期快速穿梭时光，重温每一次快门瞬间。无需联网，所有照片都留在你自己的电脑上。

如何打开日历面板

在 Lap 主界面中，点击左侧边栏的日历图标即可进入日历视图。日历面板与其他导航项（全部文件、收藏、地点等）并列，随时可以切换，无需打开新窗口。

面板顶部有三个选项卡，对应三种浏览粒度：

年视图：树形展开快速定位日期

「年」选项卡是整个日历的默认视图，采用三级树形结构：

1. 一级：年份—— 点击年份名称，右侧内容区立即筛选出该年全部照片；
2. 二级：月份—— 点击年份左侧的箭头展开月份，每个条目都标注了照片数量；
3. 三级：日期—— 展开月份后列出有照片的具体日期，点击即可直达那一天。

每一级右侧都有照片数量统计（如1,204），帮你快速判断哪一年、哪一月内容最丰富。选中某一级后，列表会自动滚动定位到选中项，切换起来非常顺畅。

月视图：热力图一眼看出"高产月份"

切换到「月」选项卡后，日历变为按年份分组的 12 格月历卡片：

• 每个月格子里的数字是该月照片数量，超过 9000 张显示为9k+；
• 格子颜色深浅构成热力图——拍摄越多颜色越深，一眼就能看出你的"高产月份"；
• 点击年份标题可选中整年，点击有照片的月份格子则筛选到该月；
• 当前所在的月份会带有边框高亮，方便定位"现在"。

日视图：标准月历，重温每一天

「日」选项卡展示标准月历网格（7 列 × 星期），每个日期格子里标注当天照片数量（超过 999 显示999+）：

• 同样带热力色阶，照片越多的日子颜色越深；
• 今天会加边框标记，没有照片的日期不可点击；
• 点击任意有照片的日期，右侧立即展示那天的全部照片。

这个视图特别适合"回忆杀"：打开某一年某一月，沿着色块最浓的日子点过去，就能重温那天的拍摄旅程。

排序与筛选技巧

• 时间排序：日历支持按拍摄时间升序 / 降序排列（可在设置中调整calendarSort），决定年份、月份、日期从上到下还是从近到远排列；
• 与其他视图联动：选中日历中的某一年/月/日后，顶部标题会显示对应日期范围，内容区标题（如「2023年」）会随之更新；
• 空库提示：如果图库还没有可识别的拍摄日期，日历会给出提示，导入照片并建立索引后即可使用。

相关文件与源码位置

想深入了解日历视图的实现，可以看看这些模块：

• 日历主组件：Calendar.vue（三级导航、选项卡切换、热力阈值计算）
• 月视图卡片：CalendarMonthly.vue（年度月历 + 热力图）
• 日视图卡片：CalendarDaily.vue（标准月历网格）
• 日期筛选逻辑：getCalendarDateRange（将年/月/日选择转换为查询区间）
• 多语言文案：zh.json（日历标签与星期名称）

快速上手清单

• ✅ 点击左侧边栏日历图标打开日历视图；
• ✅ 用「年」选项卡逐级展开，精确找到某一天；
• ✅ 用「月」选项卡扫一眼热力图，定位照片最多的月份；
• ✅ 用「日」选项卡像翻月历一样逐日重温旧时光。

Lap 的日历视图把"按时间找照片"这件小事做到了极致——离线、快速、直观。无论是整理数千张旅行照，还是找回去年某个生日的瞬间，三级导航都能让你在几秒内抵达目标。想要体验完整功能，可执行：

git clone https://gitcode.com/GitHub_Trending/lap3/lap

然后按 README.md 的说明构建运行即可。

【免费下载链接】lapAn offline-first photo manager for large local libraries项目地址: https://gitcode.com/GitHub_Trending/lap3/lap