super-page-runtime 3.0.3 → 3.0.5-beta1

package/dist/lib/components/runtime/views/assemblys/chart/gauge/gauge-runtime.vue2.js

@@ -1,6 +1,9 @@
 "use strict";
 const Vue = require("vue");
 const chartUtil = require("../../../../utils/charts/chart-util.js");
+const pageHelperUtil = require("../../../../utils/page-helper-util.js");
+const chartGaugeUtil = require("../../../../utils/charts/chart-gauge-util.js");
+const commonChartHeader_vue_vue_type_script_setup_true_lang = require("../common/common-chart-header.vue.js");
 const index_esm_min = require("../../../../../../node_modules/.pnpm/vue-echarts@6.6.9_echarts@5.5.0_vue@3.4.21/node_modules/vue-echarts/dist/index.esm.min.js");
 const install = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/chart/gauge/install.js");
 const extension = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/extension.js");
@@ -15,23 +18,66 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     pageContext: {},
     configure: {}
   },
-  setup(__props) {
-    extension.use([
-      installCanvasRenderer.install,
-      install.install,
-      install$1.install,
-      install$2.install,
-      install$3.install,
-      install$4.install
-    ]);
+  setup(__props, { expose: __expose }) {
+    extension.use([installCanvasRenderer.install, install.install, install$1.install, install$2.install, install$3.install, install$4.install]);
     const props = __props;
     const thisRef = Vue.ref(null);
+    const chartRef = Vue.ref(null);
+    const headerRef = Vue.ref(null);
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
+    const dataConfig = runtimeInfo.dataConfig;
+    const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
     const chartOption = runtimeInfo.chartOption;
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = chartUtil.getCustomTheme(configureProps.customTheme);
+    chartUtil.initChartOption(props.configure, chartOption);
+    Vue.onMounted(() => {
+      const resultData = pageHelperUtil.getChartDatasFromPage(props.pageContext, props.configure);
+      if (resultData) {
+        updateChartDatas(resultData);
+      }
+    });
+    let hisGroupValue = headerInfo.groupValue;
+    Vue.watch(headerInfo, () => {
+      if (hisGroupValue == headerInfo.groupValue) {
+        return;
+      }
+      hisGroupValue = headerInfo.groupValue;
+      refresh();
+    });
+    function refresh() {
+      if (!dataConfig) {
+        console.log("无数据源配置，不需要查询!");
+        return;
+      }
+      dataConfig.services[0].groupValue = headerInfo.groupValue;
+      pageHelperUtil.updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
+    }
+    const monitorFields = headerInfo.monitorFields;
+    pageHelperUtil.monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
+      }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
+      }
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
+        return;
+      }
+      resultData.hasRender = true;
+      console.log("gauge resultData", resultData);
+      chartGaugeUtil.updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption", chartOption);
+    }
+    __expose({
+      updateChartDatas
+    });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", {
         style: Vue.normalizeStyle(Vue.unref(runtimeStyle)),
