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(); 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"> <script lang="ts">
import { page } from '$app/stores';
import { onMount } from 'svelte'; 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 * as Card from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { Badge } from '$lib/components/ui/badge'; import { Badge } from '$lib/components/ui/badge';
import { Input } from '$lib/components/ui/input';
import * as Table from '$lib/components/ui/table'; import * as Table from '$lib/components/ui/table';
import Search from '@lucide/svelte/icons/search';
import Loader2 from '@lucide/svelte/icons/loader-2'; import Loader2 from '@lucide/svelte/icons/loader-2';
import AlertCircle from '@lucide/svelte/icons/alert-circle'; 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 AlertTriangle from '@lucide/svelte/icons/alert-triangle';
import Clock from '@lucide/svelte/icons/clock'; import Clock from '@lucide/svelte/icons/clock';
import PartyPopper from '@lucide/svelte/icons/party-popper'; 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(true);
let isLoading = $state(false);
let errorMessage = $state(''); 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'); let filterLevel = $state<'all' | 'HIGH' | 'LOW'>('all');
// 从 URL 获取文件名
onMount(() => { onMount(() => {
const urlFileName = $page.url.searchParams.get('file'); loadReviewData();
if (urlFileName) {
fileName = urlFileName;
loadReviewData();
}
}); });
async function loadReviewData() { async function loadReviewData() {
if (!fileName) return;
isLoading = true; isLoading = true;
errorMessage = ''; errorMessage = '';
try { try {
const result = await getReviewRecords(fileName); // 并行加载统计和账单数据
if (result.result && result.data) { const [statsResponse, billsResponse] = await Promise.all([
reviewData = result.data; fetchReviewStats(),
fetchBillsByReviewLevel()
]);
if (statsResponse.result && statsResponse.data) {
reviewStats = statsResponse.data;
} else { } 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) { } catch (err) {
errorMessage = err instanceof Error ? err.message : '网络错误'; errorMessage = err instanceof Error ? err.message : '网络错误';
console.error('Failed to load review data:', err);
} finally { } finally {
isLoading = false; isLoading = false;
} }
} }
function handleSearch() {
loadReviewData();
}
// 过滤后的记录 // 过滤后的记录
let filteredRecords = $derived( let filteredRecords = $derived(
reviewData?.records.filter(r => allBills.filter(bill =>
filterLevel === 'all' || r.review_level === filterLevel 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> </script>
<svelte:head> <svelte:head>
<title>复核记录 - BillAI</title> <title>智能复核 - BillAI</title>
</svelte:head> </svelte:head>
<div class="space-y-6"> <div class="space-y-6">
<!-- 页面标题 --> <!-- 页面标题 -->
<div> <div class="flex items-center justify-between">
<h1 class="text-2xl font-bold tracking-tight">复核记录</h1> <div>
<p class="text-muted-foreground">系统无法确定分类的交易记录,需要人工复核</p> <h1 class="text-2xl font-bold tracking-tight">智能复核</h1>
</div> <p class="text-muted-foreground">系统无法确定分类的交易记录,需要人工复核</p>
<!-- 搜索栏 -->
<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> </div>
<Button onclick={handleSearch} disabled={isLoading}> <Button
variant="outline"
size="sm"
onclick={loadReviewData}
disabled={isLoading}
>
{#if isLoading} {#if isLoading}
<Loader2 class="mr-2 h-4 w-4 animate-spin" /> <Loader2 class="mr-2 h-4 w-4 animate-spin" />
查询中
{:else} {:else}
<Search class="mr-2 h-4 w-4" /> <RefreshCw class="mr-2 h-4 w-4" />
查询
{/if} {/if}
刷新
</Button> </Button>
</div> </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"> <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" /> <AlertCircle class="h-4 w-4" />
{errorMessage} {errorMessage}
</div> </div>
{/if} {/if}
{#if reviewData} {#if reviewStats && !isLoading}
<!-- 统计卡片 --> <!-- 统计卡片 -->
<div class="grid gap-4 md:grid-cols-3"> <div class="grid gap-4 md:grid-cols-3">
<Card.Root> <Card.Root>
@@ -114,7 +121,7 @@
<Clock class="h-4 w-4 text-muted-foreground" /> <Clock class="h-4 w-4 text-muted-foreground" />
</Card.Header> </Card.Header>
<Card.Content> <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> <p class="text-xs text-muted-foreground">需要人工确认的记录</p>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
@@ -125,7 +132,7 @@
<AlertTriangle class="h-4 w-4 text-red-500" /> <AlertTriangle class="h-4 w-4 text-red-500" />
</Card.Header> </Card.Header>
<Card.Content> <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> <p class="text-xs text-muted-foreground">无法确定分类</p>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
@@ -136,7 +143,7 @@
<AlertCircle class="h-4 w-4 text-yellow-500" /> <AlertCircle class="h-4 w-4 text-yellow-500" />
</Card.Header> </Card.Header>
<Card.Content> <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> <p class="text-xs text-muted-foreground">分类可能有变更</p>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
@@ -153,21 +160,21 @@
size="sm" size="sm"
onclick={() => filterLevel = 'all'} onclick={() => filterLevel = 'all'}
> >
全部 ({reviewData.total}) 全部 ({totalCount})
</Button> </Button>
<Button <Button
variant={filterLevel === 'HIGH' ? 'destructive' : 'outline'} variant={filterLevel === 'HIGH' ? 'destructive' : 'outline'}
size="sm" size="sm"
onclick={() => filterLevel = 'HIGH'} onclick={() => filterLevel = 'HIGH'}
> >
高优先级 ({reviewData.high}) 高优先级 ({highCount})
</Button> </Button>
<Button <Button
variant={filterLevel === 'LOW' ? 'secondary' : 'outline'} variant={filterLevel === 'LOW' ? 'secondary' : 'outline'}
size="sm" size="sm"
onclick={() => filterLevel = 'LOW'} onclick={() => filterLevel = 'LOW'}
> >
低优先级 ({reviewData.low}) 低优先级 ({lowCount})
</Button> </Button>
</div> </div>
</div> </div>
@@ -178,26 +185,26 @@
<Table.Root> <Table.Root>
<Table.Header> <Table.Header>
<Table.Row> <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>商品说明</Table.Head> <Table.Head>商品说明</Table.Head>
<Table.Head>收/支</Table.Head> <Table.Head>收/支</Table.Head>
<Table.Head class="text-right">金额</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.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{#each filteredRecords as record} {#each filteredRecords as record}
<Table.Row> <Table.Row>
<Table.Cell class="text-muted-foreground text-sm"> <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>
<Table.Cell> <Table.Cell>
<Badge variant="secondary">{record.category}</Badge> <Badge variant="secondary">{record.category}</Badge>
</Table.Cell> </Table.Cell>
<Table.Cell class="max-w-[200px] truncate" title={record.merchant}> <Table.Cell class="max-w-[200px] truncate" title={record.merchant}>
{record.merchant} {record.merchant || '-'}
</Table.Cell> </Table.Cell>
<Table.Cell class="max-w-[200px] truncate text-muted-foreground" title={record.description}> <Table.Cell class="max-w-[200px] truncate text-muted-foreground" title={record.description}>
{record.description || '-'} {record.description || '-'}
@@ -208,7 +215,7 @@
</span> </span>
</Table.Cell> </Table.Cell>
<Table.Cell class="text-right font-mono font-medium"> <Table.Cell class="text-right font-mono font-medium">
¥{record.amount} ¥{record.amount.toFixed(2)}
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Badge variant={record.review_level === 'HIGH' ? 'destructive' : 'outline'}> <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"> <div class="flex flex-col items-center justify-center py-12 text-center">
<PartyPopper class="h-12 w-12 text-muted-foreground mb-4" /> <PartyPopper class="h-12 w-12 text-muted-foreground mb-4" />
<p class="text-muted-foreground">没有需要复核的记录</p> <p class="text-muted-foreground">没有需要复核的记录</p>
<p class="text-sm text-muted-foreground">所有账单已正确分类</p>
</div> </div>
{/if} {/if}
</Card.Content> </Card.Content>
</Card.Root> </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} {/if}
</div> </div>