feat: 完善项目架构并增强分析页面功能

- 新增项目文档和 Docker 配置
  - 添加 README.md 和 TODO.md 项目文档
  - 为各服务添加 Dockerfile 和 docker-compose 配置

- 重构后端架构
  - 新增 adapter 层（HTTP/Python 适配器）
  - 新增 repository 层（数据访问抽象）
  - 新增 router 模块统一管理路由
  - 新增账单处理 handler

- 扩展前端 UI 组件库
  - 新增 Calendar、DateRangePicker、Drawer、Popover 等组件
  - 集成 shadcn-svelte 组件库

- 增强分析页面功能
  - 添加时间范围筛选器（支持本月默认值）
  - 修复 DateRangePicker 默认值显示问题
  - 优化数据获取和展示逻辑

- 完善分析器服务
  - 新增 FastAPI 服务接口
  - 改进账单清理器实现

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

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { fetchBillContent, type BillRecord } from '$lib/api';
+  import { onMount } from 'svelte';
+  import { fetchBills, type CleanedBill } 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 { DateRangePicker } from '$lib/components/ui/date-range-picker';
   import Loader2 from '@lucide/svelte/icons/loader-2';
   import AlertCircle from '@lucide/svelte/icons/alert-circle';
   import Search from '@lucide/svelte/icons/search';
@@ -15,56 +16,124 @@
   import TrendingUp from '@lucide/svelte/icons/trending-up';
   import FileText from '@lucide/svelte/icons/file-text';
   import Filter from '@lucide/svelte/icons/filter';
+  import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw';
   
-  let fileName = $state('');
+  // 状态
   let isLoading = $state(false);
   let errorMessage = $state('');
-  let records: BillRecord[] = $state([]);
-  let filterCategory = $state('all');
-  let filterType = $state<'all' | '支出' | '收入'>('all');
+  let records: CleanedBill[] = $state([]);
+  
+  // 分页
+  let currentPage = $state(1);
+  let pageSize = $state(20);
+  let totalRecords = $state(0);
+  let totalPages = $state(0);
+  
+  // 聚合统计（所有筛选条件下的数据）
+  let totalExpense = $state(0);
+  let totalIncome = $state(0);
+  
+  // 计算默认日期（当前月）
+  function getDefaultDates() {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = today.getMonth();
+    const startDate = new Date(year, month, 1).toISOString().split('T')[0];
+    const endDate = today.toISOString().split('T')[0];
+    return { startDate, endDate };
+  }
+  const defaultDates = getDefaultDates();
+  
+  // 筛选
+  let filterCategory = $state('');
+  let filterIncomeExpense = $state('');  // 收支类型
+  let filterBillType = $state('');       // 账单来源
+  let startDate = $state(defaultDates.startDate);
+  let endDate = $state(defaultDates.endDate);
   let searchText = $state('');
   
-  async function loadBillData() {
-    if (!fileName) return;
-    
+  // 分类列表（硬编码常用分类）
+  const categories = [
+    '餐饮美食', '交通出行', '生活服务', '日用百货', 
+    '服饰美容', '医疗健康', '通讯话费', '住房缴费',
+    '文化娱乐', '金融理财', '教育培训', '人情往来', '其他'
+  ];
+  
+  async function loadBills() {
     isLoading = true;
     errorMessage = '';
     
     try {
-      records = await fetchBillContent(fileName);
+      const response = await fetchBills({
+        page: currentPage,
+        page_size: pageSize,
+        start_date: startDate || undefined,
+        end_date: endDate || undefined,
+        category: filterCategory || undefined,
+        type: filterBillType || undefined,
+        income_expense: filterIncomeExpense || undefined,
+      });
+      
+      if (response.result && response.data) {
+        records = response.data.bills || [];
+        totalRecords = response.data.total;
+        totalPages = response.data.pages;
+        totalExpense = response.data.total_expense || 0;
+        totalIncome = response.data.total_income || 0;
+      } else {
+        errorMessage = response.message || '加载失败';
+        records = [];
+      }
     } catch (err) {
       errorMessage = err instanceof Error ? err.message : '加载失败';
+      records = [];
     } finally {
       isLoading = false;
     }
   }
   
-  // 获取所有分类
-  let categories = $derived([...new Set(records.map(r => r.category))].sort());
+  // 切换页面
+  function goToPage(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage = page;
+      loadBills();
+    }
+  }
   
