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>
93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-4 px-3 pb-4">
|
|
<div
|
|
v-for="group in displayedJobGroups"
|
|
:key="group.key"
|
|
class="flex flex-col gap-2"
|
|
>
|
|
<div class="text-[12px] leading-none text-text-secondary">
|
|
{{ group.label }}
|
|
</div>
|
|
<QueueJobItem
|
|
v-for="ji in group.items"
|
|
:key="ji.id"
|
|
:job-id="ji.id"
|
|
:workflow-id="ji.taskRef?.workflow?.id"
|
|
:state="ji.state"
|
|
:title="ji.title"
|
|
:right-text="ji.meta"
|
|
:icon-name="ji.iconName"
|
|
:icon-image-url="ji.iconImageUrl"
|
|
:show-clear="ji.showClear"
|
|
:show-menu="true"
|
|
:progress-total-percent="ji.progressTotalPercent"
|
|
:progress-current-percent="ji.progressCurrentPercent"
|
|
:running-node-name="ji.runningNodeName"
|
|
:active-details-id="activeDetailsId"
|
|
@cancel="emitCancelItem(ji)"
|
|
@delete="emitDeleteItem(ji)"
|
|
@menu="(ev) => $emit('menu', ji, ev)"
|
|
@view="$emit('viewItem', ji)"
|
|
@details-enter="onDetailsEnter"
|
|
@details-leave="onDetailsLeave"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import QueueJobItem from '@/components/queue/job/QueueJobItem.vue'
|
|
import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
|
|
|
|
defineProps<{ displayedJobGroups: JobGroup[] }>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'cancelItem', item: JobListItem): void
|
|
(e: 'deleteItem', item: JobListItem): void
|
|
(e: 'menu', item: JobListItem, ev: MouseEvent): void
|
|
(e: 'viewItem', item: JobListItem): void
|
|
}>()
|
|
|
|
const emitCancelItem = (item: JobListItem) => {
|
|
emit('cancelItem', item)
|
|
}
|
|
|
|
const emitDeleteItem = (item: JobListItem) => {
|
|
emit('deleteItem', item)
|
|
}
|
|
|
|
const activeDetailsId = ref<string | null>(null)
|
|
const hideTimer = ref<number | null>(null)
|
|
const showTimer = ref<number | null>(null)
|
|
const clearHideTimer = () => {
|
|
if (hideTimer.value !== null) {
|
|
clearTimeout(hideTimer.value)
|
|
hideTimer.value = null
|
|
}
|
|
}
|
|
const clearShowTimer = () => {
|
|
if (showTimer.value !== null) {
|
|
clearTimeout(showTimer.value)
|
|
showTimer.value = null
|
|
}
|
|
}
|
|
const onDetailsEnter = (jobId: string) => {
|
|
clearHideTimer()
|
|
clearShowTimer()
|
|
showTimer.value = window.setTimeout(() => {
|
|
activeDetailsId.value = jobId
|
|
showTimer.value = null
|
|
}, 200)
|
|
}
|
|
const onDetailsLeave = (jobId: string) => {
|
|
clearHideTimer()
|
|
clearShowTimer()
|
|
hideTimer.value = window.setTimeout(() => {
|
|
if (activeDetailsId.value === jobId) activeDetailsId.value = null
|
|
hideTimer.value = null
|
|
}, 150)
|
|
}
|
|
</script>
|