feat: 自定义标题栏

This commit is contained in:
lanyeeee
2025-08-05 05:49:12 +08:00
parent 840776f3e3
commit 003c50ba13
13 changed files with 193 additions and 11 deletions
+1
View File
@@ -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']
}
}
+1
View File
@@ -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",
+10
View File
@@ -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': {}
+50
View File
@@ -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"
+1
View File
@@ -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"
+10 -3
View File
@@ -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"
]
}
}
+1
View File
@@ -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| {
-7
View File
@@ -10,13 +10,6 @@
"frontendDist": "../dist"
},
"app": {
"windows": [
{
"title": "bilibili-video-downloader",
"width": 800,
"height": 600
}
],
"security": {
"csp": null
}
+16
View File
@@ -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"
}
]
}
}
+17
View File
@@ -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"
}
]
}
}
+17
View File
@@ -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"
}
]
}
}
+12 -1
View File
@@ -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">
+57
View File
@@ -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>