Enhance: Auto-save, Export Image, Footnotes, New Themes

static/js/main.js

@@ -13,6 +13,7 @@ const editor = document.getElementById('editor');
 const preview = document.getElementById('preview-container');
 const themeSelect = document.getElementById('theme-select');
 const wordCount = document.getElementById('word-count');
+const autoSaveStatus = document.getElementById('auto-save-status');
 
 // Default Content
 const defaultContent = `# 欢迎使用 Article Publisher Pro
@@ -25,6 +26,8 @@ const defaultContent = `# 欢迎使用 Article Publisher Pro
 - 🎨 **多主题支持**：内置多种排版风格，一键切换
 - 🔧 **排版优化**：自动在中英文之间添加空格
 - 📋 **一键复制**：完美粘贴到公众号后台，保留所有格式
+- 🖼️ **长图导出**：支持一键生成文章长图分享
+- 💾 **自动保存**：防止内容丢失
 
 ## 代码演示
 
@@ -80,6 +83,28 @@ const themes = {
         list: 'margin-bottom: 16px; padding-left: 20px;',
         li: 'margin-bottom: 8px; line-height: 2;',
         link: 'color: #888; text-decoration: none; border-bottom: 1px solid #ccc;'
+    },
+    dark: {
+        h1: 'color: #e2e8f0; border-bottom: 1px solid #475569; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.6em; font-weight: bold;',
+        h2: 'color: #93c5fd; margin: 30px 0 15px; font-size: 1.4em; font-weight: bold; border-left: 4px solid #3b82f6; padding-left: 10px;',
+        h3: 'color: #e2e8f0; margin: 20px 0 10px; font-size: 1.2em; font-weight: bold;',
+        p: 'color: #cbd5e1; margin-bottom: 16px; font-size: 15px; line-height: 1.8;',
+        blockquote: 'border-left: 4px solid #475569; padding: 10px 15px; color: #94a3b8; background-color: #1e293b; margin: 20px 0;',
+        code: 'background-color: #334155; color: #fca5a5; padding: 2px 4px; border-radius: 4px; font-family: monospace; font-size: 0.9em;',
+        list: 'color: #cbd5e1; margin-bottom: 16px; padding-left: 20px;',
+        li: 'margin-bottom: 8px; line-height: 1.8;',
+        link: 'color: #60a5fa; text-decoration: none;'
+    },
+    green: {
+        h1: 'color: #166534; border-bottom: 2px solid #22c55e; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.6em; font-weight: bold;',
+        h2: 'color: #15803d; background: #dcfce7; padding: 5px 15px; border-radius: 4px; margin: 30px 0 15px; font-size: 1.4em; font-weight: bold;',
+        h3: 'color: #166534; margin: 20px 0 10px; font-size: 1.2em; font-weight: bold;',
+        p: 'color: #374151; margin-bottom: 16px; font-size: 15px; line-height: 1.8;',
+        blockquote: 'border-left: 4px solid #86efac; padding: 10px 15px; color: #4b5563; background-color: #f0fdf4; margin: 20px 0;',
+        code: 'background-color: #dcfce7; color: #166534; padding: 2px 4px; border-radius: 4px; font-family: monospace; font-size: 0.9em;',
+        list: 'color: #374151; margin-bottom: 16px; padding-left: 20px;',
+        li: 'margin-bottom: 8px; line-height: 1.8;',
+        link: 'color: #15803d; text-decoration: underline;'
     }
 };
 
@@ -132,7 +157,15 @@ function applyTheme() {
     
     // Pre blocks usually need specific styling too
     root.querySelectorAll('pre').forEach(el => {
-        el.style.cssText = 'background: #282c34; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 20px 0; color: #abb2bf;';
+        if (currentTheme === 'default' || currentTheme === 'tech') {
+            el.style.cssText = 'background: #282c34; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 20px 0; color: #abb2bf;';
+        } else if (currentTheme === 'literature') {
+            el.style.cssText = 'background: #fdf6e3; padding: 15px; border-radius: 2px; overflow-x: auto; margin: 20px 0; color: #586e75; border: 1px solid #eee;';
+        } else if (currentTheme === 'dark') {
+            el.style.cssText = 'background: #0f172a; padding: 15px; border-radius: 8px; overflow-x: auto; margin: 20px 0; color: #e2e8f0; border: 1px solid #1e293b;';
+        } else if (currentTheme === 'green') {
+            el.style.cssText = 'background: #f0fdf4; padding: 15px; border-radius: 8px; overflow-x: auto; margin: 20px 0; color: #166534; border: 1px solid #bbf7d0;';
+        }
     });
 }
 
@@ -149,6 +182,77 @@ function formatChinese() {
     render();
 }
 
