Add full Chinese comments, README docs, fix bugs (applyDesign state, mk empty string, beforeunload save)
This commit is contained in:
iorebuild
@@ -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 文件读取
|
||||
+669
-179
File diff suppressed because it is too large
Load Diff
+14
-1
@@ -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 -->
|
||||
|
||||
@@ -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; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user