billai/web/src/routes/review/+page.svelte

<script lang="ts">
  import { page } from '$app/stores';
  import { onMount } from 'svelte';
  import { getReviewRecords, type ReviewRecord, type ReviewData } 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';
  
  let fileName = $state('');
  let isLoading = $state(false);
  let errorMessage = $state('');
  let reviewData: ReviewData | null = $state(null);
  let filterLevel = $state<'all' | 'HIGH' | 'LOW'>('all');
  
  // 从 URL 获取文件名
  onMount(() => {
    const urlFileName = $page.url.searchParams.get('file');
    if (urlFileName) {
      fileName = urlFileName;
      loadReviewData();
    }
  });
  
  async function loadReviewData() {
    if (!fileName) return;
    
    isLoading = true;
    errorMessage = '';
    
    try {
      const result = await getReviewRecords(fileName);
      if (result.result && result.data) {
        reviewData = result.data;
      } else {
        errorMessage = result.message || '获取数据失败';
      }
    } catch (err) {
      errorMessage = err instanceof Error ? err.message : '网络错误';
    } finally {
      isLoading = false;
    }
  }
  
  function handleSearch() {
    loadReviewData();
  }
  
  // 过滤后的记录
  let filteredRecords = $derived(
    reviewData?.records.filter(r => 
      filterLevel === 'all' || r.review_level === filterLevel
    ) || []
  );
</script>

<svelte:head>
  <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>
    <Button onclick={handleSearch} disabled={isLoading}>
      {#if isLoading}
        <Loader2 class="mr-2 h-4 w-4 animate-spin" />
        查询中
      {:else}
        <Search class="mr-2 h-4 w-4" />
        查询
      {/if}
    </Button>
  </div>

  <!-- 错误提示 -->
  {#if errorMessage}
    <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}
    <!-- 统计卡片 -->
    <div class="grid gap-4 md:grid-cols-3">
      <Card.Root>
        <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
          <Card.Title class="text-sm font-medium">待复核总数</Card.Title>
          <Clock class="h-4 w-4 text-muted-foreground" />
        </Card.Header>
        <Card.Content>
          <div class="text-2xl font-bold">{reviewData.total}</div>
          <p class="text-xs text-muted-foreground">需要人工确认的记录</p>
        </Card.Content>
      </Card.Root>

      <Card.Root class="border-red-200 dark:border-red-900">
        <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
          <Card.Title class="text-sm font-medium">高优先级</Card.Title>
          <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>
          <p class="text-xs text-muted-foreground">无法确定分类</p>
        </Card.Content>
      </Card.Root>

      <Card.Root class="border-yellow-200 dark:border-yellow-900">
        <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
          <Card.Title class="text-sm font-medium">低优先级</Card.Title>
          <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>
          <p class="text-xs text-muted-foreground">分类可能有变更</p>
        </Card.Content>
      </Card.Root>
    </div>

    <!-- 过滤器和表格 -->
    <Card.Root>
      <Card.Header>
        <div class="flex items-center justify-between">
          <Card.Title>记录列表</Card.Title>
          <div class="flex gap-2">
            <Button 
              variant={filterLevel === 'all' ? 'default' : 'outline'}
              size="sm"
              onclick={() => filterLevel = 'all'}
            >
              全部 ({reviewData.total})
            </Button>
            <Button 
              variant={filterLevel === 'HIGH' ? 'destructive' : 'outline'}
              size="sm"
              onclick={() => filterLevel = 'HIGH'}
            >
              高优先级 ({reviewData.high})
            </Button>
            <Button 
              variant={filterLevel === 'LOW' ? 'secondary' : 'outline'}
              size="sm"
              onclick={() => filterLevel = 'LOW'}
            >
              低优先级 ({reviewData.low})
            </Button>
          </div>
        </div>
      </Card.Header>
      <Card.Content>
        {#if filteredRecords.length > 0}
          <div class="rounded-md border">
            <Table.Root>
              <Table.Header>
                <Table.Row>
                  <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.Row>
              </Table.Header>
              <Table.Body>
                {#each filteredRecords as record}
                  <Table.Row>
                    <Table.Cell class="text-muted-foreground text-sm">
                      {record.time}
                    </Table.Cell>
                    <Table.Cell>
                      <Badge variant="secondary">{record.category}</Badge>
                    </Table.Cell>
                    <Table.Cell class="max-w-[200px] truncate" title={record.merchant}>
                      {record.merchant}
                    </Table.Cell>
                    <Table.Cell class="max-w-[200px] truncate text-muted-foreground" title={record.description}>
                      {record.description || '-'}
                    </Table.Cell>
                    <Table.Cell>
                      <span class={record.income_expense === '支出' ? 'text-red-500' : 'text-green-500'}>
                        {record.income_expense}
                      </span>
                    </Table.Cell>
                    <Table.Cell class="text-right font-mono font-medium">
                      ¥{record.amount}
                    </Table.Cell>
                    <Table.Cell>
                      <Badge variant={record.review_level === 'HIGH' ? 'destructive' : 'outline'}>
                        {record.review_level}
                      </Badge>
                    </Table.Cell>
                  </Table.Row>
                {/each}
              </Table.Body>
            </Table.Root>
          </div>
        {:else}
          <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>
          </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>