一个纯前端、无需注册的在线简历编辑与美化工具。支持 4 套精美模板、实时预览、拖拽排序、自定义模块、照片上传和一键导出 PDF / HTML，所有数据保存在浏览器本地，无需担心隐私泄露。
- 经典模板：传统双栏布局，包含技能进度条，适合金融、法律、国企等正式场合
- 现代模板：左侧深色侧边栏 + 白色内容区，联系方式与技能置于侧边，支持头像展示
- 极简模板：大面积留白、居中排版、标签式技能展示，适合设计师、产品经理、学术岗位
- 创意模板：顶部彩色横幅、环形技能图、卡片式经历展示，适合互联网、创意行业
- 全字段编辑：个人信息、工作经历、教育背景、专业技能、项目经验、证书、语言，每个字段均可自由编辑
- 动态增删：每种条目（经历、教育、技能等）均可添加或移除，数量不限
- 拖拽排序：每个模块内的条目支持拖拽重新排列，按住拖拽手柄上下移动即可调整顺序
- 模块显隐：每个模块可单独开关，支持一键全显/全隐，适应不同岗位投递需求
- 折叠面板：表单区域支持按模块折叠，聚焦当前编辑内容
- 自定义模块：可添加任意名称的自定义模块（如"获奖荣誉""社团活动"等），每个模块包含标题、副标题、日期、描述字段
- 照片上传：支持上传个人照片（JPG/PNG），在「现代」模板的圆形头像和「创意」模板的横幅中展示
- 8 种预设主题色 + 原生取色器，自由选择品牌色
- 字号调节：10px–20px 范围内步进调整，适配不同内容密度
- 实时预览：左侧编辑，右侧即显效果，所见即所得
- 四模板即时切换：所有模板共享同一份数据，切换模板无需重新填写
- 本地持久化：所有数据自动保存至浏览器
localStorage，刷新页面或关闭浏览器不会丢失 - PDF 导出：基于
html2canvas+jsPDF，精确渲染 A4 尺寸，支持多页内容 - HTML 导出：打包为独立的自包含 HTML 文件，内嵌全部 CSS 样式，可直接在浏览器打开或打印
- 一键恢复默认：提供示例数据填充，也支持一键重置为空模板
| 类别 | 技术 |
|---|---|
| 框架 | React 19 |
| 构建 | Vite 8 |
| 包管理 | pnpm |
| 图标 | Lucide React |
| PDF 导出 | html2canvas + jsPDF |
| HTML 导出 | DOM Clone + Blob Download |
| 拖拽排序 | @dnd-kit |
| 样式 | 纯 CSS（零运行时，无第三方 UI 库） |
# 克隆项目
git clone https://github.com/Simon404Error/resume-builder.git
cd resume-builder
# 安装 pnpm（如未安装）
npm install -g pnpm
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 生产构建
pnpm build启动后浏览器访问 http://localhost:5173/ 即可使用。
- 选择模板：顶部工具栏点击「经典 / 现代 / 极简 / 创意」切换模板风格
- 填写信息：左侧表单面板逐项填写个人信息、经历、技能等
- 上传照片（可选）：在「个人信息」区域点击上传照片，支持 JPG/PNG 格式
- 调整样式：选择主题色、调节字号，预览区即时反馈
- 导出文件：点击右上角「HTML」或「PDF」按钮将简历导出为对应格式
- 拖拽排序：按住每个条目左侧的拖拽手柄上下拖动，即可调整该条目在当前模块中的排列顺序
- 隐藏模块：不需要展示的模块（如证书、语言），点击模块标题右侧的勾选框即可在预览中隐藏
- 添加条目：每个模块底部有「添加经历 / 添加技能」等按钮，点击即可新增
- 删除条目：每个条目卡片右上角有删除按钮
- 自定义模块：点击底部的「添加自定义模块」按钮，输入模块名称后可添加任意标题/副标题/日期/描述条目
- 重置数据：点击恢复默认按钮可将所有内容替换为示例数据
所有填写的内容仅存储在浏览器本地，不会上传到任何服务器。照片通过 FileReader 读取为 base64 存储在本地，导出 PDF 和 HTML 的过程完全在本地完成。
resume-builder/
├── public/ # 静态资源
├── src/
│ ├── components/
│ │ ├── templates/ # 简历模板
│ │ │ ├── Classic.jsx # 经典模板
│ │ │ ├── Modern.jsx # 现代模板
│ │ │ ├── Minimal.jsx # 极简模板
│ │ │ └── Creative.jsx # 创意模板
│ │ ├── ResumeForm.jsx # 左侧编辑表单
│ │ ├── ResumePreview.jsx # 右侧预览面板 + 模板切换
│ │ └── Toolbar.jsx # 顶部工具栏
│ ├── data/
│ │ └── defaultResume.js # 默认示例数据
│ ├── utils/
│ │ ├── pdfExport.js # PDF 导出逻辑
│ │ └── htmlExport.js # HTML 导出逻辑
│ ├── App.jsx # 主应用（状态管理、布局）
│ ├── App.css # 全局样式 + 四套模板样式
│ └── main.jsx # 入口文件
├── index.html
├── package.json
└── vite.config.js
如果你需要添加新模板：
- 在
src/components/templates/下创建新的.jsx文件 - 组件接收两个 props：
data：简历数据对象（结构见src/data/defaultResume.js）accentColor：CSS 颜色字符串
- 使用
style={{ '--accent': accentColor }}将主题色注入模板 - 在
src/components/ResumePreview.jsx中注册新模板
// 注册示例
const templates = {
classic: { component: Classic, label: '经典' },
modern: { component: Modern, label: '现代' },
minimal: { component: Minimal, label: '极简' },
creative: { component: Creative, label: '创意' },
custom: { component: Custom, label: '自定义' }, // 新增
};生产构建后 dist/ 目录为纯静态文件，可部署到任意静态托管服务：
pnpm build
# 使用任意静态服务预览
npx serve distMIT