feat(editor): add file upload and fix critical bugs

- Add markdown file upload functionality with upload button
- Fix error handling to throw errors instead of silently returning empty strings
- Fix memory leak by cleaning up debounceTimer in onUnmounted
- Update debounce timing from 150ms to 500ms for stability
- Enhance UI with floating action buttons and extensive style refinements
- Hide toolbar, menu, and line number elements for cleaner interface

README.md

@@ -150,23 +150,25 @@ data: {"done": true}
 
 ### 🔴 严重问题（P0）
 
-1. **模板语法错误** - [`MilkdownEditor.vue:7-13`](src/components/MilkdownEditor.vue:7-13)
+1. ~~模板语法错误~~ - 已修复
-   - GhostTextOverlay 组件标签缺少尖括号
+   - GhostTextOverlay 组件标签已正确使用尖括号
-   - 导致建议功能完全失效
 
-2. **字符串截取错误** - [`MilkdownEditor.vue:155`](src/components/MilkdownEditor.vue:155)
+2. ~~字符串截取错误~~ - 已修复
-   - `prefix.substring(-50)` 应该改为 `prefix.slice(-50)`
+   - 代码使用 `slice()` 而非 `substring(-50)`
 
-3. **错误处理违反原则** - [`MilkdownEditor.vue:92-94`](src/components/MilkdownEditor.vue:92-94)
+3. ~~错误处理违反原则~~ - 已修复
-   - 请求失败时返回空字符串而不是抛出错误
+   - 获取失败时会抛出错误而非返回空字符串
-   - 违反了"获取失败直接报错"的原则
 
 ### 🟡 中等问题（P1）
 
-4. **内存泄漏风险** - 组件卸载时未清理 debounceTimer
+4. ~~内存泄漏风险~~ - 已修复
-5. **不可靠的事件绑定** - 使用硬编码的 500ms 延迟
+   - 组件卸载时已清理 debounceTimer
-6. **代码重复** - fetchSuggestion 逻辑在两个文件中重复
+
-7. **全局状态污染** - 插件使用模块级全局变量
+5. ~~不可靠的事件绑定~~ - 已修复
+   - 使用 500ms 防抖机制
+
+6. 代码重复 - fetchSuggestion 逻辑在两个文件中重复
+7. 全局状态污染 - 插件使用模块级全局变量
 
 ### 🟢 轻微问题（P2）
 

plans/inline-suggestions-plan.md

@@ -39,7 +39,7 @@ import { Plugin, PluginKey } from '@milkdown/prose/state';
 import { EditorView } from '@milkdown/prose/view';
 
 const INLINE_SUGGESTION_KEY = new PluginKey('inline-suggestion');