-  // 过滤后的记录
-  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;
-    })
+  // 筛选变化时重置到第一页
+  function applyFilters() {
+    currentPage = 1;
+    loadBills();
+  }
+  
+  // 清除筛选（恢复默认值）
+  function clearFilters() {
+    filterCategory = '';
+    filterIncomeExpense = '';
+    filterBillType = '';
+    startDate = defaultDates.startDate;
+    endDate = defaultDates.endDate;
+    searchText = '';
+    currentPage = 1;
+    loadBills();
+  }
+  
+  // 本地搜索（在当前页数据中筛选）
+  let displayRecords = $derived(
+    searchText 
+      ? records.filter(r => {
+          const text = searchText.toLowerCase();
+          return r.merchant?.toLowerCase().includes(text) || 
+                 r.description?.toLowerCase().includes(text);
+        })
+      : records
   );
   
-  // 统计
-  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),
+  // 页面加载时获取数据
+  onMount(() => {
+    loadBills();
   });
 </script>
 
@@ -74,31 +143,14 @@
 
 <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 class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">账单列表</h1>
+      <p class="text-muted-foreground">查看和筛选已处理的账单记录</p>
     </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 variant="outline" onclick={loadBills} disabled={isLoading}>
+      <RefreshCw class="mr-2 h-4 w-4 {isLoading ? 'animate-spin' : ''}" />
+      刷新
     </Button>
   </div>
 
@@ -110,166 +162,235 @@
     </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>
