vft 0.0.1

package/src/web/menu/menu.vue

@@ -0,0 +1,459 @@
+<script lang="ts" setup>
+import {
+  computed,
+  getCurrentInstance,
+  h,
+  nextTick,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+  useSlots
+} from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import { flattedChildren } from '../../utils';
+import { useNamespace } from '../../use';
+import Menubar from './utils/menu-bar';
+import MenuCollapseTransition from './menu-collapse-transition.vue';
+import VriSubMenu from './sub-menu.vue';
+import { useMenuCssVar } from './use-menu-css-var';
+import type { MenuProvider, SubMenuProvider } from './types';
+import type { Router } from 'vue-router';
+import type { VNode, VNodeArrayChildren } from 'vue';
+import type { UseResizeObserverReturn } from '@vueuse/core';
+import './index.scss';
+import Icon from '../../common/icon/index.vue';
+
+interface MenuProps {
+  /** 菜单展示模式 */
+  mode?: 'horizontal' | 'vertical';
+  /** 页面加载时默认激活菜单的 index（menu-item 的index） */
+  defaultActive?: string;
+  /** 默认打开的 sub-menu 的 index 的数组 */
+  defaultOpeneds?: string[];
+  /** 是否只保持一个子菜单的展开 */
+  uniqueOpened?: boolean;
+  /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项 */
+  router?: boolean;
+  /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
+  menuTrigger?: 'hover' | 'click';
+  collapse?: boolean;
+  /** 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用) */
+  backgroundColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  /** 是否开启折叠动画 */
+  collapseTransition?: boolean;
+  /** 是否省略多余的子项（仅在横向模式生效） */
+  ellipsis?: boolean;
+}
+
+const {
+  mode = 'vertical',
+  defaultActive = '',
+  defaultOpeneds = [],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  menuTrigger = 'hover',
+  collapseTransition = true,
+  ellipsis = true,
+  uniqueOpened,
+  collapse,
+  router
+} = defineProps<MenuProps>();
+
+const emit = defineEmits([
+  'close',
+  'open',
+  'select'
+]);
+
+const ns = /* hoist-static*/ useNamespace('menu');
+
+defineOptions({
+  name: ns.b()
+});
+
+const slots = useSlots();
+
+const instance = getCurrentInstance()!;
+
+// get router instance
+const _router = instance.appContext.config.globalProperties.$router as Router;
+
+const menu = ref<HTMLUListElement>();
+
+const nsSubMenu = useNamespace('sub-menu');
+
+// data
+const sliceIndex = ref(-1);
+
+// 展开的菜单项数组 defaultOpeneds 配置的对应 sub-menu 中的数组，并且菜单不能是收缩状态
+const openedMenus = ref<MenuProvider['openedMenus']>(
+  defaultOpeneds && !collapse ? defaultOpeneds.slice(0) : []
+);
+
+// 页面加载时默认激活菜单的 index，最终提供给 menu-item 去使用
+const activeIndex = ref<MenuProvider['activeIndex']>(defaultActive);
+
+/**
+ * 主要是存储 menu-item 中的菜单项
+ * 格式如下
+ * ```
+ * {
+ *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},
+ *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}
+ * }
+ * ```
+ */
+const items = ref<MenuProvider['items']>({});
+
+/**
+ * 主要是存储 sub-menu 中的菜单项
+ * 格式如下
+ * ```
+ * {
+ *  mio:{index: 'mio', indexPath: ['mio'], active: false},
+ *  test:{index: 'test', indexPath: ['test'], active: false}
+ * }
+ * ```
+ */
+const subMenus = ref<MenuProvider['subMenus']>({});
+
+/**
+ * @description 是否需要 tooltip 1.水平模式的菜单需要 2.竖直类型的菜单在收缩时需要
+ * @author wfd
+ * @date 2022/11/8 13:22
+ * @example
+ * @type {ComputedRef<MenuProvider["isMenuPopup"]>}
+ */
+const isMenuPopup = computed<MenuProvider['isMenuPopup']>(() => {
+  return mode === 'horizontal' || (mode === 'vertical' && collapse) as MenuProvider['isMenuPopup'];
+});
+
+// 当配置了 defaultActive 时菜单的展开设置
+const initMenu = () =>  {
+  // 如果设置了 activeIndex 且当前的 activeIndex 项在 items 中存在
+  // 获取当前激活菜单的 item {index: '1-1', indexPath: ['mio', '1-1'], active: false}
+  const activeItem = activeIndex.value && items.value[activeIndex.value];
+  // 只在竖直模式，且非折叠模式，且子菜单配置为激活时触发
+  if (!activeItem || mode === 'horizontal' || collapse) return;
+  // ['mio', '1-1']
+  const indexPath = activeItem.indexPath;
+  
+  // 展开该菜单项的路径上所有子菜单
+  indexPath.forEach((index) => {
+    // {index: 'mio', indexPath: ['mio'], active: false}
+    const subMenu = subMenus.value[index];
+    subMenu && openMenu(index, subMenu.indexPath);
+  });
+};
+
+/**
+ * @description 展开子菜单
+ * @author wfd
+ * @date 2022/11/8 16:44
+ * @example
+ * @param {string} index
+ * @param {string[]} indexPath
+ */
+const openMenu: MenuProvider['openMenu'] = (index: string, indexPath: string[]) => {
+  // 如果当前点击的 index 在 openedMenus 中，则不向下执行操作
+  if (openedMenus.value.includes(index)) return;
+  // 将不在该菜单路径下的其余菜单收起
+  if (uniqueOpened) {
+    openedMenus.value = openedMenus.value.filter((index: string) => indexPath.includes(index));
+  }
+  // 将点击的 index 加入到 openedMenus 中
+  openedMenus.value.push(index);
+  emit('open', index, indexPath);
+};
+
+/**
+ * @description 关闭当前点击的 sub-menu 对应的 index，主要是从 openedMenus 移除该项
+ * @author wfd
+ * @date 2022/11/8 16:43
+ * @example
+ * @param {string} index
+ * @param {string[]} indexPath
+ */
+const closeMenu: MenuProvider['closeMenu'] = (index, indexPath) => {
+  const i = openedMenus.value.indexOf(index);
+  if (i !== -1) {
+    openedMenus.value.splice(i, 1);
+  }
+  emit('close', index, indexPath);
+};
+
+// sub-menu 点击事件，主要是展开收缩菜单，通过控制 openedMenus 的值
+const handleSubMenuClick: MenuProvider['handleSubMenuClick'] = ({ index, indexPath }) => {
+  // 判断当前点击的 sub-menu 菜单是否已经在 openedMenus 中
+  const isOpened = openedMenus.value.includes(index);
+  
+  // 如果已经在 openedMenus 中，代表当前菜单已经展开（展开则调用 close 关闭），否则未打开（则调用 open 给展开）
+  if (isOpened) {
+    closeMenu(index, indexPath);
+  } else {
+    openMenu(index, indexPath);
+  }
+};
+
+/**
+ * @description 子项点击跳转事件，如果 menu.vue 配置了 route 为 true，则执行路由跳转，否则触发
+ * emit('select') 只返回数据
+ * @author wfd
+ * @date 2022/11/8 18:30
+ * @example
+ * @param {MenuItemClicked} menuItem
+ */
+const handleMenuItemClick: MenuProvider['handleMenuItemClick'] = (menuItem) => {
+  
+  if (mode === 'horizontal' || collapse) {
+    openedMenus.value = [];
+  }
+  const { index, indexPath } = menuItem;
+  if (index === undefined || indexPath === undefined) return;
+  
+  if (router && _router) {
+    // 路由跳转的路径如果 menu-item 配置了则，采用 menu-item 的，否则采用 index 为 router 路径
+    const route = menuItem.route || index;
+    const routerResult = _router.push(route).then((res) => {
+      if (!res) activeIndex.value = index;
+      return res;
+    });
+    emit('select', menuItem, routerResult);
+  } else {
+    activeIndex.value = index;
+    
+    emit('select', menuItem);
+  }
+};
+
+/**
+ * 更新 activeIndex
+ * @param {string} val
+ */
+const updateActiveIndex = (val: string) => {
+  const itemsInData = items.value;
+  // 首先从最新的 val 中去 items 取数据，如果没有取到再去 items 对应的 activeIndex 去取
+  const item = itemsInData[val] || (activeIndex.value && itemsInData[activeIndex.value]) || itemsInData[defaultActive];
+  
+  // 更新 activeIndex
+  if (item) {
+    activeIndex.value = item.index;
+  } else {
+    activeIndex.value = val;
+  }
+};
+
+const calcSliceIndex = () => {
+  if (!menu.value) return -1;
+  const items = Array.from(menu.value?.childNodes ?? []).filter(
+    (item) => item.nodeName !== '#text' || item.nodeValue) as HTMLElement[];
+  const moreItemWidth = 64;
+  const paddingLeft = Number.parseInt(getComputedStyle(menu.value!).paddingLeft, 10);
+  const paddingRight = Number.parseInt(getComputedStyle(menu.value!).paddingRight, 10);
+  const menuWidth = menu.value!.clientWidth - paddingLeft - paddingRight;
+  let calcWidth = 0;
+  let sliceIndex = 0;
+  items.forEach((item, index) => {
+    calcWidth += item.offsetWidth || 0;
+    if (calcWidth <= menuWidth - moreItemWidth) {
+      sliceIndex = index + 1;
+    }
+  });
+  return sliceIndex === items.length ? -1 : sliceIndex;
+};
+
+// 常见的计算机监视器FPS为60Hz，这意味着每秒重画60次。计算公式：1000ms60≈ 16.67ms，为了避免“调整大小”时重复触发的特定机会，将等待设置为16.67 2=33.34
+const debounce = (fn: () => void, wait = 33.34) => {
+  let timmer: ReturnType<typeof setTimeout> | null;
+  return () => {
+    timmer && clearTimeout(timmer);
+    timmer = setTimeout(() => {
+      fn();
+    }, wait);
+  };
+};
+
+let isFirstTimeRender = true;
+const handleResize = () => {
+  const callback = () => {
+    sliceIndex.value = -1;
+    nextTick(() => {
+      sliceIndex.value = calcSliceIndex();
+    });
+  };
+  // 第一次调整大小时直接执行回调以避免抖动
+  isFirstTimeRender ? callback() : debounce(callback)();
+  isFirstTimeRender = false;
+};
+
+// defaultActive 变化时触发时更新 activeIndex
+watch(
+  () => defaultActive,
+  (currentActive) => {
+    // 如果最新的 defaultActive 在 items 中不存在则 activeIndex 更新为空
+    if (!items.value[currentActive]) {
+      activeIndex.value = '';
+    }
+    updateActiveIndex(currentActive);
+  }
+);
+
+watch(
+  () => collapse,
+  (value) => {
+    if (value) openedMenus.value = [];
+  }
+);
+
+// 监控 items 的变化(在 menu-item.vue 中的 onMounted 中执行产生变化)，然后执行 initMenu
+watch(items.value, initMenu);
+
+let resizeStopper: UseResizeObserverReturn['stop'];
+watchEffect(() => {
+  if (mode === 'horizontal' && ellipsis) resizeStopper = useResizeObserver(menu, handleResize).stop;
+  else resizeStopper?.();
+});
+
+// 提供给 sub-menu.vue 使用，将每一个 sub-menu 的数据存储在 subMenus 中
+const addSubMenu: MenuProvider['addSubMenu'] = (item) => {
+  subMenus.value[item.index] = item;
+};
+
+const removeSubMenu: MenuProvider['removeSubMenu'] = (item) => {
+  delete subMenus.value[item.index];
+};
+
+/**
+ * 此函数在 menu-item 中触发，items.value 默认为空对象
+ * 最后添加后的 items 格式如下
+ * ```
+ * {
+ *  1-1:{index: '1-1', indexPath: ['mio', '1-1'], active: false},
+ *  1-2:{index: '1-2', indexPath: ['mio', '1-2'], active: false}
+ * }
+ * ```
+ * @param {MenuItemRegistered} item
+ */
+const addMenuItem: MenuProvider['addMenuItem'] = (item) => {
+  items.value[item.index] = item;
+};
+
+const removeMenuItem: MenuProvider['removeMenuItem'] = (item) => {
+  delete items.value[item.index];
+};
+
+/**
+ * 提供以下方法与属性给 sub-menu.vue 使用
+ */
+provide<MenuProvider>(
+  'rootMenu',
+  reactive({
+    props: instance.props,
+    openedMenus,
+    items,
+    subMenus,
+    activeIndex,
+    isMenuPopup,
+    
+    addMenuItem,
+    removeMenuItem,
+    addSubMenu,
+    removeSubMenu,
+    openMenu,
+    closeMenu,
+    handleMenuItemClick,
+    handleSubMenuClick
+  })
+);
+
+provide<SubMenuProvider>(`subMenu:${instance.uid}`, {
+  addSubMenu,
+  removeSubMenu,
+  mouseInChild: ref(false),
+  // 表示当前是第一级的 sub-menu
+  level: 0
+});
+
+onMounted(() => {
+  if (mode === 'horizontal') {
+    new Menubar(instance.vnode.el!, ns.namespace.value);
+  }
+});
+
+// 触发展开菜单事件
+const open = (index: string) => {
+  const { indexPath } = subMenus.value[index];
+  indexPath.forEach((i) => openMenu(i, indexPath));
+};
+
+defineExpose({
+  open,
+  close: closeMenu,
+  handleResize
+});
+
+defineRender(() => {
+  let slot: VNodeArrayChildren = slots.default?.() ?? [];
+  const vShowMore: VNode[] = [];
+  
+  // 水平默认下执行
+  if (mode === 'horizontal' && menu.value) {
+    const originalSlot = flattedChildren(slot) as VNodeArrayChildren;
+    const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0,
+      sliceIndex.value);
+    
+    const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
+    
+    if (slotMore?.length && ellipsis) {
+      slot = slotDefault;
+      vShowMore.push(
+        h(
+          VriSubMenu,
+          {
+            index: 'sub-menu-more',
+            class: nsSubMenu.e('hide-arrow')
+          },
+          {
+            title: () => h(
+              Icon,
+              {
+                icon: 'vi-item',
+                class: nsSubMenu.e('icon-more')
+              }
+            ),
+            default: () => slotMore
+          }
+        )
+      );
+    }
+  }
+  
+  const ulStyle = useMenuCssVar(instance.props, 0);
+  
+  const vMenu = h(
+    'ul',
+    {
+      key: String(collapse),
+      role: 'menubar',
+      ref: menu,
+      style: ulStyle.value,
+      class: {
+        [ns.b()]: true,
+        [ns.m(mode)]: true,
+        [ns.m('collapse')]: collapse
+      }
+    },
+    [...slot, ...vShowMore]
+  );
+  
+  if (collapseTransition && mode === 'vertical') {
+    return h(MenuCollapseTransition, () => vMenu);
+  }
+  
+  return vMenu;
+});
+</script>