From 61f5c545953bb4ee20b123bf9671ac35d7f1f3c1 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 12:03:32 +0800
Subject: [变更性质] feat(frontend) [新增功能] round3 页面组件全量迁移
 shadcn-svelte（12 页面 + Modal/DatasetWizard/DatasetCard/Status） [实现方案]
 .btn→Button、.banner→Alert、table.data→Table.Root、.badge→Badge、.tabs→Tabs.Root、.metric-card/form.card→Card.Root；ProjectStrategyTab
 div 配对修复 [影响范围] src/pages/*.svelte、src/components/*.svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Status.svelte | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'frontend/src/components/Status.svelte')

diff --git a/frontend/src/components/Status.svelte b/frontend/src/components/Status.svelte
index 019c224..6ae2cfb 100644
--- a/frontend/src/components/Status.svelte
+++ b/frontend/src/components/Status.svelte
@@ -16,12 +16,12 @@
     {busyText}
   </div>
 {:else if error}
-  <div class="banner error" role="alert">
+  <Alert variant="destructive" class="bg-[var(--danger-soft)] text-[var(--destructive)] border-[#f2c7c7]">
     <span aria-hidden="true">⚠</span>
     <span>{error}</span>
-  </div>
+  </Alert>
 {:else if empty !== null && empty !== undefined && empty !== false}
-  <div class="state empty">
+  <div class="state-empty">
     <p class="empty-title">{empty}</p>
     {#if emptyHint}<p class="hint">{emptyHint}</p>{/if}
   </div>
@@ -29,11 +29,15 @@
 {#if warnings && warnings.length > 0}
   <div class="stack">
     {#each warnings as w, i (i)}
-      <div class="banner warn"><span aria-hidden="true">△</span><span>{w}</span></div>
+      <Alert variant="default" class="bg-[var(--warn-soft)] text-[var(--warn)] border-[#f0ddb4]"><span aria-hidden="true">△</span><span>{w}</span></Alert>
     {/each}
   </div>
 {/if}
 
+<script lang="ts" module>
+  import { Alert } from '$lib/components/ui/alert';
+</script>
+
 <style>
   .status {
     color: var(--text-3);
@@ -54,7 +58,7 @@
   @keyframes spin {
     to { transform: rotate(360deg); }
   }
-  .empty {
+  .state-empty {
     text-align: center;
     padding: 2.2rem 1rem;
     border: 1px dashed var(--border-strong);
-- 
cgit v1.2.3