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

app/pages/products/[...slug].vue

@@ -3,21 +3,7 @@
     <div v-if="!pending">
       <div v-if="product">
         <!-- 面包屑导航 -->
-        <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('/products')">{{
-              $t('navigation.products')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-          <el-breadcrumb-item class="text-md opactiy-50">{{
-            product.name
-          }}</el-breadcrumb-item>
-        </el-breadcrumb>
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
         <!-- 产品详情内容 -->
         <div class="product-header">
@@ -87,7 +73,10 @@
           :sub-title="$t('product-not-found-desc')"
         >
           <template #extra>
-            <el-button type="primary" @click="$router.push('/products')">
+            <el-button
+              type="primary"
+              @click="$router.push($localePath('/products'))"
+            >
               {{ $t('back-to-products') }}
             </el-button>
           </template>
@@ -107,6 +96,7 @@
 
 <script setup lang="ts">
   const route = useRoute();
+  const localePath = useLocalePath();
 
   const { getImageUrl } = useDirectusImage();
 
@@ -115,17 +105,22 @@
 
   const { data, pending, error } = await useProduct(id.value);
 
-  console.log('Raw Data: ', data.value);
-
   const rawProduct = computed(() => data.value ?? null);
   const product = computed(() => {
+    if (rawProduct.value === null) {
+      return null;
+    }
     return toProductView(rawProduct.value);
   });
 
-  console.log('View Data: ', product.value);
-
   const activeName = ref('details'); // 默认选中概览标签
 
+  const breadcrumbItems = computed(() => [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.products'), to: localePath('/products') },
+    { label: product.value?.name || '' },
+  ]);
+
   watch(error, (value) => {
     if (value) {
       console.error('数据获取失败: ', value);

app/pages/products/index.vue

@@ -2,18 +2,7 @@
   <div class="page-container">
     <div class="page-header">
       <h1 class="page-title">{{ $t('our-products') }}</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.products')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
     <div v-if="!pending" class="page-content">
       <div class="products-container">
@@ -45,12 +34,18 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath();
   const { getImageUrl } = useDirectusImage();
 
   const { data, pending, error } = useProductList();
 
   const activeNames = ref<string[]>([]);
 
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.products') },
+  ];
+
   const productsRaw = computed(() => data.value ?? []);
   const products = computed(() =>
     productsRaw.value.map((item) => toProductListView(item))