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

diff --git a/frontend/src/pages/ProjectsPage.svelte b/frontend/src/pages/ProjectsPage.svelte
index d72f905..5cbfecf 100644
--- a/frontend/src/pages/ProjectsPage.svelte
+++ b/frontend/src/pages/ProjectsPage.svelte
@@ -82,34 +82,36 @@
   }
 </script>
 
-<Page title="我的项目" subtitle="每个项目持有独立的策略代码版本、数据集与回测记录">
+<Page title="我的项目" subtitle="每个项目持有独立的策略代码版本、数据集与回测记录" wide>
   {#snippet actions()}
     <Button variant={showCreate ? 'outline' : 'default'} onclick={() => (showCreate = !showCreate)} aria-expanded={showCreate}>
       {showCreate ? '取消新建' : '新建项目'}
     </Button>
   {/snippet}
 
-  <div class="stack">
+  <div class="flex flex-col gap-3">
     <ProjectMetricRow projects={projectsStore.all} {datasets} {runs} {usage} />
     <Status {busy} {error} busyText="加载项目列表…" empty={null} />
     {#if showCreate}
-      <form class="stack bg-card border border-border rounded-[var(--radius)] shadow-sm p-4 text-card-foreground" onsubmit={create}>
-        <h2>新建项目</h2>
-        <div>
-          <Label for="pn">项目名称</Label>
-          <Input id="pn" bind:value={newName} required placeholder="例如：双均线ETF轮动" class="mt-1" />
-        </div>
-        <div>
-          <Label for="pd">简介（可选）</Label>
-          <Input id="pd" bind:value={newDesc} placeholder="一句话说明研究思路" class="mt-1" />
-        </div>
-        {#if createErr}<Alert variant="destructive" class="bg-[var(--danger-soft)] border-[#f2c7c7]" role="alert">{createErr}</Alert>{/if}
-        <div class="row">
-          <Button type="submit" disabled={creating || !newName.trim()}>
-            {creating ? '创建中…' : '创建项目'}
-          </Button>
-        </div>
-      </form>
+      <Card.Root class="p-4">
+        <form class="flex flex-col gap-3" onsubmit={create}>
+          <h2 class="text-lg font-semibold">新建项目</h2>
+          <div>
+            <Label for="pn">项目名称</Label>
+            <Input id="pn" bind:value={newName} required placeholder="例如：双均线ETF轮动" class="mt-1" />
+          </div>
+          <div>
+            <Label for="pd">简介（可选）</Label>
+            <Input id="pd" bind:value={newDesc} placeholder="一句话说明研究思路" class="mt-1" />
+          </div>
+          {#if createErr}<Alert variant="destructive" role="alert">{createErr}</Alert>{/if}
+          <div>
+            <Button type="submit" disabled={creating || !newName.trim()}>
+              {creating ? '创建中…' : '创建项目'}
+            </Button>
+          </div>
+        </form>
+      </Card.Root>
     {/if}
 
     {#if !busy && !error && projectsStore.all.length === 0}
@@ -133,7 +135,7 @@
               {@const sp = sparks.get(p.id)}
               <Table.Row>
                 <Table.Cell>
-                  <a href={`#/projects/${p.id}/data`} class="p-name">{p.name}</a>
+                  <a href={`#/projects/${p.id}/data`} data-testid="project-link" class="font-semibold hover:underline">{p.name}</a>
                 </Table.Cell>
                 <Table.Cell>
                   {#if sp}
@@ -142,8 +144,8 @@
                     </a>
                   {/if}
                 </Table.Cell>
-                <Table.Cell class="hint">{p.description ?? '—'}</Table.Cell>
-                <Table.Cell class="num">{p.draft_generation ?? '—'}</Table.Cell>
+                <Table.Cell class="text-muted-foreground text-sm">{p.description ?? '—'}</Table.Cell>
+                <Table.Cell class="tabular-nums">{p.draft_generation ?? '—'}</Table.Cell>
                 <Table.Cell>{fmtDateTime(p.updated_at)}</Table.Cell>
               </Table.Row>
             {/each}
@@ -153,9 +155,3 @@
     {/if}
   </div>
 </Page>
-
-<style>
-  .p-name { font-weight: 600; color: var(--teal-strong); }
-  .p-name:hover { text-decoration: underline; }
-
-</style>