Update mission flow and inspection log scrolling

public-frontend/src/app/inspection/page.tsx

@@ -39,6 +39,7 @@ import type { ActivityItem, CameraInfo, CustomsDeclaration, InspectionIssue, Ins
 
 const { Text } = Typography;
 const { TextArea } = Input;
+const LOG_AUTO_SCROLL_THRESHOLD = 48;
 
 interface ProgressItem extends InspectionItem {
   currentInspected: number;
@@ -78,7 +79,8 @@ function InspectionContent() {
   const [operationLoading, setOperationLoading] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
   const { token } = theme.useToken();
-  const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+  const [isUserNearBottom, setIsUserNearBottom] = useState(true);
 
   const refreshRuntime = async () => {
     const [missionState, currentInspection, missionLogs, nextIssues] = await Promise.all([
@@ -231,8 +233,19 @@ function InspectionContent() {
   }, [setInspection]);
 
   useEffect(() => {
-    logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [logs]);
+    const container = logsContainerRef.current;
+    if (container && isUserNearBottom) {
+      container.scrollTop = container.scrollHeight;
+    }
+  }, [logs, isUserNearBottom]);
+
+  const handleLogsScroll = () => {
+    const container = logsContainerRef.current;
+    if (!container) return;
+
+    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+    setIsUserNearBottom(distanceToBottom <= LOG_AUTO_SCROLL_THRESHOLD);
+  };
 
   const calculateTotalProgress = () => {
     if (!progressData.length) return 0;
@@ -524,7 +537,7 @@ function InspectionContent() {
             style={{ flex: 3, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
             styles={{ body: { padding: 12, flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: token.colorFillQuaternary } }}
           >
-            <div style={{ flex: 1, overflowY: 'auto', paddingRight: 8 }}>
+            <div ref={logsContainerRef} onScroll={handleLogsScroll} style={{ flex: 1, overflowY: 'auto', paddingRight: 8 }}>
               {logs.length > 0 ? (
                 <Timeline
                   items={logs.map((item) => ({
@@ -540,7 +553,6 @@ function InspectionContent() {
               ) : (
                 <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无日志" style={{ margin: '20px 0' }} />
               )}
-              <div ref={logsEndRef} />
             </div>
           </Card>
         </Col>