mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
e42715086e
Adds a workflow progress panel component underneath the `actionbar-container`. I suggest starting a review at the extraneous changes that were needed. Including but not limited to: - `get createTime()` in queueStore - `promptIdToWorkflowId`, `initializingPromptIds`, and `nodeProgressStatesByPrompt` in executionStore - `create_time` handling in v2ToV1Adapter - `pointer-events-auto` on ComfyActionbar.vue The rest of the changes should be contained under `QueueProgressOverlay.vue`, and has less of a blast radius in case something goes wrong. --------- Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div class="w-[300px] min-w-[260px] rounded-lg shadow-md">
|
|
<div class="p-3">
|
|
<div class="relative aspect-square w-full overflow-hidden rounded-lg">
|
|
<img
|
|
ref="imgRef"
|
|
:src="imageUrl"
|
|
:alt="name"
|
|
class="h-full w-full cursor-pointer object-contain"
|
|
@click="$emit('image-click')"
|
|
@load="onImgLoad"
|
|
/>
|
|
<div
|
|
v-if="timeLabel"
|
|
class="absolute bottom-2 left-2 rounded px-2 py-0.5 text-xs text-text-primary"
|
|
:style="{
|
|
background: 'rgba(217, 217, 217, 0.40)',
|
|
backdropFilter: 'blur(2px)'
|
|
}"
|
|
>
|
|
{{ timeLabel }}
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-center">
|
|
<div
|
|
class="truncate text-[0.875rem] leading-normal font-semibold text-text-primary"
|
|
:title="name"
|
|
>
|
|
{{ name }}
|
|
</div>
|
|
<div
|
|
v-if="width && height"
|
|
class="mt-1 text-[0.75rem] leading-normal text-text-secondary"
|
|
>
|
|
{{ width }}x{{ height }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
defineProps<{
|
|
imageUrl: string
|
|
name: string
|
|
timeLabel?: string
|
|
}>()
|
|
|
|
defineEmits(['image-click'])
|
|
|
|
const imgRef = ref<HTMLImageElement | null>(null)
|
|
const width = ref<number | null>(null)
|
|
const height = ref<number | null>(null)
|
|
|
|
const onImgLoad = () => {
|
|
const el = imgRef.value
|
|
if (!el) return
|
|
width.value = el.naturalWidth || null
|
|
height.value = el.naturalHeight || null
|
|
}
|
|
</script>
|