cheliangzhao
087ae027cc
- 新增项目文档和 Docker 配置 - 添加 README.md 和 TODO.md 项目文档 - 为各服务添加 Dockerfile 和 docker-compose 配置 - 重构后端架构 - 新增 adapter 层（HTTP/Python 适配器） - 新增 repository 层（数据访问抽象） - 新增 router 模块统一管理路由 - 新增账单处理 handler - 扩展前端 UI 组件库 - 新增 Calendar、DateRangePicker、Drawer、Popover 等组件 - 集成 shadcn-svelte 组件库 - 增强分析页面功能 - 添加时间范围筛选器（支持本月默认值） - 修复 DateRangePicker 默认值显示问题 - 优化数据获取和展示逻辑 - 完善分析器服务 - 新增 FastAPI 服务接口 - 改进账单清理器实现
397 lines
15 KiB
Svelte
397 lines
15 KiB
Svelte
<script lang="ts">
|
|
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 { 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';
|
|
import Receipt from '@lucide/svelte/icons/receipt';
|
|
import TrendingDown from '@lucide/svelte/icons/trending-down';
|
|
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 isLoading = $state(false);
|
|
let errorMessage = $state('');
|
|
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('');
|
|
|
|
// 分类列表（硬编码常用分类）
|
|
const categories = [
|
|
'餐饮美食', '交通出行', '生活服务', '日用百货',
|
|
'服饰美容', '医疗健康', '通讯话费', '住房缴费',
|
|
'文化娱乐', '金融理财', '教育培训', '人情往来', '其他'
|
|
];
|
|
|
|
async function loadBills() {
|
|
isLoading = true;
|
|
errorMessage = '';
|
|
|
|
try {
|
|
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;
|
|
}
|
|
}
|
|
|
|
// 切换页面
|
|
function goToPage(page: number) {
|
|
if (page >= 1 && page <= totalPages) {
|
|
currentPage = page;
|
|
loadBills();
|
|
}
|
|
}
|
|
|
|
// 筛选变化时重置到第一页
|
|
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
|
|
);
|
|
|
|
// 页面加载时获取数据
|
|
onMount(() => {
|
|
loadBills();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>账单列表 - BillAI</title>
|
|
</svelte:head>
|
|
|
|
<div class="space-y-6">
|
|
<!-- 页面标题 -->
|
|
<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 variant="outline" onclick={loadBills} disabled={isLoading}>
|
|
<RefreshCw class="mr-2 h-4 w-4 {isLoading ? 'animate-spin' : ''}" />
|
|
刷新
|
|
</Button>
|
|
</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="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 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 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">
|
|
<div class="flex items-center justify-between">
|
|
<Card.Title class="flex items-center gap-2">
|
|
<Filter class="h-5 w-5" />
|
|
筛选条件
|
|
</Card.Title>
|
|
{#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>
|
|
</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.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>
|
|
{/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>
|
|
</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>
|