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

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

@@ -1,33 +1,21 @@
 <script lang="ts">
   import * as Table from '$lib/components/ui/table';
-  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 ArrowUpDown from '@lucide/svelte/icons/arrow-up-down';
   import ArrowUp from '@lucide/svelte/icons/arrow-up';
   import ArrowDown from '@lucide/svelte/icons/arrow-down';
   import ChevronLeft from '@lucide/svelte/icons/chevron-left';
   import ChevronRight from '@lucide/svelte/icons/chevron-right';
-  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[];
     showCategory?: boolean;
     showDescription?: boolean;
     pageSize?: number;
     categories?: string[];
-    onUpdate?: (updated: BillRecord, original: BillRecord) => void;
+    onUpdate?: (updated: UIBill, original: UIBill) => void;
   }
 
   let { 
@@ -50,17 +38,7 @@
   
   // 详情弹窗状态
   let detailDialogOpen = $state(false);
-  let selectedRecord = $state<BillRecord | null>(null);
-  let selectedIndex = $state(-1);
-  let isEditing = $state(false);
-  let isSaving = $state(false);
-  let editForm = $state({
-    amount: '',
-    merchant: '',
-    category: '',
-    description: '',
-    payment_method: ''
-  });
+  let selectedRecord = $state<UIBill | null>(null);
 
   // 排序后的记录
   let sortedRecords = $derived.by(() => {
@@ -80,7 +58,7 @@
           cmp = (a.description || '').localeCompare(b.description || '');
           break;
         case 'amount':
-          cmp = parseFloat(a.amount) - parseFloat(b.amount);
+          cmp = (a.amount || 0) - (b.amount || 0);
           break;
       }
       return sortOrder === 'asc' ? cmp : -cmp;
@@ -110,100 +88,28 @@
   }
 
   // 打开详情弹窗
-  function openDetail(record: BillRecord, index: number) {
+  function openDetail(record: UIBill) {
     selectedRecord = record;
-    selectedIndex = index;
-    isEditing = false;
     detailDialogOpen = true;
   }
 
-  // 进入编辑模式
-  function startEdit() {
-    if (!selectedRecord) return;
-    editForm = {
-      amount: selectedRecord.amount,
-      merchant: selectedRecord.merchant,
-      category: selectedRecord.category,
-      description: selectedRecord.description || '',
-      payment_method: selectedRecord.payment_method || ''
-    };
-    isEditing = true;
-  }
+  function handleRecordUpdated(updated: UIBill, original: UIBill) {
+    // 更新本地数据（fallback：按引用/关键字段查找）
+    const idx = records.findIndex(r => r === original);
+    const finalIdx = idx !== -1
+      ? idx
+      : records.findIndex(r =>
+          r.time === original.time &&
+          r.merchant === original.merchant &&
+          r.amount === original.amount
+        );
 
-  // 取消编辑
-  function cancelEdit() {
-    isEditing = false;
-  }
-
-  // 保存编辑
-  async function saveEdit() {
-    if (!selectedRecord) return;
-
-    if (isSaving) return;
-    isSaving = true;
-    
-    const original = { ...selectedRecord };
-    const updated: BillRecord = {
-      ...selectedRecord,
-      amount: editForm.amount,
-      merchant: editForm.merchant,
-      category: editForm.category,
-      description: editForm.description,
-      payment_method: editForm.payment_method
-    };
-
-    try {
-      // 如果有后端 ID，则持久化更新
-      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) {
-          // 将后端返回的 CleanedBill 映射为 BillRecord
-          updated.amount = String(resp.data.amount);
-          updated.merchant = resp.data.merchant;
-          updated.category = resp.data.category;
-          updated.description = resp.data.description || '';
-          updated.payment_method = resp.data.pay_method || '';
-          // 让时间展示更稳定：使用后端格式
-          updated.time = resp.data.time;
-        }
-      }
-
-      // 更新本地数据（fallback：按引用/关键字段查找）
-      const idx = records.findIndex(r => r === selectedRecord);
-      const finalIdx = idx !== -1
-        ? idx
-        : records.findIndex(r =>
-            r.time === selectedRecord!.time &&
-            r.merchant === selectedRecord!.merchant &&
-            r.amount === selectedRecord!.amount
-          );
-
-      if (finalIdx !== -1) {
-        records[finalIdx] = updated;
-        records = [...records];
-      }
-
-      selectedRecord = updated;
-      isEditing = false;
-      onUpdate?.(updated, original);
-    } finally {
-      isSaving = false;
+    if (finalIdx !== -1) {
+      records[finalIdx] = updated;
+      records = [...records];
     }
-  }
 
-  // 处理分类选择
-  function handleCategoryChange(value: string | undefined) {
-    if (value) {
-      editForm.category = value;
-    }
+    onUpdate?.(updated, original);
   }
 
   // 重置分页（当记录变化时）
@@ -294,7 +200,7 @@
       {#each paginatedRecords as record, i}
         <Table.Row 
           class="hover:bg-muted/50 transition-colors cursor-pointer"
-          onclick={() => openDetail(record, (currentPage - 1) * pageSize + i)}
+          onclick={() => openDetail(record)}
         >
           <Table.Cell class="text-muted-foreground text-xs">
             {record.time.substring(0, 16)}
@@ -309,7 +215,7 @@
             </Table.Cell>
           {/if}
           <Table.Cell class="text-right font-mono text-red-600 dark:text-red-400">
-            ¥{record.amount}
+            ¥{record.amount.toFixed(2)}
           </Table.Cell>
         </Table.Row>
       {/each}
@@ -366,151 +272,12 @@
   </div>
 {/if}
 
-<!-- 详情/编辑弹窗 -->
-<Drawer.Root bind:open={detailDialogOpen}>
-  <Drawer.Content class="md:max-w-md">
-    <Drawer.Header>
-      <Drawer.Title class="flex items-center gap-2">
-        <Receipt class="h-5 w-5" />
-        {isEditing ? '编辑账单' : '账单详情'}
-      </Drawer.Title>
-      <Drawer.Description>
-        {isEditing ? '修改这笔支出的信息' : '查看这笔支出的详细信息'}
-      </Drawer.Description>
-    </Drawer.Header>
-    
-    {#if selectedRecord}
-      {#if isEditing}
-        <!-- 编辑表单 -->
-        <div class="space-y-4 py-4 px-4 md:px-0">
-          <div class="space-y-2">
-            <Label>金额</Label>
-            <div class="relative">
-              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">¥</span>
-              <Input 
-                type="number" 
-                bind:value={editForm.amount}
-                class="pl-8"
-                step="0.01"
-              />
-            </div>
-          </div>
-          
-          <div class="space-y-2">
-            <Label>商家</Label>
-            <Input bind:value={editForm.merchant} />
-          </div>
-          
-          <div class="space-y-2">
-            <Label>分类</Label>
-            {#if categories.length > 0}
-              <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>
-            {:else}
-              <Input bind:value={editForm.category} />
-            {/if}
-          </div>
-          
-          <div class="space-y-2">
-            <Label>描述</Label>
-            <Input bind:value={editForm.description} />
-          </div>
-          
-          <div class="space-y-2">
-            <Label>支付方式</Label>
-            <Input bind:value={editForm.payment_method} />
-          </div>
-        </div>
-      {:else}
-        <!-- 详情展示 -->
-        <div class="py-4 px-4 md:px-0">
-          <div class="text-center mb-6">
-            <div class="text-3xl font-bold text-red-600 dark:text-red-400 font-mono">
-              ¥{selectedRecord.amount}
-            </div>
-            <div class="text-sm text-muted-foreground mt-1">
-              支出金额
-            </div>
-          </div>
-          
-          <div class="space-y-3">
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-              <Store class="h-4 w-4 text-muted-foreground shrink-0" />
-              <div class="min-w-0">
-                <div class="text-xs text-muted-foreground">商家</div>
-                <div class="font-medium truncate">{selectedRecord.merchant}</div>
-              </div>
-            </div>
-            
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-              <Tag class="h-4 w-4 text-muted-foreground shrink-0" />
-              <div class="min-w-0">
-                <div class="text-xs text-muted-foreground">分类</div>
-                <div class="font-medium">{selectedRecord.category}</div>
-              </div>
-            </div>
-            
-            <div class="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-              <Calendar class="h-4 w-4 text-muted-foreground shrink-0" />
-              <div class="min-w-0">
-                <div class="text-xs text-muted-foreground">时间</div>
-                <div class="font-medium">{selectedRecord.time}</div>
-              </div>
-            </div>
-            
-            {#if selectedRecord.description}
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-                <FileText class="h-4 w-4 text-muted-foreground shrink-0" />
-                <div class="min-w-0">
-                  <div class="text-xs text-muted-foreground">描述</div>
-                  <div class="font-medium">{selectedRecord.description}</div>
-                </div>
-              </div>
-            {/if}
-            
-            {#if selectedRecord.payment_method}
-              <div class="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-                <CreditCard class="h-4 w-4 text-muted-foreground shrink-0" />
-                <div class="min-w-0">
-                  <div class="text-xs text-muted-foreground">支付方式</div>
-                  <div class="font-medium">{selectedRecord.payment_method}</div>
-                </div>
-              </div>
-            {/if}
-          </div>
-        </div>
-      {/if}
-    {/if}
-    
-    <Drawer.Footer>
-      {#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={() => detailDialogOpen = false}>
-          关闭
-        </Button>
-        <Button onclick={startEdit}>
-          <Pencil class="h-4 w-4 mr-2" />
-          编辑
-        </Button>
-      {/if}
-    </Drawer.Footer>
-  </Drawer.Content>
-</Drawer.Root>
+<BillDetailDrawer
+  bind:open={detailDialogOpen}
+  bind:record={selectedRecord}
+  {categories}
+  title="账单详情"
+  viewDescription="查看这笔支出的详细信息"
+  editDescription="修改这笔支出的信息"
+  onUpdate={handleRecordUpdated}
+/>