From 9cdb2c08b2b8a3fc39ab4907e7759b93ce3ce829 Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Wed, 8 Jul 2026 21:22:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AE=B2=E8=A7=A3=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E9=9F=B3=E9=A2=91=E6=92=AD=E6=94=BE=E5=99=A8=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/audio/AudioPlayer.vue          | 778 +++++++++++---
 .../audio/GlobalAudioPlayerHost.vue           |  77 +-
 src/components/navigation/GuidePageFrame.vue  |  12 +-
 src/composables/useGlobalAudioPlayer.ts       | 188 +++-
 src/data/adapters/guideDataAdapter.ts         |  12 +-
 src/data/providers/staticGuideDataProvider.ts |   5 +
 src/pages/exhibit/detail.vue                  | 956 ++++++++++++++----
 src/pages/facility/detail.vue                 |   1 +
 src/pages/index/index.vue                     |   1 +
 src/pages/route/detail.vue                    |   1 +
 src/pages/search/index.vue                    |   5 +
 src/usecases/explainUseCase.ts                |   3 +-
 12 files changed, 1715 insertions(+), 324 deletions(-)

diff --git a/src/components/audio/AudioPlayer.vue b/src/components/audio/AudioPlayer.vue
index cea5a16..838ecde 100644
--- a/src/components/audio/AudioPlayer.vue
+++ b/src/components/audio/AudioPlayer.vue
@@ -1,84 +1,181 @@
 <template>
   <view class="audio-player-host">
-  <view
-    class="audio-player"
-    :class="{ 'avoid-bottom-nav': avoidBottomNav }"
-    v-if="visible && displayAudio"
-  >
-    <!-- 迷你播放器 (底部固定) -->
-    <view class="mini-player" @tap="handleExpand">
-      <!-- 封面图 -->
-      <view class="player-cover">
-        <image 
-          class="cover-image" 
-          :src="displayAudio?.image || EXHIBIT_PLACEHOLDER_IMAGE" 
-          mode="aspectFill" 
-        />
+    <view
+      v-if="visible && displayAudio"
+      class="audio-player"
+      :class="[`mode-${displayMode}`, { 'avoid-bottom-nav': avoidBottomNav }]"
+    >
+      <view v-if="displayMode === 'expanded'" class="expanded-player">
+        <view class="player-handle"></view>
+        <view class="expanded-main">
+          <image
+            v-if="displayAudio.image"
+            class="expanded-cover"
+            :src="displayAudio.image"
+            mode="aspectFill"
+          />
+          <view class="expanded-copy">
+            <text class="player-kicker">讲解音频</text>
+            <text class="expanded-title">{{ displayAudio.name }}</text>
+            <text class="expanded-subtitle" :class="{ error: displayPlaybackError }">{{ expandedSubtitle }}</text>
+          </view>
+          <view class="expanded-side">
+            <view
+              v-if="isLanguageSwitchable"
+              class="player-language-switch expanded-language"
+              @tap.stop
+            >
+              <view
+                v-for="option in audioLanguageOptions"
+                :key="option.value"
+                class="player-language-option"
+                :class="{
+                  active: effectiveAudioLanguage === option.value,
+                  pending: displayPendingLanguage === option.value,
+                  disabled: isLanguagePending && displayPendingLanguage !== option.value
+                }"
+                @tap.stop="handleLanguageChange(option.value)"
+              >
+                <text class="player-language-text">{{ formatLanguageOptionText(option) }}</text>
+              </view>
+            </view>
+            <view v-else class="player-language-state expanded-language">
+              <text class="player-language-text">{{ displayAudioLanguageShort }}</text>
+            </view>
+            <view class="control-btn play-btn expanded-play" @tap.stop="togglePlay">
+              <svg v-if="displayPlaying" width="30" height="30" 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="30" height="30" viewBox="0 0 24 24" fill="none">
+                <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
+              </svg>
+            </view>
+          </view>
+        </view>
+
+        <view class="expanded-progress-row">
+          <text class="time-text active">{{ formattedCurrentTime }}</text>
+          <view class="progress-track expanded-track" @tap="handleSeek">
+            <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
+            <view class="progress-thumb" :style="{ left: progressPercent + '%' }"></view>
+          </view>
+          <text class="time-text">{{ formattedDuration }}</text>
+        </view>
+
+        <view class="expanded-actions">
+          <view class="action-btn collapse-action" @tap.stop="handleCollapse">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M6 15L12 9L18 15" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <text class="action-text">收起</text>
+          </view>
+          <view class="action-divider"></view>
+          <view class="action-btn stop-action" @tap.stop="handleStop">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <rect x="7" y="7" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            <text class="action-text">停止播放</text>
+          </view>
+        </view>
       </view>
-      
-      <!-- 播放信息 -->
-      <view class="player-info">
-        <text class="player-title">{{ displayAudio?.name || '讲解音频' }}</text>
-        <text class="player-subtitle" :class="{ error: displayPlaybackError }">{{ playerSubtitle }}</text>
+
+      <view v-else-if="displayMode === 'floating'" class="floating-player" @tap="handleExpand">
+        <view class="floating-ring" :style="{ '--progress': progressPercent + '%' }">
+          <view class="control-btn floating-play" @tap.stop="togglePlay">
+            <svg v-if="displayPlaying" width="24" height="24" 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="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
+            </svg>
+          </view>
+          <text class="floating-label">讲解</text>
+          <text class="floating-lang">{{ displayAudioLanguageShort }}</text>
+        </view>
       </view>
-      
-      <!-- 播放/暂停按钮 -->
-      <view class="player-controls">
-        <view class="control-btn play-btn" @tap.stop="togglePlay">
-          <svg v-if="displayPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none">
+
+      <view v-else class="mini-player" @tap="handleExpand">
+        <view class="control-btn play-btn mini-play" @tap.stop="togglePlay">
+          <svg v-if="displayPlaying" 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="24" height="24" viewBox="0 0 24 24" fill="none">
+          <svg v-else width="26" height="26" viewBox="0 0 24 24" fill="none">
             <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
           </svg>
         </view>
-        
-        <!-- 关闭按钮 -->
-        <view class="control-btn close-btn" @tap.stop="handleClose">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+
+        <view class="mini-copy">
+          <text class="player-kicker">讲解音频</text>
+          <text class="mini-title">{{ displayAudio.name }}</text>
+        </view>
+
+        <view class="mini-progress">
+          <view class="progress-track" @tap.stop="handleSeek">
+            <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
+          </view>
+        </view>
+
+        <view v-if="isLanguageSwitchable" class="player-language-switch mini-language" @tap.stop>
+          <view
+            v-for="option in audioLanguageOptions"
+            :key="option.value"
+            class="player-language-option"
+            :class="{
+              active: effectiveAudioLanguage === option.value,
+              pending: displayPendingLanguage === option.value,
+              disabled: isLanguagePending && displayPendingLanguage !== option.value
+            }"
+            @tap.stop="handleLanguageChange(option.value)"
+          >
+            <text class="player-language-text">{{ formatLanguageOptionText(option) }}</text>
+          </view>
+        </view>
+        <view v-else class="player-language-state mini-language">
+          <text class="player-language-text">{{ displayAudioLanguageShort }}</text>
+        </view>
+
+        <view class="expand-action">
+          <text class="expand-text">展开</text>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none">
+            <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </view>
       </view>
     </view>
-    
-    <!-- 播放进度条 -->
-    <view class="progress-bar">
-      <view class="progress-track" @tap="handleSeek">
-        <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
-        <view class="progress-thumb" :style="{ left: progressPercent + '%' }"></view>
-      </view>
-    </view>
-  </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import {
-  EXHIBIT_PLACEHOLDER_IMAGE
-} from '@/utils/placeholders'
-
 export interface AudioItem {
   id: string
   name: string
   audioUrl: string
   image?: string
   duration?: number
+  language?: AudioLanguage
+  supportedLanguages?: AudioLanguage[]
 }
 
