mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-09 01:20:09 +00:00
[fix] add AssetBadge type
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<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
|
||||
v-for="badge in badges"
|
||||
:key="badge.label"
|
||||
@@ -18,16 +18,16 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
interface Badge {
|
||||
type AssetBadge = {
|
||||
label: string
|
||||
type: 'type' | 'base' | 'size'
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
badges: Badge[]
|
||||
badges: AssetBadge[]
|
||||
}>()
|
||||
|
||||
function getBadgeColor(type: Badge['type']): string {
|
||||
function getBadgeColor(type: AssetBadge['type']): string {
|
||||
switch (type) {
|
||||
case 'type':
|
||||
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 { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
||||
|
||||
type AssetBadge = {
|
||||
label: string
|
||||
type: 'type' | 'base' | 'size'
|
||||
}
|
||||
|
||||
// Display properties for transformed assets
|
||||
export interface AssetDisplayItem extends AssetItem {
|
||||
description: string
|
||||
formattedSize: string
|
||||
badges: Array<{
|
||||
label: string
|
||||
type: 'type' | 'base' | 'size'
|
||||
}>
|
||||
badges: AssetBadge[]
|
||||
stats: {
|
||||
formattedDate?: string
|
||||
downloadCount?: string
|
||||
@@ -31,32 +33,31 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
|
||||
// Transform API asset to display asset
|
||||
function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
|
||||
// Extract description from metadata or create from tags
|
||||
const typeTag = asset.tags.find((tag) => tag !== 'models')
|
||||
const description =
|
||||
asset.user_metadata?.description ||
|
||||
`${asset.tags.find((tag) => tag !== 'models') || 'Unknown'} model`
|
||||
asset.user_metadata?.description || `${typeTag || 'Unknown'} model`
|
||||
|
||||
// Format file size
|
||||
const formattedSize = formatFileSize(asset.size)
|
||||
|
||||
// Create badges from tags and metadata
|
||||
const badges = []
|
||||
const badges: AssetBadge[] = []
|
||||
|
||||
// Type badge from non-root tag
|
||||
const typeTag = asset.tags.find((tag) => tag !== 'models')
|
||||
if (typeTag) {
|
||||
badges.push({ label: typeTag, type: 'type' as const })
|
||||
badges.push({ label: typeTag, type: 'type' })
|
||||
}
|
||||
|
||||
// Base model badge from metadata
|
||||
if (asset.user_metadata?.base_model) {
|
||||
badges.push({
|
||||
label: asset.user_metadata.base_model,
|
||||
type: 'base' as const
|
||||
type: 'base'
|
||||
})
|
||||
}
|
||||
|
||||
// Size badge
|
||||
badges.push({ label: formattedSize, type: 'size' as const })
|
||||
badges.push({ label: formattedSize, type: 'size' })
|
||||
|
||||
// Create display stats from API data
|
||||
const stats = {
|
||||
|
||||
Reference in New Issue
Block a user