9.3 特殊窗口样式

常规窗口四四方方、带标题栏和控制按钮，已经能满足多数场景。但如果你想让应用看起来更现代、更像一个“小组件”，或者需要融入桌面壁纸，Tauri 也支持无边框、透明、异形等特殊样式，且配置并不复杂。

1. 无边框窗口与自定义拖拽区

通过 tauri.conf.json 中的窗口配置，可以禁用系统自带的标题栏：

{
  "windows": [
    {
      "label": "main",
      "decorations": false
    }
  ]
}

窗口将不再有边框和标题栏，但用户也失去了拖拽移动的能力。解决办法是让前端指定一个自定义拖拽区域，CSS 只需一行：

.titlebar {
  -webkit-app-region: drag;
}

将该样式赋予顶部标题栏区域，用户就能像原生窗口一样拖动。注意：切勿在可点击元素上设置该属性，否则会导致点击失效；可在标题栏内部的关闭、最小化按钮上设置 no-drag 来恢复点击。

2. 透明窗口与毛玻璃背景

在 macOS 和 Windows 11 上，可以让窗口整体或局部透明，并叠加模糊效果。

配置文件：

{
  "windows": [
    {
      "label": "main",
      "transparent": true,
      "decorations": false
    }
  ]
}

然后在 HTML 中设置背景透明：

body {
  background: transparent;
}

若需要毛玻璃效果，可使用 CSS 的 backdrop-filter（需 WebView 支持）：

.blur-panel {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

实际表现：透明窗口在 macOS 上效果最佳，Windows 则需要 WebView2 较新版本，且对性能有一定开销。适合做悬浮闹钟、天气小组件、截图工具等。

3. 圆角与阴影

无边框窗口默认没有圆角和阴影，显得生硬。可通过 CSS 给 <body> 设置 border-radius，但光靠 CSS 无法让窗口形状跟随圆角裁剪。需要启用平台层透明：

macOS：窗口会自适应圆角，并保留原生阴影。
Windows：必须使用 transparent: true + 自定义阴影（CSS box-shadow），或启用 Tauri 2 的实验性 WS_EX_LAYERED 窗口（较复杂）。

一个更简单的方法是通过 Tauri 窗口装饰阴影插件（如 window-shadows），可自动为无边框窗口添加 macOS 或 Windows 原生阴影。

配置示例（Tauri 2 + 插件）：

use tauri::Manager;
use window_shadows::set_shadow;

fn main() {
    tauri::Builder::default()
        .setup(|app| {
            let window = app.get_window("main").unwrap();
            set_shadow(&window, true).unwrap();
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

4. 异形窗口（镂空或非矩形）

可以通过先设置窗口透明，再在前端绘制特定形状实现。比如一个圆形时钟：

body {
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
}

但窗口的点击区域仍是矩形，需要利用 Tauri 2 的 set_ignore_cursor_events 让鼠标事件穿透透明区域。不过这样会破坏交互。更终极的方案是使用 Tauri 的 window.set_shape 或外部依赖（如 skia-safe）生成掩码，但这属于高级用法，普通应用建议仅在透明矩形内通过 CSS 模拟异形，足够应对大多数小组件需求。

5. 始终置顶与点击穿透

工具类应用常需要窗口浮于其他窗口之上，且部分区域允许点击穿透到下层窗口。

置顶：在窗口配置中添加 "alwaysOnTop": true。
穿透：通过 Rust 命令动态控制：

  #[tauri::command]
  fn set_ignore_cursor_events(window: tauri::Window, ignore: bool) {
      window.set_ignore_cursor_events(ignore).unwrap();
  }

当 ignore = true 时，鼠标事件将完全不被窗口捕获，适用于桌面小部件或画板类应用。

注意事项：

透明和无边框窗口在不同平台和 WebView 版本上表现可能不一致，务必在目标系统（尤其是 Windows 各种缩放比下）充分测试。
过度使用透明和模糊效果会拖累渲染性能，低配显卡的机器上可能出现掉帧。
如果必须用 transparent: true，记得为前端提供一个可拖拽区域和一个关闭方式，否则用户会被卡住。

特殊窗口样式并不是炫技，而是合理运用后能显著提升工具型应用的沉浸感和效率。在 Tauri 里，只需少量配置和 CSS 就能实现过去需要用 C++ 写的复杂效果。