tnbapp/src/views/map/MapIndex.vue

<template>
  <el-container class="map-layout-container">
    <el-header class="map-header" height="64px">
      <div class="header-content">
        <div class="logo-area">
          <router-link to="/map" class="logo-link">
            <img src="@/assets/img/logo.png" alt="logo" class="logo-img">
            <span class="logo-text">地图</span>
          </router-link>
        </div>

        <div class="menu-area">
          <el-menu
            :default-active="$route.path"
            router
            mode="horizontal"
            class="custom-map-menu"
          >
            <el-menu-item index="/map/photo">
              <i class="el-icon-picture-outline" />
              <span>照片地图</span>
            </el-menu-item>
            <el-menu-item index="/map/chart">
              <i class="el-icon-data-analysis" />
              <span>数据地图</span>
            </el-menu-item>
            <el-menu-item index="/map/ol">
              <i class="el-icon-map-location" />
              <span>OL地图</span>
            </el-menu-item>
          </el-menu>
        </div>

        <div class="user-area">
          <el-dropdown v-if="user" trigger="hover">
            <div class="avatar-wrapper">
              <img :src="user.avatarUrl" class="user-avatar" alt="avatar">
              <i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <el-dropdown-item icon="el-icon-s-platform" @click.native="goToHome">主站首页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" divided @click.native="goToLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-button v-else type="primary" size="small" round @click="$router.push('/login')">
            登 录
          </el-button>
        </div>
      </div>
    </el-header>

    <el-main class="map-main">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="$route.fullPath" />
      </transition>
    </el-main>
  </el-container>
</template>

<script>
import { userMixin } from 'assets/js/mixin'
import { getAuthedUser } from '@/utils/auth'

export default {
  name: 'MapIndex',
  mixins: [userMixin],
  data() {
    return {
      user: null
    }
  },
  // 删除了 $route 的 watch，避免死循环刷新
  created() {
    this.initUser()
  },
  methods: {
    initUser() {
      const userInfo = getAuthedUser()
      if (userInfo) {
        this.user = userInfo
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map-layout-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.map-header {
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 40px;
}

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

/* Logo 样式 */
.logo-area {
  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s;
    &:hover { transform: scale(1.02); }
  }
  .logo-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .logo-text {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    letter-spacing: 1px;
  }
}

/* 菜单样式重置 */
.menu-area {
  flex: 1;
  margin: 0 40px;
  .custom-map-menu.el-menu--horizontal {
    border-bottom: none;
    display: flex;
    justify-content: center;

    .el-menu-item {
      height: 64px;
      line-height: 64px;
      font-size: 15px;
      &:hover { background-color: transparent !important; color: #409EFF !important; }
      &.is-active { border-bottom-width: 3px; font-weight: bold; }
    }
  }
}

/* 用户区域 */
.user-area {
  .avatar-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #ebeef5;
      transition: border-color 0.3s;
      &:hover { border-color: #409EFF; }
    }
    i { margin-left: 5px; color: #909399; }
  }
}

.map-main {
  padding: 20px;
  /* 确保地图容器高度能撑满 */
  height: calc(100vh - 64px);
  overflow-y: auto;
}

/* 简单过渡动画 */
.fade-transform-enter-active, .fade-transform-leave-active {
  transition: all .3s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-10px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10px);
}
</style>