feat: 添加 ModelItem 组件,支持状态显示和进度条功能
This commit is contained in:
39
src/routes/dataset/model-check/ModelItem.svelte
Normal file
39
src/routes/dataset/model-check/ModelItem.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user