WetlandGuard-Admin/src/layout/AdminLayout.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  Menu as IconMenu,
  Location,
  Setting,
  User,
  Monitor,
  Tools,
  Document,
  DataLine,
} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const isCollapse = ref(false);
const activeMenu = ref(route.path); // 初始化为当前路由路径

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath;
  }
);

const handleSelect = (key: string) => {
  router.push(key);
};
</script>

<template>
  <el-container class="layout-container">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="logo-container">
        <h1 v-if="!isCollapse" class="logo-title">智慧湿地</h1>
      </div>
      <el-menu
        :collapse="isCollapse"
        :default-active="activeMenu"
        class="el-menu-vertical"
        @select="handleSelect"
      >
        <el-menu-item index="/dashboard">
          <el-icon><Monitor /></el-icon>
          <template #title>控制台</template>
        </el-menu-item>

        <el-menu-item index="/screen">
          <el-icon><DataLine /></el-icon>
          <template #title>数据大屏</template>
        </el-menu-item>

        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/system/users">用户管理</el-menu-item>
          <el-menu-item index="/system/roles">角色管理</el-menu-item>
          <el-menu-item index="/system/permissions">权限管理</el-menu-item>
          <el-menu-item index="/system/settings">系统设置</el-menu-item>
          <el-menu-item index="/system/logs">系统日志</el-menu-item>
          <el-menu-item index="/system/data">数据管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="monitor">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>监测管理</span>
          </template>
          <el-menu-item index="/monitor/species">物种监测</el-menu-item>
          <el-menu-item index="/monitor/environment">环境监测</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="patrol">
          <template #title>
            <el-icon><Location /></el-icon>
            <span>巡护管理</span>
          </template>
          <el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
          <el-menu-item index="/patrol/records">巡护记录</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="report">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>报告管理</span>
          </template>
          <el-menu-item index="/report/daily">日常报告</el-menu-item>
          <el-menu-item index="/report/analysis">分析报告</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="header-left">
          <el-button type="text" @click="isCollapse = !isCollapse">
            <el-icon><IconMenu /></el-icon>
          </el-button>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="user-info">
              <el-icon><User /></el-icon>
              管理员
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
@import "../styles/variables.scss";

.layout-container {
  height: 100vh;
}

.el-aside {
  background-color: $sidebar-bg;
  border-right: 1px solid $border-color;
  transition: width 0.3s;

  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-bottom: 1px solid $border-color;
    overflow: hidden;

    .logo-img {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }

    .logo-title {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: $primary-color;
      white-space: nowrap;
      letter-spacing: 2px;
    }
  }

  .el-menu {
    border-right: none;

    &.el-menu-vertical {
      .el-menu-item,
      .el-sub-menu__title {
        color: $text-regular;

        &:hover {
          color: $primary-color;
          background-color: #ecf5ff;
        }

        &.is-active {
          color: $primary-color;
          background-color: #ecf5ff;
        }
      }
    }
  }
}

.el-header {
  background-color: $header-bg;
  box-shadow: $box-shadow;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.header-left {
  .el-button {
    padding: 8px;

    .el-icon {
      font-size: 20px;
      color: $text-regular;
    }
  }
}

.header-right {
  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $text-regular;

    .el-icon {
      margin-right: 8px;
      font-size: 16px;
    }
  }
}

.el-main {
  background-color: $bg-color;
  padding: 20px;
}
</style>