update:更新

src/components/layout-element/structure/app-scroll-container/app-scroll-container.less

@@ -4,6 +4,8 @@
 
     .app-scroll-container__header,
     .app-scroll-container__bottom {
+        display: flex;
+        flex-direction: column;
         width: 100%;
     }
 
@@ -13,6 +15,8 @@
         .app-scroll-container__left,
         .app-scroll-container__center,
         .app-scroll-container__right {
+            display: flex;
+            flex-direction: column;
             height: 100%;
         }
     }

src/components/layout-element/structure/app-scroll-container/app-scroll-container.vue

@@ -2,33 +2,33 @@
     <div :class="curClassName" :style="curStyle">
         <div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
             class="no-style overflow-auto app-scroll-container__header">
-            <div v-for="name of containerModel.NORTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
+            <div v-for="name of containerModel.NORTH.name" class="container-item__pos">
                 <slot :name="name"></slot>
             </div>
         </div>
         <div class="app-scroll-container__middle" :style="middleContainerStyle">
             <div v-if="containerModel.WEST" :style="containerModel.WEST.style"
                 class="no-style overflow-auto app-scroll-container__left">
-                <div v-for="name of containerModel.WEST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
+                <div v-for="name of containerModel.WEST.name" class="container-item__pos">
                     <slot :name="name"></slot>
                 </div>
             </div>
             <div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
                 class="no-style overflow-auto app-scroll-container__center">
-                <div v-for="name of containerModel.CENTER.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
+                <div v-for="name of containerModel.CENTER.name" class="container-item__pos">
                     <slot :name="name"></slot>
                 </div>
             </div>
             <div v-if="containerModel.EAST" :style="containerModel.EAST.style"
                 class="no-style overflow-auto app-scroll-container__right">
-                <div v-for="name of containerModel.EAST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
+                <div v-for="name of containerModel.EAST.name" class="container-item__pos">
                     <slot :name="name"></slot>
                 </div>
             </div>
         </div>
         <div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
             class="no-style overflow-auto app-scroll-container__bottom">
-            <div v-for="name of containerModel.SOUTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
+            <div v-for="name of containerModel.SOUTH.name" class="container-item__pos">
                 <slot :name="name"></slot>
             </div>
         </div>
@@ -119,16 +119,6 @@ export default class AppScrollContainer extends Vue {
         }
     }
 
-    /**
-     * 获取项布局样式
-     */
-    public getItemPosStyle(name: string) {
-        const layoutModel = this.layoutModelDetails[this.itemName];
-        if (layoutModel) {
-            return layoutModel.getBorderLayoutStyle();
-        }
-    }
-
     /**
      * 初始化滚动容器
      *

src/components/layout-element/structure/app-simpleflex-container/app-simpleflex-container.less

@@ -2,8 +2,4 @@
     width: 100%;
     height: 100%;
     display: flex;
-    .simpleflex-item__pos{
-        height: 100%;
-        width: 100%;
-    }
 }
\ No newline at end of file

src/components/layout-element/structure/app-simpleflex-container/app-simpleflex-container.vue

 <template>
     <div :class="curClassName" :style="curStyle">
         <template v-if="containerModel.length > 0">
-            <div v-for="name of containerModel" class="simpleflex-item__pos" :style="getItemPosStyle(name)">
+            <div v-for="name of containerModel" class="container-item__pos" :style="getItemPosStyle(name)">
                 <slot :name="name"></slot>
             </div>
         </template>

src/components/layout-element/structure/app-standard-container/app-standard-container.less

 // 标准容器大小靠内容撑
 .app-standard-container{
-    display: block;
-    .container-item__pos{
-        width: 100%;
-        height: 100%;
-    }
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
 }
\ No newline at end of file

src/model/panel-detail/panel-container.ts

@@ -96,6 +96,7 @@ export class PanelContainerModel extends PanelDetailModel {
         }
         Object.assign(containerStyle, this.getBoxSpacingStyle());
         Object.assign(containerStyle, this.getSpecificStyle());
+        Object.assign(containerStyle, this.getBoxSelfAlignStyle());
         return containerStyle;
     }
 

src/model/panel-detail/panel-detail.ts

@@ -318,6 +318,7 @@ export class PanelDetailModel {
         Object.assign(elementStyle, this.getBoxSizeStyle());
         Object.assign(elementStyle, this.getBoxSpacingStyle());
         Object.assign(elementStyle, this.getBoxContentStyle());
+        Object.assign(elementStyle, this.getBoxSelfAlignStyle());
         return elementStyle;
     }
 
@@ -387,54 +388,7 @@ export class PanelDetailModel {
     }
 
     /**
-     * 获取盒子内容样式（元素，包含内容换行模式，内容水平对齐，内容垂直对齐）
-     *
-     * @memberof PanelDetailModel
-     */
-    protected getBoxContentStyle() {
-        const boxStyle = {};
-        return boxStyle;
-    }
-
-    /**
-     * 获取盒子边框样式（元素）
-     *
-     * @memberof PanelDetailModel
-     */
-    protected getBoxBorderStyle() {
-        const boxStyle = {};
-        return boxStyle;
-    }
-
-    /**
-     * 获取通用布局样式(SAMPLEFLEX/FLEX)（布局，包含约束内容区布局的样式，包含内容区的对齐方式）
-     *
-     * @return {*} 
-     * @memberof PanelDetailModel
-     */
-    public getCommonLayoutStyle() {
-        const layoutStyle = {};
-        Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
-        Object.assign(layoutStyle, this.getBoxLayOutStyle());
-        return layoutStyle;
-    }
-
-    /**
-     * 获取边缘布局样式
-     *
-     * @memberof PanelDetailModel
-     */
-    public getBorderLayoutStyle() {
-        const borderLayoutStyle: any = { width: '100%', height: '100%' };
-        if (this.layoutHeight) {
-            Object.assign(borderLayoutStyle, Util.getBoxSize("HEIGHT", this.heightMode, this.layoutHeight));
-        }
-        // TODO 合入样式代码
-        return borderLayoutStyle;
-    }
-
-    /**
-     * 获取自身对齐模式(布局)
+     * 获取自身对齐模式(元素)
      *
      * @memberof PanelDetailModel
      */
