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/ChatTimeline.vue

@@ -8,10 +8,19 @@ import type { Channel, Message } from '@/api/types'
 import MessageBubble from '@/components/MessageBubble.vue'
 import { channelLabel } from '@/utils/format'
 
+/**
+ * Chat timeline. Reused for two conversation shapes:
+ *   * 1:1 DM  — `talkerId` set; messages filtered by `talker_id`.
+ *   * Group   — `roomId` set; messages filtered by `room_id`. Group messages
+ *               carry per-member `sender_name` / `sender_head_url`, so each
+ *               bubble identifies its sender (handled by MessageBubble).
+ * Exactly one of `talkerId` / `roomId` is normally present.
+ */
 const props = defineProps<{
   channel: string
   ownerId: string
-  talkerId: string
+  talkerId?: string
+  roomId?: string
 }>()
 
 const router = useRouter()
@@ -31,11 +40,17 @@ const total = ref(0)
 
 const channelTyped = computed(() => props.channel as Channel)
 
+/** True when this timeline is a group chat (drives the query + title). */
+const isGroup = computed(() => !!props.roomId)
+
 const hasMoreOlder = computed(() => currentPage.value > 1)
 
-const conversationTitle = computed(
-  () => `与 ${props.talkerId} 的聊天记录`,
-)
+const conversationTitle = computed(() => {
+  if (isGroup.value) {
+    return `群聊记录 · ${props.roomId}`
+  }
+  return `与 ${props.talkerId} 的聊天记录`
+})
 
 const subtitle = computed(
   () =>
@@ -52,6 +67,18 @@ function scrollToBottom(): void {
   })
 }
 
+/** Shared query params for both DM and group timelines. */
+function queryFor(pageNum: number) {
+  return {
+    channel: channelTyped.value,
+    owner_account_id: props.ownerId,
+    talker_id: isGroup.value ? undefined : props.talkerId,
+    room_id: isGroup.value ? props.roomId : undefined,
+    page: pageNum,
+    page_size: PAGE_SIZE,
+  }
+}
+
 /**
  * Fetch the last page (most recent messages) on entry. Page 1 is fetched first
  * purely to learn `total` so we can compute `lastPage` — the messages API
@@ -61,26 +88,14 @@ async function loadInitial(): Promise<void> {
   loading.value = true
   errorMsg.value = null
   try {
-    const first = await getMessages({
-      channel: channelTyped.value,
-      owner_account_id: props.ownerId,
-      talker_id: props.talkerId,
-      page: 1,
-      page_size: PAGE_SIZE,
-    })
+    const first = await getMessages(queryFor(1))
     total.value = first.total
     totalPages.value = Math.max(1, Math.ceil(first.total / PAGE_SIZE))
 
     if (totalPages.value <= 1) {
       messages.value = first.items
     } else {
-      const last = await getMessages({
-        channel: channelTyped.value,
-        owner_account_id: props.ownerId,
-        talker_id: props.talkerId,
-        page: totalPages.value,
-        page_size: PAGE_SIZE,
-      })
+      const last = await getMessages(queryFor(totalPages.value))
       messages.value = last.items
     }
     currentPage.value = totalPages.value
@@ -100,13 +115,7 @@ async function loadOlder(): Promise<void> {
   const prevHeight = streamRef.value?.scrollHeight ?? 0
   try {
     const prevPage = currentPage.value - 1
-    const res = await getMessages({
-      channel: channelTyped.value,
-      owner_account_id: props.ownerId,
-      talker_id: props.talkerId,
-      page: prevPage,
-      page_size: PAGE_SIZE,
-    })
+    const res = await getMessages(queryFor(prevPage))
     // Backend returns asc, so res.items are older than everything currently
     // shown — prepend them.
     messages.value = [...res.items, ...messages.value]
@@ -134,7 +143,7 @@ function goBack(): void {
 
 // Reload when the route params change (navigating between conversations).
 watch(
-  () => [props.channel, props.ownerId, props.talkerId] as const,
+  () => [props.channel, props.ownerId, props.talkerId, props.roomId] as const,
   () => {
     loadInitial()
   },