# ecoder

**Repository Path**: huihuisire/ecoder

## Basic Information

- **Project Name**: ecoder
- **Description**: ⚡ 精简全能桌面端 AI 编程工具：Monaco + Electron，智能体对话 / 多标签编辑 / 自然语言生成代码 / Repo Wiki
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://huihuiai.site/ecoder
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-08-07
- **Last Updated**: 2026-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: ai-ide, 免费, JavaScript, openAI, AI编程

## README

# ecoder —— 精简全能 AI 编程工具

<p align="center">
  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black" alt="JavaScript">
  <img src="https://img.shields.io/badge/Electron-47848F?logo=electron&logoColor=white" alt="Electron">
  <img src="https://img.shields.io/badge/license-MIT-green" alt="License">
</p>


基于 VS Code 的开源编辑器内核 **Monaco Editor** + **Electron** 打造的桌面端 AI 编程工具，小体积覆盖日常开发全流程：**智能体对话窗口**、**多标签代码编辑器**、自然语言驱动的代码生成 / 修改 / 多文件 Agent 任务、Repo Wiki、终端与 Git 面板。

**使用演示**：

![E2E 演示](demo.gif)

---

## 技术选型

| 层 | 技术 | 说明 |
| --- | --- | --- |
| 桌面壳 | Electron 31 | 主进程负责文件系统 / 终端 / 截图，渲染进程沙箱隔离（contextBridge） |
| 编辑器 | Monaco Editor 0.52 | VS Code 同款编辑器内核：语法高亮、IntelliSense 补全、minimap、diff 能力 |
| 渲染层 | 原生 ES Modules + Vite 5 | 无框架依赖，启动快、体积小、可控性强 |
| AI 引擎 | OpenAI 兼容 Provider | 流式 SSE + tool_calls 工具块协议、多轮工具反馈；内置 Mock 模式零配置可体验 |
| 样式 | 手写 CSS 三主题 | 深色 / 浅色 / 粉色樱桃，CSS 变量 + Monaco 编辑器主题联动，一键切换 |

## 启动方式

```bash
# 1. 安装依赖（Electron 下载慢可用镜像：
#    $env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"）
npm install

# 2. 构建渲染层并启动桌面应用（默认空工作区，引导「打开本地文件夹」）
npm start

# 3. 打开指定项目文件夹
npx electron . --folder=D:\your\project

# 4. 运行 UI 自动化测试（自动重置夹具项目 → 启动 → 断言 → 截图到 ./screenshots/）
npm run e2e
```

### 打包为 Windows 安装包 / 免安装程序

基于 **electron-builder**，产物输出到 `./release/`：

```powershell
# 同时生成 NSIS 安装包（ecoder-Setup-x.x.x.exe）+ 免安装便携版（ecoder-x.x.x-Portable.exe）
npm run dist

# 只生成安装包 / 只生成便携版
npm run dist:setup
npm run dist:portable
```

安装包支持自选安装目录、桌面/开始菜单快捷方式；便携版双击即用。首次打包会自动下载 NSIS 工具链（国内可设 `$env:ELECTRON_BUILDER_BINARIES_MIRROR="https://npmmirror.com/mirrors/electron-builder-binaries/"` 加速）。

### 可选：接入真实大模型

设置环境变量后启动，即切换为 OpenAI 兼容 Provider（支持任意 `/chat/completions` 兼容端点）：

```powershell
$env:OPENAI_API_KEY="sk-..."; $env:OPENAI_BASE_URL="https://api.openai.com/v1"; $env:OPENAI_MODEL="gpt-4o-mini"
npm start
```

也可在应用内点击左侧活动栏 **齿轮图标** 随时切换 Provider / 修改 Base URL。

## 操作说明

### 快捷键

