From be5b364bbf58881f28f56c1268007af31dfe419a Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Wed, 15 Jul 2026 01:29:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E9=80=A0=E8=AE=B2=E8=A7=A3=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=9F=B3=E9=A2=91=E4=BC=98=E5=85=88=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/exhibit/detail.vue               | 965 ++++++++-------------
 tests/unit/ExhibitDetailAudioFirst.spec.ts | 147 ++++
 2 files changed, 492 insertions(+), 620 deletions(-)
 create mode 100644 tests/unit/ExhibitDetailAudioFirst.spec.ts

diff --git a/src/pages/exhibit/detail.vue b/src/pages/exhibit/detail.vue
index 0c44a00..07341f0 100644
--- a/src/pages/exhibit/detail.vue
+++ b/src/pages/exhibit/detail.vue
@@ -8,7 +8,6 @@
     <view class="explain-detail-page">
       <scroll-view
         class="content"
-        :class="{ 'with-fixed-player': isDetailAudioDockVisible }"
         scroll-y
         :show-scrollbar="false"
       >
@@ -20,32 +19,83 @@
             mode="aspectFill"
           />
           <view class="hero-image-shade"></view>
-          <view v-if="!shouldUseHostNavigation" class="hero-back" @tap.stop="handleBack">
+          <button
+            v-if="!shouldUseHostNavigation"
+            class="hero-back"
+            aria-label="返回讲解详情"
+            @tap.stop="handleBack"
+          >
             <text class="hero-back-icon">‹</text>
-          </view>
+          </button>
           <view class="hero-copy">
-            <text class="detail-title">{{ exhibit.title }}</text>
+            <text class="detail-title">{{ displayTitle }}</text>
             <text class="detail-meta">{{ heroSubtitle }}</text>
-
-            <view class="language-anchor" v-if="contentLanguageOptions.length">
-              <view
-                v-for="option in contentLanguageOptions"
-                :key="option.value"
-                class="language-anchor-option"
-                :class="{
-                  active: selectedAudioLanguage === option.value,
-                  disabled: languageSwitchLoading
-                }"
-                @tap="handleLanguageChange(option.value)"
-              >
-                <text class="language-anchor-text">{{ option.label }}</text>
+            <view class="detail-chip-row">
+              <view class="detail-chip shared">
+                <text class="detail-chip-text">标准解说</text>
               </view>
             </view>
           </view>
         </view>
 
-        <view class="content-panel">
-          <view class="content-section">
+        <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"
+              :key="option.value"
+              class="language-option"
+              :class="{
+                active: selectedAudioLanguage === option.value,
+                disabled: languageSwitchLoading
+              }"
+              :disabled="languageSwitchLoading"
+              :aria-selected="selectedAudioLanguage === option.value"
+              :aria-label="`切换至${option.label}`"
+              role="tab"
+              @tap="handleLanguageChange(option.value)"
+            >
+              <text class="language-option-text">{{ option.label }}</text>
+            </button>
+          </view>
+
+          <view class="content-section" :class="{ 'is-english': selectedAudioLanguage === 'en-US' }">
+            <view class="section-heading">
+              <text class="section-title">Transcript</text>
+              <text class="section-duration">{{ formatDetailAudioTime(detailAudioDurationSeconds) }}</text>
+            </view>
             <template v-if="currentDetailParagraphs.length">
               <text
                 v-for="(paragraph, paragraphIndex) in currentDetailParagraphs"
@@ -63,31 +113,6 @@
         </view>
       </scroll-view>
 
-      <view
-        v-if="isDetailAudioDockVisible"
-        class="detail-audio-dock"
-      >
-        <view class="detail-audio-play" @tap="handlePlayAudio">
-          <svg v-if="detailAudioPlaying" width="26" height="26" viewBox="0 0 24 24" fill="none">
-            <rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor"/>
-            <rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor"/>
-          </svg>
-          <svg v-else width="26" height="26" viewBox="0 0 24 24" fill="none">
-            <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
-          </svg>
-        </view>
-        <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"
-              :style="{ width: `${detailAudioProgressPercent}%` }"
-            ></view>
-          </view>
-        </view>
-      </view>
-
       <view v-if="isLocationActionVisible" class="action-bar">
         <view
           class="location-btn"
