refactor(web): unify bills as UIBill, remove BillRecord

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

@@ -1,125 +1,32 @@
 <script lang="ts">
   import * as Card from '$lib/components/ui/card';
-  import * as Drawer from '$lib/components/ui/drawer';
-  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 { updateBill, type BillRecord } from '$lib/api';
+  import { type UIBill } from '$lib/models/bill';
+  import BillDetailDrawer from './BillDetailDrawer.svelte';
 
   interface Props {
-    records: BillRecord[];
+    records: UIBill[];
     categories: string[];  // 可用的分类列表
-    onUpdate?: (record: BillRecord) => void;
+    onUpdate?: (record: UIBill) => void;
   }
 
   let { records, categories, onUpdate }: Props = $props();
   
   let dialogOpen = $state(false);
-  let selectedRecord = $state<BillRecord | null>(null);
+  let selectedRecord = $state<UIBill | null>(null);
   let selectedRank = $state(0);
-  let isEditing = $state(false);
-  let isSaving = $state(false);
-  
-  // 编辑表单数据
-  let editForm = $state({
-    merchant: '',
-    category: '',
-    amount: '',
-    description: '',
-    payment_method: ''
-  });
 
-  function openDetail(record: BillRecord, rank: number) {
+  function openDetail(record: UIBill, 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;
-  }
-
-  async function saveEdit() {
-    if (!selectedRecord) return;
-
-    if (isSaving) return;
-    isSaving = true;
-    
-    // 更新记录
-    const updatedRecord: BillRecord = {
-      ...selectedRecord,
-      merchant: editForm.merchant,
-      category: editForm.category,
-      amount: editForm.amount,
-      description: editForm.description,
-      payment_method: editForm.payment_method
-    };
-
-    try {
-      const billId = (selectedRecord as unknown as { id?: string }).id;
-      if (billId) {
-        const resp = await updateBill(billId, {
-          merchant: editForm.merchant,
-          category: editForm.category,
-          amount: Number(editForm.amount),
-          description: editForm.description,
-          pay_method: editForm.payment_method,
-        });
-
-        if (resp.result && resp.data) {
-          updatedRecord.amount = String(resp.data.amount);
-          updatedRecord.merchant = resp.data.merchant;
-          updatedRecord.category = resp.data.category;
-          updatedRecord.description = resp.data.description || '';
-          updatedRecord.payment_method = resp.data.pay_method || '';
-          updatedRecord.time = resp.data.time;
-        }
-      }
-
-      // 更新本地数据
-      const index = records.findIndex(r => r === selectedRecord);
-      if (index !== -1) {
-        records[index] = updatedRecord;
-      }
-
-      selectedRecord = updatedRecord;
-      isEditing = false;
-
-      // 通知父组件
-      onUpdate?.(updatedRecord);
-    } finally {
-      isSaving = false;
-    }
-  }
-
-  function handleCategoryChange(value: string | undefined) {
-    if (value) {
-      editForm.category = value;
-    }
+  function handleRecordUpdated(updated: UIBill, original: UIBill) {
+    const idx = records.findIndex(r => r === original);
+    if (idx !== -1) records[idx] = updated;
+    selectedRecord = updated;
+    onUpdate?.(updated);
   }
 </script>
 
@@ -153,7 +60,7 @@
             </p>
           </div>
           <div class="font-mono font-bold text-red-600 dark:text-red-400">
-            ¥{record.amount}
+            ¥{record.amount.toFixed(2)}
           </div>
         </button>
       {/each}
@@ -161,157 +68,24 @@
   </Card.Content>
 </Card.Root>
 
-<!-- 账单详情弹窗 -->
-<Drawer.Root bind:open={dialogOpen}>
-  <Drawer.Content class="md:max-w-[450px]">
-    <Drawer.Header>
-      <Drawer.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}
-      </Drawer.Title>
-      <Drawer.Description>
-        {isEditing ? '修改这笔支出的信息' : '查看这笔支出的完整信息'}
-      </Drawer.Description>
-    </Drawer.Header>
-    
-    {#if selectedRecord}
-      {#if isEditing}
-        <!-- 编辑模式 -->
-        <div class="py-4 space-y-4 px-4 md:px-0">
-          <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 px-4 md:px-0">
-          <!-- 金额 -->
-          <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}
+<BillDetailDrawer
+  bind:open={dialogOpen}
+  bind:record={selectedRecord}
+  {categories}
+  title="账单详情"
+  viewDescription="查看这笔支出的完整信息"
+  editDescription="修改这笔支出的信息"
+  onUpdate={handleRecordUpdated}
+>
+  {#snippet titleExtra({ 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}
-    
-    <Drawer.Footer class="flex gap-2">
-      {#if isEditing}
-        <Button variant="outline" onclick={cancelEdit}>
-          <X class="h-4 w-4 mr-2" />
-          取消
-        </Button>
-        <Button onclick={saveEdit} disabled={isSaving}>
-          <Save class="h-4 w-4 mr-2" />
-          {isSaving ? '保存中…' : '保存'}
-        </Button>
-      {:else}
-        <Button variant="outline" onclick={() => dialogOpen = false}>
-          关闭
-        </Button>
-        <Button onclick={startEdit}>
-          <Pencil class="h-4 w-4 mr-2" />
-          编辑
-        </Button>
-      {/if}
-    </Drawer.Footer>
-  </Drawer.Content>
-</Drawer.Root>
+  {/snippet}
+</BillDetailDrawer>