@tmagic/editor 1.8.0-beta.25 → 1.8.0-beta.26

package/src/fields/DisplayConds.vue

@@ -1,15 +1,17 @@
 <template>
-  <MGroupList
-    style="width: 100%"
-    :config="config"
-    :name="name"
-    :disabled="disabled"
-    :model="model"
-    :last-values="lastValues"
-    :prop="prop"
-    :size="size"
-    @change="changeHandler"
-  ></MGroupList>
+  <div class="m-fields-display-conds">
+    <MGroupList
+      :config="config"
+      :name="name"
+      :disabled="disabled"
+      :model="model"
+      :last-values="lastValues"
+      :is-compare="isCompareMode"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    ></MGroupList>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,174 +24,32 @@ import {
   type FieldProps,
   filterFunction,
   type FormState,
-  type GroupListConfig,
   MGroupList,
 } from '@tmagic/form';
-import { removeDataSourceFieldPrefix } from '@tmagic/utils';
 
-import { useServices } from '@editor/hooks/use-services';
-import { getCascaderOptionsFromFields, getFieldType } from '@editor/utils';
+import { createDisplayCondsConfig } from '@editor/fields/configs/displayConds';
 
 defineOptions({
   name: 'm-fields-display-conds',
 });
 
 const emit = defineEmits<{
-  change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
+  change: [value: DisplayCond | DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
 const props = withDefaults(defineProps<FieldProps<DisplayCondsConfig>>(), {
   disabled: false,
 });
 
-const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 
 const parentFields = computed(() => filterFunction<string[]>(mForm, props.config.parentFields, props) || []);
 
-const resolveFieldPath = (path: string[]) => {
-  const [id, ...fieldNames] = path;
-  const ds = id ? dataSourceService.getDataSourceById(removeDataSourceFieldPrefix(`${id}`)) : undefined;
-  return { ds, fieldNames };
-};
-
-const fieldOnChange = (_formState: FormState | undefined, v: string[], { model }: { model: Record<string, any> }) => {
-  const { ds, fieldNames } = resolveFieldPath([...parentFields.value, ...v]);
-  const type = getFieldType(ds, fieldNames);
-  if (type === 'number') {
-    model.value = Number(model.value);
-  } else if (type === 'boolean') {
-    model.value = Boolean(model.value);
-  } else if (type === 'null') {
-    model.value = null;
-  } else {
-    model.value = `${model.value}`;
-  }
-  return v;
-};
-
-const config = computed<GroupListConfig>(() => ({
-  type: 'groupList',
-  name: props.name,
-  titlePrefix: props.config.titlePrefix,
-  expandAll: true,
-  enableToggleMode: false,
-  flat: props.config.flat,
-  items: [
-    {
-      type: 'table',
-      name: 'cond',
-      operateColWidth: props.config.operateColWidth,
-      enableToggleMode: false,
-      fixed: props.config.fixed,
-      flat: props.config.flat,
-      items: [
-        parentFields.value.length
-          ? {
-              type: 'cascader',
-              options: () => {
-                const { ds, fieldNames } = resolveFieldPath(parentFields.value);
-                if (!ds) {
-                  return [];
-                }
-
-                let fields = ds.fields || [];
-                fieldNames.forEach((key) => {
-                  const field = fields.find((f) => f.name === key);
-                  fields = field?.fields || [];
-                });
+const config = computed(() => createDisplayCondsConfig(props.config, props.name, parentFields.value));
 
-                return getCascaderOptionsFromFields(fields, ['string', 'number', 'boolean', 'any']);
-              },
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              onChange: fieldOnChange,
-              defaultValue: () => [],
-              rules: [
-                { required: true, trigger: 'blur', message: '请选择字段' },
-                { typeMatch: true, trigger: 'change' },
-              ],
-            }
-          : {
-              type: 'data-source-field-select',
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
-              onChange: fieldOnChange,
-              defaultValue: () => [],
-              rules: [
-                { required: true, trigger: 'blur', message: '请选择字段' },
-                { typeMatch: true, trigger: 'change' },
-              ],
-            },
-        {
-          type: 'cond-op-select',
-          parentFields: parentFields.value,
-          label: '条件',
-          width: 140,
-          name: 'op',
-          rules: [
-            { required: true, trigger: 'blur', message: '请选择条件' },
-            { typeMatch: true, trigger: 'change' },
-          ],
-        },
-        {
-          label: '值',
-          width: 160,
-          items: [
-            {
-              name: 'value',
-              type: (_mForm, { model }) => {
-                const { ds, fieldNames } = resolveFieldPath([...parentFields.value, ...(model.field || [])]);
-                const type = getFieldType(ds, fieldNames);
-
-                if (type === 'number') {
-                  return 'number';
-                }
-
-                if (type === 'boolean') {
-                  return 'select';
-                }
-
-                if (type === 'null') {
-                  return 'display';
-                }
-
-                return 'text';
-              },
-              options: [
-                { text: 'true', value: true },
-                { text: 'false', value: false },
-              ],
-              display: (_mForm, { model }) => !['between', 'not_between'].includes(model.op),
-              displayText: (_mForm: FormState | undefined, { model }: any) => {
-                if (model.value === null) {
-                  return 'null';
-                }
-                return model.value;
-              },
-            },
-            {
-              name: 'range',
-              type: 'number-range',
-              display: (vm, { model }) => ['between', 'not_between'].includes(model.op),
-            },
-          ],
-        },
-      ],
-    },
-  ],
-}));
+const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 
 const changeHandler = (v: DisplayCond[], eventData?: ContainerChangeEventData) => {
-  if (!Array.isArray(props.model[props.name])) {
-    props.model[props.name] = [];
-  }
-
   emit('change', v, eventData);
 };
 </script>

package/src/fields/EventSelect.vue

@@ -15,100 +15,50 @@
     <div v-else class="fullWidth event-select-container">
       <div class="event-select-header">
         <div class="event-select-title">事件配置</div>
-        <TMagicButton
-          v-if="!isCompareMode && displayList.length > 0"
-          class="create-button"
-          text
-          type="primary"
-          :icon="Plus"
-          :size="size"
-          :disabled="disabled"
-          @click="addEvent()"
-          >添加事件</TMagicButton
-        >
       </div>
-      <MPanel
-        v-for="entry in displayList"
-        :key="entry.index"
+      <MGroupList
+        :config="eventConfig"
+        :name="name"
         :disabled="disabled"
-        :size="size"
-        :prop="`${prop}.${entry.index}`"
-        :config="actionsConfig"
-        :model="entry.cardItem"
-        :last-values="entry.lastCardItem"
+        :model="model"
+        :last-values="lastValues"
         :is-compare="isCompareMode"
-        :hide-expand="false"
-        :label-width="config.labelWidth || '100px'"
+        :prop="prop"
+        :size="size"
         @change="onChangeHandler"
       >
-        <template #header>
+        <template #title="{ model: itemModel, lastValues: itemLastValues, prop: itemProp }">
           <div class="event-item-header">
             <MFormContainer
               class="fullWidth"
               :config="eventNameConfig"
-              :model="entry.cardItem"
-              :last-values="entry.lastCardItem"
+              :model="itemModel"
+              :last-values="itemLastValues"
               :is-compare="isCompareMode"
               :disabled="disabled"
               :size="size"
-              :prop="`${prop}.${entry.index}`"
-              @change="eventNameChangeHandler"
+              :prop="itemProp"
+              @change="onChangeHandler"
             ></MFormContainer>
-            <TMagicButton
-              class="event-item-delete-button"
-              v-if="!isCompareMode"
-              link
-              :icon="Delete"
-              :disabled="disabled"
-              :size="size"
-              @click="removeEvent(Number(entry.index))"
-            ></TMagicButton>
           </div>
         </template>
-      </MPanel>
-
-      <TMagicButton
-        v-if="!isCompareMode"
-        class="create-button fullWidth"
-        :icon="Plus"
-        :disabled="disabled"
-        @click="addEvent()"
-        >添加事件</TMagicButton
-      >
+      </MGroupList>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Delete } from '@element-plus/icons-vue';
-import { Plus } from '@element-plus/icons-vue';
-import { has } from 'lodash-es';
 
-import { ActionType, MNode } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type {
-  CodeSelectColConfig,
-  ContainerChangeEventData,
-  DataSourceMethodSelectConfig,
-  DynamicTypeConfig,
-  EventSelectConfig,
-  FieldProps,
-  FormState,
-  PanelConfig,
-  TableConfig,
-  UISelectConfig,
-} from '@tmagic/form';
-import { defineFormItem, MContainer as MFormContainer, MPanel, MTable } from '@tmagic/form';
+import type { ContainerChangeEventData, EventSelectConfig, FieldProps } from '@tmagic/form';
+import { MContainer as MFormContainer, MGroupList, MTable } from '@tmagic/form';
 
-import { useServices } from '@editor/hooks/use-services';
 import {
-  getCompActionAllowedValues,
-  getCompActionOptions,
-  getEventNameAllowedValues,
-  getEventNameOptions,
-  normalizeCompActionValue,
-} from '@editor/utils';
+  createEventNameConfig,
+  createEventSelectConfig,
+  createLegacyTableConfig,
+  isLegacyEventValue,
+} from '@editor/fields/configs/eventSelect';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -120,322 +70,25 @@ const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
 }>();
 
