refactor: 将各个界面的notfound提示提取为单独的组件NotFoundResult

- 将components根据作用范围/可复用性进行分类

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>

app/components/shared/NotFoundResult.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-result icon="warning" :title="title" :sub-title="subTitle">
+    <template #extra>
+      <el-button type="primary" @click="onBack">
+        {{ backText || $t('back') }}
+      </el-button>
+    </template>
+  </el-result>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    subTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    backText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    onBack: {
+      type: Function as () => unknown,
+      required: false,
+      default: undefined,
+    },
+  });
+</script>

app/pages/[...all].vue

@@ -1,17 +1,10 @@
 <template>
   <main p="x4 y10" text="center teal-700 dark:gray-200">
-    <div text4xl>
-      <div i-ep-warning inline-block />
-    </div>
-    <div>{{ $t('not-found') }}</div>
-    <div>
-      <button text-sm btn m="3 t8" @click="router.back()">
-        {{ $t('back') }}
-      </button>
-    </div>
+    <not-found-result
+      :title="$t('page-not-found')"
+      :sub-title="$t('page-not-found-desc')"
+      :back-text="$t('back-to-home')"
+      :on-back="() => $router.push($localePath('/'))"
+    />
   </main>
 </template>
-
-<script setup lang="ts">
-  const router = useRouter();
-</script>

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));

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);

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">
@@ -81,17 +67,12 @@
       </div>
       <!-- 未找到产品 -->
       <div v-else class="not-found">
-        <el-result
-          icon="warning"
+        <not-found-result
           :title="$t('product-not-found')"
           :sub-title="$t('product-not-found-desc')"
-        >
-          <template #extra>
-            <el-button type="primary" @click="$router.push('/products')">
-              {{ $t('back-to-products') }}
-            </el-button>
-          </template>
-        </el-result>
+          :back-text="$t('back-to-products')"
+          :on-back="() => $router.push($localePath('/products'))"
+        />
       </div>
     </div>
     <div v-else class="loading">
@@ -107,6 +88,7 @@
 
 <script setup lang="ts">
   const route = useRoute();
+  const localePath = useLocalePath();
 
   const { getImageUrl } = useDirectusImage();
 
@@ -115,17 +97,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))

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">
@@ -36,17 +22,12 @@
         </div>
       </div>
       <div v-else class="not-found">
-        <el-result
-          icon="warning"
+        <not-found-result
           :title="$t('solution-not-found')"
           :sub-title="$t('solution-not-found-desc')"
-        >
-          <template #extra>
-            <el-button type="primary" @click="$router.push('/solutions')">
-              {{ $t('back-to-solutions') }}
-            </el-button>
-          </template>
-        </el-result>
+          :back-text="$t('back-to-solutions')"
+          :on-back="() => $router.push($localePath('/solutions'))"
+        />
       </div>
     </div>
     <div v-else class="loading">
@@ -57,17 +38,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[]> = {};

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));

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(

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(

app/pages/support/index.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="page-container">
     <support-tabs />
-    <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>
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
     </div>
+    <div class="page-content">
       <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 {

i18n/locales/en.json

@@ -56,6 +56,9 @@
   "solution-not-found": "Solution Not Found",
   "solution-not-found-desc": "Sorry, the solution you are lokking for does not exist or has been removed.",
   "back-to-solutions": "Back to Solutions",
+  "page-not-found": "Page Not Found",
+  "page-not-found-desc": "Sorry, the page you are looking for does not exist or has been removed.",
+  "back-to-home": "Back to Home",
   "no-content-available": "No detailed information available",
   "loading": "Loading...",
   "our-products": "Our Products",

i18n/locales/zh.json

@@ -56,6 +56,9 @@
   "solution-not-found": "解决方案未找到",
   "solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
   "back-to-solutions": "返回解决方案列表",
+  "page-not-found": "页面未找到",
+  "page-not-found-desc": "抱歉，您访问的页面不存在或已被删除。",
+  "back-to-home": "返回首页",
   "no-content-available": "暂无详细信息",
   "loading": "加载中...",
   "our-products": "我们的产品",

nuxt.config.ts

@@ -18,6 +18,13 @@ export default defineNuxtConfig({
     },
   },
 
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
+
   runtimeConfig: {
     public: {
       meili: {