feat: add error component with localized back to home button for improved user experience

front/error.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+import { useI18n } from "vue-i18n";
+import { Button } from "~/components/ui/button";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+});
+
+const handleError = () => clearError({ redirect: "/" });
+</script>
+
+<template>
+  <NuxtLayout>
+    <div
+      class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 flex flex-col items-center justify-center min-h-[50vh] mt-5 gap-10"
+    >
+      <div class="font-bold text-5xl">{{ error?.statusCode }}</div>
+      <Button @click="handleError">{{ t("btn.backToHome") }}</Button>
+    </div>
+  </NuxtLayout>
+</template>

front/i18n/locales/en.json

@@ -10,7 +10,8 @@
     "desc": "015 is a temporary file sharing platform project, supporting temporary large file slicing upload, temporary text upload, download and share"
   },
   "btn": {
-    "submit": "Submit"
+    "submit": "Submit",
+    "backToHome": "Back to Home"
   },
   "file": {
     "uploadFile": "Upload File",

front/i18n/locales/zh-CN.json

@@ -10,7 +10,8 @@
     "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
   },
   "btn": {
-    "submit": "提交"
+    "submit": "提交",
+    "backToHome": "返回首页"
   },
   "file": {
     "uploadFile": "上传文件",