125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
<template>
|
|
<header class="window-titlebar" :class="{ 'window-titlebar--macos': isMacos }">
|
|
<div class="window-titlebar__drag" data-tauri-drag-region>
|
|
<span class="window-titlebar__title">YwYMusic</span>
|
|
</div>
|
|
|
|
<div class="window-titlebar__controls">
|
|
<n-button
|
|
class="window-titlebar__control"
|
|
quaternary
|
|
:bordered="false"
|
|
aria-label="最小化"
|
|
@click.stop="minimizeWindow"
|
|
>
|
|
<template #icon>
|
|
<n-icon :component="MinimizeOutlined" :size="18" />
|
|
</template>
|
|
</n-button>
|
|
|
|
<n-button
|
|
class="window-titlebar__control window-titlebar__control--close"
|
|
quaternary
|
|
:bordered="false"
|
|
aria-label="关闭"
|
|
@click.stop="closeWindow"
|
|
>
|
|
<template #icon>
|
|
<n-icon :component="CloseOutlined" :size="18" />
|
|
</template>
|
|
</n-button>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getCurrentWindow } from "@tauri-apps/api/window"
|
|
import { NButton, NIcon } from "naive-ui"
|
|
import { CloseOutlined, MinimizeOutlined } from "@vicons/material"
|
|
|
|
const appWindow = getCurrentWindow()
|
|
const isMacos = navigator.userAgent.includes("Mac OS X")
|
|
|
|
function minimizeWindow() {
|
|
void appWindow.minimize()
|
|
}
|
|
|
|
function closeWindow() {
|
|
void appWindow.close()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.window-titlebar {
|
|
position: relative;
|
|
z-index: 4;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
height: var(--titlebar-height);
|
|
overflow: hidden;
|
|
user-select: none;
|
|
background: rgba(234, 220, 200, 0.86);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.window-titlebar__drag {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: 100%;
|
|
gap: 8px;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.window-titlebar__title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--app-text-secondary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.window-titlebar__controls {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.window-titlebar__control {
|
|
width: 46px;
|
|
height: var(--titlebar-height);
|
|
--n-border-radius: 0 !important;
|
|
--n-color-hover: rgba(180, 83, 42, 0.1) !important;
|
|
--n-color-pressed: rgba(180, 83, 42, 0.16) !important;
|
|
--n-text-color: var(--app-text-secondary) !important;
|
|
--n-text-color-hover: var(--app-text) !important;
|
|
--n-text-color-pressed: var(--app-text) !important;
|
|
}
|
|
|
|
.window-titlebar__control--close {
|
|
--n-color-hover: #d83b32 !important;
|
|
--n-color-pressed: #c43129 !important;
|
|
--n-text-color-hover: #fffaf0 !important;
|
|
--n-text-color-pressed: #fffaf0 !important;
|
|
}
|
|
|
|
.window-titlebar--macos {
|
|
background: rgba(244, 237, 223, 0.72);
|
|
}
|
|
|
|
.window-titlebar--macos .window-titlebar__drag {
|
|
padding-left: 78px;
|
|
}
|
|
|
|
.window-titlebar--macos .window-titlebar__controls,
|
|
.window-titlebar--macos {
|
|
display: none;
|
|
}
|
|
|
|
.window-titlebar--macos .window-titlebar__title {
|
|
color: var(--app-text-muted);
|
|
}
|
|
</style>
|