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

diff --git a/frontend/src/components/CodeEditor.svelte b/frontend/src/components/CodeEditor.svelte
index 544a6a4..da11555 100644
--- a/frontend/src/components/CodeEditor.svelte
+++ b/frontend/src/components/CodeEditor.svelte
@@ -15,6 +15,7 @@
   }
   let { value, onInput, height = 420, readOnly = false, label }: Props = $props();
 
+  const hostClass = 'rounded-md border border-border overflow-hidden bg-card [&>.cm-editor]:min-h-[60px]';
   let host: HTMLDivElement;
   let view: EditorView | null = null;
   let applyingExternal = false;
@@ -41,8 +42,8 @@
           EditorView.theme({
             '&': {
               fontSize: '13px',
-              background: 'var(--surface)',
-              color: 'var(--text)',
+              background: 'var(--card)',
+              color: 'var(--foreground)',
               fontFamily:
                 "ui-monospace, 'SF Mono', Menlo, Consolas, 'Noto Sans Mono CJK SC', monospace"
             },
@@ -50,12 +51,12 @@
             '.cm-scroller': { lineHeight: '1.55' },
             '&.cm-focused': { outline: 'none' },
             '.cm-gutters': {
-              background: 'var(--surface)',
+              background: 'var(--card)',
               border: 'none',
-              color: 'var(--text-3)'
+              color: 'var(--muted-foreground)'
             },
-            '.cm-activeLine': { background: 'var(--surface-2)' },
-            '.cm-activeLineGutter': { background: 'var(--surface-2)' }
+            '.cm-activeLine': { background: 'var(--secondary)' },
+            '.cm-activeLineGutter': { background: 'var(--secondary)' }
           }),
           EditorView.updateListener.of((u) => {
             if (applyingExternal) return;
@@ -88,17 +89,7 @@
 </script>
 
 <div>
-  {#if label}<span class="hint editor-label">{label}</span>{/if}
-  <div bind:this={host} class="cm-host"></div>
+  {#if label}<span class="block text-sm text-muted-foreground mb-1">{label}</span>{/if}
+  <div bind:this={host} class={hostClass}></div>
 </div>
 
-<style>
-  .cm-host {
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius);
-    overflow: hidden;
-    background: var(--surface);
-  }
-  .cm-host :global(.cm-editor) { min-height: 60px; }
-  .editor-label { display: block; margin-bottom: 0.25rem; }
-</style>