wurenzhi/makemd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化代码结构并修复类型问题

Browse Source 
- 移除未使用的TabPane组件
- 修复类型定义和导入方式
- 优化mock数据源的环境变量判断逻辑
- 更新文档结构并归档旧文件
- 添加新的UI组件和Memo组件
- 调整API路径和响应处理
This commit is contained in:
wurenzhi
2026-03-23 12:41:35 +08:00
parent a037843851
commit 2b86715c09
363 changed files with 39305 additions and 40622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
dashboard/src/pages/Finance/Transactions.tsx
View File

@@ -1,23 +1,31 @@
import React, { useState, useEffect } from 'react';
import { Table, Button, Input, Select, DatePicker, message } from 'antd';
import { SearchOutlined, FilterOutlined, ExportOutlined } from '@ant-design/icons';
import React, { useState, useEffect, useMemo } from 'react';
import { Table, Button, Input, Select, DatePicker, message, Card, Row, Col, Tag, Space, Modal, Drawer, Descriptions, Typography, Alert, Statistic, Tooltip } from 'antd';
import { SearchOutlined, FilterOutlined, ExportOutlined, DownloadOutlined, EyeOutlined, CheckCircleOutlined, CloseCircleOutlined, SyncOutlined, DollarOutlined, ArrowUpOutlined, ArrowDownOutlined, ReloadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { financeDataSource, Transaction } from '@/services/financeDataSource';
import { LineChart, Line, Bar, Pie, ResponsiveContainer, Legend, XAxis, YAxis, CartesianGrid, Cell } from 'recharts';
import moment from 'moment';
const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;
const { Title, Text } = Typography;
const Transactions: React.FC = () => {
const navigate = useNavigate();
const [transactions, setTransactions] = useState<Transaction[]>([]);
const [loading, setLoading] = useState(false);
const [selectedRows, setSelectedRows] = useState<Transaction[]>([]);
const [detailDrawerVisible, setDetailDrawerVisible] = useState(false);
const [currentTransaction, setCurrentTransaction] = useState<Transaction | null>(null);
const [filters, setFilters] = useState({
type: '',
category: '',
status: '',
search: '',
dateRange: null as any,
minAmount: null as number | null,
maxAmount: null as number | null,
});
useEffect(() => {
@@ -40,131 +48,388 @@ const Transactions: React.FC = () => {
message.success('交易记录已导出');
};
const handleBatchExport = () => {
if (selectedRows.length === 0) {
message.warning('请先选择要导出的交易');
return;
}
message.success(`成功导出 ${selectedRows.length} 条交易记录`);
};
const handleViewDetail = (record: Transaction) => {
setCurrentTransaction(record);
setDetailDrawerVisible(true);
};
const handleRefresh = () => {
fetchTransactions();
message.success('数据已刷新');
};
const stats = useMemo(() => {
const income = transactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0);
const expense = transactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
const pending = transactions.filter(t => t.status === 'pending').reduce((sum, t) => sum + t.amount, 0);
return {
income,
expense,
profit: income - expense,
pending,
total: transactions.length,
};
}, [transactions]);
const trendData = useMemo(() => {
const trendData = Array.from({ length: 7 }, (_, i) => {
const date = moment().subtract(i, 'days').format('YYYY-MM-DD');
const dayTransactions = transactions.filter(t => moment(t.createdAt).format('YYYY-MM-DD') === date);
return {
date,
income: dayTransactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0),
expense: dayTransactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0),
};
}).reverse();
return trendData;
}, [transactions]);
const categoryData = useMemo(() => {
const categoryMap: Record<string, number> = {};
transactions.filter(t => t.type === 'expense').forEach(t => {
categoryMap[t.category] = (categoryMap[t.category] || 0) + t.amount;
});
return Object.entries(categoryMap).map(([name, value]) => ({ name, value }));
}, [transactions]);
const columns = [
{
title: '交易ID',
dataIndex: 'transactionId',
key: 'transactionId',
render: (text: string) => <Text strong>{text}</Text>,
},
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
sorter: (a: Transaction, b: Transaction) => a.amount - b.amount,
render: (amount: number, record: Transaction) => (
<span style={{ color: record.type === 'income' ? '#3f8600' : '#cf1322' }}>
{record.type === 'income' ? '+' : '-'}$${amount.toFixed(2)}
</span>
<Text style={{ color: record.type === 'income' ? '#52c41a' : '#ff4d4f', fontWeight: 500 }}>
{record.type === 'income' ? '+' : '-'}${amount.toFixed(2)}
</Text>
),
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
filters: [
{ text: '收入', value: 'income' },
{ text: '支出', value: 'expense' },
],
render: (type: string) => {
return type === 'income' ? '收入' : '支出';
const typeConfig = {
income: { text: '收入', color: 'success' },
expense: { text: '支出', color: 'error' },
};
const config = typeConfig[type as keyof typeof typeConfig];
return <Tag color={config.color}>{config.text}</Tag>;
},
},
{
title: '分类',
dataIndex: 'category',
key: 'category',
filters: [
{ text: '销售', value: 'Sales' },
{ text: '供应商', value: 'Suppliers' },
{ text: '营销', value: 'Marketing' },
{ text: '物流', value: 'Shipping' },
{ text: '平台费用', value: 'Platform' },
{ text: '退款', value: 'Refund' },
],
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
{
title: '日期',
dataIndex: 'date',
key: 'date',
sorter: (a: Transaction, b: Transaction) => moment(a.createdAt).unix() - moment(b.createdAt).unix(),
render: (date: string) => moment(date).format('YYYY-MM-DD HH:mm'),
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
filters: [
{ text: '已完成', value: 'completed' },
{ text: '待处理', value: 'pending' },
{ text: '失败', value: 'failed' },
],
render: (status: string) => {
const statusMap: Record<string, string> = {
completed: '已完成',
pending: '待处理',
failed: '失败',
const statusConfig = {
completed: { text: '已完成', color: 'success', icon: <CheckCircleOutlined /> },
pending: { text: '待处理', color: 'warning', icon: <SyncOutlined spin /> },
failed: { text: '失败', color: 'error', icon: <CloseCircleOutlined /> },
};
return statusMap[status] || status;
const config = statusConfig[status as keyof typeof statusConfig];
return <Tag color={config.color} icon={config.icon}>{config.text}</Tag>;
},
},
{
title: '操作',
key: 'action',
render: (_: any, record: Transaction) => (
<Space>
<Button type="link" size="small" icon={<EyeOutlined />} onClick={() => handleViewDetail(record)}>
查看
</Button>
</Space>
),
},
];
return (
<div className="transactions">
<div className="page-header">
<h1>交易记录</h1>
<Button
type="primary"
icon={<ExportOutlined />}
onClick={handleExport}
>
导出
</Button>
</div>
<div className="transactions" style={{ padding: 24 }}>
<Row justify="space-between" align="middle" style={{ marginBottom: 24 }}>
<Col>
<Title level={4}>交易记录</Title>
<Text type="secondary">查看和管理所有财务交易</Text>
</Col>
<Col>
<Space>
<Button icon={<ReloadOutlined />} onClick={handleRefresh}>
刷新
</Button>
<Button icon={<ExportOutlined />} onClick={handleExport}>
导出全部
</Button>
</Space>
</Col>
</Row>
<div className="filter-section" style={{ marginBottom: 24, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
<Search
placeholder="搜索交易ID或描述"
style={{ width: 300 }}
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
/>
<Select
placeholder="类型"
style={{ width: 120 }}
onChange={(value) => setFilters({ ...filters, type: value })}
>
<Option value="">全部</Option>
<Option value="income">收入</Option>
<Option value="expense">支出</Option>
</Select>
<Select
placeholder="分类"
style={{ width: 120 }}
onChange={(value) => setFilters({ ...filters, category: value })}
>
<Option value="">全部</Option>
<Option value="Sales">销售</Option>
<Option value="Suppliers">供应商</Option>
<Option value="Marketing">营销</Option>
<Option value="Shipping">物流</Option>
</Select>
<Select
placeholder="状态"
style={{ width: 120 }}
onChange={(value) => setFilters({ ...filters, status: value })}
>
<Option value="">全部</Option>
<Option value="completed">已完成</Option>
<Option value="pending">待处理</Option>
<Option value="failed">失败</Option>
</Select>
<RangePicker
style={{ width: 300 }}
onChange={(dates) => setFilters({ ...filters, dateRange: dates })}
/>
<Button
icon={<FilterOutlined />}
onClick={fetchTransactions}
>
筛选
</Button>
</div>
<Row gutter={16} style={{ marginBottom: 24 }}>
<Col xs={24} sm={12} lg={6}>
<Card size="small">
<Statistic
title="总收入"
value={stats.income}
precision={2}
prefix={<ArrowUpOutlined />}
valueStyle={{ color: '#52c41a' }}
suffix="USD"
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card size="small">
<Statistic
title="总支出"
value={stats.expense}
precision={2}
prefix={<ArrowDownOutlined />}
valueStyle={{ color: '#ff4d4f' }}
suffix="USD"
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card size="small">
<Statistic
title="净利润"
value={stats.profit}
precision={2}
prefix={<DollarOutlined />}
valueStyle={{ color: stats.profit >= 0 ? '#52c41a' : '#ff4d4f' }}
suffix="USD"
/>
</Card>
</Col>
<Col xs={24} sm={12} lg={6}>
<Card size="small">
<Statistic
title="待处理"
value={stats.pending}
precision={2}
prefix={<SyncOutlined />}
valueStyle={{ color: '#faad14' }}
suffix="USD"
/>
</Card>
</Col>
</Row>
<Table
columns={columns}
dataSource={transactions}
loading={loading}
rowKey="id"
pagination={{
pageSize: 10,
showSizeChanger: true,
}}
/>
<Row gutter={16} style={{ marginBottom: 24 }}>
<Col span={16}>
<Card title="收支趋势（最近7天）" size="small">
<ResponsiveContainer width="100%" height={250}>
<LineChart
data={trendData}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="income" name="收入" stroke="#52c41a" activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="expense" name="支出" stroke="#ff4d4f" />
</LineChart>
</ResponsiveContainer>
</Card>
</Col>
<Col span={8}>
<Card title="支出分类" size="small">
<ResponsiveContainer width="100%" height={250}>
<Pie
data={categoryData}
cx="50%"
cy="50%"
labelLine={false}
outerRadius={80}
fill="#8884d8"
dataKey="value"
label={({ name, percent }) => `${name}: ${((percent || 0) * 100).toFixed(0)}%`}
>
{categoryData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={['#1890ff', '#52c41a', '#faad14', '#ff4d4f', '#722ed1', '#eb2f96'][index % 6]} />
))}
</Pie>
</ResponsiveContainer>
</Card>
</Col>
</Row>
{selectedRows.length > 0 && (
<Alert
message={`已选择 ${selectedRows.length} 项`}
action={
<Space>
<Button icon={<ExportOutlined />} onClick={handleBatchExport}>
批量导出
</Button>
<Button onClick={() => setSelectedRows([])}>
取消选择
</Button>
</Space>
}
style={{ marginBottom: 16 }}
/>
)}
<Card>
<div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
<Search
placeholder="搜索交易ID或描述"
style={{ width: 300 }}
onSearch={(value) => setFilters({ ...filters, search: value })}
allowClear
/>
<Select
placeholder="类型"
style={{ width: 120 }}
value={filters.type}
onChange={(value) => setFilters({ ...filters, type: value })}
allowClear
>
<Option value="income">收入</Option>
<Option value="expense">支出</Option>
</Select>
<Select
placeholder="分类"
style={{ width: 120 }}
value={filters.category}
onChange={(value) => setFilters({ ...filters, category: value })}
allowClear
>
<Option value="Sales">销售</Option>
<Option value="Suppliers">供应商</Option>
<Option value="Marketing">营销</Option>
<Option value="Shipping">物流</Option>
<Option value="Platform">平台费用</Option>
<Option value="Refund">退款</Option>
</Select>
<Select
placeholder="状态"
style={{ width: 120 }}
value={filters.status}
onChange={(value) => setFilters({ ...filters, status: value })}
allowClear
>
<Option value="completed">已完成</Option>
<Option value="pending">待处理</Option>
<Option value="failed">失败</Option>
</Select>
<RangePicker
style={{ width: 300 }}
value={filters.dateRange}
onChange={(dates) => setFilters({ ...filters, dateRange: dates })}
/>
<Button
icon={<FilterOutlined />}
onClick={fetchTransactions}
>
筛选
</Button>
</div>
<Table
columns={columns}
dataSource={transactions}
loading={loading}
rowKey="id"
rowSelection={{
selectedRowKeys: selectedRows.map(r => r.id),
onChange: (selectedRowKeys: React.Key[], selectedRows: Transaction[]) => {
setSelectedRows(selectedRows);
},
}}
pagination={{
pageSize: 20,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `共 ${total} 条`,
pageSizeOptions: ['10', '20', '50', '100'],
}}
scroll={{ x: 1200 }}
/>
</Card>
<Drawer
title="交易详情"
placement="right"
onClose={() => setDetailDrawerVisible(false)}
visible={detailDrawerVisible}
width={600}
>
{currentTransaction && (
<Descriptions column={1} bordered>
<Descriptions.Item label="交易ID">{currentTransaction.id}</Descriptions.Item>
<Descriptions.Item label="金额">
<Text style={{ color: currentTransaction.type === 'income' ? '#52c41a' : '#ff4d4f', fontSize: 18, fontWeight: 500 }}>
{currentTransaction.type === 'income' ? '+' : '-'}${currentTransaction.amount.toFixed(2)}
</Text>
</Descriptions.Item>
<Descriptions.Item label="类型">
<Tag color={currentTransaction.type === 'income' ? 'success' : 'error'}>
{currentTransaction.type === 'income' ? '收入' : '支出'}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="分类">{currentTransaction.category}</Descriptions.Item>
<Descriptions.Item label="描述">{currentTransaction.description}</Descriptions.Item>
<Descriptions.Item label="日期">{moment(currentTransaction.createdAt).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
<Descriptions.Item label="状态">
<Tag color={currentTransaction.status === 'completed' ? 'success' : currentTransaction.status === 'pending' ? 'warning' : 'error'}>
{currentTransaction.status === 'completed' ? '已完成' : currentTransaction.status === 'pending' ? '待处理' : '失败'}
</Tag>
</Descriptions.Item>
</Descriptions>
)}
</Drawer>
</div>
);
};