物业代码生成

packages/@core/ui-kit/menu-ui/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-menu';
+export * from './use-menu-context';

packages/@core/ui-kit/menu-ui/src/hooks/use-menu-context.ts

@@ -0,0 +1,55 @@
+import type { MenuProvider, SubMenuProvider } from '../types';
+
+import { getCurrentInstance, inject, provide } from 'vue';
+
+import { findComponentUpward } from '../utils';
+
+const menuContextKey = Symbol('menuContext');
+
+/**
+ * @zh_CN Provide menu context
+ */
+function createMenuContext(injectMenuData: MenuProvider) {
+  provide(menuContextKey, injectMenuData);
+}
+
+/**
+ * @zh_CN Provide menu context
+ */
+function createSubMenuContext(injectSubMenuData: SubMenuProvider) {
+  const instance = getCurrentInstance();
+
+  provide(`subMenu:${instance?.uid}`, injectSubMenuData);
+}
+
+/**
+ * @zh_CN Inject menu context
+ */
+function useMenuContext() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error('instance is required');
+  }
+  const rootMenu = inject(menuContextKey) as MenuProvider;
+  return rootMenu;
+}
+
+/**
+ * @zh_CN Inject menu context
+ */
+function useSubMenuContext() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error('instance is required');
+  }
+  const parentMenu = findComponentUpward(instance, ['Menu', 'SubMenu']);
+  const subMenu = inject(`subMenu:${parentMenu?.uid}`) as SubMenuProvider;
+  return subMenu;
+}
+
+export {
+  createMenuContext,
+  createSubMenuContext,
+  useMenuContext,
+  useSubMenuContext,
+};

packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts

@@ -0,0 +1,46 @@
+import type { Ref } from 'vue';
+
+import { watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+
+interface UseMenuScrollOptions {
+  delay?: number;
+  enable?: boolean | Ref<boolean>;
+}
+
+export function useMenuScroll(
+  activePath: Ref<string | undefined>,
+  options: UseMenuScrollOptions = {},
+) {
+  const { enable = true, delay = 320 } = options;
+
+  function scrollToActiveItem() {
+    const isEnabled = typeof enable === 'boolean' ? enable : enable.value;
+    if (!isEnabled) return;
+
+    const activeElement = document.querySelector(
+      `aside li[role=menuitem].is-active`,
+    );
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      });
+    }
+  }
+
+  const debouncedScroll = useDebounceFn(scrollToActiveItem, delay);
+
+  watch(activePath, () => {
+    const isEnabled = typeof enable === 'boolean' ? enable : enable.value;
+    if (!isEnabled) return;
+
+    debouncedScroll();
+  });
+
+  return {
+    scrollToActiveItem,
+  };
+}

packages/@core/ui-kit/menu-ui/src/hooks/use-menu.ts

@@ -0,0 +1,48 @@
+import type { SubMenuProvider } from '../types';
+
+import { computed, getCurrentInstance } from 'vue';
+
+import { findComponentUpward } from '../utils';
+
+function useMenu() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error('instance is required');
+  }
+
+  /**
+   * @zh_CN 获取所有父级菜单链路
+   */
+  const parentPaths = computed(() => {
+    let parent = instance.parent;
+    const paths: string[] = [instance.props.path as string];
+    while (parent?.type.name !== 'Menu') {
+      if (parent?.props.path) {
+        paths.unshift(parent.props.path as string);
+      }
+      parent = parent?.parent ?? null;
+    }
+
+    return paths;
+  });
+
+  const parentMenu = computed(() => {
+    return findComponentUpward(instance, ['Menu', 'SubMenu']);
+  });
+
+  return {
+    parentMenu,
+    parentPaths,
+  };
+}
+
+function useMenuStyle(menu?: SubMenuProvider) {
+  const subMenuStyle = computed(() => {
+    return {
+      '--menu-level': menu ? (menu?.level ?? 0 + 1) : 0,
+    };
+  });
+  return subMenuStyle;
+}
+
+export { useMenu, useMenuStyle };