add frontend/vben from vben-admin-thin

frontend/vben/src/components/Menu/index.ts

@@ -0,0 +1,3 @@
+import BasicMenu from './src/BasicMenu.vue'
+
+export { BasicMenu }

frontend/vben/src/components/Menu/src/BasicMenu.vue

@@ -0,0 +1,164 @@
+<template>
+  <Menu
+    :selectedKeys="selectedKeys"
+    :defaultSelectedKeys="defaultSelectedKeys"
+    :mode="mode"
+    :openKeys="getOpenKeys"
+    :inlineIndent="inlineIndent"
+    :theme="theme"
+    @open-change="handleOpenChange"
+    :class="getMenuClass"
+    @click="handleMenuClick"
+    :subMenuOpenDelay="0.2"
+    v-bind="getInlineCollapseOptions"
+  >
+    <template v-for="item in items" :key="item.path">
+      <BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
+    </template>
+  </Menu>
+</template>
+<script lang="ts">
+  import type { MenuState } from './types'
+  import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue'
+  import { Menu } from 'ant-design-vue'
+  import BasicSubMenuItem from './components/BasicSubMenuItem.vue'
+  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum'
+  import { useOpenKeys } from './useOpenKeys'
+  import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
+  import { isFunction } from '/@/utils/is'
+  import { basicProps } from './props'
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
+  import { REDIRECT_NAME } from '/@/router/constant'
+  import { useDesign } from '/@/hooks/web/useDesign'
+  import { getCurrentParentPath } from '/@/router/menus'
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange'
+  import { getAllParentPath } from '/@/router/helper/menuHelper'
+
+  export default defineComponent({
+    name: 'BasicMenu',
+    components: {
+      Menu,
+      BasicSubMenuItem,
+    },
+    props: basicProps,
+    emits: ['menuClick'],
+    setup(props, { emit }) {
+      const isClickGo = ref(false)
+      const currentActiveMenu = ref('')
+
+      const menuState = reactive<MenuState>({
+        defaultSelectedKeys: [],
+        openKeys: [],
+        selectedKeys: [],
+        collapsedOpenKeys: [],
+      })
+
+      const { prefixCls } = useDesign('basic-menu')
+      const { items, mode, accordion } = toRefs(props)
+
+      const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting()
+
+      const { currentRoute } = useRouter()
+
+      const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(
+        menuState,
+        items,
+        mode as any,
+        accordion,
+      )
+
+      const getIsTopMenu = computed(() => {
+        const { type, mode } = props
+
+        return (
+          (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) ||
+          (props.isHorizontal && unref(getSplit))
+        )
+      })
+
+      const getMenuClass = computed(() => {
+        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign)
+        return [
+          prefixCls,
+          `justify-${align}`,
+          {
+            [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
+            [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
+          },
+        ]
+      })
+
+      const getInlineCollapseOptions = computed(() => {
+        const isInline = props.mode === MenuModeEnum.INLINE
+
+        const inlineCollapseOptions: { inlineCollapsed?: boolean } = {}
+        if (isInline) {
+          inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed)
+        }
+        return inlineCollapseOptions
+      })
+
+      listenerRouteChange((route) => {
+        if (route.name === REDIRECT_NAME) return
+        handleMenuChange(route)
+        currentActiveMenu.value = route.meta?.currentActiveMenu as string
+
+        if (unref(currentActiveMenu)) {
+          menuState.selectedKeys = [unref(currentActiveMenu)]
+          setOpenKeys(unref(currentActiveMenu))
+        }
+      })
+
+      !props.mixSider &&
+        watch(
+          () => props.items,
+          () => {
+            handleMenuChange()
+          },
+        )
+
+      async function handleMenuClick(key) {
+        const { beforeClickFn } = props
+        if (beforeClickFn && isFunction(beforeClickFn)) {
+          const flag = await beforeClickFn(key)
+          if (!flag) return
+        }
+        emit('menuClick', key)
+
+        isClickGo.value = true
+        menuState.selectedKeys = [key]
+      }
+
+      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+        if (unref(isClickGo)) {
+          isClickGo.value = false
+          return
+        }
+        const path =
+          (route || unref(currentRoute)).meta?.currentActiveMenu ||
+          (route || unref(currentRoute)).path
+        setOpenKeys(path)
+        if (unref(currentActiveMenu)) return
+        if (props.isHorizontal && unref(getSplit)) {
+          const parentPath = await getCurrentParentPath(path)
+          menuState.selectedKeys = [parentPath]
+        } else {
+          const parentPaths = await getAllParentPath(props.items, path)
+          menuState.selectedKeys = parentPaths
+        }
+      }
+
+      return {
+        handleMenuClick,
+        getInlineCollapseOptions,
+        getMenuClass,
+        handleOpenChange,
+        getOpenKeys,
+        ...toRefs(menuState),
+      }
+    },
+  })
+</script>
+<style lang="less">
+  @import './index.less';
+</style>

