feat: 改进智能复核页面,显示所有待复核数据

This commit is contained in:
clz
2026-01-10 21:24:44 +08:00
parent 6374f55aa1
commit 4884993d27
2 changed files with 80 additions and 69 deletions

View File

@@ -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();
}

View File

@@ -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>