feat(analysis): 添加账单详情查看和编辑功能

- BillRecordsTable: 新增点击行查看详情弹窗，支持编辑模式
- CategoryRanking: 分类支出表格支持点击查看/编辑账单详情
- DailyTrendChart: 每日趋势表格支持点击查看/编辑账单详情
- TopExpenses: Top10支出支持点击查看/编辑，前三名高亮显示
- OverviewCards/MonthlyTrend: 添加卡片hover效果
- 新增 categories.ts: 集中管理账单分类数据
- 分类下拉按使用频率排序

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

@@ -1,28 +1,121 @@
 <script lang="ts">
   import * as Card from '$lib/components/ui/card';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import * as Select from '$lib/components/ui/select';
+  import { Button } from '$lib/components/ui/button';
+  import { Input } from '$lib/components/ui/input';
+  import { Label } from '$lib/components/ui/label';
   import Flame from '@lucide/svelte/icons/flame';
+  import Receipt from '@lucide/svelte/icons/receipt';
+  import Pencil from '@lucide/svelte/icons/pencil';
+  import Save from '@lucide/svelte/icons/save';
+  import X from '@lucide/svelte/icons/x';
+  import Calendar from '@lucide/svelte/icons/calendar';
+  import Store from '@lucide/svelte/icons/store';
+  import Tag from '@lucide/svelte/icons/tag';
+  import FileText from '@lucide/svelte/icons/file-text';
+  import CreditCard from '@lucide/svelte/icons/credit-card';
   import type { BillRecord } from '$lib/api';
 
   interface Props {
     records: BillRecord[];
+    categories: string[];  // 可用的分类列表
+    onUpdate?: (record: BillRecord) => void;
   }
 
-  let { records }: Props = $props();
+  let { records, categories, onUpdate }: Props = $props();
+  
+  let dialogOpen = $state(false);
+  let selectedRecord = $state<BillRecord | null>(null);
+  let selectedRank = $state(0);
+  let isEditing = $state(false);
+  
+  // 编辑表单数据
+  let editForm = $state({
+    merchant: '',
+    category: '',
+    amount: '',
+    description: '',
+    payment_method: ''
+  });
+
+  function openDetail(record: BillRecord, rank: number) {
+    selectedRecord = record;
+    selectedRank = rank;
+    isEditing = false;
+    dialogOpen = true;
+  }
+
+  function startEdit() {
+    if (!selectedRecord) return;
+    editForm = {
+      merchant: selectedRecord.merchant,
+      category: selectedRecord.category,
+      amount: selectedRecord.amount,
+      description: selectedRecord.description || '',
+      payment_method: selectedRecord.payment_method || ''
+    };
+    isEditing = true;
+  }
+
+  function cancelEdit() {
+    isEditing = false;
+  }
+
+  function saveEdit() {
+    if (!selectedRecord) return;
+    
+    // 更新记录
+    const updatedRecord: BillRecord = {
+      ...selectedRecord,
+      merchant: editForm.merchant,
+      category: editForm.category,
+      amount: editForm.amount,
+      description: editForm.description,
+      payment_method: editForm.payment_method
+    };
+    
+    // 更新本地数据
+    const index = records.findIndex(r => r === selectedRecord);
+    if (index !== -1) {
+      records[index] = updatedRecord;
+    }
+    
+    selectedRecord = updatedRecord;
+    isEditing = false;
+    
+    // 通知父组件
+    onUpdate?.(updatedRecord);
+  }
+
+  function handleCategoryChange(value: string | undefined) {
+    if (value) {
+      editForm.category = value;
+    }
+  }
 </script>
 
-<Card.Root>
+<Card.Root class="transition-all duration-200 hover:shadow-lg hover:-translate-y-1">
   <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.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">
+        <button 
+          class="w-full flex items-center gap-4 p-3 rounded-lg bg-muted/50 transition-all duration-150 hover:bg-muted hover:scale-[1.02] hover:shadow-sm cursor-pointer text-left outline-none focus:outline-none"
+          onclick={() => openDetail(record, i + 1)}
+        >
+          <div class="flex h-8 w-8 items-center justify-center rounded-full font-bold text-sm {
+            i === 0 ? 'bg-gradient-to-br from-yellow-400 to-amber-500 text-white shadow-md' :
+            i === 1 ? 'bg-gradient-to-br from-slate-300 to-slate-400 text-white shadow-md' :
+            i === 2 ? 'bg-gradient-to-br from-orange-400 to-amber-600 text-white shadow-md' :
+            'bg-primary/10 text-primary'
+          }">
             {i + 1}
           </div>
           <div class="flex-1 min-w-0">
@@ -34,10 +127,163 @@
           <div class="font-mono font-bold text-red-600 dark:text-red-400">
             ¥{record.amount}
           </div>
-        </div>
+        </button>
       {/each}
     </div>
   </Card.Content>
 </Card.Root>
 
