From aa90d9d8f2df95865e612c23515d8c2527d10c15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Sat, 15 Aug 2026 13:41:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4tab=E7=BB=93=E6=9E=84(=E6=AF=8F=E6=B8=A0?=
 =?UTF-8?q?=E9=81=93=E7=8B=AC=E7=AB=8B=E9=A1=B5=E9=9D=A2,=E7=94=B1?=
 =?UTF-8?q?=E4=BE=A7=E6=A0=8F=E8=8F=9C=E5=8D=95=E9=A9=B1=E5=8A=A8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunkes/src/views/CallList.vue     | 36 ++++++++++----------
 yunkes/src/views/CustomerList.vue | 33 +++++++-----------
 yunkes/src/views/GroupList.vue    | 35 ++++++++-----------
 yunkes/src/views/StaffList.vue    | 56 +++++++++++++++----------------
 4 files changed, 72 insertions(+), 88 deletions(-)

diff --git a/yunkes/src/views/CallList.vue b/yunkes/src/views/CallList.vue
index 05a3ddf..0ec5139 100644
--- a/yunkes/src/views/CallList.vue
+++ b/yunkes/src/views/CallList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, type TabPaneName } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { Download } from '@element-plus/icons-vue'
 import { getCalls } from '@/api'
 import type { CallChannel, PhoneCall } from '@/api/types'
@@ -88,13 +88,20 @@ function handlePageSizeChange(s: number): void {
   load()
 }
 
-function onTabChange(_name: TabPaneName): void {
-  // v-model has already updated callType; just reset paging and reload.
-  page.value = 1
-  // 切 tab 时复位 scope,避免把 微信群/好友 筛选带到 WA语音/电话 tab。
-  voiceScope.value = 'all'
-  load()
-}
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）→ watch 同步通话类型并重载。
+watch(
+  () => route.query.channel,
+  (q) => {
+    const next: CallChannel = q === 'whatsapp' ? 'wa_voice_call' : 'voice_call'
+    if (next !== callType.value) {
+      callType.value = next
+      page.value = 1
+      // 复位 scope,避免把 微信群/好友 筛选带到 WA语音。
+      voiceScope.value = 'all'
+      load()
+    }
+  },
+)
 
 // ---- header 导出：当前 tab 通话类型全量记录 CSV ----
 const exporting = ref(false)
@@ -249,7 +256,7 @@ onMounted(load)
   <div class="yk-calls">
     <div class="yk-calls__header">
       <div>
-        <h2 style="margin: 0 0 4px; font-size: 16px">通话记录</h2>
+        <h2 style="margin: 0 0 4px; font-size: 16px">{{ tabs.find(t => t.value === callType)?.label }}通话记录</h2>
         <span class="yk-calls__sub">
           共 {{ total }} 条 · 类型：{{ tabs.find(t => t.value === callType)?.label }}
         </span>
@@ -261,15 +268,6 @@ onMounted(load)
       </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"
