Wita Generate - AI Code Assistant

一个功能强大的 VSCode 插件，提供 AI 对话、代码生成和差异预览功能。

🌟 主要功能

1. AI 对话助手

🤖 智能 AI 对话界面
💬 支持自然语言交流
🎯 针对编程问题的专业回答
📝 支持选中代码进行上下文对话

2. 代码生成

⚡ 快速生成各种编程语言代码
🔧 支持 JavaScript、Vue、React、Python 等
📋 一键复制生成的代码
✅ 直接应用到当前编辑器

3. 差异预览

👁️ 实时预览代码更改
📊 详细的差异统计信息
🔄 支持撤销和重做操作
📈 可视化的代码变更展示

4. 设置配置

⚙️ 丰富的配置选项
🎨 主题和界面自定义
🔑 API 密钥管理
💾 配置导入导出

🚀 快速开始

安装

在 VSCode 扩展市场搜索 "Wita Generate"
点击安装
重启 VSCode

使用方法

打开 AI 对话

使用命令面板：Ctrl+Shift+P → 搜索 "打开 AI 对话"
点击状态栏的 "Wita AI" 按钮
右键菜单选择 "生成代码"

生成代码

在编辑器中选中要修改的代码（可选）
打开 AI 对话面板
描述你的需求
查看生成的代码
选择"预览差异"或"应用代码"

配置设置

使用命令面板：Ctrl+Shift+P → 搜索 "打开设置"
配置 API 密钥、模型选择等选项

📋 支持的编程语言

JavaScript/TypeScript - 函数、类、组件等
Vue.js - 组件、Composables、指令等
React - 组件、Hooks、工具函数等
Python - 函数、类、装饰器等
CSS/SCSS - 样式、动画、响应式设计等
HTML - 模板、组件结构等

🎯 使用示例

生成 JavaScript 函数

用户输入：创建一个防抖函数
AI 响应：生成完整的 debounce 函数实现

生成 Vue 组件

用户输入：创建一个用户卡片组件
AI 响应：生成包含模板、脚本和样式的完整 Vue 组件

生成 React Hook

用户输入：创建一个数据获取的 Hook
AI 响应：生成自定义 Hook 包含加载状态和错误处理

⚙️ 配置选项

API 配置

API 密钥：用于访问 AI 服务
AI 模型：选择使用的 AI 模型
API 端点：自定义 API 地址

编辑器配置

自动保存：自动应用生成的代码
差异预览：显示代码变更预览
自动格式化：自动格式化生成的代码

界面配置

主题模式：浅色/深色/跟随系统
字体大小：调整代码显示字体
界面语言：多语言支持

高级配置

最大令牌数：限制 AI 响应长度
创造性温度：控制 AI 创造性程度
调试日志：开启详细日志记录

🔧 开发和构建

环境要求

Node.js 16+
Yarn 包管理器
VSCode 1.74.0+

本地开发

# 克隆项目
git clone <repository-url>
cd wita-generate

# 安装依赖
yarn install

# 构建 webview
yarn build:webview

# 在 VSCode 中按 F5 启动调试

构建发布

# 构建生产版本
yarn build:webview

# 打包插件
vsce package

📁 项目结构

wita-generate/
├── src/
│   ├── extension.js          # 插件主入口
│   ├── providers/            # 功能提供者
│   │   ├── chatProvider.js   # AI 对话功能
│   │   ├── settingsProvider.js # 设置页面
│   │   └── diffProvider.js   # 差异预览
│   ├── webview/              # Vue 前端界面
│   │   ├── chat/             # 对话界面
│   │   └── settings/         # 设置界面
│   └── utils/                # 工具函数
│       └── mockData.js       # 模拟数据
├── webpack.config.js         # Webpack 配置
├── package.json             # 项目配置
└── README.md               # 说明文档

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

提交 Issue

详细描述问题或建议
提供复现步骤
包含环境信息

提交 PR

Fork 项目并创建分支
确保代码风格一致
添加必要的测试
更新相关文档

📄 许可证

MIT License

🙏 致谢

感谢所有贡献者和用户的支持！

享受编码，让 AI 成为你的得力助手！ 🚀

如何使用项目完成情况 ✅ 已实现的核心功能 AI 对话功能

基于 Vue2 的现代化聊天界面支持选中代码进行上下文对话智能代码生成和建议实时消息交互代码差异预览

实时预览代码更改详细的差异统计信息可视化的代码变更展示支持应用或撤销更改设置配置页面

丰富的配置选项（API 密钥、模型选择等）主题和界面自定义配置导入导出功能实时设置保存模拟 AI 数据

静态数据驱动的 AI 响应支持多种编程语言（JavaScript、Vue、React、Python、CSS）智能关键词匹配丰富的代码模板库 🏗️ 技术架构前端: Vue2 + Webpack 后端: VSCode Extension API 语言: JavaScript (无 TypeScript) 构建工具: Webpack + Babel 包管理: Yarn 📁 项目结构 wita-generate/ ├── src/ │ ├── extension.js # 插件主入口 │ ├── providers/ # 功能提供者 │ ├── webview/ # Vue 前端界面 │ └── utils/ # 工具函数和模拟数据 ├── dist/ # 构建输出 ├── scripts/ # 发布脚本 ├── webpack.config.js # Webpack 配置 └── package.json # 项目配置

🚀 使用方法开发环境:

yarn install yarn build:webview

在 VSCode 中按 F5 启动调试

打包发布:

yarn package # 自动构建和打包

插件功能:

命令面板: Ctrl+Shift+P → "打开 AI 对话" 右键菜单: "生成代码" 状态栏: 点击 "Wita AI" 按钮 🎯 主要特色类似 RooCode 的功能: 智能 AI 对话和代码生成实时差异预览: 类似 diff-tool 的代码对比功能 Vue2 驱动: 现代化的用户界面静态数据: 无需真实 AI API，使用模拟数据演示完整的设置系统: 可配置的插件选项发布就绪: 包含完整的打包和发布配置

Wita Generator - AI Code Assistant

wita-generate