1.1 功能概述
在创作页（/timeline）新增第三种视图模式"归档"，与原有的"中枢链路""矩阵网格"并列。
视图按钮图标功能中枢链路中枢链路ListTree默认视图，纵向时间线节点，含封面图和摘要矩阵网格矩阵网格LayoutGrid2-3 列卡片网格，悬停放大封面归档归档Archive本次新增：按年份分组为磨砂卡片，纯文字列表，左侧时间线
1.2 归档视图规格
- 文章按
date字段前 4 位（年份）分组，年份倒序排列 - 每组内文章按日期倒序，每年一张毛玻璃卡片
- 左侧 2px 靛蓝色竖线 + 10px 圆点标记每条文章
- 条目显示：标题 + MM-DD 日期 + 标签徽章
- 整行可点击，跳转
/posts/{slug} - 搜索和标签筛选可与归档联动
- 入场动画：opacity:1 + y:20→0，0.4s，无淡入
1.3 涉及文件
文件环境操作类型components/ArchiveView.tsx前端 + 后端新建新增components/TimelineClient.tsx前端 + 后端修改新增app/timeline/page.tsx前后端无需修改-
2. Bug 修复
#问题文件修复类型1归档页时间线圆点与竖线不对齐ArchiveView.tsx竖线 left[5]→[6px]，圆点 left[-20]→[2px]，中心对齐Bug2一级导航切回创作页，子标签不重置TimelineClient.tsx默认 viewMode='timeline'，仅点击文章/杂谈链接后返回才恢复上次视图Bug3子标签切换时页面自动滚动到顶部TimelineClient.tsx移除 handleViewModeChange 中的 window.scrollToBug4毛玻璃元素切换视图时闪烁TimelineClient.tsx搜索框/标签/视图按钮 transition-all → transition-colorsBug
3. 白屏修复（三层防御）
层机制文件1globals.css 关键 CSS → Next.js 提取为 <link> 放在 HTML shell <head>app/globals.css2beforeInteractive 脚本 → shell 中执行，创建 #fallback-splash，读取主题偏好app/layout.tsx3#static-splash 静态 HTML → Server Component，覆盖 fallbackapp/layout.tsx
**设计要点：**闪屏背景默认暗色（匹配 ThemeProvider 默认 isDark=true），beforeInteractive 脚本读取 localStorage.blog-theme 适配亮色用户。
新组件：SplashController.tsx（极简客户端组件，~25 行，不渲染 UI，仅控制 splash-seen class 时机），替代原有的重型 SplashScreen.tsx。
旧文件：SplashScreen.tsx 已删除（死代码）。
4. 动画参数调整
4.1 最终参数
组件参数改前改后类型PageTransitiony 位移20px20px****微调PageTransitionduration0.8s / 0.4s0.35s****微调视图容器 (card/timeline)y 位移20px10px****微调视图容器 (card/timeline)淡入opacity 0→1opacity 1→1（不淡入）****微调视图容器delay—0（已移除）BugTimelineNodey 位移50px24px****微调TimelineNodeduration0.6s0.4s****微调归档视图y 位移—（新增）20px, 0.4s****新增回顶部按钮y 位移10px6px****微调卡片网格 itemopacity+scale仅 scale 0.9→1opacity 0→1 + scale 0.9→1****微调
4.2 中枢链路页面 y 轴位移总览
层级组件y 偏移时长缓动层级 1PageTransition（整个页面，含搜索框/标签栏）20px → 00.35seaseOut层级 2视图容器 card/timeline10px → 00.3seaseOut层级 2归档视图20px → 00.4seaseOut层级 3TimelineNode 节点卡片24px → 00.4seaseOut (whileInView)弹入回顶部按钮6px → 0——弹入搜索下拉弹窗-10px → 00.2s—
4.3 叠加位移
视图层级 1层级 2层级 3等效总位移中枢链路20px10px24px54px矩阵网格20px10px—30px归档20px20px—40px
5. 后端同步适配
- 后端
TimelineClient.tsx新增归档视图 + 动画调整，保留管理功能（删除弹窗、编辑按钮、新建入口） - 后端
TimelineNode.tsx保留管理功能（编辑/删除悬浮按钮），同步动画参数 - 后端
PageTransition.tsx动画参数同步（opacity 保持 0→1，后端无闪屏） CyberCat从</ThemeProvider>外移至内部