@tmagic/editor 1.7.8-beta.2 → 1.7.8-beta.4

package/src/components/CodeBlockEditor.vue

@@ -63,7 +63,14 @@ import { computed, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { type ContainerChangeEventData, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  defineFormConfig,
+  defineFormItem,
+  type FormConfig,
+  MFormBox,
+  type TableColumnConfig,
+} from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -112,7 +119,7 @@ const diffChange = () => {
   difVisible.value = false;
 };
 
-const defaultParamColConfig = {
+const defaultParamColConfig = defineFormItem<TableColumnConfig>({
   type: 'row',
   label: '参数类型',
   items: [
@@ -140,76 +147,79 @@ const defaultParamColConfig = {
       ],
     },
   ],
-};
+});
 
-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,
@@ -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,

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

@@ -62,14 +62,15 @@ import type {
   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';
@@ -212,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', '');
     },
   };
@@ -226,7 +227,7 @@ const targetCompConfig = computed(() => {
 
 // 联动组件动作配置
 const compActionConfig = computed(() => {
-  const defaultCompActionConfig = {
+  const defaultCompActionConfig: DynamicTypeConfig = {
     name: 'method',
     text: '动作',
     type: (mForm: FormState | undefined, { model }: any) => {
@@ -304,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/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);

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

@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import type { ContainerChangeEventData } from '@tmagic/form';
+import type { ChildConfig, ContainerChangeEventData } from '@tmagic/form';
 import { defineFormItem, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
@@ -180,7 +180,7 @@ const config = defineFormItem({
       ],
     },
   ],
-});
+}) as ChildConfig;
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

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

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ContainerChangeEventData, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormItem, type MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 const props = defineProps<{
@@ -24,7 +24,7 @@ const positionText: Record<string, string> = {
   sticky: '粘性定位',
 };
 
-const config = {
+const config = defineFormItem({
   items: [
     {
       name: 'position',
@@ -95,7 +95,7 @@ const config = {
       },
     },
   ],
-};
+});
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/utils/data-source/formConfigs/base.ts

@@ -1,6 +1,6 @@
-import { defineFormConfig } from '@tmagic/form';
+import { defineFormConfig, type FormConfig } from '@tmagic/form';
 
-export default () =>
+export default (): FormConfig =>
   defineFormConfig([
     {
       name: 'id',