Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a2e2d78e 1 parent da3d0c19

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

调整音频播放器的布局结构，改进封面、进度条和按钮的样式，提升用户体验
Inline Side-by-side
Showing 3 changed files with 95 additions and 70 deletions
......@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = mlaj
# 是否开启调试
VITE_CONSOLE = 1
VITE_CONSOLE = 0
# appID相关
VITE_APPID=微信appID
......
<!--
* @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="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
<div class="audio-player bg-white rounded-lg shadow-xl overflow-hidden max-w-md mx-auto p-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">
<h3 class="text-xl sm:text-lg font-medium">{{ currentSong.title }}</h3>
<div class="text-center">
<h3 class="text-lg font-medium">{{ currentSong.title }}</h3>
<p class="text-sm text-gray-500">{{ currentSong.artist }}</p>
</div>
<!-- 播放控制按钮组：上一首、播放/暂停、下一首 -->
<div class="flex items-center justify-center space-x-8 sm:space-x-6 w-full sm:w-auto">
<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"
>
<font-awesome-icon icon="backward-step" class="text-xl 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"
>
<font-awesome-icon
:icon="['fas' , isPlaying ? 'pause' : 'play']"
:class="{ 'fa-spin': isLoading }"
class="text-3xl"
/>
</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"
>
<font-awesome-icon icon="forward-step" class="text-xl text-gray-600" />
</button>
</div>
</div>
<!-- 进度条与时间：显示当前播放时间、总时长和可拖动的进度条 -->
<div class="mt-4">
<div class="flex items-center justify-between text-sm text-gray-500">
<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 mt-2">
<div class="progress-bar relative h-1 bg-gray-200 rounded-full">
<input
type="range"
:value="progress"
@input="handleProgressChange"
@change="seekTo"
class="w-full appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer"
class="w-full absolute inset-0 appearance-none bg-transparent cursor-pointer"
>
<div
:style="{ width: `${progress}%` }"
......@@ -72,45 +44,80 @@
</div>
</div>
<!-- 音量与设置：音量控制滑块和播放列表按钮 -->
<div class="flex items-center justify-between mt-6">
<div class="flex items-center space-x-2">
<!-- <font-awesome-icon :icon="volume === 0 ? 'volume-off' : 'volume-up'" />
<input
type="range"
:value="volume"
@input="handleVolumeChange"
min="0"
max="100"
step="1"
class="w-24 appearance-none bg-gray-200 rounded-full h-1.5 cursor-pointer"
> -->
<!-- 播放控制按钮组：上一首、播放/暂停、下一首 -->
<div class="flex items-center space-x-16 mt-6" style="justify-content: space-evenly;">
<button
@click="prevSong"
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-2xl text-gray-600" />
</button>
<button
@click="togglePlay"
:class="{'paused': !isPlaying, 'opacity-50 cursor-not-allowed': isLoading}"
:disabled="isLoading"
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-2xl"
/>
</button>
<button
@click="nextSong"
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-2xl text-gray-600" />
</button>
</div>
<div class="flex items-center space-x-4">
<!-- 播放列表按钮 -->
<button @click="togglePlaylist"><font-awesome-icon icon="list" /></button>
</div>
<div class="flex justify-end mt-4">
<button @click="togglePlaylist" class="text-gray-500 hover:text-gray-700 transition-colors">
<font-awesome-icon icon="list" class="text-lg" />
</button>
</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">
<!-- 播放列表弹出层 -->
<van-popup
v-model:show="isPlaylistVisible"
position="bottom"
:overlay="false"
round
class="playlist-popup"
style="height: 100%"
>
<div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
<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>
</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;
......
<!--
* @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: 音频播放页面
-->
......