-const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
-
-// 事件名称下拉框表单配置
-const eventNameConfig = computed(() => {
-  const defaultEventNameConfig = {
-    name: 'name',
-    text: '事件类型',
-    type: (mForm: FormState | undefined, { formValue }: any) => {
-      if (
-        props.config.src !== 'component' ||
-        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
-      ) {
-        return 'cascader';
-      }
-      return 'select';
-    },
-    labelWidth: '70px',
-    checkStrictly: () => props.config.src !== 'component',
-    valueSeparator: '.',
-    options: (_mForm: FormState, { formValue }: any) => getEventNameOptions(props.config.src, formValue),
-    rules: [
-      {
-        validator: ({ value, callback }: any, { formValue }: any) => {
-          const allowedNames = getEventNameAllowedValues(props.config as any, formValue);
-          if (allowedNames && allowedNames.size > 0 && value && !allowedNames.has(value)) {
-            return callback(`事件名(${value})不存在`);
-          }
-          callback();
-        },
-        trigger: 'blur',
-      },
-    ],
-  };
-  return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
-});
-
-const actionTypeOptions = computed(() => {
-  const o: {
-    text: string;
-    label: string;
-    value: string;
-    disabled?: boolean;
-  }[] = [
-    {
-      text: '组件',
-      label: '组件',
-      value: ActionType.COMP,
-    },
-  ];
-
-  if (!propsService.getDisabledCodeBlock()) {
-    o.push({
-      text: '代码',
-      label: '代码',
-      disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-      value: ActionType.CODE,
-    });
-  }
-
-  if (!propsService.getDisabledDataSource()) {
-    o.push({
-      text: '数据源',
-      label: '数据源',
-      value: ActionType.DATA_SOURCE,
-    });
-  }
-
-  return o;
-});
-
-// 联动类型
-const actionTypeConfig = computed(() => {
-  const defaultActionTypeConfig = {
-    name: 'actionType',
-    text: '联动类型',
-    type: 'select',
-    labelPosition: 'left',
-    defaultValue: ActionType.COMP,
-    options: actionTypeOptions.value,
-    rules: [
-      {
-        required: true,
-        message: '联动类型不能为空',
-      },
-      {
-        typeMatch: true,
-        trigger: 'blur',
-      },
-    ],
-    onChange: (_mForm: FormState, _v: string, { setModel }: any) => {
-      setModel('to', '');
-      setModel('method', '');
-      setModel('codeId', '');
-      setModel('dataSourceMethod', []);
-    },
-  };
-  return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
-});
-
-// 联动组件配置
-const targetCompConfig = computed(() => {
-  const defaultTargetCompConfig: UISelectConfig = {
-    name: 'to',
-    text: '联动组件',
-    type: 'ui-select',
-    labelPosition: 'left',
-    display: (_mForm, { model }) => model.actionType === ActionType.COMP,
-    onChange: (_mForm, _v, { setModel }) => {
-      setModel('method', '');
-    },
-    rules: [
-      {
-        typeMatch: true,
-        trigger: 'blur',
-      },
-    ],
-  };
-  return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
-});
-
-// 联动组件动作配置
-const compActionConfig = computed(() => {
-  const defaultCompActionConfig: DynamicTypeConfig = {
-    name: 'method',
-    text: '动作',
-    labelPosition: 'left',
-    type: (mForm: FormState | undefined, { model }: any) => {
-      const to = editorService.getNodeById(model.to);
-
-      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
-        return 'cascader';
-      }
-
-      return 'select';
-    },
-    checkStrictly: () => props.config.src !== 'component',
-    display: (mForm: FormState | undefined, { model }: any) => model.actionType === ActionType.COMP,
-    options: (_mForm: FormState, { model }: any) => getCompActionOptions(model.to),
-    rules: [
-      {
-        trigger: 'blur',
-        validator: ({ value, callback }: any, { model }: any) => {
-          const allowedMethods = getCompActionAllowedValues(props.config as any, model);
-          const normalized = normalizeCompActionValue(value);
-          if (allowedMethods && allowedMethods.size > 0 && normalized && !allowedMethods.has(normalized)) {
-            return callback(`动作名(${normalized})不存在`);
-          }
-          callback();
-        },
-      },
-    ],
-  };
-  return { ...defaultCompActionConfig, ...props.config.compActionConfig };
-});
-
-// 代码联动配置
-const codeActionConfig = computed(() => {
-  const defaultCodeActionConfig: CodeSelectColConfig = {
-    type: 'code-select-col',
-    text: '代码块',
-    name: 'codeId',
-    notEditable: () => !codeBlockService.getEditStatus(),
-    display: (mForm, { model }) => model.actionType === ActionType.CODE,
-  };
-  return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
-});
+const tableConfig = computed(() => createLegacyTableConfig(props.config));
 
