feat: 添加 ModelItem 组件,支持状态显示和进度条功能
This commit is contained in:
@@ -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>
|
||||||
Reference in New Issue
Block a user