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
2026-01-10 17:45:26 +08:00
parent f842ea990e
commit 32249d1886
23 changed files with 15840 additions and 1 deletions

73
vue-widgets/src/main.ts Normal file
View File

@@ -0,0 +1,73 @@
import { createApp, type App as VueApp } from 'vue'
import PrimeVue from 'primevue/config'
import DemoWidget from '@/components/DemoWidget.vue'
// @ts-ignore - ComfyUI external module
import { app } from '../../../scripts/app.js'
const vueApps = new Map<number, VueApp>()
// @ts-ignore
function createVueWidget(node) {
const container = document.createElement('div')
container.id = `lora-manager-demo-widget-${node.id}`
container.style.width = '100%'
container.style.height = '100%'
container.style.minHeight = '300px'
container.style.display = 'flex'
container.style.flexDirection = 'column'
container.style.overflow = 'hidden'
const widget = node.addDOMWidget(
'lora_demo_widget',
'lora-manager-demo',
container,
{
getMinHeight: () => 320,
hideOnZoom: false,
serialize: true
}
)
const vueApp = createApp(DemoWidget, {
widget,
node
})
vueApp.use(PrimeVue)
vueApp.mount(container)
vueApps.set(node.id, vueApp)
widget.onRemove = () => {
const vueApp = vueApps.get(node.id)
if (vueApp) {
vueApp.unmount()
vueApps.delete(node.id)
}
}
return { widget }
}
app.registerExtension({
name: 'comfyui.loramanager.demo',
getCustomWidgets() {
return {
// @ts-ignore
LORA_DEMO_WIDGET(node) {
return createVueWidget(node)
}
}
},
// @ts-ignore
nodeCreated(node) {
if (node.constructor?.comfyClass !== 'LoraManagerDemoNode') return
const [oldWidth, oldHeight] = node.size
node.setSize([Math.max(oldWidth, 350), Math.max(oldHeight, 400)])
}
})