From c6e0ea2a472487ef0f95398c1132d352c710cfd4 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Tue, 28 Oct 2025 16:16:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E5=90=84=E4=B8=AA?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=8F=90=E5=8F=96=E4=B8=BA=E5=8D=95=E7=8B=AC=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6AppBreadcrumb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/shared/AppBreadcrumb.vue | 21 ++++++++++++++
 app/pages/about/index.vue               | 18 ++++--------
 app/pages/download/[id].vue             | 19 +++++--------
 app/pages/products/[...slug].vue        | 35 ++++++++++-------------
 app/pages/products/index.vue            | 19 +++++--------
 app/pages/solutions/[...slug].vue       | 37 ++++++++++++-------------
 app/pages/solutions/index.vue           | 21 +++++---------
 app/pages/support/contact-us.vue        | 24 +++++-----------
 app/pages/support/documents.vue         | 25 ++++++-----------
 app/pages/support/faq.vue               | 26 ++++++-----------
 app/pages/support/index.vue             | 28 ++++++++-----------
 11 files changed, 116 insertions(+), 157 deletions(-)
 create mode 100644 app/components/shared/AppBreadcrumb.vue

diff --git a/app/components/shared/AppBreadcrumb.vue b/app/components/shared/AppBreadcrumb.vue
new file mode 100644
index 0000000..f82ce72
--- /dev/null
+++ b/app/components/shared/AppBreadcrumb.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item
+      v-for="(item, index) in items"
+      :key="index"
+      class="text-md opacity-50"
+    >
+      <NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
+      <span v-else>{{ item.label }}</span>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    items: {
+      type: Array as () => Array<{ label: string; to?: string }>,
+      required: true,
+    },
+  });
+</script>
diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index 70c2b39..e436798 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -1,18 +1,7 @@
 <template>
   <div class="page-container">
     <div v-if="!pending">
-      <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('/about')">
-            {{ $t('navigation.about-us') }}
-          </NuxtLink>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
       <div class="content">
         <markdown-renderer :content="content.content || ''" />
@@ -38,6 +27,11 @@
 </template>
 
 <script setup lang="ts">
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.about-us') },
+  ];
   const { data, pending, error } = await useCompanyProfile();
 
   const content = computed(() => toCompanyProfileView(data.value));
diff --git a/app/pages/download/[id].vue b/app/pages/download/[id].vue
index 4183861..fed2219 100644
--- a/app/pages/download/[id].vue
+++ b/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);
diff --git a/app/pages/products/[...slug].vue b/app/pages/products/[...slug].vue
index e0f186a..f71acd9 100644
--- a/app/pages/products/[...slug].vue
+++ b/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);
diff --git a/app/pages/products/index.vue b/app/pages/products/index.vue
index 3ce7d23..40cce08 100644
--- a/app/pages/products/index.vue
+++ b/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))
diff --git a/app/pages/solutions/[...slug].vue b/app/pages/solutions/[...slug].vue
index 8b6cb87..2bf518e 100644
--- a/app/pages/solutions/[...slug].vue
+++ b/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) {
diff --git a/app/pages/solutions/index.vue b/app/pages/solutions/index.vue
index 341b682..cb9a0c4 100644
--- a/app/pages/solutions/index.vue
+++ b/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[]> = {};
diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue
index 8140b52..3a62aae 100644
--- a/app/pages/support/contact-us.vue
+++ b/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));
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 8d857fa..1aa9b51 100644
--- a/app/pages/support/documents.vue
+++ b/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(
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index f41226e..1dae078 100644
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@@ -7,23 +7,7 @@
       <support-tabs model-value="faq" />
       <div class="page-header">
         <h1 class="page-title">{{ $t('navigation.faq') }}</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/faq')">{{
-              $t('navigation.faq')
-            }}</NuxtLink>
-          </el-breadcrumb-item>
-        </el-breadcrumb>
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
 
       <div class="question-category">
@@ -79,6 +63,14 @@
 <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.faq') },
+  ];
+
   const { data, pending, error } = await useQuestionList();
 
   const questions = computed(
diff --git a/app/pages/support/index.vue b/app/pages/support/index.vue
index 654caf7..5c9f137 100644
--- a/app/pages/support/index.vue
+++ b/app/pages/support/index.vue
@@ -1,22 +1,11 @@
 <template>
   <div class="page-container">
     <support-tabs />
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('navigation.support') }}</h1>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    </div>
     <div class="page-content">
-      <div class="page-header">
-        <h1 class="page-title">{{ $t('navigation.support') }}</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>
-      </div>
       <section style="margin-bottom: 2rem">
         <p>
           金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。
@@ -109,7 +98,13 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  const localePath = useLocalePath();
+  const breadcrumbItems = [
+    { label: $t('navigation.home'), to: localePath('/') },
+    { label: $t('navigation.support') },
+  ];
+</script>
 
 <style scoped>
   .page-container {
@@ -119,6 +114,7 @@
 
   .page-header {
     display: flex;
+    padding: 2rem 2rem 0rem;
   }
 
   .page-title {