Upload 2 files

app/static/js/editor.js

@@ -0,0 +1,427 @@
+class MarkdownEditor {
+    constructor() {
+        this.initializeElements();
+        this.initializeEventListeners();
+        this.initializeAutoSave();
+        this.initializeToolbar();
+        this.initializeDragAndDrop();
+        this.initializeLocalBackup();
+        this.lastSaveTime = null;
+    }
+
+    initializeElements() {
+        this.titleInput = document.getElementById('titleInput');
+        this.contentInput = document.getElementById('contentInput');
+        this.preview = document.getElementById('preview');
+        this.imageInput = document.getElementById('imageInput');
+        this.saveButton = document.querySelector('.save-button');
+        this.wordCount = document.querySelector('.word-count');
+        this.toolbar = document.querySelector('.editor-toolbar');
+        
+        this.isDirty = false;
+        this.lastSavedContent = '';
+        this.autoSaveInterval = null;
+
+        // Clear localStorage if this is a new article
+        const isNewArticle = window.location.pathname.endsWith('/editor');
+        if (isNewArticle) {
+            localStorage.removeItem('editor-content');
+            localStorage.removeItem('editor-title');
+            // Clear inputs for new article
+            this.titleInput.value = '';
+            this.contentInput.value = '';
+        }
+    }
+
+    initializeEventListeners() {
+        this.contentInput.addEventListener('input', () => {
+            this.handleContentChange();
+            this.updateWordCount();
+            this.isDirty = true;
+        });
+
+        this.titleInput.addEventListener('input', () => {
+            this.isDirty = true;
+        });
+
+        this.imageInput.addEventListener('change', (event) => {
+            this.handleImageUpload(event);
+        });
+
+        this.contentInput.addEventListener('keydown', (event) => {
+            this.handleShortcuts(event);
+        });
+
+        this.saveButton.addEventListener('click', () => {
+            this.saveArticle();
+        });
+
+        window.addEventListener('beforeunload', (event) => {
+            if (this.isDirty) {
+                event.preventDefault();
+                event.returnValue = '您有未保存的更改，确定要离开吗？';
+            }
+        });
+    }
+
+    handleContentChange() {
+        this.updatePreview();
+    }
+
+    updatePreview() {
+        try {
+            const content = this.contentInput.value;
+            const markedInstance = marked.parse || marked;
+            this.preview.innerHTML = markedInstance(content, {
+                breaks: true,
+                gfm: true,
+                highlight: function(code, lang) {
+                    if (lang && hljs.getLanguage(lang)) {
+                        return hljs.highlight(code, { language: lang }).value;
+                    }
+                    return code;
+                }
+            });
+            
+            this.preview.querySelectorAll('pre code').forEach(block => {
+                hljs.highlightElement(block);
+            });
+        } catch (error) {
+            console.error('预览渲染错误:', error);
+            this.preview.innerHTML = '<div class="error">预览渲染失败</div>';
+        }
+    }
+
+    initializeAutoSave() {
+        this.autoSaveInterval = setInterval(() => {
+            if (this.isDirty && this.lastSaveTime && 
+                (Date.now() - this.lastSaveTime) >= 600000) { // 10 minutes
+                this.autoSave();
+            }
+        }, 60000); // Check every minute
+    }
+
+    async autoSave() {
+        if (!this.isDirty) return;
+
+        const content = this.contentInput.value;
+        const title = this.titleInput.value;
+        
+        if (content === this.lastSavedContent || !title.trim() || !content.trim()) {
+            return;
+        }
+
+        try {
+            const response = await this.saveArticle(true);
+            if (response && response.ok) {
+                this.lastSavedContent = content;
+                this.showNotification('自动保存成功', 'success');
+            }
+        } catch (error) {
+            console.error('自动保存失败:', error);
+            this.showNotification('自动保存失败', 'error');
+        }
+    }
+
+    insertText(before, after, defaultText = '') {
+        const start = this.contentInput.selectionStart;
+        const end = this.contentInput.selectionEnd;
+        const content = this.contentInput.value;
+        
+        const selectedText = content.substring(start, end) || defaultText;
+        const replacement = before + selectedText + after;
+        
+        this.contentInput.value = content.substring(0, start) + 
+                                 replacement + 
+                                 content.substring(end);
+        
+        this.contentInput.focus();
+        const newCursorPos = start + before.length + selectedText.length;
+        this.contentInput.setSelectionRange(newCursorPos, newCursorPos);
+        
+        this.updatePreview();
+        this.isDirty = true;
+    }
+
+    async handleImageUpload(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        if (!file.type.startsWith('image/')) {
+            this.showNotification('请选择图片文件', 'error');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            this.showNotification('正在上传图片...', 'info');
+            const response = await fetch('/api/upload', {
+                method: 'POST',
+                body: formData
+            });
+            
+            const data = await response.json();
+            
+            if (data.url) {
+                this.insertText(`![${file.name}](${data.url})`, '');
+                this.showNotification('图片上传成功', 'success');
+            } else {
+                throw new Error(data.error || '上传失败');
+            }
+        } catch (error) {
+            console.error('图片上传错误:', error);
+            this.showNotification('图片上传失败', 'error');
+        }
+    }
+
+    handleShortcuts(event) {
+        if (event.ctrlKey || event.metaKey) {
+            switch (event.key.toLowerCase()) {
+                case 's':
+                    event.preventDefault();
+                    this.saveArticle();
+                    break;
+                case 'b':
+                    event.preventDefault();
+                    this.insertText('**', '**', '粗体文本');
+                    break;
+                case 'i':
+                    event.preventDefault();
+                    this.insertText('*', '*', '斜体文本');
+                    break;
+            }
+        }
+    }
+
+    async saveArticle(isAutoSave = false) {
+        const title = this.titleInput.value.trim();
+        const content = this.contentInput.value.trim();
+        this.lastSaveTime = Date.now();
+        
+        if (!title || !content) {
+            this.showNotification('标题和内容不能为空', 'error');
+            return;
+        }
+        
+        const articleSlug = window.location.pathname.split('/').pop();
+        const isEdit = articleSlug !== 'editor';
+        
+        try {
+            if (!isAutoSave) this.showNotification('正在保存...', 'info');
+            
+            const response = await fetch(`/api/articles${isEdit ? '/' + articleSlug : ''}`, {
+                method: isEdit ? 'PUT' : 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    title,
+                    content
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                this.isDirty = false;
+                if (!isAutoSave) {
+                    this.showNotification('保存成功', 'success');
+                    window.location.href = `/article/${data.slug || articleSlug}`;
+                }
+                return response;
+            } else {
+                throw new Error(data.error || '保存失败');
+            }
+        } catch (error) {
+            console.error('保存文章错误:', error);
+            this.showNotification(error.message, 'error');
+            throw error;
+        }
+    }
+
+    updateWordCount() {
+        const content = this.contentInput.value;
+        const wordCount = content.length;
+        if (this.wordCount) {
+            this.wordCount.textContent = `字数：${wordCount}`;
+        }
+    }
+
+    showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        notification.className = `notification ${type}`;
+        notification.innerHTML = `
+            <div class="notification-content">
+                <span class="notification-message">${message}</span>
+                <button class="notification-close">&times;</button>
+            </div>
+        `;
+
+        document.body.appendChild(notification);
+
+        const closeButton = notification.querySelector('.notification-close');
+        closeButton.addEventListener('click', () => {
+            notification.remove();
+        });
+
+        setTimeout(() => {
+            notification.classList.add('fade-out');
+            setTimeout(() => {
+                notification.remove();
+            }, 300);
+        }, 3000);
+    }
+
+    initializeToolbar() {
+        const tools = [
+            {
+                name: 'bold',
+                icon: '<i class="fas fa-bold"></i>',
+                title: '粗体 (Ctrl+B)',
+                action: () => this.insertText('**', '**', '粗体文本')
+            },
+            {
+                name: 'italic',
+                icon: '<i class="fas fa-italic"></i>',
+                title: '斜体 (Ctrl+I)',
+                action: () => this.insertText('*', '*', '斜体文本')
+            },
+            {
+                name: 'heading1',
+                icon: '<i class="fas fa-heading"></i>',
+                title: '一级标题',
+                action: () => this.insertText('\n# ', '', '标题')
+            },
+            {
+                name: 'heading2',
+                icon: '<i class="fas fa-heading fa-sm"></i>',
+                title: '二级标题',
+                action: () => this.insertText('\n## ', '', '标题')
+            },
+            {
+                name: 'code',
+                icon: '<i class="fas fa-code"></i>',
+                title: '代码块',
+                action: () => this.insertText('\n```\n', '\n```\n', '在此输入代码')
+            },
+            {
+                name: 'link',
+                icon: '<i class="fas fa-link"></i>',
+                title: '链接',
+                action: () => this.insertText('[', '](https://)', '链接文本')
+            },
+            {
+                name: 'image',
+                icon: '<i class="fas fa-image"></i>',
+                title: '图片',
+                action: () => this.imageInput.click()
+            },
+            {
+                name: 'list',
+                icon: '<i class="fas fa-list-ul"></i>',
+                title: '无序列表',
+                action: () => this.insertText('\n- ', '', '列表项')
+            },
+            {
+                name: 'numbered-list',
+                icon: '<i class="fas fa-list-ol"></i>',
+                title: '有序列表',
+                action: () => this.insertText('\n1. ', '', '列表项')
+            },
+            {
+                name: 'quote',
+                icon: '<i class="fas fa-quote-right"></i>',
+                title: '引用',
+                action: () => this.insertText('\n> ', '', '引用文本')
+            },
+            {
+                name: 'divider',
+                icon: '<i class="fas fa-minus"></i>',
+                title: '分隔线',
+                action: () => this.insertText('\n---\n', '', '')
+            }
+        ];
+
+        tools.forEach(tool => {
+            const button = document.createElement('button');
+            button.className = `toolbar-button ${tool.name}`;
+            button.innerHTML = tool.icon;
+            button.title = tool.title;
+            button.addEventListener('click', (e) => {
+                e.preventDefault();
+                tool.action();
+            });
+            this.toolbar.appendChild(button);
+        });
+    }
+
+    initializeDragAndDrop() {
+        const dropZone = this.contentInput;
+        
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+        });
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => {
+                dropZone.classList.add('drag-over');
+            });
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => {
+                dropZone.classList.remove('drag-over');
+            });
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].type.startsWith('image/')) {
+                this.imageInput.files = files;
+                this.handleImageUpload({ target: this.imageInput });
+            }
+        });
+    }
+
+    initializeLocalBackup() {
+        // Only restore from local storage if we're editing an existing article
+        const isNewArticle = window.location.pathname.endsWith('/editor');
+        if (!isNewArticle) {
+            const savedContent = localStorage.getItem('editor-content');
+            const savedTitle = localStorage.getItem('editor-title');
+            
+            if (savedContent && !this.contentInput.value) {
+                this.contentInput.value = savedContent;
+                this.updatePreview();
+            }
+            
+            if (savedTitle && !this.titleInput.value) {
+                this.titleInput.value = savedTitle;
+            }
+        }
+
+        // Save to local storage periodically
+        setInterval(() => {
+            if (this.isDirty) {
+                localStorage.setItem('editor-content', this.contentInput.value);
+                localStorage.setItem('editor-title', this.titleInput.value);
+            }
+        }, 10000);
+    }
+
+    destroy() {
+        clearInterval(this.autoSaveInterval);
+        localStorage.removeItem('editor-content');
+        localStorage.removeItem('editor-title');
+    }
+}
+
+// Initialize editor when the DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    const editor = new MarkdownEditor();
+});

