智能模板生成

描述你想要的风格，为你定制专属简历模板

快捷建议：

var suggestionPresets = { '科技极简': '现代极简风格，大量留白，细线条，蓝色调为主，适合科技互联网行业求职', '商务稳重': '专业商务风格，深灰色调，传统对称布局，字体庄重，适合金融咨询行业', '创意活力': '创意活力风格，明亮紫色调，现代感排版，适合设计、媒体、创意行业', '学术专业': '学术专业风格，严谨规整的布局， serif 字体，适合教育科研行业', '医疗严谨': '医疗严谨风格，简洁清晰的布局，蓝绿色调，适合医疗健康行业', '设计艺术': '设计艺术风格，大胆配色，现代感强，非线性布局，适合创意个人品牌' }; var generatedTemplates = []; var existingResumeId = new URLSearchParams(window.location.search).get('resume_id'); function useSuggestion(key) { document.getElementById('style-description').value = suggestionPresets[key] || ''; } async function generateTemplates() { var desc = document.getElementById('style-description').value.trim(); if (!desc || desc.length < 10) { SmartCV.toast('请至少输入10个字符的描述', 'warning'); return; } // Show loading phase document.getElementById('input-phase').classList.add('hidden'); document.getElementById('loading-phase').classList.remove('hidden'); document.getElementById('loading-phase').classList.add('flex'); var progressBar = document.getElementById('progress-bar'); var loadingStatus = document.getElementById('loading-status'); var progress = 0; // Simulate progress var progressInterval = setInterval(function() { progress = Math.min(progress + Math.random() * 15, 90); progressBar.style.width = progress + '%'; if (progress < 30) { loadingStatus.textContent = '正在分析风格描述...'; } else if (progress < 60) { loadingStatus.textContent = '正在生成配色方案...'; } else if (progress < 80) { loadingStatus.textContent = '正在设计模板布局...'; } else { loadingStatus.textContent = '正在优化细节...'; } }, 500); var buffer = ''; try { await SmartCV.api.stream( '/templates/ai/generate', { style_description: desc }, function onChunk(data) { if (data.content) { buffer += data.content; } if (data.error) { clearInterval(progressInterval); showError(data.error); } }, function onDone() { clearInterval(progressInterval); progressBar.style.width = '100%'; loadingStatus.textContent = '生成完成！'; setTimeout(function() { parseAndDisplayTemplates(buffer); }, 500); }, function onError(err) { clearInterval(progressInterval); showError('生成失败：' + (err.message || '网络错误')); } ); } catch (e) { clearInterval(progressInterval); showError('生成失败：' + e.message); } } function parseAndDisplayTemplates(buffer) { try { var raw = buffer.trim(); // Strip markdown code fences if (raw.indexOf('```') !== -1) { raw = raw.replace(/```json\s*/g, '').replace(/```\s*/g, ''); } var templates = JSON.parse(raw.trim()); if (!Array.isArray(templates) || templates.length === 0) { throw new Error('返回的数据格式异常'); } // Ensure we have 3 templates while (templates.length < 3) { templates.push(getFallbackTemplate(templates.length)); } generatedTemplates = templates.slice(0, 3); displayResults(generatedTemplates); } catch (e) { console.error('Parse error:', e, buffer); // Use fallback templates generatedTemplates = getFallbackTemplates(); displayResults(generatedTemplates); } } function displayResults(templates) { document.getElementById('loading-phase').classList.add('hidden'); document.getElementById('results-phase').classList.remove('hidden'); var container = document.getElementById('template-results'); container.innerHTML = templates.map(function(tpl, idx) { var colors = tpl.color_scheme || {}; var colorDots = [colors.primary, colors.secondary, colors.accent, colors.background, colors.text].map(function(c) { return ''; }).join(''); return '
' + '
' + '

' + SmartCV.escapeHtml(tpl.name || '模板 ' + (idx + 1)) + '

' + '

' + SmartCV.escapeHtml(tpl.description || '') + '

' + '
' + colorDots + '
' + '
' + '' + '
' + '
' + '' + '' + '
' + '
' + '
'; }).join(''); // Render previews after DOM update setTimeout(function() { templates.forEach(function(tpl, idx) { renderPreview(idx, tpl); }); }, 100); } function renderPreview(idx, tpl) { var frame = document.getElementById('preview-frame-' + idx); if (!frame) return; var css = tpl.css || ''; var colors = tpl.color_scheme || {}; var fonts = tpl.font_pairing || {}; var sampleHTML = '' + '

张三

' + '

电话: 13800138000 | 邮箱: zhangsan@example.com

' + '

教育背景

' + '

北京大学 | 计算机科学与技术 | 本科 | 2020-2024

' + '

工作经历

' + '

字节跳动 - 前端开发实习生

负责核心业务模块开发，优化页面性能提升30%

' + '

核心技能

' + '
JavaScriptReactVue
' + '

项目经历

' + '

智能推荐系统 - 核心开发

设计并实现推荐算法，用户点击率提升25%

' + '

自我评价

' + '

3年前端开发经验，擅长React/Vue生态，具备独立负责大型项目的能力

' + ''; frame.srcdoc = sampleHTML; } function applyTemplate(idx) { var tpl = generatedTemplates[idx]; if (!tpl) return; // First save the template saveTemplateToDB(idx, function(templateId) { if (existingResumeId) { // Switch template on existing resume SmartCV.api.put('/resumes/' + existingResumeId, { template_id: templateId }).then(function() { SmartCV.toast('模板已切换，正在跳转...', 'success'); window.location.href = 'resume-preview.html?resume_id=' + existingResumeId; }).catch(function(e) { SmartCV.toast('模板切换失败：' + e.message, 'error'); }); } else { // Create new resume with template SmartCV.api.post('/resumes', { title: (tpl.name || '模板') + ' - 新简历', template_id: templateId }).then(function(resume) { SmartCV.toast('模板已应用，正在跳转...', 'success'); window.location.href = 'resume-preview.html?resume_id=' + resume.id; }).catch(function(e) { SmartCV.toast('创建简历失败：' + e.message, 'error'); }); } }); } function saveTemplate(idx) { saveTemplateToDB(idx, function(templateId) { SmartCV.toast('模板已保存到模板库', 'success'); }); } function saveTemplateToDB(idx, callback) { var tpl = generatedTemplates[idx]; if (!tpl) return; var btn = event.currentTarget; var originalHtml = btn.innerHTML; btn.disabled = true; btn.innerHTML = ''; SmartCV.api.post('/templates/ai/save', { name: tpl.name || '生成模板', description: tpl.description || '', css: tpl.css || '', color_scheme: tpl.color_scheme || {}, font_pairing: tpl.font_pairing || {} }).then(function(result) { btn.disabled = false; btn.innerHTML = originalHtml; if (callback) callback(result.id); }).catch(function(e) { btn.disabled = false; btn.innerHTML = originalHtml; SmartCV.toast('保存失败：' + e.message, 'error'); }); } function regenerate() { document.getElementById('results-phase').classList.add('hidden'); document.getElementById('input-phase').classList.remove('hidden'); generatedTemplates = []; } function showError(msg) { document.getElementById('loading-phase').classList.add('hidden'); document.getElementById('input-phase').classList.remove('hidden'); SmartCV.toast(msg, 'error'); } function getFallbackTemplate(idx) { var fallbacks = [ { name: '科技极简蓝', description: '现代极简风格，大量留白，蓝色点缀，适合科技互联网行业', color_scheme: { primary: '#2563eb', secondary: '#64748b', accent: '#3b82f6', background: '#ffffff', text: '#1e293b' }, font_pairing: { heading: "'Segoe UI', system-ui, sans-serif", body: "'Segoe UI', system-ui, sans-serif" }, css: ".resume-page { font-family: 'Segoe UI', system-ui, sans-serif; color: #1e293b; line-height: 1.6; padding: 40px; }\n.resume-page h1 { color: #2563eb; font-size: 2rem; font-weight: 700; margin-bottom: 8px; border-bottom: 3px solid #2563eb; padding-bottom: 12px; }\n.resume-page h2 { color: #2563eb; font-size: 1.1rem; font-weight: 600; margin-top: 24px; margin-bottom: 12px; border-left: 4px solid #2563eb; padding-left: 12px; }\n.resume-page .skill-tag { display: inline-block; background: #eff6ff; color: #2563eb; padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; margin: 2px 4px; border: 1px solid #bfdbfe; }" }, { name: '商务沉稳灰', description: '专业商务风格，灰色调，传统布局，适合金融咨询行业', color_scheme: { primary: '#374151', secondary: '#6b7280', accent: '#4b5563', background: '#ffffff', text: '#111827' }, font_pairing: { heading: "Georgia, serif", body: "Arial, sans-serif" }, css: ".resume-page { font-family: Arial, sans-serif; color: #111827; line-height: 1.5; padding: 40px; }\n.resume-page h1 { font-family: Georgia, serif; color: #374151; font-size: 2.2rem; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.05em; border-bottom: 2px solid #374151; padding-bottom: 10px; }\n.resume-page h2 { font-family: Georgia, serif; color: #374151; font-size: 1rem; font-weight: 700; margin-top: 20px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid #9ca3af; padding-bottom: 6px; }\n.resume-page .skill-tag { display: inline-block; background: #f3f4f6; color: #374151; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; margin: 2px 4px; border: 1px solid #d1d5db; }" }, { name: '创意活力紫', description: '创意活力风格，紫色渐变，现代排版，适合设计媒体行业', color_scheme: { primary: '#7c3aed', secondary: '#8b5cf6', accent: '#a78bfa', background: '#faf5ff', text: '#4c1d95' }, font_pairing: { heading: "'Segoe UI', sans-serif", body: "'Inter', system-ui, sans-serif" }, css: ".resume-page { font-family: 'Inter', system-ui, sans-serif; color: #4c1d95; line-height: 1.6; padding: 40px; background: #faf5ff; }\n.resume-page h1 { font-family: 'Segoe UI', sans-serif; color: #7c3aed; font-size: 2.5rem; font-weight: 800; margin-bottom: 8px; }\n.resume-page h2 { color: #7c3aed; font-size: 1.1rem; font-weight: 700; margin-top: 24px; margin-bottom: 12px; background: linear-gradient(90deg, #f5f3ff 0%, transparent 100%); padding: 8px 12px; border-left: 4px solid #7c3aed; border-radius: 0 8px 8px 0; }\n.resume-page .skill-tag { display: inline-block; background: linear-gradient(135deg, #7c3aed, #a78bfa); color: white; padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; margin: 2px 4px; border: none; }" } ]; return fallbacks[idx % fallbacks.length]; } function getFallbackTemplates() { return [getFallbackTemplate(0), getFallbackTemplate(1), getFallbackTemplate(2)]; }