yunke/yunkes/src/layouts/MainLayout.vue

<script setup lang="ts">
import { computed } from 'vue'
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; we drive `default-active` from the current path
// so the active item highlights on load and on browser back/forward.
const activeMenu = computed(() => {
  if (route.name === 'chat') return '/customers'
  if (route.name === 'group-chat') return '/groups'
  return route.path
})

// 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 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"
        >
          <!-- 微信管理 -->
          <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>

      <el-main class="yk-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.yk-sidenav {
  border-right: 1px solid var(--el-border-color-light, #e4e7ed);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.yk-sidenav__header {
  padding: 16px 16px 8px;
}

.yk-sidenav__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #303133;
  white-space: nowrap;
}

.yk-sidenav__menu {
  border-right: none;
  padding-top: 4px;
}

.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>