mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 03:01:54 +00:00
[fix] add AssetBadge type
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="absolute bottom-2 right-2 flex flex-col-reverse items-end gap-1">
|
<div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
|
||||||
<span
|
<span
|
||||||
v-for="badge in badges"
|
v-for="badge in badges"
|
||||||
:key="badge.label"
|
:key="badge.label"
|
||||||
@@ -18,16 +18,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { cn } from '@/utils/tailwindUtil'
|
import { cn } from '@/utils/tailwindUtil'
|
||||||
|
|
||||||
interface Badge {
|
type AssetBadge = {
|
||||||
label: string
|
label: string
|
||||||
type: 'type' | 'base' | 'size'
|
type: 'type' | 'base' | 'size'
|
||||||
}
|
}
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
badges: Badge[]
|
badges: AssetBadge[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
function getBadgeColor(type: Badge['type']): string {
|
function getBadgeColor(type: AssetBadge['type']): string {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'type':
|
case 'type':
|
||||||
return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
|
return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
|
||||||
|
|||||||
@@ -3,14 +3,16 @@ import { computed, ref } from 'vue'
|
|||||||
import type { UUID } from '@/lib/litegraph/src/utils/uuid'
|
import type { UUID } from '@/lib/litegraph/src/utils/uuid'
|
||||||
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
||||||
|
|
||||||
|
type AssetBadge = {
|
||||||
|
label: string
|
||||||
|
type: 'type' | 'base' | 'size'
|
||||||
|
}
|
||||||
|
|
||||||
// Display properties for transformed assets
|
// Display properties for transformed assets
|
||||||
export interface AssetDisplayItem extends AssetItem {
|
export interface AssetDisplayItem extends AssetItem {
|
||||||
description: string
|
description: string
|
||||||
formattedSize: string
|
formattedSize: string
|
||||||
badges: Array<{
|
badges: AssetBadge[]
|
||||||
label: string
|
|
||||||
type: 'type' | 'base' | 'size'
|
|
||||||
}>
|
|
||||||
stats: {
|
stats: {
|
||||||
formattedDate?: string
|
formattedDate?: string
|
||||||
downloadCount?: string
|
downloadCount?: string
|
||||||
@@ -31,32 +33,31 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
|
|||||||
// Transform API asset to display asset
|
// Transform API asset to display asset
|
||||||
function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
|
function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
|
||||||
// Extract description from metadata or create from tags
|
// Extract description from metadata or create from tags
|
||||||
|
const typeTag = asset.tags.find((tag) => tag !== 'models')
|
||||||
const description =
|
const description =
|
||||||
asset.user_metadata?.description ||
|
asset.user_metadata?.description || `${typeTag || 'Unknown'} model`
|
||||||
`${asset.tags.find((tag) => tag !== 'models') || 'Unknown'} model`
|
|
||||||
|
|
||||||
// Format file size
|
// Format file size
|
||||||
const formattedSize = formatFileSize(asset.size)
|
const formattedSize = formatFileSize(asset.size)
|
||||||
|
|
||||||
// Create badges from tags and metadata
|
// Create badges from tags and metadata
|
||||||
const badges = []
|
const badges: AssetBadge[] = []
|
||||||
|
|
||||||
// Type badge from non-root tag
|
// Type badge from non-root tag
|
||||||
const typeTag = asset.tags.find((tag) => tag !== 'models')
|
|
||||||
if (typeTag) {
|
if (typeTag) {
|
||||||
badges.push({ label: typeTag, type: 'type' as const })
|
badges.push({ label: typeTag, type: 'type' })
|
||||||
}
|
}
|
||||||
|
|
||||||
// Base model badge from metadata
|
// Base model badge from metadata
|
||||||
if (asset.user_metadata?.base_model) {
|
if (asset.user_metadata?.base_model) {
|
||||||
badges.push({
|
badges.push({
|
||||||
label: asset.user_metadata.base_model,
|
label: asset.user_metadata.base_model,
|
||||||
type: 'base' as const
|
type: 'base'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Size badge
|
// Size badge
|
||||||
badges.push({ label: formattedSize, type: 'size' as const })
|
badges.push({ label: formattedSize, type: 'size' })
|
||||||
|
|
||||||
// Create display stats from API data
|
// Create display stats from API data
|
||||||
const stats = {
|
const stats = {
|
||||||
|
|||||||
Reference in New Issue
Block a user