script.js

// 全局变量
let notes = [];
let templates = [];
let currentNoteId = null;
let searchResults = []; // 搜索结果列表
let currentSearchIndex = -1; // 当前搜索结果的索引

// DOM元素
let notesList, templatesList, noteTitle, noteContent, templateDialog, templateName, templateContent, templateParent, noteSearch;

// 初始化
function init() {
    // 获取DOM元素
    notesList = document.getElementById('notes-list');
    templatesList = document.getElementById('templates-list');
    noteTitle = document.getElementById('note-title');
    noteContent = document.getElementById('note-content');
    templateDialog = document.getElementById('template-dialog');
    templateName = document.getElementById('template-name');
    templateContent = document.getElementById('template-content');
    templateParent = document.getElementById('template-parent');
    noteSearch = document.getElementById('note-search');
    
    // 从localStorage加载数据
    loadData();
    // 渲染笔记列表
    renderNotes();
    // 渲染模板列表
    renderTemplates();
    // 绑定事件
    bindEvents();
    // 应用header背景设置
    applyHeaderBackground();
    
    // 显示空白页面
    currentNoteId = null;
    if (noteTitle) {
        noteTitle.value = '';
    }
    const noteContentRich = document.getElementById('note-content-rich');
    if (noteContentRich) {
        noteContentRich.innerHTML = '';
    }
}

// 从localStorage加载数据
function loadData() {
    const savedNotes = localStorage.getItem('dnotes-notes');
    const savedTemplates = localStorage.getItem('dnotes-templates');
    
    // 初始化空数组
    notes = [];
    templates = [];
    
    if (savedNotes) {
        try {
            const parsedNotes = JSON.parse(savedNotes);
            if (Array.isArray(parsedNotes)) {
                // 确保每个笔记都有必要的属性
                notes = parsedNotes.map(note => ({
                    id: note.id,
                    parentId: note.parentId || null,
                    title: note.title || '',
                    content: note.content || '',
                    contentType: note.contentType || 'text', // 默认为纯文本
                    expanded: note.expanded !== false // 默认展开
                }));
            }
        } catch (e) {
            console.error('加载笔记数据失败:', e);
        }
    }
    
    if (savedTemplates) {
        try {
            const parsedTemplates = JSON.parse(savedTemplates);
            if (Array.isArray(parsedTemplates)) {
                // 确保每个模板都有必要的属性
                templates = parsedTemplates.map(template => ({
                    id: template.id,
                    parentId: template.parentId || null,
                    name: template.name || '',
                    content: template.content || '',
                    contentType: template.contentType || 'text', // 默认为纯文本
                    expanded: template.expanded !== false // 默认展开
                }));
            }
        } catch (e) {
            console.error('加载模板数据失败:', e);
        }
    }
}

// 保存数据到localStorage
function saveData() {
    try {
        localStorage.setItem('dnotes-notes', JSON.stringify(notes));
        localStorage.setItem('dnotes-templates', JSON.stringify(templates));
    } catch (e) {
        console.error('保存数据失败:', e);
        alert('保存数据失败，请检查浏览器存储空间');
    }
}

