Merge pull request #78 from Syngnat/feature/sql-cross-db-intellisense-20260205-ygf

✨ feat(editor/appearance): 跨库SQL智能提示与全局透明度模糊效果

.gitignore

@@ -6,7 +6,7 @@
 frontend/release/
 **/release/
 **/dist/
-**/build/
+build/bin/
 
 # wails / node artifacts (按需)
 node_modules/
@@ -17,3 +17,5 @@ dist/
 GoNavi-Wails
 GoNavi-Wails.exe
 .ace-tool/
+.claude/
+tmpclaude-*

build/windows/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "{{.Info.ProductVersion}}"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "{{.Info.ProductVersion}}",
+			"CompanyName": "{{.Info.CompanyName}}",
+			"FileDescription": "{{.Info.ProductName}}",
+			"LegalCopyright": "{{.Info.Copyright}}",
+			"ProductName": "{{.Info.ProductName}}",
+			"Comments": "{{.Info.Comments}}"
+		}
+	}
+}

build/windows/wails.exe.manifest

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
+    <assemblyIdentity type="win32" name="com.wails.{{.Name}}" version="{{.Info.ProductVersion}}.0" processorArchitecture="*"/>
+    <dependency>
+        <dependentAssembly>
+            <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"/>
+        </dependentAssembly>
+    </dependency>
+    <asmv3:application>
+        <asmv3:windowsSettings>
+            <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/pm</dpiAware> <!-- fallback for Windows 7 and 8 -->
+            <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">permonitorv2,permonitor</dpiAwareness> <!-- falls back to per-monitor if per-monitor v2 is not supported -->
+        </asmv3:windowsSettings>
+    </asmv3:application>
+</assembly>

frontend/package.json.md5

@@ -1 +1 @@
-5b8157374dae5f9340e31b2d0bd2c00e
+d0f9366af59a6367ad3c7e2d4185ead4

frontend/src/App.css

@@ -3,6 +3,7 @@ html, body, #root {
   margin: 0;
   padding: 0;
   overflow: hidden; /* Disable global scrollbar */
+  background-color: transparent !important; /* CRITICAL: Allow Wails window transparency */
 }
 
 /* 侧边栏 Tree 样式优化 */
@@ -30,4 +31,40 @@ html, body, #root {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 8px;
-}
+}
+
+/* Scrollbar styling for dark mode */
+body[data-theme='dark'] ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-track {
+    background: #1f1f1f;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-corner {
+    background: #1f1f1f;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-thumb {
+    background: #424242;
+    border-radius: 4px;
+    border: 2px solid #1f1f1f;
+}
+body[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
+    background: #666;
+}
+
+/* Ensure body background matches theme to avoid white flashes, but kept transparent for window composition */
+body {
+    transition: color 0.3s;
+}
+
+body[data-theme='dark'] {
+    /* Improve contrast on transparent backgrounds */
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+/* Custom Title Bar Close Button Hover */
+.titlebar-close-btn:hover {
+    background-color: #ff4d4f !important;
+    color: #fff !important;
+}

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Layout, Button, ConfigProvider, theme, Dropdown, MenuProps, message, Modal, Spin } from 'antd';
+import { Layout, Button, ConfigProvider, theme, Dropdown, MenuProps, message, Modal, Spin, Slider, Popover } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
-import { PlusOutlined, BulbOutlined, BulbFilled, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, InfoCircleOutlined, GithubOutlined } from '@ant-design/icons';
+import { PlusOutlined, BulbOutlined, BulbFilled, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined } from '@ant-design/icons';
 import Sidebar from './components/Sidebar';
 import TabManager from './components/TabManager';
 import ConnectionModal from './components/ConnectionModal';
@@ -17,8 +17,27 @@ function App() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isSyncModalOpen, setIsSyncModalOpen] = useState(false);
   const [editingConnection, setEditingConnection] = useState<SavedConnection | null>(null);
