feat: 手动账单输入功能及时区修复
- 新增手动账单输入功能 - 创建 ManualBillInput 组件，支持批量添加账单 - 添加服务器端 API /api/bills/manual 处理手动账单创建 - 支持时间选择器，默认当前时间 - 交易对方字段设为可选 - 实时显示待提交账单列表 - 提交成功后显示成功/失败/重复统计 - 修复时区问题 - 后端使用 time.ParseInLocation 解析本地时间，避免 UTC 时区错误 - 确保手动输入的时间按本地时区正确存储 - UI 优化 - 账单管理页面添加标签页切换（列表/手动添加） - 主页添加快捷按钮跳转至手动添加页面 - 手动账单来源正确显示为"手动输入" - 使用 shadcn-svelte 组件统一 UI 风格 - 提交成功后保持日期筛选并重新加载数据
This commit is contained in:
133
server/handler/manual_bills.go
Normal file
133
server/handler/manual_bills.go
Normal file
@@ -0,0 +1,133 @@
|
||||
package handler
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"billai-server/model"
|
||||
"billai-server/repository"
|
||||
)
|
||||
|
||||
// ManualBillInput 手动输入的账单
|
||||
type ManualBillInput struct {
|
||||
Time string `json:"time" binding:"required"` // 交易时间
|
||||
Category string `json:"category" binding:"required"` // 交易分类
|
||||
Merchant string `json:"merchant" binding:"required"` // 交易对方
|
||||
Description string `json:"description"` // 商品说明
|
||||
IncomeExpense string `json:"income_expense" binding:"required"` // 收/支
|
||||
Amount float64 `json:"amount" binding:"required"` // 金额
|
||||
PayMethod string `json:"pay_method"` // 支付方式
|
||||
Status string `json:"status"` // 交易状态
|
||||
Remark string `json:"remark"` // 备注
|
||||
}
|
||||
|
||||
// CreateManualBillsRequest 批量创建手动账单请求
|
||||
type CreateManualBillsRequest struct {
|
||||
Bills []ManualBillInput `json:"bills" binding:"required,min=1"`
|
||||
}
|
||||
|
||||
// CreateManualBillsResponse 批量创建手动账单响应
|
||||
type CreateManualBillsResponse struct {
|
||||
Result bool `json:"result"`
|
||||
Message string `json:"message,omitempty"`
|
||||
Data *CreateManualBillsData `json:"data,omitempty"`
|
||||
}
|
||||
|
||||
// CreateManualBillsData 批量创建手动账单数据
|
||||
type CreateManualBillsData struct {
|
||||
Success int `json:"success"` // 成功创建数量
|
||||
Failed int `json:"failed"` // 失败数量
|
||||
Duplicates int `json:"duplicates"` // 重复数量
|
||||
}
|
||||
|
||||
// CreateManualBills 批量创建手动输入的账单
|
||||
func CreateManualBills(c *gin.Context) {
|
||||
var req CreateManualBillsRequest
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
c.JSON(http.StatusBadRequest, CreateManualBillsResponse{
|
||||
Result: false,
|
||||
Message: "参数解析失败: " + err.Error(),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 获取 repository
|
||||
repo := repository.GetRepository()
|
||||
if repo == nil {
|
||||
c.JSON(http.StatusInternalServerError, CreateManualBillsResponse{
|
||||
Result: false,
|
||||
Message: "数据库未连接",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 转换为 CleanedBill
|
||||
bills := make([]model.CleanedBill, 0, len(req.Bills))
|
||||
for _, input := range req.Bills {
|
||||
// 解析时间（使用本地时区，避免 UTC 时区问题）
|
||||
t, err := time.ParseInLocation("2006-01-02 15:04:05", input.Time, time.Local)
|
||||
if err != nil {
|
||||
// 尝试另一种格式
|
||||
t, err = time.ParseInLocation("2006-01-02T15:04:05Z07:00", input.Time, time.Local)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, CreateManualBillsResponse{
|
||||
Result: false,
|
||||
Message: "时间格式错误: " + input.Time,
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 设置默认值
|
||||
status := input.Status
|
||||
if status == "" {
|
||||
status = "交易成功"
|
||||
}
|
||||
|
||||
bill := model.CleanedBill{
|
||||
BillType: "manual",
|
||||
TransactionID: "", // 手动账单不设置交易ID
|
||||
MerchantOrderNo: "",
|
||||
Time: t,
|
||||
Category: input.Category,
|
||||
Merchant: input.Merchant,
|
||||
Description: input.Description,
|
||||
IncomeExpense: input.IncomeExpense,
|
||||
Amount: input.Amount,
|
||||
PayMethod: input.PayMethod,
|
||||
Status: status,
|
||||
Remark: input.Remark,
|
||||
ReviewLevel: "", // 手动账单不需要复核
|
||||
CreatedAt: time.Now(),
|
||||
UpdatedAt: time.Now(),
|
||||
SourceFile: "manual_input",
|
||||
UploadBatch: time.Now().Format("20060102_150405"),
|
||||
}
|
||||
|
||||
bills = append(bills, bill)
|
||||
}
|
||||
|
||||
// 保存账单（带去重）
|
||||
saved, duplicates, err := repo.SaveCleanedBills(bills)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, CreateManualBillsResponse{
|
||||
Result: false,
|
||||
Message: "保存失败: " + err.Error(),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
failed := len(bills) - saved - duplicates
|
||||
|
||||
c.JSON(http.StatusOK, CreateManualBillsResponse{
|
||||
Result: true,
|
||||
Message: "创建成功",
|
||||
Data: &CreateManualBillsData{
|
||||
Success: saved,
|
||||
Failed: failed,
|
||||
Duplicates: duplicates,
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -50,6 +50,9 @@ func setupAPIRoutes(r *gin.Engine) {
|
||||
// 账单查询
|
||||
api.GET("/bills", handler.ListBills)
|
||||
|
||||
// 手动创建账单
|
||||
api.POST("/bills/manual", handler.CreateManualBills)
|
||||
|
||||
// 月度统计（全部数据）
|
||||
api.GET("/monthly-stats", handler.MonthlyStats)
|
||||
}
|
||||
|
||||
@@ -273,5 +273,48 @@ export async function fetchBills(params: FetchBillsParams = {}): Promise<BillsRe
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 手动输入账单数据
|
||||
export interface ManualBillInput {
|
||||
time: string;
|
||||
category: string;
|
||||
merchant: string;
|
||||
description?: string;
|
||||
income_expense: string;
|
||||
amount: number;
|
||||
pay_method?: string;
|
||||
status?: string;
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
// 批量创建手动账单请求
|
||||
export interface CreateManualBillsRequest {
|
||||
bills: ManualBillInput[];
|
||||
}
|
||||
|
||||
// 批量创建手动账单响应
|
||||
export interface CreateManualBillsResponse {
|
||||
result: boolean;
|
||||
message?: string;
|
||||
data?: {
|
||||
success: number;
|
||||
failed: number;
|
||||
duplicates: number;
|
||||
};
|
||||
}
|
||||
|
||||
// 批量创建手动账单
|
||||
export async function createManualBills(bills: ManualBillInput[]): Promise<CreateManualBillsResponse> {
|
||||
const response = await fetch(`${API_BASE}/api/bills/manual`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ bills }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
459
web/src/lib/components/bills/ManualBillInput.svelte
Normal file
459
web/src/lib/components/bills/ManualBillInput.svelte
Normal file
@@ -0,0 +1,459 @@
|
||||
<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 { Badge } from '$lib/components/ui/badge';
|
||||
import * as Table from '$lib/components/ui/table';
|
||||
import { createManualBills, type ManualBillInput } from '$lib/api';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
import Trash2 from '@lucide/svelte/icons/trash-2';
|
||||
import Send from '@lucide/svelte/icons/send';
|
||||
import Loader2 from '@lucide/svelte/icons/loader-2';
|
||||
import CheckCircle from '@lucide/svelte/icons/check-circle';
|
||||
import AlertCircle from '@lucide/svelte/icons/alert-circle';
|
||||
import Clock from '@lucide/svelte/icons/clock';
|
||||
|
||||
interface Props {
|
||||
categories: string[];
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
let { categories, onSuccess }: Props = $props();
|
||||
|
||||
// 获取当前日期时间（格式化为 YYYY-MM-DDTHH:mm）
|
||||
function getCurrentDateTimeLocal(): string {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
// 将 datetime-local 格式转换为标准格式 YYYY-MM-DD HH:mm:ss
|
||||
function convertDateTimeLocal(dateTimeLocal: string): string {
|
||||
if (!dateTimeLocal) return '';
|
||||
const [date, time] = dateTimeLocal.split('T');
|
||||
return `${date} ${time}:00`;
|
||||
}
|
||||
|
||||
// 表单状态
|
||||
let formData = $state({
|
||||
time: '',
|
||||
timeLocal: getCurrentDateTimeLocal(), // 用于时间选择器的格式
|
||||
category: '',
|
||||
merchant: '',
|
||||
description: '',
|
||||
income_expense: '支出',
|
||||
amount: '',
|
||||
pay_method: '',
|
||||
status: '交易成功',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 待提交的账单列表
|
||||
let pendingBills = $state<ManualBillInput[]>([]);
|
||||
|
||||
// 提交状态
|
||||
let isSubmitting = $state(false);
|
||||
let submitResult = $state<{ success: number; failed: number; duplicates: number } | null>(null);
|
||||
let submitError = $state('');
|
||||
let showResult = $state(false);
|
||||
|
||||
// Select 变化处理
|
||||
function handleCategoryChange(value: string | undefined) {
|
||||
if (value !== undefined) {
|
||||
formData.category = value;
|
||||
}
|
||||
}
|
||||
|
||||
function handleIncomeExpenseChange(value: string | undefined) {
|
||||
if (value !== undefined) {
|
||||
formData.income_expense = value;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前日期时间（格式化为 YYYY-MM-DD HH:mm:ss）
|
||||
function getCurrentDateTime(): string {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// 设置当前时间
|
||||
function setCurrentTime() {
|
||||
formData.timeLocal = getCurrentDateTimeLocal();
|
||||
formData.time = convertDateTimeLocal(formData.timeLocal);
|
||||
}
|
||||
|
||||
// 监听时间选择器变化
|
||||
$effect(() => {
|
||||
if (formData.timeLocal) {
|
||||
formData.time = convertDateTimeLocal(formData.timeLocal);
|
||||
}
|
||||
});
|
||||
|
||||
// 验证表单
|
||||
function validateForm(): string | null {
|
||||
if (!formData.time) return '请输入交易时间';
|
||||
if (!formData.category) return '请选择分类';
|
||||
if (!formData.income_expense) return '请选择收支类型';
|
||||
if (!formData.amount || parseFloat(formData.amount) <= 0) return '请输入有效金额';
|
||||
return null;
|
||||
}
|
||||
|
||||
// 添加到待提交列表
|
||||
function addBill() {
|
||||
const error = validateForm();
|
||||
if (error) {
|
||||
alert(error);
|
||||
return;
|
||||
}
|
||||
|
||||
const bill: ManualBillInput = {
|
||||
time: formData.time,
|
||||
category: formData.category,
|
||||
merchant: formData.merchant,
|
||||
description: formData.description || undefined,
|
||||
income_expense: formData.income_expense,
|
||||
amount: parseFloat(formData.amount),
|
||||
pay_method: formData.pay_method || undefined,
|
||||
status: formData.status || undefined,
|
||||
remark: formData.remark || undefined,
|
||||
};
|
||||
|
||||
pendingBills = [...pendingBills, bill];
|
||||
|
||||
// 清空表单（保留分类和收支类型）
|
||||
const savedCategory = formData.category;
|
||||
const savedIncomeExpense = formData.income_expense;
|
||||
formData = {
|
||||
time: '',
|
||||
timeLocal: getCurrentDateTimeLocal(),
|
||||
category: savedCategory,
|
||||
merchant: '',
|
||||
description: '',
|
||||
income_expense: savedIncomeExpense,
|
||||
amount: '',
|
||||
pay_method: '',
|
||||
status: '交易成功',
|
||||
remark: '',
|
||||
};
|
||||
}
|
||||
|
||||
// 删除待提交的账单
|
||||
function removeBill(index: number) {
|
||||
pendingBills = pendingBills.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
// 提交所有账单
|
||||
async function submitAllBills() {
|
||||
if (pendingBills.length === 0) {
|
||||
alert('请至少添加一条账单');
|
||||
return;
|
||||
}
|
||||
|
||||
isSubmitting = true;
|
||||
submitError = '';
|
||||
submitResult = null;
|
||||
|
||||
try {
|
||||
const response = await createManualBills(pendingBills);
|
||||
if (response.result && response.data) {
|
||||
submitResult = response.data;
|
||||
showResult = true;
|
||||
|
||||
// 清空待提交列表
|
||||
pendingBills = [];
|
||||
|
||||
// 调用成功回调
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
} else {
|
||||
submitError = response.message || '提交失败';
|
||||
}
|
||||
} catch (err) {
|
||||
submitError = err instanceof Error ? err.message : '提交失败';
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 清空所有
|
||||
function clearAll() {
|
||||
if (confirm('确定要清空所有待提交的账单吗？')) {
|
||||
pendingBills = [];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- 左侧：输入表单 -->
|
||||
<Card.Root class="lg:col-span-2">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Plus class="h-5 w-5" />
|
||||
手动添加账单
|
||||
</Card.Title>
|
||||
<Card.Description>填写账单信息，可以连续添加多条</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<!-- 交易时间 -->
|
||||
<div class="space-y-2 sm:col-span-2">
|
||||
<Label for="time">交易时间 *</Label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
id="time"
|
||||
type="datetime-local"
|
||||
bind:value={formData.timeLocal}
|
||||
class="flex-1 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
/>
|
||||
<Button variant="outline" size="icon" onclick={setCurrentTime} title="设置为当前时间">
|
||||
<Clock class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">已选择：{formData.time || '未选择'}</p>
|
||||
</div>
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="category">分类 *</Label>
|
||||
<Select.Root type="single" value={formData.category} onValueChange={handleCategoryChange}>
|
||||
<Select.Trigger class="w-full">
|
||||
<span>{formData.category || '请选择分类'}</span>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content>
|
||||
{#each categories as cat}
|
||||
<Select.Item value={cat}>{cat}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
|
||||
<!-- 收支类型 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="income_expense">收/支 *</Label>
|
||||
<Select.Root type="single" value={formData.income_expense} onValueChange={handleIncomeExpenseChange}>
|
||||
<Select.Trigger class="w-full">
|
||||
<span>{formData.income_expense}</span>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content>
|
||||
<Select.Item value="支出">支出</Select.Item>
|
||||
<Select.Item value="收入">收入</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
|
||||
<!-- 交易对方 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="merchant">交易对方</Label>
|
||||
<Input
|
||||
id="merchant"
|
||||
type="text"
|
||||
placeholder="商家名称（可选）"
|
||||
bind:value={formData.merchant}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 金额 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="amount">金额 *</Label>
|
||||
<Input
|
||||
id="amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
bind:value={formData.amount}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 商品说明 -->
|
||||
<div class="space-y-2 sm:col-span-2">
|
||||
<Label for="description">商品说明</Label>
|
||||
<Input
|
||||
id="description"
|
||||
type="text"
|
||||
placeholder="购买的商品或服务"
|
||||
bind:value={formData.description}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="pay_method">支付方式</Label>
|
||||
<Input
|
||||
id="pay_method"
|
||||
type="text"
|
||||
placeholder="现金/银行卡/支付宝等"
|
||||
bind:value={formData.pay_method}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 交易状态 -->
|
||||
<div class="space-y-2">
|
||||
<Label for="status">交易状态</Label>
|
||||
<Input
|
||||
id="status"
|
||||
type="text"
|
||||
placeholder="交易成功"
|
||||
bind:value={formData.status}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="space-y-2 sm:col-span-2">
|
||||
<Label for="remark">备注</Label>
|
||||
<Input
|
||||
id="remark"
|
||||
type="text"
|
||||
placeholder="其他说明"
|
||||
bind:value={formData.remark}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
<Card.Footer>
|
||||
<Button class="w-full" onclick={addBill}>
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
添加到列表
|
||||
</Button>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
|
||||
<!-- 右侧：待提交列表 -->
|
||||
<Card.Root class="lg:col-span-1">
|
||||
<Card.Header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Card.Title>待提交列表</Card.Title>
|
||||
<Card.Description>
|
||||
{pendingBills.length} 条账单
|
||||
</Card.Description>
|
||||
</div>
|
||||
{#if pendingBills.length > 0}
|
||||
<Button variant="ghost" size="sm" onclick={clearAll}>
|
||||
清空
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if pendingBills.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
|
||||
<Plus class="h-12 w-12 mb-2 opacity-30" />
|
||||
<p class="text-sm">暂无账单</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2 max-h-[500px] overflow-y-auto">
|
||||
{#each pendingBills as bill, index}
|
||||
<div class="border rounded-lg p-3 space-y-1">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<Badge variant="outline" class="text-xs">
|
||||
{bill.category}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={bill.income_expense === '支出' ? 'destructive' : 'default'}
|
||||
class="text-xs"
|
||||
>
|
||||
{bill.income_expense}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="font-medium truncate">{bill.merchant}</p>
|
||||
{#if bill.description}
|
||||
<p class="text-xs text-muted-foreground truncate">{bill.description}</p>
|
||||
{/if}
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<p class="text-sm text-muted-foreground">{bill.time}</p>
|
||||
<p class="font-mono font-semibold">¥{bill.amount.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
onclick={() => removeBill(index)}
|
||||
>
|
||||
<Trash2 class="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if submitError}
|
||||
<div class="mt-4 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 flex-shrink-0" />
|
||||
{submitError}
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
<Card.Footer>
|
||||
<Button
|
||||
class="w-full"
|
||||
disabled={pendingBills.length === 0 || isSubmitting}
|
||||
onclick={submitAllBills}
|
||||
>
|
||||
{#if isSubmitting}
|
||||
<Loader2 class="mr-2 h-4 w-4 animate-spin" />
|
||||
提交中...
|
||||
{:else}
|
||||
<Send class="mr-2 h-4 w-4" />
|
||||
提交全部 ({pendingBills.length})
|
||||
{/if}
|
||||
</Button>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- 提交结果对话框 -->
|
||||
<Dialog.Root bind:open={showResult}>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title class="flex items-center gap-2">
|
||||
<CheckCircle class="h-5 w-5 text-green-500" />
|
||||
提交完成
|
||||
</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
{#if submitResult}
|
||||
<div class="space-y-3 py-4">
|
||||
<div class="flex items-center justify-between p-3 rounded-lg bg-green-50 dark:bg-green-950">
|
||||
<span class="text-sm">成功创建</span>
|
||||
<span class="font-bold text-green-600 dark:text-green-400">{submitResult.success} 条</span>
|
||||
</div>
|
||||
{#if submitResult.duplicates > 0}
|
||||
<div class="flex items-center justify-between p-3 rounded-lg bg-yellow-50 dark:bg-yellow-950">
|
||||
<span class="text-sm">重复跳过</span>
|
||||
<span class="font-bold text-yellow-600 dark:text-yellow-400">{submitResult.duplicates} 条</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if submitResult.failed > 0}
|
||||
<div class="flex items-center justify-between p-3 rounded-lg bg-red-50 dark:bg-red-950">
|
||||
<span class="text-sm">失败</span>
|
||||
<span class="font-bold text-red-600 dark:text-red-400">{submitResult.failed} 条</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<Dialog.Footer>
|
||||
<Button onclick={() => showResult = false}>确定</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -13,6 +13,8 @@
|
||||
import TrendingDown from '@lucide/svelte/icons/trending-down';
|
||||
import Loader2 from '@lucide/svelte/icons/loader-2';
|
||||
import AlertCircle from '@lucide/svelte/icons/alert-circle';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let isDragOver = $state(false);
|
||||
let selectedFile: File | null = $state(null);
|
||||
@@ -169,9 +171,15 @@
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- 上传区域 -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>上传账单</Card.Title>
|
||||
<Card.Description>支持支付宝、微信账单 CSV 文件</Card.Description>
|
||||
<Card.Header class="flex flex-row items-center justify-between space-y-0">
|
||||
<div>
|
||||
<Card.Title>上传账单</Card.Title>
|
||||
<Card.Description>支持支付宝、微信账单 CSV 文件</Card.Description>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onclick={() => goto('/bills?tab=manual')}>
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
手动添加
|
||||
</Button>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<!-- 拖拽上传区域 -->
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { fetchBills, type CleanedBill } from '$lib/api';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
@@ -7,7 +8,10 @@
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import * as Table from '$lib/components/ui/table';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { DateRangePicker } from '$lib/components/ui/date-range-picker';
|
||||
import ManualBillInput from '$lib/components/bills/ManualBillInput.svelte';
|
||||
import { formatLocalDate } from '$lib/utils';
|
||||
import Loader2 from '@lucide/svelte/icons/loader-2';
|
||||
import AlertCircle from '@lucide/svelte/icons/alert-circle';
|
||||
@@ -20,11 +24,22 @@
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import RefreshCw from '@lucide/svelte/icons/refresh-cw';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
import List from '@lucide/svelte/icons/list';
|
||||
|
||||
// 状态
|
||||
let isLoading = $state(false);
|
||||
let errorMessage = $state('');
|
||||
let records: CleanedBill[] = $state([]);
|
||||
let activeTab = $state<'list' | 'manual'>('list'); // 'list' 或 'manual'
|
||||
|
||||
// 初始化标签页（从URL查询参数）
|
||||
onMount(() => {
|
||||
const tabParam = $page.url.searchParams.get('tab');
|
||||
if (tabParam === 'manual') {
|
||||
activeTab = 'manual';
|
||||
}
|
||||
});
|
||||
|
||||
// 分页
|
||||
let currentPage = $state(1);
|
||||
@@ -56,6 +71,22 @@
|
||||
let endDate = $state(defaultDates.endDate);
|
||||
let searchText = $state('');
|
||||
|
||||
// Select 变化处理
|
||||
function handleCategoryChange(value: string | undefined) {
|
||||
filterCategory = value || '';
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function handleIncomeExpenseChange(value: string | undefined) {
|
||||
filterIncomeExpense = value || '';
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function handleBillTypeChange(value: string | undefined) {
|
||||
filterBillType = value || '';
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// 分类列表（硬编码常用分类）
|
||||
const categories = [
|
||||
'餐饮美食', '交通出行', '生活服务', '日用百货',
|
||||
@@ -137,6 +168,16 @@
|
||||
onMount(() => {
|
||||
loadBills();
|
||||
});
|
||||
|
||||
// 手动账单提交成功回调
|
||||
function handleManualBillSuccess() {
|
||||
// 切换回列表标签页
|
||||
activeTab = 'list';
|
||||
// 重置分页到第一页
|
||||
currentPage = 1;
|
||||
// 重新加载账单列表（保持当前日期筛选）
|
||||
loadBills();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -144,25 +185,52 @@
|
||||
</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>
|
||||
<h1 class="text-2xl font-bold tracking-tight">账单管理</h1>
|
||||
<p class="text-muted-foreground">查看、筛选和手动添加账单记录</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if activeTab === 'list'}
|
||||
<Button variant="outline" onclick={loadBills} disabled={isLoading}>
|
||||
<RefreshCw class="mr-2 h-4 w-4 {isLoading ? 'animate-spin' : ''}" />
|
||||
刷新
|
||||
</Button>
|
||||
{/if}
|
||||
</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="flex gap-1">
|
||||
<Button
|
||||
variant={activeTab === 'list' ? 'default' : 'ghost'}
|
||||
onclick={() => activeTab = 'list'}
|
||||
>
|
||||
<List class="mr-2 h-4 w-4" />
|
||||
账单列表
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'manual' ? 'default' : 'ghost'}
|
||||
onclick={() => activeTab = 'manual'}
|
||||
>
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
手动添加
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<!-- 账单列表视图 -->
|
||||
{#if activeTab === 'list'}
|
||||
<div class="space-y-6">
|
||||
<!-- 错误提示 -->
|
||||
{#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">
|
||||
@@ -232,40 +300,50 @@
|
||||
</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>
|
||||
<Select.Root type="single" value={filterCategory || undefined} onValueChange={handleCategoryChange}>
|
||||
<Select.Trigger class="h-9 w-full">
|
||||
<span class="text-sm">{filterCategory || '全部'}</span>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content>
|
||||
<Select.Item value="">全部</Select.Item>
|
||||
{#each categories as cat}
|
||||
<Select.Item value={cat}>{cat}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</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>
|
||||
<Select.Root type="single" value={filterIncomeExpense || undefined} onValueChange={handleIncomeExpenseChange}>
|
||||
<Select.Trigger class="h-9 w-full">
|
||||
<span class="text-sm">{filterIncomeExpense || '全部'}</span>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content>
|
||||
<Select.Item value="">全部</Select.Item>
|
||||
<Select.Item value="支出">支出</Select.Item>
|
||||
<Select.Item value="收入">收入</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</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>
|
||||
<Select.Root type="single" value={filterBillType || undefined} onValueChange={handleBillTypeChange}>
|
||||
<Select.Trigger class="h-9 w-full">
|
||||
<span class="text-sm">{filterBillType === 'alipay' ? '支付宝' : filterBillType === 'wechat' ? '微信' : filterBillType === 'manual' ? '手动' : '全部'}</span>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content>
|
||||
<Select.Item value="">全部</Select.Item>
|
||||
<Select.Item value="alipay">支付宝</Select.Item>
|
||||
<Select.Item value="wechat">微信</Select.Item>
|
||||
<Select.Item value="manual">手动</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="space-y-1.5 col-span-2 sm:col-span-1">
|
||||
<Label class="text-xs">搜索</Label>
|
||||
@@ -310,8 +388,8 @@
|
||||
{record.time}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden xl:table-cell">
|
||||
<Badge variant={record.bill_type === 'alipay' ? 'default' : 'secondary'}>
|
||||
{record.bill_type === 'alipay' ? '支付宝' : '微信'}
|
||||
<Badge variant={record.bill_type === 'manual' ? 'outline' : (record.bill_type === 'alipay' ? 'default' : 'secondary')}>
|
||||
{record.bill_type === 'manual' ? '手动输入' : (record.bill_type === 'alipay' ? '支付宝' : '微信')}
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
@@ -400,4 +478,11 @@
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- 手动添加视图 -->
|
||||
{#if activeTab === 'manual'}
|
||||
<ManualBillInput {categories} onSuccess={handleManualBillSuccess} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user