yunke/yunkes/src/layouts/MainLayout.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useChannelStore } from '@/stores/channel'
import type { Channel } from '@/api/types'

const route = useRoute()
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.
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
})

const channelOptions: { value: Channel | 'all'; label: string }[] = [
  { value: 'all', label: '全部渠道' },
  { value: 'wechat', label: '微信' },
  { value: 'whatsapp', label: 'WhatsApp' },
]

function onChannelChange(value: string | number | boolean | undefined): void {
  channelStore.setChannel(value as Channel | 'all')
}

// Navigation menu items — vertical sidebar layout
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' },
]
</script>

<template>
  <el-container class="yk-app">
    <!-- Top header: title + channel filter -->
    <el-header class="yk-header">
      <h1 class="yk-header__title">云客数据镜像</h1>
      <el-radio-group
        :model-value="channelStore.channel"
        size="default"
        @change="onChannelChange"
      >
        <el-radio-button
          v-for="opt in channelOptions"
          :key="opt.value"
          :value="opt.value"
        >
          {{ opt.label }}
        </el-radio-button>
      </el-radio-group>
    </el-header>

    <el-container>
      <!-- Left sidebar: vertical nav menu (replaces department tree) -->
      <el-aside class="yk-sidenav" width="200px">
        <el-menu
          :default-active="activeMenu"
          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-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;
}

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

.yk-sidenav__menu :deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
  margin: 2px 8px;
  border-radius: 6px;
}

.yk-sidenav__menu :deep(.el-menu-item.is-active) {
  background: var(--el-color-primary-light-9, #ecf5ff);
}

.yk-sidenav__menu :deep(.el-menu-item:hover) {
  background: var(--el-fill-color-light, #f5f7fa);
}
</style>