feat(projects): 1.0 beta

src/components/common/exception-base.vue

@@ -1,31 +1,41 @@
-<template>
-  <div class="flex-col-center gap-24px min-h-520px wh-full overflow-hidden">
-    <div class="flex text-400px text-primary">
-      <icon-local-no-permission v-if="type === '403'" />
-      <icon-local-not-found v-if="type === '404'" />
-      <icon-local-service-error v-if="type === '500'" />
-    </div>
-    <router-link :to="{ name: routeHomePath }">
-      <n-button type="primary">回到首页</n-button>
-    </router-link>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { routeName } from '@/router';
+import { computed } from 'vue';
+import { $t } from '@/locales';
 
 defineOptions({ name: 'ExceptionBase' });
 
 type ExceptionType = '403' | '404' | '500';
 
 interface Props {
-  /** 异常类型 403 404 500 */
+  /**
+   * exception type
+   * - 403: no permission
+   * - 404: not found
+   * - 500: service error
+   */
   type: ExceptionType;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
-const routeHomePath = routeName('root');
+const iconMap: Record<ExceptionType, string> = {
+  '403': 'no-permission',
+  '404': 'not-found',
+  '500': 'service-error'
+};
+
+const icon = computed(() => iconMap[props.type]);
 </script>
 
+<template>
+  <div class="flex-vertical-center gap-24px min-h-520px wh-full overflow-hidden">
+    <div class="flex text-400px text-primary">
+      <SvgIcon :local-icon="icon" />
+    </div>
+    <RouterLink to="/">
+      <NButton type="primary">{{ $t('common.backToHome') }}</NButton>
+    </RouterLink>
+  </div>
+</template>
+
 <style scoped></style>