From 8758fe66c67da4dfdc00fe6af3091403c13bbcbe Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Fri, 10 Jul 2026 10:46:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AE=B2=E8=A7=A3=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=92=AD=E6=94=BE=E5=99=A8=E4=B8=BA=E5=B8=B8=E9=A9=BB?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/exhibit/detail.vue | 42 +++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/pages/exhibit/detail.vue b/src/pages/exhibit/detail.vue
index 8c4dc5d..ce59040 100644
--- a/src/pages/exhibit/detail.vue
+++ b/src/pages/exhibit/detail.vue
@@ -3,17 +3,12 @@
     :active-tab="activeTopTab"
     variant="static"
     :show-top-tabs="false"
-    :audio-player-avoid-bottom-nav="false"
-    :audio-player-closable="false"
-    :audio-player-expandable="false"
-    :show-audio-player-host="true"
-    audio-player-mode="mini"
     @back="handleBack"
   >
-    <view class="explain-detail-page" :class="{ 'with-audio-player': showAudioPlayer }">
+    <view class="explain-detail-page">
       <scroll-view
         class="content"
-        :class="{ 'with-fixed-player': isDetailAudioDockVisible || showAudioPlayer }"
+        :class="{ 'with-fixed-player': isDetailAudioDockVisible }"
         scroll-y
         :show-scrollbar="false"
       >
@@ -67,7 +62,11 @@
         class="detail-audio-dock"
       >
         <view class="detail-audio-play" @tap="handlePlayAudio">
-          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
+          <svg v-if="detailAudioPlaying" width="26" height="26" viewBox="0 0 24 24" fill="none">
+            <rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
+            <rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>
+          </svg>
+          <svg v-else width="26" height="26" viewBox="0 0 24 24" fill="none">
             <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
           </svg>
         </view>
@@ -75,7 +74,10 @@
           <text class="detail-audio-title">{{ audioDockTitle }}</text>
           <text class="detail-audio-subtitle">{{ audioDockSubtitle }}</text>
           <view class="detail-audio-progress">
-            <view class="detail-audio-progress-fill"></view>
+            <view
+              class="detail-audio-progress-fill"
+              :style="{ width: `${detailAudioProgressPercent}%` }"
+            ></view>
           </view>
         </view>
       </view>
@@ -206,9 +208,7 @@ const currentAudioTarget = computed(() => ({
   lang: selectedAudioLanguage.value
 }))
 const isCurrentDetailAudio = computed(() => globalAudioPlayer.isCurrentSource(currentAudioTarget.value))
-const showAudioPlayer = computed(() => (
-  globalAudioPlayer.visible.value && globalAudioPlayer.hasAudio.value
-))
+
 const isCurrentDetailAudioTarget = computed(() => {
   const source = globalAudioPlayer.currentSource.value
   const targetType = exhibit.value.audio.playTargetType || 'ITEM'
@@ -222,13 +222,24 @@ const isCurrentDetailAudioTarget = computed(() => {
 })
 const isDetailAudioDockVisible = computed(() => (
   exhibit.value.audio.status === 'playable'
-  && !isCurrentDetailAudioTarget.value
 ))
 const audioDockTitle = computed(() => exhibit.value.title || '讲解内容')
 const audioDockSubtitle = computed(() => [
   selectedAudioLanguage.value === 'en-US' ? 'English' : '中文',
   exhibit.value.audio.durationLabel
 ].filter(Boolean).join(' · ') || '讲解')
+const detailAudioPlaying = computed(() => (
+  isCurrentDetailAudio.value
+  && globalAudioPlayer.playing.value
+))
+const detailAudioProgressPercent = computed(() => {
+  if (!isCurrentDetailAudioTarget.value) return 0
+
+  const total = globalAudioPlayer.duration.value || globalAudioPlayer.currentAudio.value?.duration || 0
+  if (!total) return 0
+
+  return Math.max(0, Math.min(100, (globalAudioPlayer.currentTime.value / total) * 100))
+})
 // 讲解详情页只定位到所属展厅，不再追踪具体展品点位。
 const resolveHallGuidePoi = async () => {
   return guideUseCase.resolveContentLocationPreviewTarget({
@@ -956,9 +967,6 @@ const handleBack = () => {
   background: rgba(249, 250, 251, 0.96);
 }
 
-.explain-detail-page.with-audio-player .action-bar {
-  bottom: 88px;
-}
 
 .location-btn {
   height: 52px;
@@ -1308,7 +1316,7 @@ const handleBack = () => {
 }
 
 .detail-audio-progress-fill {
-  width: 22%;
+  width: 0;
   height: 100%;
   background: #e7e900;
   border-radius: inherit;