smart_grid_iot/client/src/layouts/index.vue

<template>
  <a-layout class="admin-layout">
    <!-- 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :width="240" :collapsed-width="80"
      theme="dark" class="sider">
      <!-- Logo区域 -->
      <div class="logo" @click="$router.push('/dashboard')">
        <img src="@/assets/vue.svg" alt="logo" class="logo-img" />
        <h1 v-show="!collapsed" class="logo-title">智能电网IoT</h1>
      </div>

      <!-- 菜单 -->
      <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" mode="inline" theme="dark"
        :items="menuItems" @click="handleMenuClick" />

      <!-- 折叠按钮 -->
      <div class="collapse-btn" @click="toggleCollapse">
        <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
      </div>
    </a-layout-sider>

    <a-layout>
      <!-- 顶栏 -->
      <a-layout-header class="header">
        <div class="header-left">
          <!-- 折叠触发器 -->
          <div class="trigger" @click="toggleCollapse">
            <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
          </div>

          <!-- 面包屑导航 -->
          <a-breadcrumb class="breadcrumb">
            <a-breadcrumb-item>
              <HomeOutlined />
              <span>首页</span>
            </a-breadcrumb-item>
            <template v-for="(item, index) in breadcrumbList" :key="index">
              <a-breadcrumb-item v-if="item.path">
                <router-link v-if="index < breadcrumbList.length - 1" :to="item.path">
                  {{ item.title }}
                </router-link>
                <span v-else>{{ item.title }}</span>
              </a-breadcrumb-item>
            </template>
          </a-breadcrumb>
        </div>

        <div class="header-right">
          <!-- 用户信息下拉菜单 -->
          <a-dropdown :trigger="['click']">
            <a-space class="user-info">
              <a-avatar :size="32" :style="{ backgroundColor: '#1890ff' }">
                {{ userInitial }}
              </a-avatar>
              <span class="username">{{ displayName }}</span>
              <DownOutlined />
            </a-space>
            <template #overlay>
              <a-menu @click="handleUserMenuClick">
                <a-menu-item key="profile" disabled>
                  <UserOutlined />
                  <span>个人中心</span>
                </a-menu-item>
                <a-menu-item key="password" disabled>
                  <LockOutlined />
                  <span>修改密码</span>
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout">
                  <LogoutOutlined />
                  <span style="color: #ff4d4f">退出登录</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 主内容区域 -->
      <a-layout-content class="content">
        <router-view v-slot="{ Component, route: currentRoute }">
          <transition name="fade-slide" mode="out-in">
            <div :key="currentRoute.path" class="view-wrapper">
              <component :is="Component" />
            </div>
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed, watch, h, type Component, type VNode } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  DashboardOutlined,
  SettingOutlined,
  UserOutlined,
  SafetyCertificateOutlined,
  MenuOutlined,
  TeamOutlined,
  ProjectOutlined,
  ScheduleOutlined,
  MonitorOutlined,
  BarChartOutlined,
  BookOutlined,
  FileTextOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  HomeOutlined,
  DownOutlined,
  LogoutOutlined,
  LockOutlined,
} from '@ant-design/icons-vue'
import { usePermissionStore, type MenuNode } from '@/stores/permission'

const router = useRouter()
const route = useRoute()
const permissionStore = usePermissionStore()

// 状态管理
const collapsed = ref(false)
const selectedKeys = ref<string[]>([])
const openKeys = ref<string[]>([])

// 菜单图标映射：菜单 icon 字符串 → 图标组件，未知图标显示默认图标
const iconMap: Record<string, Component> = {
  TeamOutlined,
  ProjectOutlined,
  ScheduleOutlined,
  MonitorOutlined,
  BarChartOutlined,
  SettingOutlined,
  UserOutlined,
  SafetyCertificateOutlined,
  MenuOutlined,
  BookOutlined,
  FileTextOutlined,
  DashboardOutlined,
}

function resolveIcon(icon?: string | null) {
  const iconComponent = icon ? iconMap[icon] : undefined
  return () => h(iconComponent || MenuOutlined)
}

// 侧边栏菜单项结构（与 a-menu items 兼容）
interface MenuItem {
  key: string
  icon: () => VNode
  label: string
  children?: MenuItem[]
}

