[变更性质] feat(frontend)

[新增功能] 12 页面组件全量 shadcn：Card/Button/Table/Tabs/Select/Alert；375 底部 Tab Bar 改用 Tabs 组件实现
[实现方案] 页面级手写 class 全部移除（.btn/.banner/table.data/.badge/.tabs/.metric-row/.m-tile/.hint 等改为 shadcn + tailwind 工具类）；Modal/DatasetWizard/DatasetCard/DiffView/CodeEditor/Status/Layout 同步
[影响范围] src/pages/*.svelte、src/components/*.svelte

1 files changed, 7 insertions, 26 deletions

diff --git a/frontend/src/components/Modal.svelte b/frontend/src/components/Modal.svelte
index 209d1ab..efe98da 100644
--- a/frontend/src/components/Modal.svelte
+++ b/frontend/src/components/Modal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Button } from '$lib/components/ui/button';
+  import * as Card from '$lib/components/ui/card';
 
   interface Props {
     title: string;
@@ -25,40 +26,20 @@
 </script>
 
 <div
-  class="overlay"
+  class="fixed inset-0 bg-black/40 grid place-items-center z-50 p-4"
   onclick={onBackdrop}
   role="presentation"
   onkeydown={onKeydown}
   tabindex="-1"
   bind:this={container}
 >
-  <div class="dialog card" role="dialog" aria-modal="true" aria-label={title}>
-    <div class="spread">
-      <h2>{title}</h2>
+  <Card.Root class="w-[min(760px,100%)] max-h-[88vh] overflow-auto p-4">
+    <div class="flex justify-between items-center gap-2">
+      <h2 class="text-lg font-semibold">{title}</h2>
       <Button variant="ghost" size="icon-sm" onclick={onClose} aria-label="关闭">✕</Button>
     </div>
-    <div class="content">
+    <div class="mt-2">
       {@render children?.()}
     </div>
-  </div>
+  </Card.Root>
 </div>
-
-<style>
-  .overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(15, 30, 35, 0.35);
-    display: grid;
-    place-items: center;
-    z-index: 50;
-    padding: 1rem;
-  }
-  .dialog {
-    width: min(760px, 100%);
-    max-height: 88vh;
-    overflow: auto;
-    padding: 1.1rem 1.2rem;
-  }
-
-  .content { margin-top: 0.6rem; }
-</style>