Inline Autocomplete Suggestions 实现计划

技术栈确认

前端: Vue3 + Milkdown Editor
后端: Python FastAPI
LLM: OpenAI API（流式响应）
范围: 基础流式补全，无需复杂缓存机制

系统架构

flowchart TB
    subgraph 前端 [Vue3 + Milkdown]
        E[Milkdown Editor]
        I[InlineSuggestionPlugin<br/>输入监听+防抖]
        G[GhostTextOverlay<br/>虚影渲染层]
    end
    
    subgraph 后端 [FastAPI]
        API[/v1/completions<br/>补全接口]
        P[PromptBuilder<br/>上下文构建]
        L[OpenAI Client<br/>LLM调用]
    end
    
    I -- "输入事件" --> G
    G -- "POST {prefix, suffix}" --> API
    API -- "流式响应" --> G

实现步骤

1. 前端：创建 Inline Suggestion Plugin

文件: src/plugins/inlineSuggestionPlugin.ts

监听编辑器输入事件
防抖处理（150ms）
调用后端 API 获取补全建议
管理 GhostText 显示状态

2. 前端：GhostText 渲染组件

文件: src/components/GhostTextOverlay.vue 或内联样式

在光标位置显示灰色虚影文本
处理 Tab 键接受补全
ESC 键取消显示

3. 修改 MilkdownEditor 集成插件

文件: src/components/MilkdownEditor.vue

注册 InlineSuggestionPlugin 到 Crepe 实例
配置 API 地址

4. 后端：FastAPI 服务

文件: backend/main.py

POST /v1/completions 流式接口
请求体验证和解析

5. 后端：Prompt 构建和 LLM 调用

文件: backend/prompt.py, backend/llm.py

构建补全 Prompt（参考 completions-sample-code 的 extractPrompt）
OpenAI API 流式调用
返回 SSE 格式响应

文件结构

llm-in-text/
├── src/
│   ├── components/
│   │   └── MilkdownEditor.vue      [修改]
│   ├── plugins/
│   │   └── inlineSuggestionPlugin.ts [新建]
│   └── ...
└── backend/
    ├── main.py                      [新建]
    ├── prompt.py                    [新建]
    ├── llm.py                       [新建]
    └── requirements.txt             [新建]

API 设计

请求

POST /v1/completions
{
  "prefix": "# Hello\n\nThis is ",
  "suffix": "",
  "languageId": "markdown"
}

响应（流式 SSE）

data: {"content": "a "}

data: {"content": "a te"}

data: {"content": "a test"}

data: [DONE]

参考代码映射

completions-sample-code	本项目实现
`ghostText.ts getGhostText()`	后端 LLM 调用逻辑
`inlineCompletion.ts GhostText`	前端 Plugin 核心逻辑
`networking.ts postRequest()`	后端 API 接口
`prompt/extractPrompt()`	后端 Prompt 构建

下一步

确认计划后切换到 Code 模式开始实现。

2.8 KiB Raw Blame History Unescape Escape