三叶 • 书斋

Appearance

2026-08-18：在线简历模块模板化改造 ​

背景 ​

原来的在线简历由页面组件直接组织内容，数据结构、业务字段和视觉样式耦合在一起。继续增加新版设计时，不仅容易重复编写数据处理逻辑，后端接口字段变化也会同时影响多个展示组件。

这次改造的目标，是让简历数据与视觉模板真正分离：简历内容由接口异步获取，适配成统一的数据模型，再交给可独立切换的模板渲染。

改动内容 ​

建立统一的模板架构 ​

简历模块调整为以下数据流：

text
简历接口 → 数据适配器 → ResumeViewModel → 模板渲染器 → 当前简历模板

各层职责如下：

  • ResumeLayout.vue：负责接口请求、加载状态、错误提示和重新加载。
  • adapters/resumeV2.ts：将后端数据整理为模板稳定消费的视图模型。
  • types.ts：定义简历数据与模板选项的统一协议。
  • ResumeRenderer.vue：注册模板、选择模板并异步加载模板组件。
  • templates/：只关注布局、视觉和交互，不直接请求接口。
  • config.ts：集中配置接口地址、用户 ID、当前模板、强调色和 PDF 外链。

当前提供两套模板：

  • tech-grid：信息密度较高、偏稳重的技术简历模板。
  • gsap-motion：强调动效、视差和浏览体验的交互式简历模板。

新增模板时，只需要遵循统一的 resume 与 options 属性协议，并在渲染器中完成注册。

对接异步简历数据 ​

页面通过简历详情接口获取指定用户的数据，不再依赖组件内的固定文案。适配层负责字段排序、公开联系方式过滤、缺省数组补全以及模块显示状态合并。

为避免刷新页面时出现“内容先显示、随后隐藏、最后再次出现”的闪烁，渲染时序也进行了调整：

  1. 页面首次进入时只展示加载状态。
  2. 等待接口请求和数据适配完成。
  3. 异步下载并挂载选中的简历模板。
  4. 模板 DOM、字体和图片稳定后，再初始化交互动画。

请求支持中止和失败重试，组件卸载时会取消尚未完成的请求。

新增 GSAP 交互模板 ​

新版模板使用 GSAP 和 ScrollTrigger 实现首屏入场、滚动进度、分区揭示、项目卡片视差和指针光效。为了照顾不希望看到大量动画的用户，也保留了 prefers-reduced-motion 降级处理。

动画初始化被放在数据和模板完成渲染之后，并在字体与图片稳定后刷新 ScrollTrigger，避免异步内容改变页面高度导致触发位置错误。

修复项目瀑布布局 ​

项目卡片高度会随职责、亮点和难点内容变化。最初使用单个双列 Grid 排列时，相邻项目容易因为不同卡片的高度和视差位移产生边距重叠。

最终将项目数据拆分为左右两组，每组使用独立的纵向容器：

text
项目 1、3、5 → 左列
项目 2、4、6 → 右列

两列分别维护自身的文档流，既保留了原有的分列视差效果，也避免一侧卡片高度影响另一侧的排布。移动端和打印模式下再按照原始项目顺序合并为单列。

增强项目内容层级 ​

项目职责、项目亮点和技术难点原本使用近似样式，快速浏览时难以区分。这次分别赋予了不同的信息表达方式：

  • 项目职责使用编号列表和分隔线，强调工作范围。
  • 项目亮点使用强调色卡片，突出成果与价值。
  • 技术难点使用暖色虚线容器和可展开结构，表达问题与解决过程。

同时整体提高正文、项目描述、工作经历和辅助信息的字号与行高，改善大屏和高分辨率设备上的阅读体验。

完善视觉与主题适配 ​

  • 头像统一使用站点品牌资源 /images/logo_revol_2.svg。
  • 为页脚单独定义浅色和深色主题变量，修复黑夜模式下白色背景过于突兀的问题。
  • 补充模板加载、接口错误、重试与返回首页状态。
  • 增加移动端与打印样式，打印时关闭导航、光效和非必要动画。

方案与取舍 ​

模板层不直接消费后端原始响应，是这次改造中最重要的边界。这样做会增加一层类型和适配代码，但换来了几个长期收益：

  • 后端字段调整时，优先修改适配器，不需要逐个修复模板。
  • 多套模板可以共享同一份数据和请求状态。
  • 动画模板与普通模板可以独立演进。
  • 接口异常、加载反馈和模板切换都有统一入口。

GSAP 模板更适合网页浏览和作品展示，不完全等同于传统纸质简历。因此保留 tech-grid 作为稳重模板，并为 GSAP 模板提供打印降级，而不是让所有使用场景共用同一种强交互设计。

验证结果 ​

  • 简历详情接口数据可以经过适配器正常渲染。
  • 接口完成前不会提前挂载模板或执行动画。
  • 两套模板可以通过配置切换，并采用异步组件加载。
  • 项目卡片在双列布局中不再因为高度差产生重叠。
  • 项目职责、亮点和难点具备清晰的视觉区分。
  • 深色模式下页脚背景与页面主题协调。
  • 移动端保持项目原始顺序并降级为单列展示。
  • VitePress 生产构建通过。

后续计划 ​

  • 继续补充模板级配置，让字号、动效强度和模块顺序可按需调整。
  • 增加更多真实数据组合的响应式与空字段测试。
  • 优化 GSAP 与第三方依赖的按需加载和构建分包。
  • 将 PDF 下载能力与服务器私有文件外链衔接起来。