@@ -39,8 +85,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         ref_key: "thisRef",
         ref: thisRef
       }, [
+        Vue.withDirectives(Vue.createVNode(commonChartHeader_vue_vue_type_script_setup_true_lang, {
+          ref_key: "headerRef",
+          ref: headerRef,
+          headerInfo: Vue.unref(headerInfo)
+        }, null, 8, ["headerInfo"]), [
+          [Vue.vShow, Vue.unref(headerInfo).showHeader]
+        ]),
         Vue.createVNode(Vue.unref(index_esm_min.default), {
-          ref: "chartRef",
+          ref_key: "chartRef",
+          ref: chartRef,
           theme: Vue.unref(customTheme),
           option: Vue.unref(chartOption),
           autoresize: ""

package/dist/lib/components/runtime/views/assemblys/chart/pie/pie-runtime.vue2.js

@@ -1,6 +1,9 @@
 "use strict";
 const Vue = require("vue");
 const chartUtil = require("../../../../utils/charts/chart-util.js");
+const chartPieUtil = require("../../../../utils/charts/chart-pie-util.js");
+const pageHelperUtil = require("../../../../utils/page-helper-util.js");
+const commonChartHeader_vue_vue_type_script_setup_true_lang = require("../common/common-chart-header.vue.js");
 const index_esm_min = require("../../../../../../node_modules/.pnpm/vue-echarts@6.6.9_echarts@5.5.0_vue@3.4.21/node_modules/vue-echarts/dist/index.esm.min.js");
 const install = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/chart/pie/install.js");
 const extension = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/extension.js");
@@ -16,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     pageContext: {},
     configure: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     extension.use([
       installCanvasRenderer.install,
       install.install,
@@ -28,12 +31,87 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     ]);
     const props = __props;
     const thisRef = Vue.ref(null);
+    const chartRef = Vue.ref(null);
+    const headerRef = Vue.ref(null);
+    const enableDrill = props.configure.props ? props.configure.props.enableDrill : null;
+    const drillEndTrigger = props.configure.props ? props.configure.props.drillEndTrigger : null;
+    const selGroupVariable = props.configure.props ? props.configure.props.selGroupVariable : null;
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
+    const dataConfig = runtimeInfo.dataConfig;
+    const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
     const chartOption = runtimeInfo.chartOption;
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = chartUtil.getCustomTheme(configureProps.customTheme);
+    chartUtil.initChartOption(props.configure, chartOption);
+    Vue.onMounted(() => {
+      const resultData = pageHelperUtil.getChartDatasFromPage(props.pageContext, props.configure);
+      if (resultData) {
+        updateChartDatas(resultData);
+      }
+      if (enableDrill && chartRef.value) {
+        chartRef.value.chart.on("click", function(params) {
+          if (headerRef.value && headerRef.value.drill) {
+            headerRef.value.drill(params, props.configure.cacheDatas);
+          }
+        });
+      }
+      if (!enableDrill && selGroupVariable && chartRef.value) {
+        chartUtil.monitorChartClickToVariable(
+          props.pageContext,
+          props.configure,
+          chartRef.value.chart,
+          selGroupVariable
+        );
+      }
+    });
+    function onDrillEnd(params) {
+      if (drillEndTrigger == "clearDrill") {
+        if (headerRef.value && headerRef.value.closeDrill) {
+          headerRef.value.closeDrill(0);
+        }
+      }
+    }
+    let hisGroupValue = headerInfo.groupValue;
+    Vue.watch(headerInfo, () => {
+      if (hisGroupValue == headerInfo.groupValue) {
+        return;
+      }
+      hisGroupValue = headerInfo.groupValue;
+      refresh();
+    });
+    function refresh() {
+      if (!dataConfig) {
+        console.log("无数据源配置，不需要查询!");
+        return;
+      }
+      dataConfig.services[0].groupValue = headerInfo.groupValue;
+      pageHelperUtil.updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
+    }
+    const monitorFields = headerInfo.monitorFields;
+    pageHelperUtil.monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
+      }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
+      }
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
+        return;
+      }
+      resultData.hasRender = true;
+      console.log("pie resultData", resultData);
+      chartPieUtil.updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption", chartOption);
+    }
+    __expose({
+      updateChartDatas
+    });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", {
         style: Vue.normalizeStyle(Vue.unref(runtimeStyle)),
