refactor(AudioPlayer): 优化音频播放器UI布局和样式

调整音频播放器的布局结构，改进封面、进度条和按钮的样式，提升用户体验

refactor(AudioPlayer): 优化音频播放器UI布局和样式
调整音频播放器的布局结构，改进封面、进度条和按钮的样式，提升用户体验
hookehuyr
Commit a2e2d78e772ac66982b3b1079af17606ff50f6ca a2e2d78e 1 parent da3d0c19
Showing 3 changed files with 97 additions and 72 deletions
.env
src/components/ui/AudioPlayer.vue
src/views/profile/settings/AudioPlayerPage.vue
--- a/.env
View file @a2e2d78
+++ b/.env
View file @a2e2d78
@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
 VITE_OUTDIR = mlaj
 # 是否开启调试
-VITE_CONSOLE = 1
+VITE_CONSOLE = 0
 # appID相关
 VITE_APPID=微信appID
--- a/src/components/ui/AudioPlayer.vue
View file @a2e2d78
+++ b/src/components/ui/AudioPlayer.vue
View file @a2e2d78
 <!--
  * @Date: 2025-04-07 12:35:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-07 16:41:23
+ * @LastEditTime: 2025-04-07 17:20:54
  * @FilePath: /mlaj/src/components/ui/audioPlayer.vue
  * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
 -->
 <template>
   <!-- 音频播放器主容器 -->
-  <div class="audio-player bg-white rounded-lg shadow-xl overflow-hidden max-w-3xl mx-auto p-4 sm:p-6">
+  <div class="audio-player bg-white rounded-lg shadow-xl overflow-hidden max-w-md mx-auto p-4">
-    <!-- 封面与控制区：显示当前播放歌曲的封面、标题、艺术家和播放控制按钮 -->
+    <!-- 封面与歌曲信息 -->
-    <div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
+    <div class="flex flex-col items-center mb-6">
       <!-- 歌曲封面 -->
-      <div class="w-32 h-32 sm:w-24 sm:h-24 rounded-lg overflow-hidden">
+      <div class="w-48 h-48 rounded-lg overflow-hidden mb-4">
         <img :src="currentSong.cover" alt="封面" class="w-full h-full object-cover">
       </div>
       <!-- 歌曲信息 -->
-      <div class="flex-1 text-center sm:text-left">
+      <div class="text-center">
-        <h3 class="text-xl sm:text-lg font-medium">{{ currentSong.title }}</h3>
+        <h3 class="text-lg font-medium">{{ currentSong.title }}</h3>
         <p class="text-sm text-gray-500">{{ currentSong.artist }}</p>
       </div>
+      </div>
+
+      <!-- 进度条与时间：显示当前播放时间、总时长和可拖动的进度条 -->
+      <div class="mt-4 mb-6">
+        <div class="flex items-center justify-between text-xs text-gray-400 mb-2">
+          <span>{{ formatTime(currentTime) }}</span>
+          <span>{{ formatTime(duration) }}</span>
+        </div>
+        <div class="progress-bar relative h-1 bg-gray-200 rounded-full">
+          <input
+            type="range"
+            :value="progress"
+            @input="handleProgressChange"
+            @change="seekTo"
+            class="w-full absolute inset-0 appearance-none bg-transparent cursor-pointer"
+          >
+          <div
+            :style="{ width: `${progress}%` }"
+            class="progress-track absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all"
+          ></div>
+        </div>
+      </div>
+
       <!-- 播放控制按钮组：上一首、播放/暂停、下一首 -->
-      <div class="flex items-center justify-center space-x-8 sm:space-x-6 w-full sm:w-auto">
+      <div class="flex items-center space-x-16 mt-6" style="justify-content: space-evenly;">
         <button
           @click="prevSong"
-          class="w-12 h-12 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
+          class="w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
         >
-          <font-awesome-icon icon="backward-step" class="text-xl text-gray-600" />
+          <font-awesome-icon icon="backward-step" class="text-2xl text-gray-600" />
         </button>
         <button
           @click="togglePlay"
           :class="{'paused': !isPlaying, 'opacity-50 cursor-not-allowed': isLoading}"
           :disabled="isLoading"
-          class="w-16 h-16 sm:w-14 sm:h-14 flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 transition-colors shadow-lg"
+          class="w-14 h-14 flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 transition-colors shadow-lg"
         >
           <font-awesome-icon
             :icon="['fas' , isPlaying ? 'pause' : 'play']"
             :class="{ 'fa-spin': isLoading }"
-            class="text-3xl"
+            class="text-2xl"
           />
         </button>
         <button
           @click="nextSong"
-          class="w-12 h-12 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
+          class="w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
         >
-          <font-awesome-icon icon="forward-step" class="text-xl text-gray-600" />
+          <font-awesome-icon icon="forward-step" class="text-2xl text-gray-600" />
         </button>
       </div>