@@ -218,6 +243,16 @@ const isRealHeroImage = (image?: string) => (
 )
 
 const heroImage = computed(() => exhibit.value.coverImages.find(isRealHeroImage))
+const displayTitle = computed(() => {
+  const withoutExplainType = exhibit.value.title
+    .replace(/\s*(?:(?:\[|［|【)\s*)?标准解说\s*(?:(?:\]|］|】))?\s*$/, '')
+    .trim()
+  const withoutWrappingBrackets = withoutExplainType
+    .replace(/^(?:\[|［|【)\s*(.*?)\s*(?:\]|］|】)$/, '$1')
+    .trim()
+
+  return withoutWrappingBrackets || withoutExplainType || exhibit.value.title
+})
 const detailMeta = computed(() => [
   exhibit.value.hallName,
   exhibit.value.floorLabel
@@ -246,7 +281,7 @@ const isCurrentDetailAudioTarget = computed(() => {
 const isDetailAudioDockVisible = computed(() => (
   !languageSwitchLoading.value && exhibit.value.audio.status === 'playable'
 ))
-const audioDockTitle = computed(() => exhibit.value.title || '讲解内容')
+const audioDockTitle = computed(() => displayTitle.value || '讲解内容')
 const formatDetailAudioTime = (seconds?: number) => {
   const normalizedSeconds = Number.isFinite(seconds || 0)
     ? Math.max(0, Math.floor(seconds || 0))
@@ -278,6 +313,9 @@ const detailAudioPlaying = computed(() => (
   isCurrentDetailAudio.value
   && globalAudioPlayer.playing.value
 ))
+const detailAudioActionLabel = computed(() => (
+  detailAudioPlaying.value ? '暂停讲解' : '播放讲解'
+))
 const detailAudioProgressPercent = computed(() => {
   if (!isCurrentDetailAudioTarget.value) return 0
 
@@ -781,138 +819,281 @@ const handleBack = () => {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #f9fafb;
+  background: #f7f8f3;
 }
 
 .content {
   height: 100%;
-  padding: var(--guide-page-detail-top-padding, 84px) 20px calc(104px + env(safe-area-inset-bottom));
+  padding: 0;
   box-sizing: border-box;
+  background: #f7f8f3;
 }
 
-.content.without-location-action {
-  padding-bottom: calc(28px + env(safe-area-inset-bottom));
+.immersive-hero {
+  position: relative;
+  min-height: 0;
+  height: clamp(238px, 30vh, 286px);
+  padding: calc(env(safe-area-inset-top) + 14px) 20px 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #111a14;
+  color: #ffffff;
 }
 
-.hero-image,
-.hero-placeholder {
+.immersive-hero.has-real-image {
+  background: #111a14;
+}
+
+.hero-image-shade,
+.immersive-hero.has-real-image .hero-image-shade {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: rgba(8, 14, 10, 0.44);
+}
+
+.hero-real-image {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
   width: 100%;
-  height: 250px;
-  border-radius: 8px;
+  height: 100%;
 }
 
-.hero-image {
-  background: #e9ece5;
-}
-
-.hero-placeholder {
+.hero-back {
+  position: relative;
+  z-index: 2;
+  width: 44px;
+  height: 44px;
+  margin: 0;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #e9ece5;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(7, 12, 8, 0.42);
+  color: #ffffff;
 }
 
-.hero-placeholder-text {
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 800;
-  color: #68725d;
+.hero-back::after {
+  border: 0;
 }
 
-.detail-body {
-  padding-top: 22px;
+.hero-back-icon {
+  margin-top: -3px;
+  font-size: 32px;
+  line-height: 32px;
+  font-weight: 400;
 }
 
-.detail-title,
-.detail-meta,
-.audio-time,
-.section-title,
-.section-text,
-.location-text {
-  display: block;
+.hero-copy {
+  position: relative;
+  z-index: 2;
+  min-height: 0;
+  height: calc(100% - 44px);
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .detail-title {
-  font-size: 29px;
-  line-height: 38px;
+  display: block;
+  max-width: 100%;
+  font-size: 26px;
+  line-height: 32px;
   font-weight: 800;
-  color: #151713;
+  letter-spacing: 0;
+  color: #ffffff;
+  text-shadow: none;
+  word-break: break-word;
 }
 
 .detail-meta {
-  margin-top: 8px;
-  font-size: 16px;
-  line-height: 22px;
-  color: #555c51;
-}
-
-.detail-chip-row {
-  margin-top: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.detail-chip {
-  max-width: 100%;
-  height: 28px;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  background: #f4f6ef;
-  border: 1px solid #dde2d3;
-  border-radius: 8px;
-}
-
-.detail-chip.shared {
-  background: #151713;
-  border-color: #151713;
-}
-
-.detail-chip-text {
   display: block;
-  max-width: 100%;
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 700;
-  color: #555c51;
+  margin-top: 6px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.86);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.detail-chip-row {
+  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 {
-  color: #e0df00;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+  color: #f0f19b;
+}
+
+.detail-content {
+  min-height: calc(70vh - env(safe-area-inset-top));
+  padding: 16px 20px calc(28px + 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;
+  min-width: 44px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: #e0e100;
+  color: #1a2017;
+}
+
+.detail-audio-play::after,
+.language-option::after {
+  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 {
-  width: 100%;
-  height: 42px;
-  margin-top: 16px;
-  padding: 3px;
+  height: 44px;
+  margin-top: 14px;
+  padding: 0;
   display: flex;
   box-sizing: border-box;
-  background: #ecefe6;
-  border: 1px solid #dde2d3;
-  border-radius: 8px;
+  background: transparent;
+  border: 1px solid #d8ddd2;
+  border-radius: 6px;
 }
 
 .language-option {
+  position: relative;
   min-width: 0;
   flex: 1;
-  height: 34px;
+  height: 42px;
+  padding: 0 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  border-radius: 6px;
-  color: #555c51;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #5d6659;
+}
+
+.language-option + .language-option {
+  border-left: 1px solid #d8ddd2;
 }
 
 .language-option.active {
-  background: #151713;
-  color: #e0df00;
+  background: #eef0e8;
+  color: #1e251b;
+}
+
+.language-option.active::before {
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+  left: 10px;
+  height: 2px;
+  content: '';
+  background: #b9bb00;
 }
 
 .language-option.disabled {
@@ -924,540 +1105,84 @@ const handleBack = () => {
   max-width: 100%;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 800;
-  color: currentColor;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.audio-panel {
-  height: 76px;
-  margin-top: 24px;
-  padding: 0 15px;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  box-sizing: border-box;
-  background: #0b0c0a;
-  border-radius: 8px;
-  color: #ffffff;
-}
-
-.audio-play {
-  flex-shrink: 0;
-  width: 42px;
-  height: 42px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  color: #151713;
-  background: #e0df00;
-}
-
-.audio-time {
-  flex-shrink: 0;
-  font-size: 14px;
-  line-height: 20px;
-  color: #ffffff;
-}
-
-.audio-track {
-  position: relative;
-  flex: 1;
-  height: 3px;
-  background: rgba(255, 255, 255, 0.24);
-  border-radius: 999px;
-}
-
-.audio-dot {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  background: #e0df00;
-  border-radius: 50%;
-  transform: translateY(-50%);
-}
-
-.content-section {
-  margin-top: 28px;
-}
-
-.section-title {
-  font-size: 19px;
-  line-height: 27px;
-  font-weight: 800;
-  color: #151713;
-}
-
-.section-text {
-  margin-top: 13px;
-  font-size: 16px;
-  line-height: 28px;
-  color: #2f352d;
-  text-indent: 2em;
-  white-space: normal;
-  word-break: break-word;
-}
-
-.section-text:first-child {
-  margin-top: 0;
-}
-
-.text-load-btn {
-  width: 100%;
-  height: 44px;
-  margin-top: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  background: #151713;
-  border-radius: 8px;
-  color: #e0df00;
-}
-
-.text-load-btn.disabled {
-  opacity: 0.62;
-}
-
-.text-load-btn-text {
-  display: block;
-  max-width: 100%;
-  font-size: 15px;
-  line-height: 21px;
-  font-weight: 800;
-  color: currentColor;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.section-hint {
-  display: block;
-  margin-top: 12px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #68725d;
-}
-
-.action-bar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 12px 20px calc(18px + env(safe-area-inset-bottom));
-  box-sizing: border-box;
-  background: rgba(249, 250, 251, 0.96);
-}
-
-.location-btn {
-  height: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  box-sizing: border-box;
-  background: #ffffff;
-  border: 1px solid #151713;
-  border-radius: 8px;
-  color: #151713;
-}
-
-.location-btn.disabled {
-  color: #8d9488;
-  border-color: #d8dcd3;
-  background: #f2f4ef;
-}
-
-.location-icon {
-  flex-shrink: 0;
-}
-
-.location-text {
-  font-size: 16px;
-  line-height: 22px;
   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-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;
-}
-
-.detail-title,
-.detail-meta {
-  display: block;
-}
-
-.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: 26px auto 0;
-  padding: 6px;
-  display: flex;
-  align-self: center;
-  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-option.disabled {
-  opacity: 0.62;
-  pointer-events: none;
-}
-
-.language-anchor-option.active.disabled {
-  opacity: 1;
-}
-
-.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;
+  margin-top: 22px;
+  padding-top: 0;
 }
 
 .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;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .section-title {
-  font-size: 24px;
-  line-height: 32px;
-  font-weight: 900;
-  color: #111827;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 800;
+  color: #20241e;
+}
+
+.section-duration {
+  flex-shrink: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: #687064;
 }
 
 .section-text {
-  margin-top: 12px;
   display: block;
-  font-size: 17px;
-  line-height: 29px;
-  color: #233044;
+  margin-top: 14px;
+  font-size: 16px;
+  line-height: 26px;
+  color: #31392e;
   text-indent: 2em;
-  white-space: normal;
   word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
-.section-text:first-child {
-  margin-top: 0;
+.content-section.is-english .section-text {
+  text-indent: 0;
 }
 
 .section-hint {
-  display: block;
-  margin-top: 16px;
-  font-size: 15px;
+  margin-top: 14px;
+  font-size: 14px;
   line-height: 22px;
-  color: #6d7568;
 }
 
 .audio-status-hint {
   color: #7a5a22;
 }
 
-.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;
-}
+@media (min-width: 420px) {
+  .immersive-hero {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
 
-.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;
-  padding-top: 18px;
-  box-sizing: border-box;
-}
-
-.detail-audio-title,
-.detail-audio-subtitle,
-.detail-audio-lang-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: 0;
-  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-content {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
 }
 
 @media (max-width: 360px) {
-  .immersive-hero {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
   .detail-title {
-    font-size: 30px;
-    line-height: 38px;
+    font-size: 24px;
+    line-height: 30px;
   }
 
-  .content-panel {
-    padding-left: 22px;
-    padding-right: 22px;
+  .detail-content {
+    padding-right: 16px;
+    padding-left: 16px;
   }
-
-  .detail-audio-dock {
-    gap: 10px;
-    padding-left: 12px;
-  }
-
 }
 </style>
diff --git a/tests/unit/ExhibitDetailAudioFirst.spec.ts b/tests/unit/ExhibitDetailAudioFirst.spec.ts
new file mode 100644
index 0000000..60f40db
--- /dev/null
+++ b/tests/unit/ExhibitDetailAudioFirst.spec.ts
@@ -0,0 +1,147 @@
+// @vitest-environment happy-dom
+
+import { defineComponent } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+const mocks = vi.hoisted(() => ({
+  onLoadHandler: null as null | ((options?: Record<string, unknown>) => Promise<void>),
+  enterExplainDetail: vi.fn(),
+  loadExplainDetailText: vi.fn(),
+  selectAudioForExplainDetail: vi.fn(),
+  play: vi.fn(),
+  pause: vi.fn(),
+  resume: vi.fn(),
+  close: vi.fn()
+}))
+
+const audioState = vi.hoisted(() => ({
+  currentAudio: { value: null as any },
+  currentSource: { value: null as any },
+  playing: { value: false },
+  currentTime: { value: 0 },
+  duration: { value: 0 }
+}))
+
+vi.mock('@dcloudio/uni-app', () => ({
+  onLoad: (handler: (options?: Record<string, unknown>) => Promise<void>) => {
+    mocks.onLoadHandler = handler
+  },
+  onUnload: () => undefined
+}))
+
+vi.mock('@/usecases/explainUseCase', () => ({
+  explainUseCase: {
+    enterExplainDetail: mocks.enterExplainDetail,
+    loadExplainDetailText: mocks.loadExplainDetailText,
+    selectAudioForExplainDetail: mocks.selectAudioForExplainDetail
+  }
+}))
+
+vi.mock('@/usecases/guideUseCase', () => ({
+  guideUseCase: {
+    resolveContentLocationPreviewTarget: vi.fn()
+  }
+}))
+
+vi.mock('@/composables/useGlobalAudioPlayer', () => ({
+  useGlobalAudioPlayer: () => ({
+    ...audioState,
+    isCurrentSource: () => false,
+    play: mocks.play,
+    pause: mocks.pause,
+    resume: mocks.resume,
+    switchLanguage: vi.fn(),
+    close: mocks.close
+  })
+}))
+
+vi.mock('@/utils/hostEnvironment', () => ({
+  isEmbeddedInWechatMiniProgram: () => false
+}))
+
+import ExhibitDetail from '@/pages/exhibit/detail.vue'
+
+const GuidePageFrameStub = defineComponent({
+  name: 'GuidePageFrameStub',
+  emits: ['back'],
+  template: '<div data-testid="guide-page-frame"><slot /></div>'
+})
+
+const exhibit = {
+  id: 'exhibit-1',
+  name: '[Classical Astrolabe] 标准解说',
+  hallName: 'Universe Hall',
+  floorLabel: 'B2',
+  image: '/assets/astrolabe.jpg',
+  description: 'A detailed English narration for this exhibit.',
+  guideText: 'A detailed English narration for this exhibit.',
+  audioUrl: '/assets/astrolabe.mp3',
+  audioDuration: 81,
+  audioStatus: 'READY',
+  audioLanguage: 'en-US',
+  audioHasText: false,
+  playTargetType: 'STOP',
+  playTargetId: 'stop-1'
+}
+
+describe('讲解详情音频优先布局', () => {
+  beforeEach(() => {
+    mocks.onLoadHandler = null
+    mocks.enterExplainDetail.mockResolvedValue(exhibit)
+    mocks.loadExplainDetailText.mockResolvedValue({ available: false })
+    mocks.selectAudioForExplainDetail.mockResolvedValue({
+      playable: true,
+      exhibit,
+      media: {
+        id: 'audio-1',
+        url: exhibit.audioUrl,
+        duration: exhibit.audioDuration,
+        language: 'en-US'
+      },
+      playInfo: { title: exhibit.name }
+    })
+    mocks.play.mockResolvedValue(undefined)
+    vi.stubGlobal('uni', { showToast: vi.fn(), navigateBack: vi.fn() })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  it('将展品身份、流内播放器、语言栏和英文正文按顺序渲染', async () => {
+    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-title').text()).toBe('Classical Astrolabe')
+    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(false)
+    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')
+    expect(wrapper.get('.section-text').text()).toContain('detailed English narration')
+  })
+
+  it('通过同一全局音频播放器开始播放，不创建页面播放器', async () => {
+    const wrapper = mount(ExhibitDetail, {
+      global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
+    })
+
+    await mocks.onLoadHandler?.({ id: exhibit.id, lang: 'en-US', targetType: 'STOP', targetId: 'stop-1' })
+    await flushPromises()
+    await wrapper.get('.detail-audio-play').trigger('tap')
+
+    expect(mocks.play).toHaveBeenCalledWith(expect.objectContaining({
+      audioUrl: exhibit.audioUrl,
+      language: 'en-US'
+    }), expect.objectContaining({ displayMode: 'mini' }))
+  })
+})