WetlandGuard-Admin/src/layout/AdminLayout.vue

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessageBox } from 'element-plus';
import { useUserStore } from '../stores/user';
import { useSystemLogStore } from '../stores/systemLog';
import { markRaw } from 'vue';
import {
  Menu as IconMenu,
  Location,
  Setting,
  User,
  DataAnalysis,
  DataBoard,
  Tools,
  Document,
  DataLine,
  Collection,
} from "@element-plus/icons-vue";

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

// 使用 markRaw 包装所有图标组件
const icons = {
  IconMenu: markRaw(IconMenu),
  Location: markRaw(Location),
  Setting: markRaw(Setting),
  User: markRaw(User),
  DataAnalysis: markRaw(DataAnalysis),
  DataBoard: markRaw(DataBoard),
  Tools: markRaw(Tools),
  Document: markRaw(Document),
  DataLine: markRaw(DataLine),
  Collection: markRaw(Collection),
};

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

const handleSelect = (key) => {
  router.push(key);
};

// 处理退出登录
const handleLogout = () => {
  ElMessageBox.confirm(
    '确认退出登录?',
    '提示',
    {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 记录退出日志
    systemLogStore.addLog({
      type: "用户操作",
      user: userStore.username || '',
      action: "退出系统",
      ip: "192.168.1.100",
      status: "成功",
      detail: "用户退出登录"
    });
    // 执行退出
    userStore.logout();
    router.push('/login');
  }).catch(() => {
    // 取消退出
  });
};
</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"
        unique-opened
      >
        <el-menu-item index="/dashboard">
          <el-icon><component :is="icons.DataBoard" /></el-icon>
          <template #title>控制台</template>
        </el-menu-item>

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

        <el-sub-menu index="system">
          <template #title>
            <el-icon><component :is="icons.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-menu-item index="/system/carousel">轮播图管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="monitor">
          <template #title>
            <el-icon><component :is="icons.DataAnalysis" /></el-icon>
            <span>监测管理</span>
          </template>
          <el-menu-item index="/monitor/species">物种监测</el-menu-item>
          <el-menu-item index="/monitor/environment">环境监测</el-menu-item>
          <el-menu-item index="/monitor/observations">观测管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="patrol">
          <template #title>
            <el-icon><component :is="icons.Location" /></el-icon>
            <span>巡护管理</span>
          </template>
          <el-menu-item index="/patrol/plans">巡护计划</el-menu-item>
          <el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
          <el-menu-item index="/patrol/records">巡护记录</el-menu-item>
          <el-menu-item index="/patrol/events">安防事件</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="AIPatrol">
          <template #title>
            <el-icon><component :is="icons.Location" /></el-icon>
            <span>AI巡护</span>
          </template>
          <el-menu-item index="/AIPatrol/camera">摄像头管理</el-menu-item>
          <el-menu-item index="/AIPatrol/sensor">传感器管理</el-menu-item>
          <el-menu-item index="/AIPatrol/drone">无人机管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="report">
          <template #title>
            <el-icon><component :is="icons.Document" /></el-icon>
            <span>报告管理</span>
          </template>
          <el-menu-item index="/report/daily">报告管理</el-menu-item>
          <el-menu-item index="/report/reportTemplates">报告模板</el-menu-item>
          <el-menu-item index="/report/analysis">分析报告</el-menu-item>
          <el-menu-item index="/report/about">项目背景</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="activity">
          <template #title>
            <el-icon><component :is="icons.Collection" /></el-icon>
            <span>活动管理</span>
          </template>
          <el-menu-item index="/activity/study">研学管理</el-menu-item>
          <el-menu-item index="/activity/knowledge">知识库管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="course">
          <template #title>
            <el-icon><component :is="icons.DataLine" /></el-icon>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/course/index">课程管理</el-menu-item>
          <el-menu-item index="/course/application">报名管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="feedback">
          <template #title>
            <el-icon><component :is="icons.DataLine" /></el-icon>
            <span>用户反馈</span>
          </template>
          <el-menu-item index="/feedback/suggestions">意见反馈</el-menu-item>
          <el-menu-item index="/feedback/satisfaction">满意度调查</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="projects">
          <template #title>
            <el-icon><component :is="icons.DataLine" /></el-icon>
            <span>项目简介</span>
          </template>
          <el-menu-item index="/projects">项目简介</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="header-left">
          <el-button link @click="isCollapse = !isCollapse">
            <el-icon><component :is="icons.IconMenu" /></el-icon>
          </el-button>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="user-info">
              <el-icon><component :is="icons.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 @click="handleLogout">退出登录</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>
@use "../styles/variables" as v;

.layout-container {
  height: 100vh;
}

.el-aside {
  background-color: v.$sidebar-bg;
  border-right: 1px solid v.$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 v.$border-color;
    overflow: hidden;

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

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

  .el-menu {
    border-right: none;

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

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

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

.el-header {
  background-color: v.$header-bg;
  box-shadow: v.$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: v.$text-regular;
    }
  }
}

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

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

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