xinyouhe/yunke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
2026-08-10 18:37:29 +08:00
parent d9060b6920
commit f1b5861b35
4 changed files with 406 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
yunkes/src/api/index.ts
+38
View File
@@ -22,6 +22,7 @@ import type {
SyncRun,
SyncState,
SyncStatus,
VoiceClip,
} from './types'
/** Drop entries whose value is `undefined`, `null`, or `''`. */
@@ -191,6 +192,42 @@ export function getCalls(query: CallQuery = {}): Promise<Page<PhoneCall>> {
)
}
// ---------------------------------------------------------------------------
// Voice clips (长语音片段 — read-only mirror of 云客 /wechatweb/call/list)
// ---------------------------------------------------------------------------
export interface VoiceClipQuery {
/** 员工 userId 精确过滤（modal 从 CallList 行打开时传）。 */
user_id?: string
/** 员工姓名模糊过滤（云客 modal 的「员工姓名」筛选项）。 */
user_real_name?: string
/** 本地通道标记（wechat / whatsapp），非上游筛选。 */
channel?: string
/** ms-epoch inclusive 窗口，与 end_time 比较（录音结束时间）。 */
start?: number
end?: number
/** 企业串码。 */
company_code?: string
page?: number
page_size?: number
}
export function getVoiceClips(query: VoiceClipQuery = {}): Promise<Page<VoiceClip>> {
return getJson<Page<VoiceClip>>(
'/voice-clips',
clean({
user_id: query.user_id,
user_real_name: query.user_real_name,
channel: query.channel,
start: query.start,
end: query.end,
company_code: query.company_code,
page: query.page ?? 1,
page_size: query.page_size ?? 10,
}),
)
}
// ---------------------------------------------------------------------------
// SMS
// ---------------------------------------------------------------------------
@@ -324,4 +361,5 @@ export type {
SyncRun,
SyncState,
SyncStatus,
VoiceClip,
}
yunkes/src/api/types.ts
+31
View File
@@ -148,6 +148,37 @@ export interface PhoneCall {
raw_json?: Record<string, unknown> | null
}
/**
* Voice clip (长语音片段) row — mirrors backend VoiceClipOut. Source: 云客
* `/wechatweb/call/list`, shared by 微信/WA voice tabs. Read-only in the mirror
* (no matching/ASR yet). `oss_file_name` is the OSS recording URL (played
* directly from the 云客 CDN — see spec §7.3, known 全本地 gap).
*/
export interface VoiceClip {
voice_clip_id: number
user_id: string
user_real_name?: string | null
wx_id?: string | null
talker?: string | null
status?: string | null
is_send?: boolean | null
company_code?: string | null
/** ms-epoch */
start_time?: number | null
/** ms-epoch */
end_time?: number | null
/** OSS recording URL (aliyun OSS 直链). */
oss_file_name?: string | null
/** seconds */
mp3_duration?: number | null
/** `HH:MM:SS` formatted duration from upstream. */
duration_format?: string | null
/** `wechat` / `whatsapp` — local tag set at scrape time (not sent upstream). */
channel: string
/** Verbatim upstream call/list record (camelCase keys). */
raw_json?: Record<string, unknown> | null
}
/** SMS log row (mirrors backend SmsOut). */
export interface Sms {
sms_id: string
yunkes/src/components/VoiceClipModal.vue
+302
View File
@@ -0,0 +1,302 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getVoiceClips } from '@/api'
import type { VoiceClip } from '@/api/types'
import { formatCallDuration, formatTime } from '@/utils/format'
/**
* 长语音记录 modal（只读）—— 复刻云客「微信长语音列表」modal 的展示部分。
* 调用方传 `userId`（从 CallList 行传入，精确限定员工）。
*
* 本期仅只读：列出片段 + 内联播放录音；不做匹配 / 转写 / 回写（spec §7）。
* 播放直接用 `oss_file_name` 的 OSS 直链（已知全本地妥协，随 ASR 一起修）。
*/
const props = withDefaults(
defineProps<{
modelValue: boolean
userId: string
/** 本地通道标记（wechat / whatsapp）。 */
channel?: string
title?: string
/** 该员工姓名，用于标题展示（可选）。 */
staffName?: string | null
}>(),
{
channel: 'wechat',
title: '',
staffName: null,
},
)
const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
const loading = ref(false)
const errorMsg = ref<string | null>(null)
const items = ref<VoiceClip[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
// 录音结束时间窗（el-date-picker datetimerange，clearable）。
const dateRange = ref<[Date, Date] | null>(null)
// 当前内联播放的片段。
const playingUrl = ref<string | null>(null)
const playingLabel = ref('')
const dialogTitle = computed(() => {
if (props.title) return props.title
const who = props.staffName || props.userId
return `长语音记录 · ${who}`
})
async function load(): Promise<void> {
if (!props.userId) {
items.value = []
total.value = 0
return
}
loading.value = true
errorMsg.value = null
try {
let start: number | undefined
let end: number | undefined
if (dateRange.value && dateRange.value.length === 2) {
start = dateRange.value[0].getTime()
end = dateRange.value[1].getTime()
}
const res = await getVoiceClips({
user_id: props.userId,
channel: props.channel,
start,
end,
page: page.value,
page_size: pageSize.value,
})
items.value = res.items
total.value = res.total
} catch (e) {
errorMsg.value = (e as Error).message
ElMessage.error(`长语音记录加载失败：${(e as Error).message}`)
} finally {
loading.value = false
}
}
function durationDisplay(row: VoiceClip): string {
return row.duration_format || formatCallDuration(row.mp3_duration)
}
function playClip(row: VoiceClip): void {
const url = row.oss_file_name
if (!url) {
ElMessage.info('该片段无录音文件')
return
}
playingUrl.value = url
const who = row.user_real_name || row.user_id
const when = formatTime(row.end_time)
playingLabel.value = `${who}${when !== '--' ? ` · ${when}` : ''}`
}
function closePlaying(): void {
playingUrl.value = null
playingLabel.value = ''
}
function onFilterChange(): void {
page.value = 1
load()
}
function resetFilters(): void {
dateRange.value = null
page.value = 1
load()
}
function handlePageChange(p: number): void {
page.value = p
load()
}
function handlePageSizeChange(s: number): void {
pageSize.value = s
page.value = 1
load()
}
watch(
() => props.modelValue,
(open) => {
if (open) {
page.value = 1
dateRange.value = null
playingUrl.value = null
playingLabel.value = ''
load()
}
},
)
</script>
<template>
<el-dialog
:model-value="modelValue"
:title="dialogTitle"
width="900px"
align-center
@update:model-value="emit('update:modelValue', $event)"
@closed="closePlaying"
>
<!-- Filters: 录音结束时间范围（对齐云客 modal 三筛之一，本期只做时间窗） -->
<div class="yk-voice-clip__filters">
<span class="yk-voice-clip__filter-label">录音结束时间</span>
<el-date-picker
v-model="dateRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
size="small"
format="YYYY-MM-DD HH:mm:ss"
@change="onFilterChange"
/>
<el-button link type="primary" size="small" @click="resetFilters">重置</el-button>
</div>
<el-alert
v-if="errorMsg"
:title="errorMsg"
type="error"
show-icon
:closable="false"
style="margin-bottom: 8px"
/>
<!-- Inline playback bar -->
<div v-if="playingUrl" class="yk-voice-clip__player">
<div class="yk-voice-clip__player-label">{{ playingLabel }}</div>
<audio controls :src="playingUrl" preload="metadata" style="width: 100%">
您的浏览器不支持音频播放。
</audio>
<a :href="playingUrl" target="_blank" rel="noopener" class="yk-voice-clip__player-link">
在新窗口打开
</a>
</div>
<el-table
v-loading="loading"
:data="items"
border
size="small"
style="width: 100%"
empty-text="暂无长语音记录"
>
<el-table-column label="员工姓名" min-width="100">
<template #default="{ row }">{{ row.user_real_name || row.user_id || '--' }}</template>
</el-table-column>
<el-table-column label="企业串码" prop="company_code" width="110">
<template #default="{ row }">{{ row.company_code || '--' }}</template>
</el-table-column>
<el-table-column label="录音开始" min-width="150">
<template #default="{ row }">{{ formatTime(row.start_time) }}</template>
</el-table-column>
<el-table-column label="录音结束" min-width="150">
<template #default="{ row }">{{ formatTime(row.end_time) }}</template>
</el-table-column>
<el-table-column label="录音时长" width="100" align="right">
<template #default="{ row }">{{ durationDisplay(row) }}</template>
</el-table-column>
<el-table-column label="文件地址" min-width="160" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row.oss_file_name" class="yk-voice-clip__url" :title="row.oss_file_name">
{{ row.oss_file_name }}
</span>
<span v-else style="color: #c0c4cc">--</span>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #default="{ row }">
<el-button
v-if="row.oss_file_name"
link
type="primary"
size="small"
@click="playClip(row)"
>
播放
</el-button>
<span v-else style="color: #c0c4cc">--</span>
</template>
</el-table-column>
</el-table>
<div class="yk-voice-clip__pager">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 20, 50]"
:total="total"
layout="total, sizes, prev, pager, next"
background
size="small"
@current-change="handlePageChange"
@size-change="handlePageSizeChange"
/>
</div>
<template #footer>
<el-button @click="emit('update:modelValue', false)">关闭</el-button>
</template>
</el-dialog>
</template>
<style scoped>
.yk-voice-clip__filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.yk-voice-clip__filter-label {
font-size: 13px;
color: #606266;
}
.yk-voice-clip__player {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
padding: 8px 10px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 4px;
}
.yk-voice-clip__player-label {
font-size: 12px;
color: #606266;
}
.yk-voice-clip__player-link {
font-size: 12px;
color: var(--el-color-primary, #409eff);
align-self: flex-end;
}
.yk-voice-clip__url {
color: #909399;
font-size: 12px;
word-break: break-all;
}
.yk-voice-clip__pager {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
</style>
yunkes/src/views/CallList.vue
+35 -1
View File
@@ -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"