AI Agent 课程文档

切换日光/暗黑模式

037. 简历模板详情页与代码渲染器 ​

学习目标 ​

这一节进入 AI 简历前端页面，实现模板详情页和代码渲染能力。

学完后，你应该能理解：

  • 代码渲染器为什么是 AI 简历的核心；
  • ReactCodeRender 和真正执行代码的文件分别负责什么；
  • 为什么要有安全渲染兜底；
  • TypeScript 类型为什么也能帮助约束 AI 输出；
  • 简历模板详情页如何分区布局；
  • 新建模板和编辑模板的默认视图为什么不同；
  • 为什么表单里要放隐藏字段；
  • 如何初步接入聊天助手组件。

代码渲染器的职责 ​

AI 简历的模板不是普通静态 HTML。

模板内容会以源码形式保存，前端需要把这段源码编译、执行，再渲染成 React 组件。

这里会拆成两个层次：

  • ReactCodeRender：偏组件外壳，负责接收源码和数据；
  • 真正执行代码的模块：负责编译源码、解析依赖、执行代码并拿到渲染函数。

真正复杂的是后者。

它会决定：AI 生成或修改后的代码，能不能被页面安全地展示出来。

编译和执行源码 ​

源码不能直接当字符串显示。

它需要经过几步：

  1. 用 Babel 编译；
  2. 分析代码里用到哪些依赖；
  3. 从已加载的依赖里取出对应对象；
  4. 执行代码；
  5. 拿到代码返回的组件或渲染函数；
  6. 把简历数据传进去渲染。

这就是“AI 改源码后页面能立刻预览”的基础。

动态库加载器 ​

代码渲染器依赖一些外部库。

这些库可以来自：

  • public 目录下的静态文件；
  • Webpack / 打包产物；
  • CDN。

走 CDN 时，类型提示可能不准确，还需要额外安装类型。

把依赖放到自己的静态资源里，可以更可控；配合版本号，还能处理浏览器缓存问题。

注释很重要 ​

代码渲染器这种逻辑不适合完全裸写。

它涉及：

  • 编译；
  • 动态执行；
  • 依赖注入；
  • 错误处理；
  • 渲染兜底。

这些地方应该写清楚注释。

AI 可以帮忙补注释，但你要自己判断注释是否真的解释了关键逻辑。

安全渲染兜底 ​

动态执行代码很容易报错。

例如源码里多一个错误字符，组件渲染就会失败。

所以需要一个安全渲染组件，例如 SafeRender。

它的作用是：

  • 捕获渲染异常；
  • 避免整个页面崩掉；
  • 显示错误信息；
  • 让用户还能继续修改源码。

AI 编辑代码时，错误是常态。没有错误兜底，页面体验会非常差。

简历数据类型 ​

AI 简历需要定义清晰的数据类型。

例如：

  • 简历标题；
  • 头像地址；
  • 主题色；
  • 次级色；
  • 基本信息；
  • 教育经历；
  • 工作经历；
  • 项目经历；
  • 技能；
  • 其他模块。

这些类型不仅给前端开发者提供类型提示，也可以作为提示词的一部分发给模型。

当你要求模型输出固定结构数据时，用 TypeScript 类型约束它通常很有效。

为什么 TypeScript 类型适合约束模型 ​

如果想让模型生成某种结构，给它一段 TS 类型定义通常比长篇自然语言描述更清晰。

例如：

ts
type ResumeBasicInfo = {
  label: string;
  value: string;
  icon?: string;
};

模型更容易理解字段名、层级、是否可选。

这对 AI 简历很重要，因为模型要修改的不是随便一段文字，而是结构化简历数据和源码。

模板列表和详情页 ​

模板列表页相对简单。

它负责：

  • 查询模板列表；
  • 展示模板预览；
  • 点击进入详情；
  • 新建模板入口。

模板详情页更复杂。

它要处理：

  • 新建或编辑；
  • 预览；
  • 源码编辑；
  • 表单字段；
  • AI 聊天助手；
  • 保存；
  • 导出或截图相关 DOM。

详情页布局 ​

模板详情页大致分成三块。

页面上方是固定高度区域。

下方撑满剩余高度，并分成左右两列：

  • 左侧是主要编辑和预览区域；
  • 右侧是固定宽度的辅助区域，例如表单或聊天助手。

这种布局适合同时看预览、源码和配置。

写这类页面时，要注意高度计算，否则底部区域容易溢出或滚动异常。

新建和编辑的默认视图 ​

新建模板时，默认应该进入代码视图。

原因是新模板还没有可用预览，用户需要先编辑源码。

编辑已有模板时，可以默认进入预览视图。

因为已有模板已经有内容，用户更关心当前效果。

这类细节由 useDetail 加载完数据后的回调控制。

默认主题色和次级色 ​

模板有默认主题色和次级色。

这些颜色不仅是表单字段，也会影响预览渲染。

渲染简历时，需要把表单里的颜色合并进简历数据，再传给代码渲染器。

这样用户修改颜色后，预览才能同步变化。

隐藏字段也要进表单 ​

有些字段不直接显示，但仍然要加入表单。

例如源码字段、主题色、次级色。

如果字段没有注册到表单里，保存时可能拿不到它的值。

所以即使某些字段不展示，也需要通过隐藏表单项或其他方式让表单知道它们存在。

渲染简历内容 ​

页面会把模板源码和简历数据传给代码渲染器。

渲染器负责把源码变成组件，再把数据填进去。

这一步跑通后，模板详情页就能看到真正的简历效果。

如果源码错误，安全渲染组件会负责兜底。

初始接入聊天助手 ​

页面右侧会接入聊天助手组件。

初始接入时，先解决几个基础问题：

  • 组件能显示；
  • 高度撑满；
  • 宽度不溢出；
  • 不需要的默认按钮先去掉；
  • 中文文案要正常显示；
  • 后续再接模型对话。

此时聊天助手还不一定能真正调用模型，但布局和组件挂载已经准备好。

这一节的重点 ​

这一节把 AI 简历前端从工具层推进到页面层。

你需要理解：

  • 源码要编译执行后才能预览；
  • 动态代码必须有错误兜底；
  • 简历类型既服务前端，也服务 AI 约束；
  • 详情页要同时管理表单、预览、代码和聊天助手；
  • 新建和编辑要有不同默认体验。

后面会继续把聊天助手接到真实模型，让它参与修改简历源码和内容。

AI Agent 课程学习文档。

Copyright © 2026