-// 数据源联动配置
-const dataSourceActionConfig = computed(() => {
-  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
-    type: 'data-source-method-select',
-    text: '数据源方法',
-    name: 'dataSourceMethod',
-    notEditable: () => !dataSourceService.get('editable'),
-    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
-  };
-  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
-});
-
-// 兼容旧的数据格式
-const tableConfig = computed(
-  () =>
-    defineFormItem({
-      type: 'table',
-      name: 'events',
-      items: [
-        {
-          name: 'name',
-          label: '事件名',
-          type: eventNameConfig.value.type,
-          options: (mForm: FormState, { formValue }: any) =>
-            eventsService
-              .getEvent(formValue.type, { node: editorService.getNodeById(formValue.id) })
-              .map((option: any) => ({
-                text: option.label,
-                value: option.value,
-              })),
-        },
-        {
-          name: 'to',
-          label: '联动组件',
-          type: 'ui-select',
-        },
-        {
-          name: 'method',
-          label: '动作',
-          type: compActionConfig.value.type,
-          options: (mForm: FormState, { model, formValue }: any) => {
-            const node = editorService.getNodeById(model.to) || (formValue as MNode);
-            if (!node?.type) return [];
+const eventNameConfig = computed(() => createEventNameConfig(props.config));
 
-            return eventsService.getMethod(node.type, { targetId: model.to, node }).map((option: any) => ({
-              text: option.label,
-              value: option.value,
-            }));
-          },
-        },
-      ],
-    }) as TableConfig,
-);
+const eventConfig = computed(() => createEventSelectConfig(props.config, props.name));
 
