Enhance: Add Toolbar, Notion Theme, Pangu spacing, and Interview Guide

INTERVIEW_GUIDE.md

@@ -0,0 +1,68 @@
+# 面试指南：微信公众号 Markdown 编辑器 (WeChat Markdown Editor)
+
+> 本文档旨在辅助你理解项目核心架构与技术难点，以便在面试中流利作答。
+
+## 1. 项目概述 (Project Overview)
+
+**一句话介绍**：
+这是一个基于 Web 的 Markdown 编辑器，专注于解决微信公众号排版繁琐、代码展示不友好以及外链限制等痛点。它能够将 Markdown 实时渲染为适配微信公众号样式的 HTML，支持一键复制发布。
+
+**核心价值**：
+- **效率提升**：让技术博主专注于写作，而非排版。
+- **样式定制**：通过 CSS 变量实现多主题切换（如 Notion 风格），满足不同审美。
+- **平台适配**：针对微信环境的特殊限制（如外链、代码块）做了专门处理。
+
+## 2. 技术架构 (Technical Architecture)
+
+虽然项目看似简单，但其架构设计体现了**轻量化**和**关注点分离**的思想。
+
+- **后端 (Backend)**: Python Flask
+    - **角色**：主要作为静态资源服务器（Static File Server）。
+    - **优势**：轻量、部署简单（配合 Docker/Gunicorn），易于后续扩展（如增加账号系统或云端存储）。
+- **前端 (Frontend)**: Vue 3 + Tailwind CSS
+    - **Vue 3**：利用 Composition API (`setup`, `ref`, `computed`) 管理编辑器状态（源码、预览 HTML、主题设置）。
+    - **Tailwind CSS**：快速构建现代化的 UI 界面，提高开发效率。
+- **核心引擎**: Markdown-it + Highlight.js
+    - **渲染**：在浏览器端实时将 Markdown 解析为 HTML AST，再渲染为 DOM。
+    - **高亮**：自动检测代码语言并应用高亮样式。
+
+## 3. 核心难点与解决方案 (Key Challenges & Solutions)
+
+面试中如果被问到“项目中遇到的最大困难是什么”，可以从以下几点回答：
+
+### 难点 1：微信公众号的样式兼容性 (Style Adaptation)
+**问题**：微信公众号后台编辑器过滤掉了许多外部 CSS，且对某些 HTML 标签（如 `h1`, `blockquote`）的默认样式支持不一致。
+**解决方案**：
+- **内联样式模拟**：虽然没有使用内联样式库（如 juice），但我通过精心设计的 CSS 选择器（`#preview-content h1` 等）确保复制到剪贴板的内容带有所需的样式信息。微信编辑器在粘贴富文本时会保留大部分计算后的样式。
+- **自定义 CSS 变量**：使用 `:root` 和 `data-theme` 属性实现主题切换。这样只需修改变量值，无需重写大量 CSS 规则。
+
+### 难点 2：外链处理 (External Links)
+**问题**：微信公众号文章除白名单外，不支持普通外部超链接，导致文章中的参考链接无法点击。
+**解决方案**：
+- **自定义 Renderer**：利用 `markdown-it` 的插件机制，重写 `link_open` 和 `link_close` 规则。
+- **脚注转换**：在渲染过程中，将所有外链收集到一个 `footnotes` 数组中。渲染结束后，在文章底部自动追加一个“引用链接”列表，并将正文中的链接转换为上标索引（如 `[1]`）。
+
+### 难点 3：富文本一键复制 (Rich Text Copy)
+**问题**：普通的 `navigator.clipboard.writeText` 只能复制纯文本，无法保留颜色和排版。
+**解决方案**：
+- **Range API**: 创建一个 `Range` 对象选中预览区域的 DOM 节点。
+- **Selection API**: 将 `Range` 添加到当前的 `Selection` 中。
+- **execCommand**: 使用 `document.execCommand('copy')`（虽然标准标记为过时，但在处理“富文本复制”场景下，它仍然是兼容性最好、最可靠的方案）。
+
+### 难点 4：同步滚动 (Sync Scroll)
+**问题**：左侧 Markdown 源码和右侧渲染后的 HTML 高度不一致，如何实现精准的同步滚动？
+**解决方案**：
+- **百分比映射**：计算当前滚动条位置占总可滚动高度的百分比 (`scrollTop / (scrollHeight - clientHeight)`)，并将此百分比应用到另一侧。
+- **防抖动 (Debounce/Lock)**：为了防止“循环触发”滚动事件（左滚带动右，右滚又带动左），设置了一个 `isScrolling` 标志位，在滚动触发时锁定，滚动结束后（通过 `setTimeout`）释放。
+
+### 难点 5：中英文自动空格 (Pangu Spacing)
+**问题**：为了提升排版美感，中英文之间应该有空格（如 "Hello你好" -> "Hello 你好"）。
+**解决方案**：
+- **正则替换**：前端实现了一个轻量级的替换逻辑。
+    - `text.replace(/([\u4e00-\u9fa5])([a-zA-Z0-9])/g, '$1 $2')`：中文后跟英文/数字。
+    - `text.replace(/([a-zA-Z0-9])([\u4e00-\u9fa5])/g, '$1 $2')`：英文/数字后跟中文。
+
+## 4. 为什么做这个项目？
+
+- **自我驱动**：作为一个技术人员，我经常写技术博客。现有的工具要么收费，要么功能太复杂，我希望有一个**轻量、可控、隐私安全（纯本地渲染）**的工具。
+- **技术实践**：我想通过这个项目深入理解前端的**文本处理**和**DOM 操作**，同时实践 Vue 3 的 Composition API。