-  const darkMode = useStore(state => state.darkMode);
-  const toggleDarkMode = useStore(state => state.toggleDarkMode);
+  const themeMode = useStore(state => state.theme);
+  const setTheme = useStore(state => state.setTheme);
+  const appearance = useStore(state => state.appearance);
+  const setAppearance = useStore(state => state.setAppearance);
+  const darkMode = themeMode === 'dark';
+
+  // Background Helper
+  const getBg = (darkHex: string, lightHex: string) => {
+      if (!darkMode) return `rgba(255, 255, 255, ${appearance.opacity ?? 0.95})`; // Light mode usually white
+      
+      // Parse hex to rgb
+      const hex = darkHex.replace('#', '');
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${appearance.opacity ?? 0.95})`;
+  };
+  // Specific colors
+  const bgMain = getBg('#141414', '#ffffff');
+  const bgContent = getBg('#1d1d1d', '#ffffff');
+  
   const addTab = useStore(state => state.addTab);
   const activeContext = useStore(state => state.activeContext);
   const connections = useStore(state => state.connections);
@@ -29,9 +48,13 @@ function App() {
   const updateDownloadInFlightRef = React.useRef(false);
   const updateDownloadedVersionRef = React.useRef<string | null>(null);
   const updateDeferredVersionRef = React.useRef<string | null>(null);
+  const updateNotifiedVersionRef = React.useRef<string | null>(null);
+  const updateMutedVersionRef = React.useRef<string | null>(null);
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [aboutLoading, setAboutLoading] = useState(false);
   const [aboutInfo, setAboutInfo] = useState<{ version: string; author: string; buildTime?: string; repoUrl?: string; issueUrl?: string; releaseUrl?: string } | null>(null);
+  const [aboutUpdateStatus, setAboutUpdateStatus] = useState<string>('');
+  const [lastUpdateInfo, setLastUpdateInfo] = useState<UpdateInfo | null>(null);
 
   type UpdateInfo = {
       hasUpdate: boolean;
@@ -94,23 +117,40 @@ function App() {
   const checkForUpdates = React.useCallback(async (silent: boolean) => {
       if (updateCheckInFlightRef.current) return;
       updateCheckInFlightRef.current = true;
+      if (!silent) {
+          setAboutUpdateStatus('正在检查更新...');
+      }
       const res = await (window as any).go.app.App.CheckForUpdates();
       updateCheckInFlightRef.current = false;
       if (!res?.success) {
           if (!silent) {
               message.error('检查更新失败: ' + (res?.message || '未知错误'));
+              setAboutUpdateStatus('检查更新失败: ' + (res?.message || '未知错误'));
           }
           return;
       }
       const info: UpdateInfo = res.data;
       if (!info) return;
+      setLastUpdateInfo(info);
       if (info.hasUpdate) {
           if (!silent) {
-              message.info(`发现新版本 ${info.latestVersion}，开始下载...`);
+              message.info(`发现新版本 ${info.latestVersion}`);
+              setAboutUpdateStatus(`发现新版本 ${info.latestVersion}（未下载）`);
+          }
+          if (silent && isAboutOpen) {
+              setAboutUpdateStatus(`发现新版本 ${info.latestVersion}（未下载）`);
+          }
+          if (silent && !isAboutOpen && updateMutedVersionRef.current !== info.latestVersion && updateNotifiedVersionRef.current !== info.latestVersion) {
+              updateNotifiedVersionRef.current = info.latestVersion;
+              setIsAboutOpen(true);
           }
-          await downloadUpdate(info, silent);
       } else if (!silent) {
-          message.success(`当前已是最新版本（${info.currentVersion || '未知'}）`);
+          const text = `当前已是最新版本（${info.currentVersion || '未知'}）`;
+          message.success(text);
+          setAboutUpdateStatus(text);
+      } else if (silent && isAboutOpen) {
+          const text = `当前已是最新版本（${info.currentVersion || '未知'}）`;
+          setAboutUpdateStatus(text);
       }
   }, [downloadUpdate]);
 
@@ -207,6 +247,30 @@ function App() {
       }
   ];
 
+  const themeMenu: MenuProps['items'] = [
+      {
+          key: 'light',
+          label: '亮色主题',
+          icon: themeMode === 'light' ? <CheckOutlined /> : undefined,
+          onClick: () => setTheme('light')
+      },
+      {
+          key: 'dark',
+          label: '暗色主题',
+          icon: themeMode === 'dark' ? <CheckOutlined /> : undefined,
+          onClick: () => setTheme('dark')
+      },
+      { type: 'divider' },
+      {
+          key: 'settings',
+          label: '外观设置...',
+          icon: <SettingOutlined />,
+          onClick: () => setIsAppearanceModalOpen(true)
+      }
+  ];
+
+  const [isAppearanceModalOpen, setIsAppearanceModalOpen] = useState(false);
+
 
   // Log Panel
   const [logPanelHeight, setLogPanelHeight] = useState(200);
@@ -333,9 +397,16 @@ function App() {
 
   useEffect(() => {
       if (isAboutOpen) {
+          if (lastUpdateInfo?.hasUpdate) {
+              setAboutUpdateStatus(`发现新版本 ${lastUpdateInfo.latestVersion}（未下载）`);
+          } else if (lastUpdateInfo) {
+              setAboutUpdateStatus(`当前已是最新版本（${lastUpdateInfo.currentVersion || '未知'}）`);
+          } else {
+              setAboutUpdateStatus('未检查');
+          }
           loadAboutInfo();
       }
-  }, [isAboutOpen, loadAboutInfo]);
+  }, [isAboutOpen, lastUpdateInfo, loadAboutInfo]);
 
   useEffect(() => {
       const startupTimer = window.setTimeout(() => {
@@ -355,9 +426,91 @@ function App() {
         locale={zhCN}
         theme={{
             algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+            token: {
+                colorBgLayout: 'transparent',
+                colorBgContainer: darkMode 
+                    ? `rgba(29, 29, 29, ${appearance.opacity ?? 0.95})` 
+                    : `rgba(255, 255, 255, ${appearance.opacity ?? 0.95})`,
+                colorBgElevated: darkMode 
+                    ? '#1f1f1f' 
+                    : '#ffffff',
+                colorFillAlter: darkMode
+                    ? `rgba(38, 38, 38, ${appearance.opacity ?? 0.95})`
+                    : `rgba(250, 250, 250, ${appearance.opacity ?? 0.95})`,
+            },
+            components: {
+                Layout: {
+                    colorBgBody: 'transparent', 
+                    colorBgHeader: 'transparent',
+                    bodyBg: 'transparent',
+                    headerBg: 'transparent',
+                    siderBg: 'transparent',
+                    triggerBg: 'transparent'
+                },
+                Table: {
+                    headerBg: 'transparent',
+                    rowHoverBg: darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.02)',
+                },
+                Tabs: {
+                    cardBg: 'transparent',
+                    itemActiveColor: darkMode ? '#177ddc' : '#1890ff',
+                }
+            }
         }}
     >
-        <Layout style={{ height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+        <Layout style={{ 
+            height: '100vh', 
+            overflow: 'hidden', 
+            display: 'flex', 
+            flexDirection: 'column',
+            background: 'transparent',
+            backdropFilter: `blur(${appearance.blur ?? 0}px)` 
+        }}>
+          {/* Custom Title Bar */}
+          <div
+            style={{
+                height: 32,
+                flexShrink: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                background: bgMain,
+                backdropFilter: `blur(${appearance.blur ?? 0}px)`,
+                borderBottom: 'none',
+                userSelect: 'none',
+                WebkitAppRegion: 'drag', // Wails drag region
+                '--wails-draggable': 'drag',
+                paddingLeft: 16
+            } as any}
+          >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
+                  {/* Logo can be added here if available */}
+                  GoNavi
+              </div>
+              <div style={{ display: 'flex', height: '100%', WebkitAppRegion: 'no-drag', '--wails-draggable': 'no-drag' } as any}>
+                  <Button 
+                    type="text" 
+                    icon={<MinusOutlined />} 
+                    style={{ height: '100%', borderRadius: 0, width: 46 }} 
+                    onClick={() => (window as any).runtime.WindowMinimise()} 
+                  />
+                  <Button 
+                    type="text" 
+                    icon={<BorderOutlined />} 
+                    style={{ height: '100%', borderRadius: 0, width: 46 }} 
+                    onClick={() => (window as any).runtime.WindowToggleMaximise()} 
+                  />
+                  <Button 
+                    type="text" 
+                    icon={<CloseOutlined />} 
+                    danger
+                    className="titlebar-close-btn"
+                    style={{ height: '100%', borderRadius: 0, width: 46 }} 
+                    onClick={() => (window as any).runtime.Quit()} 
+                  />
+              </div>
+          </div>
+
           <div
             style={{
                 height: 36,
@@ -367,29 +520,32 @@ function App() {
                 justifyContent: 'flex-start',
                 gap: 4,
                 padding: '0 8px',
-                borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0',
-                background: darkMode ? '#141414' : '#fff'
+                borderBottom: 'none',
+                background: bgMain,
+                backdropFilter: `blur(${appearance.blur ?? 0}px)`
             }}
           >
             <Dropdown menu={{ items: toolsMenu }} placement="bottomLeft">
                 <Button type="text" icon={<ToolOutlined />} title="工具">工具</Button>
             </Dropdown>
+            <Dropdown menu={{ items: themeMenu }} placement="bottomLeft">
+                <Button type="text" icon={<SkinOutlined />} title="主题">主题</Button>
+            </Dropdown>
             <Button type="text" icon={<InfoCircleOutlined />} title="关于" onClick={() => setIsAboutOpen(true)}>关于</Button>
           </div>
           <Layout style={{ flex: 1, minHeight: 0 }}>
           <Sider 
-            theme={darkMode ? "dark" : "light"} 
             width={sidebarWidth} 
             style={{ 
-                borderRight: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', 
-                position: 'relative'
+                borderRight: 'none', 
+                position: 'relative',
+                background: bgMain
             }}
           >
             <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-                <div style={{ padding: '10px', borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
-                <span style={{ fontWeight: 'bold', paddingLeft: 8 }}>GoNavi</span>
+                <div style={{ padding: '10px', borderBottom: 'none', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', flexShrink: 0 }}>
+                
                 <div>
-                    <Button type="text" icon={darkMode ? <BulbFilled /> : <BulbOutlined />} onClick={toggleDarkMode} title="切换主题" />
                     <Button type="text" icon={<ConsoleSqlOutlined />} onClick={handleNewQuery} title="新建查询" />
                     <Button type="text" icon={<PlusOutlined />} onClick={() => setIsModalOpen(true)} title="新建连接" />
                 </div>
@@ -400,9 +556,9 @@ function App() {
                 </div>
 
                 {/* Sidebar Footer for Log Toggle */}
-                <div style={{ padding: '8px', borderTop: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
+                <div style={{ padding: '8px', borderTop: 'none', display: 'flex', justifyContent: 'center', flexShrink: 0 }}>
                     <Button 
-                        type={isLogPanelOpen ? "primary" : "text"} 
+                        type={isLogPanelOpen ? "primary" : "text"}  
                         icon={<BugOutlined />} 
                         onClick={() => setIsLogPanelOpen(!isLogPanelOpen)}
                         block
@@ -428,8 +584,8 @@ function App() {
                 title="拖动调整宽度"
             />
           </Sider>
-           <Content style={{ background: darkMode ? '#141414' : '#fff', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
-             <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+           <Content style={{ background: 'transparent', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+             <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', background: bgContent, backdropFilter: `blur(${appearance.blur ?? 0}px)` }}>
                  <TabManager />
              </div>
              {isLogPanelOpen && (
@@ -455,9 +611,15 @@ function App() {
             open={isAboutOpen}
             onCancel={() => setIsAboutOpen(false)}
             footer={[
+                lastUpdateInfo?.hasUpdate ? (
+                    <Button key="download" icon={<DownloadOutlined />} onClick={() => downloadUpdate(lastUpdateInfo, false)}>下载更新</Button>
+                ) : null,
+                lastUpdateInfo?.hasUpdate ? (
+                    <Button key="mute" onClick={() => { updateMutedVersionRef.current = lastUpdateInfo.latestVersion; setIsAboutOpen(false); }}>本次不再提示</Button>
+                ) : null,
                 <Button key="check" icon={<CloudDownloadOutlined />} onClick={() => checkForUpdates(false)}>检查更新</Button>,
                 <Button key="close" type="primary" onClick={() => setIsAboutOpen(false)}>关闭</Button>
-            ]}
+            ].filter(Boolean)}
           >
             {aboutLoading ? (
                 <div style={{ padding: '16px 0', textAlign: 'center' }}>
@@ -467,9 +629,10 @@ function App() {
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                     <div>版本：{aboutInfo?.version || '未知'}</div>
                     <div>作者：{aboutInfo?.author || '未知'}</div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <GithubOutlined />
-                    {aboutInfo?.repoUrl ? (
+                    <div>更新状态：{aboutUpdateStatus || '未检查'}</div>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                        <GithubOutlined />
+                        {aboutInfo?.repoUrl ? (
                         <a onClick={(e) => { e.preventDefault(); (window as any).runtime.BrowserOpenURL(aboutInfo.repoUrl); }} href={aboutInfo.repoUrl}>
                             {aboutInfo.repoUrl}
                         </a>
@@ -494,6 +657,47 @@ function App() {
             </div>
             )}
           </Modal>
+
+          <Modal
+              title="外观设置"
+              open={isAppearanceModalOpen}
+              onCancel={() => setIsAppearanceModalOpen(false)}
+              footer={null}
+              width={400}
+          >
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: '12px 0' }}>
+                  <div>
+                      <div style={{ marginBottom: 8, fontWeight: 500 }}>背景不透明度 (Opacity)</div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                          <Slider 
+                            min={0.1} 
+                            max={1.0} 
+                            step={0.05} 
+                            value={appearance.opacity ?? 0.95} 
+                            onChange={(v) => setAppearance({ opacity: v })} 
+                            style={{ flex: 1 }}
+                          />
+                          <span style={{ width: 40 }}>{Math.round((appearance.opacity ?? 0.95) * 100)}%</span>
+                      </div>
+                  </div>
+                  <div>
+                      <div style={{ marginBottom: 8, fontWeight: 500 }}>高斯模糊 (Blur)</div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                          <Slider 
+                            min={0} 
+                            max={20} 
+                            value={appearance.blur ?? 0} 
+                            onChange={(v) => setAppearance({ blur: v })} 
+                            style={{ flex: 1 }}
+                          />
+                          <span style={{ width: 40 }}>{appearance.blur}px</span>
+                      </div>
+                      <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
+                          * 仅控制应用内覆盖层的模糊效果
+                      </div>
+                  </div>
+              </div>
+          </Modal>
           
           {/* Ghost Resize Line for Sidebar */}
           <div 

frontend/src/components/DataGrid.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useContext, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Modal } from 'antd';
 import type { SortOrder } from 'antd/es/table/interface';
 import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined, EditOutlined } from '@ant-design/icons';
@@ -209,6 +210,7 @@ const EditableCell: React.FC<EditableCellProps> = React.memo(({
   const handleContextMenu = (e: React.MouseEvent) => {
     if (!editable) return;
     e.preventDefault();
+    e.stopPropagation(); // 阻止冒泡到行级菜单
     if (cellContextMenuContext) {
       cellContextMenuContext.showMenu(e, record, dataIndex, title);
     }
@@ -354,8 +356,33 @@ const DataGrid: React.FC<DataGridProps> = ({
 }) => {
   const connections = useStore(state => state.connections);
   const addSqlLog = useStore(state => state.addSqlLog);
-  const darkMode = useStore(state => state.darkMode);
+  const theme = useStore(state => state.theme);
+  const appearance = useStore(state => state.appearance);
+  const darkMode = theme === 'dark';
+  const opacity = appearance.opacity ?? 0.95;
   const selectionColumnWidth = 46;
+
+  // Background Helper
+  const getBg = (darkHex: string) => {
+      if (!darkMode) return `rgba(255, 255, 255, ${opacity})`;
+      const hex = darkHex.replace('#', '');
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  };
+  const blur = appearance.blur ?? 0;
+  const bgContent = getBg('#1d1d1d');
+  const bgFilter = getBg('#262626');
+  const bgContextMenu = getBg('#1f1f1f');
+  
+  // Row Colors with Opacity
+  const getRowBg = (r: number, g: number, b: number) => `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  const rowAddedBg = darkMode ? getRowBg(22, 43, 22) : getRowBg(246, 255, 237);
+  const rowModBg = darkMode ? getRowBg(22, 34, 56) : getRowBg(230, 247, 255);
+  const rowAddedHover = darkMode ? getRowBg(31, 61, 31) : getRowBg(217, 247, 190);
+  const rowModHover = darkMode ? getRowBg(29, 53, 94) : getRowBg(186, 231, 255);
+  
   const [form] = Form.useForm();
   const [modal, contextHolder] = Modal.useModal();
   const gridId = useMemo(() => `grid-${uuidv4()}`, []);
