@tmagic/editor 1.7.0-beta.2 → 1.7.0-beta.3

package/dist/style.css

@@ -305,6 +305,17 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-group-list .m-fields-group-list-item:last-of-type {
   border-bottom: 0;
 }
+.m-fields-group-list .tmagic-design-card .el-card__header {
+  padding: 5px 20px;
+}
+.m-fields-group-list .tmagic-design-card .t-card__header {
+  padding: 5px 0;
+}
+.m-fields-group-list .m-fields-group-list-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
 
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
@@ -326,11 +337,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table-wrap {
   width: 100%;
 }
-
-.m-fields-table {
-  width: 100%;
-}
-.m-fields-table.fixed {
+.m-fields-table-wrap.fixed {
   position: fixed;
   height: 100%;
   overflow: auto;
@@ -340,16 +347,22 @@ fieldset.m-fieldset .m-form-tip {
   bottom: 0;
   z-index: 100;
   background: rgba(0, 0, 0, 0.5);
+  align-items: center;
+  display: flex;
 }
-.m-fields-table.fixed > .el-form-item__content {
+.m-fields-table-wrap.fixed > .el-form-item__content {
   z-index: 101;
   position: relative;
   margin: 10vh auto;
   max-width: fit-content;
 }
-.m-fields-table.fixed table {
+.m-fields-table-wrap.fixed table {
   width: 95vw !important;
 }
+
+.m-fields-table {
+  width: 100%;
+}
 .m-fields-table th {
   background-color: #f2f2f2 !important;
   color: #333 !important;

package/dist/tmagic-editor.js

@@ -1,7 +1,7 @@
 import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, tMagicMessage, getDesignConfig, TMagicSelect, useZIndex, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicInput, TMagicTag, TMagicDialog, TMagicSwitch, TMagicCollapse, TMagicCollapseItem, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 export * from '@tmagic/design';
 export { default as designPlugin } from '@tmagic/design';
-import formPlugin__default, { MContainer, defineFormConfig, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel, createForm } from '@tmagic/form';
+import formPlugin__default, { MContainer, defineFormConfig, MForm, filterFunction, MSelect, createValues, MFormBox, MCascader, MGroupList, MPanel, createForm } from '@tmagic/form';
 export * from '@tmagic/form';
 export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
@@ -3324,40 +3324,29 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
           }));
         }
         return [];
-      },
-      onChange: (formState, codeId, { setModel, model }) => {
-        paramsConfig.value = getParamItemsConfig(codeId);
-        if (paramsConfig.value.length) {
-          setModel("params", createValues(formState, paramsConfig.value, {}, model.params));
-        } else {
-          setModel("params", {});
-        }
-        return codeId;
       }
     };
-    const onCodeIdChangeHandler = (value, eventData) => {
-      props.model.params = value.params;
-      emit("change", props.model, {
-        changeRecords: eventData.changeRecords?.map((item) => ({
-          prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
-          value: item.value
-        })) || [
-          {
-            propPath: props.prop,
-            value: value[props.name]
-          }
-        ]
+    const onCodeIdChangeHandler = (value) => {
+      paramsConfig.value = getParamItemsConfig(value);
+      const changeRecords = [
+        {
+          propPath: props.prop,
+          value
+        }
+      ];
+      changeRecords.push({
+        propPath: props.prop.replace(`${props.name}`, "params"),
+        value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {}
+      });
+      emit("change", value, {
+        changeRecords
       });
     };
     const onParamsChangeHandler = (value, eventData) => {
-      props.model.params = value.params;
-      emit("change", props.model, {
-        ...eventData,
-        changeRecords: (eventData.changeRecords || []).map((item) => ({
-          prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
-          value: item.value
-        }))
+      eventData.changeRecords?.forEach((record) => {
+        record.propPath = `${props.prop.replace(`${props.name}`, "")}${record.propPath}`;
       });
+      emit("change", props.model[props.name], eventData);
     };
     const editCode = (id) => {
       eventBus?.emit("edit-code", id);
@@ -3366,13 +3355,15 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$Z, [
         createElementVNode("div", _hoisted_2$n, [
           createCommentVNode(" 代码块下拉框 "),
-          createVNode(unref(MContainer), {
+          createVNode(unref(MSelect), {
             class: "select",
             config: selectConfig,
+            name: __props.name,
             model: __props.model,
             size: __props.size,
+            prop: __props.prop,
             onChange: onCodeIdChangeHandler
-          }, null, 8, ["model", "size"]),
+          }, null, 8, ["name", "model", "size", "prop"]),
           createCommentVNode(" 查看/编辑按钮 "),
           __props.model[__props.name] && hasCodeBlockSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
             key: 0,
@@ -3395,9 +3386,10 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
           key: __props.model[__props.name],
           model: __props.model,
           size: __props.size,
+          disabled: __props.disabled,
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
-        }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("v-if", true)
+        }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("v-if", true)
       ]);
     };
   }
@@ -3457,8 +3449,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicSelect), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         clearable: "",
         filterable: "",
         size: __props.size,
@@ -3497,7 +3488,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "size", "disabled"]);
+      }, 8, ["model-value", "size", "disabled"]);
     };
   }
 });
