客户转接系统

frontend/src/layouts/AdminLayout.vue

@@ -18,12 +18,13 @@ import {
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import { logoutAdmin } from '@/api/adminAuth'
 import { useAdminSessionStore } from '@/stores/adminSession'
 
 const router = useRouter()
+const route = useRoute()
 const adminSession = useAdminSessionStore()
 const isCollapsed = ref(false)
 
@@ -57,6 +58,7 @@ const navItems = computed(() => {
   })
 })
 
+const activeMenu = computed(() => route.path)
 const adminName = computed(() => adminSession.nickname || adminSession.username || '管理员')
 
 async function handleLogout() {
@@ -77,7 +79,7 @@ async function handleLogout() {
       <div class="admin-sidebar-header">
         <RouterLink class="admin-brand" to="/admin/dashboard">
           <span class="brand-mark">H</span>
-          <span class="brand-text">哈夫币后台</span>
+          <span class="brand-text" v-show="!isCollapsed">哈夫币后台</span>
         </RouterLink>
         <el-icon class="collapse-btn" @click="isCollapsed = !isCollapsed">
           <Fold v-if="!isCollapsed" />
@@ -85,21 +87,41 @@ async function handleLogout() {
         </el-icon>
       </div>
 
-      <nav class="admin-nav">
-        <RouterLink v-for="item in navItems" :key="item.to" class="admin-nav-link" :to="item.to">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapsed"
+        :collapse-transition="false"
+        router
+        class="admin-menu"
+      >
+        <el-menu-item v-for="item in navItems" :key="item.to" :index="item.to">
           <el-icon><component :is="item.icon" /></el-icon>
-          <span class="nav-text">{{ item.label }}</span>
-        </RouterLink>
-      </nav>
+          <template #title>{{ item.label }}</template>
+        </el-menu-item>
+      </el-menu>
     </aside>
 
     <section class="admin-workspace">
       <header class="admin-topbar">
-        <div>
-          <span>管理系统</span>
-          <strong>{{ adminName }}</strong>
+        <div class="topbar-left">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item v-if="route.meta.title">{{ route.meta.title }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <div class="topbar-right">
+          <el-dropdown trigger="click">
+            <span class="user-info">
+              <el-avatar :size="32" :icon="User" />
+              <span class="username">{{ adminName }}</span>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :icon="SwitchButton" @click="handleLogout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
-        <el-button :icon="SwitchButton" @click="handleLogout">退出</el-button>
       </header>
       <main class="admin-main">
         <slot />
@@ -107,3 +129,139 @@ async function handleLogout() {
     </section>
   </div>
 </template>
+
+<style scoped>
+.admin-shell {
+  display: flex;
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.admin-sidebar {
+  width: 220px;
+  background-color: #304156;
+  transition: width 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.admin-shell--collapsed .admin-sidebar {
+  width: 64px;
+}
+
+.admin-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid #3d4e5f;
+}
+
+.admin-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: #fff;
+  overflow: hidden;
+}
+
+.brand-mark {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #409eff;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.brand-text {
+  font-size: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.collapse-btn {
+  color: #bfcbd9;
+  cursor: pointer;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.collapse-btn:hover {
+  color: #fff;
+}
+
+.admin-menu {
+  flex: 1;
+  border-right: none;
+  background-color: transparent;
+}
+
+.admin-menu:not(.el-menu--collapse) {
+  width: 100%;
+}
+
+:deep(.el-menu-item) {
+  color: #bfcbd9;
+}
+
+:deep(.el-menu-item:hover) {
+  background-color: #263445;
+}
+
+:deep(.el-menu-item.is-active) {
+  color: #409eff;
+  background-color: #263445;
+}
+
+.admin-workspace {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.admin-topbar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  color: #606266;
+}
+
+.username {
+  font-size: 14px;
+}
+
+.admin-main {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+</style>