@@ -1287,7 +1314,7 @@ const DataGrid: React.FC<DataGridProps> = ({
   const enableVirtual = mergedDisplayData.length >= 200;
 
   return (
-    <div className={gridId} style={{ flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+    <div className={gridId} style={{ flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0, background: bgContent, backdropFilter: blur > 0 ? `blur(${blur}px)` : undefined }}>
 	       {/* Toolbar */}
 	        <div style={{ padding: '8px', borderBottom: '1px solid #eee', display: 'flex', gap: 8, alignItems: 'center' }}>
 	            {onReload && <Button icon={<ReloadOutlined />} disabled={loading} onClick={() => {
@@ -1336,7 +1363,12 @@ const DataGrid: React.FC<DataGridProps> = ({
 
        {/* Filter Panel */}
        {showFilter && (
-           <div style={{ padding: '8px', background: '#f5f5f5', borderBottom: '1px solid #eee' }}>
+           <div style={{ 
+               padding: '8px', 
+               margin: '4px 8px 0 8px', 
+               borderRadius: '8px',
+               background: bgFilter, 
+           }}>
                {filterConditions.map(cond => (
                    <div key={cond.id} style={{ display: 'flex', gap: 8, marginBottom: 8, alignItems: 'flex-start' }}>
                        <Select
@@ -1427,7 +1459,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                     <span>{rowEditorRowKey ? `rowKey: ${rowEditorRowKey}` : ''}</span>
                 </div>
                 <Form form={rowEditorForm} layout="vertical">
-                    <div style={{ maxHeight: '62vh', overflow: 'auto', paddingRight: 8 }}>
+                    <div className="custom-scrollbar" style={{ maxHeight: '62vh', overflow: 'auto', paddingRight: 8 }}>
                         {columnNames.map((col) => {
                             const sample = rowEditorDisplayRef.current?.[col] ?? '';
                             const placeholder = rowEditorNullColsRef.current?.has(col) ? '(NULL)' : undefined;
@@ -1527,19 +1559,21 @@ const DataGrid: React.FC<DataGridProps> = ({
             </DataContext.Provider>
         </Form>
 
-        {/* Cell Context Menu */}
-        {cellContextMenu.visible && (
+        {/* Cell Context Menu - 使用 Portal 渲染到 body，避免 backdropFilter 影响 fixed 定位 */}
+        {cellContextMenu.visible && createPortal(
             <div
                 style={{
                     position: 'fixed',
                     left: cellContextMenu.x,
                     top: cellContextMenu.y,
                     zIndex: 10000,
-                    background: '#fff',
-                    border: '1px solid #d9d9d9',
+                    background: bgContextMenu,
+                    backdropFilter: blur > 0 ? `blur(${blur}px)` : undefined,
+                    border: darkMode ? '1px solid #303030' : '1px solid #d9d9d9',
                     borderRadius: 4,
                     boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-                    minWidth: 120,
+                    minWidth: 160,
+                    color: darkMode ? '#fff' : 'rgba(0, 0, 0, 0.88)'
                 }}
                 onClick={(e) => e.stopPropagation()}
             >
@@ -1549,18 +1583,133 @@ const DataGrid: React.FC<DataGridProps> = ({
                         cursor: 'pointer',
                         transition: 'background 0.2s',
                     }}
-                    onMouseEnter={(e) => e.currentTarget.style.background = '#f5f5f5'}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
                     onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                     onClick={handleCellSetNull}
                 >
                     设置为 NULL
                 </div>
-            </div>
+                <div style={{ height: 1, background: darkMode ? '#303030' : '#f0f0f0', margin: '4px 0' }} />
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) handleCopyInsert(cellContextMenu.record);
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    复制为 INSERT
+                </div>
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) handleCopyJson(cellContextMenu.record);
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    复制为 JSON
+                </div>
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) handleCopyCsv(cellContextMenu.record);
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    复制为 CSV
+                </div>
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) {
+                            const records = getTargets(cellContextMenu.record);
+                            const lines = records.map((r: any) => {
+                                const { [GONAVI_ROW_KEY]: _rowKey, ...vals } = r;
+                                return `| ${Object.values(vals).join(' | ')} |`;
+                            });
+                            copyToClipboard(lines.join('\n'));
+                        }
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    复制为 Markdown
+                </div>
+                <div style={{ height: 1, background: darkMode ? '#303030' : '#f0f0f0', margin: '4px 0' }} />
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) handleExportSelected('csv', cellContextMenu.record);
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    导出为 CSV
+                </div>
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) handleExportSelected('xlsx', cellContextMenu.record);
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    导出为 Excel
+                </div>
+                <div
+                    style={{
+                        padding: '8px 12px',
+                        cursor: 'pointer',
+                        transition: 'background 0.2s',
+                    }}
+                    onMouseEnter={(e) => e.currentTarget.style.background = darkMode ? '#303030' : '#f5f5f5'}
+                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => {
+                        if (cellContextMenu.record) handleExportSelected('json', cellContextMenu.record);
+                        setCellContextMenu(prev => ({ ...prev, visible: false }));
+                    }}
+                >
+                    导出为 JSON
+                </div>
+            </div>,
+            document.body
         )}
        </div>
        
        {pagination && (
-           <div style={{ padding: '8px', borderTop: '1px solid #eee', display: 'flex', justifyContent: 'flex-end', background: '#fff' }}>
+           <div style={{ padding: '8px', borderTop: 'none', display: 'flex', justifyContent: 'flex-end' }}>
                    <Pagination 
                    current={pagination.current}
                    pageSize={pagination.pageSize}
@@ -1579,8 +1728,16 @@ const DataGrid: React.FC<DataGridProps> = ({
        )}
 
 	        <style>{`
-	            .${gridId} .row-added td { background-color: #f6ffed !important; }
-	            .${gridId} .row-modified td { background-color: #e6f7ff !important; }
+                .${gridId} .ant-table { background: transparent !important; }
+                .${gridId} .ant-table-container { background: transparent !important; border: none !important; }
+                .${gridId} .ant-table-tbody > tr > td { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: 1px solid transparent !important; }
+                .${gridId} .ant-table-thead > tr > th { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: 1px solid transparent !important; }
+                .${gridId} .ant-table-thead > tr > th::before { display: none !important; }
+                .${gridId} .ant-table-tbody > tr:hover > td { background-color: ${darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.02)'} !important; }
+	            .${gridId} .row-added td { background-color: ${rowAddedBg} !important; color: ${darkMode ? '#e6fffb' : 'inherit'}; }
+	            .${gridId} .row-modified td { background-color: ${rowModBg} !important; color: ${darkMode ? '#e6f7ff' : 'inherit'}; }
+                .${gridId} .ant-table-tbody > tr.row-added:hover > td { background-color: ${rowAddedHover} !important; }
+                .${gridId} .ant-table-tbody > tr.row-modified:hover > td { background-color: ${rowModHover} !important; }
 	        `}</style>
        
        {/* Ghost Resize Line for Columns */}

frontend/src/components/LogPanel.tsx

@@ -12,7 +12,21 @@ interface LogPanelProps {
 const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) => {
     const sqlLogs = useStore(state => state.sqlLogs);
     const clearSqlLogs = useStore(state => state.clearSqlLogs);
-    const darkMode = useStore(state => state.darkMode);
+    const theme = useStore(state => state.theme);
+    const appearance = useStore(state => state.appearance);
+    const darkMode = theme === 'dark';
+
+    // Background Helper
+    const getBg = (darkHex: string) => {
+        if (!darkMode) return `rgba(255, 255, 255, ${appearance.opacity ?? 0.95})`;
+        const hex = darkHex.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${appearance.opacity ?? 0.95})`;
+    };
+    const bgMain = getBg('#1f1f1f');
+    const bgToolbar = getBg('#2a2a2a');
 
     const columns = [
         {
@@ -53,8 +67,9 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
     return (
         <div style={{ 
             height, 
-            borderTop: darkMode ? '1px solid #303030' : '1px solid #d9d9d9', 
-            background: darkMode ? '#1f1f1f' : '#fff',
+            borderTop: 'none', 
+            background: bgMain,
+            backdropFilter: `blur(${appearance.blur ?? 0}px)`,
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
@@ -77,11 +92,10 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
             {/* Toolbar */}
             <div style={{ 
                 padding: '4px 8px', 
-                borderBottom: darkMode ? '1px solid #303030' : '1px solid #f0f0f0',
+                borderBottom: 'none',
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                background: darkMode ? '#2a2a2a' : '#fafafa',
                 height: 32
             }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 'bold', fontSize: '12px' }}>

frontend/src/components/QueryEditor.tsx

@@ -42,8 +42,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
   const editorRef = useRef<any>(null);
   const monacoRef = useRef<any>(null);
   const dragRef = useRef<{ startY: number, startHeight: number } | null>(null);
-  const tablesRef = useRef<string[]>([]); // Store tables for autocomplete
-  const allColumnsRef = useRef<{tableName: string, name: string, type: string}[]>([]); // Store all columns
+  const tablesRef = useRef<{dbName: string, tableName: string}[]>([]); // Store tables for autocomplete (cross-db)
+  const allColumnsRef = useRef<{dbName: string, tableName: string, name: string, type: string}[]>([]); // Store all columns (cross-db)
+  const visibleDbsRef = useRef<string[]>([]); // Store visible databases for cross-db intellisense
 
   const connections = useStore(state => state.connections);
   const addSqlLog = useStore(state => state.addSqlLog);
@@ -52,7 +53,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
   const connectionsRef = useRef(connections);
   const columnsCacheRef = useRef<Record<string, ColumnDefinition[]>>({});
   const saveQuery = useStore(state => state.saveQuery);
-  const darkMode = useStore(state => state.darkMode);
+  const theme = useStore(state => state.theme);
+  const darkMode = theme === 'dark';
   const sqlFormatOptions = useStore(state => state.sqlFormatOptions);
   const setSqlFormatOptions = useStore(state => state.setSqlFormatOptions);
   const queryOptions = useStore(state => state.queryOptions);
@@ -80,9 +82,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
       const fetchDbs = async () => {
           const conn = connections.find(c => c.id === currentConnectionId);
           if (!conn) return;
-          
-          const config = { 
-            ...conn.config, 
+
+          const config = {
+            ...conn.config,
             port: Number(conn.config.port),
             password: conn.config.password || "",
             database: conn.config.database || "",
@@ -92,27 +94,41 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
 
           const res = await DBGetDatabases(config as any);
           if (res.success && Array.isArray(res.data)) {
-              const dbs = res.data.map((row: any) => row.Database || row.database);
+              let dbs = res.data.map((row: any) => row.Database || row.database);
+
+              // 过滤只显示 includeDatabases 中配置的数据库
+              const includeDbs = conn.includeDatabases;
+              if (includeDbs && includeDbs.length > 0) {
+                  dbs = dbs.filter((db: string) => includeDbs.includes(db));
+              }
+
+              // 存储可见数据库列表用于跨库智能提示
+              visibleDbsRef.current = dbs;
+
               setDbList(dbs);
               if (!currentDbRef.current) {
-                  if (conn.config.database) setCurrentDb(conn.config.database);
+                  if (conn.config.database && dbs.includes(conn.config.database)) setCurrentDb(conn.config.database);
                   else if (dbs.length > 0 && dbs[0] !== 'information_schema') setCurrentDb(dbs[0]);
               }
           } else {
+              visibleDbsRef.current = [];
               setDbList([]);
           }
       };
       fetchDbs();
   }, [currentConnectionId, connections]);
 
-  // Fetch Metadata for Autocomplete
+  // Fetch Metadata for Autocomplete (Cross-database)
   useEffect(() => {
       const fetchMetadata = async () => {
           const conn = connections.find(c => c.id === currentConnectionId);
-          if (!conn || !currentDb) return;
+          if (!conn) return;
 
-          const config = { 
-            ...conn.config, 
+          const visibleDbs = visibleDbsRef.current;
+          if (!visibleDbs || visibleDbs.length === 0) return;
+
+          const config = {
+            ...conn.config,
             port: Number(conn.config.port),
             password: conn.config.password || "",
             database: conn.config.database || "",
@@ -120,25 +136,39 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
             ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
           };
 
-          const resTables = await DBGetTables(config as any, currentDb);
-          if (resTables.success && Array.isArray(resTables.data)) {
-              const tableNames = resTables.data.map((row: any) => Object.values(row)[0] as string);
-              tablesRef.current = tableNames;
-          } else {
-              tablesRef.current = [];
-          }
+          // 加载所有可见数据库的表
+          const allTables: {dbName: string, tableName: string}[] = [];
+          const allColumns: {dbName: string, tableName: string, name: string, type: string}[] = [];
 
-          if (config.type === 'mysql' || !config.type) {
-              const resCols = await DBGetAllColumns(config as any, currentDb);
+          for (const dbName of visibleDbs) {
+              // 获取表
+              const resTables = await DBGetTables(config as any, dbName);
+              if (resTables.success && Array.isArray(resTables.data)) {
+                  const tableNames = resTables.data.map((row: any) => Object.values(row)[0] as string);
+                  tableNames.forEach((tableName: string) => {
+                      allTables.push({ dbName, tableName });
+                  });
+              }
+
+              // 获取列 (所有数据库类型都支持 DBGetAllColumns)
+              const resCols = await DBGetAllColumns(config as any, dbName);
               if (resCols.success && Array.isArray(resCols.data)) {
-                  allColumnsRef.current = resCols.data;
-              } else {
-                  allColumnsRef.current = [];
+                  resCols.data.forEach((col: any) => {
+                      allColumns.push({
+                          dbName,
+                          tableName: col.tableName,
+                          name: col.name,
+                          type: col.type
+                      });
+                  });
               }
           }
+
+          tablesRef.current = allTables;
+          allColumnsRef.current = allColumns;
       };
       fetchMetadata();
-  }, [currentConnectionId, currentDb, connections]);
+  }, [currentConnectionId, connections, dbList]); // dbList 变化时触发重新加载
 
   // Handle Resizing
   const handleMouseDown = (e: React.MouseEvent) => {
@@ -241,61 +271,125 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
 
               const fullText = model.getValue();
 
-              // 1) alias.field completion: when cursor is after "<alias>.<prefix>"
+              // 获取当前行光标前的内容
               const linePrefix = model.getLineContent(position.lineNumber).slice(0, position.column - 1);
+
+              // 0) 三段式 db.table.column 格式：当输入 db.table. 时提示列
+              const threePartMatch = linePrefix.match(/([`"]?[\w]+[`"]?)\.([`"]?[\w]+[`"]?)\.(\w*)$/);
+              if (threePartMatch) {
+                  const dbPart = stripQuotes(threePartMatch[1]);
+                  const tablePart = stripQuotes(threePartMatch[2]);
+                  const colPrefix = (threePartMatch[3] || '').toLowerCase();
+
+                  // 在 allColumnsRef 中查找匹配的列
+                  const cols = allColumnsRef.current.filter(c =>
+                      (c.dbName || '').toLowerCase() === dbPart.toLowerCase() &&
+                      (c.tableName || '').toLowerCase() === tablePart.toLowerCase()
+                  );
+
+                  const filtered = colPrefix
+                      ? cols.filter(c => (c.name || '').toLowerCase().startsWith(colPrefix))
+                      : cols;
+
+                  const suggestions = filtered.map(c => ({
+                      label: c.name,
+                      kind: monaco.languages.CompletionItemKind.Field,
+                      insertText: c.name,
+                      detail: `${c.type} (${c.dbName}.${c.tableName})`,
+                      range,
+                      sortText: '0' + c.name
+                  }));
+                  return { suggestions };
+              }
+
+              // 1) 两段式 qualifier.xxx 格式
               const qualifierMatch = linePrefix.match(/([`"]?[A-Za-z_][\w]*[`"]?)\.(\w*)$/);
               if (qualifierMatch) {
-                  const alias = stripQuotes(qualifierMatch[1]);
-                  const colPrefix = (qualifierMatch[2] || '').toLowerCase();
+                  const qualifier = stripQuotes(qualifierMatch[1]);
+                  const prefix = (qualifierMatch[2] || '').toLowerCase();
 
+                  // 首先检查 qualifier 是否是数据库名（跨库表提示）
+                  const visibleDbs = visibleDbsRef.current;
+                  if (visibleDbs.some(db => db.toLowerCase() === qualifier.toLowerCase())) {
+                      // qualifier 是数据库名，提示该库的表
+                      const tables = tablesRef.current.filter(t =>
+                          (t.dbName || '').toLowerCase() === qualifier.toLowerCase()
+                      );
+                      const filtered = prefix
+                          ? tables.filter(t => (t.tableName || '').toLowerCase().startsWith(prefix))
+                          : tables;
+
+                      const suggestions = filtered.map(t => ({
+                          label: t.tableName,
+                          kind: monaco.languages.CompletionItemKind.Class,
+                          insertText: t.tableName,
+                          detail: `Table (${t.dbName})`,
+                          range,
+                          sortText: '0' + t.tableName
+                      }));
+                      return { suggestions };
+                  }
+
+                  // 否则检查是否是表别名或表名，提示列
                   const reserved = new Set([
                       'where', 'on', 'group', 'order', 'limit', 'having',
                       'left', 'right', 'inner', 'outer', 'full', 'cross', 'join',
                       'union', 'except', 'intersect', 'as', 'set', 'values', 'returning',
                   ]);
 
-                  const aliasMap: Record<string, string> = {};
-                  // Capture table and optional alias, support schema.table
+                  const aliasMap: Record<string, {dbName: string, tableName: string}> = {};
+                  // Capture table and optional alias, support db.table format
                   const aliasRegex = /\b(?:FROM|JOIN|UPDATE|INTO|DELETE\s+FROM)\s+([`"]?[\w]+[`"]?(?:\s*\.\s*[`"]?[\w]+[`"]?)?)(?:\s+(?:AS\s+)?([`"]?[\w]+[`"]?))?/gi;
                   let m;
                   while ((m = aliasRegex.exec(fullText)) !== null) {
                       const tableIdent = normalizeQualifiedName(m[1] || '');
                       if (!tableIdent) continue;
+
+                      // 解析 db.table 或 table 格式
+                      const parts = tableIdent.split('.');
+                      let dbName = currentDbRef.current || '';
+                      let tableName = tableIdent;
+                      if (parts.length === 2) {
+                          dbName = parts[0];
+                          tableName = parts[1];
+                      }
+
                       const shortTable = getLastPart(tableIdent);
-                      // allow "table." as qualifier too
-                      if (shortTable) aliasMap[shortTable.toLowerCase()] = tableIdent;
+                      // 用表名作为 qualifier
+                      if (shortTable) aliasMap[shortTable.toLowerCase()] = { dbName, tableName };
 
                       const a = stripQuotes(m[2] || '').trim();
                       if (!a) continue;
                       const al = a.toLowerCase();
                       if (reserved.has(al)) continue;
-                      aliasMap[al] = tableIdent;
+                      aliasMap[al] = { dbName, tableName };
                   }
 
-                  const tableIdent = aliasMap[alias.toLowerCase()];
-                  if (tableIdent) {
-                      const shortTable = getLastPart(tableIdent);
-
+                  const tableInfo = aliasMap[qualifier.toLowerCase()];
+                  if (tableInfo) {
                       // Prefer preloaded MySQL all-columns cache
-                      let cols: { name: string, type?: string, tableName?: string }[] = [];
+                      let cols: { name: string, type?: string, tableName?: string, dbName?: string }[] = [];
                       if (allColumnsRef.current.length > 0) {
                           cols = allColumnsRef.current
-                              .filter(c => (c.tableName || '').toLowerCase() === (shortTable || '').toLowerCase())
-                              .map(c => ({ name: c.name, type: c.type, tableName: c.tableName }));
+                              .filter(c =>
+                                  (c.dbName || '').toLowerCase() === (tableInfo.dbName || '').toLowerCase() &&
+                                  (c.tableName || '').toLowerCase() === (tableInfo.tableName || '').toLowerCase()
+                              )
+                              .map(c => ({ name: c.name, type: c.type, tableName: c.tableName, dbName: c.dbName }));
                       } else {
-                          const dbCols = await getColumnsByDB(tableIdent);
-                          cols = dbCols.map(c => ({ name: c.name, type: c.type, tableName: shortTable }));
+                          const dbCols = await getColumnsByDB(tableInfo.tableName);
+                          cols = dbCols.map(c => ({ name: c.name, type: c.type, tableName: tableInfo.tableName }));
                       }
 
-                      const filtered = colPrefix
-                          ? cols.filter(c => (c.name || '').toLowerCase().startsWith(colPrefix))
+                      const filtered = prefix
+                          ? cols.filter(c => (c.name || '').toLowerCase().startsWith(prefix))
                           : cols;
 
                       const suggestions = filtered.map(c => ({
                           label: c.name,
                           kind: monaco.languages.CompletionItemKind.Field,
                           insertText: c.name,
-                          detail: c.type ? `${c.type}${c.tableName ? ` (${c.tableName})` : ''}` : (c.tableName ? `(${c.tableName})` : ''),
+                          detail: c.type ? `${c.type} (${c.dbName ? c.dbName + '.' : ''}${c.tableName})` : (c.tableName ? `(${c.tableName})` : ''),
                           range,
                           sortText: '0' + c.name
                       }));
@@ -310,35 +404,72 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
               while ((match = tableRegex.exec(fullText)) !== null) {
                   const t = normalizeQualifiedName(match[1] || '');
                   if (!t) continue;
-                  foundTables.add(getLastPart(t).toLowerCase());
+                  // 存储完整标识 db.table 或 table
+                  foundTables.add(t.toLowerCase());
               }
 
+              const currentDatabase = currentDbRef.current || '';
+
+              // 相关列提示：匹配 SQL 中引用的表（FROM/JOIN 等）
+              // 权重最高，输入 WHERE 条件时优先显示
               const relevantColumns = allColumnsRef.current
-                  .filter(c => foundTables.has((c.tableName || '').toLowerCase()))
-                  .map(c => ({
-                      label: c.name,
-                      kind: monaco.languages.CompletionItemKind.Field,
-                      insertText: c.name,
-                      detail: `${c.type} (${c.tableName})`,
+                  .filter(c => {
+                      const fullIdent = `${c.dbName}.${c.tableName}`.toLowerCase();
+                      const shortIdent = (c.tableName || '').toLowerCase();
+                      return foundTables.has(fullIdent) || foundTables.has(shortIdent);
+                  })
+                  .map(c => {
+                      // 当前库的表字段优先级更高
+                      const isCurrentDb = (c.dbName || '').toLowerCase() === currentDatabase.toLowerCase();
+                      return {
+                          label: c.name,
+                          kind: monaco.languages.CompletionItemKind.Field,
+                          insertText: c.name,
+                          detail: `${c.type} (${c.dbName}.${c.tableName})`,
+                          range,
+                          sortText: isCurrentDb ? '00' + c.name : '01' + c.name // FROM 表字段最优先
+                      };
+                  });
+
+              // 表提示：当前库显示表名，其他库显示 db.table 格式
+              const tableSuggestions = tablesRef.current.map(t => {
+                  const isCurrentDb = (t.dbName || '').toLowerCase() === currentDatabase.toLowerCase();
+                  const label = isCurrentDb ? t.tableName : `${t.dbName}.${t.tableName}`;
+                  const insertText = isCurrentDb ? t.tableName : `${t.dbName}.${t.tableName}`;
+                  return {
+                      label,
+                      kind: monaco.languages.CompletionItemKind.Class,
+                      insertText,
+                      detail: `Table (${t.dbName})`,
                       range,
-                      sortText: '0' + c.name
-                  }));
+                      sortText: isCurrentDb ? '10' + t.tableName : '11' + t.tableName // 表次优先
+                  };
+              });
+
+              // 数据库提示
+              const dbSuggestions = visibleDbsRef.current.map(db => ({
+                  label: db,
+                  kind: monaco.languages.CompletionItemKind.Module,
+                  insertText: db,
+                  detail: 'Database',
+                  range,
+                  sortText: '20' + db // 数据库最后
+              }));
+
+              // 关键字提示
+              const keywordSuggestions = ['SELECT', 'FROM', 'WHERE', 'LIMIT', 'INSERT', 'UPDATE', 'DELETE', 'JOIN', 'LEFT', 'RIGHT', 'INNER', 'OUTER', 'ON', 'GROUP BY', 'ORDER BY', 'AS', 'AND', 'OR', 'NOT', 'NULL', 'IS', 'IN', 'VALUES', 'SET', 'CREATE', 'TABLE', 'DROP', 'ALTER', 'Add', 'MODIFY', 'CHANGE', 'COLUMN', 'KEY', 'PRIMARY', 'FOREIGN', 'REFERENCES', 'CONSTRAINT', 'DEFAULT', 'AUTO_INCREMENT', 'COMMENT', 'SHOW', 'DESCRIBE', 'EXPLAIN'].map(k => ({
+                  label: k,
+                  kind: monaco.languages.CompletionItemKind.Keyword,
+                  insertText: k,
+                  range,
+                  sortText: '30' + k // 关键字权重最低
+              }));
 
               const suggestions = [
-                  ...['SELECT', 'FROM', 'WHERE', 'LIMIT', 'INSERT', 'UPDATE', 'DELETE', 'JOIN', 'LEFT', 'RIGHT', 'INNER', 'OUTER', 'ON', 'GROUP BY', 'ORDER BY', 'AS', 'AND', 'OR', 'NOT', 'NULL', 'IS', 'IN', 'VALUES', 'SET', 'CREATE', 'TABLE', 'DROP', 'ALTER', 'Add', 'MODIFY', 'CHANGE', 'COLUMN', 'KEY', 'PRIMARY', 'FOREIGN', 'REFERENCES', 'CONSTRAINT', 'DEFAULT', 'AUTO_INCREMENT', 'COMMENT', 'SHOW', 'DESCRIBE', 'EXPLAIN'].map(k => ({
-                      label: k,
-                      kind: monaco.languages.CompletionItemKind.Keyword,
-                      insertText: k,
-                      range
-                  })),
-                  ...tablesRef.current.map(t => ({
-                      label: t,
-                      kind: monaco.languages.CompletionItemKind.Class,
-                      insertText: t,
-                      detail: 'Table',
-                      range
-                  })),
-                  ...relevantColumns
+                  ...relevantColumns,   // FROM 表的列最优先
+                  ...tableSuggestions,  // 表次之
+                  ...dbSuggestions,     // 数据库
+                  ...keywordSuggestions // 关键字最后
               ];
               return { suggestions };
           }

frontend/src/components/Sidebar.tsx

@@ -48,7 +48,21 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
   const addTab = useStore(state => state.addTab);
   const setActiveContext = useStore(state => state.setActiveContext);
   const removeConnection = useStore(state => state.removeConnection);
+  const theme = useStore(state => state.theme);
+  const appearance = useStore(state => state.appearance);
+  const darkMode = theme === 'dark';
   const [treeData, setTreeData] = useState<TreeNode[]>([]);
+
+  // Background Helper (Duplicate logic for now, ideally shared)
+  const getBg = (darkHex: string) => {
+      if (!darkMode) return `rgba(255, 255, 255, ${appearance.opacity ?? 0.95})`;
+      const hex = darkHex.replace('#', '');
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${appearance.opacity ?? 0.95})`;
+  };
+  const bgMain = getBg('#141414');
   const [searchValue, setSearchValue] = useState('');
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
@@ -1215,7 +1229,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
         </div>
 
         {/* Toolbar for batch operations - always visible */}
-        <div style={{ padding: '4px 8px', borderBottom: '1px solid #f0f0f0', display: 'flex', gap: 4 }}>
+        <div style={{ padding: '4px 8px', borderBottom: 'none', display: 'flex', gap: 4 }}>
             <Button
                 size="small"
                 icon={<CheckSquareOutlined />}
@@ -1368,7 +1382,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                             </span>
                         </Space>
                     </div>
-                    <div style={{ maxHeight: 400, overflow: 'auto', border: '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
+                    <div style={{ maxHeight: 400, overflow: 'auto', border: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
                         <Checkbox.Group
                             value={checkedTableKeys}
                             onChange={(values) => setCheckedTableKeys(values as string[])}
@@ -1459,7 +1473,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                             </span>
                         </Space>
                     </div>
-                    <div style={{ maxHeight: 400, overflow: 'auto', border: '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
+                    <div style={{ maxHeight: 400, overflow: 'auto', border: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
                         <Checkbox.Group
                             value={checkedDbKeys}
                             onChange={(values) => setCheckedDbKeys(values as string[])}

frontend/src/components/TabManager.tsx

@@ -122,6 +122,9 @@ const TabManager: React.FC = () => {
             .main-tabs .ant-tabs-tabpane-hidden {
               display: none !important;
             }
+            .main-tabs .ant-tabs-nav::before {
+                border-bottom: none !important;
+            }
         `}</style>
         <Tabs
             className="main-tabs"

frontend/src/global.d.ts

@@ -2,6 +2,13 @@ export {};
 
 declare global {
   interface Window {
+    go: any;
+    runtime: {
+        WindowMinimise: () => void;
+        WindowToggleMaximise: () => void;
+        Quit: () => void;
+        BrowserOpenURL: (url: string) => void;
+    };
     ipcRenderer: {
       send: (channel: string, ...args: any[]) => void;
       on: (channel: string, listener: (event: any, ...args: any[]) => void) => void;

frontend/src/store.ts

@@ -19,7 +19,8 @@ interface AppState {
   activeTabId: string | null;
   activeContext: { connectionId: string; dbName: string } | null;
   savedQueries: SavedQuery[];
-  darkMode: boolean;
+  theme: 'light' | 'dark';
+  appearance: { opacity: number; blur: number };
   sqlFormatOptions: { keywordCase: 'upper' | 'lower' };
   queryOptions: { maxRows: number };
   sqlLogs: SqlLog[];
@@ -40,7 +41,8 @@ interface AppState {
   saveQuery: (query: SavedQuery) => void;
   deleteQuery: (id: string) => void;
 
-  toggleDarkMode: () => void;
+  setTheme: (theme: 'light' | 'dark') => void;
+  setAppearance: (appearance: Partial<{ opacity: number; blur: number }>) => void;
   setSqlFormatOptions: (options: { keywordCase: 'upper' | 'lower' }) => void;
   setQueryOptions: (options: Partial<{ maxRows: number }>) => void;
   
@@ -56,7 +58,8 @@ export const useStore = create<AppState>()(
       activeTabId: null,
       activeContext: null,
       savedQueries: [],
-      darkMode: false,
+      theme: 'light',
+      appearance: { opacity: 0.95, blur: 0 },
       sqlFormatOptions: { keywordCase: 'upper' },
       queryOptions: { maxRows: 5000 },
       sqlLogs: [],
@@ -125,7 +128,8 @@ export const useStore = create<AppState>()(
 
       deleteQuery: (id) => set((state) => ({ savedQueries: state.savedQueries.filter(q => q.id !== id) })),
 
-      toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
+      setTheme: (theme) => set({ theme }),
+      setAppearance: (appearance) => set((state) => ({ appearance: { ...state.appearance, ...appearance } })),
       setSqlFormatOptions: (options) => set({ sqlFormatOptions: options }),
       setQueryOptions: (options) => set((state) => ({ queryOptions: { ...state.queryOptions, ...options } })),
       
@@ -134,7 +138,7 @@ export const useStore = create<AppState>()(
     }),
     {
       name: 'lite-db-storage', // name of the item in the storage (must be unique)
-      partialize: (state) => ({ connections: state.connections, savedQueries: state.savedQueries, darkMode: state.darkMode, sqlFormatOptions: state.sqlFormatOptions, queryOptions: state.queryOptions }), // Don't persist logs
+      partialize: (state) => ({ connections: state.connections, savedQueries: state.savedQueries, theme: state.theme, appearance: state.appearance, sqlFormatOptions: state.sqlFormatOptions, queryOptions: state.queryOptions }), // Don't persist logs
     }
   )
 );

main.go

@@ -9,6 +9,7 @@ import (
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+	"github.com/wailsapp/wails/v2/pkg/options/windows"
 )
 
 //go:embed all:frontend/dist
@@ -20,18 +21,26 @@ func main() {
 
 	// Create application with options
 	err := wails.Run(&options.App{
-		Title:  "GoNavi",
-		Width:  1024,
-		Height: 768,
+		Title:     "GoNavi",
+		Width:     1024,
+		Height:    768,
+		Frameless: true,
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
+		BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},
 		OnStartup:        application.Startup,
 		OnShutdown:       application.Shutdown,
 		Bind: []interface{}{
 			application,
 		},
+		Windows: &windows.Options{
+			WebviewIsTransparent:              true,
+			WindowIsTranslucent:               true,
+			BackdropType:                      windows.Acrylic,
+			DisableWindowIcon:                 false,
+			DisableFramelessWindowDecorations: false,
+		},
 	})
 
 	if err != nil {