feat: 回退页面完善

packages/business/common-ui/src/fallback/fallback.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FallbackProps } from './fallback';
+
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -6,29 +8,11 @@ import { $t } from '@vben/locales';
 import { IcRoundArrowBackIosNew } from '@vben-core/iconify';
 import { VbenButton } from '@vben-core/shadcn-ui';
 
-import FeedbackIcon from './icons/fallback-icon.vue';
+import Icon403 from './icons/icon-403.vue';
+import Icon404 from './icons/icon-404.vue';
+import Icon500 from './icons/icon-500.vue';
 
-interface Props {
-  /**
-   * 描述
-   */
-  description?: string;
-  /**
-   *  @zh_CN 首页路由地址
-   *  @default /
-   */
-  homePath?: string;
-  /**
-   * @zh_CN 默认显示的图片
-   * @default pageNotFoundSvg
-   */
-  image?: string;
-
-  /**
-   *  @zh_CN 页面提示语
-   */
-  title?: string;
-}
+interface Props extends FallbackProps {}
 
 defineOptions({
   name: 'Fallback',
@@ -38,15 +22,58 @@ const props = withDefaults(defineProps<Props>(), {
   description: '',
   homePath: '/',
   image: '',
+  showBack: true,
+  status: '404',
   title: '',
 });
 
 const titleText = computed(() => {
-  return props.title || $t('fallback.page-not-found');
+  if (props.title) {
+    return props.title;
+  }
+
+  switch (props.status) {
+    case '403': {
+      return $t('fallback.forbidden');
+    }
+    case '500': {
+      return $t('fallback.internal-error');
+    }
+    default: {
+      return $t('fallback.page-not-found');
+    }
+  }
 });
 
 const descText = computed(() => {
-  return props.description || $t('fallback.page-not-found-desc');
+  if (props.description) {
+    return props.description;
+  }
+  switch (props.status) {
+    case '403': {
+      return $t('fallback.forbidden-desc');
+    }
+    case '500': {
+      return $t('fallback.internal-error-desc');
+    }
+    default: {
+      return $t('fallback.page-not-found-desc');
+    }
+  }
+});
+
+const fallbackIcon = computed(() => {
+  switch (props.status) {
+    case '403': {
+      return Icon403;
+    }
+    case '500': {
+      return Icon500;
+    }
+    default: {
+      return Icon404;
+    }
+  }
 });
 
 const { push } = useRouter();
@@ -58,19 +85,23 @@ function back() {
 </script>
 
 <template>
-  <div
-    class="animate-in zoom-in-50 flex h-screen w-full flex-col items-center justify-center duration-300"
-  >
+  <div class="flex size-full flex-col items-center justify-center duration-300">
     <img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
-    <FeedbackIcon v-else class="md:1/3 h-1/3 w-1/2 lg:w-1/4" />
+    <component :is="fallbackIcon" v-else class="md:1/3 h-1/3 w-1/2 lg:w-1/4" />
     <div class="flex-col-center">
-      <p class="text-foreground mt-12 text-3xl md:text-4xl lg:text-5xl">
+      <p
+        v-if="titleText"
+        class="text-foreground mt-12 text-3xl md:text-4xl lg:text-5xl"
+      >
         {{ titleText }}
       </p>
-      <p class="text-muted-foreground my-8 md:text-lg lg:text-xl">
+      <p
+        v-if="descText"
+        class="text-muted-foreground md:text-md my-6 lg:text-lg"
+      >
         {{ descText }}
       </p>
-      <VbenButton size="lg" @click="back">
+      <VbenButton v-if="showBack" size="lg" @click="back">
         <IcRoundArrowBackIosNew class="mr-2" />
         {{ $t('common.back-to-home') }}
       </VbenButton>