frontend/vben/src/components/Menu/src/components/BasicMenuItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <MenuItem :key="item.path">
+    <MenuItemContent v-bind="$props" :item="item" />
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { Menu } from 'ant-design-vue'
+  import { itemProps } from '../props'
+
+  import MenuItemContent from './MenuItemContent.vue'
+  export default defineComponent({
+    name: 'BasicMenuItem',
+    components: { MenuItem: Menu.Item, MenuItemContent },
+    props: itemProps,
+    setup() {
+      return {}
+    },
+  })
+</script>

frontend/vben/src/components/Menu/src/components/BasicSubMenuItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
+  <SubMenu
+    v-if="menuHasChildren(item) && getShowMenu"
+    :class="[theme]"
+    :key="`submenu-${item.path}`"
+    popupClassName="app-top-menu-popup"
+  >
+    <template #title>
+      <MenuItemContent v-bind="$props" :item="item" />
+    </template>
+
+    <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
+      <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
+    </template>
+  </SubMenu>
+</template>
+<script lang="ts">
+  import type { Menu as MenuType } from '/@/router/types'
+  import { defineComponent, computed } from 'vue'
+  import { Menu } from 'ant-design-vue'
+  import { useDesign } from '/@/hooks/web/useDesign'
+  import { itemProps } from '../props'
+  import BasicMenuItem from './BasicMenuItem.vue'
+  import MenuItemContent from './MenuItemContent.vue'
+
+  export default defineComponent({
+    name: 'BasicSubMenuItem',
+    isSubMenu: true,
+    components: {
+      BasicMenuItem,
+      SubMenu: Menu.SubMenu,
+      MenuItemContent,
+    },
+    props: itemProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-menu-item')
+
+      const getShowMenu = computed(() => !props.item.meta?.hideMenu)
+      function menuHasChildren(menuTreeItem: MenuType): boolean {
+        return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
+          Reflect.has(menuTreeItem, 'children') &&
+          !!menuTreeItem.children &&
+          menuTreeItem.children.length > 0
+        )
+      }
+      return {
+        prefixCls,
+        menuHasChildren,
+        getShowMenu,
+      }
+    },
+  })
+</script>

frontend/vben/src/components/Menu/src/components/MenuItemContent.vue

@@ -0,0 +1,34 @@
+<template>
+  <span :class="`${prefixCls}- flex items-center `">
+    <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
+    {{ getI18nName }}
+  </span>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue'
+
+  import Icon from '/@/components/Icon/index'
+  import { useI18n } from '/@/hooks/web/useI18n'
+  import { useDesign } from '/@/hooks/web/useDesign'
+  import { contentProps } from '../props'
+  const { t } = useI18n()
+
+  export default defineComponent({
+    name: 'MenuItemContent',
+    components: {
+      Icon,
+    },
+    props: contentProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-menu-item-content')
+      const getI18nName = computed(() => t(props.item?.name))
+      const getIcon = computed(() => props.item?.icon)
+
+      return {
+        prefixCls,
+        getI18nName,
+        getIcon,
+      }
+    },
+  })
+</script>

frontend/vben/src/components/Menu/src/index.less

@@ -0,0 +1,74 @@
+@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
+
+.app-top-menu-popup {
+  min-width: 150px;
+}
+
+.@{basic-menu-prefix-cls} {
+  width: 100%;
+
+  .ant-menu-item {
+    transition: unset;
+  }
+
+  &__sidebar-hor {
+    &.ant-menu-horizontal {
+      display: flex;
+      align-items: center;
+
+      &.ant-menu-dark {
+        background-color: transparent;
+
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          color: #fff;
+          background-color: @top-menu-active-bg-color !important;
+        }
+
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          background-color: @top-menu-active-bg-color;
+        }
+
+        .@{basic-menu-prefix-cls}-item__level1 {
+          background-color: transparent;
+
+          &.ant-menu-item-selected,
+          &.ant-menu-submenu-selected {
+            background-color: @top-menu-active-bg-color !important;
+          }
+        }
+
+        .ant-menu-item,
+        .ant-menu-submenu {
+          &.@{basic-menu-prefix-cls}-item__level1,
+          .ant-menu-submenu-title {
+            height: @header-height;
+            line-height: @header-height;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-menu-submenu,
+  .ant-menu-submenu-inline {
+    transition: unset;
+  }
+
+  .ant-menu-inline.ant-menu-sub {
+    box-shadow: unset !important;
+    transition: unset;
+  }
+}

frontend/vben/src/components/Menu/src/props.ts

@@ -0,0 +1,60 @@
+import type { Menu } from '/@/router/types'
+import type { PropType } from 'vue'
+
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum'
+import { ThemeEnum } from '/@/enums/appEnum'
+import { propTypes } from '/@/utils/propTypes'
+import type { MenuTheme } from 'ant-design-vue'
+import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface'
+export const basicProps = {
+  items: {
+    type: Array as PropType<Menu[]>,
+    default: () => [],
+  },
+  collapsedShowTitle: propTypes.bool,
+  // 最好是4 倍数
+  inlineIndent: propTypes.number.def(20),
+  // 菜单组件的mode属性
+  mode: {
+    type: String as PropType<MenuMode>,
+    default: MenuModeEnum.INLINE,
+  },
+
+  type: {
+    type: String as PropType<MenuTypeEnum>,
+    default: MenuTypeEnum.MIX,
+  },
+  theme: {
+    type: String as PropType<MenuTheme>,
+    default: ThemeEnum.DARK,
+  },
+  inlineCollapsed: propTypes.bool,
+  mixSider: propTypes.bool,
+
+  isHorizontal: propTypes.bool,
+  accordion: propTypes.bool.def(true),
+  beforeClickFn: {
+    type: Function as PropType<(key: string) => Promise<boolean>>,
+  },
+}
+
+export const itemProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: {},
+  },
+  level: propTypes.number,
+  theme: propTypes.oneOf(['dark', 'light']),
+  showTitle: propTypes.bool,
+  isHorizontal: propTypes.bool,
+}
+
+export const contentProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: null,
+  },
+  showTitle: propTypes.bool.def(true),
+  level: propTypes.number.def(0),
+  isHorizontal: propTypes.bool.def(true),
+}

