Merge pull request #570 from H-Chris233/fix/linux-frosted-glass-553

fix(linux): fallback from backdrop-filter when WEBKIT_DISABLE_COMPOSITING_MODE=1

openless-all/app/src-tauri/src/commands.rs

@@ -3523,6 +3523,12 @@ pub async fn github_device_flow_poll(
     Ok(GithubDevicePollResult::Error { message: msg })
 }
 
+#[tauri::command]
+pub fn is_no_compositing_mode() -> bool {
+    // Linux WebKitGTK: WEBKIT_DISABLE_COMPOSITING_MODE=1 时 backdrop-filter 不可用
+    std::env::var("WEBKIT_DISABLE_COMPOSITING_MODE").as_deref() == Ok("1")
+}
+
 #[cfg(test)]
 mod tests {
     use super::{

openless-all/app/src-tauri/src/lib.rs

@@ -465,6 +465,7 @@ pub fn run() {
             #[cfg(target_os = "windows")]
             commands::sherpa_onnx_asr_reveal_model_dir,
             commands::export_error_log,
+            commands::is_no_compositing_mode,
             restart_app,
         ])
         .build(tauri::generate_context!())

openless-all/app/src/App.tsx

@@ -17,6 +17,7 @@ import {
   windowMouseHotkeyCode,
 } from './lib/windowHotkeyFallback';
 import { QaPanel } from './pages/QaPanel';
+import { invoke } from '@tauri-apps/api/core';
 import { HotkeySettingsProvider } from './state/HotkeySettingsContext';
 
 interface AppProps {
@@ -169,6 +170,18 @@ export function App({ isCapsule, isQa, forcedOs }: AppProps) {
     };
   }, [os]);
 
+  // Linux: 检测 WEBKIT_DISABLE_COMPOSITING_MODE → 禁用 backdrop-filter fallback
+  useEffect(() => {
+    if (!isTauri) return;
+    invoke<boolean>('is_no_compositing_mode').then((val) => {
+      if (val) {
+        document.documentElement.dataset.olNoCompositing = 'true';
+      }
+    }).catch((err) => {
+      console.warn('[startup] is_no_compositing_mode failed', err);
+    });
+  }, []);
+
   if (gate === 'checking') {
     return <StartupShell />;
   }

openless-all/app/src/components/FloatingShell.tsx

@@ -324,6 +324,7 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
             一起坐在 WindowChrome 的磨砂底板上，整体一块连续玻璃。 */}
         <div style={{ flex: 1, minWidth: 0, padding: '4px 8px 6px 0', display: 'flex' }}>
           <main
+            className="ol-console-main"
             style={{
               flex: 1, minWidth: 0,
               overflow: 'hidden',

openless-all/app/src/components/WindowChrome.tsx

@@ -40,6 +40,9 @@ export function WindowChrome({
   // 三个平台共用半透明玻璃 background + backdropFilter。
   // macOS: NSVisualEffectView 提供材质；Windows: Tauri apply_mica 提供 Mica；
   // Linux: decorations:false 后 CSS 磨砂玻璃自成背景。
+  //
+  // 注意：三层渐变的参数与 global.css 中 [data-ol-no-compositing] .ol-winchrome
+  // 的回退 background 同步（只 opacity 从 0.92 提到 0.96）。改这里时请同步更新 CSS。
   const background = `
     radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
     radial-gradient(100% 70% at 100% 100%, rgba(37,99,235,0.07) 0%, rgba(37,99,235,0) 55%),
@@ -48,6 +51,7 @@ export function WindowChrome({
 
   return (
     <div
+      className="ol-winchrome"
       style={{
         '--ol-window-shell-radius': `${shellRadius}px`,
         '--ol-window-console-radius': `${consoleRadius}px`,
@@ -148,6 +152,7 @@ function LinuxTitlebar() {
   return (
     <div
       data-tauri-drag-region
+      className="ol-linux-titlebar"
       style={{
         height: LINUX_TITLEBAR_HEIGHT,
         flexShrink: 0,

openless-all/app/src/styles/global.css

@@ -163,3 +163,53 @@ a { color: inherit; text-decoration: none; }
   opacity: 0.32;
   pointer-events: none;
 }
+
+/* ── Linux no-compositing fallback ──────────────────────────────────────
+   WEBKIT_DISABLE_COMPOSITING_MODE=1 时 backdrop-filter 不可用，用噪点纹理
+   替代磨砂效果。data-ol-no-compositing 由 App.tsx 在初始化时设置。
+
+   !important 是因为三处目标的 backdrop-filter / background 均为 inline style
+   （WindowChrome.tsx / FloatingShell.tsx 的 style={...}），CSS class 必须
+   用 !important 才能覆盖。 */
+
+[data-ol-no-compositing] .ol-winchrome {
+  position: relative;
+  isolation: isolate;
+  /* !important 覆盖 WindowChrome.tsx inline backdropFilter */
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  /* 提高透明梯度不透明度，补偿缺少模糊的视觉深度
+     注意：此三层的渐变参数与 WindowChrome.tsx 的 inline background 同步，
+     改动那边时请同步更新这里。 */
+  background:
+    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
+    radial-gradient(100% 70% at 100% 100%, rgba(37,99,235,0.07) 0%, rgba(37,99,235,0) 55%),
+    linear-gradient(180deg, rgba(245,245,247,0.96) 0%, rgba(232,232,236,0.96) 100%) !important;
+}
+
+[data-ol-no-compositing] .ol-winchrome::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  /* 灰阶噪点颗粒，低 opacity 模拟磨砂质感 */
+  background-image: var(--ol-frost-grain);
+  background-size: 100px 100px;
+  opacity: 0.20;
+  pointer-events: none;
+}
+
+[data-ol-no-compositing] .ol-console-main {
+  /* !important 覆盖 FloatingShell.tsx inline backdropFilter */
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  background: rgba(255, 255, 255, 0.80) !important;
+}
+
+[data-ol-no-compositing] .ol-linux-titlebar {
+  /* !important 覆盖 WindowChrome.tsx LinuxTitlebar inline backdropFilter */
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  background: rgba(245, 245, 247, 0.95) !important;
+}