-    </div>
-    <!-- 进度条与时间：显示当前播放时间、总时长和可拖动的进度条 -->
+    <!-- 播放列表按钮 -->
-    <div class="mt-4">
+    <div class="flex justify-end mt-4">
-      <div class="flex items-center justify-between text-sm text-gray-500">
+      <button @click="togglePlaylist" class="text-gray-500 hover:text-gray-700 transition-colors">
-        <span>{{ formatTime(currentTime) }}</span>
+        <font-awesome-icon icon="list" class="text-lg" />
-        <span>{{ formatTime(duration) }}</span>
+      </button>
-      </div>
-
-      <div class="progress-bar relative mt-2">
-        <input
-          type="range"
-          :value="progress"
-          @input="handleProgressChange"
-          @change="seekTo"
-          class="w-full appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer"
-        >
-        <div
-          :style="{ width: `${progress}%` }"
-          class="progress-track absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all"
-        ></div>
-      </div>
     </div>
-    <!-- 音量与设置：音量控制滑块和播放列表按钮 -->
+    <!-- 播放列表弹出层 -->
-    <div class="flex items-center justify-between mt-6">
+    <van-popup
-      <div class="flex items-center space-x-2">
+      v-model:show="isPlaylistVisible"
-        <!-- <font-awesome-icon :icon="volume === 0 ? 'volume-off' : 'volume-up'" />
+      position="bottom"
-        <input
+      :overlay="false"
-          type="range"
+      round
-          :value="volume"
+      class="playlist-popup"
-          @input="handleVolumeChange"
+      style="height: 100%"
-          min="0"
+    >
-          max="100"
+      <div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
-          step="1"
-          class="w-24 appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer"
-        > -->
-      </div>
-
-      <div class="flex items-center space-x-4">
-        <!-- 播放列表按钮 -->
-        <button @click="togglePlaylist"><font-awesome-icon icon="list" /></button>
-      </div>
-    </div>
-
-    <!-- 播放列表：可切换显示的歌曲列表面板 -->
-    <div v-show="isPlaylistVisible" class="playlist mt-4 overscroll-contain">
-      <div class="playlist-header flex justify-between items-center px-2 py-1 bg-gray-100 rounded-t-lg">
         <h4 class="font-medium">播放列表 ({{ songs.length }})</h4>
-        <button @click="closePlaylist"><font-awesome-icon icon="xmark" /></button>
+        <button @click="closePlaylist" class="text-gray-500 hover:text-gray-700 transition-colors">
+          <font-awesome-icon icon="xmark" />
+        </button>
       </div>
-      <div class="playlist-items" style="max-height: 16rem; overflow-y: auto; -webkit-overflow-scrolling: touch;">
+      <div class="playlist-items overflow-y-auto h-full pb-safe">
         <div
           v-for="(song, index) in songs"
           :key="song.id"
-          :class="{'active': index === currentIndex}"
+          :class="{'active bg-blue-50': index === currentIndex}"
           @click="selectSong(index)"
-          class="px-2 py-3 hover:bg-gray-100 transition-colors"
+          class="flex items-center px-4 py-3 hover:bg-gray-50 transition-colors relative"
         >
-          {{ song.title }} - {{ song.artist }}
+          <div class="absolute top-0 left-0 right-0 h-[1px] bg-gray-200"></div>
+          <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
+            <img :src="song.cover" alt="封面" class="w-full h-full object-cover">
+          </div>
+          <div class="flex-1">
+            <div class="font-medium">{{ song.title }}</div>
+            <div class="text-sm text-gray-500">{{ song.artist }}</div>
+          </div>
+          <font-awesome-icon
+            v-if="index === currentIndex"
+            icon="volume-up"
+            class="text-blue-500 ml-2"
+          />
         </div>
       </div>
-    </div>
+    </van-popup>
   </div>
 </template>
@@ -151,6 +158,7 @@ onMounted(() => {
 const loadAudio = async () => {
   if (!currentSong.value) return
   isLoading.value = true
+  isPlaylistVisible.value = false // 关闭播放列表
   try {
     if (audio.value) {
       audio.value.removeEventListener('timeupdate', updateProgress)
@@ -334,6 +342,27 @@ watch([isPlaying, currentIndex], () => {
 .progress-track {
   height: var(--progress-height);
   border-radius: var(--progress-height);
+  background: linear-gradient(90deg, #1a1a1a 0%, #4a4a4a 100%);
+  transition: width 0.3s ease-in-out;
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 0;
+  height: 0;
+}
+
+input[type='range']::-moz-range-thumb {
+  width: 0;
+  height: 0;
+  border: 0;
 }
 /* 按钮交互动画 */
@@ -363,11 +392,7 @@ button:disabled {
 }
 /* 播放列表样式 */
-.playlist-items {
+
-  border: 1px solid #e5e7eb;
-  border-top: 0;
-  border-radius: 0 0 0.375rem 0.375rem;
-}
 .active {
   background-color: #f3f4f6;
--- a/src/views/profile/settings/AudioPlayerPage.vue
View file @a2e2d78
+++ b/src/views/profile/settings/AudioPlayerPage.vue
View file @a2e2d78
 <!--
  * @Date: 2025-03-24 13:04:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-07 14:06:35
+ * @LastEditTime: 2025-04-07 17:17:52
  * @FilePath: /mlaj/src/views/profile/settings/AudioPlayerPage.vue
  * @Description: 音频播放页面
 -->