From c02e7c12e8d1e3f46c4923dabaf7e7ac273f64b4 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Mon, 2 Mar 2026 17:45:09 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(sidebar-log):=20=E5=B0=86S?=
 =?UTF-8?q?QL=E6=89=A7=E8=A1=8C=E6=97=A5=E5=BF=97=E5=85=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BA=E6=82=AC=E6=B5=AE=E8=83=B6=E5=9B=8A?=
 =?UTF-8?q?=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                 | 47 +++++++++++++++++++++++-----
 frontend/src/components/DataGrid.tsx | 13 +++++---
 frontend/src/components/LogPanel.tsx | 13 ++++----
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 618c0aa..e97f1c7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -238,6 +238,14 @@ function App() {
   // Specific colors
   const bgMain = getBg('#141414', '#ffffff');
   const bgContent = getBg('#1d1d1d', '#ffffff');
+  const floatingLogButtonBorderColor = darkMode ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.16)';
+  const floatingLogButtonTextColor = darkMode ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.82)';
+  const floatingLogButtonBgColor = darkMode
+      ? `rgba(34, 34, 34, ${Math.max(effectiveOpacity, 0.82)})`
+      : `rgba(255, 255, 255, ${Math.max(effectiveOpacity, 0.9)})`;
+  const floatingLogButtonShadow = darkMode
+      ? '0 8px 22px rgba(0,0,0,0.38)'
+      : '0 8px 20px rgba(0,0,0,0.16)';
   
   const addTab = useStore(state => state.addTab);
   const activeContext = useStore(state => state.activeContext);
