OpenClaw Workspace: 我的 AI 驱动开发工作台分享

0 阅读4分钟

当 AI 编程助手从"对话框"走向"工作台",开发者的生产力将迎来质的飞跃。

image.png

我最初考虑设计它的原因是我订阅了不少token套餐,但是根据我的使用时间段,很多时候尤其是晚上套餐token被大量闲置,本着国人勤俭节约的精神,正好配合openclaw的24小时值守的能力,我想着是时候搞一个我的开发工作台来让他继续干活了。

它在解决什么问题

  • 多端访问,我并不能一直守在电脑前,我需要我离开电脑后通过手机也能够继续执行任务。
  • 多项目上下文隔离,有时我可能并不是单独执行一个项目的开发,这样也会有大量等待时间,我需要支持多项目并行。
  • 自动化部署与访问,我必须要看到结果,当然有时我也需要它直接使我的项目上线。
  • Agent定制化,可能我不同的项目需要使用不同的agent进行开发。
  • ...

OpenClaw Workspace 核心目标:将分散开发流整合到统一 Web 界面,让 AI 深度嵌入开发每一环。

设计思路:以对话为中心,以项目为上下文

核心设计哲学:对话即开发。区别于传统无状态 AI 编程工具,我们引入「项目级会话隔离」,保障上下文清晰:

  • 每个 GitHub 项目对应独立对话历史,自动携带项目标识
  • 不同项目可配置专属 AI Agent,精准匹配开发需求

核心能力

1. AI 对话开发(核心功能)

chat.gif

基于 OpenClaw Gateway 兼容 API,实现流畅对话开发体验:

  • SSE 实时流式输出,AI 回复逐字呈现,无需等待
  • 多 Agent 动态调度,从 Gateway 接口获取,下拉选择即可
  • 支持 /clear、/compact、/commit 等快捷斜杠命令
  • 双重持久化:浏览器本地缓存(即时恢复)+ 服务端存储(跨设备同步)

2. GitHub 项目管理

tree.gif

浏览器内完成从克隆到编辑全流程,无需切换工具:

  • GitHub 仓库列表拉取(10 分钟缓存,减少 API 调用)
  • 一键 git clone 至服务端工作目录
  • 文件树浏览 + Monaco Editor 在线编辑(VS Code 同款内核)
  • 编辑内容直接保存至服务端文件系统

3. Vercel 一键部署

deploy.gif

关联 GitHub 项目后,部署操作简单高效:

  • 支持生产、预览两种部署模式
  • 5 秒轮询实时展示部署进度,可视化清晰
  • Webhook 接收部署状态变更,部署历史、构建日志、耗时全记录

4. 多 Agent 文档管理

docs.gif

便捷管理 AI Agent 的 Skills(技能)与 Memory(记忆)文件:

  • Agent 动态加载,切换后自动刷新文件树
  • Element Plus Tree 组件展示配置文件层级,支持展开/折叠
  • Monaco Editor 编辑,支持 Markdown 高亮,保存自动同步
  • 自动扫描 Node.js 全局目录,发现已安装 OpenClaw Skills

5. 统一配置中心

setting.gif

Web UI 可视化管理所有设置,无需手动编辑 .env 文件:

  • 分类管理:OpenClaw / Vercel / GitHub / 系统设置
  • 敏感信息加密存储(AES-256-GCM 加密 + PBKDF2 密钥派生)
  • 1 分钟内存缓存,平衡安全与读取性能
  • 环境变量兜底,零配置可启动;支持设置导入/导出,方便迁移备份

6. 多端适配与移动端体验

phone.gif

OpenClaw Workspace 从设计之初就考虑了多设备场景,实现了桌面端与移动端的双布局体系:

桌面端(768px 以上)采用三级导航结构:左侧图标栏 + 可折叠二级侧边栏 + 主工作区,最大化信息密度与操作效率。

移动端(768px 以下)则采用完全不同的交互范式:

  • 底部 Tab 导航:固定在屏幕底部,高度 56px + iOS 安全区域适配,包含开发、菜单、文档、设置四个入口
  • 抽屉式侧边栏:点击"菜单"Tab 从左侧滑出,宽度 320px(最大 90vw),复用桌面端相同的侧边栏组件,路由切换时自动收起
  • 触摸反馈优化:所有可点击元素使用 active:scale-95 触摸缩放反馈;通过 CSS @media (hover: none) and (pointer: coarse) 媒体查询,在纯触屏设备上自动移除 :hover 效果,避免"粘滞悬停"问题

总结

以上就基本完成了跨设备的分配agent以隔离上下文的方式远程开发、部署以及agent管理的简单闭环。

主要在于思路分享,这个项目本身也是claudecode迭代的,事实上该项目也能够通过它自身的平台对话,操控openclaw来进行自进化。只需要指挥openclaw对该项目进行编码,然后按照我的要求进行重新部署即可,当前也是这样操作的。

关于开发相关的内容应该还有不少内容可以拓展,重点在于想象力的发挥了。

下一步我可能考虑在这个平台接入obsidian管理,实现个人知识库的积累,以更适合我的一种方式进行,如一些好的文章、知识记忆,甚至我家里的某个柜子里放了什么等等。