feat(views): ✨ error

- 添加403、404、500异常页面

src/components/SvgIcon/index.vue

@@ -47,6 +47,7 @@
   }
 
   .svg-icon {
+    display: block;
     height: 1em;
     line-height: 1em;
     font-size: 1em;

src/locales/en/modules/errorPage.ts

@@ -0,0 +1,17 @@
+const errorPage = {
+  error403: {
+    title: 'No Access',
+    description: 'Sorry, access to this resource on the server is denied.',
+  },
+  error404: {
+    title: 'Page Not Found',
+    description: "Sorry, the page you're looking for cannot be accessed.",
+  },
+  error500: {
+    title: 'the server is reporting an error.',
+    description: 'An unexpected error occurred and your request could not be completed.',
+  },
+  back: 'Back Home',
+};
+
+export default errorPage;

src/locales/en/modules/route.ts

@@ -33,7 +33,9 @@ const route = {
     testPermissionsPage2: 'Test Permissions',
     detailsPage: 'DetailsPage',
     error: 'error',
+    error403: '403',
     error404: '404',
+    error500: '500',
     thirdParty: 'Third party',
     nested: 'Nested Route',
     nested1: 'Route1',

src/locales/zh-ch/modules/errorPage.ts

@@ -0,0 +1,17 @@
+const errorPage = {
+  error403: {
+    title: '禁止访问',
+    description: '抱歉，访问服务器上的此资源被拒绝。',
+  },
+  error404: {
+    title: '找不到网页',
+    description: '抱歉，您要查找的页面无法访问。',
+  },
+  error500: {
+    title: '服务器报告错误。',
+    description: '抱歉，发生意外错误，无法完成您的请求。',
+  },
+  back: '返回首页',
+};
+
+export default errorPage;

src/locales/zh-ch/modules/route.ts

@@ -32,8 +32,10 @@ const route = {
     testPermissionsPage1: 'Admin权限测试页面',
     testPermissionsPage2: 'Test权限测试页面',
     detailsPage: '详情页',
-    error: 'error',
+    error: '异常页面',
+    error403: '403',
     error404: '404',
+    error500: '500',
     thirdParty: '第三方',
     nested: '嵌套路由',
     nested1: '路由1',

src/router/modules/error/index.ts

@@ -17,12 +17,24 @@ const error: AppRouteRecordRaw[] = [
       whiteList: true,
     },
     children: [
+      {
+        path: '403',
+        name: '403',
+        component: () => import('@/views/error/403.vue'),
+        meta: { title: t('route.pathName.error403') },
+      },
       {
         path: '404',
         name: '404',
         component: () => import('@/views/error/404.vue'),
         meta: { title: t('route.pathName.error404') },
       },
+      {
+        path: '500',
+        name: '500',
+        component: () => import('@/views/error/500.vue'),
+        meta: { title: t('route.pathName.error500') },
+      },
     ],
   },
 ];