① 摘要
面向正在求职、实习申请、保研/竞赛材料整理的学生和职场新人，我用 TRAE SOLO 做了一个 Markdown 简历排版工作台。它把「AI 整理内容」「Markdown 编辑」「A4 实时预览」「版式微调」「证件照处理」「PDF 预览/下载」串成一条完整流程，解决简历内容写完后还要反复调格式、导出 PDF 容易走样的问题。
目前项目已部署上线，可直接体验：
Vercel 在线版：https://ai-resume-builder-kappa-wine.vercel.app/
② 真实场景与需求
目标人群：正在准备求职简历的大学生、应届生、转岗求职者，以及需要快速整理个人经历的人。
痛点描述：
作为一个经常需要修改简历的人，我发现真正浪费时间的不是“有没有经历可写”，而是下面这些细节反复消耗精力：
“经历不知道怎么整理”：项目、实习、获奖、课程作业都散在不同地方，直接让 AI 写又担心它编造经历、夸大数据，甚至把截图里的隐私信息也写进去。
“Markdown 写起来舒服，但投递需要 PDF”：Markdown 很适合整理结构化内容，可普通 Markdown 预览不像正式简历；如果再复制到 Word，格式又要重新调一遍。
“简历总是差一点点超过一页”：字号小一点、行距紧一点、页边距少一点，每次都要靠人工试，导出 PDF 后才发现分页还是不对。
“证件照和 PDF 预览经常出问题”：证件照位置需要手动调整，PDF 预览如果依赖浏览器新窗口，还可能被 Edge 或插件拦截。
现有做法的问题：
- 用 Word：排版自由，但格式容易乱，换电脑或导出 PDF 后效果不稳定。
- 用在线模板：模板好看，但内容结构受限，细节调整不够灵活。
- 用 Markdown：内容管理很舒服，但缺少简历级别的 A4 排版和导出能力。
- 只用 AI 对话：能帮忙润色，但无法完成最终排版和 PDF 交付。
所以我想做的不是一个“简历模板展示页”，而是一个真正能完成任务的工具：先让 AI 按约束整理真实经历，再把 Markdown 放进工作台，最后调成一份能投递的 PDF。
③ 作品介绍
作品名称：简历排版工作台
在线体验：https://ai-resume-builder-kappa-wine.vercel.app/
代码仓库：GitHub - 23dzlqhu1/ai-resume-builder · GitHub
核心功能一：AI 提示词辅助整理简历内容
我在工具里内置了一段可复制的简历整理提示词，要求 AI：
- 不虚构经历、奖项、学校、公司、项目成果或数据。
- 只基于用户提供的信息优化表达。
- 忽略身份证号、学号、证书编号、二维码、住址、私人手机号等隐私信息。
- 不确定的信息标注“需本人确认”。
- 输出 Markdown 格式，方便直接粘贴进工具。
这一步的目的不是让 AI 替用户编简历，而是让 AI 做“结构化整理”和“表达优化”。
核心功能二：Markdown 编辑 + A4 实时预览
用户可以在左侧编辑 Markdown，右侧实时看到 A4 简历效果。编辑区支持示例简历、撤销/重做、行数和字符数统计；预览区会把 Markdown 转成正式简历样式，包括标题、分割线、列表、强调文字等。
这里我没有直接用普通 HTML 渲染，而是用 marked 解析 Markdown，再用 DOMPurify 清洗 HTML，避免用户粘贴复杂内容时带来额外风险。
核心功能三：版式控制和多模板切换
简历排版最常见的问题是：内容差一点点超出一页。为了解决这个问题，我做了一个版式控制面板，支持调整：
- 正文字号
- 行高
- 页边距
- 段落间距
- 章节间距
- 是否自动适配一页
- 一键按内容优化
同时内置三套简历主题：
- ATS 经典：稳重、通用，适合大多数投递场景。
- 现代技术：清爽、有一点技术感，适合开发、产品、数据类岗位。
- 正式文雅：更正式，适合学术、行政、文职类场景。
核心功能四：自动适配一页
这个功能是项目里最实用的一点。工具会先测量简历内容高度，如果超过 A4 高度，就逐步压缩行高、字号和页边距，每次调整后重新测量，直到尽量适配一页。
它不是简单把整个页面缩小成一张图，而是按排版参数逐步优化，这样导出的 PDF 仍然保持可读性。预览区也会显示当前状态，例如“适配一页”“已压缩至一页”“内容仍超出”等。
核心功能五：证件照上传、拖拽、缩放
很多中文简历仍然需要证件照，所以我加入了照片功能：
- 支持上传图片。
- 限制 2MB 文件大小，避免页面变慢。
- 默认放在右上角。
- 可以拖动改变位置。
- 可以靠近边缘拖拽调整宽高。
- 自动限制在简历页面范围内，避免拖出纸张。
核心功能六：PDF 预览和下载
PDF 导出使用 html2pdf.js。为了让导出效果和预览一致，我在导出前临时把预览容器固定为 A4 宽度，取消滚动区域影响，导出后再恢复页面状态。
一开始 PDF 预览是打开新窗口，但有同学反馈在 Microsoft Edge 里点击后页面卡了一下，没有正常弹出 PDF。我判断这可能是浏览器或插件拦截了新窗口/Blob 链接，于是后面改成了当前页面内置 PDF 预览弹层。生成过程中会显示进度条和状态提示，完成后再切换到 PDF 预览，并保留“下载 PDF”按钮作为兜底。
④ 用 SOLO 实现的过程
整个项目从想法到上线，主要通过 TRAE SOLO 辅助完成。我的做法不是一句“帮我做一个简历工具”，而是不断把问题拆小，再让 SOLO 帮我实现和验证。
第 0 步：参考比赛规则和优秀作品
我先让 SOLO 帮我理解 SOLO 挑战赛的投稿要求：需要写真实场景、实践过程、成果展示和总结，而不是只贴一个项目链接。后面又参考社区里的优秀投稿，发现好的文章通常会突出“真实痛点 + 产品截图 + 踩坑记录”，所以我也按这个思路整理作品。
第一步：需求拆解与架构设计
我把需求拆成几个用户故事：
- 作为求职者，我希望先用 AI 把经历整理成可信的 Markdown。
- 作为简历编辑者，我希望左边改内容，右边实时看到 A4 效果。
- 作为投递者，我希望快速把简历压缩到一页。
- 作为需要证件照的用户，我希望照片能上传、移动、调整大小。
- 作为最终使用者，我希望能预览 PDF，再决定是否下载。
SOLO 根据这些需求帮我确定了 Vue 3 + TypeScript + Vite 的技术栈，并把项目拆成编辑区、预览区、版式面板、照片上传、PDF 导出、状态管理等模块。
第二步：核心功能开发
最先完成的是 Markdown 编辑和 A4 预览。SOLO 帮我搭好了基础组件结构，我再不断补充细节，比如撤销/重做、示例简历、字符统计、空状态展示。
接着是主题系统。这里没有把样式写死，而是抽成 resumeThemes 配置，用 CSS 变量控制颜色、字体、标题样式、分割线、照片圆角。这样后续新增模板不需要改预览组件。
第三步：自动排版算法
自动适配一页是最复杂的功能。SOLO 先实现了基础测量逻辑：用 scrollHeight 判断内容是否超过 A4 高度。后来我们继续迭代，让它不是一次性暴力缩小，而是按优先级调整：
- 先压缩行高。
- 再缩小字号。
- 最后减少页边距。
- 每次调整后重新测量。
- 设置最大迭代次数，避免死循环。
这个过程让我感受到 SOLO 比单纯代码补全更像一个可以一起调试的搭档：它能先实现一个可运行版本，再根据实际体验继续收敛。
第四步：踩坑与解决
坑 1：PDF 预览被浏览器或插件拦截
现象：同学用 Edge 点击“预览 PDF”时，页面卡了一下，但没有弹出新窗口。
原因：原方案依赖 window.open 和 blob 新页面，容易被浏览器策略或插件拦截。
解决：改成当前页面内置 PDF 预览弹层，用 iframe 显示生成的 Blob，同时提供下载按钮兜底。
坑 2：Vercel 国内访问慢
现象：同学反馈网站打开可能要 30 秒。
排查：我用请求计时发现首页 HTML 很小，但 Vercel 链路在国内网络下可能比较慢。
解决：先做前端层面的优化，把编辑器、预览区、照片上传改成按需加载，并给 Vercel 静态资源加缓存配置。也尝试过腾讯 EdgeOne Pages，但默认域名在国内访问存在 401 限制，最后决定暂时保留 Vercel。
坑 3：证件照拖拽边界处理
现象：照片如果随意拖拽，可能被拖出 A4 页面，或者缩放到异常尺寸。
解决：增加 clampPhotoPosition 和 clampPhotoSize，把照片的位置和尺寸限制在页面内部。
第五步：部署上线
项目最终部署在 Vercel。每次推送到 GitHub main 分支后，Vercel 会自动构建和发布。上线后，我让同学用不同浏览器试用，根据反馈继续修复 PDF 预览和访问速度问题。
【图片 8：放 GitHub 仓库或 Vercel 部署成功截图。可以和在线链接放在“成果展示”里。】
⑤ 导出展示
这里是我自己的简历，所以打个码哈哈
在线体验：
https://ai-resume-builder-kappa-wine.vercel.app/
代码仓库：
技术栈：
- Vue 3 + TypeScript + Vite
- Tailwind CSS
- marked + DOMPurify
- html2pdf.js
- Vercel 自动部署
已实现能力：
- AI 简历整理提示词
- Markdown 简历编辑
- A4 实时预览
- 三套简历主题
- 字号、行高、页边距、段落间距、章节间距调整
- 自动适配一页
- 一键按内容优化
- 证件照上传、拖拽、缩放
- PDF 内置预览
- PDF 下载
- Vercel 静态部署
⑥ 效果与总结
这次用 SOLO 做项目，最大的收获是：它不只是帮我写代码，更像是把一个模糊想法推进成可上线工具的执行伙伴。
在需求阶段，SOLO 帮我把“做一个简历工具”拆成了内容整理、编辑预览、版式控制、照片处理、PDF 导出等明确模块。这个拆解很重要，因为它决定了项目不是一个静态展示页，而是一个可以真正完成任务的工作台。
在实现阶段，SOLO 帮我快速搭起 Vue 项目结构，并完成很多繁琐但关键的细节，比如 Markdown 渲染、主题变量、自动测量高度、PDF 导出配置、拖拽缩放边界。很多功能如果我手写，可能会在细节上反复卡很久。
在测试阶段，SOLO 也帮我根据真实反馈继续优化。比如同学反馈 Vercel 打开慢，我们就一起分析资源体积和请求耗时；同学反馈 Edge 预览 PDF 失败，我们就把新窗口预览改成页面内预览。这个过程比一次性生成代码更有价值，因为真实项目的问题往往是在上线后才出现。
目前这个工具已经能完成一条完整流程：用户先让 AI 根据真实经历输出 Markdown，再在工作台中编辑和排版，最后预览并下载 PDF。它不一定是一个复杂的大项目，但解决的是一个非常具体、真实、高频的问题。
后续我还想继续做：
- 增加本地保存和多份简历管理。
- 增加导入 Markdown 文件功能。
- 增加更多行业模板。
- 增加手动分页符。
- 增加导出 DOCX 或图片的能力。
对我来说，这次 SOLO 挑战赛最有意义的地方，是让我把一个“我自己也会用”的小工具真正做出来，并且在大家的反馈中继续打磨它。