-// 组件动作组表单配置
-const actionsConfig = computed(
-  () =>
-    defineFormItem({
-      type: 'panel',
-      labelPosition: 'left',
-      items: [
-        {
-          type: 'group-list',
-          name: 'actions',
-          expandAll: true,
-          enableToggleMode: false,
-          titlePrefix: '动作',
-          labelPosition: 'left',
-          items: [
-            actionTypeConfig.value,
-            targetCompConfig.value,
-            compActionConfig.value,
-            codeActionConfig.value,
-            dataSourceActionConfig.value,
-          ],
-        },
-      ],
-    }) as PanelConfig,
-);
-
-// 是否为旧的数据格式
-const isOldVersion = computed(() => {
-  if (props.model[props.name].length === 0) return false;
-  return !has(props.model[props.name][0], 'actions');
-});
+const isOldVersion = computed(() => isLegacyEventValue(props.model[props.name]));
 
 /**
  * 对比模式判定：
  *
- * event-select 内部由「事件列表 + 嵌套子表单」组成，属于复合字段。父级 `MFormContainer` 已将其
- * 归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次本组件，
- * 并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues` 透传给
- * 内部的 MPanel / MFormContainer，逐项（事件名、动作）展示前后差异。
+ * event-select 内部是事件列表 group-list。父级 `MFormContainer` 已将其归入「自接管对比字段」
+ * （见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），对比时只渲染一次本组件，并把 `is-compare` /
+ * `lastValues` 透传给内部 MGroupList 与 title slot 里的事件名表单。
  *
  * 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
  */
 const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 