README.md

@@ -11,28 +11,40 @@ pinned: false
 
 这是一个专为微信公众号写作设计的 Markdown 编辑器。它可以将 Markdown 实时转换为适合微信公众号粘贴的 HTML 格式，支持多种配色主题和代码高亮。
 
-## 功能特点
+## ✨ 新增功能
+
+- **🎨 多主题切换**：支持默认、极客黑、粉彩、**Notion** 等多种风格。
+- **🧹 一键格式化**：自动优化排版，实现中英文之间自动加空格（盘古之白）。
+- **🖼️ 图片美化**：支持设置图片圆角和阴影，提升视觉体验。
+- **📊 字数统计**：实时显示文章字数和预计阅读时间。
+- **🛠️ 快捷工具栏**：提供常用的 Markdown 语法快捷键。
+
+## 主要特点
 
 - **实时预览**：左侧写作，右侧实时预览效果。
 - **一键复制**：点击按钮即可复制带有内联样式的 HTML，直接粘贴到微信公众号后台。
-- **多种主题**：内置多种配色方案（默认、极客黑、清新绿等）。
 - **代码高亮**：完美支持代码块高亮，解决公众号代码排版难题。
 - **链接转脚注**：自动将 Markdown 中的链接转换为文末脚注（因为公众号不支持外链）。
 - **本地优先**：纯前端渲染，保护隐私，无数据上传。
 
 ## 技术栈
 
-- Backend: Flask
-- Frontend: Vue 3, Tailwind CSS
-- Markdown Engine: markdown-it
-- Syntax Highlighting: highlight.js
+- **Backend**: Flask (Python)
+- **Frontend**: Vue 3, Tailwind CSS
+- **Core**: markdown-it, highlight.js
+- **Icons**: Phosphor Icons
 
 ## 如何使用
 
-1. 在左侧输入 Markdown 文本。
-2. 在右侧预览效果。
-3. 点击右上角的“复制到公众号”按钮。
-4. 在微信公众号后台编辑器中粘贴 (Ctrl+V / Cmd+V)。
+1. 在左侧输入 Markdown 文本，或使用顶部工具栏辅助输入。
+2. 在右上角选择喜欢的主题（如 Notion 风格）。
+3. 点击“魔法棒”图标进行中英文空格优化。
+4. 点击右上角的“复制”按钮。
+5. 在微信公众号后台编辑器中粘贴 (Ctrl+V / Cmd+V)。
+
+## 面试辅助
+
+如果你对这个项目的架构和实现细节感兴趣，请查看 [INTERVIEW_GUIDE.md](INTERVIEW_GUIDE.md)。
 
 ## 作者
 

