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

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

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>