feat: 改进智能复核页面,显示所有待复核数据
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user