static/css/style.css

@@ -6,27 +6,62 @@
     --code-bg: #f6f8fa;
     --quote-border: #07c160;
     --quote-bg: #f9f9f9;
+    --link-color: #07c160;
+    --heading-color: #333;
+    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --img-radius: 0px;
+    --img-shadow: none;
 }
 
 /* Theme: Geek Black */
 [data-theme="geek"] {
-    --primary-color: #333;
+    --primary-color: #000;
     --text-color: #2c3e50;
+    --heading-color: #000;
     --code-bg: #282c34;
     --quote-border: #000;
+    --quote-bg: #f8f8f8;
+    --link-color: #000;
 }
 
-/* Theme: Pastel */
+/* Theme: Pastel (Pink) */
 [data-theme="pastel"] {
     --primary-color: #ff9a9e;
     --text-color: #555;
+    --heading-color: #ff758c;
     --code-bg: #fff0f5;
     --quote-border: #fad0c4;
+    --quote-bg: #fffbfb;
+    --link-color: #ff758c;
+}
+
+/* Theme: Notion (Clean & Serif/Sans mix) */
+[data-theme="notion"] {
+    --primary-color: #37352f;
+    --text-color: #37352f;
+    --heading-color: #37352f;
+    --code-bg: #f7f6f3;
+    --quote-border: #37352f;
+    --quote-bg: transparent;
+    --link-color: #37352f;
+    --border-color: #e0e0e0;
+}
+
+/* Image Styles (Controlled by JS) */
+[data-img-style="rounded"] {
+    --img-radius: 8px;
+}
+[data-img-style="shadow"] {
+    --img-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+[data-img-style="both"] {
+    --img-radius: 8px;
+    --img-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
 body {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--font-base);
     height: 100vh;
     display: flex;
     flex-direction: column;
@@ -40,34 +75,76 @@ body {
     color: var(--text-color);
     word-break: break-all;
     text-align: justify;
+    padding: 20px;
+    background: #fff; /* Ensure white background for copy */
+}
+
+/* Notion Specific Overrides */
+[data-theme="notion"] #preview-content {
+    font-family: "Lyon-Text", Georgia, ui-serif, serif; /* Serif for reading */
+    line-height: 1.8;
+}
+[data-theme="notion"] #preview-content h1,
+[data-theme="notion"] #preview-content h2,
+[data-theme="notion"] #preview-content h3 {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; /* Sans for headings */
 }
 
 #preview-content h1, 
 #preview-content h2, 
 #preview-content h3 {
     margin-top: 1.5em;
-    margin-bottom: 1em;
+    margin-bottom: 0.8em;
     font-weight: bold;
-    color: var(--primary-color);
+    color: var(--heading-color);
+    line-height: 1.3;
 }
 
 #preview-content h1 {
-    font-size: 1.4em;
+    font-size: 1.6em;
     border-bottom: 2px solid var(--primary-color);
     padding-bottom: 0.3em;
+    text-align: center;
+}
+
+/* Geek theme H1 is different */
+[data-theme="geek"] #preview-content h1 {
+    border-bottom: 3px solid #000;
+    text-align: left;
+}
+
+/* Notion theme H1 is minimal */
+[data-theme="notion"] #preview-content h1 {
+    border-bottom: 1px solid #eee;
+    text-align: left;
+    font-size: 2em;
 }
 
 #preview-content h2 {
-    font-size: 1.2em;
-    display: inline-block;
-    border-bottom: 2px solid var(--primary-color);
-    padding-bottom: 5px;
+    font-size: 1.3em;
+    display: block; /* WeChat friendly */
+    border-left: 5px solid var(--primary-color);
+    padding-left: 10px;
+    border-bottom: none;
+}
+
+/* Notion theme H2 */
+[data-theme="notion"] #preview-content h2 {
+    border-left: none;
+    padding-left: 0;
+    font-size: 1.5em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 6px;
 }
 
 #preview-content h3 {
     font-size: 1.1em;
