# CodeFlow

**Repository Path**: gismaptech/code-flow

## Basic Information

- **Project Name**: CodeFlow
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-12
- **Last Updated**: 2026-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CodeFlow

> 统一的 AI 工作平台 — 整合 Work / Code / Design 三种模式

CodeFlow 是一个基于 Vue 3 + Electron 构建的 AI 工作平台，融合了 TRAE Work、OpenCode、Open Design 三款 AI 工具的核心优势，提供类似豆包（Doubao）的对话交互体验。内置 OpenCode ACP 智能体体系、真实 Git 操作、PTY 终端和 IndexedDB 会话持久化。

---

## 功能特性

### 三模式工作流

| 模式 | 描述 | 核心能力 |
|------|------|----------|
| **Work** | 文档处理与数据分析 | 报告生成、PPT 制作、数据可视化 |
| **Code** | 代码开发与调试 | 代码生成、调试、测试、重构 |
| **Design** | 设计生成与原型制作 | UI 设计、品牌系统、多格式导出 |

### 核心模块

- **豆包风格对话界面** — 3×3 建议卡片、快捷操作 chips、模型选择器、流式响应、Markdown 渲染（代码高亮 / 超链接 / 列表）
- **OpenCode ACP 智能体** — 主编排器 + 6 个子智能体（Builder / Planner / Analyzer / Tester / Reviewer / Optimizer），通过 ACP 协议通信
- **浏览器视图** — iframe 沙盒隔离预览（已移除 `allow-same-origin` 防止沙箱逃逸）
- **原型画布** — 可视化设计编辑器
- **文件编辑器** — 支持 Markdown / Word / PDF / Excel / PPTX / 代码 预览与演示模式，所有 v-html 输出经 escapeHtml 防护
- **终端系统** — 3 个终端组件（ConsoleView / TerminalPanel / TerminalView）共享 PTY 状态，通过 `terminalOwner` 避免冲突
- **Git 面板** — 真实 Git 操作（status / stage / unstage / commit / checkout / push / pull / discard），通过 Electron IPC 调用本地 git 命令
- **任务面板** — 实时任务进度跟踪，支持暂停 / 恢复 / 取消
- **文件树** — 项目文件浏览
- **设置面板** — 7 标签页配置（通用 / 智能体 / 模型 / 工具 / 技能 / 定时任务 / 设计系统），设置持久化到 localStorage

### 持久化与同步

- **IndexedDB 三源同步** — OpenCode 服务端（权威）> IndexedDB（离线缓存）> store（内存态）
- **防抖落盘** — 高频写入（SSE delta）合并为 800ms 防抖写入
- **页面关闭前立即落盘** — `beforeunload` 触发 `persistNow()`
- **设置持久化** — 模型 / 工具 / 温度 / Token 限制 / 语言 / 主题保存到 localStorage

### 布局系统

- **可调整侧边栏** — 左侧会话列表，支持拖拽调整宽度（180-420px）
- **可调整右侧面板** — 任务 / 文件 / Git 三标签页
- **64px 顶部栏** — Logo + 模式切换 + 视图控制 + 窗口控制
- **32px 状态栏** — 连接状态、模型信息、Token 计数

---

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| **Vue 3** | ^3.5.39 | 响应式 UI 框架（`<script setup>`） |
| **Vite** | ^8.1.1 | 构建工具 + 开发服务器 |
| **Electron** | ^36.2.0 | 跨平台桌面应用 |
| **node-pty** | ^1.1.0 | 终端 PTY 伪终端 |
| **xterm.js** | ^5.3.0 | 终端前端渲染 |
| **原生 CSS** | — | 自定义样式系统（无 UI 框架） |
| **JavaScript** | ES Modules | 无 TypeScript |

---

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（Electron + Vite）
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

# 打包桌面应用
npm run electron:build
```

开发服务器默认运行在 `http://localhost:5173`（`strictPort: true`）

---

## 项目结构

