feat(Breadcrumbe): Add Breadcrumb component

style: change function to arrow function

src/components/Menu/src/Menu.vue

@@ -1,7 +1,6 @@
 <script lang="tsx">
 import { computed, defineComponent } from 'vue'
 import { ElMenu, ElScrollbar } from 'element-plus'
-import { useDesign } from '@/hooks/web/useDesign'
 import { useAppStore } from '@/store/modules/app'
 import { usePermissionStore } from '@/store/modules/permission'
 import type { LayoutType } from '@/config/app'
@@ -18,10 +17,6 @@ export default defineComponent({
 
     const permissionStore = usePermissionStore()
 
-    const { getPrefixCls } = useDesign()
-
-    const preFixCls = getPrefixCls('menu')
-
     const menuMode = computed((): 'vertical' | 'horizontal' => {
       // 竖
       const vertical: LayoutType[] = ['classic']
@@ -46,7 +41,7 @@ export default defineComponent({
       return path
     })
 
-    function menuSelect(index: string) {
+    const menuSelect = (index: string) => {
       if (isUrl(index)) {
         window.open(index)
       } else {
@@ -57,8 +52,8 @@ export default defineComponent({
     return () => (
       <div
         class={[
-          preFixCls,
-          'h-[100%] overflow-hidden',
+          'v-menu',
+          'h-[100%] overflow-hidden z-100',
           appStore.getCollapse
             ? 'w-[var(--left-menu-min-width)]'
             : 'w-[var(--left-menu-max-width)]',
@@ -147,7 +142,7 @@ export default defineComponent({
 
   // 折叠动画的时候，就需要把文字给隐藏掉
   :deep(.horizontal-collapse-transition) {
-    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
+    // transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
     .@{prefix-cls}__title {
       display: none;
     }

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -6,11 +6,11 @@ import { useRenderMenuTitle } from './useRenderMenuTitle'
 import { useDesign } from '@/hooks/web/useDesign'
 import { pathResolve } from '@/utils/routerHelper'
 
-export function useRenderMenuItem(
+export const useRenderMenuItem = (
   allRouters: AppRouteRecordRaw[] = [],
   menuMode: 'vertical' | 'horizontal'
-) {
-  function renderMenuItem(routers?: AppRouteRecordRaw[]) {
+) => {
+  const renderMenuItem = (routers?: AppRouteRecordRaw[]) => {
     return (routers || allRouters).map((v) => {
       const meta = (v.meta ?? {}) as RouteMeta
       if (!meta.hidden) {

src/components/Menu/src/components/useRenderMenuTitle.tsx

@@ -2,18 +2,18 @@ import type { RouteMeta } from 'vue-router'
 import { Icon } from '@/components/Icon'
 import { useI18n } from '@/hooks/web/useI18n'
 
-export function useRenderMenuTitle() {
-  function renderMenuTitle(meta: RouteMeta) {
+export const useRenderMenuTitle = () => {
+  const renderMenuTitle = (meta: RouteMeta) => {
     const { t } = useI18n()
     const { title = 'Please set title', icon } = meta
 
     return icon ? (
       <>
         <Icon icon={meta.icon}></Icon>
-        <span>{t(title as string)}</span>
+        <span class="v-menu__title">{t(title as string)}</span>
       </>
     ) : (
-      <span>{t(title as string)}</span>
+      <span class="v-menu__title">{t(title as string)}</span>
     )
   }
 

src/components/Menu/src/helper.ts

@@ -1,11 +1,6 @@
 import type { RouteMeta } from 'vue-router'
 import { ref, unref } from 'vue'
-
-interface TreeConfig {
-  id: string
-  children: string
-  pid: string
-}
+import { findPath } from '@/utils/tree'
 
 type OnlyOneChildType = AppRouteRecordRaw & { noShowingChildren?: boolean }
 
@@ -14,50 +9,15 @@ interface HasOneShowingChild {
   onlyOneChild?: OnlyOneChildType
 }
 
-const DEFAULT_CONFIG: TreeConfig = {
-  id: 'id',
-  children: 'children',
-  pid: 'pid'
-}
-
-const getConfig = (config: Partial<TreeConfig>) => Object.assign({}, DEFAULT_CONFIG, config)
-
-export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
+export const getAllParentPath = <T = Recordable>(treeData: T[], path: string) => {
   const menuList = findPath(treeData, (n) => n.path === path) as AppRouteRecordRaw[]
   return (menuList || []).map((item) => item.path)
 }
 
-export function findPath<T = any>(
-  tree: any,
-  func: Fn,
-  config: Partial<TreeConfig> = {}
-): T | T[] | null {
-  config = getConfig(config)
-  const path: T[] = []
-  const list = [...tree]
-  const visitedSet = new Set()
-  const { children } = config
-  while (list.length) {
-    const node = list[0]
-    if (visitedSet.has(node)) {
-      path.pop()
-      list.shift()
-    } else {
-      visitedSet.add(node)
-      node[children!] && list.unshift(...node[children!])
-      path.push(node)
-      if (func(node)) {
-        return path
-      }
-    }
-  }
-  return null
-}
-
-export function hasOneShowingChild(
+export const hasOneShowingChild = (
   children: AppRouteRecordRaw[] = [],
   parent: AppRouteRecordRaw
-): HasOneShowingChild {
+): HasOneShowingChild => {
   const onlyOneChild = ref<OnlyOneChildType>()
 
   const showingChildren = children.filter((v) => {