-    padding-left: 10px;
-    border-left: 4px solid var(--primary-color);
+    font-weight: bold;
+    margin-top: 1.2em;
+}
+
+[data-theme="notion"] #preview-content h3 {
+    font-size: 1.25em;
 }
 
 #preview-content p {
@@ -82,9 +159,10 @@ body {
 }
 
 #preview-content li {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.2em;
 }
 
+/* Blockquote Styles */
 #preview-content blockquote {
     margin: 1.5em 0;
     padding: 1em;
@@ -95,60 +173,108 @@ body {
     border-radius: 4px;
 }
 
+[data-theme="notion"] #preview-content blockquote {
+    border-left: 3px solid currentcolor;
+    padding-left: 1em;
+    font-style: italic;
+    color: inherit;
+    opacity: 0.8;
+}
+
+/* Inline Code */
 #preview-content code {
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     font-size: 0.9em;
-    padding: 2px 4px;
+    padding: 2px 5px;
     background-color: rgba(27, 31, 35, 0.05);
     color: #d63384;
     border-radius: 4px;
+    margin: 0 2px;
+}
+
+[data-theme="notion"] #preview-content code {
+    color: #EB5757;
+    background: rgba(135,131,120,0.15);
 }
 
+/* Code Blocks */
 #preview-content pre {
-    background-color: #282c34; /* Dark theme for code blocks mostly looks better */
+    background-color: #282c34;
     padding: 1em;
     border-radius: 8px;
     overflow-x: auto;
     margin: 1.5em 0;
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    -webkit-overflow-scrolling: touch;
+    line-height: 1.5;
+    position: relative;
+}
+
+[data-theme="notion"] #preview-content pre {
+    background-color: #f7f6f3;
+    border-radius: 4px;
+}
+[data-theme="notion"] #preview-content pre code {
+    color: #37352f;
+    text-shadow: none;
 }
 
 #preview-content pre code {
     background-color: transparent;
     color: #abb2bf;
     padding: 0;
-    font-size: 14px;
+    font-size: 13px;
     border-radius: 0;
