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

package/src/fields/CondOpSelect.vue

@@ -33,7 +33,7 @@ import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import { arrayOptions, eqOptions, getFieldType, numberOptions } from '@editor/utils';
+import { getCondOpOptionsByFieldType, getFieldType } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsCondOpSelect',
@@ -51,31 +51,9 @@ const optionComponent = getDesignConfig('components')?.option;
 
 const options = computed(() => {
   const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
-
   const ds = dataSourceService.getDataSourceById(id);
-
   const type = getFieldType(ds, fieldNames);
-
-  if (type === 'array') {
-    return arrayOptions;
-  }
-
-  if (type === 'boolean' || type === 'null') {
-    return [
-      { text: '是', value: 'is' },
-      { text: '不是', value: 'not' },
-    ];
-  }
-
-  if (type === 'number') {
-    return [...eqOptions, ...numberOptions];
-  }
-
-  if (type === 'string') {
-    return [...arrayOptions, ...eqOptions];
-  }
-
-  return [...arrayOptions, ...eqOptions, ...numberOptions];
+  return getCondOpOptionsByFieldType(type);
 });
 
 const fieldChangeHandler = (v: string) => {

package/src/fields/DataSourceFields.vue

@@ -8,10 +8,12 @@
     </div>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       :title="fieldTitle"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -28,10 +30,12 @@
     </FloatingBox>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addFromJsonDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       title="快速添加数据定义"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -358,6 +362,7 @@ const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 /**
  * 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。

package/src/fields/DataSourceInput.vue

@@ -79,11 +79,11 @@ import { Coin } from '@element-plus/icons-vue';
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
 import { getDesignConfig, TMagicAutocomplete, TMagicInput, TMagicTag } from '@tmagic/design';
 import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
-import { getKeysArray, isNumber } from '@tmagic/utils';
+import { getKeysArray } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import { getDisplayField } from '@editor/utils/data-source';
+import { getDisplayField, resolveFieldByPath } from '@editor/utils/data-source';
 
 defineOptions({
   name: 'MFieldsDataSourceInput',
@@ -251,34 +251,16 @@ const fieldQuerySearch = (
     return;
   }
 
-  let fields = ds.fields || [];
-
-  // 后面这些是字段
-  let key = keys.shift();
-  while (key) {
-    if (isNumber(key)) {
-      key = keys.shift();
-      continue;
-    }
-
-    for (const field of fields) {
-      if (field.name === key) {
-        fields = field.fields || [];
-        key = keys.shift();
-        break;
-      }
-    }
-  }
+  const { fields } = resolveFieldByPath(ds.fields, keys, { skipNumberIndices: true });
 
   if (curCharIsDot(dotIndex)) {
     // 当前输入的是.
-    result = fields || [];
+    result = fields;
   } else if (dotIndex > -1) {
     const queryName = queryString.substring(dotIndex + 1).toLowerCase();
-    result =
-      fields.filter(
-        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
-      ) || [];
+    result = fields.filter(
+      (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
+    );
   }
 
   cb(

package/src/fields/DataSourceMocks.vue

@@ -7,10 +7,12 @@
     </div>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       :title="drawerTitle"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -254,4 +256,5 @@ const addDialogVisible = defineModel<boolean>('visible', { default: false });
 const { height: editorHeight } = useEditorContentHeight();
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 </script>

package/src/fields/DisplayConds.vue

@@ -98,6 +98,11 @@ const config = computed<GroupListConfig>(() => ({
               label: '字段',
               checkStrictly: false,
               onChange: fieldOnChange,
+              defaultValue: () => [],
+              rules: [
+                { required: true, trigger: 'blur', message: '请选择字段' },
+                { typeMatch: true, trigger: 'change' },
+              ],
             }
           : {
               type: 'data-source-field-select',
@@ -107,6 +112,11 @@ const config = computed<GroupListConfig>(() => ({
               checkStrictly: false,
               dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
               onChange: fieldOnChange,
+              defaultValue: () => [],
+              rules: [
+                { required: true, trigger: 'blur', message: '请选择字段' },
+                { typeMatch: true, trigger: 'change' },
+              ],
             },
         {
           type: 'cond-op-select',
@@ -114,6 +124,10 @@ const config = computed<GroupListConfig>(() => ({
           label: '条件',
           width: 140,
           name: 'op',
+          rules: [
+            { required: true, trigger: 'blur', message: '请选择条件' },
+            { typeMatch: true, trigger: 'change' },
+          ],
         },
         {
           label: '值',

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);