lulu/arbitrage-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent page scroll jump on data refresh - silent reload + fixed container heights

Browse Source
This commit is contained in:
root 2026-02-27 12:38:58 +00:00
parent 48d1611d5b
commit 2a6fb97a43
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/app/trades/page.tsx
View File

@ -93,12 +93,12 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
<span className="text-red-500 font-medium">▼ 红</span>=主动卖（空方发动） <span className="text-red-500 font-medium">▼ 红</span>=主动卖（空方发动）
</p> </p>
</div> </div>
<div className="overflow-y-auto" style={{ maxHeight: 400 }}> <div className="overflow-y-auto flex-1" style={{ maxHeight: 420, scrollBehavior: "auto" }}>
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-24 text-slate-400 text-sm">加载中...</div> <div className="flex items-center justify-center h-24 text-slate-400 text-sm">加载中...</div>
) : ( ) : (
<table className="w-full text-xs"> <table className="w-full text-xs">
<thead className="sticky top-0 bg-white z-10"> <thead className="sticky top-0 bg-white z-10 shadow-sm">
<tr className="bg-slate-50 border-b border-slate-100"> <tr className="bg-slate-50 border-b border-slate-100">
<th className="text-left px-3 py-2 text-slate-500 font-medium">价格</th> <th className="text-left px-3 py-2 text-slate-500 font-medium">价格</th>
<th className="text-right px-3 py-2 text-slate-500 font-medium">数量</th> <th className="text-right px-3 py-2 text-slate-500 font-medium">数量</th>
@ -133,7 +133,7 @@ function FlowAnalysis({ symbol }: { symbol: Symbol }) {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [dataAge, setDataAge] = useState(0); // 数据积累分钟数 const [dataAge, setDataAge] = useState(0); // 数据积累分钟数
const fetchData = useCallback(async () => { const fetchData = useCallback(async (showLoading = false) => {
const end_ms = Date.now(); const end_ms = Date.now();
const windowMs = { "1m": 3600000, "5m": 14400000, "15m": 43200000, "1h": 172800000 }[interval]; const windowMs = { "1m": 3600000, "5m": 14400000, "15m": 43200000, "1h": 172800000 }[interval];
const start_ms = end_ms - windowMs; const start_ms = end_ms - windowMs;
@ -145,7 +145,7 @@ function FlowAnalysis({ symbol }: { symbol: Symbol }) {
const json = await res.json(); const json = await res.json();
const bars: SummaryBar[] = json.data || []; const bars: SummaryBar[] = json.data || [];
setData(bars); setData(bars);
setLoading(false); if (showLoading) setLoading(false);
if (bars.length > 0) { if (bars.length > 0) {
const ageMs = end_ms - bars[0].time_ms; const ageMs = end_ms - bars[0].time_ms;
setDataAge(Math.round(ageMs / 60000)); setDataAge(Math.round(ageMs / 60000));
@ -155,8 +155,8 @@ function FlowAnalysis({ symbol }: { symbol: Symbol }) {
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
fetchData(); fetchData(true);
const iv = setInterval(fetchData, 30000); const iv = setInterval(() => fetchData(false), 30000); // 定时刷新不触发loading
return () => clearInterval(iv); return () => clearInterval(iv);
}, [fetchData]); }, [fetchData]);