```
src/
├── main.js                          # 入口文件（全局错误处理 + IndexedDB 初始化）
├── App.vue                          # 根组件（布局、Resize、快捷键、主题 watcher）
├── style.css                        # 全局样式系统（设计 Token、主题变量）
├── assets/
│   └── main.css                     # 基础重置样式
├── stores/
│   └── app.js                       # 全局响应式状态 + IndexedDB 持久化 + OpenCode API
├── services/
│   ├── opencode.js                  # OpenCode ACP 客户端
│   └── terminalService.js           # 终端共享状态管理
├── workers/
│   ├── index.js                     # Worker 池管理 + 同步 Markdown 渲染
│   ├── markdown.worker.js           # Markdown 渲染 Worker
│   └── context.worker.js            # 上下文构建 Worker
├── data/
│   └── sample.js                    # 示例数据（会话、消息、任务、Git、文件预览）
└── components/
    ├── layout/
    │   ├── HeaderBar.vue            # 顶部栏（窗口控制、模式切换）
    │   ├── Sidebar.vue              # 侧边栏（会话列表、文件夹选择）
    │   ├── CenterPanel.vue          # 中心视图切换
    │   ├── RightPanel.vue           # 右侧面板（任务/文件/Git）
    │   ├── StatusBar.vue            # 状态栏
    │   ├── TerminalPanel.vue        # 底部 Dock 终端
    │   └── ToastContainer.vue       # Toast 通知
    ├── chat/
    │   ├── ChatView.vue             # 豆包风格对话界面
    │   └── ConfigBar.vue            # AI 配置栏
    ├── panels/
    │   ├── BrowserView.vue          # 浏览器预览（iframe 沙盒）
    │   ├── FileEditor.vue           # 多格式文件预览
    │   ├── ConsoleView.vue          # 中心面板终端
    │   ├── TerminalView.vue         # 备用终端视图
    │   ├── GitPanel.vue             # Git 版本控制面板（真实 IPC）
    │   ├── TaskList.vue             # 任务列表
    │   └── FileTree.vue             # 文件树
    ├── canvas/
    │   └── PrototypeCanvas.vue      # 原型设计画布
    └── modals/                      # 懒加载（defineAsyncComponent）
        ├── SettingsModal.vue        # 7 标签页设置面板
        ├── DirectoryModal.vue       # 目录选择弹窗
        ├── NewSessionModal.vue      # 新建会话弹窗
        └── ExportModal.vue          # 导出弹窗

electron/
├── main.js                          # 主进程（窗口、IPC、Git、终端 PTY、OpenCode 服务器）
└── preload.js                       # 预加载脚本（contextBridge API 暴露）

tests/
└── *.spec.js                        # Vitest 测试（9 个测试文件）
```

---

## 设计系统

### 颜色 Token

```
主色:    #4B3FE3 (TraeWork Brand)
成功:    #15A877
警告:    #E27900
错误:    #E8463A
信息:    #2F74FF
紫色:    #7864FF
```

### 布局常量

```
顶部栏高度:    64px
状态栏高度:    32px
侧边栏宽度:    260px (可调整 180-420px)
右侧面板宽度:  260px (可调整 180-420px)
字体:          "SF Pro Text" / "PingFang SC"
```

### 主题

- 支持浅色 / 深色主题切换
- 通过 CSS 变量 `data-theme="dark"` 控制
- 主题切换由 `App.vue` 的 `watch(store.theme)` 集中处理 DOM 更新
- 控制台始终使用深色配色（`--console-*` 变量），不受主题切换影响

### 设计规范

- **扁平设计**，无渐变（`linear-gradient`）
- **无 AI 重型视觉元素**，图标使用扁平 SVG 或文字缩写
- 所有文件编码 UTF-8

---

## 键盘快捷键

| 快捷键 | 功能 |
|--------|------|
| `⌘K` / `Ctrl+K` | 新建对话 |
| `Ctrl+\` | 切换右侧面板 |
| `Ctrl+B` | 切换侧边栏 |
| `` Ctrl+` `` | 切换底部终端 |
| `Ctrl+Shift+F` | 打开文件面板 |
| `Escape` | 关闭弹窗 |
| `Enter` | 发送消息 |
| `Shift+Enter` | 换行 |

---

## Electron IPC 通道

| 通道 | 类型 | 用途 |
|------|------|------|
| `window-*` | send/on | 窗口控制（最小化/最大化/关闭） |
| `dialog-*` | invoke | 系统对话框（目录/文件/保存） |
| `fs-read-directory` | invoke | 读取目录内容 |
| `git-*` | invoke | Git 操作（status/stage/unstage/commit/checkout/push/pull/discard） |
| `terminal-*` | send/on/invoke | 终端 PTY 管理 |
| `opencode-*` | invoke | OpenCode 服务器管理 + HTTP 代理 |

---

## 开发规范

- 所有组件使用 Vue 3 `<script setup>` 语法，不使用普通 `<script>`
- 状态管理使用 `reactive()`（非 Pinia/Vuex），从 `src/stores/app.js` 导入
- 样式使用 scoped CSS + 全局 CSS 变量
- 无 TypeScript，纯 JavaScript
- 无 UI 框架，全部手写样式
- AI 对话全部使用中文，包括代码注释和提交信息

---

## 版本历史

| 版本 | 日期 | 变更 |
|------|------|------|
| 0.1.0 | 2026-07-12 | 初始版本：完整布局 + 豆包风格对话 + 所有面板 |
| 0.2.0 | 2026-07-15 | OpenCode ACP 集成 + 终端 PTY + IndexedDB 持久化 + 16 项问题修复 |
| 0.3.0 | 2026-07-16 | 安全加固（XSS/sandbox）+ 功能 Bug 修复 + 架构重构 + Git 真实操作 + ARIA 可访问性 + 构建分包 |

---

## 许可证

MIT