{/* Toolbar */}
{onReload && } disabled={loading} onClick={() => {
@@ -1568,7 +1570,8 @@ const DataGrid: React.FC = ({
top: cellContextMenu.y,
zIndex: 10000,
background: bgContextMenu,
- backdropFilter: blur > 0 ? `blur(${blur}px)` : undefined,
+ backdropFilter: blurFilter,
+ WebkitBackdropFilter: blurFilter,
border: darkMode ? '1px solid #303030' : '1px solid #d9d9d9',
borderRadius: 4,
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
diff --git a/frontend/src/components/LogPanel.tsx b/frontend/src/components/LogPanel.tsx
index 26bd3ad..143d617 100644
--- a/frontend/src/components/LogPanel.tsx
+++ b/frontend/src/components/LogPanel.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
import { Table, Tag, Button, Tooltip } from 'antd';
import { ClearOutlined, CloseOutlined, CaretRightOutlined, BugOutlined } from '@ant-design/icons';
import { useStore } from '../store';
+import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform } from '../utils/appearance';
interface LogPanelProps {
height: number;
@@ -15,18 +16,21 @@ const LogPanel: React.FC = ({ height, onClose, onResizeStart }) =
const theme = useStore(state => state.theme);
const appearance = useStore(state => state.appearance);
const darkMode = theme === 'dark';
+ const opacity = normalizeOpacityForPlatform(appearance.opacity);
+ const blur = normalizeBlurForPlatform(appearance.blur);
// Background Helper
const getBg = (darkHex: string) => {
- if (!darkMode) return `rgba(255, 255, 255, ${appearance.opacity ?? 0.95})`;
+ 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}, ${appearance.opacity ?? 0.95})`;
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const bgMain = getBg('#1f1f1f');
const bgToolbar = getBg('#2a2a2a');
+ const blurFilter = blurToFilter(blur);
const columns = [
{
@@ -69,7 +73,8 @@ const LogPanel: React.FC = ({ height, onClose, onResizeStart }) =
height,
borderTop: 'none',
background: bgMain,
- backdropFilter: `blur(${appearance.blur ?? 0}px)`,
+ backdropFilter: blurFilter,
+ WebkitBackdropFilter: blurFilter,
display: 'flex',
flexDirection: 'column',
position: 'relative',
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 9130603..e8c21c0 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -29,6 +29,7 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge,
import { useStore } from '../store';
import { SavedConnection } from '../types';
import { DBGetDatabases, DBGetTables, DBShowCreateTable, ExportTable, OpenSQLFile, CreateDatabase } from '../../wailsjs/go/app/App';
+ import { normalizeOpacityForPlatform } from '../utils/appearance';
const { Search } = Input;
@@ -51,16 +52,17 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
const theme = useStore(state => state.theme);
const appearance = useStore(state => state.appearance);
const darkMode = theme === 'dark';
+ const opacity = normalizeOpacityForPlatform(appearance.opacity);
const [treeData, setTreeData] = useState([]);
// Background Helper (Duplicate logic for now, ideally shared)
const getBg = (darkHex: string) => {
- if (!darkMode) return `rgba(255, 255, 255, ${appearance.opacity ?? 0.95})`;
+ 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}, ${appearance.opacity ?? 0.95})`;
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const bgMain = getBg('#141414');
const [searchValue, setSearchValue] = useState('');
diff --git a/frontend/src/utils/appearance.ts b/frontend/src/utils/appearance.ts
new file mode 100644
index 0000000..96ba44a
--- /dev/null
+++ b/frontend/src/utils/appearance.ts
@@ -0,0 +1,62 @@
+const DEFAULT_OPACITY = 0.95;
+const MIN_OPACITY = 0.1;
+const MAX_OPACITY = 1.0;
+
+// macOS 端进一步增强通透感：同滑块值下更低等效不透明度、降低过重模糊。
+const MAC_OPACITY_FACTOR = 0.20;
+const MAC_BLUR_FACTOR = 1.00;
+const WINDOWS_OPACITY_FACTOR = 0.20;
+const WINDOWS_BLUR_FACTOR = 1.00;
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+export const isMacLikePlatform = (): boolean => {
+ if (typeof navigator === 'undefined') {
+ return false;
+ }
+ const platform = navigator.platform || '';
+ const ua = navigator.userAgent || '';
+ return /(Mac|iPhone|iPad|iPod)/i.test(`${platform} ${ua}`);
+};
+
+export const isWindowsPlatform = (): boolean => {
+ if (typeof navigator === 'undefined') {
+ return false;
+ }
+ const platform = navigator.platform || '';
+ const ua = navigator.userAgent || '';
+ return /(Win|Windows)/i.test(`${platform} ${ua}`);
+};
+
+const getPlatformFactors = () => {
+ if (isMacLikePlatform()) {
+ return { opacity: MAC_OPACITY_FACTOR, blur: MAC_BLUR_FACTOR };
+ }
+ if (isWindowsPlatform()) {
+ return { opacity: WINDOWS_OPACITY_FACTOR, blur: WINDOWS_BLUR_FACTOR };
+ }
+ return undefined;
+};
+
+export const normalizeOpacityForPlatform = (opacity: number | undefined): number => {
+ const raw = clamp(opacity ?? DEFAULT_OPACITY, MIN_OPACITY, MAX_OPACITY);
+ const factors = getPlatformFactors();
+ if (!factors) {
+ return raw;
+ }
+
+ return clamp(MIN_OPACITY + (raw - MIN_OPACITY) * factors.opacity, MIN_OPACITY, MAX_OPACITY);
+};
+
+export const normalizeBlurForPlatform = (blur: number | undefined): number => {
+ const raw = Math.max(0, blur ?? 0);
+ const factors = getPlatformFactors();
+ if (!factors) {
+ return raw;
+ }
+ return Math.round(raw * factors.blur);
+};
+
+export const blurToFilter = (blur: number): string | undefined => {
+ return blur > 0 ? `blur(${blur}px)` : undefined;
+};
diff --git a/internal/app/app.go b/internal/app/app.go
index 3b8c58f..d358c67 100644
--- a/internal/app/app.go
+++ b/internal/app/app.go
@@ -26,9 +26,9 @@ type cachedDatabase struct {
// App struct
type App struct {
- ctx context.Context
- dbCache map[string]cachedDatabase // Cache for DB connections
- mu sync.RWMutex // Mutex for cache access
+ ctx context.Context
+ dbCache map[string]cachedDatabase // Cache for DB connections
+ mu sync.RWMutex // Mutex for cache access
updateMu sync.Mutex
updateState updateState
}
@@ -45,6 +45,7 @@ func NewApp() *App {
func (a *App) Startup(ctx context.Context) {
a.ctx = ctx
logger.Init()
+ applyMacWindowTranslucencyFix()
logger.Infof("应用启动完成")
}
diff --git a/internal/app/window_translucency_darwin.go b/internal/app/window_translucency_darwin.go
new file mode 100644
index 0000000..08ac8bd
--- /dev/null
+++ b/internal/app/window_translucency_darwin.go
@@ -0,0 +1,70 @@
+//go:build darwin
+
+package app
+
+/*
+#cgo CFLAGS: -x objective-c -fblocks
+#cgo LDFLAGS: -framework Cocoa
+#import
+#import
+
+static void gonaviTuneWindowTranslucency(NSWindow *window) {
+ if (window == nil) {
+ return;
+ }
+ CGFloat cornerRadius = 14.0;
+
+ [window setOpaque:NO];
+ [window setBackgroundColor:[NSColor clearColor]];
+ [window setHasShadow:YES];
+ [window setMovableByWindowBackground:YES];
+
+ NSView *contentView = [window contentView];
+ if (contentView == nil) {
+ return;
+ }
+
+ [contentView setWantsLayer:YES];
+ [[contentView layer] setBackgroundColor:[[NSColor clearColor] CGColor]];
+ [[contentView layer] setCornerRadius:cornerRadius];
+ [[contentView layer] setMasksToBounds:YES];
+
+ NSVisualEffectView *effectView = nil;
+ for (NSView *subview in [contentView subviews]) {
+ if ([subview isKindOfClass:[NSVisualEffectView class]]) {
+ effectView = (NSVisualEffectView *)subview;
+ break;
+ }
+ }
+
+ if (effectView == nil) {
+ effectView = [[NSVisualEffectView alloc] initWithFrame:[contentView bounds]];
+ [effectView setAutoresizingMask:NSViewWidthSizable | NSViewHeightSizable];
+ [contentView addSubview:effectView positioned:NSWindowBelow relativeTo:nil];
+ [effectView release];
+ }
+
+ [effectView setMaterial:NSVisualEffectMaterialHUDWindow];
+ [effectView setBlendingMode:NSVisualEffectBlendingModeBehindWindow];
+ [effectView setState:NSVisualEffectStateActive];
+ [effectView setAlphaValue:0.72];
+ [effectView setWantsLayer:YES];
+ [[effectView layer] setCornerRadius:cornerRadius];
+ [[effectView layer] setMasksToBounds:YES];
+}
+
+static void gonaviApplyWindowTranslucencyFix() {
+ for (int i = 0; i < 24; i++) {
+ dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(i * 250 * NSEC_PER_MSEC)), dispatch_get_main_queue(), ^{
+ for (NSWindow *window in [NSApp windows]) {
+ gonaviTuneWindowTranslucency(window);
+ }
+ });
+ }
+}
+*/
+import "C"
+
+func applyMacWindowTranslucencyFix() {
+ C.gonaviApplyWindowTranslucencyFix()
+}
diff --git a/internal/app/window_translucency_stub.go b/internal/app/window_translucency_stub.go
new file mode 100644
index 0000000..5ffe5ef
--- /dev/null
+++ b/internal/app/window_translucency_stub.go
@@ -0,0 +1,5 @@
+//go:build !darwin
+
+package app
+
+func applyMacWindowTranslucencyFix() {}
diff --git a/main.go b/main.go
index ede7f93..44f3cd1 100644
--- a/main.go
+++ b/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/mac"
"github.com/wailsapp/wails/v2/pkg/options/windows"
)
@@ -41,6 +42,10 @@ func main() {
DisableWindowIcon: false,
DisableFramelessWindowDecorations: false,
},
+ Mac: &mac.Options{
+ WebviewIsTransparent: true,
+ WindowIsTranslucent: true,
+ },
})
if err != nil {