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

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

@@ -3,21 +3,7 @@
     <div v-if="!pending">
       <div v-if="solution">
         <div class="page-header">
-          <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('/solutions')">{{
-                $t('navigation.solutions')
-              }}</NuxtLink>
-            </el-breadcrumb-item>
-            <el-breadcrumb-item class="text-md opacity-50">{{
-              solution.title
-            }}</el-breadcrumb-item>
-          </el-breadcrumb>
+          <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
         </div>
         <div class="page-content">
           <div class="solution-info">
@@ -42,7 +28,10 @@
           :sub-title="$t('solution-not-found-desc')"
         >
           <template #extra>
-            <el-button type="primary" @click="$router.push('/solutions')">
+            <el-button
+              type="primary"
+              @click="$router.push($localePath('/solutions'))"
+            >
               {{ $t('back-to-solutions') }}
             </el-button>
           </template>
@@ -57,17 +46,25 @@
 
 <script setup lang="ts">
   const route = useRoute();
+  const localePath = useLocalePath();
 
   // 获取路由参数(documentId)
   const id = computed(() => route.params.slug as string);
 
   const { data, pending, error } = await useSolution(id.value);
 
-  console.log('RawData: ', data.value);
-  const process = toSolutionView(data.value);
-  console.log('Processed Solution: ', process);
+  const solution = computed(() => {
+    if (!data.value) {
+      return null;
+    }
+    return toSolutionView(data.value);
+  });
 
-  const solution = computed(() => toSolutionView(data.value));
+  const breadcrumbItems = computed(() => [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.solutions'), to: localePath('/solutions') },
+    { label: solution.value ? solution.value.title : '' },
+  ]);
 
   watch(error, (value) => {
     if (value) {

app/pages/solutions/index.vue

@@ -2,18 +2,7 @@
   <div class="page-container">
     <div class="page-header">
       <h1 class="page-title">{{ $t('learn-our-solutions') }}</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('/solutions')">{{
-            $t('navigation.solutions')
-          }}</NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
     <div v-if="!pending" class="solutions-container">
       <el-tabs v-model="activeName" class="solutions-tabs">
@@ -55,8 +44,14 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath();
   const { getImageUrl } = useDirectusImage();
 
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.solutions') },
+  ];
+
   const { data, pending, error } = await useSolutionList();
 
   const solutionsRaw = computed(() => data.value ?? []);
@@ -66,8 +61,6 @@
 
   const activeName = ref<string>('all');
 
-  console.log('Processed Data', solutions.value);
-
   // 按类型分组
   const groupedSolutions = computed(() => {
     const gourps: Record<string, SolutionListView[]> = {};