Skip to content

【外滩大会2026】Workbench —— 面向本地开发与 AI 工作流的 Windows 桌面工作台 #70

Description

@yyc-labs

Workbench —— 面向本地开发与 AI 工作流的 Windows 桌面工作台

👤 团队 / 作者

  • YYC Labs
  • GitHub:yyc-labs

📖 项目简介

Workbench 是一款面向 Windows 开发者的 本地优先(Local First)AI 开发工作台

它基于 Electron、React、TypeScript 构建,将本地项目管理、代码浏览与编辑、Git 工作流、Markdown 文档、AI CLI Runtime、AI Gateway、会话记录、学习资料以及终端管理整合到统一的桌面应用中。

传统开发过程中,开发者通常需要在:

  • IDE
  • 终端
  • Git 客户端
  • Markdown 工具
  • AI 对话窗口
  • 浏览器

之间频繁切换。

Workbench 希望围绕 "项目(Project)""开发上下文(Context)" 组织统一工作空间,让代码、终端、Git、AI 与文档自然衔接,减少工具切换和上下文丢失。

目前项目已能够作为日常 AI 辅助开发工作台使用,并持续进行功能迭代。


🚀 我做了什么

我使用 Codex(GPT 系列模型) 参与完成了 Workbench 的产品设计、架构规划、代码实现与持续优化。

Codex 主要协助完成:

  • Electron Main / Preload / Renderer 分层架构
  • React 页面与 Zustand 状态管理
  • Monaco 编辑器与 Markdown 工作区
  • Git 状态、分支、提交、Diff、冲突处理
  • AI CLI Runtime 与 Runtime Profile
  • Claude Code、OpenAI Codex 等 AI CLI 接入
  • AI Gateway、Provider 管理、模型路由
  • AI Transcript 导入、浏览与日志管理
  • Windows Native / WSL 执行环境适配
  • 学习中心、浏览器辅助学习
  • 网页长截图与固定元素处理
  • 性能优化、模块重构
  • 文档编写、代码审查、Bug 修复

Codex 不仅用于生成代码,也参与需求拆解、技术方案评审、架构设计、模块重构与问题分析,成为整个开发过程中的 AI 编程协作伙伴。


✨ 核心功能

📁 本地项目工作区

支持项目管理、最近打开记录,并围绕项目快速进入代码、Git、终端和 AI 工作流。

💻 代码浏览与编辑

  • Monaco Editor
  • 文件树
  • Markdown
  • Diff 查看
  • 文件预览

🌿 Git 工作流

支持:

  • 仓库状态
  • 分支管理
  • Commit
  • 文件 Diff
  • 暂存区
  • 常用 Git 操作

🤖 AI Runtime

支持项目级 Runtime 配置,区分:

  • Windows Native
  • WSL

已适配:

  • Claude Code
  • OpenAI Codex

🔀 AI Gateway

提供:

  • Provider 管理
  • 模型路由
  • Gateway
  • Streaming Response

📝 AI Transcript

支持:

  • 会话导入
  • 浏览
  • 日志查看
  • Markdown / JSON 联动

📄 Markdown 工作区

支持:

  • GFM
  • Mermaid
  • 代码高亮
  • 表格

🖥️ 多终端

基于:

  • node-pty
  • xterm.js

实现多个终端统一管理。

📚 学习中心

支持:

  • 学习资料
  • 技能管理
  • 浏览器辅助学习
  • 长截图
  • 元素标记
  • 截图预览

🏗 技术架构

Workbench 遵循 Electron 进程隔离模型:

React Renderer
      │
      ▼
Typed Preload API
      │
      ▼
IPC Handlers
      │
      ▼
Electron Main Domains
      │
      ├── 文件与项目服务
      ├── Git 服务
      ├── Runtime
      ├── AI Gateway
      ├── Transcript
      └── Windows / WSL

共享类型、IPC 契约、主进程能力和界面逻辑彼此解耦,避免 Renderer 直接访问系统能力。

同时针对 Windows Native 与 WSL 设计了统一 Runtime 执行模型。


🛠 技术栈

  • Electron 42
  • React 18
  • TypeScript
  • Vite
  • electron-vite
  • Zustand
  • Monaco Editor
  • xterm.js
  • node-pty
  • React Markdown
  • Mermaid
  • Tailwind CSS
  • Playwright Core
  • Node.js Test Runner
  • Git

⭐ 项目特色

Workbench 并不是简单堆叠多个工具,而是围绕 项目上下文 组织整个开发流程:

Project
├── Code
├── Git
├── Terminal
├── AI Runtime
├── AI Transcript
├── Markdown
└── Learning

AI 不再只是一个聊天窗口,而成为项目工作流的一部分。

开发者可以在一个工作台中完成:

  • 编码
  • Git
  • AI
  • 文档
  • 终端
  • 学习

完整闭环。


🤝 Codex 开发实践

开发过程中,Codex 主要承担:

  1. 功能拆解
  2. 架构设计
  3. 模块重构
  4. 页面生成
  5. IPC 与类型生成
  6. Runtime 兼容分析
  7. Bug 定位
  8. 文档编写
  9. 持续优化

Codex 不仅提升编码效率,也帮助保持统一架构与工程规范。


⚠️ 开发挑战

主要挑战包括:

  • Electron IPC 权限边界
  • Windows 文件系统访问
  • WSL 与 Native 差异
  • AI Runtime 生命周期管理
  • Gateway Provider 适配
  • Streaming Response
  • Transcript 大文本性能
  • Monaco 与 Markdown 集成
  • 深浅色主题一致性

Codex 在问题定位、方案验证、代码重构与文档沉淀过程中提供了大量帮助。


📌 项目状态

目前已完成:

  • ✅ 本地项目工作区
  • ✅ Git 工作流
  • ✅ Claude Code Runtime
  • ✅ OpenAI Codex Runtime
  • ✅ AI Gateway
  • ✅ AI Transcript
  • ✅ Markdown & Mermaid
  • ✅ 多终端
  • ✅ 浏览器截图
  • ✅ Windows / WSL 支持
  • ✅ 学习中心

项目仍在持续迭代,未来将扩展更多 Runtime Provider、平台支持及自动化发布能力。


🔗 项目链接

GitHub:

https://github.com/yyc-labs/Workbench

Metadata

Metadata

Assignees

No one assigned

    Labels

    showcase提交的案例(待处理)外滩大会2026外滩大会 2026 参赛作品

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions