@peng_kai/kit 0.3.0-beta.1 → 0.3.0-beta.10

package/admin/components/date/helpers.ts

@@ -0,0 +1,223 @@
+import dayjs, { type Dayjs } from 'dayjs/esm';
+import { tryOnScopeDispose } from '@vueuse/core';
+import { computed, reactive, watch, ref, type Ref } from 'vue';
+import type { Simplify } from 'type-fest';
+
+export function getTtaTimeZone() {
+  const win = window as any;
+  const key = '__APP_TZ__';
+
+  return (win[key] || (win[key] = ref(dayjs.tz.guess()))) as Ref<string>;
+}
+
+export const onTtaTimeZone = (() => {
+  const ttaTz = getTtaTimeZone();
+  const cbList: any[] = [];
+
+  watch(ttaTz, (newTz, oldTz) => {
+    newTz !== oldTz && cbList.forEach((cb) => cb(newTz));
+  }, { flush: 'post' });
+
+  return (cb: (tz: string) => void) => {
+    cbList.push(cb);
+
+    const unbind = () => {
+      const index = cbList.indexOf(cb);
+      if (index !== -1) {
+        cbList.splice(index, 1);
+      }
+    }
+
+    tryOnScopeDispose(unbind);
+
+    return unbind;
+  }
+})();
+
+type OfDayType = Dayjs | undefined | null;
+type UnitType = dayjs.QUnitType | dayjs.OpUnitType;
+export const dayOf = {
+  rangeTs<KS extends readonly [string, string] = ['start_time', 'end_time']>(
+    unit: UnitType, 
+    day: Array<OfDayType> | undefined | null,
+    keys?: KS
+  ): KS extends readonly [string, string]
+  ? Simplify<{ [K in KS[0]]: number } & { [K in KS[1]]: number }> 
+  : { start_time: number; end_time: number } {
+    if (!day || !day[0] || !day[1])
+      return undefined as any;
+
+    const tz = getTtaTimeZone().value;
+    const _keys = (Array.isArray(keys) && keys?.length > 1) ? keys : ['start_time', 'end_time'];
+
+    return {
+      [_keys[0]]: dayjs(day[0].valueOf()).tz(tz).startOf(unit).valueOf(),
+      [_keys[1]]: dayjs(day[1].valueOf()).tz(tz).endOf(unit).valueOf(),
+    } as any;
+  },
+  start(unit: UnitType, day: OfDayType) {
+    if (!day)
+      return undefined;
+
+    const tz = getTtaTimeZone().value;
+    return dayjs(day.valueOf()).tz(tz).startOf(unit);
+  },
+  startTs(unit: UnitType, day: OfDayType) {
+    this.start(unit, day);
+  },
+  end(unit: UnitType, day: OfDayType) {
+    if (!day)
+      return undefined;
+
+    const tz = getTtaTimeZone().value;
+    return dayjs(day.valueOf()).tz(tz).endOf(unit);
+  },
+  endTs(unit: UnitType, day: OfDayType) {
+    this.end(unit, day);
+  },
+}
+
+/** 为 DatePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
+export function useDatePickerPropsForTz(
+  value: Ref<Dayjs | undefined>,
+  props: {
+    createPresets?: (day: Dayjs) => { label: string; value: Dayjs }[];
+  } = {},
+  tz?: Ref<string>,
+) {
+  // 默认值
+  props.createPresets ??= () => {
+    return [
+      // { label: '昨天', value: day.subtract(1, 'day').startOf('day') },
+      // { label: '上周', value: day.subtract(1, 'week').startOf('week') },
+      // { label: '上个月', value: day.subtract(1, 'month').startOf('month') },
+    ];
+  };
+  const _tz = tz || getTtaTimeZone();
+  const nowDay = computed(() => dayjs().tz(_tz.value));
+  const _value = computed(() => value.value ? dayjs(value.value.valueOf()).tz(_tz.value) : undefined);
+
+  watch(_tz, (newV, oldV) => {
+    if (!value.value) return;
+
+    const newTzOffset = dayjs().tz(newV).utcOffset();
+    const oldTzOffset = dayjs().tz(oldV).utcOffset();
+    value.value = dayjs(value.value.valueOf() + (oldTzOffset - newTzOffset) * 60 * 1000);
+  });
+
+  return reactive({
+    'value': _value,
+    'onUpdate:value': (value: any) => value.value = dayjs(value).valueOf(),
+    'presets': computed(() => props.createPresets!(nowDay.value)),
+  });
+}
+
+export function useRangePickerPropsForTz(
+  value: Ref<[string, string] | [Dayjs, Dayjs] | undefined>,
+  props: {
+    createPresets?: (day: Dayjs) => { label: string; value: Dayjs[] }[];
+  } = {},
+  tz?: Ref<string>,
+) {
+  const _tz = tz || getTtaTimeZone();
+
+  // 默认值
+  props.createPresets ??= (day: Dayjs) => {
+    return [
+      { label: '今天', value: [day.startOf('day'), day.endOf('day')] },
+      { label: '昨天', value: [day.subtract(1, 'day').startOf('day'), day.subtract(1, 'day').endOf('day')] },
+      { label: '前一天', value: [day.subtract(1, 'day').startOf('day'), day.subtract(1, 'day').endOf('day')] },
+      { label: '后一天', value: [day.add(1, 'day').startOf('day'), day.add(1, 'day').endOf('day')] },
+      { label: '本周', value: [day.startOf('week'), day.endOf('week')] },
+      { label: '上周', value: [day.subtract(1, 'week').startOf('week'), day.subtract(1, 'week').endOf('week')] },
+      { label: '本月', value: [day.startOf('month'), day.endOf('month')] },
+      { label: '上个月', value: [day.subtract(1, 'month').startOf('month'), day.subtract(1, 'month').endOf('month')] },
+      { label: '上上月', value: [day.subtract(2, 'month').startOf('month'), day.subtract(2, 'month').endOf('month')] },
+      { label: '近7天', value: [day.subtract(6, 'day').startOf('day'), day.endOf('day')] },
+      { label: '近30天', value: [day.subtract(29, 'day').startOf('day'), day.endOf('day')] },
+    ];
+  };
+  const nowDay = computed(() => dayjs().tz(_tz.value));
+  const _value = computed(() => {
+    const v = value.value;
+    if (v && v[0] && v[1]) {
+      return [
+        dayjs(v[0].valueOf()).tz(_tz.value),
+        dayjs(v[1].valueOf()).tz(_tz.value),
+      ] as [Dayjs, Dayjs];
+    }
+    return undefined;
+  });
+
+  watch(_tz, (newV, oldV) => {
+    const v = value.value;
+    if (!v || !v[0] || !v[1]) return;
+
+    const newTzOffset = dayjs().tz(newV).utcOffset();
+    const oldTzOffset = dayjs().tz(oldV).utcOffset();
+    value.value = [
+      dayjs(v[0]).add((oldTzOffset - newTzOffset) * 60 * 1000),
+      dayjs(v[1]).add((oldTzOffset - newTzOffset) * 60 * 1000),
+    ]
+    console.log('🤡 / value.value:', value.value[0].valueOf())
+  });
+
+  return reactive({
+    'value': _value,
+    'onUpdate:value': (newVal: any) => value.value = newVal,
+    'presets': computed(() => props.createPresets!(nowDay.value)),
+  });
+};
+
+/** 为 RangePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
+export function useRangePickerPropsForTz_old(
+  ts: [Ref<number | undefined>, Ref<number | undefined>],
+  props: {
+    createPresets?: (day: Dayjs) => { label: string; value: Dayjs[] }[];
+  } = {},
+  tz?: Ref<string>,
+) {
+  // 默认值
+  props.createPresets ??= (day: Dayjs) => {
+    return [
+      { label: '今天', value: [day.startOf('day'), day.endOf('day')] },
+      { label: '昨天', value: [day.subtract(1, 'day').startOf('day'), day.subtract(1, 'day').endOf('day')] },
+      { label: '前一天', value: [day.subtract(1, 'day').startOf('day'), day.subtract(1, 'day').endOf('day')] },
+      { label: '后一天', value: [day.add(1, 'day').startOf('day'), day.add(1, 'day').endOf('day')] },
+      { label: '本周', value: [day.startOf('week'), day.endOf('week')] },
+      { label: '上周', value: [day.subtract(1, 'week').startOf('week'), day.subtract(1, 'week').endOf('week')] },
+      { label: '本月', value: [day.startOf('month'), day.endOf('month')] },
+      { label: '上个月', value: [day.subtract(1, 'month').startOf('month'), day.subtract(1, 'month').endOf('month')] },
+      { label: '上上月', value: [day.subtract(2, 'month').startOf('month'), day.subtract(2, 'month').endOf('month')] },
+      { label: '近7天', value: [day.subtract(6, 'day').startOf('day'), day.endOf('day')] },
+      { label: '近30天', value: [day.subtract(29, 'day').startOf('day'), day.endOf('day')] },
+    ];
+  };
+  const _tz = tz || getTtaTimeZone();
+  const nowDay = computed(() => dayjs().tz(_tz.value));
+  const inputDay = computed(() => {
+    console.log('🤡 / ts:', ts);
+    if (ts[0].value && ts[1].value)
+      return [dayjs(ts[0].value).tz(_tz.value), dayjs(ts[1].value).tz(_tz.value)] as [Dayjs, Dayjs];
+    return undefined;
+  });
+
+  watch(_tz, (newV, oldV) => {
+    if (!ts[0].value || !ts[1].value) return;
+
+    const newTzOffset = dayjs().tz(newV).utcOffset();
+    const oldTzOffset = dayjs().tz(oldV).utcOffset();
+    ts[0].value = ts[0].value + (oldTzOffset - newTzOffset) * 60 * 1000;
+    ts[1].value = ts[1].value + (oldTzOffset - newTzOffset) * 60 * 1000;
+  })
+
+  return reactive({
+    'value': inputDay,
+    'onUpdate:value': (value: any) => {
+      console.log('🤡 / value:', value);
+      ts[0].value = dayjs(value[0]).valueOf();
+      ts[1].value = dayjs(value[1]).valueOf();
+    },
+    'presets': computed(() => props.createPresets!(nowDay.value)),
+  });
+};

package/admin/components/date/index.ts

@@ -0,0 +1,4 @@
+export { default as TimeFieldSelectForLabel } from './TimeFieldSelectForLabel.vue';
+export { default as TtaTimeZone } from './TtaTimeZone.vue';
+export { default as PeriodPicker } from './PeriodPicker.vue';
+export { useDatePickerPropsForTz, useRangePickerPropsForTz, getTtaTimeZone, onTtaTimeZone, dayOf } from './helpers';

package/admin/components/filter/src/FilterReset.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Button as AButton } from 'ant-design-vue';
+import { Button, Menu, MenuItem, Dropdown } from 'ant-design-vue';
 import { computed } from 'vue';
+import { onTtaTimeZone } from '../../date';
 
 const props = withDefaults(defineProps<{
   loading?: boolean
@@ -38,17 +39,33 @@ function reset() {
   props.filterParams?.update?.(true);
   emits('reset');
 }
+
+onTtaTimeZone(() => {
+  setTimeout(() => {
+    props.filterParams?.update?.(true);
+  }, 100)
+});
 </script>
 
 <template>
   <div class="btns flex-none flex w-min ml-auto gap-2">
     <slot :loading="loading" :filter="filter" :reset="reset">
-      <AButton class="filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
+      <Button class="filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
         查询
-      </AButton>
-      <AButton :disabled="loading" @click="reset()">
+      </Button>
+      <Button :disabled="loading" @click="reset()">
         重置
-      </AButton>
+      </Button>
+      <Dropdown trigger="click" placement="bottomRight">
+        <Button class="px-1 w-8">
+          <i class="i-si:more-square-horiz-fill scale-130 transform-origin-bottom-center" />
+        </Button>
+        <template #overlay>
+          <Menu>
+            <MenuItem>设置表格</MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
     </slot>
   </div>
 </template>

package/admin/components/provider/Admin.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { Router } from 'vue-router';
+
+export const admin = {};
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  router: Router
+}>();
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

package/admin/components/provider/admin-permission.ts

@@ -0,0 +1,48 @@
+import { reactive, readonly, ref, watch } from 'vue';
+import type { AsyncReturnType } from 'type-fest';
+
+type TRole = () => Promise<Record<string, boolean> | null | undefined>;
+interface TRoles {
+  main: TRole
+  [key: string]: TRole
+}
+
+export function createAdminPermission(roles: TRoles) {
+  const role = ref('main');
+  const permissionCodes = ref<AsyncReturnType<TRole>>();
+
+  /**
+   * 刷新权限
+   */
+  const refreshPermission = async () => {
+    permissionCodes.value = await roles?.[role.value]?.();
+
+    return permissionCodes.value;
+  };
+
+  /**
+   * 是否满足权限要求
+   * @param codes 权限 code
+   */
+  const hasPermission = (codes: string | string[]) => {
+    const _codes = Array.isArray(codes) ? codes : [codes];
+    const _permissionCodes = permissionCodes.value;
+
+    if (_permissionCodes === null)
+      return false;
+    else if (_permissionCodes === undefined)
+      // undefined 则表示没有权限要求，返回 true
+      return true;
+    else
+      return _codes.every(code => !!_permissionCodes[code]);
+  };
+
+  watch(role, refreshPermission, { immediate: true });
+
+  return reactive({
+    codes: readonly(permissionCodes),
+    role,
+    has: hasPermission,
+    refresh: refreshPermission,
+  });
+}

package/admin/components/provider/admin-router.ts

@@ -0,0 +1,358 @@
+import { computed, defineComponent, h, reactive, ref, shallowRef, toRef, watch } from 'vue';
+import type { MaybeRef, PropType, Ref, ShallowRef, UnwrapNestedRefs, VNode } from 'vue';
+import type { RouteLocationNormalizedGeneric, RouteLocationNormalizedLoaded, Router } from 'vue-router';
+
+interface TOptions {
+  excludeTabs?: Array<string>
+}
+
+export function createAdminRouter(options: TOptions) {
+  const router = shallowRef<Router | null>(null);
+  const { menus, breadcrumbs, menuPath, addMenu, generateMenus } = useMenu(router);
+  const { tabs, currentTab: tab, tabsCached, addTab, delTab, getTab } = useTab(router, options);
+
+  function setRouter(newRouter: Router) {
+    router.value = newRouter;
+  }
+
+  return reactive({
+    menus,
+    menuPath,
+    breadcrumbs,
+    tabs,
+    tabsCached,
+    tab,
+    setRouter,
+    addMenu,
+    addTab,
+    delTab,
+    getTab,
+    generateMenus,
+  });
+}
+
+const PageRefresh = defineComponent({
+  props: { 
+    router: { type: Object as PropType<Router>, required: true },
+    originalMainComp: { type: Object as PropType<any>, required: true },
+   },
+  mounted() {
+    const { router } = this.$props;
+    const fullPath = router.currentRoute.value.fullPath;
+     router.replace({ ...router.resolve(fullPath),  force: true });
+  },
+  setup() {
+    return () => null;
+  },
+});
+
+function useTab(router: ShallowRef<Router | null>, options: TOptions = {}) {
+  const tabs = ref<TTab[]>([]);
+  const currentTab = computed(() => [...tabs.value].sort((a, b) => b.lastTime - a.lastTime)[0]);
+  const tabsCached = ref<string[]>([]);
+
+  function addTab(tab: TTabConfig) {
+    tabs.value.push(reactive(tab));
+  }
+
+  function delTab(path: string) {
+    if (path === currentTab.value?.path) {
+      const index = tabs.value.findIndex(tab => tab.path === path);
+      const nextTab = tabs.value[index + 1] || tabs.value[index - 1];
+
+      if (nextTab) {
+        tabs.value.splice(index, 1);
+        router.value?.replace(nextTab.path);
+      }
+    }
+    else {
+      const index = tabs.value.findIndex(tab => tab.path === path);
+      if (index >= 0)
+        tabs.value.splice(index, 1);
+    }
+  }
+
+  function getTab(path: string) {
+    return tabs.value.find(tab => tab.path === path);
+  }
+
+  function switchTab(to: RouteLocationNormalizedGeneric, from: RouteLocationNormalizedGeneric) {
+    const toTab = getTab(to.fullPath);
+    const fromTab = getTab(from.fullPath);
+    const lastTime = Date.now();
+    const isReplaced = history.state?.replaced;
+    const tabType = Number(history.state?.tabType ?? 1); // 0:不新增 tab, 1:新增 tab, 2: 固定 tab（不可关闭）
+
+    // 0. 刷新页面
+    if (toTab && toTab?.path === fromTab?.path) {
+      const components = to.matched[1].components as Record<string, any>;
+
+      if (!components?.default || !router.value)
+        return;
+
+      if (components.default.originalMainComp) {
+        components.default = components.default.originalMainComp;
+      }
+      else {
+        const pageRefreshComp = h(PageRefresh, { router: router.value, originalMainComp:components.default  }) as any;
+        pageRefreshComp.originalMainComp = components.default;
+        components.default = pageRefreshComp;
+        toTab.lastTime = 0;
+        setTimeout(() => toTab.lastTime = lastTime, 10);
+      }
+    }
+    // 1. 在已有的 tab 中互相切换
+    else if (toTab && fromTab && !isReplaced) {
+      toTab.lastTime = lastTime;
+      fromTab.lastTime = lastTime - 1;
+    }
+    // 2. 仅改变当前 tab 的参数
+    else if (!toTab && fromTab && isReplaced) {
+      fromTab.lastTime = lastTime;
+      fromTab.path = to.fullPath;
+      fromTab.routeName = String(to.name);
+    }
+    // 3. 删除当前 tab
+    else if (toTab && !fromTab && isReplaced) {
+      toTab.lastTime = lastTime;
+    }
+    // 4. 新增 tab
+    else {
+      // 4.1 排除不需要新增 tab 的页面
+      const isExcluded = tabType === 0 || options.excludeTabs?.includes(String(to.name)) || getTab(to.fullPath);
+      if (isExcluded)
+        return;
+
+      const title = getTitle(to) || String(to.name || to.fullPath);
+      addTab({
+        lastTime,
+        title,
+        type: tabType,
+        path: to.fullPath,
+        routeName: String(to.name),
+        routeTitle: title,
+      });
+      fromTab?.lastTime && (fromTab.lastTime = lastTime - 1);
+    }
+  }
+
+  watch(tabs, (tabs) => {
+    let tabCached = tabs.filter(tab => tab.lastTime > 0);
+
+    if (tabCached.length > 10)
+      tabCached = tabCached.sort((a, b) => a.lastTime - b.lastTime).slice(0, 10);
+
+    tabsCached.value = tabCached.map(tab => tab.path);
+  }, { immediate: true, deep: 2 });
+
+  watch(router, (router) => {
+    router?.afterEach((to, from) => {
+      switchTab(to, from);
+
+      // 使用 to.fullPath 重命名 main 组件
+      if (to.matched.length > 1) {
+        const mainComp: any = to.matched[1].components?.default;
+        const compName = currentTab.value?.path;
+
+        if (mainComp && compName)
+          mainComp.__name = compName;
+      }
+    });
+  });
+
+  return { tabs, currentTab, tabsCached, addTab, delTab, getTab, switchTab };
+}
+
+function useMenu(router: ShallowRef<Router | null>) {
+  const currentRouteName = computed(() => String(router.value?.currentRoute.value.name || ''));
+  const menus = ref<TMenu[]>([]);
+  const menuPath = computed(() => getMenuPath(menus.value, currentRouteName.value));
+  const breadcrumbs = computed(() => getMenuPath(menus.value, currentRouteName.value).map(menuToBreadcrumb));
+
+  function addMenu(menuConfig: TMenuConfig, parentKey?: string) {
+    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string);
+    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null;
+
+    const _menu = reactive<IMenuReactive>({
+      key: menuConfig.key,
+      label: toRef(labelGetter),
+      icon: toRef(iconGetter),
+      trigger: menuConfig.trigger,
+      order: menuConfig.order,
+    });
+
+    if (parentKey) {
+      const parentMenu = findMenu(menus.value, parentKey);
+
+      if (!parentMenu)
+        return;
+
+      const children = reactive(parentMenu.children ?? []);
+      children.push(_menu);
+      children.sort((a, b) => b.order - a.order);
+      parentMenu.children = children;
+    }
+    else {
+      menus.value.push(_menu);
+      menus.value.sort((a, b) => b.order - a.order);
+    }
+  }
+
+  function generateMenus(
+    filter?: (menu: ReturnType<typeof getMenusByRouter>[number]) => boolean,
+    otherRouter?: Router,
+  ) {
+    if (!router.value)
+      return;
+
+    menus.value.length = 0;
+
+    const finalFilter = filter ?? (() => true);
+    const finalRouter = otherRouter ?? router.value;
+
+    getMenusByRouter(finalRouter).filter(finalFilter).forEach(({ menu, parentKey }) => addMenu(menu, parentKey));
+  }
+
+  watch(router, (router) => {
+    generateMenus(undefined, router || undefined);
+  });
+
+  return { menus, menuPath, breadcrumbs, addMenu, generateMenus };
+}
+interface TMenuConfig {
+  key: string
+  label: string | (() => string)
+  icon?: () => VNode
+  order: number
+  trigger: () => void
+  children?: TMenuConfig[]
+}
+
+interface IMenuReactive {
+  key: string
+  label: Ref<string>
+  icon: Ref<VNode | null>
+  order: number
+  trigger: () => void
+  children?: IMenuReactive[]
+}
+
+export type TMenu = UnwrapNestedRefs<IMenuReactive>;
+
+export interface TBreadcrumb {
+  title: string
+  icon?: VNode | null
+  trigger?: () => void
+  children?: TBreadcrumb[]
+}
+
+interface TTabConfig {
+  title: MaybeRef<string>
+  routeTitle: MaybeRef<string>
+  path: string
+  routeName: string
+  lastTime: number
+  type: number
+}
+
+export type TTab = UnwrapNestedRefs<TTabConfig>;
+
+export function getTitle(route?: Pick<RouteLocationNormalizedLoaded, 'meta'>) {
+  const mTitle = route?.meta?.title;
+
+  return typeof mTitle === 'function' ? mTitle() : mTitle;
+}
+
+export function getMenusByRouter(router: Router) {
+  const menuOrderRE = /^(?<key>\w*)@(?<order>\d+)$/;
+  const routes = router.getRoutes();
+  const menus: Array<{ parentKey?: string, menu: TMenuConfig }> = routes
+    .filter(route => menuOrderRE.test((route.meta.menuOrder ?? '')))
+    .map((route) => {
+      const res = route.meta!.menuOrder!.match(menuOrderRE);
+      const parentKey = res?.groups?.key;
+      const order = Number(res?.groups?.order);
+      const name = route.name as string;
+      const menu = {
+        key: name,
+        label: route.meta.title ?? name,
+        icon: route.meta.icon,
+        trigger: () => router.push({ name }),
+        order,
+      };
+
+      return { parentKey, menu };
+    });
+
+  // 将含有子菜单的菜单的 trigger 设置为空函数
+  const hasSubMenus = menus.filter(menu => menus.some(m => m.parentKey === menu.menu.key));
+  hasSubMenus.forEach((menu) => {
+    menu.menu.trigger = (() => {}) as any;
+  });
+
+  return menus;
+}
+
+export function printRounesNameInterface(routes: { name: PropertyKey }[]) {
+  console.groupCollapsed('路由命名');
+  const routesName = new Set();
+  routes.forEach((route) => {
+    if (typeof route.name === 'string')
+      routesName.add(route.name);
+  });
+  console.log([...routesName.values()].sort().filter(name => !!name).map(name => `${name}: true`).join('\n'));
+  console.groupEnd();
+}
+
+function findMenu(menus: TMenu[], key: string) {
+  const queue = [...menus];
+
+  while (queue.length > 0) {
+    const menu = queue.shift()!;
+
+    if (menu.key === key)
+      return menu;
+
+    if (menu.children)
+      queue.push(...menu.children);
+  }
+
+  return undefined;
+};
+
+function menuToBreadcrumb(menu: TMenu) {
+  const ret: TBreadcrumb = reactive({
+    title: menu.label,
+    icon: menu.icon,
+    trigger: menu.trigger,
+    children: menu.children?.map(menuToBreadcrumb),
+  });
+
+  return ret;
+}
+
+function getMenuPath(menus: TMenu[], key: string) {
+  const path: TMenu[] = [];
+
+  const _getMenuPath = (menus: TMenu[], key: string) => {
+    for (const menu of menus) {
+      if (menu.key === key) {
+        path.push(menu);
+        return true;
+      }
+
+      if (menu.children) {
+        path.push(menu);
+        if (_getMenuPath(menu.children, key))
+          return true;
+        path.pop();
+      }
+    }
+
+    return false;
+  };
+
+  _getMenuPath(menus, key);
+
+  return path as TMenu[];
+};