# wbr-vscode-extension

**Repository Path**: work_project_item/wbr-vscode-extension

## Basic Information

- **Project Name**: wbr-vscode-extension
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WBR AIOS CODE

基于 AIOS 基座的 VSCode 插件，提供 AIOS 工具 SDK 的快速集成和项目生成能力。

## 功能特性

### 1. 配置页面（Webview）
- **命令ID**: `wbrAios.openConfig`
- **功能**: 打开配置页面，使用 React 构建的可配置界面
- **使用方法**: 
  - 按 `Ctrl+Shift+P` (Mac: `Cmd+Shift+P`) 打开命令面板
  - 输入 "WBR AIOS: 打开配置页面" 并执行
- **页面布局**: 左侧导航菜单 + 右侧内容区
- **包含功能**:
  - **基础配置**: 应用名称、API 地址、功能开关等配置项的设置和保存
  - **工具配置**: 选择 AIOS 工具 SDK 并一键生成项目

### 1.1 AIOS 工具配置功能
- **功能**: 选择基于 AIOS 基座的工具 SDK，自动生成包含这些工具的项目
- **项目结构**: 
  - 后端工具 -> 生成 Python 工程到 `backend/` 目录，同时包含 Java SDK
  - 前端工具 -> 生成 React + TypeScript + Vite 工程到 `frontend/` 目录

- **AIOS 后端工具 (Python + Java SDK)**:
  | 类别 | 工具 | 说明 |
  |------|------|------|
  | 核心能力 | AIOS SDK | AIOS 基座核心 SDK，提供基础能力调用 |
  | 智能服务 | AIOS Agent | AI 智能体服务，支持对话和任务自动化 |
  | 智能服务 | AIOS Model | 模型服务，提供模型调用和推理能力 |
  | 数据服务 | AIOS Data | 数据服务，提供数据存储和查询能力 |
  | 基础服务 | AIOS Auth | 认证服务，提供用户认证和权限管理 |
  | 基础服务 | AIOS Storage | 存储服务，提供文件存储和管理能力 |
  | 基础服务 | AIOS Message | 消息服务，提供消息推送和订阅能力 |

- **AIOS 前端工具 (React + TypeScript)**:
  | 类别 | 工具 | SDK包 |
  |------|------|-------|
  | 核心能力 | AIOS SDK | axios |
  | 智能服务 | AIOS Agent | axios |
  | 基础服务 | AIOS Auth | axios |
  | 数据服务 | AIOS Data | axios |
  | 基础服务 | AIOS Storage | axios |
  | UI组件 | AIOS UI | antd, @ant-design/icons |

- **生成位置选项**:
  - **当前工作区**: 直接生成到当前VSCode打开的目录
  - **选择目录**: 手动选择项目生成的目标目录

- **使用方法**:
  1. 打开配置页面，点击左侧"工具配置"菜单
  2. 输入项目名称
  3. 选择生成位置（当前工作区/选择目录）
  4. 勾选需要的 AIOS 后端和前端工具
  5. 点击"生成项目"按钮
  6. 生成完成后：
     - 当前工作区: 自动刷新资源管理器
     - 选择目录: 可选择在新窗口打开或在资源管理器中查看

### 1.2 生成的项目结构

```
my-aios-app/
  |- backend/                    # Python 后端
  |   |- sdk/                   # Python SDK 模块
  |   |   |- java/             # Java SDK
  |   |   |   |- pom.xml       # Maven 配置
  |   |   |   |- AIOSClient.java
  |   |   |   |- AIOSAgent.java
  |   |   |   |- ...
  |   |   |   |- README.md     # Java 使用说明
  |   |   |- aios_sdk.py
  |   |   |- aios_agent.py
  |   |   |- ...
  |   |- main.py               # 入口文件
  |   |- requirements.txt      # Python 依赖
  |   |- .env.example          # 环境变量模板
  |- frontend/                  # React + TypeScript 前端
  |   |- src/
  |   |   |- sdk/              # 前端 SDK
  |   |- package.json
  |- docs/                      # 文档
      |- backend/              # 后端工具文档 (Python + Java)
```

