`; const blob = new Blob([htmlContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'my-website.html'; a.click(); URL.revokeObjectURL(url); showToast('HTML已导出'); } // Preview function previewLayout() { previewContent.innerHTML = elements.map(el => createElementHTML(el, true)).join(''); previewModal.classList.add('active'); } function closePreview() { previewModal.classList.remove('active'); } // View modes function setView(view) { currentView = view; document.querySelectorAll('.openskil-view-tab').forEach(tab => { tab.classList.remove('active'); }); event.target.classList.add('active'); const canvasEl = document.querySelector('.openskil-canvas'); switch(view) { case 'desktop': canvasEl.style.maxWidth = '1200px'; break; case 'tablet': canvasEl.style.maxWidth = '768px'; break; case 'mobile': canvasEl.style.maxWidth = '375px'; break; } } // Toast notification function showToast(message) { toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2000); } // Drag and Drop document.querySelectorAll('.openskil-component-item').forEach(item => { item.addEventListener('dragstart', (e) => { e.dataTransfer.setData('type', item.dataset.type); item.style.opacity = '0.5'; }); item.addEventListener('dragend', (e) => { item.style.opacity = '1'; }); }); canvas.addEventListener('dragover', (e) => { e.preventDefault(); canvas.classList.add('drag-over'); }); canvas.addEventListener('dragleave', () => { canvas.classList.remove('drag-over'); }); canvas.addEventListener('drop', (e) => { e.preventDefault(); canvas.classList.remove('drag-over'); const type = e.dataTransfer.getData('type'); if (type) { addElement(type); } }); // Click outside to deselect canvas.addEventListener('click', (e) => { if (e.target === canvas || e.target === emptyState) { selectedElement = null; document.querySelectorAll('.openskil-canvas-element').forEach(el => { el.classList.remove('selected'); }); renderPropertiesPanel(); } }); // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (e.ctrlKey || e.metaKey) { if (e.key === 'z') { e.preventDefault(); if (e.shiftKey) { redoAction(); } else { undoAction(); } } else if (e.key === 'y') { e.preventDefault(); redoAction(); } else if (e.key === 's') { e.preventDefault(); exportHTML(); } } if (e.key === 'Delete' || e.key === 'Backspace') { if (selectedElement && !document.activeElement.matches('input, textarea, [contenteditable]')) { e.preventDefault(); deleteElement(selectedElement.id); } } if (e.key === 'Escape') { closePreview(); } }); // Initialize saveHistory(); renderCanvas(); renderPropertiesPanel();