hldrCenter/management/src/App.vue

<template>
  <!-- 外层容器 - 固定定位占满全屏 -->
  <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
    <el-container style="height: 100%; min-height: 100%; overflow: hidden;">
      <!-- 侧边栏区域 -->
      <el-aside
          :width="isCollapse ? '64px' : '200px'"
          style="border-right: 1px solid #eee; transition: width 0.3s ease; background-color: #f5f7fa;"
      >
        <el-menu
    :router="true"
    default-active="/home" 
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    background-color="#f5f7fa"
    text-color="#333"
    active-text-color="#409eff"
    :collapse-transition="false"
    style="border-right: none; margin-top: 20px;"
>
    <!-- 首页 - 跳转到 /home -->
    <el-menu-item index="/home">
        <el-icon><House /></el-icon>
        <template #title>首页</template>
    </el-menu-item>

    <!-- 新闻动态 - 跳转到 /news -->
    <el-menu-item index="/news">
        <el-icon><Document /></el-icon>
        <template #title>新闻动态</template>
    </el-menu-item>

    <!-- 资源案例 - 跳转到 /resource -->
    <el-menu-item index="/resource">
        <el-icon><Folder /></el-icon>
        <template #title>资源案例</template>
    </el-menu-item>

    <!-- 社区服务 - 跳转到 /community -->
    <el-menu-item index="/community">
        <el-icon><Discount /></el-icon>
        <template #title>社区服务</template>
    </el-menu-item>
    <el-menu-item index="/person">
        <el-icon><UserFilled /></el-icon>
        <template #title>个人信息</template>
    </el-menu-item>
    </el-menu>
      </el-aside>

      <!-- 右侧主内容容器 -->
      <el-container direction="vertical" style="height: 100%; overflow: hidden;">
        <!-- 顶部导航栏 - 固定高度 -->
        <el-header style="height: 60px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
          <div class="header-left">
            <!-- 替换为单个切换按钮 -->
            <el-button
                @click="isCollapse = !isCollapse"
                size="small"
                style="margin-right: 20px;"
                type="primary"
            >
              <!-- 根据折叠状态显示不同箭头 -->
              {{ isCollapse ? '->' : '<-' }}
            </el-button>
            <el-breadcrumb separator="/" style="line-height: 60px;">
              <el-breadcrumb-item
                  v-for="(item, index) in breadcrumbItems"
                  :key="index"
                  :to="item.path"
              >
                {{ item.meta.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="header-user-area">
            <!-- 通知图标按钮 -->
            <el-button
                size="small"
                circle
                style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
            >
              <el-icon style="font-size: 18px;"><Bell /></el-icon>
            </el-button>

            <!-- 消息图标按钮 -->
            <el-button
                size="small"
                circle
                style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
            >
              <el-icon style="font-size: 18px;"><Message /></el-icon>
            </el-button>

            <!-- 用户下拉菜单 -->
            <el-dropdown trigger="click" placement="bottom-end">
              <div class="user-info" style="cursor: pointer; display: flex; align-items: center;">
                <!-- 调整头像尺寸和样式 -->
                <img
                    src="https://picsum.photos/id/1005/40/40"
                    alt="用户头像"
                    class="user-avatar"
                    style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover;"
                >
                <span class="user-name" style="margin-left: 8px; font-size: 14px;">用户名</span>
                <el-icon style="margin-left: 6px; font-size: 16px;"><ChevronDown /></el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主显示区域 -->
        <el-main style="transition: all 0.3s ease; padding: 20px; margin: 0; overflow-y: auto; flex: 1; box-sizing: border-box;">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Bell,
  Message
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const isCollapse = ref(true)

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

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const route = useRoute()
const breadcrumbItems = ref(route.matched)

// 监听路由变化，更新面包屑
watch(
    () => route.matched,
    (newMatched) => {
      breadcrumbItems.value = newMatched
    },
    { immediate: true }
)
</script>

<style scoped>
/* 禁止水平滚动 */
::v-deep html, ::v-deep body {
  height: 100%;
  overflow: hidden;
}

/* 清除所有默认边距和滚动 */
::v-deep * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 菜单样式 */
.el-menu-vertical-demo {
  border-right: none;
}

/* 顶部栏样式 */
.header-left {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-size: 14px;
}

/* 主内容样式 */
.main-content {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 组件样式穿透 */
::v-deep .el-container,
::v-deep .el-aside,
::v-deep .el-header,
::v-deep .el-main {
  padding: 0;
  margin: 0;
  border: none;
  overflow-x: hidden;
}

::v-deep .el-header {
  background-color: #fff;
}

::v-deep .el-main {
  background-color: #fff;
}

::v-deep .el-menu--horizontal {
  border-bottom: none;
}
</style>