mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-21 01:07:46 +00:00
- 将 WebView 调整到编辑器右侧 - 添加 ChatHeader 组件,实现会话下拉菜单 - 替换模态框为紧凑型下拉菜单 - 更新会话切换逻辑,显示当前标题 - 清理旧的会话选择器样式 基于 Claude Code v2.0.43 UI 分析实现。
5.9 KiB
5.9 KiB
Qwen Code VSCode Extension Migration Summary
迁移完成 ✅
已成功将 /Users/jinjing/projects/projj/github.com/yiliang114/aionui-vscode 中的功能迁移到 packages/vscode-ide-companion。
迁移的文件列表
1. ACP 协议相关
- ✅
src/shared/acpTypes.ts- ACP JSON-RPC 协议类型定义 - ✅
src/acp/AcpConnection.ts- ACP 连接管理器,处理与 Qwen CLI 的通信
2. 核心服务
- ✅
src/agents/QwenAgentManager.ts- Qwen Agent 管理器,管理 AI 会话 - ✅
src/services/QwenSessionReader.ts- 会话读取服务,读取本地 Qwen 会话文件 - ✅
src/storage/ConversationStore.ts- 对话存储,使用 VSCode GlobalState
3. WebView UI
- ✅
src/WebViewProvider.ts- WebView 提供器,管理聊天界面 - ✅
src/webview/App.tsx- React 主应用组件 - ✅
src/webview/App.css- UI 样式 - ✅
src/webview/index.tsx- WebView 入口文件 - ✅
src/webview/hooks/useVSCode.ts- VSCode API Hook
4. 配置更新
- ✅
package.json- 添加了 React 依赖和新的命令/配置 - ✅
esbuild.js- 更新为双入口构建(extension + webview) - ✅
src/extension.ts- 集成 WebViewProvider
新增功能
命令
qwenCode.openChat- 打开 Qwen Code 聊天界面- 快捷键:
Ctrl+Shift+A(Mac:Cmd+Shift+A) - 也可以从编辑器标题栏按钮打开
- 快捷键:
配置项
在 VSCode 设置中添加了以下配置项(前缀: qwenCode.qwen.*):
enabled- 启用/禁用 Qwen agent 集成cliPath- Qwen CLI 可执行文件路径(默认: "qwen")openaiApiKey- OpenAI API Key(可选)openaiBaseUrl- OpenAI Base URL(可选)model- 使用的模型(可选)proxy- 代理配置(格式: schema://user:password@host:port)
功能特性
聊天界面
- 💬 实时流式响应
- 📋 会话管理(查看和切换历史会话)
- 🔄 创建新会话
- 🛡️ 工具权限请求处理
- 💾 自动保存对话历史
ACP 协议集成
- 支持完整的 ACP JSON-RPC 协议
- 会话管理 (session/new, session/switch, session/list)
- 流式消息处理 (agent_message_chunk)
- 工具调用更新 (tool_call)
- 权限请求处理 (session/request_permission)
本地会话读取
- 从
~/.qwen/tmp/读取本地会话文件 - 支持跨项目会话浏览
- 会话标题自动生成(基于首条用户消息)
下一步操作
1. 安装依赖
由于权限问题,请手动运行:
cd /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code
npm install
如果遇到权限问题,可以尝试:
# 方案 1: 使用 sudo
sudo npm install
# 方案 2: 修复 node_modules 权限
sudo chown -R $(whoami) node_modules
# 方案 3: 清理后重新安装
rm -rf node_modules package-lock.json
npm install
2. 构建项目
cd packages/vscode-ide-companion
npm run build
3. 测试扩展
- 在 VSCode 中打开项目根目录
- 按 F5 启动调试
- 在新窗口中按
Cmd+Shift+A打开聊天界面 - 测试各项功能
4. 打包扩展(可选)
cd packages/vscode-ide-companion
npm run package
技术栈
- Frontend: React 18 + TypeScript
- Build: esbuild (双入口:extension + webview)
- Protocol: ACP (Agent Communication Protocol) - JSON-RPC 2.0
- State: VSCode GlobalState API
- Styling: CSS with VSCode theme variables
注意事项
- 配置命名: 所有配置项使用
qwenCode前缀(与原来的aionui不同) - CLI 路径: 默认使用
qwen命令,需要确保 Qwen CLI 已安装 - 会话持久化: 对话历史存储在 VSCode GlobalState 中
- 本地会话: 可以读取 Qwen CLI 创建的本地会话文件
- 代理支持: 支持配置 HTTP/HTTPS 代理
文件结构
packages/vscode-ide-companion/
├── src/
│ ├── acp/
│ │ └── AcpConnection.ts # ACP 协议连接
│ ├── agents/
│ │ └── QwenAgentManager.ts # Agent 管理
│ ├── services/
│ │ └── QwenSessionReader.ts # 会话读取
│ ├── storage/
│ │ └── ConversationStore.ts # 对话存储
│ ├── shared/
│ │ └── acpTypes.ts # ACP 类型定义
│ ├── webview/
│ │ ├── hooks/
│ │ │ └── useVSCode.ts # VSCode API Hook
│ │ ├── App.tsx # React 主组件
│ │ ├── App.css # 样式
│ │ └── index.tsx # 入口
│ ├── WebViewProvider.ts # WebView 管理器
│ └── extension.ts # 扩展主入口
├── dist/
│ ├── extension.cjs # 编译后的扩展
│ └── webview.js # 编译后的 WebView
└── package.json # 扩展配置
已完成的任务
- 迁移 ACP 连接相关代码 (AcpConnection.ts, acpTypes.ts)
- 迁移 Agent 管理器 (QwenAgentManager.ts)
- 迁移会话读取服务 (QwenSessionReader.ts)
- 迁移对话存储 (ConversationStore.ts)
- 迁移 WebView Provider (WebViewProvider.ts)
- 迁移 React WebView UI (App.tsx, useVSCode.ts, App.css, index.tsx)
- 更新 package.json 添加依赖和配置
- 更新 extension.ts 集成新功能
- 更新构建配置支持 React 和多入口
- 无 Linting 错误
测试建议
-
基础连接测试
- 启动扩展
- 打开聊天界面
- 验证 Qwen CLI 连接成功
-
消息发送测试
- 发送简单消息
- 验证流式响应
- 检查消息历史保存
-
会话管理测试
- 创建新会话
- 查看会话列表
- 切换到历史会话
-
权限测试
- 触发工具调用
- 验证权限请求提示
- 测试允许/拒绝功能
-
配置测试
- 测试代理配置
- 测试 OpenAI API 配置
- 测试自定义 CLI 路径
迁移完成!🎉