feat(ui): 左侧菜单改分组式(微信管理/WhatsApp管理+下拉子菜单,对齐云客布局)

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

yunkes/src/layouts/MainLayout.vue

@@ -1,55 +1,96 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { useChannelStore } from '@/stores/channel'
+import type { Channel } from '@/api/types'
 
 const route = useRoute()
+const router = useRouter()
+const channelStore = useChannelStore()
 
-// `el-menu` with `router` mode emits when an item is clicked; we drive
-// `default-active` from the current path so the active item highlights on load
-// and on browser back/forward.
+// `el-menu` with `router` mode; we drive `default-active` from the current path
+// so the active item highlights on load and on browser back/forward.
 const activeMenu = computed(() => {
-  // Map chat timeline routes back to their entry list so the nav reflects the
-  // "owning" section while a conversation is open.
   if (route.name === 'chat') return '/customers'
   if (route.name === 'group-chat') return '/groups'
   return route.path
 })
 
-// Navigation menu items — vertical sidebar layout.
-// Channel filtering is handled by each page's own tabs (微信/WhatsApp).
-const navItems = [
-  { path: '/customers', label: '客户', icon: 'ChatLineSquare' },
-  { path: '/staff', label: '员工', icon: 'Avatar' },
-  { path: '/groups', label: '群', icon: 'User' },
-  { path: '/calls', label: '通话', icon: 'Phone' },
-  { path: '/sms', label: '短信', icon: 'Message' },
-  { path: '/sync', label: '同步', icon: 'Refresh' },
-  { path: '/search', label: '搜索', icon: 'Search' },
-]
+// Expand the sub-menu matching the current channel
+const activeChannel = computed(() => {
+  const ch = route.query.channel as string | undefined
+  if (ch === 'whatsapp') return 'wa'
+  return 'wx'
+})
+
+/** Navigate to a page with the channel preset (page reads ?channel= to set tab). */
+function go(path: string, channel: Channel): void {
+  channelStore.setChannel(channel)
+  router.push({ path, query: { channel } })
+}
+
+function goPlain(path: string): void {
+  router.push(path)
+}
 </script>
 
 <template>
   <el-container class="yk-app">
     <el-container>
-      <!-- Left sidebar: vertical nav menu -->
-      <el-aside class="yk-sidenav" width="200px">
+      <!-- Left sidebar: vertical nav menu with grouped sub-menus (mirrors 云客) -->
+      <el-aside class="yk-sidenav" width="210px">
         <div class="yk-sidenav__header">
           <h2 class="yk-sidenav__title">云客数据镜像</h2>
         </div>
         <el-menu
           :default-active="activeMenu"
+          :default-openeds="[activeChannel]"
           class="yk-sidenav__menu"
-          router
         >
-          <el-menu-item
-            v-for="item in navItems"
-            :key="item.path"
-            :index="item.path"
-          >
-            <el-icon>
-              <component :is="item.icon" />
-            </el-icon>
-            <span>{{ item.label }}</span>
+          <!-- 微信管理 -->
+          <el-sub-menu index="wx">
+            <template #title>
+              <span class="yk-sidenav__group">微信管理</span>
+            </template>
+            <el-menu-item index="/staff?channel=wechat" @click="go('/staff', 'wechat')">
+              员工列表
+            </el-menu-item>
+            <el-menu-item index="/customers?channel=wechat" @click="go('/customers', 'wechat')">
+              客户列表
+            </el-menu-item>
+            <el-menu-item index="/calls?channel=wechat" @click="go('/calls', 'wechat')">
+              语音通话列表
+            </el-menu-item>
+            <el-menu-item index="/groups?channel=wechat" @click="go('/groups', 'wechat')">
+              群列表
+            </el-menu-item>
+          </el-sub-menu>
+
+          <!-- WhatsApp管理 -->
+          <el-sub-menu index="wa">
+            <template #title>
+              <span class="yk-sidenav__group">WhatsApp管理</span>
+            </template>
+            <el-menu-item index="/staff?channel=whatsapp" @click="go('/staff', 'whatsapp')">
+              员工列表
+            </el-menu-item>
+            <el-menu-item index="/customers?channel=whatsapp" @click="go('/customers', 'whatsapp')">
+              客户列表
+            </el-menu-item>
+            <el-menu-item index="/calls?channel=whatsapp" @click="go('/calls', 'whatsapp')">
+              语音通话列表
+            </el-menu-item>
+          </el-sub-menu>
+
+          <!-- 通用功能 -->
+          <el-menu-item index="/sms" @click="goPlain('/sms')">
+            短信记录
+          </el-menu-item>
+          <el-menu-item index="/sync" @click="goPlain('/sync')">
+            同步状态
+          </el-menu-item>
+          <el-menu-item index="/search" @click="goPlain('/search')">
+            全局搜索
           </el-menu-item>
         </el-menu>
       </el-aside>
