From c52a727d11b87d70ec00a7e2569841e6e6abcd9c Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 18:11:53 +0800
Subject: [变更性质] 用户旅程重排：项目首页指标摘要+项目卡、结果页首屏 capital
 三卡+交易分页、数据/策略/回测 CTA 与三态统一，token
 白名单清扫（docs/ui-user-journey-round6.md §1/§2）
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProjectsPage.svelte | 149 ++++++++++++++++++++-------------
 1 file changed, 93 insertions(+), 56 deletions(-)

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

diff --git a/frontend/src/pages/ProjectsPage.svelte b/frontend/src/pages/ProjectsPage.svelte
index 5cbfecf..65137d2 100644
--- a/frontend/src/pages/ProjectsPage.svelte
+++ b/frontend/src/pages/ProjectsPage.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
   import Page from '../components/Page.svelte';
   import Status from '../components/Status.svelte';
-  import ProjectMetricRow from '../components/ProjectMetricRow.svelte';
   import Sparkline from '../components/Sparkline.svelte';
   import { projectsStore } from '../lib/listsStore.svelte';
   import { createProject, listDatasets, listRuns, getAIUsage } from '../lib/client';
   import { sparkFirstLast } from '../lib/dashboardMetrics';
   import { extractStatusMessage } from '../lib/state';
   import { go } from '../lib/router';
-  import { fmtDateTime } from '../lib/format';
+  import { fmtDateTime, fmtPct } from '../lib/format';
   import { Button } from '$lib/components/ui/button';
   import * as Card from '$lib/components/ui/card';
-  import * as Table from '$lib/components/ui/table';
   import { Input } from '$lib/components/ui/input';
   import { Label } from '$lib/components/ui/label';
   import { Alert } from '$lib/components/ui/alert';
+  import { Badge } from '$lib/components/ui/badge';
 
   let busy = $state(false);
   let error = $state<string | null>(null);
@@ -24,21 +23,20 @@
   let newDesc = $state('');
   let createErr = $state<string | null>(null);
 
-  // ---- round2 指标卡行输入 ----
-  // projectsStore 持有项目列表；其余三项在本页拉取一次。
-  // TODO: AI 用量若 /api/ai/usage 不给 totals.requests，占位 "-"（见 ProjectMetricRow）。
+  // ---- 问候行 + 指标摘要（一行小字，不做 4 张大卡）----
   let datasets: { id: string }[] | null = $state(null);
-  let runs: { id: string; status: string; result?: { equity?: { equity: number }[] } | null; project_id?: string }[] | null = $state(null);
+  let runs: { id: string; status: string; created_at?: string; result?: { equity?: { equity: number }[] } | null; project_id?: string }[] | null = $state(null);
   let usage: { totals?: { input_tokens?: number; output_tokens?: number; requests?: number } } | null = $state(null);
   let sparks = $state(new Map<string, { first: number; last: number }>());
 
+  const hours = new Date().getHours();
+  const greeting = hours < 12 ? '早上好' : hours < 18 ? '下午好' : '晚上好';
+
   async function load() {
     busy = true;
     error = null;
     try {
       await projectsStore.load();
-      // 指标卡的三项远程输入并行拉取；任何一项失败不影响项目列表本身。
-      // TODO: 用量字段若有专门计数端点（总数/时长），替换 getAIUsage。
       const [ds, runList, usageRes] = await Promise.allSettled([
         listDatasets(),
         listRuns(),
@@ -55,9 +53,6 @@
     }
   }
 
-  // 159399 QA regression (2026-09-17): load() existed but was wired nowhere,
-  // so the projects page kept rendering the store's stale/empty state and
-  // users saw 还没有项目 despite existing projects on the server.
   $effect(() => {
     void load();
   });
@@ -80,33 +75,61 @@
       creating = false;
     }
   }
+
+  // 项目卡一句话状态
+  const runStatusOf = $derived.by(() => {
+    const m = new Map<string, { running: number; done: number; lastReturn?: string }>();
+    for (const r of runs ?? []) {
+      const e = m.get(r.project_id ?? '') ?? { running: 0, done: 0 };
+      if (r.status === 'running' || r.status === 'queued') e.running++;
+      if (r.status === 'succeeded') {
+        e.done++;
+        const tr = (r.result as { metrics?: { total_return?: number } } | undefined)?.metrics?.total_return;
+        if (tr !== undefined) e.lastReturn = undefined;
+        const tr2 = tr;
+        if (tr2 !== undefined) (e as { lastReturn?: string }).lastReturn = fmtPct(tr2);
+      }
+      m.set(r.project_id ?? '', e);
+    }
+    return m;
+  });
 </script>
 
