From abacb267aaf96516480255f509b07b32d44abd27 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sun, 8 Dec 2024 19:47:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E5=8C=85=E5=B1=91=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=EF=BC=88=E5=90=8C=E6=AD=A5=20GiDemo=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Breadcrumb/index.vue | 42 ++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index dff1f89..e0d130e 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,14 +1,17 @@
 <template>
   <a-breadcrumb>
-    <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
-      <span
-        v-if="item.redirect === 'noRedirect' || item.redirect === '' || index === breadcrumbList.length - 1"
-        class="gi_line_1"
-      >
-        {{ item.meta.title }}
-      </span>
-      <span v-else class="gi_line_1 breadcrumb-item-title" @click="handleLink(item)">{{ item.meta.title }}</span>
-    </a-breadcrumb-item>
+    <transition-group name="breadcrumb">
+      <div v-for="(item, index) in breadcrumbList" :key="item.meta.title">
+        <a-breadcrumb-item>
+          <span
+            v-if="item.redirect === 'noRedirect' || item.redirect === '' || index === breadcrumbList.length - 1"
+            class="gi_line_1"
+          >{{ item.meta.title }}</span>
+          <span v-else class="gi_line_1 breadcrumb-item-title" @click="handleLink(item)">{{ item.meta.title }}</span>
+          <icon-right v-if="index !== breadcrumbList.length - 1" />
+        </a-breadcrumb-item>
+      </div>
+    </transition-group>
   </a-breadcrumb>
 </template>
 
@@ -59,6 +62,27 @@ function handleLink(item: RouteLocationMatched) {
 </script>
 
 <style scoped lang="scss">
+/** breadcrumb-transform 面包屑动画 */
+.breadcrumb-enter-active {
+  transition: all 0.2s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+:deep(.arco-breadcrumb-item) {
+  padding: 0;
+  display: flex;
+  align-items: center;
+
+  .arco-icon-right {
+    margin: 0 4px;
+  }
+}
+
 .breadcrumb-item-title {
   transition: all 0.3s;
   cursor: pointer;