Create snippet-manager.js

Author: wangweihanNB

js/snippet-manager.js

@@ -0,0 +1,320 @@
+/**
+ * Code Snippet Manager - 代码片段管理器
+ * 作者: wangweihanNB
+ * 功能: 保存、管理、搜索代码片段
+ */
+
+(function() {
+    'use strict';
+
+    // 数据存储
+    let snippets = [];
+    let currentFilter = 'all';
+    let searchKeyword = '';
+
+    // DOM 元素
+    const snippetName = document.getElementById('snippetName');
+    const snippetCategory = document.getElementById('snippetCategory');
+    const snippetCode = document.getElementById('snippetCode');
+    const snippetTags = document.getElementById('snippetTags');
+    const saveBtn = document.getElementById('saveBtn');
+    const searchInput = document.getElementById('searchInput');
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const snippetsList = document.getElementById('snippetsList');
+    const statsCount = document.getElementById('statsCount');
+    const exportBtn = document.getElementById('exportBtn');
+    const importBtn = document.getElementById('importBtn');
+    const importFile = document.getElementById('importFile');
+    const clearAllBtn = document.getElementById('clearAllBtn');
+    const copyToast = document.getElementById('copyToast');
+
+    // 加载数据
+    function loadSnippets() {
+        const saved = localStorage.getItem('code_snippets');
+        if (saved) {
+            snippets = JSON.parse(saved);
+        } else {
+            // 添加示例片段
+            snippets = [
+                {
+                    id: Date.now(),
+                    name: 'fetch GET 请求',
+                    category: 'JavaScript',
+                    code: `fetch('https://api.example.com/data')
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error('Error:', error));`,
+                    tags: ['api', 'fetch', '请求'],
+                    createdAt: new Date().toISOString()
+                },
+                {
+                    id: Date.now() + 1,
+                    name: '数组去重',
+                    category: 'JavaScript',
+                    code: `const uniqueArray = [...new Set(array)];`,
+                    tags: ['数组', '去重', 'ES6'],
+                    createdAt: new Date().toISOString()
+                }
+            ];
+            saveSnippets();
+        }
+        renderSnippets();
+    }
+
+    // 保存数据
+    function saveSnippets() {
+        localStorage.setItem('code_snippets', JSON.stringify(snippets));
+    }
+
+    // 添加片段
+    function addSnippet() {
+        const name = snippetName.value.trim();
+        const category = snippetCategory.value;
+        const code = snippetCode.value.trim();
+        const tagsInput = snippetTags.value.trim();
+
+        if (!name) {
+            alert('请输入片段名称');
+            return;
+        }
+        if (!code) {
+            alert('请输入代码内容');
+            return;
+        }
+
+        const tags = tagsInput ? tagsInput.split(',').map(t => t.trim()) : [];
+
+        const newSnippet = {
+            id: Date.now(),
+            name: name,
+            category: category,
+            code: code,
+            tags: tags,
+            createdAt: new Date().toISOString()
+        };
+
+        snippets.unshift(newSnippet);
+        saveSnippets();
+
+        // 清空表单
+        snippetName.value = '';
+        snippetCode.value = '';
+        snippetTags.value = '';
+
+        renderSnippets();
+        showToast('✅ 片段已保存');
+    }
+
+    // 删除片段
+    function deleteSnippet(id) {
+        if (confirm('确定要删除这个片段吗？')) {
+            snippets = snippets.filter(s => s.id !== id);
+            saveSnippets();
+            renderSnippets();
+            showToast('🗑️ 已删除');
+        }
+    }
+
+    // 复制代码
+    async function copyCode(code) {
+        try {
+            await navigator.clipboard.writeText(code);
+            showToast('📋 已复制到剪贴板');
+        } catch (err) {
+            // 降级方案
+            const textarea = document.createElement('textarea');
+            textarea.value = code;
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            showToast('📋 已复制到剪贴板');
+        }
+    }
+
+    // 显示提示
+    function showToast(message) {
+        copyToast.textContent = message;
+        copyToast.classList.add('show');
+        setTimeout(() => {
+            copyToast.classList.remove('show');
+        }, 2000);
+    }
+
+    // 过滤片段
+    function getFilteredSnippets() {
+        let filtered = snippets;
+
+        // 按分类过滤
+        if (currentFilter !== 'all') {
+            filtered = filtered.filter(s => s.category === currentFilter);
+        }
+
+        // 按搜索关键词过滤
+        if (searchKeyword) {
+            const keyword = searchKeyword.toLowerCase();
+            filtered = filtered.filter(s => 
+                s.name.toLowerCase().includes(keyword) ||
+                s.code.toLowerCase().includes(keyword) ||
+                s.tags.some(tag => tag.toLowerCase().includes(keyword))
+            );
+        }
+
+        return filtered;
+    }
+
+    // 渲染片段列表
+    function renderSnippets() {
+        const filtered = getFilteredSnippets();
+        
+        if (filtered.length === 0) {
+            snippetsList.innerHTML = '<div class="empty-state">✨ 暂无代码片段<br>点击上方添加你的第一个代码片段</div>';
+            statsCount.textContent = '0';
+            return;
+        }
+
+        let html = '';
+        filtered.forEach(snippet => {
+            // 高亮搜索关键词
+            let displayName = snippet.name;
+            let displayCode = snippet.code;
+            
+            if (searchKeyword) {
+                const regex = new RegExp(`(${searchKeyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+                displayName = snippet.name.replace(regex, '<mark style="background:#f9e2af; color:#1e1e2e;">$1</mark>');
+            }
+
+            html += `
+                <div class="snippet-card" data-id="${snippet.id}">
+                    <div class="snippet-header">
+                        <span class="snippet-name">${displayName}</span>
+                        <span class="snippet-category">${snippet.category}</span>
+                    </div>
+                    <div class="snippet-tags">
+                        ${snippet.tags.map(tag => `<span class="snippet-tag">#${escapeHtml(tag)}</span>`).join('')}
+                    </div>
+                    <pre class="snippet-code">${escapeHtml(snippet.code)}</pre>
+                    <div class="snippet-actions">
+                        <button class="copy-btn" data-code="${escapeHtml(snippet.code)}">📋 复制代码</button>
+                        <button class="delete-btn" data-id="${snippet.id}">🗑️ 删除</button>
+                    </div>
+                </div>
+            `;
+        });
+
+        snippetsList.innerHTML = html;
+        statsCount.textContent = filtered.length;
+
+        // 绑定事件
+        document.querySelectorAll('.copy-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const code = btn.getAttribute('data-code');
+                copyCode(code);
+            });
+        });
+
+        document.querySelectorAll('.delete-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const id = parseInt(btn.getAttribute('data-id'));
+                deleteSnippet(id);
+            });
+        });
+    }
+
+    // 导出数据
+    function exportData() {
+        const dataStr = JSON.stringify(snippets, null, 2);
+        const blob = new Blob([dataStr], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `code-snippets-${new Date().toISOString().slice(0, 19)}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+        showToast('📎 已导出');
+    }
+
+    // 导入数据
+    function importData(file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const imported = JSON.parse(e.target.result);
+                if (Array.isArray(imported)) {
+                    snippets = [...imported, ...snippets];
+                    saveSnippets();
+                    renderSnippets();
+                    showToast(`📂 已导入 ${imported.length} 个片段`);
+                } else {
+                    alert('文件格式错误');
+                }
+            } catch (err) {
+                alert('解析失败，请确保是有效的 JSON 文件');
+            }
+        };
+        reader.readAsText(file);
+    }
+
+    // 清空全部
+    function clearAll() {
+        if (confirm('⚠️ 确定要删除所有代码片段吗？此操作不可撤销！')) {
+            snippets = [];
+            saveSnippets();
+            renderSnippets();
+            showToast('🗑️ 已清空全部');
+        }
+    }
+
+    // 事件绑定
+    function bindEvents() {
+        saveBtn.addEventListener('click', addSnippet);
+        
+        searchInput.addEventListener('input', (e) => {
+            searchKeyword = e.target.value;
+            renderSnippets();
+        });
+
+        filterBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                filterBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                currentFilter = btn.getAttribute('data-category');
+                renderSnippets();
+            });
+        });
+
+        exportBtn.addEventListener('click', exportData);
+        
+        importBtn.addEventListener('click', () => {
+            importFile.click();
+        });
+        
+        importFile.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                importData(e.target.files[0]);
+                importFile.value = '';
+            }
+        });
+        
+        clearAllBtn.addEventListener('click', clearAll);
+    }
+
+    // HTML 转义
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // 初始化
+    function init() {
+        loadSnippets();
+        bindEvents();
+        console.log('✅ Code Snippet Manager 已启动');
+        console.log('💡 作者: wangweihanNB');
+    }
+
+    init();
+})();