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

front/components/Result/FileShareResult.vue

@@ -5,14 +5,15 @@ import { Input } from "@/components/ui/input";
 import { useClipboard } from "@vueuse/core";
 import { toast } from "vue-sonner";
 import { useQuery } from "@tanstack/vue-query";
-import useAppShare from "@/composables/useShare";
+import useMyAppShare from "~/composables/useMyAppShare";
+import useMyAppConfig from "@/composables/useMyAppConfig";
 const props = defineProps<{
   data: { file: File; config: any; handle_type: string; file_id: string };
 }>();
 const emit = defineEmits<{
   (e: "change", key: string): void;
 }>();
-const { createFileShare } = useAppShare();
+const { createFileShare } = useMyAppShare();
 const { data } = useQuery({
   queryKey: ["create-share", props?.data?.file_id],
   queryFn: async () => {
@@ -27,7 +28,7 @@ const { data } = useQuery({
   },
 });
 
-const appConfig = useAppConfig();
+const appConfig = useMyAppConfig();
 const url = computed(() => {
   const { id } = data?.value || {};
   return `${appConfig?.value?.site_url}/s/${id}`;

front/components/Result/ImageCompressResult.vue

@@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
 import { AsyncButton, Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { filesize } from "filesize";
-import useAppShare from "~/composables/useShare";
+import useMyAppShare from "~/composables/useMyAppShare";
 import { toast } from "vue-sonner";
 const emit = defineEmits<{
   (e: "change", key: string): void;
@@ -63,7 +63,7 @@ const { data: taskData, refetch } = useQuery({
   enabled: !!taskId.value,
 });
 
-const { downloadFile, createFileShare } = useAppShare();
+const { downloadFile, createFileShare } = useMyAppShare();
 
 const { counter, pause } = useInterval(2000, { controls: true });
 

front/components/Result/TextShareResult.vue

@@ -4,7 +4,8 @@ import { Input } from "@/components/ui/input";
 import { useClipboard } from "@vueuse/core";
 import { toast } from "vue-sonner";
 import { useQuery } from "@tanstack/vue-query";
-import useAppShare from "@/composables/useShare";
+import useMyAppShare from "~/composables/useMyAppShare";
+import useMyAppConfig from "@/composables/useMyAppConfig";
 
 const props = defineProps<{
   data: { text: string; config: any; handle_type: string };
@@ -14,7 +15,7 @@ const emit = defineEmits<{
   (e: "change", key: string): void;
 }>();
 
-const { createTextShare } = useAppShare();
+const { createTextShare } = useMyAppShare();
 const { data } = useQuery({
   queryKey: ["create-share", props?.data?.text],
   queryFn: async () => {
@@ -26,7 +27,7 @@ const { data } = useQuery({
     return data?.data;
   },
 });
-const appConfig = useAppConfig();
+const appConfig = useMyAppConfig();
 const url = computed(() => {
   const { id } = data?.value || {};
   return `${appConfig?.value?.site_url}/s/${id}`;

front/composables/useAppConfig.ts

@@ -1,6 +0,0 @@
-const useAppConfig = () => {
-    const { data } = useFetch('/config')
-    return data
-}
-
-export default useAppConfig

front/composables/useMyAppConfig.ts

@@ -0,0 +1,6 @@
+const useMyAppConfig = () => {
+  const { data } = useFetch("/config");
+  return data;
+};
+
+export default useMyAppConfig;

front/composables/useMyAppShare.ts

@@ -60,7 +60,7 @@ const createTextShare = async (data: { text: string; config: any }) => {
   });
 };
 
-const useAppShare = () => {
+const useMyAppShare = () => {
   return {
     downloadFile,
     createShare,
@@ -69,4 +69,4 @@ const useAppShare = () => {
   };
 };
 
-export default useAppShare;
+export default useMyAppShare;

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": "上传文件",

front/layouts/default.vue

@@ -8,7 +8,7 @@ await useSeo();
     <Toaster position="top-center" richColors closeButton />
     <img
       class="w-full h-full object-cover absolute inset-0 -z-[1]"
-      src="https://fuwari.vercel.app/_astro/demo-banner.DFyx781H_Z1gN7UP.webp"
+      src="https://img.fudaoyuan.icu/api/1/random/?scale_min=1.5&webp=true&md=false&format=302"
     />
     <div
       class="h-full w-full flex flex-col items-center lg:p-10 p-5 overflow-y-auto"

front/package.json

@@ -13,6 +13,7 @@
     "@nuxt/image": "1.10.0",
     "@nuxtjs/i18n": "9.5.5",
     "@pinia/nuxt": "^0.11.0",
+    "pinia": "^3.0.2",
     "@tailwindcss/postcss": "^4.1.3",
     "@tailwindcss/vite": "^4.1.3",
     "@tanstack/vue-query": "^5.76.0",
@@ -42,7 +43,9 @@
     "lucide-vue-next": "^0.487.0",
     "markdown-it": "^14.1.0",
     "motion-v": "1.0.0-beta.2",
-    "nuxt": "^3.16.0",
+    "nuxt": "^3.17.4",
+    "vue": "^3.5.16",
+    "vue-router": "^4.5.1",
     "nuxt-lucide-icons": "1.0.5",
     "reka-ui": "^2.2.0",
     "shadcn-nuxt": "2.0.1",
@@ -52,20 +55,14 @@
     "tiptap-markdown": "^0.8.10",
     "tw-animate-css": "^1.2.5",
     "vaul-vue": "^0.4.1",
-    "vue": "latest",
-    "vue-router": "latest",
     "vue-sonner": "^1.3.2"
   },
   "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.13.2",
-    "@serwist/build": "^9.0.12",
-    "@serwist/nuxt": "^9.0.12",
-    "@serwist/vite": "^9.0.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/markdown-it": "^14.1.2",
     "@vueuse/core": "^13.0.0",
-    "@vueuse/nuxt": "^13.0.0",
+    "@vueuse/nuxt": "^13.0.0"
-    "serwist": "^9.0.12"
   }
 }

front/pages/about.vue

@@ -7,8 +7,9 @@ import { Skeleton } from "@/components/ui/skeleton";
 import AboutChartTooltip from "@/components/AboutChartTooltip.vue";
 import { filesize } from "filesize";
 import SparkMD5 from "spark-md5";
+import useMyAppConfig from "@/composables/useMyAppConfig";
 
-const appConfig = useAppConfig();
+const appConfig = useMyAppConfig();
 const { site_title, site_desc } = appConfig.value || {};
 
 const { data, isLoading } = useQuery({

package.json

@@ -9,7 +9,6 @@
     "dev:backend": "cd backend && air",
     "dev:worker": "cd worker && air",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "postinstall": "npx husky init",
     "prepare": "husky"
   },
   "workspaces": [