iorebuild
193 lines
6.5 KiB
Markdown
193 lines
6.5 KiB
Markdown
# Resume — 可编辑简历构建器
|
||
|
||
纯静态 Web 页面，浏览器直接打开即可使用。所有内容可在页面上直接编辑，打印即出 PDF。
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 浏览器打开
|
||
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
|
||
<?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 文件读取
|