@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.12

package/src/fields/EventSelect.vue

@@ -67,11 +67,9 @@ import { computed } from 'vue';
 import { Delete } 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,
@@ -84,10 +82,15 @@ import type {
   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 { useServices } from '@editor/hooks/use-services';
-import { getCascaderOptionsFromFields } from '@editor/utils';
+import {
+  getCompActionAllowedValues,
+  getCompActionOptions,
+  getEventNameAllowedValues,
+  getEventNameOptions,
+  normalizeCompActionValue,
+} from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -118,68 +121,57 @@ const eventNameConfig = computed(() => {
     labelWidth: '40px',
     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;
+    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})不存在`);
           }
-        }
-
-        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;
-      }
-    },
+          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 = {
@@ -187,39 +179,17 @@ const actionTypeConfig = computed(() => {
     text: '联动类型',
     type: 'select',
     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;
-    },
+    options: actionTypeOptions.value,
+    rules: [
+      {
+        required: true,
+        message: '联动类型不能为空',
+      },
+      {
+        typeMatch: true,
+        trigger: 'blur',
+      },
+    ],
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
 });
@@ -234,6 +204,12 @@ const targetCompConfig = computed(() => {
     onChange: (_MForm, _v, { setModel }) => {
       setModel('method', '');
     },
+    rules: [
+      {
+        typeMatch: true,
+        trigger: 'blur',
+      },
+    ],
   };
   return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
 });
@@ -254,41 +230,20 @@ const compActionConfig = computed(() => {
     },
     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[] = [];
-
-      methods = eventsService.getMethod(node.type, model.to);
-
-      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)) || [];
-
-              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,
-      }));
-    },
+    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 };
 });

package/src/fields/StyleSetter/Index.vue

@@ -7,6 +7,7 @@
           v-if="item.component"
           :is="item.component"
           :values="model[name]"
+          :prop="prop || name"
           :last-values="lastValues?.[name]"
           :is-compare="isCompare"
           :size="size"
@@ -35,7 +36,7 @@ defineOptions({
   name: 'MFieldsStyleSetter',
 });
 
-const props = defineProps<FieldProps<StyleSchema>>();
+defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
@@ -77,13 +78,6 @@ const collapseValue = shallowRef(
 );
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
-  eventData.changeRecords?.forEach((record) => {
-    if (props.prop) {
-      record.propPath = `${props.prop}.${record.propPath}`;
-    } else if (props.name) {
-      record.propPath = `${props.name}.${record.propPath}`;
-    }
-  });
   emit('change', v, eventData);
 };
 

package/src/fields/StyleSetter/pro/Background.vue

@@ -1,6 +1,9 @@
 <template>
   <MContainer
-    :config="config"
+    v-for="item in formConfig"
+    :prop="prop"
+    :key="item.name"
+    :config="item"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -14,7 +17,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import BackgroundPosition from '../components/BackgroundPosition.vue';
@@ -26,6 +29,7 @@ defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -33,60 +37,95 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const config = defineFormItem({
-  items: [
-    {
-      name: 'backgroundColor',
-      text: '背景色',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'colorPicker',
-      },
-    },
-    {
-      name: 'backgroundImage',
-      text: '背景图',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'img-upload',
-      } as any,
-    },
-    {
-      name: 'backgroundSize',
-      text: '背景尺寸',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'auto', text: '默认', tooltip: '默认 auto' },
-        { value: 'contain', text: '等比填充', tooltip: '等比填充 contain' },
-        { value: 'cover', text: '等比覆盖', tooltip: '等比覆盖 cover' },
-      ],
-    },
-    {
-      name: 'backgroundRepeat',
-      text: '重复显示',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'repeat', icon: markRaw(BackgroundRepeat), tooltip: '垂直和水平方向重复 repeat' },
-        { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
-        { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
-        { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
-      ],
+const formConfig = defineFormConfig([
+  {
+    name: 'backgroundColor',
+    text: '背景色',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'colorPicker',
     },
-    {
-      name: 'backgroundPosition',
-      text: '背景定位',
-      type: 'component',
-      component: BackgroundPosition,
-      labelWidth: '68px',
-    },
-  ],
-});
+  },
+  {
+    name: 'backgroundImage',
+    text: '背景图',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'img-upload',
+    } as any,
+  },
+  {
+    name: 'backgroundSize',
+    text: '背景尺寸',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'auto', text: '默认', tooltip: '默认 auto' },
+      { value: 'contain', text: '等比填充', tooltip: '等比填充 contain' },
+      { value: 'cover', text: '等比覆盖', tooltip: '等比覆盖 cover' },
+    ],
+    rules: [
+      {
+        typeMatch: false,
+      },
+      {
+        validator: ({ value, callback }) => {
+          if (value === '' || value === null || value === undefined) {
+            return callback();
+          }
+
+          const keywords = ['auto', 'cover', 'contain', 'inherit', 'initial', 'revert', 'unset'];
+          // 单值：关键字 或 长度/百分比
+          const lengthPercent = /^-?\d+(\.\d+)?(px|em|rem|ex|ch|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/;
+          const singleValue = (v: string) => keywords.includes(v) || lengthPercent.test(v);
+
+          const str = String(value).trim();
+          const parts = str.split(/\s+/);
+
+          // cover / contain 不能与其他值组合
+          if (parts.length > 1 && (parts.includes('cover') || parts.includes('contain'))) {
+            return callback('cover/contain 不能与其他值组合');
+          }
+
+          // 多值最多两个
+          if (parts.length > 2) {
+            return callback('backgroundSize 最多支持两个值');
+          }
+
+          // 关键字 auto 在多值场景中允许与其他长度/百分比组合
+          if (parts.every((part) => singleValue(part))) {
+            return callback();
+          }
+
+          return callback('backgroundSize 值不合法');
+        },
+      },
+    ],
+  },
+  {
+    name: 'backgroundRepeat',
+    text: '重复显示',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'repeat', icon: markRaw(BackgroundRepeat), tooltip: '垂直和水平方向重复 repeat' },
+      { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
+      { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
+      { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
+    ],
+  },
+  {
+    name: 'backgroundPosition',
+    text: '背景定位',
+    type: 'component',
+    component: BackgroundPosition,
+    labelWidth: '68px',
+  },
+]);
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/fields/StyleSetter/pro/Border.vue

@@ -1,5 +1,6 @@
 <template>
   <MContainer
+    :prop="prop"
     :config="config"
     :model="values"
     :last-values="lastValues"
@@ -32,6 +33,7 @@ defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -40,17 +42,13 @@ const emit = defineEmits<{
 }>();
 
 const config = defineFormItem({
-  items: [
-    {
-      labelWidth: '68px',
-      name: 'borderRadius',
-      text: '圆角',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'text',
-      },
-    },
-  ],
+  labelWidth: '68px',
+  name: 'borderRadius',
+  text: '圆角',
+  type: 'data-source-field-select',
+  fieldConfig: {
+    type: 'text',
+  },
 });
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {

package/src/fields/StyleSetter/pro/Font.vue

@@ -1,6 +1,9 @@
 <template>
   <MContainer
-    :config="config"
+    v-for="(item, index) in formConfig"
+    :prop="prop"
+    :key="index"
+    :config="item"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -14,7 +17,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
@@ -25,6 +28,7 @@ defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -32,73 +36,71 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const config = defineFormItem({
-  items: [
-    {
-      type: 'row',
-      items: [
-        {
-          labelWidth: '68px',
-          name: 'fontSize',
-          text: '字号',
-          type: 'data-source-field-select',
-          fieldConfig: {
-            type: 'text',
-          },
+const formConfig = defineFormConfig([
+  {
+    type: 'row',
+    items: [
+      {
+        labelWidth: '68px',
+        name: 'fontSize',
+        text: '字号',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
         },
-        {
-          labelWidth: '68px',
-          name: 'lineHeight',
-          text: '行高',
-          type: 'data-source-field-select',
-          fieldConfig: {
-            type: 'text',
-          },
-        },
-      ],
-    },
-    {
-      name: 'fontWeight',
-      text: '字重',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'select',
-        options: ['normal', 'bold']
-          .concat(
-            Array(7)
-              .fill(1)
-              .map((x, i) => `${i + 1}00`),
-          )
-          .map((item) => ({
-            value: item,
-            text: item,
-          })),
       },
-    },
-    {
-      labelWidth: '68px',
-      name: 'color',
-      text: '颜色',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'colorPicker',
+      {
+        labelWidth: '68px',
+        name: 'lineHeight',
+        text: '行高',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
       },
+    ],
+  },
+  {
+    name: 'fontWeight',
+    text: '字重',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'select',
+      options: ['normal', 'bold']
+        .concat(
+          Array(7)
+            .fill(1)
+            .map((x, i) => `${i + 1}00`),
+        )
+        .map((item) => ({
+          value: item,
+          text: item,
+        })),
     },
-    {
-      name: 'textAlign',
-      text: '对齐',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'left', icon: markRaw(AlignLeft), tooltip: '左对齐 row' },
-        { value: 'center', icon: markRaw(AlignCenter), tooltip: '居中对齐 center' },
-        { value: 'right', icon: markRaw(AlignRight), tooltip: '右对齐 right' },
-      ],
+  },
+  {
+    labelWidth: '68px',
+    name: 'color',
+    text: '颜色',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'colorPicker',
     },
-  ],
-});
+  },
+  {
+    name: 'textAlign',
+    text: '对齐',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'left', icon: markRaw(AlignLeft), tooltip: '左对齐 row' },
+      { value: 'center', icon: markRaw(AlignCenter), tooltip: '居中对齐 center' },
+      { value: 'right', icon: markRaw(AlignRight), tooltip: '右对齐 right' },
+    ],
+  },
+]);
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);