From a07b418b8fcaecae8ad80414c73a3476afd1974b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E9=94=8B?= <yangguofeng919@gmail.com>
Date: Tue, 10 Feb 2026 20:54:40 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(log-panel):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96SQL=E6=97=A5=E5=BF=97=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E8=BE=B9=E7=95=8C=E4=B8=8E=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构最小高度约束逻辑，最小态聚焦单条日志
- 增加日志区域局部滚动条样式，避免影响全局滚动条
- 调整日志表格背景透明度以统一界面表现
---
 frontend/src/App.tsx                 | 14 +++++++++---
 frontend/src/components/LogPanel.tsx | 34 +++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7172ecc..2563846 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -386,8 +386,13 @@ function App() {
   const [isAppearanceModalOpen, setIsAppearanceModalOpen] = useState(false);
 
 
-  // Log Panel
-  const [logPanelHeight, setLogPanelHeight] = useState(200);
+  // Log Panel: 最小高度按“工具栏 + 1 条日志行（微增）”限制
+  const LOG_PANEL_TOOLBAR_HEIGHT = 32;
+  const LOG_PANEL_SINGLE_ROW_HEIGHT = 39;
+  const LOG_PANEL_MIN_VISIBLE_ROWS = 1;
+  const LOG_PANEL_MIN_HEIGHT = LOG_PANEL_TOOLBAR_HEIGHT + (LOG_PANEL_SINGLE_ROW_HEIGHT * LOG_PANEL_MIN_VISIBLE_ROWS);
+  const LOG_PANEL_MAX_HEIGHT = 800;
+  const [logPanelHeight, setLogPanelHeight] = useState(Math.max(200, LOG_PANEL_MIN_HEIGHT));
   const [isLogPanelOpen, setIsLogPanelOpen] = useState(false);
   const logResizeRef = React.useRef<{ startY: number, startHeight: number } | null>(null);
   const logGhostRef = React.useRef<HTMLDivElement>(null);
@@ -416,7 +421,10 @@ function App() {
   const handleLogResizeUp = (e: MouseEvent) => {
       if (logResizeRef.current) {
           const delta = logResizeRef.current.startY - e.clientY; 
-          const newHeight = Math.max(100, Math.min(800, logResizeRef.current.startHeight + delta));
+          const newHeight = Math.max(
+              LOG_PANEL_MIN_HEIGHT,
+              Math.min(LOG_PANEL_MAX_HEIGHT, logResizeRef.current.startHeight + delta)
+          );
           setLogPanelHeight(newHeight);
       }
       
diff --git a/frontend/src/components/LogPanel.tsx b/frontend/src/components/LogPanel.tsx
index 2a11295..c67ccf8 100644
--- a/frontend/src/components/LogPanel.tsx
+++ b/frontend/src/components/LogPanel.tsx
@@ -29,6 +29,8 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
     };
     const bgMain = getBg('#1f1f1f');
     const bgToolbar = getBg('#2a2a2a');
+    const logScrollbarThumb = darkMode ? 'rgba(255, 255, 255, 0.34)' : 'rgba(0, 0, 0, 0.26)';
+    const logScrollbarThumbHover = darkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.36)';
 
     const columns = [
         {
@@ -113,8 +115,9 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
             </div>
 
             {/* List */}
-            <div style={{ flex: 1, overflow: 'auto' }}>
+            <div className="log-panel-scroll" style={{ flex: 1, overflow: 'auto' }}>
                 <Table 
+                    className="log-panel-table"
                     dataSource={sqlLogs} 
                     columns={columns} 
                     size="small" 
@@ -124,6 +127,35 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
                     // scroll={{ y: height - 32 }} // Let flex handle it
                 />
             </div>
+            <style>{`
+                .log-panel-scroll {
+                    scrollbar-width: thin;
+                    scrollbar-color: ${logScrollbarThumb} transparent;
+                }
+                .log-panel-scroll::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+                .log-panel-scroll::-webkit-scrollbar-track,
+                .log-panel-scroll::-webkit-scrollbar-corner {
+                    background: transparent;
+                }
+                .log-panel-scroll::-webkit-scrollbar-thumb {
+                    background: ${logScrollbarThumb};
+                    border-radius: 8px;
+                    border: 2px solid transparent;
+                    background-clip: padding-box;
+                }
+                .log-panel-scroll::-webkit-scrollbar-thumb:hover {
+                    background: ${logScrollbarThumbHover};
+                    background-clip: padding-box;
+                }
+                .log-panel-table .ant-table,
+                .log-panel-table .ant-table-container,
+                .log-panel-table .ant-table-tbody > tr > td {
+                    background: transparent !important;
+                }
+            `}</style>
         </div>
     );
 };