app/static/js/main.js

@@ -0,0 +1,218 @@
+// 全局工具函数和初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 等待 marked 库加载完成
+    setTimeout(() => {
+        // 初始化搜索功能
+        initializeSearch();
+        // 初始化Markdown渲染
+        initializeMarkdownRendering();
+        // 初始化返回顶部按钮
+        initializeScrollToTop();
+        // 初始化移动端导航菜单
+        initializeMobileNavigation();
+    }, 100);
+});
+
+// 搜索功能实现
+function initializeSearch() {
+    const searchInput = document.querySelector('.search-input');
+    const searchResults = document.querySelector('.search-results');
+    
+    if (searchInput) {
+        searchInput.addEventListener('input', debounce(async (event) => {
+            const searchTerm = event.target.value.trim().toLowerCase();
+            if (searchTerm.length < 2) {
+                searchResults.style.display = 'none';
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/search?q=${encodeURIComponent(searchTerm)}`);
+                const data = await response.json();
+                
+                if (data.articles.length > 0) {
+                    displaySearchResults(data.articles, searchResults);
+                } else {
+                    searchResults.innerHTML = '<div class="no-results">没有找到相关文章</div>';
+                }
+                searchResults.style.display = 'block';
+            } catch (error) {
+                console.error('搜索出错:', error);
+                searchResults.innerHTML = '<div class="error">搜索服务暂时不可用</div>';
+            }
+        }, 300));
+
+        // 点击其他区域关闭搜索结果
+        document.addEventListener('click', (event) => {
+            if (!event.target.closest('.search-container')) {
+                searchResults.style.display = 'none';
+            }
+        });
+    }
+}
+
+// Markdown渲染初始化
+function initializeMarkdownRendering() {
+    if (typeof marked === 'undefined') {
+        console.error('Marked library not loaded');
+        return;
+    }
+
+    // 配置 marked
+    marked.use({
+        breaks: true,
+        gfm: true
+    });
+
+    const markdownElements = document.querySelectorAll('.markdown-body');
+    
+    markdownElements.forEach(element => {
+        // 检查元素是否已经被渲染过
+        if (element.dataset.rendered) {
+            return;
+        }
+
+        try {
+            // 标记为已渲染
+            element.dataset.rendered = 'true';
+            
+            // 如果内容是通过 Flask 的 markdown 过滤器渲染的，就不需要再次渲染
+            if (!element.classList.contains('server-rendered')) {
+                const content = element.textContent;
+                element.innerHTML = marked(content);
+            }
+
+            // 处理代码块
+            element.querySelectorAll('pre code').forEach(block => {
+                if (typeof hljs !== 'undefined') {
+                    hljs.highlightElement(block);
+                }
+            });
+
+            // 为图片添加点击放大功能
+            element.querySelectorAll('img').forEach(img => {
+                img.addEventListener('click', () => {
+                    openImageViewer(img.src);
+                });
+            });
+        } catch (error) {
+            console.error('Markdown渲染错误:', error);
+        }
+    });
+}
+
+// 返回顶部按钮实现
+function initializeScrollToTop() {
+    const scrollTopButton = document.createElement('button');
+    scrollTopButton.className = 'scroll-top-button';
+    scrollTopButton.innerHTML = '↑';
+    document.body.appendChild(scrollTopButton);
+
+    window.addEventListener('scroll', debounce(() => {
+        if (window.scrollY > 500) {
+            scrollTopButton.classList.add('visible');
+        } else {
+            scrollTopButton.classList.remove('visible');
+        }
+    }, 100));
+
+    scrollTopButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+}
+
+// 移动端导航菜单实现
+function initializeMobileNavigation() {
+    const menuButton = document.querySelector('.menu-button');
+    const navLinks = document.querySelector('.nav-links');
+    
+    if (menuButton && navLinks) {
+        menuButton.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            menuButton.classList.toggle('active');
+        });
+
+        // 点击导航链接后关闭菜单
+        navLinks.querySelectorAll('a').forEach(link => {
+            link.addEventListener('click', () => {
+                navLinks.classList.remove('active');
+                menuButton.classList.remove('active');
+            });
+        });
+    }
+}
+
+// 图片查看器实��
+function openImageViewer(imageSrc) {
+    const viewer = document.createElement('div');
+    viewer.className = 'image-viewer';
+    viewer.innerHTML = `
+        <div class="image-viewer-content">
+            <img src="${imageSrc}" alt="预览图片">
+            <button class="close-button">×</button>
+        </div>
+    `;
+
+    viewer.addEventListener('click', (event) => {
+        if (event.target === viewer || event.target.className === 'close-button') {
+            viewer.remove();
+        }
+    });
+
+    document.body.appendChild(viewer);
+}
+
+// 工具函数: 防抖
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// 工具函数: 搜索结果显示
+function displaySearchResults(articles, container) {
+    container.innerHTML = articles.map(article => `
+        <a href="/article/${article.slug}" class="search-result-item">
+            <h3>${highlightSearchTerm(article.title)}</h3>
+            ${article.summary ? `<p>${highlightSearchTerm(article.summary)}</p>` : ''}
+            <span class="article-date">${formatDate(article.created_at)}</span>
+        </a>
+    `).join('');
+}
+
+// 工具函数: 高亮搜索词
+function highlightSearchTerm(text, searchTerm) {
+    if (!searchTerm) return text;
+    const regex = new RegExp(searchTerm, 'gi');
+    return text.replace(regex, match => `<mark>${match}</mark>`);
+}
+
+// 工具函数: 日期格式化
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    });
+}
+
+// 错误处理函数
+function handleError(error, container) {
+    console.error('发生错误:', error);
+    container.innerHTML = `
+        <div class="error-message">
+            <p>抱歉，发生了一些错误</p>
+            <button onclick="window.location.reload()">刷新页面</button>
+        </div>
+    `;
+}