iorebuildResume — 可编辑简历构建器
纯静态 Web 页面，浏览器直接打开即可使用。所有内容可在页面上直接编辑，打印即出 PDF。
快速开始
# 浏览器打开
open index.html
# 或直接双击 index.html
无需任何构建工具、包管理器或服务器。
功能
| 功能 | 说明 |
|---|---|
| ✏️ 所见即所得编辑 | 所有文字 contenteditable，点击直接修改 |
| ➕ 动态增删条目 | 工作经历、项目经历、技能标签、侧边栏栏目均可自由增删 |
| 🎨 24 套颜色主题 | 经典蓝、暗夜黑、墨绿、酒红… ◀ ▶ 左右切换 |
| 📐 12 套设计版式 | 经典双栏、时间轴、卡片式、极简单栏… |
| 🖨️ 打印导出 PDF | Ctrl+P → 另存为 PDF，自动隐藏编辑 UI，多页自然分页 |
| 📤 XML 导入导出 | 完整数据 + 主题 + 版式全部序列化，可备份/恢复/分享 |
| 💾 自动保存 | localStorage 自动持久化，关闭浏览器不丢数据 |
文件结构
resume/
├── index.html ← 页面结构（纯 HTML，所有区段带 contenteditable）
├── style.css ← 样式表（基础样式 + 12 套设计主题 + 打印样式）
├── app.js ← 全部交互逻辑（IIFE 模块，挂载到 window.Resume）
└── README.md ← 本文件
各文件职责
| 文件 | 行数 | 职责 |
|---|---|---|
index.html |
~150 | DOM 结构，通过 onclick="Resume.xxx()" 绑定事件 |
style.css |
~690 | CSS 变量默认值、屏幕/打印双布局、12 套 .page.theme-xxx |
app.js |
~560 | 数据采集/还原、主题切换、XML 序列化、自动保存、DOM 操作 |
架构说明
数据流
用户编辑 DOM
│
▼
input/focusout/keyup 事件
│
▼
save() ── 400ms debounce ──► snapshot() 采集 DOM
│ │
│ ▼
│ JSON.stringify
│ │
│ ▼
│ localStorage
│
└── beforeunload ──► 强制保存
snapshot / restore 闭环
snapshot()
DOM ──────────────► 数据对象
▲ │
│ ▼
│ JSON / XML
│ │
│ ▼
└──── restore() ◄── 存储
- snapshot() — 遍历 DOM 树，提取所有 contenteditable 元素内容，组装纯数据对象
- restore() — 清空动态容器，用工厂函数重建 DOM，填入数据
- 两者格式完全对称，确保闭环无丢失
主题系统
颜色主题和设计主题是正交的（24 × 12 = 288 种组合）：
颜色主题（24 种） 设计主题（12 种）
┌─────────────────┐ ┌─────────────────┐
│ CSS 变量注入 │ │ CSS class 切换 │
│ :root 上设置 │ │ .page 上加 class │
│ --ink, --accent │ │ .theme-timeline │
│ --border, --bg │ │ .theme-cards │
│ … │ │ … │
└─────────────────┘ └─────────────────┘
│ │
└──────────┬───────────────────┘
▼
最终视觉效果
XML 格式
导出/导入使用统一 XML 结构，根元素携带主题属性：
<?xml version="1.0" encoding="UTF-8"?>
<resume theme="经典蓝" design="经典双栏">
<name>张三</name>
<title>嵌入式软件工程师</title>
<contact>
<item label="邮箱">zhangsan@example.com</item>
<item label="手机">13800000000</item>
<item label="城市">广州</item>
<item label="链接">github.com/zhangsan</item>
</contact>
<skills>
<skill>C/C++</skill>
<skill>STM32</skill>
</skills>
<education>
<school>某某大学</school>
<major>电子信息工程 · 本科</major>
<date>2016 – 2020</date>
</education>
<sidebarSections>
<section>
<title>证书</title>
<content>嵌入式系统设计师</content>
</section>
</sidebarSections>
<summary>概述文本…</summary>
<experiences>
<experience>
<title>公司名称</title>
<date>2022 – 至今</date>
<subtitle>职位</subtitle>
<bullets>
<bullet>工作内容要点 1</bullet>
<bullet>工作内容要点 2</bullet>
</bullets>
</experience>
</experiences>
<projects>…</projects>
<extras>…</extras>
</resume>
设计主题一览
| # | 名称 | CSS class | 效果 |
|---|---|---|---|
| 1 | 经典双栏 | theme-classic |
左 180px + 右主内容（默认） |
| 2 | 极简单栏 | theme-minimal |
全宽单栏，侧栏压缩到顶部横排 |
| 3 | 右侧栏 | theme-rightbar |
侧栏在右，主内容在左 |
| 4 | 顶栏式 | theme-topbar |
个人信息横排顶部，下方全宽 |
| 5 | 左色条 | theme-accentbar |
侧栏左侧 accent 色 4px 粗竖线 |
| 6 | 宽侧栏 | theme-wideside |
侧栏加宽至 240px |
| 7 | 紧凑 | theme-compact |
缩小间距字号，高信息密度 |
| 8 | 卡片式 | theme-cards |
主内容区 section 用卡片包裹 |
| 9 | 时间轴 | theme-timeline |
日期提取到左侧圆点标记 |
| 10 | 双色块 | theme-duotone |
侧栏带浅色背景色块 |
| 11 | 线条风 | theme-lines |
section 间 accent 色粗线分割 |
| 12 | 无框 | theme-frameless |
去掉所有边框和背景装饰 |
打印说明
- 快捷键：
Ctrl+P（Windows/Linux）或Cmd+P（Mac） - 导出 PDF：打印对话框中选择"另存为 PDF"
- 打印时自动隐藏工具栏、添加按钮、删除按钮
- 第二页起 sidebar 不重复出现，主内容全宽
- 设计主题在打印时不生效（统一紧凑单栏布局）
- 颜色主题的 accent 色在打印中保留
浏览器兼容
- Chrome / Edge 90+
- Firefox 90+
- Safari 15+
- 任何支持 CSS Grid + CSS 自定义属性的现代浏览器
技术栈
- 纯 HTML5 + CSS3 + Vanilla JavaScript (ES6+)
- CSS Grid 双栏布局
- CSS 自定义属性（变量）主题系统
- DOMParser XML 序列化/反序列化
- localStorage 持久化
- Blob + URL.createObjectURL 文件下载
- FileReader 文件读取