fix: latest trades on top + fixed height container so page never jumps
This commit is contained in:
parent
1db9e55259
commit
04d3219a1c
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useRef, useCallback } from "react";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { authFetch } from "@/lib/auth";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import Link from "next/link";
|
||||
@ -56,29 +56,25 @@ function timeStr(ms: number) {
|
||||
function LiveTrades({ symbol }: { symbol: Symbol }) {
|
||||
const [trades, setTrades] = useState<TradeRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const lastAggId = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
let running = true;
|
||||
// 重置
|
||||
setTrades([]);
|
||||
setLoading(true);
|
||||
lastAggId.current = 0;
|
||||
|
||||
const fetch = async () => {
|
||||
try {
|
||||
const res = await authFetch(`/api/trades/latest?symbol=${symbol}&limit=30`);
|
||||
const res = await authFetch(`/api/trades/latest?symbol=${symbol}&limit=40`);
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
if (!running) return;
|
||||
const incoming: TradeRow[] = (data.data || []).reverse(); // 改为时间升序
|
||||
const incoming: TradeRow[] = data.data || [];
|
||||
setTrades(prev => {
|
||||
const existingIds = new Set(prev.map((t: TradeRow) => t.agg_id));
|
||||
const newOnes = incoming.filter((t: TradeRow) => !existingIds.has(t.agg_id));
|
||||
if (newOnes.length === 0) return prev;
|
||||
// 追加到末尾,保持时间升序,最多保留120条
|
||||
return [...prev, ...newOnes].slice(-120);
|
||||
// 最新在顶部,最多保留50条
|
||||
return [...newOnes, ...prev].slice(0, 50);
|
||||
});
|
||||
setLoading(false);
|
||||
} catch {}
|
||||
@ -103,7 +99,8 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
|
||||
<span className="text-red-500 font-medium">▼ 红</span>=主动卖(空方发动)
|
||||
</p>
|
||||
</div>
|
||||
<div ref={containerRef} className="overflow-y-auto flex-1" style={{ height: 420 }}>
|
||||
{/* 固定高度容器,内部自己滚动,不影响页面 */}
|
||||
<div className="overflow-y-auto" style={{ height: 420 }}>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-24 text-slate-400 text-sm">加载中...</div>
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user