feat(ui): 列表页移除tab结构(每渠道独立页面,由侧栏菜单驱动)

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

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 {
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）→ watch 同步通话类型并重载。
-  // v-model has already updated callType; just reset paging and reload.
+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
-  // 切 tab 时复位 scope,避免把 微信群/好友 筛选带到 WA语音/电话 tab。
+      // 复位 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"

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 {
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
-  const ch = String(name) as TabKey
+// 下方 channelStore watch 负责同步 activeTab + lazy-load。
-  channelStore.setChannel(ch)
-  if (!tabState[ch].loaded) loadTab(ch)
-}
-
 // ---- 操作列：查看聊天记录 → 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">
+    <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">
+    <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>
+    </template>
-    </el-tabs>
 
     <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; }
 

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 {
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）；go() 同时 setChannel，
-  const ch = String(name) as TabKey
+// 下方 channelStore watch 负责同步 activeTab + lazy-load。
-  channelStore.setChannel(ch)
-  if (!tabState[ch].loaded) loadTab(ch)
-}
-
 // ---- 操作列：查看聊天记录 → 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">
+    <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">
+    <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>
+    </template>
-    </el-tabs>
 
     <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; }
 

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 {
+// 侧栏菜单在同一页面内切换 ?channel= 时组件复用（不重挂载）→ watch 同步渠道并加载。
-  const ch = String(name) as TabKey
+watch(
-  if (!tabState[ch].loaded) loadTab(ch)
+  () => 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
+  // Load the channel requested via ?channel= (sidebar preset).
-  // lazy-loads on activation.
+  loadTab(activeTab.value)
-  loadTab('wechat')
 })
 </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">
+    <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">
+    <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>
+    </template>
-    </el-tabs>
 
     <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;