script.js

// 冰织的阅读笔记应用
class ReadingNotesApp {
    constructor() {
        this.notes = JSON.parse(localStorage.getItem('readingNotes')) || [];
        this.currentNoteId = null;
        this.init();
    }

    init() {
        this.bindEvents();
        this.renderNotes();
        this.updateStats();
    }

    bindEvents() {
        // 添加笔记按钮
        document.getElementById('addNoteBtn').addEventListener('click', () => {
            this.openModal();
        });

        // 模态框关闭
        document.querySelector('.close').addEventListener('click', () => {
            this.closeModal();
        });

        document.getElementById('cancelBtn').addEventListener('click', () => {
            this.closeModal();
        });

        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            const modal = document.getElementById('noteModal');
            if (e.target === modal) {
                this.closeModal();
            }
        });

        // 表单提交
        document.getElementById('noteForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveNote();
        });

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', (e) => {
            this.filterNotes();
        });

        document.getElementById('filterSelect').addEventListener('change', (e) => {
            this.filterNotes();
        });

        // 评分功能
        this.bindRatingEvents();
    }

    bindRatingEvents() {
        const ratingSpans = document.querySelectorAll('.rating span');
        ratingSpans.forEach(span => {
            span.addEventListener('click', (e) => {
                const rating = parseInt(e.target.dataset.rating);
                this.setRating(rating);
            });
        });
    }

    setRating(rating) {
        const ratingSpans = document.querySelectorAll('.rating span');
        ratingSpans.forEach((span, index) => {
            if (index < rating) {
                span.classList.add('active');
            } else {
                span.classList.remove('active');
            }
        });
    }

    getCurrentRating() {
        const activeSpans = document.querySelectorAll('.rating span.active');
        return activeSpans.length;
    }

    openModal(noteId = null) {
        const modal = document.getElementById('noteModal');
        const title = document.getElementById('modalTitle');
        const form = document.getElementById('noteForm');
        
        this.currentNoteId = noteId;
        
        if (noteId) {
            title.textContent = '✏️ 编辑笔记';
            this.fillForm(this.notes.find(note => note.id === noteId));
        } else {
            title.textContent = '✨ 添加新笔记';
            form.reset();
            this.setRating(0);
        }
        
        modal.style.display = 'block';
    }

    closeModal() {
        document.getElementById('noteModal').style.display = 'none';
        this.currentNoteId = null;
    }

    fillForm(note) {
        if (!note) return;
        
        document.getElementById('noteTitle').value = note.title || '';
        document.getElementById('noteAuthor').value = note.author || '';
        document.getElementById('noteCategory').value = note.category || '小说';
        document.getElementById('noteContent').value = note.content || '';
        document.getElementById('noteFavorite').checked = note.favorite || false;
        
        this.setRating(note.rating || 0);
    }

    saveNote() {
        const title = document.getElementById('noteTitle').value.trim();
        const author = document.getElementById('noteAuthor').value.trim();
        const category = document.getElementById('noteCategory').value;
        const content = document.getElementById('noteContent').value.trim();
        const favorite = document.getElementById('noteFavorite').checked;
        const rating = this.getCurrentRating();
        
        if (!title) {
            alert('请输入书名或标题！');
            return;
        }
        
        const noteData = {
            title,
            author,
            category,
            content,
            favorite,
            rating,
            updatedAt: new Date().toISOString()
        };
        
        if (this.currentNoteId) {
            // 编辑现有笔记
            const noteIndex = this.notes.findIndex(note => note.id === this.currentNoteId);
            this.notes[noteIndex] = { ...this.notes[noteIndex], ...noteData };
        } else {
            // 添加新笔记
            const newNote = {
                id: Date.now().toString(),
                ...noteData,
                createdAt: new Date().toISOString()
            };
            this.notes.unshift(newNote);
        }
        
        this.saveToLocalStorage();
        this.renderNotes();
        this.updateStats();
        this.closeModal();
        
        // 显示成功消息
        this.showMessage(this.currentNoteId ? '笔记更新成功！' : '笔记添加成功！');
    }

    deleteNote(noteId) {
        if (confirm('确定要删除这篇笔记吗？')) {
            this.notes = this.notes.filter(note => note.id !== noteId);
            this.saveToLocalStorage();
            this.renderNotes();
            this.updateStats();
            this.showMessage('笔记删除成功！');
        }
    }

    toggleFavorite(noteId) {
        const note = this.notes.find(note => note.id === noteId);
        if (note) {
            note.favorite = !note.favorite;
            this.saveToLocalStorage();
            this.renderNotes();
            this.updateStats();
        }
    }

    saveToLocalStorage() {
        localStorage.setItem('readingNotes', JSON.stringify(this.notes));
    }

    renderNotes() {
        const container = document.getElementById('notesContainer');
        const filteredNotes = this.getFilteredNotes();
        
        if (filteredNotes.length === 0) {
            container.innerHTML = `
                <div style="grid-column: 1/-1; text-align: center; padding: 60px 20px; color: #7f8c8d;">
                    <div style="font-size: 4em; margin-bottom: 20px;">📚</div>
                    <h3>还没有笔记哦～</h3>
                    <p>点击上方按钮添加你的第一篇读书笔记吧！</p>
                </div>
            `;
            return;
        }
        
        container.innerHTML = filteredNotes.map(note => this.createNoteCard(note)).join('');
        
        // 绑定卡片事件
        this.bindCardEvents();
    }

    createNoteCard(note) {
        const date = new Date(note.createdAt).toLocaleDateString('zh-CN');
        const ratingStars = '⭐'.repeat(note.rating || 0);
        
        return `
            <div class="note-card ${note.favorite ? 'favorite' : ''}" data-id="${note.id}">
                <div class="note-date">${date}</div>
                <div class="note-title">${this.escapeHtml(note.title)}</div>
                ${note.author ? `<div class="note-author">作者：${this.escapeHtml(note.author)}</div>` : ''}
                <div class="note-category">${note.category}</div>
                ${note.rating ? `<div class="note-rating">${ratingStars}</div>` : ''}
                ${note.content ? `<div class="note-content">${this.escapeHtml(note.content.substring(0, 100))}${note.content.length > 100 ? '...' : ''}</div>` : ''}
                <div class="note-actions">
                    <button class="btn btn-primary" onclick="app.editNote('${note.id}')">✏️ 编辑</button>
                    <button class="btn btn-secondary" onclick="app.toggleFavorite('${note.id}')">${note.favorite ? '💔 取消收藏' : '❤️ 收藏'}</button>
                    <button class="btn btn-secondary" onclick="app.deleteNote('${note.id}')">🗑️ 删除</button>
                </div>
            </div>
        `;
    }

    bindCardEvents() {
        // 事件已通过onclick绑定
    }

    editNote(noteId) {
        this.openModal(noteId);
    }

    getFilteredNotes() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        const filterValue = document.getElementById('filterSelect').value;
        
        let filtered = this.notes;
        
        // 搜索过滤
        if (searchTerm) {
            filtered = filtered.filter(note => 
                note.title.toLowerCase().includes(searchTerm) ||
                note.author.toLowerCase().includes(searchTerm) ||
                note.content.toLowerCase().includes(searchTerm)
            );
        }
        
        // 分类过滤
        switch (filterValue) {
            case 'recent':
                filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
                break;
            case 'favorite':
                filtered = filtered.filter(note => note.favorite);
                break;
            default:
                filtered.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
        }
        
        return filtered;
    }

    filterNotes() {
        this.renderNotes();
    }

    updateStats() {
        const totalNotes = this.notes.length;
        const favoriteNotes = this.notes.filter(note => note.favorite).length;
        const recentNotes = this.notes.filter(note => {
            const noteDate = new Date(note.createdAt);
            const weekAgo = new Date();
            weekAgo.setDate(weekAgo.getDate() - 7);
            return noteDate > weekAgo;
        }).length;
        
        // 可以在这里更新统计显示
        console.log(`总计: ${totalNotes} 篇笔记, 收藏: ${favoriteNotes} 篇, 本周新增: ${recentNotes} 篇`);
    }

    showMessage(message) {
        // 简单的消息提示
        const messageDiv = document.createElement('div');
        messageDiv.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4ecdc4;
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 2000;
            animation: slideIn 0.3s ease;
        `;
        messageDiv.textContent = message;
        document.body.appendChild(messageDiv);
        
        setTimeout(() => {
            messageDiv.remove();
        }, 3000);
    }

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// 初始化应用
const app = new ReadingNotesApp();

// 添加一些示例数据
if (app.notes.length === 0) {
    const sampleNotes = [
        {
            id: '1',
            title: '小王子',
            author: '安托万·德·圣-埃克苏佩里',
            category: '小说',
            content: '这是一个关于爱与责任的美丽寓言。小王子教会我们用心去看，才能真正看见。狐狸说的"驯养"让我深深感动，真正的联系需要时间和耐心。',
            favorite: true,
            rating: 5,
            createdAt: new Date(Date.now() - 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 86400000).toISOString()
        },
        {
            id: '2',
            title: '代码大全',
            author: '史蒂夫·迈克康奈尔',
            category: '技术',
            content: '软件构建的百科全书，从变量命名到架构设计，每一个细节都值得深思。特别是关于重构和测试的章节，对提高代码质量很有帮助。',
            favorite: false,
            rating: 4,
            createdAt: new Date(Date.now() - 172800000).toISOString(),
            updatedAt: new Date(Date.now() - 172800000).toISOString()
        }
    ];
    
    app.notes = sampleNotes;
    app.saveToLocalStorage();
    app.renderNotes();
    app.updateStats();
}