+  <!-- 统计概览 -->
+  <div class="grid gap-4 md:grid-cols-3">
+    <Card.Root class="transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-default">
+      <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">{totalRecords}</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-red-200 dark:border-red-900 transition-all duration-200 hover:shadow-lg hover:-translate-y-1 hover:border-red-300 dark:hover:border-red-800 cursor-default">
+      <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">
+          ¥{totalExpense.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 class="border-green-200 dark:border-green-900 transition-all duration-200 hover:shadow-lg hover:-translate-y-1 hover:border-green-300 dark:hover:border-green-800 cursor-default">
+      <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">
+          ¥{totalIncome.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.Root>
+    <Card.Header>
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center 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>
+          {#if filterCategory || filterIncomeExpense || filterBillType || startDate || endDate}
+            <Button variant="ghost" size="sm" onclick={clearFilters}>
+              清除筛选
+            </Button>
+          {/if}
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+          <div class="space-y-1.5 col-span-2 sm:col-span-2">
+            <Label class="text-xs">日期范围</Label>
+            <DateRangePicker 
+              {startDate}
+              {endDate}
+              onchange={(start, end) => {
+                startDate = start;
+                endDate = end;
+                applyFilters();
+              }}
+            />
+          </div>
+          <div class="space-y-1.5">
+            <Label class="text-xs">分类</Label>
+            <select 
+              class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+              bind:value={filterCategory}
+              onchange={applyFilters}
+            >
+              <option value="">全部</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 w-full rounded-md border border-input bg-background px-3 text-sm"
+              bind:value={filterIncomeExpense}
+              onchange={applyFilters}
+            >
+              <option value="">全部</option>
+              <option value="支出">支出</option>
+              <option value="收入">收入</option>
+            </select>
+          </div>
+          <div class="space-y-1.5">
+            <Label class="text-xs">来源</Label>
+            <select 
+              class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+              bind:value={filterBillType}
+              onchange={applyFilters}
+            >
+              <option value="">全部</option>
+              <option value="alipay">支付宝</option>
+              <option value="wechat">微信</option>
+            </select>
+          </div>
+          <div class="space-y-1.5 col-span-2 sm:col-span-1">
+            <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>
-      </Card.Header>
-      <Card.Content>
-        {#if filteredRecords.length > 0}
-          <div class="rounded-md border">
-            <Table.Root>
-              <Table.Header>
+      </div>
+    </Card.Header>
+    <Card.Content>
+      {#if isLoading}
+        <div class="flex flex-col items-center justify-center py-12">
+          <Loader2 class="h-8 w-8 animate-spin text-muted-foreground mb-4" />
+          <p class="text-muted-foreground">加载中...</p>
+        </div>
+      {:else if displayRecords.length > 0}
+        <div class="rounded-md border">
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head class="w-[100px] lg:w-[160px]">时间</Table.Head>
+                <Table.Head class="hidden xl:table-cell">来源</Table.Head>
+                <Table.Head>分类</Table.Head>
+                <Table.Head class="hidden sm:table-cell">交易对方</Table.Head>
+                <Table.Head class="hidden lg:table-cell">商品说明</Table.Head>
+                <Table.Head class="hidden min-[480px]:table-cell">收/支</Table.Head>
+                <Table.Head class="text-right">金额</Table.Head>
+                <Table.Head class="hidden xl:table-cell">支付方式</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each displayRecords as record}
                 <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.Cell class="text-muted-foreground text-sm">
+                    {record.time}
+                  </Table.Cell>
+                  <Table.Cell class="hidden xl:table-cell">
+                    <Badge variant={record.bill_type === 'alipay' ? 'default' : 'secondary'}>
+                      {record.bill_type === 'alipay' ? '支付宝' : '微信'}
+                    </Badge>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Badge variant="outline">{record.category}</Badge>
+                  </Table.Cell>
+                  <Table.Cell class="hidden sm:table-cell max-w-[100px] md:max-w-[150px] truncate" title={record.merchant}>
+                    {record.merchant}
+                  </Table.Cell>
+                  <Table.Cell class="hidden lg:table-cell max-w-[150px] truncate text-muted-foreground" title={record.description}>
+                    {record.description || '-'}
+                  </Table.Cell>
+                  <Table.Cell class="hidden min-[480px]: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.toFixed(2)}
+                  </Table.Cell>
+                  <Table.Cell class="hidden xl:table-cell text-muted-foreground text-sm">
+                    {record.pay_method || '-'}
+                  </Table.Cell>
                 </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>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </div>
+        
+        <!-- 分页控件 -->
+        <div class="flex items-center justify-between mt-4">
+          <p class="text-sm text-muted-foreground">
+            显示 {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, totalRecords)} 条，共 {totalRecords} 条
+          </p>
+          <div class="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              size="sm" 
+              disabled={currentPage <= 1}
+              onclick={() => goToPage(currentPage - 1)}
+            >
+              <ChevronLeft class="h-4 w-4" />
+              上一页
+            </Button>
+            <div class="flex items-center gap-1">
+              {#each Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                // 计算显示的页码范围
+                let start = Math.max(1, currentPage - 2);
+                let end = Math.min(totalPages, start + 4);
+                start = Math.max(1, end - 4);
+                return start + i;
+              }).filter(p => p <= totalPages) as page}
+                <Button 
+                  variant={page === currentPage ? 'default' : 'outline'}
+                  size="sm"
+                  class="w-9"
+                  onclick={() => goToPage(page)}
+                >
+                  {page}
+                </Button>
+              {/each}
+            </div>
+            <Button 
+              variant="outline" 
+              size="sm" 
+              disabled={currentPage >= totalPages}
+              onclick={() => goToPage(currentPage + 1)}
+            >
+              下一页
+              <ChevronRight class="h-4 w-4" />
+            </Button>
           </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>
+      {: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>
+          <p class="text-sm text-muted-foreground mt-1">请先上传账单或调整筛选条件</p>
+        </div>
+      {/if}
+    </Card.Content>
+  </Card.Root>
 </div>