+<!-- 账单详情弹窗 -->
+<Dialog.Root bind:open={dialogOpen}>
+  <Dialog.Content class="sm:max-w-[450px]">
+    <Dialog.Header>
+      <Dialog.Title class="flex items-center gap-2">
+        <Receipt class="h-5 w-5" />
+        {isEditing ? '编辑账单' : '账单详情'}
+        {#if selectedRank <= 3 && !isEditing}
+          <span class="ml-2 px-2 py-0.5 text-xs rounded-full {
+            selectedRank === 1 ? 'bg-gradient-to-r from-yellow-400 to-amber-500 text-white' :
+            selectedRank === 2 ? 'bg-gradient-to-r from-slate-300 to-slate-400 text-white' :
+            'bg-gradient-to-r from-orange-400 to-amber-600 text-white'
+          }">
+            Top {selectedRank}
+          </span>
+        {/if}
+      </Dialog.Title>
+      <Dialog.Description>
+        {isEditing ? '修改这笔支出的信息' : '查看这笔支出的完整信息'}
+      </Dialog.Description>
+    </Dialog.Header>
+    
+    {#if selectedRecord}
+      {#if isEditing}
+        <!-- 编辑模式 -->
+        <div class="py-4 space-y-4">
+          <div class="space-y-2">
+            <Label for="amount">金额</Label>
+            <div class="relative">
+              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">¥</span>
+              <Input 
+                id="amount"
+                type="number"
+                step="0.01"
+                bind:value={editForm.amount}
+                class="pl-7 font-mono"
+              />
+            </div>
+          </div>
 
+          <div class="space-y-2">
+            <Label for="merchant">商家</Label>
+            <Input id="merchant" bind:value={editForm.merchant} />
+          </div>
+
+          <div class="space-y-2">
+            <Label>分类</Label>
+            <Select.Root type="single" value={editForm.category} onValueChange={handleCategoryChange}>
+              <Select.Trigger class="w-full">
+                <span>{editForm.category || '选择分类'}</span>
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Content>
+                  {#each categories as category}
+                    <Select.Item value={category}>{category}</Select.Item>
+                  {/each}
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="description">描述</Label>
+            <Input id="description" bind:value={editForm.description} placeholder="可选" />
+          </div>
+
+          <div class="space-y-2">
+            <Label for="payment_method">支付方式</Label>
+            <Input id="payment_method" bind:value={editForm.payment_method} placeholder="可选" />
+          </div>
+        </div>
+      {:else}
+        <!-- 查看模式 -->
+        <div class="py-4 space-y-4">
+          <!-- 金额 -->
+          <div class="text-center py-4 bg-red-50 dark:bg-red-950/30 rounded-lg">
+            <p class="text-sm text-muted-foreground mb-1">支出金额</p>
+            <p class="text-3xl font-bold font-mono text-red-600 dark:text-red-400">
+              ¥{selectedRecord.amount}
+            </p>
+          </div>
+
+          <!-- 详情列表 -->
+          <div class="space-y-3">
+            <div class="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Store class="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+              <div class="min-w-0">
+                <p class="text-xs text-muted-foreground">商家</p>
+                <p class="font-medium">{selectedRecord.merchant}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Tag class="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+              <div class="min-w-0">
+                <p class="text-xs text-muted-foreground">分类</p>
+                <p class="font-medium">{selectedRecord.category}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Calendar class="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+              <div class="min-w-0">
+                <p class="text-xs text-muted-foreground">时间</p>
+                <p class="font-medium">{selectedRecord.time}</p>
+              </div>
+            </div>
+
+            {#if selectedRecord.description}
+              <div class="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+                <FileText class="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+                <div class="min-w-0">
+                  <p class="text-xs text-muted-foreground">描述</p>
+                  <p class="font-medium">{selectedRecord.description}</p>
+                </div>
+              </div>
+            {/if}
+
+            {#if selectedRecord.payment_method}
+              <div class="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+                <CreditCard class="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+                <div class="min-w-0">
+                  <p class="text-xs text-muted-foreground">支付方式</p>
+                  <p class="font-medium">{selectedRecord.payment_method}</p>
+                </div>
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    {/if}
+    
+    <Dialog.Footer class="flex gap-2">
+      {#if isEditing}
+        <Button variant="outline" onclick={cancelEdit}>
+          <X class="h-4 w-4 mr-2" />
+          取消
+        </Button>
+        <Button onclick={saveEdit}>
+          <Save class="h-4 w-4 mr-2" />
+          保存
+        </Button>
+      {:else}
+        <Button variant="outline" onclick={() => dialogOpen = false}>
+          关闭
+        </Button>
+        <Button onclick={startEdit}>
+          <Pencil class="h-4 w-4 mr-2" />
+          编辑
+        </Button>
+      {/if}
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>