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>
/* ══ 墨玉侧栏:深墨底 + 玉绿血脉(2026-08-22) ══ */
.yk-sidenav {
  border-right: none;
  background: linear-gradient(180deg, #1a2130 0%, #141927 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}
.yk-sidenav::after {
  /* 右缘 1px 玉绿渐隐线,呼应主色而不抢戏 */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 159, 110, 0.35) 30%, rgba(13, 159, 110, 0.08) 100%);
  pointer-events: none;
}

.yk-sidenav__header {
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.yk-sidenav__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f0f3f8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}
.yk-sidenav__title::before {
  /* 品牌玉点:侧栏的记忆点 */
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yk-jade-bright, #35d492);
  box-shadow: 0 0 8px rgba(53, 212, 146, 0.7);
  flex: none;
}

.yk-sidenav__menu {
  border-right: none;
  padding-top: 6px;
  background: transparent;
}

.yk-sidenav__group {
  font-size: 13.5px;
  font-weight: 600;
  color: #e8ecf3;
  letter-spacing: 0.03em;
}

.yk-sidenav__menu :deep(.el-sub-menu__title) {
  height: 44px;
  line-height: 44px;
  margin: 2px 8px;
  border-radius: 8px;
  color: var(--yk-ink-text, #a7b1c4);
}
.yk-sidenav__menu :deep(.el-sub-menu__title:hover) {
  background: rgba(255, 255, 255, 0.05);
  color: #e8ecf3;
}
.yk-sidenav__menu :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
  color: var(--yk-jade-bright, #35d492);
}
.yk-sidenav__menu :deep(.el-sub-menu .el-menu) {
  background: transparent;
}
.yk-sidenav__menu :deep(.el-sub-menu .el-menu .el-menu-item) {
  background: transparent;
}

.yk-sidenav__menu :deep(.el-menu-item) {
  height: 40px;
  line-height: 40px;
  margin: 1px 8px 1px 16px;
  border-radius: 8px;
  font-size: 13px;
  min-width: auto;
  color: var(--yk-ink-text-dim, #8a94a8);
  position: relative;
}
.yk-sidenav__menu :deep(.el-menu-item:hover) {
  background: rgba(255, 255, 255, 0.05);
  color: #dfe5ee;
}
.yk-sidenav__menu :deep(.el-menu-item.is-active) {
  background: rgba(13, 159, 110, 0.16);
  color: var(--yk-jade-bright, #35d492);
  font-weight: 600;
}
.yk-sidenav__menu :deep(.el-menu-item.is-active)::before {
  /* 激活指示:3px 玉绿竖条 */
  content: '';
  position: absolute;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--yk-jade-bright, #35d492);
  box-shadow: 0 0 6px rgba(53, 212, 146, 0.55);
}

/* 顶层普通菜单项（短信/同步/搜索）——与分组标题同高 */
.yk-sidenav__menu > :deep(.el-menu-item) {
  height: 44px;
  line-height: 44px;
  margin: 2px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--yk-ink-text, #a7b1c4);
}
.yk-sidenav__menu > :deep(.el-menu-item.is-active)::before {
  left: -8px;
}
</style>