AI Agent 课程文档

切换日光/暗黑模式

040. 用户简历详情、导出与头像上传 ​

学习目标 ​

这一节从模板详情页转到用户简历详情页，并补齐导出、头像上传和错误修复体验。

学完后，你应该能理解：

  • AI 生成代码出错时如何让它辅助修复；
  • 为什么模板详情页需要“重置代码”；
  • 用户简历列表和模板列表有什么相似点；
  • 用户简历详情页为什么需要默认数据；
  • 切换模板时哪些数据应该变，哪些数据不应该变；
  • 导出图片、PDF 和数据分别怎么处理；
  • 上传职业照为什么会遇到跨域；
  • 为什么线上部署后导出图片更稳定。

AI 代码出错后的修复方式 ​

AI 修改模板源码后，偶尔会生成错误代码。

前端代码渲染器会通过安全渲染组件捕获错误，并把错误展示出来。

这时可以把错误截图或报错信息发给 AI，让它根据报错修复代码。

例如源码里少了括号，AI 通常能根据错误信息判断问题，并返回修复后的完整代码。

这不是保证每次都成功，但能显著降低手动排查成本。

重置模板代码 ​

模板详情页需要一个“重置代码”功能。

原因是 AI 修改后可能不满意，或者代码报错。

页面里有两个数据来源：

  • 表单当前编辑值；
  • 后端最后保存的数据。

useDetail 里保留的原始记录，可以代表后端当前值。

点击重置时，把原始记录里的源码重新写回表单。

这样可以撤回到最近一次保存状态。

保存模板信息 ​

模板详情页保存时，会把表单里的模板源码、主题色、预览信息等提交给后端。

保存成功后，要用后端返回的数据刷新当前页面状态。

这样后续再点击重置，才能回到最新保存版本，而不是更早的旧版本。

用户简历列表页 ​

用户简历列表页和模板列表页逻辑很像。

它也需要：

  • 查询列表；
  • 显示卡片；
  • 点击进入详情；
  • 提供新建按钮；
  • 区分列表接口。

因为前面已经封装了列表和详情基础能力，所以用户简历列表页实现会比较直接。

用户简历详情页 ​

用户简历详情页布局和模板详情页类似。

它需要展示：

  • 简历预览；
  • 编辑区域；
  • AI 聊天助手；
  • 导出按钮；
  • 上传头像；
  • 切换模板。

用户简历详情页关注的是某个用户的具体简历，而不是模板本身。

默认简历数据 ​

新建用户简历时，页面不能是完全空白。

需要准备默认数据，例如：

  • 默认模板代码；
  • 默认简历文案；
  • 默认主题色；
  • 默认预览图或结构。

这些默认值让用户进入新建页后马上能看到可编辑内容。

否则 AI、预览和导出功能都没有基础数据可用。

为什么简历文案整段替换更简单 ​

AI 修改简历文案时，可以设计成增量更新，也可以让 AI 返回完整数据。

增量更新很复杂。

例如原来有三段工作经历，AI 返回两段新经历时，系统还要判断第三段是否应该删除。

让 AI 返回完整简历数据，前端整体替换，会更简单、稳定。

后续如果要做细粒度增量更新，再单独设计字段级更新策略。

切换简历模板 ​

用户简历可以切换模板。

切换时应该改变：

  • 模板源码；
  • 模板主题色；
  • 模板次级色；
  • 预览结构。

但用户自己的简历文案不应该丢。

也就是说，换模板只是换展示方式，不是清空用户内容。

选择模板服务 ​

选择模板仍然可以封装成服务：

ts
const template = await selectTemplate();

用户在弹窗里选择模板，函数返回选中的模板数据。

这种写法让详情页逻辑更清楚，不用在页面里写一堆弹窗状态。

导出图片 ​

导出图片时，会获取简历预览区域的 DOM 快照。

这次导出的是高清原图，不做压缩。

导出后，图片可以上传到服务器并返回访问地址。

如果要把简历发给别人，可以直接分享这个图片地址。

导出 PDF ​

导出 PDF 比导出图片更直接。

项目里已经封装了 DOM 转 PDF 的工具函数。

调用时把简历预览 DOM 传进去即可。

它适合用户下载和投递简历。

导出数据 ​

除了图片和 PDF，还可以导出简历数据。

导出数据的价值是：

  • 备份；
  • 迁移；
  • 调试；
  • 给 AI 或其他系统继续处理。

这和导出图片不同，图片是给人看的，数据是给系统处理的。

上传职业照 ​

用户简历里可以上传职业照。

流程是：

  1. 选择一张图片；
  2. 上传到服务器；
  3. 后端返回文件路径；
  4. 把路径写入简历数据的头像字段；
  5. 页面重新渲染预览。

这会复用前面封装的文件选择和上传能力。

跨域对导出图片的影响 ​

本地开发时，页面可能运行在 localhost:3000，图片却来自服务器 80 端口。

这会产生跨域问题。

页面上可能能看到图片，但导出图片时 canvas 可能无法读取跨域图片内容。

结果就是导出的图片里头像显示不出来。

部署到同一个站点路径后，这类问题会少很多。

所以涉及截图、导出图片、导出 PDF 时，跨域是非常关键的问题。

这一节的重点 ​

这一节把 AI 简历从模板编辑推进到用户简历使用。

你需要理解：

  • 模板代码可以让 AI 修复；
  • 用户简历要有默认数据；
  • 切换模板不能丢文案；
  • 导出图片、PDF、数据各自用途不同；
  • 上传头像后要处理跨域和预览。

下一步会进入更核心的能力：让 AI 流式更新简历表单。

AI Agent 课程学习文档。

Copyright © 2026