zksy-device-management/src/views/device/manhole/index.vue

<script setup>
import { ref } from 'vue'
import { Menu as IconMenu, Monitor, Bell, Location, Setting } from '@element-plus/icons-vue'
import DeviceManagement from './components/device-management.vue'
import AlarmManagement from './components/alarm-management.vue'

const componentsMap = {
  DeviceManagement,
  AlarmManagement
}

const isCollapse = ref(false)
const activeIndex = ref('1')
const currentComponent = ref(DeviceManagement)

const handleSelect = (key) => {
  if (key === '1') {
    currentComponent.value = componentsMap.DeviceManagement
  } else if (key === '2') {
    currentComponent.value = componentsMap.AlarmManagement
  }
}
</script>

<template>
  <div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    <div
        class="bg-dark transition-all duration-300 text-white"
        :class="isCollapse ? 'w-16' : 'w-64'"
    >
      <div class="p-4 flex items-center justify-between border-b border-gray-700">
        <h1 v-if="!isCollapse" class="text-xl font-bold">智能井盖管理</h1>
        <el-button
            type="text"
            @click="isCollapse = !isCollapse"
            class="text-white"
        >
          <el-icon><IconMenu /></el-icon>
        </el-button>
      </div>

      <el-menu
          default-active="1"
          class="border-none"
          :collapse="isCollapse"
          background-color="#1f2937"
          text-color="#fff"
          active-text-color="#409EFF"
          @select="handleSelect"
      >
        <el-menu-item index="1">
          <el-icon><Monitor /></el-icon>
          <template #title>设备管理</template>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><Bell /></el-icon>
          <template #title>报警管理</template>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- Main Content -->
    <div class="flex-1 overflow-auto">
      <!-- <div class="bg-white p-4 shadow-sm flex justify-between items-center">
        <div class="text-lg font-medium">
          {{ currentComponent === 'DeviceManagement' ? '设备管理' : '报警管理' }}
        </div>
        <div class="flex items-center gap-4">
          <el-badge :value="3" class="mr-4">
            <el-icon class="text-xl cursor-pointer"><Bell /></el-icon>
          </el-badge>
          <el-avatar size="small" src="https://placeholder.svg?height=32&width=32" />
          <span>管理员</span>
        </div>
      </div> -->

      <div class="p-6">
        <component :is="currentComponent"></component>
      </div>
    </div>
  </div>
</template>