feat(widgets): add Description tab to LoraInfoWidget with dual-mode rendering support

- Add Notes/Description tab switching with tab state persistence in widget value
- Lazy-load model description and version description from /lm/loras/metadata
- Render CivitAI HTML descriptions inline via v-html
- Auto-fetch description when LoRA selection changes while on Description tab
- Fix Vue mode height containment via contain:layout size (lm-vue-node class)
- Fix scroll wheel isolation: widget scroll vs canvas zoom in both render modes
- Add docs/comfyui-dual-mode-widgets.md with widget rendering patterns
This commit is contained in:
Will Miao
2026-07-17 15:04:47 +08:00
parent 7f51812c1e
commit 6f71335be4
7 changed files with 1445 additions and 160 deletions

View File

@@ -656,7 +656,7 @@ function createLoraInfoWidget(node: any) {
forwardMiddleMouseToCanvas(container)
let internalValue: { name?: string; notes?: string; filePath?: string } | undefined
let internalValue: { name?: string; notes?: string; filePath?: string; activeTab?: string } | undefined
const widget = node.addDOMWidget(
'lora_info_display',
@@ -666,13 +666,13 @@ function createLoraInfoWidget(node: any) {
getValue() {
return internalValue
},
setValue(v: { name?: string; notes?: string; filePath?: string }) {
setValue(v: { name?: string; notes?: string; filePath?: string; activeTab?: string }) {
internalValue = v
if (typeof widget.onSetValue === 'function') {
widget.onSetValue(v)
}
},
serialize: false, // Display-only widget
serialize: true,
getMinHeight() {
return LORA_INFO_WIDGET_MIN_HEIGHT
}
@@ -684,6 +684,7 @@ function createLoraInfoWidget(node: any) {
node,
api,
app,
isVueMode: typeof LiteGraph !== 'undefined' && LiteGraph.vueNodesMode,
})
vueApp.use(PrimeVue, {