// 渲染笔记列表（限制为2级目录）
function renderNotes(searchQuery = '') {
    notesList.innerHTML = '';
    
    // 添加搜索框
    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.id = 'note-search';
    searchInput.placeholder = '搜索笔记...';
    searchInput.style.cssText = `
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    `;
    searchInput.value = searchQuery;
    searchInput.addEventListener('input', (e) => {
        const value = e.target.value;
        if (!value.trim()) {
            // 清空搜索时重置状态
            searchResults = [];
            currentSearchIndex = -1;
        }
        renderNotes(value);
    });
    notesList.appendChild(searchInput);
    
    // 添加排序按钮容器（搜索框下方）
    const sortButtonsDiv = document.createElement('div');
    sortButtonsDiv.style.cssText = `
        display: flex;
        justify-content: flex-end;
        gap: 5px;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    `;
    
    // 笔记排序按钮
    const noteSortButton = document.createElement('button');
    noteSortButton.textContent = '📋 排序笔记';
    noteSortButton.style.cssText = `
        padding: 4px 8px;
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    `;
    noteSortButton.addEventListener('click', () => openSortDialog('note'));
    
    // 模板排序按钮
    const templateSortButton = document.createElement('button');
    templateSortButton.textContent = '📋 排序模板';
    templateSortButton.style.cssText = `
        padding: 4px 8px;
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    `;
    templateSortButton.addEventListener('click', () => openSortDialog('template'));
    
    sortButtonsDiv.appendChild(noteSortButton);
    sortButtonsDiv.appendChild(templateSortButton);
    notesList.appendChild(sortButtonsDiv);
    
    // 如果有搜索关键词，显示所有匹配的笔记
    if (searchQuery.trim()) {
        const query = searchQuery.toLowerCase();
        searchResults = notes.filter(note => 
            (note.title && note.title.toLowerCase().includes(query)) ||
            (note.content && note.content.toLowerCase().includes(query))
        );
        
        // 显示搜索结果导航
        if (searchResults.length > 0) {
            const navLi = document.createElement('li');
            navLi.style.display = 'flex';
            navLi.style.alignItems = 'center';
            navLi.style.padding = '5px';
            navLi.style.backgroundColor = '#f0f0f0';
            navLi.style.borderRadius = '4px';
            navLi.style.marginBottom = '10px';
            
            const resultInfo = document.createElement('span');
            resultInfo.textContent = `找到 ${searchResults.length} 个结果`;
            resultInfo.style.flex = '1';
            resultInfo.style.fontSize = '12px';
            resultInfo.style.color = '#666';
            
            const prevButton = document.createElement('button');
            prevButton.textContent = '⬆️';
            prevButton.style.fontSize = '12px';
            prevButton.style.padding = '2px 6px';
            prevButton.style.marginLeft = '5px';
            prevButton.style.backgroundColor = '#2196F3';
            prevButton.style.color = 'white';
            prevButton.style.border = 'none';
            prevButton.style.borderRadius = '3px';
            prevButton.style.cursor = 'pointer';
            prevButton.title = '上一个结果';
            prevButton.addEventListener('click', () => navigateSearchResult(-1));
            
            const nextButton = document.createElement('button');
            nextButton.textContent = '⬇️';
            nextButton.style.fontSize = '12px';
            nextButton.style.padding = '2px 6px';
            nextButton.style.marginLeft = '5px';
            nextButton.style.backgroundColor = '#2196F3';
            nextButton.style.color = 'white';
            nextButton.style.border = 'none';
            nextButton.style.borderRadius = '3px';
            nextButton.style.cursor = 'pointer';
            nextButton.title = '下一个结果';
            nextButton.addEventListener('click', () => navigateSearchResult(1));
            
            navLi.appendChild(resultInfo);
            navLi.appendChild(prevButton);
            navLi.appendChild(nextButton);
            notesList.appendChild(navLi);
            
            // 默认选中第一个结果
            if (currentSearchIndex === -1 && searchResults.length > 0) {
                currentSearchIndex = 0;
                selectNoteAndHighlight(searchResults[0].id, searchQuery);
            }
        }
        
        searchResults.forEach((note, index) => {
            const li = document.createElement('li');
            li.dataset.id = note.id;
            li.style.cursor = 'pointer';
            
            // 如果是当前选中的结果，高亮显示
            if (index === currentSearchIndex) {
                li.style.backgroundColor = '#e3f2fd';
                li.style.borderLeft = '3px solid #2196F3';
            }
            
            // 笔记标题（高亮匹配）
            const noteTitle = document.createElement('span');
            let titleText = note.title || '无标题';
            // 高亮匹配的文字
            if (note.title && note.title.toLowerCase().includes(query)) {
                const regex = new RegExp(`(${searchQuery})`, 'gi');
                titleText = note.title.replace(regex, '<mark style="background-color: #ffeb3b; padding: 1px 2px;">$1</mark>');
            }
            noteTitle.innerHTML = titleText;
            noteTitle.style.flex = '1';
            noteTitle.style.cursor = 'pointer';
            noteTitle.addEventListener('click', () => {
                currentSearchIndex = index;
                selectNoteAndHighlight(note.id, searchQuery);
                renderNotes(searchQuery);
            });
            
            // 组装元素
            li.style.display = 'flex';
            li.style.alignItems = 'center';
            li.appendChild(noteTitle);
            
            notesList.appendChild(li);
        });
        
        // 显示搜索结果数量
        if (searchResults.length === 0) {
            const noResult = document.createElement('li');
            noResult.textContent = '未找到匹配的笔记';
            noResult.style.color = '#999';
            noResult.style.fontStyle = 'italic';
            notesList.appendChild(noResult);
            currentSearchIndex = -1;
        }
    } else {
        // 渲染第一级笔记
        const firstLevelNotes = notes.filter(note => note.parentId === null);
        firstLevelNotes.forEach(note => {
            const li = document.createElement('li');
            li.dataset.id = note.id;
            
            // 折叠/展开按钮
            const toggleButton = document.createElement('span');
            const hasChildren = notes.some(n => n.parentId === note.id);
            toggleButton.textContent = hasChildren ? (note.expanded ? '▼' : '▶') : ' ';
            toggleButton.style.cursor = hasChildren ? 'pointer' : 'default';
            toggleButton.style.marginRight = '5px';
            toggleButton.style.display = 'inline-block';
            toggleButton.style.width = '12px';
            if (hasChildren) {
                toggleButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    note.expanded = !note.expanded;
                    saveData();
                    renderNotes();
                });
            }
            
            // 笔记标题（父目录样式）
            const noteTitle = document.createElement('span');
            noteTitle.textContent = note.title || '无标题';
            noteTitle.style.flex = '1';
            noteTitle.style.fontWeight = 'bold';
            noteTitle.style.color = '#666';
            noteTitle.addEventListener('click', () => selectNote(note.id));
            
            // 添加子笔记按钮
        const addChildButton = document.createElement('button');
        addChildButton.textContent = '➕';
        addChildButton.style.fontSize = '12px';
        addChildButton.style.padding = '2px 4px';
        addChildButton.style.marginLeft = '2px';
        addChildButton.style.backgroundColor = 'transparent';
        addChildButton.style.color = '#7dadf1ff';
        addChildButton.style.border = 'none';
        addChildButton.style.borderRadius = '3px';
        addChildButton.style.cursor = 'pointer';
        addChildButton.title = '添加子笔记';
        addChildButton.addEventListener('click', (e) => {
            e.stopPropagation();
            createNote(note.id);
        });
        
            // 组装元素
            li.style.display = 'flex';
            li.style.alignItems = 'center';
            li.appendChild(toggleButton);
            li.appendChild(noteTitle);
            li.appendChild(addChildButton);
            
            if (note.id === currentNoteId) {
                li.classList.add('active');
            }
            
            notesList.appendChild(li);
            
            // 渲染第二级笔记
            if (note.expanded) {
                const secondLevelNotes = notes.filter(n => n.parentId === note.id);
                secondLevelNotes.forEach(childNote => {
                    const childLi = document.createElement('li');
                    childLi.dataset.id = childNote.id;
                    childLi.style.paddingLeft = '30px';
                    childLi.style.fontSize = '0.9em';
                    
                    // 笔记标题（子目录样式）
                    const childNoteTitle = document.createElement('span');
                    childNoteTitle.textContent = '└ ' + (childNote.title || '无标题');
                    childNoteTitle.style.flex = '1';
                    childNoteTitle.style.fontSize = '0.85em';
                    childNoteTitle.style.color = '#333';
                    childNoteTitle.addEventListener('click', () => selectNote(childNote.id));
                    

                    
                    // 组装元素
                    childLi.style.display = 'flex';
                    childLi.style.alignItems = 'center';
                    childLi.appendChild(childNoteTitle);
                    
                    if (childNote.id === currentNoteId) {
                        childLi.classList.add('active');
                    }
                    
                    notesList.appendChild(childLi);
                });
            }
        });
    }
}