@@ -5743,14 +5734,6 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
       }));
     };
     const paramsConfig = ref(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
-    const setParamsConfig = (dataSourceMethod, formState = {}, setModel) => {
-      paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
-      if (paramsConfig.value.length) {
-        setModel("params", createValues(formState, paramsConfig.value, {}, props.model.params));
-      } else {
-        setModel("params", {});
-      }
-    };
     const methodsOptions = computed(
       () => dataSources.value?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length)?.map((ds) => ({
         label: ds.title || ds.id,
@@ -5766,17 +5749,29 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     );
     const cascaderConfig = computed(() => ({
       type: "cascader",
-      name: props.name,
-      options: methodsOptions.value,
-      disable: props.disabled,
-      onChange: (formState, dataSourceMethod, { setModel }) => {
-        setParamsConfig(dataSourceMethod, formState, setModel);
-        return dataSourceMethod;
-      }
+      options: methodsOptions.value
     }));
     const onChangeHandler = (value) => {
-      props.model.params = value.params;
-      emit("change", props.model);
+      paramsConfig.value = getParamItemsConfig(value);
+      const changeRecords = [
+        {
+          propPath: props.prop,
+          value
+        }
+      ];
+      changeRecords.push({
+        propPath: props.prop.replace(`${props.name}`, "params"),
+        value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {}
+      });
+      emit("change", value, {
+        changeRecords
+      });
+    };
+    const onParamsChangeHandler = (value, eventData) => {
+      eventData.changeRecords?.forEach((record) => {
+        record.propPath = `${props.prop.replace(`${props.name}`, "")}${record.propPath}`;
+      });
+      emit("change", props.model[props.name], eventData);
     };
     const editCodeHandler = () => {
       const [id] = props.model[props.name];
@@ -5787,13 +5782,16 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$R, [
         createElementVNode("div", _hoisted_2$i, [
-          createVNode(unref(MContainer), {
+          createVNode(unref(MCascader), {
             class: "select",
             config: cascaderConfig.value,
             model: __props.model,
+            name: __props.name,
             size: __props.size,
+            disabled: __props.disabled,
+            prop: __props.prop,
             onChange: onChangeHandler
-          }, null, 8, ["config", "model", "size"]),
+          }, null, 8, ["config", "model", "name", "size", "disabled", "prop"]),
           __props.model[__props.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             content: notEditable.value ? "查看" : "编辑"
@@ -5818,13 +5816,13 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
           }, 8, ["content"])) : createCommentVNode("v-if", true)
         ]),
         paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$1m, {
-          key: 0,
           name: "params",
+          key: __props.model[__props.name],
           model: __props.model,
           size: __props.size,
           disabled: __props.disabled,
           "params-config": paramsConfig.value,
-          onChange: onChangeHandler
+          onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("v-if", true)
       ]);
     };
@@ -6450,7 +6448,6 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         display: (mForm, { model }) => model.actionType === ActionType.COMP,
         onChange: (MForm, v, { setModel }) => {
           setModel("method", "");
-          return v;
         }
       };
       return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