### 2. Hello World 命令
- **命令ID**: `wbrAios.helloWorld`
- **功能**: 显示 "Hello World" 信息提示
- **使用方法**: 
  - 按 `Ctrl+Shift+P` (Mac: `Cmd+Shift+P`) 打开命令面板
  - 输入 "WBR AIOS: Hello World" 并执行

### 3. 显示当前时间命令
- **命令ID**: `wbrAios.showTime`
- **功能**: 显示当前日期和时间（中文格式）
- **使用方法**: 
  - 快捷键: `Ctrl+Alt+T` (Mac: `Cmd+Alt+T`)
  - 命令面板: 输入 "WBR AIOS: 显示当前时间"
  - 点击状态栏左侧的时钟图标

### 4. 获取选中文本命令
- **命令ID**: `wbrAios.getSelectedText`
- **功能**: 获取并显示当前编辑器选中文本的信息
- **使用方法**: 
  - 在编辑器中选中文本后，右键菜单选择 "WBR AIOS: 获取选中文本"
  - 命令面板输入命令名称
- **参数说明**: 
  - 必须在编辑器中有选中的文本
- **返回值**: 
  - 显示选中文本的字符数和内容预览（前100字符）

### 5. 状态栏集成
- **位置**: VSCode 状态栏左侧
- **显示**: `$(clock) WBR AIOS`
- **功能**: 点击可快速显示当前时间
- **提示**: 鼠标悬停显示工具提示

### 6. 代码补全功能
- **触发字符**: `:`
- **支持语言**: 所有文件类型
- **补全项**:
  - `wbr:hello` - 插入 "Hello World from WBR AIOS CODE!"
  - `wbr:time` - 插入当前日期和时间（中文格式）
  - `wbr:date` - 插入当前日期（中文格式）
- **使用方法**: 在编辑器中输入 `wbr:` 后会自动提示补全选项

### 7. 快捷键绑定
- `Ctrl+Alt+T` (Mac: `Cmd+Alt+T`) - 快速显示当前时间

## 开发环境设置

