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>