mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-21 09:17:53 +00:00
732220e651
- 将 WebView 调整到编辑器右侧 - 添加 ChatHeader 组件，实现会话下拉菜单 - 替换模态框为紧凑型下拉菜单 - 更新会话切换逻辑，显示当前标题 - 清理旧的会话选择器样式 基于 Claude Code v2.0.43 UI 分析实现。
211 lines
5.9 KiB
Markdown
211 lines
5.9 KiB
Markdown
# 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. 安装依赖
|
||
|
||
由于权限问题，请手动运行：
|
||
|
||
```bash
|
||
cd /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code
|
||
npm install
|
||
```
|
||
|
||
如果遇到权限问题，可以尝试：
|
||
|
||
```bash
|
||
# 方案 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. 构建项目
|
||
|
||
```bash
|
||
cd packages/vscode-ide-companion
|
||
npm run build
|
||
```
|
||
|
||
### 3. 测试扩展
|
||
|
||
1. 在 VSCode 中打开项目根目录
|
||
2. 按 F5 启动调试
|
||
3. 在新窗口中按 `Cmd+Shift+A` 打开聊天界面
|
||
4. 测试各项功能
|
||
|
||
### 4. 打包扩展（可选）
|
||
|
||
```bash
|
||
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
|
||
|
||
## 注意事项
|
||
|
||
1. **配置命名**: 所有配置项使用 `qwenCode` 前缀（与原来的 `aionui` 不同）
|
||
2. **CLI 路径**: 默认使用 `qwen` 命令，需要确保 Qwen CLI 已安装
|
||
3. **会话持久化**: 对话历史存储在 VSCode GlobalState 中
|
||
4. **本地会话**: 可以读取 Qwen CLI 创建的本地会话文件
|
||
5. **代理支持**: 支持配置 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 # 扩展配置
|
||
```
|
||
|
||
## 已完成的任务
|
||
|
||
- [x] 迁移 ACP 连接相关代码 (AcpConnection.ts, acpTypes.ts)
|
||
- [x] 迁移 Agent 管理器 (QwenAgentManager.ts)
|
||
- [x] 迁移会话读取服务 (QwenSessionReader.ts)
|
||
- [x] 迁移对话存储 (ConversationStore.ts)
|
||
- [x] 迁移 WebView Provider (WebViewProvider.ts)
|
||
- [x] 迁移 React WebView UI (App.tsx, useVSCode.ts, App.css, index.tsx)
|
||
- [x] 更新 package.json 添加依赖和配置
|
||
- [x] 更新 extension.ts 集成新功能
|
||
- [x] 更新构建配置支持 React 和多入口
|
||
- [x] 无 Linting 错误
|
||
|
||
## 测试建议
|
||
|
||
1. **基础连接测试**
|
||
- 启动扩展
|
||
- 打开聊天界面
|
||
- 验证 Qwen CLI 连接成功
|
||
|
||
2. **消息发送测试**
|
||
- 发送简单消息
|
||
- 验证流式响应
|
||
- 检查消息历史保存
|
||
|
||
3. **会话管理测试**
|
||
- 创建新会话
|
||
- 查看会话列表
|
||
- 切换到历史会话
|
||
|
||
4. **权限测试**
|
||
- 触发工具调用
|
||
- 验证权限请求提示
|
||
- 测试允许/拒绝功能
|
||
|
||
5. **配置测试**
|
||
- 测试代理配置
|
||
- 测试 OpenAI API 配置
|
||
- 测试自定义 CLI 路径
|
||
|
||
---
|
||
|
||
迁移完成！🎉
|