feat(Breadcrumbe): Add Breadcrumb component

style: change function to arrow function

mock/user/index.ts

@@ -50,5 +50,17 @@ export default [
         }
       }
     }
+  },
+  // 退出接口
+  {
+    url: '/user/loginOut',
+    method: 'get',
+    timeout,
+    response: () => {
+      return {
+        code: result_code,
+        data: null
+      }
+    }
   }
 ] as MockMethod[]

src/App.vue

@@ -8,7 +8,7 @@ const appStore = useAppStore()
 
 const size = computed(() => appStore.size)
 
-function initDark() {
+const initDark = () => {
   const isDarkTheme = isDark()
   appStore.setIsDark(isDarkTheme)
 }

src/api/login/index.ts

@@ -9,3 +9,7 @@ export const loginApi = (data: UserLoginType) => {
     UserLoginType
   >)
 }
+
+export const loginOutApi = () => {
+  return request({ url: '/user/loginOut', method: 'get' })
+}

src/components/Breadcrumb/src/Breadcrumb.vue

@@ -0,0 +1,89 @@
+<script lang="tsx">
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
+import { useRouter } from 'vue-router'
+// import { compile } from 'path-to-regexp'
+import { usePermissionStore } from '@/store/modules/permission'
+import { filterBreadcrumb } from './helper'
+import { filter, treeToList } from '@/utils/tree'
+import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Icon } from '@/components/Icon'
+
+export default defineComponent({
+  name: 'Breadcrumb',
+  setup() {
+    const { currentRoute } = useRouter()
+
+    const { t } = useI18n()
+
+    const levelList = ref<AppRouteRecordRaw[]>([])
+
+    const permissionStore = usePermissionStore()
+
+    const menuRouters = computed(() => {
+      const routers = permissionStore.getRouters
+      return filterBreadcrumb(routers)
+    })
+
+    const getBreadcrumb = () => {
+      const currentPath = currentRoute.value.path
+
+      levelList.value = filter<AppRouteRecordRaw>(unref(menuRouters), (node: AppRouteRecordRaw) => {
+        return node.path === currentPath
+      })
+    }
+
+    const renderBreadcrumb = () => {
+      const breadcrumbList = treeToList<AppRouteRecordRaw[]>(unref(levelList))
+      return breadcrumbList.map((v) => {
+        const disabled = v.redirect === 'noredirect'
+        const meta = v.meta as RouteMeta
+        return (
+          <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
+            {meta?.icon ? (
+              <>
+                <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
+              </>
+            ) : (
+              t(v?.meta?.title)
+            )}
+          </ElBreadcrumbItem>
+        )
+      })
+    }
+
+    watch(
+      () => currentRoute.value,
+      (route: RouteLocationNormalizedLoaded) => {
+        if (route.path.startsWith('/redirect/')) {
+          return
+        }
+        getBreadcrumb()
+      },
+      {
+        immediate: true
+      }
+    )
+
+    return () => (
+      <ElBreadcrumb separator="/" class="flex items-center h-full ml-[10px]">
+        <TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
+          {renderBreadcrumb()}
+        </TransitionGroup>
+      </ElBreadcrumb>
+    )
+  }
+})
+</script>
+
+<style lang="less" scoped>
+:deep(.el-breadcrumb__item) {
+  display: flex;
+
+  .el-breadcrumb__inner {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/components/Breadcrumb/src/helper.ts

@@ -0,0 +1,31 @@
+import { pathResolve } from '@/utils/routerHelper'
+import type { RouteMeta } from 'vue-router'
+
+export const filterBreadcrumb = (
+  routes: AppRouteRecordRaw[],
+  parentPath = ''
+): AppRouteRecordRaw[] => {
+  const res: AppRouteRecordRaw[] = []
+
+  for (const route of routes) {
+    const meta = route?.meta as RouteMeta
+    if (meta.hidden && !meta.showMainRoute) {
+      continue
+    }
+
+    const data: AppRouteRecordRaw =
+      !meta.alwaysShow && route.children?.length === 1
+        ? { ...route.children[0], path: pathResolve(route.path, route.children[0].path) }
+        : { ...route }
+
+    data.path = pathResolve(parentPath, data.path)
+
+    if (data.children) {
+      data.children = filterBreadcrumb(data.children, data.path)
+    }
+    if (data) {
+      res.push(data)
+    }
+  }
+  return res
+}

src/components/Collapse/src/Collapse.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { computed, unref } from 'vue'
-import { Icon } from '@/components/Icon'
 import { useAppStore } from '@/store/modules/app'
 
 const appStore = useAppStore()
 
 const collapse = computed(() => appStore.getCollapse)
 
-function toggleCollapse() {
+const toggleCollapse = () => {
   const collapsed = unref(collapse)
   appStore.setCollapse(!collapsed)
 }