first commit
This commit is contained in:
240
frontend/src/views/Layout.vue
Normal file
240
frontend/src/views/Layout.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="app-aside" :class="{ collapsed: appStore.collapsed }">
|
||||
<div class="logo">
|
||||
<el-icon size="24"><FirstAidKit /></el-icon>
|
||||
<span v-show="!appStore.collapsed">绩效考核系统</span>
|
||||
</div>
|
||||
|
||||
<el-menu
|
||||
:default-active="route.path"
|
||||
:collapse="appStore.collapsed"
|
||||
background-color="transparent"
|
||||
text-color="#fff"
|
||||
active-text-color="#a8dadc"
|
||||
router
|
||||
>
|
||||
<template v-for="item in menuItems" :key="item.path">
|
||||
<el-menu-item :index="item.path">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<span>{{ item.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="app-wrapper">
|
||||
<!-- 顶部栏 -->
|
||||
<header class="app-header">
|
||||
<div class="header-left">
|
||||
<el-icon
|
||||
class="collapse-btn"
|
||||
size="20"
|
||||
@click="appStore.toggleSidebar"
|
||||
>
|
||||
<component :is="appStore.collapsed ? 'Expand' : 'Fold'" />
|
||||
</el-icon>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<el-dropdown>
|
||||
<span class="user-info">
|
||||
<el-avatar :size="32" icon="User" />
|
||||
<span class="username">管理员</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<main class="app-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useAppStore, useUserStore } from '@/stores'
|
||||
import { getMenuTree } from '@/api/menu'
|
||||
|
||||
const route = useRoute()
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const menuItems = ref([])
|
||||
|
||||
// 加载菜单
|
||||
async function loadMenus() {
|
||||
try {
|
||||
const res = await getMenuTree()
|
||||
// 将后端返回的菜单树转换为前端格式
|
||||
const menus = res.data || []
|
||||
menuItems.value = menus.map(menu => ({
|
||||
path: menu.path,
|
||||
title: menu.menu_name,
|
||||
icon: menu.menu_icon || 'Document',
|
||||
children: menu.children && menu.children.length > 0 ? menu.children.map(child => ({
|
||||
path: child.path,
|
||||
title: child.menu_name,
|
||||
icon: child.menu_icon || 'Document'
|
||||
})) : undefined
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error('加载菜单失败', error)
|
||||
// 使用默认菜单作为后备
|
||||
menuItems.value = [
|
||||
{ path: '/dashboard', title: '工作台', icon: 'HomeFilled' },
|
||||
{ path: '/departments', title: '科室管理', icon: 'OfficeBuilding' },
|
||||
{ path: '/staff', title: '员工管理', icon: 'User' },
|
||||
{ path: '/indicators', title: '考核指标', icon: 'DataAnalysis' },
|
||||
{ path: '/assessments', title: '考核管理', icon: 'Document' },
|
||||
{ path: '/plans', title: '绩效计划', icon: 'Setting' },
|
||||
{ path: '/salary', title: '工资核算', icon: 'Money' },
|
||||
{ path: '/finance', title: '经济核算', icon: 'Coin' },
|
||||
{ path: '/reports', title: '统计报表', icon: 'TrendCharts' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
userStore.logout()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMenus()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-aside {
|
||||
width: 220px;
|
||||
background: linear-gradient(180deg, #1d3557 0%, #457b9d 100%);
|
||||
color: #fff;
|
||||
transition: width 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.collapsed {
|
||||
width: 64px;
|
||||
|
||||
.logo span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
flex: 1;
|
||||
|
||||
.el-menu-item {
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.collapse-btn {
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.username {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: #f5f7fa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user