feat: 自定义标题栏

components.d.ts

@@ -24,5 +24,6 @@ declare module 'vue' {
     NSelect: typeof import('naive-ui')['NSelect']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NVirtualList: typeof import('naive-ui')['NVirtualList']
+    TitleBar: typeof import('./src/components/TitleBar.vue')['default']
   }
 }

package.json

@@ -13,6 +13,7 @@
     "@phosphor-icons/vue": "^2.2.1",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-os": "^2.3.0",
     "naive-ui": "^2.42.0",
     "pinia": "^3.0.3",
     "unplugin-auto-import": "^19.3.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@tauri-apps/plugin-opener':
         specifier: ^2
         version: 2.4.0
+      '@tauri-apps/plugin-os':
+        specifier: ^2.3.0
+        version: 2.3.0
       naive-ui:
         specifier: ^2.42.0
         version: 2.42.0(vue@3.5.17(typescript@5.6.3))
@@ -705,6 +708,9 @@ packages:
   '@tauri-apps/plugin-opener@2.4.0':
     resolution: {integrity: sha512-43VyN8JJtvKWJY72WI/KNZszTpDpzHULFxQs0CJBIYUdCRowQ6Q1feWTDb979N7nldqSuDOaBupZ6wz2nvuWwQ==}
 
+  '@tauri-apps/plugin-os@2.3.0':
+    resolution: {integrity: sha512-dm3bDsMuUngpIQdJ1jaMkMfyQpHyDcaTIKTFaAMHoKeUd+Is3UHO2uzhElr6ZZkfytIIyQtSVnCWdW2Kc58f3g==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -2527,6 +2533,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.6.0
 
+  '@tauri-apps/plugin-os@2.3.0':
+    dependencies:
+      '@tauri-apps/api': 2.6.0
+
   '@types/estree@1.0.8': {}
 
   '@types/json-schema@7.0.15': {}

src-tauri/Cargo.lock

@@ -290,6 +290,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-opener",
+ "tauri-plugin-os",
  "tauri-specta",
  "tokio",
  "tracing",
@@ -1319,6 +1320,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "gethostname"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc257fdb4038301ce4b9cd1b3b51704509692bb3ff716a410cbd07925d9dae55"
+dependencies = [
+ "rustix",
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.1.16"
@@ -2697,6 +2708,18 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "os_info"
+version = "3.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0e1ac5fde8d43c34139135df8ea9ee9465394b2d8d20f032d38998f64afffc3"
+dependencies = [
+ "log",
+ "plist",
+ "serde",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "overload"
 version = "0.1.1"
@@ -4004,6 +4027,15 @@ dependencies = [
  "syn 2.0.104",
 ]
 
+[[package]]
+name = "sys-locale"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8eab9a99a024a169fe8a903cf9d4a3b3601109bcc13bd9e3c6fff259138626c4"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "system-configuration"
 version = "0.6.1"
@@ -4247,6 +4279,24 @@ dependencies = [
  "zbus",
 ]
 
+[[package]]
+name = "tauri-plugin-os"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05bccb4c6de4299beec5a9b070878a01bce9e2c945aa7a75bcea38bcba4c675d"
+dependencies = [
+ "gethostname",
+ "log",
+ "os_info",
+ "serde",
+ "serde_json",
+ "serialize-to-javascript",
+ "sys-locale",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.12",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "2.7.0"

src-tauri/Cargo.toml

@@ -20,6 +20,7 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 tauri = { version = "2", features = [] }
 tauri-plugin-opener = "2"
+tauri-plugin-os = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 

src-tauri/capabilities/default.json

@@ -2,9 +2,16 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["main"],
+  "windows": [
+    "main"
+  ],
   "permissions": [
     "core:default",
-    "opener:default"
+    "opener:default",
+    "os:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-close"
   ]
 }

src-tauri/src/lib.rs

@@ -75,6 +75,7 @@ pub fn run() {
         .expect("Failed to export typescript bindings");
 
     tauri::Builder::default()
+        .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_opener::init())
         .invoke_handler(builder.invoke_handler())
         .setup(move |app| {

src-tauri/tauri.conf.json

@@ -10,13 +10,6 @@
     "frontendDist": "../dist"
   },
   "app": {
-    "windows": [
-      {
-        "title": "bilibili-video-downloader",
-        "width": 800,
-        "height": 600
-      }
-    ],
     "security": {
       "csp": null
     }

src-tauri/tauri.linux.conf.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "app": {
+    "windows": [
+      {
+        "title": "bilibili-video-downloader",
+        "width": 800,
+        "height": 600,
+        "minWidth": 800,
+        "minHeight": 600,
+        "decorations": false,
+        "theme": "Light"
+      }
+    ]
+  }
+}

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "app": {
+    "windows": [
+      {
+        "title": "bilibili-video-downloader",
+        "width": 800,
+        "height": 600,
+        "minWidth": 800,
+        "minHeight": 600,
+        "hiddenTitle": true,
+        "titleBarStyle": "Overlay",
+        "theme": "Light"
+      }
+    ]
+  }
+}

src-tauri/tauri.windows.conf.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "app": {
+    "windows": [
+      {
+        "title": "bilibili-video-downloader",
+        "width": 800,
+        "height": 600,
+        "minWidth": 800,
+        "minHeight": 600,
+        "decorations": false,
+        "shadow": true,
+        "theme": "Light"
+      }
+    ]
+  }
+}

src/AppContent.vue

@@ -5,6 +5,10 @@ import LogDialog from './dialogs/LogDialog.vue'
 import { PhClockCounterClockwise, PhInfo } from '@phosphor-icons/vue'
 import { commands } from './bindings.ts'
 import AboutDialog from './dialogs/AboutDialog.vue'
+import { platform } from '@tauri-apps/plugin-os'
+import TitleBar from './components/TitleBar.vue'
+
+const currentPlatform = platform()
 
 const store = useStore()
 
@@ -22,7 +26,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="h-screen flex flex-col">
+  <div
+    :class="[
+      'h-screen flex flex-col',
+      {
+        'box-border border border-solid border-gray-3': currentPlatform === 'linux',
+      },
+    ]">
+    <TitleBar />
     <div v-if="store.config !== undefined" class="h-full w-full flex overflow-hidden select-none">
       <div class="flex flex-col box-border p-1 border-r-solid border-r-1 border-r-[#DADADA] bg-[#F9F9F9] flex-shrink-0">
         <n-tooltip placement="right" trigger="hover" :show-arrow="false">

src/components/TitleBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import icon from '../../src-tauri/icons/128x128.png'
+import { PhCopySimple, PhMinus, PhSquare, PhX } from '@phosphor-icons/vue'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { onMounted, ref } from 'vue'
+import { platform } from '@tauri-apps/plugin-os'
+
+const appWindow = getCurrentWindow()
+const windowMaximised = ref<boolean>(false)
+const windowFullscreen = ref<boolean>(false)
+
+const currentPlatform = platform()
+
+const loginDialogShowing = ref<boolean>(false)
+
+onMounted(async () => {
+  windowMaximised.value = await appWindow.isMaximized()
+  windowFullscreen.value = await appWindow.isFullscreen()
+
+  await appWindow.onResized(async () => {
+    windowMaximised.value = await appWindow.isMaximized()
+    windowFullscreen.value = await appWindow.isFullscreen()
+  })
+})
+</script>
+
+<template>
+  <div
+    data-tauri-drag-region
+    class="flex items-center bg-[#F2F2F2] border-b-solid border-b-1 border-b-[#DADADA] h-9 flex-shrink-0 select-none">
+    <div v-if="currentPlatform === 'macos' && !windowFullscreen" class="ml-16" />
+    <img data-tauri-drag-region :src="icon" alt="icon" class="ml-2 mr-2 w-6 h-6" draggable="false" />
+    <span data-tauri-drag-region class="text-base select-none">哔哩哔哩视频下载器</span>
+
+    <div class="ml-auto" />
+
+    <div v-if="currentPlatform !== 'macos'" class="flex items-center select-none">
+      <div
+        class="flex items-center justify-center h-9 w-9 hover:bg-gray/20 cursor-pointer"
+        @click="appWindow.minimize()">
+        <PhMinus size="16" />
+      </div>
+      <div
+        class="flex items-center justify-center h-9 w-9 hover:bg-gray/20 cursor-pointer"
+        @click="appWindow.toggleMaximize()">
+        <PhCopySimple v-if="windowMaximised" size="16" />
+        <PhSquare v-else size="14" />
+      </div>
+      <div
+        class="flex items-center justify-center h-9 w-9 hover:bg-red hover:text-white cursor-pointer"
+        @click="appWindow.close()">
+        <PhX size="16" />
+      </div>
+    </div>
+    <LoginDialog v-model:showing="loginDialogShowing" />
+  </div>
+</template>