// 渲染模板列表（限制为2级目录）
function renderTemplates() {
    templatesList.innerHTML = '';
    
    // 渲染第一级模板
    const firstLevelTemplates = templates.filter(template => template.parentId === null);
    firstLevelTemplates.forEach(template => {
        const li = document.createElement('li');
        li.dataset.id = template.id;
        
        // 折叠/展开按钮
        const toggleButton = document.createElement('span');
        const hasChildren = templates.some(t => t.parentId === template.id);
        toggleButton.textContent = hasChildren ? (template.expanded ? '▼' : '▶') : ' ';
        toggleButton.style.cursor = hasChildren ? 'pointer' : 'default';
        toggleButton.style.marginRight = '5px';
        toggleButton.style.display = 'inline-block';
        toggleButton.style.width = '12px';
        if (hasChildren) {
            toggleButton.addEventListener('click', (e) => {
                e.stopPropagation();
                template.expanded = !template.expanded;
                saveData();
                renderTemplates();
            });
        }
        
        // 模板名称（父目录不可点击复制）
        const templateName = document.createElement('span');
        templateName.textContent = template.name;
        templateName.style.flex = '1';
        templateName.style.color = '#666';
        templateName.style.fontWeight = 'bold';
        
        // 添加子模板按钮
        const addChildButton = document.createElement('button');
        addChildButton.textContent = '➕';
        addChildButton.style.fontSize = '12px';
        addChildButton.style.padding = '2px 4px';
        addChildButton.style.marginLeft = '2px';
        addChildButton.style.backgroundColor = 'transparent';
        addChildButton.style.color = '#7dadf1ff';
        addChildButton.style.border = 'none';
        addChildButton.style.borderRadius = '3px';
        addChildButton.style.cursor = 'pointer';
        addChildButton.title = '添加子模板';
        addChildButton.addEventListener('click', (e) => {
            e.stopPropagation();
            openTemplateDialog(template.id);
        });
        
        // 编辑按钮
        const editButton = document.createElement('button');
        editButton.textContent = '📝';
        editButton.style.fontSize = '12px';
        editButton.style.padding = '2px 4px';
        editButton.style.marginLeft = '2px';
        editButton.style.backgroundColor = 'transparent';
        editButton.style.color = '#2196F3';
        editButton.style.border = 'none';
        editButton.style.borderRadius = '3px';
        editButton.style.cursor = 'pointer';
        editButton.title = '编辑模板';
        editButton.addEventListener('click', (e) => {
            e.stopPropagation();
            editTemplate(template.id);
        });
        
        // 删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '❌';
        deleteButton.style.fontSize = '12px';
        deleteButton.style.padding = '2px 4px';
        deleteButton.style.marginLeft = '2px';
        deleteButton.style.backgroundColor = 'transparent';
        deleteButton.style.color = '#4cc6e7ff';
        deleteButton.style.border = 'none';
        deleteButton.style.borderRadius = '3px';
        deleteButton.style.cursor = 'pointer';
        deleteButton.title = '删除模板';
        deleteButton.addEventListener('click', (e) => {
            e.stopPropagation();
            deleteTemplate(template.id);
        });
        
        // 组装元素
        li.style.display = 'flex';
        li.style.alignItems = 'center';
        li.appendChild(toggleButton);
        li.appendChild(templateName);
        li.appendChild(addChildButton);
        li.appendChild(editButton);
        li.appendChild(deleteButton);
        
        templatesList.appendChild(li);
        
        // 渲染第二级模板
        const secondLevelTemplates = templates.filter(t => t.parentId === template.id);
        if (secondLevelTemplates.length > 0) {
            if (template.expanded) {
                secondLevelTemplates.forEach(childTemplate => {
                    const childLi = document.createElement('li');
                    childLi.dataset.id = childTemplate.id;
                    childLi.style.paddingLeft = '30px';
                    childLi.style.fontSize = '0.9em';
                    
                    // 模板名称（子目录字体更小）
                    const childTemplateName = document.createElement('span');
                    childTemplateName.textContent = '└ ' + childTemplate.name;
                    childTemplateName.style.flex = '1';
                    childTemplateName.style.fontSize = '0.85em';
                    childTemplateName.style.color = '#333';
                    childTemplateName.addEventListener('click', () => copyTemplateToClipboard(childTemplate.id));
                    

                    
                    // 编辑按钮
                    const childEditButton = document.createElement('button');
                    childEditButton.textContent = '📝';
                    childEditButton.style.fontSize = '11px';
                    childEditButton.style.padding = '2px 4px';
                    childEditButton.style.marginLeft = '2px';
                    childEditButton.style.backgroundColor = 'transparent';
                    childEditButton.style.color = '#2196F3';
                    childEditButton.style.border = 'none';
                    childEditButton.style.borderRadius = '3px';
                    childEditButton.style.cursor = 'pointer';
                    childEditButton.title = '编辑模板';
                    childEditButton.addEventListener('click', (e) => {
                        e.stopPropagation();
                        editTemplate(childTemplate.id);
                    });
                    
                    // 删除按钮
                    const childDeleteButton = document.createElement('button');
                    childDeleteButton.textContent = '❌';
                    childDeleteButton.style.fontSize = '11px';
                    childDeleteButton.style.padding = '2px 4px';
                    childDeleteButton.style.marginLeft = '2px';
                    childDeleteButton.style.backgroundColor = 'transparent';
                    childDeleteButton.style.color = '#4cc6e7ff';
                    childDeleteButton.style.border = 'none';
                    childDeleteButton.style.borderRadius = '3px';
                    childDeleteButton.style.cursor = 'pointer';
                    childDeleteButton.title = '删除模板';
                    childDeleteButton.addEventListener('click', (e) => {
                        e.stopPropagation();
                        deleteTemplate(childTemplate.id);
                    });
                    
                    // 组装元素
                    childLi.style.display = 'flex';
                    childLi.style.alignItems = 'center';
                    childLi.appendChild(childTemplateName);
                    childLi.appendChild(childEditButton);
                    childLi.appendChild(childDeleteButton);
                    
                    templatesList.appendChild(childLi);
                });
            }
        }
    });
}

// 选择笔记
function selectNote(id) {
    const note = notes.find(n => n.id === id);
    if (note) {
        currentNoteId = id;
        noteTitle.value = note.title;
        document.getElementById('note-content-rich').innerHTML = note.content || '';
        renderNotes();
    }
}

