mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-19 22:34:15 +00:00
e6332046b0
## Summary Design alignment for the model import wizard. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6949-BYOM-Model-Import-Wizard-2b76d73d365081a48632c40430e05c93) by [Unito](https://www.unito.io)
70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<div class="flex flex-1 flex-col gap-6 text-sm text-muted-foreground">
|
|
<!-- Uploading State -->
|
|
<div
|
|
v-if="status === 'uploading'"
|
|
class="flex flex-1 flex-col items-center justify-center gap-2"
|
|
>
|
|
<i
|
|
class="icon-[lucide--loader-circle] animate-spin text-6xl text-muted-foreground"
|
|
/>
|
|
<div class="text-center">
|
|
<p class="m-0 font-bold">
|
|
{{ $t('assetBrowser.uploadingModel') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success State -->
|
|
<div v-else-if="status === 'success'" class="flex flex-col gap-2">
|
|
<p class="m-0 font-bold">
|
|
{{ $t('assetBrowser.modelUploaded') }}
|
|
</p>
|
|
<p class="m-0">
|
|
{{ $t('assetBrowser.findInLibrary', { type: modelType }) }}
|
|
</p>
|
|
|
|
<div
|
|
class="flex flex-row items-start p-4 bg-modal-card-background rounded-lg"
|
|
>
|
|
<div class="flex flex-col justify-center items-start gap-1 flex-1">
|
|
<p class="text-base-foreground m-0">
|
|
{{ metadata?.name || metadata?.filename }}
|
|
</p>
|
|
<p class="text-sm text-muted m-0">
|
|
<!-- Going to want to add another translation here to get a nice display name. -->
|
|
{{ modelType }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div
|
|
v-else-if="status === 'error'"
|
|
class="flex flex-1 flex-col items-center justify-center gap-6"
|
|
>
|
|
<i class="icon-[lucide--x-circle] text-6xl text-error" />
|
|
<div class="text-center">
|
|
<p class="m-0 text-sm font-bold">
|
|
{{ $t('assetBrowser.uploadFailed') }}
|
|
</p>
|
|
<p v-if="error" class="text-sm text-muted mb-0">
|
|
{{ error }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
|
|
|
|
defineProps<{
|
|
status: 'idle' | 'uploading' | 'success' | 'error'
|
|
error?: string
|
|
metadata: AssetMetadata | null
|
|
modelType: string | undefined
|
|
}>()
|
|
</script>
|