From 04d3219a1c3195c04261069edf2e8a90f3c3a1a7 Mon Sep 17 00:00:00 2001
From: root <root@s52867.vps.hosting>
Date: Fri, 27 Feb 2026 13:01:47 +0000
Subject: [PATCH] fix: latest trades on top + fixed height container so page
 never jumps

---
 frontend/app/trades/page.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/app/trades/page.tsx b/frontend/app/trades/page.tsx
index 9de64a9..a300bba 100644
--- a/frontend/app/trades/page.tsx
+++ b/frontend/app/trades/page.tsx
@@ -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>
         ) : (