修复讲解全局音频播放器交互

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>