@tmagic/editor 1.8.0-manmanyu.8 → 1.8.0

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,156 +24,32 @@ import {
   type FieldProps,
   filterFunction,
   type FormState,
-  type GroupListConfig,
   MGroupList,
 } from '@tmagic/form';
 
-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 fieldOnChange = (_formState: FormState | undefined, v: string[], { model }: { model: Record<string, any> }) => {
-  const [id, ...fieldNames] = [...parentFields.value, ...v];
-  const ds = dataSourceService.getDataSourceById(id);
-  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 [dsId, ...keys] = parentFields.value;
-                const ds = dataSourceService.getDataSourceById(dsId);
-                if (!ds) {
-                  return [];
-                }
-
-                let fields = ds.fields || [];
-                keys.forEach((key) => {
-                  const field = fields.find((f) => f.name === key);
-                  fields = field?.fields || [];
-                });
-
-                return getCascaderOptionsFromFields(fields, ['string', 'number', 'boolean', 'any']);
-              },
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              onChange: fieldOnChange,
-            }
-          : {
-              type: 'data-source-field-select',
-              name: 'field',
-              value: 'key',
-              label: '字段',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
-              onChange: fieldOnChange,
-            },
-        {
-          type: 'cond-op-select',
-          parentFields: parentFields.value,
-          label: '条件',
-          width: 140,
-          name: 'op',
-        },
-        {
-          label: '值',
-          width: 160,
-          items: [
-            {
-              name: 'value',
-              type: (_mForm, { model }) => {
-                const [id, ...fieldNames] = [...parentFields.value, ...model.field];
-                const ds = dataSourceService.getDataSourceById(id);
-                const type = getFieldType(ds, fieldNames);
+const config = computed(() => createDisplayCondsConfig(props.config, props.name, parentFields.value));
 
-                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,98 +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="true"
-        :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">
-            <div class="event-item-title">事件{{ Number(entry.index) + 1 }}</div>
             <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 type { EventOption, MComponent, MContainer } from '@tmagic/core';
-import { ActionType } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type {
-  CascaderOption,
-  CodeSelectColConfig,
-  ContainerChangeEventData,
-  DataSourceMethodSelectConfig,
-  DynamicTypeConfig,
-  EventSelectConfig,
-  FieldProps,
-  FormState,
-  PanelConfig,
-  TableConfig,
-  UISelectConfig,
-} from '@tmagic/form';
-import { defineFormItem, MContainer as MFormContainer, MPanel, MTable } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
+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 { getCascaderOptionsFromFields } from '@editor/utils';
+import {
+  createEventNameConfig,
+  createEventSelectConfig,
+  createLegacyTableConfig,
+  isLegacyEventValue,
+} from '@editor/fields/configs/eventSelect';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -118,364 +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) => {
-      let events: EventOption[] | CascaderOption[] = [];
-
-      if (props.config.src === 'component') {
-        events = eventsService.getEvent(formValue.type);
-
-        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
-          const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
-          if (pageFragment) {
-            events = [
-              {
-                label: pageFragment.name || '页面片容器',
-                value: pageFragment.id,
-                children: events,
-              },
-            ];
-            pageFragment.items.forEach((node) => {
-              traverseNode<MComponent | MContainer>(node, (node) => {
-                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
-
-                events.push({
-                  label: `${node.name}_${node.id}`,
-                  value: `${node.id}`,
-                  children: nodeEvents,
-                });
-              });
-            });
-
-            return events;
-          }
-        }
-
-        return events.map((option) => ({
-          text: option.label,
-          value: option.value,
-        }));
-      }
-
-      if (props.config.src === 'datasource') {
-        // 从数据源类型中获取到相关事件
-        events = dataSourceService.getFormEvent(formValue.type);
-        // 从数据源类型和实例中分别获取数据以追加数据变化的事件
-        const dataSource = dataSourceService.getDataSourceById(formValue.id);
-        const fields = dataSource?.fields || [];
-        if (fields.length > 0) {
-          return [
-            ...events,
-            {
-              label: '数据变化',
-              value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
-              children: getCascaderOptionsFromFields(fields),
-            },
-          ];
-        }
-
-        return events;
-      }
-    },
-  };
-  return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
-});
-
-// 联动类型
-const actionTypeConfig = computed(() => {
-  const defaultActionTypeConfig = {
-    name: 'actionType',
-    text: '联动类型',
-    type: 'select',
-    labelPosition: 'left',
-    defaultValue: ActionType.COMP,
-    options: () => {
-      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;
-    },
-  };
-  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', '');
-    },
-  };
-  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) => {
-      const node = editorService.getNodeById(model.to);
-      if (!node?.type) return [];
-
-      let methods: EventOption[] | CascaderOption[] = [];
+const tableConfig = computed(() => createLegacyTableConfig(props.config));
 
-      methods = eventsService.getMethod(node.type, model.to);
+const eventNameConfig = computed(() => createEventNameConfig(props.config));
 
-      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
-        const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
-        if (pageFragment) {
-          methods = [];
-          pageFragment.items.forEach((node: MComponent | MContainer) => {
-            traverseNode<MComponent | MContainer>(node, (node) => {
-              const nodeMethods = (node.type && eventsService.getMethod(node.type, node.id)) || [];
+const eventConfig = computed(() => createEventSelectConfig(props.config, props.name));
 
-              if (nodeMethods.length) {
-                methods.push({
-                  label: `${node.name}_${node.id}`,
-                  value: `${node.id}`,
-                  children: nodeMethods,
-                });
-              }
-            });
-          });
-
-          return methods;
-        }
-      }
-
-      return methods.map((method) => ({
-        text: method.label,
-        value: method.value,
-      }));
-    },
-  };
-  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 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).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 }: any) => {
-            const node = editorService.getNodeById(model.to);
-            if (!node?.type) return [];
-
-            return eventsService.getMethod(node.type, model.to).map((option: any) => ({
-              text: option.label,
-              value: option.value,
-            }));
-          },
-        },
-      ],
-    }) as TableConfig,
-);
-
-// 组件动作组表单配置
-const actionsConfig = computed(
-  () =>
-    defineFormItem({
-      type: 'panel',
-      labelPosition: 'left',
-      flat: true,
-      items: [
-        {
-          type: 'group-list',
-          name: 'actions',
-          expandAll: true,
-          enableToggleMode: false,
-          titlePrefix: '动作',
-          labelPosition: 'left',
-          flat: true,
-          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

@@ -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, FormState, 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';