一个基于 Vue 3 + TypeScript 构建的在线简历填写与生成工具。无需注册，打开即用，支持可视化编辑、主题切换、模块排序、主题色自定义、JSON 导入导出，以及浏览器原生 PDF 打印导出。
在线体验：resume.dodolalorc.cn
项目仓库：github.com/dodolalorc/resume.dodolalorc.cn
| 简约纸张 | 科研保研 | 标题背景色 |
|---|---|---|
 |
 |
 |
| 编辑抽屉 | 设置面板 | PDF 导出 |
|---|---|---|
 |
 |
 |
- 可视化编辑：支持个人信息、教育经历、工作/校园经历、项目经历、奖项等模块。
- 主题系统：内置简约纸张（求职）和科研保研两套主题，支持实时切换。
- 科研保研主题：黑白学术排版，突出 GPA、排名、课程成绩、语言证书、科研项目、技能与校园经历。
- 模块排列顺序：设置面板内可拖拽调整教育经历、工作经历、项目经历、奖项的显示顺序，个人信息固定置顶。
- 主题色配置：支持跟随主题色或从商务蓝、商务绿、黑灰、棕黄等预设中选择；简历背景色支持纯白、灰白、浅蓝白、米白、浅鼠尾草及自定义颜色。
- 简体中文展示：页面默认且仅展示简体中文内容；历史数据中的
{ zh, en }字段会读取zh，暂不提供页面语言切换。 - 教育标签：学校和专业支持多个标签，例如
985、211、双一流、QS Top 100。 - 标题背景色：可选为各板块标题添加主题色直角梯形深色背景，白色字体 + 均匀字间距，背景与分割线无缝衔接，设置状态自动持久化。
- PDF 导出优化：支持自定义 PDF 文件名，多页时自动补齐末页背景，并在多页右下角显示
1/2、2/2页码。 - 数据导入导出：支持 JSON 备份、恢复和迁移；HTML 可离线查看。
| 模块 | 主要字段 |
|---|---|
| 个人信息 | 姓名、邮箱、电话、微信、头像、GitHub、博客、求职意向、科研申请信息、GPA、排名、籍贯、自定义科研信息 |
| 教育经历 | 学校、学位、专业、学校标签、专业标签、GPA、排名、语言证书、主修课程、起止时间、描述 |
| 工作/校园经历 | 公司、部门、职位、起止时间、经历类型、科研技能标题、内容列表 |
| 项目经历 | 项目名称、角色、作者排名、会议/期刊/项目来源、状态、时间、技术栈、项目描述、主要工作、项目成果 |
| 奖项 | 奖项名称、颁发机构、等级、类别、时间 |
编辑抽屉支持点击遮罩关闭，模块导航使用中文名称；新增、删除等操作按钮统一使用图标和颜色区分。
主题配置位于 src/themes/presets/，由 src/themes/index.ts 自动注册。
| 主题 | 面向场景 | 说明 |
|---|---|---|
| 简约纸张 | 校招、应届生、研究型经历 | 白纸化单栏结构，信息密度均衡 |
| 科研保研 | 保研、夏令营、科研助理、学术申请 | 黑白严谨版式，突出学习能力和科研训练 |
新增主题可以运行：
bun run theme:new -- My Theme默认数据位于 src/data/cv.json。页面当前固定使用简体中文展示。文本字段既可以使用普通字符串，也可以继续兼容历史多语言对象；当字段为 { zh, en } 时，页面读取 zh 内容：
{
"name": {
"zh": "林若辰",
"en": "Ruochen Lin"
}
}科研主题示例字段：
{
"profile": {
"school": "星海理工大学",
"major": "计算机科学与技术",
"ranking": "专业排名 3/126",
"gpa": "3.91/4.00",
"researchInfo": [{ "label": "科研方向", "value": "计算机视觉、可信机器学习" }]
},
"education": [
{
"schoolTags": ["双一流"],
"languageCertificates": ["CET-4 612", "CET-6 568"],
"courses": [
{ "name": "数据结构", "grade": "96" },
{ "name": "机器学习", "grade": "94" }
]
}
],
"projects": [
{
"name": "复杂光照条件下的校园道路目标检测研究",
"authorRank": "第二作者",
"venue": "CCF-C 类会议在投",
"status": "投稿中"
}
]
}| 格式 | 说明 |
|---|---|
| 使用浏览器原生打印。导出前可输入文件名，打印保存为 PDF；多页时自动补齐背景并显示页码 | |
| HTML | 生成独立 HTML 文件，内联样式，可离线查看 |
| JSON | 导出当前简历数据，用于备份、迁移和再次导入 |
PDF 导出使用 @page 和 window.print()，不依赖 canvas 截图，适合保留可选择文本和浏览器打印能力。
- Node.js >= 18
- Bun >= 1.0
bun install
bun dev浏览器打开 http://localhost:5173。
bun dev # 启动开发服务
bun run build # 类型检查并构建
bun run build-only # 仅构建生产版本
bun run type-check # TypeScript 类型检查
bun test:unit # 运行单元测试
bun run theme:new -- My Themesrc/
├─ assets/icons/ # SVG 图标
├─ components/ # 通用组件
├─ data/cv.json # 默认简历数据
├─ i18n/ # 简体中文界面文案
├─ themes/
│ ├─ index.ts # 主题加载与样式变量构建
│ ├─ types.ts # 主题类型
│ └─ presets/ # 主题预设
├─ types/resume.ts # 简历数据类型
├─ utils/
│ ├─ localized.ts # 多语言字段工具
│ └─ resume-export.ts # PDF / HTML 导出工具
└─ views/
├─ resume-view.vue # 主页面
├─ components/ # 展示卡片
└─ modules/resume-editor/ # 编辑抽屉
| 类型 | 技术 |
|---|---|
| 框架 | Vue 3.5 + Composition API |
| 语言 | TypeScript |
| 构建 | Vite |
| 状态 | Vue Composition API |
| 路由 | Vue Router |
| 样式 | TailwindCSS + 组件内 CSS |
| 界面文案 | vue-i18n（仅简体中文） |
| 包管理 | Bun |
推荐部署到 Vercel。仓库已提供 vercel.json，默认输出目录为 dist。
简体中文单语言展示（remove-language-toggle）
- 移除页面顶部的语言切换按钮，以及对应的英文/中文切换状态、本地缓存读写和按钮悬停效果。
- 页面展示和编辑流程固定使用简体中文；历史多语言数据结构暂时保留兼容，统一读取
zh字段。 - 后续暂不补齐多语言功能；如需恢复，应重新设计完整的文案、数据编辑、导入导出和测试覆盖。
模块排序与主题色配置（feature/settings-panel）
- 设置面板新增"模块排列顺序"区域，支持拖拽调整教育经历、工作经历、项目经历、奖项的显示顺序（个人信息固定置顶），每项显示当前数据条数。
- 新增"主题色配置模块"，支持跟随主题默认配色，或从商务蓝、商务绿、黑灰、棕黄等预设色板中自由选择。
- 新增"简历背景色"选项，提供纯白、灰白、浅蓝白、米白、浅鼠尾草共五种预设，以及自定义颜色，状态自动持久化。
- 精简主题至两套：简约纸张（求职）和科研保研（学术），去除其余预设主题。
标题背景色（feature/title-background-color）
- 新增"填充标题背景色"开关（设置面板 → 开关卡片区），默认关闭，状态自动持久化。
- 开启后各板块标题（教育经历、工作经历、项目经历、奖项及科研向的掌握技能、校园经历）加主题色深色背景 + 白色字体。
- 背景形状为直角梯形：左侧直角、右侧斜边（
clip-path: polygon），视觉上接近便利贴标签。 - 同行分割线等色、加粗（2 px），起点向左延伸 2 px 覆盖接缝，与梯形底部无缝衔接。
- 字间距均匀（
letter-spacing: 0.15em），适配不超过四字的标题。
历史更新
- 新增科研保研主题和科研导向默认数据。
- 扩展简历数据模型，支持科研申请字段和中英内容。
- 优化编辑抽屉交互、按钮样式和模块中文命名。
- 优化 PDF 导出体验，修复多页背景与页码展示问题。
MIT License