diff --git a/yunkes/src/api/index.ts b/yunkes/src/api/index.ts
index 77bf4d8..5b22a5e 100644
--- a/yunkes/src/api/index.ts
+++ b/yunkes/src/api/index.ts
@@ -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,
 }
diff --git a/yunkes/src/api/types.ts b/yunkes/src/api/types.ts
index 05dfdd2..d9e4791 100644
--- a/yunkes/src/api/types.ts
+++ b/yunkes/src/api/types.ts
@@ -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
diff --git a/yunkes/src/components/VoiceClipModal.vue b/yunkes/src/components/VoiceClipModal.vue
new file mode 100644
index 0000000..533c06b
--- /dev/null
+++ b/yunkes/src/components/VoiceClipModal.vue
@@ -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>
diff --git a/yunkes/src/views/CallList.vue b/yunkes/src/views/CallList.vue
index 2a13fe4..a7211b0 100644
--- a/yunkes/src/views/CallList.vue
+++ b/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"