feat():learning后台管理前端页面初始化

2025-12-04 17:51:24 +08:00
commit 83a614bd75
97 changed files with 23324 additions and 0 deletions
--- a/src/pages/FinanceTransactionLogs.tsx
+++ b/src/pages/FinanceTransactionLogs.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Card, Table, Typography, Form, Input, DatePicker, Button, Space, Select } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { FinanceApiService } from '../services/api';
+
+const FinanceTransactionLogs: React.FC = () => {
+  const [data, setData] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(20);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  const buildParams = (p = page, s = size) => {
+    const vals = form.getFieldsValue();
+    const range = vals.range as any[] | undefined;
+    const start = range?.[0]?.format?.('YYYY-MM-DD') || undefined;
+    const end = range?.[1]?.format?.('YYYY-MM-DD') || undefined;
+    return {
+      page: p,
+      size: s,
+      user_id: vals.user_id,
+      order_id: vals.order_id,
+      type: vals.type,
+      status: vals.status,
+      start,
+      end,
+    } as any;
+  };
+
+  const fetchList = async (p = page, s = size) => {
+    setLoading(true);
+    try {
+      const res = await FinanceApiService.listTransactionLogs(buildParams(p, s));
+      setData(res?.data || res?.list || []);
+      setTotal(res?.total || 0);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchList(); }, []);
+
+  const columns: ColumnsType<any> = useMemo(() => ([
+    { title: '流水ID', dataIndex: 'transaction_id', key: 'transaction_id' },
+    { title: '用户id', dataIndex: 'user_id', key: 'user_id' },
+    { title: '订单id', dataIndex: 'order_id', key: 'order_id' },
+    { title: '流水类型', dataIndex: 'type', key: 'type' },
+    { title: '金额(最小单位)', dataIndex: 'amount', key: 'amount' },
+    { title: '货币', dataIndex: 'currency', key: 'currency' },
+    { title: '操作前余额', dataIndex: 'balance_before', key: 'balance_before' },
+    { title: '操作后余额', dataIndex: 'balance_after', key: 'balance_after' },
+    { title: '状态', dataIndex: 'status', key: 'status' },
+    { title: '描述', dataIndex: 'description', key: 'description' },
+    { title: 'PayPal交易ID', dataIndex: 'paypal_transaction_id', key: 'paypal_transaction_id' },
+    { title: '创建时间', dataIndex: 'created_at', key: 'created_at' },
+  ]), []);
+
+  return (
+    <Card bordered={false} title={<Typography.Title level={4} style={{ margin: 0 }}>用户流水</Typography.Title>}>
+      <Form form={form} layout="inline" onFinish={() => fetchList(1, size)} style={{ marginBottom: 12 }}>
+        <Form.Item name="user_id" label="用户id">
+          <Input allowClear placeholder="用户id" style={{ width: 180 }} />
+        </Form.Item>
+        <Form.Item name="order_id" label="订单id">
+          <Input allowClear placeholder="订单id" style={{ width: 180 }} />
+        </Form.Item>
+        <Form.Item name="type" label="流水类型">
+          <Select allowClear placeholder="recharge/refund/consume" style={{ width: 200 }}
+            options={[
+              { label: 'recharge', value: 'recharge' },
+              { label: 'refund', value: 'refund' },
+              { label: 'consume', value: 'consume' },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="status" label="状态">
+          <Select allowClear placeholder="success/failed/pending" style={{ width: 200 }}
+            options={[
+              { label: 'success', value: 'success' },
+              { label: 'failed', value: 'failed' },
+              { label: 'pending', value: 'pending' },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="range" label="时间范围">
+          <DatePicker.RangePicker />
+        </Form.Item>
+        <Form.Item>
+          <Space>
+            <Button type="primary" htmlType="submit" onClick={() => { setPage(1); }}>查询</Button>
+            <Button onClick={() => { form.resetFields(); fetchList(1, size); setPage(1); }}>重置</Button>
+          </Space>
+        </Form.Item>
+      </Form>
+      <Table
+        rowKey={(r) => r.id || r.transaction_id}
+        columns={columns}
+        dataSource={data}
+        loading={loading}
+        pagination={{ current: page, pageSize: size, total, onChange: (p, s) => { setPage(p); setSize(s); fetchList(p, s); } }}
+        scroll={{ x: 1200 }}
+      />
+    </Card>
+  );
+};
+
+export default FinanceTransactionLogs;
+
+
+