traffic-laser/src/utils/menus.ts

import {computed, ref, Ref, toRaw} from "vue";
import {uiType} from "@/hook/useGraphic";

type MenuRaw = {
  key: any,
  children?: MenuRaw[]
}


type GenerateResult<R, E = {}> = Array<R & { children: GenerateResult<R, E> } & E>;
export const generateByMenus = <T extends MenuRaw, R>(
  generateFn: (men: T) => R,
  mainMenus: T[]
): GenerateResult<R>  => {
  return mainMenus.map(mainMenu => ({
    ...generateFn(mainMenu),
    children: mainMenu.children ? generateByMenus(generateFn, mainMenu.children) : []
  }))
}
export const findMenuByAttr = <T extends MenuRaw, K extends keyof T, V extends T[K]>
(value: V, attr: K, mainMenus: T[]) => {
  for (const mainMenu of mainMenus) {
    if (toRaw(mainMenu[attr]) === toRaw(value)) {
      return mainMenu
    } else if (mainMenu.children) {
      const childMainMenu = findMenuByAttr(value, attr as any, mainMenu.children)
      if (childMainMenu) {
        return childMainMenu;
      }
    }
  }
}

export type GenerateMinMenusResult<TK, R> =  {
  menus: GenerateResult<R, { onClick: () => void }>,
  child: Ref<TK>,
  activeMenuKey: Ref<any>
}
export const generateMixMenus = <
  T extends MenuRaw,
  K extends keyof T,
  R
>(
  childKey: K,
  generateFn: (men: T) => R,
  mainMenus: T[],
  itemAction: (men: MenuRaw) => void
): GenerateMinMenusResult<T[K], R> => {
  const child = ref();
  const menus = generateByMenus((menu) => ({
    ...generateFn(menu),
    onClick: () => {
      if (menu[childKey]) {
        if (toRaw(menu[childKey]) !== toRaw(child.value)) {
          child.value = menu[childKey]
          return;
        }
      } else {
        itemAction(menu);
      }
      child.value = null
    }
  }), mainMenus)

  const activeMenuKey = computed(() =>
    child.value
      ? findMenuByAttr(child.value, childKey, mainMenus)?.key
      : uiType.current
  )

  return {
    child,
    menus,
    activeMenuKey
  };
}