✨ feat(打包初始化):

src/electron.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  interface Window {
+    electronAPI: {
+      minimize: () => void
+      maximize: () => void
+      close: () => void
+      dragStart: () => void
+    }
+  }
+}

src/layout/AppLayout.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="layout-page">
         <div class="layout-main">
+            <title-bar />
             <div class="flex">
                 <!-- 侧边菜单栏 -->
                 <app-menu class="menu" :menus="menus" />
@@ -37,7 +38,7 @@ import { defineAsyncComponent } from 'vue';
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
-
+const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 
 
 const store = useStore();
@@ -63,7 +64,7 @@ const menus = store.state.menus;
         width: 90px;
     }
     .main {
-        @apply pt-6 pr-6 flex-1 box-border;
+        @apply pr-6 flex-1 box-border;
         height: 100vh;
         &-content {
             @apply rounded-2xl;

src/layout/components/MusicFull.vue

@@ -117,8 +117,8 @@ defineExpose({
     @apply flex-1 flex justify-center mr-24;
 
     .img {
-      width: 450px;
-      height: 450px;
+      width: 350px;
+      height: 350px;
       @apply rounded-xl;
     }
   }
@@ -137,7 +137,8 @@ defineExpose({
 
   .music-lrc {
     background-color: inherit;
-    width: 800px;
+    min-width: 400px;
+    max-width: 800px;
     height: 550px;
 
     &-text {

src/layout/components/TitleBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="title-bar" @mousedown="drag">
+    <div id="title">Alger Music</div>
+    <div id="buttons">
+      <button @click="minimize">
+        <i class="iconfont icon-minisize"></i>
+      </button>
+      <!-- <button @click="maximize">
+        <i class="iconfont icon-maxsize"></i>
+      </button> -->
+      <button @click="close">
+        <i class="iconfont icon-close"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+const minimize = () => {
+  window.electronAPI.minimize()
+}
+
+const maximize = () => {
+  window.electronAPI.maximize()
+}
+
+const close = () => {
+  window.electronAPI.close()
+}
+
+const drag = (event: HTMLElement) => {
+  window.electronAPI.dragStart(event)
+}
+</script>
+
+<style scoped lang="scss">
+#title-bar {
+  -webkit-app-region: drag;
+  @apply flex justify-between text-white px-6 py-3 select-none relative;
+  z-index: 9999999;
+}
+
+#buttons {
+  @apply flex gap-4;
+  -webkit-app-region: no-drag;
+}
+
+button {
+  @apply hover:text-green-500;
+}
+</style>

src/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/utils/index.ts

@@ -28,11 +28,11 @@ export const secondToMinute = (s: number) => {
 }
 
 export const getIsMc = () => {
-  return !!location.href.includes('mc.')
+  return true
 }
 
 export const getImgUrl = computed(() => (url: string, size: string) => {
   const bdUrl = 'https://image.baidu.com/search/down?url='
   const imgUrl = encodeURIComponent(`${url}?param=${size}`)
-  return getIsMc() ? `${bdUrl}${imgUrl}` : `${url}?param=${size}`
+  return `${bdUrl}${imgUrl}`
 })