浅念
106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
// `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
|
|
})
|
|
|
|
// 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' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<el-container class="yk-app">
|
|
<el-container>
|
|
<!-- Left sidebar: vertical nav menu -->
|
|
<el-aside class="yk-sidenav" width="200px">
|
|
<div class="yk-sidenav__header">
|
|
<h2 class="yk-sidenav__title">云客数据镜像</h2>
|
|
</div>
|
|
<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__header {
|
|
padding: 16px 16px 8px;
|
|
}
|
|
|
|
.yk-sidenav__title {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #303133;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.yk-sidenav__menu {
|
|
border-right: none;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.yk-sidenav__menu :deep(.el-menu-item) {
|
|
height: 44px;
|
|
line-height: 44px;
|
|
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>
|