tk-page-miniBackstage/src/views/nav.vue

<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside :width="asideWidth" class="aside">
        <!-- logo -->
        <div class="logo" :style="{ width: isCollapse ? '4vw' : '10vw' }">
          <img
            class="logoimg"
            :style="{
              width: isCollapse ? '3vw' : '6vw',
              height: isCollapse ? '3vw' : '6vw',
            }"
            src="../assets//icon.png"
            alt="图标"
          />
        </div>
        <!-- 收缩按钮 -->
        <div
          class="collapse-btn"
          :style="{ width: isCollapse ? '4vw' : '10vw' }"
          @click="toggleCollapse"
        >
          <el-icon v-if="isCollapse"><ArrowRightBold /></el-icon
          ><el-icon v-else><ArrowLeftBold /></el-icon>
        </div>
        <!-- 菜单 -->
        <el-row class="row">
          <el-col :span="12">
            <el-menu
              default-active="/nav"
              background-color="#545c64"
              router
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              @select="handleSelect"
              :collapse="isCollapse"
              popper-offset="-115"
              class="menu"
            >
              <el-sub-menu index="1" class="sub-menu">
                <template #title>
                  <el-icon><Tickets /></el-icon>
                  <span>Ai管理</span>
                </template>
                <el-menu-item-group>
                  <template #title v-if="isCollapse"><span>Ai</span></template>
                  <el-menu-item index="/nav/scriptManagement">话术管理</el-menu-item>
                  <el-menu-item index="/nav/LanguageManagement">语言管理</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="2" class="sub-menu">
                <template #title>
                  <el-icon><Collection /></el-icon>
                  <span>小程序管理</span>
                </template>
                <el-menu-item-group>
                  <template #title v-if="isCollapse"><span>小程序</span></template>
                  <el-menu-item index="/nav/miniAM">账号管理</el-menu-item>
                  <el-menu-item index="/nav/miniIntegral">积分配置</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <el-container>
        <!-- 顶部 -->
        <el-header class="header">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/nav/Home' }" @click="onBreadcrumbClick('/nav/Home')">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbList"
              :key="index"
              replace="true"
              :to="{ path: handleurl(item.path) }"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <!-- 内容 -->
        <el-main class="main">
          <router-view>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  Menu as IconMenu,
  Message,
  Setting,
  Tickets,
  Collection,
  ArrowRightBold,
  ArrowLeftBold,
} from "@element-plus/icons-vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { RouterLink, RouterView } from "vue-router";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const isCollapse = ref(false);
const asideWidth = ref("10vw");
const breadcrumbList = ref([]);
//路由映射
function convertPathsToMenuItems(paths) {
  const pathMap = {
    1: "ai管理",
    2: "小程序管理",
    "/nav/scriptManagement": "话术管理",
    "/nav/miniAM": "小程序账号管理",
    "/nav/miniIntegral": "积分配置",
    "/nav/LanguageManagement": "语言管理",
  };
  return paths.map((path) => {
    const name = pathMap[path];
    if (!name) throw new Error(`未找到路径 ${path} 对应的名称`);
    return { name, path };
  });
}
//面包屑
function handleSelect(index, indexPath) {
  breadcrumbList.value = convertPathsToMenuItems(indexPath);
}
//面包屑地址判断
function handleurl(indexPath) {
  if (indexPath === "1" || indexPath === "2") {
    return "";
  } else {
    return indexPath;
  }
}
//处理面包屑点击事件
function getPreviousObjects(arr, targetPath) {
  // 找到匹配目标路径的第一个元素的索引
  const index = arr.findIndex(item => item.path === targetPath);
  
  // 如果找到匹配项，则返回从开始到该索引的子数组（包含自身）
  return index !== -1 ? arr.slice(0, index + 1) : [];
}
function onBreadcrumbClick(path) {
  breadcrumbList.value = getPreviousObjects(breadcrumbList.value, path)
}
//菜单展开
function toggleCollapse() {
  asideWidth.value = isCollapse.value ? "10vw" : "4vw";
  isCollapse.value = isCollapse.value ? false : true;
}
</script>

<style scoped>
.common-layout {
  width: 100vw;
  height: 100vh;
}
.aside {
  height: 100vh;
  background-color: rgb(87, 87, 87);
  transition: width 0.3s ease; /* 添加过渡效果 */
}
.header {
  width: 85vw;
  height: 4vh;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
}
.main {
  width: 100%;
  height: 90vh;
  background-color: rgb(199, 199, 199);
}
.logo {
  margin-top: 10px;
  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 10vh;
  width: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.logoimg {
  transition: width 0.3s ease; /* 添加过渡效果 */
  transition: height 0.3s ease; /* 添加过渡效果 */
  border-radius: 20%;
}
.row {
  width: 10vw;
  height: 80vh;
}
.menu {
  width: 10vw;
  font-size: 30px;
}
.collapse-btn {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.3s ease; /* 添加过渡效果 */
  background-color: #3b4046;
}
</style>