From ca3a2a2d3d1d96b3960a964adcf51a6d41df4bb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Fri, 7 Aug 2026 10:50:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(calls):=20CallList=20=E6=94=B9=20el-tabs?=
 =?UTF-8?q?=EF=BC=88=E5=BE=AE=E4=BF=A1=E8=AF=AD=E9=9F=B3/WA=20=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3/=E7=94=B5=E8=AF=9D=EF=BC=89+=20CallChannel=20?=
 =?UTF-8?q?=E5=8A=A0=20wa=5Fvoice=5Fcall?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunkes/src/api/types.ts       |  4 ++--
 yunkes/src/views/CallList.vue | 45 +++++++++++++++--------------------
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/yunkes/src/api/types.ts b/yunkes/src/api/types.ts
index daae9d3..ce49ede 100644
--- a/yunkes/src/api/types.ts
+++ b/yunkes/src/api/types.ts
@@ -116,9 +116,9 @@ export interface GroupMember {
 
 /**
  * Phone / voice call record (mirrors backend PhoneCallOut). `channel` here is
- * the call-type in {phone_call, voice_call}, not a messaging channel.
+ * the call-type in {phone_call, voice_call, wa_voice_call}, not a messaging channel.
  */
-export type CallChannel = 'phone_call' | 'voice_call'
+export type CallChannel = 'phone_call' | 'voice_call' | 'wa_voice_call'
 
 export interface PhoneCall {
   call_id: string
diff --git a/yunkes/src/views/CallList.vue b/yunkes/src/views/CallList.vue
index 1f659b7..25dadb7 100644
--- a/yunkes/src/views/CallList.vue
+++ b/yunkes/src/views/CallList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, type TabPaneName } from 'element-plus'
 import { getCalls } from '@/api'
 import type { CallChannel, PhoneCall } from '@/api/types'
 import {
@@ -13,9 +13,9 @@ import {
 import { buildCallSections, readField } from '@/utils/callFields'
 
 // 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')
+// type (phone_call / voice_call / wa_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>('voice_call')
 
 const calls = ref<PhoneCall[]>([])
 const total = ref(0)
@@ -33,17 +33,12 @@ const recordTitle = ref('')
 const drawerOpen = ref(false)
 const drawerCall = ref<PhoneCall | null>(null)
 
-const typeOptions: { value: CallChannel | 'all'; label: string }[] = [
-  { value: 'all', label: '全部类型' },
+const tabs: { value: CallChannel; label: string }[] = [
+  { value: 'voice_call', label: '微信语音' },
+  { value: 'wa_voice_call', label: 'WA 语音' },
   { 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
@@ -74,8 +69,8 @@ function handlePageSizeChange(s: number): void {
   load()
 }
 
-function onTypeChange(value: string | number | boolean | undefined): void {
-  callType.value = value as CallChannel | 'all'
+function onTabChange(_name: TabPaneName): void {
+  // v-model has already updated callType; just reset paging and reload.
   page.value = 1
   load()
 }
@@ -128,22 +123,20 @@ onMounted(load)
       <div>
         <h2 style="margin: 0 0 4px; font-size: 16px">通话记录</h2>
         <span class="yk-calls__sub">
-          共 {{ total }} 条 · 类型：{{ typeLabelCurrent }}
+          共 {{ total }} 条 · 类型：{{ tabs.find(t => t.value === callType)?.label }}
         </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-tabs v-model="callType" class="yk-calls__tabs" @tab-change="onTabChange">
+      <el-tab-pane
+        v-for="t in tabs"
+        :key="t.value"
+        :label="t.label"
+        :name="t.value"
+      />
+    </el-tabs>
+
     <el-alert
       v-if="errorMsg"
       :title="errorMsg"