fix(): 修改布局

This commit is contained in:
yuj
2025-12-04 20:54:44 +08:00
parent b4e0470b6e
commit b67a7cae2e
6 changed files with 616 additions and 115 deletions

View File

@@ -58,40 +58,57 @@ const FinanceTransactionLogs: React.FC = () => {
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
form={form}
onFinish={() => fetchList(1, size)}
style={{ marginBottom: 20 }}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
{/* 第一行用户ID、订单编号、流水类型、状态、时间范围 */}
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', alignItems: 'center' }}>
<Form.Item name="user_id" label="用户PID:" style={{ margin: 0, flex: '0 0 auto' }}>
<Input allowClear placeholder="用户ID" style={{ width: 200 }} />
</Form.Item>
<Form.Item name="order_id" label="订单编号:" style={{ margin: 0, flex: '0 0 auto' }}>
<Input allowClear placeholder="订单编号" style={{ width: 200 }} />
</Form.Item>
<Form.Item name="type" label="流水类型:" style={{ margin: 0, flex: '0 0 auto' }}>
<Select allowClear placeholder="充值/退款/消费" style={{ width: 220 }}
options={[
{ label: 'recharge', value: 'recharge' },
{ label: 'refund', value: 'refund' },
{ label: 'consume', value: 'consume' },
]}
/>
</Form.Item>
<Form.Item name="status" label="状态:" style={{ margin: 0, flex: '0 0 auto' }}>
<Select allowClear placeholder="成功/失败/待定" style={{ width: 220 }}
options={[
{ label: 'success', value: 'success' },
{ label: 'failed', value: 'failed' },
{ label: 'pending', value: 'pending' },
]}
/>
</Form.Item>
</div>
{/* 第二行:时间范围和按钮 */}
<div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>
<Form.Item name="range" label="时间范围:" style={{ margin: 0, flex: '0 0 auto' }}>
<DatePicker.RangePicker style={{ width: 300 }} />
</Form.Item>
<Form.Item style={{ margin: 0, flex: '0 0 auto' }}>
<Space size="middle">
<Button type="primary" htmlType="submit" onClick={() => { setPage(1); }} size="middle">
</Button>
<Button onClick={() => { form.resetFields(); fetchList(1, size); setPage(1); }} size="middle">
</Button>
</Space>
</Form.Item>
</div>
</div>
</Form>
<Table
rowKey={(r) => r.id || r.transaction_id}