diff --git a/yunkes/src/views/CustomerList.vue b/yunkes/src/views/CustomerList.vue
index 3a87323..7e786f3 100644
--- a/yunkes/src/views/CustomerList.vue
+++ b/yunkes/src/views/CustomerList.vue
@@ -192,12 +192,8 @@ function onWechatPageSizeChange(s: number): void { handlePageSizeChange('wechat'
 function onWhatsappPageChange(p: number): void { handlePageChange('whatsapp', p) }
 function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whatsapp', s) }
 
-function onTabChange(name: string | number): void {
-  const ch = String(name) as TabKey
-  channelStore.setChannel(ch)
-  if (!tabState[ch].loaded) loadTab(ch)
-}
-
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
+// 下方 channelStore watch 负责同步 activeTab + lazy-load。
 // ---- 操作列：查看聊天记录 → ChatTimeline ----
 function viewChat(row: Customer): void {
   if (!row.owner_account_id) {
@@ -357,7 +353,7 @@ onMounted(() => {
   <div class="yk-customers">
     <div class="yk-customers__header">
       <div>
-        <h2 style="margin: 0 0 4px; font-size: 16px">客户列表</h2>
+        <h2 style="margin: 0 0 4px; font-size: 16px">{{ activeTab === 'wechat' ? '微信' : 'WhatsApp' }}客户列表</h2>
         <span class="yk-customers__sub">
           共 {{ tabState[activeTab].total }} 条
           <template v-if="departmentName"> · 部门：{{ departmentName }}</template>
@@ -383,11 +379,10 @@ onMounted(() => {
       </div>
     </div>
 
-    <el-tabs v-model="activeTab" class="yk-customers__tabs" @tab-change="onTabChange">
-      <!-- ============================================================
-           微信客户 — 16 列 + 操作，对齐云客 wechatdetail/1/{wxId}.
-           ============================================================ -->
-      <el-tab-pane label="微信客户" name="wechat">
+    <!-- ============================================================
+         微信客户 — 16 列 + 操作，对齐云客 wechatdetail/1/{wxId}.
+         ============================================================ -->
+    <template v-if="activeTab === 'wechat'">
         <el-alert
           v-if="tabState.wechat.errorMsg"
           :title="tabState.wechat.errorMsg"
@@ -516,12 +511,12 @@ onMounted(() => {
             @size-change="onWechatPageSizeChange"
           />
         </div>
-      </el-tab-pane>
+    </template>
 
-      <!-- ============================================================
-           WhatsApp客户 — 7 列，对齐云客 waBusiness/friendlist.
-           ============================================================ -->
-      <el-tab-pane label="WhatsApp客户" name="whatsapp">
+    <!-- ============================================================
+         WhatsApp客户 — 7 列，对齐云客 waBusiness/friendlist.
+         ============================================================ -->
+    <template v-if="activeTab === 'whatsapp'">
         <el-alert
           v-if="tabState.whatsapp.errorMsg"
           :title="tabState.whatsapp.errorMsg"
@@ -588,8 +583,7 @@ onMounted(() => {
             @size-change="onWhatsappPageSizeChange"
           />
         </div>
-      </el-tab-pane>
-    </el-tabs>
+    </template>
 
     <p class="yk-customers__hint">点击任意一行查看客户全部字段。</p>
 
@@ -672,7 +666,6 @@ onMounted(() => {
 }
 .yk-customers__sub { color: #909399; font-size: 13px; }
 .yk-customers__filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.yk-customers__tabs { margin-top: 4px; }
 .yk-customers__pager { margin-top: 12px; display: flex; justify-content: flex-end; }
 .yk-customers__hint { margin: 8px 2px 0; font-size: 12px; color: #c0c4cc; }
 
diff --git a/yunkes/src/views/GroupList.vue b/yunkes/src/views/GroupList.vue
index 18ca8db..3d31fd4 100644
--- a/yunkes/src/views/GroupList.vue
+++ b/yunkes/src/views/GroupList.vue
@@ -134,12 +134,8 @@ function onWechatPageSizeChange(s: number): void { handlePageSizeChange('wechat'
 function onWhatsappPageChange(p: number): void { handlePageChange('whatsapp', p) }
 function onWhatsappPageSizeChange(s: number): void { handlePageSizeChange('whatsapp', s) }
 
-function onTabChange(name: string | number): void {
-  const ch = String(name) as TabKey
-  channelStore.setChannel(ch)
-  if (!tabState[ch].loaded) loadTab(ch)
-}
-
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
+// 下方 channelStore watch 负责同步 activeTab + lazy-load。
 // ---- 操作列：查看聊天记录 → group-chat ----
 function viewChat(row: Group): void {
   if (!row.owner_account_id) {
@@ -274,7 +270,7 @@ onMounted(() => {
   <div class="yk-groups">
     <div class="yk-groups__header">
       <div>
-        <h2 style="margin: 0 0 4px; font-size: 16px">群列表</h2>
+        <h2 style="margin: 0 0 4px; font-size: 16px">{{ activeTab === 'wechat' ? '微信' : 'WhatsApp' }}群列表</h2>
         <span class="yk-groups__sub">
           共 {{ tabState[activeTab].total }} 条
           <template v-if="ownerId"> · 员工账号：{{ ownerId }}</template>
@@ -290,11 +286,10 @@ onMounted(() => {
       </div>
     </div>
 
-    <el-tabs v-model="activeTab" class="yk-groups__tabs" @tab-change="onTabChange">
-      <!-- ============================================================
-           微信群 — 7 列，对齐云客 wechatdetail/2/{wxId}.
-           ============================================================ -->
-      <el-tab-pane label="微信群" name="wechat">
+    <!-- ============================================================
+         微信群 — 7 列，对齐云客 wechatdetail/2/{wxId}.
+         ============================================================ -->
+    <template v-if="activeTab === 'wechat'">
         <el-alert
           v-if="tabState.wechat.errorMsg"
           :title="tabState.wechat.errorMsg"
@@ -356,13 +351,13 @@ onMounted(() => {
             @size-change="onWechatPageSizeChange"
           />
         </div>
-      </el-tab-pane>
+    </template>
 
-      <!-- ============================================================
-           WhatsApp群 — 8 列，对齐云客 waBusiness/friendlist 群列表 tab.
-           ⚠️ WA 群抓取缺失 → 空表；字段推断，待 WA 抓取实现后核对。
-           ============================================================ -->
-      <el-tab-pane label="WhatsApp群" name="whatsapp">
+    <!-- ============================================================
+         WhatsApp群 — 8 列，对齐云客 waBusiness/friendlist 群列表 tab.
+         ⚠️ WA 群抓取缺失 → 空表；字段推断，待 WA 抓取实现后核对。
+         ============================================================ -->
+    <template v-if="activeTab === 'whatsapp'">
         <el-alert
           v-if="tabState.whatsapp.errorMsg"
           :title="tabState.whatsapp.errorMsg"
@@ -431,8 +426,7 @@ onMounted(() => {
             @size-change="onWhatsappPageSizeChange"
           />
         </div>
-      </el-tab-pane>
-    </el-tabs>
+    </template>
 
     <p class="yk-groups__hint">点击任意一行查看群全部字段。</p>
 
@@ -486,7 +480,6 @@ onMounted(() => {
 .yk-groups__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
 .yk-groups__sub { color: #909399; font-size: 13px; }
 .yk-groups__filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-.yk-groups__tabs { margin-top: 4px; }
 .yk-groups__pager { margin-top: 12px; display: flex; justify-content: flex-end; }
 .yk-groups__hint { margin: 8px 2px 0; font-size: 12px; color: #c0c4cc; }
 
diff --git a/yunkes/src/views/StaffList.vue b/yunkes/src/views/StaffList.vue
index 4a670d8..a0a8380 100644
--- a/yunkes/src/views/StaffList.vue
+++ b/yunkes/src/views/StaffList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Download } from '@element-plus/icons-vue'
@@ -502,10 +502,17 @@ function onWhatsappPageSizeChange(s: number): void {
   handlePageSizeChange('whatsapp', s)
 }
 
-function onTabChange(name: string | number): void {
-  const ch = String(name) as TabKey
-  if (!tabState[ch].loaded) loadTab(ch)
-}
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）→ watch 同步渠道并加载。
+watch(
+  () => route.query.channel,
+  (q) => {
+    const next: TabKey = q === 'whatsapp' ? 'whatsapp' : 'wechat'
+    if (next !== activeTab.value) {
+      activeTab.value = next
+      if (!tabState[next].loaded) loadTab(next)
+    }
+  },
+)
 
 // ---------------------------------------------------------------------------
 // Header 导出：当前 tab 渠道全量员工账号 CSV
@@ -575,9 +582,8 @@ const drawerAvatarSrc = computed<string | undefined>(() => {
 })
 
 onMounted(() => {
-  // The visible tab on first paint is 微信员工 — load it. The other tab
-  // lazy-loads on activation.
-  loadTab('wechat')
+  // Load the channel requested via ?channel= (sidebar preset).
+  loadTab(activeTab.value)
 })
 </script>
 
@@ -585,7 +591,7 @@ onMounted(() => {
   <div class="yk-staff">
     <div class="yk-staff__header">
       <div>
-        <h2 style="margin: 0 0 4px; font-size: 16px">员工列表</h2>
+        <h2 style="margin: 0 0 4px; font-size: 16px">{{ activeTab === 'wechat' ? '微信' : 'WhatsApp' }}员工列表</h2>
         <span class="yk-staff__sub">
           按渠道展示员工账号（微信号 / WhatsApp 号），列布局对齐云客后台，点击行查看全部字段。
         </span>
@@ -597,12 +603,11 @@ onMounted(() => {
       </div>
     </div>
 
-    <el-tabs v-model="activeTab" class="yk-staff__tabs" @tab-change="onTabChange">
-      <!-- ============================================================
-           微信员工 (WeChat staff accounts) — 6 compound columns mirroring
-           云客 /cms/wechat/wechatlist (员工微信列表).
-           ============================================================ -->
-      <el-tab-pane label="微信员工" name="wechat">
+    <!-- ============================================================
+         微信员工 (WeChat staff accounts) — 6 compound columns mirroring
+         云客 /cms/wechat/wechatlist (员工微信列表).
+         ============================================================ -->
+    <template v-if="activeTab === 'wechat'">
         <div class="yk-staff__stats-bar">
           <span class="yk-staff__stats-label">沟通统计时段</span>
           <el-date-picker
@@ -781,14 +786,14 @@ onMounted(() => {
             @size-change="onWechatPageSizeChange"
           />
         </div>
-      </el-tab-pane>
+    </template>
 
-      <!-- ============================================================
-           WhatsApp员工 (WhatsApp staff accounts) — 10 columns mirroring
-           云客 /cms/wechat/waBusiness/userlist (员工列表), ending in an
-           操作 column with 好友列表 / 群聊.
-           ============================================================ -->
-      <el-tab-pane label="WhatsApp员工" name="whatsapp">
+    <!-- ============================================================
+         WhatsApp员工 (WhatsApp staff accounts) — 10 columns mirroring
+         云客 /cms/wechat/waBusiness/userlist (员工列表), ending in an
+         操作 column with 好友列表 / 群聊.
+         ============================================================ -->
+    <template v-if="activeTab === 'whatsapp'">
         <el-alert
           v-if="tabState.whatsapp.errorMsg"
           :title="tabState.whatsapp.errorMsg"
@@ -914,8 +919,7 @@ onMounted(() => {
             @size-change="onWhatsappPageSizeChange"
           />
         </div>
-      </el-tab-pane>
-    </el-tabs>
+    </template>
 
     <YkStaffDetailModal
       v-model="detailOpen"
@@ -1007,10 +1011,6 @@ onMounted(() => {
   flex-wrap: wrap;
 }
 
-.yk-staff__tabs {
-  margin-top: 4px;
-}
-
 .yk-staff__pager {
   margin-top: 12px;
   display: flex;