feat(ui): 去掉顶部渠道筛选(与列表tab重复)+标题移到侧栏

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
2026-08-15 10:19:24 +08:00
parent 719bbeecce
commit 9bec4dd7c8
+23 -36
View File
@@ -1,11 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useChannelStore } from '@/stores/channel'
import type { Channel } from '@/api/types'
const route = useRoute() const route = useRoute()
const channelStore = useChannelStore()
// `el-menu` with `router` mode emits when an item is clicked; we drive // `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 // `default-active` from the current path so the active item highlights on load
@@ -18,17 +15,8 @@ const activeMenu = computed(() => {
return route.path return route.path
}) })
const channelOptions: { value: Channel | 'all'; label: string }[] = [ // Navigation menu items — vertical sidebar layout.
{ value: 'all', label: '全部渠道' }, // Channel filtering is handled by each page's own tabs (微信/WhatsApp).
{ 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 = [ const navItems = [
{ path: '/customers', label: '客户', icon: 'ChatLineSquare' }, { path: '/customers', label: '客户', icon: 'ChatLineSquare' },
{ path: '/staff', label: '员工', icon: 'Avatar' }, { path: '/staff', label: '员工', icon: 'Avatar' },
@@ -42,27 +30,12 @@ const navItems = [
<template> <template>
<el-container class="yk-app"> <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> <el-container>
<!-- Left sidebar: vertical nav menu (replaces department tree) --> <!-- Left sidebar: vertical nav menu -->
<el-aside class="yk-sidenav" width="200px"> <el-aside class="yk-sidenav" width="200px">
<div class="yk-sidenav__header">
<h2 class="yk-sidenav__title">云客数据镜像</h2>
</div>
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
class="yk-sidenav__menu" class="yk-sidenav__menu"
@@ -96,14 +69,28 @@ const navItems = [
flex-direction: column; 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 { .yk-sidenav__menu {
border-right: none; border-right: none;
padding-top: 8px; padding-top: 4px;
} }
.yk-sidenav__menu :deep(.el-menu-item) { .yk-sidenav__menu :deep(.el-menu-item) {
height: 48px; height: 44px;
line-height: 48px; line-height: 44px;
margin: 2px 8px; margin: 2px 8px;
border-radius: 6px; border-radius: 6px;
} }