vue3-deepseek-gemini

描述

基于 Vue 3 部署 DeepSeek 和 Google Gemini 2.0 API集成的Web AI对话框，抖音风格，支持代码高亮显示，并针对移动端进行了简洁适配。

✨ 核心特性

🎯 智能预设会话系统

• CRUD页面配置助手：专业的前端工程师助手，支持自然语言转Vue3配置代码
• 预设会话标识：星标标记，一目了然
• 预设保护机制：预设会话不可删除，确保系统稳定性
• 即开即用：无需配置，开箱即用的专业模板

🛠️ 自定义AI输出规则

• 模块化提示词管理：通过 src/config/prompts.js 统一管理AI提示词
• 双引擎支持：DeepSeek和Gemini模型分别配置专属提示词
• 专业领域定制：针对前端开发场景优化的AI输出规则
• 智能类型推断：根据字段描述自动推断合适的组件类型

📥 智能代码导出功能

• 一键导出代码：智能识别代码块，支持多种格式
• 智能文件命名：根据代码类型自动生成文件名
• 多代码块合并：自动合并多个代码片段
• 格式支持：TypeScript、JavaScript、Vue、HTML、CSS等

🎨 UI/UX优化

• 抖音风格界面：时尚美观的用户界面
• 代码高亮显示：支持语法高亮，便于阅读
• 移动端适配：响应式设计，完美适配各种设备
• 动画效果：流畅的交互动画，提升用户体验

使用方法

1. 配置 API Key：

   请务必将 src/config 目录下的配置文件 API_KEY 替换为你自己申请的 API Key。

   注意： Google Gemini 2.0 需要科学上网才能正常使用。

   具体来说，你需要修改 src/config/deepseek.js 或者 src/config/gemini.js （看你需求具体需要使用那种模型）:

   // src/config/index.js
   export default {
     API_KEY: 'YOUR_API_KEY', // 替换为你的 API Key
     // ... 其他配置
   };
   

   重要提示： 请妥善保管你的 API Key，不要将其提交到公共仓库！

2. 运行项目：

   完成 API Key 配置后，按照以下步骤运行项目：

   • 安装依赖：

     npm install  # 或者使用 yarn install / pnpm install
     

   • 启动项目：

     npm run dev
     

   • 构建项目：

     npm run build
     

   • 部署构建后的文件到你的服务器。

🚀 快速体验

在线预览

访问 https://euzhi.com/ 在线体验完整功能。

预设会话体验

1. 打开应用后，左侧会看到带星标的"CRUD页面配置"会话
2. 点击进入，按照提示描述你的页面需求
3. AI会自动生成专业的Vue3配置代码
4. 点击"导出代码"按钮，一键下载生成的代码文件

使用示例

输入描述：

用户管理表格，包含以下字段：
- 用户ID（数字）
- 用户名（文本）
- 邮箱（文本）
- 状态（选择：启用/禁用）
- 注册时间（日期）

AI自动生成：

• 完整的搜索参数配置
• 详细的表格列定义
• 智能的组件类型推断
• 清晰的中文注释

环境说明

• Node.js: v18.20.5
• npm: 10.8.2

其他说明

如果对你有帮助给我点一个star吧，谢谢！

贡献

欢迎提交 issue 和 pull request!