iorebuild
566 lines
27 KiB
JavaScript
566 lines
27 KiB
JavaScript
/**
|
||
* Resume — interactive resume builder
|
||
* 24 colour themes + 12 design/layout themes. All config in one XML.
|
||
*/
|
||
|
||
const Resume = (() => {
|
||
'use strict';
|
||
|
||
const STORAGE_KEY = 'resume_data';
|
||
|
||
// ============================================================
|
||
// COLOUR THEMES — 24 presets
|
||
// ============================================================
|
||
const COLOR_THEMES = [
|
||
{ name:'经典蓝', vars:{'--ink':'#1a1a1a','--ink-muted':'#555','--accent':'#1e5fa8','--accent-light':'#e8f0fa','--border':'#ddd','--bg':'#fff','--surface':'#f8f9fa','--body-bg':'#e8ecf1','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'暗夜黑', vars:{'--ink':'#e0e0e0','--ink-muted':'#999','--accent':'#5b9bd5','--accent-light':'#1e2a3a','--border':'#444','--bg':'#1e1e1e','--surface':'#2a2a2a','--body-bg':'#121212','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'墨绿', vars:{'--ink':'#1a2a1a','--ink-muted':'#5a7a5a','--accent':'#2d6a4f','--accent-light':'#d8f3dc','--border':'#b7c9b7','--bg':'#fafdfa','--surface':'#f0f7f0','--body-bg':'#dde8dd','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'酒红', vars:{'--ink':'#2a1a1a','--ink-muted':'#7a5555','--accent':'#8b1a2b','--accent-light':'#fce8ec','--border':'#d4b8b8','--bg':'#fefafa','--surface':'#faf0f0','--body-bg':'#ece0e0','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'石板灰', vars:{'--ink':'#1f1f1f','--ink-muted':'#666','--accent':'#4a4a4a','--accent-light':'#e8e8e8','--border':'#ccc','--bg':'#fafafa','--surface':'#f0f0f0','--body-bg':'#e0e0e0','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'琥珀暖', vars:{'--ink':'#2a2218','--ink-muted':'#7a6a50','--accent':'#b85c00','--accent-light':'#fff3e0','--border':'#d4c8b0','--bg':'#fffdf8','--surface':'#fff8ee','--body-bg':'#f0e8d8','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'青蓝', vars:{'--ink':'#1a2228','--ink-muted':'#5a7a88','--accent':'#0d7377','--accent-light':'#d4f4f5','--border':'#b8d4d6','--bg':'#f8fdfd','--surface':'#eef8f8','--body-bg':'#d8eaea','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'紫罗兰', vars:{'--ink':'#1f1a28','--ink-muted':'#6a5a88','--accent':'#6b3fa0','--accent-light':'#f0e8fc','--border':'#c8b8e0','--bg':'#fdfafe','--surface':'#f6eefc','--body-bg':'#e8daf0','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'极简黑白', vars:{'--ink':'#000','--ink-muted':'#555','--accent':'#222','--accent-light':'#eee','--border':'#ccc','--bg':'#fff','--surface':'#f8f8f8','--body-bg':'#f0f0f0','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'报纸风', vars:{'--ink':'#1a1a1a','--ink-muted':'#555','--accent':'#8b0000','--accent-light':'#fdf0f0','--border':'#ccc','--bg':'#fefef8','--surface':'#f8f8f0','--body-bg':'#e8e8d8','--font-sans':'"Noto Serif SC","Source Han Serif SC","SimSun",Georgia,serif'} },
|
||
{ name:'科技蓝', vars:{'--ink':'#e8f0ff','--ink-muted':'#8ab4f8','--accent':'#4da6ff','--accent-light':'#0d1b3e','--border':'#2a4480','--bg':'#0a1628','--surface':'#112240','--body-bg':'#060d1a','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'暖沙', vars:{'--ink':'#3a3028','--ink-muted':'#8a7a68','--accent':'#c07a40','--accent-light':'#fdf0e4','--border':'#d8c8b8','--bg':'#fefaf6','--surface':'#faf0e6','--body-bg':'#ede0d2','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'深海', vars:{'--ink':'#d0dce8','--ink-muted':'#7a96b0','--accent':'#5ec4d0','--accent-light':'#0f2838','--border':'#2a5068','--bg':'#0c1e2c','--surface':'#152a3c','--body-bg':'#06121c','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'日落橙', vars:{'--ink':'#2a2018','--ink-muted':'#8a6a48','--accent':'#e05530','--accent-light':'#fef0e8','--border':'#e0c8b0','--bg':'#fffaf6','--surface':'#fef4ea','--body-bg':'#f0e2d2','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'薄荷', vars:{'--ink':'#1a2822','--ink-muted':'#5a8a72','--accent':'#2eac7a','--accent-light':'#d8fcec','--border':'#b8d8c8','--bg':'#f8fefa','--surface':'#eefaf4','--body-bg':'#d8ece2','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'薰衣草', vars:{'--ink':'#2a2230','--ink-muted':'#8a7a98','--accent':'#8e6bb8','--accent-light':'#f4ecfc','--border':'#d8c8e8','--bg':'#fdf8ff','--surface':'#f8f0fc','--body-bg':'#ece0f8','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'木炭', vars:{'--ink':'#ddd','--ink-muted':'#999','--accent':'#a0a0a0','--accent-light':'#333','--border':'#555','--bg':'#2a2a2a','--surface':'#333','--body-bg':'#1a1a1a','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'枫叶', vars:{'--ink':'#2a1e18','--ink-muted':'#8a6048','--accent':'#c04020','--accent-light':'#fef0e8','--border':'#e0c0a8','--bg':'#fffaf6','--surface':'#fef4ea','--body-bg':'#f0e0d0','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'冰川', vars:{'--ink':'#1a2428','--ink-muted':'#5a7a88','--accent':'#4a9eb5','--accent-light':'#dff4f8','--border':'#b8d4dc','--bg':'#f8fcfd','--surface':'#eef8fa','--body-bg':'#d8eaf0','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'玫瑰金', vars:{'--ink':'#2a2022','--ink-muted':'#8a6870','--accent':'#c06078','--accent-light':'#fce8f0','--border':'#e8c0cc','--bg':'#fef8fa','--surface':'#fcf0f4','--body-bg':'#f0dce2','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'翡翠', vars:{'--ink':'#e0f0e8','--ink-muted':'#7ab898','--accent':'#4cdb9a','--accent-light':'#0f301e','--border':'#2a6840','--bg':'#0c1e12','--surface':'#152c1c','--body-bg':'#061208','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'午夜蓝', vars:{'--ink':'#c8d8f0','--ink-muted':'#6a8ab8','--accent':'#6b9ce0','--accent-light':'#102240','--border':'#304868','--bg':'#0e1628','--surface':'#182438','--body-bg':'#060c18','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'陶土', vars:{'--ink':'#2a201c','--ink-muted':'#8a6858','--accent':'#c06840','--accent-light':'#fef0e8','--border':'#e0c8b8','--bg':'#fefaf8','--surface':'#fcf2ec','--body-bg':'#f0e2d8','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
{ name:'铂金', vars:{'--ink':'#2a2a2a','--ink-muted':'#888','--accent':'#7a8a9a','--accent-light':'#e8ecf0','--border':'#d0d4d8','--bg':'#fcfcfc','--surface':'#f4f4f6','--body-bg':'#e4e6e8','--font-sans':'"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif'} },
|
||
];
|
||
|
||
// ============================================================
|
||
// DESIGN THEMES — 12 layout presets
|
||
// ============================================================
|
||
const DESIGN_THEMES = [
|
||
{ name:'经典双栏', cls:'theme-classic' },
|
||
{ name:'极简单栏', cls:'theme-minimal' },
|
||
{ name:'右侧栏', cls:'theme-rightbar' },
|
||
{ name:'顶栏式', cls:'theme-topbar' },
|
||
{ name:'左色条', cls:'theme-accentbar' },
|
||
{ name:'宽侧栏', cls:'theme-wideside' },
|
||
{ name:'紧凑', cls:'theme-compact' },
|
||
{ name:'卡片式', cls:'theme-cards' },
|
||
{ name:'时间轴', cls:'theme-timeline' },
|
||
{ name:'双色块', cls:'theme-duotone' },
|
||
{ name:'线条风', cls:'theme-lines' },
|
||
{ name:'无框', cls:'theme-frameless' },
|
||
];
|
||
|
||
let colorIdx = 0;
|
||
let designIdx = 0;
|
||
|
||
// ---- Colour theme helpers ----
|
||
function applyColor(idx) {
|
||
idx = ((idx % COLOR_THEMES.length) + COLOR_THEMES.length) % COLOR_THEMES.length;
|
||
colorIdx = idx;
|
||
const t = COLOR_THEMES[idx];
|
||
const root = document.documentElement;
|
||
Object.entries(t.vars).forEach(([k, v]) => root.style.setProperty(k, v));
|
||
const label = document.getElementById('themeLabel');
|
||
if (label) label.textContent = t.name;
|
||
save();
|
||
}
|
||
function prevTheme() { applyColor(colorIdx - 1); }
|
||
function nextTheme() { applyColor(colorIdx + 1); }
|
||
function setColorByName(name) {
|
||
const idx = COLOR_THEMES.findIndex(t => t.name === name);
|
||
if (idx >= 0) applyColor(idx);
|
||
}
|
||
function getColorName() { return COLOR_THEMES[colorIdx].name; }
|
||
|
||
// ---- Design theme helpers ----
|
||
function applyDesign(idx) {
|
||
idx = ((idx % DESIGN_THEMES.length) + DESIGN_THEMES.length) % DESIGN_THEMES.length;
|
||
// Remove old design class
|
||
const page = document.querySelector('.page');
|
||
if (page) {
|
||
DESIGN_THEMES.forEach(d => page.classList.remove(d.cls));
|
||
designIdx = idx;
|
||
page.classList.add(DESIGN_THEMES[idx].cls);
|
||
}
|
||
const label = document.getElementById('designLabel');
|
||
if (label) label.textContent = DESIGN_THEMES[idx].name;
|
||
save();
|
||
}
|
||
function prevDesign() { applyDesign(designIdx - 1); }
|
||
function nextDesign() { applyDesign(designIdx + 1); }
|
||
function setDesignByName(name) {
|
||
const idx = DESIGN_THEMES.findIndex(d => d.name === name);
|
||
if (idx >= 0) applyDesign(idx);
|
||
}
|
||
function getDesignName() { return DESIGN_THEMES[designIdx].name; }
|
||
|
||
// ============================================================
|
||
// DATA MODEL
|
||
// ============================================================
|
||
function snapshot() {
|
||
return {
|
||
_theme: getColorName(),
|
||
_design: getDesignName(),
|
||
name: qs('h1 > span:first-child')?.innerHTML || '',
|
||
title: qs('h1 > .sub')?.innerHTML || '',
|
||
contact: collect('.info-item span:last-child'),
|
||
skills: collect('#skillTags .skill-tag', el => el.textContent.replace('×','').trim()),
|
||
education: {
|
||
school: qs('.editable-block h3')?.innerHTML || '',
|
||
major: qs('.editable-block .section-sub')?.innerHTML || '',
|
||
date: qs('.editable-block .date')?.innerHTML || '',
|
||
},
|
||
sidebarCustom: collectSidebarCustom(),
|
||
summary: qs('.summary-text')?.innerHTML || '',
|
||
experiences: collectCards('experienceList'),
|
||
projects: collectCards('projectList'),
|
||
extras: collectBullets('extraList'),
|
||
};
|
||
}
|
||
|
||
function collect(sel, fn) {
|
||
const els = (typeof sel === 'string') ? document.querySelectorAll(sel) : sel;
|
||
return Array.from(els).map(el => fn ? fn(el) : (el.innerHTML || ''));
|
||
}
|
||
|
||
function collectCards(listId) {
|
||
const cards = [];
|
||
const list = document.getElementById(listId);
|
||
if (!list) return cards;
|
||
list.querySelectorAll('.section-card').forEach(card => {
|
||
cards.push({
|
||
title: card.querySelector('h3')?.innerHTML || '',
|
||
date: card.querySelector('.date')?.innerHTML || '',
|
||
subtitle: card.querySelector('.section-sub')?.innerHTML || '',
|
||
bullets: collect(card.querySelectorAll('ul.bullets li')),
|
||
});
|
||
});
|
||
return cards;
|
||
}
|
||
|
||
function collectBullets(listId) {
|
||
const list = document.getElementById(listId);
|
||
if (!list) return [];
|
||
return collect(list.querySelectorAll('ul.bullets li'));
|
||
}
|
||
|
||
function collectSidebarCustom() {
|
||
const c = document.getElementById('sidebarCustom');
|
||
if (!c) return [];
|
||
return Array.from(c.querySelectorAll('.sidebar-custom-section')).map(sec => ({
|
||
title: sec.querySelector('.sidebar-custom-title')?.innerHTML || '',
|
||
content: sec.querySelector('.sidebar-custom-content')?.innerHTML || '',
|
||
}));
|
||
}
|
||
|
||
// ============================================================
|
||
// RESTORE
|
||
// ============================================================
|
||
function restore(data) {
|
||
if (!data) return;
|
||
|
||
if (data._theme) setColorByName(data._theme);
|
||
if (data._design) setDesignByName(data._design);
|
||
|
||
setHTML('h1 > span:first-child', data.name);
|
||
setHTML('h1 > .sub', data.title);
|
||
|
||
const cs = document.querySelectorAll('.info-item span:last-child');
|
||
(data.contact || []).forEach((v, i) => { if (cs[i]) cs[i].innerHTML = v; });
|
||
|
||
if (data.education) {
|
||
setHTML('.editable-block h3', data.education.school);
|
||
setHTML('.editable-block .section-sub', data.education.major);
|
||
setHTML('.editable-block .date', data.education.date);
|
||
}
|
||
setHTML('.summary-text', data.summary);
|
||
|
||
const tc = document.getElementById('skillTags');
|
||
if (tc) { tc.innerHTML = ''; (data.skills || []).forEach(s => createSkillTag(tc, s)); }
|
||
|
||
rebuildSidebarCustom(data.sidebarCustom || []);
|
||
rebuildCards('experienceList', data.experiences || [], createExperienceCard);
|
||
rebuildCards('projectList', data.projects || [], createProjectCard);
|
||
rebuildBullets('extraList', data.extras || []);
|
||
}
|
||
|
||
function setHTML(sel, html) {
|
||
const el = qs(sel);
|
||
if (el && html !== undefined) el.innerHTML = html;
|
||
}
|
||
function qs(sel) { return document.querySelector(sel); }
|
||
|
||
function rebuildCards(listId, items, fn) {
|
||
const list = document.getElementById(listId);
|
||
if (!list) return;
|
||
list.innerHTML = '';
|
||
items.forEach(item => fn(list, item));
|
||
}
|
||
function rebuildBullets(listId, items) {
|
||
const list = document.getElementById(listId);
|
||
if (!list) return;
|
||
list.innerHTML = '';
|
||
const ul = mk('ul', { class:'bullets' });
|
||
items.forEach(t => {
|
||
const li = mk('li', { contenteditable:'true', 'data-placeholder':'描述内容…' });
|
||
li.innerHTML = t; ul.appendChild(li);
|
||
});
|
||
list.appendChild(ul);
|
||
}
|
||
function rebuildSidebarCustom(items) {
|
||
const c = document.getElementById('sidebarCustom');
|
||
if (!c) return;
|
||
c.innerHTML = '';
|
||
items.forEach(item => createSidebarSection(c, item));
|
||
}
|
||
|
||
// ============================================================
|
||
// PERSISTENCE
|
||
// ============================================================
|
||
let saveTimer;
|
||
function save() {
|
||
clearTimeout(saveTimer);
|
||
saveTimer = setTimeout(() => {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot()));
|
||
}, 400);
|
||
}
|
||
|
||
function load() {
|
||
try {
|
||
const raw = localStorage.getItem(STORAGE_KEY);
|
||
if (raw) {
|
||
restore(JSON.parse(raw));
|
||
return true;
|
||
}
|
||
} catch (e) { console.warn('load failed', e); }
|
||
return false;
|
||
}
|
||
|
||
// ============================================================
|
||
// XML EXPORT
|
||
// ============================================================
|
||
function esc(s) { return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||
function tag(n, c, a) {
|
||
const as = a ? ' '+Object.entries(a).map(([k,v])=>`${k}="${esc(v)}"`).join(' ') : '';
|
||
return c === '' ? `<${n}${as}/>` : `<${n}${as}>${c}</${n}>`;
|
||
}
|
||
|
||
function toXML(data) {
|
||
const L = ['<?xml version="1.0" encoding="UTF-8"?>'];
|
||
const theme = esc(data._theme || getColorName());
|
||
const design = esc(data._design || getDesignName());
|
||
L.push(`<resume theme="${theme}" design="${design}">`);
|
||
|
||
L.push(tag('name', esc(data.name||'')));
|
||
L.push(tag('title', esc(data.title||'')));
|
||
|
||
L.push('<contact>');
|
||
['邮箱','手机','城市','链接'].forEach((lb,i) => L.push(tag('item', esc((data.contact||[])[i]||''), {label:lb})));
|
||
L.push('</contact>');
|
||
|
||
L.push('<skills>');
|
||
(data.skills||[]).forEach(s => { if(s) L.push(tag('skill', esc(s))); });
|
||
L.push('</skills>');
|
||
|
||
const edu = data.education||{};
|
||
L.push('<education>');
|
||
L.push(tag('school', esc(edu.school||'')));
|
||
L.push(tag('major', esc(edu.major||'')));
|
||
L.push(tag('date', esc(edu.date||'')));
|
||
L.push('</education>');
|
||
|
||
L.push('<sidebarSections>');
|
||
(data.sidebarCustom||[]).forEach(sec => {
|
||
L.push('<section>');
|
||
L.push(tag('title', esc(sec.title||'')));
|
||
L.push(tag('content', esc(sec.content||'')));
|
||
L.push('</section>');
|
||
});
|
||
L.push('</sidebarSections>');
|
||
|
||
L.push(tag('summary', esc(data.summary||'')));
|
||
|
||
L.push('<experiences>');
|
||
(data.experiences||[]).forEach(exp => {
|
||
L.push('<experience>');
|
||
L.push(tag('title', esc(exp.title||'')));
|
||
L.push(tag('date', esc(exp.date||'')));
|
||
L.push(tag('subtitle', esc(exp.subtitle||'')));
|
||
L.push('<bullets>');
|
||
(exp.bullets||[]).forEach(b => { if(b) L.push(tag('bullet', esc(b))); });
|
||
L.push('</bullets></experience>');
|
||
});
|
||
L.push('</experiences>');
|
||
|
||
L.push('<projects>');
|
||
(data.projects||[]).forEach(p => {
|
||
L.push('<project>');
|
||
L.push(tag('title', esc(p.title||'')));
|
||
L.push(tag('date', esc(p.date||'')));
|
||
L.push('<bullets>');
|
||
(p.bullets||[]).forEach(b => { if(b) L.push(tag('bullet', esc(b))); });
|
||
L.push('</bullets></project>');
|
||
});
|
||
L.push('</projects>');
|
||
|
||
L.push('<extras>');
|
||
(data.extras||[]).forEach(e => { if(e) L.push(tag('extra', esc(e))); });
|
||
L.push('</extras>');
|
||
|
||
L.push('</resume>');
|
||
return L.join('\n');
|
||
}
|
||
|
||
function exportXML() {
|
||
try {
|
||
const data = snapshot();
|
||
const xml = toXML(data);
|
||
const blob = new Blob([xml], {type:'application/xml'});
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url; a.download = 'resume.xml';
|
||
document.body.appendChild(a); a.click();
|
||
document.body.removeChild(a);
|
||
setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||
toast('✅ XML 已导出');
|
||
} catch(err) {
|
||
alert('导出失败：' + err.message);
|
||
console.error(err);
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// XML IMPORT
|
||
// ============================================================
|
||
function importXML(input) {
|
||
const file = input.files[0];
|
||
if (!file) return;
|
||
const r = new FileReader();
|
||
r.onload = e => {
|
||
try {
|
||
const doc = new DOMParser().parseFromString(e.target.result, 'application/xml');
|
||
const errNode = doc.querySelector('parsererror');
|
||
if (errNode) { alert('XML 解析失败：' + errNode.textContent); return; }
|
||
const data = parseXML(doc);
|
||
restore(data);
|
||
save();
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||
toast('✅ XML 已导入');
|
||
} catch(err) {
|
||
alert('导入失败：' + err.message);
|
||
console.error(err);
|
||
}
|
||
};
|
||
r.onerror = () => { alert('文件读取失败'); };
|
||
r.readAsText(file);
|
||
input.value = '';
|
||
}
|
||
|
||
function parseXML(doc) {
|
||
const t = (el, tag) => { const n = el.querySelector(tag); return n ? n.textContent : ''; };
|
||
const ts = (el, tag) => Array.from(el.querySelectorAll(tag)).map(n => n.textContent||'');
|
||
const root = doc.documentElement;
|
||
|
||
return {
|
||
_theme: root.getAttribute('theme') || '',
|
||
_design: root.getAttribute('design') || '',
|
||
name: t(root, 'name'),
|
||
title: t(root, 'title'),
|
||
contact: Array.from(root.querySelectorAll('contact > item')).map(n => n.textContent||''),
|
||
skills: ts(root, 'skills > skill'),
|
||
education:{ school:t(root,'education>school'), major:t(root,'education>major'), date:t(root,'education>date') },
|
||
sidebarCustom: Array.from(root.querySelectorAll('sidebarSections > section')).map(sec => ({
|
||
title: t(sec,'title'), content: t(sec,'content'),
|
||
})),
|
||
summary: t(root, 'summary'),
|
||
experiences: Array.from(root.querySelectorAll('experiences > experience')).map(exp => ({
|
||
title:t(exp,'title'), date:t(exp,'date'), subtitle:t(exp,'subtitle'), bullets:ts(exp,'bullet'),
|
||
})),
|
||
projects: Array.from(root.querySelectorAll('projects > project')).map(p => ({
|
||
title:t(p,'title'), date:t(p,'date'), bullets:ts(p,'bullet'),
|
||
})),
|
||
extras: ts(root, 'extras > extra'),
|
||
};
|
||
}
|
||
|
||
// ============================================================
|
||
// TOAST
|
||
// ============================================================
|
||
function toast(msg) {
|
||
const el = document.createElement('div');
|
||
el.textContent = msg;
|
||
el.style.cssText = 'position:fixed;bottom:50px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 20px;border-radius:20px;font-size:13px;z-index:999;pointer-events:none;transition:opacity .3s;font-family:var(--font-sans)';
|
||
document.body.appendChild(el);
|
||
setTimeout(() => { el.style.opacity = '0'; }, 1500);
|
||
setTimeout(() => { el.remove(); }, 2000);
|
||
}
|
||
|
||
// ============================================================
|
||
// DOM HELPERS
|
||
// ============================================================
|
||
function mk(tag, a, h) {
|
||
const el = document.createElement(tag);
|
||
Object.entries(a||{}).forEach(([k,v]) => {
|
||
if (k==='class') el.className=v;
|
||
else if (k.startsWith('data-')) el.setAttribute(k,v);
|
||
else if (k==='contenteditable') el.setAttribute('contenteditable',v);
|
||
else el[k]=v;
|
||
});
|
||
if (h) el.innerHTML=h;
|
||
return el;
|
||
}
|
||
|
||
// ============================================================
|
||
// SKILL TAGS
|
||
// ============================================================
|
||
function createSkillTag(c, text) {
|
||
const tag = mk('span', {class:'skill-tag', contenteditable:'true', 'data-placeholder':'技能'});
|
||
tag.textContent = text||'';
|
||
const del = mk('button', {class:'tag-delete no-print'}, '×');
|
||
del.addEventListener('click', e => { e.stopPropagation(); e.preventDefault(); tag.remove(); save(); });
|
||
tag.appendChild(del); c.appendChild(tag);
|
||
}
|
||
function addSkill() {
|
||
const c = document.getElementById('skillTags');
|
||
createSkillTag(c, '');
|
||
const tags = c.querySelectorAll('.skill-tag');
|
||
const last = tags[tags.length-1];
|
||
if (last) { last.focus(); last.textContent=''; }
|
||
save();
|
||
}
|
||
|
||
// ============================================================
|
||
// SIDEBAR CUSTOM SECTIONS
|
||
// ============================================================
|
||
function createSidebarSection(c, item) {
|
||
const sec = mk('div', {class:'sidebar-custom-section'});
|
||
const del = mk('button', {class:'card-delete no-print'}, '×');
|
||
del.addEventListener('click', () => { sec.remove(); save(); });
|
||
sec.appendChild(del);
|
||
const ti = mk('div', {class:'sidebar-custom-title', contenteditable:'true', 'data-placeholder':'栏目名称'});
|
||
ti.innerHTML = (item||{}).title||''; sec.appendChild(ti);
|
||
const co = mk('div', {class:'sidebar-custom-content', contenteditable:'true', 'data-placeholder':'内容…'});
|
||
co.innerHTML = (item||{}).content||''; sec.appendChild(co);
|
||
c.appendChild(sec);
|
||
return sec;
|
||
}
|
||
function addSidebarSection() {
|
||
const c = document.getElementById('sidebarCustom');
|
||
const sec = createSidebarSection(c, {});
|
||
sec.querySelector('.sidebar-custom-title').focus();
|
||
save();
|
||
}
|
||
|
||
// ============================================================
|
||
// SECTION CARDS (Experience / Project)
|
||
// ============================================================
|
||
function createSectionCard(list, item, hasSub) {
|
||
const card = mk('div', {class:'section-card'});
|
||
const del = mk('button', {class:'card-delete no-print'}, '×');
|
||
del.addEventListener('click', () => { card.remove(); save(); });
|
||
card.appendChild(del);
|
||
|
||
const hdr = mk('div', {class:'section-header'});
|
||
const h3 = mk('h3', {contenteditable:'true', 'data-placeholder':'公司 / 项目名称'});
|
||
h3.innerHTML = item.title||'';
|
||
const dt = mk('span', {class:'date', contenteditable:'true', 'data-placeholder':'时间'});
|
||
dt.innerHTML = item.date||'';
|
||
hdr.appendChild(h3); hdr.appendChild(dt);
|
||
card.appendChild(hdr);
|
||
|
||
if (hasSub) {
|
||
const sub = mk('div', {class:'section-sub', contenteditable:'true', 'data-placeholder':'职位 / 角色'});
|
||
sub.innerHTML = item.subtitle||'';
|
||
card.appendChild(sub);
|
||
}
|
||
|
||
const ul = mk('ul', {class:'bullets'});
|
||
(item.bullets||['']).forEach(t => {
|
||
const li = mk('li', {contenteditable:'true', 'data-placeholder':'描述你做了什么…'});
|
||
li.innerHTML = t; ul.appendChild(li);
|
||
});
|
||
card.appendChild(ul);
|
||
|
||
const addB = mk('button', {class:'add-btn no-print'}, '+ 添加要点');
|
||
addB.addEventListener('click', () => {
|
||
const li = mk('li', {contenteditable:'true', 'data-placeholder':'描述你做了什么…'});
|
||
ul.appendChild(li); li.focus(); save();
|
||
});
|
||
card.appendChild(addB);
|
||
list.appendChild(card);
|
||
return card;
|
||
}
|
||
function createExperienceCard(list, item) { return createSectionCard(list, item||{}, true); }
|
||
function createProjectCard(list, item) { return createSectionCard(list, item||{}, false); }
|
||
|
||
function addExperience() { const l=document.getElementById('experienceList'); createExperienceCard(l,{bullets:['']}); save(); }
|
||
function addProject() { const l=document.getElementById('projectList'); createProjectCard(l,{bullets:['']}); save(); }
|
||
|
||
// ============================================================
|
||
// EXTRA BULLETS
|
||
// ============================================================
|
||
function addExtra() {
|
||
const list = document.getElementById('extraList');
|
||
let ul = list.querySelector('ul.bullets');
|
||
if (!ul) { ul = mk('ul', {class:'bullets'}); list.appendChild(ul); }
|
||
const li = mk('li', {contenteditable:'true', 'data-placeholder':'其他信息…'});
|
||
ul.appendChild(li); li.focus(); save();
|
||
}
|
||
|
||
// ============================================================
|
||
// RESET
|
||
// ============================================================
|
||
function reset() {
|
||
if (confirm('确定要清空所有内容吗？此操作不可恢复。')) {
|
||
localStorage.removeItem(STORAGE_KEY);
|
||
location.reload();
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// AUTO-SAVE
|
||
// ============================================================
|
||
function bindAutoSave() {
|
||
document.addEventListener('input', e => { if (e.target.isContentEditable) save(); });
|
||
document.addEventListener('focusout', e => { if (e.target.isContentEditable) save(); });
|
||
document.addEventListener('keyup', e => {
|
||
if (e.target.isContentEditable && (e.key==='Backspace'||e.key==='Delete')) save();
|
||
});
|
||
}
|
||
|
||
// ============================================================
|
||
// INIT
|
||
// ============================================================
|
||
function init() {
|
||
bindAutoSave();
|
||
applyColor(0);
|
||
applyDesign(0);
|
||
|
||
const hasData = load();
|
||
|
||
if (!hasData) {
|
||
applyColor(0);
|
||
applyDesign(0);
|
||
if (!document.getElementById('experienceList').children.length) addExperience();
|
||
if (!document.getElementById('projectList').children.length) addProject();
|
||
if (!document.getElementById('skillTags').children.length) addSkill();
|
||
}
|
||
}
|
||
|
||
return {
|
||
addSkill, addSidebarSection, addExperience, addProject, addExtra,
|
||
reset, exportXML, importXML,
|
||
prevTheme, nextTheme, setColorByName,
|
||
prevDesign, nextDesign, setDesignByName,
|
||
init,
|
||
};
|
||
})();
|
||
|
||
document.addEventListener('DOMContentLoaded', Resume.init);
|