refactor: 将各个页面的面包屑导航提取为单独组件AppBreadcrumb

app/pages/support/contact-us.vue

@@ -3,23 +3,7 @@
     <support-tabs model-value="contact-us" />
     <div class="page-header">
       <h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
-      <el-breadcrumb class="breadcrumb" separator="/">
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">
-            {{ $t('navigation.home') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/support')">
-            {{ $t('navigation.support') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/support/contact-us')">
-            {{ $t('navigation.contact-info') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
 
     <div v-if="!pending" class="page-content">
@@ -32,6 +16,12 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.contact-info') },
+  ];
   const { data, pending, error } = await useContactInfo();
 
   const content = computed(() => toContactInfoView(data.value));