app-center/web/src/views/components/layout.vue

<template>
  <div class="flex flex-col h-screen overflow-hidden bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md h-16 flex items-center justify-between px-6">
      <!-- 左侧Logo和菜单按钮 -->
      <div class="flex items-center">
        <div class="flex">
          <button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
            <el-icon><Fold /></el-icon>
          </button>
          <div class="flex items-center">
            <el-icon><Platform /></el-icon>
            <span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
          </div>
        </div>
        <div class="top-header">
          <el-menu
              mode="horizontal"
              :ellipsis="false"
              @open="handleOpen"
              router
          >
            <el-menu-item index="/app-center">新闻中心</el-menu-item>
            <el-menu-item index="/home">公告</el-menu-item>
          </el-menu>
        </div>
      </div>



      <!-- 右侧用户信息 -->
      <div class="flex items-center">
        <div class="relative mr-6">
          <button class="relative text-white focus:outline-none">
            <el-icon><Bell /></el-icon>
            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
          </button>
        </div>

        <div class="flex items-center">
          <img src="https://picsum.photos/200/200?random=1" alt="User Avatar" class="w-8 h-8 rounded-full object-cover">
          <span class="ml-2 hidden sm:block">管理员</span>
          <el-icon><CaretBottom /></el-icon>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="flex flex-1 overflow-hidden">
      <!-- 侧边栏菜单 -->
      <aside class="bg-white shadow-md z-10 transition-all duration-300" :style="{ width: isCollapse ? '64px' : '200px' }">
        <el-menu
            default-active="/home"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            router
        >
          <el-menu-item index="/home">
            <el-icon><IconMenu /></el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="/app-center">
            <el-icon><IconMenu /></el-icon>
            <template #title>应用中心</template>
          </el-menu-item>
<!--          <el-sub-menu index="2">-->
<!--            <template #title>-->
<!--              <el-icon><Location /></el-icon>-->
<!--              <span>导航一</span>-->
<!--            </template>-->
<!--            <el-menu-item-group>-->
<!--              <template #title><span>分组一</span></template>-->
<!--              <el-menu-item index="1-1">菜单项一</el-menu-item>-->
<!--              <el-menu-item index="1-2">菜单项二</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--            <el-menu-item-group title="分组二">-->
<!--              <el-menu-item index="1-3">菜单项三</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--            <el-sub-menu index="1-4">-->
<!--              <template #title><span>菜单项四</span></template>-->
<!--              <el-menu-item index="1-4-1">子菜单项一</el-menu-item>-->
<!--            </el-sub-menu>-->
<!--          </el-sub-menu>-->
<!--          <el-menu-item index="3" disabled>-->
<!--            <el-icon><Document /></el-icon>-->
<!--            <template #title>导航三</template>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="4">-->
<!--            <el-icon><Setting /></el-icon>-->
<!--            <template #title>导航四</template>-->
<!--          </el-menu-item>-->
        </el-menu>
      </aside>

      <!-- 内容区域 -->
      <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
          <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  // 新增：导入需要使用的图标
  Fold,
  Platform,
  Bell,
  CaretBottom
} from '@element-plus/icons-vue'

const isCollapse = ref(false)

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}



.top-header{
  border:none;
  :deep(.el-menu-item){
    background-color: #085ce6;
    color: #fff !important;
    border: none !important;
  }
  :deep(.el-menu-item):hover{
    color: #ffffff !important;
    background-color: #206ce8 !important;
    border: none !important;


  }
  :deep(.el-menu-item):active{
  color: #ffffff !important;
    background-color: #085ce6 !important;
    border: none !important;


  }

  :deep(.el-menu-item):focus{
    color: #ffffff !important;
    background-color: #206ce8 !important;
    border: none !important;
  }



  margin-left: 20px;
}
:deep(.el-menu--horizontal.el-menu ){
  border-bottom: none !important;
}

:deep(.el-menu) {
  background-color: transparent !important;
}
</style>