479 lines
16 KiB
Markdown
479 lines
16 KiB
Markdown
# Lovable IDE自动化部署插件
|
||
|
||
`Claude Code` `Lovable` `IDE插件` `自动化部署` `GitHub同步`
|
||
|
||
# 🚀 Lovable + Claude Code = 超级能力
|
||
|
||
## **在 IDE 中以 10 倍速度编辑 Lovable 项目**
|
||
|
||
不再需要在 Lovable 和 Claude 之间来回复制粘贴。不再需要处理双向同步的麻烦。不再为简单改动消耗大量 API 额度。
|
||
|
||
**Lovable Claude Code 插件将 IDE 的强大能力直接带到你的 Lovable 项目中。** 借助 AI 辅助编辑代码，自动部署，让 Claude Code 处理与 Lovable Cloud 同步的所有复杂事务。
|
||
|
||
### **你将获得：**
|
||
|
||
✨ 在 IDE 中直接编辑 Lovable 项目，充分发挥 Claude Code 的全部能力
|
||
🗺️ **项目结构地图** - 让 Claude 更快速地浏览你的代码库（v1.7.0 新功能！）
|
||
⚡ **自动推送到 GitHub** - 每次任务完成后自动提交并推送
|
||
🚀 **自动部署到 Lovable** - 无需手动执行命令
|
||
🤖 **完整工作流自动化** - 从代码变更到上线
|
||
💰 **节省额度** - 用你的 Claude 订阅处理繁重工作
|
||
🔄 **零摩擦同步** - 代码、GitHub 与 Lovable Cloud 三方无缝衔接
|
||
🛡️ **自动密钥检测** - 永远不会遗漏所需的 API Key
|
||
⚡ **即时配置** - 自动生成项目上下文
|
||
✅ **内置验证** - 每次部署后自动运行测试
|
||
|
||
---
|
||
|
||
## **你正在解决的问题**
|
||
|
||
使用 Lovable 体验很好……直到它不再那么好：
|
||
|
||
- 😤 **上下文切换之痛** - 后端用 Lovable UI，前端用 IDE，来回切换没完没了
|
||
- 💸 **额度消耗** - Lovable 要收费的事，Claude Code 通过你的订阅能更便宜地搞定
|
||
- 🤷 **同步困惑** - "什么会自动同步？什么需要手动部署？"永远搞不清楚
|
||
- ⏱️ **手动工作流** - 复制提示词 → 粘贴到 Lovable → 等待响应 → 重复
|
||
- 🔑 **密钥管理混乱** - 追踪每个函数需要哪些密钥、哪些已配置、哪些还缺失
|
||
- 🐛 **部署盲区** - 部署后没有自动化测试，只能祈祷没出问题
|
||
|
||
**这个插件消除了以上所有摩擦点。**
|
||
|
||
---
|
||
|
||
## **工作原理（90 秒了解）**
|
||
|
||
### **1️⃣ 一次性配置**
|
||
```bash
|
||
/lovable:init
|
||
```
|
||
Claude Code 扫描你的项目，提问几个问题，然后生成包含所需上下文的 `CLAUDE.md`。
|
||
|
||
### **2️⃣ 进行你的修改**
|
||
像平常一样在 IDE 中编辑代码，Claude Code 配合 AI 处理复杂部分。
|
||
|
||
### **3️⃣ 一切自动完成**
|
||
```bash
|
||
/lovable:deploy-edge # 部署到 Lovable
|
||
/lovable:sync # 保持密钥/配置同步
|
||
```
|
||
|
||
就这些。无需手动提示词。无需切换上下文。无需担心遗忘步骤。
|
||
|
||
---
|
||
|
||
## **真实工作流**
|
||
|
||
### **🎯 手动模式（完全掌控）**
|
||
```
|
||
你："给 send-email 函数添加邮件通知"
|
||
↓
|
||
Claude Code：创建代码
|
||
↓
|
||
展示给你："用这个提示词部署：'部署 send-email edge 函数'"
|
||
以及："⚠️ 需要 RESEND_API_KEY"
|
||
↓
|
||
你：将提示词复制粘贴到 Lovable（只需 10 秒）
|
||
结果：✅ 函数已部署，测试通过，你已收到通知
|
||
```
|
||
|
||
### **🚀 全自动模式（Yolo Mode）**
|
||
```
|
||
你："添加邮件通知"
|
||
↓
|
||
Claude Code：创建代码，检测所需密钥
|
||
✅ 自动提交变更
|
||
✅ 推送到 GitHub
|
||
↓
|
||
Claude：🤖 自动检测后端变更
|
||
🤖 导航到 Lovable
|
||
✅ 提交部署请求
|
||
✅ 运行验证测试
|
||
✅ 确认成功
|
||
|
||
完成。零手动操作。无需 git 命令。无需部署命令！
|
||
```
|
||
|
||
**v1.5.0 改进：** 基于 Hook 的自动推送，100% 可靠地自动提交和推送！
|
||
**v1.3.0 新功能：** 启用自动部署后，Claude 在 git push 后自动部署到 Lovable！
|
||
|
||
---
|
||
|
||
## **为你节省大量时间的核心功能**
|
||
|
||
### ⚡ **自动同步与自动推送**（v1.5.0 基于 Hook！）
|
||
使用 Claude Code Hook 实现无缝 GitHub 集成——始终同步，始终最新，100% 可靠！
|
||
|
||
**自动同步（启动 Hook）：**
|
||
```
|
||
Claude 启动 → Hook 拉取最新代码 → 你在最新代码上工作 → 无冲突！
|
||
```
|
||
Claude 开始工作时，自动从 GitHub 拉取最新变更。仅在主分支且无未提交变更时运行。
|
||
|
||
**自动推送（停止 Hook）：**
|
||
```
|
||
做出变更 → 任务完成 → Hook 触发 → 自动提交 → 自动推送 → 变更进入 GitHub！
|
||
```
|
||
Claude 完成任何任务后，自动提交并推送。无需手动 git 命令！
|
||
|
||
**为什么用 Hook？** Hook 保证每次都能执行，让同步操作比基于技能的方案更可靠。自动同步保持你的代码最新，自动推送保持 GitHub 最新！
|
||
|
||
### 🚀 **自动部署到 Lovable**（v1.3.0）
|
||
将后端变更推送到主分支，Claude 自动部署到 Lovable。无需命令，无需复制粘贴，无需切换上下文。
|
||
|
||
```
|
||
自动推送到 GitHub → Claude 检测变更 → 自动部署 → 测试通过 → 完成！
|
||
```
|
||
|
||
**完整自动化：** 两项功能都启用后，Claude 处理从代码变更到上线的一切！
|
||
|
||
### 🔐 **智能密钥检测**
|
||
Claude Code 通过扫描代码自动找出每个函数所需的所有密钥。不再出现"为什么这个函数会失败？"——我们提前告知你："你需要 STRIPE_WEBHOOK_SECRET。"
|
||
|
||
### 🔄 **自动同步命令**
|
||
团队成员在 Lovable Cloud 中添加了密钥？运行 `/lovable:sync`，项目配置立即更新。不再出现配置不同步的情况。
|
||
|
||
### ⚡ **自动运行测试**
|
||
启用后，每次部署后自动运行测试。几秒内发现问题，而不是等用户反馈 bug。
|
||
|
||
### 📊 **密钥状态仪表板**
|
||
`CLAUDE.md` 清晰显示哪些密钥已配置（✅）、哪些需要设置（⚠️）。一眼就知道是否可以部署。
|
||
|
||
### 🎯 **上下文全知晓**
|
||
Claude Code 了解你的生产 URL、数据库表、Edge 函数、密钥和规范。问它任何关于项目的问题——它已经知晓。
|
||
|
||
---
|
||
|
||
## **安装（2 分钟）**
|
||
|
||
### **方式一：通过应用市场安装（推荐）**
|
||
|
||
```bash
|
||
# 在 Claude Code 中运行：
|
||
/plugin marketplace add 10K-Digital/lovable-claude-code
|
||
|
||
# 安装插件：
|
||
/plugin install lovable@10k-digital
|
||
```
|
||
|
||
💡 **提示：** 在 Claude Code 设置中启用自动更新，始终自动获取最新版本。
|
||
|
||
### **方式二：本地安装**
|
||
|
||
克隆或下载此仓库，然后：
|
||
```bash
|
||
cp -r lovable-plugin/.claude-plugin your-project/.claude-plugin
|
||
cp -r lovable-plugin/commands your-project/.claude/commands
|
||
cp -r lovable-plugin/skills your-project/.claude/skills
|
||
```
|
||
|
||
### **方式三：检查前置条件** ✓
|
||
|
||
开始前，请确保：
|
||
- ✅ 你的 Lovable 项目已启用 GitHub 同步（[文档](https://docs.lovable.dev/integrations/github#about-github)）
|
||
- ✅ Claude Code 已配置你的 GitHub 仓库
|
||
- ✅ （可选）安装 [Chrome 版 Claude 扩展](https://chrome.google.com/webstore/detail/claude/pebppomjfocnoigkeepgbmcifnnlndla)以使用全自动模式
|
||
|
||
---
|
||
|
||
## **前 5 分钟上手指南**
|
||
|
||
```bash
|
||
# 1. 初始化你的项目
|
||
/lovable:init
|
||
|
||
# 2. 回答问题（1 分钟）
|
||
# - 你的生产 URL 是什么？
|
||
# - 启用全自动模式吗？（推荐！）
|
||
# - 等等...
|
||
|
||
# 3. 开始编码！
|
||
# Claude Code 现在已了解你的项目一切情况
|
||
|
||
# 4. 推送你的变更：
|
||
git push origin main
|
||
# 启用全自动模式后：自动部署后端变更！
|
||
# 无需 /deploy-edge 命令
|
||
|
||
# 5. 保持同步：
|
||
/lovable:sync
|
||
# 用最新密钥/配置更新 CLAUDE.md
|
||
```
|
||
|
||
---
|
||
|
||
## **命令速览**
|
||
|
||
| 命令 | 功能 | 使用时机 |
|
||
|------|------|----------|
|
||
| `/lovable:init` | 配置你的项目 | 首次设置 |
|
||
| `/lovable:map` | 生成项目结构地图 | 帮助 Claude 更快导航（新功能！） |
|
||
| `/lovable:sync` | 从 Lovable Cloud 刷新配置 | 团队添加密钥/函数后 |
|
||
| `/lovable:deploy-edge` | 部署 Edge 函数 | 代码变更后（或全自动模式自动执行） |
|
||
| `/lovable:apply-migration` | 应用数据库迁移 | 数据库变更后（或全自动模式自动执行） |
|
||
| `/lovable:yolo on/off` | 切换自动化+自动部署 | 配置工作方式 |
|
||
|
||
**专业提示：** 启用全自动模式后，无需 `/deploy-edge`——只需 `git push`，自动部署！
|
||
|
||
---
|
||
|
||
## **前后对比：真实省时效果**
|
||
|
||
### **没有这个插件：**
|
||
```
|
||
1. 在 Claude Code 中做出变更（5 分钟）
|
||
2. 将提示词复制到剪贴板（1 分钟）
|
||
3. 切换到浏览器，打开 Lovable（1 分钟）
|
||
4. 将提示词粘贴到聊天框（1 分钟）
|
||
5. 等待响应（2 分钟）
|
||
6. 手动验证（2 分钟）
|
||
7. 切换回 IDE（1 分钟）
|
||
总计：13 分钟
|
||
```
|
||
|
||
### **有此插件（手动模式）：**
|
||
```
|
||
1. 在 Claude Code 中做出变更（5 分钟）
|
||
2. 复制一行提示词（30 秒）
|
||
3. 粘贴到 Lovable（30 秒）
|
||
总计：6 分钟
|
||
= **节省 54% 时间**
|
||
```
|
||
|
||
### **有此插件（全自动模式 + 自动推送 + 自动部署）：**
|
||
```
|
||
1. 在 Claude Code 中做出变更（5 分钟）
|
||
→ 自动提交变更
|
||
→ 自动推送到 GitHub
|
||
→ 自动检测后端变更
|
||
→ 自动部署到 Lovable
|
||
→ 自动运行测试
|
||
总计：5 分钟
|
||
= **节省 62% 时间** + **零手动命令**
|
||
```
|
||
|
||
---
|
||
|
||
## **高级功能**
|
||
|
||
### **全自动模式（完整自动化）**
|
||
```bash
|
||
/lovable:yolo on # 启用一切：自动推送、自动部署、测试（推荐）
|
||
/lovable:yolo on --no-auto-push # 需要手动执行 git 命令
|
||
/lovable:yolo on --no-auto-deploy # 需要手动执行 /deploy-edge 命令
|
||
/lovable:yolo on --no-testing # 跳过测试以加快速度
|
||
/lovable:yolo on --debug # 查看自动化日志
|
||
/lovable:yolo off # 禁用自动化
|
||
```
|
||
|
||
**自动推送（v1.5.0 基于 Hook）：**
|
||
使用 Claude Code Hook，完成每个任务后插件自动：
|
||
- 检查文件变更
|
||
- 用描述性消息提交
|
||
- 推送到 GitHub 主分支
|
||
- **更可靠：** Hook 保证执行，而不是依靠 Claude 记得检查
|
||
|
||
**自动部署（v1.3.0）：**
|
||
启用自动部署后，git push 后 Claude 自动：
|
||
- 检测后端文件变更（Edge 函数、迁移）
|
||
- 导航到你的 Lovable 项目
|
||
- 提交部署提示词
|
||
- 运行验证测试（3 个级别）
|
||
- 即时报告成功/失败
|
||
|
||
**完整自动化：** 两者都启用，实现从代码变更到上线的全自动工作流！
|
||
|
||
使用 `--no-auto-push` 或 `--no-auto-deploy` 可选择手动控制。
|
||
|
||
### **同步命令（保持同步）**
|
||
```bash
|
||
/lovable:sync # 交互式（显示变更，询问确认）
|
||
/lovable:sync --apply # 自动应用变更
|
||
/lovable:sync --dry-run # 预览变更
|
||
/lovable:sync --manual # 手动输入模式
|
||
/lovable:sync --debug # 显示详细日志
|
||
```
|
||
|
||
以下情况使用此命令：
|
||
- 团队成员在 Lovable Cloud 中添加了密钥
|
||
- 创建了新函数
|
||
- 想要验证一切是否对齐
|
||
|
||
---
|
||
|
||
## **算笔账：为什么这个插件值回票价**
|
||
|
||
- **每次部署节省时间：** 约 7 分钟
|
||
- **每周部署次数（普通项目）：** 5-10 次
|
||
- **每周节省时间：** 0.6-1.2 小时
|
||
- **每年节省时间：** 30-60 小时
|
||
|
||
**每年为你省回整整一周的工作时间。**
|
||
|
||
此外：不再有复制粘贴错误。不再遗漏密钥。不再有"等等，我部署了吗？"的困惑。
|
||
|
||
---
|
||
|
||
## **故障排除**
|
||
|
||
**插件没有更新？**
|
||
- 确保在 Claude Code 中启用了应用市场自动更新
|
||
- 或手动操作：`/plugin marketplace remove 10K-Digital/lovable-claude-code` 然后重新添加
|
||
|
||
**自动化超时？**
|
||
- 使用手动模式：`/lovable:sync --manual`
|
||
- 或稍后重试（可能是网络/浏览器问题）
|
||
|
||
**未检测到密钥？**
|
||
- 运行 `/lovable:sync` 强制重新扫描
|
||
- 确认密钥使用 `Deno.env.get("SECRET_NAME")` 模式
|
||
|
||
---
|
||
|
||
## **自动同步内容说明**
|
||
|
||
| 内容 | 是否自动同步 | 后续步骤 |
|
||
|------|------------|----------|
|
||
| React 组件 | ✅ 是 | 直接推送到 GitHub |
|
||
| 样式/CSS | ✅ 是 | 直接推送到 GitHub |
|
||
| Edge 函数代码 | ⚠️ 部分 | 还需运行 `/lovable:deploy-edge` |
|
||
| 数据库迁移 | ⚠️ 部分 | 还需运行 `/lovable:apply-migration` |
|
||
| 新建表 | ❌ 否 | 使用 Lovable Cloud UI |
|
||
| RLS 策略 | ❌ 否 | 使用 Lovable Cloud UI |
|
||
| 密钥 | ❌ 否 | 使用 Lovable Cloud UI |
|
||
|
||
---
|
||
|
||
## **技术细节（给好奇的你）**
|
||
|
||
### **底层工作原理**
|
||
|
||
本插件提供：
|
||
|
||
**🎯 命令**（`/lovable:*`）
|
||
- 扫描代码库的交互式配置
|
||
- Edge 函数和迁移的部署辅助工具
|
||
- 与 Lovable Cloud 保持配置同步的工具
|
||
|
||
**🧠 技能**
|
||
- Lovable 集成模式（哪些同步，哪些不同步）
|
||
- 密钥检测算法（扫描代码中的环境变量）
|
||
- 全自动模式自动化（浏览器自动化工作流）
|
||
|
||
**📋 配置生成**
|
||
- 创建包含项目上下文的 `CLAUDE.md`
|
||
- 追踪密钥及其状态
|
||
- 存储全自动模式偏好设置
|
||
|
||
### **架构**
|
||
|
||
```
|
||
你的 IDE（Claude Code）
|
||
↓
|
||
lovable-claude-code 插件
|
||
├─ 扫描你的代码库
|
||
├─ 检测密钥和函数
|
||
├─ 生成精确的 Lovable 提示词
|
||
└─ 可选择通过浏览器自动执行
|
||
↓
|
||
GitHub（双向同步）
|
||
↓
|
||
Lovable Cloud（部署）
|
||
```
|
||
|
||
### **安全与隐私**
|
||
|
||
- ✅ 插件中不存储任何凭证
|
||
- ✅ 所有自动化操作透明可见（你看得到发生了什么）
|
||
- ✅ 始终提供手动回退方案
|
||
- ✅ 开源（[github.com/10K-Digital/lovable-claude-code](https://github.com/10K-Digital/lovable-claude-code)）
|
||
|
||
### **浏览器自动化详情**
|
||
|
||
全自动模式使用 [Chrome 版 Claude 扩展](https://chrome.google.com/webstore/detail/claude/pebppomjfocnoigkeepgbmcifnnlndla)来：
|
||
- 导航到你的 Lovable 项目
|
||
- 与聊天界面交互
|
||
- 提交部署提示词
|
||
- 监控是否成功
|
||
|
||
**注意：** 出现任何问题时始终有手动回退方案。
|
||
|
||
---
|
||
|
||
## **生成的文件**
|
||
|
||
运行 `/lovable:init` 后，你的项目会新增：
|
||
|
||
```
|
||
your-project/
|
||
├── CLAUDE.md # 项目配置（可编辑！）
|
||
│ ├── 生产 URL
|
||
│ ├── 密钥表（含状态）
|
||
│ ├── Edge 函数列表
|
||
│ ├── 数据库表
|
||
│ ├── 项目规范
|
||
│ └── 全自动模式设置
|
||
└── ... 你的常规代码
|
||
```
|
||
|
||
编辑 `CLAUDE.md` 可自定义任何内容——Claude Code 会读取并遵循你的配置。
|
||
|
||
---
|
||
|
||
## **版本历史**
|
||
|
||
**v1.7.0**（最新）⭐
|
||
- **项目结构地图** - 让 Claude 更快速地浏览你的代码库！
|
||
- 新增 `/lovable:map` 命令用于生成/更新地图
|
||
- 集成到 `/lovable:init`（可选问题）
|
||
- 使用 `/lovable:sync --refresh-map` 更新
|
||
- 约 60 行地图，包含目录树、关键文件、模式
|
||
- **多插件架构** - 为未来插件重构了仓库结构
|
||
- 插件文件现在位于 `plugins/lovable/`
|
||
- 应用市场可托管多个插件
|
||
- 现有用户无需任何改动
|
||
|
||
**v1.4.1**
|
||
- **自动推送独立性** - 可独立于全自动模式工作！
|
||
- 自动推送可在全自动模式关闭时单独开启（手动部署）
|
||
- 全自动模式要求自动推送（启用时强制）
|
||
- 更清晰的配置和心智模型
|
||
|
||
**v1.4.0**
|
||
- **自动推送到 GitHub** - 任务完成后自动提交和推送！
|
||
- 与全自动模式结合实现完整工作流自动化
|
||
- 遵循项目风格的智能提交消息
|
||
|
||
**v1.3.0**
|
||
- **git push 后自动部署** - 无需手动命令！
|
||
- 新增 `--auto-deploy` / `--no-auto-deploy` 标志
|
||
- 改进了优雅回退
|
||
- 有序部署（迁移先于函数）
|
||
|
||
**v1.2.0**
|
||
- 增强了浏览器自动化的密钥检测
|
||
- 新增 `/lovable:sync` 命令
|
||
- 支持自动运行测试
|
||
- 改进了初始化流程
|
||
|
||
**v1.1.0**
|
||
- 全自动模式（自动化部署）
|
||
- 初始命令和技能
|
||
|
||
完整详情见 [CHANGELOG.md](CHANGELOG.md)。
|
||
|
||
---
|
||
|
||
## **许可证**
|
||
|
||
MIT——随心所欲地使用。
|
||
|
||
## **贡献**
|
||
|
||
发现 bug？有功能建议？
|
||
👉 [提交 Issue](https://github.com/10K-Digital/lovable-claude-code/issues)
|
||
|
||
---
|
||
|
||
## **由 10K Digital 用 ❤️ 打造**
|
||
|
||
有问题？[GitHub Issues](https://github.com/10K-Digital/lovable-claude-code/issues) |