${html} `; previewFrame.srcdoc = content; } function debouncedUpdate() { if (updateTimeout) clearTimeout(updateTimeout); updateTimeout = setTimeout(updatePreview, 300); } function showToast(message) { toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2000); } function formatCode(code, type) { if (type === 'html') { return code .replace(/>\n<') .split('\n') .map(line => line.trim()) .filter(line => line.length > 0) .join('\n'); } else { return code .replace(/\s*{\s*/g, ' {\n ') .replace(/\s*;\s*/g, ';\n ') .replace(/\s*}\s*/g, '\n}\n') .replace(/ \n}/g, '}') .replace(/\n\n\n/g, '\n\n') .trim(); } } function renderTemplates() { const templateList = document.querySelector('.openskil-template-list'); templateList.innerHTML = templates.map((t, i) => ` `).join(''); } htmlEditor.addEventListener('input', debouncedUpdate); cssEditor.addEventListener('input', debouncedUpdate); tabs.forEach(tab => { tab.addEventListener('click', function() { tabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); const tabName = this.dataset.tab; if (tabName === 'html') { htmlEditor.style.display = 'block'; cssEditor.style.display = 'none'; } else { htmlEditor.style.display = 'none'; cssEditor.style.display = 'block'; } }); }); copyBtn.addEventListener('click', function() { const activeTab = document.querySelector('.openskil-tab.active').dataset.tab; const code = activeTab === 'html' ? htmlEditor.value : cssEditor.value; navigator.clipboard.writeText(code).then(() => { showToast('代码已复制到剪贴板！'); }).catch(() => { showToast('复制失败，请手动选择复制'); }); }); clearBtn.addEventListener('click', function() { const activeTab = document.querySelector('.openskil-tab.active').dataset.tab; if (activeTab === 'html') { htmlEditor.value = ''; } else { cssEditor.value = ''; } updatePreview(); showToast('编辑器已清空'); }); formatBtn.addEventListener('click', function() { const activeTab = document.querySelector('.openskil-tab.active').dataset.tab; if (activeTab === 'html') { htmlEditor.value = formatCode(htmlEditor.value, 'html'); } else { cssEditor.value = formatCode(cssEditor.value, 'css'); } updatePreview(); showToast('代码已格式化'); }); refreshBtn.addEventListener('click', function() { updatePreview(); showToast('预览已刷新'); }); templateBtn.addEventListener('click', function() { renderTemplates(); templateModal.classList.add('show'); }); closeModalBtn.addEventListener('click', function() { templateModal.classList.remove('show'); }); templateModal.addEventListener('click', function(e) { if (e.target === templateModal) { templateModal.classList.remove('show'); } }); document.querySelector('.openskil-template-list').addEventListener('click', function(e) { const item = e.target.closest('.openskil-template-item'); if (item) { const index = parseInt(item.dataset.index); const template = templates[index]; htmlEditor.value = template.html; cssEditor.value = template.css; templateModal.classList.remove('show'); updatePreview(); showToast(`已加载: ${template.name}`); } }); updatePreview(); })();