DaliDev VSCode Extension

DaliDev VSCode 扩展提供了智能模板管理和 AI 编辑功能，支持从 Web 端发送模板请求到 VSCode，自动下载模板文件并生成优化的 prompt 供 Cursor AI 使用。

主要功能

1. 智能模板下载

自动从 Web 端接收模板下载请求
将模板文件下载到本地工作区 .dalidev-templates/ 目录
支持文件缓存，避免重复下载
自动清理过期模板（7天）

2. 动态 Prompt 处理

接收包含占位符的动态 prompt
自动替换占位符为实际内容：
- {{TEMPLATE_LOCAL_PATH}} → 模板本地路径
- {{TEMPLATE_FILE_STRUCTURE}} → 模板文件结构树
- {{USER_PROMPT}} → 用户需求描述
生成包含文件引用的结构化 prompt

3. Cursor AI 集成

自动调用 Cursor AI 进行代码编辑
支持多 Cursor 实例（不同端口）
提供清晰的状态反馈

安装和配置

1. 安装扩展

将生成的 .vsix 文件安装到 VSCode：

code --install-extension dalidev-vscode-extension-0.0.1.vsix

2. 配置设置

在 VSCode 设置中配置以下选项：

dalidev.webUrl: DaliDev Web 应用的基础 URL（默认: http://localhost:5137）
dalidev-vscode-server.port: 服务器端口（默认: 5011）

使用方法

1. 启动服务器

扩展激活时会自动启动服务器，也可以手动控制：

启动服务器：Ctrl+Shift+P → Start dalidev Server
停止服务器：Ctrl+Shift+P → Stop dalidev Server
清理模板缓存：Ctrl+Shift+P → Clear Template Cache

2. 从 Web 端发送请求

在 DaliDev Web 应用中：

选择模板
填写配置信息
点击"发送到 Cursor"
选择对应的 VSCode 实例

3. 处理流程

接收请求: VSCode 扩展接收来自 Web 端的简化请求
下载模板: 根据模板 URL 下载模板文件到本地
处理占位符: 替换 prompt 中的占位符为实际内容
生成文件引用: 添加模板文件路径引用
调用 Cursor AI: 将最终 prompt 发送给 Cursor AI

API 接口

POST /ai-edit

接收简化的 AI 编辑请求

请求体:

{
  prompt: string // 包含占位符的动态 prompt
  templateInfo?: {
    templateId: string
    templateName: string
    templateUrl: string // 模板下载地址
    formData?: Record<string, any> // 用户配置信息
  }
}

响应:

{
  success: boolean
  message: string
  templateProcessed?: boolean
}

GET /project-name

获取当前项目信息

响应:

{
  success: boolean
  projectName: string
  port: number
}

文件结构

.dalidev-templates/
├── template-id-1/
│   ├── index.vue
│   ├── components/
│   │   └── Button.vue
│   └── types.ts
└── template-id-2/
    ├── src/
    │   └── main.ts
    └── package.json

示例 Prompt

生成的最终 prompt 示例：

# 使用模板：基础表单模板

## 模板信息
- 模板名称：基础表单模板
- 模板下载地址：/templates/form/basic-form/basic-form.zip
- 本地路径：.dalidev-templates/basic-form

## 用户需求
创建一个用户注册表单，包含姓名、邮箱、密码字段

## 配置信息
```json
{
  "formTitle": "用户注册",
  "submitButtonText": "注册",
  "theme": "primary"
}

模板文件结构

basic-form/
├── index.vue
├── components/
│   ├── FormInput.vue
│   └── FormButton.vue
└── types.ts

模板文件引用

以下是模板中的主要文件，你可以直接引用这些文件路径：

index.vue
components/FormInput.vue
components/FormButton.vue
types.ts

注意：这些文件已经在你的工作区中，你可以直接编辑和修改它们。


## 性能优化

### 1. 缓存机制
- 模板文件本地缓存，避免重复下载
- 智能缓存失效（1天）
- 自动清理过期文件（7天）

### 2. 传输优化
- 只传输文件地址和配置信息
- 不传输实际文件内容
- 90%+ 传输量减少

### 3. 处理优化
- 异步文件下载
- 并行文件写入
- 增量文件结构生成

## 故障排除

### 1. 服务器启动失败
- 检查端口是否被占用
- 尝试使用不同的端口
- 查看 VSCode 输出面板的日志

### 2. 模板下载失败
- 检查网络连接
- 验证 Web 应用 URL 配置
- 查看扩展日志

### 3. Cursor AI 调用失败
- 确保 Cursor 已安装并运行
- 检查 Cursor AI 功能是否可用
- 重启 VSCode 和 Cursor

## 开发

### 构建
```bash
yarn build

开发模式

yarn dev

打包

yarn package

许可证

MIT License

DaliDev VS Code Extension

ycteng