### 前置要求
- Node.js 16.x 或更高版本
- npm 或 yarn 包管理器
- VSCode 1.74.0 或更高版本

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd vscode-Demo01
   ```

2. **安装依赖**
   ```bash
   # 安装后端依赖
   npm install
   
   # 安装前端依赖
   cd webview-ui
   npm install
   cd ..
   ```

3. **构建前端**
   ```bash
   npm run build:webview
   ```
   或在前端目录单独构建：
   ```bash
   cd webview-ui
   npm run build
   ```

4. **编译后端项目**
   ```bash
   npm run compile
   ```
   或使用监听模式（开发时推荐）:
   ```bash
   npm run watch
   ```
   
   同时监听前后端（开发时推荐）:
   ```bash
   npm run watch:all
   ```

## 调试方法

### 准备工作

1. **确保代码已编译**
   ```bash
   npm run compile
   ```
   或者运行监听模式（推荐，代码修改后自动重新编译）:
   ```bash
   npm run watch
   ```

2. **检查项目结构**
   - 确保 `out/extension.js` 文件已生成
   - 确保没有编译错误

### 启动调试

#### 方法一：使用快捷键（推荐）

1. **打开调试视图**
   - 点击左侧活动栏的"运行和调试"图标（或按 `Ctrl+Shift+D`）
   - 或者在顶部菜单选择：`运行` > `启动调试`

2. **选择调试配置**
   - 在顶部下拉菜单选择 `运行扩展`（这是我们在 `.vscode/launch.json` 中配置的）

3. **启动调试**
   - 按 `F5` 键，或点击绿色的播放按钮
   - VSCode 会自动编译代码（如果运行了 `watch` 模式则跳过）
   - 会打开一个新的 VSCode 窗口，标题栏显示 `[扩展开发主机]`

#### 方法二：使用命令面板

1. 按 `Ctrl+Shift+P` 打开命令面板
2. 输入 `Debug: Start Debugging` 或 `调试: 启动调试`
3. 选择 `运行扩展` 配置

## 打包发布

### 安装打包工具
```bash
npm install -g @vscode/vsce
```

### 打包插件
```bash
vsce package
```

打包成功后会在项目根目录生成 `.vsix` 文件。

### 安装插件
```bash
code --install-extension wbr-aios-code-0.0.1.vsix
```

或者在 VSCode 中：
- 按 `Ctrl+Shift+P` 打开命令面板
- 输入 "Extensions: Install from VSIX..."
- 选择打包好的 `.vsix` 文件

## 项目结构

```
.
├── src/
│   ├── extension.ts              # 插件后端主入口文件
│   └── generators/
│       ├── backendTools.ts       # AIOS 后端工具注册表
│       ├── frontendTools.ts      # AIOS 前端工具注册表
│       ├── backendGenerator.ts   # 后端项目生成器
│       ├── frontendGenerator.ts  # 前端项目生成器
│       ├── progressManager.ts    # 进度管理器
│       ├── types.ts              # 类型定义
│       └── index.ts              # 导出入口
├── webview-ui/                   # React + TypeScript 前端工程
│   ├── src/
│   │   ├── components/
│   │   │   ├── ConfigPanel.tsx   # 基础配置面板组件
│   │   │   ├── Sidebar.tsx       # 左侧导航菜单组件
│   │   │   └── ToolsConfig.tsx   # AIOS 工具配置组件
│   │   ├── App.tsx               # 应用主组件
│   │   └── main.tsx              # 入口文件
│   ├── vite.config.ts            # Vite 构建配置
│   └── package.json              # 前端依赖配置
├── media/                        # Webview 构建产物目录（自动生成）
├── out/                          # 后端编译输出目录（自动生成）
├── package.json                  # 插件配置文件
├── tsconfig.json                 # TypeScript 编译配置
└── README.md                     # 项目说明文档
```

## 主要文件说明

### src/generators/backendTools.ts
定义 AIOS 后端工具注册表，包含：
- AIOS SDK - 核心能力调用
- AIOS Agent - 智能体服务
- AIOS Model - 模型服务
- AIOS Data - 数据服务
- AIOS Auth - 认证服务
- AIOS Storage - 存储服务
- AIOS Message - 消息服务

每个工具包含 Python SDK 代码模板。

### src/generators/backendGenerator.ts
后端项目生成器，负责：
- 生成 Python SDK 模块
- 生成 Java SDK 类文件和 Maven 配置
- 生成项目文档（Python + Java 双语言示例）

### webview-ui/src/components/ToolsConfig.tsx
工具配置界面组件，展示：
- AIOS 后端工具列表
- AIOS 前端工具列表
- 项目名称和生成位置配置

## 命令列表

| 命令ID | 标题 | 说明 |
|--------|------|------|
| `wbrAios.openConfig` | WBR AIOS: 打开配置页面 | 打开配置页面 |
| `wbrAios.helloWorld` | WBR AIOS: Hello World | 显示问候信息 |
| `wbrAios.showTime` | WBR AIOS: 显示当前时间 | 显示当前日期时间 |
| `wbrAios.getSelectedText` | WBR AIOS: 获取选中文本 | 获取并显示选中文本信息 |

## 技术栈

- **语言**: TypeScript
- **API**: VSCode Extension API
- **前端**: React + TypeScript + Vite
- **构建工具**: TypeScript Compiler (tsc), Vite
- **打包工具**: vsce

## 版本历史

### 0.0.1 (初始版本)
- 实现 AIOS 工具 SDK 集成
- 支持 Python 和 Java 双语言 SDK 生成
- 实现 Hello World 命令
- 实现显示时间功能
- 实现获取选中文本功能
- 添加状态栏集成
- 添加代码补全支持
- 添加快捷键绑定

## 许可证

MIT License