🍗 AI Grid Generator & CR

AI Grid 代码审查与生成插件 - 一款基于 Dify AI 的 VSCode 插件，支持 Vue 和 TypeScript 文件的智能代码审查与前端代码生成。

✨ 功能特性

🧠 代码审查（Code Review）

• 调用 Dify AI 工作流对代码进行深度分析
• 根据审查结果给出 0-100 的代码评分
• 将问题分为 error、warning、suggestion 三个等级
• 在编辑器中直观显示问题代码位置
• 点击问题即可跳转到对应代码行
• 一键复制选中问题的优化提示词

🛠️ 代码生成（Code Generator）

• 可视化配置表单字段和表格列
• 支持拖拽排序配置项
• 自定义需求描述
• 一键生成 Vue3 + TypeScript + vxe-grid 代码
• 生成结果语法高亮显示
• 快速复制生成的代码

📦 安装配置

1️⃣ 安装插件

在 VSCode 中搜索 AI Grid Generator&CR 并安装。

2️⃣ 配置 API Key

插件需要配置 API Key 才能正常工作：

1. 打开 VSCode 设置 (Ctrl + ,)
2. 进入 Extensions → AI Grid CR
3. 填写 Cr Api Key（用于代码审查）
4. 填写 Generate Api Key（用于代码生成）

💡 API URL 已预填默认地址，如有需要可自行修改。

🎯 使用方法

代码审查

通过以下方式触发代码审查：

• 🖱️ 右键菜单 - 在文件资源管理器或编辑器中右键选择 AI Code Review
• ⌨️ 命令面板 - 按 Ctrl + Shift + P 输入 AI Code Review

📁 支持的右键菜单文件类型：.vue、.ts

查看审查结果

审查结果以 Webview 面板展示，包含：

• 📊 代码评分 - 右上角显示综合评分（🟢 绿色 80+，🟠 橙色 60-79，🔴 红色 <60）
• 📋 问题列表 - 按 error → warning → suggestion 排序显示所有问题
• 🔍 问题详情 - 每个问题包含类型、模块、代码行号、问题描述、修改建议
• 💬 代码摘要 - AI 对代码的整体评价和改进建议

交互操作

• ✅ 勾选问题 - 可选择需要复制优化提示的问题
• 👆 点击问题 - 自动跳转到代码对应行
• 📋 复制优化提示 - 点击按钮复制选中问题的优化提示词

代码生成

通过以下方式打开代码生成器：

• ⌨️ 命令面板 - 按 Ctrl + Shift + P 输入 AI Grid Generator

配置说明

表单配置（formConfig）

表格列配置（columns）

生成结果

• 📋 代码预览 - 语法高亮显示生成的代码
• 📋 复制代码 - 一键复制完整代码

⚙️ 配置项

🔧 工作原理

代码审查

1️⃣ 插件获取当前打开文件的代码内容
2️⃣ 将代码发送给 Dify AI 工作流进行分析
3️⃣ 解析返回的 JSON 结果（包含 score、issues、summary）
4️⃣ 在 Webview 中展示审查结果
5️⃣ 在编辑器中高亮显示问题代码

代码生成

1️⃣ 用户可视化配置表单字段和表格列
2️⃣ 将配置数据发送给 Dify AI 工作流
3️⃣ AI 根据配置生成完整的 Vue3 代码
4️⃣ 在 Webview 中展示生成的代码（语法高亮）
5️⃣ 用户可一键复制代码到剪贴板

🛠️ 技术栈

• ⚙️ VSCode Extension API
• 🌐 Webview (HTML/CSS/JS)
• 📡 node-fetch

📁 项目结构

├── extension.js           # 插件主入口
├── crService.js          # 代码审查 API 服务
├── generatorTemplate.js  # 代码生成器模板
├── package.json          # 插件配置
└── README.md             # 使用文档