侧边栏毛玻璃实现

• Electron 窗口层
• 主题变量层

对应系统实现

• macOS 原生毛玻璃：vibrancy: "sidebar"

平台	实现方式
macOS	Electron 原生 vibrancy: "sidebar"
Windows/Linux	透明窗口 + CSS backdrop-filter 降级实现

Electron 窗口层

让系统负责提供真正的窗口级毛玻璃效果。

• vibrancy: "sidebar"
• visualEffectState: "active"
• transparent: true
• backgroundColor: "#00000000"

javascript

const windowConfig: Electron.BrowserWindowConstructorOptions = {
  width: 900,
  height: 670,
  minWidth: 400,
  minHeight: 400,
  show: false,
  resizable: true,
  hasShadow: true,

  ...(isMac
    ? {
        // macOS 原生标题栏隐藏，但保留红绿灯
        titleBarStyle: "hidden",
        trafficLightPosition: MAC_TRAFFIC_LIGHT_POSITION,

        // macOS 原生毛玻璃
        vibrancy: "sidebar",
        visualEffectState: "active",

        // 允许渲染层透出系统材质
        transparent: true,
        backgroundColor: "#00000000",
      }
    : {
        // Windows/Linux 使用透明无边框窗口
        frame: false,
        transparent: true,
      }),
};

渲染层处理

• 渲染层还需要配合透明背景和 CSS 模糊，否则 Electron 原生材质会被页面的不透明背景遮住：

css

body:has(.settings-sidebar),
.app-window-surface:has(.settings-sidebar) {
  background-color: transparent !important;
}

.settings-sidebar {
  background-color: color-mix(...);
  -webkit-backdrop-filter: blur(32px) saturate(1.08);
  backdrop-filter: blur(32px) saturate(1.08);
}

毛玻璃性能问题

毛玻璃越大、越透明、越模糊、背后内容变化越频繁，性能成本越高。

毛玻璃本质上不是简单改变颜色，而是需要先抓取元素背后的画面，对背后画面进行模糊计算

• blur(32px/36px) 模糊半径越大，计算量越高。
• 侧边栏面积较大，意味着需要处理更多像素。
• 文件树滚动时，背景内容不断变化，会触发重新合成。
• 半透明窗口需要额外的 GPU 图层合成。
• Electron 透明窗口还会增加窗口级别的合成成本。
• 多层嵌套毛玻璃会导致重复模糊，性能下降更明显。