From 653ec67b14842b3d06dd4cd9591d8599582b45bb Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Fri, 10 Jul 2026 10:21:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AE=B2=E8=A7=A3=E8=AF=A6?=
=?UTF-8?q?=E6=83=85=E6=92=AD=E6=94=BE=E5=99=A8=E8=AF=AD=E8=A8=80=E5=88=87?=
=?UTF-8?q?=E6=8D=A2=E9=87=8D=E5=A4=8D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/audio/AudioPlayer.vue | 72 ++++++++++---------
.../audio/GlobalAudioPlayerHost.vue | 2 +
src/composables/useGlobalAudioPlayer.ts | 1 -
src/pages/exhibit/detail.vue | 22 +++---
4 files changed, 52 insertions(+), 45 deletions(-)
diff --git a/src/components/audio/AudioPlayer.vue b/src/components/audio/AudioPlayer.vue
index c2f8e5a..38072bd 100644
--- a/src/components/audio/AudioPlayer.vue
+++ b/src/components/audio/AudioPlayer.vue
@@ -15,7 +15,6 @@
mode="aspectFill"
/>
- 讲解音频
{{ displayAudio.name }}
{{ expandedSubtitle }}
@@ -95,7 +94,6 @@
- 讲解音频
{{ displayAudio.name }}
@@ -750,7 +748,6 @@ defineExpose({
min-width: 0;
}
-.player-kicker,
.expanded-title,
.expanded-subtitle,
.mini-title,
@@ -761,15 +758,7 @@ defineExpose({
display: block;
}
-.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;
@@ -928,24 +917,36 @@ defineExpose({
min-height: 116px;
padding: 12px 14px 14px;
display: grid;
- grid-template-columns: 56px minmax(0, 1fr) auto auto;
+ grid-template-columns: 56px minmax(0, 1fr) auto;
grid-template-areas:
- "play spacer spacer expand"
- "copy copy copy copy"
- "progress progress progress progress";
+ "play copy expand"
+ "progress progress progress";
column-gap: 10px;
- row-gap: 7px;
+ row-gap: 10px;
align-items: center;
box-sizing: border-box;
border-radius: 30px;
}
.mini-player.with-close {
- grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
+ grid-template-columns: 56px minmax(0, 1fr) auto auto;
grid-template-areas:
- "play spacer spacer expand close"
- "copy copy copy copy copy"
- "progress progress progress progress progress";
+ "play copy expand close"
+ "progress progress progress progress";
+}
+
+.mini-player.is-static {
+ grid-template-columns: 56px minmax(0, 1fr);
+ grid-template-areas:
+ "play copy"
+ "progress progress";
+}
+
+.mini-player.with-close.is-static {
+ grid-template-columns: 56px minmax(0, 1fr) auto;
+ grid-template-areas:
+ "play copy close"
+ "progress progress progress";
}
.mini-play {
@@ -957,20 +958,13 @@ defineExpose({
.mini-copy {
grid-area: copy;
display: flex;
- align-items: baseline;
- gap: 8px;
+ align-items: center;
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;
@@ -1123,21 +1117,33 @@ defineExpose({
padding: 10px 12px 12px;
grid-template-columns: 50px minmax(0, 1fr) auto;
grid-template-areas:
- "play spacer expand"
- "copy copy copy"
+ "play copy expand"
"progress progress progress";
column-gap: 8px;
- row-gap: 6px;
+ row-gap: 9px;
}
.mini-player.with-close {
grid-template-columns: 50px minmax(0, 1fr) auto auto;
grid-template-areas:
- "play spacer expand close"
- "copy copy copy copy"
+ "play copy expand close"
"progress progress progress progress";
}
+ .mini-player.is-static {
+ grid-template-columns: 50px minmax(0, 1fr);
+ grid-template-areas:
+ "play copy"
+ "progress progress";
+ }
+
+ .mini-player.with-close.is-static {
+ grid-template-columns: 50px minmax(0, 1fr) auto;
+ grid-template-areas:
+ "play copy close"
+ "progress progress progress";
+ }
+
.mini-play {
width: 50px;
height: 50px;
diff --git a/src/components/audio/GlobalAudioPlayerHost.vue b/src/components/audio/GlobalAudioPlayerHost.vue
index 2b2d3cc..f5bd0de 100644
--- a/src/components/audio/GlobalAudioPlayerHost.vue
+++ b/src/components/audio/GlobalAudioPlayerHost.vue
@@ -54,12 +54,14 @@ const {
currentTime,
duration,
displayMode: currentDisplayMode,
+ activeHostId,
hasAudio
} = player
const hostId = player.registerHost()
const isHostVisible = computed(() => (
visible.value
&& hasAudio.value
+ && activeHostId.value === hostId
))
const handleToggle = () => {
diff --git a/src/composables/useGlobalAudioPlayer.ts b/src/composables/useGlobalAudioPlayer.ts
index 4702573..a542485 100644
--- a/src/composables/useGlobalAudioPlayer.ts
+++ b/src/composables/useGlobalAudioPlayer.ts
@@ -417,7 +417,6 @@ const seekToPercent = (percent: number) => {
const registerHost = () => {
hostSequence += 1
const hostId = `global-audio-host-${hostSequence}`
- activeHostId.value = hostId
return hostId
}
diff --git a/src/pages/exhibit/detail.vue b/src/pages/exhibit/detail.vue
index 50c5bbf..8c4dc5d 100644
--- a/src/pages/exhibit/detail.vue
+++ b/src/pages/exhibit/detail.vue
@@ -209,17 +209,6 @@ const isCurrentDetailAudio = computed(() => globalAudioPlayer.isCurrentSource(cu
const showAudioPlayer = computed(() => (
globalAudioPlayer.visible.value && globalAudioPlayer.hasAudio.value
))
-const isDetailAudioDockVisible = computed(() => (
- exhibit.value.audio.status === 'playable'
- && !isCurrentDetailAudio.value
-))
-const audioDockTitle = computed(() => (
- selectedAudioLanguage.value === 'en-US' ? 'English audio' : '中文讲解音频'
-))
-const audioDockSubtitle = computed(() => [
- exhibit.value.title,
- exhibit.value.audio.durationLabel
-].filter(Boolean).join(' · ') || '讲解音频')
const isCurrentDetailAudioTarget = computed(() => {
const source = globalAudioPlayer.currentSource.value
const targetType = exhibit.value.audio.playTargetType || 'ITEM'
@@ -231,6 +220,15 @@ const isCurrentDetailAudioTarget = computed(() => {
&& source.targetId === targetId
)
})
+const isDetailAudioDockVisible = computed(() => (
+ exhibit.value.audio.status === 'playable'
+ && !isCurrentDetailAudioTarget.value
+))
+const audioDockTitle = computed(() => exhibit.value.title || '讲解内容')
+const audioDockSubtitle = computed(() => [
+ selectedAudioLanguage.value === 'en-US' ? 'English' : '中文',
+ exhibit.value.audio.durationLabel
+].filter(Boolean).join(' · ') || '讲解')
// 讲解详情页只定位到所属展厅，不再追踪具体展品点位。
const resolveHallGuidePoi = async () => {
return guideUseCase.resolveContentLocationPreviewTarget({
@@ -1271,6 +1269,8 @@ const handleBack = () => {
.detail-audio-main {
min-width: 0;
flex: 1;
+ padding-top: 18px;
+ box-sizing: border-box;
}
.detail-audio-title,