ark-shop-tools/ui/src/page/back/index.vue

<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#1e1f22"
      text-color="#bcbec4"
      active-text-color="#2ab19f"
      @select="handleSelect">
    <template v-for="menu in menus">
      <template v-if="menu.subMenu.length > 0">
        <el-sub-menu :index="menu.index">
          <template #title>{{ menu.name }}</template>
          <template v-for="subMenu in menu.subMenu">
            <el-menu-item :index="subMenu.index" v-if="menu.path && menu.name" :key="subMenu.index"
                          @click="JumpRouter(subMenu.path)">{{ subMenu.name }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item v-if="menu.path && menu.name" :index="menu.index" @click="JumpRouter(menu.path)">{{ menu.name }}
        </el-menu-item>
      </template>
    </template>
    <!--    -->
    <!--    <el-menu-item index="1" @click="JumpRouter('/back/base')">基本功能</el-menu-item>-->
    <!--    <el-menu-item index="2" @click="JumpRouter('/back/general')">概述</el-menu-item>-->
    <!--    <el-sub-menu index="3">-->
    <!--      <template #title>商城</template>-->
    <!--      <el-menu-item index="2-1" @click="JumpRouter('/back/vip')">VIP</el-menu-item>-->
    <!--      <el-menu-item index="2-2">礼包</el-menu-item>-->
    <!--      <el-menu-item index="2-3">商品</el-menu-item>-->
    <!--      <el-menu-item index="2-4">回收</el-menu-item>-->
    <!--    </el-sub-menu>-->
    <!--    <el-menu-item index="4" @click="JumpRouter('/back/message')">消息</el-menu-item>-->
    <!--    <el-menu-item index="5">设置</el-menu-item>-->
  </el-menu>
  <router-view/>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import router from "../../router";

const activeIndex = ref<string>('1')

class Menu {
  index: string
  name: string
  path: string
  subMenu: Menu[]

  constructor(index: string, name: string, path: string, subMenu: Menu[]) {
    this.index = index;
    this.name = name;
    this.path = path;
    this.subMenu = subMenu;
  }
}

const menus = ref<Menu[]>([new Menu("1", "基本功能", "/back/base", []),
  new Menu("2", "概述", "/back/general", []),
  new Menu("3", "商城", "/back/vip", [
    new Menu("2-1", "VIP", "/back/general", []),
    new Menu("2-2", "礼包", "/back/kit", []),
    new Menu("2-3", "商品", "/back/shopItem", []),
    new Menu("2-4", "回收", "/back/sellItem", [])
  ]),
  new Menu("4", "消息", "/back/message", []),
  new Menu("5", "设置", "/back/message", [])
])

function GetNowMenu() {
  let map = new Map<string, string>;
  for (let i = 0; i < menus.value.length; i++) {
    map.set(menus.value[i].index, menus.value[i].path)
    if (menus.value[i].subMenu.length > 0) {
      for (let j = 0; j < menus.value[i].subMenu.length; j++) {
        map.set(menus.value[i].subMenu[j].index, menus.value[i].subMenu[j].path)
      }
    }
  }
  activeIndex.value = map.get(router.currentRoute.value.path)
}

GetNowMenu()
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

function JumpRouter(path: string) {
  router.push({path: path})
}


</script>