-<Page title="我的项目" subtitle="每个项目持有独立的策略代码版本、数据集与回测记录" wide>
+<Page title={`${greeting}，${projectsStore.all.length} 个进行中的策略研究`} subtitle="从下面的项目继续你的研究" wide>
   {#snippet actions()}
     <Button variant={showCreate ? 'outline' : 'default'} onclick={() => (showCreate = !showCreate)} aria-expanded={showCreate}>
       {showCreate ? '取消新建' : '新建项目'}
     </Button>
   {/snippet}
 
-  <div class="flex flex-col gap-3">
-    <ProjectMetricRow projects={projectsStore.all} {datasets} {runs} {usage} />
-    <Status {busy} {error} busyText="加载项目列表…" empty={null} />
+  <div class="flex flex-col gap-4 md:gap-6">
+    {#if busy}
+      <Status {busy} busyText="加载项目列表…" skeletonRows={4} empty={null} />
+    {:else if error}
+      <Status {error} empty={null} />
+    {:else}
+      <p class="text-xs text-muted-foreground" data-testid="metrics-summary">
+        {projectsStore.all.length} 个项目 · {(datasets ?? []).length} 个数据集 ·
+        {[...runStatusOf.values()].reduce((a, b) => a + b.running, 0)} 个回测运行中 ·
+        {(runs ?? []).length} 次回测 · AI 请求 {usage?.totals?.requests ?? '—'}
+      </p>
+    {/if}
+
     {#if showCreate}
       <Card.Root class="p-4">
-        <form class="flex flex-col gap-3" onsubmit={create}>
-          <h2 class="text-lg font-semibold">新建项目</h2>
+        <form class="flex flex-col gap-4" onsubmit={create}>
+          <h2 class="text-lg font-semibold m-0">新建项目</h2>
           <div>
             <Label for="pn">项目名称</Label>
-            <Input id="pn" bind:value={newName} required placeholder="例如：双均线ETF轮动" class="mt-1" />
+            <Input id="pn" bind:value={newName} required placeholder="例如：双均线ETF轮动" />
           </div>
           <div>
             <Label for="pd">简介（可选）</Label>
-            <Input id="pd" bind:value={newDesc} placeholder="一句话说明研究思路" class="mt-1" />
+            <Input id="pd" bind:value={newDesc} placeholder="一句话说明研究思路" />
           </div>
-          {#if createErr}<Alert variant="destructive" role="alert">{createErr}</Alert>{/if}
+          {#if createErr}<Alert variant="destructive">{createErr}</Alert>{/if}
           <div>
-            <Button type="submit" disabled={creating || !newName.trim()}>
+            <Button class="w-fit" type="submit" disabled={creating || !newName.trim()}>
               {creating ? '创建中…' : '创建项目'}
             </Button>
           </div>
@@ -114,44 +137,58 @@
       </Card.Root>
     {/if}
 
+    {#if !busy && error && projectsStore.all.length === 0}
+      <Status busy={false} {error} empty={null}>
+        {#snippet errorCta()}
+          <Button onclick={load}>重新加载</Button>
+        {/snippet}
+      </Status>
+    {/if}
+
     {#if !busy && !error && projectsStore.all.length === 0}
-      <Status busy={false} empty="还没有项目" emptyHint="点击右上角「新建项目」开始你的第一个策略研究" />
+      <Status
+        busy={false}
+        empty="还没有项目"
+        emptyHint="从新建项目开始你的第一个策略研究：命名 → 接入数据 → 编写策略 → 回测"
+      >
+        {#snippet emptyCta()}
+          <Button onclick={() => (showCreate = true)}>新建项目</Button>
+        {/snippet}
+      </Status>
     {/if}
 
     {#if projectsStore.all.length > 0}
-      <Card.Root size="sm">
-        <Table.Root>
-          <Table.Header>
-            <Table.Row>
-              <Table.Head>名称</Table.Head>
-              <Table.Head>最近回测</Table.Head>
-              <Table.Head>简介</Table.Head>
-              <Table.Head>版本代</Table.Head>
-              <Table.Head>最近更新</Table.Head>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {#each projectsStore.all as p (p.id)}
-              {@const sp = sparks.get(p.id)}
-              <Table.Row>
-                <Table.Cell>
-                  <a href={`#/projects/${p.id}/data`} data-testid="project-link" class="font-semibold hover:underline">{p.name}</a>
-                </Table.Cell>
-                <Table.Cell>
-                  {#if sp}
-                    <a href={`#/projects/${p.id}/results`} aria-label="查看 {p.name} 最近回测曲线" data-testid="sparkline-cell">
-                      <Sparkline first={sp.first} last={sp.last} up={sp.last >= sp.first} />
-                    </a>
-                  {/if}
-                </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}
-          </Table.Body>
-        </Table.Root>
-      </Card.Root>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6" role="list" aria-label="项目列表">
+        {#each projectsStore.all as p (p.id)}
+          {@const sp = sparks.get(p.id)}
+          {@const st = runStatusOf.get(p.id)}
+          <Card.Root size="sm" role="listitem">
+            <div class="flex justify-between items-start gap-4">
+              <div class="min-w-0 flex-1">
+                <a href={`#/projects/${p.id}/data`} data-testid="project-link" class="text-lg font-semibold hover:underline">
+                  {p.name}
+                </a>
+                <p class="text-xs text-muted-foreground mt-1 truncate">{p.description ?? '—'}</p>
+              </div>
+              <Badge variant={st?.running ? 'outline' : st?.done ? 'secondary' : 'outline'}>
+                {st?.running ? `运行中 ${st.running}` : st?.done ? `最近 ${st.lastReturn ?? '完成'}` : '未回测'}
+              </Badge>
+            </div>
+            <div class="flex items-center gap-4 mt-4">
+              {#if sp}
+                <a href={`#/projects/${p.id}/results`} aria-label="查看 {p.name} 最近回测曲线" data-testid="sparkline-cell">
+                  <Sparkline first={sp.first} last={sp.last} up={sp.last >= sp.first} />
+                </a>
+                <span class="text-xs text-muted-foreground">最近 {runStatusOf.get(p.id)?.lastReturn ?? '完成'}</span>
+              {:else}
+                <span class="text-xs text-muted-foreground">还没有回测记录</span>
+              {/if}
+              <span class="flex-1"></span>
+              <span class="text-xs text-muted-foreground">更新 {fmtDateTime(p.updated_at)}</span>
+            </div>
+          </Card.Root>
+        {/each}
+      </div>
     {/if}
   </div>
 </Page>
-- 
cgit v1.2.3