-/**
- * 待渲染的事件卡片列表。
- *
- * - 非对比模式：直接映射当前事件列表，`lastCardItem` 为空；
- * - 对比模式：按索引对齐当前值与历史值，取两者长度的最大值，使得「新增」（仅当前有）与
- *   「删除」（仅历史有）的事件都能被渲染出来；缺失的一侧用空对象兜底，从而让子级正确高亮差异。
- */
-const displayList = computed<{ cardItem: any; lastCardItem: any; index: number }[]>(() => {
-  const current = props.model[props.name] || [];
-
-  if (!isCompareMode.value) {
-    return current.map((cardItem: any, index: number) => ({ cardItem, lastCardItem: undefined, index }));
-  }
-
-  const last = props.lastValues?.[props.name] || [];
-  const length = Math.max(current.length, last.length);
-
-  return Array.from({ length }, (_, index) => ({
-    cardItem: current[index] ?? {},
-    lastCardItem: last[index] ?? {},
-    index,
-  }));
-});
-
-// 添加事件
-const addEvent = () => {
-  const defaultEvent = {
-    name: '',
-    actions: [],
-  };
-
-  if (!props.model[props.name]) {
-    props.model[props.name] = [];
-  }
-
-  emit('change', defaultEvent, {
-    modifyKey: props.model[props.name].length,
-  });
-};
-
-// 删除事件
-const removeEvent = (index: number) => {
-  if (!props.name) return;
-  props.model[props.name].splice(index, 1);
-  emit('change', props.model[props.name]);
-};
-
-const eventNameChangeHandler = (v: any, eventData: ContainerChangeEventData) => {
-  emit('change', props.model[props.name], eventData);
-};
-
-const onChangeHandler = (v: any, eventData: ContainerChangeEventData) =>
+const onChangeHandler = (_v: any, eventData?: ContainerChangeEventData) =>
   emit('change', props.model[props.name], eventData);
 </script>

package/src/fields/KeyValue.vue

@@ -44,7 +44,7 @@
     </div>
 
     <MagicCodeEditor
-      v-if="config.advanced && showCode && !silentMode"
+      v-if="config.advanced && showCode"
       editor-custom-type="m-fields-key-value"
       language="javascript"
       :init-values="model[name]"
@@ -60,7 +60,7 @@
     ></MagicCodeEditor>
 
     <TMagicButton
-      v-if="config.advanced && !isCompare && !silentMode"
+      v-if="config.advanced && !isCompare"
       size="default"
       :disabled="disabled"
       link
@@ -75,7 +75,7 @@ import { computed, inject, ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import { type FieldProps, FORM_SILENT_MODE_KEY, type FormState, type KeyValueConfig } from '@tmagic/form';
+import { type FieldProps, type FormState, type KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -93,7 +93,6 @@ const emit = defineEmits<{
 }>();
 
 const mForm = inject<FormState | undefined>('mForm');
-const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 
 /** 对比模式下隐藏增删/代码切换等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));