@@ -41,8 +119,17 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         ref_key: "thisRef",
         ref: thisRef
       }, [
+        Vue.withDirectives(Vue.createVNode(commonChartHeader_vue_vue_type_script_setup_true_lang, {
+          ref_key: "headerRef",
+          ref: headerRef,
+          headerInfo: Vue.unref(headerInfo),
+          onDrillEnd
+        }, null, 8, ["headerInfo"]), [
+          [Vue.vShow, Vue.unref(headerInfo).showHeader]
+        ]),
         Vue.createVNode(Vue.unref(index_esm_min.default), {
-          ref: "chartRef",
+          ref_key: "chartRef",
+          ref: chartRef,
           theme: Vue.unref(customTheme),
           option: Vue.unref(chartOption),
           autoresize: ""

package/dist/lib/components/runtime/views/assemblys/chart/radar/radar-runtime.vue2.js

@@ -1,6 +1,9 @@
 "use strict";
 const Vue = require("vue");
 const chartUtil = require("../../../../utils/charts/chart-util.js");
+const pageHelperUtil = require("../../../../utils/page-helper-util.js");
+const chartRadarUtil = require("../../../../utils/charts/chart-radar-util.js");
+const commonChartHeader_vue_vue_type_script_setup_true_lang = require("../common/common-chart-header.vue.js");
 const index_esm_min = require("../../../../../../node_modules/.pnpm/vue-echarts@6.6.9_echarts@5.5.0_vue@3.4.21/node_modules/vue-echarts/dist/index.esm.min.js");
 const install = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/chart/radar/install.js");
 const extension = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/extension.js");
@@ -16,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     pageContext: {},
     configure: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     extension.use([
       installCanvasRenderer.install,
       install.install,
@@ -28,12 +31,62 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     ]);
     const props = __props;
     const thisRef = Vue.ref(null);
+    const chartRef = Vue.ref(null);
+    const headerRef = Vue.ref(null);
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
+    const dataConfig = runtimeInfo.dataConfig;
+    const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
     const chartOption = runtimeInfo.chartOption;
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = chartUtil.getCustomTheme(configureProps.customTheme);
+    chartUtil.initChartOption(props.configure, chartOption);
+    console.log("chartOption", chartOption);
+    Vue.onMounted(() => {
+      const resultData = pageHelperUtil.getChartDatasFromPage(props.pageContext, props.configure);
+      if (resultData) {
+        updateChartDatas(resultData);
+      }
+    });
+    let hisGroupValue = headerInfo.groupValue;
+    Vue.watch(headerInfo, () => {
+      if (hisGroupValue == headerInfo.groupValue) {
+        return;
+      }
+      hisGroupValue = headerInfo.groupValue;
+      refresh();
+    });
+    function refresh() {
+      if (!dataConfig) {
+        console.log("无数据源配置，不需要查询!");
+        return;
+      }
+      dataConfig.services[0].groupValue = headerInfo.groupValue;
+      pageHelperUtil.updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
+    }
+    const monitorFields = headerInfo.monitorFields;
+    pageHelperUtil.monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
+      }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
+      }
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
+        return;
+      }
+      resultData.hasRender = true;
+      chartRadarUtil.updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption", chartOption);
+    }
+    __expose({
+      updateChartDatas
+    });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", {
         style: Vue.normalizeStyle(Vue.unref(runtimeStyle)),