frontend/vben/src/components/Menu/src/types.ts

@@ -0,0 +1,25 @@
+// import { ComputedRef } from 'vue';
+// import { ThemeEnum } from '/@/enums/appEnum';
+// import { MenuModeEnum } from '/@/enums/menuEnum';
+export interface MenuState {
+  // 默认选中的列表
+  defaultSelectedKeys: string[]
+
+  // 模式
+  // mode: MenuModeEnum;
+
+  // // 主题
+  // theme: ComputedRef<ThemeEnum> | ThemeEnum;
+
+  // 缩进
+  inlineIndent?: number
+
+  // 展开数组
+  openKeys: string[]
+
+  // 当前选中的菜单项 key 数组
+  selectedKeys: string[]
+
+  // 收缩状态下展开的数组
+  collapsedOpenKeys: string[]
+}

frontend/vben/src/components/Menu/src/useOpenKeys.ts

@@ -0,0 +1,83 @@
+import { MenuModeEnum } from '/@/enums/menuEnum'
+import type { Menu as MenuType } from '/@/router/types'
+import type { MenuState } from './types'
+
+import { computed, Ref, toRaw } from 'vue'
+
+import { unref } from 'vue'
+import { uniq } from 'lodash-es'
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
+import { getAllParentPath } from '/@/router/helper/menuHelper'
+import { useTimeoutFn } from '/@/hooks/core/useTimeout'
+
+export function useOpenKeys(
+  menuState: MenuState,
+  menus: Ref<MenuType[]>,
+  mode: Ref<MenuModeEnum>,
+  accordion: Ref<boolean>,
+) {
+  const { getCollapsed, getIsMixSidebar } = useMenuSetting()
+
+  async function setOpenKeys(path: string) {
+    if (mode.value === MenuModeEnum.HORIZONTAL) {
+      return
+    }
+    const native = unref(getIsMixSidebar)
+    useTimeoutFn(
+      () => {
+        const menuList = toRaw(menus.value)
+        if (menuList?.length === 0) {
+          menuState.openKeys = []
+          return
+        }
+        if (!unref(accordion)) {
+          menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)])
+        } else {
+          menuState.openKeys = getAllParentPath(menuList, path)
+        }
+      },
+      16,
+      !native,
+    )
+  }
+
+  const getOpenKeys = computed(() => {
+    const collapse = unref(getIsMixSidebar) ? false : unref(getCollapsed)
+
+    return collapse ? menuState.collapsedOpenKeys : menuState.openKeys
+  })
+
+  /**
+   * @description:  重置值
+   */
+  function resetKeys() {
+    menuState.selectedKeys = []
+    menuState.openKeys = []
+  }
+
+  function handleOpenChange(openKeys: string[]) {
+    if (unref(mode) === MenuModeEnum.HORIZONTAL || !unref(accordion) || unref(getIsMixSidebar)) {
+      menuState.openKeys = openKeys
+    } else {
+      // const menuList = toRaw(menus.value);
+      // getAllParentPath(menuList, path);
+      const rootSubMenuKeys: string[] = []
+      for (const { children, path } of unref(menus)) {
+        if (children && children.length > 0) {
+          rootSubMenuKeys.push(path)
+        }
+      }
+      if (!unref(getCollapsed)) {
+        const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1)
+        if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
+          menuState.openKeys = openKeys
+        } else {
+          menuState.openKeys = latestOpenKey ? [latestOpenKey] : []
+        }
+      } else {
+        menuState.collapsedOpenKeys = openKeys
+      }
+    }
+  }
+  return { setOpenKeys, resetKeys, getOpenKeys, handleOpenChange }
+}