feat: 添加 ModelItem 组件,支持状态显示和进度条功能

This commit is contained in:
Vixalie
2026-03-29 09:53:19 +08:00
parent edba1686cd
commit cdf18d4397

View File

@@ -0,0 +1,39 @@
<script lang="ts">
import Check from '$lib/components/icons/Check.svelte';
import Close from '$lib/components/icons/Close.svelte';
import Warning from '$lib/components/icons/Warning.svelte';
import type { Snippet } from 'svelte';
type ModelItemProps = {
status: 'ok' | 'unexists' | 'downloading' | 'error';
progress?: number;
children?: Snippet;
};
let { status, progress, children }: ModelItemProps = $props();
</script>
<div class="flex flex-col justify-center gap-1">
<div
class={[
'radial-progress',
status === 'ok' && 'text-green-500',
status === 'unexists' && 'text-orange-500',
status === 'downloading' && 'text-blue-500',
status === 'error' && 'text-red-500',
]}
style:--value={status === 'downloading' ? (progress ?? 0) : 100}
style:--size="4rem"
role="progressbar">
{#if status === 'downloading' && progress !== undefined}
{progress}%
{:else if status === 'ok'}
<Check width="30" />
{:else if status === 'unexists'}
<Warning width="30" />
{:else if status === 'error'}
<Close width="30" />
{/if}
</div>
<span class="text-center">{@render children?.()}</span>
</div>