@tmagic/editor 1.7.8-beta.1 → 1.7.8-beta.3

package/src/components/CodeBlockEditor.vue

@@ -65,8 +65,9 @@ import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import {
   type ContainerChangeEventData,
+  defineFormConfig,
+  defineFormItem,
   type FormConfig,
-  type FormState,
   MFormBox,
   type TableColumnConfig,
 } from '@tmagic/form';
@@ -118,7 +119,7 @@ const diffChange = () => {
   difVisible.value = false;
 };
 
-const defaultParamColConfig: TableColumnConfig = {
+const defaultParamColConfig = defineFormItem<TableColumnConfig>({
   type: 'row',
   label: '参数类型',
   items: [
@@ -146,76 +147,79 @@ const defaultParamColConfig: TableColumnConfig = {
       ],
     },
   ],
-};
+});
 
-const functionConfig = computed<FormConfig>(() => [
-  {
-    text: '名称',
-    name: 'name',
-    rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-  },
-  {
-    text: '描述',
-    name: 'desc',
-  },
-  {
-    text: '执行时机',
-    name: 'timing',
-    type: 'select',
-    options: () => {
-      const options = [
-        { text: '初始化前', value: 'beforeInit' },
-        { text: '初始化后', value: 'afterInit' },
-      ];
-      if (props.dataSourceType !== 'base') {
-        options.push({ text: '请求前', value: 'beforeRequest' });
-        options.push({ text: '请求后', value: 'afterRequest' });
-      }
-      return options;
-    },
-    display: () => props.isDataSource,
-  },
-  {
-    type: 'table',
-    border: true,
-    text: '参数',
-    enableFullscreen: false,
-    enableToggleMode: false,
-    name: 'params',
-    dropSort: false,
-    items: [
+const functionConfig = computed(
+  () =>
+    defineFormConfig([
       {
-        type: 'text',
-        label: '参数名',
+        text: '名称',
         name: 'name',
+        rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
       },
       {
-        type: 'text',
-        label: '描述',
-        name: 'extra',
+        text: '描述',
+        name: 'desc',
       },
-      codeBlockService.getParamsColConfig() || defaultParamColConfig,
-    ],
-  },
-  {
-    name: 'content',
-    type: 'vs-code',
-    options: inject('codeOptions', {}),
-    autosize: { minRows: 10, maxRows: 30 },
-    onChange: (formState: FormState | undefined, code: string) => {
-      try {
-        // 检测js代码是否存在语法错误
-        getEditorConfig('parseDSL')(code);
-
-        return code;
-      } catch (error: any) {
-        tMagicMessage.error(error.message);
-
-        throw error;
-      }
-    },
-  },
-]);
+      {
+        text: '执行时机',
+        name: 'timing',
+        type: 'select',
+        options: () => {
+          const options = [
+            { text: '初始化前', value: 'beforeInit' },
+            { text: '初始化后', value: 'afterInit' },
+          ];
+          if (props.dataSourceType !== 'base') {
+            options.push({ text: '请求前', value: 'beforeRequest' });
+            options.push({ text: '请求后', value: 'afterRequest' });
+          }
+          return options;
+        },
+        display: () => props.isDataSource,
+      },
+      {
+        type: 'table',
+        border: true,
+        text: '参数',
+        enableFullscreen: false,
+        enableToggleMode: false,
+        name: 'params',
+        dropSort: false,
+        items: [
+          {
+            type: 'text',
+            label: '参数名',
+            name: 'name',
+          },
+          {
+            type: 'text',
+            label: '描述',
+            name: 'extra',
+          },
+          codeBlockService.getParamsColConfig() || defaultParamColConfig,
+        ],
+      },
+      {
+        name: 'content',
+        type: 'vs-code',
+        options: inject('codeOptions', {}),
+        autosize: { minRows: 10, maxRows: 30 },
+        onChange: (_formState, code: string) => {
+          try {
+            // 检测js代码是否存在语法错误
+            getEditorConfig('parseDSL')(code);
+
+            return code;
+          } catch (error: any) {
+            tMagicMessage.error(error.message);
+
+            throw error;
+          }
+        },
+      },
+    ]) as FormConfig,
+);
 
 const parseContent = (content: any) => {
   if (typeof content === 'string') {

package/src/components/CodeParams.vue

@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue';
 
-import { type ContainerChangeEventData, type FormConfig, type FormValue, MForm } from '@tmagic/form';
+import { type ContainerChangeEventData, type FormItemConfig, type FormValue, MForm } from '@tmagic/form';
 
 import type { CodeParamStatement } from '@editor/type';
 import { error } from '@editor/utils';
@@ -34,7 +34,7 @@ const emit = defineEmits(['change']);
 
 const formRef = useTemplateRef<InstanceType<typeof MForm>>('form');
 
-const getFormConfig = (items: FormConfig = []) => [
+const getFormConfig = (items: FormItemConfig[] = []) => [
   {
     type: 'fieldset',
     items,
@@ -51,7 +51,7 @@ const codeParamsConfig = computed(() =>
       name,
       text,
       extra,
-      fieldConfig: config,
+      fieldConfig: config as FormItemConfig,
     })),
   ),
 );

package/src/fields/CodeSelectCol.vue

@@ -50,6 +50,7 @@ import {
   createValues,
   type FieldProps,
   filterFunction,
+  type FormItemConfig,
   type FormState,
   MSelect,
   type SelectConfig,
@@ -115,7 +116,7 @@ watch(
 const selectConfig: SelectConfig = {
   type: 'select',
   name: props.name,
-  disable: props.disabled,
+  disabled: props.disabled,
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({
@@ -141,7 +142,9 @@ const onCodeIdChangeHandler = (value: any) => {
 
   changeRecords.push({
     propPath: props.prop.replace(`${props.name}`, 'params'),
-    value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {},
+    value: paramsConfig.value.length
+      ? createValues(mForm, paramsConfig.value as unknown as FormItemConfig[], {}, props.model.params)
+      : {},
   });
 
   emit('change', value, {

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -98,7 +98,9 @@ const dataSources = computed(() => dataSourceService.get('dataSources') || []);
 const disabledDataSource = computed(() => propsService.getDisabledDataSource());
 
 const type = computed((): string => {
-  let type = props.config.fieldConfig?.type;
+  if (!props.config.fieldConfig) return '';
+
+  let type = 'type' in props.config.fieldConfig ? props.config.fieldConfig.type : '';
   if (typeof type === 'function') {
     type = type(mForm, {
       model: props.model,
@@ -106,13 +108,18 @@ const type = computed((): string => {
   }
   if (type === 'form') return '';
   if (type === 'container') return '';
-  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (props.config.items ? '' : 'text');
+  return (
+    type?.replace(/([A-Z])/g, '-$1').toLowerCase() ||
+    (props.config.fieldConfig && 'items' in props.config.fieldConfig ? '' : 'text')
+  );
 });
 
 const tagName = computed(() => {
   const component =
     getFormField(type.value || 'container') ||
-    resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+    resolveComponent(
+      `m-${props.config.fieldConfig && 'items' in props.config.fieldConfig ? 'form' : 'fields'}-${type.value}`,
+    );
   if (typeof component !== 'string') return component;
   return 'm-fields-text';
 });

package/src/fields/DataSourceFields.vue

@@ -52,12 +52,15 @@ import { inject, Ref, ref } from 'vue';
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import {
+  type CodeConfig,
   type ContainerChangeEventData,
   type DataSourceFieldsConfig,
   type FieldProps,
   type FormConfig,
   type FormState,
   MFormBox,
+  type NumberConfig,
+  type TextConfig,
 } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
@@ -247,7 +250,7 @@ const dataSourceFieldsConfig: FormConfig = [
       { text: 'true', value: true },
       { text: 'false', value: false },
     ],
-  },
+  } as unknown as CodeConfig | NumberConfig | TextConfig,
   {
     name: 'enable',
     text: '是否可用',

package/src/fields/DataSourceMethodSelect.vue

@@ -48,6 +48,7 @@ import {
   type DataSourceMethodSelectConfig,
   type FieldProps,
   filterFunction,
+  type FormItemConfig,
   type FormState,
   MCascader,
 } from '@tmagic/form';
@@ -142,7 +143,9 @@ const onChangeHandler = (value: any) => {
 
   changeRecords.push({
     propPath: props.prop.replace(`${props.name}`, 'params'),
-    value: paramsConfig.value.length ? createValues(mForm, paramsConfig.value, {}, props.model.params) : {},
+    value: paramsConfig.value.length
+      ? createValues(mForm, paramsConfig.value as unknown as FormItemConfig[], {}, props.model.params)
+      : {},
   });
 
   emit('change', value, {

package/src/fields/EventSelect.vue

@@ -59,18 +59,18 @@ import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type {
   CascaderOption,
-  ChildConfig,
   CodeSelectColConfig,
   ContainerChangeEventData,
   DataSourceMethodSelectConfig,
+  DynamicTypeConfig,
   EventSelectConfig,
   FieldProps,
   FormState,
-  OnChangeHandlerData,
   PanelConfig,
   TableConfig,
+  UISelectConfig,
 } from '@tmagic/form';
-import { MContainer as MFormContainer, MPanel, MTable } 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';
@@ -90,10 +90,10 @@ const { editorService, dataSourceService, eventsService, codeBlockService, props
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
-  const defaultEventNameConfig: ChildConfig = {
+  const defaultEventNameConfig = {
     name: 'name',
     text: '事件',
-    type: (mForm, { formValue }: any) => {
+    type: (mForm: FormState | undefined, { formValue }: any) => {
       if (
         props.config.src !== 'component' ||
         (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
@@ -213,12 +213,12 @@ const actionTypeConfig = computed(() => {
 
 // 联动组件配置
 const targetCompConfig = computed(() => {
-  const defaultTargetCompConfig = {
+  const defaultTargetCompConfig: UISelectConfig = {
     name: 'to',
     text: '联动组件',
     type: 'ui-select',
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
-    onChange: (MForm: FormState, v: string, { setModel }: OnChangeHandlerData) => {
+    display: (_mForm, { model }) => model.actionType === ActionType.COMP,
+    onChange: (_MForm, _v, { setModel }) => {
       setModel('method', '');
     },
   };
@@ -227,10 +227,10 @@ const targetCompConfig = computed(() => {
 
 // 联动组件动作配置
 const compActionConfig = computed(() => {
-  const defaultCompActionConfig: ChildConfig = {
+  const defaultCompActionConfig: DynamicTypeConfig = {
     name: 'method',
     text: '动作',
-    type: (mForm, { model }: any) => {
+    type: (mForm: FormState | undefined, { model }: any) => {
       const to = editorService.getNodeById(model.to);
 
       if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
@@ -240,7 +240,7 @@ const compActionConfig = computed(() => {
       return 'select';
     },
     checkStrictly: () => props.config.src !== 'component',
-    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
+    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 [];
@@ -305,62 +305,68 @@ const dataSourceActionConfig = computed(() => {
 });
 
 // 兼容旧的数据格式
-const tableConfig = computed<TableConfig>(() => ({
-  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,
-        }));
-      },
-    },
-  ],
-}));
+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<PanelConfig>(() => ({
-  type: 'panel',
-  items: [
-    {
-      type: 'group-list',
-      name: 'actions',
-      expandAll: true,
-      enableToggleMode: false,
-      titlePrefix: '动作',
+const actionsConfig = computed(
+  () =>
+    defineFormItem({
+      type: 'panel',
       items: [
-        actionTypeConfig.value,
-        targetCompConfig.value,
-        compActionConfig.value,
-        codeActionConfig.value,
-        dataSourceActionConfig.value,
+        {
+          type: 'group-list',
+          name: 'actions',
+          expandAll: true,
+          enableToggleMode: false,
+          titlePrefix: '动作',
+          items: [
+            actionTypeConfig.value,
+            targetCompConfig.value,
+            compActionConfig.value,
+            codeActionConfig.value,
+            dataSourceActionConfig.value,
+          ],
+        },
       ],
-    },
-  ],
-}));
+    }) as PanelConfig,
+);
 
 // 是否为旧的数据格式
 const isOldVersion = computed(() => {

package/src/fields/StyleSetter/components/BackgroundPosition.vue

@@ -28,10 +28,10 @@
 
 <script lang="ts" setup>
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { FieldProps, StyleSetterConfig } from '@tmagic/form';
 
 const emit = defineEmits(['change']);
-defineProps<FieldProps<{ type: 'style-setter' } & FormItem>>();
+defineProps<FieldProps<StyleSetterConfig>>();
 
 const horizontalList = [
   {

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

@@ -39,46 +39,48 @@
 import { computed, ref } from 'vue';
 
 import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
-import { MContainer } from '@tmagic/form';
+import { defineFormItem, type MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 const direction = ref('');
 
-const config = computed(() => ({
-  items: [
-    {
-      name: `border${direction.value}Width`,
-      text: '边框宽度',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'text',
+const config = computed(() =>
+  defineFormItem({
+    items: [
+      {
+        name: `border${direction.value}Width`,
+        text: '边框宽度',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
+        },
       },
-    },
-    {
-      name: `border${direction.value}Color`,
-      text: '边框颜色',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'colorPicker',
+      {
+        name: `border${direction.value}Color`,
+        text: '边框颜色',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'colorPicker',
+        },
       },
-    },
-    {
-      name: `border${direction.value}Style`,
-      text: '边框样式',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'select',
-        options: ['solid', 'dashed', 'dotted'].map((item) => ({
-          value: item,
-          text: item,
-        })),
+      {
+        name: `border${direction.value}Style`,
+        text: '边框样式',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'select',
+          options: ['solid', 'dashed', 'dotted'].map((item) => ({
+            value: item,
+            text: item,
+          })),
+        },
       },
-    },
-  ],
-}));
+    ],
+  }),
+);
 
 const selectDirection = (d?: string) => (direction.value = d || '');
 

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

@@ -5,7 +5,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormItem, type MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import BackgroundPosition from '../components/BackgroundPosition.vue';
@@ -21,7 +21,7 @@ const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       name: 'backgroundColor',
@@ -39,7 +39,7 @@ const config = {
       type: 'data-source-field-select',
       fieldConfig: {
         type: 'img-upload',
-      },
+      } as any,
     },
     {
       name: 'backgroundSize',
@@ -74,7 +74,7 @@ const config = {
       labelWidth: '68px',
     },
   ],
-};
+});
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

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

@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormItem, type MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Border from '../components/Border.vue';
@@ -19,7 +19,7 @@ const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       labelWidth: '68px',
@@ -31,7 +31,7 @@ const config = {
       },
     },
   ],
-};
+});
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

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

@@ -5,7 +5,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormItem, type MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
@@ -20,7 +20,7 @@ const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       type: 'row',
@@ -86,7 +86,7 @@ const config = {
       ],
     },
   ],
-};
+});
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);