R524809
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Card, Row, Col, Statistic } from 'antd';
|
|
import { ArrowUpOutlined } from '@ant-design/icons';
|
|
import PositionList from './components/PositionList';
|
|
import { stockDataService } from '@/services/stock-data';
|
|
import './AssetsPage.css';
|
|
|
|
const AssetsPage = () => {
|
|
// 初始化股票数据（页面加载时）
|
|
useEffect(() => {
|
|
stockDataService.init().catch((error) => {
|
|
console.error('初始化股票数据失败', error);
|
|
});
|
|
}, []);
|
|
|
|
// 写死的数据（占位）
|
|
const stats = {
|
|
totalAssets: 1234567,
|
|
totalProfit: 234567,
|
|
profitRate: 23.4,
|
|
recordDays: 300,
|
|
};
|
|
|
|
return (
|
|
<div className="assets-page">
|
|
{/* 统计卡片 */}
|
|
<Row gutter={[16, 16]} className="stats-row">
|
|
<Col xs={24} sm={12} lg={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="总资产"
|
|
value={stats.totalAssets}
|
|
prefix="¥"
|
|
valueStyle={{ color: '#1f2937' }}
|
|
/>
|
|
<div className="stat-change positive">
|
|
<ArrowUpOutlined /> +2.5% 今日
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={24} sm={12} lg={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="累计收益"
|
|
value={stats.totalProfit}
|
|
prefix="¥"
|
|
valueStyle={{ color: '#1f2937' }}
|
|
/>
|
|
<div className="stat-change positive">
|
|
<ArrowUpOutlined /> +{stats.profitRate}%
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={24} sm={12} lg={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="累计收益率"
|
|
value={stats.profitRate}
|
|
suffix="%"
|
|
valueStyle={{ color: '#1f2937' }}
|
|
/>
|
|
<div className="stat-change positive">
|
|
<ArrowUpOutlined /> +2.3%
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={24} sm={12} lg={6}>
|
|
<Card>
|
|
<Statistic
|
|
title="记账时长"
|
|
value={stats.recordDays}
|
|
suffix="天"
|
|
valueStyle={{ color: '#1f2937' }}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
|
|
{/* 资产趋势图表占位 */}
|
|
<Card className="chart-card" title="资产趋势">
|
|
<div className="chart-placeholder">
|
|
<p>图表区域（后续使用 ECharts 实现）</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 持仓列表 */}
|
|
<PositionList />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AssetsPage;
|