OmniCard/mpuniapp/components/audio-pronounce/audio-pronounce.uvue

<template>
  <view
    class="audio-capsule"
    :class="{ 'audio-capsule-active': playerState.waveformActive }"
    @click="handleCapsuleClick"
  >
    <!-- 极简几何扬声器图标 -->
    <view class="speaker-icon">
      <view class="speaker-base" :class="{ 'speaker-base-active': playerState.waveformActive }"></view>
      <view class="speaker-cone" :class="{ 'speaker-cone-active': playerState.waveformActive }"></view>
    </view>

    <!-- 文本标签 (若提供) -->
    <text
      v-if="resolvedLabel !== ''"
      class="capsule-label"
      :class="{ 'capsule-label-active': playerState.waveformActive }"
    >{{ resolvedLabel }}</text>

    <!-- 3柱极简波形脉冲条 -->
    <view class="waveform-box">
      <view
        class="wave-bar bar-1"
        :class="{ 'wave-bar-pulse pulse-1': playerState.waveformActive, 'bar-active': playerState.waveformActive }"
      ></view>
      <view
        class="wave-bar bar-2"
        :class="{ 'wave-bar-pulse pulse-2': playerState.waveformActive, 'bar-active': playerState.waveformActive }"
      ></view>
      <view
        class="wave-bar bar-3"
        :class="{ 'wave-bar-pulse pulse-3': playerState.waveformActive, 'bar-active': playerState.waveformActive }"
      ></view>
    </view>
  </view>
</template>

<script setup lang="uts">
import {
  AudioPlayerState,
  createAudioPlayerState,
  toggleAudio,
  releaseAudioPlayer,
} from '../../pages/portal/useAudioPlayer.uts';

const props = defineProps({
  audioUrl: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
});

const playerState = reactive<AudioPlayerState>(createAudioPlayerState());

const resolvedLabel = computed((): string => {
  if (props.label != null && props.label.trim() !== '') {
    return props.label.trim();
  }
  return '';
});

function handleCapsuleClick(): void {
  const url = props.audioUrl != null ? props.audioUrl.trim() : '';
  if (url === '') {
    return;
  }
  toggleAudio(playerState, url);
}

onUnmounted(() => {
  releaseAudioPlayer(playerState);
});
</script>

<style scoped>
.audio-capsule {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background-color: #EAF1FF;
  border: 1px solid #E3E7ED;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.audio-capsule-active {
  background-color: #0B5CFF;
  border-color: #0B5CFF;
}

/* 极简几何扬声器 */
.speaker-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 6px;
}

.speaker-base {
  width: 3px;
  height: 6px;
  background-color: #0B5CFF;
  border-radius: 1px 0 0 1px;
}

.speaker-cone {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid #0B5CFF;
  margin-left: 1px;
}

.speaker-base-active {
  background-color: #FFFFFF;
}

.speaker-cone-active {
  border-right-color: #FFFFFF;
}

/* 标签文案 */
.capsule-label {
  font-size: 12px;
  font-weight: 500;
  color: #0B5CFF;
  margin-right: 6px;
  line-height: 1;
}

.capsule-label-active {
  color: #FFFFFF;
}

/* 3柱波形 */
.waveform-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 14px;
}

.wave-bar {
  width: 2px;
  background-color: #0B5CFF;
  border-radius: 1px;
  margin: 0 1.5px;
}

.bar-1 {
  height: 6px;
}

.bar-2 {
  height: 12px;
}

.bar-3 {
  height: 8px;
}

.bar-active {
  background-color: #FFFFFF;
}

/* 律动脉冲关键帧动画 */
.wave-bar-pulse {
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pulse-1 {
  animation-name: waveAnim1;
}

.pulse-2 {
  animation-name: waveAnim2;
  animation-delay: 150ms;
}

.pulse-3 {
  animation-name: waveAnim3;
  animation-delay: 300ms;
}

@keyframes waveAnim1 {
  0% {
    height: 4px;
  }
  100% {
    height: 10px;
  }
}

@keyframes waveAnim2 {
  0% {
    height: 6px;
  }
  100% {
    height: 14px;
  }
}

@keyframes waveAnim3 {
  0% {
    height: 5px;
  }
  100% {
    height: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-bar-pulse {
    animation: none;
  }
}
</style>