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

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>
+    <not-found-result
-      <div i-ep-warning inline-block />
+      :title="$t('page-not-found')"
-    </div>
+      :sub-title="$t('page-not-found-desc')"
-    <div>{{ $t('not-found') }}</div>
+      :back-text="$t('back-to-home')"
-    <div>
+      :on-back="() => $router.push($localePath('/'))"
-      <button text-sm btn m="3 t8" @click="router.back()">
+    />
-        {{ $t('back') }}
-      </button>
-    </div>
   </main>
 </template>
-
-<script setup lang="ts">
-  const router = useRouter();
-</script>

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

@@ -67,20 +67,12 @@
       </div>
       <!-- 未找到产品 -->
       <div v-else class="not-found">
-        <el-result
+        <not-found-result
-          icon="warning"
           :title="$t('product-not-found')"
           :sub-title="$t('product-not-found-desc')"
-        >
+          :back-text="$t('back-to-products')"
-          <template #extra>
+          :on-back="() => $router.push($localePath('/products'))"
-            <el-button
+        />
-              type="primary"
-              @click="$router.push($localePath('/products'))"
-            >
-              {{ $t('back-to-products') }}
-            </el-button>
-          </template>
-        </el-result>
       </div>
     </div>
     <div v-else class="loading">

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

@@ -22,20 +22,12 @@
         </div>
       </div>
       <div v-else class="not-found">
-        <el-result
+        <not-found-result
-          icon="warning"
           :title="$t('solution-not-found')"
           :sub-title="$t('solution-not-found-desc')"
-        >
+          :back-text="$t('back-to-solutions')"
-          <template #extra>
+          :on-back="() => $router.push($localePath('/solutions'))"
-            <el-button
+        />
-              type="primary"
-              @click="$router.push($localePath('/solutions'))"
-            >
-              {{ $t('back-to-solutions') }}
-            </el-button>
-          </template>
-        </el-result>
       </div>
     </div>
     <div v-else class="loading">

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": "我们的产品",