feat(audio): 添加通话录音播放器组件

src/assets/style.css

@@ -885,6 +885,10 @@ video {
   width: 3rem;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-2\/5 {
   width: 40%;
 }
@@ -957,18 +961,12 @@ video {
   flex-shrink: 1;
 }
 
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-@keyframes pulse {
-  50% {
-    opacity: .5;
-  }
+.flex-grow {
+  flex-grow: 1;
 }
 
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 @keyframes spin {
@@ -1127,10 +1125,6 @@ video {
   border-radius: 0.5rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1148,6 +1142,11 @@ video {
   border-top-width: 1px;
 }
 
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -1158,6 +1157,11 @@ video {
   border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
 .border-green-500 {
   --tw-border-opacity: 1;
   border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
@@ -1260,22 +1264,42 @@ video {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 
+.from-blue-50 {
+  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-blue-500 {
   --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-gray-100 {
+  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-white {
   --tw-gradient-from: #fff var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.to-blue-100 {
+  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
+}
+
 .to-blue-600 {
   --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
 }
 
+.to-gray-200 {
+  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
+}
+
 .to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
@@ -1305,11 +1329,21 @@ video {
   padding: 1.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1428,6 +1462,10 @@ video {
   font-style: italic;
 }
 
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .text-blue-300 {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity, 1));
@@ -1532,6 +1570,10 @@ video {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-70 {
   opacity: 0.7;
 }
@@ -1600,6 +1642,18 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-shadow {
   transition-property: box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1646,11 +1700,36 @@ video {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:from-blue-100:hover {
+  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:from-gray-200:hover {
+  --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:to-blue-200:hover {
+  --tw-gradient-to: #bfdbfe var(--tw-gradient-to-position);
+}
+
+.hover\:to-gray-300:hover {
+  --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1666,4 +1745,8 @@ video {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
 }

src/components/callLogs/audio.vue

@@ -0,0 +1,173 @@
+<template>
+    <div class="h-full bg-white p-6 flex flex-col">
+        <!-- 头部 -->
+        <div class="flex justify-between items-center mb-8">
+          <h2 class="text-xl font-medium">通话录音</h2>
+          <el-icon class="cursor-pointer text-gray-400 hover:text-gray-600" @click="drawerVisible = false">
+            <Close />
+          </el-icon>
+        </div>
+        <!-- 音频播放器 -->
+        <div class="bg-gray-50 rounded-lg p-6 mb-6">
+          <div class="flex justify-center mb-4">
+            <el-button class="w-16 h-16 !rounded-full flex items-center justify-center"
+              :type="isPlaying ? 'danger' : 'primary'" @click="togglePlay">
+              <el-icon class="text-2xl">
+                <component :is="isPlaying ? 'Pause' : 'VideoPlay'" />
+              </el-icon>
+            </el-button>
+          </div>
+          <!-- 进度条 -->
+          <div class="mb-2">
+            <el-slider v-model="progress" :max="100" @change="handleProgressChange" />
+          </div>
+          <!-- 时间显示 -->
+          <div class="flex justify-between text-sm text-gray-500">
+            <span>{{ formatTime(currentTime) }}</span>
+            <span>{{ formatTime(duration) }}</span>
+          </div>
+        </div>
+        <!-- 操作按钮 -->
+        <div class="mb-6">
+          <el-button type="primary" class="w-full !rounded-button whitespace-nowrap" @click="handleDownload">
+            <el-icon class="mr-2">
+              <Download />
+            </el-icon>
+            下载录音
+          </el-button>
+        </div>
+        <!-- 转写内容 -->
+        <div class="bg-white rounded-lg p-4 flex flex-col flex-grow overflow-hidden">
+          <h3 class="text-lg font-medium mb-4">语音转写内容</h3>
+          <div class="text-gray-600 leading-relaxed overflow-y-auto flex-grow space-y-2">
+            <div v-for="(message, index) in transcriptionMessages" :key="index" @click="jumpToTime(message.startTime)"
+              :class="[
+                'p-3 transition-colors rounded-lg cursor-pointer group',
+                message.role === 'agent' ? 'bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300' : 'bg-gradient-to-r from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200'
+              ]">
+              <div class="flex justify-between items-center mb-2">
+                <div class="flex items-center gap-2">
+                  <div class="text-xs text-gray-400">{{ formatTime(message.startTime) }}</div>
+                  <div :class="[
+                    'px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap',
+                    message.role === 'agent' ? 'bg-gray-200 text-gray-700 border border-gray-300' : 'bg-blue-100 text-blue-600 border border-blue-200'
+                  ]">
+                    {{ message.role === 'agent' ? '客服' : '客户' }}
+                  </div>
+                </div>
+                <el-button class="!rounded-button opacity-0 group-hover:opacity-100 transition-opacity" size="small"
+                  type="text" @click.stop="playSegment(message.startTime, message.endTime)">
+                  <el-icon class="text-lg">
+                    <VideoPlay />
+                  </el-icon>
+                </el-button>
+              </div>
+              <div class="text-gray-700">{{ message.content }}</div>
+              <div class="text-xs text-gray-400 mt-1">置信度: {{ message.confidence }}%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Close, VideoPlay, Pause, Download } from '@element-plus/icons-vue';
+const drawerVisible = ref(false);
+const deleteDialogVisible = ref(false);
+const isPlaying = ref(false);
+const progress = ref(0);
+const currentTime = ref(0);
+const duration = ref(180); // 示例时长3分钟
+const transcriptionMessages = ref([
+  { role: 'agent', content: '您好，这里是顾客服务中心，很高兴为您服务。', startTime: 0, endTime: 4, confidence: 98 },
+  { role: 'customer', content: '你好，我想咨询一下我前天购买的产品退货问题。', startTime: 5, endTime: 10, confidence: 96 },
+  { role: 'agent', content: '好的，请问您能提供一下订单号码吗？', startTime: 11, endTime: 15, confidence: 97 },
+  { role: 'customer', content: '是的，订单号是2023112509876。', startTime: 16, endTime: 20, confidence: 99 },
+  { role: 'agent', content: '好的，我已经查询到您的订单信息。请问您想退货的原因是什么呢？', startTime: 21, endTime: 27, confidence: 98 },
+  { role: 'customer', content: '产品规格和我预期的不太一样，我想换一个大一点的型号。', startTime: 28, endTime: 35, confidence: 95 },
+  { role: 'agent', content: '明白了。根据我们的退换货政策，您的商品符合七天无理由退换货条件。我这边帮您申请退货，您收到退货地址后，请在三天内寄出商品。', startTime: 36, endTime: 48, confidence: 97 },
+  { role: 'customer', content: '好的，麻烦你了。请问退款大概需要多久？', startTime: 49, endTime: 54, confidence: 98 },
+  { role: 'agent', content: '商品寄出后，我们收到并确认商品完好，会在1-3个工作日内为您办理退款。退款会原路返回至您的支付账户。', startTime: 55, endTime: 65, confidence: 96 },
+  { role: 'customer', content: '明白了，谢谢你的解释。', startTime: 66, endTime: 70, confidence: 99 },
+  { role: 'agent', content: '不客气，很高兴能帮到您。如果您还有其他问题，随时可以联系我们。祝您生活愉快！', startTime: 71, endTime: 80, confidence: 97 }
+]);
+const formatTime = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+const togglePlay = () => {
+  isPlaying.value = !isPlaying.value;
+  if (isPlaying.value) {
+    // 模拟播放进度
+    const timer = setInterval(() => {
+      if (progress.value >= 100) {
+        clearInterval(timer);
+        isPlaying.value = false;
+        progress.value = 0;
+        currentTime.value = 0;
+        return;
+      }
+      progress.value += 1;
+      currentTime.value = (progress.value / 100) * duration.value;
+    }, 1000);
+  }
+};
+const handleProgressChange = (value: number) => {
+  currentTime.value = (value / 100) * duration.value;
+};
+const jumpToTime = (time: number) => {
+  progress.value = (time / duration.value) * 100;
+  currentTime.value = time;
+};
+const playSegment = (startTime: number, endTime: number) => {
+  progress.value = (startTime / duration.value) * 100;
+  currentTime.value = startTime;
+  isPlaying.value = true;
+  // 模拟播放到指定片段结束
+  const timer = setInterval(() => {
+    if (currentTime.value >= endTime || !isPlaying.value) {
+      clearInterval(timer);
+      isPlaying.value = false;
+      return;
+    }
+    progress.value = (currentTime.value / duration.value) * 100;
+    currentTime.value += 1;
+  }, 1000);
+};
+const handleDownload = () => {
+  ElMessage.success('录音文件下载中...');
+};
+const handleDelete = () => {
+  deleteDialogVisible.value = true;
+};
+const confirmDelete = () => {
+  deleteDialogVisible.value = false;
+  drawerVisible.value = false;
+  ElMessage.success('录音已删除');
+};
+const openDrawer = () => {
+  drawerVisible.value = true;
+  progress.value = 0;
+  currentTime.value = 0;
+  isPlaying.value = false;
+};
+</script>
+<style scoped>
+.el-drawer__body {
+  padding: 0;
+  overflow: hidden;
+}
+
+/* 隐藏滚动条但保留滚动功能 */
+.overflow-y-auto::-webkit-scrollbar {
+  display: none;
+}
+
+.overflow-y-auto {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>