主标题

页面内容...

` }, { name: 'CSS 居中布局', desc: '多种CSS居中方法的实现', language: 'css', code: `/* Flexbox 居中 */ .container { display: flex; justify-content: center; align-items: center; } /* Grid 居中 */ .container { display: grid; place-items: center; } /* 绝对定位居中 */ .container { position: relative; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 水平居中（块级元素）*/ .center { margin: 0 auto; }` }, { name: 'Python 快速排序', desc: '经典排序算法的 Python 实现', language: 'python', code: `# 快速排序实现 def quick_sort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) // 2] left = [x for x in arr if x < pivot] middle = [x for x in arr if x == pivot] right = [x for x in arr if x > pivot] return quick_sort(left) + middle + quick_sort(right) # 测试 nums = [3, 6, 8, 10, 1, 2, 1] print(quick_sort(nums)) # 输出: [1, 1, 2, 3, 6, 8, 10]` }, { name: 'JavaScript 防抖函数', desc: '常用的性能优化技巧', language: 'javascript', code: `// 防抖函数 function debounce(func, wait = 300) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // 使用示例 const handleSearch = debounce((keyword) => { console.log('搜索:', keyword); // 执行搜索请求 }, 500); // 绑定事件 document.getElementById('search') .addEventListener('input', (e) => { handleSearch(e.target.value); });` }, { name: 'SQL 基础查询', desc: '常见的数据库查询示例', language: 'sql', code: `-- 创建表 CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL, email VARCHAR(100) UNIQUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 插入数据 INSERT INTO users (name, email) VALUES ('张三', 'zhangsan@example.com'); -- 查询数据 SELECT * FROM users WHERE name LIKE '张%'; -- 更新数据 UPDATE users SET email = 'new@example.com' WHERE id = 1; -- 删除数据 DELETE FROM users WHERE id = 1;` } ]; // DOM 元素 const tabs = document.querySelectorAll('.openskil-tab'); const panels = document.querySelectorAll('.openskil-panel'); const titleInput = document.querySelector('.openskil-title-input'); const descInput = document.querySelector('.openskil-desc-input'); const languageSelect = document.querySelector('.openskil-language-select'); const codeInput = document.querySelector('.openskil-code-input'); const saveBtn = document.querySelector('.openskil-save-btn'); const previewBtn = document.querySelector('.openskil-preview-btn'); const shareBtn = document.querySelector('.openskil-share-btn'); const copyBtn = document.querySelector('.openskil-copy-btn'); const previewCard = document.querySelector('.openskil-preview-card'); const previewContent = document.querySelector('.openskil-preview-content'); const copyPreviewBtn = document.querySelector('.openskil-copy-preview'); const closePreviewBtn = document.querySelector('.openskil-close-preview'); const snippetsContainer = document.querySelector('.openskil-snippets-container'); const clearAllBtn = document.querySelector('.openskil-clear-all'); const templatesContainer = document.querySelector('.openskil-templates-container'); const shareModal = document.querySelector('.openskil-share-modal'); const shareUrlInput = document.querySelector('.openskil-share-url-input'); const copyLinkBtn = document.querySelector('.openskil-copy-link'); const closeModalBtns = document.querySelectorAll('.openskil-close-modal'); const toast = document.getElementById('openskil-toast'); // Tab 切换 tabs.forEach(tab => { tab.addEventListener('click', () => { tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); tab.classList.add('active'); document.getElementById(tab.dataset.tab + '-panel').classList.add('active'); if (tab.dataset.tab === 'snippets') { renderSnippets(); } }); }); // 显示提示 function showToast(message) { toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2500); } // 语法高亮 function highlightCode(code, language) { let highlighted = code .replace(/&/g, '&') .replace(//g, '>'); if (language === 'javascript' || language === 'js') { highlighted = highlighted .replace(/(\/\/.*)/g, '$1') .replace(/(\/(?=\S)[^\/]*\/) /g, '$&') .replace(/\b(function|const|let|var|return|if|else|for|while|class|new|this|import|export|from|async|await|try|catch|throw|typeof|instanceof|in|of|default|switch|case|break|continue)\b/g, '$1') .replace(/('.*?'|".*?"|`.*?`)/g, '$1') .replace(/\b(\d+\.?\d*)\b/g, '$1'); } else if (language === 'html') { highlighted = highlighted .replace(/(<!--.*?-->)/gs, '$1') .replace(/(<\/\w+>)/g, '$1') .replace(/(<\w+)/g, '$1') .replace(/(\s\w+)=/g, '$1='); } else if (language === 'css') { highlighted = highlighted .replace(/(\/\*[\s\S]*?\*\/)/g, '$1') .replace(/([.#]?[\w-]+)\s*\{/g, '$1 {') .replace(/:\s*([^;{}]+);/g, ': $1;'); } else if (language === 'python') { highlighted = highlighted .replace(/(#.*)/g, '$1') .replace(/\b(def|class|if|elif|else|for|while|return|import|from|as|try|except|finally|with|lambda|yield|global|nonlocal|pass|break|continue|and|or|not|in|is|True|False|None)\b/g, '$1') .replace(/('.*?'|".*?"|'''[\s\S]*?'''|"""[\s\S]*?""")/g, '$1') .replace(/\b(\d+\.?\d*)\b/g, '$1'); } else if (language === 'sql') { highlighted = highlighted .replace(/(--.*)/g, '$1') .replace(/\b(SELECT|FROM|WHERE|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|TABLE|INTO|VALUES|SET|AND|OR|NOT|NULL|PRIMARY|KEY|AUTO_INCREMENT|UNIQUE|DEFAULT|LIKE|ORDER|BY|ASC|DESC|LIMIT|OFFSET|JOIN|INNER|LEFT|RIGHT|ON|AS|COUNT|SUM|AVG|MAX|MIN)\b/gi, '$1') .replace(/('.*?'|".*?")/g, '$1') .replace(/\b(\d+\.?\d*)\b/g, '$1'); } return highlighted; } // 保存代码片段 function saveSnippet() { const title = titleInput.value.trim(); const desc = descInput.value.trim(); const language = languageSelect.value; const code = codeInput.value; if (!title) { showToast('请输入代码片段标题'); titleInput.focus(); return; } if (!code.trim()) { showToast('请输入代码内容'); codeInput.focus(); return; } const snippets = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); const snippet = { id: Date.now(), title, desc: desc || '暂无描述', language, code, createdAt: new Date().toLocaleString('zh-CN') }; snippets.unshift(snippet); localStorage.setItem(STORAGE_KEY, JSON.stringify(snippets)); showToast('代码片段保存成功！'); // 清空表单 titleInput.value = ''; descInput.value = ''; codeInput.value = ''; } // 预览代码 function showPreview() { const code = codeInput.value; const language = languageSelect.value; if (!code.trim()) { showToast('请先输入代码'); return; } previewContent.innerHTML = highlightCode(code, language); previewCard.style.display = 'block'; } // 复制文本 function copyToClipboard(text, successMsg) { navigator.clipboard.writeText(text).then(() => { showToast(successMsg || '复制成功！'); }).catch(() => { // 降级处理 const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); showToast(successMsg || '复制成功！'); }); } // 生成分享链接 function generateShareLink() { const title = titleInput.value.trim(); const desc = descInput.value.trim(); const language = languageSelect.value; const code = codeInput.value; if (!code.trim()) { showToast('请先输入代码'); return; } const shareData = { t: title || '未命名片段', d: desc, l: language, c: code }; const encoded = btoa(encodeURIComponent(JSON.stringify(shareData))); const url = `${window.location.origin}${window.location.pathname}?s=${encoded}`; shareUrlInput.value = url; shareModal.classList.add('show'); } // 解析分享链接 function parseShareLink() { const params = new URLSearchParams(window.location.search); const shareData = params.get('s'); if (shareData) { try { const decoded = JSON.parse(decodeURIComponent(atob(shareData))); titleInput.value = decoded.t || ''; descInput.value = decoded.d || ''; languageSelect.value = decoded.l || 'javascript'; codeInput.value = decoded.c || ''; showToast('已加载分享的代码片段'); // 切换到编辑面板 tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); document.querySelector('[data-tab="editor"]').classList.add('active'); document.getElementById('editor-panel').classList.add('active'); } catch (e) { console.error('解析分享链接失败:', e); } } } // 渲染代码片段列表 function renderSnippets() { const snippets = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); if (snippets.length === 0) { snippetsContainer.innerHTML = ` `; return; } snippetsContainer.innerHTML = snippets.map(snippet => ` `).join(''); } // HTML转义 function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // 全局函数 window.loadSnippet = function(id) { const snippets = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); const snippet = snippets.find(s => s.id === id); if (snippet) { titleInput.value = snippet.title; descInput.value = snippet.desc; languageSelect.value = snippet.language; codeInput.value = snippet.code; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); document.querySelector('[data-tab="editor"]').classList.add('active'); document.getElementById('editor-panel').classList.add('active'); showToast('已加载代码片段'); } }; window.copySnippet = function(id) { const snippets = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); const snippet = snippets.find(s => s.id === id); if (snippet) { copyToClipboard(snippet.code, '代码已复制到剪贴板'); } }; window.deleteSnippet = function(id) { if (confirm('确定要删除这个代码片段吗？')) { const snippets = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); const filtered = snippets.filter(s => s.id !== id); localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered)); renderSnippets(); showToast('代码片段已删除'); } }; // 渲染模板 function renderTemplates() { templatesContainer.innerHTML = TEMPLATES.map((template, index) => ` `).join(''); } window.loadTemplate = function(index) { const template = TEMPLATES[index]; titleInput.value = template.name; descInput.value = template.desc; languageSelect.value = template.language; codeInput.value = template.code; tabs.forEach(t => t.classList.remove('active')); panels.forEach(p => p.classList.remove('active')); document.querySelector('[data-tab="editor"]').classList.add('active'); document.getElementById('editor-panel').classList.add('active'); showToast('已加载模板代码'); }; // 事件绑定 saveBtn.addEventListener('click', saveSnippet); previewBtn.addEventListener('click', showPreview); shareBtn.addEventListener('click', generateShareLink); copyBtn.addEventListener('click', () => { if (codeInput.value.trim()) { copyToClipboard(codeInput.value, '代码已复制到剪贴板'); } else { showToast('请先输入代码'); } }); copyPreviewBtn.addEventListener('click', () => { copyToClipboard(codeInput.value, '代码已复制到剪贴板'); }); closePreviewBtn.addEventListener('click', () => { previewCard.style.display = 'none'; }); clearAllBtn.addEventListener('click', () => { if (confirm('确定要清空所有代码片段吗？此操作不可恢复！')) { localStorage.removeItem(STORAGE_KEY); renderSnippets(); showToast('已清空所有代码片段'); } }); copyLinkBtn.addEventListener('click', () => { copyToClipboard(shareUrlInput.value, '分享链接已复制'); }); closeModalBtns.forEach(btn => { btn.addEventListener('click', () => { shareModal.classList.remove('show'); }); }); shareModal.addEventListener('click', (e) => { if (e.target === shareModal) { shareModal.classList.remove('show'); } }); // 初始化 renderTemplates(); parseShareLink(); })();