@@ -6869,13 +6866,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const { editorService } = useServices();
     const emit = __emit;
-    const props = __props;
     const pageList = computed(
       () => editorService.get("root")?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT)
     );
     const selectConfig = {
       type: "select",
-      name: props.name,
       options: () => {
         if (pageList.value) {
           return pageList.value.map((item) => ({
@@ -6887,24 +6882,26 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
         return [];
       }
     };
-    const changeHandler = async () => {
-      emit("change", props.model[props.name]);
+    const changeHandler = (v) => {
+      emit("change", v);
     };
     const editPageFragment = (id) => {
       editorService.select(id);
     };
     return (_ctx, _cache) => {
-      const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$L, [
         createElementVNode("div", _hoisted_2$e, [
           createCommentVNode(" 页面片下拉框 "),
-          createVNode(_component_m_form_container, {
+          createVNode(unref(MSelect), {
             class: "select",
             config: selectConfig,
             model: __props.model,
+            name: __props.name,
             size: __props.size,
+            prop: __props.prop,
+            disabled: __props.disabled,
             onChange: changeHandler
-          }, null, 8, ["model", "size"]),
+          }, null, 8, ["model", "name", "size", "prop", "disabled"]),
           createCommentVNode(" 编辑按钮 "),
           __props.model[__props.name] ? (openBlock(), createBlock(_sfc_main$1r, {
             key: 0,
@@ -8212,7 +8209,6 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         id = getIdFromEl()(detail) || id;
       }
       if (id) {
-        props.model[props.name] = id;
         emit("change", id);
         mForm?.$emit("field-change", props.prop, id);
       }
@@ -8231,7 +8227,6 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
     const deleteHandler = () => {
       if (props.model) {
-        props.model[props.name] = "";
         emit("change", "");
         mForm?.$emit("field-change", props.prop, "");
       }

package/dist/tmagic-editor.umd.cjs

@@ -8117,40 +8117,29 @@
             }));
           }
           return [];
-        },
-        onChange: (formState, codeId, { setModel, model }) => {
-          paramsConfig.value = getParamItemsConfig(codeId);
-          if (paramsConfig.value.length) {
-            setModel("params", formPlugin.createValues(formState, paramsConfig.value, {}, model.params));
-          } else {
-            setModel("params", {});
-          }
-          return codeId;
         }
       };
-      const onCodeIdChangeHandler = (value, eventData) => {
-        props.model.params = value.params;
-        emit("change", props.model, {
-          changeRecords: eventData.changeRecords?.map((item) => ({
-            prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
-            value: item.value
-          })) || [
-            {
-              propPath: props.prop,
-              value: value[props.name]
-            }
-          ]
+      const onCodeIdChangeHandler = (value) => {
+        paramsConfig.value = getParamItemsConfig(value);
+        const changeRecords = [
+          {
+            propPath: props.prop,
+            value
+          }
+        ];
+        changeRecords.push({
+          propPath: props.prop.replace(`${props.name}`, "params"),
+          value: paramsConfig.value.length ? formPlugin.createValues(mForm, paramsConfig.value, {}, props.model.params) : {}
+        });
+        emit("change", value, {
+          changeRecords
         });
       };
       const onParamsChangeHandler = (value, eventData) => {
-        props.model.params = value.params;
-        emit("change", props.model, {
-          ...eventData,
-          changeRecords: (eventData.changeRecords || []).map((item) => ({
-            prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
-            value: item.value
-          }))
+        eventData.changeRecords?.forEach((record) => {
+          record.propPath = `${props.prop.replace(`${props.name}`, "")}${record.propPath}`;
         });
+        emit("change", props.model[props.name], eventData);
       };
       const editCode = (id) => {
         eventBus?.emit("edit-code", id);
@@ -8159,13 +8148,15 @@
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
           vue.createElementVNode("div", _hoisted_2$n, [
             vue.createCommentVNode(" 代码块下拉框 "),
-            vue.createVNode(vue.unref(formPlugin.MContainer), {
+            vue.createVNode(vue.unref(formPlugin.MSelect), {
               class: "select",
               config: selectConfig,
+              name: __props.name,
               model: __props.model,
               size: __props.size,
+              prop: __props.prop,
               onChange: onCodeIdChangeHandler
-            }, null, 8, ["model", "size"]),
+            }, null, 8, ["name", "model", "size", "prop"]),
             vue.createCommentVNode(" 查看/编辑按钮 "),
             __props.model[__props.name] && hasCodeBlockSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
               key: 0,
@@ -8188,9 +8179,10 @@
             key: __props.model[__props.name],
             model: __props.model,
             size: __props.size,
+            disabled: __props.disabled,
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
-          }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("v-if", true)
+          }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("v-if", true)
         ]);
       };
     }
@@ -8250,8 +8242,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicSelect), {
-          modelValue: __props.model[__props.name],
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+          "model-value": __props.model[__props.name],
           clearable: "",
           filterable: "",
           size: __props.size,
@@ -8290,7 +8281,7 @@
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue", "size", "disabled"]);
+        }, 8, ["model-value", "size", "disabled"]);
       };
     }
   });
@@ -10536,14 +10527,6 @@
         }));
       };
       const paramsConfig = vue.ref(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
-      const setParamsConfig = (dataSourceMethod, formState = {}, setModel) => {
-        paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
-        if (paramsConfig.value.length) {
-          setModel("params", formPlugin.createValues(formState, paramsConfig.value, {}, props.model.params));
-        } else {
-          setModel("params", {});
-        }
-      };
       const methodsOptions = vue.computed(
         () => dataSources.value?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length)?.map((ds) => ({
           label: ds.title || ds.id,
@@ -10559,17 +10542,29 @@
       );
       const cascaderConfig = vue.computed(() => ({
         type: "cascader",
-        name: props.name,
-        options: methodsOptions.value,
-        disable: props.disabled,
-        onChange: (formState, dataSourceMethod, { setModel }) => {
-          setParamsConfig(dataSourceMethod, formState, setModel);
-          return dataSourceMethod;
-        }
+        options: methodsOptions.value
       }));
       const onChangeHandler = (value) => {
-        props.model.params = value.params;
-        emit("change", props.model);
+        paramsConfig.value = getParamItemsConfig(value);
+        const changeRecords = [
+          {
+            propPath: props.prop,
+            value
+          }
+        ];
+        changeRecords.push({
+          propPath: props.prop.replace(`${props.name}`, "params"),
+          value: paramsConfig.value.length ? formPlugin.createValues(mForm, paramsConfig.value, {}, props.model.params) : {}
+        });
+        emit("change", value, {
+          changeRecords
+        });
+      };
+      const onParamsChangeHandler = (value, eventData) => {
+        eventData.changeRecords?.forEach((record) => {
+          record.propPath = `${props.prop.replace(`${props.name}`, "")}${record.propPath}`;
+        });
+        emit("change", props.model[props.name], eventData);
       };
       const editCodeHandler = () => {
         const [id] = props.model[props.name];
@@ -10580,13 +10575,16 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
           vue.createElementVNode("div", _hoisted_2$i, [
-            vue.createVNode(vue.unref(formPlugin.MContainer), {
+            vue.createVNode(vue.unref(formPlugin.MCascader), {
               class: "select",
               config: cascaderConfig.value,
               model: __props.model,
+              name: __props.name,
               size: __props.size,
+              disabled: __props.disabled,
+              prop: __props.prop,
               onChange: onChangeHandler
-            }, null, 8, ["config", "model", "size"]),
+            }, null, 8, ["config", "model", "name", "size", "disabled", "prop"]),
             __props.model[__props.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               content: notEditable.value ? "查看" : "编辑"
@@ -10611,13 +10609,13 @@
             }, 8, ["content"])) : vue.createCommentVNode("v-if", true)
           ]),
           paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$1m, {
-            key: 0,
             name: "params",
+            key: __props.model[__props.name],
             model: __props.model,
             size: __props.size,
             disabled: __props.disabled,
             "params-config": paramsConfig.value,
-            onChange: onChangeHandler
+            onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("v-if", true)
         ]);
       };
