From f2f5d3ac15a44420b82becfdd5fae50fea04d3e2 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sat, 14 Dec 2024 13:49:32 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96web?=
 =?UTF-8?q?=E7=AB=AF=E9=A1=B5=E9=9D=A2=E6=95=88=E6=9E=9C=20=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=BA=20pc=E5=BA=94=E7=94=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |  3 ++-
 src/components/MusicList.vue        |  3 ++-
 src/components/MvPlayer.vue         | 10 +++++-----
 src/layout/AppLayout.vue            | 17 ++++++++++++++---
 src/layout/components/MusicFull.vue |  3 ++-
 src/layout/components/PlayBar.vue   | 29 ++++++++++++++++++++---------
 src/layout/components/TitleBar.vue  | 11 +++++++++++
 7 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 56cdcff..ad9ef60 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" :class="{ mobile: isMobile }">
+  <div class="app-container" :class="{ mobile: isMobile, noElectron: !isElectron }">
     <n-config-provider :theme="darkTheme">
       <n-dialog-provider>
         <router-view></router-view>
@@ -12,6 +12,7 @@
 import { darkTheme } from 'naive-ui';
 import { onMounted } from 'vue';
 
+import { isElectron } from '@/hooks/MusicHook';
 import store from '@/store';
 
 import { isMobile } from './utils';
diff --git a/src/components/MusicList.vue b/src/components/MusicList.vue
index 5f1b32b..a542e48 100644
--- a/src/components/MusicList.vue
+++ b/src/components/MusicList.vue
@@ -1,11 +1,12 @@
 <template>
   <n-drawer
     :show="show"
-    :height="isMobile ? '100vh' : '80vh'"
+    :height="isMobile ? '100%' : '80%'"
     placement="bottom"
     block-scroll
     mask-closable
     :style="{ backgroundColor: 'transparent' }"
+    :to="`#layout-main`"
     @mask-click="close"
   >
     <div class="music-page">
diff --git a/src/components/MvPlayer.vue b/src/components/MvPlayer.vue
index cb91c12..15410dd 100644
--- a/src/components/MvPlayer.vue
+++ b/src/components/MvPlayer.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-drawer :show="show" height="100vh" placement="bottom" :z-index="999999999">
+  <n-drawer :show="show" height="100%" placement="bottom" :z-index="999999999" :to="`#layout-main`">
     <div class="mv-detail">
       <div ref="videoContainerRef" class="video-container" :class="{ 'cursor-hidden': !showCursor }">
         <video
@@ -553,8 +553,8 @@ const isMobile = computed(() => store.state.isMobile);
 
   // 添加横屏模式支持
   @media screen and (orientation: landscape) {
-    height: 100vh !important;
-    width: 100vw !important;
+    height: 100% !important;
+    width: 100% !important;
   }
 
   .video-container {
@@ -617,8 +617,8 @@ const isMobile = computed(() => store.state.isMobile);
     &:-moz-full-screen,
     &:-ms-fullscreen {
       background: black;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
 
       // 确保全屏时标题栏正确显示
       .mv-detail-title {
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 76a3414..af75f69 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="layout-page">
-    <div class="layout-main" :style="{ background: backgroundColor }">
-      <title-bar v-if="isElectron" />
-      <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
+    <div id="layout-main" class="layout-main" :style="{ background: backgroundColor }">
+      <title-bar />
+      <div class="layout-main-page">
         <!-- 侧边菜单栏 -->
         <app-menu v-if="!isMobile" class="menu" :menus="menus" />
         <div class="main">
@@ -103,4 +103,15 @@ const backgroundColor = ref('#000');
     }
   }
 }
+
+// 如果屏幕宽度 大于 1440px 则设置布局为 70% 85%
+@media (min-width: 1440px) {
+  .noElectron {
+    .layout-main {
+      width: 70%;
+      height: 85%;
+      @apply rounded-2xl border-2 border-gray-500 shadow-xl;
+    }
+  }
+}
 </style>
diff --git a/src/layout/components/MusicFull.vue b/src/layout/components/MusicFull.vue
index 7181977..5917211 100644
--- a/src/layout/components/MusicFull.vue
+++ b/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>
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 0f143ab..9120b02 100644
--- a/src/layout/components/PlayBar.vue
+++ b/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>
diff --git a/src/layout/components/TitleBar.vue b/src/layout/components/TitleBar.vue
index 020d232..0853f5f 100644
--- a/src/layout/components/TitleBar.vue
+++ b/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>