feat: 回退页面完善

packages/@vben-core/forward/helpers/src/generator-menus.ts

@@ -30,8 +30,8 @@ async function generatorMenus(
       badgeVariants,
       hideChildrenInMenu = false,
       icon,
+      link,
       order,
-      target,
       title = '',
     } = meta || {};
 
@@ -50,7 +50,7 @@ async function generatorMenus(
       });
     }
     // 隐藏子菜单
-    const resultPath = hideChildrenInMenu ? redirect || path : target || path;
+    const resultPath = hideChildrenInMenu ? redirect || path : link || path;
     return {
       badge,
       badgeType,

packages/@vben-core/shared/typings/src/vue-router.d.ts

@@ -68,6 +68,10 @@ interface RouteMeta {
    * 开启KeepAlive缓存
    */
   keepAlive?: boolean;
+  /**
+   * 外链-跳转路径
+   */
+  link?: string;
   /**
    * 路由是否已经加载过
    */
@@ -80,10 +84,6 @@ interface RouteMeta {
    * 用于路由->菜单排序
    */
   order?: number;
-  /**
-   * 外链-跳转路径
-   */
-  target?: string;
 
   /**
    * 标题名称

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

@@ -0,0 +1,31 @@
+interface FallbackProps {
+  /**
+   * 描述
+   */
+  description?: string;
+  /**
+   *  @zh_CN 首页路由地址
+   *  @default /
+   */
+  homePath?: string;
+  /**
+   * @zh_CN 默认显示的图片
+   * @default pageNotFoundSvg
+   */
+  image?: string;
+
+  /**
+   *  @zh_CN 是否显示返回首页按钮
+   *  @default true
+   */
+  showBack?: boolean;
+  /**
+   *  @zh_CN 内置类型
+   */
+  status?: '403' | '404' | '500';
+  /**
+   *  @zh_CN 页面提示语
+   */
+  title?: string;
+}
+export type { FallbackProps };

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>

packages/business/common-ui/src/fallback/index.ts

@@ -1 +1,2 @@
+export type * from './fallback';
 export { default as Fallback } from './fallback.vue';

packages/business/layouts/src/basic/content/content.vue

@@ -52,7 +52,6 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
           v-if="renderRouteView"
           v-show="!route.meta.iframeSrc"
           :key="route.fullPath"
-          class="h-[1000px]"
         />
       </KeepAlive>
       <component :is="Component" v-else :key="route.fullPath" />

packages/constants/src/_essentials.ts

@@ -4,8 +4,8 @@
 const LOGIN_PATH = '/auth/login';
 
 /**
- *  @zh_CN 登陆页面路由名称
+ * @zh_CN 默认首页地址
  */
-const LOGIN_NAME = 'Login';
+const DEFAULT_HOME_PATH = '/welcome';
 
-export { LOGIN_NAME, LOGIN_PATH };
+export { DEFAULT_HOME_PATH, LOGIN_PATH };

packages/constants/src/vben.ts

@@ -3,4 +3,9 @@
  */
 const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
 
-export { VBEN_GITHUB_URL };
+/**
+ * @zh_CN Vben Logo
+ */
+const VBEN_LOGO =
+  'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/logo-v1.webp';
+export { VBEN_GITHUB_URL, VBEN_LOGO };

packages/locales/src/langs/en-US.yaml

@@ -15,8 +15,12 @@ layout:
   align-right: Align Right
 
 fallback:
-  page-not-found: Page Not Found
-  page-not-found-desc: Sorry, We couldn't find the page you are looking for.
+  page-not-found: Oops! Page Not Found
+  page-not-found-desc: Sorry, we couldn't find the page you were looking for.
+  forbidden: Oops! Access Denied
+  forbidden-desc: Sorry, but you don't have permission to access this page.
+  internal-error: Oops! Something Went Wrong
+  internal-error-desc: Sorry, but the server encountered an error.
 
 widgets:
   document: Document
@@ -83,13 +87,29 @@ authentication:
   third-party-login: Or continue with
 
 page:
-  about: About
-  document: Document
-  login: Login
-  register: Register
-  code-login: Code Login
-  qrcode-login: Qrcode Login
-  forget-password: Forget Password
+  essentials:
+    login: Login
+    register: Register
+    code-login: Code Login
+    qrcode-login: Qrcode Login
+    forget-password: Forget Password
+  vben:
+    about: About
+    document: Document
+  outside:
+    page: External Page
+    embedded: embedded Page
+    external-link: External Link
+  nested:
+    page: Nested Menu
+    menu1: Menu 1
+    menu2: Menu 2
+    menu3: Menu 3
+    menu31: Menu 3-1
+    menu32: Menu 3-2
+    menu321: Menu 3-2-11
+  fallback:
+    page: Exception Page
 
 preference:
   preferences: Preferences

packages/locales/src/langs/zh-CN.yaml

@@ -14,8 +14,12 @@ layout:
   align-right: 居右
 
 fallback:
-  page-not-found: 未找到页面
-  page-not-found-desc: 抱歉，我们找不到您要找的页面。
+  page-not-found: 哎呀！未找到页面
+  page-not-found-desc: 抱歉，我们无法找到您要找的页面。
+  forbidden: 哎呀！访问被拒绝
+  forbidden-desc: 抱歉，您没有权限访问此页面。
+  internal-error: 哎呀！出错了
+  internal-error-desc: 抱歉，服务器遇到错误。
 
 widgets:
   document: 文档
@@ -82,13 +86,29 @@ authentication:
   third-party-login: 其他登录方式
 
 page:
-  about: 关于
-  document: 文档
-  login: 登陆
-  register: 注册
-  code-login: 验证码登陆
-  qrcode-login: 二维码登陆
-  forget-password: 忘记密码
+  essentials:
+    login: 登陆
+    register: 注册
+    code-login: 验证码登陆
+    qrcode-login: 二维码登陆
+    forget-password: 忘记密码
+  vben:
+    about: 关于
+    document: 文档
+  outside:
+    page: 外部页面
+    embedded: 内嵌
+    external-link: 外链
+  nested:
+    page: 嵌套菜单
+    menu1: 菜单1
+    menu2: 菜单2
+    menu3: 菜单3
+    menu31: 菜单31
+    menu32: 菜单32
+    menu321: 菜单321
+  fallback:
+    page: 异常页面
 
 preference:
   preferences: 偏好设置