// 选择笔记并高亮搜索词
function selectNoteAndHighlight(id, searchQuery) {
    const note = notes.find(n => n.id === id);
    if (note) {
        currentNoteId = id;
        noteTitle.value = note.title;
        
        // 高亮内容中的搜索词
        let content = note.content || '';
        if (searchQuery && content) {
            const query = searchQuery.toLowerCase();
            // 使用正则表达式高亮搜索词（保留HTML标签）
            const regex = new RegExp(`(${searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
            content = content.replace(regex, '<mark style="background-color: #ffeb3b; padding: 1px 2px;">$1</mark>');
        }
        document.getElementById('note-content-rich').innerHTML = content;
        
        // 滚动到第一个匹配的位置
        setTimeout(() => {
            const firstMark = document.getElementById('note-content-rich').querySelector('mark');
            if (firstMark) {
                firstMark.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }, 100);
    }
}

// 导航搜索结果
function navigateSearchResult(direction) {
    if (searchResults.length === 0) return;
    
    currentSearchIndex += direction;
    
    // 循环导航
    if (currentSearchIndex < 0) {
        currentSearchIndex = searchResults.length - 1;
    } else if (currentSearchIndex >= searchResults.length) {
        currentSearchIndex = 0;
    }
    
    const note = searchResults[currentSearchIndex];
    const searchQuery = noteSearch.value;
    selectNoteAndHighlight(note.id, searchQuery);
    renderNotes(searchQuery);
}

// 移动笔记
function moveNote(id, direction) {
    const note = notes.find(note => note.id === id);
    if (!note) return;
    
    // 获取同一层级的所有笔记
    const sameLevelNotes = notes.filter(n => n.parentId === note.parentId);
    const noteIndex = sameLevelNotes.findIndex(n => n.id === id);
    
    const targetIndex = direction === 'up' ? noteIndex - 1 : noteIndex + 1;
    
    // 检查目标位置是否有效
    if (targetIndex >= 0 && targetIndex < sameLevelNotes.length) {
        // 找到目标笔记在原始数组中的索引
        const targetNote = sameLevelNotes[targetIndex];
        const originalTargetIndex = notes.findIndex(n => n.id === targetNote.id);
        const originalNoteIndex = notes.findIndex(n => n.id === id);
        
        // 交换位置
        [notes[originalNoteIndex], notes[originalTargetIndex]] = [notes[originalTargetIndex], notes[originalNoteIndex]];
        saveData();
        renderNotes();
    }
}

// 移动模板
function moveTemplate(id, direction) {
    const template = templates.find(template => template.id === id);
    if (!template) return;
    
    // 获取同一层级的所有模板
    const sameLevelTemplates = templates.filter(t => t.parentId === template.parentId);
    const templateIndex = sameLevelTemplates.findIndex(t => t.id === id);
    
    const targetIndex = direction === 'up' ? templateIndex - 1 : templateIndex + 1;
    
    // 检查目标位置是否有效
    if (targetIndex >= 0 && targetIndex < sameLevelTemplates.length) {
        // 找到目标模板在原始数组中的索引
        const targetTemplate = sameLevelTemplates[targetIndex];
        const originalTargetIndex = templates.findIndex(t => t.id === targetTemplate.id);
        const originalTemplateIndex = templates.findIndex(t => t.id === id);
        
        // 交换位置
        [templates[originalTemplateIndex], templates[originalTargetIndex]] = [templates[originalTargetIndex], templates[originalTemplateIndex]];
        saveData();
        renderTemplates();
    }
}

// 打开排序对话框
function openSortDialog(type) {
    // 根据类型获取数据
    let items, renderFunction, saveFunction;
    if (type === 'note') {
        items = notes;
        renderFunction = renderNotes;
        saveFunction = () => {
            saveData();
            renderNotes();
        };
    } else if (type === 'template') {
        items = templates;
        renderFunction = renderTemplates;
        saveFunction = () => {
            saveData();
            renderTemplates();
        };
    } else {
        return;
    }
    
    // 创建排序对话框
    const dialog = document.createElement('div');
    dialog.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    `;
    
    const dialogContent = document.createElement('div');
    dialogContent.style.cssText = `
        background-color: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        width: 90%;
        max-width: 500px;
    `;
    
    dialogContent.innerHTML = `
        <h3 style="margin-top: 0; margin-bottom: 1rem;">排序 ${type === 'note' ? '笔记' : '模板'}</h3>
        <div style="margin-bottom: 1.5rem; max-height: 400px; overflow-y: auto;"></div>
        <div style="display: flex; justify-content: flex-end; gap: 1rem;">
            <button id="cancel-sort" style="padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; cursor: pointer;">取消</button>
            <button id="save-sort" style="padding: 0.5rem 1rem; border: none; border-radius: 4px; background-color: #4CAF50; color: white; cursor: pointer;">保存排序</button>
        </div>
    `;
    
    dialog.appendChild(dialogContent);
    document.body.appendChild(dialog);
    
    // 添加排序项
    const itemsContainer = dialogContent.querySelector('div');
    
    // 递归添加排序项
    function addSortItems(items, parentId = null, level = 0) {
        const levelItems = items.filter(item => item.parentId === parentId);
        levelItems.forEach((item, index) => {
            const itemDiv = document.createElement('div');
            itemDiv.style.cssText = `
                display: flex;
                align-items: center;
                padding: 0.5rem;
                border: 1px solid #ddd;
                border-radius: 4px;
                margin-bottom: 0.5rem;
                background-color: #f9f9f9;
                padding-left: ${level * 10 + 0.5}rem;
            `;
            
            const input = document.createElement('input');
            input.type = 'text';
            input.value = index + 1;
            input.style.cssText = `
                width: 40px;
                margin-right: 1rem;
                padding: 0.25rem;
                border: 1px solid #ddd;
                border-radius: 4px;
                text-align: center;
            `;
            
            const name = document.createElement('span');
            name.textContent = type === 'note' ? (item.title || '无标题') : item.name;
            name.style.flex = '1';
            
            itemDiv.appendChild(input);
            itemDiv.appendChild(name);
            itemDiv.dataset.id = item.id;
            itemDiv.dataset.level = level;
            
            itemsContainer.appendChild(itemDiv);
            
            // 递归添加子项目
            addSortItems(items, item.id, level + 1);
        });
    }
    
    // 开始添加排序项
    addSortItems(items);
    
    // 取消按钮
    document.getElementById('cancel-sort').addEventListener('click', () => {
        document.body.removeChild(dialog);
    });
    
    // 保存按钮
    document.getElementById('save-sort').addEventListener('click', () => {
        const itemDivs = itemsContainer.querySelectorAll('div');
        const sortedItems = [];
        
        // 按层级分组
        const levelGroups = {};
        itemDivs.forEach(div => {
            const id = div.dataset.id;
            const level = parseInt(div.dataset.level);
            const order = parseInt(div.querySelector('input').value) || 0;
            
            if (!levelGroups[level]) {
                levelGroups[level] = [];
            }
            levelGroups[level].push({ id, order, level });
        });
        
        // 处理排序
        const newArray = [];
        
        // 先处理一级项目
        const level0Items = levelGroups[0] || [];
        level0Items.sort((a, b) => a.order - b.order);
        
        // 递归处理各级项目
        function processLevel(parentId, level) {
            const levelItems = (levelGroups[level] || []).filter(item => {
                const itemObj = items.find(i => i.id === item.id);
                return itemObj && itemObj.parentId === parentId;
            });
            
            levelItems.sort((a, b) => a.order - b.order);
            
            levelItems.forEach(item => {
                const originalItem = items.find(i => i.id === item.id);
                if (originalItem) {
                    newArray.push(originalItem);
                    // 处理子项目
                    processLevel(item.id, level + 1);
                }
            });
        }
        
        // 开始处理
        processLevel(null, 0);
        
        // 更新数组
        if (type === 'note') {
            notes = newArray;
        } else {
            templates = newArray;
        }
        
        // 保存并渲染
        saveFunction();
        document.body.removeChild(dialog);
    });
    
    // 点击对话框外部关闭
    dialog.addEventListener('click', (e) => {
        if (e.target === dialog) {
            document.body.removeChild(dialog);
        }
    });
}

// 新建笔记
function createNote(parentId = null) {
    const newNote = {
        id: Date.now().toString(),
        parentId: parentId,
        title: '',
        content: '',
        contentType: 'rich',
        expanded: true
    };
    
    notes.push(newNote);
    saveData();
    selectNote(newNote.id);
    renderNotes();
}

// 保存笔记
function saveNote() {
    if (currentNoteId) {
        const note = notes.find(n => n.id === currentNoteId);
        if (note) {
            note.title = noteTitle.value;
            note.content = document.getElementById('note-content-rich').innerHTML;
            note.lastModified = Date.now(); // 添加修改时间
            saveData();
            renderNotes();
        }
    }
}

// 删除笔记
function deleteNote() {
    if (currentNoteId) {
        if (confirm('确定要删除这篇笔记吗？')) {
            notes = notes.filter(n => n.id !== currentNoteId);
            saveData();
            currentNoteId = null;
            noteTitle.value = '';
            noteContent.value = '';
            renderNotes();
        }
    }
}

// 加载父模板选项（限制为2级目录）
function loadParentTemplateOptions(selectedId = '') {
    templateParent.innerHTML = '<option value="">无父模板（根目录）</option>';
    
    // 添加第一级模板选项
    const firstLevelTemplates = templates.filter(t => t.parentId === null);
    firstLevelTemplates.forEach(template => {
        const option = document.createElement('option');
        option.value = template.id;
        option.textContent = template.name;
        if (template.id === selectedId) {
            option.selected = true;
        }
        templateParent.appendChild(option);
    });
}

// 打开模板对话框
function openTemplateDialog(parentId = null) {
    templateDialog.style.display = 'flex';
    templateName.value = '';
    document.getElementById('template-content-text').value = '';
    loadParentTemplateOptions(parentId || '');
    
    // 根据是否选择父模板，显示或隐藏内容编辑区域
    updateTemplateDialogContentVisibility();
}

// 更新模板对话框内容编辑区域的可见性
function updateTemplateDialogContentVisibility() {
    const parentId = templateParent.value;
    const contentText = document.getElementById('template-content-text');
    
    // 如果选择了父模板（二级模板），显示内容编辑区域
    if (parentId) {
        contentText.style.display = 'block';
    } else {
        // 一级模板，隐藏内容编辑区域
        contentText.style.display = 'none';
    }
}

// 打开模板对话框
function openTemplateDialog() {
    templateDialog.style.display = 'flex';
    templateName.value = '';
    document.getElementById('template-content-text').value = '';
    document.getElementById('template-content-rich').innerHTML = '';
    // 默认选择纯文本
    document.querySelector('input[name="template-type"][value="text"]').checked = true;
    switchTemplateEditor('text');
    loadParentTemplateOptions();
}

// 关闭模板对话框
function closeTemplateDialog() {
    templateDialog.style.display = 'none';
}

// 保存模板
function saveTemplate() {
    const name = templateName.value.trim();
    let content = '';
    
    const parentId = templateParent.value || null;
    
    // 只有二级模板才需要内容
    if (parentId) {
        content = document.getElementById('template-content-text').value;
    }
    
    if (name) {
        const editingId = templateDialog.dataset.editingId;
        let finalParentId = parentId;
        
        // 确保parentId是有效的
        if (finalParentId && !templates.some(t => t.id === finalParentId)) {
            finalParentId = null;
        }
        
        if (editingId) {
            // 编辑现有模板
            const template = templates.find(t => t.id === editingId);
            if (template) {
                template.name = name;
                template.content = content;
                template.parentId = finalParentId;
            }
        } else {
            // 创建新模板
            const newTemplate = {
                id: Date.now().toString(),
                parentId: finalParentId,
                name: name,
                content: content,
                expanded: true
            };
            templates.push(newTemplate);
        }
        
        // 如果是二级模板，确保父模板展开
        if (finalParentId) {
            const parentTemplate = templates.find(t => t.id === finalParentId);
            if (parentTemplate) {
                parentTemplate.expanded = true;
            }
        }
        
        saveData();
        renderTemplates();
        closeTemplateDialog();
        // 清除编辑状态
        delete templateDialog.dataset.editingId;
    } else {
        alert('请输入模板名称');
    }
}

// 删除模板
// 打开删除确认对话框
function openDeleteConfirmDialog(id, type = 'template') {
    // 创建确认对话框
    const dialog = document.createElement('div');
    dialog.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    `;
    
    const dialogContent = document.createElement('div');
    dialogContent.style.cssText = `
        background-color: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        width: 90%;
        max-width: 500px;
    `;
    
    let title, message;
    if (type === 'template') {
        const template = templates.find(t => t.id === id);
        if (!template) return;
        
        title = '删除模板确认';
        message = `<p style="margin-bottom: 1.5rem;">确定要删除模板 <strong>${template.name}</strong> 吗？</p>`;
        
        const hasChildren = templates.some(t => t.parentId === id);
        if (hasChildren) {
            message += `<p style="margin-bottom: 1.5rem; color: #f44336;"><strong>注意：</strong>该模板下的所有子模板也会被删除！</p>`;
        }
        
        message += `<p style="margin-bottom: 1.5rem; font-size: 0.9em; color: #666;">此操作无法撤销，请谨慎操作。</p>`;
    }
    
    dialogContent.innerHTML = `
        <h3 style="margin-top: 0; margin-bottom: 1.5rem;">${title}</h3>
        ${message}
        <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9em;">请输入 <strong style="color: #f44336;">删除</strong> 以确认：</label>
            <input type="text" id="delete-confirm-input" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
        </div>
        <div style="display: flex; justify-content: flex-end; gap: 1rem;">
            <button id="cancel-delete" style="padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; cursor: pointer;">取消</button>
            <button id="confirm-delete" style="padding: 0.5rem 1rem; border: none; border-radius: 4px; background-color: #f44336; color: white; cursor: pointer; opacity: 0.6; pointer-events: none;">确认删除</button>
        </div>
    `;
    
    dialog.appendChild(dialogContent);
    document.body.appendChild(dialog);
    
    // 绑定事件
    document.getElementById('cancel-delete').addEventListener('click', () => {
        document.body.removeChild(dialog);
    });
    
    // 输入框事件监听器
    const confirmInput = document.getElementById('delete-confirm-input');
    const confirmButton = document.getElementById('confirm-delete');
    
    confirmInput.addEventListener('input', () => {
        if (confirmInput.value === '删除') {
            confirmButton.style.opacity = '1';
            confirmButton.style.pointerEvents = 'auto';
        } else {
            confirmButton.style.opacity = '0.6';
            confirmButton.style.pointerEvents = 'none';
        }
    });
    
    document.getElementById('confirm-delete').addEventListener('click', () => {
        if (type === 'template' && confirmInput.value === '删除') {
            // 执行删除操作
            templates = templates.filter(t => t.id !== id && t.parentId !== id);
            saveData();
            renderTemplates();
            showNotification('模板已删除');
        }
        document.body.removeChild(dialog);
    });
    
    // 点击对话框外部关闭
    dialog.addEventListener('click', (e) => {
        if (e.target === dialog) {
            document.body.removeChild(dialog);
        }
    });
}

// 删除模板
function deleteTemplate(id) {
    openDeleteConfirmDialog(id, 'template');
}

// 提取HTML中的纯文本
function getPlainText(html) {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = html;
    return tempElement.textContent || tempElement.innerText || '';
}

// 复制模板到剪贴板
function copyTemplateToClipboard(id) {
    const template = templates.find(t => t.id === id);
    if (template) {
        // 提取纯文本内容
        const plainText = getPlainText(template.content);
        
        // 尝试使用现代剪贴板API
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(plainText)
                .then(() => {
                    alert('模板内容已复制到剪贴板');
                })
                .catch(err => {
                    console.error('复制失败:', err);
                    // 降级方案：使用传统方法
                    fallbackCopyTextToClipboard(plainText);
                });
        } else {
            // 使用降级方案
            fallbackCopyTextToClipboard(plainText);
        }
    }
}

// 降级复制方案（兼容旧浏览器和本地文件）
function fallbackCopyTextToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    textArea.style.top = '0';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            alert('模板内容已复制到剪贴板');
        } else {
            alert('复制失败，请手动复制');
        }
    } catch (err) {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
    }
    
    document.body.removeChild(textArea);
}

// 编辑模板
function editTemplate(id) {
    const template = templates.find(t => t.id === id);
    if (template) {
        // 打开模板对话框
        templateDialog.style.display = 'flex';
        templateName.value = template.name;
        
        // 设置内容
        document.getElementById('template-content-text').value = template.content;
        
        loadParentTemplateOptions(template.parentId || '');
        // 保存当前编辑的模板ID
        templateDialog.dataset.editingId = id;
        
        // 根据是否是二级模板，显示或隐藏内容编辑区域
        updateTemplateDialogContentVisibility();
    }
}

// 使用模板（保留原功能，用于其他地方调用）
function useTemplate(id) {
    const template = templates.find(t => t.id === id);
    if (template) {
        // 如果当前有笔记，在内容后追加模板
        // 否则创建新笔记
        if (currentNoteId) {
            const note = notes.find(n => n.id === currentNoteId);
            if (note) {
                note.content += '\n' + template.content;
                noteContent.value = note.content;
                saveData();
            }
        } else {
            createNote();
            noteContent.value = template.content;
            saveNote();
        }
    }
}

// Ctrl+S 快捷键保存笔记
function handleKeyDown(e) {
    if (e.ctrlKey && (e.key === 's' || e.key === 'S')) {
        e.preventDefault(); // 阻止浏览器默认的保存网页行为
        e.stopPropagation(); // 阻止事件冒泡
        saveNote();
        // 显示保存成功提示
        showSaveNotification();
        return false;
    }
    return true;
}

// 绑定事件
function bindEvents() {
    // 新建笔记
    document.getElementById('new-note').addEventListener('click', createNote);
    
    // 保存笔记
    document.getElementById('save-note').addEventListener('click', () => {
        saveNote();
        showSaveNotification();
    });
    
    // 删除笔记
    document.getElementById('delete-note').addEventListener('click', deleteNote);
    
    // 打开添加模板对话框
    document.getElementById('add-template').addEventListener('click', () => openTemplateDialog());
    
    // 保存模板 - 使用内联onclick事件处理
    
    // 取消添加模板 - 使用内联onclick事件处理
    
    // 父模板选择变化时，更新内容编辑区域的可见性
    templateParent.addEventListener('change', updateTemplateDialogContentVisibility);
    
    // 点击对话框外部关闭
    templateDialog.addEventListener('click', (e) => {
        if (e.target === templateDialog) {
            closeTemplateDialog();
        }
    });
    
    // 自动保存
    noteTitle.addEventListener('input', saveNote);
    document.getElementById('note-content-rich').addEventListener('input', saveNote);
    
    // 笔记搜索
    noteSearch.addEventListener('input', (e) => {
        const value = e.target.value;
        if (!value.trim()) {
            // 清空搜索时重置状态
            searchResults = [];
            currentSearchIndex = -1;
        }
        renderNotes(value);
    });
    
    // 为整个文档添加Ctrl+S快捷键监听器
    document.addEventListener('keydown', handleKeyDown);
    
    // 导出数据 - 使用内联onclick事件处理
    
    // 点击导出对话框外部关闭
    document.getElementById('export-dialog').addEventListener('click', (e) => {
        if (e.target === document.getElementById('export-dialog')) {
            closeExportDialog();
        }
    });
    
    // 导入数据 - 使用内联onclick事件处理
    
    // 点击导入对话框外部关闭
    document.getElementById('import-dialog').addEventListener('click', (e) => {
        if (e.target === document.getElementById('import-dialog')) {
            closeImportDialog();
        }
    });
}

// 导出数据
// 打开导出对话框
function openExportDialog() {
    const exportDialog = document.getElementById('export-dialog');
    const filenameInput = document.getElementById('export-filename');
    const includeDateCheckbox = document.getElementById('export-include-date');
    
    // 设置默认文件名
    const defaultFilename = `dnotes-backup-${new Date().toISOString().slice(0, 10)}.json`;
    filenameInput.placeholder = defaultFilename;
    filenameInput.value = '';
    includeDateCheckbox.checked = true;
    
    exportDialog.style.display = 'flex';
}

// 关闭导出对话框
function closeExportDialog() {
    document.getElementById('export-dialog').style.display = 'none';
}

// 执行导出
function exportData() {
    const filenameInput = document.getElementById('export-filename');
    const includeDateCheckbox = document.getElementById('export-include-date');
    
    let filename = filenameInput.value.trim();
    
    // 如果没有输入文件名，使用默认文件名
    if (!filename) {
        if (includeDateCheckbox.checked) {
            filename = `dnotes-backup-${new Date().toISOString().slice(0, 10)}.json`;
        } else {
            filename = 'dnotes-backup.json';
        }
    }
    
    // 确保文件名以.json结尾
    if (!filename.toLowerCase().endsWith('.json')) {
        filename += '.json';
    }
    
    const data = {
        notes: notes,
        templates: templates,
        exportDate: new Date().toISOString(),
        version: '1.0'
    };
    
    const dataStr = JSON.stringify(data, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    
    const link = document.createElement('a');
    link.href = URL.createObjectURL(dataBlob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    closeExportDialog();
    
    // 显示导出成功提示
    showNotification(`数据已导出为: ${filename}`);
}

// 打开导入对话框
function openImportDialog() {
    document.getElementById('import-dialog').style.display = 'flex';
    document.getElementById('import-file').value = '';
}

// 关闭导入对话框
function closeImportDialog() {
    document.getElementById('import-dialog').style.display = 'none';
}

// 导入数据
function importData() {
    const fileInput = document.getElementById('import-file');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('请选择要导入的文件');
        return;
    }
    
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const data = JSON.parse(e.target.result);
            
            // 验证数据格式
            if (!data.notes || !Array.isArray(data.notes)) {
                throw new Error('无效的笔记数据');
            }
            if (!data.templates || !Array.isArray(data.templates)) {
                throw new Error('无效的模板数据');
            }
            
            // 确认导入
            if (confirm(`确定要导入数据吗？\n笔记数量: ${data.notes.length}\n模板数量: ${data.templates.length}\n\n注意：这将覆盖现有的所有数据！`)) {
                // 导入数据
                notes = data.notes.map(note => ({
                    id: note.id,
                    parentId: note.parentId || null,
                    title: note.title || '',
                    content: note.content || '',
                    contentType: note.contentType || 'text',
                    expanded: note.expanded !== false
                }));
                
                templates = data.templates.map(template => ({
                    id: template.id,
                    parentId: template.parentId || null,
                    name: template.name || '',
                    content: template.content || '',
                    contentType: template.contentType || 'text',
                    expanded: template.expanded !== false
                }));
                
                // 保存到localStorage
                saveData();
                
                // 重新渲染
                currentNoteId = null;
                noteTitle.value = '';
                noteContent.value = '';
                renderNotes();
                renderTemplates();
                
                closeImportDialog();
                alert('数据导入成功！');
            }
        } catch (error) {
            alert('导入失败：' + error.message);
            console.error('导入错误:', error);
        }
    };
    
    reader.onerror = function() {
        alert('读取文件失败');
    };
    
    reader.readAsText(file);
}

// 显示保存成功提示
// 显示通知提示
function showNotification(message, duration = 2000) {
    // 创建提示元素
    const notification = document.createElement('div');
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 10000;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.3s ease;
        max-width: 300px;
        word-wrap: break-word;
    `;
    
    document.body.appendChild(notification);
    
    // 显示动画
    setTimeout(() => {
        notification.style.opacity = '1';
    }, 10);
    
    // 指定时间后消失
    setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => {
            if (notification.parentNode) {
                document.body.removeChild(notification);
            }
        }, 300);
    }, duration);
}



