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

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 {