GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-06-09 16:09:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

🔧 fix(appearance): 优化 Windows 透明效果体验并调整透明度滑块灵敏度

Browse Source 
- Windows 平台限制：隐藏模糊滑块，显示系统 Acrylic 效果说明
- 透明度因子调整：Windows 从 0.20 调整为 0.70，变化更平滑
- 透明度因子调整：macOS 从 0.20 调整为 0.60，变化更平滑
- 用户体验：修复滑块从 100% 拉到 95% 时透明度变化过于剧烈的问题
This commit is contained in:
杨国锋
2026-02-08 14:00:28 +08:00
parent 72811092b4
commit 83ad3b09d9
2 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/App.tsx
View File

@@ -10,7 +10,7 @@ import DataSyncModal from './components/DataSyncModal';
import LogPanel from './components/LogPanel';
import { useStore } from './store';
import { SavedConnection } from './types';
import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform } from './utils/appearance';
import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform } from './utils/appearance';
import './App.css';
const { Sider, Content } = Layout;
@@ -814,19 +814,27 @@ function App() {
</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>
{isWindowsPlatform() ? (
<div style={{ fontSize: 12, color: '#888' }}>
Windows 使用系统 Acrylic 效果，模糊程度由系统控制
</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>

6
frontend/src/utils/appearance.ts
View File

@@ -2,10 +2,10 @@ const DEFAULT_OPACITY = 1.0;
const MIN_OPACITY = 0.1;
const MAX_OPACITY = 1.0;
// macOS 端进一步增强通透感：同滑块值下更低等效不透明度、降低过重模糊。
const MAC_OPACITY_FACTOR = 0.20;
// 平台透明度映射因子：值越大，滑块变化越平滑（1.0 = 线性映射）
const MAC_OPACITY_FACTOR = 0.60;
const MAC_BLUR_FACTOR = 1.00;
const WINDOWS_OPACITY_FACTOR = 0.20;
const WINDOWS_OPACITY_FACTOR = 0.70;
const WINDOWS_BLUR_FACTOR = 1.00;
const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));