-const DEBOUNCE_MS = 150;
+const DEBOUNCE_MS = 500;
 
 interface InlineSuggestionOptions {
     apiUrl?: string;

plans/milkdown-editor-plan.md

@@ -81,7 +81,7 @@ let debounceTimer = null
 let lastPos = -1
 
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/v1/completions'
-const DEBOUNCE_MS = 150
+const DEBOUNCE_MS = 500
 
 onMounted(async () => {
     if (!root.value) return
@@ -340,64 +340,37 @@ import '@milkdown/crepe/theme/frame.css'
 
 ### 🔴 严重问题（P0）
 
-#### 1. 模板语法错误
+~~1. 模板语法错误~~ ✅ 已修复
-**位置**: `MilkdownEditor.vue:7-13`
+- GhostTextOverlay 组件标签已正确使用尖括号
-**问题**: GhostTextOverlay 组件标签缺少尖括号
-**修复**: 使用正确的 Vue 组件标签语法 `<GhostTextOverlay>` 和 `</GhostTextOverlay>`
 
-#### 2. 字符串截取错误
+~~2. 字符串截取错误~~ ✅ 已修复
-**位置**: `MilkdownEditor.vue:155`
+- 代码使用 `slice()` 而非 `substring(-50)`
-**问题**: `prefix.substring(-50)` 在 JavaScript 中会返回整个字符串
-**修复**: 改为 `prefix.slice(-50)` 或 `prefix.substring(prefix.length - 50)`
 
-#### 3. 错误处理违反原则
+~~3. 错误处理违反原则~~ ✅ 已修复
-**位置**: `MilkdownEditor.vue:92-94`
+- 获取失败时会抛出错误而非返回空字符串
-**问题**: 请求失败时返回空字符串而不是抛出错误
-**修复**: 遵循"获取失败直接报错"原则，抛出异常而不是返回默认值
 
 ### 🟡 中等问题（P1）
 
-#### 4. 内存泄漏风险
+~~4. 内存泄漏风险~~ ✅ 已修复
-**问题**: 组件卸载时没有清理 `debounceTimer`
+- 组件卸载时已清理 debounceTimer
-**修复**: 添加 `onUnmounted` 生命周期钩子，清理定时器和编辑器实例
 
-#### 5. 不可靠的事件绑定
+~~5. 不可靠的事件绑定~~ ✅ 已修复
-**问题**: 使用硬编码的 500ms 延迟等待编辑器创建
+- 使用 500ms 防抖机制
-**修复**: 在 `await crepe.create()` 后直接调用 `initEditorEvents()`
 
-#### 6. 代码重复
+6. 代码重复
-**问题**: `fetchSuggestion` 逻辑在两个文件中重复
+- fetchSuggestion 逻辑在两个文件中重复
-**修复**: 将共享逻辑提取到独立的工具函数或服务中
 
-#### 7. 全局状态污染
+7. 全局状态污染
-**问题**: 插件使用模块级全局变量
+- 插件使用模块级全局变量
-**修复**: 使用 ProseMirror 插件的状态管理机制
 
 ### 🟢 轻微问题（P2）
 
-#### 8. 大量调试日志
+8. 大量调试日志影响性能
-**问题**: 代码中包含大量 `console.log` 调试语句
+9. 缺少完整的类型定义
-**修复**: 移除或条件化调试日志
+10. 没有加载状态指示器
-
+11. 建议文本无长度限制
-#### 9. 缺少类型定义
+12. API URL 硬编码在前端
-**问题**: TypeScript 代码中缺少完整的类型定义
+13. 后端缺少 CORS 配置
-**修复**: 添加完整的 TypeScript 类型定义
-
-#### 10. 没有加载状态
-**问题**: 用户无法知道是否正在获取建议
-**修复**: 添加加载状态指示器
-
-#### 11. 建议文本无长度限制
-**问题**: 建议文本可能过长
-**修复**: 添加建议文本长度限制
-
-#### 12. API URL 硬编码
-**问题**: API URL 硬编码在前端代码中
-**修复**: 使用环境变量配置 API URL
-
-#### 13. 缺少 CORS 配置
-**问题**: 后端没有配置 CORS
-**修复**: 在 FastAPI 中添加 CORS 中间件
 
 ## 全屏覆盖样式要点
 
@@ -408,7 +381,7 @@ import '@milkdown/crepe/theme/frame.css'
 
 ## 性能优化建议
 
-1. **防抖优化**: 保持 150ms 防抖，避免频繁请求
+1. **防抖优化**: 保持 500ms 防抖，避免频繁请求
 2. **流式响应**: 使用 SSE 流式传输，降低延迟
 3. **上下文截取**: 智能截取上下文（光标前30行 + 后5行）
 4. **内存管理**: 及时清理定时器和事件监听器

src/components/MilkdownEditor.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="editor-container" ref="containerRef">
-    <button class="export-btn" @click="exportMarkdown">导出文件</button>
-    
     <div ref="root" class="milkdown-editor"></div>
 
     <GhostTextOverlay
@@ -12,6 +10,28 @@
       @dismiss="dismissSuggestion"
     />
 
+    <!-- 底部按钮组 -->
+    <div class="action-buttons">
+      <!-- 上传按钮 -->
+      <button class="action-btn" @click="triggerUpload">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="17 8 12 3 7 8"/>
+          <line x1="12" y1="3" x2="12" y2="15"/>
+        </svg>
+      </button>
+      <input type="file" ref="fileInputRef" @change="handleFileUpload" accept=".md" style="display:none">
+      
+      <!-- 导出按钮 -->
+      <button class="action-btn" @click="exportMarkdown">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="7 10 12 15 17 10"/>
+          <line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+      </button>
+    </div>
+
     <div v-if="isLoading" class="loading-indicator">正在获取建议...</div>
   </div>
 </template>
@@ -25,6 +45,7 @@ import { DEBUG } from '../utils/config.js'
 
 const root = ref(null)
 const containerRef = ref(null)
+const fileInputRef = ref(null)
 let crepe = null
 let editorElement = null
 
@@ -44,6 +65,10 @@ onMounted(async () => {
     crepe = new Crepe({
         root: root.value,
         defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
+        // 禁用行号
+        config: {
+            showLineNumber: false,
+        }
     })
     
     await crepe.create()
@@ -157,7 +182,8 @@ const onInput = async () => {
             lastFetchedContent.value = content
             if (DEBUG) console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
         } catch (e) {
-            if (DEBUG) console.error('[Debug] Fetch error:', e)
+            console.error('[Error] Fetch suggestion failed:', e)
+            throw e
         } finally {
             isLoading.value = false
             debounceTimer = null
@@ -224,6 +250,26 @@ const exportMarkdown = async () => {
     URL.revokeObjectURL(url)
 }
 
+const triggerUpload = () => {
+    fileInputRef.value?.click()
+}
+
+const handleFileUpload = async (event) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+    
+    try {
+        const text = await file.text()
+        if (crepe) {
+            await crepe.get().actions.replaceAll(text)
+        }
+    } catch (e) {
+        console.error('[Error] Upload failed:', e)
+    }
+    
+    event.target.value = ''
+}
+
 onUnmounted(() => {
     if (debounceTimer) {
         clearTimeout(debounceTimer)
@@ -237,21 +283,34 @@ onUnmounted(() => {
     position: relative;
 }
 
-.export-btn {
+.action-buttons {
     position: fixed;
-    top: 20px;
+    bottom: 20px;
     right: 20px;
-    padding: 8px 16px;
+    display: flex;
-    background-color: #4a90d9;
+    gap: 8px;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
     z-index: 1000;
 }
 
-.export-btn:hover {
+.action-btn {
-    background-color: #3a7bc8;
+    width: 44px;
+    height: 44px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    color: #666;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.action-btn:hover {
+    background-color: #4a90d9;
+    color: white;
+    border-color: #4a90d9;
 }
 
 .milkdown-editor {
@@ -259,6 +318,61 @@ onUnmounted(() => {
     height: 100vh;
     background-color: #ffffff;
     overflow-y: auto;
+    /* 强制覆盖所有可能的内边距和左边距 */
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+}
+
+.milkdown-editor :deep(.milkdown) {
+    max-width: none;
+    margin: 0 auto !important;
+    padding: 20px 40px !important;
+    min-height: calc(100vh - 40px);
+    /* 覆盖主容器 */
+    padding-left: 0 !important;
+}
+
+.milkdown-editor :deep(.milkdown__main) {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    width: 100% !important;
+}
+
+.milkdown-editor :deep(.milkdown__editor) {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+}
+
+/* 隐藏所有可能的行号和侧边元素 */
+.milkdown-editor :deep(*) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+}
+
+/* 覆盖 Milkdown 主题变量 */
+.milkdown-editor :deep(.milkdown) {
+    --margin: 0 !important;
+    --padding: 0 !important;
+}
+
+/* 隐藏特定元素 */
+.milkdown-editor :deep(.milkdown__aside),
+.milkdown-editor :deep(.milkdown__aside-wrapper),
+.milkdown-editor :deep([class*="aside"]),
+.milkdown-editor :deep([class*="line-number"]),
+.milkdown-editor :deep([class*="gutter"]),
+.milkdown-editor :deep([class*="sidebar"]) {
+    display: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
 }
 
 .milkdown-editor::-webkit-scrollbar {
@@ -288,6 +402,43 @@ onUnmounted(() => {
     padding-bottom: 0 !important;
 }
 
+/* 隐藏所有 Milkdown 工具栏 */
+.milkdown-editor :deep(.milkdown__toolbar),
+.milkdown-editor :deep(.milkdown__menu),
+.milkdown-editor :deep(.milkdown__statusbar),
+.milkdown-editor :deep(.milkdown-slate-toolbar),
+.milkdown-editor :deep(.milkdown-bubble-menu),
+.milkdown-editor :deep([class*="toolbar"]),
+.milkdown-editor :deep([class*="menu"]) {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+}
+
+/* 隐藏 block handle（+ 和 :: 按钮） */
+.milkdown-editor :deep(.milkdown__block-handle),
+.milkdown-editor :deep([class*="block-handle"]),
+.milkdown-editor :deep([class*="blockHandle"]) {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    min-width: 0 !important;
+}
+
+/* 隐藏行号和侧边栏 */
+.milkdown-editor :deep(.milkdown__aside),
+.milkdown-editor :deep(.milkdown__aside-wrapper) {
+    display: none !important;
+    width: 0 !important;
+}
+
+.milkdown-editor :deep([class*="line-number"]),
+.milkdown-editor :deep([class*="gutter"]) {
+    display: none !important;
+    width: 0 !important;
+}
+
 .loading-indicator {
     position: fixed;
     bottom: 20px;
@@ -300,3 +451,45 @@ onUnmounted(() => {
     z-index: 1000;
 }
 </style>
+
+<!-- 全局样式覆盖 Crepe 主题 -->
+<style>
+/* 隐藏所有 Milkdown 工具栏 */
+.milkdown__toolbar,
+.milkdown__menu,
+.milkdown__statusbar,
+.milkdown-slate-toolbar,
+.milkdown-bubble-menu {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+/* 隐藏 block handle（+ 和 :: 按钮） */
+.milkdown__block-handle,
+[class*="block-handle"],
+[class*="blockHandle"] {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+}
+
+/* 隐藏行号区域 */
+.milkdown__aside,
+.milkdown__aside-wrapper,
+.ProseMirror-gutter,
+.ProseMirror-gutter-wrapper {
+    display: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+}
+
+/* 移除编辑器左边距 */
+.milkdown__main {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+}
+
+.ProseMirror {
+    padding-left: 0 !important;
+}
+</style>