+    margin: 0;
+}
+
+/* Images */
+#preview-content img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 1.5em auto;
+    border-radius: var(--img-radius);
+    box-shadow: var(--img-shadow);
 }
 
 /* Footnotes */
 .footnote-ref {
-    color: var(--primary-color);
+    color: var(--link-color);
     text-decoration: none;
     font-size: 0.8em;
     vertical-align: super;
+    margin-left: 2px;
 }
 
 .footnotes-sep {
     border-top: 1px solid #ddd;
-    margin-top: 2em;
-    margin-bottom: 1em;
+    margin-top: 3em;
+    margin-bottom: 1.5em;
+    width: 30%;
 }
 
 .footnotes-list {
     font-size: 0.9em;
-    color: #666;
+    color: #888;
+}
+
+.footnotes-list ol {
+    padding-left: 20px;
+}
+
+.footnotes-list li {
+    margin-bottom: 0.5em;
+    word-break: break-all;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
 }
 ::-webkit-scrollbar-thumb {
     background: #ccc;
-    border-radius: 4px;
+    border-radius: 3px;
 }
 ::-webkit-scrollbar-track {
     background: transparent;

static/js/app.js

@@ -6,35 +6,55 @@ createApp({
 
 这是一个专为微信公众号设计的 **Markdown** 编辑器。
 
-## 主要功能
+## 新增功能 ✨
 
-1. **实时预览**：左侧输入，右侧实时预览。
-2. **代码高亮**：
-   \`\`\`python
-   def hello():
-       print("Hello, WeChat!")
-   \`\`\`
-3. **一键复制**：点击右上角按钮，直接粘贴到公众号后台。
-4. **多主题**：支持极客黑、粉彩等主题。
+- **一键格式化**：自动在中英文之间添加空格（盘古之白）。
+- **多主题支持**：新增 **Notion** 风格。
+- **图片美化**：支持圆角和阴影。
+- **字数统计**：实时显示字数和阅读时间。
 
-## 关于链接
+## 代码示例
 
-微信公众号不支持外部链接，本编辑器会自动将链接转换为脚注。
-例如：[GitHub](https://github.com) 和 [Google](https://google.com)。
+\`\`\`python
+def hello_world():
+    print("Hello, WeChat!")
+\`\`\`
 
-> 引用样式也很漂亮哦。
+## 引用链接
 
----
+微信公众号不支持外部链接，本编辑器会自动将链接转换为脚注。
+例如：[GitHub](https://github.com) 和 [Google](https://google.com)。
 
-开始你的创作吧！
+> 极致的排版体验。
 `);
         
         const currentTheme = ref('default');
+        const imgStyle = ref('none'); // none, rounded, shadow, both
         const copied = ref(false);
         const editorRef = ref(null);
         const previewRef = ref(null);
         let isScrolling = false;
 
+        // Statistics
+        const wordCount = computed(() => {
+            // Simple logic: remove markdown symbols and count
+            const text = markdown.value.replace(/[#*>\`\-]/g, '').trim();
+            return text.length;
+        });
+        
+        const readTime = computed(() => {
+            return Math.ceil(wordCount.value / 400); // 400 chars per minute
+        });
+
+        // Pangu (Auto Space) Logic
+        const formatContent = () => {
+            let text = markdown.value;
+            // Add space between CJK and English/Number
+            text = text.replace(/([\u4e00-\u9fa5])([a-zA-Z0-9])/g, '$1 $2');
+            text = text.replace(/([a-zA-Z0-9])([\u4e00-\u9fa5])/g, '$1 $2');
+            markdown.value = text;
+        };
+
         // Markdown-it setup
         const md = window.markdownit({
             html: true,
@@ -47,30 +67,23 @@ createApp({
                         return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
                     } catch (__) {}
                 }
-                return ''; // use external default escaping
+                return ''; 
             }
         });
 
-        // Custom Link Renderer for Footnotes
+        // Footnotes logic
         const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
             return self.renderToken(tokens, idx, options);
         };
 
-        // We need a way to store footnotes per render. 
-        // Since markdown-it is sync, we can reset a global list before render.
         let footnotes = [];
 
         md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
             const href = tokens[idx].attrGet('href');
-            // Ignore internal links or empty
             if (!href || href.startsWith('#')) {
                 return defaultRender(tokens, idx, options, env, self);
             }
-            
             footnotes.push(href);
-            const n = footnotes.length;
-            
-            // Render the link text but add a superscript
             return `<span class="link-text">`; 
         };
 
@@ -80,14 +93,13 @@ createApp({
         };
 
         const htmlContent = computed(() => {
-            footnotes = []; // Reset footnotes
+            footnotes = [];
             let rendered = md.render(markdown.value);
             
-            // Append footnotes if any
             if (footnotes.length > 0) {
                 rendered += `<div class="footnotes-sep"></div><div class="footnotes-list">`;
                 rendered += `<h3>引用链接</h3><ol>`;
-                footnotes.forEach((url, index) => {
+                footnotes.forEach((url) => {
                     rendered += `<li>${url}</li>`;
                 });
                 rendered += `</ol></div>`;
@@ -99,6 +111,10 @@ createApp({
             document.body.setAttribute('data-theme', currentTheme.value);
         };
 
+        const updateImgStyle = () => {
+            document.body.setAttribute('data-img-style', imgStyle.value);
+        };
+
         const copyToWeChat = () => {
             const range = document.createRange();
             range.selectNode(document.getElementById('preview-content'));
@@ -113,6 +129,39 @@ createApp({
             }, 2000);
         };
 
+        // Insert Markdown syntax at cursor
+        const insertSyntax = (type) => {
+            const textarea = editorRef.value;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const text = markdown.value;
+            const selected = text.substring(start, end);
+            
+            let before = '';
+            let after = '';
+            
+            switch(type) {
+                case 'bold': before = '**'; after = '**'; break;
+                case 'italic': before = '*'; after = '*'; break;
+                case 'code': before = '`'; after = '`'; break;
+                case 'quote': before = '> '; after = ''; break;
+                case 'link': before = '['; after = '](url)'; break;
+                case 'image': before = '!['; after = '](https://)'; break;
+                case 'h2': before = '## '; after = ''; break;
+                case 'h3': before = '### '; after = ''; break;
+                case 'hr': before = '\n---\n'; after = ''; break;
+            }
+            
+            const newText = text.substring(0, start) + before + selected + after + text.substring(end);
+            markdown.value = newText;
+            
+            // Restore focus (approximate)
+            setTimeout(() => {
+                textarea.focus();
+                textarea.setSelectionRange(start + before.length, end + before.length);
+            }, 0);
+        };
+
         const handleScroll = (source) => {
             if (isScrolling) return;
             isScrolling = true;
@@ -135,17 +184,25 @@ createApp({
 
         onMounted(() => {
             updateTheme();
+            updateImgStyle();
         });
 
+        watch(currentTheme, updateTheme);
+        watch(imgStyle, updateImgStyle);
+
         return {
             markdown,
             htmlContent,
             currentTheme,
+            imgStyle,
             copied,
+            wordCount,
+            readTime,
             editorRef,
             previewRef,
-            updateTheme,
+            formatContent,
             copyToWeChat,
+            insertSyntax,
             handleScroll
         };
     }

templates/index.html

@@ -10,25 +10,56 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <link rel="stylesheet" href="/static/css/style.css">
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
 </head>
 <body class="bg-gray-100 h-screen flex flex-col overflow-hidden">
     <div id="app" class="h-full flex flex-col">
         <!-- Header -->
-        <header class="bg-white border-b border-gray-200 px-6 py-3 flex justify-between items-center shadow-sm z-10">
+        <header class="bg-white border-b border-gray-200 px-4 py-3 flex justify-between items-center shadow-sm z-10 shrink-0">
             <div class="flex items-center gap-3">
-                <div class="text-2xl">📝</div>
-                <h1 class="font-bold text-gray-800 text-lg">WeChat Markdown Editor</h1>
+                <div class="text-2xl bg-green-100 p-1.5 rounded-lg text-green-600">📝</div>
+                <h1 class="font-bold text-gray-800 text-lg hidden sm:block">WeChat Editor</h1>
+            </div>
+
+            <!-- Toolbar (Center) -->
+            <div class="flex items-center gap-1 bg-gray-100 p-1 rounded-lg hidden md:flex">
+                <button @click="insertSyntax('h2')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="二级标题"><i class="ph ph-text-h-two"></i></button>
+                <button @click="insertSyntax('h3')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="三级标题"><i class="ph ph-text-h-three"></i></button>
+                <div class="w-px h-4 bg-gray-300 mx-1"></div>
+                <button @click="insertSyntax('bold')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="加粗"><i class="ph ph-text-b"></i></button>
+                <button @click="insertSyntax('italic')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="斜体"><i class="ph ph-text-italic"></i></button>
+                <button @click="insertSyntax('quote')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="引用"><i class="ph ph-quotes"></i></button>
+                <button @click="insertSyntax('code')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="代码块"><i class="ph ph-code"></i></button>
+                <div class="w-px h-4 bg-gray-300 mx-1"></div>
+                <button @click="insertSyntax('link')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="链接"><i class="ph ph-link"></i></button>
+                <button @click="insertSyntax('image')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="图片"><i class="ph ph-image"></i></button>
+                <button @click="insertSyntax('hr')" class="p-1.5 hover:bg-white rounded text-gray-600 transition-colors" title="分割线"><i class="ph ph-minus"></i></button>
+                <div class="w-px h-4 bg-gray-300 mx-1"></div>
+                <button @click="formatContent" class="p-1.5 hover:bg-white rounded text-blue-600 transition-colors" title="中英文自动空格"><i class="ph ph-magic-wand"></i></button>
             </div>
             
-            <div class="flex items-center gap-4">
-                <select v-model="currentTheme" @change="updateTheme" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
-                    <option value="default">默认主题 (WeChat Green)</option>
-                    <option value="geek">极客黑 (Geek Black)</option>
-                    <option value="pastel">粉彩 (Pastel)</option>
-                </select>
+            <!-- Settings (Right) -->
+            <div class="flex items-center gap-3">
+                <div class="flex flex-col sm:flex-row gap-2">
+                    <select v-model="currentTheme" class="border border-gray-300 rounded px-2 py-1.5 text-xs sm:text-sm focus:outline-none focus:ring-1 focus:ring-green-500 bg-white">
+                        <option value="default">🟢 默认主题</option>
+                        <option value="geek">⚫ 极客黑</option>
+                        <option value="pastel">🌸 粉彩系</option>
+                        <option value="notion">⚪ Notion</option>
+                    </select>
+
+                    <select v-model="imgStyle" class="border border-gray-300 rounded px-2 py-1.5 text-xs sm:text-sm focus:outline-none focus:ring-1 focus:ring-green-500 bg-white hidden sm:block">
+                        <option value="none">图片: 默认</option>
+                        <option value="rounded">图片: 圆角</option>
+                        <option value="shadow">图片: 阴影</option>
+                        <option value="both">图片: 圆角+阴影</option>
+                    </select>
+                </div>
                 
-                <button @click="copyToWeChat" class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors flex items-center gap-2">
-                    <span>📋</span> 复制到公众号
+                <button @click="copyToWeChat" class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors flex items-center gap-2 shadow-sm">
+                    <i class="ph ph-copy"></i>
+                    <span class="hidden sm:inline">复制</span>
                 </button>
             </div>
         </header>
@@ -36,8 +67,7 @@
         <!-- Main Content -->
         <main class="flex-1 flex overflow-hidden">
             <!-- Editor -->
-            <div class="w-1/2 h-full flex flex-col border-r border-gray-200 bg-gray-50">
-                <div class="bg-gray-100 px-4 py-2 text-xs text-gray-500 font-mono border-b border-gray-200">MARKDOWN</div>
+            <div class="w-1/2 h-full flex flex-col border-r border-gray-200 bg-gray-50 relative group">
                 <textarea 
                     v-model="markdown" 
                     class="flex-1 w-full p-6 resize-none focus:outline-none font-mono text-sm leading-relaxed bg-gray-50 text-gray-800"
@@ -45,25 +75,41 @@
                     @scroll="handleScroll('editor')"
                     ref="editorRef"
                 ></textarea>
+                <!-- Word Count Status -->
+                <div class="absolute bottom-0 right-0 bg-white/80 backdrop-blur border-t border-l border-gray-200 px-3 py-1 text-xs text-gray-500 rounded-tl-lg">
+                    {{ wordCount }} 字 | 约 {{ readTime }} 分钟
+                </div>
             </div>
 
             <!-- Preview -->
-            <div class="w-1/2 h-full flex flex-col bg-white">
-                <div class="bg-gray-100 px-4 py-2 text-xs text-gray-500 font-mono border-b border-gray-200 flex justify-between">
-                    <span>PREVIEW</span>
-                    <span v-if="copied" class="text-green-600 font-bold animate-pulse">已复制!</span>
-                </div>
+            <div class="w-1/2 h-full flex flex-col bg-white relative">
                 <div 
                     id="preview-content" 
-                    class="flex-1 w-full p-8 overflow-y-auto"
+                    class="flex-1 w-full overflow-y-auto custom-scrollbar"
                     v-html="htmlContent"
                     @scroll="handleScroll('preview')"
                     ref="previewRef"
                 ></div>
+                
+                <!-- Copied Toast -->
+                <transition name="fade">
+                    <div v-if="copied" class="absolute top-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg flex items-center gap-2 z-20">
+                        <i class="ph ph-check-circle text-lg"></i>
+                        <span>已复制到剪贴板</span>
+                    </div>
+                </transition>
             </div>
         </main>
     </div>
 
+    <style>
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity 0.5s;
+        }
+        .fade-enter-from, .fade-leave-to {
+            opacity: 0;
+        }
+    </style>
     <script src="/static/js/app.js"></script>
 </body>
 </html>