feat: 修改标题栏为内嵌式标题栏

app/main.ts

@@ -1,9 +1,9 @@
 import path from 'node:path'
 import process from 'node:process'
 import { ElectronAdapter } from '@nailyjs/electron'
-import { app, BrowserWindow, Menu } from 'electron'
+import { app, BrowserWindow, ipcMain, Menu } from 'electron'
 import { app as rpc } from '../backend/main'
-import { version } from '../package.json'
+import { author, productName, version } from '../package.json'
 
 let __dirname: string = globalThis.__dirname
 if (!__dirname)
@@ -14,15 +14,21 @@ app.whenReady().then(async () => {
     width: 1200,
     height: 800,
     minWidth: 400,
+    frame: false,
     webPreferences: {
       preload: path.resolve(decodeURIComponent(__dirname), './preload.cjs'),
     },
   })
 
+  ipcMain.on('mld:close-window', () => win.close())
+  ipcMain.on('mld:minimize-window', () => win.minimize())
+  ipcMain.on('mld:maximize-window', () => win.maximize())
+  ipcMain.handle('mld:get-platform', () => process.platform)
+
   app.setAboutPanelOptions({
-    applicationName: '网易云音乐下崽器',
+    applicationName: productName,
     applicationVersion: version,
-    authors: ['Naily Zero <zero@naily.cc> (https://naily.cc)'],
+    authors: [author],
     version,
   })
 
@@ -61,15 +67,14 @@ app.whenReady().then(async () => {
     ]),
   )
 
+  // 设置naily后端适配器为 Electron
   await rpc.setBackendAdapter(ElectronAdapter)
     .getRpcMethodExecutor()
     .setBackendAdapter(rpc.getBackendAdapter() as ElectronAdapter)
     .setup()
 
-  if (process.env.VITE_DEV_SERVER_URL) {
+  if (process.env.VITE_DEV_SERVER_URL)
     win.loadURL(process.env.VITE_DEV_SERVER_URL)
-  }
-  else {
+  else
     win.loadFile(path.join(__dirname, '../dist/frontend/index.html'))
-  }
 })

app/preload.ts

@@ -5,6 +5,26 @@ const request: InvokeFn = (channel: string, ...args: any[]) => {
   return electron.ipcRenderer.invoke(channel, ...args)
 }
 
+function closeWindow() {
+  electron.ipcRenderer.send('mld:close-window')
+}
+
+function minimizeWindow() {
+  electron.ipcRenderer.send('mld:minimize-window')
+}
+
+function maximizeWindow() {
+  electron.ipcRenderer.send('mld:maximize-window')
+}
+
+function getPlatform(): Promise<NodeJS.Platform> {
+  return electron.ipcRenderer.invoke('mld:get-platform')
+}
+
 electron.contextBridge.exposeInMainWorld('electron' as Exclude<keyof Window, number>, {
   request,
+  closeWindow,
+  minimizeWindow,
+  maximizeWindow,
+  getPlatform,
 } as GlobalElectron)

frontend/components/default-header.vue

@@ -5,8 +5,11 @@ const { t } = useI18n()
 const { y } = useWindowScroll()
 const { width: windowWidth } = useWindowSize()
 const { toggleLocales } = useToggleLocale()
+const { isElectron, platform } = useEnvironment()
 const route = useRoute()
 
