update:更新

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

 .app-standard-container{
-    width: 100%;
-    height: 100%;
+    display: block;
 }
\ No newline at end of file

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

@@ -17,6 +17,14 @@ export class PanelContainerModel extends PanelDetailModel {
      */
     public details:string[] = [];
 
+    /**
+     * 标题关闭模式
+     *
+     * @type {number}
+     * @memberof PanelContainerModel
+     */
+    public titleBarCloseMode:number = 0;
+
     /**
      * Creates an instance of PanelContainerModel.
      * @param {*} [opts={}]
@@ -25,6 +33,7 @@ export class PanelContainerModel extends PanelDetailModel {
     public constructor(opts: any = {}) {
         super(opts);
         this.details = opts.details;
+        this.titleBarCloseMode = opts.titleBarCloseMode;
     }
 
 

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

+import { Util } from "@/utils";
+
 /**
  * 面板成员模型
  *
@@ -150,6 +152,30 @@ export class PanelDetailModel {
      */
     public flexGrow: number = 0;
 
+    /**
+     * flex布局参数
+     *
+     * @type {*}
+     * @memberof PanelDetailModel
+     */
+    public flexParams: any = {};
+
+    /**
+     * 是否显示标题
+     *
+     * @type {boolean}
+     * @memberof PanelDetailModel
+     */
+    public isShowCaption: boolean = false;
+
+    /**
+     * 界面样式表
+     *
+     * @type {string}
+     * @memberof PanelDetailModel
+     */
+    public sysCss: string = ''
+
     /**
      * Creates an instance of PanelDetailModel.
      * PanelDetailModel 实例
@@ -176,6 +202,182 @@ export class PanelDetailModel {
         this.hAlignSelf = opts.hAlignSelf;
         this.vAlignSelf = opts.vAlignSelf;
         this.flexGrow = opts.flexGrow;
+        this.flexParams = opts.flexParams;
+        this.isShowCaption = opts.isShowCaption;
+        this.sysCss = opts.sysCss;
+    }
+
+    /**
+     * 获取元素样式（元素，包含内容盒子 大小/边距/内容 的样式）
+     *
+     * @memberof PanelDetailModel
+     */
+    public getElementStyle() {
+        const elementStyle = {};
+        Object.assign(elementStyle, this.getBoxSizeStyle());
+        Object.assign(elementStyle, this.getBoxSpacingStyle());
+        Object.assign(elementStyle, this.getBoxContentStyle());
+        return elementStyle;
+    }
+
+    /**
+     * 获取盒子间隔样式（元素）
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBoxSpacingStyle() {
+        const boxStyle = {};
+        // 上方间隔模式
+        if (this.spacingTop) {
+            Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingTop, 'top'));
+        }
+        // 下方间隔模式
+        if (this.spacingBottom) {
+            Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingBottom, 'bottom'));
+        }
+        // 左侧间隔模式
+        if (this.spacingLeft) {
+            Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingLeft, 'left'));
+        }
+        // 右侧间隔模式
+        if (this.spacingRight) {
+            Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingRight, 'right'));
+        }
+        return boxStyle;
+    }
+
+    /**
+     * 获取盒子大小样式（元素）
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBoxSizeStyle() {
+        const boxStyle = {};
+        if (this.widthMode || this.layoutWidth) {
+            Object.assign(boxStyle, Util.getBoxSize("WIDTH", this.widthMode, this.layoutWidth));
+        }
+        if (this.heightMode || this.layoutHeight) {
+            Object.assign(boxStyle, Util.getBoxSize("HEIGHT", this.heightMode, this.layoutHeight));
+        }
+        return boxStyle;
+    }
+
+    /**
+     * 获取盒子内容样式（元素，包含内容换行模式，内容水平对齐，内容垂直对齐）
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBoxContentStyle() {
+        const boxStyle = {};
+        return boxStyle;
+    }
+
+    /**
+     * 获取盒子边框样式（元素）
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBoxBorderStyle() {
+        const boxStyle = {};
+        return boxStyle;
+    }
+
+    /**
+     * 获取布局样式（布局，包含约束内容布局的样式，包含内容的对齐方式）
+     *
+     * @return {*} 
+     * @memberof PanelDetailModel
+     */
+    public getLayoutStyle() {
+        const layoutStyle = {};
+        Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
+        Object.assign(layoutStyle, this.getBoxLayOutStyle());
+        return layoutStyle;
+    }
+
+    /**
+     * 获取自身对齐模式(布局)
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBoxSelfAlignStyle() {
+        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' });
+                    break;
+                case 'BOTTOM':
+                    Object.assign(boxStyle, { 'align-items': 'flex-end' });
+                    break;
+                default:
+                    break;
+            }
+            // 自身水平对齐模式
+            switch (this.hAlignSelf) {
+                case 'LEFT':
+                    Object.assign(boxStyle, { 'justify-content': 'flex-start' });
+                    break;
+                case 'CENTER':
+                    Object.assign(boxStyle, { 'justify-content': 'center' });
+                    break;
+                case 'RIGHT':
+                    Object.assign(boxStyle, { 'justify-content': 'flex-end' });
+                    break;
+                case 'JUSTIFY':
+                    Object.assign(boxStyle, { 'justify-content': 'space-between' });
+                    break;
+                default:
+                    break;
+            }
+        }
+        return boxStyle;
+    }
+
+    /**
+     * 获取盒子布局样式(布局)
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBoxLayOutStyle() {
+        const boxStyle = {};
+        // 识别FLEX
+        if (this.layout == 'FLEX') {
+            Object.assign(boxStyle, { 'display': 'flex', 'flex-grow': this.flexGrow ? this.flexGrow : 0 });
+        }
+        // 识别flex布局方向，横轴对齐，纵轴对齐
+        if (this.flexParams.align || this.flexParams.dir || this.flexParams.vAlign) {
+            Object.assign(boxStyle, { 'display': 'flex' });
+            if (this.flexParams.dir) {
+                Object.assign(boxStyle, { 'flex-direction': this.flexParams.dir });
+            }
+            if (this.flexParams.align) {
+                Object.assign(boxStyle, { 'justify-content': this.flexParams.align });
+            }
+            if (this.flexParams.vAlign) {
+                Object.assign(boxStyle, { 'align-items': this.flexParams.vAlign });
+            }
+        }
+        // 识别SIMPLEFLEX
+        if (this.layout == 'SIMPLEFLEX') {
+            if (this.flexGrow) {
+                Object.assign(boxStyle, { 'width': `${(100 / 12) * this.flexGrow}%`, 'height': '100%' });
+            } else {
+                // 简单FLEX布局自适应
+                Object.assign(boxStyle, { 'flex-grow': 1, 'min-width': `${(100 / 12)}%`, 'height': '100%' });
+            }
+        }
+        // 识别边缘布局
+        if (this.layout == 'BORDER') {
+            Object.assign(boxStyle, { 'display': 'flex' });
+        }
+        return boxStyle;
     }
 
 }
\ No newline at end of file

src/utils/util/util.ts

@@ -472,9 +472,12 @@ export class Util {
      * @returns 
      */
     public static getBoxSize(mode: "WIDTH" | "HEIGHT", style: string, value: number) {
-        if (!mode || !style) {
+        if (!mode) {
             return {};
         }
+        if(!style){
+            style = 'PX';
+        }
         if (style === "FULL") {
             return { [mode.toLowerCase()]: "100%" };
         } else {
@@ -488,4 +491,34 @@ export class Util {
             }
         }
     }
+
+    /**
+     * 获取项间隔样式
+     *
+     * @param {string} spacingType
+     * @param {string} direction
+     * @return {*} 
+     */
+    public static getItemSpacingStyle(spacingType: string, direction: string) {
+        switch (spacingType) {
+            case 'OUTERNONE':
+                return { [`margin-${direction}`]: '0px' };
+            case 'OUTERSMALL':
+                return { [`margin-${direction}`]: '8px' };
+            case 'OUTERMEDIUM':
+                return { [`margin-${direction}`]: '16px' };
+            case 'OUTERLARGE':
+                return { [`margin-${direction}`]: '24px' };
+            case 'INNERNONE':
+                return { [`padding-${direction}`]: '0px' };
+            case 'INNERSMALL':
+                return { [`padding-${direction}`]: '8px' };
+            case 'INNERMEDIUM':
+                return { [`padding-${direction}`]: '16px' };
+            case 'INNERLARGE':
+                return { [`padding-${direction}`]: '24px' };
+            default:
+                return {};
+        }
+    }
 }
\ No newline at end of file