update: 容器样式表和表单宽度支持

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" name="{{item.codeName}}" title="{{item.caption}}" v-slot="druipartParams">
+  <AppFormDruipart v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} name="{{item.codeName}}" title="{{item.caption}}" v-slot="druipartParams">
     <{{item.psAppView.codeName}}
       :class="['app-view-layout--from-druipart']"
       :context="druipartParams.context"
@@ -15,7 +15,7 @@
 {{else}}
 <a-col
 {{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormDruipart v-show="state.detailsModel.{{item.codeName}}.visible" name="{{item.codeName}}" title="{{item.caption}}" v-slot="druipartParams">
+  <AppFormDruipart v-show="state.detailsModel.{{item.codeName}}.visible"  {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} name="{{item.codeName}}" title="{{item.caption}}" v-slot="druipartParams">
     <{{item.psAppView.codeName}}
       :class="['app-view-layout--from-druipart']"
       :context="druipartParams.context"

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

@@ -35,6 +35,9 @@
     v-show="state.detailsModel.{{item.codeName}}.visible" 
     name="{{item.codeName}}" 
     title="{{item.caption}}"
+    {{#if item.psSysCss}}
+    class="{{item.psSysCss.cssName}}"
+    {{/if}}
     {{#if item.psSysImage}}
     {{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}"{{else if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}"{{/if}}
     {{/if}}

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

@@ -7,7 +7,7 @@
 {{else}}
 <a-col
 {{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <div v-show="state.detailsModel.{{item.codeName}}.visible" class="app-form-iframe" style="{{#if item.contentHeight}}height: {{item.contentHeight}}px;{{/if}}{{#if item.contentWidth}}width: {{item.contentWidth}}px{{/if}}">
+  <div v-show="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}}">
     <iframe src="{{item.iFrameUrl}}" style="height: 100%;width: 100%;border: 0"></iframe>
   </div>
 </a-col>

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}}
 {{#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" name="{{item.codeName}}" :rules="state.rules.{{item.codeName}}" label="{{item.caption}}">
+  <AppFormItem v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} name="{{item.codeName}}" :rules="state.rules.{{item.codeName}}" :labelWidth="{{item.labelWidth}}" label="{{item.caption}}">
     {{#if item.psEditor}}
     {{>(lookup . 'item.psEditor.editorType') item=item ctrlType="form"}}
     {{/if}}
@@ -10,7 +10,7 @@
 {{else}}
 <a-col
 {{> @macro/front-end/widgets/common/layout-pos.hbs item=item.psLayoutPos}} >
-  <AppFormItem v-show="state.detailsModel.{{item.codeName}}.visible" name="{{item.codeName}}" :rules="state.rules.{{item.codeName}}" :required="state.detailsModel.{{item.codeName}}.required" label="{{item.caption}}">
+  <AppFormItem v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} name="{{item.codeName}}" :rules="state.rules.{{item.codeName}}" :labelWidth="{{item.labelWidth}}" :required="state.detailsModel.{{item.codeName}}.required" label="{{item.caption}}">
     {{#if item.psEditor}}
     {{>(lookup . 'item.psEditor.editorType') item=item ctrlType="form"}}
     {{/if}}

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

-<a-tab-pane v-show="state.detailsModel.{{item.codeName}}.visible" key="{{item.codeName}}" tab="{{item.caption}}">
+<a-tab-pane v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} key="{{item.codeName}}" tab="{{item.caption}}">
   {{#eq item.psLayout.layout "FLEX"}}
   <div class="app-form-layout-flex" style="{{#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 |}}

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

-<a-tab-pane v-show="state.detailsModel.{{item.codeName}}.visible" key="{{item.codeName}}" tab="{{item.caption}}">
+<a-tab-pane v-show="state.detailsModel.{{item.codeName}}.visible" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}} key="{{item.codeName}}" tab="{{item.caption}}">
   {{#eq item.psLayout.layout "FLEX"}}
   <div class="app-form-layout-flex" style="{{#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 |}}

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}};">
+<div style="flex-grow: {{#if item.psLayoutPos.grow}}{{item.psLayoutPos.grow}}{{else}}0{{/if}};" {{#if item.psSysCss}}class="{{item.psSysCss.cssName}}"{{/if}}>
   <a-tabs class="app-form-page">
     {{#each item.psDEFormPages as | formPage | }}
     {{>(lookup . 'formPage.detailType') item=formPage }}

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

@@ -7,6 +7,7 @@ interface FormGroupProps {
   label: string;
   required: boolean;
   rules?: any;
+  labelWidth: number;
 }
 interface FormGroupEmit {
   (name: 'componentEvent', value: IActionParam): void;
@@ -38,11 +39,13 @@ const initRules = () => {
   <a-form-item
     :name="name"
     :rules="itemRules"
-    :label="label"
     :help="error"
     :required="required"
     :validateStatus="error ? 'error' : 'validating'"
   >
+    <template #label>
+      <label :style="{ width: labelWidth + 'px' }">\{{ label }}</label>
+    </template>
     <slot></slot>
   </a-form-item>
 </template>