add：添加布局组件

src/app-register.ts

@@ -112,6 +112,9 @@ import AppColorPicker from  './components/app-color-picker/app-color-picker.vue'
 import AppScrollContainer from './components/layout-element/container/app-scroll-container/app-scroll-container.vue';
 import AppSimpleFlexContainer from './components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue';
 import AppStandardContainer from './components/layout-element/container/app-standard-container/app-standard-container.vue';
+import AppTabPanel from './components/layout-element/container/app-tab-panel/app-tab-panel.vue';
+import AppTabPage from './components/layout-element/container/app-tab-page/app-tab-page.vue';
+import AppNavPos from './components/layout-element/container/app-nav-pos/app-nav-pos.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -238,5 +241,8 @@ export const AppComponents = {
         v.component('app-scroll-container', AppScrollContainer);
         v.component('app-simpleflex-container',AppSimpleFlexContainer);
         v.component('app-standard-container',AppStandardContainer);
+        v.component('app-tab-panel', AppTabPanel);
+        v.component('app-tab-page', AppTabPage);
+        v.component('app-nav-pos', AppNavPos);
     },
 };
\ No newline at end of file

src/components/layout-element/container/app-nav-pos/app-nav-pos.vue

+<template>
+    <div class="app-nav-pos">
+        <template v-if="dynaNavMode === 'ROUTEVIEW'">
+            <template v-if="enableCache">
+                <app-keep-alive :routerList="routerList">
+                    <router-view :key="routerViewKey"></router-view>
+                </app-keep-alive>
+            </template>
+            <router-view v-else :key="routerViewKey"></router-view>
+        </template>
+        <component
+            class="view-container2"
+            v-if="navData && navData.navView"
+            :is="navData.navView"
+            :viewDefaultUsage="false"
+            :viewdata="JSON.stringify(navData.srfnavdata.context)"
+            :viewparam="JSON.stringify(navData.srfnavdata.viewparmas)"
+            @viewdataschange="handleViewEvent"
+            @viewLoaded="handleViewEvent"
+            @viewstatechange="handleViewEvent">
+        </component>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+
+@Component({})
+export default class AppNavPos extends Vue {
+    /**
+     * 动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
+     *
+     * @public
+     * @type {'DYNAMICCOMP' | 'ROUTEVIEW'}
+     * @memberof AppNavPos
+     */
+    @Prop({ default: "ROUTEVIEW" }) public dynaNavMode?: "DYNAMICCOMP" | "ROUTEVIEW";
+
+    /**
+     * 是否启用动态缓存
+     *
+     * @type {boolean}
+     * @memberof AppNavPos
+     */
+    @Prop({ default: false }) public enableCache?: boolean;
+
+    /**
+     * 导航数据
+     *
+     * @type {*}
+     * @memberof AppNavPos
+     */
+    @Prop() public navData?: any;
+
+    /**
+     * 路由列表
+     *
+     * @memberof AppNavPos
+     */
+    get routerList() {
+        return this.$store.state.historyPathList;
+    }
+
+    /**
+     * 路由键值
+     *
+     * @memberof AppNavPos
+     */
+    get routerViewKey() {
+        let _this: any = this;
+        return _this.$route.fullPath;
+    }
+
+    /**
+     * 执行视图事件
+     *
+     * @param {*} args
+     * @memberof AppNavPos
+     */
+    public handleViewEvent(args: any) {
+        console.log(args);
+    }
+
+}
+</script>

src/components/layout-element/container/app-tab-page/app-tab-page.vue

+<template>
+    <TabPane :label="currentModelDetail.caption" :name="currentModelDetail.name" tab="tabpanel1" :class="curClassName">
+        <template v-if="containerModel.length > 0">
+            <template v-for="name of containerModel">
+                <slot :name="name"></slot>
+            </template>
+        </template>
+    </TabPane>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class AppTabPanel extends Vue {
+    /**
+    * 名称
+    *
+    * @type {string}
+    * @memberof AppTabPanel
+    */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {string}
+     * @memberof AppTabPanel
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 插槽对象
+     *
+     * @memberof AppTabPanel
+     */
+    public containerModel: any[] = [];
+
+    /**
+     * 当前模型
+     *
+     * @memberof AppTabPanel
+     */
+    public currentModelDetail: any;
+
+    /**
+     * 组件初始化
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public created() {
+        this.init();
+    }
+
+    /**
+     * 初始化子项
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public init() {
+        this.currentModelDetail = this.layoutModelDetails[this.name];
+        if (this.currentModelDetail && this.currentModelDetail.details && this.currentModelDetail.details.length > 0) {
+            this.currentModelDetail.details.forEach((key: string) => {
+                this.containerModel.push(key);
+            })
+        }
+    }
+
+    /**
+    * 当前容器样式类
+    */
+    get curClassName() {
+        return `app-tab-page ${this.name}`;
+    }
+
+}
+</script>
+<style lang='less'>
+</style>
\ No newline at end of file

src/components/layout-element/container/app-tab-panel/app-tab-panel.vue

+<template>
+    <Tabs v-model="activeName" @on-click="handleClick" :name="name" :class="curClassName">
+        <template v-if="containerModel.length > 0">
+            <template v-for="name of containerModel">
+                <slot :name="name"></slot>
+            </template>
+        </template>
+    </Tabs>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class AppTabPanel extends Vue {
+    /**
+    * 名称
+    *
+    * @type {string}
+    * @memberof AppTabPanel
+    */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {string}
+     * @memberof AppTabPanel
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 插槽对象
+     *
+     * @memberof AppTabPanel
+     */
+    public containerModel: any[] = [];
+
+    /**
+     * 当前激活项
+     *
+     * @memberof AppTabPanel
+     */
+    public activeName: string = '';
+
+    /**
+     * 组件初始化
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public created() {
+        this.initTabPage();
+    }
+
+    /**
+     * 初始化分页
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public initTabPage() {
+        const curLayoutModel = this.layoutModelDetails[this.name];
+        if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
+            curLayoutModel.details.forEach((key: string) => {
+                this.containerModel.push(key);
+            })
+        }
+        this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : '';
+        this.layoutModelDetails[this.name].clickPage(this.activeName);
+    }
+
+    /**
+     * 处理分页点击
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public handleClick(tab: any) {
+        this.layoutModelDetails[this.name].clickPage(tab);
+    }
+
+    /**
+    * 当前容器样式类
+    */
+    get curClassName() {
+        return `app-tab-panel ${this.name}`;
+    }
+}
+</script>
+<style lang='less'>
+</style>
\ No newline at end of file