應用程式的視窗是使用者與軟體互動的第一個接觸點，其外觀和體驗直接影響了第一印象。一個精心設計的視窗不僅能提升美感，更能展現應用的專業度。今天，我們將探討如何透過 Tauri 的設定，從基礎配置到無邊框設計，來客製化你的應用程式門面。

一切的起點：tauri.conf.json

Tauri 應用的核心設定都集中在 src-tauri/tauri.conf.json 檔案中。其中，tauri.windows 陣列是我們定義應用程式主視窗（以及其他靜態視窗）外觀與行為的地方。

一個基礎的視窗設定如下：

{
  "tauri": {
    "windows": [
      {
        "label": "main",
        "title": "用 Tauri 打造你的應用程式",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ]
  }
}

在這裡，我們可以定義視窗的標籤 (label)、標題 (title)、初始尺寸 (width/height) 以及是否可調整大小 (resizable) 等多種屬性。

詳細的設定可以參考官方文件

現代感設計：無邊框視窗與自訂拖曳

為了追求更具現代感和一體性的設計，許多應用選擇了無邊框視窗。在 Tauri 中實現這一點非常簡單，只需將 decorations 設定為 false。

然而，移除了原生邊框後，使用者也失去了拖曳視窗的預設方法。為此，Tauri 提供了一個巧妙的解決方案：data-tauri-drag-region 屬性。我們可以將這個屬性添加到任何前端 HTML 元素上，Tauri 就會將該區域視為可供使用者點擊並拖曳整個視窗的控制柄。

<div class="custom-titlebar" data-tauri-drag-region>
  <span>我的應用程式</span>
</div>

記得在 capabilities 的 permissions 中添加 "core:window:allow-start-dragging"

這樣一來，我們就能完全用前端技術（HTML/CSS）來打造獨一無二的標題列，同時保留了核心的視窗拖曳功能。

應用實例：打造一個圓形的 Splash Screen

Splash Screen（啟動畫面）是提升應用啟動體驗的絕佳方式。我們可以結合無邊框與透明視窗的特性，創造出引人注目的啟動效果。

首先，在 tauri.conf.json 中加上一個 splash 視窗，並讓主視窗的 visible 設為 false：

{
  "windows": [
    {
      "label": "main",
      "title": "我的第一個 Tauri 應用",
      "url": "/main",
      "width": 800,
      "height": 600,
      "resizable": true,
      "fullscreen": false,
      "decorations": false,
      "visible": false
    },
    {
      "label": "splashscreen",
      "title": "我的第一個 Splashscreen",
      "url": "/splash",
      "width": 450,
      "height": 300,
      "center": true,
      "resizable": false,
      "decorations": false,
      "transparent": true,
      "alwaysOnTop": true
    }
  ],
}

記得要再安裝並設定 Vue Router

接著，在前端 splash 頁面中，等待合適時機，取得 main 視窗並讓它顯示出來：

import { onMounted, ref } from "vue";
import { Window, getCurrentWindow } from "@tauri-apps/api/window";
import { useRouter } from "vue-router";

const progress = ref(0);
const router = useRouter();

onMounted(async () => {
  // 模擬載入進度
  const interval = setInterval(() => {
    progress.value += 1;
    if (progress.value >= 100) {
      clearInterval(interval);
    }
  }, 100); // 10 秒內從 0% 到 100%

  // 10 秒後關閉 splash screen 並顯示 main window
  setTimeout(async () => {
    try {
      // 嘗試獲取並顯示 main window
      const mainWindow = new Window("main");
      await mainWindow.show();
      await mainWindow.setFocus();
      
      // 等待一下確保 main window 完全顯示後再關閉 splash
      setTimeout(async () => {
        try {
          const currentWindow = getCurrentWindow();
          await currentWindow.close();
        } catch (closeError) {
          console.error("關閉 splash screen 時發生錯誤:", closeError);
        }
      }, 100);
      
    } catch (error) {
      console.error("切換 window 時發生錯誤:", error);
      // 如果失敗，使用路由跳轉作為備用方案
      router.push("/main");
    }
  }, 10000); // 10 秒
});

(這是影片)

透過這些簡單的設定與前端技巧，我們不僅能客製化視窗的基礎樣式，更能創造出如 Splash Screen 這般完全自訂形狀的特殊視窗，大幅提升應用的視覺吸引力。

小結

今天我們深入了解了 Tauri 視窗管理的基礎概念，從最基本的 tauri.conf.json 設定開始，學會了如何：

1. 設定基礎視窗屬性：包括尺寸、標題、是否可調整大小等基本設定
2. 實現無邊框設計：透過 decorations: false 移除系統預設邊框，並使用 data-tauri-drag-region 屬性建立自訂拖曳區域
3. 建立 Splash Screen：結合透明視窗和無邊框特性，打造專業的啟動畫面體驗

這些技巧讓我們能夠脫離系統預設的視窗樣式限制，用前端技術打造出具有個人風格的應用程式界面。下一篇文章，我們將進一步探討多視窗管理的進階技巧，包括視窗間的通訊與動態視窗建立。