feat: update exception pages (#10)

src/layouts/BasicLayout.vue

@@ -22,7 +22,7 @@
           ></a-icon>
           <Header />
         </a-layout-header>
-        <a-layout-content style="margin: 0 16px">
+        <a-layout-content style="margin: 24px 24px 0">
           <router-view></router-view>
         </a-layout-content>
         <a-layout-footer style="text-align: center">

src/router.js

@@ -4,8 +4,6 @@ import findLast from "lodash/findLast";
 import { notification } from "ant-design-vue";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
-import NotFound from "./views/404";
-import Forbidden from "./views/403";
 import { check, isLogin } from "./utils/auth";
 
 Vue.use(Router);
@@ -111,20 +109,39 @@ const router = new Router({
               ]
             }
           ]
+        },
+        // Exception
+        {
+          path: "/exception",
+          name: "exception",
+          component: { render: h => h("router-view") },
+          redirect: "/exception/403",
+          meta: { title: "异常页", icon: "warning", authority: ["admin"] },
+          children: [
+            {
+              path: "/exception/403",
+              name: "403",
+              component: () =>
+                import(/* webpackChunkName: "exception" */ "@/views/Exception/403"),
+              meta: { title: "403" }
+            },
+            {
+              path: "/exception/404",
+              name: "404",
+              component: () =>
+                import(/* webpackChunkName: "exception" */ "@/views/Exception/404"),
+              meta: { title: "404" }
+            },
+            {
+              path: "/exception/500",
+              name: "500",
+              component: () =>
+                import(/* webpackChunkName: "exception" */ "@/views/Exception/500"),
+              meta: { title: "500" }
+            }
+          ]
         }
       ]
-    },
-    {
-      path: "/403",
-      name: "403",
-      hideInMenu: true,
-      component: Forbidden
-    },
-    {
-      path: "*",
-      name: "404",
-      hideInMenu: true,
-      component: NotFound
     }
   ]
 });

src/views/403.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>403</div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style></style>

src/views/404.vue

@@ -1,17 +0,0 @@
-<template>
-  <div style="text-align: center;">
-    <IconFont type="icon-icon-404" style="font-size: 100px" />
-    <Logo />
-  </div>
-</template>
-
-<script>
-import Logo from "@/assets/logo.svg";
-export default {
-  components: {
-    Logo
-  }
-};
-</script>
-
-<style></style>

src/views/Exception/403.vue

@@ -0,0 +1,25 @@
+<template>
+  <exception :model="model"></exception>
+</template>
+
+<script>
+import Exception from "./Exception";
+
+export default {
+  components: {
+    Exception
+  },
+  data() {
+    return {
+      model: {
+        src:
+          "https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg",
+        title: "403",
+        desc: "抱歉，你无权访问该页面"
+      }
+    };
+  }
+};
+</script>
+
+<style></style>

src/views/Exception/404.vue

@@ -0,0 +1,25 @@
+<template>
+  <exception :model="model"></exception>
+</template>
+
+<script>
+import Exception from "./Exception";
+
+export default {
+  components: {
+    Exception
+  },
+  data() {
+    return {
+      model: {
+        src:
+          "https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg",
+        title: "404",
+        desc: "抱歉，你访问的页面不存在"
+      }
+    };
+  }
+};
+</script>
+
+<style></style>

src/views/Exception/500.vue

@@ -0,0 +1,25 @@
+<template>
+  <exception :model="model"></exception>
+</template>
+
+<script>
+import Exception from "./Exception";
+
+export default {
+  components: {
+    Exception
+  },
+  data() {
+    return {
+      model: {
+        src:
+          "https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg",
+        title: "500",
+        desc: "抱歉，服务器出错了"
+      }
+    };
+  }
+};
+</script>
+
+<style></style>

src/views/Exception/Exception.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="exception">
+    <img :src="model.src" class="exception-img" />
+
+    <div class="exception-content">
+      <h1>{{ model.title }}</h1>
+      <p class="desc">{{ model.desc }}</p>
+      <div class="action">
+        <a-button type="primary" @click="goHome">返回首页</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    model: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  methods: {
+    goHome() {
+      this.$router.push("/");
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.exception {
+  height: 80%;
+  display: flex;
+  align-items: center;
+
+  &-img {
+    width: 100%;
+    max-width: 430px;
+    height: 360px;
+    margin: 0 130px 0 60px;
+  }
+
+  &-content {
+    h1 {
+      margin-bottom: 24px;
+      font-size: 72px;
+      color: #434e59;
+      font-weight: 600;
+    }
+
+    .desc {
+      margin-bottom: 16px;
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+}
+</style>

vue.config.js

@@ -30,7 +30,7 @@ module.exports = {
     plugins: [themePlugin, new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
     resolve: {
       alias: {
-        "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
+        // "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
       }
     }
   },
@@ -45,6 +45,7 @@ module.exports = {
     svgRule.use("vue-svg-loader").loader("vue-svg-loader");
   },
   devServer: {
+    open: true,
     proxy: {
       "/api": {
         target: "http://localhost:3000",