1. init 中间框架样式调整

src/App.vue

@@ -5,4 +5,7 @@
 </template>
 
 <style lang="less">
+    #app {
+        height: 100%;
+    }
 </style>

src/router/index.ts

 import Vue from 'vue';
 import VueRouter, { RouteConfig } from 'vue-router';
+import { Dictionary } from "vue-router/types/router";
 import { Direction } from './direction';
 import { MetaHeader } from './meta-header';
 import { setCompatibleUrl } from './compatible-url';
@@ -65,6 +66,28 @@ const routes: Array<RouteConfig> = [
   }
 ];
 
+const mapping: { [key: number]: { name: string } } = {};
+const map = new Map<string, Direction>([]);
+
+function rebuildRoutes2Mapping(routes: RouteConfig[]) {
+  for (const item of routes) {
+    if (item.meta) {
+      const meta = item.meta as { direction: Direction };
+      if (!item.name) {
+        item.name = Direction[meta.direction];
+      }
+      mapping[meta.direction] = { name: item.name };
+      map.set(item.name, meta.direction);
+    }
+
+    if (item.children) {
+      rebuildRoutes2Mapping(item.children);
+    }
+  }
+}
+
+rebuildRoutes2Mapping(routes);
+
 const redirectPath = setCompatibleUrl(routes);
 routes.unshift(...redirectPath);
 
@@ -74,4 +97,56 @@ const router = new VueRouter({
   routes
 });
 
+const navigation = (vue: Vue, direction: Direction, query?: Dictionary<string>, params?: Dictionary<string>, inNewTab?: boolean) => {
+  const target = mapping[direction];
+  if (!target) {
+    throw new Error(`Canot find a route with Direction=${Direction[direction]}`);
+  }
+  const current = vue.$router.currentRoute.name;
+  if (current === target.name) {
+    return;
+  }
+  const p = { name: target.name, params: params, query: query, };
+
+  // if (direction === Direction.Entry) {
+  //     const u = vue.$router.resolve(p);
+  //     const l = `${config.api.root}/${_.trimStart(u.href, '/')}`;
+  //     window.location.href = l;
+  //     return;
+  // }
+
+  if (inNewTab) {
+    const url = vue.$router.resolve(p);
+    return window.open(url.href, '_blank');
+  }
+  vue.$router.push(p);
+};
+
+Vue.prototype.go = async function(direction: Direction, params?: Dictionary<string>, query?: Dictionary<string>) {
+  const vue = this as Vue;
+  navigation(vue, direction, query, params);
+};
+
+Vue.prototype.openDirection = async function(direction: Direction, params?: Dictionary<string>, query?: Dictionary<string>) {
+  const vue = this as Vue;
+  navigation(vue, direction, query, params, true);
+};
+
+Vue.prototype.getCurrentDirection = function() {
+  const vue = this as Vue;
+  const name = vue.$router.currentRoute.name;
+  if (name) {
+    return map.get(name);
+  }
+  const pathname = _.trimEnd(window.location.pathname, '/');
+  if (pathname) {
+    const t = _.find(routes, i => i.path === pathname);
+    if (t && t.meta) {
+      return t.meta.direction as Direction;
+    }
+  }
+  return Direction.Home;
+};
+
 export default router;
+export { Direction };

src/views/pages/aside-panels/aside-panels.vue

 <template>
-    <div>
-        <el-collapse>
+    <div class="aside-panels-container">
+        <el-collapse class="aside-collapse">
             <el-collapse-item
                 :name="item.title"
                 v-for="(item, index) in items"
@@ -29,4 +29,22 @@
 
 <style lang="less" scoped>
     @import "~@/css/variables.less";
+    .aside-panels-container {
+        width: 240px;
+
+        /deep/ .aside-collapse {
+            height: 100%;
+            background-color: #fff;
+
+            .el-collapse-item__header {
+                border-top: 0px;
+                border-bottom: 0px;
+            }
+
+            .el-collapse-item__wrap {
+                border-top: 0px;
+                border-bottom: 0px;
+            }
+        }
+    }
 </style>

src/views/pages/common-header/common-header.vue

