feat(calls): VoiceClipModal 只读长语音列表+播放,接入 CallList(微信+WA语音)

Co-Authored-By: Claude <noreply@anthropic.com>

yunkes/src/views/CallList.vue

@@ -12,6 +12,7 @@ import {
   formatTime,
 } from '@/utils/format'
 import { buildCallSections, readField } from '@/utils/callFields'
+import VoiceClipModal from '@/components/VoiceClipModal.vue'
 
 // Calls aren't tied to a messaging channel — `channel` on a call is the call
 // type (phone_call / voice_call / wa_voice_call). We keep a LOCAL filter so it
@@ -30,6 +31,12 @@ const recordDialogVisible = ref(false)
 const recordSrc = ref<string | null>(null)
 const recordTitle = ref('')
 
+// VoiceClipModal state — opened from 微信/WA 语音 tabs by row.user_id.
+const voiceClipModalOpen = ref(false)
+const voiceClipUserId = ref('')
+const voiceClipChannel = ref<'wechat' | 'whatsapp'>('wechat')
+const voiceClipStaffName = ref<string | null>(null)
+
 const router = useRouter()
 
 // All-fields drawer state.
@@ -109,6 +116,19 @@ function playRecord(row: PhoneCall): void {
   recordDialogVisible.value = true
 }
 
+/** 打开长语音 modal：按当前通话员工 user_id 列出其长语音片段（只读）。 */
+function openVoiceClip(row: PhoneCall): void {
+  const userId = row.user_id || (cell(row, 'userId') as string | undefined)
+  if (!userId) {
+    ElMessage.info('该通话无员工 userId，无法查看长语音')
+    return
+  }
+  voiceClipUserId.value = userId
+  voiceClipStaffName.value = row.user_id_name ?? null
+  voiceClipChannel.value = callType.value === 'wa_voice_call' ? 'whatsapp' : 'wechat'
+  voiceClipModalOpen.value = true
+}
+
 function openDrawer(row: PhoneCall): void {
   drawerCall.value = row
   drawerOpen.value = true
@@ -208,10 +228,13 @@ onMounted(load)
             <div class="yk-cell__sub">{{ cell(row, 'userPhone') || '--' }}</div>
           </template>
         </el-table-column>
-        <el-table-column label="通话录音" width="110" align="center">
+        <el-table-column label="通话录音" width="140" align="center">
           <template #default="{ row }">
             <el-button v-if="row.record_media_hash || row.record_file || cell(row, 'recordFile')" size="small" type="primary" link @click.stop="playRecord(row)">播放</el-button>
             <span v-else style="color:#c0c4cc">--</span>
+            <div style="margin-top:2px">
+              <el-button size="small" type="primary" link @click.stop="openVoiceClip(row)">查看长语音</el-button>
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="通话时长" width="100" align="right">
@@ -242,6 +265,9 @@ onMounted(load)
             <div>{{ formatTime(row.start_call_time) }}</div>
             <el-button v-if="row.record_media_hash || row.record_file || cell(row, 'ossFileName')" size="small" type="primary" link @click.stop="playRecord(row)" style="margin-top:2px">播放录音</el-button>
             <span v-else class="yk-cell__sub">无录音</span>
+            <div style="margin-top:2px">
+              <el-button size="small" type="primary" link @click.stop="openVoiceClip(row)">查看长语音</el-button>
+            </div>
           </template>
         </el-table-column>
       </template>
@@ -326,6 +352,14 @@ onMounted(load)
       </div>
     </el-dialog>
 
+    <!-- Voice clip list modal (read-only, opened by 查看长语音) -->
+    <VoiceClipModal
+      v-model="voiceClipModalOpen"
+      :user-id="voiceClipUserId"
+      :channel="voiceClipChannel"
+      :staff-name="voiceClipStaffName"
+    />
+
     <!-- All-fields drawer -->
     <el-drawer
       v-model="drawerOpen"