@@ -41,8 +94,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         ref_key: "thisRef",
         ref: thisRef
       }, [
+        Vue.withDirectives(Vue.createVNode(commonChartHeader_vue_vue_type_script_setup_true_lang, {
+          ref_key: "headerRef",
+          ref: headerRef,
+          headerInfo: Vue.unref(headerInfo)
+        }, null, 8, ["headerInfo"]), [
+          [Vue.vShow, Vue.unref(headerInfo).showHeader]
+        ]),
         Vue.createVNode(Vue.unref(index_esm_min.default), {
-          ref: "chartRef",
+          ref_key: "chartRef",
+          ref: chartRef,
           theme: Vue.unref(customTheme),
           option: Vue.unref(chartOption),
           autoresize: ""

package/dist/lib/components/runtime/views/assemblys/chart/scatter/scatter-runtime.vue2.js

@@ -1,6 +1,9 @@
 "use strict";
 const Vue = require("vue");
 const chartUtil = require("../../../../utils/charts/chart-util.js");
+const pageHelperUtil = require("../../../../utils/page-helper-util.js");
+const chartScatterUtil = require("../../../../utils/charts/chart-scatter-util.js");
+const commonChartHeader_vue_vue_type_script_setup_true_lang = require("../common/common-chart-header.vue.js");
 const index_esm_min = require("../../../../../../node_modules/.pnpm/vue-echarts@6.6.9_echarts@5.5.0_vue@3.4.21/node_modules/vue-echarts/dist/index.esm.min.js");
 const install = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/chart/scatter/install.js");
 const extension = require("../../../../../../node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/lib/extension.js");
@@ -17,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     pageContext: {},
     configure: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     extension.use([
       installCanvasRenderer.install,
       install.install,
@@ -30,12 +33,62 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     ]);
     const props = __props;
     const thisRef = Vue.ref(null);
+    const chartRef = Vue.ref(null);
+    const headerRef = Vue.ref(null);
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
+    const dataConfig = runtimeInfo.dataConfig;
+    const headerInfo = runtimeInfo.headerInfo ? runtimeInfo.headerInfo : {};
     const chartOption = runtimeInfo.chartOption;
     const configureProps = props.configure.props ? props.configure.props : {};
     const customTheme = chartUtil.getCustomTheme(configureProps.customTheme);
+    chartUtil.initChartOption(props.configure, chartOption);
+    console.log("chartOption", chartOption);
+    Vue.onMounted(() => {
+      const resultData = pageHelperUtil.getChartDatasFromPage(props.pageContext, props.configure);
+      if (resultData) {
+        updateChartDatas(resultData);
+      }
+    });
+    let hisGroupValue = headerInfo.groupValue;
+    Vue.watch(headerInfo, () => {
+      if (hisGroupValue == headerInfo.groupValue) {
+        return;
+      }
+      hisGroupValue = headerInfo.groupValue;
+      refresh();
+    });
+    function refresh() {
+      if (!dataConfig) {
+        console.log("无数据源配置，不需要查询!");
+        return;
+      }
+      dataConfig.services[0].groupValue = headerInfo.groupValue;
+      pageHelperUtil.updateChartDatasources(props.pageContext, [dataConfig], headerInfo.drillParams);
+    }
+    const monitorFields = headerInfo.monitorFields;
+    pageHelperUtil.monitorFieldChange(props.pageContext, monitorFields, refresh);
+    function updateChartDatas(resultData) {
+      if (!resultData) {
+        resultData = [];
+      }
+      resultData = resultData.length > 0 ? resultData[0] : {};
+      if (!resultData) {
+        resultData = {};
+      }
+      if (resultData.hasRender) {
+        resultData.hasRender = true;
+        console.log("重复更新!", resultData);
+        return;
+      }
+      resultData.hasRender = true;
+      chartScatterUtil.updateChartOption(props.pageContext, props.configure, chartOption, resultData);
+      console.log("chartOption scatter", chartOption);
+    }
+    __expose({
+      updateChartDatas
+    });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", {
         style: Vue.normalizeStyle(Vue.unref(runtimeStyle)),
@@ -43,8 +96,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         ref_key: "thisRef",
         ref: thisRef
       }, [
+        Vue.withDirectives(Vue.createVNode(commonChartHeader_vue_vue_type_script_setup_true_lang, {
+          ref_key: "headerRef",
+          ref: headerRef,
+          headerInfo: Vue.unref(headerInfo)
+        }, null, 8, ["headerInfo"]), [
+          [Vue.vShow, Vue.unref(headerInfo).showHeader]
+        ]),
         Vue.createVNode(Vue.unref(index_esm_min.default), {
-          ref: "chartRef",
+          ref_key: "chartRef",
+          ref: chartRef,
           theme: Vue.unref(customTheme),
           option: Vue.unref(chartOption),
           autoresize: ""

package/dist/lib/components/runtime/views/assemblys/common/remove-signer-dialog.vue.d.ts

@@ -8,8 +8,8 @@ declare const _default: import('vue').DefineComponent<{
         default: any;
     };
 }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
     result: (...args: any[]) => void;
+    close: (...args: any[]) => void;
     open: (...args: any[]) => void;
     opend: (...args: any[]) => void;
     closed: (...args: any[]) => void;

package/dist/lib/components/runtime/views/assemblys/common/task-informition-dialog.vue.d.ts

@@ -4,8 +4,8 @@ declare const _default: import('vue').DefineComponent<{
         default: any;
     };
 }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
     result: (...args: any[]) => void;
+    close: (...args: any[]) => void;
     open: (...args: any[]) => void;
     opend: (...args: any[]) => void;
     closed: (...args: any[]) => void;

package/dist/lib/components/runtime/views/assemblys/common/task-informition-dialog.vue.js

@@ -25,7 +25,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         });
         return;
       }
