Add full Chinese comments, README docs, fix bugs (applyDesign state, mk empty string, beforeunload save)

resume/README.md

@@ -0,0 +1,192 @@
+# 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 文件读取

resume/index.html

@@ -1,4 +1,14 @@
 <!DOCTYPE html>
+<!--
+  =============================================================================
+  Resume — 可编辑简历构建器
+  =============================================================================
+  纯静态页面，浏览器直接打开即可使用。
+  依赖：style.css（样式） + app.js（逻辑）
+  所有文字 contenteditable，所见即所得。
+  工具栏：打印PDF | 导出XML | 导入XML | 配色◀▶ | 版式◀▶ | 重置
+  =============================================================================
+-->
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
@@ -33,7 +43,10 @@
 
   <div class="resume-grid">
 
-    <!-- ====== Sidebar ====== -->
+    <!-- ============================================================
+    Sidebar — 左侧个人信息栏
+    内容：姓名/头衔、联系方式、技能标签、教育背景、自定义栏目
+    ============================================================ -->
     <aside class="sidebar">
 
       <!-- Name -->

resume/style.css

@@ -1,3 +1,30 @@
+/**
+ * =============================================================================
+ *  Resume — 样式表
+ * =============================================================================
+ *
+ *  文件结构：
+ *    1. Reset & CSS 变量 (默认值)
+ *    2. @media print — 打印样式（隐藏UI、多页分页、sidebar转顶部）
+ *    3. @media screen — 屏幕端基础布局
+ *    4. Editable — contenteditable 交互样式
+ *    5. Grid Layout — 双栏布局
+ *    6. Typography — 标题、段落、字体
+ *    7. Sidebar — 侧边栏（联系方式、技能、教育）
+ *    8. Sidebar Custom Sections — 动态自定义栏目
+ *    9. Main Content — 主内容区
+ *   10. Section Cards — 经历/项目卡片
+ *   11. Bullet Lists — 要点列表
+ *   12. Add Buttons — 添加按钮
+ *   13. Toolbar — 顶部工具栏
+ *   14. DESIGN THEMES — 12 套版式布局（.page.theme-xxx）
+ *   15. Responsive — 移动端适配
+ *
+ *  颜色不在本文件中硬编码；全部通过 CSS 变量控制，由 app.js 动态注入。
+ *  设计主题通过 .page 上的 CSS class 切换（如 .page.theme-timeline）。
+ * =============================================================================
+ */
+
 /* ===== Reset & Variables ===== */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }