AI 驱动的 PyCharm 风格 Markdown 编辑器
基于 Claude Code 源码二次开发，构建一个 PyCharm 风格的 AI Markdown 编辑器。
核心理念：用户下载安装后，只需配置 Anthropic API Key，就能在一个桌面应用中完成 Markdown 写作、实时预览、AI 辅助编辑的全部工作流，无需打开终端、无需额外工具。
用户旅程：
下载安装包 → 安装 → 首次启动
│
├─→ 检测 Bun 运行时 → 未安装则引导一键安装
│
├─→ 输入 Anthropic API Key → 加密存储到本地
│
└─→ 进入编辑器 ← 此后每次打开直接可用
│
├─ 左侧文件树浏览/管理 Markdown 文件
├─ 中央编辑 + 实时预览
└─ 底部 Claude Code 对话终端（AI 已就绪）
┌──────────────────────────────────────────────────────────┐
│ 菜单栏: 文件 | 编辑 | 视图 | 工具 | 主题 | 帮助 │
├────────┬────────────────────────────────┬────────────────┤
│ │ │ │
│ 文件树 │ Markdown 编辑区 │ 实时预览 │
│ │ (CodeMirror 6) │ (markdown-it) │
│ 📁 docs│ │ │
│ ├─ a.md │ # 标题 │ ┌────────┐ │
│ ├─ b.md │ **加粗** │ │ 渲染结果 │ │
│ 📁 src │ - 列表 │ └────────┘ │
│ │ │ │
├────────┴────────────────────────────────┴────────────────┤
│ AI 对话终端 (xterm.js + Claude Code) │
│ > 帮我优化这段 Markdown... │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Claude: 好的，我来帮你... │ │
│ └──────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────┤
│ 状态栏: README.md | 行 42:列 10 | 字数 2300 | Markdown │
└──────────────────────────────────────────────────────────┘
- 左侧面板：文件目录树 + 大纲（TOC）
- 中央：Markdown 编辑区 + 右侧实时预览区（双栏可切换）
- 底部面板：Claude Code AI 对话终端（可折叠/拖拽调整高度）
- CodeMirror 6 编辑器 — 语法高亮、行号显示、代码折叠、括号匹配、自动补全
- 实时预览 — 编辑器与预览面板同步滚动
- 多标签页 — 同时编辑多个文件，支持标签切换与关闭
- 自动保存 — 修改内容自动保存，防止数据丢失
- 工具栏 — 一键插入标题、加粗、斜体、链接、图片、列表、代码块、表格、公式、图表
- LaTeX 数学公式 — 基于 KaTeX 渲染，支持行内公式
$...$和块级公式$$...$$ - 矩阵、分式、积分 — 完整支持复杂数学排版
- Mermaid 图表 — 流程图、时序图、甘特图、类图、状态图等
- 代码高亮 — 基于 highlight.js，支持 190+ 编程语言
- 文件树浏览 — 侧边栏展示工作目录结构，支持展开/折叠、右键菜单（新建/删除/重命名）
- 打开/保存 — 支持 Markdown 文件 (.md) 的打开与保存
- 文件夹工作区 — 打开文件夹作为工作区根目录
- 文件监听 — 外部文件变更实时同步到文件树
- Claude Code 终端 — 内置 xterm.js + node-pty，运行完整 Claude Code AI 对话
- 右键菜单 — 选中文本后右键 → "AI 帮忙写这段"
- AI 优化排版 — 工具栏一键将全文发送给 AI 进行排版优化
- 斜杠命令 — 支持
/fix（语法修正）、/summarize（生成摘要）等
- HTML — 自包含网页（内联样式）
- PDF — 打印就绪的 PDF 文档
- DOCX — Microsoft Word 兼容格式
- 图片 — 将预览区渲染为 PNG/JPEG
- 自定义 CSS — 导出时可注入自定义样式
- 明暗主题 — 跟随系统或手动切换，CSS 变量驱动
- 专注模式 — 隐藏所有面板，编辑器居中，当前段落高亮
- 分屏模式 — 编辑+预览 / 仅编辑 / 仅预览
- 可拖拽面板 — 侧边栏、编辑器、预览、终端均可自由调整大小
- 全局搜索 —
Ctrl+Shift+F跨文件搜索与替换 - 图片粘贴 — 支持剪贴板图片直接粘贴，自动保存到 assets 目录
- 首次启动向导 — 引导检测 Bun 运行时、配置 API 密钥等
┌─────────────────────────────────────────────────────────────┐
│ Electron 主进程 (Main Process) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ 窗口管理器 │ │ 文件系统服务 │ │ PTY 进程管理器 │ │
│ │ (BrowserWin) │ │ (fs/path) │ │ (node-pty) │ │
│ └──────────────┘ └──────────────┘ └────────┬─────────┘ │
│ │ │
│ ┌────────────────▼──────────┐ │
│ │ Claude Code 后端进程 │ │
│ │ (Bun 运行时) │ │
│ │ - query.ts / QueryEngine │ │
│ │ - REPL 逻辑 │ │
│ │ - 工具系统 (Bash/Read/ │ │
│ │ Edit/Grep/Agent...) │ │
│ └────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ IPC Bridge (contextBridge + ipcMain) │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
│ IPC 通道
▼
┌─────────────────────────────────────────────────────────────┐
│ Electron 渲染进程 (Renderer Process) │
│ │
│ ┌──────────┬──────────────────────────┬─────────────────┐ │
│ │ 左侧面板 │ 中央编辑区 │ 右侧预览区 │ │
│ │ │ │ │ │
│ │ 文件树 │ CodeMirror 6 │ markdown-it │ │
│ │ (Tree) │ - 语法高亮 │ 渲染结果 │ │
│ │ │ - 自动补全 │ - 标题/列表 │ │
│ │ 大纲 │ - 快捷键绑定 │ - 代码块高亮 │ │
│ │ (TOC) │ - 滚动同步 ───────────►│ - 表格 │ │
│ │ │ │ - 数学公式 │ │
│ │ │ │ - Mermaid 图表 │ │
│ └──────────┴──────────────────────────┴─────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 底部面板 (可折叠/拖拽调整高度) │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ AI 终端 (xterm.js) │ │ │
│ │ │ - Claude Code REPL 输出 │ │ │
│ │ │ - 用户输入区 │ │ │
│ │ │ - 工具调用结果展示 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 状态栏: 文件名 | 行:列 | 字数 | 文件类型 | 主题 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
┌──────────────────┐ IPC ┌──────────────────────┐
│ Electron 主进程 │ ◄──────────────────► │ Electron 渲染进程 │
│ │ │ │
│ • 文件系统操作 │ file:* │ • React UI │
│ • PTY 管理 │ terminal:* │ • CodeMirror 6 │
│ • 窗口管理 │ export:* │ • markdown-it 渲染 │
│ • 原生菜单 │ image:* │ • xterm.js 终端 │
│ • 导出功能 │ app:* │ • Zustand 状态管理 │
└────────┬──────────┘ └──────────────────────┘
│
│ node-pty
▼
┌──────────────────┐
│ Claude Code │
│ (Bun 子进程) │
│ • 标准输入/输出 │
│ • AI 对话处理 │
│ • 工具调用 │
└──────────────────┘
| 类别 | 技术 | 选型理由 |
|---|---|---|
| 桌面框架 | Electron 28+ | 跨平台桌面应用，集成 Node.js 能力，支持文件关联和原生菜单 |
| 前端框架 | React 18 + TypeScript | 与 Claude Code 技术栈一致，复用组件体系 |
| 编辑器内核 | CodeMirror 6 | 模块化架构，Markdown 语法高亮成熟，扩展性强 |
| Markdown 渲染 | markdown-it + 插件生态 | 支持 GFM、表格、脚注、Emoji、数学公式、Mermaid |
| 数学公式 | KaTeX 0.16 | 快速渲染 LaTeX 公式为 SVG |
| 代码高亮 | highlight.js 11 | 190+ 语言支持 |
| 图表渲染 | Mermaid 10 | 流程图、时序图、甘特图等多种图表 |
| 终端 | xterm.js 5 + node-pty | 在渲染进程中嵌入完整终端，PTY 管理子进程 |
| AI 引擎 | Claude Code（原项目核心） | 保留完整 query.ts / QueryEngine.ts / REPL 逻辑 |
| AI 运行时 | Bun（外部依赖） | Claude Code 使用 Bun 专有 API，必须通过 Bun 执行 |
| 状态管理 | Zustand 4 | 轻量、与 React 深度集成 |
| CSS 方案 | Tailwind CSS 3 + CSS 变量 | 快速构建 UI， CSS 变量驱动主题切换 |
| 构建工具 | Vite 5 + vite-plugin-electron | HMR 热更新，开发体验好 |
| 打包发布 | electron-builder 24 | 三平台打包 |
Claude Code 的 UI 基于 Ink（React → Terminal 渲染器），本质是 TUI（文本用户界面），无法渲染图形化的 Markdown 预览、代码高亮、文件树等组件。因此采用 Electron GUI 方案，将 Claude Code 的交互能力嵌入 xterm.js 终端组件，同时在渲染进程中使用真正的浏览器 DOM 渲染编辑器 UI。
- Node.js ≥ 18
- npm ≥ 9
- Bun（可选，用于 AI 终端功能；首次启动会自动检测并引导安装）
- Windows / macOS / Linux
git clone https://github.com/your-org/claude-md-editor.git
cd claude-md-editornpm install启动 Vite 开发服务器 + Electron 窗口（支持热更新）：
npm run electron:devnpm run dev构建前端和 Electron 主进程：
npm run build构建并打包为桌面安装程序：
npm run electron:build打包产物位于 release/ 目录：
- Windows：
.exeNSIS 安装程序 - macOS：
.dmg镜像 - Linux：
.AppImage/.deb
claude-md-editor/
├── electron/ # Electron 主进程
│ ├── main.ts # 应用入口，窗口创建
│ ├── preload.ts # 预加载脚本 (contextBridge)
│ ├── ipc/ # IPC 通信模块
│ │ ├── fileSystem.ts # 文件系统操作
│ │ ├── terminal.ts # PTY 终端管理
│ │ ├── export.ts # 导出功能 (HTML/PDF/DOCX)
│ │ └── imageUpload.ts # 图片上传/粘贴
│ ├── pty/
│ │ └── claudeTerminal.ts # node-pty 封装，启动 Claude Code 进程
│ ├── menu/
│ │ └── appMenu.ts # 应用菜单栏
│ └── utils/
│ └── paths.ts # 资源路径、用户数据路径工具
├── src/ # React 渲染进程
│ ├── main.tsx # React 入口
│ ├── App.tsx # 根组件，布局容器
│ ├── components/
│ │ ├── layout/
│ │ │ ├── AppShell.tsx # 主布局容器（可拖拽分栏）
│ │ │ ├── SplitPane.tsx # 可拖拽分割面板
│ │ │ ├── Sidebar.tsx # 侧边栏
│ │ │ └── BottomPanel.tsx # 底部面板（可折叠）
│ │ ├── editor/
│ │ │ ├── EditorPane.tsx # CodeMirror 编辑器
│ │ │ ├── EditorTabs.tsx # 标签页栏
│ │ │ ├── extensions/ # CodeMirror 6 扩展
│ │ │ │ ├── markdownSyntax.ts # Markdown 语法高亮
│ │ │ │ ├── autocomplete.ts # 自动补全
│ │ │ │ ├── keybindings.ts # 快捷键定义
│ │ │ │ └── scrollSync.ts # 滚动同步扩展
│ │ │ └── toolbar/
│ │ │ └── EditorToolbar.tsx # 工具栏
│ │ ├── preview/
│ │ │ ├── PreviewPane.tsx # 预览面板
│ │ │ ├── MarkdownRenderer.tsx # markdown-it 渲染器封装
│ │ │ └── preview-plugins/ # 预览插件
│ │ │ ├── codeHighlight.ts # 代码语法高亮
│ │ │ ├── mathRenderer.ts # KaTeX 数学渲染
│ │ │ ├── mermaidRenderer.ts # Mermaid 图表渲染
│ │ │ └── tocGenerator.ts # 目录生成
│ │ ├── terminal/
│ │ │ └── TerminalPanel.tsx # 终端面板 (xterm)
│ │ ├── file-tree/
│ │ │ ├── FileTree.tsx # 文件树
│ │ │ ├── FileTreeNode.tsx # 单个树节点
│ │ │ └── FileTreeContextMenu.tsx # 右键菜单
│ │ ├── dialogs/
│ │ │ ├── GlobalSearchDialog.tsx # 全局搜索
│ │ │ ├── ExportDialog.tsx # 导出对话框
│ │ │ ├── SettingsDialog.tsx # 设置
│ │ │ ├── TableInsertDialog.tsx # 表格插入
│ │ │ └── FirstLaunchWizard.tsx # 首次启动向导
│ │ └── statusbar/
│ │ └── StatusBar.tsx # 状态栏
│ ├── stores/ # Zustand 状态管理
│ │ ├── useEditorStore.ts # 编辑器状态（标签页、内容）
│ │ ├── useFileStore.ts # 文件树状态
│ │ ├── usePreviewStore.ts # 预览状态（视图模式、滚动）
│ │ ├── useTerminalStore.ts # 终端状态
│ │ └── useThemeStore.ts # 主题 & UI 状态
│ ├── hooks/ # 自定义 Hooks
│ │ ├── useIpc.ts # IPC 通信（类型安全封装）
│ │ ├── useMarkdownParser.ts # Markdown 解析 + 实时渲染
│ │ ├── useScrollSync.ts # 编辑-预览滚动同步
│ │ ├── useAutoSave.ts # 自动保存
│ │ ├── useImagePaste.ts # 图片粘贴处理
│ │ └── useExport.ts # 导出逻辑
│ ├── services/ # 业务逻辑服务
│ │ ├── markdownEngine.ts # markdown-it 配置 + 插件加载
│ │ ├── fileService.ts # 文件 CRUD（IPC 调用主进程）
│ │ ├── exportService.ts # 导出为 HTML/PDF/DOCX
│ │ └── imageService.ts # 图片上传/本地存储
│ ├── styles/
│ │ ├── globals.css # 全局样式 & 主题变量
│ │ ├── themes/
│ │ │ ├── light.css # 亮色主题变量
│ │ │ └── dark.css # 暗色主题变量
│ │ └── preview.css # Markdown 预览区样式
│ └── types/
│ ├── editor.ts # 编辑器类型
│ ├── file.ts # 文件系统类型
│ ├── ipc.ts # IPC 接口类型定义
│ └── theme.ts # 主题类型
├── claude-code/ # Claude Code 源码（保持原目录结构）
│ └── src/ # query.ts / QueryEngine.ts / tools / commands 等
├── resources/
│ ├── icons/ # 应用图标
│ └── templates/ # 导出模板
├── electron-builder.yml # electron-builder 打包配置
├── vite.config.ts # Vite 构建配置
├── tailwind.config.ts # Tailwind CSS 配置
└── package.json
编辑器内容经过以下流水线处理为预览 HTML：
Markdown 源码
→ ① 提取保护代码块 (```...```)
→ ② 提取保护数学公式 ($...$ 和 $$...$$)
→ ③ markdown-it 渲染 (breaks, linkify, emoji, GFM, 脚注, 上下标)
→ ④ 恢复代码块并 HTML 转义
→ ⑤ highlight.js 代码语法高亮
→ ⑥ KaTeX 渲染数学公式 → SVG
→ ⑦ Mermaid 图表渲染 → SVG
→ ⑧ sanitize-html XSS 防护
→ 最终 HTML
应用首次启动
│
▼
检测 Bun 运行时 (which bun / where bun)
│
├─→ 找到 → 记录路径 → 下一步
│
└─→ 未找到 → 弹出引导对话框
├─ [一键安装] 打开终端执行安装命令
├─ [手动安装] 打开 bun.sh 官网
└─ [跳过] 编辑器可正常使用，AI 终端暂不可用
│
▼
API Key 配置
├─ 输入 Anthropic API Key
├─ 可选：自定义 API Base URL
└─ 保存 → 加密写入本地用户数据目录
(Windows: %APPDATA% | macOS: ~/Library/Application Support
| Linux: ~/.config) /claude-md-editor/config.json
后续运行：启动 Claude Code 子进程时从配置文件读取 API Key，
通过环境变量传递给 Bun 子进程
- Electron 项目初始化，配置 Vite + React + TypeScript
- 实现三段式布局（AppShell + SplitPane）
- 集成 CodeMirror 6，实现基础 Markdown 编辑
- 集成 markdown-it，实现实时预览
- 实现暗色/亮色主题切换
- 集成 xterm.js，连接 Claude Code PTY 终端
- 文件目录树（新建/打开/保存/另存为）
- 多标签页管理
- 工具栏按钮（加粗、斜体、链接、图片、列表、标题）
- 常用快捷键（Ctrl+B/I/K/S/Z/Y/1~6）
- 双栏/单栏切换
- 语法高亮与自动补全
- 图片拖拽/粘贴上传
- 表格可视化插入与 Tab 导航
- 滚动同步
- 导出 HTML / PDF / DOCX
- Mermaid 图表渲染
- KaTeX 数学公式渲染
- 目录自动生成（TOC）
- 专注模式
- 全局搜索替换
- 自动保存草稿
- 原生菜单栏集成
- electron-builder 打包配置
- Windows / macOS / Linux 三平台构建
- 自动更新配置
- CodeMirror — 编辑器内核
- KaTeX — 数学公式渲染
- Mermaid — 图表渲染
- markdown-it — Markdown 解析
- Electron — 桌面应用框架
- Vite — 构建工具
- xterm.js — 终端模拟器
- Claude Code — AI 引擎内核