窗口外观定制

无边框窗口：decorations 设 false

普通窗口带着系统标题栏和边框。想做完全自定义的界面（比如圆形启动器、沉浸式音乐播放器），第一件事就是去掉这层系统装饰。做法是在窗口配置里把 decorations 设为 false：

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

去掉装饰后，标题栏、最小化/最大化/关闭按钮都没了。窗口变成一块「纯画布」，由你的前端完全掌管外观。代价是：你失去了系统自带的拖拽移动和关闭按钮，需要自己在界面里补上这些交互（见最后一节）。

透明窗口：transparent 加前端透明背景

透明窗口能让窗口背景「看不见」，从而做出毛玻璃、圆角、异形窗口等效果。它需要两端配合：

第一步，配置里开启透明：

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

第二步，前端把页面背景设为透明。光开 transparent 不够——WebView 默认是不透明的白底，必须让 HTML 背景真正透明：

html, body {
  background: transparent;
}

只有两端都设好，才能看到桌面透过来。注意：透明窗口通常也要关掉 decorations，否则透明区域会被标题栏挡住，看不出透明的效果。

窗口居中

让窗口一启动就出现在屏幕正中央，只需一个布尔值：

{
  "app": {
    "windows": [
      {
        "label": "main",
        "center": true
      }
    ]
  }
}

center 为 true 时，你写的 x / y 坐标会被忽略。它简单好用，适合工具类、设置类窗口。多显示器环境下，窗口会居中在「主显示器」，而不是你鼠标所在的屏幕。

阴影 shadow

shadow 控制窗口是否显示系统阴影，默认 true。对带边框的普通窗口，阴影能增强层次感；但对无边框 + 透明的窗口，阴影会留下难看的矩形残影，这时应关掉：

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

自定义标题栏思路

去掉 decorations 后，窗口不能拖、不能关。要恢复这些能力，思路是：用前端画一套假标题栏，再把交互接到 Tauri 的窗口 API 上。

先在前端放一个标题栏区域，并标记可拖拽区：

<div class="titlebar" data-tauri-drag-region>
  <div class="controls">
    <button id="btn-min">—</button>
    <button id="btn-max">▢</button>
    <button id="btn-close">×</button>
  </div>
</div>

data-tauri-drag-region 是 Tauri 的特殊属性：加在元素上，用户拖这个区域就能移动窗口，而不需要你手写鼠标事件。注意它只作用于直接加了这个属性的元素，子元素要单独加，否则点击子元素不会触发拖拽。

样式上，让它吸顶：

.titlebar {
  height: 32px;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  user-select: none;
}

按钮的逻辑用 JS 接到窗口 API：

import { getCurrentWindow } from '@tauri-apps/api/window';

const win = getCurrentWindow();
document.getElementById('btn-min')?.addEventListener('click', () => win.minimize());
document.getElementById('btn-max')?.addEventListener('click', () => win.toggleMaximize());
document.getElementById('btn-close')?.addEventListener('click', () => win.close());

这里 getCurrentWindow() 拿到当前窗口的句柄，minimize / toggleMaximize / close 是 Tauri 提供的窗口方法。注意其余内容要往下挪，别被吸顶的标题栏盖住。

{
  "identifier": "main-capability",
  "windows": ["main"],
  "permissions": [
    "core:window:default",
    "core:window:allow-close",
    "core:window:allow-minimize",
    "core:window:allow-toggle-maximize",
    "core:window:allow-start-dragging"
  ]
}

core:window:allow-start-dragging 正是让 data-tauri-drag-region 生效所需的权限。少了它，拖拽区域不会动，按钮方法也会调用失败。

圆角与异形窗口

无边框 + 透明给了你完全的自由度。最常见的是圆角窗口：前端给根容器加 border-radius 即可，因为系统边框已经不在了。

body {
  background: transparent;
}
#app {
  border-radius: 12px;
  overflow: hidden;
  background: #1e1e2e;
}

要点是 body 透明、真正的背景色放在内层容器上，圆角才不会被方形的 WebView 背景遮住。想做更不规则的形状（比如圆形头像挂件），就需要透明窗口配合前端 clip-path 或 mask，思路一致：让 WebView 背景透明，形状交给前端去画。

小结

本章讲解了窗口外观定制的核心手段：将 decorations 设为 false 去掉系统标题栏与边框，配合 transparent: true 和前端透明背景实现毛玻璃、圆角、异形等效果，用 center 控制居中、shadow 控制阴影，并通过 data-tauri-drag-region 和 Tauri 窗口 API（minimize / toggleMaximize / close）搭建自定义标题栏，同时务必在 capabilities 文件中放行 core:window:* 相关权限。