+const headerRef = ref<HTMLElement | null>(null)
+
 interface NavItem {
   icon: string
   text: string
@@ -21,12 +24,33 @@ const nav = computed((): NavItem[] => ([
 ]))
 const currentLocation = computed(() => nav.value.find(item => item.to === route.name))
 
+const electronOperations = computed(() => isElectron.value
+  ? [
+      {
+        icon: 'i-ph-arrows-in-simple',
+        text: t('common.minimize'),
+        onClick: () => window.electron.minimizeWindow(),
+      },
+      {
+        icon: 'i-ph-arrows-out-simple',
+        text: t('common.maximize'),
+        onClick: () => window.electron.maximizeWindow(),
+      },
+      {
+        icon: 'i-ph-sign-out',
+        text: t('common.exit'),
+        onClick: () => window.electron.closeWindow(),
+      },
+    ]
+  : [])
+
 const leftButton = computed(() => [
   {
     icon: 'i-ph-music-note-duotone',
     text: t('nav.music-player'),
     onClick: () => void 0,
   },
+  ...(platform.value === 'darwin' ? electronOperations.value : []),
 ])
 const rightButton = computed(() => [
   {
@@ -39,15 +63,17 @@ const rightButton = computed(() => [
     text: t('nav.switch-language'),
     onClick: () => toggleLocales(),
   },
+  ...(platform.value !== 'darwin' ? electronOperations.value : []),
 ])
 </script>
 
 <template>
-  <header v-if="windowWidth >= 768" :class="`${y > 50 ? 'bg-white/80 dark:bg-black/80' : ''} fixed-header`">
-    <nav flex="~ items-center justify-center gap-2">
+  <header v-if="windowWidth >= 768" ref="headerRef" :class="`${y > 50 ? 'bg-white/80 dark:bg-black/80' : ''} fixed-header`">
+    <!-- app-drag 拖的就是nav元素，其他元素如果覆盖在nav元素上必须要设置pointer-events-none透传出nav出来 -->
+    <nav flex="~ items-center justify-center gap-2" class="app-drag pointer-events-none">
       <button
         v-for="(item, index) in nav" :key="index" transition-all btn p3 font-size-4 scale="active:95 hover:101"
-        :class="`hover:bg-gray/20 active:bg-gray/15 ${item.to === currentLocation?.to ? 'bg-gray/10' : ''}`"
+        :class="`hover:bg-gray/20 active:bg-gray/15 pointer-events-auto! relative z-3 app-no-drag ${item.to === currentLocation?.to ? 'bg-gray/10' : ''}`"
         flex="~ items-center gap-1" @click="$router.push(item.to)"
       >
         <div :class="item.icon" text-size-lg />
@@ -57,16 +83,19 @@ const rightButton = computed(() => [
       </button>
     </nav>
 
-    <div px="3 md:6 lg:14" absolute pointer-events-none size-full flex="~ items-center justify-between" class="top-0">
+    <div
+      px="3 md:6 lg:14" absolute pointer-events-none size-full
+      flex="~ items-center justify-between" class="top-0 pointer-events-none z--1"
+    >
       <!-- Left buttons -->
-      <div flex="~ gap-4">
+      <div flex="~ gap-1 relative z-1">
         <NTooltip v-for="(item, index) in leftButton" :key="index">
           <div select-none>
             {{ item.text }}
           </div>
           <template #trigger>
             <button
-              class="pointer-events-auto! hover:bg-gray/20 active:bg-gray/15" rounded-full transition-all btn
+              class="pointer-events-auto! app-no-drag hover:bg-gray/20 active:bg-gray/15" rounded-full transition-all btn
               p="2.5" font-size-4 @click="item.onClick"
             >
               <div :class="item.icon" />
@@ -76,14 +105,14 @@ const rightButton = computed(() => [
       </div>
 
       <!-- Right buttons -->
-      <div flex="~ gap-1">
+      <div flex="~ gap-1 relative z-1">
         <NTooltip v-for="(item, index) in rightButton" :key="index">
           <div select-none>
             {{ item.text }}
           </div>
           <template #trigger>
             <button
-              class="pointer-events-auto! hover:bg-gray/20 active:bg-gray/15"
+              class="pointer-events-auto! app-no-drag hover:bg-gray/20 active:bg-gray/15"
               rounded-full transition-all btn p="2.5" font-size-4 @click="item.onClick"
             >
               <div :class="item.icon" />

frontend/composables/environment.ts

@@ -0,0 +1,16 @@
+export function useEnvironment() {
+  const isElectron = ref(false)
+  const platform = ref<NodeJS.Platform | null>(null)
+
+  onMounted(() => {
+    if (window.electron) {
+      isElectron.value = true
+      window.electron.getPlatform().then(currentPlatform => platform.value = currentPlatform)
+    }
+  })
+
+  return {
+    isElectron,
+    platform,
+  }
+}

frontend/pages/setting.vue

@@ -5,6 +5,7 @@ import { loadLanguageAsync } from '~/modules/i18n'
 const { locale } = useI18n()
 
 const settingStore = useSettingStore()
+const { isElectron } = useEnvironment()
 </script>
 
 <template>
@@ -28,7 +29,7 @@ const settingStore = useSettingStore()
       </NDynamicInput>
     </section>
     <NDivider />
-    <section>
+    <section v-if="!isElectron">
       <FormLabel mb4 :label="$t('setting.use-internal-download-cookie')" :description="$t('setting.use-internal-download-cookie-desc')" />
       <div flex="~ items-center gap-3">
         <NSwitch v-model:value="settingStore.useInternalDownloadCookie" size="large" />
@@ -37,7 +38,7 @@ const settingStore = useSettingStore()
         </div>
       </div>
     </section>
-    <NDivider />
+    <NDivider v-if="!isElectron" />
     <section>
       <FormLabel mb4 :label="$t('setting.switch-theme')" :description="$t('setting.switch-theme-desc')" />
       <div flex="~ items-center gap-3">

locales/english.yml

@@ -4,6 +4,9 @@ common:
   switch:
     off: Off
     on: On
+  exit: Exit
+  minimize: Minimize
+  maximize: Maximize
 home:
   popular-music-list: Popular Music List
   top-artists: Top Artists

locales/zh-CN.yml

@@ -4,6 +4,9 @@ common:
   switch:
     off: 关
     on: 开
+  exit: 退出
+  minimize: 最小化
+  maximize: 最大化
 home:
   popular-music-list: 热门歌单
   top-artists: 热门歌手

package.json

@@ -5,6 +5,7 @@
   "version": "2.0.3",
   "private": true,
   "packageManager": "pnpm@9.8.0",
+  "author": "Naily Zero <zero@naily.cc> (https://naily.cc)",
   "main": "./dist-electron/main.js",
   "scripts": {
     "build": "vite-ssg build",

types/auto-imports.d.ts

@@ -165,6 +165,7 @@ declare global {
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
   const useElementSize: typeof import('@vueuse/core')['useElementSize']
   const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEnvironment: typeof import('../frontend/composables/environment')['useEnvironment']
   const useEventBus: typeof import('@vueuse/core')['useEventBus']
   const useEventListener: typeof import('@vueuse/core')['useEventListener']
   const useEventSource: typeof import('@vueuse/core')['useEventSource']
@@ -203,6 +204,7 @@ declare global {
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
   const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMoveWindow: typeof import('../frontend/composables/move-window')['useMoveWindow']
   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
   const useNetwork: typeof import('@vueuse/core')['useNetwork']
@@ -470,6 +472,7 @@ declare module 'vue' {
     readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
     readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
     readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEnvironment: UnwrapRef<typeof import('../frontend/composables/environment')['useEnvironment']>
     readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
     readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
     readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>

types/shims.d.ts

@@ -1,5 +1,9 @@
 declare interface GlobalElectron {
   request: (channel: string, ...args: any[]) => Promise<any>
+  closeWindow: () => void
+  minimizeWindow: () => void
+  maximizeWindow: () => void
+  getPlatform: () => Promise<NodeJS.Platform>
 }
 
 declare interface Window {

uno.config.ts

@@ -16,6 +16,16 @@ export default defineConfig({
       'px-5 py-2 rounded-md inline-block cursor-pointer outline-none disabled:opacity-50 disabled:cursor-not-allowed',
     ],
   ],
+  rules: [
+    [
+      'app-drag',
+      { '-webkit-app-region': 'drag' },
+    ],
+    [
+      'app-no-drag',
+      { '-webkit-app-region': 'no-drag' },
+    ],
+  ],
   presets: [
     presetUno(),
     presetAttributify(),