feat: add breadcrumb navigation example

apps/web-antd/src/locales/langs/en-US.json

@@ -37,7 +37,12 @@
       "features": {
         "title": "Features",
         "hideChildrenInMenu": "Hide Menu Children",
-        "loginExpired": "Login Expired"
+        "loginExpired": "Login Expired",
+        "breadcrumbNavigation": "Breadcrumb Navigation",
+        "breadcrumbLateral": "Lateral Mode",
+        "breadcrumbLateralDetail": "Lateral Mode Detail",
+        "breadcrumbLevel": "Level Mode",
+        "breadcrumbLevelDetail": "Level Mode Detail"
       }
     }
   }

apps/web-antd/src/locales/langs/zh-CN.json

@@ -39,7 +39,12 @@
       "features": {
         "title": "功能",
         "hideChildrenInMenu": "隐藏子菜单",
-        "loginExpired": "登录过期"
+        "loginExpired": "登录过期",
+        "breadcrumbNavigation": "面包屑导航",
+        "breadcrumbLateral": "平级模式",
+        "breadcrumbLevel": "层级模式",
+        "breadcrumbLevelDetail": "层级模式详情",
+        "breadcrumbLateralDetail": "平级模式详情"
       }
     }
   }

apps/web-antd/src/router/routes/modules/demos.ts

@@ -127,6 +127,60 @@ const routes: RouteRecordRaw[] = [
               title: $t('page.demos.features.loginExpired'),
             },
           },
+          {
+            name: 'BreadcrumbDemos',
+            path: 'breadcrumb',
+            meta: {
+              icon: 'lucide:navigation',
+              title: $t('page.demos.features.breadcrumbNavigation'),
+            },
+            children: [
+              {
+                name: 'BreadcrumbLateral',
+                path: 'lateral',
+                component: () =>
+                  import('#/views/demos/features/breadcrumb/lateral.vue'),
+                meta: {
+                  icon: 'lucide:navigation',
+                  title: $t('page.demos.features.breadcrumbLateral'),
+                },
+              },
+              {
+                name: 'BreadcrumbLateralDetail',
+                path: 'lateral-detail',
+                component: () =>
+                  import(
+                    '#/views/demos/features/breadcrumb/lateral-detail.vue'
+                  ),
+                meta: {
+                  activePath: '/demos/features/breadcrumb/lateral',
+                  hideInMenu: true,
+                  title: $t('page.demos.features.breadcrumbLateralDetail'),
+                },
+              },
+              {
+                name: 'BreadcrumbLevel',
+                path: 'level',
+                meta: {
+                  icon: 'lucide:navigation',
+                  title: $t('page.demos.features.breadcrumbLevel'),
+                },
+                children: [
+                  {
+                    name: 'BreadcrumbLevelDetail',
+                    path: 'detail',
+                    component: () =>
+                      import(
+                        '#/views/demos/features/breadcrumb/level-detail.vue'
+                      ),
+                    meta: {
+                      title: $t('page.demos.features.breadcrumbLevelDetail'),
+                    },
+                  },
+                ],
+              },
+            ],
+          },
         ],
       },
       {
@@ -179,6 +233,8 @@ const routes: RouteRecordRaw[] = [
       },
       {
         meta: {
+          badgeType: 'dot',
+          badgeVariants: 'destructive',
           icon: 'lucide:circle-dot',
           title: $t('page.demos.badge.title'),
         },
@@ -201,7 +257,7 @@ const routes: RouteRecordRaw[] = [
             component: () => import('#/views/demos/badge/index.vue'),
             path: 'text',
             meta: {
-              badge: 'New',
+              badge: '10',
               icon: 'lucide:square-dot',
               title: $t('page.demos.badge.text'),
             },

apps/web-antd/src/views/demos/features/breadcrumb/lateral-detail.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { Fallback } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+defineOptions({ name: 'BreadcrumbLateralDetail' });
+
+const router = useRouter();
+</script>
+
+<template>
+  <Fallback
+    description="面包屑导航-平级模式-详情页"
+    status="coming-soon"
+    title="注意观察面包屑导航变化"
+  >
+    <template #action>
+      <Button @click="router.go(-1)">返回</Button>
+    </template>
+  </Fallback>
+</template>

apps/web-antd/src/views/demos/features/breadcrumb/lateral.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { Fallback } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+defineOptions({ name: 'BreadcrumbLateral' });
+
+const router = useRouter();
+
+function details() {
+  router.push({ name: 'BreadcrumbLateralDetail' });
+}
+</script>
+
+<template>
+  <Fallback
+    description="点击查看详情，并观察面包屑导航变化"
+    status="coming-soon"
+    title="面包屑导航-平级模式"
+  >
+    <template #action>
+      <Button type="primary" @click="details">点击查看详情</Button>
+    </template>
+  </Fallback>
+</template>

apps/web-antd/src/views/demos/features/breadcrumb/level-detail.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'BreadcrumbLevelDetail' });
+</script>
+
+<template>
+  <Fallback
+    description="面包屑导航-层级模式-详情页"
+    status="coming-soon"
+    title="注意观察面包屑导航变化"
+  />
+</template>