+<template>
+    <div
+        class="
+            common-header-container
+            d-flex
+            justify-content-between
+            align-items-center
+        "
+    >
+        <div class="logo-container" @click="goHome">
+            <span class="logo-name1">亲亲通行证</span>
+            <span class="dividline">|</span>
+            <span class="logo-name2">企业管理后台</span>
+        </div>
+        <div>头像</div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Direction } from "@/router";
+    import { Component, Vue } from "vue-property-decorator";
+
+    @Component({ components: {} })
+    export default class CommonHeader extends Vue {
+        private goHome() {
+            this.go(Direction.Home);
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    @import "~@/css/variables.less";
+    .common-header-container {
+        height: 64px;
+        width: 100%;
+        padding-left: 40px;
+        padding-right: 40px;
+        background-color: #fff;
+
+        .logo-container {
+            cursor: pointer;
+            user-select: none;
+            height: 20px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #8f95b3;
+
+            .logo-name1 {
+                height: 25px;
+                font-size: 18px;
+                font-weight: 800;
+                color: #077aec;
+            }
+
+            .dividline {
+                padding: 0 10px;
+            }
+        }
+    }
+</style>

src/views/pages/main.vue

 <template>
-    <div class="manager-container d-flex">
-        <AsidePanels></AsidePanels>
-        <router-view></router-view>
+    <div class="manager-container d-flex flex-column">
+        <div class="flex-none">
+            <CommonHeader></CommonHeader>
+        </div>
+        <div class="d-flex flex-fill">
+            <AsidePanels class="flex-none"></AsidePanels>
+            <div
+                class="
+                    main-container
+                    flex-fill
+                    d-flex
+                    align-items-center
+                    justify-content-center
+                "
+            >
+                <router-view class="router-page flex-fill"></router-view>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
     import { Component, Vue } from "vue-property-decorator";
     import AsidePanels from "@/views/pages/aside-panels/aside-panels.vue";
+    import CommonHeader from "@/views/pages/common-header/common-header.vue";
 
-    @Component({ components: { AsidePanels } })
+    @Component({ components: { AsidePanels, CommonHeader } })
     export default class Main extends Vue {}
 </script>
 
 <style lang="less" scoped>
     @import "~@/css/variables.less";
+    .manager-container {
+        height: 100%;
+        min-width: 1200px;
+
+        .main-container {
+            background-color: #f5f6fa;
+            padding: 24px;
+
+            .router-page {
+                height: 100%;
+                max-width: 1448px;
+                background-color: #fff;
+            }
+        }
+    }
 </style>

src/vue.d.ts

+import { VNode } from "vue";
+import { Dictionary } from "vue-router/types/router";
+import { Direction } from "./router";
+import { UniplatSdk } from "uniplat-sdk";
+
+declare module "vue/types/vue" {
+    interface NewDirectionOption {
+        openInNewTab?: boolean;
+        params?: Dictionary<string | number>;
+        query?: Dictionary<string | number>;
+    }
+
+    interface Vue {
+        sdk: UniplatSdk;
+        beforeCreate?(): void;
+        created?(): void;
+        beforeMount?(): void;
+        mounted?(): void;
+        beforeDestroy?(): void;
+        destroyed?(): void;
+        beforeUpdate?(): void;
+        updated?(): void;
+        activated?(): void;
+        deactivated?(): void;
+        render?(createElement: CreateElement): VNode;
+
+        $once(event: "hook:beforeDestroy", callback: Function): this;
+        /** 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。 */
+        $once(event: string | string[], callback: Function): this;
+
+        go(direction: Direction, params?: { [key: string]: any }, query?: { [key: string]: any }): void;
+
+        openDirection(direction: Direction, params?: { [key: string]: any }, query?: { [key: string]: any }): void;
+
+        getCurrentDirection(): Direction;
+
+        registerPostMessageEvent(callBack: (e: { data: any }) => void | Promise<void>): void;
+
+        attachDocumentEvent<K extends keyof HTMLElementEventMap>(target: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): this;
+        attachDocumentEvent(target: HTMLElement, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): this;
+        attachDocumentEvent<K extends keyof ElementEventMap>(target: Element, type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): this;
+        attachDocumentEvent(target: Element, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): this;
+        attachDocumentEvent<K extends keyof DocumentEventMap>(target: Document, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): this;
+        attachDocumentEvent(target: Document, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): this;
+        attachDocumentEvent(target: HTMLElement | Element | Document, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): this;
+    }
+}