hospital_performance/frontend/src/views/Layout.vue

<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>