// 应用header背景设置
function applyHeaderBackground() {
    const headerBgColor = localStorage.getItem('dnotes-header-bg-color');
    const appHeader = document.getElementById('app-header');
    
    if (appHeader) {
        if (headerBgColor) {
            appHeader.style.backgroundColor = headerBgColor;
        } else {
            // 恢复默认颜色
            appHeader.style.backgroundColor = '#2c5aa0';
        }
    }
    
    // 更新颜色选择器的值
    const colorInput = document.getElementById('header-bg-color');
    if (colorInput) {
        colorInput.value = headerBgColor || '#2c5aa0';
    }
}

// 更新header背景
function updateHeaderBackground() {
    const colorInput = document.getElementById('header-bg-color');
    if (colorInput) {
        localStorage.setItem('dnotes-header-bg-color', colorInput.value);
        applyHeaderBackground();
    }
}

// 显示保存成功提示
function showSaveNotification() {
    showNotification('已保存');
}

// 切换笔记编辑器类型
function switchNoteEditor(type) {
    const textEditor = document.getElementById('note-content');
    const richEditor = document.getElementById('note-content-rich');
    const toolbar = document.getElementById('note-rich-toolbar');
    
    if (type === 'rich') {
        textEditor.style.display = 'none';
        richEditor.style.display = 'block';
        toolbar.style.display = 'block';
    } else {
        textEditor.style.display = 'block';
        richEditor.style.display = 'none';
        toolbar.style.display = 'none';
    }
}