@@ -11243,7 +11241,6 @@
           display: (mForm, { model }) => model.actionType === core.ActionType.COMP,
           onChange: (MForm, v, { setModel }) => {
             setModel("method", "");
-            return v;
           }
         };
         return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
@@ -11662,13 +11659,11 @@
     setup(__props, { emit: __emit }) {
       const { editorService } = useServices();
       const emit = __emit;
-      const props = __props;
       const pageList = vue.computed(
         () => editorService.get("root")?.items.filter((item) => item.type === core.NodeType.PAGE_FRAGMENT)
       );
       const selectConfig = {
         type: "select",
-        name: props.name,
         options: () => {
           if (pageList.value) {
             return pageList.value.map((item) => ({
@@ -11680,24 +11675,26 @@
           return [];
         }
       };
-      const changeHandler = async () => {
-        emit("change", props.model[props.name]);
+      const changeHandler = (v) => {
+        emit("change", v);
       };
       const editPageFragment = (id) => {
         editorService.select(id);
       };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createCommentVNode(" 页面片下拉框 "),
-            vue.createVNode(_component_m_form_container, {
+            vue.createVNode(vue.unref(formPlugin.MSelect), {
               class: "select",
               config: selectConfig,
               model: __props.model,
+              name: __props.name,
               size: __props.size,
+              prop: __props.prop,
+              disabled: __props.disabled,
               onChange: changeHandler
-            }, null, 8, ["model", "size"]),
+            }, null, 8, ["model", "name", "size", "prop", "disabled"]),
             vue.createCommentVNode(" 编辑按钮 "),
             __props.model[__props.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
               key: 0,
@@ -13005,7 +13002,6 @@
           id = utils.getIdFromEl()(detail) || id;
         }
         if (id) {
-          props.model[props.name] = id;
           emit("change", id);
           mForm?.$emit("field-change", props.prop, id);
         }
@@ -13024,7 +13020,6 @@
       };
       const deleteHandler = () => {
         if (props.model) {
-          props.model[props.name] = "";
           emit("change", "");
           mForm?.$emit("field-change", props.prop, "");
         }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0-beta.2",
+  "version": "1.7.0-beta.3",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.2",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.0-beta.2",
-    "@tmagic/form": "1.7.0-beta.2",
-    "@tmagic/stage": "1.7.0-beta.2",
-    "@tmagic/table": "1.7.0-beta.2",
-    "@tmagic/utils": "1.7.0-beta.2"
+    "@tmagic/design": "1.7.0-beta.3",
+    "@tmagic/form": "1.7.0-beta.3",
+    "@tmagic/stage": "1.7.0-beta.3",
+    "@tmagic/table": "1.7.0-beta.3",
+    "@tmagic/utils": "1.7.0-beta.3"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.22",
-    "@tmagic/core": "1.7.0-beta.2"
+    "@tmagic/core": "1.7.0-beta.3"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/CodeSelectCol.vue

@@ -2,13 +2,15 @@
   <div class="m-fields-code-select-col">
     <div class="code-select-container">
       <!-- 代码块下拉框 -->
-      <MContainer
+      <MSelect
         class="select"
         :config="selectConfig"
+        :name="name"
         :model="model"
         :size="size"
+        :prop="prop"
         @change="onCodeIdChangeHandler"
-      ></MContainer>
+      ></MSelect>
 
       <!-- 查看/编辑按钮 -->
       <TMagicButton
@@ -28,6 +30,7 @@
       :key="model[name]"
       :model="model"
       :size="size"
+      :disabled="disabled"
       :params-config="paramsConfig"
       @change="onParamsChangeHandler"
     ></CodeParams>
@@ -48,7 +51,8 @@ import {
   type FieldProps,
   filterFunction,
   type FormState,
-  MContainer,
+  MSelect,
+  type SelectConfig,
 } from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
@@ -108,7 +112,7 @@ watch(
   },
 );
 
-const selectConfig = {
+const selectConfig: SelectConfig = {
   type: 'select',
   name: props.name,
   disable: props.disabled,
@@ -122,33 +126,26 @@ const selectConfig = {
     }
     return [];
   },
-  onChange: (formState: any, codeId: Id, { setModel, model }: any) => {
-    // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-    paramsConfig.value = getParamItemsConfig(codeId);
-
-    if (paramsConfig.value.length) {
-      setModel('params', createValues(formState, paramsConfig.value, {}, model.params));
-    } else {
-      setModel('params', {});
-    }
-
-    return codeId;
-  },
 };
 
-const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
-  props.model.params = value.params;
-
-  emit('change', props.model, {
-    changeRecords: eventData.changeRecords?.map((item) => ({
-      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
-      value: item.value,
-    })) || [
-      {
-        propPath: props.prop,
-        value: value[props.name],
-      },
-    ],
+const onCodeIdChangeHandler = (value: any) => {
+  // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
+  paramsConfig.value = getParamItemsConfig(value);
+
+  const changeRecords = [
+    {
+      propPath: props.prop,
+      value,
+    },
+  ];
+
+  changeRecords.push({
+    propPath: props.prop.replace(`${props.name}`, 'params'),
+    value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {},
+  });
+
+  emit('change', value, {
+    changeRecords,
   });
 };
 
@@ -156,14 +153,10 @@ const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData)
  * 参数值修改更新
  */
 const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
-  props.model.params = value.params;
-  emit('change', props.model, {
-    ...eventData,
-    changeRecords: (eventData.changeRecords || []).map((item) => ({
-      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
-      value: item.value,
-    })),
+  eventData.changeRecords?.forEach((record) => {
+    record.propPath = `${props.prop.replace(`${props.name}`, '')}${record.propPath}`;
   });
+  emit('change', props.model[props.name], eventData);
 };
 
 const editCode = (id: string) => {

package/src/fields/CondOpSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicSelect
-    v-model="model[name]"
+    :model-value="model[name]"
     clearable
     filterable
     :size="size"

package/src/fields/DataSourceMethodSelect.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="m-fields-data-source-method-select">
     <div class="data-source-method-select-container">
-      <MContainer
+      <MCascader
         class="select"
         :config="cascaderConfig"
         :model="model"
+        :name="name"
         :size="size"
+        :disabled="disabled"
+        :prop="prop"
         @change="onChangeHandler"
-      ></MContainer>
+      ></MCascader>
 
       <TMagicTooltip
         v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
@@ -22,11 +25,12 @@
     <CodeParams
       v-if="paramsConfig.length"
       name="params"
+      :key="model[name]"
       :model="model"
       :size="size"
       :disabled="disabled"
       :params-config="paramsConfig"
-      @change="onChangeHandler"
+      @change="onParamsChangeHandler"
     ></CodeParams>
   </div>
 </template>
@@ -38,13 +42,14 @@ import { Edit, View } from '@element-plus/icons-vue';
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import {
+  type CascaderConfig,
+  type ContainerChangeEventData,
   createValues,
   type DataSourceMethodSelectConfig,
   type FieldProps,
   filterFunction,
   type FormState,
-  MContainer,
-  type OnChangeHandlerData,
+  MCascader,
 } from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
@@ -100,21 +105,6 @@ const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']
 
 const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name || 'dataSourceMethod']));
 
-const setParamsConfig = (
-  dataSourceMethod: [Id, string],
-  formState: any = {},
-  setModel: OnChangeHandlerData['setModel'],
-) => {
-  // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-  paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
-
-  if (paramsConfig.value.length) {
-    setModel('params', createValues(formState, paramsConfig.value, {}, props.model.params));
-  } else {
-    setModel('params', {});
-  }
-};
-
 const methodsOptions = computed(
   () =>
     dataSources.value
@@ -132,24 +122,42 @@ const methodsOptions = computed(
       })) || [],
 );
 
-const cascaderConfig = computed(() => ({
+const cascaderConfig = computed<CascaderConfig>(() => ({
   type: 'cascader',
-  name: props.name,
   options: methodsOptions.value,
-  disable: props.disabled,
-  onChange: (formState: any, dataSourceMethod: [Id, string], { setModel }: OnChangeHandlerData) => {
-    setParamsConfig(dataSourceMethod, formState, setModel);
-
-    return dataSourceMethod;
-  },
 }));
 
 /**
  * 参数值修改更新
  */
 const onChangeHandler = (value: any) => {
-  props.model.params = value.params;
-  emit('change', props.model);
+  paramsConfig.value = getParamItemsConfig(value);
+
+  const changeRecords = [
+    {
+      propPath: props.prop,
+      value,
+    },
+  ];
+
+  changeRecords.push({
+    propPath: props.prop.replace(`${props.name}`, 'params'),
+    value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {},
+  });
+
+  emit('change', value, {
+    changeRecords,
+  });
+};
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
+  eventData.changeRecords?.forEach((record) => {
+    record.propPath = `${props.prop.replace(`${props.name}`, '')}${record.propPath}`;
+  });
+  emit('change', props.model[props.name], eventData);
 };
 
 const editCodeHandler = () => {

package/src/fields/EventSelect.vue

@@ -219,7 +219,6 @@ const targetCompConfig = computed(() => {
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     onChange: (MForm: FormState, v: string, { setModel }: OnChangeHandlerData) => {
       setModel('method', '');
-      return v;
     },
   };
   return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };

package/src/fields/PageFragmentSelect.vue

@@ -2,13 +2,16 @@
   <div class="m-fields-page-fragment-select">
     <div class="page-fragment-select-container">
       <!-- 页面片下拉框 -->
-      <m-form-container
+      <MSelect
         class="select"
         :config="selectConfig"
         :model="model"
+        :name="name"
         :size="size"
+        :prop="prop"
+        :disabled="disabled"
         @change="changeHandler"
-      ></m-form-container>
+      ></MSelect>
       <!-- 编辑按钮 -->
       <Icon v-if="model[name]" class="icon" :icon="Edit" @click="editPageFragment(model[name])"></Icon>
     </div>
@@ -20,7 +23,7 @@ import { computed } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { Id, NodeType } from '@tmagic/core';
-import { FieldProps, type PageFragmentSelectConfig } from '@tmagic/form';
+import { FieldProps, MSelect, type PageFragmentSelectConfig, type SelectConfig } from '@tmagic/form';
 
 import Icon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -32,16 +35,16 @@ defineOptions({
 const { editorService } = useServices();
 const emit = defineEmits(['change']);
 
-const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
+withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
   disabled: false,
 });
+
 const pageList = computed(() =>
   editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
 );
 
-const selectConfig = {
+const selectConfig: SelectConfig = {
   type: 'select',
-  name: props.name,
   options: () => {
     if (pageList.value) {
       return pageList.value.map((item) => ({
@@ -53,8 +56,8 @@ const selectConfig = {
     return [];
   },
 };
-const changeHandler = async () => {
-  emit('change', props.model[props.name]);
+const changeHandler = (v: Id) => {
+  emit('change', v);
 };
 
 const editPageFragment = (id: Id) => {

package/src/fields/UISelect.vue

@@ -79,7 +79,6 @@ const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => {
     id = getIdFromEl()(detail as HTMLElement) || id;
   }
   if (id) {
-    props.model[props.name] = id;
     emit('change', id);
     mForm?.$emit('field-change', props.prop, id);
   }
@@ -102,7 +101,6 @@ const startSelect = () => {
 
 const deleteHandler = () => {
   if (props.model) {
-    props.model[props.name] = '';
     emit('change', '');
     mForm?.$emit('field-change', props.prop, '');
   }