Compare commits
4 Commits
eb76c3a8dc
...
4884993d27
| Author | SHA1 | Date | |
|---|---|---|---|
| 4884993d27 | |||
| 6374f55aa1 | |||
| 06f6c847d8 | |||
| 99aaa05338 |
487
server/README.md
Normal file
487
server/README.md
Normal file
@@ -0,0 +1,487 @@
|
||||
# BillAI 服务器 API 文档
|
||||
|
||||
## 概述
|
||||
|
||||
BillAI 服务器是一个基于 Go 的后端服务,用于处理账单的上传、清洗、分析和存储。提供 REST API 接口供前端调用。
|
||||
|
||||
**服务地址**: `http://localhost:8080`
|
||||
|
||||
---
|
||||
|
||||
## API 接口列表
|
||||
|
||||
### 1. 健康检查
|
||||
|
||||
**端点**: `GET /health`
|
||||
|
||||
**功能**: 检查服务器健康状态
|
||||
|
||||
**参数**: 无
|
||||
|
||||
**响应示例**:
|
||||
```json
|
||||
{
|
||||
"status": "ok",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 账单管理 API
|
||||
|
||||
### 2. 上传账单文件
|
||||
|
||||
**端点**: `POST /api/upload`
|
||||
|
||||
**功能**: 上传支付宝或微信账单文件进行清洗和分析
|
||||
|
||||
**请求方式**: `multipart/form-data`
|
||||
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必需 | 说明 |
|
||||
|-------|------|------|------|
|
||||
| file | File | ✓ | 账单文件(CSV格式) |
|
||||
| type | string | ✓ | 账单类型:`alipay` 或 `wechat` |
|
||||
| format | string | - | 输出格式:`csv` 或 `json`(默认: csv) |
|
||||
| year | number | - | 账单年份(用于数据验证) |
|
||||
| month | number | - | 账单月份(用于数据验证) |
|
||||
|
||||
**响应示例** (成功):
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"message": "账单处理完成",
|
||||
"data": {
|
||||
"bill_type": "alipay",
|
||||
"raw_count": 50,
|
||||
"cleaned_count": 48,
|
||||
"duplicate_count": 2,
|
||||
"needs_review_count": 5,
|
||||
"file_name": "20260110_150405_alipay_1.csv"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**响应示例** (全部重复):
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"message": "文件中的 50 条记录全部已存在,无需重复导入",
|
||||
"data": {
|
||||
"bill_type": "alipay",
|
||||
"raw_count": 0,
|
||||
"cleaned_count": 0,
|
||||
"duplicate_count": 50
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**响应示例** (失败):
|
||||
```json
|
||||
{
|
||||
"result": false,
|
||||
"message": "账单类型无效,仅支持 alipay 或 wechat"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. 获取账单列表
|
||||
|
||||
**端点**: `GET /api/bills`
|
||||
|
||||
**功能**: 获取清洗后的账单数据,支持分页、筛选和排序
|
||||
|
||||
**请求参数** (Query):
|
||||
|
||||
| 参数名 | 类型 | 必需 | 说明 |
|
||||
|-------|------|------|------|
|
||||
| page | number | - | 页码(从1开始,默认: 1) |
|
||||
| page_size | number | - | 每页数量(默认: 20,最大: 100) |
|
||||
| start_date | string | - | 开始日期(YYYY-MM-DD 格式) |
|
||||
| end_date | string | - | 结束日期(YYYY-MM-DD 格式) |
|
||||
| category | string | - | 交易分类筛选 |
|
||||
| type | string | - | 账单来源:`alipay`、`wechat` 或 `manual` |
|
||||
| income_expense | string | - | 收支类型:`收入` 或 `支出` |
|
||||
|
||||
**响应示例**:
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"data": {
|
||||
"total": 150,
|
||||
"page": 1,
|
||||
"page_size": 20,
|
||||
"pages": 8,
|
||||
"total_expense": 5250.50,
|
||||
"total_income": 8000.00,
|
||||
"bills": [
|
||||
{
|
||||
"_id": "507f1f77bcf86cd799439011",
|
||||
"bill_type": "alipay",
|
||||
"transaction_id": "2021123456789",
|
||||
"merchant_order_no": "2021123456",
|
||||
"time": "2026-01-10T10:30:00Z",
|
||||
"category": "餐饮美食",
|
||||
"merchant": "星巴克",
|
||||
"description": "咖啡",
|
||||
"income_expense": "支出",
|
||||
"amount": 28.00,
|
||||
"pay_method": "支付宝",
|
||||
"status": "交易成功",
|
||||
"remark": "员工补贴",
|
||||
"review_level": "",
|
||||
"created_at": "2026-01-10T10:30:00Z",
|
||||
"updated_at": "2026-01-10T10:30:00Z",
|
||||
"source_file": "20260110_150405_alipay_1.csv",
|
||||
"upload_batch": "20260110_150405"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**错误响应**:
|
||||
```json
|
||||
{
|
||||
"result": false,
|
||||
"message": "数据库未连接"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 手动创建账单
|
||||
|
||||
**端点**: `POST /api/bills/manual`
|
||||
|
||||
**功能**: 手动添加单条或批量账单,支持去重
|
||||
|
||||
**请求方式**: `application/json`
|
||||
|
||||
**请求体**:
|
||||
```json
|
||||
{
|
||||
"bills": [
|
||||
{
|
||||
"time": "2026-01-10 14:30:00",
|
||||
"category": "餐饮美食",
|
||||
"merchant": "测试餐厅",
|
||||
"description": "午餐",
|
||||
"income_expense": "支出",
|
||||
"amount": 50.00,
|
||||
"pay_method": "支付宝",
|
||||
"status": "交易成功",
|
||||
"remark": "测试账单"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**请求参数说明**:
|
||||
|
||||
| 参数名 | 类型 | 必需 | 说明 |
|
||||
|-------|------|------|------|
|
||||
| bills | Array | ✓ | 账单数组 |
|
||||
| bills[].time | string | ✓ | 交易时间(格式: `YYYY-MM-DD HH:mm:ss`) |
|
||||
| bills[].category | string | ✓ | 交易分类 |
|
||||
| bills[].income_expense | string | ✓ | 收支类型:`收入` 或 `支出` |
|
||||
| bills[].amount | number | ✓ | 金额(>0) |
|
||||
| bills[].merchant | string | - | 交易对方(可选) |
|
||||
| bills[].description | string | - | 商品说明 |
|
||||
| bills[].pay_method | string | - | 支付方式 |
|
||||
| bills[].status | string | - | 交易状态(默认: `交易成功`) |
|
||||
| bills[].remark | string | - | 备注 |
|
||||
|
||||
**响应示例** (成功):
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"message": "创建成功",
|
||||
"data": {
|
||||
"success": 1,
|
||||
"failed": 0,
|
||||
"duplicates": 0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**响应示例** (部分失败):
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"message": "创建成功",
|
||||
"data": {
|
||||
"success": 3,
|
||||
"failed": 1,
|
||||
"duplicates": 0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**错误响应**:
|
||||
```json
|
||||
{
|
||||
"result": false,
|
||||
"message": "时间格式错误: 2026-01-10"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 获取需要复核的记录
|
||||
|
||||
**端点**: `GET /api/review`
|
||||
|
||||
**功能**: 获取清洗过程中标记为需要人工复核的记录
|
||||
|
||||
**请求参数** (Query):
|
||||
|
||||
| 参数名 | 类型 | 必需 | 说明 |
|
||||
|-------|------|------|------|
|
||||
| file | string | ✓ | 输出文件名(来自上传接口返回值) |
|
||||
| page | number | - | 页码(默认: 1) |
|
||||
| page_size | number | - | 每页数量(默认: 20) |
|
||||
|
||||
**响应示例**:
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"data": {
|
||||
"total": 5,
|
||||
"page": 1,
|
||||
"page_size": 20,
|
||||
"high_count": 2,
|
||||
"low_count": 3,
|
||||
"records": [
|
||||
{
|
||||
"row": 15,
|
||||
"time": "2026-01-10 10:30:00",
|
||||
"merchant": "未知商户",
|
||||
"amount": 100.00,
|
||||
"category": "未分类",
|
||||
"review_level": "HIGH",
|
||||
"issue": "无法识别的商户名称",
|
||||
"suggestion": "请手动确认或修改商户名称"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 获取月度统计数据
|
||||
|
||||
**端点**: `GET /api/monthly-stats`
|
||||
|
||||
**功能**: 获取每个月的收入、支出统计(不受日期筛选影响,返回全部月份数据)
|
||||
|
||||
**请求参数**: 无
|
||||
|
||||
**响应示例**:
|
||||
```json
|
||||
{
|
||||
"result": true,
|
||||
"data": [
|
||||
{
|
||||
"month": "2025-12",
|
||||
"expense": 8234.50,
|
||||
"income": 15000.00
|
||||
},
|
||||
{
|
||||
"month": "2026-01",
|
||||
"expense": 5250.50,
|
||||
"income": 8000.00
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**错误响应**:
|
||||
```json
|
||||
{
|
||||
"result": false,
|
||||
"message": "数据库未连接"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 数据模型
|
||||
|
||||
### 账单数据 (CleanedBill)
|
||||
|
||||
```go
|
||||
type CleanedBill struct {
|
||||
ID primitive.ObjectID `bson:"_id,omitempty" json:"_id"`
|
||||
BillType string `bson:"bill_type" json:"bill_type"` // alipay/wechat/manual
|
||||
TransactionID string `bson:"transaction_id" json:"transaction_id"`
|
||||
MerchantOrderNo string `bson:"merchant_order_no" json:"merchant_order_no"`
|
||||
Time time.Time `bson:"time" json:"time"`
|
||||
Category string `bson:"category" json:"category"`
|
||||
Merchant string `bson:"merchant" json:"merchant"`
|
||||
Description string `bson:"description" json:"description"`
|
||||
IncomeExpense string `bson:"income_expense" json:"income_expense"` // 收入/支出
|
||||
Amount float64 `bson:"amount" json:"amount"`
|
||||
PayMethod string `bson:"pay_method" json:"pay_method"`
|
||||
Status string `bson:"status" json:"status"`
|
||||
Remark string `bson:"remark" json:"remark"`
|
||||
ReviewLevel string `bson:"review_level" json:"review_level"` // HIGH/LOW/""
|
||||
CreatedAt time.Time `bson:"created_at" json:"created_at"`
|
||||
UpdatedAt time.Time `bson:"updated_at" json:"updated_at"`
|
||||
SourceFile string `bson:"source_file" json:"source_file"`
|
||||
UploadBatch string `bson:"upload_batch" json:"upload_batch"`
|
||||
}
|
||||
```
|
||||
|
||||
### 月度统计 (MonthlyStat)
|
||||
|
||||
```go
|
||||
type MonthlyStat struct {
|
||||
Month string `bson:"month" json:"month"` // YYYY-MM
|
||||
Expense float64 `bson:"expense" json:"expense"` // 支出总额
|
||||
Income float64 `bson:"income" json:"income"` // 收入总额
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 错误处理
|
||||
|
||||
所有 API 响应都遵循以下格式:
|
||||
|
||||
```json
|
||||
{
|
||||
"result": boolean,
|
||||
"message": "错误或成功消息",
|
||||
"data": {}
|
||||
}
|
||||
```
|
||||
|
||||
### 常见错误码
|
||||
|
||||
| HTTP 状态码 | result | 说明 |
|
||||
|-----------|--------|------|
|
||||
| 200 | true | 请求成功 |
|
||||
| 200 | false | 业务逻辑错误(如参数不合法) |
|
||||
| 400 | false | 请求参数错误 |
|
||||
| 404 | false | 资源不存在 |
|
||||
| 500 | false | 服务器内部错误 |
|
||||
|
||||
---
|
||||
|
||||
## 时区说明
|
||||
|
||||
- **存储**: 所有时间在数据库中按 **UTC 时区** 存储(ISO 8601 格式)
|
||||
- **输入**: 手动添加账单时,时间按 **本地时区** 解析(使用 `time.ParseInLocation`)
|
||||
- **输出**: API 返回的时间均为 ISO 8601 UTC 格式
|
||||
|
||||
### 时间格式
|
||||
|
||||
- 手动创建账单时: `YYYY-MM-DD HH:mm:ss`(本地时间)
|
||||
- 日期筛选参数: `YYYY-MM-DD`(本地日期)
|
||||
- API 返回时间: ISO 8601 UTC 格式(如 `2026-01-10T10:30:00Z`)
|
||||
|
||||
---
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 上传账单文件
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/api/upload \
|
||||
-F "file=@statement.csv" \
|
||||
-F "type=alipay" \
|
||||
-F "format=csv"
|
||||
```
|
||||
|
||||
### 查询账单列表
|
||||
|
||||
```bash
|
||||
curl "http://localhost:8080/api/bills?page=1&page_size=20&start_date=2026-01-01&end_date=2026-01-10&type=alipay"
|
||||
```
|
||||
|
||||
### 手动添加账单
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/api/bills/manual \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"bills": [
|
||||
{
|
||||
"time": "2026-01-10 14:30:00",
|
||||
"category": "餐饮美食",
|
||||
"merchant": "星巴克",
|
||||
"income_expense": "支出",
|
||||
"amount": 28.00,
|
||||
"pay_method": "支付宝"
|
||||
}
|
||||
]
|
||||
}'
|
||||
```
|
||||
|
||||
### 获取月度统计
|
||||
|
||||
```bash
|
||||
curl http://localhost:8080/api/monthly-stats
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 配置
|
||||
|
||||
服务器配置文件位于 `config.yaml`,主要配置项:
|
||||
|
||||
```yaml
|
||||
server:
|
||||
port: "8080"
|
||||
|
||||
mongodb:
|
||||
uri: "mongodb://admin:password@localhost:27017"
|
||||
database: "billai"
|
||||
collections:
|
||||
raw: "bills_raw"
|
||||
cleaned: "bills_cleaned"
|
||||
|
||||
analyzer:
|
||||
mode: "http" # http 或 process
|
||||
url: "http://analyzer:8001"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 开发信息
|
||||
|
||||
### 目录结构
|
||||
|
||||
```
|
||||
server/
|
||||
├── main.go # 程序入口
|
||||
├── router/ # 路由配置
|
||||
├── handler/ # 请求处理器
|
||||
├── service/ # 业务逻辑
|
||||
├── repository/ # 数据访问层
|
||||
├── database/ # 数据库连接
|
||||
├── model/ # 数据模型
|
||||
├── adapter/ # 外部服务适配器
|
||||
├── config/ # 配置管理
|
||||
└── README.md # 本文件
|
||||
```
|
||||
|
||||
### 主要依赖
|
||||
|
||||
- **Gin**: Web 框架
|
||||
- **MongoDB Driver**: 数据库驱动
|
||||
- **Go 1.21**: 运行环境
|
||||
|
||||
---
|
||||
|
||||
## 版本历史
|
||||
|
||||
| 版本 | 日期 | 说明 |
|
||||
|-----|------|------|
|
||||
| 1.0.0 | 2026-01-10 | 初始版本,支持账单上传、查询、手动添加和统计 |
|
||||
|
||||
@@ -198,3 +198,43 @@ func MonthlyStats(c *gin.Context) {
|
||||
Data: stats,
|
||||
})
|
||||
}
|
||||
|
||||
// ReviewStats 获取待复核数据统计
|
||||
func ReviewStats(c *gin.Context) {
|
||||
repo := repository.GetRepository()
|
||||
|
||||
// 从MongoDB查询所有需要复核的账单
|
||||
bills, err := repo.GetBillsNeedReview()
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, model.ReviewResponse{
|
||||
Result: false,
|
||||
Message: "查询失败: " + err.Error(),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
highCount := 0
|
||||
lowCount := 0
|
||||
totalCount := 0
|
||||
|
||||
// 统计各等级的复核记录
|
||||
for _, bill := range bills {
|
||||
totalCount++
|
||||
if bill.ReviewLevel == "HIGH" {
|
||||
highCount++
|
||||
} else if bill.ReviewLevel == "LOW" {
|
||||
lowCount++
|
||||
}
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, model.ReviewResponse{
|
||||
Result: true,
|
||||
Message: "获取成功",
|
||||
Data: &model.ReviewData{
|
||||
Total: totalCount,
|
||||
High: highCount,
|
||||
Low: lowCount,
|
||||
Records: nil, // 统计接口不返回具体记录
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
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,7 +50,13 @@ func setupAPIRoutes(r *gin.Engine) {
|
||||
// 账单查询
|
||||
api.GET("/bills", handler.ListBills)
|
||||
|
||||
// 手动创建账单
|
||||
api.POST("/bills/manual", handler.CreateManualBills)
|
||||
|
||||
// 月度统计(全部数据)
|
||||
api.GET("/monthly-stats", handler.MonthlyStats)
|
||||
|
||||
// 待复核数据统计
|
||||
api.GET("/review-stats", handler.ReviewStats)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,5 +273,70 @@ 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();
|
||||
}
|
||||
|
||||
// 获取待复核数据统计
|
||||
export async function fetchReviewStats(): Promise<ReviewResponse> {
|
||||
const response = await fetch(`${API_BASE}/api/review-stats`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 获取所有待复核的账单(完整数据)
|
||||
export async function fetchBillsByReviewLevel(): Promise<BillsResponse> {
|
||||
const response = await fetch(`${API_BASE}/api/bills?page=1&page_size=1000&review_level=HIGH,LOW`);
|
||||
|
||||
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>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { uploadBill, type UploadResponse, type BillType } from '$lib/api';
|
||||
import { onMount } from 'svelte';
|
||||
import { uploadBill, fetchMonthlyStats, fetchReviewStats, fetchBills, 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';
|
||||
@@ -13,6 +14,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);
|
||||
@@ -21,38 +24,146 @@
|
||||
let uploadResult: UploadResponse | null = $state(null);
|
||||
let errorMessage = $state('');
|
||||
|
||||
// 模拟统计数据
|
||||
const stats = [
|
||||
// 实时统计数据
|
||||
let stats = $state([
|
||||
{
|
||||
title: '本月支出',
|
||||
value: '¥12,580.00',
|
||||
change: '+12.5%',
|
||||
trend: 'up',
|
||||
description: '较上月增加'
|
||||
value: '¥0.00',
|
||||
change: '+0%',
|
||||
trend: 'up' as const,
|
||||
description: '加载中...'
|
||||
},
|
||||
{
|
||||
title: '本月收入',
|
||||
value: '¥25,000.00',
|
||||
change: '+8.2%',
|
||||
trend: 'up',
|
||||
description: '较上月增加'
|
||||
value: '¥0.00',
|
||||
change: '+0%',
|
||||
trend: 'up' as const,
|
||||
description: '加载中...'
|
||||
},
|
||||
{
|
||||
title: '待复核',
|
||||
value: '23',
|
||||
change: '-15%',
|
||||
trend: 'down',
|
||||
value: '0',
|
||||
change: '+0%',
|
||||
trend: 'up' as const,
|
||||
description: '需要人工确认'
|
||||
},
|
||||
{
|
||||
title: '已处理账单',
|
||||
value: '156',
|
||||
change: '+25%',
|
||||
trend: 'up',
|
||||
value: '0',
|
||||
change: '+0%',
|
||||
trend: 'up' as const,
|
||||
description: '累计处理记录'
|
||||
},
|
||||
]);
|
||||
|
||||
// 加载真实统计数据
|
||||
async function loadStats() {
|
||||
try {
|
||||
const now = new Date();
|
||||
const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
|
||||
|
||||
// 计算上月
|
||||
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
const previousMonth = `${lastMonth.getFullYear()}-${String(lastMonth.getMonth() + 1).padStart(2, '0')}`;
|
||||
|
||||
console.log('Current month:', currentMonth);
|
||||
console.log('Previous month:', previousMonth);
|
||||
|
||||
// 获取月度统计数据
|
||||
const monthlyResponse = await fetchMonthlyStats();
|
||||
console.log('Monthly response:', monthlyResponse);
|
||||
const monthlyStats = monthlyResponse.data || [];
|
||||
console.log('Monthly stats:', monthlyStats);
|
||||
|
||||
// 获取待复核统计
|
||||
const reviewResponse = await fetchReviewStats();
|
||||
console.log('Review response:', reviewResponse);
|
||||
const reviewTotal = reviewResponse.data?.total || 0;
|
||||
console.log('Review total:', reviewTotal);
|
||||
|
||||
// 获取已处理账单数量
|
||||
const billsResponse = await fetchBills({ page_size: 1 });
|
||||
console.log('Bills response:', billsResponse);
|
||||
const billTotal = billsResponse.data?.total || 0;
|
||||
console.log('Bill total:', billTotal);
|
||||
|
||||
// 提取当月和上月的数据
|
||||
const currentData = monthlyStats.find(m => m.month === currentMonth);
|
||||
const previousData = monthlyStats.find(m => m.month === previousMonth);
|
||||
|
||||
console.log('Current data:', currentData);
|
||||
console.log('Previous data:', previousData);
|
||||
|
||||
// 计算支出变化百分比
|
||||
const currentExpense = currentData?.expense || 0;
|
||||
const previousExpense = previousData?.expense || 0;
|
||||
const expenseChange = previousExpense > 0
|
||||
? ((currentExpense - previousExpense) / previousExpense * 100).toFixed(1)
|
||||
: 0;
|
||||
const expenseTrend = parseFloat(expenseChange.toString()) >= 0 ? 'up' : 'down';
|
||||
|
||||
// 计算收入变化百分比
|
||||
const currentIncome = currentData?.income || 0;
|
||||
const previousIncome = previousData?.income || 0;
|
||||
const incomeChange = previousIncome > 0
|
||||
? ((currentIncome - previousIncome) / previousIncome * 100).toFixed(1)
|
||||
: 0;
|
||||
const incomeTrend = parseFloat(incomeChange.toString()) >= 0 ? 'up' : 'down';
|
||||
|
||||
// 格式化金额
|
||||
const formatAmount = (amount: number) => {
|
||||
return `¥${amount.toFixed(2)}`;
|
||||
};
|
||||
|
||||
const formatChange = (change: number | string) => {
|
||||
const changeNum = typeof change === 'string' ? parseFloat(change) : change;
|
||||
const sign = changeNum >= 0 ? '+' : '';
|
||||
return `${sign}${changeNum.toFixed(1)}%`;
|
||||
};
|
||||
|
||||
const newStats = [
|
||||
{
|
||||
title: '本月支出',
|
||||
value: formatAmount(currentExpense),
|
||||
change: formatChange(expenseChange),
|
||||
trend: expenseTrend,
|
||||
description: '较上月' + (expenseTrend === 'up' ? '增加' : '减少')
|
||||
},
|
||||
{
|
||||
title: '本月收入',
|
||||
value: formatAmount(currentIncome),
|
||||
change: formatChange(incomeChange),
|
||||
trend: incomeTrend,
|
||||
description: '较上月' + (incomeTrend === 'up' ? '增加' : '减少')
|
||||
},
|
||||
{
|
||||
title: '待复核',
|
||||
value: reviewTotal.toString(),
|
||||
change: '+0%',
|
||||
trend: 'up' as const,
|
||||
description: '需要人工确认'
|
||||
},
|
||||
{
|
||||
title: '已处理账单',
|
||||
value: billTotal.toString(),
|
||||
change: '+0%',
|
||||
trend: 'up' as const,
|
||||
description: '累计处理记录'
|
||||
},
|
||||
];
|
||||
|
||||
console.log('New stats:', newStats);
|
||||
stats = newStats;
|
||||
} catch (err) {
|
||||
console.error('Failed to load stats:', err);
|
||||
// 保持默认状态
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadStats();
|
||||
});
|
||||
|
||||
function handleDragOver(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
isDragOver = true;
|
||||
@@ -169,9 +280,15 @@
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- 上传区域 -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<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">
|
||||
<!-- 拖拽上传区域 -->
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
let isLoading = $state(false);
|
||||
let errorMessage = $state('');
|
||||
let records: CleanedBill[] = $state([]);
|
||||
let allRecords: CleanedBill[] = $state([]); // 全部账单数据(不受日期筛选,用于每日趋势图)
|
||||
let monthlyStats: MonthlyStat[] = $state([]); // 月度统计(全部数据)
|
||||
let isDemo = $state(false);
|
||||
let serverAvailable = $state(true);
|
||||
@@ -88,6 +89,7 @@
|
||||
|
||||
// 派生分析数据
|
||||
let analysisRecords = $derived(isDemo ? demoRecords : toAnalysisRecords(records));
|
||||
let allAnalysisRecords = $derived(isDemo ? demoRecords : toAnalysisRecords(allRecords)); // 全部数据用于每日趋势图
|
||||
let categoryStats = $derived(calculateCategoryStats(analysisRecords));
|
||||
let dailyExpenseData = $derived(calculateDailyExpenseData(analysisRecords));
|
||||
let totalStats = $derived(calculateTotalStats(analysisRecords));
|
||||
@@ -122,13 +124,14 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// 并行获取数据:筛选后的账单 + 全部月度统计
|
||||
const [billsResponse, monthlyResponse] = await Promise.all([
|
||||
// 并行获取数据:筛选后的账单 + 全部账单 + 全部月度统计
|
||||
const [billsResponse, allBillsResponse, monthlyResponse] = await Promise.all([
|
||||
fetchBills({
|
||||
page_size: 10000,
|
||||
start_date: toDateString(startYear, startMonth, startDay),
|
||||
end_date: toDateString(endYear, endMonth, endDay),
|
||||
}),
|
||||
fetchBills({ page_size: 10000 }), // 获取全部数据,不传日期筛选
|
||||
fetchMonthlyStats(),
|
||||
]);
|
||||
|
||||
@@ -142,6 +145,11 @@
|
||||
errorMessage = billsResponse.message || '加载失败';
|
||||
}
|
||||
|
||||
// 处理全部账单数据(用于每日趋势图)
|
||||
if (allBillsResponse.result && allBillsResponse.data) {
|
||||
allRecords = allBillsResponse.data.bills || [];
|
||||
}
|
||||
|
||||
// 处理月度统计数据
|
||||
if (monthlyResponse.result && monthlyResponse.data) {
|
||||
monthlyStats = monthlyResponse.data;
|
||||
@@ -246,8 +254,8 @@
|
||||
<!-- 总览卡片 -->
|
||||
<OverviewCards {totalStats} records={analysisRecords} />
|
||||
|
||||
<!-- 每日支出趋势图(按分类堆叠) -->
|
||||
<DailyTrendChart records={analysisRecords} categories={sortedCategories()} />
|
||||
<!-- 每日支出趋势图(按分类堆叠) - 使用全部数据 -->
|
||||
<DailyTrendChart records={allAnalysisRecords} categories={sortedCategories()} />
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- 分类支出排行 -->
|
||||
|
||||
@@ -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,18 +185,45 @@
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- 标签切换 -->
|
||||
<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">
|
||||
@@ -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>
|
||||
<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}
|
||||
<option value={cat}>{cat}</option>
|
||||
<Select.Item value={cat}>{cat}</Select.Item>
|
||||
{/each}
|
||||
</select>
|
||||
</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>
|
||||
@@ -401,3 +479,10 @@
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- 手动添加视图 -->
|
||||
{#if activeTab === 'manual'}
|
||||
<ManualBillInput {categories} onSuccess={handleManualBillSuccess} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,111 +1,118 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { getReviewRecords, type ReviewRecord, type ReviewData } from '$lib/api';
|
||||
import { fetchReviewStats, fetchBillsByReviewLevel, type ReviewData, 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 * as Table from '$lib/components/ui/table';
|
||||
import Search from '@lucide/svelte/icons/search';
|
||||
import Loader2 from '@lucide/svelte/icons/loader-2';
|
||||
import AlertCircle from '@lucide/svelte/icons/alert-circle';
|
||||
import CheckCircle from '@lucide/svelte/icons/check-circle';
|
||||
import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
|
||||
import Clock from '@lucide/svelte/icons/clock';
|
||||
import PartyPopper from '@lucide/svelte/icons/party-popper';
|
||||
import FileText from '@lucide/svelte/icons/file-text';
|
||||
import RefreshCw from '@lucide/svelte/icons/refresh-cw';
|
||||
|
||||
let fileName = $state('');
|
||||
let isLoading = $state(false);
|
||||
let isLoading = $state(true);
|
||||
let errorMessage = $state('');
|
||||
let reviewData: ReviewData | null = $state(null);
|
||||
let reviewStats: ReviewData | null = $state(null);
|
||||
let allBills: CleanedBill[] = $state([]);
|
||||
let filterLevel = $state<'all' | 'HIGH' | 'LOW'>('all');
|
||||
|
||||
// 从 URL 获取文件名
|
||||
onMount(() => {
|
||||
const urlFileName = $page.url.searchParams.get('file');
|
||||
if (urlFileName) {
|
||||
fileName = urlFileName;
|
||||
loadReviewData();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadReviewData() {
|
||||
if (!fileName) return;
|
||||
|
||||
isLoading = true;
|
||||
errorMessage = '';
|
||||
|
||||
try {
|
||||
const result = await getReviewRecords(fileName);
|
||||
if (result.result && result.data) {
|
||||
reviewData = result.data;
|
||||
// 并行加载统计和账单数据
|
||||
const [statsResponse, billsResponse] = await Promise.all([
|
||||
fetchReviewStats(),
|
||||
fetchBillsByReviewLevel()
|
||||
]);
|
||||
|
||||
if (statsResponse.result && statsResponse.data) {
|
||||
reviewStats = statsResponse.data;
|
||||
} else {
|
||||
errorMessage = result.message || '获取数据失败';
|
||||
errorMessage = statsResponse.message || '获取统计数据失败';
|
||||
}
|
||||
|
||||
if (billsResponse.result && billsResponse.data?.bills) {
|
||||
// 过滤出有复核等级的账单(HIGH或LOW)
|
||||
allBills = billsResponse.data.bills.filter(bill =>
|
||||
bill.review_level === 'HIGH' || bill.review_level === 'LOW'
|
||||
);
|
||||
} else {
|
||||
errorMessage = billsResponse.message || '获取账单数据失败';
|
||||
}
|
||||
} catch (err) {
|
||||
errorMessage = err instanceof Error ? err.message : '网络错误';
|
||||
console.error('Failed to load review data:', err);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadReviewData();
|
||||
}
|
||||
|
||||
// 过滤后的记录
|
||||
let filteredRecords = $derived(
|
||||
reviewData?.records.filter(r =>
|
||||
filterLevel === 'all' || r.review_level === filterLevel
|
||||
allBills.filter(bill =>
|
||||
filterLevel === 'all' || bill.review_level === filterLevel
|
||||
) || []
|
||||
);
|
||||
|
||||
// 统计数据
|
||||
let totalCount = $derived(reviewStats?.total || 0);
|
||||
let highCount = $derived(reviewStats?.high || 0);
|
||||
let lowCount = $derived(reviewStats?.low || 0);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>复核记录 - BillAI</title>
|
||||
<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>
|
||||
<h1 class="text-2xl font-bold tracking-tight">智能复核</h1>
|
||||
<p class="text-muted-foreground">系统无法确定分类的交易记录,需要人工复核</p>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="flex gap-3">
|
||||
<div class="relative flex-1">
|
||||
<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="输入文件名..."
|
||||
class="pl-10"
|
||||
bind:value={fileName}
|
||||
onkeydown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
/>
|
||||
</div>
|
||||
<Button onclick={handleSearch} disabled={isLoading}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={loadReviewData}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{#if isLoading}
|
||||
<Loader2 class="mr-2 h-4 w-4 animate-spin" />
|
||||
查询中
|
||||
{:else}
|
||||
<Search class="mr-2 h-4 w-4" />
|
||||
查询
|
||||
<RefreshCw class="mr-2 h-4 w-4" />
|
||||
{/if}
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 加载中状态 -->
|
||||
{#if isLoading}
|
||||
<Card.Root>
|
||||
<Card.Content 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>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
|
||||
<!-- 错误提示 -->
|
||||
{#if errorMessage}
|
||||
{#if errorMessage && !isLoading}
|
||||
<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}
|
||||
|
||||
{#if reviewData}
|
||||
{#if reviewStats && !isLoading}
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<Card.Root>
|
||||
@@ -114,7 +121,7 @@
|
||||
<Clock class="h-4 w-4 text-muted-foreground" />
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="text-2xl font-bold">{reviewData.total}</div>
|
||||
<div class="text-2xl font-bold">{totalCount}</div>
|
||||
<p class="text-xs text-muted-foreground">需要人工确认的记录</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
@@ -125,7 +132,7 @@
|
||||
<AlertTriangle class="h-4 w-4 text-red-500" />
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="text-2xl font-bold text-red-600 dark:text-red-400">{reviewData.high}</div>
|
||||
<div class="text-2xl font-bold text-red-600 dark:text-red-400">{highCount}</div>
|
||||
<p class="text-xs text-muted-foreground">无法确定分类</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
@@ -136,7 +143,7 @@
|
||||
<AlertCircle class="h-4 w-4 text-yellow-500" />
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{reviewData.low}</div>
|
||||
<div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{lowCount}</div>
|
||||
<p class="text-xs text-muted-foreground">分类可能有变更</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
@@ -153,21 +160,21 @@
|
||||
size="sm"
|
||||
onclick={() => filterLevel = 'all'}
|
||||
>
|
||||
全部 ({reviewData.total})
|
||||
全部 ({totalCount})
|
||||
</Button>
|
||||
<Button
|
||||
variant={filterLevel === 'HIGH' ? 'destructive' : 'outline'}
|
||||
size="sm"
|
||||
onclick={() => filterLevel = 'HIGH'}
|
||||
>
|
||||
高优先级 ({reviewData.high})
|
||||
高优先级 ({highCount})
|
||||
</Button>
|
||||
<Button
|
||||
variant={filterLevel === 'LOW' ? 'secondary' : 'outline'}
|
||||
size="sm"
|
||||
onclick={() => filterLevel = 'LOW'}
|
||||
>
|
||||
低优先级 ({reviewData.low})
|
||||
低优先级 ({lowCount})
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,26 +185,26 @@
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[160px]">时间</Table.Head>
|
||||
<Table.Head class="w-[160px]">交易时间</Table.Head>
|
||||
<Table.Head>分类</Table.Head>
|
||||
<Table.Head>交易对方</Table.Head>
|
||||
<Table.Head>商品说明</Table.Head>
|
||||
<Table.Head>收/支</Table.Head>
|
||||
<Table.Head class="text-right">金额</Table.Head>
|
||||
<Table.Head class="w-[80px]">等级</Table.Head>
|
||||
<Table.Head class="w-[80px]">优先级</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each filteredRecords as record}
|
||||
<Table.Row>
|
||||
<Table.Cell class="text-muted-foreground text-sm">
|
||||
{record.time}
|
||||
{record.time ? new Date(record.time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '-'}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Badge variant="secondary">{record.category}</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="max-w-[200px] truncate" title={record.merchant}>
|
||||
{record.merchant}
|
||||
{record.merchant || '-'}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="max-w-[200px] truncate text-muted-foreground" title={record.description}>
|
||||
{record.description || '-'}
|
||||
@@ -208,7 +215,7 @@
|
||||
</span>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right font-mono font-medium">
|
||||
¥{record.amount}
|
||||
¥{record.amount.toFixed(2)}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Badge variant={record.review_level === 'HIGH' ? 'destructive' : 'outline'}>
|
||||
@@ -224,17 +231,10 @@
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<PartyPopper class="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p class="text-muted-foreground">没有需要复核的记录</p>
|
||||
<p class="text-sm text-muted-foreground">所有账单已正确分类</p>
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else if !isLoading && !errorMessage}
|
||||
<Card.Root>
|
||||
<Card.Content class="flex flex-col items-center justify-center py-16">
|
||||
<FileText class="h-16 w-16 text-muted-foreground mb-4" />
|
||||
<p class="text-lg font-medium">输入文件名查询复核记录</p>
|
||||
<p class="text-sm text-muted-foreground">上传账单后可在此查看需要复核的交易</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user