-      emits("result", this.selections[0]);
+      emits("result", selections.value[0]);
     }
     function select(selection) {
       selections.value = selection;

package/dist/lib/components/runtime/views/assemblys/container/card/card-runtime.vue2.js

@@ -1,6 +1,6 @@
 "use strict";
 const Vue = require("vue");
-const superUi = require("../../../../../../node_modules/.pnpm/agilebuilder-ui@1.0.13_vue@3.4.21/node_modules/agilebuilder-ui/lib/super-ui.js");
+const superUi = require("../../../../../../node_modules/.pnpm/agilebuilder-ui@1.0.26_vue@3.4.21/node_modules/agilebuilder-ui/lib/super-ui.js");
 const objectRender_vue_vue_type_script_setup_true_lang = require("../../object-render.vue.js");
 const index = require("../../../../../../node_modules/.pnpm/element-plus@2.6.2_vue@3.4.21/node_modules/element-plus/es/components/card/index.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
     const headerStyle = runtimeInfo.headerStyle;
-    const contentClass = runtimeInfo.contentClass;
+    const contentStyle = runtimeInfo.contentStyle;
     function test() {
       props.configure.props.title = "teee";
     }
@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       }, Vue.createSlots({
         default: Vue.withCtx(() => [
           Vue.createElementVNode("div", {
-            class: Vue.normalizeClass(Vue.unref(contentClass))
+            style: Vue.normalizeStyle(Vue.unref(contentStyle))
           }, [
             (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(_ctx.configure.items, (element, itemIndex) => {
               return Vue.openBlock(), Vue.createBlock(objectRender_vue_vue_type_script_setup_true_lang, {
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
                 configure: element
               }, null, 8, ["pageContext", "configure"]);
             }), 128))
-          ], 2)
+          ], 4)
         ]),
         _: 2
       }, [

package/dist/lib/components/runtime/views/assemblys/container/flex/flex-runtime.vue2.js

@@ -1,7 +1,7 @@
 "use strict";
 const Vue = require("vue");
 const objectRender_vue_vue_type_script_setup_true_lang = require("../../object-render.vue.js");
-require("../../../../utils/global-refs.js");
+const pageDesignTypes = require("../../../../utils/interfaces/page-design-types.js");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "flex-runtime",
   props: {
@@ -14,25 +14,52 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeStyle = runtimeInfo.style;
     const runtimeClass = runtimeInfo.class;
-    const designProperty = runtimeInfo.props ? runtimeInfo.props : {};
+    const designProperty = Vue.ref(runtimeInfo.props ? runtimeInfo.props : {});
+    if (props.configure.items) {
+      const pageDimensions = props.pageContext && props.pageContext.dimensions ? props.pageContext.dimensions : pageDesignTypes.PageDimensions.PC;
+      for (let item of props.configure.items) {
+        const itemCommon = item.runtime && item.runtime.common ? item.runtime.common : {};
+        const sizeStyle = itemCommon.style ? itemCommon.style[pageDimensions + "_style"] : void 0;
+        const itemStyle = {};
+        if (sizeStyle) {
+          item.flexSpan = sizeStyle.flexSpan ? sizeStyle.flexSpan : -2;
+          Object.assign(itemStyle, sizeStyle);
+          delete itemStyle.height;
+          delete sizeStyle.width;
+        }
+        item.itemStyle = itemStyle;
+        if (itemCommon.style) {
+          itemCommon.style[pageDimensions + "_class"] = "";
+        }
+      }
+    }
     return (_ctx, _cache) => {
+      const _component_el_col = Vue.resolveComponent("el-col");
       const _component_el_row = Vue.resolveComponent("el-row");
       return Vue.openBlock(), Vue.createBlock(_component_el_row, {
         ref_key: "thisRef",
         ref: thisRef,
-        justify: Vue.unref(designProperty).flexJustify,
-        gutter: Vue.unref(designProperty).flexGutter,
-        align: Vue.unref(designProperty).alignItems,
-        style: Vue.normalizeStyle(Vue.unref(runtimeStyle)),
+        justify: designProperty.value.flexJustify,
+        gutter: designProperty.value.flexGutter,
+        align: designProperty.value.alignItems,
+        style: Vue.normalizeStyle([{ "display": "flex" }, Vue.unref(runtimeStyle)]),
         class: Vue.normalizeClass(Vue.unref(runtimeClass))
       }, {
         default: Vue.withCtx(() => [
           (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(_ctx.configure.items, (element, itemIndex) => {
-            return Vue.openBlock(), Vue.createBlock(objectRender_vue_vue_type_script_setup_true_lang, {
+            return Vue.openBlock(), Vue.createBlock(_component_el_col, {
               key: element.uuid,
-              pageContext: _ctx.pageContext,
-              configure: element
-            }, null, 8, ["pageContext", "configure"]);
+              style: Vue.normalizeStyle(element.itemStyle),
+              span: element.flexSpan
+            }, {
+              default: Vue.withCtx(() => [
+                Vue.createVNode(objectRender_vue_vue_type_script_setup_true_lang, {
+                  pageContext: _ctx.pageContext,
+                  configure: element
+                }, null, 8, ["pageContext", "configure"])
+              ]),
+              _: 2
+            }, 1032, ["style", "span"]);
           }), 128))
         ]),
         _: 1

package/dist/lib/components/runtime/views/assemblys/container/form/form-runtime.vue2.js

@@ -15,8 +15,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     }
     const runtimeInfo = props.configure.runtime ? props.configure.runtime : {};
     const runtimeProps = runtimeInfo.props ? runtimeInfo.props : {};
-    const runtimeStyle = runtimeInfo.style;
+    const runtimeStyle = Vue.ref(runtimeInfo.style ? runtimeInfo.style : {});
     const runtimeClass = runtimeInfo.class;
+    const titleStyle = Vue.ref(runtimeInfo.titleStyle ? runtimeInfo.titleStyle : {});
     return (_ctx, _cache) => {
       const _component_el_form = Vue.resolveComponent("el-form");
       return Vue.openBlock(), Vue.createBlock(_component_el_form, {
@@ -24,10 +25,15 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         "label-width": Vue.unref(runtimeProps).labelWidth,
         "label-position": Vue.unref(runtimeProps).labelPosition,
         size: Vue.unref(runtimeProps).componentSize,
-        style: Vue.normalizeStyle(Vue.unref(runtimeStyle)),
+        style: Vue.normalizeStyle(runtimeStyle.value),
         class: Vue.normalizeClass(Vue.unref(runtimeClass))
       }, {
         default: Vue.withCtx(() => [
+          Vue.unref(runtimeProps).formTitle ? (Vue.openBlock(), Vue.createElementBlock("div", {
+            key: 0,
+            class: "amb-widget-form-title",
+            style: Vue.normalizeStyle(titleStyle.value)
+          }, Vue.toDisplayString(Vue.unref(runtimeProps).formTitle), 5)) : Vue.createCommentVNode("", true),
           (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(_ctx.configure.items, (element, itemIndex) => {
             return Vue.openBlock(), Vue.createBlock(objectRender_vue_vue_type_script_setup_true_lang, {
               key: element.uuid,