From 1db9e55259e37b6cb2674283667514e34815ca06 Mon Sep 17 00:00:00 2001
From: root <root@s52867.vps.hosting>
Date: Fri, 27 Feb 2026 12:51:36 +0000
Subject: [PATCH] fix: append new trades to bottom instead of top, fixed
 container height to prevent page jump

---
 frontend/app/trades/page.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/app/trades/page.tsx b/frontend/app/trades/page.tsx
index 304dc84..9de64a9 100644
--- a/frontend/app/trades/page.tsx
+++ b/frontend/app/trades/page.tsx
@@ -56,19 +56,29 @@ 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`);
         if (!res.ok) return;
         const data = await res.json();
         if (!running) return;
+        const incoming: TradeRow[] = (data.data || []).reverse(); // 改为时间升序
         setTrades(prev => {
           const existingIds = new Set(prev.map((t: TradeRow) => t.agg_id));
-          const newOnes = (data.data || []).filter((t: TradeRow) => !existingIds.has(t.agg_id));
-          return [...newOnes, ...prev].slice(0, 60);
+          const newOnes = incoming.filter((t: TradeRow) => !existingIds.has(t.agg_id));
+          if (newOnes.length === 0) return prev;
+          // 追加到末尾，保持时间升序，最多保留120条
+          return [...prev, ...newOnes].slice(-120);
         });
         setLoading(false);
       } catch {}
@@ -93,7 +103,7 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
           <span className="text-red-500 font-medium">▼ 红</span>=主动卖（空方发动）
         </p>
       </div>
-      <div className="overflow-y-auto flex-1" style={{ maxHeight: 420, scrollBehavior: "auto" }}>
+      <div ref={containerRef} className="overflow-y-auto flex-1" style={{ height: 420 }}>
         {loading ? (
           <div className="flex items-center justify-center h-24 text-slate-400 text-sm">加载中...</div>
         ) : (