alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance creator info display and add Civitai view functionality in ModelModal

Browse Source
This commit is contained in:
Will Miao
2025-07-22 17:43:33 +08:00
parent c82fabb67f
commit 29d2b5ee4b
2 changed files with 68 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
static/css/components/lora-modal/lora-modal.css
View File

@@ -436,12 +436,13 @@
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--space-1);
padding: 6px 10px;
padding: 2px 10px;
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-sm);
max-width: fit-content;
cursor: pointer;
transition: all 0.2s;
}
[data-theme="dark"] .creator-info {
@@ -482,8 +483,43 @@
color: var(--text-color);
}
/* Optional: add hover effect for creator info */
/* Add hover effect for creator info */
.creator-info:hover {
background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
border-color: var(--lora-accent);
transform: translateY(-1px);
}
.creator-actions {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--space-1);
flex-wrap: wrap;
}
.civitai-view-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--lora-accent);
color: white;
border: none;
border-radius: var(--border-radius-sm);
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s;
}
.civitai-view-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.civitai-view-btn i {
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}

42
static/js/components/shared/ModelModal.js
View File

@@ -1,4 +1,4 @@
import { showToast } from '../../utils/uiHelpers.js';
import { showToast, openCivitai } from '../../utils/uiHelpers.js';
import { modalManager } from '../../managers/ModalManager.js';
import {
toggleShowcase,
@@ -95,18 +95,25 @@ export function showModelModal(model, modelType) {
</button>
</div>
${model.civitai?.creator ? `
<div class="creator-info">
${model.civitai.creator.image ?
`<div class="creator-avatar">
<img src="${model.civitai.creator.image}" alt="${model.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
</div>` :
`<div class="creator-avatar creator-placeholder">
<i class="fas fa-user"></i>
</div>`
}
<span class="creator-username">${model.civitai.creator.username}</span>
</div>` : ''}
<div class="creator-actions">
${model.from_civitai ? `
<button class="civitai-view-btn" title="View on Civitai" data-action="view-civitai" data-filepath="${model.file_path}">
<i class="fas fa-globe"></i> View on Civitai
</button>` : ''}
${model.civitai?.creator ? `
<div class="creator-info" data-username="${model.civitai.creator.username}" data-action="view-creator" title="View Creator Profile">
${model.civitai.creator.image ?
`<div class="creator-avatar">
<img src="${model.civitai.creator.image}" alt="${model.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
</div>` :
`<div class="creator-avatar creator-placeholder">
<i class="fas fa-user"></i>
</div>`
}
<span class="creator-username">${model.civitai.creator.username}</span>
</div>` : ''}
</div>
${renderCompactTags(model.tags || [], model.file_path)}
</header>
@@ -269,6 +276,15 @@ function setupEventHandlers(filePath) {
case 'scroll-to-top':
scrollToTop(target);
break;
case 'view-civitai':
openCivitai(target.dataset.filepath);
break;
case 'view-creator':
const username = target.dataset.username;
if (username) {
window.open(`https://civitai.com/user/${username}`, '_blank');
}
break;
}
}