AI 工作流

一个基于 AI 驱动的 VSCode 工作流助手插件。

功能特性

• ✨ 智能工作流管理
• 🤖 AI 驱动的工作流生成
• 🔥 Vue 3 + Vite 热更新支持
• 🎨 VSCode 主题适配
• 📡 VSCode API 双向通信
• 🚀 一键创建和运行工作流

环境要求

• Node.js: >= 16.0.0 (推荐使用 18.x 或 20.x)
• pnpm: >= 8.0.0
• VSCode: >= 1.80.0

项目结构

.
├── packages/
│   └── webview/           # Vue 前端项目
│       ├── src/
│       │   ├── App.vue       # 主组件
│       │   ├── components/   # Vue 组件
│       │   └── main.ts       # Vue 入口
│       ├── index.html
│       ├── package.json
│       └── vite.config.ts
├── src/                   # VSCode 插件主逻辑
│   └── extension.ts       # 插件入口文件
├── pnpm-workspace.yaml    # pnpm workspace 配置
├── package.json           # 主项目配置
└── tsconfig.json

安装依赖

安装所有依赖

由于这是一个 monorepo 项目，使用 pnpm workspace 统一管理依赖：

pnpm install

这个命令会自动安装根目录和所有 packages 的依赖。

开发模式

启动开发服务器

开发模式支持热更新，使用 pnpm workspace 命令管理：

推荐方式：同时启动所有服务

# 启动 Webview 开发服务器（支持热更新）
pnpm run dev:webview

# 在另一个终端启动 TypeScript 监听编译
pnpm run watch

生产构建

# 编译 TypeScript
pnpm run compile

调试插件

1. 确保 Webview 开发服务器正在运行（pnpm run dev-webview）
2. 在 VSCode 中按 F5 启动调试
3. 设置环境变量 VSCODE_DEBUG_MODE=true 以使用开发服务器
4. 在新打开的扩展开发主机窗口中，点击侧边栏的机器人图标 $(robot) 查看 Webview 面板

生产构建

构建步骤

# 完整构建（推荐）
pnpm run vscode:prepublish

这个命令会依次执行：

1. 构建 Webview 前端 (pnpm --filter @ai-workflow/webview run build)
2. 编译 TypeScript (tsc -p ./)

单独构建

# 仅构建 Webview
pnpm run build:webview

# 仅编译 TypeScript
pnpm run compile

可用命令

使用说明

打开工作流面板

1. 安装插件后，在 VSCode 活动栏会出现一个机器人图标 🤖
2. 点击图标打开「AI 工作流」侧边栏面板

创建工作流

方式一：手动创建

1. 在「工作流管理」区域输入工作流名称
2. 点击「创建工作流」按钮或按 Enter 键
3. 工作流会自动保存到列表中

方式二：AI 生成

1. 在「AI 提示词」区域输入你想要的工作流描述
2. 点击「生成工作流」按钮
3. AI 会根据你的描述自动生成工作流

运行工作流

1. 在已保存的工作流列表中找到目标工作流
2. 点击「运行」按钮执行工作流
3. 查看状态消息了解执行结果

管理工作流

• 删除工作流：点击工作流项右侧的「删除」按钮
• 查看详情：每个工作流显示创建时间

命令面板

按 Cmd+Shift+P (macOS) 或 Ctrl+Shift+P (Windows/Linux) 打开命令面板，可用命令：

• 打开 AI 工作流 - 打开工作流面板
• 创建新工作流 - 快速创建工作流
• 运行工作流 - 运行当前工作流

开发说明

热更新机制

• 开发模式：设置 VSCODE_DEBUG_MODE=true，Webview 从 http://localhost:3000 加载，支持 Vite 热更新
• 生产模式：从 webview/dist 加载预构建文件

VSCode API 通信

// 在 Vue 组件中发送消息
const vscode = (window as any).vscode;
vscode.postMessage({
  type: 'info',
  value: 'your message'
});

// 在 extension.ts 中接收消息
webviewView.webview.onDidReceiveMessage(data => {
  switch (data.type) {
    case 'info':
      vscode.window.showInformationMessage(data.value);
      break;
  }
});

故障排除

Webview 显示空白

1. 检查是否已构建 Webview：pnpm run build:webview
2. 确认 out/webview 目录存在（monorepo 构建输出位置）
3. 查看开发者控制台（Help > Toggle Developer Tools）

热更新不工作

1. 确认 Webview 开发服务器正在运行：pnpm run dev:webview
2. 检查环境变量 VSCODE_DEBUG_MODE=true 是否已设置
3. 确认端口 3001 未被占用（monorepo 默认端口）

技术栈

• 插件主体: TypeScript + VSCode Extension API
• Webview 前端: Vue 3 + PrimeVue + Vite + TypeScript
• 包管理器: pnpm (monorepo)
• 项目结构: pnpm workspace

License

MIT