| | |
| | | <!-- 顶部栏 --> |
| | | <el-header class="layout-header"> |
| | | <div class="header-content"> |
| | | <span class="system-title">蓉易创管理系统</span> |
| | | <div class="title-container"> |
| | | <img src="/logo.jpg" alt="蓉易创" class="logo-icon" /> |
| | | <span class="system-title">蓉易创比赛管理</span> |
| | | </div> |
| | | <el-dropdown @command="handleCommand"> |
| | | <span class="el-dropdown-link"> |
| | | {{ currentUserName }} |
| | |
| | | <el-aside width="200px" class="layout-aside"> |
| | | <el-menu |
| | | :default-active="$route.path" |
| | | class="sidebar-menu" |
| | | router |
| | | background-color="#545c64" |
| | | text-color="#fff" |
| | | active-text-color="#ffd04b" |
| | | background-color="transparent" |
| | | text-color="#666666" |
| | | active-text-color="#1E3A8A" |
| | | > |
| | | > |
| | | <el-menu-item index="/dashboard"> |
| | | <el-icon><House /></el-icon> |
| | | <span>工作台</span> |
| | | </el-menu-item> |
| | | |
| | | <el-menu-item index="/activity"> |
| | | <el-icon><Calendar /></el-icon> |
| | | <span>比赛信息</span> |
| | |
| | | import { computed } from 'vue' |
| | | import { useRouter } from 'vue-router' |
| | | import { House, Calendar, User, Document, UserFilled, Files, TrendCharts, Picture, Location, Avatar, ArrowDown } from '@element-plus/icons-vue' |
| | | import { clearAuth, getCurrentUserDisplayName } from '@/utils/auth' |
| | | |
| | | const router = useRouter() |
| | | |
| | | const userInfo = computed(() => ({ |
| | | name: '管理员' |
| | | })) |
| | | |
| | | const currentUserName = computed(() => userInfo.value.name || '用户') |
| | | const currentUserName = computed(() => getCurrentUserDisplayName()) |
| | | |
| | | const handleCommand = (command: string) => { |
| | | switch (command) { |
| | |
| | | router.push('/profile') |
| | | break |
| | | case 'logout': |
| | | localStorage.removeItem('token') |
| | | // 清除所有认证数据 |
| | | clearAuth() |
| | | // 跳转到登录页面 |
| | | router.push('/login') |
| | | break |
| | | } |
| | |
| | | |
| | | /* 顶部栏样式 */ |
| | | .layout-header { |
| | | background-color: #B3C0D1; |
| | | background-color: #FFFFFF; |
| | | color: #333; |
| | | line-height: 60px; |
| | | padding: 0 20px; |
| | | border-bottom: 1px solid #dcdfe6; |
| | | border-bottom: 1px solid #E5E7EB; |
| | | } |
| | | |
| | | .header-content { |
| | |
| | | height: 100%; |
| | | } |
| | | |
| | | .title-container { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .logo-icon { |
| | | width: 48px; |
| | | height: 48px; |
| | | } |
| | | |
| | | .system-title { |
| | | font-size: 18px; |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | |
| | | |
| | | /* 侧边栏样式 */ |
| | | .layout-aside { |
| | | background-color: #545c64; |
| | | background-color: #FFFFFF; |
| | | height: 100%; |
| | | border-right: 1px solid #E5E7EB; |
| | | } |
| | | |
| | | .sidebar-menu { |
| | |
| | | border-right: none; |
| | | } |
| | | |
| | | /* 菜单项样式 */ |
| | | .el-menu-item.is-active { |
| | | background-color: #3B82F6 !important; |
| | | color: #FFFFFF !important; |
| | | border-radius: 6px; |
| | | margin: 2px 8px; |
| | | } |
| | | |
| | | .el-menu-item:hover { |
| | | background-color: #EBF4FF !important; |
| | | color: #1E3A8A !important; |
| | | border-radius: 6px; |
| | | margin: 2px 8px; |
| | | } |
| | | |
| | | /* 主内容区域 */ |
| | | .layout-main { |
| | | background-color: #f5f5f5; |
| | | background-color: #FFFFFF; |
| | | padding: 20px; |
| | | } |
| | | |