// 由后端菜单树构建侧边栏菜单：menuType=1 目录 → 子菜单组，menuType=2 菜单 → 菜单项
function buildMenuItems(nodes: MenuNode[]): MenuItem[] {
  const items: MenuItem[] = []
  for (const node of nodes) {
    if (node.menuType === 1) {
      const children = (node.children || [])
        .filter(child => child.menuType === 2 && child.menuPath)
        .map(child => ({
          key: child.menuPath as string,
          icon: resolveIcon(child.icon),
          label: child.menuName,
        }))
      if (children.length) {
        items.push({
          key: node.menuPath || `dir-${node.id}`,
          icon: resolveIcon(node.icon),
          label: node.menuName,
          children,
        })
      }
    } else if (node.menuType === 2 && node.menuPath) {
      items.push({
        key: node.menuPath,
        icon: resolveIcon(node.icon),
        label: node.menuName,
      })
    }
  }
  return items
}

// 菜单配置：仪表盘固定展示在最前 + 后端菜单树动态渲染
const menuItems = computed<MenuItem[]>(() => [
  {
    key: '/dashboard',
    icon: () => h(DashboardOutlined),
    label: '仪表盘',
  },
  ...buildMenuItems(permissionStore.menus),
])

// 计算属性
const userInfo = computed(() => permissionStore.userInfo)
const displayName = computed(() => userInfo.value?.realName || userInfo.value?.username || '管理员')
const userInitial = computed(() => (displayName.value?.charAt(0) || 'A').toUpperCase())

// 面包屑列表
interface BreadcrumbItem {
  title: string
  path?: string
}

const breadcrumbList = computed<BreadcrumbItem[]>(() => {
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  return matched.map(item => ({
    title: item.meta?.title as string,
    path: item.path,
  }))
})

// 监听路由变化，更新菜单选中状态
watch(
  () => route.path,
  (path) => {
    selectedKeys.value = [path]

    // 自动展开父级菜单
    const pathParts = path.split('/').filter(Boolean)
    if (pathParts.length > 1) {
      openKeys.value = [`/${pathParts[0]}`]
    }
  },
  { immediate: true }
)

// 监听侧边栏折叠状态，折叠时关闭所有子菜单
watch(collapsed, (val) => {
  if (val) {
    openKeys.value = []
  } else {
    // 展开时根据当前路由自动打开对应的父菜单
    const pathParts = route.path.split('/').filter(Boolean)
    if (pathParts.length > 1) {
      openKeys.value = [`/${pathParts[0]}`]
    }
  }
})

// 方法
function toggleCollapse() {
  collapsed.value = !collapsed.value
}

function handleMenuClick({ key }: { key: string }) {
  router.push(key)
}

function handleUserMenuClick({ key }: { key: string }) {
  if (key === 'logout') {
    permissionStore.logout()
  }
}
</script>

<style scoped lang="less">
.admin-layout {
  min-height: 100vh;

  .sider {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

    .logo {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s;
      overflow: hidden;

      &:hover {
        background: rgba(255, 255, 255, 0.05);
      }

      .logo-img {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
      }

      .logo-title {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 1px;
      }
    }

    :deep(.ant-menu) {
      border-right: none;
    }

    .collapse-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.65);
      font-size: 18px;
      transition: all 0.3s;

      &:hover {
        color: #1890ff;
        background: rgba(24, 144, 255, 0.1);
      }
    }
  }

  >.ant-layout {
    margin-left: 240px;
    transition: margin-left 0.2s;

    &.ant-layout-has-sider+& {
      margin-left: 80px;
    }
  }

  // 当侧边栏折叠时的样式调整
  .ant-layout-sider-collapsed~.ant-layout {
    margin-left: 80px !important;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #fff;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    height: 64px;
    line-height: 64px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;

      .trigger {
        font-size: 18px;
        padding: 0 12px;
        cursor: pointer;
        color: #333;
        transition: all 0.3s;
        border-radius: 4px;

        &:hover {
          color: #1890ff;
          background: rgba(24, 144, 255, 0.1);
        }
      }

      .breadcrumb {
        font-size: 14px;

        :deep(.anticon) {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }

    .header-right {
      .user-info {
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.04);
          color: #1890ff;
        }

        .username {
          max-width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
        }
      }
    }
  }

  .content {
    margin: 0;
    height: calc(100vh - 64px);
    overflow: hidden;

    .view-wrapper {
      background: #fff;
      padding: 0;
      border-radius: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: none;
    }
  }
}

// 页面切换过渡动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.25s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

// 响应式设计
@media screen and (max-width: 768px) {
  .admin-layout {
    .ant-layout-sider {
      position: fixed !important;
      z-index: 101;
    }

    >.ant-layout {
      margin-left: 80px !important;
    }

    .header {
      padding: 0 12px;

      .breadcrumb {
        display: none; // 小屏幕隐藏面包屑
      }

      .username {
        display: none; // 小屏幕隐藏用户名
      }
    }

    .content {
      margin: 0;

      .view-wrapper {
        padding: 0;
        border-radius: 0;
      }
    }
  }
}
</style>