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

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

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>