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: T) => void,
  getActiveItem: () => any
): 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
      : getActiveItem()
  );

  return {
    child,
    menus,
    activeMenuKey,
  };
};