+function formatFootnotes() {
+    let text = editor.value;
+    const footnotes = [];
+    let counter = 1;
+    
+    // Replace [^something] with [1] and store content
+    // This is a simple regex and might need refinement for complex nested footnotes
+    // Regex for matching definition: [^id]: content
+    // Regex for matching reference: [^id]
+    
+    // First, find all definitions
+    const definitionRegex = /^\[\^([^\]]+)\]:\s*(.*)$/gm;
+    let match;
+    const definitions = {};
+    
+    while ((match = definitionRegex.exec(text)) !== null) {
+        definitions[match[1]] = match[2];
+    }
+    
+    // Remove definitions from text
+    text = text.replace(definitionRegex, '');
+    
+    // Replace references and build new endnotes
+    text = text.replace(/\[\^([^\]]+)\]/g, (match, id) => {
+        if (definitions[id]) {
+            footnotes.push(definitions[id]);
+            return `[${counter++}]`;
+        }
+        return match;
+    });
+    
+    // Append footnotes at the end
+    if (footnotes.length > 0) {
+        text += '\n\n---\n\n### 参考资料\n\n';
+        footnotes.forEach((note, index) => {
+            text += `[${index + 1}] ${note}\n`;
+        });
+    }
+    
+    editor.value = text;
+    render();
+}
+
+async function exportImage() {
+    const btn = document.querySelector('button[onclick="exportImage()"]');
+    const originalText = btn.innerHTML;
+    btn.innerHTML = '<i class="ri-loader-4-line ri-spin"></i> 生成中...';
+    
+    try {
+        const canvas = await html2canvas(preview, {
+            useCORS: true,
+            scale: 2, // Retina display support
+            backgroundColor: '#ffffff'
+        });
+        
+        const link = document.createElement('a');
+        link.download = `article-publisher-pro-${Date.now()}.png`;
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+        
+        btn.innerHTML = '<i class="ri-check-line"></i> 下载成功';
+        setTimeout(() => {
+            btn.innerHTML = originalText;
+        }, 2000);
+    } catch (err) {
+        console.error('Export failed', err);
+        alert('生成图片失败，请重试');
+        btn.innerHTML = originalText;
+    }
+}
+
 function updateWordCount() {
     const text = editor.value;
     // Simple word count
@@ -156,10 +260,32 @@ function updateWordCount() {
     wordCount.textContent = `${count} 字`;
 }
 
+// Local Storage Logic
+function saveToLocal() {
+    localStorage.setItem('app_content', editor.value);
+    localStorage.setItem('app_theme', currentTheme);
+    autoSaveStatus.textContent = '已保存 ' + new Date().toLocaleTimeString();
+}
+
+function loadFromLocal() {
+    const savedContent = localStorage.getItem('app_content');
+    const savedTheme = localStorage.getItem('app_theme');
+    
+    if (savedContent) {
+        editor.value = savedContent;
+    }
+    
+    if (savedTheme && themes[savedTheme]) {
+        currentTheme = savedTheme;
+        themeSelect.value = savedTheme;
+    }
+}
+
 function clearEditor() {
-    if(confirm('确定要清空所有内容吗？')) {
+    if(confirm('确定要清空所有内容吗？此操作不可撤销。')) {
         editor.value = '';
         render();
+        saveToLocal();
     }
 }
 
@@ -196,12 +322,20 @@ async function copyToClipboard() {
 }
 
 // Event Listeners
-editor.addEventListener('input', render);
+editor.addEventListener('input', () => {
+    render();
+    saveToLocal();
+});
+
 themeSelect.addEventListener('change', (e) => {
     currentTheme = e.target.value;
     render();
+    saveToLocal();
 });
 
 // Init
-editor.value = defaultContent;
+loadFromLocal();
+if (!editor.value) {
+    editor.value = defaultContent;
+}
 render();

templates/index.html

@@ -6,6 +6,7 @@
     <title>全平台文章发布助手 - Article Publisher Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <!-- Icons -->
@@ -62,12 +63,22 @@
                         <option value="default">默认简洁</option>
                         <option value="tech">科技极客</option>
                         <option value="literature">文艺书信</option>
+                        <option value="dark">暗夜模式</option>
+                        <option value="green">护眼森系</option>
                     </select>
                 </div>
 
+                <button onclick="formatFootnotes()" class="text-gray-600 hover:text-indigo-600 transition hidden sm:inline-block" title="注脚转尾注">
+                    <i class="ri-links-line"></i> 注脚优化
+                </button>
+
                 <button onclick="formatChinese()" class="text-gray-600 hover:text-indigo-600 transition" title="中英文自动空格">
                     <i class="ri-translate-2"></i> 排版优化
                 </button>
+
+                <button onclick="exportImage()" class="text-gray-600 hover:text-indigo-600 transition" title="生成长图">
+                    <i class="ri-image-line"></i> 导出长图
+                </button>
                 
                 <div class="h-6 w-px bg-gray-300 mx-2"></div>
 
@@ -105,8 +116,9 @@
 
     <!-- Footer -->
     <footer class="bg-white border-t border-gray-200 py-2">
-        <div class="max-w-7xl mx-auto px-4 text-center text-xs text-gray-400">
-            &copy; 2024 Article Publisher Pro. Designed for Creators.
+        <div class="max-w-7xl mx-auto px-4 text-center text-xs text-gray-400 flex justify-between items-center">
+            <span>&copy; 2024 Article Publisher Pro.</span>
+            <span id="auto-save-status" class="text-gray-300">已自动保存</span>
         </div>
     </footer>