From d1ce9cefb823f4a6bc21eb2ea23750636fb52760 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E9=94=8B?= Date: Thu, 5 Feb 2026 21:26:03 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(editor/appearance):=20?= =?UTF-8?q?=E8=B7=A8=E5=BA=93SQL=E6=99=BA=E8=83=BD=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E4=B8=8E=E5=85=A8=E5=B1=80=E9=80=8F=E6=98=8E=E5=BA=A6=E6=A8=A1?= =?UTF-8?q?=E7=B3=8A=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 跨库SQL智能提示: - 扩展 tablesRef/allColumnsRef 支持跨库元数据存储 - 根据 includeDatabases 配置过滤可见数据库 - 支持三段式(db.table.column)和两段式(db.table)补全格式 - 优化补全权重：FROM表字段优先于其他表和关键字 - 移除数据库类型限制，PostgreSQL等均支持列信息获取 全局透明度与高斯模糊: - 新增 appearance 状态管理(opacity/blur)并持久化 - App/Sidebar/LogPanel/DataGrid/TabManager 适配透明背景 - 使用 backdropFilter 实现高斯模糊效果 - 右键菜单使用 Portal 渲染避免 fixed 定位失效 单元格右键菜单增强: - 合并复制(INSERT/JSON/CSV/Markdown)和导出功能 - 添加 stopPropagation 防止菜单事件冒泡 --- frontend/package.json.md5 | 2 +- frontend/src/App.css | 12 +- frontend/src/App.tsx | 138 +++++++++++-- frontend/src/components/DataGrid.tsx | 177 ++++++++++++++-- frontend/src/components/LogPanel.tsx | 21 +- frontend/src/components/QueryEditor.tsx | 264 ++++++++++++++++++------ frontend/src/components/Sidebar.tsx | 14 +- frontend/src/components/TabManager.tsx | 3 + frontend/src/store.ts | 6 +- main.go | 16 +- 10 files changed, 545 insertions(+), 108 deletions(-) diff --git a/frontend/package.json.md5 b/frontend/package.json.md5 index 0f8f4fe..a7661c0 100755 --- a/frontend/package.json.md5 +++ b/frontend/package.json.md5 @@ -1 +1 @@ -5b8157374dae5f9340e31b2d0bd2c00e \ No newline at end of file +d0f9366af59a6367ad3c7e2d4185ead4 \ No newline at end of file diff --git a/frontend/src/App.css b/frontend/src/App.css index 30a400f..b8e73f2 100644 --- a/frontend/src/App.css +++ b/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 样式优化 */ @@ -52,13 +53,18 @@ body[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #666; } -/* Ensure body background matches theme to avoid white flashes */ +/* Ensure body background matches theme to avoid white flashes, but kept transparent for window composition */ body { - transition: background-color 0.3s, color 0.3s; + 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; -} \ No newline at end of file +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6d8e119..162c895 100644 --- a/frontend/src/App.tsx +++ b/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, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined } 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'; @@ -19,7 +19,25 @@ function App() { const [editingConnection, setEditingConnection] = useState(null); 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); @@ -241,9 +259,18 @@ function App() { label: '暗色主题', icon: themeMode === 'dark' ? : undefined, onClick: () => setTheme('dark') + }, + { type: 'divider' }, + { + key: 'settings', + label: '外观设置...', + icon: , + onClick: () => setIsAppearanceModalOpen(true) } ]; + const [isAppearanceModalOpen, setIsAppearanceModalOpen] = useState(false); + // Log Panel const [logPanelHeight, setLogPanelHeight] = useState(200); @@ -399,9 +426,46 @@ 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', + } + } }} > - + {/* Custom Title Bar */}
@@ -421,7 +487,7 @@ function App() { {/* Logo can be added here if available */} GoNavi
-
+
-
+
{/* Sidebar Footer for Log Toggle */} -
+