Initial Commit

components/voice-message/voice-message.wxml

@@ -0,0 +1,53 @@
+<!-- 🎤 语音消息组件 -->
+<view class="voice-message-container {{isSelf ? 'self' : 'other'}} {{isPlaying ? 'playing' : ''}}">
+  <!-- 语音消息气泡 -->
+  <view class="voice-bubble" bindtap="togglePlay">
+    <!-- 播放按钮 -->
+    <view class="play-button">
+      <view class="play-icon {{isPlaying ? 'pause' : 'play'}}">
+        <text wx:if="{{!isPlaying}}" class="icon">▶</text>
+        <text wx:else class="icon">⏸</text>
+      </view>
+    </view>
+    
+    <!-- 语音波形 -->
+    <view class="voice-waveform">
+      <view class="waveform-container">
+        <view wx:for="{{waveformData}}" 
+              wx:key="index" 
+              class="wave-bar {{index <= currentWaveIndex ? 'active' : ''}}"
+              style="height: {{item}}%;">
+        </view>
+      </view>
+    </view>
+    
+    <!-- 语音时长 -->
+    <view class="voice-duration">
+      <text class="duration-text">{{formatDuration(duration)}}</text>
+    </view>
+  </view>
+  
+  <!-- 播放进度条 -->
+  <view wx:if="{{isPlaying}}" class="progress-container">
+    <view class="progress-bar">
+      <view class="progress-fill" style="width: {{playProgress}}%;"></view>
+    </view>
+    <view class="progress-time">
+      <text class="current-time">{{formatTime(currentTime)}}</text>
+      <text class="total-time">{{formatTime(duration)}}</text>
+    </view>
+  </view>
+  
+  <!-- 加载状态 -->
+  <view wx:if="{{isLoading}}" class="loading-container">
+    <view class="loading-spinner"></view>
+    <text class="loading-text">加载中...</text>
+  </view>
+  
+  <!-- 错误状态 -->
+  <view wx:if="{{hasError}}" class="error-container">
+    <text class="error-icon">⚠️</text>
+    <text class="error-text">播放失败</text>
+    <text class="retry-button" bindtap="retryPlay">重试</text>
+  </view>
+</view>