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

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';

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">

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;
+    height: 100% !important;
-    width: 100vw !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;
+      width: 100%;
-      height: 100vh;
+      height: 100%;
 
       // 确保全屏时标题栏正确显示
       .mv-detail-title {

src/layout/AppLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="layout-page">
-    <div class="layout-main" :style="{ background: backgroundColor }">
+    <div id="layout-main" class="layout-main" :style="{ background: backgroundColor }">
-      <title-bar v-if="isElectron" />
+      <title-bar />
-      <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
+      <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>

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>
-      <!-- <n-tooltip trigger="hover" :z-index="9999999">
-        <template #trigger>
-          <i class="iconfont icon-Play" @click="parsingMusic"></i>
-        </template>
-        解析播放
-      </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>