@@ -1059,17 +1067,42 @@ function App() {
                 </div>
             </div>
                 
-                <div style={{ flex: 1, overflow: 'hidden' }}>
+                <div style={{ flex: 1, overflow: 'hidden', paddingBottom: 58 }}>
                     <Sidebar onEditConnection={handleEditConnection} />
                 </div>
 
-                {/* Sidebar Footer for Log Toggle */}
-                <div style={{ padding: '8px', borderTop: 'none', display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
-                    <Button 
-                        type={isLogPanelOpen ? "primary" : "text"}  
-                        icon={<BugOutlined />} 
+                {/* Floating SQL Log Toggle */}
+                <div
+                    style={{
+                        position: 'absolute',
+                        left: 10,
+                        right: 14,
+                        bottom: 10,
+                        zIndex: 20,
+                        pointerEvents: 'none'
+                    }}
+                >
+                    <Button
+                        type={isLogPanelOpen ? "primary" : "text"}
+                        icon={<BugOutlined />}
                         onClick={() => setIsLogPanelOpen(!isLogPanelOpen)}
-                        block
+                        style={isLogPanelOpen ? {
+                            width: '100%',
+                            height: 34,
+                            borderRadius: 999,
+                            boxShadow: floatingLogButtonShadow,
+                            pointerEvents: 'auto'
+                        } : {
+                            width: '100%',
+                            height: 34,
+                            borderRadius: 999,
+                            border: `1px solid ${floatingLogButtonBorderColor}`,
+                            color: floatingLogButtonTextColor,
+                            background: floatingLogButtonBgColor,
+                            boxShadow: floatingLogButtonShadow,
+                            backdropFilter: blurFilter,
+                            pointerEvents: 'auto'
+                        }}
                     >
                         SQL 执行日志
                     </Button>
diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx
index fa9606b..012c2bb 100644
--- a/frontend/src/components/DataGrid.tsx
+++ b/frontend/src/components/DataGrid.tsx
@@ -593,6 +593,11 @@ const DataGrid: React.FC<DataGridProps> = ({
   const rowModHover = darkMode ? getRowBg(29, 53, 94) : getRowBg(186, 231, 255);
   const selectionAccentHex = darkMode ? '#f6c453' : '#1890ff';
   const selectionAccentRgb = darkMode ? '246, 196, 83' : '24, 144, 255';
+  const darkHighlightTextColor = 'rgba(255, 236, 179, 0.98)';
+  const lightMetaHintColor = '#595959';
+  const lightMetaTooltipColor = '#262626';
+  const columnMetaHintColor = darkMode ? darkHighlightTextColor : lightMetaHintColor;
+  const columnMetaTooltipColor = darkMode ? darkHighlightTextColor : lightMetaTooltipColor;
   
   const [form] = Form.useForm();
   const [modal, contextHolder] = Modal.useModal();
@@ -849,7 +854,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                       style={{
                           marginTop: 2,
                           fontSize: 11,
-                          color: '#8c8c8c',
+                          color: columnMetaHintColor,
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
@@ -864,7 +869,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                       style={{
                           marginTop: 2,
                           fontSize: 11,
-                          color: '#8c8c8c',
+                          color: columnMetaHintColor,
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
@@ -880,13 +885,13 @@ const DataGrid: React.FC<DataGridProps> = ({
       if (hoverLines.length === 0) return titleNode;
       return (
           <Tooltip
-              title={<pre style={{ maxHeight: 260, overflow: 'auto', margin: 0, fontSize: 12, whiteSpace: 'pre-wrap' }}>{hoverLines.join('\n')}</pre>}
+              title={<pre style={{ maxHeight: 260, overflow: 'auto', margin: 0, fontSize: 12, whiteSpace: 'pre-wrap', color: columnMetaTooltipColor }}>{hoverLines.join('\n')}</pre>}
               styles={{ root: { maxWidth: 640 } }}
           >
               <span style={{ display: 'inline-flex', maxWidth: '100%' }}>{titleNode}</span>
           </Tooltip>
       );
-  }, [columnMetaMap, columnMetaMapByLowerName, showColumnComment, showColumnType]);
+  }, [columnMetaHintColor, columnMetaTooltipColor, columnMetaMap, columnMetaMapByLowerName, showColumnComment, showColumnType]);
 
   const closeCellEditor = useCallback(() => {
       setCellEditorOpen(false);
diff --git a/frontend/src/components/LogPanel.tsx b/frontend/src/components/LogPanel.tsx
index c67ccf8..6c57d61 100644
--- a/frontend/src/components/LogPanel.tsx
+++ b/frontend/src/components/LogPanel.tsx
@@ -27,8 +27,9 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
         const b = parseInt(hex.substring(4, 6), 16);
         return `rgba(${r}, ${g}, ${b}, ${opacity})`;
     };
-    const bgMain = getBg('#1f1f1f');
-    const bgToolbar = getBg('#2a2a2a');
+    const bgMain = getBg('#1d1d1d');
+    const panelDividerColor = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
+    const panelMutedTextColor = darkMode ? 'rgba(255,255,255,0.62)' : 'rgba(0,0,0,0.58)';
     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)';
 
@@ -37,7 +38,7 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
             title: 'Time',
             dataIndex: 'timestamp',
             width: 80,
-            render: (ts: number) => <span style={{ color: '#888', fontSize: '12px' }}>{new Date(ts).toLocaleTimeString()}</span>
+            render: (ts: number) => <span style={{ color: panelMutedTextColor, fontSize: '12px' }}>{new Date(ts).toLocaleTimeString()}</span>
         },
         {
             title: 'Status',
@@ -62,7 +63,7 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
                 <div style={{ fontFamily: 'monospace', wordBreak: 'break-all', fontSize: '12px', lineHeight: '1.2' }}>
                     <div style={{ color: darkMode ? '#a6e22e' : '#005cc5' }}>{text}</div>
                     {record.message && <div style={{ color: '#ff4d4f', marginTop: 2 }}>{record.message}</div>}
-                    {record.affectedRows !== undefined && <div style={{ color: '#888', marginTop: 1 }}>Affected: {record.affectedRows}</div>}
+                    {record.affectedRows !== undefined && <div style={{ color: panelMutedTextColor, marginTop: 1 }}>Affected: {record.affectedRows}</div>}
                 </div>
             )
         }
@@ -71,7 +72,7 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
     return (
         <div style={{ 
             height, 
-            borderTop: 'none', 
+            borderTop: `1px solid ${panelDividerColor}`,
             background: bgMain,
             display: 'flex',
             flexDirection: 'column',
@@ -95,7 +96,7 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
             {/* Toolbar */}
             <div style={{ 
                 padding: '4px 8px', 
-                borderBottom: 'none',
+                borderBottom: `1px solid ${panelDividerColor}`,
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',