feat(analysis): 增强图表交互功能

- 分类支出排行: 饼图支持点击类别切换显示/隐藏，百分比动态重新计算
- 每日支出趋势: 图例支持点击切换类别显示，隐藏类别不参与堆叠计算
- Dialog列表: 添加列排序功能（时间/商家/描述/金额）
- Dialog列表: 添加分页功能，每页10条（分类）/8条（每日）
- 饼图hover效果: 扇形放大、阴影增强、中心显示详情

web/src/routes/+layout.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import '../app.css';
+  import { page } from '$app/stores';
+  import * as Sidebar from '$lib/components/ui/sidebar';
+  import { Button } from '$lib/components/ui/button';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+  import * as Avatar from '$lib/components/ui/avatar';
+  import { Separator } from '$lib/components/ui/separator';
+  import Upload from '@lucide/svelte/icons/upload';
+  import ClipboardCheck from '@lucide/svelte/icons/clipboard-check';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import BarChart3 from '@lucide/svelte/icons/bar-chart-3';
+  import Settings from '@lucide/svelte/icons/settings';
+  import HelpCircle from '@lucide/svelte/icons/help-circle';
+  import Search from '@lucide/svelte/icons/search';
+  import Moon from '@lucide/svelte/icons/moon';
+  import Sun from '@lucide/svelte/icons/sun';
+  import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+
+	let { children } = $props();
+  
+  let darkMode = $state(false);
+  
+  function toggleDarkMode() {
+    darkMode = !darkMode;
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }
+  
+  const mainNavItems = [
+    { href: '/', label: '上传', icon: Upload },
+    { href: '/review', label: '复核', icon: ClipboardCheck },
+    { href: '/bills', label: '账单', icon: FileText },
+    { href: '/analysis', label: '分析', icon: BarChart3 },
+  ];
+  
+  function isActive(href: string, pathname: string): boolean {
+    if (href === '/') return pathname === '/';
+    return pathname.startsWith(href);
+  }
+</script>
+
+<Sidebar.Provider>
+  <Sidebar.Root>
+    <Sidebar.Header>
+      <Sidebar.Menu>
+        <Sidebar.MenuItem>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              {#snippet child({ props })}
+                <Sidebar.MenuButton
+                  {...props}
+                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                  <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                    <span class="text-lg">💰</span>
+                  </div>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">BillAI</span>
+                    <span class="truncate text-xs text-muted-foreground">智能账单分析</span>
+                  </div>
+                  <ChevronsUpDown class="ml-auto" />
+                </Sidebar.MenuButton>
+              {/snippet}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+              side="bottom"
+              align="end"
+              sideOffset={4}
+            >
+              <DropdownMenu.Label class="text-xs text-muted-foreground">
+                版本信息
+              </DropdownMenu.Label>
+              <DropdownMenu.Item>
+                <span class="mr-2">📦</span>
+                v0.1.0 Beta
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </Sidebar.MenuItem>
+      </Sidebar.Menu>
+    </Sidebar.Header>
+
+    <Sidebar.Content>
+      <Sidebar.Group>
+        <Sidebar.GroupLabel>主要功能</Sidebar.GroupLabel>
+        <Sidebar.GroupContent>
+          <Sidebar.Menu>
+            {#each mainNavItems as item}
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton 
+                  isActive={isActive(item.href, $page.url.pathname)}
+                >
+                  {#snippet child({ props })}
+                    <a href={item.href} {...props}>
+                      <item.icon class="size-4" />
+                      <span>{item.label}</span>
+                    </a>
+                  {/snippet}
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+            {/each}
+          </Sidebar.Menu>
+        </Sidebar.GroupContent>
+      </Sidebar.Group>
+
+      <Sidebar.Group>
+        <Sidebar.GroupLabel>系统</Sidebar.GroupLabel>
+        <Sidebar.GroupContent>
+          <Sidebar.Menu>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <button {...props} onclick={toggleDarkMode}>
+                    {#if darkMode}
+                      <Sun class="size-4" />
+                      <span>浅色模式</span>
+                    {:else}
+                      <Moon class="size-4" />
+                      <span>深色模式</span>
+                    {/if}
+                  </button>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <a href="/settings" {...props}>
+                    <Settings class="size-4" />
+                    <span>设置</span>
+                  </a>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <a href="/help" {...props}>
+                    <HelpCircle class="size-4" />
+                    <span>帮助</span>
+                  </a>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+          </Sidebar.Menu>
+        </Sidebar.GroupContent>
+      </Sidebar.Group>
+    </Sidebar.Content>
+
+    <Sidebar.Footer>
+      <Sidebar.Menu>
+        <Sidebar.MenuItem>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              {#snippet child({ props })}
+                <Sidebar.MenuButton
+                  {...props}
+                  class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                  <Avatar.Root class="h-8 w-8 rounded-lg">
+                    <Avatar.Fallback class="rounded-lg bg-gradient-to-br from-primary to-chart-1 text-primary-foreground">
+                      U
+                    </Avatar.Fallback>
+                  </Avatar.Root>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">用户</span>
+                    <span class="truncate text-xs text-muted-foreground">user@example.com</span>
+                  </div>
+                  <ChevronsUpDown class="ml-auto size-4" />
+                </Sidebar.MenuButton>
+              {/snippet}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+              side="bottom"
+              align="end"
+              sideOffset={4}
+            >
+              <DropdownMenu.Label class="p-0 font-normal">
+                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar.Root class="h-8 w-8 rounded-lg">
+                    <Avatar.Fallback class="rounded-lg bg-gradient-to-br from-primary to-chart-1 text-primary-foreground">
+                      U
+                    </Avatar.Fallback>
+                  </Avatar.Root>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">用户</span>
+                    <span class="truncate text-xs text-muted-foreground">user@example.com</span>
+                  </div>
+                </div>
+              </DropdownMenu.Label>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Group>
+                <DropdownMenu.Item>
+                  <Settings class="mr-2 size-4" />
+                  账户设置
+                </DropdownMenu.Item>
+              </DropdownMenu.Group>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </Sidebar.MenuItem>
+      </Sidebar.Menu>
+    </Sidebar.Footer>
+    <Sidebar.Rail />
+  </Sidebar.Root>
+
+  <Sidebar.Inset>
+    <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+      <Sidebar.Trigger class="-ml-1" />
+      <Separator orientation="vertical" class="mr-2 h-4" />
+      <div class="flex items-center gap-2">
+        <Search class="size-4 text-muted-foreground" />
+        <span class="text-sm text-muted-foreground">搜索...</span>
+      </div>
+      <div class="ml-auto flex items-center gap-2">
+        <div class="flex items-center gap-1.5 text-sm">
+          <span class="relative flex h-2 w-2">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+          <span class="text-muted-foreground">服务运行中</span>
+        </div>
+      </div>
+    </header>
+
+    <main class="flex-1 p-6">
+{@render children()}
+    </main>
+  </Sidebar.Inset>
+</Sidebar.Provider>

web/src/routes/+page.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+  import { uploadBill, type UploadResponse } 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 Upload from '@lucide/svelte/icons/upload';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import CheckCircle from '@lucide/svelte/icons/check-circle';
+  import X from '@lucide/svelte/icons/x';
+  import Download from '@lucide/svelte/icons/download';
+  import ClipboardCheck from '@lucide/svelte/icons/clipboard-check';
+  import TrendingUp from '@lucide/svelte/icons/trending-up';
+  import TrendingDown from '@lucide/svelte/icons/trending-down';
+  import Loader2 from '@lucide/svelte/icons/loader-2';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  
+  let isDragOver = $state(false);
+  let selectedFile: File | null = $state(null);
+  let isUploading = $state(false);
+  let uploadResult: UploadResponse | null = $state(null);
+  let errorMessage = $state('');
+  
+  // 模拟统计数据
+  const stats = [
+    { 
+      title: '本月支出', 
+      value: '¥12,580.00', 
+      change: '+12.5%', 
+      trend: 'up',
+      description: '较上月增加'
+    },
+    { 
+      title: '本月收入', 
+      value: '¥25,000.00', 
+      change: '+8.2%', 
+      trend: 'up',
+      description: '较上月增加'
+    },
+    { 
+      title: '待复核', 
+      value: '23', 
+      change: '-15%', 
+      trend: 'down',
+      description: '需要人工确认'
+    },
+    { 
+      title: '已处理账单', 
+      value: '156', 
+      change: '+25%', 
+      trend: 'up',
+      description: '累计处理记录'
+    },
+  ];
+  
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = true;
+  }
+  
+  function handleDragLeave() {
+    isDragOver = false;
+  }
+  
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragOver = false;
+    
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      selectFile(files[0]);
+    }
+  }
+  
+  function handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      selectFile(input.files[0]);
+    }
+  }
+  
+  function selectFile(file: File) {
+    if (!file.name.endsWith('.csv')) {
+      errorMessage = '请选择 CSV 格式的账单文件';
+      return;
+    }
+    selectedFile = file;
+    errorMessage = '';
+    uploadResult = null;
+  }
+  
+  function clearFile() {
+    selectedFile = null;
+    uploadResult = null;
+    errorMessage = '';
+  }
+  
+  async function handleUpload() {
+    if (!selectedFile) return;
+    
+    isUploading = true;
+    errorMessage = '';
+    
+    try {
+      const result = await uploadBill(selectedFile);
+      if (result.result) {
+        uploadResult = result;
+      } else {
+        errorMessage = result.message || '上传失败';
+      }
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : '网络错误';
+    } finally {
+      isUploading = false;
+    }
+  }
+  
+  function formatFileSize(bytes: number): string {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  }
+</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="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+    {#each stats as stat}
+      <Card.Root>
+        <Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <Card.Title class="text-sm font-medium">{stat.title}</Card.Title>
+          {#if stat.trend === 'up'}
+            <TrendingUp class="h-4 w-4 text-green-500" />
+          {:else}
+            <TrendingDown class="h-4 w-4 text-red-500" />
+          {/if}
+        </Card.Header>
+        <Card.Content>
+          <div class="text-2xl font-bold">{stat.value}</div>
+          <p class="text-xs text-muted-foreground">
+            <span class={stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}>
+              {stat.change}
+            </span>
+            {' '}{stat.description}
+          </p>
+        </Card.Content>
+      </Card.Root>
+    {/each}
+  </div>
+
+  <div class="grid gap-6 lg:grid-cols-2">
+    <!-- 上传区域 -->
+    <Card.Root>
+      <Card.Header>
+        <Card.Title>上传账单</Card.Title>
+        <Card.Description>支持支付宝、微信账单 CSV 文件</Card.Description>
+      </Card.Header>
+      <Card.Content class="space-y-4">
+        <!-- 拖拽上传区域 -->
+        <div
+          class="relative border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer
+            {isDragOver ? 'border-primary bg-primary/5' : 'border-muted-foreground/25 hover:border-primary/50'}"
+          role="button"
+          tabindex="0"
+          ondragover={handleDragOver}
+          ondragleave={handleDragLeave}
+          ondrop={handleDrop}
+          onclick={() => document.getElementById('file-input')?.click()}
+          onkeydown={(e) => e.key === 'Enter' && document.getElementById('file-input')?.click()}
+        >
+          <input 
+            type="file" 
+            id="file-input"
+            accept=".csv"
+            onchange={handleFileSelect}
+            hidden
+          />
+          
+          {#if selectedFile}
+            <div class="flex items-center justify-center gap-4">
+              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                <FileText class="h-6 w-6 text-primary" />
+              </div>
+              <div class="text-left">
+                <p class="font-medium">{selectedFile.name}</p>
+                <p class="text-sm text-muted-foreground">{formatFileSize(selectedFile.size)}</p>
+              </div>
+              <Button 
+                variant="ghost" 
+                size="icon"
+                class="ml-auto"
+                onclick={(e) => { e.stopPropagation(); clearFile(); }}
+              >
+                <X class="h-4 w-4" />
+              </Button>
+            </div>
+          {:else}
+            <div class="flex flex-col items-center gap-3">
+              <div class="flex h-14 w-14 items-center justify-center rounded-full bg-muted">
+                <Upload class="h-6 w-6 text-muted-foreground" />
+              </div>
+              <div>
+                <p class="font-medium">
+                  {isDragOver ? '松开鼠标上传文件' : '拖拽文件到这里，或点击选择'}
+                </p>
+                <p class="text-sm text-muted-foreground">支持 .csv 格式</p>
+              </div>
+            </div>
+          {/if}
+        </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}
+
+        <!-- 上传按钮 -->
+        <Button 
+          class="w-full"
+          disabled={!selectedFile || isUploading}
+          onclick={handleUpload}
+        >
+          {#if isUploading}
+            <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+            处理中...
+          {:else}
+            <Upload class="mr-2 h-4 w-4" />
+            开始处理
+          {/if}
+        </Button>
+      </Card.Content>
+    </Card.Root>
+
+    <!-- 处理结果 -->
+    <Card.Root>
+      <Card.Header>
+        <Card.Title>处理结果</Card.Title>
+        <Card.Description>账单分析完成后将显示在这里</Card.Description>
+      </Card.Header>
+      <Card.Content>
+        {#if uploadResult?.result}
+          <div class="space-y-4">
+            <div class="flex items-center gap-3 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-900 dark:bg-green-950">
+              <CheckCircle class="h-5 w-5 text-green-600 dark:text-green-400" />
+              <div>
+                <p class="font-medium text-green-800 dark:text-green-200">处理成功</p>
+                <p class="text-sm text-green-600 dark:text-green-400">账单已分析完成</p>
+              </div>
+            </div>
+
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <span class="text-sm text-muted-foreground">账单类型</span>
+                <Badge variant="secondary">
+                  {uploadResult.data?.bill_type === 'alipay' ? '支付宝' : '微信'}
+                </Badge>
+              </div>
+              <div class="flex items-center justify-between">
+                <span class="text-sm text-muted-foreground">输出文件</span>
+                <span class="text-sm font-medium">{uploadResult.data?.file_name}</span>
+              </div>
+            </div>
+
+            <div class="flex gap-3 pt-2">
+              <a 
+                href={`http://localhost:8080${uploadResult.data?.file_url}`} 
+                download
+                class="flex-1"
+              >
+                <Button variant="outline" class="w-full">
+                  <Download class="mr-2 h-4 w-4" />
+                  下载结果
+                </Button>
+              </a>
+              <a 
+                href={`/review?file=${encodeURIComponent(uploadResult.data?.file_name || '')}`}
+                class="flex-1"
+              >
+                <Button class="w-full">
+                  <ClipboardCheck class="mr-2 h-4 w-4" />
+                  查看复核
+                </Button>
+              </a>
+            </div>
+          </div>
+        {:else}
+          <div class="flex flex-col items-center justify-center py-12 text-center">
+            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+              <FileText class="h-8 w-8 text-muted-foreground" />
+            </div>
+            <p class="text-muted-foreground">暂无处理结果</p>
+            <p class="text-sm text-muted-foreground">上传账单后将显示分析结果</p>
+          </div>
+        {/if}
+      </Card.Content>
+    </Card.Root>
+  </div>
+</div>

web/src/routes/analysis/+page.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { fetchBillContent, type BillRecord } from '$lib/api';
+  import { Button } from '$lib/components/ui/button';
+  import { Badge } from '$lib/components/ui/badge';
+  import { Input } from '$lib/components/ui/input';
+  import BarChart3 from '@lucide/svelte/icons/bar-chart-3';
+  import Loader2 from '@lucide/svelte/icons/loader-2';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  
+  // 分析组件
+  import {
+    OverviewCards,
+    DailyTrendChart,
+    CategoryRanking,
+    MonthlyTrend,
+    TopExpenses,
+    EmptyState
+  } from '$lib/components/analysis';
+  
+  // 数据处理服务
+  import { 
+    calculateCategoryStats, 
+    calculateMonthlyStats, 
+    calculateDailyExpenseData, 
+    calculateTotalStats,
+    calculatePieChartData,
+    getTopExpenses
+  } from '$lib/services/analysis';
+  
+  // 演示数据
+  import { demoRecords } from '$lib/data/demo';
+
+  // 状态
+  let fileName = $state('');
+  let isLoading = $state(false);
+  let errorMessage = $state('');
+  let records: BillRecord[] = $state([]);
+  let isDemo = $state(false);
+  
+  // 派生数据
+  let categoryStats = $derived(calculateCategoryStats(records));
+  let monthlyStats = $derived(calculateMonthlyStats(records));
+  let dailyExpenseData = $derived(calculateDailyExpenseData(records));
+  let totalStats = $derived(calculateTotalStats(records));
+  let pieChartData = $derived(calculatePieChartData(categoryStats, totalStats.expense));
+  let topExpenses = $derived(getTopExpenses(records, 10));
+
+  async function loadData() {
+    if (!fileName) return;
+    
+    isLoading = true;
+    errorMessage = '';
+    isDemo = false;
+    
+    try {
+      records = await fetchBillContent(fileName);
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : '加载失败';
+    } finally {
+      isLoading = false;
+    }
+  }
+  
+  function loadDemoData() {
+    isDemo = true;
+    errorMessage = '';
+    records = demoRecords;
+  }
+</script>
+
+<svelte:head>
+  <title>数据分析 - BillAI</title>
+</svelte:head>
+
+<div class="space-y-6">
+  <!-- 页面标题 -->
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">数据分析</h1>
+      <p class="text-muted-foreground">可视化你的消费数据，洞察消费习惯</p>
+    </div>
+    {#if isDemo}
+      <Badge variant="secondary" class="text-xs">
+        📊 示例数据
+      </Badge>
+    {/if}
+  </div>
+
+  <!-- 搜索栏 -->
+  <div class="flex gap-3">
+    <div class="relative flex-1">
+      <BarChart3 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' && loadData()}
+      />
+    </div>
+    <Button onclick={loadData} disabled={isLoading}>
+      {#if isLoading}
+        <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+        分析中
+      {:else}
+        <BarChart3 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 records.length > 0}
+    <!-- 总览卡片 -->
+    <OverviewCards {totalStats} {records} />
+
+    <!-- 每日支出趋势图（按分类堆叠） -->
+    <DailyTrendChart {records} />
+
+    <div class="grid gap-6 lg:grid-cols-2">
+      <!-- 分类支出排行 -->
+      <CategoryRanking 
+        {categoryStats} 
+        {pieChartData} 
+        totalExpense={totalStats.expense}
+        {records}
+      />
+
+      <!-- 月度趋势 -->
+      <MonthlyTrend {monthlyStats} />
+    </div>
+
+    <!-- Top 10 支出 -->
+    <TopExpenses records={topExpenses} />
+  {:else if !isLoading}
+    <EmptyState onLoadDemo={loadDemoData} />
+  {/if}
+</div>

web/src/routes/bills/+page.svelte

@@ -0,0 +1,275 @@
+<script lang="ts">
+  import { fetchBillContent, type BillRecord } 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 { Label } from '$lib/components/ui/label';
+  import * as Table from '$lib/components/ui/table';
+  import FolderOpen from '@lucide/svelte/icons/folder-open';
+  import Loader2 from '@lucide/svelte/icons/loader-2';
+  import AlertCircle from '@lucide/svelte/icons/alert-circle';
+  import Search from '@lucide/svelte/icons/search';
+  import Receipt from '@lucide/svelte/icons/receipt';
+  import TrendingDown from '@lucide/svelte/icons/trending-down';
+  import TrendingUp from '@lucide/svelte/icons/trending-up';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import Filter from '@lucide/svelte/icons/filter';
+  
+  let fileName = $state('');
+  let isLoading = $state(false);
+  let errorMessage = $state('');
+  let records: BillRecord[] = $state([]);
+  let filterCategory = $state('all');
+  let filterType = $state<'all' | '支出' | '收入'>('all');
+  let searchText = $state('');
+  
+  async function loadBillData() {
+    if (!fileName) return;
+    
+    isLoading = true;
+    errorMessage = '';
+    
+    try {
+      records = await fetchBillContent(fileName);
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : '加载失败';
+    } finally {
+      isLoading = false;
+    }
+  }
+  
+  // 获取所有分类
+  let categories = $derived([...new Set(records.map(r => r.category))].sort());
+  
+  // 过滤后的记录
+  let filteredRecords = $derived(
+    records.filter(r => {
+      if (filterCategory !== 'all' && r.category !== filterCategory) return false;
+      if (filterType !== 'all' && r.income_expense !== filterType) return false;
+      if (searchText) {
+        const text = searchText.toLowerCase();
+        return r.merchant.toLowerCase().includes(text) || 
+               r.description.toLowerCase().includes(text);
+      }
+      return true;
+    })
+  );
+  
+  // 统计
+  let stats = $derived({
+    total: filteredRecords.length,
+    expense: filteredRecords
+      .filter(r => r.income_expense === '支出')
+      .reduce((sum, r) => sum + parseFloat(r.amount || '0'), 0),
+    income: filteredRecords
+      .filter(r => r.income_expense === '收入')
+      .reduce((sum, r) => sum + parseFloat(r.amount || '0'), 0),
+  });
+</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">
+      <FolderOpen 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' && loadBillData()}
+      />
+    </div>
+    <Button onclick={loadBillData} disabled={isLoading}>
+      {#if isLoading}
+        <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+        加载中
+      {:else}
+        <FolderOpen 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 records.length > 0}
+    <!-- 统计概览 -->
+    <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>
+          <Receipt class="h-4 w-4 text-muted-foreground" />
+        </Card.Header>
+        <Card.Content>
+          <div class="text-2xl font-bold">{stats.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>
+          <TrendingDown class="h-4 w-4 text-red-500" />
+        </Card.Header>
+        <Card.Content>
+          <div class="text-2xl font-bold font-mono text-red-600 dark:text-red-400">
+            ¥{stats.expense.toFixed(2)}
+          </div>
+          <p class="text-xs text-muted-foreground">支出金额汇总</p>
+        </Card.Content>
+      </Card.Root>
+
+      <Card.Root class="border-green-200 dark:border-green-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>
+          <TrendingUp class="h-4 w-4 text-green-500" />
+        </Card.Header>
+        <Card.Content>
+          <div class="text-2xl font-bold font-mono text-green-600 dark:text-green-400">
+            ¥{stats.income.toFixed(2)}
+          </div>
+          <p class="text-xs text-muted-foreground">收入金额汇总</p>
+        </Card.Content>
+      </Card.Root>
+    </div>
+
+    <!-- 筛选和表格 -->
+    <Card.Root>
+      <Card.Header>
+        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+          <Card.Title class="flex items-center gap-2">
+            <Filter class="h-5 w-5" />
+            筛选条件
+          </Card.Title>
+          <div class="flex flex-wrap gap-4">
+            <div class="space-y-1.5">
+              <Label class="text-xs">分类</Label>
+              <select 
+                class="h-9 rounded-md border border-input bg-background px-3 text-sm"
+                bind:value={filterCategory}
+              >
+                <option value="all">全部分类</option>
+                {#each categories as cat}
+                  <option value={cat}>{cat}</option>
+                {/each}
+              </select>
+            </div>
+            <div class="space-y-1.5">
+              <Label class="text-xs">类型</Label>
+              <select 
+                class="h-9 rounded-md border border-input bg-background px-3 text-sm"
+                bind:value={filterType}
+              >
+                <option value="all">全部</option>
+                <option value="支出">支出</option>
+                <option value="收入">收入</option>
+              </select>
+            </div>
+            <div class="space-y-1.5 flex-1 min-w-[200px]">
+              <Label class="text-xs">搜索</Label>
+              <div class="relative">
+                <Search class="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input 
+                  type="text" 
+                  placeholder="商家/商品..."
+                  class="pl-8"
+                  bind:value={searchText}
+                />
+              </div>
+            </div>
+          </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>支付方式</Table.Head>
+                  <Table.Head>状态</Table.Head>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {#each filteredRecords.slice(0, 100) 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-[180px] truncate" title={record.merchant}>
+                      {record.merchant}
+                    </Table.Cell>
+                    <Table.Cell class="max-w-[180px] 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 class="text-muted-foreground text-sm">
+                      {record.payment_method || '-'}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Badge variant="outline" class="text-green-600 border-green-200">
+                        {record.status || '已完成'}
+                      </Badge>
+                    </Table.Cell>
+                  </Table.Row>
+                {/each}
+              </Table.Body>
+            </Table.Root>
+          </div>
+          {#if filteredRecords.length > 100}
+            <p class="text-center text-sm text-muted-foreground mt-4">
+              显示前 100 条记录，共 {filteredRecords.length} 条
+            </p>
+          {/if}
+        {:else}
+          <div class="flex flex-col items-center justify-center py-12 text-center">
+            <FileText 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}
+    <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>

web/src/routes/page.svelte.spec.ts

@@ -0,0 +1,13 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import Page from './+page.svelte';
+
+describe('/+page.svelte', () => {
+	it('should render h1', async () => {
+		render(Page);
+		
+		const heading = page.getByRole('heading', { level: 1 });
+		await expect.element(heading).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,240 @@
+<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>