From a7aab01f051487327e5ce52b6a8905208c546e8c Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 15:49:44 +0800
Subject: [变更性质] 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
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProjectsPage.svelte | 52 ++++++++++++++++------------------
 1 file changed, 24 insertions(+), 28 deletions(-)

(limited to 'frontend/src/pages/ProjectsPage.svelte')

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>
-- 
cgit v1.2.3