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

app/pages/download/[id].vue

@@ -2,18 +2,7 @@
   <div class="page-container">
     <div class="page-header">
       <h1 class="page-title">文件下载</h1>
-      <el-breadcrumb class="breadcrumb">
-        <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('/products')">{{
-            $t('navigation.downloads')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
     <div v-if="!pending" class="page-content">
       <el-card shadow="hover" class="p-4">
@@ -60,6 +49,12 @@
 <script setup lang="ts">
   const route = useRoute();
   const router = useRouter();
+  const localePath = useLocalePath();
+
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.downloads'), to: localePath('/downloads') },
+  ];
 
   // 获取路由参数
   const id = computed(() => route.params.id as string);