add：新增布局组件

src/app-register.ts

@@ -131,6 +131,12 @@ import AppRawItemVideo from './components/layout-element/media/app-rawitem-video
 import AppPresetQrCode from './components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue';
 import AppPresetSwitch from './components/layout-element/interactive/app-preset-switch/app-preset-switch.vue';
 import AppPresetTextInput from './components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue';
+import AppIndexDefaultMenu from './components/layout-element/index/app-index-default-menu/app-index-default-menu.vue';
+import AppIndexLogout from './components/layout-element/index/app-index-logout/app-index-logout.vue';
+import AppIndexNavTabs from './components/layout-element/index/app-index-nav-tabs/app-index-nav-tabs.vue';
+import AppIndexOrgSelect from './components/layout-element/index/app-index-org-select/app-index-org-select.vue';
+import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue';
+import AppCtrlPos from './components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -276,5 +282,11 @@ export const AppComponents = {
         v.component('app-preset-qr-code',AppPresetQrCode);
         v.component('app-preset-switch',AppPresetSwitch);
         v.component('app-preset-text-input',AppPresetTextInput);
+        v.component('app-index-default-menu', AppIndexDefaultMenu);
+        v.component('app-index-logout', AppIndexLogout);
+        v.component('app-index-nav-tabs', AppIndexNavTabs);
+        v.component('app-index-org-select', AppIndexOrgSelect);
+        v.component('app-index-user-info', AppIndexUserInfo);
+        v.component('app-ctrl-pos', AppCtrlPos);
     },
 };
\ No newline at end of file

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

 <template>
-    <div class="app-nav-pos">
+    <div :class="curClassName" :style="curStyle">
         <template v-if="dynaNavMode === 'ROUTEVIEW'">
             <template v-if="enableCache">
                 <app-keep-alive :routerList="routerList">
@@ -51,6 +51,14 @@ export default class AppNavPos extends Vue {
      */
     @Prop() public navData: any;
 
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppNavPos
+     */
+    public currentLayoutModel: any;
+
     /**
      * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
      *  
@@ -98,6 +106,40 @@ export default class AppNavPos extends Vue {
         return _this.$route.fullPath;
     }
 
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppNavPos
+     */
+    get curClassName() {
+        return {
+            'app-nav-pos': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppNavPos
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppNavPos
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
     /**
      * 执行视图事件
      *
@@ -110,3 +152,6 @@ export default class AppNavPos extends Vue {
 
 }
 </script>
+<style lang='less'>
+@import './app-nav-pos.less';
+</style>
\ No newline at end of file

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

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

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

@@ -24,11 +24,19 @@ export default class AppTabPanel extends Vue {
     /**
      * 布局模型详情
      *
-     * @type {string}
+     * @type {*}
      * @memberof AppTabPanel
      */
     @Prop() public layoutModelDetails: any;
 
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppTabPanel
+     */
+    public currentLayoutModel: any;
+
     /**
      * 插槽对象
      *
@@ -46,7 +54,7 @@ export default class AppTabPanel extends Vue {
     /**
      * 组件初始化
      *
-     * @memberof SimpleFlexContainer
+     * @memberof AppTabPanel
      */
     public created() {
         this.initTabPage();
@@ -55,12 +63,12 @@ export default class AppTabPanel extends Vue {
     /**
      * 初始化分页
      *
-     * @memberof SimpleFlexContainer
+     * @memberof AppTabPanel
      */
     public initTabPage() {
-        const curLayoutModel = this.layoutModelDetails[this.name];
-        if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
-            curLayoutModel.details.forEach((key: string) => {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+        if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) {
+            this.currentLayoutModel.details.forEach((key: string) => {
                 this.containerModel.push(key);
             })
         }
@@ -71,19 +79,38 @@ export default class AppTabPanel extends Vue {
     /**
      * 处理分页点击
      *
-     * @memberof SimpleFlexContainer
+     * @memberof AppTabPanel
      */
     public handleClick(tab: any) {
         this.layoutModelDetails[this.name].clickPage(tab);
     }
 
     /**
-    * 当前容器样式类
-    */
+     * 当前容器类名
+     *
+     * @memberof AppTabPanel
+     */
     get curClassName() {
-        return `app-tab-panel ${this.name}`;
+        return {
+            'app-tab-panel': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppTabPanel
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
     }
 }
 </script>
 <style lang='less'>
+@import './app-tab-panel.less';
 </style>
\ No newline at end of file

src/components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        <slot></slot>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppCtrlPos extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppCtrlPos
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppCtrlPos
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppCtrlPos
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppCtrlPos
+     */
+    get curClassName() {
+        return {
+            'app-ctrl-pos': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppCtrlPos
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppCtrlPos
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-ctrl-pos.less';
+</style>
\ No newline at end of file

src/components/layout-element/index/app-index-default-menu/app-index-default-menu.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        默认菜单
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppIndexDefaultMenu extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppIndexDefaultMenu
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppIndexDefaultMenu
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppIndexDefaultMenu
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppIndexDefaultMenu
+     */
+    get curClassName() {
+        return {
+            'app-index-default-menu': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppIndexDefaultMenu
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppIndexDefaultMenu
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-index-default-menu.less';
+</style>
\ No newline at end of file

src/components/layout-element/index/app-index-logout/app-index-logout.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        登出
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppIndexLogout extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppIndexLogout
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppIndexLogout
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppIndexLogout
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppIndexLogout
+     */
+    get curClassName() {
+        return {
+            'app-index-logout': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppIndexLogout
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppIndexLogout
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-index-logout.less';
+</style>
\ No newline at end of file

src/components/layout-element/index/app-index-nav-tabs/app-index-nav-tabs.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        <tab-page-exp></tab-page-exp>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppIndexNavTabs extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppIndexNavTabs
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppIndexNavTabs
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppIndexNavTabs
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppIndexNavTabs
+     */
+    get curClassName() {
+        return {
+            'app-index-nav-tabs': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppIndexNavTabs
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppIndexNavTabs
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-index-nav-tabs.less';
+</style>
\ No newline at end of file

src/components/layout-element/index/app-index-org-select/app-index-org-select.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        <app-orgsector></app-orgsector>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppIndexOrgSelect extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppIndexOrgSelect
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppIndexOrgSelect
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppIndexOrgSelect
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppIndexOrgSelect
+     */
+    get curClassName() {
+        return {
+            'app-index-org-select': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppIndexOrgSelect
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppIndexOrgSelect
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-index-org-select.less';
+</style>
\ No newline at end of file

src/components/layout-element/index/app-index-user-info/app-index-user-info.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        <app-user></app-user>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppIndexUserInfo extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppIndexUserInfo
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppIndexUserInfo
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppIndexUserInfo
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppIndexUserInfo
+     */
+    get curClassName() {
+        return {
+            'app-index-user-info': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppIndexUserInfo
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppIndexUserInfo
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-index-user-info.less';
+</style>
\ No newline at end of file

src/components/layout-element/index/index.md

-// 首页元素
\ No newline at end of file