Merge branch 'pr/14'

public/index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <title>ant-design-vue-pro</title>
 </head>
 

src/App.vue

@@ -25,4 +25,8 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+#app {
+  height: 100%;
+}
+</style>

src/assets/logo.svg

@@ -1,32 +1,29 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#29CDFF" offset="0%"></stop>
-            <stop stop-color="#148EFF" offset="37.8600687%"></stop>
-            <stop stop-color="#0A60FF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
-            <stop stop-color="#29CDFF" offset="0%"></stop>
-            <stop stop-color="#0F78FF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
-            <stop stop-color="#FA8E7D" offset="0%"></stop>
-            <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
-            <stop stop-color="#F51D2C" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group" transform="translate(19.000000, 9.000000)">
-            <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
-            <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-            <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
-        </g>
-        <g id="Group-Copy" transform="translate(19.000000, 9.000000)">
-            <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
-            <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-            <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+  <title>Vue</title>
+  <desc>Created with Sketch.</desc>
+  <defs>
+    <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
+      <stop stop-color="#29CDFF" offset="0%"></stop>
+      <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+      <stop stop-color="#0A60FF" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
+      <stop stop-color="#29CDFF" offset="0%"></stop>
+      <stop stop-color="#0F78FF" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
+      <stop stop-color="#FA8E7D" offset="0%"></stop>
+      <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+      <stop stop-color="#F51D2C" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Group" transform="translate(19.000000, 9.000000)">
+      <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
+      <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+      <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
     </g>
+  </g>
 </svg>

src/layouts/BasicLayout.vue

@@ -9,8 +9,11 @@
         v-model="collapsed"
         width="256px"
       >
-        <div class="logo">Ant Design Vue Pro</div>
-        <SiderMenu :theme="navTheme" />
+        <div class="logo">
+          <logo></logo>
+          <h1>Ant Design Pro</h1>
+        </div>
+        <SiderMenu :theme="navTheme" :collapsed="collapsed" />
       </a-layout-sider>
       <a-layout>
         <a-layout-header style="background: #fff; padding: 0">
@@ -41,6 +44,8 @@ import Header from "./Header";
 import Footer from "./Footer";
 import SiderMenu from "./SiderMenu";
 import SettingDrawer from "../components/SettingDrawer";
+import Logo from "@/assets/logo.svg";
+
 export default {
   data() {
     return {
@@ -59,27 +64,53 @@ export default {
     Header,
     Footer,
     SiderMenu,
-    SettingDrawer
+    SettingDrawer,
+    Logo
   }
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .trigger {
   padding: 0 20px;
   line-height: 64px;
   font-size: 20px;
+
+  &:hover {
+    background: #eeeeee;
+  }
 }
-.trigger:hover {
-  background: #eeeeee;
-}
+
 .logo {
+  position: relative;
   height: 64px;
-  line-height: 64px;
-  text-align: center;
+  padding-left: 24px;
   overflow: hidden;
+  line-height: 64px;
+  background: #002140;
+
+  svg {
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  h1 {
+    display: inline-block;
+    margin: 0 0 0 12px;
+    font-size: 20px;
+    font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font-weight: 600;
+    vertical-align: middle;
+  }
 }
-.nav-theme-dark >>> .logo {
-  color: #ffffff;
+
+.nav-theme-dark {
+  /deep/ .logo {
+    h1 {
+      color: #ffffff;
+    }
+  }
 }
 </style>

src/layouts/SiderMenu.vue

@@ -33,6 +33,10 @@ export default {
     theme: {
       type: String,
       default: "dark"
+    },
+    collapsed: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -42,6 +46,14 @@ export default {
     "$route.path": function(val) {
       this.selectedKeys = this.selectedKeysMap[val];
       this.openKeys = this.collapsed ? [] : this.openKeysMap[val];
+    },
+    collapsed(val) {
+      if (val) {
+        this.cacheOpenKeys = this.openKeys;
+        this.openKeys = [];
+      } else {
+        this.openKeys = this.cacheOpenKeys;
+      }
     }
   },
   data() {
@@ -49,7 +61,6 @@ export default {
     this.openKeysMap = {};
     const menuData = this.getMenuData(this.$router.options.routes);
     return {
-      collapsed: false,
       menuData,
       selectedKeys: this.selectedKeysMap[this.$route.path],
       openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path]

src/router.js

@@ -120,21 +120,21 @@ const router = new Router({
           children: [
             {
               path: "/exception/403",
-              name: "403",
+              name: "exception403",
               component: () =>
                 import(/* webpackChunkName: "exception" */ "@/views/Exception/403"),
               meta: { title: "403" }
             },
             {
               path: "/exception/404",
-              name: "404",
+              name: "exception404",
               component: () =>
                 import(/* webpackChunkName: "exception" */ "@/views/Exception/404"),
               meta: { title: "404" }
             },
             {
               path: "/exception/500",
-              name: "500",
+              name: "exception500",
               component: () =>
                 import(/* webpackChunkName: "exception" */ "@/views/Exception/500"),
               meta: { title: "500" }
@@ -142,6 +142,20 @@ const router = new Router({
           ]
         }
       ]
+    },
+    {
+      path: "/403",
+      name: "403",
+      hideInMenu: true,
+      component: () =>
+        import(/* webpackChunkName: "exception" */ "@/views/Exception/403")
+    },
+    {
+      path: "*",
+      name: "404",
+      hideInMenu: true,
+      component: () =>
+        import(/* webpackChunkName: "exception" */ "@/views/Exception/404")
     }
   ]
 });

src/views/Exception/Exception.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="exception">
-    <img :src="model.src" class="exception-img" />
+    <div class="exception-img-block">
+      <div
+        class="img"
+        :style="{
+          'background-image': `url(${model.src})`
+        }"
+      ></div>
+    </div>
 
     <div class="exception-content">
       <h1>{{ model.title }}</h1>
@@ -29,19 +36,30 @@ export default {
 </script>
 <style lang="less" scoped>
 .exception {
-  height: 80%;
   display: flex;
   align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  &-img-block {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 100px;
 
-  &-img {
-    width: 100%;
-    max-width: 430px;
-    height: 360px;
-    margin: 0 130px 0 60px;
+    .img {
+      float: right;
+      width: 100%;
+      max-width: 430px;
+      height: 360px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: contain;
+    }
   }
 
   &-content {
     h1 {
+      line-height: 72px;
       margin-bottom: 24px;
       font-size: 72px;
       color: #434e59;
@@ -55,4 +73,25 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 576px) {
+  .exception {
+    display: block;
+    text-align: center;
+
+    &-img-block {
+      overflow: hidden;
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .exception {
+    &-img-block {
+      margin-bottom: -24px;
+    }
+  }
+}
 </style>