✨ feat: 优化web端页面效果 展示为 pc应用样式

src/layout/components/MusicFull.vue

@@ -1,9 +1,10 @@
 <template>
   <n-drawer
     :show="musicFull"
-    height="100vh"
+    height="100%"
     placement="bottom"
     :style="{ background: currentBackground || background }"
+    :to="`#layout-main`"
   >
     <div id="drawer-target">
       <div class="drawer-back"></div>

src/layout/components/PlayBar.vue

@@ -54,18 +54,12 @@
       <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
     </div>
     <div class="audio-button">
-      <!-- <n-tooltip trigger="hover" :z-index="9999999">
+      <n-tooltip trigger="hover" :z-index="9999999" @click="toggleFavorite">
         <template #trigger>
-          <i class="iconfont icon-likefill"></i>
+          <i class="iconfont icon-likefill" :class="{ 'like-active': isFavorite }" @click="toggleFavorite"></i>
         </template>
         喜欢
-      </n-tooltip> -->
-      <!-- <n-tooltip trigger="hover" :z-index="9999999">
-        <template #trigger>
-          <i class="iconfont icon-Play" @click="parsingMusic"></i>
-        </template>
-        解析播放
-      </n-tooltip> -->
+      </n-tooltip>
       <n-tooltip v-if="isElectron" class="music-lyric" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i class="iconfont ri-netease-cloud-music-line" @click="openLyric"></i>
@@ -209,6 +203,19 @@ const scrollToPlayList = (val: boolean) => {
     palyListRef.value?.scrollTo({ top: store.state.playListIndex * 62 });
   }, 50);
 };
+
+const isFavorite = computed(() => {
+  return store.state.favoriteList.includes(playMusic.value.id);
+});
+
+const toggleFavorite = async (e: Event) => {
+  e.stopPropagation();
+  if (isFavorite.value) {
+    store.commit('removeFromFavorite', playMusic.value.id);
+  } else {
+    store.commit('addToFavorite', playMusic.value.id);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -407,4 +414,8 @@ const scrollToPlayList = (val: boolean) => {
 .play-bar-img {
   @apply w-14 h-14 rounded-2xl;
 }
+
+.like-active {
+  @apply text-red-600;
+}
 </style>

src/layout/components/TitleBar.vue

@@ -15,14 +15,22 @@
 <script setup lang="ts">
 import { useDialog } from 'naive-ui';
 
+import { isElectron } from '@/hooks/MusicHook';
+
 const dialog = useDialog();
 const windowData = window as any;
 
 const minimize = () => {
+  if (!isElectron.value) {
+    return;
+  }
   windowData.electronAPI.minimize();
 };
 
 const close = () => {
+  if (!isElectron.value) {
+    return;
+  }
   dialog.warning({
     title: '提示',
     content: '确定要退出吗？',
@@ -38,6 +46,9 @@ const close = () => {
 };
 
 const drag = (event: MouseEvent) => {
+  if (!isElectron.value) {
+    return;
+  }
   windowData.electronAPI.dragStart(event);
 };
 </script>