// 笔记富文本编辑功能
function formatNoteText(command, value = null) {
    document.execCommand(command, false, value);
    document.getElementById('note-content-rich').focus();
}

function insertNoteLink() {
    const url = prompt('请输入链接地址：', 'https://');
    if (url) {
        document.execCommand('createLink', false, url);
        document.getElementById('note-content-rich').focus();
    }
}

function insertNoteImage() {
    // 创建文件选择器
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*';
    fileInput.style.display = 'none';
    
    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            // 检查文件大小（限制为2MB）
            if (file.size > 2 * 1024 * 1024) {
                alert('图片大小不能超过2MB');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(event) {
                const base64Data = event.target.result;
                document.execCommand('insertImage', false, base64Data);
                document.getElementById('note-content-rich').focus();
            };
            reader.onerror = function() {
                alert('读取图片失败');
            };
            reader.readAsDataURL(file);
        }
        document.body.removeChild(fileInput);
    });
    
    document.body.appendChild(fileInput);
    fileInput.click();
}

// 插入emoji
function insertEmoji() {
    // 扩展emoji列表，分成多个页面
    const emojiPages = [
        // 第一页
        ['😊', '😂', '😍', '😢', '😡', '👍', '👎', '❤️', '🎉', '🔥',
         '✨', '🌟', '⭐', '💯', '🤔', '😎', '🤩', '🤗', '🤭', '🤫',
         '😴', '🤮', '🤢', '🤧', '🥵', '🥶', '🥳', '🥺', '🤲', '🤝'],
        // 第二页
        ['🌍', '🌐', '🗺️', '🧭', '🏕️', '🏖️', '🏝️', '⛵', '🛥️', '✈️',
         '🛫', '🛬', '🚁', '🚠', '🛰️', '🚀', '🛸', '🚂', '🚃', '🚅',
         '🚎', '🚐', '🚑', '🚚', '🚒', '🏍️', '🛵', '🚲', '🛴', '🛹'],
        // 第三页
        ['⛽', '🚨', '🚥', '🚧', '🛑', '🏛️', '🏠', '🏢', '🏥', '🏪',
         '🏭', '🏯', '🏰', '🕌', '⛩️', '🗼', '🗽', '⛲', '♨️', '🎪',
         '🛝', '🌜', '🌞', '🌤️', '🌧️', '⛈️', '🌨️', '🌈', '⚡', '🌀'],
        // 第四页
        ['🔇', '🔊', '🔔', '🔕', '🎵', '🎶', '🎙️', '🎧', '💎', '📱',
         '☎️', '📞', '🔋', '🪫', '💻', '🖨️', '⌨️', '🖱️', '💾', '🎬',
         '📷', '📕', '📗', '📘', '📙', '📖', '📒', '📜', '📑', '📚'],
         // 第五页
        ['🔖', '🏷️', '📦', '📬', '📭', '📝', '📁', '📆', '📊', '📌',
         '✂️', '🗑️', '⌛', '⏰', '💰', '🔎', '💡', '🔒', '🛠️', '⚙️',
         '🔩', '⛓️‍💥', '🚫', '⚠️', '🆗', '❎', '❓', '🆕', '🚹', '🚺']
    ];
    
    let currentPage = 0;
    const emojisPerPage = 30;
    
    // 创建emoji选择对话框
    const dialog = document.createElement('div');
    dialog.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    `;
    
    const dialogContent = document.createElement('div');
    dialogContent.style.cssText = `
        background-color: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        width: 90%;
        max-width: 500px;
    `;
    
    dialogContent.innerHTML = `
        <h3 style="margin-top: 0; margin-bottom: 1rem;">选择表情</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1rem; height: 300px;"></div>
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex; gap: 5px;">
                <button id="prev-page" style="padding: 0.3rem 0.8rem; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; cursor: pointer;">上一页</button>
                <button id="next-page" style="padding: 0.3rem 0.8rem; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; cursor: pointer;">下一页</button>
            </div>
            <span id="page-info" style="font-size: 14px; color: #666;">第 1 页，共 ${emojiPages.length} 页</span>
            <button id="close-emoji" style="padding: 0.3rem 0.8rem; border: 1px solid #ddd; border-radius: 4px; background-color: #f5f5f5; cursor: pointer;">关闭</button>
        </div>
    `;
    
    dialog.appendChild(dialogContent);
    document.body.appendChild(dialog);
    
    const emojiContainer = dialogContent.querySelector('div');
    const prevButton = document.getElementById('prev-page');
    const nextButton = document.getElementById('next-page');
    const pageInfo = document.getElementById('page-info');
    
    // 渲染当前页面的emoji
    function renderEmojis() {
        emojiContainer.innerHTML = '';
        const currentEmojis = emojiPages[currentPage];
        
        currentEmojis.forEach(emoji => {
            const emojiButton = document.createElement('button');
            emojiButton.textContent = emoji;
            emojiButton.style.cssText = `
                font-size: 24px;
                padding: 8px;
                border: none;
                background: none;
                cursor: pointer;
                border-radius: 4px;
            `;
            emojiButton.addEventListener('click', () => {
                document.execCommand('insertText', false, emoji);
                document.getElementById('note-content-rich').focus();
                document.body.removeChild(dialog);
            });
            emojiContainer.appendChild(emojiButton);
        });
        
        // 更新页码信息
        pageInfo.textContent = `第 ${currentPage + 1} 页，共 ${emojiPages.length} 页`;
        
        // 更新按钮状态
        prevButton.disabled = currentPage === 0;
        nextButton.disabled = currentPage === emojiPages.length - 1;
        prevButton.style.opacity = currentPage === 0 ? '0.5' : '1';
        nextButton.style.opacity = currentPage === emojiPages.length - 1 ? '0.5' : '1';
    }
    
    // 绑定分页按钮事件
    prevButton.addEventListener('click', () => {
        if (currentPage > 0) {
            currentPage--;
            renderEmojis();
        }
    });
    
    nextButton.addEventListener('click', () => {
        if (currentPage < emojiPages.length - 1) {
            currentPage++;
            renderEmojis();
        }
    });
    
    // 关闭按钮
    document.getElementById('close-emoji').addEventListener('click', () => {
        document.body.removeChild(dialog);
    });
    
    // 点击对话框外部关闭
    dialog.addEventListener('click', (e) => {
        if (e.target === dialog) {
            document.body.removeChild(dialog);
        }
    });
    
    // 初始渲染
    renderEmojis();
}



// 初始化应用
init();