starmusic-pc

starmusic-pc/ frontend/src/components/AppTitleBar.vue 6.2 KB · 280 行原始文件
F fqh feat: Star Music PC v1.3.0 首次提交（Wails v2 桌面端） 2 天前
1<script setup>
2/**
* AppTitleBar — 无边框窗口标题栏
*
* Wails 的 Frameless 窗口通过 CSS 变量 --wails-draggable 指定拖拽区域：
* 标题栏本体为 drag，所有可点击控件必须显式声明 no-drag，否则点击会被拖拽吞掉。
*/
8import { ref, onMounted, onBeforeUnmount } from 'vue'
9import Icon from './Icon.vue'
10import { miniMode, currentNav } from '../composables/useShell.js'
11import { toast, toastErr } from '../composables/useFeedback.js'
12import {
windowMinimise,
windowToggleMaximise,
windowClose,
windowIsMaximised,
setMiniMode,
setAlwaysOnTop,
hasNative,
20} from '../uni/native.js'
21
22const maximised = ref(false)
23const pinned = ref(false)
24const busy = ref(false)
25
26const syncMaximised = async () => {
if (!hasNative()) return
try {
  maximised.value = await windowIsMaximised()
} catch (e) {
  /* 忽略 */
}
33}
34
35let resizeTimer = null
36const onWindowResize = () => {
if (resizeTimer) clearTimeout(resizeTimer)
resizeTimer = setTimeout(syncMaximised, 160)
39}
40
41onMounted(() => {
syncMaximised()
window.addEventListener('resize', onWindowResize)
44})
45
46onBeforeUnmount(() => {
window.removeEventListener('resize', onWindowResize)
if (resizeTimer) clearTimeout(resizeTimer)
49})
50
51const handleMinimise = () => windowMinimise()
52const handleMaximise = async () => {
await windowToggleMaximise()
setTimeout(syncMaximised, 60)
55}
56const handleClose = () => windowClose()
57
58const handlePin = async () => {
pinned.value = !pinned.value
await setAlwaysOnTop(pinned.value)
toast(pinned.value ? '窗口已置顶' : '已取消置顶', 'none', 1400)
62}
63
64const handleMini = async () => {
if (busy.value) return
busy.value = true
try {
  const on = await setMiniMode(!miniMode.value)
  miniMode.value = on
  if (on) toast('已进入迷你模式，点击唱片图标可还原', 'none', 2600)
} catch (e) {
  toastErr('切换迷你模式失败')
} finally {
  busy.value = false
}
76}
77</script>
78
79<template>
<header class="titlebar">
  <!-- 品牌 -->
  <div class="brand">
    <span class="mark">
      <Icon name="music2" :size="15" :width="2" />
    </span>
    <span class="brand-text">
      <b>星音乐</b>
      <em>star-music</em>
    </span>
  </div>
91
  <!-- 拖拽区（同时承载当前视图标题，视觉上更饱满） -->
  <div class="drag-area">
    <Transition name="crumb" mode="out-in">
      <span :key="currentNav.key" class="crumb">
        <span class="crumb-dot" />
        {{ currentNav.label }}
      </span>
    </Transition>
  </div>
101
  <!-- 窗口控件 -->
  <div class="win-actions no-drag">
    <button
      class="win-btn"
      :class="{ 'is-on': pinned }"
      :title="pinned ? '取消置顶' : '窗口置顶'"
      @click="handlePin"
    >
      <Icon name="pin" :size="15" />
    </button>
    <button
      class="win-btn"
      :class="{ 'is-on': miniMode }"
      :title="miniMode ? '退出迷你模式' : '迷你播放器'"
      @click="handleMini"
    >
      <Icon name="miniplayer" :size="15" />
    </button>
    <span class="divider" />
    <button class="win-btn" title="最小化" @click="handleMinimise">
      <Icon name="minimize-win" :size="15" />
    </button>
    <button class="win-btn" :title="maximised ? '还原' : '最大化'" @click="handleMaximise">
      <Icon :name="maximised ? 'restore-win' : 'maximize-win'" :size="14" />
    </button>
    <button class="win-btn is-close" title="关闭" @click="handleClose">
      <Icon name="close" :size="15" />
    </button>
  </div>
</header>
132</template>
133
134<style scoped>
titlebar {
--wails-draggable: drag;
display: flex;
align-items: center;
height: var(--h-titlebar);
padding-left: 14px;
flex: none;
background: var(--surface-1);
border-bottom: 1px solid var(--line-1);
position: relative;
z-index: 30;
146}
147
148/* 顶部一条细腻的主题色渐变，弱化"系统窗口"感 */
titlebar::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(90deg, var(--theme-color), rgba(var(--theme-color-rgb), 0.15) 46%, transparent);
opacity: 0.9;
158}
159
brand {
display: flex;
align-items: center;
gap: 9px;
flex: none;
165}
166
mark {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
color: #fff;
background: linear-gradient(135deg, var(--theme-color), var(--theme-color-dark));
box-shadow: 0 3px 10px rgba(var(--theme-color-rgb), 0.36);
176}
177
brand-text {
display: flex;
align-items: baseline;
gap: 6px;
182}
183
brand-text b {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--text-1);
189}
190
brand-text em {
font-style: normal;
font-size: 10.5px;
letter-spacing: 0.6px;
color: var(--text-5);
text-transform: uppercase;
197}
198
drag-area {
flex: 1;
min-width: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
206}
207
crumb {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-4);
letter-spacing: 0.3px;
215}
216
crumb-dot {
width: 5px;
height: 5px;
border-radius: var(--r-full);
background: var(--theme-color);
box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), 0.16);
223}
224
crumb-enter-active,
crumb-leave-active {
transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
228}
229
crumb-enter-from {
opacity: 0;
transform: translateY(6px);
233}
234
crumb-leave-to {
opacity: 0;
transform: translateY(-6px);
238}
239
win-actions {
--wails-draggable: no-drag;
display: flex;
align-items: center;
gap: 2px;
padding-right: 6px;
flex: none;
247}
248
win-btn {
display: grid;
place-items: center;
width: 34px;
height: 30px;
border-radius: var(--r-sm);
color: var(--text-3);
transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
257}
258
win-btn:hover {
background: var(--surface-3);
color: var(--text-1);
262}
263
win-btn.is-on {
color: var(--theme-color);
background: var(--theme-color-soft);
267}
268
win-btn.is-close:hover {
background: var(--color-danger);
color: #fff;
272}
273
divider {
width: 1px;
height: 16px;
margin: 0 5px;
background: var(--line-2);
279}
280</style>