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

app/pages/support/documents.vue

@@ -7,23 +7,7 @@
       <support-tabs model-value="documents" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.documents') }}</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/documents')">{{
-              $t('navigation.documents')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
       <div class="document-category">
         <el-row :gutter="12">
@@ -78,6 +62,13 @@
 <script setup lang="ts">
   import { Search } from '@element-plus/icons-vue';
 
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support'), to: localePath('/support') },
+    { label: $t('navigation.documents') },
+  ];
+
   const { data, pending, error } = await useDocumentList();
 
   const documents = computed(