From cdf18d4397663670d510395d49dd8fa2bc53c1cd Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sun, 29 Mar 2026 09:53:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20ModelItem=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=92=8C=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataset/model-check/ModelItem.svelte      | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/routes/dataset/model-check/ModelItem.svelte

diff --git a/src/routes/dataset/model-check/ModelItem.svelte b/src/routes/dataset/model-check/ModelItem.svelte
new file mode 100644
index 0000000..f376cd1
--- /dev/null
+++ b/src/routes/dataset/model-check/ModelItem.svelte
@@ -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>