mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-26 07:35:44 -03:00
feat: add Vue widget demo node and development support
- Add LoraManagerDemoNode to node mappings for Vue widget demonstration - Update .gitignore to exclude Vue widget development artifacts (node_modules, .vite, dist) - Implement automatic Vue widget build check in development mode with fallback handling - Maintain pytest compatibility with proper import error handling
This commit is contained in:
Will Miao
290
QUICK_REFERENCE.md
Normal file
290
QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,290 @@
|
||||
# Vue Widget 开发快速参考
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 用户安装
|
||||
```bash
|
||||
# Clone仓库后直接启动ComfyUI，无需其他步骤
|
||||
git clone <repo>
|
||||
# 构建产物已包含，直接可用
|
||||
```
|
||||
|
||||
### 开发者设置
|
||||
```bash
|
||||
cd vue-widgets
|
||||
npm install # 首次安装依赖
|
||||
npm run build # 构建widget
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 常用命令
|
||||
|
||||
### 构建命令
|
||||
```bash
|
||||
cd vue-widgets
|
||||
|
||||
npm run build # 单次构建
|
||||
npm run dev # 监听模式（自动重建）
|
||||
npm run rebuild # 清理并重建
|
||||
npm run typecheck # TypeScript类型检查
|
||||
npm run clean # 清理构建产物
|
||||
```
|
||||
|
||||
### 开发工作流
|
||||
```bash
|
||||
# 方式1: 监听模式（推荐）
|
||||
cd vue-widgets && npm run dev
|
||||
# 修改代码后，刷新ComfyUI浏览器页面
|
||||
|
||||
# 方式2: 手动构建
|
||||
# 修改代码 → npm run build → 刷新浏览器
|
||||
|
||||
# 方式3: 自动检测
|
||||
# 修改代码 → 重启ComfyUI（会自动重建）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📂 项目结构
|
||||
|
||||
```
|
||||
vue-widgets/ # Vue源代码目录
|
||||
├── src/
|
||||
│ ├── main.ts # 扩展注册入口
|
||||
│ └── components/
|
||||
│ └── DemoWidget.vue # Widget组件
|
||||
├── package.json # 依赖和脚本
|
||||
└── vite.config.mts # 构建配置
|
||||
|
||||
web/comfyui/vue-widgets/ # 构建产物（提交到Git）
|
||||
├── demo-widget.js # 编译后的JS
|
||||
├── demo-widget.js.map # Source map
|
||||
└── assets/ # CSS等资源
|
||||
|
||||
py/nodes/
|
||||
└── demo_vue_widget_node.py # Python节点定义
|
||||
|
||||
py/
|
||||
└── vue_widget_builder.py # 构建检测模块
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 创建新Widget
|
||||
|
||||
### 1. 创建Python节点
|
||||
`py/nodes/my_widget_node.py`:
|
||||
```python
|
||||
class MyWidgetNode:
|
||||
@classmethod
|
||||
def INPUT_TYPES(cls):
|
||||
return {
|
||||
"required": {
|
||||
"my_widget": ("MY_WIDGET", {}),
|
||||
}
|
||||
}
|
||||
|
||||
RETURN_TYPES = ("STRING",)
|
||||
FUNCTION = "process"
|
||||
CATEGORY = "loramanager"
|
||||
|
||||
def process(self, my_widget):
|
||||
return (str(my_widget),)
|
||||
|
||||
NODE_CLASS_MAPPINGS = {"MyWidgetNode": MyWidgetNode}
|
||||
```
|
||||
|
||||
### 2. 创建Vue组件
|
||||
`vue-widgets/src/components/MyWidget.vue`:
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<Button label="Click" @click="handleClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import Button from 'primevue/button'
|
||||
|
||||
const props = defineProps<{
|
||||
widget: { serializeValue?: Function }
|
||||
node: { id: number }
|
||||
}>()
|
||||
|
||||
onMounted(() => {
|
||||
props.widget.serializeValue = async () => {
|
||||
return { /* 数据 */ }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
### 3. 注册Widget
|
||||
`vue-widgets/src/main.ts`:
|
||||
```typescript
|
||||
import MyWidget from '@/components/MyWidget.vue'
|
||||
|
||||
// 在 getCustomWidgets() 中:
|
||||
MY_WIDGET(node) {
|
||||
return createVueWidget(node, MyWidget, 'my-widget')
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 注册节点
|
||||
`__init__.py`:
|
||||
```python
|
||||
from .py.nodes.my_widget_node import MyWidgetNode
|
||||
|
||||
NODE_CLASS_MAPPINGS = {
|
||||
# ...
|
||||
"MyWidgetNode": MyWidgetNode
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 构建并测试
|
||||
```bash
|
||||
cd vue-widgets && npm run build
|
||||
# 重启ComfyUI并测试
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 构建流程保证
|
||||
|
||||
### 如何确保用户安装后有最新的构建产物？
|
||||
|
||||
**实施的方案**: 提交构建产物 + 智能检测
|
||||
|
||||
#### ✅ 对用户
|
||||
1. 构建产物已包含在Git仓库中
|
||||
2. Clone后即可使用，无需Node.js
|
||||
3. ComfyUI启动时自动检查（如果有Node.js会自动重建）
|
||||
|
||||
#### ✅ 对开发者
|
||||
1. 修改Vue代码后，ComfyUI重启时自动检测并重建
|
||||
2. 可使用 `npm run dev` 监听模式自动重建
|
||||
3. 提交前运行 `npm run build`（或使用pre-commit hook）
|
||||
|
||||
#### ✅ Git配置
|
||||
```bash
|
||||
# .gitignore
|
||||
✅ 提交: web/comfyui/vue-widgets/ # 构建产物
|
||||
❌ 忽略: vue-widgets/node_modules/ # 开发依赖
|
||||
❌ 忽略: vue-widgets/.vite/ # 构建缓存
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 故障排除
|
||||
|
||||
### 问题: Widget不显示最新修改
|
||||
```bash
|
||||
# 解决方案1: 强制重建
|
||||
cd vue-widgets && npm run rebuild
|
||||
|
||||
# 解决方案2: 清理缓存
|
||||
rm -rf web/comfyui/vue-widgets
|
||||
npm run build
|
||||
|
||||
# 解决方案3: 硬刷新浏览器
|
||||
Ctrl+Shift+R (Windows/Linux)
|
||||
Cmd+Shift+R (Mac)
|
||||
```
|
||||
|
||||
### 问题: 自动构建失败
|
||||
```bash
|
||||
# 检查Node.js
|
||||
node --version # 需要 >= 18
|
||||
npm --version
|
||||
|
||||
# 重新安装依赖
|
||||
cd vue-widgets
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
### 问题: TypeScript错误
|
||||
```bash
|
||||
cd vue-widgets
|
||||
npm run typecheck # 检查类型错误
|
||||
npm run build # 构建（忽略类型错误）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 常用PrimeVue组件
|
||||
|
||||
```typescript
|
||||
import Button from 'primevue/button'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import InputNumber from 'primevue/inputnumber'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import Card from 'primevue/card'
|
||||
import DataTable from 'primevue/datatable'
|
||||
import Column from 'primevue/column'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import Tree from 'primevue/tree'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
import Slider from 'primevue/slider'
|
||||
```
|
||||
|
||||
文档: https://primevue.org/
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Git工作流
|
||||
|
||||
### 提交代码
|
||||
```bash
|
||||
# 方式1: 手动构建
|
||||
cd vue-widgets && npm run build && cd ..
|
||||
git add .
|
||||
git commit -m "feat: update widget"
|
||||
|
||||
# 方式2: 使用pre-commit hook
|
||||
cp vue-widgets/pre-commit.example .git/hooks/pre-commit
|
||||
chmod +x .git/hooks/pre-commit
|
||||
git commit -m "feat: update widget"
|
||||
# Hook自动构建并添加产物
|
||||
```
|
||||
|
||||
### 提交前检查清单
|
||||
- [ ] Vue源代码已修改
|
||||
- [ ] 运行 `npm run build`
|
||||
- [ ] 测试widget功能正常
|
||||
- [ ] 构建产物已生成在 `web/comfyui/vue-widgets/`
|
||||
- [ ] `git add` 包含构建产物
|
||||
- [ ] Commit
|
||||
|
||||
---
|
||||
|
||||
## 📖 更多文档
|
||||
|
||||
- **VUE_WIDGETS_SETUP.md** - 完整架构和设置指南
|
||||
- **vue-widgets/README.md** - Widget开发详细指南
|
||||
- **vue-widgets/DEMO_INSTRUCTIONS.md** - Demo widget测试说明
|
||||
- **BUILD_WORKFLOW_SOLUTIONS.md** - 构建流程方案对比
|
||||
- **BUILD_WORKFLOW_IMPLEMENTATION.md** - 已实施方案详解
|
||||
|
||||
---
|
||||
|
||||
## 💡 提示
|
||||
|
||||
- 开发时优先使用 `npm run dev` 监听模式
|
||||
- 提交前确保运行 `npm run build`
|
||||
- 构建产物约1.4MB，会提交到Git（正常）
|
||||
- ComfyUI会在启动时自动检测并重建（如果需要）
|
||||
- Source maps已启用，便于调试
|
||||
|
||||
---
|
||||
|
||||
## 🎓 学习资源
|
||||
|
||||
- [Vue 3 文档](https://vuejs.org/)
|
||||
- [PrimeVue 文档](https://primevue.org/)
|
||||
- [TypeScript 文档](https://www.typescriptlang.org/)
|
||||
- [Vite 文档](https://vitejs.dev/)
|
||||
- [ComfyUI 自定义节点开发](https://docs.comfy.org/)
|
||||
Reference in New Issue
Block a user