| 快捷键 | 功能 |
| --- | --- |
| `Enter` / `Shift+Enter` | 发送指令 / 换行 |
| `Ctrl+K` | 唤起 AI 对话输入框 |
| `Ctrl+P` | 快速打开文件（模糊搜索） |
| `Ctrl+S` | 保存当前文件 |
| `Ctrl+B` | 显示 / 隐藏主侧栏（也可点击活动栏已激活图标收缩） |
| `Ctrl+J` | 显示 / 隐藏 AI 对话面板 |
| `` Ctrl+` `` | 显示 / 隐藏终端面板 |
| `Ctrl+Z` | 编辑器内撤销（AI 写入同样可撤销） |
| `↑` / `↓` | 终端输入框切换命令历史 |

### 两种模式（对话面板左上角切换）

- **⚡ Agent 模式**：AI 自主规划 → 逐步执行（创建/编辑文件、运行命令）→ 汇报进展。**思考轨迹多行实时展示并保留可见**；**边回复边渲染**：对话文本逐字流式输出，创建文件时代码同步逐字流式写入编辑器（带进度条与光标跟随），完成后写盘并紫色高亮改动行，文件树实时刷新。
- **💬 Ask 模式**：问答与解释；涉及文件修改时生成 **diff 预览卡片**，需点击「✓ 应用更改」确认，拒绝则原内容不受影响。

### @ 引用上下文（对话输入框）

输入 `@` 唤起提及弹窗，支持键盘 ↑/↓ 选择、Enter/Tab 确认、Esc 关闭，可引用四类上下文（发送后自动注入 AI 上下文并在消息上标注）：

| 语法 | 说明 |
| --- | --- |
| `@file:js/app.js` | 引用工作区文件（内容注入；未打开文件时作为默认操作目标） |
| `@folder:css` | 引用文件夹（目录内文件清单注入） |
| `@skill:代码规范` | 引用 Agent 资产面板中的技能（提示词注入） |
| `@mcp:filesystem` | 引用 MCP 服务器配置 |

支持类型前缀过滤（`@file…` / `@文件夹…`）与名称模糊匹配。

### 指令示例

| 你说 | 智能体做 |
| --- | --- |
| 写一个精美的个人博客网页 | 自主生成 `index.html` + `css/style.css` + `js/main.js` 三文件博客（主题切换/数字滚动/入场动画） |
| 给选中的代码加上注释 | 读取编辑器选区 → 生成注释块 → 仅替换选区，逻辑零改动 |
| 创建 utils.js 并实现防抖函数 | 生成含 JSDoc 的 `debounce`/`throttle` 工具模块 |
| 把 "red" 替换为 "blue" | 当前文件查找并全量替换，改动高亮 |
| 运行终端命令 node -v | 在底部终端执行并实时回显，对话中同步输出卡片 |
| 解释这段代码 | 结合选区/文件上下文给出结构化解读 |

### 检查点（Undo）

每个会修改文件的回合结束后生成**检查点**（状态栏计数），对话流中出现「↩ 撤销本次更改」按钮，一键把该回合所有文件恢复原状（新建的文件会被删除）。

## 功能清单

- [x] **智能体对话窗口**：右侧对话面板，流式输出、思考动画、执行计划步骤条、工具卡片、Agent 会话列表（左侧 Agents 栏）
- [x] **Editor Window**：Monaco 多标签页、语法高亮、IntelliSense 代码补全、minimap、光标位置/语言实时同步到状态栏
- [x] **@ 提及引用**：对话输入框 `@` 弹窗，支持 file / folder / skill / mcp 四类上下文引用与注入
- [x] **流式体验**：思考轨迹多行实时展示且保留可见；回复文本逐字流式输出；创建文件时代码**边回复边写入编辑器**（进度条+光标跟随）
- [x] **文件管理**：新建文件 / 新建文件夹（支持子路径）、重命名、递归删除、复制路径、**文件树鼠标右键菜单**；默认空工作区启动，引导打开本地文件夹
- [x] **AI 代码操作**：创建文件 / 编辑文件 / 选区级编辑 / 查找并替换 / 运行终端命令，全部带 diff 预览与高亮；**AI 创建文件与编辑器流式写代码联动**
- [x] **设置中心**：**Models**（内置引擎 / OpenAI 兼容模型增删改与激活）、**Rules**（注入上下文的规则）、**Skills**（可复用提示词技能）、**MCP**（stdio / SSE 服务器配置），启用项自动注入 AI 上下文；Agent 最大执行轮次可配置
- [x] **日志与关于**：活动日志面板（级别筛选 / 导出 / 清空，记录会话/工具/文件/终端事件）、关于弹窗（版本与技术栈）
- [x] **Git 源代码管理**：侧栏 Git 面板展示分支 / 更改列表（M/A/D/? 状态标记）、一键 `add -A` + 提交、非仓库时引导 `git init`，状态栏同步分支名
- [x] **终端交互**：底部终端支持直接输入命令（Enter 执行、↑/↓ 历史），AI 亦可代跑命令
- [x] **三主题**：活动栏深色 / 浅色 / 粉色樱桃三个联动图标一键切换，CSS 变量 + Monaco 编辑器主题联动，偏好持久化
- [x] **布局收缩**：主侧栏（点击活动栏已激活图标或 Ctrl+B）与 AI 侧栏（面板内按钮或 Ctrl+J）均可收缩 / 恢复
- [x] **Agent 自主模式**：需求分析 → 生成计划 → 逐步执行并汇报 → 生成摘要；支持多文件任务（博客生成）
- [x] **项目上下文感知**：工作区文件树、当前打开文件、选中代码（含行号区间）、光标位置自动注入上下文，Composer 上方实时展示上下文 chips
- [x] **交互反馈**：改动行紫色高亮 + 自动滚动定位、文件树即时刷新、终端实时输出、Toast 提示、加载状态
- [x] **稳定可靠**：危险命令拦截、API 失败降级提示、单工具失败不影响其他内容与编辑器状态、操作可撤销
- [x] **OpenAI 兼容 Provider**：流式 SSE、工具块协议、多轮历史
- [x] **Windows 打包**：electron-builder 一键产出 NSIS 安装包 + 免安装便携版（`npm run dist`）

## 目录结构

```
echo-gpt/
├── electron/            # 主进程：窗口 / FS / 终端 / IPC / 截图
├── src/
│   ├── core/            # 状态 store、编辑器管理、工作区（右键菜单/空工作区）、设置、主题、diff 算法
│   ├── ui/              # 对话面板、终端、Git 面板、设置中心、日志/关于面板、@ 提及、右键菜单、输入弹窗、快速打开、Toast
│   ├── ai/              # 编排引擎（流式写编辑器）、内置引擎（流式文本/文件事件）、OpenAI Provider、代码模板
│   ├── e2e.js           # 应用内 E2E 驱动
│   └── main.js          # 渲染进程入口（快捷键/模式/设置/侧栏收缩）
├── test/                # E2E runner + 夹具项目 + E2E 隔离用户目录
├── release/             # electron-builder 打包产物（安装包/便携版）
└── screenshots/         # 自动化测试截图
```