feat: remaining frontend views (groups/calls/sms/sync) + messageout media fields

Backend (Part A):
- MessageOut: add file_th_url, file_hd_url, duration, transcription_text, md5
  (room_id + sender_head_url already existed) so the chat timeline can render
  image thumbnails, voice duration/transcription, and avatars from a single
  response.
- PhoneCallOut: add record_file so the Calls view can offer recording playback.
- SmsOut: add content (full body) so the SMS detail dialog shows the whole text.
- Tests: red->green for each new field (media fields default None + populated,
  record_file round-trip, content round-trip). Suite 267 -> 271.

Frontend (Part B):
- api/index.ts: wrappers getGroups/getGroupMembers/getCalls/getSms/getSyncStatus
  + Group/GroupMember/PhoneCall/Sms/SyncState/SyncRun/SyncStatus types in
  types.ts (mirror the *Out pydantic schemas).
- views/GroupList.vue (/groups): table + channel filter + pagination; row click
  opens the group timeline.
- views/CallList.vue (/calls): table + call-type filter (phone_call/voice_call/
  all); "播放录音" action opens an el-dialog with <audio controls>.
- views/SmsList.vue (/sms): table; row click opens a detail dialog with the full
  content.
- views/SyncStatus.vue (/sync): two tables (states + recent_runs) with a manual
  refresh; run status color-coded.
- ChatTimeline.vue: reused for both 1:1 DM (talkerId) and group (roomId) by
  branching the query; group title + per-member sender already handled by
  MessageBubble.
- router: add /groups /calls /sms /sync + /group/:channel/:ownerId/:roomId.
- layouts/MainLayout.vue: replace the single 客户列表 button with an el-menu
  (客户 / 群 / 通话 / 短信 / 同步); org tree kept on the left.

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

yunkes/src/views/CallList.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getCalls } from '@/api'
+import type { CallChannel, PhoneCall } from '@/api/types'
+import {
+  callDirectionLabel,
+  callStatusLabel,
+  callTypeLabel,
+  formatCallDuration,
+  formatTime,
+} from '@/utils/format'
+
+// Calls aren't tied to a messaging channel — `channel` on a call is the call
+// type (phone_call / voice_call). We keep a LOCAL filter so it doesn't fight
+// the shared top-bar wechat/whatsapp store used by customers/groups.
+const callType = ref<CallChannel | 'all'>('all')
+
+const calls = ref<PhoneCall[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const loading = ref(false)
+const errorMsg = ref<string | null>(null)
+
+// Recording playback dialog state.
+const recordDialogVisible = ref(false)
+const recordSrc = ref<string | null>(null)
+const recordTitle = ref('')
+
+const typeOptions: { value: CallChannel | 'all'; label: string }[] = [
+  { value: 'all', label: '全部类型' },
+  { value: 'phone_call', label: '电话' },
+  { value: 'voice_call', label: '语音通话' },
+]
+
+const typeLabelCurrent = computed(() => {
+  const opt = typeOptions.find((o) => o.value === callType.value)
+  return opt ? opt.label : '全部类型'
+})
+
+async function load(): Promise<void> {
+  loading.value = true
+  errorMsg.value = null
+  try {
+    const res = await getCalls({
+      channel: callType.value,
+      page: page.value,
+      page_size: pageSize.value,
+    })
+    calls.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 handlePageChange(p: number): void {
+  page.value = p
+  load()
+}
+
+function handlePageSizeChange(s: number): void {
+  pageSize.value = s
+  page.value = 1
+  load()
+}
+
+function onTypeChange(value: string | number | boolean | undefined): void {
+  callType.value = value as CallChannel | 'all'
+  page.value = 1
+  load()
+}
+
+function playRecord(row: PhoneCall): void {
+  if (!row.record_file) {
+    ElMessage.info('该通话无录音文件')
+    return
+  }
+  recordSrc.value = row.record_file
+  const who = row.user_id_name || row.user_id || row.call_id
+  const when = formatTime(row.start_call_time)
+  recordTitle.value = `录音 · ${who}${when !== '--' ? ` · ${when}` : ''}`
+  recordDialogVisible.value = true
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="yk-calls">
+    <div class="yk-calls__header">
+      <div>
+        <h2 style="margin: 0 0 4px; font-size: 16px">通话记录</h2>
+        <span class="yk-calls__sub">
+          共 {{ total }} 条 · 类型：{{ typeLabelCurrent }}
+        </span>
+      </div>
+      <div class="yk-calls__filters">
+        <el-radio-group :model-value="callType" size="small" @change="onTypeChange">
+          <el-radio-button
+            v-for="opt in typeOptions"
+            :key="opt.value"
+            :value="opt.value"
+          >
+            {{ opt.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+    </div>
+
+    <el-alert
+      v-if="errorMsg"
+      :title="errorMsg"
+      type="error"
+      show-icon
+      :closable="false"
+      style="margin-bottom: 12px"
+    />
+
+    <el-table
+      v-loading="loading"
+      :data="calls"
+      stripe
+      border
+      row-key="call_id"
+      style="width: 100%"
+      empty-text="暂无通话记录"
+    >
+      <el-table-column label="时间" width="160">
+        <template #default="{ row }">{{ formatTime(row.start_call_time) }}</template>
+      </el-table-column>
+      <el-table-column label="员工" min-width="130">
+        <template #default="{ row }">
+          {{ row.user_id_name || row.user_id || '--' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="号码" min-width="130">
+        <template #default="{ row }">
+          {{ row.call_number || row.sim_phone || '--' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="方向" width="80">
+        <template #default="{ row }">{{ callDirectionLabel(row.incoming_call) }}</template>
+      </el-table-column>
+      <el-table-column label="类型" width="100">
+        <template #default="{ row }">{{ callTypeLabel(row.channel) }}</template>
+      </el-table-column>
+      <el-table-column label="时长" width="90" align="right">
+        <template #default="{ row }">{{ formatCallDuration(row.call_duration) }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="90">
+        <template #default="{ row }">{{ callStatusLabel(row.call_status) }}</template>
+      </el-table-column>
+      <el-table-column label="录音" width="100" align="center">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.record_file"
+            size="small"
+            type="primary"
+            link
+            @click.stop="playRecord(row)"
+          >
+            播放录音
+          </el-button>
+          <span v-else style="color: #c0c4cc">--</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="yk-calls__pager">
+      <el-pagination
+        :current-page="page"
+        :page-size="pageSize"
+        :page-sizes="[20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="handlePageChange"
+        @size-change="handlePageSizeChange"
+      />
+    </div>
+
+    <el-dialog
+      v-model="recordDialogVisible"
+      :title="recordTitle"
+      width="480px"
+      align-center
+      @closed="recordSrc = null"
+    >
+      <audio
+        v-if="recordSrc"
+        controls
+        :src="recordSrc"
+        style="width: 100%"
+        preload="metadata"
+      >
+        您的浏览器不支持音频播放。
+      </audio>
+      <div v-if="recordSrc" class="yk-calls__record-link">
+        <a :href="recordSrc" target="_blank" rel="noopener">在新窗口打开录音文件</a>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.yk-calls__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.yk-calls__sub {
+  color: #909399;
+  font-size: 13px;
+}
+
+.yk-calls__filters {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.yk-calls__pager {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.yk-calls__record-link {
+  margin-top: 8px;
+  font-size: 12px;
+  text-align: center;
+}
+</style>