[变更性质] 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, 8 insertions, 33 deletions

diff --git a/frontend/src/components/DiffView.svelte b/frontend/src/components/DiffView.svelte
index cf0c1be..131d2e3 100644
--- a/frontend/src/components/DiffView.svelte
+++ b/frontend/src/components/DiffView.svelte
@@ -26,46 +26,21 @@
   });
 </script>
 
-<div class="diff">
-  <div class="legend">
-    <span><i class="sw a"></i>新增（{afterLabel}）</span>
-    <span><i class="sw d"></i>删除（{beforeLabel}）</span>
+<div>
+  <div class="text-muted-foreground text-sm mb-1 flex gap-4">
+    <span><i class="inline-block size-2.5 rounded-sm mr-1 bg-emerald-200" aria-hidden="true"></i>新增（{afterLabel}）</span>
+    <span><i class="inline-block size-2.5 rounded-sm mr-1 bg-red-200" aria-hidden="true"></i>删除（{beforeLabel}）</span>
   </div>
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		<div class="body" style="max-height:{maxHeight}px" tabindex="0" aria-label="代码差异" role="region">
+  <div class="overflow-auto bg-card border border-border rounded-md py-2 px-3" style:max-height="{maxHeight}px" tabindex="0" aria-label="代码差异" role="region">
     {#each lines as l, i (i)}
       {#if l.t === 'a'}
-        <span class="ln add" aria-hidden="true"></span><span class="code add">+{l.text}</span>
+        <span class="select-none" aria-hidden="true"></span><span class="font-mono text-xs inline-block w-full whitespace-pre-wrap break-all bg-emerald-50 text-emerald-900">+{l.text}</span>
       {:else if l.t === 'd'}
-        <span class="ln del" aria-hidden="true"></span><span class="code del">−{l.text}</span>
+        <span class="select-none" aria-hidden="true"></span><span class="font-mono text-xs inline-block w-full whitespace-pre-wrap break-all bg-red-50 text-red-900">−{l.text}</span>
       {:else}
-        <span class="ln" aria-hidden="true"> </span><span class="code">{l.text}</span>
+        <span class="select-none" aria-hidden="true"> </span><span class="font-mono text-xs inline-block w-full whitespace-pre-wrap break-all">{l.text}</span>
       {/if}
     {/each}
   </div>
 </div>
-
-<style>
-  .diff .legend {
-    color: var(--text-3);
-    font-size: 0.8rem;
-    margin-bottom: 0.4rem;
-    display: flex;
-    gap: 1rem;
-  }
-  .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; }
-  .sw.a { background: #c7f0e6; }
-  .sw.d { background: #fbd4d0; }
-  .body {
-    overflow: auto;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 0.5rem 0.7rem;
-  }
-  .body .code { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; display: inline-block; width: 100%; }
-  .add { background: #eafaf5; color: #14532d; }
-  .del { background: #fdf0ee; color: #7f1d1d; }
-  .ln { user-select: none; }
-  .code.add::before, .code.del::before { opacity: 0.6; }
-</style>