PricingPage - 定价表生成器

模板风格

颜色主题

套餐列表

实时预览

导出代码

点击生成代码...

`; $('codeArea').textContent = fullHtml; $('codeArea')._fullHtml = fullHtml; $('codeArea')._reactCode = reactCode; } $('copyHtmlBtn').addEventListener('click', () => { const code = $('codeArea')._fullHtml || $('codeArea').textContent; copyToClipboard(code); showToast('HTML 代码已复制'); }); $('downloadHtmlBtn').addEventListener('click', () => { const code = $('codeArea')._fullHtml || $('codeArea').textContent; const blob = new Blob([code], {type:'text/html'}); const a = document.createElement('a'); a.download = 'pricing-table.html'; a.href = URL.createObjectURL(blob); a.click(); URL.revokeObjectURL(a.href); showToast('已下载 pricing-table.html'); }); $('copyReactBtn').addEventListener('click', () => { const code = $('codeArea')._reactCode; if (code) { copyToClipboard(code); showToast('React 代码已复制'); } }); function copyToClipboard(text) { if (navigator.clipboard) navigator.clipboard.writeText(text); else { const ta = document.createElement('textarea'); ta.value=text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); } } function escHtml(str) { const d = document.createElement('div'); d.textContent = str; return d.innerHTML; } /* Template selector */ const tmplBtns = document.querySelectorAll('#templateSelector .mode-btn'); const tmplSlider = $('tmplSlider'); function moveTmplSlider(btn) { const c = btn.closest('.mode-selector'); const cRect = c.getBoundingClientRect(); const bRect = btn.getBoundingClientRect(); tmplSlider.style.left = (bRect.left - cRect.left) + 'px'; tmplSlider.style.width = bRect.width + 'px'; } tmplBtns.forEach(btn => { btn.addEventListener('click', () => { tmplBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); moveTmplSlider(btn); state.template = btn.dataset.tmpl; renderPreview(); }); }); requestAnimationFrame(() => { const a = document.querySelector('#templateSelector .mode-btn.active'); if (a) moveTmplSlider(a); }); /* Init */ renderPalette(); renderPackages(); renderPreview();