From 4884993d27700a6249b770547c5858e3fbcbed20 Mon Sep 17 00:00:00 2001
From: clz <fadinglight9291117@126.com>
Date: Sat, 10 Jan 2026 21:24:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B9=E8=BF=9B=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E5=A4=8D=E6=A0=B8=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E5=BE=85=E5=A4=8D=E6=A0=B8=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lib/api.ts                 |  11 +++
 web/src/routes/review/+page.svelte | 138 ++++++++++++++---------------
 2 files changed, 80 insertions(+), 69 deletions(-)

diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index f5b773f..682d321 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -329,3 +329,14 @@ export async function fetchReviewStats(): Promise<ReviewResponse> {
   
   return response.json();
 }
+
+// 获取所有待复核的账单（完整数据）
+export async function fetchBillsByReviewLevel(): Promise<BillsResponse> {
+  const response = await fetch(`${API_BASE}/api/bills?page=1&page_size=1000&review_level=HIGH,LOW`);
+  
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`);
+  }
+  
+  return response.json();
+}
diff --git a/web/src/routes/review/+page.svelte b/web/src/routes/review/+page.svelte
index 1afef70..150d735 100644
--- a/web/src/routes/review/+page.svelte
+++ b/web/src/routes/review/+page.svelte
@@ -1,111 +1,118 @@
 <script lang="ts">
-  import { page } from '$app/stores';
   import { onMount } from 'svelte';
-  import { getReviewRecords, type ReviewRecord, type ReviewData } from '$lib/api';
+  import { fetchReviewStats, fetchBillsByReviewLevel, type ReviewData, type CleanedBill } from '$lib/api';
   import * as Card from '$lib/components/ui/card';
   import { Button } from '$lib/components/ui/button';
   import { Badge } from '$lib/components/ui/badge';
-  import { Input } from '$lib/components/ui/input';
   import * as Table from '$lib/components/ui/table';
-  import Search from '@lucide/svelte/icons/search';
   import Loader2 from '@lucide/svelte/icons/loader-2';
   import AlertCircle from '@lucide/svelte/icons/alert-circle';
-  import CheckCircle from '@lucide/svelte/icons/check-circle';
   import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
   import Clock from '@lucide/svelte/icons/clock';
   import PartyPopper from '@lucide/svelte/icons/party-popper';
-  import FileText from '@lucide/svelte/icons/file-text';
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw';
   
-  let fileName = $state('');
-  let isLoading = $state(false);
+  let isLoading = $state(true);
   let errorMessage = $state('');
-  let reviewData: ReviewData | null = $state(null);
+  let reviewStats: ReviewData | null = $state(null);
+  let allBills: CleanedBill[] = $state([]);
   let filterLevel = $state<'all' | 'HIGH' | 'LOW'>('all');
   
-  // 从 URL 获取文件名
   onMount(() => {
-    const urlFileName = $page.url.searchParams.get('file');
-    if (urlFileName) {
-      fileName = urlFileName;
-      loadReviewData();
-    }
+    loadReviewData();
   });
   
   async function loadReviewData() {
-    if (!fileName) return;
-    
     isLoading = true;
     errorMessage = '';
     
     try {
-      const result = await getReviewRecords(fileName);
-      if (result.result && result.data) {
-        reviewData = result.data;
+      // 并行加载统计和账单数据
+      const [statsResponse, billsResponse] = await Promise.all([
+        fetchReviewStats(),
+        fetchBillsByReviewLevel()
+      ]);
+      
+      if (statsResponse.result && statsResponse.data) {
+        reviewStats = statsResponse.data;
       } else {
-        errorMessage = result.message || '获取数据失败';
+        errorMessage = statsResponse.message || '获取统计数据失败';
+      }
+      
+      if (billsResponse.result && billsResponse.data?.bills) {
+        // 过滤出有复核等级的账单（HIGH或LOW）
+        allBills = billsResponse.data.bills.filter(bill => 
+          bill.review_level === 'HIGH' || bill.review_level === 'LOW'
+        );
+      } else {
+        errorMessage = billsResponse.message || '获取账单数据失败';
       }
     } catch (err) {
       errorMessage = err instanceof Error ? err.message : '网络错误';
+      console.error('Failed to load review data:', err);
     } finally {
       isLoading = false;
     }
   }
   
-  function handleSearch() {
-    loadReviewData();
-  }
-  
   // 过滤后的记录
   let filteredRecords = $derived(
-    reviewData?.records.filter(r => 
-      filterLevel === 'all' || r.review_level === filterLevel
+    allBills.filter(bill => 
+      filterLevel === 'all' || bill.review_level === filterLevel
     ) || []
   );
+  
+  // 统计数据
+  let totalCount = $derived(reviewStats?.total || 0);
+  let highCount = $derived(reviewStats?.high || 0);
+  let lowCount = $derived(reviewStats?.low || 0);
 </script>
 
 <svelte:head>
-  <title>复核记录 - BillAI</title>
+  <title>智能复核 - BillAI</title>
 </svelte:head>
 
 <div class="space-y-6">
   <!-- 页面标题 -->
-  <div>
-    <h1 class="text-2xl font-bold tracking-tight">复核记录</h1>
-    <p class="text-muted-foreground">系统无法确定分类的交易记录，需要人工复核</p>
-  </div>
-
-  <!-- 搜索栏 -->
-  <div class="flex gap-3">
-    <div class="relative flex-1">
-      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input 
-        type="text" 
-        placeholder="输入文件名..."
-        class="pl-10"
-        bind:value={fileName}
-        onkeydown={(e) => e.key === 'Enter' && handleSearch()}
-      />
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">智能复核</h1>
+      <p class="text-muted-foreground">系统无法确定分类的交易记录，需要人工复核</p>
     </div>
-    <Button onclick={handleSearch} disabled={isLoading}>
+    <Button 
+      variant="outline" 
+      size="sm"
+      onclick={loadReviewData}
+      disabled={isLoading}
+    >
       {#if isLoading}
         <Loader2 class="mr-2 h-4 w-4 animate-spin" />
-        查询中
       {:else}
-        <Search class="mr-2 h-4 w-4" />
-        查询
+        <RefreshCw class="mr-2 h-4 w-4" />
       {/if}
+      刷新
     </Button>
   </div>
 
+  <!-- 加载中状态 -->
+  {#if isLoading}
+    <Card.Root>
+      <Card.Content class="flex flex-col items-center justify-center py-12">
+        <Loader2 class="h-8 w-8 animate-spin text-muted-foreground mb-4" />
+        <p class="text-muted-foreground">加载复核数据中...</p>
+      </Card.Content>
+    </Card.Root>
+  {/if}
+
   <!-- 错误提示 -->
-  {#if errorMessage}
+  {#if errorMessage && !isLoading}
     <div class="flex items-center gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
       <AlertCircle class="h-4 w-4" />
       {errorMessage}
     </div>
   {/if}
 
-  {#if reviewData}
+  {#if reviewStats && !isLoading}
     <!-- 统计卡片 -->
     <div class="grid gap-4 md:grid-cols-3">
       <Card.Root>
@@ -114,7 +121,7 @@
           <Clock class="h-4 w-4 text-muted-foreground" />
         </Card.Header>
         <Card.Content>
-          <div class="text-2xl font-bold">{reviewData.total}</div>
+          <div class="text-2xl font-bold">{totalCount}</div>
           <p class="text-xs text-muted-foreground">需要人工确认的记录</p>
         </Card.Content>
       </Card.Root>
@@ -125,7 +132,7 @@
           <AlertTriangle class="h-4 w-4 text-red-500" />
         </Card.Header>
         <Card.Content>
-          <div class="text-2xl font-bold text-red-600 dark:text-red-400">{reviewData.high}</div>
+          <div class="text-2xl font-bold text-red-600 dark:text-red-400">{highCount}</div>
           <p class="text-xs text-muted-foreground">无法确定分类</p>
         </Card.Content>
       </Card.Root>
@@ -136,7 +143,7 @@
           <AlertCircle class="h-4 w-4 text-yellow-500" />
         </Card.Header>
         <Card.Content>
-          <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{reviewData.low}</div>
+          <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{lowCount}</div>
           <p class="text-xs text-muted-foreground">分类可能有变更</p>
         </Card.Content>
       </Card.Root>
@@ -153,21 +160,21 @@
               size="sm"
               onclick={() => filterLevel = 'all'}
             >
-              全部 ({reviewData.total})
+              全部 ({totalCount})
             </Button>
             <Button 
               variant={filterLevel === 'HIGH' ? 'destructive' : 'outline'}
               size="sm"
               onclick={() => filterLevel = 'HIGH'}
             >
-              高优先级 ({reviewData.high})
+              高优先级 ({highCount})
             </Button>
             <Button 
               variant={filterLevel === 'LOW' ? 'secondary' : 'outline'}
               size="sm"
               onclick={() => filterLevel = 'LOW'}
             >
-              低优先级 ({reviewData.low})
+              低优先级 ({lowCount})
             </Button>
           </div>
         </div>
@@ -178,26 +185,26 @@
             <Table.Root>
               <Table.Header>
                 <Table.Row>
-                  <Table.Head class="w-[160px]">时间</Table.Head>
+                  <Table.Head class="w-[160px]">交易时间</Table.Head>
                   <Table.Head>分类</Table.Head>
                   <Table.Head>交易对方</Table.Head>
                   <Table.Head>商品说明</Table.Head>
                   <Table.Head>收/支</Table.Head>
                   <Table.Head class="text-right">金额</Table.Head>
-                  <Table.Head class="w-[80px]">等级</Table.Head>
+                  <Table.Head class="w-[80px]">优先级</Table.Head>
                 </Table.Row>
               </Table.Header>
               <Table.Body>
                 {#each filteredRecords as record}
                   <Table.Row>
                     <Table.Cell class="text-muted-foreground text-sm">
-                      {record.time}
+                      {record.time ? new Date(record.time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '-'}
                     </Table.Cell>
                     <Table.Cell>
                       <Badge variant="secondary">{record.category}</Badge>
                     </Table.Cell>
                     <Table.Cell class="max-w-[200px] truncate" title={record.merchant}>
-                      {record.merchant}
+                      {record.merchant || '-'}
                     </Table.Cell>
                     <Table.Cell class="max-w-[200px] truncate text-muted-foreground" title={record.description}>
                       {record.description || '-'}
@@ -208,7 +215,7 @@
                       </span>
                     </Table.Cell>
                     <Table.Cell class="text-right font-mono font-medium">
-                      ¥{record.amount}
+                      ¥{record.amount.toFixed(2)}
                     </Table.Cell>
                     <Table.Cell>
                       <Badge variant={record.review_level === 'HIGH' ? 'destructive' : 'outline'}>
@@ -224,17 +231,10 @@
           <div class="flex flex-col items-center justify-center py-12 text-center">
             <PartyPopper class="h-12 w-12 text-muted-foreground mb-4" />
             <p class="text-muted-foreground">没有需要复核的记录</p>
+            <p class="text-sm text-muted-foreground">所有账单已正确分类</p>
           </div>
         {/if}
       </Card.Content>
     </Card.Root>
-  {:else if !isLoading && !errorMessage}
-    <Card.Root>
-      <Card.Content class="flex flex-col items-center justify-center py-16">
-        <FileText class="h-16 w-16 text-muted-foreground mb-4" />
-        <p class="text-lg font-medium">输入文件名查询复核记录</p>
-        <p class="text-sm text-muted-foreground">上传账单后可在此查看需要复核的交易</p>
-      </Card.Content>
-    </Card.Root>
   {/if}
 </div>