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

<script lang="ts">
  import { uploadBill, type UploadResponse, type BillType } 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 selectedType: BillType = $state('alipay');
  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;
    
    // 根据文件名自动识别账单类型
    const fileName = file.name.toLowerCase();
    if (fileName.includes('支付宝') || fileName.includes('alipay')) {
      selectedType = 'alipay';
    } else if (fileName.includes('微信') || fileName.includes('wechat')) {
      selectedType = 'wechat';
    }
  }
  
  function clearFile() {
    selectedFile = null;
    uploadResult = null;
    errorMessage = '';
  }
  
  async function handleUpload() {
    if (!selectedFile) return;
    
    isUploading = true;
    errorMessage = '';
    
    try {
      const result = await uploadBill(selectedFile, selectedType);
      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 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">{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}

        <!-- 账单类型选择 -->
        <div class="flex items-center gap-3">
          <span class="text-sm font-medium">账单类型：</span>
          <div class="flex gap-2">
            <Button 
              variant={selectedType === 'alipay' ? 'default' : 'outline'}
              size="sm"
              onclick={() => selectedType = 'alipay'}
            >
              支付宝
            </Button>
            <Button 
              variant={selectedType === 'wechat' ? 'default' : 'outline'}
              size="sm"
              onclick={() => selectedType = 'wechat'}
            >
              微信
            </Button>
          </div>
        </div>

        <!-- 上传按钮 -->
        <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">{uploadResult.message}</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?.raw_count ?? 0} 条</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-sm text-muted-foreground">清洗后记录数</span>
                <span class="text-sm font-medium">{uploadResult.data?.cleaned_count ?? 0} 条</span>
              </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={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>