✨ feat: 优化播放栏背景问题

components.d.ts

@@ -17,7 +17,6 @@ declare module 'vue' {
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NImage: typeof import('naive-ui')['NImage']
-    NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
@@ -26,7 +25,6 @@ declare module 'vue' {
     NSlider: typeof import('naive-ui')['NSlider']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NVirtualList: typeof import('naive-ui')['NVirtualList']
     PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
     PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default']
     PlaylistType: typeof import('./src/components/PlaylistType.vue')['default']

src/layout/components/PlayBar.vue

@@ -1,8 +1,11 @@
 <template>
   <!-- 展开全屏 -->
-  <music-full ref="MusicFullRef" v-model:musicFull="musicFull" :audio="audio.value as HTMLAudioElement" />
+  <music-full ref="MusicFullRef" v-model:music-full="musicFull" :audio="audio.value as HTMLAudioElement" />
   <!-- 底部播放栏 -->
-  <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
+  <div
+    class="music-play-bar"
+    :class="setAnimationClass('animate__bounceInUp') + ' ' + (musicFull ? 'play-bar-opcity' : '')"
+  >
     <n-image
       :src="getImgUrl(playMusic?.picUrl, '300y300')"
       class="play-bar-img"
@@ -223,7 +226,7 @@ const setMusicFull = () => {
   @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
   z-index: 9999;
   box-shadow: 0px 0px 10px 2px rgba(203, 203, 203, 0.034);
-  background-color: rgba(0, 0, 0, 0.747);
+  background-color: #212121;
   animation-duration: 0.5s !important;
   .music-content {
     width: 140px;
@@ -240,6 +243,10 @@ const setMusicFull = () => {
   }
 }
 
+.play-bar-opcity {
+  background-color: rgba(0, 0, 0, 0.218);
+}
+
 .play-bar-img {
   @apply w-14 h-14 rounded-2xl;
 }

vite.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     // 指定端口
-    port: 4678,
+    port: 7788,
     proxy: {
       // with options
       '/api': {