update: 表单布局

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/common/layoutPos.hbs

+{ 
+{{~#if layout}}
+  {{~#if layout.layout~}}
+    selfLayout: '{{layout.layout}}',
+  {{~/if~}}
+  {{~#if layout.dir~}}
+    dir: '{{layout.dir}}', 
+  {{/if~}}
+  {{~#if layout.align~}}
+    align: '{{layout.align}}', 
+  {{~/if~}}
+  {{~#if layout.vAlign~}}
+    vAlign: '{{layout.vAlign}}', 
+  {{~/if~}}
+{{~/if~}}
+{{~#if layoutPos~}}
+  {{~#if layoutPos.layout~}}
+    parentLayout: '{{layoutPos.layout}}', 
+  {{~/if~}}
+  {{~#if layoutPos.grow~}}
+    grow: {{layoutPos.grow}}, 
+  {{~/if~}}
+  {{~#if (and layoutPos.colLG (neq layoutPos.colLG -1) )~}}
+    colLG: {{layoutPos.colLG}}, 
+  {{~/if~}}
+  {{~#if (and layoutPos.colLGOffset (neq layoutPos.colLGOffset -1) )~}}
+    colLGOffset: {{layoutPos.colLGOffset}},
+  {{~/if~}}
+  {{~#if (and layoutPos.colMD (neq layoutPos.colMD -1) )~}}
+    colMD: {{layoutPos.colMD}}, 
+  {{~/if~}}
+  {{~#if (and layoutPos.colMDOffset (neq layoutPos.colMDOffset -1) )~}}
+    colMDOffset: {{layoutPos.colMDOffset}},
+  {{~/if~}}
+  {{~#if (and layoutPos.colSM (neq layoutPos.colSM -1) )~}}
+  colSM: {{layoutPos.colSM}}, 
+  {{~/if~}}
+  {{~#if (and layoutPos.colSMOffset (neq layoutPos.colSMOffset -1) )~}}
+    colSMOffset: {{layoutPos.colSMOffset}},
+  {{~/if~}}
+  {{~#if (and layoutPos.colXS (neq layoutPos.colXS -1) )~}}
+    colXS: {{layoutPos.colXS}}, 
+  {{~/if~}}
+  {{~#if (and layoutPos.colXSOffset (neq layoutPos.colXSOffset -1) )~}}
+    colXSOffset: {{layoutPos.colXSOffset}},
+  {{~/if~}}
+{{/if}}
+}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-button.hbs

-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
-  <AppFormButton
+<AppFormButton
+  name="{{item.codeName}}"
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
   :visible="state.detailsModel.{{item.codeName}}.visible"
-    class="app-form-button{{#if item.psSysCss}} {{item.psSysCss.cssName}}{{/if}}"
+{{#if item.psSysCss}}
+  class="{{item.psSysCss.cssName}}"
+{{/if}}
+{{#if (or item.width item.height)}}
   style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
-    cssClass="{{#if item.psSysImage.cssClass}}{{item.psSysImage.cssClass}}{{else}}''{{/if}}"
-    imagePath="{{#if item.psSysImage.imagePath}}{{item.psSysImage.imagePath}}{{else}}''{{/if}}"
+{{/if}}
+{{#if item.psSysImage.cssClass}}
+  iconClass="{{item.psSysImage.cssClass}}"
+{{/if}}
+{{#if item.psSysImage.imagePath}}
+  imgPath="{{item.psSysImage.imagePath}}"
+{{/if}}
   :showCaption="{{item.showCaption}}"
-    labelCssName="{{#if item.labelPSSysCss}}{{item.labelPSSysCss.cssName}}{{/if}}"
-    caption="{{#if item.caption}}{{item.caption}}{{/if}}"
-  />
-</div>
-{{else}}
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormButton
+{{#if item.labelPSSysCss}}
+  labelCssName="{{item.labelPSSysCss.cssName}}"
+{{/if}}
+{{#if item.caption}}
+  caption="{{item.caption}}" 
+{{/if}}
+/>
\ No newline at end of file
-    :visible="state.detailsModel.{{item.codeName}}.visible"
-    class="app-form-button{{#if item.psSysCss}} {{item.psSysCss.cssName}}{{/if}}"
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
-    cssClass="{{#if item.psSysImage.cssClass}}{{item.psSysImage.cssClass}}{{else}}''{{/if}}"
-    imagePath="{{#if item.psSysImage.imagePath}}{{item.psSysImage.imagePath}}{{else}}''{{/if}}"
-    :showCaption="{{item.showCaption}}"
-    labelCssName="{{#if item.labelPSSysCss}}{{item.labelPSSysCss.cssName}}{{/if}}"
-    caption="{{#if item.caption}}{{item.caption}}{{/if}}"
-  />
-</a-col>
-{{/eq}}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-details-model.hbs

@@ -69,7 +69,7 @@
           relatedDetailNames: '{{groupLogic.relatedDetailNames}}',
           logicCat: '{{groupLogic.logicCat}}',
           logicType: '{{groupLogic.logicType}}',
-          notMode: '{{groupLogic.notMode}}',
+          notMode: {{groupLogic.notMode}},
           logics: [
           {{#each groupLogic.psDEFDLogics as | logic |}}
           {condOP: '{{logic.condOP}}',dEFDName: '{{logic.dEFDName}}',logicType: '{{logic.logicType}}',name: '{{logic.name}}',value:'{{logic.value}}'},

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-druipart.hbs

-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
-  <AppFormDruipart 
-    v-show="state.detailsModel.{{item.codeName}}.visible" 
-    {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}}
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}"
+<AppFormDruipart 
   name="{{item.codeName}}" 
   title="{{item.caption}}" 
+  :visible="state.detailsModel.{{item.codeName}}.visible"
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
+{{#if item.psSysCss}}
+  class="{{item.psSysCss.cssName}}"
+{{/if}}
+{{#if (or item.width item.height)}}
+  style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
+{{/if}}
   :context="context"
   :viewParams="viewParams"
   :data="state.data"
-    :viewSubject="state.viewSubject"
-    v-slot="druipartParams">
+  :viewSubject="state.viewSubject">
+    <template #default="druipartParams">
       <{{item.psAppView.codeName}}
         :class="['app-view-layout--from-druipart']"
         :context="druipartParams.context"
@@ -20,31 +23,5 @@
         @viewEvent="druipartParams.viewEvent"
       >
       </{{item.psAppView.codeName}}>
-  </AppFormDruipart>
-</div>
-{{else}}
+    </template>
+</AppFormDruipart>
\ No newline at end of file
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormDruipart 
-    v-show="state.detailsModel.{{item.codeName}}.visible" 
-    {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}}
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}"
-    name="{{item.codeName}}" 
-    title="{{item.caption}}" 
-    :context="context"
-    :viewParams="viewParams"
-    :data="state.data"
-    :viewSubject="state.viewSubject"
-    v-slot="druipartParams">
-    <{{item.psAppView.codeName}}
-      :class="['app-view-layout--from-druipart']"
-      :context="druipartParams.context"
-      :viewParams="druipartParams.viewParams"
-      :viewDefaultUsage="false"
-      :noViewCaption="true"
-      @viewEvent="druipartParams.viewEvent"
-    >
-    </{{item.psAppView.codeName}}>
-  </AppFormDruipart>
-</a-col>
-{{/eq}}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-group-panel.hbs

-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
-  <AppFormGroup 
-    v-show="state.detailsModel.{{item.codeName}}.visible" 
+<AppFormGroup 
   name="{{item.codeName}}"
   title="{{item.caption}}"
-    {{#if item.psSysCss}}
+  :visible="state.detailsModel.{{item.codeName}}.visible" 
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
+{{#if item.psSysCss}}
   class="{{item.psSysCss.cssName}}"
-    {{/if}}
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}"
-    {{#if item.psSysImage}}
+{{/if}}
+{{#if item.labelPSSysCss}}
+  titleClass="{{item.labelPSSysCss.cssName}}"
+{{/if}}
+{{#if (or item.width item.height)}}
+  style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
+{{/if}}
+{{#if item.psSysImage}}
   {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
-    {{/if}}
-    {{#if item.labelPSSysCss}}
-    titleStyle="{{item.labelPSSysCss.cssName}}"
-    {{/if}}
+{{/if}}
   :infoGroupMode="{{item.infoGroupMode}}"
   :titleBarCloseMode="{{item.titleBarCloseMode}}"
   :showCaption="{{item.showCaption}}"
   :uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"
   @componentEvent="onComponentEvent">
-    {{#eq item.psLayout.layout "FLEX"}}
-    <div class="app-form-layout-flex" style="display: flex;{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
     {{#each item.psDEFormDetails as | formDetail |}}
     {{>(lookup . 'formDetail.detailType') item=formDetail}}
     {{/each}}
-    </div>
-    {{else}}
-    <a-row>
-      {{#each item.psDEFormDetails as | formDetail |}}
-      {{>(lookup . 'formDetail.detailType') item=formDetail}}
-      {{/each}}
-    </a-row>
-    {{/eq}}
-  </AppFormGroup>
-</div>
-{{else}}
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormGroup 
-    v-show="state.detailsModel.{{item.codeName}}.visible" 
-    name="{{item.codeName}}" 
-    title="{{item.caption}}"
-    {{#if item.psSysCss}}
-    class="{{item.psSysCss.cssName}}"
-    {{/if}}
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}"
-    {{#if item.psSysImage}}
-    {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
-    {{/if}}
-    {{#if item.labelPSSysCss}}
-    titleStyle="{{item.labelPSSysCss.cssName}}"
-    {{/if}}
-    :infoGroupMode="{{item.infoGroupMode}}"
-    :titleBarCloseMode="{{item.titleBarCloseMode}}"
-    :showCaption="{{item.showCaption}}"
-    :uIActionGroup="state.detailsModel.{{item.codeName}}.uIActionGroup"
-    @componentEvent="onComponentEvent">
-    {{#eq item.psLayout.layout "FLEX"}}
-    <div class="app-form-layout-flex" style="display: flex;{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
-      {{#each item.psDEFormDetails as | formDetail |}}
-      {{>(lookup . 'formDetail.detailType') item=formDetail}}
-      {{/each}}
-    </div>
-    {{else}}
-    <a-row>
-      {{#each item.psDEFormDetails as | formDetail |}}
-      {{>(lookup . 'formDetail.detailType') item=formDetail}}
-      {{/each}}
-    </a-row>
-    {{/eq}}
-  </AppFormGroup>
-</a-col>
-{{/eq}}
+</AppFormGroup>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-iframe.hbs

-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
-  <AppFormIframe
+<AppFormIframe
+  name="{{item.codeName}}"
   :visible="state.detailsModel.{{item.codeName}}.visible"
-    class="app-form-iframe{{#if item.psSysCss}} {{item.psSysCss.cssName}}{{/if}}"
-    style="{{#if item.contentHeight}}height: {{item.contentHeight}}px;{{/if}}{{#if item.contentWidth}}width: {{item.contentWidth}}px{{/if}}"
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
+{{#if item.psSysCss}}
+  class="{{item.psSysCss.cssName}}"
+{{/if}}
+{{#if (or item.contentHeight item.contentWidth)}}
+  style="{{#if item.contentHeight}}height: {{item.contentHeight}}px;{{/if}}{{#if item.contentWidth}}width: {{item.contentWidth}}px;{{/if}}"
+{{/if}}
   iFrameUrl="{{item.iFrameUrl}}" 
-  />
-</div>
+/>
\ No newline at end of file
-{{else}}
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormIframe
-    :visible="state.detailsModel.{{item.codeName}}.visible"
-    class="app-form-iframe{{#if item.psSysCss}} {{item.psSysCss.cssName}}{{/if}}"
-    style="{{#if item.contentHeight}}height: {{item.contentHeight}}px;{{/if}}{{#if item.contentWidth}}width: {{item.contentWidth}}px{{/if}}"
-    iFrameUrl="{{item.iFrameUrl}}"
-  />
-</a-col>
-{{/eq}}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-item.hbs

 {{>@macro/front-end/editors/include-editor.hbs}}
 {{#neq item.psEditor.editorType "HIDDEN"}}
-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
   <AppFormItem 
-    v-show="state.detailsModel.{{item.codeName}}.visible" 
-    {{#if item.psSysCss}}
-    class="{{item.psSysCss.cssName}}"
-    {{/if}}
-    {{#if item.labelPSSysCss}}
-    titleStyle="{{item.labelPSSysCss.cssName}}"
-    {{/if}}
     name="{{item.codeName}}"
-    :rules="state.rules.{{item.codeName}}"
-    :labelWidth="{{item.labelWidth}}"
-    :required="state.detailsModel.{{item.codeName}}.required"
     label="{{item.caption}}"
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}">
-      {{#if item.psEditor}}
-      <div class="form-editor-container" style="{{#if item.editorWidth}}width: {{item.editorWidth}}px;{{/if}}{{#if item.editorHeight}}height: {{item.editorHeight}}px{{/if}}">
-      {{>(lookup . 'item.psEditor.editorType') item=item ctrlType="form"}}
-      </div>
-      {{/if}}
-  </AppFormItem>
-</div>
-{{else}}
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormItem 
-    v-show="state.detailsModel.{{item.codeName}}.visible"
-    {{#if item.psSysCss}}
-    class="{{item.psSysCss.cssName}}"
-    {{/if}}
-    {{#if item.labelPSSysCss}}
-    titleStyle="{{item.labelPSSysCss.cssName}}"
-    {{/if}}
-    name="{{item.codeName}}"
-    :rules="state.rules.{{item.codeName}}"
     :labelWidth="{{item.labelWidth}}"
+    :rules="state.rules.{{item.codeName}}"
     :required="state.detailsModel.{{item.codeName}}.required"
-    label="{{item.caption}}"
-    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px{{/if}}">
-      {{#if item.psEditor}}
+    :visible="state.detailsModel.{{item.codeName}}.visible" 
+    :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
+{{#if item.psSysCss}}
+    class="{{item.psSysCss.cssName}}"
+{{/if}}
+{{#if item.labelPSSysCss}}
+    labelClass="{{item.labelPSSysCss.cssName}}"
+{{/if}}
+{{#if (or item.width item.height)}}
+    style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
+{{/if}}
+  >
+{{#if item.psEditor}}
     <div class="form-editor-container" style="{{#if item.editorWidth}}width: {{item.editorWidth}}px;{{/if}}{{#if item.editorHeight}}height: {{item.editorHeight}}px{{/if}}">
     {{>(lookup . 'item.psEditor.editorType') item=item ctrlType="form"}}
     </div>
-      {{/if}}
+{{/if}}
   </AppFormItem>
-</a-col>
-{{/eq}}
 {{/neq}}
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-page.hbs

 <AppFormPage
+  name="{{item.codeName}}"
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=item.psLayout layoutPos=item.psLayoutPos}}"
   :visible="state.detailsModel.{{item.codeName}}.visible"
-  {{#if item.psSysCss}}
+{{#if item.psSysCss}}
   class="{{item.psSysCss.cssName}}"
-  {{/if}} 
+{{/if}} 
   key="{{item.codeName}}"
-  {{#if item.psSysImage}}
-  cssClass="{{#if item.psSysImage.cssClass}}{{item.psSysImage.cssClass}}{{else}}''{{/if}}"
-  imagePath="{{#if item.psSysImage.imagePath}}{{item.psSysImage.imagePath}}{{else}}''{{/if}}" 
-  {{/if}} 
-  caption="{{#if item.caption}}{{item.caption}}{{/if}}"  
+  tab="{{#if item.caption}}{{item.caption}}{{/if}}"  
 >
-  {{#eq item.psLayout.layout "FLEX"}}
-  <div class="app-form-layout-flex" style="display: flex;{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
+  <template #tab>
+    <AppIconText {{#if item.labelPSSysCss}}class="{{item.labelPSSysCss.cssName}}" {{/if}}{{#if item.psSysImage}}{{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}" {{/if}}{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{item.caption}}"/>
+  </template>
   {{#each item.psDEFormDetails as | formDetail |}}
   {{>(lookup . 'formDetail.detailType') item=formDetail}}
   {{/each}}
-  </div>
-  {{else}}
-  <a-row>
-    {{#each item.psDEFormDetails as | formDetail |}}
-    {{>(lookup . 'formDetail.detailType') item=formDetail}}
-    {{/each}}
-  </a-row>
-  {{/eq}}
 </AppFormPage>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-rawitem.hbs

-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};">
-  <AppRaw 
+<AppRaw 
   name="{{item.codeName}}"
-    v-show="state.detailsModel.{{item.codeName}}.visible"
-    {{#if item.psSysCss}}
+  :visible="state.detailsModel.{{item.codeName}}.visible"
+{{#if item.psSysCss}}
   class="{{item.psSysCss.cssName}}"
-    {{/if}}
-    {{#if item.psSysImage}}
+{{/if}}
+{{#if item.psSysImage}}
   {{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{/if}}
-    {{/if}}
+{{/if}}
   contentType="{{item.contentType}}"
-    style="{{#if item.rawItemHeight}}height: {{item.rawItemHeight}}px;{{/if}}{{#if item.rawItemWidth}}width: {{item.rawItemWidth}}px{{/if}}"
+{{#if (or item.rawItemHeight item.rawItemWidth)}}
+  style="{{#if item.rawItemHeight}}height: {{item.rawItemHeight}}px;{{/if}}{{#if item.rawItemWidth}}width: {{item.rawItemWidth}}px;{{/if}}"
+{{/if}}
   {{#if (eq item.contentType 'RAW')}}value="{{item.rawContent}}"{{else if (eq item.contentType 'HTML')}}:value="`{{item.htmlContent}}`"{{/if}}/>
-</div>
-{{else}}
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppRaw 
-    name="{{item.codeName}}"
-    v-show="state.detailsModel.{{item.codeName}}.visible"
-    {{#if item.psSysCss}}
-    class="{{item.psSysCss.cssName}}"
-    {{/if}}
-    {{#if item.psSysImage}}
-    {{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{/if}}
-    {{/if}}
-    contentType="{{item.contentType}}"
-    style="{{#if item.rawItemHeight}}height: {{item.rawItemHeight}}px;{{/if}}{{#if item.rawItemWidth}}width: {{item.rawItemWidth}}px{{/if}}"
-    {{#if (eq item.contentType 'RAW')}}value="{{item.rawContent}}"{{else if (eq item.contentType 'HTML')}}:value="`{{item.htmlContent}}`"{{/if}}/>
-</a-col>
-{{/eq}}

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-tabpage.hbs

 <AppFormTabpage
+  name="{{item.codeName}}"
   :visible="state.detailsModel.{{item.codeName}}.visible"
-  {{#if item.psSysCss}}
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
+{{#if item.psSysCss}}
   class="{{item.psSysCss.cssName}}"
-  {{/if}} 
+{{/if}} 
   key="{{item.codeName}}"  
   caption="{{#if item.caption}}{{item.caption}}{{/if}}"    
 >
-  {{#eq item.psLayout.layout "FLEX"}}
-  <div class="app-form-layout-flex" style="display: flex;{{#if item.psLayout.dir}}flex-direction: {{item.psLayout.dir}};{{/if}}{{#if item.psLayout.align}}justify-content: {{item.psLayout.align}};{{/if}}{{#if item.psLayout.vAlign}}align-items: {{item.psLayout.vAlign}};{{/if}}">
   {{#each item.psDEFormDetails as | formDetail |}}
   {{>(lookup . 'formDetail.detailType') item=formDetail}}
   {{/each}}
-  </div>
-  {{else}}
-  <a-row>
-    {{#each item.psDEFormDetails as | formDetail |}}
-    {{>(lookup . 'formDetail.detailType') item=formDetail}}
-    {{/each}}
-  </a-row>
-  {{/eq}}  
 </AppFormTabpage>

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/front-end/widgets/form-detail/form-tabpanel.hbs

-{{#eq item.psLayoutPos 'FLEX'}}
-<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}}>
-  <AppFormTabpanel>
+<AppFormTabpanel 
+  :visible="state.detailsModel.{{item.codeName}}.visible"
+  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=formDetail.psLayout layoutPos=formDetail.psLayoutPos}}"
+  name={{item.name}}>
   {{#each item.psDEFormPages as | formPage | }}
   {{>(lookup . 'formPage.detailType') item=formPage }}
   {{/each}}
-  </AppFormTabpanel>
-</div>
-{{else}}
-<a-col
-{{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormTabpanel>
-    {{#each item.psDEFormPages as | formPage | }}
-    {{>(lookup . 'formPage.detailType') item=formPage }}
-    {{/each}}
-  </AppFormTabpanel>
-</a-col>
-{{/eq}}
-
+</AppFormTabpanel>

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-col.vue

 <script setup lang="ts">
-import { ILayoutPos } from "@core";
+import { ILayoutOpts, LayoutTool, styleObj2Str } from "@core";
+import { isObject } from "qx-util";
 
-interface AppColProps{
-  layoutPos: ILayoutPos;
+interface AppColProps {
+  layoutOpts?: ILayoutOpts,
+  noRoot?: boolean,
+  visible?: boolean,
 }
 
 const props = withDefaults(defineProps<AppColProps>(), {
+  noRoot: false,
+  visible: true,
+});
+
+// 使用布局逻辑获得响应式的layout对象
+let layout: any = null;
+if (props.layoutOpts) {
+  layout = LayoutTool.useLayout(toRef(props as any, "layoutOpts"));
+}
 
+// 插槽类名和插槽样式，只有不绘制根元素的时候需要传递给插槽
+const attrs = useAttrs()
+// 在template里写会丢失响应性，故封一个计算属性。
+let slotStyle = computed(() => {
+  let result = '';
+  result += isObject(attrs.style ) ? styleObj2Str(attrs.style) : attrs.style;
+  console.log(attrs.style)
+  console.log(result)
+  if(layout?.value?.colStyle){
+    result += layout.value.colStyle;
+  }
+  result += props.visible == true ? "" : "display: none;";
+  return result;
 });
 
-// use通用的layout解析逻辑。
+let slotClass = computed(()=>{
+  let result = '';
+  result += attrs.class;
+  if(props.layoutOpts?.parentLayout == 'FLEX' && props.noRoot){
+    result += " app-col app-col--flex";
+  }
+  return result;
+})
 
-const layoutMode = "";
+// 计算是否需要绘制根元素(layoutOpts不存在或者flex模式下noRoot为true时不绘制根元素)
+let hasRoot = computed(()=>{
+  return props.layoutOpts !== undefined && 
+  ( props.layoutOpts.parentLayout !== 'FLEX' || !props.noRoot );
+})
 
-onMounted(() => {
-  console.log(props)
-});
 
 </script>
 
 <template>
-<div v-if="layoutMode == 'FLEX'" class="app-col">
-  <slot></slot>
-</div>
-<a-col v-else class="app-col">
-  <slot></slot>
-</a-col>
+  <template v-if="!hasRoot">
+    <!-- 没有根元素的直接输出插槽 -->
+    <slot :slotStyle="slotStyle" :slotClass="slotClass"></slot>
+  </template>
+  <div
+    v-else-if="layoutOpts?.parentLayout == 'FLEX'"
+    v-show="visible"
+    :style="layout.colStyle"
+    class="app-col app-col--flex"
+  >
+    <slot slotStyle="" slotClass="" ></slot>
+  </div>
+  <a-col
+    v-else
+    v-show="visible"
+    :lg="layout.colGridOpts.lg"
+    :xs="layout.colGridOpts.md"
+    :md="layout.colGridOpts.md"
+    :sm="layout.colGridOpts.sm"
+    class="app-col app-col--grid"
+  >
+    <slot slotStyle="" slotClass=""></slot>
+  </a-col>
 </template>
 
 <style lang="scss">
-
 </style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-button.vue

 <script setup lang="ts">
-import { IActionParam, IParam } from "@core";
+import { IActionParam, ILayoutOpts, IParam } from "@core";
 
 interface FormButtonProps{
-  visible: boolean;
-  cssClass?: string;
-  imagePath?: string;
+  name: string;
+  layoutOpts: ILayoutOpts;
+  visible?: boolean;
+  iconClass?: string;
+  imgPath?: string;
   showCaption?: boolean;
   labelCssName?: string;
   caption: string
 }
 const props = withDefaults(defineProps<FormButtonProps>(), {
   visible: true,
+  showCaption: true,
 });
 
 </script>
 
 <template>
+  <app-col :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-formButton">
+    <template #default="{slotStyle, slotClass}">
       <a-button 
-      type="primary"
-      v-show="visible">
-        <template #icon v-if="cssClass || imagePath">
-          <AppIconText :iconClass="cssClass" :imgPath="imagePath"/>
-        </template>
-        <template v-if="showCaption && caption">
-        <span :class="labelCssName">{{caption}}</span>
-        </template>
+        :class="slotClass"
+        :style="slotStyle"
+        type="primary">
+          <AppIconText :class="labelCssName" :iconClass="iconClass" :imgPath="imagePath" :text="showCaption ? caption : '' "/>
       </a-button>
+    </template>
+  </app-col>
 </template>
 
 <style lang="scss">

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-druipart.vue

 <script setup lang="ts">
-import { IActionParam, IParam, RouteUtil } from '@core';
+import { IActionParam, ILayoutOpts, IParam, RouteUtil } from '@core';
 import { Subject, Subscription } from 'rxjs';
 interface FormDruipartProps {
+  // 名称
+  name: string;
+  // 布局配置项
+  layoutOpts: ILayoutOpts;
   // 刷新关系项
   tempMode?: string;
   // 禁止加载
@@ -26,15 +30,17 @@ interface FormDruipartProps {
   viewSubject: Subject<any>;
   // 视图路由参数
   parameters?: any[];
-  // 名称
-  name: string;
   // 是否忽略表单项值变化
   ignoreFieldValueChange?: boolean;
+  // 是否显示
+  visible?: boolean;
 }
 interface FormDruipartEmit {
   (name: 'componentEvent', value: IActionParam): void;
 }
-const props = withDefaults(defineProps<FormDruipartProps>(), {});
+const props = withDefaults(defineProps<FormDruipartProps>(), {
+  visible: true,
+});
 
 const emit = defineEmits<FormDruipartEmit>();
 
@@ -115,7 +121,9 @@ const viewEvent = (action:any) => {
 </script>
 
 <template>
-  <a-card :class="['app-form-druipart', `app-form-druipart-${name}`]" :bordered="false">
+  <app-col noRoot :visible="visible" :layoutOpts="layoutOpts" :class="['app-form-druipart', `app-form-druipart-${name}`]">
+  <template #default="{slotStyle, slotClass}">
+    <a-card :class="slotClass" :style="slotStyle" :bordered="false">
       <template #title>
         <p :class="['app-form-druipart-title']">
           <AppIconText :text="title" />
@@ -123,6 +131,8 @@ const viewEvent = (action:any) => {
       </template>
       <slot :context="druipartContext" :viewParams="druipartViewParams" :viewEvent="viewEvent" ></slot>
     </a-card>
+  </template>
+  </app-col>
 </template>
 
 <style lang="scss">

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-group.vue

 <script setup lang="ts">
-import { IActionParam, IParam } from "@core";
+import { IActionParam, ILayoutOpts, IParam } from "@core";
 
-interface FormGroupProps{
+interface FormGroupProps {
   name: string;
+  layoutOpts: ILayoutOpts;
   title?: string;
   imgPath?: string;
   iconClass?: string;
-  titleStyle?: string;
+  titleClass?: string;
   infoGroupMode?: boolean;
   titleBarCloseMode?: number;
   showCaption?: boolean;
+  visible?: boolean;
   uIActionGroup?: IParam;
 }
-interface FormGroupEmit{
+interface FormGroupEmit {
   (name: 'componentEvent', value: IActionParam): void
 }
 const props = withDefaults(defineProps<FormGroupProps>(), {
   infoGroupMode: false,
   showCaption: true,
+  visible: true,
   titleBarCloseMode: 0,
 });
 const emit = defineEmits<FormGroupEmit>();
 const handleGroupAction = (action: IParam) => {
-  emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: action});
+  emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: action });
 }
 const handleMenuGroupAction = ($event: IParam) => {
   if (props.uIActionGroup && props.uIActionGroup.details?.length > 0) {
     const details = props.uIActionGroup.details;
     const detail = details.find((action: IParam) => Object.is(action.uIActionTag, $event.key));
-    emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: detail});
+    emit('componentEvent', { tag: props.name, action: 'formGroupAction', data: detail });
   }
 } 
 </script>
 
 <template>
-  <app-col :class="['app-form-group', `app-form-group-${name}`]">
-    <a-card
-    :headStyle="titleStyle"
-    :bordered="false">
+  <app-col
+    noRoot
+    :visible="visible"
+    :layoutOpts="layoutOpts"
+    :class="['app-form-group', `app-form-group-${name}`]"
+  >
+    <template #default="{ slotClass, slotStyle }">
+      <a-card :class="slotClass" :style="slotStyle" :headStyle="titleClass" :bordered="false">
         <template v-if="showCaption" #title>
           <p class="app-form-group-title">
-        <AppIconText :iconClass="iconClass" :imgPath="imgPath" :text="title"/>
+            <AppIconText :iconClass="iconClass" :imgPath="imgPath" :text="title" />
           </p>
         </template>
         <template v-if="showCaption" #extra>
           <template v-if="uIActionGroup">
             <template v-if="Object.is(uIActionGroup.extractMode, 'ITEMS')">
               <a-dropdown>
-            <a class="group-action" @click.prevent>
-              {{uIActionGroup.caption}}
-            </a>
+                <a class="group-action" @click.prevent>{{ uIActionGroup.caption }}</a>
                 <template #overlay>
                   <a-menu @click="handleMenuGroupAction">
                     <template v-for="(item, index) in uIActionGroup.details" :key="index">
                       <a-menu-item
                         v-if="item.visible"
                         :key="item.uIActionTag"
-                    :disabled="item.disabled">
+                        :disabled="item.disabled"
+                      >
                         <AppIconText
                           :iconClass="item.showIcon && item.iconClass"
                           :imgPath="item.showIcon && item.imgPath"
-                        :text="item.showCaption && item.caption"/>
+                          :text="item.showCaption && item.caption"
+                        />
                       </a-menu-item>
                     </template>
                   </a-menu>
@@ -74,27 +81,28 @@ const handleMenuGroupAction = ($event: IParam) => {
                   v-show="item.visible"
                   type="link"
                   :disabled="item.disabled"
-                @click="handleGroupAction(item)">
+                  @click="handleGroupAction(item)"
+                >
                   <AppIconText
                     :iconClass="item.showIcon && item.iconClass"
                     :imgPath="item.showIcon && item.imgPath"
-                    :text="item.showCaption && item.caption"/>
+                    :text="item.showCaption && item.caption"
+                  />
                 </a-button>
               </span>
             </template>
           </template>
         </template>
-    <app-row>
+        <app-row :layoutOpts="layoutOpts">
           <slot></slot>
         </app-row>
       </a-card>
+    </template>
   </app-col>
 </template>
 
 <style lang="scss">
 .app-form-group {
-  height: 100%;
-  width: 100%;
   .ant-card-head {
     text-align: left;
     .app-form-group-title {

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-iframe.vue

 <script setup lang="ts">
-import { IActionParam, IParam } from "@core";
+import { IActionParam, ILayoutOpts, IParam } from "@core";
 
 interface FormIframeProps{
+  name: string;
+  layoutOpts: ILayoutOpts;
   visible: boolean;
   iFrameUrl: string
 }
@@ -12,9 +14,9 @@ const props = withDefaults(defineProps<FormIframeProps>(), {
 </script>
 
 <template>
-  <div v-show="visible">
-    <iframe :src="iFrameUrl" style="height: 100%;width: 100%;border: 0"></iframe>
-  </div>
+  <app-col class="app-formDruipart" :visible="visible" :layoutOpts="layoutOpts" v-show="visible">
+    <iframe class="app-formDruipart__iframe" :src="iFrameUrl" style="height: 100%;width: 100%;border: 0"></iframe>
+  </app-col>
 </template>
 
 <style lang="scss">

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-item.vue

 <script setup lang="ts">
-import { IActionParam } from '@core';
+import { IActionParam, ILayoutOpts } from '@core';
 
 interface FormGroupProps {
   name: string;
+  layoutOpts?: ILayoutOpts;
   label?: string;
   required?: boolean;
+  visible?: boolean;
   labelWidth?: number;
   rules?: any;
   error?: string;
-  titleStyle?: string;
+  labelClass?: string;
 }
 interface FormGroupEmit {
   (name: 'componentEvent', value: IActionParam): void;
 }
 const props = withDefaults(defineProps<FormGroupProps>(), {
   required: false,
+  visible: true,
 });
 const emit = defineEmits<FormGroupEmit>();
 
@@ -39,22 +42,27 @@ const initRules = () => {
 </script>
 
 <template>
+  <app-col :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-form-item">
+    <template v-slot:default="{slotStyle, slotClass}">
       <a-form-item
+        :class="slotClass"
+        :style="slotStyle"
         :name="name"
         :rules="itemRules"
         :help="error"
         :required="required"
-    class="app-form-item"
         :labelCol="{ style: { width: `${labelWidth}px` } }"
         :validateStatus="error ? 'error' : 'validating'"
       >
         <template #label>
-      <label :class="titleStyle">
+          <label :class="labelClass">
             <div class="label-title">{{ label }}</div>
           </label>
         </template>
         <slot></slot>
       </a-form-item>
+    </template>
+  </app-col>
 </template>
 
 <style lang="scss">

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-page.vue

 <script setup lang="ts">
-import { IActionParam, IParam } from "@core";
+import { IActionParam, ILayoutOpts, IParam } from "@core";
 
-interface FormPageProps{
-  visible: boolean;
-  cssClass?: string;
-  imagePath?: string;
-  caption: string  
+interface FormPageProps {
+  layoutOpts: ILayoutOpts;
+  tab?: string
 }
 
 const props = withDefaults(defineProps<FormPageProps>(), {
-  visible: true,
 });
 
 </script>
 
 <template>
-  <a-tab-pane v-show="visible">
-    <template #tab>
-      <AppIconText :iconClass="cssClass" :imgPath="imagePath" :text="caption"/>
-    </template>
+  <a-tab-pane class="app-formPage" :key="$attrs.key" :tab="tab">
+    <app-row :layoutOpts="layoutOpts">
       <slot></slot>
+    </app-row>
   </a-tab-pane>
 </template>
 

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-raw.vue

+<script setup lang="ts">
+import { IActionParam, ILayoutOpts, IParam } from "@core";
+
+interface FormRawProps{
+  name: string;
+  layoutOpts: ILayoutOpts;
+  visible?: boolean;
+  iconClass?: string;
+  imgPath?: string;
+  value?:any;
+  contentType?: string;
+}
+const props = withDefaults(defineProps<FormRawProps>(), {
+  visible: true,
+});
+
+</script>
+
+<template>
+  <app-col :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-formRaw">
+    <template #default="{slotStyle, slotClass}">
+      <AppRaw 
+        :class="slotClass"
+        :style="slotStyle"
+        :iconClass="iconClass"
+        :value="value"
+        :contentType="contentType">
+      </AppRaw>
+    </template>
+  </app-col>
+</template>
+
+<style lang="scss">
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-tabpage.vue → modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-tab-page.vue

 <script setup lang="ts">
-import { IActionParam, IParam } from "@core";
+import { IActionParam, ILayoutOpts, IParam } from "@core";
 
 interface FormTabPageProps{
+  name: string;
+  layoutOpts: ILayoutOpts;
   visible: boolean;
   caption: string  
 }
@@ -13,8 +15,10 @@ const props = withDefaults(defineProps<FormTabPageProps>(), {
 </script>
 
 <template>
-  <a-tab-pane v-show="visible" :tab="caption">
+  <a-tab-pane class="app-formTabPage" v-show="visible" :tab="caption">
+    <app-row :layoutOpts="layoutOpts">
       <slot></slot>  
+    </app-row>
   </a-tab-pane>
 </template>
 

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-tab-panel.vue

+<script setup lang="ts">
+import { IActionParam, ILayoutOpts, IParam } from "@core";
+
+interface FormTabPanelProps {
+  name: string;
+  layoutOpts: ILayoutOpts;
+  visible?: boolean;
+}
+
+const props = withDefaults(defineProps<FormTabPanelProps>(), {
+  visible: true,
+});
+
+</script>
+
+<template>
+  <app-col :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-formTabPanel">
+    <template v-slot:default="{ slotStyle, slotClass }">
+      <a-tabs :class="slotClass" :style="slotStyle">
+        <slot></slot>
+      </a-tabs>
+    </template>
+  </app-col>
+</template>
+
+<style lang="scss">
+</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-form-tabpanel.vue

-<script setup lang="ts">
-import { IActionParam, IParam } from "@core";
-
-interface FormTabPanelProps{
-
-}
-
-const props = withDefaults(defineProps<FormTabPanelProps>(), {
-});
-
-</script>
-
-<template>
-  <a-tabs class="app-form-page">
-    <slot></slot>  
-  </a-tabs>
-</template>
-
-<style lang="scss">
-</style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/common/app-row.vue

 <script setup lang="ts">
-import { ILayoutPos } from "@core";
+import { ILayoutOpts } from "@core";
+import { LayoutTool } from "@core/modules/common/layout-tool";
 
-interface AppRowProps{
-  layoutPos: ILayoutPos;
+interface AppRowProps {
+  layoutOpts: ILayoutOpts;
 }
 
-const props = withDefaults(defineProps<AppRowProps>(), {
+const props = withDefaults(defineProps<AppRowProps>(), {});
 
-});
-
-// use通用的layout解析逻辑。
-
-const layoutMode = "";
-
-onMounted(() => {
-  console.log(props)
-});
+// 使用布局逻辑获得响应式的layout对象
+const layout = LayoutTool.useLayout(toRef(props, "layoutOpts"));
 
 </script>
 
 <template>
-<div v-if="layoutMode == 'FLEX'" class="app-row">
+  <div 
+  :style="layout.rowStyle"
+  v-if="layoutOpts.selfLayout == 'FLEX'" class="app-row app-row--flex">
     <slot></slot>
-</div>
-<a-row v-else class="app-row">
+  </div>
+  <a-row v-else class="app-row app-row--grid">
     <slot></slot>
-</a-row>
+  </a-row>
 </template>
 
 <style lang="scss">
-
+.app-row{
+  width: 100%;
+}
 </style>
\ No newline at end of file

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-checkbox-list.vue

@@ -8,7 +8,7 @@ interface CheckboxListProps {
    * @type {*}
    * @memberof CheckboxListProps
    */
-  value: any;
+  value?: any;
 
   /**
    * 属性名称

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-data-picker-view.vue

@@ -16,7 +16,7 @@ interface DataPickerViewProps {
   /**
    * @description 编辑器值
    */
-  value: any;
+  value?: any;
 
   /**
    * @description 禁用

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-data-picker.vue

@@ -16,7 +16,7 @@ interface DataPickerProps {
   /**
    * @description 编辑器值
    */
-  value: any;
+  value?: any;
 
   /**
    * @description 禁用

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-list-box.vue

@@ -8,7 +8,7 @@ interface ListBoxProps {
    * @type {*}
    * @memberof ListBoxProps
    */
-  value: any;
+  value?: any;
 
   /**
    * 属性名称

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-radio-group.vue

@@ -8,7 +8,7 @@ interface RadioGroupProps {
    * @type {*}
    * @memberof AppCheckBox
    */
-  value: any;
+  value?: any;
 
   /**
    * 属性名称

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/app-span.vue

@@ -8,7 +8,7 @@ interface SpanProps {
    * @type {*}
    * @memberof AppSpan
    */
-  value: string;
+  value?: string;
 
   /**
    * 传入表单数据

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/interface/common/i-layout-pos.ts

+type LayoutMode = 'FLEX' | 'TABLE_24COL' | 'TABLE_12COL';
+
 /**
  * 布局配置
  *
  * @export
- * @interface ILayoutPos
+ * @interface ILayoutOpts
  */
-export interface ILayoutPos{
+export interface ILayoutOpts {
+  /**
+   * 自身的容器布局模式(容器才有)
+   */
+  selfLayout?: LayoutMode;
+
+  /**
+   * 父容器的布局模式（作为子才有）
+   */
+  parentLayout?: LayoutMode;
+
+  /**
+   * Flex横轴对齐方向
+   */
+  align?: string | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+
+  /**
+   * Flex布局方向
+   */
+  dir?: string | 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+  /**
+   * Flex纵轴对齐方向
+   */
+  vAlign?: string | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+
+  /**
+   * Flex延伸
+   * @type {number}
+   */
+  grow?: number;
+
+  /**
+   * 大型列宽
+   * @type {number}
+   * @default -1
+   */
+  colLG?: number;
+
+  /**
+   * 大型偏移
+   * @type {number}
+   * @default -1
+   */
+  colLGOffset?: number;
+
+  /**
+   * 中型列宽
+   * @type {number}
+   * @default -1
+   */
+  colMD?: number;
+
+  /**
+   * 中型偏移
+   * @type {number}
+   * @default -1
+   */
+  colMDOffset?: number;
+
+  /**
+   * 小型列宽
+   * @type {number}
+   * @default -1
+   */
+  colSM?: number;
+
+  /**
+   * 小型偏移
+   * @type {number}
+   * @default -1
+   */
+  colSMOffset?: number;
+
+  /**
+   * 固定列宽
+   * @type {number}
+   * @default -1
+   */
+  colWidth?: number;
+
+  /**
+   * 超小列宽
+   * @type {number}
+   * @default -1
+   */
+  colXS?: number;
+
+  /**
+   * 超小偏移
+   * @type {number}
+   * @default -1
+   */
+  colXSOffset?: number;
 }

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/common/index.ts

 export * from './ui-base';
+export * from './layout-tool';
 
 

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/modules/common/layout-tool.ts

+import { ILayoutOpts, notEmpty } from '@core';
+import { isNumber } from 'qx-util';
+import { Ref } from 'vue';
+
+/**
+ * 布局逻辑工具类
+ *
+ * @export
+ * @class LayoutTool
+ */
+export class LayoutTool {
+  /**
+   * 获取flex布局样式（父容器）
+   *
+   * @static
+   * @param {*} layoutOpts 布局设置
+   * @returns {string}
+   * @memberof LayoutTool
+   */
+  public static getRowFlexStyle(layoutOpts: ILayoutOpts): string {
+    if (layoutOpts?.selfLayout == 'FLEX') {
+      const { dir, align, vAlign } = layoutOpts;
+      let cssStyle: string = 'width: 100%; height: 100%; overflow: auto; display: flex;';
+      cssStyle += dir ? `flex-direction: ${dir};` : '';
+      cssStyle += align ? `justify-content: ${align};` : '';
+      cssStyle += vAlign ? `align-items: ${vAlign};` : '';
+      return cssStyle;
+    } else {
+      return '';
+    }
+  }
+
+  /**
+   * 获取flex布局样式2(子)
+   *
+   * @static
+   * @param {*} layoutOpts 布局位置
+   * @returns {string}
+   * @memberof LayoutTool
+   */
+  public static getColFlexStyle(layoutOpts: ILayoutOpts): string {
+    if (layoutOpts?.parentLayout == 'FLEX' && notEmpty(layoutOpts.grow)) {
+      let grow = layoutOpts.grow! < 0 ? 0 : layoutOpts.grow;
+      return `flex-grow: ${grow};`;
+    }
+    return '';
+  }
+
+  /**
+   * 获取栅格布局参数
+   *
+   * @static
+   * @param {*} layoutOpts
+   * @memberof LayoutTool
+   */
+  public static getGridOptions(layoutOpts: ILayoutOpts, isTurn24: boolean = true) {
+    if (layoutOpts.parentLayout != 'TABLE_24COL' && layoutOpts.parentLayout != 'TABLE_12COL') {
+      return;
+    }
+    let colLG = this.formatColSpan(layoutOpts.colLG, layoutOpts.parentLayout);
+    let colMD = this.formatColSpan(layoutOpts.colMD, layoutOpts.parentLayout);
+    let colSM = this.formatColSpan(layoutOpts.colSM, layoutOpts.parentLayout);
+    let colXS = this.formatColSpan(layoutOpts.colXS, layoutOpts.parentLayout);
+    let colLGOffset = isNumber(layoutOpts.colLGOffset) ? layoutOpts.colLGOffset : 0;
+    let colMDOffset = isNumber(layoutOpts.colMDOffset) ? layoutOpts.colMDOffset : 0;
+    let colSMOffset = isNumber(layoutOpts.colSMOffset) ? layoutOpts.colSMOffset : 0;
+    let colXSOffset = isNumber(layoutOpts.colXSOffset) ? layoutOpts.colXSOffset : 0;
+    let multiplier = 1;
+    if (isTurn24) {
+      multiplier = layoutOpts.parentLayout == 'TABLE_24COL' ? 1 : 2;
+    }
+    return {
+      xs: { span: colXS * multiplier, offset: colXSOffset! * multiplier },
+      sm: { span: colSM * multiplier, offset: colSMOffset! * multiplier },
+      md: { span: colMD * multiplier, offset: colMDOffset! * multiplier },
+      lg: { span: colLG * multiplier, offset: colLGOffset! * multiplier },
+    };
+  }
+
+  /**
+   * 格式化栅格的列宽,对超出范围值的作出修改或设置默认值
+   *
+   * @static
+   * @param {*} span 栅格列宽
+   * @param {string} layoutMode 栅格类型(TABLE_24COL,TABLE_12COL)
+   * @returns
+   * @memberof LayoutTool
+   */
+  public static formatColSpan(span: any, layoutMode: string) {
+    let colDefault = layoutMode == 'TABLE_24COL' ? 24 : 12;
+    // 空值传默认值
+    if (!isNumber(span)) {
+      return colDefault;
+    }
+    // 小于0传默认值，大于默认值传默认值，其他传原值
+    if (span < 0 || span > colDefault) {
+      return colDefault;
+    } else {
+      return span;
+    }
+  }
+
+  /**
+   * 使用容器布局逻辑,获得如下返回值
+   * rowStyle flex布局时作为父容器的样式
+   * colStyle flex布局时作为子元素的样式
+   * colGridOpts 栅格布局时作为子元素的占位和偏移
+   *
+   * @static
+   * @param layoutOpts
+   * @return {*}
+   */
+  public static useLayout(layoutOpts: Ref<ILayoutOpts>) {
+    // 创建新的ref对象
+    const layoutResult: Ref<{ rowStyle: string; colStyle: string; colGridOpts: any }> = ref({
+      rowStyle: '',
+      colStyle: '',
+      colGridOpts: {},
+    });
+    watch(
+      layoutOpts,
+      (newVal, oldVal) => {
+        layoutResult.value.rowStyle = this.getRowFlexStyle(newVal);
+        layoutResult.value.colStyle = this.getColFlexStyle(newVal);
+        layoutResult.value.colGridOpts = this.getGridOptions(newVal);
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+    return layoutResult;
+  }
+}

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/core/utils/util.ts

-import { clone } from "ramda";
+import { clone } from 'ramda';
 
 /**
  * @description 克隆方法
@@ -6,8 +6,8 @@ import { clone } from "ramda";
  * @param {Record<any, any>} data
  * @return {*}  {Record<any, any>}
  */
-export function deepCopy(data: Record<any, any>): Record<any, any>{
-  return clone(data)
+export function deepCopy(data: Record<any, any>): Record<any, any> {
+  return clone(data);
 }
 
 /**
@@ -17,7 +17,7 @@ export function deepCopy(data: Record<any, any>): Record<any, any>{
  * @param {*} SecondOBJ 源对象
  * @return {*}
  */
- export function deepObjectMerge(FirstOBJ: any, SecondOBJ: any) {
+export function deepObjectMerge(FirstOBJ: any, SecondOBJ: any) {
   for (var key in SecondOBJ) {
     FirstOBJ[key] =
       FirstOBJ[key] && FirstOBJ[key].toString() === '[object Object]'
@@ -45,7 +45,7 @@ export function dateFormat(date: any, fmt: string = 'YYYY-MM-DD HH:mm:ss'): stri
     'h+': date.getHours().toString(), // 时
     'm+': date.getMinutes().toString(), // 分
     's+': date.getSeconds().toString(), // 秒
-      'S+': date.getSeconds().toString()
+    'S+': date.getSeconds().toString(),
     // 有其他格式化字符需求可以继续添加，必须转化成字符串
   };
   for (let k in opt) {
@@ -63,7 +63,7 @@ export function dateFormat(date: any, fmt: string = 'YYYY-MM-DD HH:mm:ss'): stri
  * @param {*} arg
  * @return {*}  {boolean}
  */
-export function isExist(arg: any): boolean{
+export function isExist(arg: any): boolean {
   return arg !== undefined && arg !== null && arg === arg;
 }
 
@@ -83,7 +83,7 @@ export function isEmpty(value: any): boolean {
  * @param {*} arg
  * @return {*}  {boolean}
  */
-export function notEmpty(arg: any): boolean{
+export function notEmpty(arg: any): boolean {
   return isExist(arg) && arg != '';
 }
 
@@ -93,7 +93,7 @@ export function notEmpty(arg: any): boolean{
  * @param fnName 方法名
  * @return {*}
  */
-export function hasFunction(arg: any, fnName: string): boolean{
+export function hasFunction(arg: any, fnName: string): boolean {
   return arg[fnName] && arg[fnName] instanceof Function;
 }
 
@@ -137,7 +137,7 @@ export function typeOf(obj: any): string {
  * @param {*} value2 对比值
  * @return {*}  {boolean}
  */
- export function verifyValue(value: any, op: any, value2: any): boolean {
+export function verifyValue(value: any, op: any, value2: any): boolean {
   // 等于操作
   if (Object.is(op, 'EQ')) {
     const _value = `${value}`;
@@ -338,17 +338,17 @@ function contains(value: any, value2: any): boolean {
  * 设置sessionStorage数据
  *
  */
- export const setSessionStorage: Function = (key: string, value: any) => {
+export const setSessionStorage: Function = (key: string, value: any) => {
   if (!value) {
     return;
   }
   sessionStorage.setItem(key, JSON.stringify(value));
-}
+};
 
 /**
-* 获取sessionStorage数据
-*
-*/
+ * 获取sessionStorage数据
+ *
+ */
 export const getSessionStorage: Function = (key: string) => {
   if (!key) {
     return null;
@@ -359,12 +359,12 @@ export const getSessionStorage: Function = (key: string) => {
   } else {
     return value;
   }
-}
+};
 
 /**
-* 删除sessionStorage数据
-*
-*/
+ * 删除sessionStorage数据
+ *
+ */
 export const removeSessionStorage: Function = (key: string) => {
   if (!key) {
     return;
@@ -372,4 +372,16 @@ export const removeSessionStorage: Function = (key: string) => {
   if (sessionStorage.getItem(key)) {
     sessionStorage.removeItem(key);
   }
-}
+};
\ No newline at end of file
+
+/**
+ * style对象转换成字符串
+ *
+ */
+export const styleObj2Str: Function = (style: any) => {
+  let s = "";
+  for (let i in style) {
+    s += i + ':' + style[i]+";";
+  }
+  return s;
+};

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/widgets/{{appEntities}}/{{ctrls@PORTLET}}-portlet/{{ctrls@PORTLET}}-portlet-state.ts.hbs

@@ -9,7 +9,7 @@ export const ctrlState = {
   {{#if ctrl.psSysImage.cssClass}}
   iconcls: '{{ctrl.psSysImage.cssClass}}',
   {{else if (ctrl.psSysImage.imagePath)}}
-  imagePath: '{{ctrl.psSysImage.imagePath}}',
+  imgPath: '{{ctrl.psSysImage.imagePath}}',
   {{/if}}
   {{/if}}
   {{#if ctrl.psLayoutPos.height}}
@@ -33,7 +33,7 @@ export const ctrlState = {
       showCaption:{{groupDetail.showCaption}},
       actionName: '{{groupDetail.psUIAction.caption}}', 
       icon: '{{groupDetail.psUIAction.psSysImage.cssClass}}', 
-      imagePath: '{{groupDetail.psUIAction.psSysImage.imagePath}}', 
+      imgPath: '{{groupDetail.psUIAction.psSysImage.imagePath}}', 
       disabled: false, visabled: true, 
       dataAccessAction: {{#if groupDetail.psUIAction.dataAccessAction}}false{{else}}true{{/if}}, 
       getNoPrivDisplayMode: {{#if groupDetail.psUIAction.noPrivDisplayMode}}groupDetail.psUIAction.noPrivDisplayMode{{else}}6{{/if}},