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

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

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;