feat(ui): 左侧改垂直菜单(替换部门树)+顶部只留标题和渠道筛选

Co-Authored-By: Claude <noreply@anthropic.com>

yunkes/src/layouts/MainLayout.vue

@@ -1,30 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { ChatLineSquare, Refresh, Search } from '@element-plus/icons-vue'
-import { useOrgStore } from '@/stores/org'
 import { useChannelStore } from '@/stores/channel'
-import type { DeptTreeNode } from '@/utils/tree'
 import type { Channel } from '@/api/types'
 
 const route = useRoute()
-const router = useRouter()
-const org = useOrgStore()
 const channelStore = useChannelStore()
 
-const filterText = ref('')
-const treeRef = ref()
-
-// Currently selected dept id drives the customer list via route query.
-const selectedDeptId = computed<string | null>(
-  () => (route.query.department_id as string | undefined) ?? null,
-)
-
 // `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. Group/DM chat routes don't appear in the menu —
+// and on browser back/forward.
-// the active item falls back to none there, which is fine.
 const activeMenu = computed(() => {
   // Map chat timeline routes back to their entry list so the nav reflects the
   // "owning" section while a conversation is open.
@@ -33,28 +18,6 @@ const activeMenu = computed(() => {
   return route.path
 })
 
-const treeProps = { label: 'label', children: 'children' }
-
-// el-tree's `filter-node-method` is called for every node on each keystroke.
-function filterNode(value: string, data: DeptTreeNode): boolean {
-  if (!value) return true
-  return data.label.toLowerCase().includes(value.toLowerCase())
-}
-
-watch(filterText, (val) => {
-  treeRef.value?.filter(val)
-})
-
-function handleNodeClick(node: DeptTreeNode): void {
-  // Toggling a dept navigates to the list with the dept filter applied. The
-  // ChatTimeline view ignores this query — only CustomerList reads it.
-  if (route.name !== 'customers') {
-    router.push({ name: 'customers', query: { department_id: node.dept_id } })
-  } else {
-    router.replace({ name: 'customers', query: { department_id: node.dept_id } })
-  }
-}
-
 const channelOptions: { value: Channel | 'all'; label: string }[] = [
   { value: 'all', label: '全部渠道' },
   { value: 'wechat', label: '微信' },
@@ -65,33 +28,21 @@ function onChannelChange(value: string | number | boolean | undefined): void {
   channelStore.setChannel(value as Channel | 'all')
 }
 
-async function reloadTree(): Promise<void> {
+// Navigation menu items — vertical sidebar layout
-  try {
+const navItems = [
-    await org.ensureLoaded(true)
+  { path: '/customers', label: '客户', icon: 'ChatLineSquare' },
-    ElMessage.success('部门已刷新')
+  { path: '/staff', label: '员工', icon: 'Avatar' },
-  } catch (e) {
+  { path: '/groups', label: '群', icon: 'User' },
-    ElMessage.error((e as Error).message)
+  { path: '/calls', label: '通话', icon: 'Phone' },
-  }
+  { path: '/sms', label: '短信', icon: 'Message' },
-}
+  { path: '/sync', label: '同步', icon: 'Refresh' },
-
+  { path: '/search', label: '搜索', icon: 'Search' },
-// The tree's `current-key` highlights the active department. We re-apply it
+]
-// whenever the underlying dept id changes (e.g. browser back/forward).
-watch(selectedDeptId, (id) => {
-  treeRef.value?.setCurrentKey(id ?? undefined)
-})
-
-onMounted(async () => {
-  try {
-    await org.ensureLoaded()
-  } catch {
-    /* error surfaced in the aside placeholder */
-  }
-  treeRef.value?.setCurrentKey(selectedDeptId.value ?? undefined)
-})
 </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
@@ -107,114 +58,27 @@ onMounted(async () => {
           {{ opt.label }}
         </el-radio-button>
       </el-radio-group>
-      <span class="yk-header__spacer" />
-      <el-menu
-        :default-active="activeMenu"
-        mode="horizontal"
-        :ellipsis="false"
-        class="yk-header__nav"
-        router
-      >
-        <el-menu-item index="/customers">
-          <el-icon><ChatLineSquare /></el-icon>
-          <span>客户</span>
-        </el-menu-item>
-        <el-menu-item index="/staff">
-          <el-icon><Avatar /></el-icon>
-          <span>员工</span>
-        </el-menu-item>
-        <el-menu-item index="/groups">
-          <el-icon><User /></el-icon>
-          <span>群</span>
-        </el-menu-item>
-        <el-menu-item index="/calls">
-          <el-icon><Phone /></el-icon>
-          <span>通话</span>
-        </el-menu-item>
-        <el-menu-item index="/sms">
-          <el-icon><Message /></el-icon>
-          <span>短信</span>
-        </el-menu-item>
-        <el-menu-item index="/sync">
-          <el-icon><Refresh /></el-icon>
-          <span>同步</span>
-        </el-menu-item>
-        <el-menu-item index="/search">
-          <el-icon><Search /></el-icon>
-          <span>搜索</span>
-        </el-menu-item>
-      </el-menu>
     </el-header>
 
     <el-container>
-      <el-aside class="yk-aside" :width="'var(--yk-aside-width)'">
+      <!-- Left sidebar: vertical nav menu (replaces department tree) -->
-        <div class="yk-aside__search">
+      <el-aside class="yk-sidenav" width="200px">
-          <el-input
+        <el-menu
-            v-model="filterText"
+          :default-active="activeMenu"
-            size="small"
+          class="yk-sidenav__menu"
-            clearable
+          router
-            placeholder="搜索部门"
+        >
-            :prefix-icon="Search"
+          <el-menu-item
-          />
+            v-for="item in navItems"
-          <div
+            :key="item.path"
-            style="
+            :index="item.path"
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              margin-top: 6px;
-            "
           >
-            <span style="color: #909399; font-size: 12px">部门</span>
+            <el-icon>
-            <el-button
+              <component :is="item.icon" />
-              text
+            </el-icon>
-              size="small"
+            <span>{{ item.label }}</span>
-              :loading="org.loading"
+          </el-menu-item>
-              title="刷新"
+        </el-menu>
-              @click="reloadTree"
-            >
-              <el-icon><Refresh /></el-icon>
-            </el-button>
-          </div>
-        </div>
-
-        <div class="yk-aside__tree">
-          <el-tree
-            ref="treeRef"
-            :data="org.tree"
-            :props="treeProps"
-            node-key="dept_id"
-            :current-node-key="selectedDeptId ?? undefined"
-            :filter-node-method="filterNode"
-            :expand-on-click-node="false"
-            :default-expand-all="false"
-            highlight-current
-            empty-text="暂无部门"
-            @node-click="handleNodeClick"
-          >
-            <template #default="{ data }">
-              <span class="yk-tree-node">
-                {{ data.label }}
-                <el-tag
-                  v-if="data.dept_id === selectedDeptId"
-                  size="small"
-                  type="primary"
-                  effect="plain"
-                  style="margin-left: 4px"
-                >
-                  筛选中
-                </el-tag>
-              </span>
-            </template>
-          </el-tree>
-
-          <div
-            v-if="org.error"
-            class="yk-empty"
-            style="font-size: 12px; padding: 12px"
-          >
-            加载失败：{{ org.error }}
-          </div>
-        </div>
       </el-aside>
 
       <el-main class="yk-main">
@@ -225,22 +89,30 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.yk-tree-node {
+.yk-sidenav {
-  display: inline-flex;
+  border-right: 1px solid var(--el-border-color-light, #e4e7ed);
-  align-items: center;
+  background: #fff;
-  font-size: 13px;
+  display: flex;
+  flex-direction: column;
 }
 
-/* The horizontal nav lives inside the app header, so strip the default menu
+.yk-sidenav__menu {
- * border/background that would otherwise clash with the header's own styling. */
+  border-right: none;
-.yk-header__nav.el-menu--horizontal {
+  padding-top: 8px;
-  border-bottom: none;
-  background: transparent;
-  flex: 0 0 auto;
 }
 
-.yk-header__nav.el-menu--horizontal :deep(.el-menu-item) {
+.yk-sidenav__menu :deep(.el-menu-item) {
-  height: var(--yk-header-height);
+  height: 48px;
-  line-height: var(--yk-header-height);
+  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>