feat: 历史净值
This commit is contained in:
hzm
221
app/components/FundHistoryNetValue.jsx
Normal file
221
app/components/FundHistoryNetValue.jsx
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from '@tanstack/react-table';
|
||||||
|
import { fetchFundHistory } from '../api/fund';
|
||||||
|
import { cachedRequest } from '../lib/cacheRequest';
|
||||||
|
import FundHistoryNetValueModal from './FundHistoryNetValueModal';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 历史净值表格行：日期、净值、日涨幅（按日期降序，涨红跌绿）
|
||||||
|
*/
|
||||||
|
function buildRows(history) {
|
||||||
|
if (!Array.isArray(history) || history.length === 0) return [];
|
||||||
|
const reversed = [...history].reverse();
|
||||||
|
return reversed.map((item, i) => {
|
||||||
|
const prev = reversed[i + 1];
|
||||||
|
let dailyChange = null;
|
||||||
|
if (prev && Number.isFinite(item.value) && Number.isFinite(prev.value) && prev.value !== 0) {
|
||||||
|
dailyChange = ((item.value - prev.value) / prev.value) * 100;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
date: item.date,
|
||||||
|
netValue: item.value,
|
||||||
|
dailyChange,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
accessorKey: 'date',
|
||||||
|
header: '日期',
|
||||||
|
cell: (info) => info.getValue(),
|
||||||
|
meta: { align: 'left' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'netValue',
|
||||||
|
header: '净值',
|
||||||
|
cell: (info) => {
|
||||||
|
const v = info.getValue();
|
||||||
|
return v != null && Number.isFinite(v) ? Number(v).toFixed(4) : '—';
|
||||||
|
},
|
||||||
|
meta: { align: 'center' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'dailyChange',
|
||||||
|
header: '日涨幅',
|
||||||
|
cell: (info) => {
|
||||||
|
const v = info.getValue();
|
||||||
|
if (v == null || !Number.isFinite(v)) return '—';
|
||||||
|
const sign = v > 0 ? '+' : '';
|
||||||
|
const cls = v > 0 ? 'up' : v < 0 ? 'down' : '';
|
||||||
|
return <span className={cls}>{sign}{v.toFixed(2)}%</span>;
|
||||||
|
},
|
||||||
|
meta: { align: 'right' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FundHistoryNetValue({ code, range = '1m', theme }) {
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!code) {
|
||||||
|
setData([]);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let active = true;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const cacheKey = `fund_history_${code}_${range}`;
|
||||||
|
cachedRequest(() => fetchFundHistory(code, range), cacheKey, { cacheTime: 10 * 60 * 1000 })
|
||||||
|
.then((res) => {
|
||||||
|
if (active) {
|
||||||
|
setData(buildRows(res || []));
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (active) {
|
||||||
|
setError(err);
|
||||||
|
setData([]);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return () => { active = false; };
|
||||||
|
}, [code, range]);
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data,
|
||||||
|
columns,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const visibleRows = table.getRowModel().rows.slice(0, 5);
|
||||||
|
|
||||||
|
if (!code) return null;
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="fund-history-net-value" style={{ padding: '12px 0' }}>
|
||||||
|
<span className="muted" style={{ fontSize: '13px' }}>加载历史净值...</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (error || data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="fund-history-net-value" style={{ padding: '12px 0' }}>
|
||||||
|
<span className="muted" style={{ fontSize: '13px' }}>
|
||||||
|
{error ? '加载失败' : '暂无历史净值'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fund-history-net-value">
|
||||||
|
<div
|
||||||
|
className="fund-history-table-wrapper"
|
||||||
|
style={{
|
||||||
|
marginTop: 8,
|
||||||
|
border: '1px solid var(--border)',
|
||||||
|
borderRadius: 'var(--radius)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
background: 'var(--card)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
className="fund-history-table"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
borderCollapse: 'collapse',
|
||||||
|
fontSize: '13px',
|
||||||
|
color: 'var(--text)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map((hg) => (
|
||||||
|
<tr
|
||||||
|
key={hg.id}
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid var(--border)',
|
||||||
|
background: 'var(--table-row-alt-bg)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hg.headers.map((h) => (
|
||||||
|
<th
|
||||||
|
key={h.id}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
fontWeight: 600,
|
||||||
|
color: 'var(--muted)',
|
||||||
|
textAlign: h.column.columnDef.meta?.align || 'left',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{flexRender(h.column.columnDef.header, h.getContext())}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{visibleRows.map((row) => (
|
||||||
|
<tr
|
||||||
|
key={row.id}
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid var(--border)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<td
|
||||||
|
key={cell.id}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
color: 'var(--text)',
|
||||||
|
textAlign: cell.column.columnDef.meta?.align || 'left',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="muted"
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
padding: 0,
|
||||||
|
border: 'none',
|
||||||
|
background: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
onClick={() => setModalOpen(true)}
|
||||||
|
>
|
||||||
|
加载更多历史净值
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{modalOpen && (
|
||||||
|
<FundHistoryNetValueModal
|
||||||
|
open={modalOpen}
|
||||||
|
onOpenChange={setModalOpen}
|
||||||
|
code={code}
|
||||||
|
theme={theme}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
321
app/components/FundHistoryNetValueModal.jsx
Normal file
321
app/components/FundHistoryNetValueModal.jsx
Normal file
@@ -0,0 +1,321 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import {
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from '@tanstack/react-table';
|
||||||
|
import { fetchFundHistory } from '../api/fund';
|
||||||
|
import { cachedRequest } from '../lib/cacheRequest';
|
||||||
|
import { CloseIcon } from './Icons';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
} from '@/components/ui/drawer';
|
||||||
|
|
||||||
|
function buildRows(history) {
|
||||||
|
if (!Array.isArray(history) || history.length === 0) return [];
|
||||||
|
const reversed = [...history].reverse();
|
||||||
|
return reversed.map((item, i) => {
|
||||||
|
const prev = reversed[i + 1];
|
||||||
|
let dailyChange = null;
|
||||||
|
if (prev && Number.isFinite(item.value) && Number.isFinite(prev.value) && prev.value !== 0) {
|
||||||
|
dailyChange = ((item.value - prev.value) / prev.value) * 100;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
date: item.date,
|
||||||
|
netValue: item.value,
|
||||||
|
dailyChange,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
accessorKey: 'date',
|
||||||
|
header: '日期',
|
||||||
|
cell: (info) => info.getValue(),
|
||||||
|
meta: { align: 'left' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'netValue',
|
||||||
|
header: '净值',
|
||||||
|
cell: (info) => {
|
||||||
|
const v = info.getValue();
|
||||||
|
return v != null && Number.isFinite(v) ? Number(v).toFixed(4) : '—';
|
||||||
|
},
|
||||||
|
meta: { align: 'center' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'dailyChange',
|
||||||
|
header: '日涨幅',
|
||||||
|
cell: (info) => {
|
||||||
|
const v = info.getValue();
|
||||||
|
if (v == null || !Number.isFinite(v)) return '—';
|
||||||
|
const sign = v > 0 ? '+' : '';
|
||||||
|
const cls = v > 0 ? 'up' : v < 0 ? 'down' : '';
|
||||||
|
return <span className={cls}>{sign}{v.toFixed(2)}%</span>;
|
||||||
|
},
|
||||||
|
meta: { align: 'right' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FundHistoryNetValueModal({ open, onOpenChange, code, theme }) {
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [visibleCount, setVisibleCount] = useState(30);
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
const scrollRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
const mq = window.matchMedia('(max-width: 768px)');
|
||||||
|
const update = () => setIsMobile(mq.matches);
|
||||||
|
update();
|
||||||
|
mq.addEventListener('change', update);
|
||||||
|
return () => mq.removeEventListener('change', update);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || !code) return;
|
||||||
|
let active = true;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
setVisibleCount(30);
|
||||||
|
|
||||||
|
const cacheKey = `fund_history_${code}_all_modal`;
|
||||||
|
cachedRequest(() => fetchFundHistory(code, 'all'), cacheKey, { cacheTime: 10 * 60 * 1000 })
|
||||||
|
.then((res) => {
|
||||||
|
if (!active) return;
|
||||||
|
setData(buildRows(res || []));
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (!active) return;
|
||||||
|
setError(err);
|
||||||
|
setData([]);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
active = false;
|
||||||
|
};
|
||||||
|
}, [open, code]);
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data,
|
||||||
|
columns,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = table.getRowModel().rows.slice(0, visibleCount);
|
||||||
|
const hasMore = table.getRowModel().rows.length > visibleCount;
|
||||||
|
|
||||||
|
const handleOpenChange = (next) => {
|
||||||
|
if (!next) {
|
||||||
|
onOpenChange?.(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleScroll = (e) => {
|
||||||
|
const target = e.currentTarget;
|
||||||
|
if (!target || !hasMore) return;
|
||||||
|
const distance = target.scrollHeight - target.scrollTop - target.clientHeight;
|
||||||
|
if (distance < 40) {
|
||||||
|
setVisibleCount((prev) => {
|
||||||
|
const next = prev + 30;
|
||||||
|
const total = table.getRowModel().rows.length;
|
||||||
|
return next > total ? total : next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const header = (
|
||||||
|
<div className="title" style={{ marginBottom: 12, justifyContent: 'space-between' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<span>历史净值</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="icon-button"
|
||||||
|
onClick={() => onOpenChange?.(false)}
|
||||||
|
style={{ border: 'none', background: 'transparent' }}
|
||||||
|
>
|
||||||
|
<CloseIcon width="20" height="20" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const body = (
|
||||||
|
<div
|
||||||
|
ref={scrollRef}
|
||||||
|
style={{
|
||||||
|
maxHeight: '60vh',
|
||||||
|
overflowY: 'auto',
|
||||||
|
paddingRight: 4,
|
||||||
|
}}
|
||||||
|
onScroll={handleScroll}
|
||||||
|
>
|
||||||
|
{loading && (
|
||||||
|
<div style={{ padding: '16px 0', textAlign: 'center' }}>
|
||||||
|
<span className="muted" style={{ fontSize: 12 }}>加载历史净值...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && (error || data.length === 0) && (
|
||||||
|
<div style={{ padding: '16px 0', textAlign: 'center' }}>
|
||||||
|
<span className="muted" style={{ fontSize: 12 }}>
|
||||||
|
{error ? '加载失败' : '暂无历史净值'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && data.length > 0 && (
|
||||||
|
<div
|
||||||
|
className="fund-history-table-wrapper"
|
||||||
|
style={{
|
||||||
|
border: '1px solid var(--border)',
|
||||||
|
borderRadius: 'var(--radius)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
background: 'var(--card)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
className="fund-history-table"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
borderCollapse: 'collapse',
|
||||||
|
fontSize: '13px',
|
||||||
|
color: 'var(--text)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map((hg) => (
|
||||||
|
<tr
|
||||||
|
key={hg.id}
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid var(--border)',
|
||||||
|
background: 'var(--table-row-alt-bg)',
|
||||||
|
boxShadow: '0 1px 0 0 var(--border)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hg.headers.map((h) => (
|
||||||
|
<th
|
||||||
|
key={h.id}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
fontWeight: 600,
|
||||||
|
color: 'var(--muted)',
|
||||||
|
textAlign: h.column.columnDef.meta?.align || 'left',
|
||||||
|
background: 'var(--table-row-alt-bg)',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{flexRender(h.column.columnDef.header, h.getContext())}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<tr
|
||||||
|
key={row.id}
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid var(--border)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<td
|
||||||
|
key={cell.id}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
color: 'var(--text)',
|
||||||
|
textAlign: cell.column.columnDef.meta?.align || 'left',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && hasMore && (
|
||||||
|
<div style={{ padding: '12px 0', textAlign: 'center' }}>
|
||||||
|
<span className="muted" style={{ fontSize: 12 }}>向下滚动以加载更多...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Drawer open={open} onOpenChange={handleOpenChange} direction="bottom">
|
||||||
|
<DrawerContent
|
||||||
|
className="glass"
|
||||||
|
defaultHeight="70vh"
|
||||||
|
minHeight="40vh"
|
||||||
|
maxHeight="90vh"
|
||||||
|
>
|
||||||
|
<DrawerHeader className="flex flex-row items-center justify-between gap-2 py-3">
|
||||||
|
<DrawerTitle className="flex items-center gap-2.5 text-left">
|
||||||
|
<span>历史净值</span>
|
||||||
|
</DrawerTitle>
|
||||||
|
<DrawerClose
|
||||||
|
className="icon-button border-none bg-transparent p-1"
|
||||||
|
title="关闭"
|
||||||
|
style={{
|
||||||
|
borderColor: 'transparent',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseIcon width="20" height="20" />
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerHeader>
|
||||||
|
<div className="flex-1 px-4 pb-4">
|
||||||
|
{body}
|
||||||
|
</div>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogContent
|
||||||
|
showCloseButton={false}
|
||||||
|
className="glass card modal"
|
||||||
|
overlayClassName="modal-overlay"
|
||||||
|
overlayStyle={{ zIndex: 9998 }}
|
||||||
|
style={{
|
||||||
|
maxWidth: '520px',
|
||||||
|
width: '90vw',
|
||||||
|
maxHeight: '80vh',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
zIndex: 9999,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogTitle className="sr-only">历史净值</DialogTitle>
|
||||||
|
{header}
|
||||||
|
{body}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -16,7 +16,8 @@ import {
|
|||||||
Filler
|
Filler
|
||||||
} from 'chart.js';
|
} from 'chart.js';
|
||||||
import { Line } from 'react-chartjs-2';
|
import { Line } from 'react-chartjs-2';
|
||||||
import {cachedRequest} from "../lib/cacheRequest";
|
import { cachedRequest } from '../lib/cacheRequest';
|
||||||
|
import FundHistoryNetValue from './FundHistoryNetValue';
|
||||||
|
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
CategoryScale,
|
CategoryScale,
|
||||||
@@ -522,6 +523,8 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
|
|||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<FundHistoryNetValue code={code} range={range} theme={theme} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user