From 11c44bc95dbe6791beadb01fc693375a9790470a Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 10 Nov 2025 13:41:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=89=8D=E7=AB=AF=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DeployNodeLogDialog.tsx        | 88 +++++++++----------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/src/pages/Dashboard/components/DeployNodeLogDialog.tsx b/frontend/src/pages/Dashboard/components/DeployNodeLogDialog.tsx
index 6d849139..8da0ad7d 100644
--- a/frontend/src/pages/Dashboard/components/DeployNodeLogDialog.tsx
+++ b/frontend/src/pages/Dashboard/components/DeployNodeLogDialog.tsx
@@ -8,7 +8,6 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Loader2, AlertCircle, Clock, FileText, RefreshCw } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { getDeployNodeLogs } from '../service';
@@ -56,10 +55,7 @@ const DeployNodeLogDialog: React.FC<DeployNodeLogDialogProps> = ({
       if (response && !response.expired && response.logs.length > 0) {
         setTimeout(() => {
           if (scrollAreaRef.current) {
-            const viewport = scrollAreaRef.current.querySelector('[data-radix-scroll-area-viewport]');
-            if (viewport) {
-              viewport.scrollTop = viewport.scrollHeight;
-            }
+            scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
           }
         }, 100);
       }
@@ -148,52 +144,57 @@ const DeployNodeLogDialog: React.FC<DeployNodeLogDialogProps> = ({
               <p className="text-sm mt-2">日志通常保留 7 天，请检查部署时间</p>
             </div>
           ) : (
-            <ScrollArea className="flex-1 border rounded-md bg-gray-50" ref={scrollAreaRef}>
+            <div
+              className="flex-1 border rounded-md bg-gray-50 overflow-auto"
+              ref={scrollAreaRef}
+            >
               <div className="p-2 font-mono text-xs w-max min-w-full">
                 {logData?.logs && logData.logs.length > 0 ? (
-                  logData.logs.map((log, index) => {
-                    // 计算行号宽度
+                  (() => {
+                    // 计算行号宽度（只计算一次）
                     const lineNumWidth = Math.max(4, String(logData.logs.length).length + 1);
 
-                    // 格式化时间戳为可读格式：2025-11-07 16:27:41.494
-                    const timestamp = dayjs(log.timestamp).format('YYYY-MM-DD HH:mm:ss.SSS');
+                    return logData.logs.map((log, index) => {
+                      // 格式化时间戳为可读格式：2025-11-07 16:27:41.494
+                      const timestamp = dayjs(log.timestamp).format('YYYY-MM-DD HH:mm:ss.SSS');
 
-                    return (
-                      <div
-                        key={log.sequenceId}
-                        className="flex items-start hover:bg-gray-100 px-2 py-0.5 whitespace-nowrap"
-                      >
-                        {/* 行号 - 动态宽度，右对齐 */}
-                        <span
-                          className="text-gray-400 flex-shrink-0 text-right select-none"
-                          style={{ width: `${lineNumWidth}ch`, marginRight: '1ch' }}
+                      return (
+                        <div
+                          key={log.sequenceId}
+                          className="flex items-start px-2 py-0.5 whitespace-nowrap"
                         >
-                          {index + 1}
-                        </span>
+                          {/* 行号 - 动态宽度，右对齐 */}
+                          <span
+                            className="text-gray-400 flex-shrink-0 text-right select-none"
+                            style={{ width: `${lineNumWidth}ch`, marginRight: '1ch' }}
+                          >
+                            {index + 1}
+                          </span>
 
-                        {/* 时间戳 - 可读格式，23个字符 (2025-11-07 16:27:41.494) */}
-                        <span
-                          className="text-gray-600 flex-shrink-0"
-                          style={{ width: '23ch', marginRight: '2ch' }}
-                        >
-                          {timestamp}
-                        </span>
+                          {/* 时间戳 - 可读格式，23个字符 (2025-11-07 16:27:41.494) */}
+                          <span
+                            className="text-gray-600 flex-shrink-0"
+                            style={{ width: '23ch', marginRight: '2ch' }}
+                          >
+                            {timestamp}
+                          </span>
 
-                        {/* 日志级别 - 5个字符，右对齐 */}
-                        <span
-                          className={cn('flex-shrink-0 font-semibold text-right', getLevelClass(log.level))}
-                          style={{ width: '5ch', marginRight: '2ch' }}
-                        >
-                          {log.level}
-                        </span>
+                          {/* 日志级别 - 5个字符，右对齐 */}
+                          <span
+                            className={cn('flex-shrink-0 font-semibold text-right', getLevelClass(log.level))}
+                            style={{ width: '5ch', marginRight: '2ch' }}
+                          >
+                            {log.level}
+                          </span>
 
-                        {/* 日志消息 - 不换行显示 */}
-                        <span className="text-gray-800">
-                          {log.message}
-                        </span>
-                      </div>
-                    );
-                  })
+                          {/* 日志消息 - 不换行显示 */}
+                          <span className="text-gray-800">
+                            {log.message}
+                          </span>
+                        </div>
+                      );
+                    });
+                  })()
                 ) : (
                   <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
                     <Clock className="h-12 w-12 mb-4 text-muted-foreground/30" />
@@ -202,8 +203,7 @@ const DeployNodeLogDialog: React.FC<DeployNodeLogDialogProps> = ({
                   </div>
                 )}
               </div>
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
+            </div>
           )}
         </DialogBody>