调整讲解详情页音频播放器状态

src/pages/exhibit/detail.vue

@@ -6,72 +6,38 @@
     @back="handleBack"
   >
     <view class="explain-detail-page">
+      <view class="immersive-hero" :class="{ 'has-real-image': heroImage }">
+        <image
+          v-if="heroImage"
+          class="hero-real-image"
+          :src="heroImage"
+          mode="aspectFill"
+        />
+        <view class="hero-image-shade"></view>
+        <button
+          v-if="!shouldUseHostNavigation"
+          class="hero-back"
+          aria-label="返回讲解详情"
+          @tap.stop="handleBack"
+        >
+          <text class="hero-back-icon">‹</text>
+        </button>
+        <view class="hero-copy">
+          <text class="detail-title">{{ displayTitle }}</text>
+          <text class="detail-meta">{{ heroSubtitle }}</text>
+          <view class="detail-chip-row">
+            <view class="detail-chip shared">
+              <text class="detail-chip-text">标准解说</text>
+            </view>
+          </view>
+        </view>
+      </view>
       <scroll-view
         class="content"
         scroll-y
         :show-scrollbar="false"
       >
-        <view class="immersive-hero" :class="{ 'has-real-image': heroImage }">
-          <image
-            v-if="heroImage"
-            class="hero-real-image"
-            :src="heroImage"
-            mode="aspectFill"
-          />
-          <view class="hero-image-shade"></view>
-          <button
-            v-if="!shouldUseHostNavigation"
-            class="hero-back"
-            aria-label="返回讲解详情"
-            @tap.stop="handleBack"
-          >
-            <text class="hero-back-icon">‹</text>
-          </button>
-          <view class="hero-copy">
-            <text class="detail-title">{{ displayTitle }}</text>
-            <text class="detail-meta">{{ heroSubtitle }}</text>
-            <view class="detail-chip-row">
-              <view class="detail-chip shared">
-                <text class="detail-chip-text">标准解说</text>
-              </view>
-            </view>
-          </view>
-        </view>
-
         <view class="detail-content">
-          <view v-if="isDetailAudioDockVisible" class="detail-audio-control">
-            <button
-              class="detail-audio-play"
-              :aria-label="detailAudioActionLabel"
-              @tap="handlePlayAudio"
-            >
-              <svg v-if="detailAudioPlaying" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                <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="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
-              </svg>
-            </button>
-            <view class="detail-audio-main">
-              <text class="detail-audio-title">{{ audioDockTitle }}</text>
-              <text class="detail-audio-subtitle">{{ audioDockSubtitle }}</text>
-              <view class="detail-audio-progress" aria-hidden="true">
-                <view
-                  class="detail-audio-progress-fill"
-                  :style="{ width: `${detailAudioProgressPercent}%` }"
-                ></view>
-              </view>
-            </view>
-            <view class="detail-audio-state" aria-hidden="true">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-                <path d="M4 10V14H8L13 18V6L8 10H4Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
-                <path d="M16 9C17.2 10.2 17.2 13.8 16 15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
-              </svg>
-            </view>
-          </view>
-          <text v-else class="detail-audio-unavailable">{{ audioAvailabilityMessage }}</text>
-
           <view v-if="contentLanguageOptions.length" class="language-switch" role="tablist" aria-label="讲解语言">
             <button
               v-for="option in contentLanguageOptions"
@@ -110,6 +76,49 @@
         </view>
       </scroll-view>
 
+      <view class="detail-audio-dock" :class="`is-${audioDockState}`">
+        <view class="detail-audio-dock-main">
+          <button
+            class="detail-audio-play"
+            :class="{ disabled: audioDockState === 'unavailable' }"
+            :disabled="audioDockState === 'unavailable'"
+            :aria-label="detailAudioActionLabel"
+            @tap="handlePlayAudio"
+          >
+            <view v-if="audioDockState === 'loading'" class="audio-loading-spinner" aria-label="音频加载中"></view>
+            <svg v-else-if="detailAudioPlaying" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <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="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
+            </svg>
+          </button>
+          <view class="detail-audio-main">
+            <text class="detail-audio-title">{{ audioDockTitle }}</text>
+            <text class="detail-audio-subtitle">{{ audioDockSubtitle }}</text>
+          </view>
+          <button
+            v-if="audioDockState === 'failed'"
+            class="detail-audio-retry"
+            aria-label="重试播放音频"
+            @tap="handleRetryAudio"
+          >重试</button>
+        </view>
+        <view v-if="audioDockState === 'loading'" class="detail-audio-progress is-indeterminate" aria-label="音频加载中"></view>
+        <view
+          v-else
+          class="detail-audio-progress-hit"
+          :class="{ disabled: audioDockState !== 'playable' }"
+          @tap="handleSeekAudio"
+        >
+          <view class="detail-audio-progress" aria-hidden="true">
+            <view class="detail-audio-progress-fill" :style="{ width: `${detailAudioProgressPercent}%` }"></view>
+            <view class="detail-audio-progress-thumb" :style="{ left: `${detailAudioProgressPercent}%` }"></view>
+          </view>
+        </view>
+      </view>
+
       <view v-if="isLocationActionVisible" class="action-bar">
         <view
           class="location-btn"
