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

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

web/src/lib/components/analysis/TopExpenses.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import * as Card from '$lib/components/ui/card';
+  import Flame from '@lucide/svelte/icons/flame';
+  import type { BillRecord } from '$lib/api';
+
+  interface Props {
+    records: BillRecord[];
+  }
+
+  let { records }: Props = $props();
+</script>
+
+<Card.Root>
+  <Card.Header>
+    <Card.Title class="flex items-center gap-2">
+      <Flame class="h-5 w-5 text-orange-500" />
+      Top 10 单笔支出
+    </Card.Title>
+    <Card.Description>最大的单笔支出记录</Card.Description>
+  </Card.Header>
+  <Card.Content>
+    <div class="space-y-3">
+      {#each records as record, i}
+        <div class="flex items-center gap-4 p-3 rounded-lg bg-muted/50">
+          <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-sm">
+            {i + 1}
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="font-medium truncate">{record.merchant}</p>
+            <p class="text-sm text-muted-foreground truncate">
+              {record.description || record.category}
+            </p>
+          </div>
+          <div class="font-mono font-bold text-red-600 dark:text-red-400">
+            ¥{record.amount}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </Card.Content>
+</Card.Root>
+
+