+export type AudioLanguage = 'zh-CN' | 'en-US'
+export type AudioDisplayMode = 'expanded' | 'mini' | 'floating'
+
 const props = defineProps<{
   visible?: boolean
   audio?: AudioItem | null
   autoPlay?: boolean
   avoidBottomNav?: boolean
+  mode?: AudioDisplayMode
   controlled?: boolean
   playing?: boolean
   loading?: boolean
   playbackError?: string
   currentTime?: number
   durationValue?: number
+  pendingLanguage?: AudioLanguage | ''
 }>()
 
 const emit = defineEmits<{
@@ -90,8 +187,11 @@ const emit = defineEmits<{
   error: [audio: AudioItem | null, message: string]
   toggle: []
   close: []
+  collapse: []
+  stop: []
   expand: []
   seek: [percent: number]
+  'language-change': [language: AudioLanguage]
 }>()
 
 // 状态
@@ -129,15 +229,39 @@ const displayPlaying = computed(() => props.controlled ? props.playing === true
 const displayLoading = computed(() => props.controlled ? props.loading === true : isLoading.value)
 const displayPlaybackError = computed(() => props.controlled ? props.playbackError || '' : localPlaybackError.value)
 const displayCurrentTime = computed(() => props.controlled ? props.currentTime || 0 : localCurrentTime.value)
+const displayMode = computed<AudioDisplayMode>(() => props.mode || 'mini')
+const audioLanguageOptions: Array<{ value: AudioLanguage; label: string; shortLabel: string }> = [
+  { value: 'zh-CN', label: '中文', shortLabel: '中文' },
+  { value: 'en-US', label: 'English', shortLabel: 'EN' }
+]
+const displayAudioLanguage = computed<AudioLanguage>(() => (
+  displayAudio.value?.language === 'en-US' ? 'en-US' : 'zh-CN'
+))
+const supportedAudioLanguages = computed(() => {
+  const languages = displayAudio.value?.supportedLanguages?.length
+    ? displayAudio.value.supportedLanguages
+    : [displayAudioLanguage.value]
 
-const playerSubtitle = computed(() => {
+  return Array.from(new Set(languages.filter((language): language is AudioLanguage => (
+    language === 'zh-CN' || language === 'en-US'
+  ))))
+})
+const isLanguageSwitchable = computed(() => supportedAudioLanguages.value.length > 1)
+const displayPendingLanguage = computed<AudioLanguage | ''>(() => props.pendingLanguage || '')
+const effectiveAudioLanguage = computed<AudioLanguage>(() => (
+  displayPendingLanguage.value || displayAudioLanguage.value
+))
+const isLanguagePending = computed(() => Boolean(displayPendingLanguage.value))
+const displayAudioLanguageShort = computed(() => (
+  displayAudioLanguage.value === 'en-US' ? 'EN' : '中文'
+))
+const formattedCurrentTime = computed(() => formatTime(displayCurrentTime.value))
+const formattedDuration = computed(() => formatTime(resolvedDuration.value))
+const expandedSubtitle = computed(() => {
   if (displayPlaybackError.value) return displayPlaybackError.value
   if (displayLoading.value) return '音频加载中'
-  if (!displayAudio.value) return '请选择讲解'
-  if (resolvedDuration.value > 0) {
-    return `${formatTime(displayCurrentTime.value)} / ${formatTime(resolvedDuration.value)}`
-  }
-  return displayPlaying.value ? '正在播放' : '点击播放按钮开始'
+  if (!displayAudio.value?.audioUrl) return '当前语言暂无语音讲解'
+  return displayAudioLanguage.value === 'en-US' ? '英文语音讲解' : '中文语音讲解'
 })
 
 // 格式化时间
@@ -147,6 +271,10 @@ const formatTime = (seconds: number): string => {
   return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 
+const formatLanguageOptionText = (option: { shortLabel: string; value: AudioLanguage }) => (
+  displayPendingLanguage.value === option.value ? `${option.shortLabel}...` : option.shortLabel
+)
+
 // 初始化音频上下文
 const initAudio = () => {
   if (h5AudioElement.value) return
@@ -427,17 +555,18 @@ const handleExpand = () => {
   emit('expand')
 }
 
-// 关闭播放器
-const handleClose = () => {
+const handleCollapse = () => {
+  emit('collapse')
+}
+
+const handleStop = () => {
   if (props.controlled) {
-    emit('close')
-    emit('update:visible', false)
+    emit('stop')
     return
   }
 
   stopAudio()
-  emit('update:visible', false)
-  emit('close')
+  emit('stop')
 }
 
 const handleH5LoadedMetadata = () => {
@@ -455,6 +584,12 @@ const handleH5Play = () => {
   }
 }
 
+const handleLanguageChange = (language: AudioLanguage) => {
+  if (isLanguagePending.value) return
+  if (!supportedAudioLanguages.value.includes(language) || language === displayAudioLanguage.value) return
+  emit('language-change', language)
+}
+
 const handleH5Pause = () => {
   isPlaying.value = false
   if (currentAudio.value) {
@@ -558,84 +693,160 @@ defineExpose({
 }
 
 .audio-player {
+  --audio-accent: #e0e100;
+  --audio-surface: #050505;
+  --audio-text: #ffffff;
+  --audio-muted: rgba(255, 255, 255, 0.68);
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  left: 50%;
+  right: auto;
+  bottom: calc(12px + env(safe-area-inset-bottom));
+  z-index: 2200;
+  width: calc(min(100vw, 430px) - 28px);
   box-sizing: border-box;
-  background-color: var(--museum-bg-surface);
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  padding-bottom: env(safe-area-inset-bottom);
+  transform: translateX(-50%);
+  color: var(--audio-text);
+  font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
 .audio-player.avoid-bottom-nav {
   bottom: calc(82px + env(safe-area-inset-bottom));
-  padding-bottom: 0;
 }
 
-@media (min-width: 768px) {
-  .audio-player {
-    left: 50%;
-    right: auto;
-    width: 430px;
-    transform: translateX(-50%);
-  }
+.audio-player.mode-floating {
+  left: auto;
+  right: max(16px, calc((100vw - 430px) / 2 + 16px));
+  bottom: calc(102px + env(safe-area-inset-bottom));
+  width: 116px;
+  transform: none;
 }
 
-.mini-player {
-  display: flex;
+.audio-player.mode-floating.avoid-bottom-nav {
+  bottom: calc(104px + env(safe-area-inset-bottom));
+}
+
+.expanded-player,
+.mini-player,
+.floating-ring {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 14% 18%, rgba(224, 225, 0, 0.08), transparent 28%),
+    linear-gradient(135deg, #161714 0%, #050505 100%);
+  border: 1px solid rgba(224, 225, 0, 0.2);
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
+}
+
+.expanded-player::after,
+.mini-player::after,
+.floating-ring::after {
+  content: '';
+  position: absolute;
+  inset: auto -24px -42px auto;
+  width: 150px;
+  height: 110px;
+  border: 1px solid rgba(224, 225, 0, 0.13);
+  border-radius: 50%;
+  transform: rotate(-16deg);
+  pointer-events: none;
+}
+
+.mini-player::after {
+  inset: auto 8px 8px auto;
+  width: 120px;
+  height: 78px;
+}
+
+.expanded-player {
+  min-height: 292px;
+  padding: 28px 22px 16px;
+  box-sizing: border-box;
+  border-radius: 24px;
+}
+
+.player-handle {
+  position: absolute;
+  top: 11px;
+  left: 50%;
+  width: 54px;
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.22);
+  transform: translateX(-50%);
+}
+
+.expanded-main {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 14px 16px;
   align-items: center;
-  padding: 12px 16px;
-  gap: 12px;
 }
 
-.player-cover {
-  flex-shrink: 0;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-small);
-  overflow: hidden;
-  background-color: var(--museum-bg-light);
+.expanded-cover {
+  width: 92px;
+  height: 92px;
+  border-radius: 14px;
+  background: #262421;
 }
 
-.cover-image {
-  width: 100%;
-  height: 100%;
+.expanded-copy,
+.mini-copy {
+  min-width: 0;
 }
 
-.player-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
+.player-kicker,
+.expanded-title,
+.expanded-subtitle,
+.mini-title,
+.time-text,
+.action-text,
+.floating-label,
+.floating-lang,
+.expand-text {
+  display: block;
 }
 
-.player-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--museum-text-primary);
+.player-kicker {
+  font-size: 17px;
+  line-height: 23px;
+  font-weight: 900;
+  color: #ffffff;
+}
+
+.expanded-title {
+  margin-top: 8px;
+  font-size: 30px;
+  line-height: 37px;
+  font-weight: 900;
+  color: #ffffff;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.player-subtitle {
-  font-size: 12px;
-  color: var(--museum-text-secondary);
-  margin-top: 2px;
+.expanded-subtitle {
+  margin-top: 3px;
+  font-size: 15px;
+  line-height: 21px;
+  color: var(--audio-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.player-subtitle.error {
-  color: #9b3d2e;
+.expanded-subtitle.error {
+  color: #ffb0a2;
 }
 
-.player-controls {
-  flex-shrink: 0;
+.expanded-side {
+  grid-column: 1 / -1;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .control-btn {
@@ -643,60 +854,365 @@ defineExpose({
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
-  
+  transition: transform 0.2s ease, opacity 0.2s ease;
+
   &:active {
-    transform: scale(0.9);
-    opacity: 0.8;
+    transform: scale(0.92);
+    opacity: 0.84;
   }
 }
 
-.play-btn {
-  width: 40px;
-  height: 40px;
-  background-color: var(--museum-accent);
+.play-btn,
+.floating-play {
+  flex-shrink: 0;
+  background: var(--audio-accent);
+  color: #050505;
   border-radius: 50%;
-  color: var(--museum-text-primary);
 }
 
-.close-btn {
-  width: 32px;
-  height: 32px;
-  color: var(--museum-text-secondary);
+.expanded-play {
+  width: 64px;
+  height: 64px;
 }
 
-.progress-bar {
-  width: 100%;
-  padding: 0 16px 12px;
+.expanded-progress-row {
+  position: relative;
+  z-index: 1;
+  margin-top: 22px;
+  display: grid;
+  grid-template-columns: 66px minmax(0, 1fr) 58px;
+  gap: 12px;
+  align-items: center;
+}
+
+.time-text {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.66);
+}
+
+.time-text.active {
+  color: var(--audio-accent);
 }
 
 .progress-track {
   position: relative;
   width: 100%;
-  height: 4px;
-  background-color: var(--museum-border-light);
-  border-radius: 2px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.24);
+  border-radius: 999px;
   cursor: pointer;
 }
 
 .progress-fill {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0 auto 0 0;
   height: 100%;
-  background-color: var(--museum-accent);
-  border-radius: 2px;
+  background: var(--audio-accent);
+  border-radius: inherit;
   transition: width 0.1s linear;
 }
 
 .progress-thumb {
   position: absolute;
   top: 50%;
-  transform: translate(-50%, -50%);
-  width: 12px;
-  height: 12px;
-  background-color: var(--museum-accent);
+  width: 18px;
+  height: 18px;
+  background: var(--audio-accent);
   border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
+  transform: translate(-50%, -50%);
+}
+
+.expanded-actions {
+  position: relative;
+  z-index: 1;
+  margin-top: 24px;
+  padding-top: 15px;
+  display: grid;
+  grid-template-columns: 1fr 1px 1fr;
+  align-items: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.action-btn {
+  min-width: 0;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  color: #ffffff;
+}
+
+.stop-action {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.action-divider {
+  width: 1px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.action-text {
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 800;
+  color: currentColor;
+}
+
+.mini-player {
+  min-height: 116px;
+  padding: 12px 14px 14px;
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "play spacer language expand"
+    "copy copy copy copy"
+    "progress progress progress progress";
+  column-gap: 10px;
+  row-gap: 7px;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 30px;
+}
+
+.mini-play {
+  grid-area: play;
+  width: 56px;
+  height: 56px;
+}
+
+.mini-copy {
+  grid-area: copy;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.mini-copy .player-kicker {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.mini-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-top: 2px;
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 900;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mini-progress {
+  grid-area: progress;
+  min-width: 0;
+  width: 100%;
+}
+
+.mini-progress .progress-track {
+  height: 4px;
+}
+
+.player-language-state,
+.player-language-switch {
+  flex-shrink: 0;
+  min-width: 56px;
+  height: 34px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 999px;
+  border: 1px solid rgba(224, 225, 0, 0.52);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--audio-accent);
+}
+
+.mini-language {
+  grid-area: language;
+  justify-self: end;
+}
+
+.player-language-switch {
+  min-width: 92px;
+  padding: 3px;
+  justify-content: flex-start;
+  gap: 2px;
+}
+
+.player-language-option {
+  min-width: 40px;
+  height: 26px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 999px;
+  color: #ffffff;
+}
+
+.player-language-option.active {
+  background: var(--audio-accent);
+  color: #050505;
+}
+
+.player-language-option.pending {
+  background: rgba(224, 225, 0, 0.76);
+  color: #050505;
+  box-shadow: 0 0 0 1px rgba(224, 225, 0, 0.26);
+}
+
+.player-language-option.disabled {
+  opacity: 0.52;
+}
+
+.player-language-text {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 900;
+  color: currentColor;
+}
+
+.expand-action {
+  grid-area: expand;
+  min-width: 70px;
+  height: 42px;
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  box-sizing: border-box;
+  border-left: 1px solid rgba(255, 255, 255, 0.16);
+  color: #ffffff;
+}
+
+.expand-text {
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 900;
+  color: currentColor;
+}
+
+.floating-player {
+  width: 116px;
+  height: 116px;
+}
+
+.floating-ring {
+  width: 116px;
+  height: 116px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+
+.floating-ring::before {
+  content: '';
+  position: absolute;
+  inset: 8px;
+  border-radius: 50%;
+  background:
+    conic-gradient(var(--audio-accent) 0 var(--progress), rgba(255, 255, 255, 0.24) var(--progress) 100%);
+  mask: radial-gradient(circle, transparent 65%, #000 66%);
+  pointer-events: none;
+}
+
+.floating-play {
+  position: relative;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+}
+
+.floating-label {
+  position: relative;
+  z-index: 1;
+  margin-top: 7px;
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 900;
+  color: #ffffff;
+}
+
+.floating-lang {
+  position: relative;
+  z-index: 1;
+  min-width: 46px;
+  height: 23px;
+  margin-top: 2px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid rgba(224, 225, 0, 0.7);
+  border-radius: 999px;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 900;
+  color: var(--audio-accent);
+}
+
+@media (min-width: 768px) {
+  .audio-player:not(.mode-floating) {
+    width: 402px;
+  }
+}
+
+@media (max-width: 390px) {
+  .expanded-player {
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+
+  .expanded-main {
+    grid-template-columns: 76px minmax(0, 1fr);
+  }
+
+  .expanded-cover {
+    width: 76px;
+    height: 76px;
+  }
+
+  .expanded-title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+
+  .mini-player {
+    min-height: 110px;
+    padding: 10px 12px 12px;
+    grid-template-columns: 50px minmax(0, 1fr) auto;
+    grid-template-areas:
+      "play language expand"
+      "copy copy copy"
+      "progress progress progress";
+    column-gap: 8px;
+    row-gap: 6px;
+  }
+
+  .mini-play {
+    width: 50px;
+    height: 50px;
+  }
+
+  .mini-title {
+    font-size: 21px;
+    line-height: 27px;
+  }
 }
 </style>
diff --git a/src/components/audio/GlobalAudioPlayerHost.vue b/src/components/audio/GlobalAudioPlayerHost.vue
index d374743..d354765 100644
--- a/src/components/audio/GlobalAudioPlayerHost.vue
+++ b/src/components/audio/GlobalAudioPlayerHost.vue
@@ -9,21 +9,36 @@
     :playback-error="error"
     :current-time="currentTime"
     :duration-value="duration"
-    avoid-bottom-nav
+    :pending-language="pendingLanguage"
+    :avoid-bottom-nav="avoidBottomNav"
+    :mode="currentDisplayMode"
     @toggle="handleToggle"
-    @close="player.close"
+    @collapse="handleCollapse"
+    @stop="handleStop"
     @seek="player.seekToPercent"
     @expand="handleExpand"
+    @language-change="handleLanguageChange"
     @update:visible="handleVisibleChange"
   />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
-import AudioPlayer from '@/components/audio/AudioPlayer.vue'
+import AudioPlayer, {
+  type AudioDisplayMode,
+  type AudioLanguage
+} from '@/components/audio/AudioPlayer.vue'
 import { useGlobalAudioPlayer } from '@/composables/useGlobalAudioPlayer'
 
+const props = withDefaults(defineProps<{
+  avoidBottomNav?: boolean
+  displayMode?: AudioDisplayMode
+}>(), {
+  avoidBottomNav: true,
+  displayMode: 'mini'
+})
+
 const player = useGlobalAudioPlayer()
 const {
   currentAudio,
@@ -34,14 +49,14 @@ const {
   error,
   currentTime,
   duration,
-  activeHostId,
+  displayMode: currentDisplayMode,
+  pendingLanguage,
   hasAudio
 } = player
 const hostId = player.registerHost()
 const isHostVisible = computed(() => (
   visible.value
   && hasAudio.value
-  && activeHostId.value === hostId
 ))
 
 const handleToggle = () => {
@@ -53,15 +68,46 @@ const handleToggle = () => {
   void player.resume()
 }
 
+const applyHostDisplayMode = () => {
+  if (!hasAudio.value || currentDisplayMode.value === 'expanded') {
+    return
+  }
+
+  if (props.displayMode === 'mini' || props.displayMode === 'floating') {
+    player.setDisplayMode(props.displayMode)
+  }
+}
+
+const handleStop = () => {
+  player.stop()
+}
+
+const handleCollapse = () => {
+  player.collapse(props.displayMode === 'floating' ? 'floating' : 'mini')
+}
+
+const handleLanguageChange = (language: AudioLanguage) => {
+  void player.switchLanguage(language)
+}
+
 const handleVisibleChange = (visible: boolean) => {
-  if (!visible) {
-    player.close()
+  if (!visible && hasAudio.value) {
+    player.collapse(props.displayMode === 'floating' ? 'floating' : 'mini')
   }
 }
 
 const handleExpand = () => {
+  if (currentDisplayMode.value === 'floating') {
+    player.setDisplayMode('mini')
+    return
+  }
+
+  player.setDisplayMode('expanded')
+
   const route = currentSource.value?.detailRoute
-  if (!route) return
+  if (!route) {
+    return
+  }
 
   uni.navigateTo({
     url: route
@@ -70,13 +116,26 @@ const handleExpand = () => {
 
 onMounted(() => {
   player.activateHost(hostId)
+  applyHostDisplayMode()
 })
 
 onShow(() => {
   player.activateHost(hostId)
+  applyHostDisplayMode()
 })
 
 onUnmounted(() => {
   player.unregisterHost(hostId)
 })
+
+watch(
+  () => props.displayMode,
+  () => {
+    applyHostDisplayMode()
+  }
+)
+
+watch(hasAudio, () => {
+  applyHostDisplayMode()
+})
 </script>
diff --git a/src/components/navigation/GuidePageFrame.vue b/src/components/navigation/GuidePageFrame.vue
index 68a30ff..ca919ac 100644
--- a/src/components/navigation/GuidePageFrame.vue
+++ b/src/components/navigation/GuidePageFrame.vue
@@ -32,13 +32,17 @@
     <view class="guide-page-frame-body">
       <slot></slot>
     </view>
-    <GlobalAudioPlayerHost />
+    <GlobalAudioPlayerHost
+      :avoid-bottom-nav="audioPlayerAvoidBottomNav"
+      :display-mode="audioPlayerMode"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
 import GuideTopTabs from '@/components/navigation/GuideTopTabs.vue'
 import GlobalAudioPlayerHost from '@/components/audio/GlobalAudioPlayerHost.vue'
+import type { AudioDisplayMode } from '@/components/audio/AudioPlayer.vue'
 import type { GuideTopTab } from '@/utils/guideTopTabs'
 
 withDefaults(defineProps<{
@@ -51,6 +55,8 @@ withDefaults(defineProps<{
   showCancel?: boolean
   backLabel?: string
   cancelLabel?: string
+  audioPlayerAvoidBottomNav?: boolean
+  audioPlayerMode?: AudioDisplayMode
 }>(), {
   activeTab: 'guide',
   variant: 'overlay',
@@ -60,7 +66,9 @@ withDefaults(defineProps<{
   showBack: false,
   showCancel: false,
   backLabel: '返回',
-  cancelLabel: '取消'
+  cancelLabel: '取消',
+  audioPlayerAvoidBottomNav: true,
+  audioPlayerMode: 'mini'
 })
 
 const emit = defineEmits<{
diff --git a/src/composables/useGlobalAudioPlayer.ts b/src/composables/useGlobalAudioPlayer.ts
index 358bcf1..4702573 100644
--- a/src/composables/useGlobalAudioPlayer.ts
+++ b/src/composables/useGlobalAudioPlayer.ts
@@ -1,6 +1,12 @@
 import { computed, ref } from 'vue'
-import type { AudioItem } from '@/components/audio/AudioPlayer.vue'
-import type { AudioLanguage } from '@/repositories/AudioPlayInfoRepository'
+import type {
+  AudioDisplayMode,
+  AudioItem
+} from '@/components/audio/AudioPlayer.vue'
+import {
+  audioPlayInfoRepository,
+  type AudioLanguage
+} from '@/repositories/AudioPlayInfoRepository'
 import type { AudioPlayTargetType } from '@/domain/museum'
 
 export interface GlobalAudioSource {
@@ -18,6 +24,7 @@ export interface GlobalAudioPlayOptions {
   source?: GlobalAudioSource
   retryOnError?: GlobalAudioRetryHandler
   retryAttempt?: boolean
+  displayMode?: AudioDisplayMode
 }
 
 const currentAudio = ref<AudioItem | null>(null)
@@ -28,7 +35,11 @@ const loading = ref(false)
 const error = ref('')
 const currentTime = ref(0)
 const duration = ref(0)
+const displayMode = ref<AudioDisplayMode>('mini')
+const pendingLanguage = ref<AudioLanguage | ''>('')
 const activeHostId = ref('')
+const lastClosedSource = ref<GlobalAudioSource | null>(null)
+const closeVersion = ref(0)
 
 let audioElement: HTMLAudioElement | null = null
 let retryOnError: GlobalAudioRetryHandler | null = null
@@ -110,6 +121,8 @@ const resetState = () => {
   error.value = ''
   currentTime.value = 0
   duration.value = 0
+  displayMode.value = 'mini'
+  pendingLanguage.value = ''
   retryOnError = null
   retrying = false
   retryUsed = false
@@ -134,9 +147,52 @@ const stopAudioElement = () => {
   resetStopping()
 }
 
+const stopPlayback = () => {
+  stopAudioElement()
+  playing.value = false
+  loading.value = false
+  pendingLanguage.value = ''
+  currentTime.value = 0
+  duration.value = currentAudio.value?.duration || 0
+}
+
+const updateDetailRouteLanguage = (route: string | undefined, lang: AudioLanguage) => {
+  if (!route) return route
+
+  const [path, rawQuery = ''] = route.split('?')
+  const params = new URLSearchParams(rawQuery)
+  params.set('lang', lang)
+  return `${path}?${params.toString()}`
+}
+
+const toSwitchedAudioItem = (
+  playInfo: Awaited<ReturnType<typeof audioPlayInfoRepository.getPlayInfo>>,
+  lang: AudioLanguage
+): AudioItem => ({
+  id: `play-${playInfo.audioId || `${playInfo.targetType}-${playInfo.targetId}-${lang}`}`,
+  name: currentAudio.value?.name || currentSource.value?.title || playInfo.title || '讲解音频',
+  audioUrl: playInfo.playUrl || '',
+  image: currentAudio.value?.image,
+  duration: typeof playInfo.duration === 'number' ? playInfo.duration : currentAudio.value?.duration,
+  language: lang,
+  supportedLanguages: currentAudio.value?.supportedLanguages
+})
+
 const play = async (audio: AudioItem, options: GlobalAudioPlayOptions = {}) => {
   if (!audio.audioUrl) {
-    handleError('当前语言暂无语音讲解。')
+    const preservedMode = options.displayMode || displayMode.value
+    stopAudioElement()
+    currentAudio.value = audio
+    currentSource.value = options.source || currentSource.value
+    retryOnError = options.retryOnError || retryOnError
+    visible.value = true
+    displayMode.value = preservedMode
+    playing.value = false
+    loading.value = false
+    error.value = '当前语言暂无语音讲解'
+    currentTime.value = 0
+    duration.value = 0
+    showToast(error.value)
     return false
   }
 
@@ -155,6 +211,9 @@ const play = async (audio: AudioItem, options: GlobalAudioPlayOptions = {}) => {
   currentSource.value = options.source || currentSource.value
   retryOnError = options.retryOnError || retryOnError
   visible.value = true
+  if (options.displayMode) {
+    displayMode.value = options.displayMode
+  }
   loading.value = true
   error.value = ''
 
@@ -194,17 +253,122 @@ const resume = () => {
   if (!currentAudio.value) return Promise.resolve(false)
   return play(currentAudio.value, {
     source: currentSource.value || undefined,
-    retryOnError: retryOnError || undefined
+    retryOnError: retryOnError || undefined,
+    displayMode: displayMode.value
   })
 }
 
+const switchLanguage = async (lang: AudioLanguage) => {
+  if (pendingLanguage.value) {
+    return false
+  }
+
+  const source = currentSource.value
+  if (!source?.targetType || !source.targetId) {
+    error.value = '当前讲解暂不支持语言切换'
+    showToast(error.value)
+    return false
+  }
+
+  if (currentAudio.value?.language === lang && source.lang === lang) {
+    return true
+  }
+
+  const preservedMode = displayMode.value
+  pendingLanguage.value = lang
+  loading.value = true
+  error.value = ''
+
+  const nextSource: GlobalAudioSource = {
+    ...source,
+    lang,
+    detailRoute: updateDetailRouteLanguage(source.detailRoute, lang)
+  }
+
+  try {
+    const playInfo = await audioPlayInfoRepository.getPlayInfo({
+      targetType: source.targetType,
+      targetId: source.targetId,
+      lang,
+      refresh: true
+    })
+
+    if (!playInfo.playable || !playInfo.playUrl) {
+      stopAudioElement()
+      currentSource.value = nextSource
+      currentAudio.value = currentAudio.value
+        ? {
+          ...currentAudio.value,
+          id: `unavailable-${source.targetType}-${source.targetId}-${lang}`,
+          audioUrl: '',
+          duration: 0,
+          language: lang
+        }
+        : null
+      visible.value = Boolean(currentAudio.value)
+      displayMode.value = preservedMode
+      playing.value = false
+      loading.value = false
+      currentTime.value = 0
+      duration.value = 0
+      error.value = '当前语言暂无语音讲解'
+      showToast(error.value)
+      return false
+    }
+
+    currentSource.value = nextSource
+    return await play(toSwitchedAudioItem(playInfo, lang), {
+      source: nextSource,
+      retryOnError: retryOnError || undefined,
+      displayMode: preservedMode
+    })
+  } catch (err) {
+    console.warn('讲解音频语言切换失败:', err)
+    stopAudioElement()
+    currentSource.value = nextSource
+    if (currentAudio.value) {
+      currentAudio.value = {
+        ...currentAudio.value,
+        id: `unavailable-${source.targetType}-${source.targetId}-${lang}`,
+        audioUrl: '',
+        duration: 0,
+        language: lang
+      }
+      visible.value = true
+    }
+    displayMode.value = preservedMode
+    playing.value = false
+    loading.value = false
+    currentTime.value = 0
+    duration.value = 0
+    error.value = '当前语言暂无语音讲解'
+    showToast(error.value)
+    return false
+  } finally {
+    pendingLanguage.value = ''
+  }
+}
+
 const stop = () => {
+  stopPlayback()
+}
+
+const close = () => {
+  lastClosedSource.value = currentSource.value ? { ...currentSource.value } : null
+  closeVersion.value += 1
   stopAudioElement()
   resetState()
 }
 
-const close = () => {
-  stop()
+const setDisplayMode = (mode: AudioDisplayMode) => {
+  displayMode.value = mode
+  if (currentAudio.value) {
+    visible.value = true
+  }
+}
+
+const collapse = (mode: AudioDisplayMode = 'mini') => {
+  setDisplayMode(mode)
 }
 
 function handleEnded() {
@@ -230,13 +394,14 @@ async function handleError(message: string) {
       return play(retryAudio, {
         source: currentSource.value || undefined,
         retryOnError: retryOnError || undefined,
-        retryAttempt: true
+        retryAttempt: true,
+        displayMode: displayMode.value
       })
     }
   }
 
   showToast(message || '讲解音频播放失败')
-  stop()
+  stopPlayback()
   return false
 }
 
@@ -287,13 +452,20 @@ export const useGlobalAudioPlayer = () => ({
   error,
   currentTime,
   duration,
+  displayMode,
+  pendingLanguage,
   activeHostId,
+  lastClosedSource,
+  closeVersion,
   hasAudio: computed(() => Boolean(currentAudio.value)),
   play,
   pause,
   resume,
   stop,
   close,
+  setDisplayMode,
+  collapse,
+  switchLanguage,
   handleEnded,
   handleError,
   seekToPercent,
diff --git a/src/data/adapters/guideDataAdapter.ts b/src/data/adapters/guideDataAdapter.ts
index 0bab743..55fa6ca 100644
--- a/src/data/adapters/guideDataAdapter.ts
+++ b/src/data/adapters/guideDataAdapter.ts
@@ -473,6 +473,7 @@ export const createGuideExplainDataAdapter = (dataset: GuideStaticExplainDataset
   const visibleHalls = visibleHallsFrom(dataset.halls)
   const visibleOutlines = visibleOutlinesFrom(dataset.outlines)
   const visibleStops = visibleStopsFrom(dataset.guideStops)
+  const visibleExhibits = dataset.exhibits.filter(isVisibleRecord)
   const visibleGuides = visibleGuidesFrom(dataset.guideContents)
 
   const hallById = new Map(visibleHalls.map((hall) => [stringifyId(hall.id), hall]))
@@ -626,6 +627,10 @@ export const createGuideExplainDataAdapter = (dataset: GuideStaticExplainDataset
     const stop = guide.targetType?.toUpperCase() === 'STOP'
       ? stopById.get(stringifyId(guide.targetId))
       : undefined
+    const linkedExhibit = visibleExhibits.find((exhibit) => (
+      stringifyId(exhibit.id) === stringifyId(guide.exhibitId)
+      || Boolean(stop?.id && stringifyId(exhibit.stopId) === stringifyId(stop.id))
+    ))
     const outline = outlineById.get(stringifyId(stop?.outlineId))
     const hall = findHallForStop(stop)
     const sourcePoiId = stringifyId(guide.poiId || stop?.poiId || hall?.poiId)
@@ -644,7 +649,12 @@ export const createGuideExplainDataAdapter = (dataset: GuideStaticExplainDataset
       hallName: hall?.name || undefined,
       floorId,
       floorLabel: formatFloorLabel(floorId),
-      image: resolveImage(stop?.coverImageUrl, guide.mediaGallery),
+      image: resolveImage(
+        stop?.coverImageUrl,
+        linkedExhibit?.coverImageUrl,
+        linkedExhibit?.galleryUrls,
+        guide.mediaGallery
+      ) || getExplainUnitPreviewImage(stringifyId(outline?.id)),
       description: firstText(guideTextForLanguage(guide, 'zh-CN'), stop?.name),
       poiId: location?.poiId,
       sourcePoiId,
diff --git a/src/data/providers/staticGuideDataProvider.ts b/src/data/providers/staticGuideDataProvider.ts
index ace6120..6b60f13 100644
--- a/src/data/providers/staticGuideDataProvider.ts
+++ b/src/data/providers/staticGuideDataProvider.ts
@@ -237,6 +237,7 @@ export interface GuideStaticExplainDataset {
   halls: GuideStaticHallPayload[]
   outlines: GuideStaticOutlinePayload[]
   guideStops: GuideStaticStopPayload[]
+  exhibits: GuideStaticExhibitPayload[]
   guideContents: GuideStaticContentPayload[]
   poiBridge: GuideStaticPoiBridgePayload
 }
@@ -407,6 +408,7 @@ export const createStaticGuideDataProvider = (
           halls: datasetCache.halls,
           outlines: datasetCache.outlines,
           guideStops: datasetCache.guideStops,
+          exhibits: datasetCache.exhibits,
           guideContents: datasetCache.guideContents,
           poiBridge: datasetCache.poiBridge
         }
@@ -417,9 +419,11 @@ export const createStaticGuideDataProvider = (
       explainDatasetRequest = provider.loadExplainNavigationDataset()
         .then(async (navigationDataset) => {
           const [
+            exhibits,
             guideContents,
             poiBridge
           ] = await Promise.all([
+            requestJson<GuideStaticPackagePayload<GuideStaticExhibitPayload>>(provider.assetUrl(navigationDataset.manifest.files.exhibits)),
             requestJson<GuideStaticPackagePayload<GuideStaticContentPayload>>(provider.assetUrl(navigationDataset.manifest.files.guideContents)),
             navigationDataset.manifest.files.poiBridge
               ? requestJson<GuideStaticPoiBridgePayload>(provider.assetUrl(navigationDataset.manifest.files.poiBridge))
@@ -428,6 +432,7 @@ export const createStaticGuideDataProvider = (
 
           explainDatasetCache = {
             ...navigationDataset,
+            exhibits: exhibits.rows,
             guideContents: guideContents.rows,
             poiBridge
           }
diff --git a/src/pages/exhibit/detail.vue b/src/pages/exhibit/detail.vue
index d6b13e0..65f5e76 100644
--- a/src/pages/exhibit/detail.vue
+++ b/src/pages/exhibit/detail.vue
@@ -3,88 +3,79 @@
     :active-tab="activeTopTab"
     variant="static"
     :show-top-tabs="false"
-    show-back
+    :audio-player-avoid-bottom-nav="false"
+    audio-player-mode="expanded"
     @back="handleBack"
   >
     <view class="explain-detail-page" :class="{ 'with-audio-player': showAudioPlayer }">
       <scroll-view
         class="content"
-        :class="{ 'without-location-action': !isLocationActionVisible }"
+        :class="{ 'with-fixed-player': isDetailAudioDockVisible || showAudioPlayer }"
         scroll-y
+        scroll-with-animation
+        :scroll-into-view="scrollTargetId"
         :show-scrollbar="false"
       >
-        <image
-          v-if="heroImage"
-          class="hero-image"
-          :src="heroImage"
-          mode="aspectFill"
-        />
-
-        <view v-else class="hero-placeholder">
-          <text class="hero-placeholder-text">讲解</text>
-        </view>
-
-          <view class="detail-body">
+        <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>
+          <view class="hero-trace trace-a"></view>
+          <view class="hero-trace trace-b"></view>
+          <view class="hero-back" @tap.stop="handleBack">
+            <text class="hero-back-icon">‹</text>
+          </view>
+          <view class="hero-copy">
+            <text class="hero-kicker">讲解音频</text>
             <text class="detail-title">{{ exhibit.title }}</text>
-            <text v-if="detailMeta" class="detail-meta">{{ detailMeta }}</text>
-            <view v-if="exhibit.linkedExhibitStatusText || exhibit.galleryStatusText" class="detail-chip-row">
+            <text class="detail-meta">{{ heroSubtitle }}</text>
+            <view class="detail-chip-row">
               <view v-if="exhibit.linkedExhibitStatusText" class="detail-chip" :class="{ shared: exhibit.isSharedStop }">
                 <text class="detail-chip-text">{{ exhibit.linkedExhibitStatusText }}</text>
               </view>
-              <view v-if="exhibit.galleryStatusText" class="detail-chip">
-                <text class="detail-chip-text">{{ exhibit.galleryStatusText }}</text>
+              <view v-if="locationPreviewStatusText" class="detail-chip">
+                <text class="detail-chip-text">{{ locationPreviewStatusText }}</text>
               </view>
             </view>
 
-            <view v-if="isLanguageSwitchVisible" class="language-switch">
+            <view class="language-anchor" v-if="contentLanguageOptions.length">
               <view
-                v-for="option in visibleLanguageOptions"
+                v-for="option in contentLanguageOptions"
                 :key="option.value"
-                class="language-option"
-                :class="{ active: selectedAudioLanguage === option.value, disabled: languageLoading }"
-                @tap="handleLanguageSwitch(option.value)"
+                class="language-anchor-option"
+                :class="{ active: activeContentLanguage === option.value }"
+                @tap="handleAnchorTap(option.value)"
               >
-                <text class="language-option-text">{{ option.label }}</text>
+                <text class="language-anchor-text">{{ option.label }}</text>
               </view>
             </view>
-
-          <view
-            v-if="exhibit.audio.status === 'playable'"
-            class="audio-panel"
-            @tap="handlePlayAudio"
-          >
-            <view class="audio-play">
-              <svg v-if="!isPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
-              </svg>
-              <svg v-else width="24" height="24" 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>
-            </view>
-            <text class="audio-time">00:00</text>
-            <view class="audio-track">
-              <view class="audio-dot"></view>
-            </view>
-            <text class="audio-time">{{ exhibit.audio.durationLabel || '音频讲解' }}</text>
           </view>
+        </view>
 
-          <view class="content-section">
-            <text class="section-title">讲解内容</text>
-            <text class="section-text">{{ detailBodyText }}</text>
-            <view
-              v-if="isTextLoadActionVisible"
-              class="text-load-btn"
-              :class="{ disabled: detailTextLoading }"
-              @tap="handleLoadDetailText"
-            >
-              <text class="text-load-btn-text">{{ detailTextLoading ? '正在加载' : detailTextLoadActionText }}</text>
+        <view class="content-panel">
+          <view
+            v-for="section in contentLanguageOptions"
+            :id="section.anchorId"
+            :key="section.value"
+            class="content-section"
+          >
+            <view class="section-heading">
+              <view class="section-marker" :class="{ english: section.value === 'en-US' }"></view>
+              <text class="section-title">{{ section.heading }}</text>
             </view>
-            <text v-if="detailTextUnavailableMessage" class="section-hint">{{ detailTextUnavailableMessage }}</text>
+            <text class="section-text">{{ detailTextFor(section.value) }}</text>
+            <text v-if="detailTextLoadingByLanguage[section.value]" class="section-hint">正在加载讲解正文</text>
           </view>
 
           <view v-if="visibleLinkedExhibits.length" class="content-section">
-            <text class="section-title">关联展品</text>
+            <view class="section-heading compact">
+              <view class="section-marker muted"></view>
+              <text class="section-title">关联展品</text>
+            </view>
             <view class="linked-exhibit-list">
               <view
                 v-for="linked in visibleLinkedExhibits"
@@ -115,6 +106,45 @@
         </view>
       </scroll-view>
 
+      <view
+        v-if="isDetailAudioDockVisible"
+        class="detail-audio-dock"
+      >
+        <view class="detail-audio-play" @tap="handlePlayAudio">
+          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
+            <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
+          </svg>
+        </view>
+        <view class="detail-audio-main" @tap="handlePlayAudio">
+          <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>
+        </view>
+        <view
+          v-if="isAudioLanguageSwitchVisible"
+          class="detail-audio-language-switch"
+          @tap.stop
+        >
+          <view
+            v-for="option in detailAudioLanguageOptions"
+            :key="option.value"
+            class="detail-audio-language-option"
+            :class="{ active: selectedAudioLanguage === option.value }"
+            @tap.stop="handleDetailAudioLanguageChange(option.value)"
+          >
+            <text class="detail-audio-lang-text">{{ option.shortLabel }}</text>
+          </view>
+        </view>
+        <view v-else class="detail-audio-lang">
+          <text class="detail-audio-lang-text">{{ audioLanguageShortText }}</text>
+        </view>
+        <view class="detail-audio-close" @tap="handleDismissDetailAudioDock">
+          <text class="detail-audio-close-text">×</text>
+        </view>
+      </view>
+
       <view v-if="isLocationActionVisible" class="action-bar">
         <view
           class="location-btn"
@@ -133,7 +163,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
 import type { AudioItem } from '@/components/audio/AudioPlayer.vue'
@@ -158,6 +188,9 @@ import {
   isGuideTopTab,
   type GuideTopTab
 } from '@/utils/guideTopTabs'
+import {
+  EXPLAIN_DETAIL_PLACEHOLDER_IMAGE
+} from '@/utils/placeholders'
 
 const defaultDetail: ExplainDetailPageViewModel = {
   id: '',
@@ -181,89 +214,118 @@ const activeTopTab = ref<GuideTopTab>('explain')
 const resolvedHallId = ref('')
 const retryingAudio = ref(false)
 const selectedAudioLanguage = ref<AudioLanguage>('zh-CN')
-const languageLoading = ref(false)
-const detailTextLoaded = ref(false)
-const detailTextLoading = ref(false)
-const detailTextUnavailableMessage = ref('')
 const detailEntryRequest = ref<{
   exhibitId: string
   targetType?: AudioPlayTargetType
   targetId?: string
 } | null>(null)
+const scrollTargetId = ref('')
+const activeContentLanguage = ref<AudioLanguage>('zh-CN')
+const detailAudioDockDismissed = ref(false)
+const detailTextByLanguage = ref<Record<AudioLanguage, string>>({
+  'zh-CN': defaultDetail.body,
+  'en-US': 'English narration text is not available yet.'
+})
+const detailTextLoadingByLanguage = ref<Record<AudioLanguage, boolean>>({
+  'zh-CN': false,
+  'en-US': false
+})
 // 讲解详情页位置入口暂未开放，避免误导用户进入位置预览流程。
 const isLocationActionVisible = false
 
-const languageOptions: Array<{ value: AudioLanguage; label: string }> = [
-  { value: 'zh-CN', label: '中文' },
-  { value: 'en-US', label: 'English' }
+const contentLanguageOptions: Array<{
+  value: AudioLanguage
+  label: string
+  heading: string
+  anchorId: string
+}> = [
+  {
+    value: 'zh-CN',
+    label: '中文',
+    heading: '中文讲解',
+    anchorId: 'zh-section'
+  },
+  {
+    value: 'en-US',
+    label: 'English',
+    heading: 'English',
+    anchorId: 'en-section'
+  }
+]
+
+const audioLanguageOptions: Array<{
+  value: AudioLanguage
+  shortLabel: string
+}> = [
+  { value: 'zh-CN', shortLabel: '中文' },
+  { value: 'en-US', shortLabel: 'EN' }
 ]
 
 const isAudioLanguage = (value: unknown): value is AudioLanguage => (
   value === 'zh-CN' || value === 'en-US'
 )
 
-const heroImage = computed(() => exhibit.value.coverImages[0])
+const isRealHeroImage = (image?: string) => (
+  Boolean(image && image !== EXPLAIN_DETAIL_PLACEHOLDER_IMAGE)
+)
+
+const heroImage = computed(() => exhibit.value.coverImages.find(isRealHeroImage))
 const detailMeta = computed(() => [
   exhibit.value.hallName,
   exhibit.value.floorLabel
 ].filter(Boolean).join(' · '))
 const hallLocationId = computed(() => exhibit.value.hallId || resolvedHallId.value)
+const locationPreviewStatusText = computed(() => (
+  hallLocationId.value ? '位置预览可用' : '位置关系待补充'
+))
+const heroSubtitle = computed(() => [
+  detailMeta.value
+].filter(Boolean).join(' · '))
+const currentExhibitIds = computed(() => new Set([
+  exhibit.value.id,
+  detailEntryRequest.value?.exhibitId
+].filter(Boolean)))
 const visibleLinkedExhibits = computed(() => (
   [...(exhibit.value.linkedExhibits || [])]
+    .filter((linked) => !currentExhibitIds.value.has(linked.id))
     .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
 ))
 const currentAudioTarget = computed(() => ({
   targetType: exhibit.value.audio.playTargetType || 'ITEM',
   targetId: exhibit.value.audio.playTargetId || exhibit.value.id,
-  lang: exhibit.value.audio.language
+  lang: selectedAudioLanguage.value
 }))
 const isCurrentDetailAudio = computed(() => globalAudioPlayer.isCurrentSource(currentAudioTarget.value))
-const isPlaying = computed(() => (
-  isCurrentDetailAudio.value && globalAudioPlayer.playing.value
-))
 const showAudioPlayer = computed(() => (
   globalAudioPlayer.visible.value && globalAudioPlayer.hasAudio.value
 ))
-const supportedDetailLanguages = computed(() => new Set(
-  (exhibit.value.audio.supportedLanguages || [selectedAudioLanguage.value])
-    .filter(isAudioLanguage)
+const isDetailAudioDockVisible = computed(() => (
+  exhibit.value.audio.status === 'playable'
+  && !showAudioPlayer.value
+  && !detailAudioDockDismissed.value
 ))
-const visibleLanguageOptions = computed(() => (
-  languageOptions.filter((option) => supportedDetailLanguages.value.has(option.value))
+const audioDockTitle = computed(() => (
+  selectedAudioLanguage.value === 'en-US' ? 'English audio' : '中文讲解音频'
 ))
-const isLanguageSwitchVisible = computed(() => visibleLanguageOptions.value.length > 1)
-const hasTextLoadTarget = computed(() => Boolean(
-  exhibit.value.audio.playTargetId || exhibit.value.id
+const audioDockSubtitle = computed(() => [
+  exhibit.value.title,
+  exhibit.value.audio.durationLabel
+].filter(Boolean).join(' · ') || '讲解音频')
+const audioLanguageShortText = computed(() => (
+  selectedAudioLanguage.value === 'en-US' ? 'EN' : '中文'
 ))
-const normalizedDetailSummary = computed(() => exhibit.value.summary.trim())
-const hasMeaningfulDetailSummary = computed(() => (
-  normalizedDetailSummary.value
-  && normalizedDetailSummary.value !== defaultDetail.summary
-))
-const isDetailSummaryLikelyComplete = computed(() => (
-  hasMeaningfulDetailSummary.value
-  && normalizedDetailSummary.value.length >= 120
-))
-const hasDeferredDetailText = computed(() => (
-  exhibit.value.audio.hasText === true
-  && !detailTextLoaded.value
-  && !detailTextUnavailableMessage.value
-  && hasTextLoadTarget.value
-  && !isDetailSummaryLikelyComplete.value
-))
-const isTextLoadActionVisible = computed(() => hasDeferredDetailText.value)
-const detailTextLoadActionText = computed(() => (
-  hasMeaningfulDetailSummary.value
-    ? '查看完整讲解词'
-    : '加载讲解正文'
-))
-const detailBodyText = computed(() => (
-  detailTextLoaded.value
-    ? exhibit.value.body || exhibit.value.summary
-    : hasDeferredDetailText.value && !hasMeaningfulDetailSummary.value
-      ? '已找到当前语言讲解词，可加载查看完整正文。'
-      : exhibit.value.summary
+const supportedDetailAudioLanguages = computed<AudioLanguage[]>(() => {
+  const languages = exhibit.value.audio.supportedLanguages?.length
+    ? exhibit.value.audio.supportedLanguages
+    : [selectedAudioLanguage.value]
+
+  const normalized = Array.from(new Set(languages.filter(isAudioLanguage)))
+  return normalized.length ? normalized : [selectedAudioLanguage.value]
+})
+const detailAudioLanguageOptions = computed(() => (
+  audioLanguageOptions.filter((option) => supportedDetailAudioLanguages.value.includes(option.value))
 ))
+const isAudioLanguageSwitchVisible = computed(() => detailAudioLanguageOptions.value.length > 1)
 
 // 讲解详情页只定位到所属展厅，不再追踪具体展品点位。
 const resolveHallGuidePoi = async () => {
@@ -276,11 +338,81 @@ const resolveHallGuidePoi = async () => {
   })
 }
 
-const resetAudioPlayer = () => {
-  if (isCurrentDetailAudio.value) {
-    globalAudioPlayer.close()
+const fallbackTextForLanguage = (lang: AudioLanguage) => (
+  lang === 'en-US'
+    ? 'English narration text is not available yet.'
+    : '当前语言暂无讲解词。'
+)
+
+const applyDetailText = (lang: AudioLanguage, text?: string) => {
+  const normalized = (text || '').trim()
+  detailTextByLanguage.value = {
+    ...detailTextByLanguage.value,
+    [lang]: normalized || fallbackTextForLanguage(lang)
   }
-  retryingAudio.value = false
+}
+
+const buildTextSourceFromViewModel = (viewModel: ExplainDetailPageViewModel) => ({
+  id: viewModel.id,
+  name: viewModel.title,
+  hallId: viewModel.hallId,
+  hallName: viewModel.hallName,
+  floorId: viewModel.floorId,
+  floorLabel: viewModel.floorLabel,
+  image: viewModel.coverImages[0],
+  description: viewModel.summary,
+  guideText: viewModel.summary,
+  audioLanguage: viewModel.audio.language,
+  audioHasText: viewModel.audio.hasText,
+  playTargetType: viewModel.audio.playTargetType,
+  playTargetId: viewModel.audio.playTargetId
+})
+
+const loadFullDetailTextForLanguage = async (
+  request: NonNullable<typeof detailEntryRequest.value>,
+  lang: AudioLanguage,
+  preferredViewModel?: ExplainDetailPageViewModel
+) => {
+  detailTextLoadingByLanguage.value = {
+    ...detailTextLoadingByLanguage.value,
+    [lang]: true
+  }
+
+  try {
+    const viewModel = preferredViewModel || toExplainDetailPageViewModel(await explainUseCase.enterExplainDetail({
+      ...request,
+      lang
+    }))
+
+    if (viewModel.audio.hasText) {
+      const selection = await explainUseCase.loadExplainDetailText(buildTextSourceFromViewModel(viewModel))
+      if (selection.available) {
+        const nextViewModel = toExplainDetailPageViewModel(selection.exhibit)
+        applyDetailText(lang, nextViewModel.body || nextViewModel.summary)
+        return
+      }
+    }
+
+    applyDetailText(lang, viewModel.body || viewModel.summary)
+  } catch (error) {
+    console.warn('讲解正文加载失败:', lang, error)
+    applyDetailText(lang)
+  } finally {
+    detailTextLoadingByLanguage.value = {
+      ...detailTextLoadingByLanguage.value,
+      [lang]: false
+    }
+  }
+}
+
+const loadBilingualDetailText = async (
+  request: NonNullable<typeof detailEntryRequest.value>,
+  currentLang: AudioLanguage,
+  currentViewModel: ExplainDetailPageViewModel
+) => {
+  await loadFullDetailTextForLanguage(request, currentLang, currentViewModel)
+  const nextLang: AudioLanguage = currentLang === 'zh-CN' ? 'en-US' : 'zh-CN'
+  void loadFullDetailTextForLanguage(request, nextLang)
 }
 
 const loadExplainDetail = async (
@@ -294,12 +426,13 @@ const loadExplainDetail = async (
 
   exhibit.value = toExplainDetailPageViewModel(exhibitData)
   selectedAudioLanguage.value = lang
-  detailTextLoaded.value = Boolean(exhibitData.audioText)
-  detailTextUnavailableMessage.value = ''
+  detailAudioDockDismissed.value = false
 
   if (exhibitData.hallId) {
     resolvedHallId.value = exhibitData.hallId
   }
+
+  void loadBilingualDetailText(request, lang, exhibit.value)
 }
 
 onLoad(async (options: any = {}) => {
@@ -340,70 +473,59 @@ onLoad(async (options: any = {}) => {
   }
 })
 
-const handleLanguageSwitch = async (lang: AudioLanguage) => {
-  if (languageLoading.value || selectedAudioLanguage.value === lang) return
-  if (!supportedDetailLanguages.value.has(lang)) {
-    uni.showToast({
-      title: '当前讲解暂无该语言',
-      icon: 'none'
-    })
-    return
-  }
-  if (!detailEntryRequest.value) return
-
-  languageLoading.value = true
-  resetAudioPlayer()
-
-  try {
-    await loadExplainDetail(detailEntryRequest.value, lang)
-  } catch (error) {
-    console.error('讲解语言切换失败:', error)
-    uni.showToast({
-      title: '语言切换失败，请稍后重试',
-      icon: 'none'
-    })
-  } finally {
-    languageLoading.value = false
-  }
+const handleAnchorTap = async (lang: AudioLanguage) => {
+  activeContentLanguage.value = lang
+  scrollTargetId.value = ''
+  await nextTick()
+  scrollTargetId.value = lang === 'en-US' ? 'en-section' : 'zh-section'
 }
 
-const handleLoadDetailText = async () => {
-  if (detailTextLoading.value || detailTextLoaded.value) return
+const detailTextFor = (lang: AudioLanguage) => {
+  return detailTextByLanguage.value[lang] || fallbackTextForLanguage(lang)
+}
 
-  detailTextLoading.value = true
-  detailTextUnavailableMessage.value = ''
+const handleDismissDetailAudioDock = () => {
+  detailAudioDockDismissed.value = true
+}
 
-  try {
-    const selection = await explainUseCase.loadExplainDetailText({
-      id: exhibit.value.id,
-      name: exhibit.value.title,
-      hallId: exhibit.value.hallId,
-      hallName: exhibit.value.hallName,
-      floorId: exhibit.value.floorId,
-      floorLabel: exhibit.value.floorLabel,
-      image: heroImage.value,
-      description: exhibit.value.summary,
-      guideText: exhibit.value.summary,
-      audioLanguage: exhibit.value.audio.language,
-      audioHasText: exhibit.value.audio.hasText,
-      playTargetType: exhibit.value.audio.playTargetType,
-      playTargetId: exhibit.value.audio.playTargetId
-    })
+const handleDetailAudioLanguageChange = (lang: AudioLanguage) => {
+  if (lang === selectedAudioLanguage.value) return
+  if (!supportedDetailAudioLanguages.value.includes(lang)) return
 
-    if (selection.available) {
-      exhibit.value = toExplainDetailPageViewModel(selection.exhibit)
-      detailTextLoaded.value = true
-      return
+  selectedAudioLanguage.value = lang
+  detailAudioDockDismissed.value = false
+}
+
+watch(
+  () => globalAudioPlayer.closeVersion.value,
+  () => {
+    const closedSource = globalAudioPlayer.lastClosedSource.value
+    if (
+      closedSource?.targetType === currentAudioTarget.value.targetType
+      && closedSource.targetId === currentAudioTarget.value.targetId
+      && (!closedSource.lang || closedSource.lang === selectedAudioLanguage.value)
+    ) {
+      detailAudioDockDismissed.value = true
     }
-
-    detailTextUnavailableMessage.value = selection.unavailableMessage || '当前语言暂无讲解词'
-  } catch (error) {
-    console.error('讲解正文加载失败:', error)
-    detailTextUnavailableMessage.value = '讲解词服务暂不可用，请稍后重试'
-  } finally {
-    detailTextLoading.value = false
   }
-}
+)
+
+watch(
+  () => globalAudioPlayer.currentSource.value,
+  (source) => {
+    const lang = source?.lang
+    const targetType = exhibit.value.audio.playTargetType || 'ITEM'
+    const targetId = exhibit.value.audio.playTargetId || exhibit.value.id
+
+    if (
+      isAudioLanguage(lang)
+      && source?.targetType === targetType
+      && source.targetId === targetId
+    ) {
+      selectedAudioLanguage.value = lang
+    }
+  }
+)
 
 const buildDetailRoute = () => {
   const request = detailEntryRequest.value
@@ -433,7 +555,10 @@ const toAudioItem = (
     name: selection.playInfo?.title || selection.exhibit.name,
     audioUrl: selection.media.url,
     image: heroImage.value,
-    duration: selection.media.duration
+    duration: selection.media.duration,
+    language: selection.media.language as AudioLanguage,
+    supportedLanguages: (selection.exhibit.supportedLanguages || exhibit.value.audio.supportedLanguages || [])
+      .filter(isAudioLanguage)
   }
 }
 
@@ -450,7 +575,7 @@ const refreshCurrentAudioOnce = async (message: string) => {
     audioUrl: exhibit.value.audio.url,
     audioDuration: exhibit.value.audio.duration,
     audioStatus: 'READY',
-    audioLanguage: exhibit.value.audio.language,
+    audioLanguage: selectedAudioLanguage.value,
     playTargetType: exhibit.value.audio.playTargetType,
     playTargetId: exhibit.value.audio.playTargetId
   }, {
@@ -494,7 +619,7 @@ const handlePlayAudio = async () => {
       audioUrl: exhibit.value.audio.url,
       audioDuration: exhibit.value.audio.duration,
       audioStatus: exhibit.value.audio.status === 'playable' ? 'READY' : 'MISSING',
-      audioLanguage: exhibit.value.audio.language,
+      audioLanguage: selectedAudioLanguage.value,
       audioUnavailableReason: exhibit.value.audio.unavailableReason,
       playTargetType: exhibit.value.audio.playTargetType,
       playTargetId: exhibit.value.audio.playTargetId
@@ -521,7 +646,8 @@ const handlePlayAudio = async () => {
       title: audio.name,
       detailRoute: buildDetailRoute()
     },
-    retryOnError: refreshCurrentAudioOnce
+    retryOnError: refreshCurrentAudioOnce,
+    displayMode: 'expanded'
   })
 }
 
@@ -965,4 +1091,490 @@ const handleBack = () => {
   font-weight: 700;
   color: currentColor;
 }
+
+.explain-detail-page {
+  background: #111a14;
+}
+
+.content {
+  height: 100%;
+  padding: 0;
+  box-sizing: border-box;
+  background: #111a14;
+}
+
+.content.with-fixed-player {
+  padding-bottom: 0;
+}
+
+.immersive-hero {
+  position: relative;
+  min-height: 392px;
+  padding: calc(env(safe-area-inset-top) + 20px) 24px 88px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 78% 18%, rgba(64, 88, 58, 0.3), rgba(64, 88, 58, 0) 30%),
+    linear-gradient(180deg, #24351e 0%, #111a14 100%);
+  color: #ffffff;
+}
+
+.hero-real-image {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.hero-image-shade {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(12, 20, 14, 0.34) 0%, rgba(13, 22, 16, 0.7) 62%, #111a14 100%),
+    linear-gradient(90deg, rgba(10, 16, 11, 0.72) 0%, rgba(10, 16, 11, 0.34) 58%, rgba(10, 16, 11, 0.68) 100%);
+}
+
+.immersive-hero.has-real-image {
+  background: #111a14;
+}
+
+.immersive-hero.has-real-image .hero-image-shade {
+  background:
+    linear-gradient(180deg, rgba(10, 16, 11, 0.12) 0%, rgba(10, 16, 11, 0.38) 58%, rgba(17, 26, 20, 0.78) 100%),
+    linear-gradient(90deg, rgba(10, 16, 11, 0.46) 0%, rgba(10, 16, 11, 0.1) 48%, rgba(10, 16, 11, 0.36) 100%);
+}
+
+.hero-trace {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.42;
+  mix-blend-mode: screen;
+}
+
+.immersive-hero.has-real-image .hero-trace {
+  opacity: 0.16;
+}
+
+.trace-a {
+  left: -18px;
+  top: 96px;
+  width: 330px;
+  height: 300px;
+  border-radius: 48% 52% 54% 46%;
+  background:
+    repeating-radial-gradient(ellipse at 88% 50%,
+      transparent 0,
+      transparent 14px,
+      rgba(255, 24, 101, 0.95) 15px,
+      rgba(255, 24, 101, 0.95) 17px,
+      transparent 18px,
+      transparent 28px);
+  transform: rotate(-4deg);
+}
+
+.trace-b {
+  right: -58px;
+  top: 118px;
+  width: 260px;
+  height: 270px;
+  border-radius: 50%;
+  background:
+    repeating-radial-gradient(ellipse at 14% 48%,
+      transparent 0,
+      transparent 17px,
+      rgba(255, 24, 101, 0.64) 18px,
+      rgba(255, 24, 101, 0.64) 20px,
+      transparent 21px,
+      transparent 31px);
+  transform: rotate(12deg);
+}
+
+.hero-back {
+  position: relative;
+  z-index: 4;
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+}
+
+.hero-back-icon {
+  display: block;
+  font-size: 34px;
+  line-height: 34px;
+  font-weight: 600;
+  color: currentColor;
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 3;
+  min-height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.hero-kicker,
+.detail-title,
+.detail-meta {
+  display: block;
+}
+
+.hero-kicker {
+  width: fit-content;
+  margin-bottom: 9px;
+  padding: 4px 8px;
+  box-sizing: border-box;
+  background: rgba(231, 233, 0, 0.96);
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 800;
+  color: #10140f;
+}
+
+.detail-title {
+  max-width: 100%;
+  font-size: 34px;
+  line-height: 42px;
+  font-weight: 900;
+  color: #ffffff;
+  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
+  word-break: break-word;
+}
+
+.detail-meta {
+  margin-top: 8px;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.detail-chip-row {
+  margin-top: 12px;
+  gap: 7px;
+}
+
+.detail-chip {
+  height: 28px;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.22);
+  color: #ffffff;
+}
+
+.detail-chip.shared {
+  background: rgba(231, 233, 0, 0.14);
+  border-color: rgba(231, 233, 0, 0.38);
+}
+
+.detail-chip-text,
+.detail-chip.shared .detail-chip-text {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.language-anchor {
+  width: min(315px, 100%);
+  height: 64px;
+  margin-top: 26px;
+  padding: 6px;
+  display: flex;
+  box-sizing: border-box;
+  background: rgba(17, 20, 15, 0.92);
+  border-radius: 16px;
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
+}
+
+.language-anchor-option {
+  min-width: 0;
+  flex: 1;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  color: #ffffff;
+}
+
+.language-anchor-option.active {
+  background: #e7e900;
+  color: #0f140d;
+}
+
+.language-anchor-text {
+  max-width: 100%;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 900;
+  color: currentColor;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content-panel {
+  position: relative;
+  z-index: 2;
+  min-height: calc(100vh - 318px);
+  margin-top: -48px;
+  padding: 34px 26px calc(172px + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+  background: #f8f9f4;
+  border-radius: 28px 28px 0 0;
+  box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.18);
+}
+
+.content-section {
+  margin-top: 0;
+  padding-top: 22px;
+  scroll-margin-top: 18px;
+}
+
+.content-section + .content-section {
+  margin-top: 52px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.section-heading.compact {
+  gap: 10px;
+}
+
+.section-marker {
+  flex-shrink: 0;
+  width: 9px;
+  height: 46px;
+  border-radius: 999px;
+  background: #e7e900;
+}
+
+.section-marker.english {
+  background: #7aa678;
+}
+
+.section-marker.muted {
+  height: 28px;
+  background: #b8c6af;
+}
+
+.section-title {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 900;
+  color: #111827;
+}
+
+.section-text {
+  margin-top: 16px;
+  display: block;
+  font-size: 17px;
+  line-height: 29px;
+  color: #233044;
+  white-space: pre-line;
+  word-break: break-word;
+}
+
+.section-hint {
+  color: #6d7568;
+}
+
+.linked-exhibit-list {
+  margin-top: 16px;
+}
+
+.linked-exhibit-item {
+  min-height: 86px;
+  border: 0;
+  border-radius: 14px;
+  box-shadow: 0 10px 24px rgba(40, 49, 42, 0.07);
+}
+
+.detail-audio-dock {
+  position: fixed;
+  left: 50%;
+  right: auto;
+  bottom: calc(12px + env(safe-area-inset-bottom));
+  z-index: 2201;
+  width: calc(min(100vw, 430px) - 28px);
+  min-height: 126px;
+  padding: 16px 14px 16px 16px;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  box-sizing: border-box;
+  background: #10140f;
+  border: 1px solid rgba(231, 233, 0, 0.18);
+  border-radius: 24px;
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
+  transform: translateX(-50%);
+  color: #ffffff;
+}
+
+.detail-audio-play {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #e7e900;
+  color: #0b0f0a;
+}
+
+.detail-audio-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.detail-audio-title,
+.detail-audio-subtitle,
+.detail-audio-lang-text,
+.detail-audio-close-text {
+  display: block;
+}
+
+.detail-audio-title {
+  font-size: 17px;
+  line-height: 23px;
+  font-weight: 900;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-audio-subtitle {
+  margin-top: 3px;
+  font-size: 13px;
+  line-height: 18px;
+  color: rgba(255, 255, 255, 0.72);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-audio-progress {
+  height: 5px;
+  margin-top: 13px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+}
+
+.detail-audio-progress-fill {
+  width: 22%;
+  height: 100%;
+  background: #e7e900;
+  border-radius: inherit;
+}
+
+.detail-audio-lang {
+  flex-shrink: 0;
+  min-width: 46px;
+  height: 36px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.46);
+}
+
+.detail-audio-language-switch {
+  flex-shrink: 0;
+  min-width: 74px;
+  height: 36px;
+  padding: 3px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.detail-audio-language-option {
+  min-width: 31px;
+  height: 28px;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.detail-audio-language-option.active {
+  background: #e7e900;
+  color: #0b0f0a;
+}
+
+.detail-audio-lang-text {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 900;
+  color: currentColor;
+}
+
+.detail-audio-close {
+  flex-shrink: 0;
+  width: 28px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+}
+
+.detail-audio-close-text {
+  font-size: 28px;
+  line-height: 28px;
+  color: currentColor;
+}
+
+@media (max-width: 360px) {
+  .immersive-hero {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .detail-title {
+    font-size: 30px;
+    line-height: 38px;
+  }
+
+  .content-panel {
+    padding-left: 22px;
+    padding-right: 22px;
+  }
+
+  .detail-audio-dock {
+    gap: 10px;
+    padding-left: 12px;
+  }
+
+  .detail-audio-language-switch {
+    min-width: 68px;
+  }
+
+  .detail-audio-language-option {
+    min-width: 28px;
+    padding: 0 5px;
+  }
+}
 </style>
diff --git a/src/pages/facility/detail.vue b/src/pages/facility/detail.vue
index ed83b1a..1448b02 100644
--- a/src/pages/facility/detail.vue
+++ b/src/pages/facility/detail.vue
@@ -3,6 +3,7 @@
     active-tab="guide"
     variant="overlay"
     :show-top-tabs="false"
+    audio-player-mode="floating"
     show-back
     @tab-change="handleTopTabChange"
     @back="handlePageBack"
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index b81c6cb..b164ad8 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,6 +3,7 @@
     :active-tab="currentTab"
     variant="overlay"
     :show-top-tabs="false"
+    :audio-player-mode="currentTab === 'guide' ? 'floating' : 'mini'"
     @tab-change="handleTabChange"
   >
     <GuideMapShell
diff --git a/src/pages/route/detail.vue b/src/pages/route/detail.vue
index 36067cc..9e265c7 100644
--- a/src/pages/route/detail.vue
+++ b/src/pages/route/detail.vue
@@ -3,6 +3,7 @@
     active-tab="guide"
     variant="overlay"
     :show-top-tabs="false"
+    audio-player-mode="floating"
     show-back
     :show-cancel="isManualLocationPanelOpen"
     @tab-change="handleTopTabChange"
diff --git a/src/pages/search/index.vue b/src/pages/search/index.vue
index f0b8967..4ad10d7 100644
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@@ -17,12 +17,17 @@
         autofocus
       />
     </view>
+    <GlobalAudioPlayerHost
+      display-mode="floating"
+      :avoid-bottom-nav="false"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import GlobalAudioPlayerHost from '@/components/audio/GlobalAudioPlayerHost.vue'
 import PoiSearchPanel from '@/components/search/PoiSearchPanel.vue'
 
 const initialKeyword = ref('')
diff --git a/src/usecases/explainUseCase.ts b/src/usecases/explainUseCase.ts
index d89cfdb..66b92ff 100644
--- a/src/usecases/explainUseCase.ts
+++ b/src/usecases/explainUseCase.ts
@@ -191,7 +191,8 @@ export class ExplainUseCase {
     fallback?: MuseumExhibit | null
   ): MuseumExhibit {
     const linkedPrimary = stopInfo.linkedExhibits[0]
-    const coverImage = stopInfo.coverImageUrl || (stopInfo.imageStatus === 'READY' ? fallback?.image : undefined)
+    const linkedCoverImage = stopInfo.linkedExhibits.find((item) => item.coverImageUrl)?.coverImageUrl
+    const coverImage = stopInfo.coverImageUrl || linkedCoverImage || fallback?.image
     const description = stopInfo.description || fallback?.description || '该讲解暂无简介。'
     const audioTarget = this.resolveStopInfoAudioTarget(stopInfo)
     const audioAvailable = stopInfo.audioStatus === 'READY'