@@ -275,9 +284,6 @@ const isCurrentDetailAudioTarget = computed(() => {
     && source.targetId === targetId
   )
 })
-const isDetailAudioDockVisible = computed(() => (
-  !languageSwitchLoading.value && exhibit.value.audio.status === 'playable'
-))
 const audioDockTitle = computed(() => displayTitle.value || '讲解内容')
 const formatDetailAudioTime = (seconds?: number) => {
   const normalizedSeconds = Number.isFinite(seconds || 0)
@@ -304,7 +310,13 @@ const detailAudioTimeLabel = computed(() => (
 ))
 const audioDockSubtitle = computed(() => [
   audioLanguageLabel(selectedAudioLanguage.value),
-  detailAudioTimeLabel.value
+  audioDockState.value === 'failed'
+    ? globalAudioPlayer.error.value || '音频暂时无法播放'
+    : audioDockState.value === 'unavailable'
+      ? audioAvailabilityMessage.value
+      : audioDockState.value === 'loading'
+        ? '正在加载音频'
+        : detailAudioTimeLabel.value
 ].filter(Boolean).join(' · ') || '讲解')
 const detailAudioPlaying = computed(() => (
   isCurrentDetailAudio.value
@@ -321,6 +333,25 @@ const detailAudioProgressPercent = computed(() => {
 
   return Math.max(0, Math.min(100, (detailAudioCurrentSeconds.value / total) * 100))
 })
+const isCurrentDetailAudioError = computed(() => {
+  const source = globalAudioPlayer.currentSource.value
+  return Boolean(
+    globalAudioPlayer.error.value
+    && source?.targetType === currentAudioTarget.value.targetType
+    && source.targetId === currentAudioTarget.value.targetId
+  )
+})
+const isDetailAudioLoading = computed(() => (
+  languageSwitchLoading.value
+  || retryingAudio.value
+  || (isCurrentDetailAudioTarget.value && globalAudioPlayer.loading.value)
+))
+const audioDockState = computed<'playable' | 'loading' | 'unavailable' | 'failed'>(() => {
+  if (isDetailAudioLoading.value) return 'loading'
+  if (isCurrentDetailAudioError.value) return 'failed'
+  if (exhibit.value.audio.status !== 'playable') return 'unavailable'
+  return 'playable'
+})
 // 讲解详情页只定位到所属展厅，不再追踪具体展品点位。
 const resolveHallGuidePoi = async () => {
   return guideUseCase.resolveContentLocationPreviewTarget({
@@ -693,8 +724,25 @@ const refreshCurrentAudioOnce = async (message: string) => {
   return null
 }
 
-const handlePlayAudio = async () => {
+const playDetailAudio = async (audio: AudioItem) => {
-  if (isCurrentDetailAudio.value) {
+  await globalAudioPlayer.play(audio, {
+    source: {
+      exhibitId: exhibit.value.id,
+      targetType: currentAudioTarget.value.targetType,
+      targetId: currentAudioTarget.value.targetId,
+      lang: selectedAudioLanguage.value,
+      title: audio.name,
+      detailRoute: buildDetailRoute()
+    },
+    retryOnError: refreshCurrentAudioOnce,
+    displayMode: 'mini'
+  })
+}
+
+const handlePlayAudio = async (options: { forceRefresh?: boolean } = {}) => {
+  if (audioDockState.value === 'unavailable') return
+
+  if (isCurrentDetailAudio.value && !options.forceRefresh) {
     if (globalAudioPlayer.playing.value) {
       globalAudioPlayer.pause()
       return
@@ -704,6 +752,14 @@ const handlePlayAudio = async () => {
     return
   }
 
+  const refreshedAudio = options.forceRefresh
+    ? await refreshCurrentAudioOnce(globalAudioPlayer.error.value)
+    : null
+  if (refreshedAudio) {
+    await playDetailAudio(refreshedAudio)
+    return
+  }
+
   const selection = exhibit.value.id
     ? await explainUseCase.selectAudioForExplainDetail({
       id: exhibit.value.id,
@@ -732,18 +788,20 @@ const handlePlayAudio = async () => {
   const audio = toAudioItem(selection)
   if (!audio) return
 
-  await globalAudioPlayer.play(audio, {
+  await playDetailAudio(audio)
-    source: {
+}
-      exhibitId: exhibit.value.id,
+
-      targetType: currentAudioTarget.value.targetType,
+const handleRetryAudio = async () => {
-      targetId: currentAudioTarget.value.targetId,
+  await handlePlayAudio({ forceRefresh: true })
-      lang: selectedAudioLanguage.value,
+}
-      title: audio.name,
+
-      detailRoute: buildDetailRoute()
+const handleSeekAudio = (event: { detail?: { x?: number }; currentTarget?: { offsetWidth?: number } }) => {
-    },
+  if (audioDockState.value !== 'playable' || !detailAudioDurationSeconds.value) return
-    retryOnError: refreshCurrentAudioOnce,
+
-    displayMode: 'mini'
+  const width = event.currentTarget?.offsetWidth || 0
-  })
+  const x = event.detail?.x
+  if (!width || typeof x !== 'number') return
+  globalAudioPlayer.seekToPercent(Math.max(0, Math.min(100, x / width * 100)))
 }
 
 const handleNavigate = async () => {
@@ -790,19 +848,6 @@ const fallbackToExplainHome = () => {
 }
 
 const handleBack = () => {
-  if (typeof window !== 'undefined' && window.history.length > 1) {
-    const currentHref = window.location.href
-    window.history.back()
-
-    // H5 深链或异常历史栈下 history.back 可能不改变页面，兜底回到讲解首页。
-    window.setTimeout(() => {
-      if (window.location.href === currentHref) {
-        fallbackToExplainHome()
-      }
-    }, 800)
-    return
-  }
-
   uni.navigateBack({
     delta: 1,
     fail: fallbackToExplainHome
@@ -820,7 +865,12 @@ const handleBack = () => {
 }
 
 .content {
-  height: 100%;
+  position: absolute;
+  top: 320px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: auto;
   padding: 0;
   box-sizing: border-box;
   background: #f7f8f3;
@@ -829,8 +879,8 @@ const handleBack = () => {
 .immersive-hero {
   position: relative;
   min-height: 0;
-  height: clamp(238px, 30vh, 286px);
+  height: 320px;
-  padding: calc(env(safe-area-inset-top) + 14px) 20px 20px;
+  padding: calc(env(safe-area-inset-top) + 0px) 24px 24px;
   box-sizing: border-box;
   overflow: hidden;
   background: #111a14;
@@ -847,7 +897,7 @@ const handleBack = () => {
   inset: 0;
   z-index: 1;
   pointer-events: none;
-  background: rgba(8, 14, 10, 0.44);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.58) 100%);
 }
 
 .hero-real-image {
@@ -870,7 +920,7 @@ const handleBack = () => {
   justify-content: center;
   border: 0;
   border-radius: 50%;
-  background: rgba(7, 12, 8, 0.42);
+  background: transparent;
   color: #ffffff;
 }
 
@@ -889,8 +939,8 @@ const handleBack = () => {
   position: relative;
   z-index: 2;
   min-height: 0;
-  height: calc(100% - 44px);
+  height: calc(100% - 44px - env(safe-area-inset-top));
-  padding-top: 12px;
+  padding-top: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -899,8 +949,8 @@ const handleBack = () => {
 .detail-title {
   display: block;
   max-width: 100%;
-  font-size: 26px;
+  font-size: 28px;
-  line-height: 32px;
+  line-height: 34px;
   font-weight: 800;
   letter-spacing: 0;
   color: #ffffff;
@@ -920,50 +970,15 @@ const handleBack = () => {
   white-space: nowrap;
 }
 
-.detail-chip-row {
+.detail-chip-row { display: none; }
-  margin-top: 9px;
-}
-
-.detail-chip {
-  height: 24px;
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: 5px;
-}
-
-.detail-chip.shared {
-  background: rgba(223, 225, 0, 0.15);
-  border-color: rgba(223, 225, 0, 0.62);
-}
-
-.detail-chip-text,
-.detail-chip.shared .detail-chip-text {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 700;
-  color: #f0f19b;
-}
 
 .detail-content {
-  min-height: calc(70vh - env(safe-area-inset-top));
+  min-height: calc(100vh - 320px - 72px - env(safe-area-inset-bottom));
-  padding: 16px 20px calc(28px + env(safe-area-inset-bottom));
+  padding: 25px 24px calc(32px + 72px + env(safe-area-inset-bottom));
   box-sizing: border-box;
   background: #f7f8f3;
 }
 
-.detail-audio-control {
-  min-height: 82px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-  box-sizing: border-box;
-  border-bottom: 1px solid #d8ddd2;
-}
-
 .detail-audio-play {
   width: 44px;
   height: 44px;
@@ -974,8 +989,8 @@ const handleBack = () => {
   justify-content: center;
   border: 0;
   border-radius: 50%;
-  background: #e0e100;
+  background: #e8e800;
-  color: #1a2017;
+  color: #141412;
 }
 
 .detail-audio-play::after,
@@ -983,73 +998,9 @@ const handleBack = () => {
   border: 0;
 }
 
-.detail-audio-main {
-  min-width: 0;
-  flex: 1;
-  padding: 0;
-}
-
-.detail-audio-title {
-  display: block;
-  font-size: 15px;
-  line-height: 21px;
-  font-weight: 800;
-  color: #20241e;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-audio-subtitle {
-  display: block;
-  margin-top: 2px;
-  font-size: 13px;
-  line-height: 18px;
-  color: #62695f;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-audio-progress {
-  height: 3px;
-  margin-top: 9px;
-  overflow: hidden;
-  background: #d6dbd1;
-  border-radius: 2px;
-}
-
-.detail-audio-progress-fill {
-  width: 0;
-  height: 100%;
-  background: #b9bb00;
-  border-radius: inherit;
-}
-
-.detail-audio-state {
-  width: 28px;
-  height: 44px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #4f584c;
-}
-
-.detail-audio-unavailable {
-  min-height: 82px;
-  padding: 28px 0 18px;
-  display: block;
-  box-sizing: border-box;
-  border-bottom: 1px solid #d8ddd2;
-  font-size: 14px;
-  line-height: 20px;
-  color: #7a5a22;
-}
-
 .language-switch {
-  height: 44px;
+  height: 40px;
-  margin-top: 14px;
+  margin-top: 0;
   padding: 0;
   display: flex;
   box-sizing: border-box;
@@ -1062,7 +1013,7 @@ const handleBack = () => {
   position: relative;
   min-width: 0;
   flex: 1;
-  height: 42px;
+  height: 40px;
   padding: 0 6px;
   display: flex;
   align-items: center;
@@ -1079,18 +1030,18 @@ const handleBack = () => {
 }
 
 .language-option.active {
-  background: #eef0e8;
+  background: #e8e800;
-  color: #1e251b;
+  color: #141412;
 }
 
 .language-option.active::before {
   position: absolute;
   right: 10px;
-  bottom: 5px;
+  bottom: 1px;
   left: 10px;
-  height: 2px;
+  height: 3px;
   content: '';
-  background: #b9bb00;
+  background: #141412;
 }
 
 .language-option.disabled {
@@ -1159,6 +1110,142 @@ const handleBack = () => {
   color: #7a5a22;
 }
 
+.detail-audio-dock {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  height: calc(72px + env(safe-area-inset-bottom));
+  padding: 0 24px env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  background: #ffffff;
+  border-top: 1px solid #e8e5de;
+}
+
+.detail-audio-dock-main {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.detail-audio-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.detail-audio-title,
+.detail-audio-subtitle {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-audio-title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  color: #141412;
+}
+
+.detail-audio-subtitle {
+  margin-top: 1px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #666661;
+}
+
+.detail-audio-play.disabled {
+  background: #e8e5de;
+  color: #94948f;
+}
+
+.detail-audio-retry {
+  height: 32px;
+  padding: 0 10px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 4px;
+  background: #e8e800;
+  color: #141412;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 600;
+}
+
+.detail-audio-retry::after {
+  border: 0;
+}
+
+.detail-audio-progress-hit {
+  height: 22px;
+  margin: 0 0 0 58px;
+  display: flex;
+  align-items: center;
+}
+
+.detail-audio-progress-hit.disabled {
+  opacity: 0.42;
+}
+
+.detail-audio-progress {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  overflow: visible;
+  background: #94948f;
+  border-radius: 2px;
+}
+
+.detail-audio-progress-fill {
+  width: 0;
+  height: 100%;
+  background: #e0e100;
+  border-radius: inherit;
+}
+
+.detail-audio-progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #141412;
+  transform: translate(-50%, -50%);
+}
+
+.detail-audio-progress.is-indeterminate {
+  width: calc(100% - 58px);
+  height: 4px;
+  margin: 8px 0 0 58px;
+  overflow: hidden;
+  background: #deded6;
+}
+
+.detail-audio-progress.is-indeterminate::after {
+  display: block;
+  width: 38%;
+  height: 100%;
+  content: '';
+  background: #e0e100;
+  animation: audio-indeterminate 1.1s ease-in-out infinite;
+}
+
+.audio-loading-spinner {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: 2px solid rgba(20, 20, 18, 0.28);
+  border-top-color: #141412;
+  border-radius: 50%;
+  animation: audio-spinner 0.8s linear infinite;
+}
+
+@keyframes audio-spinner { to { transform: rotate(360deg); } }
+@keyframes audio-indeterminate { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
+
 @media (min-width: 420px) {
   .immersive-hero {
     padding-right: 24px;
@@ -1181,5 +1268,10 @@ const handleBack = () => {
     padding-right: 16px;
     padding-left: 16px;
   }
+
+  .detail-audio-dock {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
 }
 </style>

tests/unit/ExhibitDetailAudioFirst.spec.ts

@@ -12,13 +12,16 @@ const mocks = vi.hoisted(() => ({
   play: vi.fn(),
   pause: vi.fn(),
   resume: vi.fn(),
-  close: vi.fn()
+  close: vi.fn(),
+  seekToPercent: vi.fn()
 }))
 
 const audioState = vi.hoisted(() => ({
   currentAudio: { value: null as any },
   currentSource: { value: null as any },
   playing: { value: false },
+  loading: { value: false },
+  error: { value: '' },
   currentTime: { value: 0 },
   duration: { value: 0 }
 }))
@@ -52,7 +55,8 @@ vi.mock('@/composables/useGlobalAudioPlayer', () => ({
     pause: mocks.pause,
     resume: mocks.resume,
     switchLanguage: vi.fn(),
-    close: mocks.close
+    close: mocks.close,
+    seekToPercent: mocks.seekToPercent
   })
 }))
 
@@ -88,6 +92,13 @@ const exhibit = {
 describe('讲解详情音频优先布局', () => {
   beforeEach(() => {
     mocks.onLoadHandler = null
+    audioState.currentAudio.value = null
+    audioState.currentSource.value = null
+    audioState.playing.value = false
+    audioState.loading.value = false
+    audioState.error.value = ''
+    audioState.currentTime.value = 0
+    audioState.duration.value = 0
     mocks.enterExplainDetail.mockResolvedValue(exhibit)
     mocks.loadExplainDetailText.mockResolvedValue({ available: false })
     mocks.selectAudioForExplainDetail.mockResolvedValue({
@@ -102,7 +113,12 @@ describe('讲解详情音频优先布局', () => {
       playInfo: { title: exhibit.name }
     })
     mocks.play.mockResolvedValue(undefined)
-    vi.stubGlobal('uni', { showToast: vi.fn(), navigateBack: vi.fn() })
+    vi.stubGlobal('uni', {
+      showToast: vi.fn(),
+      navigateBack: vi.fn(),
+      redirectTo: vi.fn(),
+      reLaunch: vi.fn()
+    })
   })
 
   afterEach(() => {
@@ -110,7 +126,7 @@ describe('讲解详情音频优先布局', () => {
     vi.unstubAllGlobals()
   })
 
-  it('将展品身份、流内播放器、语言栏和英文正文按顺序渲染', async () => {
+  it('正常状态渲染固定底部播放器、语言栏和英文正文', async () => {
     const wrapper = mount(ExhibitDetail, {
       global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
     })
@@ -122,8 +138,8 @@ describe('讲解详情音频优先布局', () => {
     expect(wrapper.get('.detail-audio-title').text()).toBe('Classical Astrolabe')
     expect(wrapper.get('.detail-meta').text()).toContain('Universe Hall · B2')
     expect(wrapper.get('.detail-chip').text()).toBe('标准解说')
-    expect(wrapper.find('.detail-audio-control').exists()).toBe(true)
+    expect(wrapper.find('.detail-audio-dock').exists()).toBe(true)
-    expect(wrapper.find('.detail-audio-dock').exists()).toBe(false)
+    expect(wrapper.get('.detail-audio-dock').classes()).toContain('is-playable')
     expect(wrapper.find('.language-switch').text()).toContain('English')
     expect(wrapper.get('.content-section').classes()).toContain('is-english')
     expect(wrapper.get('.section-title').text()).toBe('Transcript')
@@ -145,7 +161,23 @@ describe('讲解详情音频优先布局', () => {
     }), expect.objectContaining({ displayMode: 'mini' }))
   })
 
-  it('音频不可用时只在音频控制区显示一次提示', async () => {
+  it('加载中使用同一高度底栏和不确定进度', async () => {
+    audioState.currentAudio.value = { id: 'audio-1' }
+    audioState.currentSource.value = { targetType: 'STOP', targetId: 'stop-1', lang: 'en-US' }
+    audioState.loading.value = true
+    const wrapper = mount(ExhibitDetail, {
+      global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
+    })
+
+    await mocks.onLoadHandler?.({ id: exhibit.id, lang: 'en-US', targetType: 'STOP', targetId: 'stop-1' })
+    await flushPromises()
+
+    expect(wrapper.get('.detail-audio-dock').classes()).toContain('is-loading')
+    expect(wrapper.find('.audio-loading-spinner').exists()).toBe(true)
+    expect(wrapper.find('.detail-audio-progress.is-indeterminate').exists()).toBe(true)
+  })
+
+  it('无音频时禁用播放按钮并显示原因', async () => {
     mocks.enterExplainDetail.mockResolvedValue({
       ...exhibit,
       audioUrl: undefined,
@@ -162,8 +194,47 @@ describe('讲解详情音频优先布局', () => {
     await mocks.onLoadHandler?.({ id: exhibit.id, lang: 'yue-HK', targetType: 'STOP', targetId: 'stop-1' })
     await flushPromises()
 
-    expect(wrapper.find('.detail-audio-unavailable').text()).toBe('当前语言暂无语音讲解。')
+    expect(wrapper.get('.detail-audio-dock').classes()).toContain('is-unavailable')
-    expect(wrapper.find('.audio-status-hint').exists()).toBe(false)
+    expect(wrapper.get('.detail-audio-play').attributes('disabled')).toBeDefined()
-    expect(wrapper.findAll('.section-hint')).toHaveLength(0)
+    expect(wrapper.get('.detail-audio-subtitle').text()).toContain('当前语言暂无语音讲解。')
+  })
+
+  it('播放失败显示错误并通过既有刷新链路重试', async () => {
+    audioState.currentAudio.value = { id: 'audio-1', audioUrl: exhibit.audioUrl }
+    audioState.currentSource.value = { targetType: 'STOP', targetId: 'stop-1', lang: 'en-US' }
+    audioState.error.value = '音频暂时无法播放'
+    mocks.selectAudioForExplainDetail.mockResolvedValue({
+      playable: true,
+      exhibit,
+      media: { id: 'audio-refresh', url: exhibit.audioUrl, duration: exhibit.audioDuration, language: 'en-US' },
+      playInfo: { title: exhibit.name }
+    })
+    const wrapper = mount(ExhibitDetail, {
+      global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
+    })
+
+    await mocks.onLoadHandler?.({ id: exhibit.id, lang: 'en-US', targetType: 'STOP', targetId: 'stop-1' })
+    await flushPromises()
+    expect(wrapper.get('.detail-audio-dock').classes()).toContain('is-failed')
+    expect(wrapper.get('.detail-audio-retry').text()).toBe('重试')
+
+    await wrapper.get('.detail-audio-retry').trigger('tap')
+    await flushPromises()
+    expect(mocks.selectAudioForExplainDetail).toHaveBeenCalledWith(expect.any(Object), { refreshPlayInfo: true })
+    expect(mocks.play).toHaveBeenCalledWith(expect.objectContaining({ id: 'audio-refresh' }), expect.objectContaining({
+      retryOnError: expect.any(Function),
+      displayMode: 'mini'
+    }))
+  })
+
+  it('顶部返回统一使用页面栈，以便导览首页 onShow 消费复位上下文', async () => {
+    const wrapper = mount(ExhibitDetail, {
+      global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
+    })
+
+    wrapper.getComponent(GuidePageFrameStub).vm.$emit('back')
+    await flushPromises()
+
+    expect(uni.navigateBack).toHaveBeenCalledWith(expect.objectContaining({ delta: 1 }))
   })
 })