Add view

src/components/GlobalView.vue

@@ -0,0 +1,22 @@
+<template>
+    <layout-view>
+        <route-view />
+    </layout-view>
+</template>
+
+<script>
+  import LayoutView from './LayoutView'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "GlobalView",
+    components: {
+      LayoutView,
+      RouteView
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/LayoutContent.vue

@@ -1,32 +0,0 @@
-<template>
-    <a-layout-content class="layout-content">
-        <div style="margin: -24px -24px 0px;" v-if="!$route.meta.hideHeader">
-
-            <!-- pageHeader , route meta hideHeader:true on hide -->
-            <s-page-header></s-page-header>
-            <div class="content">
-                <s-route-view></s-route-view>
-            </div>
-        </div>
-
-        <s-route-view v-else></s-route-view>
-
-    </a-layout-content>
-</template>
-
-<script>
-  import PageHeader from './PageHeader'
-  import RouteView from './RouteView'
-
-  export default {
-    name: "LayoutContent",
-    components: {
-      "s-page-header": PageHeader,
-      "s-route-view": RouteView
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

src/views/Layout.vue → src/components/LayoutView.vue

@@ -1,13 +1,18 @@
 <template>
     <a-layout class="layout">
 
-        <s-sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></s-sider-menu>
+        <sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
 
         <a-layout>
             <!-- layout header -->
             <s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header>
             <!-- layout content -->
-            <s-layout-content></s-layout-content>
+            <a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
+                <page-content>
+                    <slot></slot>
+                </page-content>
+            </a-layout-content>
+
             <a-layout-footer style="padding: 0px">
                 <s-layout-footer />
             </a-layout-footer>
@@ -16,36 +21,36 @@
 </template>
 
 <script>
-import SiderMenu from '@/components/menu/SiderMenu'
-import LayoutHeader from '@/components/LayoutHeader'
-import LayoutContent from '@/components/LayoutContent'
-import LayoutFooter from '@/components/LayoutFooter'
-import { asyncRouterMap } from '@/router/index'
-
-export default {
-  name: "Layout",
-  components: {
-    "s-sider-menu": SiderMenu,
-    "s-layout-header": LayoutHeader,
-    "s-layout-content": LayoutContent,
-    "s-layout-footer": LayoutFooter
-  },
-  data() {
-    return {
-      collapsed: false,
-      menus: []
-    }
-  },
-  created () {
+  import SiderMenu from '@/components/menu/SiderMenu'
+  import LayoutHeader from '@/components/LayoutHeader'
+  import LayoutFooter from '@/components/LayoutFooter'
+  import PageContent from '@/components/PageContent'
+  import { asyncRouterMap } from '@/router/index'
+
+  export default {
+    name: "LayoutView",
+    components: {
+      SiderMenu,
+      PageContent,
+      "s-layout-header": LayoutHeader,
+      "s-layout-footer": LayoutFooter
+    },
+    data() {
+      return {
+        collapsed: false,
+        menus: []
+      }
+    },
+    created () {
       this.menus = asyncRouterMap
-  },
-  methods: {
-    toggle() {
-      this.collapsed = !this.collapsed;
     },
+    methods: {
+      toggle() {
+        this.collapsed = !this.collapsed;
+      },
 
+    }
   }
-}
 </script>
 
 <style lang="scss">
@@ -148,40 +153,6 @@ export default {
         .layout-content {
             margin: 24px 24px 0px;
             height: 100%;
-
-            .pageHeader {
-                background: #fff;
-                padding: 16px 32px 0;
-                border-bottom: 1px solid #e8e8e8;
-
-                .breadcrumb {
-                    margin-bottom: 16px;
-                }
-                .detail {
-                    display: flex;
-
-                    .main {
-                        width: 100%;
-                        .row {
-                            display: flex;
-                            width: 100%;
-                        }
-                    }
-                    .title {
-                        font-size: 20px;
-                        font-weight: 500;
-                    }
-                }
-                .title {
-                    margin-bottom: 16px;
-                    flex: auto;
-                }
-            }
-
-            .content {
-                margin: 24px 24px 0;
-            }
-
         }
 
     }

src/components/PageContent.vue

@@ -0,0 +1,62 @@
+<template>
+    <page-layout :desc="desc" :title="title" :link-list="linkList">
+        <div slot="extra" class="extra-img">
+            <img :src="extraImage"/>
+        </div>
+        <!-- keep-alive  -->
+        <route-view></route-view>
+    </page-layout>
+</template>
+
+<script>
+  import PageLayout from './PageLayout'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "PageContent",
+    components: {
+      RouteView,
+      PageLayout
+    },
+    data () {
+      return {
+        title: '',
+        desc: '',
+        linkList: [],
+        extraImage: ''
+      }
+    },
+    mounted () {
+      this.getPageHeaderInfo()
+    },
+    updated () {
+      this.getPageHeaderInfo()
+    },
+    methods: {
+      getPageHeaderInfo () {
+        // eslint-disable-next-line
+        console.log('route title:', this.$route.meta.title)
+
+        this.title = this.$route.meta.title
+        const content = this.$refs.content
+        if (content) {
+          this.desc = content.desc
+          this.linkList = content.linkList
+          this.extraImage = content.extraImage
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+    .extra-img{
+        margin-top: -60px;
+        text-align: center;
+        width: 195px;
+
+        img{
+            width: 100%;
+        }
+    }
+</style>

src/components/PageHeader.vue

@@ -1,14 +1,20 @@
 <template>
-    <div class="pageHeader">
+    <div class="page-header">
 
         <s-breadcrumb></s-breadcrumb>
 
         <div class="detail">
+            <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
             <div class="main">
                 <div class="row">
-                    <h1 class="title" v-text="$route.meta.title"></h1>
+                    <img v-if="logo" :src="logo" class="logo" />
+                    <h1 v-if="title" class="title">{{ title }}</h1>
+                    <div class="action"><slot name="action"></slot></div>
+                </div>
+                <div class="row">
+                    <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
+                    <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
                 </div>
-                <div class="row"></div>
             </div>
         </div>
     </div>
@@ -21,10 +27,88 @@
     name: "PageHeader",
     components: {
       "s-breadcrumb": Breadcrumb
+    },
+    props: {
+      title: {
+        type: String,
+        required: false
+      },
+      breadcrumb: {
+        type: Array,
+        required: false
+      },
+      logo: {
+        type: String,
+        required: false
+      },
+      avatar: {
+        type: String,
+        required: false
+      }
     }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+    .page-header {
+        background: #fff;
+        padding: 16px 32px 0;
+        border-bottom: 1px solid #e8e8e8;
+
+        .breadcrumb {
+            margin-bottom: 16px;
+        }
+
+        .detail {
+            display: flex;
 
+            .avatar {
+                flex: 0 1 72px;
+                margin: 0 24px 8px 0;
+                & > span {
+                    border-radius: 72px;
+                    display: block;
+                    width: 72px;
+                    height: 72px;
+                }
+            }
+
+            .main {
+                width: 100%;
+                flex: 0 1 auto;
+
+                .row {
+                    display: flex;
+                    width: 100%;
+                }
+
+                .title {
+                    font-size: 20px;
+                    font-weight: 500;
+                }
+                .logo {
+                    width: 28px;
+                    height: 28px;
+                    border-radius: 4px;
+                    margin-right: 16px;
+                }
+                .content {
+                    margin-bottom: 16px;
+                    flex: auto;
+                }
+                .extra {
+                    flex: 0 1 auto;
+                    margin-left: 88px;
+                    min-width: 242px;
+                    text-align: right;
+                }
+                .action {
+                    margin-left: 56px;
+                    min-width: 266px;
+                    flex: 0 1 auto;
+                    text-align: right;
+                }
+            }
+        }
+    }
 </style>

src/components/PageLayout.vue

@@ -0,0 +1,43 @@
+<template>
+    <div :style="!$route.meta.hideHeader ? 'margin: -24px -24px 0px;' : null">
+        <!-- pageHeader , route meta hideHeader:true on hide -->
+        <page-header v-if="!$route.meta.hideHeader" :title="title" :logo="logo" :avatar="avatar">
+            <slot slot="action" name="action"></slot>
+            <slot slot="content" name="headerContent"></slot>
+            <div slot="content" v-if="!this.$slots.headerContent && desc">
+                <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{ desc }}</p>
+                <div class="link">
+                    <template  v-for="(link, index) in linkList">
+                        <a :key="index" :href="link.href">
+                            <a-icon :type="link.icon" />{{ link.title }}</a>
+                    </template>
+                </div>
+            </div>
+            <slot slot="extra" name="extra"></slot>
+        </page-header>
+        <div v-if="!$route.meta.hideHeader" ref="content" class="content">
+            <slot></slot>
+        </div>
+        <slot v-else></slot>
+    </div>
+</template>
+
+<script>
+  import PageHeader from './PageHeader'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "LayoutContent",
+    components: {
+      PageHeader,
+      "s-route-view": RouteView
+    },
+    props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
+  }
+</script>
+
+<style scoped>
+    .content {
+        margin: 24px 24px 0;
+    }
+</style>

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Layout from '../views/Layout'
+import Layout from '../components/LayoutView'
 
 Vue.use(Router)
 /**
@@ -46,7 +46,7 @@ export const asyncRouterMap = [
     component: Layout,
     name: 'dashboard',
     redirect: '/dashboard/analysis',
-    meta: { title: 'dashboard', icon: 'dashboard' },
+    meta: { title: '仪表盘', icon: 'dashboard' },
     children: [
       {
         path: '/dashboard/analysis',
@@ -64,7 +64,7 @@ export const asyncRouterMap = [
         path: '/dashboard/workplace',
         name: 'Workplace',
         component: () => import('../views/dashboard/Workplace'),
-        meta: { title: '工作台', hideHeader: true }
+        meta: { title: '工作台' }
       }
     ]
   },