0.0.4

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/dashboard/analysis">dashboard</router-link> |
-      <router-link to="/form">form</router-link>
-    </div>
     <router-view />
   </div>
 </template>

src/components/SettingDrawer/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <a-drawer
+      placement="right"
+      :closable="false"
+      @close="onClose"
+      :visible="visible"
+      width="300px"
+    >
+      <template v-slot:handle>
+        <div class="handle" @click="visible = !visible">
+          <a-icon :type="visible ? 'close' : 'setting'"></a-icon>
+        </div>
+      </template>
+      <div>
+        <div>
+          <h2>整体风格定制</h2>
+          <a-radio-group
+            :value="$route.query.navTheme || 'dark'"
+            @change="e => handleSettingChange('navTheme', e.target.value)"
+          >
+            <a-radio value="dark">黑色</a-radio>
+            <a-radio value="light">白色</a-radio>
+          </a-radio-group>
+          <h2>导航模式</h2>
+          <a-radio-group
+            :value="$route.query.navLayout || 'left'"
+            @change="e => handleSettingChange('navLayout', e.target.value)"
+          >
+            <a-radio value="left">左侧</a-radio>
+            <a-radio value="top">顶部</a-radio>
+          </a-radio-group>
+        </div>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false
+    };
+  },
+  methods: {
+    onClose() {
+      this.visible = false;
+    },
+    handleSettingChange(type, value) {
+      this.$router.push({ query: { ...this.$route.query, [type]: value } });
+    }
+  }
+};
+</script>
+<style scoped>
+.handle {
+  position: absolute;
+  top: 240px;
+  right: 300px;
+  width: 48px;
+  height: 48px;
+  background: #1890ff;
+  color: #fff;
+  font-size: 20px;
+  text-align: center;
+  line-height: 48px;
+  border-radius: 3px 0 0 3px;
+}
+</style>

src/layouts/BasicLayout.vue

@@ -1,9 +1,34 @@
 <template>
-  <div>
-    <Header />
-    <SiderMenu />
-    <router-view></router-view>
-    <Footer />
+  <div :class="[`nav-theme-${navTheme}`, `nav-layout-${navLayout}`]">
+    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
+      <a-layout-sider
+        v-if="navLayout === 'left'"
+        :theme="navTheme"
+        :trigger="null"
+        collapsible
+        v-model="collapsed"
+      >
+        <div class="logo">Ant Design Vue Pro</div>
+        <SiderMenu />
+      </a-layout-sider>
+      <a-layout>
+        <a-layout-header style="background: #fff; padding: 0">
+          <a-icon
+            class="trigger"
+            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+            @click="collapsed = !collapsed"
+          ></a-icon>
+          <Header />
+        </a-layout-header>
+        <a-layout-content style="margin: 0 16px">
+          <router-view></router-view>
+        </a-layout-content>
+        <a-layout-footer style="text-align: center">
+          <Footer />
+        </a-layout-footer>
+      </a-layout>
+    </a-layout>
+    <SettingDrawer />
   </div>
 </template>
 
@@ -11,13 +36,46 @@
 import Header from "./Header";
 import Footer from "./Footer";
 import SiderMenu from "./SiderMenu";
+import SettingDrawer from "../components/SettingDrawer";
 export default {
+  data() {
+    return {
+      collapsed: false
+    };
+  },
+  computed: {
+    navTheme() {
+      return this.$route.query.navTheme || "dark";
+    },
+    navLayout() {
+      return this.$route.query.navLayout || "left";
+    }
+  },
   components: {
     Header,
     Footer,
-    SiderMenu
+    SiderMenu,
+    SettingDrawer
   }
 };
 </script>
 
-<style></style>
+<style scoped>
+.trigger {
+  padding: 0 20px;
+  line-height: 64px;
+  font-size: 20px;
+}
+.trigger:hover {
+  background: #eeeeee;
+}
+.logo {
+  height: 64px;
+  line-height: 64px;
+  text-align: center;
+  overflow: hidden;
+}
+.nav-theme-dark >>> .logo {
+  color: #ffffff;
+}
+</style>

src/layouts/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>Footer</div>
+  <div>Ant Design Vue Pro ©2019 Created by GeekTime</div>
 </template>
 
 <script>

src/layouts/Header.vue

@@ -1,9 +1,13 @@
 <template>
-  <div>Header</div>
+  <div class="header">Header</div>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style></style>
+<style scoped>
+.header {
+  float: right;
+}
+</style>

src/main.js

@@ -2,11 +2,15 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import { Button } from "ant-design-vue";
+import { Button, Layout, Icon, Drawer, Radio } from "ant-design-vue";
 
 Vue.config.productionTip = false;
 
 Vue.use(Button);
+Vue.use(Layout);
+Vue.use(Icon);
+Vue.use(Drawer);
+Vue.use(Radio);
 
 new Vue({
   router,

src/router.js

@@ -110,8 +110,10 @@ const router = new Router({
   ]
 });
 
-router.beforeEach((to, form, next) => {
-  NProgress.start();
+router.beforeEach((to, from, next) => {
+  if (to.path !== from.path) {
+    NProgress.start();
+  }
   next();
 });