@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismVoiceInput/PrismVoiceInput.vue

@@ -1,529 +1,529 @@
-<template>
-  <view class="prism-voice-input" :class="{ 'dark-mode': appStore.isDarkMode }">
-    <!-- 模式1: 按钮模式（默认） -->
-    <view
-      v-if="mode === 'button'"
-      class="voice-btn"
-      :class="{ 'recording': isRecording }"
-      @touchstart.prevent="startRecording"
-      @touchend.prevent="stopRecording"
-      @touchcancel.prevent="cancelRecording"
-    >
-      <view class="voice-icon-wrapper">
-        <text class="fa fa-microphone"></text>
-        <!-- 录音波纹动画 -->
-        <view class="voice-waves" v-if="isRecording">
-          <view class="wave wave-1"></view>
-          <view class="wave wave-2"></view>
-          <view class="wave wave-3"></view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 模式2: 弹窗模式 -->
-    <view class="voice-panel" v-if="mode === 'modal' && visible" @click="handleCancel">
-      <view class="voice-content" @click.stop>
-        <view class="voice-title">{{ title }}</view>
-        <view class="voice-wave" :class="{ 'recording': isRecording }">
-          <view class="wave-bar" v-for="i in 5" :key="i"></view>
-        </view>
-        <view class="voice-time">{{ formatTime(recordingTime) }}</view>
-        <view class="voice-tip">{{ isRecording ? '松开结束录音' : '按住开始录音' }}</view>
-        <view class="voice-actions">
-          <view class="voice-cancel-btn" @click="handleCancel">
-            <text class="fa fa-times"></text>
-            <text>取消</text>
-          </view>
-          <view
-            class="voice-record-btn"
-            :class="{ 'recording': isRecording }"
-            @touchstart.prevent="startRecording"
-            @touchend.prevent="stopRecording"
-            @mousedown.prevent="startRecording"
-            @mouseup.prevent="stopRecording"
-          >
-            <text class="fa fa-microphone"></text>
-          </view>
-          <view class="voice-confirm-btn" :class="{ 'disabled': !hasRecorded }" @click="handleConfirm">
-            <text class="fa fa-check"></text>
-            <text>完成</text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 按钮模式的录音弹窗提示 -->
-    <view class="voice-modal" v-if="mode === 'button' && isRecording" @click.stop>
-      <view class="modal-content">
-        <view class="voice-animation">
-          <view class="voice-bar" v-for="i in 5" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></view>
-        </view>
-        <text class="voice-text">{{ cancelHint ? '松开取消' : '正在录音...' }}</text>
-        <text class="voice-tip-time">{{ recordingTime }}s</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref, watch, onUnmounted } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  // 模式：button（按钮）或 modal（弹窗）
-  mode: {
-    type: String,
-    default: 'button',
-    validator: (val) => ['button', 'modal'].includes(val)
-  },
-  // 弹窗模式的可见性
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  // 弹窗标题
-  title: {
-    type: String,
-    default: '语音输入'
-  },
-  // 最长录音时间（秒）
-  maxDuration: {
-    type: Number,
-    default: 60
-  }
-});
-
-const emit = defineEmits(['update:visible', 'start', 'end', 'cancel', 'result', 'confirm']);
-
-const appStore = useAppStore();
-const isRecording = ref(false);
-const cancelHint = ref(false);
-const recordingTime = ref(0);
-const hasRecorded = ref(false);
-
-let recordingTimer = null;
-let recorderManager = null;
-
-// 格式化时间
-function formatTime(seconds) {
-  const mins = Math.floor(seconds / 60);
-  const secs = seconds % 60;
-  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
-}
-
-function startRecording() {
-  isRecording.value = true;
-  cancelHint.value = false;
-  recordingTime.value = 0;
-  hasRecorded.value = false;
-
-  emit('start');
-
-  // 开始计时
-  recordingTimer = setInterval(() => {
-    recordingTime.value++;
-    if (recordingTime.value >= props.maxDuration) {
-      stopRecording();
-    }
-  }, 1000);
-
-  // 使用 uni-app 录音管理器
-  // #ifdef APP-PLUS || MP-WEIXIN
-  recorderManager = uni.getRecorderManager();
-  recorderManager.onStop((res) => {
-    if (!cancelHint.value) {
-      emit('result', {
-        tempFilePath: res.tempFilePath,
-        duration: recordingTime.value
-      });
-    }
-  });
-  recorderManager.start({
-    duration: props.maxDuration * 1000,
-    format: 'mp3'
-  });
-  // #endif
-}
-
-function stopRecording() {
-  if (!isRecording.value) return;
-
-  isRecording.value = false;
-  hasRecorded.value = recordingTime.value > 0;
-  clearInterval(recordingTimer);
-
-  emit('end', { duration: recordingTime.value });
-
-  // #ifdef APP-PLUS || MP-WEIXIN
-  if (recorderManager) {
-    recorderManager.stop();
-  }
-  // #endif
-}
-
-function cancelRecording() {
-  if (!isRecording.value && props.mode === 'button') return;
-
-  cancelHint.value = true;
-  isRecording.value = false;
-  clearInterval(recordingTimer);
-
-  emit('cancel');
-
-  // #ifdef APP-PLUS || MP-WEIXIN
-  if (recorderManager) {
-    recorderManager.stop();
-  }
-  // #endif
-}
-
-// 弹窗模式 - 取消
-function handleCancel() {
-  if (recordingTimer) {
-    clearInterval(recordingTimer);
-    recordingTimer = null;
-  }
-  isRecording.value = false;
-  emit('cancel');
-  closePanel();
-}
-
-// 弹窗模式 - 确认
-function handleConfirm() {
-  if (!hasRecorded.value) return;
-
-  uni.showLoading({ title: '识别中...' });
-
-  setTimeout(() => {
-    uni.hideLoading();
-    emit('confirm', {
-      duration: recordingTime.value
-    });
-    closePanel();
-    uni.showToast({ title: '识别成功', icon: 'success' });
-  }, 1500);
-}
-
-// 关闭弹窗
-function closePanel() {
-  emit('update:visible', false);
-  recordingTime.value = 0;
-  hasRecorded.value = false;
-}
-
-// 监听 visible 变化，重置状态
-watch(() => props.visible, (val) => {
-  if (val) {
-    isRecording.value = false;
-    recordingTime.value = 0;
-    hasRecorded.value = false;
-  }
-});
-
-onUnmounted(() => {
-  if (recordingTimer) {
-    clearInterval(recordingTimer);
-  }
-});
-</script>
-
-<style lang="scss">
-.prism-voice-input {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  // ============ 按钮模式 ============
-  .voice-btn {
-    width: 80rpx;
-    height: 80rpx;
-    border-radius: 50%;
-    background: var(--prism-primary-color, #3478F6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    position: relative;
-
-    &:active, &.recording {
-      transform: scale(1.1);
-      box-shadow: 0 8rpx 24rpx rgba(52, 120, 246, 0.4);
-    }
-
-    .voice-icon-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .fa {
-        font-size: 36rpx;
-        color: #FFFFFF;
-        z-index: 2;
-      }
-    }
-
-    .voice-waves {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .wave {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        border: 2rpx solid rgba(255, 255, 255, 0.5);
-        animation: waveAnim 1.5s infinite ease-out;
-      }
-
-      .wave-1 { animation-delay: 0s; }
-      .wave-2 { animation-delay: 0.5s; }
-      .wave-3 { animation-delay: 1s; }
-    }
-  }
-
-  .voice-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-
-    .modal-content {
-      width: 300rpx;
-      height: 300rpx;
-      background: var(--prism-bg-color-card, #FFFFFF);
-      border-radius: 24rpx;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 24rpx;
-    }
-
-    .voice-animation {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8rpx;
-      height: 80rpx;
-
-      .voice-bar {
-        width: 8rpx;
-        height: 40rpx;
-        background: var(--prism-primary-color, #3478F6);
-        border-radius: 4rpx;
-        animation: voiceBarAnim 0.8s infinite ease-in-out alternate;
-      }
-    }
-
-    .voice-text {
-      font-size: 28rpx;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    .voice-tip-time {
-      font-size: 48rpx;
-      font-weight: 600;
-      color: var(--prism-primary-color, #3478F6);
-    }
-  }
-
-  @keyframes waveAnim {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(2);
-      opacity: 0;
-    }
-  }
-
-  @keyframes voiceBarAnim {
-    0% { height: 20rpx; }
-    100% { height: 60rpx; }
-  }
-
-  // ============ 弹窗模式 ============
-  .voice-panel {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-  }
-
-  .voice-content {
-    width: 560rpx;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 24rpx;
-    padding: 40rpx;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .voice-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: 40rpx;
-  }
-
-  .voice-wave {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12rpx;
-    height: 100rpx;
-    margin-bottom: 24rpx;
-
-    .wave-bar {
-      width: 8rpx;
-      height: 20rpx;
-      background: var(--prism-text-placeholder, #C9CDD4);
-      border-radius: 4rpx;
-      transition: all 0.3s;
-    }
-
-    &.recording .wave-bar {
-      background: var(--prism-primary-color, #3478F6);
-      animation: prism-voice-wave 0.5s ease-in-out infinite alternate;
-    }
-
-    &.recording .wave-bar:nth-child(1) { animation-delay: 0s; }
-    &.recording .wave-bar:nth-child(2) { animation-delay: 0.1s; }
-    &.recording .wave-bar:nth-child(3) { animation-delay: 0.2s; }
-    &.recording .wave-bar:nth-child(4) { animation-delay: 0.3s; }
-    &.recording .wave-bar:nth-child(5) { animation-delay: 0.4s; }
-  }
-
-  @keyframes prism-voice-wave {
-    0% { height: 20rpx; }
-    100% { height: 80rpx; }
-  }
-
-  .voice-time {
-    font-size: 48rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: 16rpx;
-  }
-
-  .voice-tip {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 40rpx;
-  }
-
-  .voice-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .voice-cancel-btn,
-  .voice-confirm-btn {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8rpx;
-    color: var(--prism-text-secondary, #86909C);
-
-    .fa {
-      width: 64rpx;
-      height: 64rpx;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 28rpx;
-    }
-
-    text:last-child {
-      font-size: 24rpx;
-    }
-
-    &:active {
-      opacity: 0.7;
-    }
-  }
-
-  .voice-cancel-btn .fa {
-    color: var(--prism-danger-color, #F53F3F);
-    background: rgba(245, 63, 63, 0.15);
-  }
-
-  .voice-confirm-btn {
-    color: var(--prism-success-color, #00B42A);
-
-    .fa {
-      background: rgba(0, 180, 42, 0.15);
-      color: #00B42A;
-    }
-
-    &.disabled {
-      opacity: 0.4;
-      pointer-events: none;
-    }
-  }
-
-  .voice-record-btn {
-    width: 120rpx;
-    height: 120rpx;
-    background: var(--prism-primary-color, #3478F6);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-
-    .fa {
-      font-size: 48rpx;
-      color: #FFFFFF;
-    }
-
-    &:active,
-    &.recording {
-      transform: scale(1.1);
-      background: var(--prism-primary-color-active, #2563EB);
-      box-shadow: 0 0 0 16rpx rgba(52, 120, 246, 0.2);
-    }
-  }
-}
-
-// 深色模式
-.dark-mode.prism-voice-input {
-  .voice-modal .modal-content,
-  .voice-content {
-    background: var(--prism-bg-color-card, #1A1A1A);
-  }
-
-  .voice-modal .voice-text,
-  .voice-title,
-  .voice-time {
-    color: var(--prism-text-primary, #E5E6EB);
-  }
-
-  .voice-cancel-btn .fa,
-  .voice-confirm-btn .fa {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-</style>
+<template>
+  <view class="prism-voice-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 模式1: 按钮模式（默认） -->
+    <view
+      v-if="mode === 'button'"
+      class="voice-btn"
+      :class="{ 'recording': isRecording }"
+      @touchstart.prevent="startRecording"
+      @touchend.prevent="stopRecording"
+      @touchcancel.prevent="cancelRecording"
+    >
+      <view class="voice-icon-wrapper">
+        <text class="fa fa-microphone"></text>
+        <!-- 录音波纹动画 -->
+        <view class="voice-waves" v-if="isRecording">
+          <view class="wave wave-1"></view>
+          <view class="wave wave-2"></view>
+          <view class="wave wave-3"></view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 模式2: 弹窗模式 -->
+    <view class="voice-panel" v-if="mode === 'modal' && visible" @click="handleCancel">
+      <view class="voice-content" @click.stop>
+        <view class="voice-title">{{ title }}</view>
+        <view class="voice-wave" :class="{ 'recording': isRecording }">
+          <view class="wave-bar" v-for="i in 5" :key="i"></view>
+        </view>
+        <view class="voice-time">{{ formatTime(recordingTime) }}</view>
+        <view class="voice-tip">{{ isRecording ? '松开结束录音' : '按住开始录音' }}</view>
+        <view class="voice-actions">
+          <view class="voice-cancel-btn" @click="handleCancel">
+            <text class="fa fa-times"></text>
+            <text>取消</text>
+          </view>
+          <view
+            class="voice-record-btn"
+            :class="{ 'recording': isRecording }"
+            @touchstart.prevent="startRecording"
+            @touchend.prevent="stopRecording"
+            @mousedown.prevent="startRecording"
+            @mouseup.prevent="stopRecording"
+          >
+            <text class="fa fa-microphone"></text>
+          </view>
+          <view class="voice-confirm-btn" :class="{ 'disabled': !hasRecorded }" @click="handleConfirm">
+            <text class="fa fa-check"></text>
+            <text>完成</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 按钮模式的录音弹窗提示 -->
+    <view class="voice-modal" v-if="mode === 'button' && isRecording" @click.stop>
+      <view class="modal-content">
+        <view class="voice-animation">
+          <view class="voice-bar" v-for="i in 5" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></view>
+        </view>
+        <text class="voice-text">{{ cancelHint ? '松开取消' : '正在录音...' }}</text>
+        <text class="voice-tip-time">{{ recordingTime }}s</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch, onUnmounted } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  // 模式：button（按钮）或 modal（弹窗）
+  mode: {
+    type: String,
+    default: 'button',
+    validator: (val) => ['button', 'modal'].includes(val)
+  },
+  // 弹窗模式的可见性
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  // 弹窗标题
+  title: {
+    type: String,
+    default: '语音输入'
+  },
+  // 最长录音时间（秒）
+  maxDuration: {
+    type: Number,
+    default: 60
+  }
+});
+
+const emit = defineEmits(['update:visible', 'start', 'end', 'cancel', 'result', 'confirm']);
+
+const appStore = useAppStore();
+const isRecording = ref(false);
+const cancelHint = ref(false);
+const recordingTime = ref(0);
+const hasRecorded = ref(false);
+
+let recordingTimer = null;
+let recorderManager = null;
+
+// 格式化时间
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+}
+
+function startRecording() {
+  isRecording.value = true;
+  cancelHint.value = false;
+  recordingTime.value = 0;
+  hasRecorded.value = false;
+
+  emit('start');
+
+  // 开始计时
+  recordingTimer = setInterval(() => {
+    recordingTime.value++;
+    if (recordingTime.value >= props.maxDuration) {
+      stopRecording();
+    }
+  }, 1000);
+
+  // 使用 uni-app 录音管理器
+  // #ifdef APP-PLUS || MP-WEIXIN
+  recorderManager = uni.getRecorderManager();
+  recorderManager.onStop((res) => {
+    if (!cancelHint.value) {
+      emit('result', {
+        tempFilePath: res.tempFilePath,
+        duration: recordingTime.value
+      });
+    }
+  });
+  recorderManager.start({
+    duration: props.maxDuration * 1000,
+    format: 'mp3'
+  });
+  // #endif
+}
+
+function stopRecording() {
+  if (!isRecording.value) return;
+
+  isRecording.value = false;
+  hasRecorded.value = recordingTime.value > 0;
+  clearInterval(recordingTimer);
+
+  emit('end', { duration: recordingTime.value });
+
+  // #ifdef APP-PLUS || MP-WEIXIN
+  if (recorderManager) {
+    recorderManager.stop();
+  }
+  // #endif
+}
+
+function cancelRecording() {
+  if (!isRecording.value && props.mode === 'button') return;
+
+  cancelHint.value = true;
+  isRecording.value = false;
+  clearInterval(recordingTimer);
+
+  emit('cancel');
+
+  // #ifdef APP-PLUS || MP-WEIXIN
+  if (recorderManager) {
+    recorderManager.stop();
+  }
+  // #endif
+}
+
+// 弹窗模式 - 取消
+function handleCancel() {
+  if (recordingTimer) {
+    clearInterval(recordingTimer);
+    recordingTimer = null;
+  }
+  isRecording.value = false;
+  emit('cancel');
+  closePanel();
+}
+
+// 弹窗模式 - 确认
+function handleConfirm() {
+  if (!hasRecorded.value) return;
+
+  uni.showLoading({ title: '识别中...' });
+
+  setTimeout(() => {
+    uni.hideLoading();
+    emit('confirm', {
+      duration: recordingTime.value
+    });
+    closePanel();
+    uni.showToast({ title: '识别成功', icon: 'success' });
+  }, 1500);
+}
+
+// 关闭弹窗
+function closePanel() {
+  emit('update:visible', false);
+  recordingTime.value = 0;
+  hasRecorded.value = false;
+}
+
+// 监听 visible 变化，重置状态
+watch(() => props.visible, (val) => {
+  if (val) {
+    isRecording.value = false;
+    recordingTime.value = 0;
+    hasRecorded.value = false;
+  }
+});
+
+onUnmounted(() => {
+  if (recordingTimer) {
+    clearInterval(recordingTimer);
+  }
+});
+</script>
+
+<style lang="scss">
+.prism-voice-input {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // ============ 按钮模式 ============
+  .voice-btn {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background: var(--prism-primary-color, #3478F6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    position: relative;
+
+    &:active, &.recording {
+      transform: scale(1.1);
+      box-shadow: 0 8rpx 24rpx rgba(52, 120, 246, 0.4);
+    }
+
+    .voice-icon-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .fa {
+        font-size: 36rpx;
+        color: #FFFFFF;
+        z-index: 2;
+      }
+    }
+
+    .voice-waves {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .wave {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 2rpx solid rgba(255, 255, 255, 0.5);
+        animation: waveAnim 1.5s infinite ease-out;
+      }
+
+      .wave-1 { animation-delay: 0s; }
+      .wave-2 { animation-delay: 0.5s; }
+      .wave-3 { animation-delay: 1s; }
+    }
+  }
+
+  .voice-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+
+    .modal-content {
+      width: 300rpx;
+      height: 300rpx;
+      background: var(--prism-bg-color-card, #FFFFFF);
+      border-radius: 24rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 24rpx;
+    }
+
+    .voice-animation {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 80rpx;
+
+      .voice-bar {
+        width: 8rpx;
+        height: 40rpx;
+        background: var(--prism-primary-color, #3478F6);
+        border-radius: 4rpx;
+        animation: voiceBarAnim 0.8s infinite ease-in-out alternate;
+      }
+    }
+
+    .voice-text {
+      font-size: 28rpx;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .voice-tip-time {
+      font-size: 48rpx;
+      font-weight: 600;
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  @keyframes waveAnim {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes voiceBarAnim {
+    0% { height: 20rpx; }
+    100% { height: 60rpx; }
+  }
+
+  // ============ 弹窗模式 ============
+  .voice-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  .voice-content {
+    width: 560rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 24rpx;
+    padding: 40rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .voice-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+    margin-bottom: 40rpx;
+  }
+
+  .voice-wave {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    height: 100rpx;
+    margin-bottom: 24rpx;
+
+    .wave-bar {
+      width: 8rpx;
+      height: 20rpx;
+      background: var(--prism-text-placeholder, #C9CDD4);
+      border-radius: 4rpx;
+      transition: all 0.3s;
+    }
+
+    &.recording .wave-bar {
+      background: var(--prism-primary-color, #3478F6);
+      animation: prism-voice-wave 0.5s ease-in-out infinite alternate;
+    }
+
+    &.recording .wave-bar:nth-child(1) { animation-delay: 0s; }
+    &.recording .wave-bar:nth-child(2) { animation-delay: 0.1s; }
+    &.recording .wave-bar:nth-child(3) { animation-delay: 0.2s; }
+    &.recording .wave-bar:nth-child(4) { animation-delay: 0.3s; }
+    &.recording .wave-bar:nth-child(5) { animation-delay: 0.4s; }
+  }
+
+  @keyframes prism-voice-wave {
+    0% { height: 20rpx; }
+    100% { height: 80rpx; }
+  }
+
+  .voice-time {
+    font-size: 48rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+    margin-bottom: 16rpx;
+  }
+
+  .voice-tip {
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-bottom: 40rpx;
+  }
+
+  .voice-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .voice-cancel-btn,
+  .voice-confirm-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    color: var(--prism-text-secondary, #86909C);
+
+    .fa {
+      width: 64rpx;
+      height: 64rpx;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28rpx;
+    }
+
+    text:last-child {
+      font-size: 24rpx;
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  .voice-cancel-btn .fa {
+    color: var(--prism-danger-color, #F53F3F);
+    background: rgba(245, 63, 63, 0.15);
+  }
+
+  .voice-confirm-btn {
+    color: var(--prism-success-color, #00B42A);
+
+    .fa {
+      background: rgba(0, 180, 42, 0.15);
+      color: #00B42A;
+    }
+
+    &.disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  .voice-record-btn {
+    width: 120rpx;
+    height: 120rpx;
+    background: var(--prism-primary-color, #3478F6);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+
+    .fa {
+      font-size: 48rpx;
+      color: #FFFFFF;
+    }
+
+    &:active,
+    &.recording {
+      transform: scale(1.1);
+      background: var(--prism-primary-color-active, #2563EB);
+      box-shadow: 0 0 0 16rpx rgba(52, 120, 246, 0.2);
+    }
+  }
+}
+
+// 深色模式
+.dark-mode.prism-voice-input {
+  .voice-modal .modal-content,
+  .voice-content {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  .voice-modal .voice-text,
+  .voice-title,
+  .voice-time {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  .voice-cancel-btn .fa,
+  .voice-confirm-btn .fa {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+</style>