<template>
  <el-container style="height: 96vh;">
    <!-- Header 区域 -->
    <el-header>
      <el-row>
        <el-menu :default-active="activeMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
          mode="horizontal">
          <!-- <el-menu-item index="previews"
            @click="handleNavigation('/previews')">预览</el-menu-item> -->
          <el-menu-item index="settings" @click="handleNavigation('/settings')">配置</el-menu-item>
          <!-- <el-menu-item index="about"
            @click="handleNavigation('/about')">关于</el-menu-item> -->
        </el-menu>
      </el-row>
    </el-header>

    <!-- Main 内容区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>


  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: 'previews', // 当前激活的菜单项
    };
  },
  methods: {
    handleNavigation(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
  },
  watch: {
    $route(to) {
      // 根据路由变化更新菜单高亮
      this.activeMenu = to.name || 'previews';
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #545c64;
  border-bottom: 1px solid #545c64;
}

.el-menu {
  border: none;
  background: transparent;
}

.el-menu-item {
  padding: 0 20px;
}
</style>
