From 26d236fd8c00d43600db8fc4d8acb0a15e7188a5 Mon Sep 17 00:00:00 2001
From: beibeizi <beibeizi@outlook.com>
Date: Mon, 16 Mar 2026 16:31:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=A4=8D=E7=94=A8=E6=BB=9A=E8=BD=AE=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/terminal/TerminalMobile.tsx     | 15 ++-----
 .../src/pages/terminal/useTerminalSession.ts  |  1 +
 .../src/pages/terminal/useTerminalSocket.ts   | 41 +++++++++++++++++++
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/terminal/TerminalMobile.tsx b/frontend/src/pages/terminal/TerminalMobile.tsx
index 0a0c7f3..cb83c60 100644
--- a/frontend/src/pages/terminal/TerminalMobile.tsx
+++ b/frontend/src/pages/terminal/TerminalMobile.tsx
@@ -13,7 +13,7 @@ type MobileTab = "terminal" | "files" | "system";
 
 export function TerminalMobile({ state, onBack }: TerminalMobileProps) {
   const [activeTab, setActiveTab] = React.useState<MobileTab>("terminal");
-  const { syncTerminalSize, terminalInstance } = state;
+  const { syncTerminalSize, terminalInstance, scrollTerminal } = state;
 
   React.useEffect(() => {
     if (activeTab !== "terminal") {
@@ -27,15 +27,6 @@ export function TerminalMobile({ state, onBack }: TerminalMobileProps) {
     term.focus();
   }, [activeTab, syncTerminalSize, terminalInstance]);
 
-  const handleScroll = React.useCallback((direction: "up" | "down") => {
-    const term = terminalInstance.current;
-    if (!term) {
-      return;
-    }
-    const lines = direction === "up" ? -8 : 8;
-    term.scrollLines(lines);
-  }, [terminalInstance]);
-
   const actions = [
     {
       key: "language",
@@ -151,7 +142,7 @@ export function TerminalMobile({ state, onBack }: TerminalMobileProps) {
             <div className="absolute right-4 bottom-4 flex flex-col gap-2">
               <button
                 type="button"
-                onClick={() => handleScroll("up")}
+                onClick={() => scrollTerminal("up")}
                 className={`h-10 w-10 rounded-full border text-base ${
                   state.isDark
                     ? "border-slate-700 bg-slate-900/90 text-slate-200"
@@ -163,7 +154,7 @@ export function TerminalMobile({ state, onBack }: TerminalMobileProps) {
               </button>
               <button
                 type="button"
-                onClick={() => handleScroll("down")}
+                onClick={() => scrollTerminal("down")}
                 className={`h-10 w-10 rounded-full border text-base ${
                   state.isDark
                     ? "border-slate-700 bg-slate-900/90 text-slate-200"
diff --git a/frontend/src/pages/terminal/useTerminalSession.ts b/frontend/src/pages/terminal/useTerminalSession.ts
index fac656e..de9d731 100644
--- a/frontend/src/pages/terminal/useTerminalSession.ts
+++ b/frontend/src/pages/terminal/useTerminalSession.ts
@@ -156,6 +156,7 @@ export function useTerminalSession(sessionId?: string) {
     autoReconnect: socketState.autoReconnect,
     setAutoReconnect: socketState.setAutoReconnect,
     syncTerminalSize: socketState.syncTerminalSize,
+    scrollTerminal: socketState.scrollTerminal,
     handleReconnect: socketState.handleReconnect,
     handleCancelReconnect: socketState.handleCancelReconnect,
     sessionInfo: sessionInfoState.sessionInfo,
diff --git a/frontend/src/pages/terminal/useTerminalSocket.ts b/frontend/src/pages/terminal/useTerminalSocket.ts
index 67531e2..11f4ade 100644
--- a/frontend/src/pages/terminal/useTerminalSocket.ts
+++ b/frontend/src/pages/terminal/useTerminalSocket.ts
@@ -247,6 +247,46 @@ export function useTerminalSocket({
   const connectSocketRef = React.useRef(connectSocket);
   const sendInputRef = React.useRef(sendInput);
   const syncTerminalSizeRef = React.useRef(syncTerminalSize);
+  const scrollTerminal = React.useCallback((direction: "up" | "down") => {
+    const term = terminalInstance.current;
+    const container = terminalRef.current;
+    if (!term || !container) {
+      return;
+    }
+    if (term.modes.mouseTrackingMode !== "none") {
+      return;
+    }
+    const lineDelta = direction === "up" ? -8 : 8;
+    const sendTmuxWheelPage = (delta: number) => {
+      if (delta === 0) {
+        return;
+      }
+      const sequence = delta < 0 ? "\x1b[5~" : "\x1b[6~";
+      sendInput(sequence);
+    };
+    const activeBuffer = term.buffer.active;
+    const hasLocalScrollback = activeBuffer.type === "normal" && activeBuffer.baseY > 0;
+    if (!hasLocalScrollback) {
+      sendTmuxWheelPage(lineDelta);
+      return;
+    }
+    const viewport = container.querySelector<HTMLElement>(".xterm-viewport");
+    if (viewport) {
+      const maxScrollTop = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+      const isAtTop = viewport.scrollTop <= 0;
+      const isAtBottom = viewport.scrollTop >= maxScrollTop;
+      const isEnhancedSession = enhancedSessionRef.current;
+      if (isEnhancedSession && lineDelta < 0 && isAtTop) {
+        sendTmuxWheelPage(lineDelta);
+        return;
+      }
+      if (isEnhancedSession && lineDelta > 0 && isAtBottom) {
+        sendTmuxWheelPage(lineDelta);
+        return;
+      }
+    }
+    term.scrollLines(lineDelta);
+  }, [sendInput, enhancedSessionRef]);
 
   React.useEffect(() => {
     connectSocketRef.current = connectSocket;
@@ -461,6 +501,7 @@ export function useTerminalSocket({
     autoReconnect,
     setAutoReconnect,
     syncTerminalSize,
+    scrollTerminal,
     handleReconnect,
     handleCancelReconnect,
   };