@@ -442,17 +396,16 @@ export class PanelDetailModel {
         const boxStyle = {};
         // 自身对齐方式
         if (this.vAlignSelf || this.hAlignSelf) {
-            Object.assign(boxStyle, { 'display': 'flex' });
             // 自身垂直对齐模式
             switch (this.vAlignSelf) {
                 case 'TOP':
-                    Object.assign(boxStyle, { 'align-items': 'flex-start' });
+                    // 默认样式
                     break;
                 case 'MIDDLE':
-                    Object.assign(boxStyle, { 'align-items': 'center' });
+                    Object.assign(boxStyle, { 'margin': 'auto 0px' });
                     break;
                 case 'BOTTOM':
-                    Object.assign(boxStyle, { 'align-items': 'flex-end' });
+                    Object.assign(boxStyle, { 'margin-top': 'auto' });
                     break;
                 default:
                     break;
@@ -460,16 +413,16 @@ export class PanelDetailModel {
             // 自身水平对齐模式
             switch (this.hAlignSelf) {
                 case 'LEFT':
-                    Object.assign(boxStyle, { 'justify-content': 'flex-start' });
+                    Object.assign(boxStyle, { 'align-self': 'flex-start' });
                     break;
                 case 'CENTER':
-                    Object.assign(boxStyle, { 'justify-content': 'center' });
+                    Object.assign(boxStyle, { 'align-self': 'center' });
                     break;
                 case 'RIGHT':
-                    Object.assign(boxStyle, { 'justify-content': 'flex-end' });
+                    Object.assign(boxStyle, { 'align-self': 'flex-end' });
                     break;
                 case 'JUSTIFY':
-                    Object.assign(boxStyle, { 'justify-content': 'space-between' });
+                    // 默认样式
                     break;
                 default:
                     break;
@@ -478,6 +431,38 @@ export class PanelDetailModel {
         return boxStyle;
     }
 
+    /**
+     * 获取盒子内容样式（元素，包含内容换行模式，内容水平对齐，内容垂直对齐）
+     *
+     * @memberof PanelDetailModel
+     */
+    protected getBoxContentStyle() {
+        const boxStyle = {};
+        return boxStyle;
+    }
+
+    /**
+     * 获取盒子边框样式（元素）
+     *
+     * @memberof PanelDetailModel
+     */
+    protected getBoxBorderStyle() {
+        const boxStyle = {};
+        return boxStyle;
+    }
+
+    /**
+     * 获取通用布局样式(SAMPLEFLEX/FLEX)（布局，包含约束内容区布局的样式，包含内容区的对齐方式）
+     *
+     * @return {*} 
+     * @memberof PanelDetailModel
+     */
+    public getCommonLayoutStyle() {
+        const layoutStyle = {};
+        Object.assign(layoutStyle, this.getBoxLayOutStyle());
+        return layoutStyle;
+    }
+
     /**
      * 获取盒子布局样式(布局)
      *
@@ -487,7 +472,7 @@ export class PanelDetailModel {
         const boxStyle = {};
         // 识别FLEX
         if (this.layout == 'FLEX') {
-            Object.assign(boxStyle, { 'display': 'flex', 'flex-grow': this.flexGrow ? this.flexGrow : 0 });
+            Object.assign(boxStyle, { 'flex-grow': this.flexGrow ? this.flexGrow : 0 });
         }
         // 识别SIMPLEFLEX
         if (this.layout == 'SIMPLEFLEX') {

src/styles/default.less

@@ -293,6 +293,12 @@
 .app-view-layout{
     width: 100%;
     height: 100%;
+    .container-item__pos{
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        flex-grow: 1;
+    }
 }
 
 // 看板视图，卡片模式