mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 18:22:40 +00:00
Add icon for image mediatype
This commit is contained in:
@@ -172,19 +172,23 @@ function formatDuration(durationSeconds?: number) {
|
|||||||
return parts.join(' ')
|
return parts.join(' ')
|
||||||
}
|
}
|
||||||
|
|
||||||
const itemStats = computed<string[]>(() => {
|
type StatItem = { content?: string; iconClass?: string }
|
||||||
|
const mediaTypes: Record<string, StatItem> = {
|
||||||
|
images: { content: t('image'), iconClass: 'icon-[lucide--image]' }
|
||||||
|
}
|
||||||
|
const itemStats = computed<StatItem[]>(() => {
|
||||||
if (!activeItem.value) return []
|
if (!activeItem.value) return []
|
||||||
const user_metadata = getOutputAssetMetadata(activeItem.value.user_metadata)
|
const user_metadata = getOutputAssetMetadata(activeItem.value.user_metadata)
|
||||||
if (!user_metadata) return []
|
if (!user_metadata) return []
|
||||||
const { allOutputs } = user_metadata
|
const { allOutputs } = user_metadata
|
||||||
const activeOutput = allOutputs?.[activeLoad.value[1]]
|
const activeOutput = allOutputs?.[activeLoad.value[1]]
|
||||||
return [
|
return [
|
||||||
formatTime(activeItem.value.created_at),
|
{ content: formatTime(activeItem.value.created_at) },
|
||||||
formatDuration(user_metadata.executionTimeInSeconds),
|
{ content: formatDuration(user_metadata.executionTimeInSeconds) },
|
||||||
allOutputs && `${allOutputs.length} asset`,
|
allOutputs && { content: `${allOutputs.length} asset` },
|
||||||
//TODO asset icon
|
//TODO asset icon
|
||||||
activeOutput?.mediaType
|
(activeOutput?.mediaType && mediaTypes[activeOutput?.mediaType]) ?? {}
|
||||||
].filter((i) => typeof i === 'string')
|
].filter((i) => !!i)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(outputs.media.value, () => {
|
watch(outputs.media.value, () => {
|
||||||
@@ -279,8 +283,12 @@ function handleCenterWheel(e: WheelEvent) {
|
|||||||
@wheel="handleCenterWheel"
|
@wheel="handleCenterWheel"
|
||||||
>
|
>
|
||||||
<div class="flex gap-4 text-muted-foreground h-14 w-full items-center">
|
<div class="flex gap-4 text-muted-foreground h-14 w-full items-center">
|
||||||
<div v-for="(stat, index) in itemStats" :key="index">
|
<div
|
||||||
{{ stat }}
|
v-for="({ content, iconClass }, index) in itemStats"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<i v-if="iconClass" :class="iconClass" />
|
||||||
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
<div class="grow" />
|
<div class="grow" />
|
||||||
<Button class="px-4 py-2">
|
<Button class="px-4 py-2">
|
||||||
|
|||||||
Reference in New Issue
Block a user