@@ -67,6 +108,7 @@ const navItems = [
   background: #fff;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
 }
 
 .yk-sidenav__header {
@@ -79,8 +121,6 @@ const navItems = [
   font-weight: 700;
   color: #303133;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .yk-sidenav__menu {
@@ -88,18 +128,51 @@ const navItems = [
   padding-top: 4px;
 }
 
-.yk-sidenav__menu :deep(.el-menu-item) {
+.yk-sidenav__group {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.yk-sidenav__menu :deep(.el-sub-menu__title) {
   height: 44px;
   line-height: 44px;
   margin: 2px 8px;
   border-radius: 6px;
 }
 
+.yk-sidenav__menu :deep(.el-sub-menu__title:hover) {
+  background: var(--el-fill-color-light, #f5f7fa);
+}
+
+.yk-sidenav__menu :deep(.el-sub-menu .el-menu) {
+  background: transparent;
+}
+
+.yk-sidenav__menu :deep(.el-menu-item) {
+  height: 40px;
+  line-height: 40px;
+  margin: 1px 8px 1px 20px;
+  border-radius: 6px;
+  font-size: 13px;
+  min-width: auto;
+}
+
 .yk-sidenav__menu :deep(.el-menu-item.is-active) {
   background: var(--el-color-primary-light-9, #ecf5ff);
+  color: var(--el-color-primary);
 }
 
 .yk-sidenav__menu :deep(.el-menu-item:hover) {
   background: var(--el-fill-color-light, #f5f7fa);
 }
+
+/* 顶层普通菜单项（短信/同步/搜索）——与分组标题同高 */
+.yk-sidenav__menu > :deep(.el-menu-item) {
+  height: 44px;
+  line-height: 44px;
+  margin: 2px 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
 </style>

yunkes/src/views/CallList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type TabPaneName } from 'element-plus'
 import { Download } from '@element-plus/icons-vue'
 import { getCalls } from '@/api'
@@ -16,10 +16,15 @@ import { buildCallSections, readField } from '@/utils/callFields'
 import { exportListToCsv } from '@/utils/csvExport'
 import VoiceClipModal from '@/components/VoiceClipModal.vue'
 
+const route = useRoute()
+const router = useRouter()
+
 // Calls aren't tied to a messaging channel — `channel` on a call is the call
 // 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 callType = ref<CallChannel>(
+  route.query.channel === 'whatsapp' ? 'wa_voice_call' : 'voice_call',
+)
 
 // 微信语音 tab scope filter: 对齐云客 微信好友/微信群 二分(isRoom 0=好友, 1=群)。
 // 仅在 voice_call tab 生效;client-side 过滤当前页。
@@ -43,8 +48,6 @@ const voiceClipUserId = ref('')
 const voiceClipChannel = ref<'wechat' | 'whatsapp'>('wechat')
 const voiceClipStaffName = ref<string | null>(null)
 
-const router = useRouter()
-
 // All-fields drawer state.
 const drawerOpen = ref(false)
 const drawerCall = ref<PhoneCall | null>(null)

yunkes/src/views/CustomerList.vue

@@ -47,7 +47,11 @@ const org = useOrgStore()
 // activeTab 跟随全局 channelStore（StaffList viewCustomers 先 setChannel 再 push /customers）。
 // channel 总是具体值（'wechat' | 'whatsapp'），不会是 'all' —— CustomerList 强制按 tab 选 channel，
 // loadTab 永不传 'all'（getCustomers 的 'all'→undefined 分支不会被触发）。
-const activeTab = ref<TabKey>(channelStore.channel === 'whatsapp' ? 'whatsapp' : 'wechat')
+const activeTab = ref<TabKey>(
+  route.query.channel === 'whatsapp' || (!route.query.channel && channelStore.channel === 'whatsapp')
+    ? 'whatsapp'
+    : 'wechat',
+)
 const tabState = reactive<Record<TabKey, TabState>>({
   wechat: freshTabState(),
   whatsapp: freshTabState(),

yunkes/src/views/GroupList.vue

@@ -45,7 +45,11 @@ const channelStore = useChannelStore()
 
 // activeTab 跟随全局 channelStore（StaffList viewGroups 先 setChannel 再 push /groups）。
 // channel 总是具体值（'wechat' | 'whatsapp'），不会是 'all'。
-const activeTab = ref<TabKey>(channelStore.channel === 'whatsapp' ? 'whatsapp' : 'wechat')
+const activeTab = ref<TabKey>(
+  route.query.channel === 'whatsapp' || (!route.query.channel && channelStore.channel === 'whatsapp')
+    ? 'whatsapp'
+    : 'wechat',
+)
 const tabState = reactive<Record<TabKey, TabState>>({
   wechat: freshTabState(),
   whatsapp: freshTabState(),

yunkes/src/views/StaffList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Download } from '@element-plus/icons-vue'
 import { getAccounts, getCustomers, getStaffChatStats } from '@/api'
@@ -53,15 +53,18 @@ function freshTabState(): TabState {
   }
 }
 
-const activeTab = ref<TabKey>('wechat')
+const route = useRoute()
+const router = useRouter()
+const channelStore = useChannelStore()
+
+const activeTab = ref<TabKey>(
+  (route.query.channel === 'whatsapp' ? 'whatsapp' : 'wechat') as TabKey,
+)
 const tabState = reactive<Record<TabKey, TabState>>({
   wechat: freshTabState(),
   whatsapp: freshTabState(),
 })
 
-const router = useRouter()
-const channelStore = useChannelStore()
-
 // All-fields drawer state (shared across tabs).
 const drawerOpen = ref(false)
 const drawerAccount = ref<Account | null>(null)