feat(recipes): show a has-workflow badge on recipe cards

This commit is contained in:
Will Miao
2026-10-10 09:02:48 +08:00
parent e1b102fc64
commit 377a1337db
16 changed files with 201 additions and 14 deletions
+6
View File
@@ -79,6 +79,9 @@ body {
--badge-skip-refresh-bg: var(--color-skip-refresh-bg);
--badge-skip-refresh-text: var(--color-skip-refresh-text);
--badge-skip-refresh-glow: var(--color-skip-refresh-glow);
--badge-workflow-bg: var(--color-workflow-bg);
--badge-workflow-text: var(--color-workflow-text);
--badge-workflow-glow: var(--color-workflow-glow);
}
:root[data-theme="dark"] {
@@ -104,6 +107,9 @@ body {
--badge-skip-refresh-bg: var(--color-skip-refresh-bg);
--badge-skip-refresh-text: var(--color-skip-refresh-text);
--badge-skip-refresh-glow: var(--color-skip-refresh-glow);
--badge-workflow-bg: var(--color-workflow-bg);
--badge-workflow-text: var(--color-workflow-text);
--badge-workflow-glow: var(--color-workflow-glow);
}
html[data-theme="dark"] {
+25 -1
View File
@@ -664,7 +664,8 @@ body.hide-card-version .hl-badge {
.card-footer,
.card-header,
.model-name,
.base-model-label {
.base-model-label,
.workflow-badge {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -887,3 +888,26 @@ body.hide-card-version .hl-badge {
flex-shrink: 0;
opacity: 0.9;
}
/* Recipe card capability badge: mirrors the model-card update/skip-refresh
badges (small square icon next to the base-model pill) but stays a neutral
attribute marker — no card-level highlight like .has-update. */
.workflow-badge {
width: 18px;
height: 18px;
padding: 0;
border-radius: 4px;
background: var(--badge-workflow-bg);
color: var(--badge-workflow-text);
font-size: 0.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px var(--badge-workflow-glow);
border: 1px solid color-mix(in oklab, var(--badge-workflow-bg) 55%, transparent);
}
.workflow-badge i {
line-height: 1;
}
+8
View File
@@ -44,6 +44,10 @@
--color-skip-refresh-bg: oklch(82% 0.12 var(--color-warning-h));
--color-skip-refresh-text: oklch(35% 0.02 var(--color-warning-h));
--color-skip-refresh-glow: oklch(82% 0.12 var(--color-warning-h) / 0.15);
--color-workflow-bg: oklch(72% 0.18 var(--color-accent-h));
--color-workflow-text: oklch(28% 0.03 var(--color-accent-h));
--color-workflow-glow: oklch(72% 0.18 var(--color-accent-h) / 0.28);
}
:root {
@@ -110,6 +114,10 @@
--color-info-text: oklch(98% 0.02 var(--color-info-h));
--color-info-glow: oklch(62% 0.18 var(--color-info-h) / 0.4);
--color-workflow-bg: oklch(62% 0.18 var(--color-accent-h));
--color-workflow-text: oklch(98% 0.02 var(--color-accent-h));
--color-workflow-glow: oklch(62% 0.18 var(--color-accent-h) / 0.4);
--color-error-bg: color-mix(in oklch, var(--color-error) 15%, transparent);
--color-error-border: color-mix(in oklch, var(--color-error) 40%, transparent);
+7 -1
View File
@@ -133,7 +133,13 @@ class RecipeCard {
`<button class="toggle-blur-btn" title="Toggle blur">
<i class="fas fa-eye"></i>
</button>` : ''}
<span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${baseModelLabel}">${baseModelDisplay}</span>
<div class="card-header-info">
<span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${baseModelLabel}">${baseModelDisplay}</span>
${this.recipe.has_workflow === true ? `
<span class="workflow-badge" title="${translate('recipes.workflow.hasWorkflow', {}, 'Contains a ComfyUI workflow')}">
<i class="fas fa-diagram-project"></i>
</span>` : ''}
</div>
<div class="card-actions">
<i class="${isFavorite ? 'fas fa-star favorite-active' : 'far fa-star'}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"></i>
<i class="fas fa-share-alt" title="Share Recipe"></i>
+2 -2
View File
@@ -835,8 +835,8 @@ class RecipeModal {
const workflowBtn = document.createElement('button');
workflowBtn.className = 'recipe-source-url-btn';
workflowBtn.id = 'sendWorkflowBtn';
workflowBtn.title = 'Send Workflow to ComfyUI';
workflowBtn.innerHTML = '<i class="fas fa-project-diagram"></i> Send Workflow to ComfyUI';
workflowBtn.title = translate('recipes.workflow.sendWorkflow', {}, 'Send Workflow to ComfyUI');
workflowBtn.innerHTML = `<i class="fas fa-diagram-project"></i> ${workflowBtn.title}`;
workflowBtn.addEventListener('click', () => {
this.sendWorkflowToComfyUI();
});