# 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 文件读取