做转义处理 return code.replace(/<\/script>/g, '<\\/script>'); } function escapeHTML(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } function highlightCode(raw) { // 简单语法高亮 let html = escapeHTML(raw); // 高亮HTML标签 html = html.replace(/(<\/?)([\w-]+)/g, '$1$2'); html = html.replace(/(<)(\/?)([\w-]+)([\s\S]*?)(\/?>)/g, function(m, lt, slash, tag, rest, gt) { let result = lt + slash + '' + tag + ''; // 高亮属性 rest = rest.replace(/([\w-]+)=("|')/g, '$1=$2'); rest = rest.replace(/("|')([^&]*?)("|')/g, '$1$2$3'); result += rest + gt; return result; }); // 高亮CSS属性 html = html.replace(/([\w-]+)\s*:/g, '$1:'); // 高亮CSS值中的颜色 html = html.replace(/(#[0-9a-fA-F]{3,8})/g, '$1'); // 高亮注释 html = html.replace(/(\/\*[\s\S]*?\*\/)/g, '$1'); // 高亮JS关键字 html = html.replace(/\b(function|var|const|let|if|else|return|new|Date|localStorage|getItem|setItem|removeItem|addEventListener|classList|getElementById|parseInt|isNaN)\b/g, '$1'); return html; } function updateCode() { const raw = generateCode(); const highlighted = highlightCode(raw); $codeBlock.html(highlighted); } function updateAll() { updatePreview(); updateCode(); } // 事件绑定 $('#cc-bg-color, #cc-text-color, #cc-btn-bg, #cc-btn-text').on('input', function(){ const hex = $(this).val(); $(this).siblings('.color-hex').text(hex); updateAll(); $('.preset-dot').removeClass('active'); }); $('input[name="cc-position"]').on('change', function(){ updateAll(); $('.preset-dot').removeClass('active'); }); $('#cc-message, #cc-btn-text, #cc-animation').on('input change', updateAll); $('#cc-show-close, #cc-show-shadow, #cc-remember').on('change', updateAll); $('#cc-font-size').on('input', function(){ $('#cc-font-size-val').text($(this).val() + 'px'); updateAll(); }); $('#cc-padding').on('input', function(){ $('#cc-padding-val').text($(this).val() + 'px'); updateAll(); }); $('#cc-radius').on('input', function(){ $('#cc-radius-val').text($(this).val() + 'px'); updateAll(); }); $('#cc-btn-radius').on('input', function(){ $('#cc-btn-radius-val').text($(this).val() + 'px'); updateAll(); }); $('#cc-maxwidth').on('input', function(){ const v = $(this).val(); $('#cc-maxwidth-val').text(v >= 1400 ? '全宽' : v + 'px'); updateAll(); }); // 预览中的交互 $('#preview-cc-btn, #preview-cc-close').on('click', function(){ const cfg = getConfig(); if (cfg.animation === 'slide') { $previewBar.addClass('cc-hidden'); } else if (cfg.animation === 'fade') { $previewBar.css({ 'opacity': '0', 'pointer-events': 'none', 'transition': 'opacity 0.5s ease' }); } else { $previewBar.hide(); } }); $('#reset-preview-btn').on('click', function(){ const cfg = getConfig(); $previewBar.removeClass('cc-hidden').css({ 'opacity': '1', 'pointer-events': 'auto', 'display': '' }).show(); if (cfg.animation === 'slide') { $previewBar.css({ 'transform': 'translateY(0)', 'opacity': '1' }); } updatePreview(); }); // 复制代码 $('#copy-code-btn').on('click', function(){ const raw = generateCode(); if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(raw).then(function(){ const $btn = $('#copy-code-btn'); $btn.html('已复制!'); $btn.removeClass('btn-primary').addClass('btn-success'); setTimeout(function(){ $btn.html('复制代码'); $btn.removeClass('btn-success').addClass('btn-primary'); }, 2000); }).catch(function(){ fallbackCopy(raw); }); } else { fallbackCopy(raw); } }); function fallbackCopy(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); } catch(e) {} document.body.removeChild(textarea); const $btn = $('#copy-code-btn'); $btn.html('已复制!'); $btn.removeClass('btn-primary').addClass('btn-success'); setTimeout(function(){ $btn.html('复制代码'); $btn.removeClass('btn-success').addClass('btn-primary'); }, 2000); } // 初始更新 updateAll(); });