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

package/src/fields/DataSourceFields.vue

@@ -3,13 +3,14 @@
     <MagicTable :data="model[name]" :columns="fieldColumns"></MagicTable>
 
     <div class="m-editor-data-source-fields-footer">
+      <TMagicButton size="small" :disabled="disabled" plain @click="newFromJsonHandler()">快速添加</TMagicButton>
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
     <MFormDrawer
       ref="addDialog"
       label-width="80px"
-      :title="filedTitle"
+      :title="fieldTitle"
       :config="dataSourceFieldsConfig"
       :values="fieldValues"
       :parentValues="model[name]"
@@ -17,14 +18,25 @@
       :width="width"
       @submit="fieldChange"
     ></MFormDrawer>
+
+    <MFormDrawer
+      ref="addFromJsonDialog"
+      title="快速添加数据定义"
+      :config="jsonFromConfig"
+      :values="jsonFromValues"
+      :disabled="disabled"
+      :width="width"
+      @submit="addFromJsonFromChange"
+    ></MFormDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 
-import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
+import type { DataSchema } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
 
 import type { Services } from '@editor/type';
@@ -49,14 +61,15 @@ const emit = defineEmits(['change']);
 const services = inject<Services>('services');
 
 const addDialog = ref<InstanceType<typeof MFormDrawer>>();
+
 const fieldValues = ref<Record<string, any>>({});
-const filedTitle = ref('');
+const fieldTitle = ref('');
 
 const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
 
 const newHandler = () => {
   fieldValues.value = {};
-  filedTitle.value = '新增属性';
+  fieldTitle.value = '新增属性';
   addDialog.value?.show();
 };
 
@@ -100,7 +113,7 @@ const fieldColumns = [
             ...row,
             index,
           };
-          filedTitle.value = `编辑${row.title}`;
+          fieldTitle.value = `编辑${row.title}`;
           addDialog.value?.show();
         },
       },
@@ -171,11 +184,14 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'defaultValue',
     text: '默认值',
+    height: '200px',
+    parse: true,
     type: (mForm: FormState | undefined, { model }: any) => {
       if (model.type === 'number') return 'number';
       if (model.type === 'boolean') return 'select';
+      if (model.type === 'string') return 'text';
 
-      return 'text';
+      return 'vs-code';
     },
     options: [
       { text: 'true', value: true },
@@ -192,7 +208,79 @@ const dataSourceFieldsConfig: FormConfig = [
     name: 'fields',
     type: 'data-source-fields',
     defaultValue: [],
-    display: (formState: FormState | undefined, { model }: any) => model.type === 'object',
+    display: (formState: FormState | undefined, { model }: any) => model.type === 'object' || model.type === 'array',
   },
 ];
+
+const addFromJsonDialog = ref<InstanceType<typeof MFormDrawer>>();
+const jsonFromConfig: FormConfig = [
+  {
+    name: 'data',
+    type: 'vs-code',
+    labelWidth: '0',
+    language: 'json',
+    height: '600px',
+    options: inject('codeOptions', {}),
+  },
+];
+
+const jsonFromValues = ref({
+  data: {},
+});
+
+const newFromJsonHandler = () => {
+  addFromJsonDialog.value?.show();
+};
+
+const getValueType = (value: any) => {
+  if (Array.isArray(value)) return 'array';
+  if (value === null) return 'null';
+  if (typeof value === 'object') return 'object';
+  if (typeof value === 'number') return 'number';
+  if (typeof value === 'boolean') return 'boolean';
+  if (typeof value === 'string') return 'string';
+
+  return 'any';
+};
+
+const getFieldsConfig = (value: any) => {
+  if (!value || typeof value !== 'object') throw new Error('数据格式错误');
+
+  const fields: DataSchema[] = [];
+  Object.entries(value).forEach(([key, value]) => {
+    const type = getValueType(value);
+
+    let childFields: DataSchema[] = [];
+    if (Array.isArray(value) && value.length > 0) {
+      childFields = getFieldsConfig(value[0]);
+    } else if (type === 'object') {
+      childFields = getFieldsConfig(value);
+    }
+
+    fields.push({
+      name: key,
+      title: key,
+      type,
+      defaultValue: value,
+      fields: childFields,
+    });
+  });
+
+  return fields;
+};
+
+const addFromJsonFromChange = ({ data }: { data: string }) => {
+  console.log(data);
+  try {
+    const value = JSON.parse(data);
+
+    props.model[props.name] = getFieldsConfig(value);
+
+    addFromJsonDialog.value?.hide();
+
+    emit('change', props.model[props.name]);
+  } catch (e: any) {
+    tMagicMessage.error(e.message);
+  }
+};
 </script>

package/src/fields/DataSourceMethodSelect.vue

@@ -50,11 +50,13 @@ defineOptions({
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
+const dataSourceService = services?.dataSourceService;
+
 const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
   disabled: false,
 });
 
-const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+const dataSources = computed(() => dataSourceService?.get('dataSources'));
 
 const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
   if (!dataSourceId) return [];
@@ -85,28 +87,35 @@ const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) =>
   }
 };
 
-const cascaderConfig = {
-  type: 'cascader',
-  text: '数据源方法',
-  name: props.name,
-  labelWidth: '80px',
-  options: () =>
+const methodsOptions = computed(
+  () =>
     dataSources.value
-      ?.filter((ds) => ds.methods?.length)
+      ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)
       ?.map((ds) => ({
         label: ds.title || ds.id,
         value: ds.id,
-        children: ds.methods?.map((method) => ({
-          label: method.name,
-          value: method.name,
-        })),
+        children: [
+          ...(dataSourceService?.getFormMethod(ds.type) || []),
+          ...(ds.methods || []).map((method) => ({
+            label: method.name,
+            value: method.name,
+          })),
+        ],
       })) || [],
+);
+
+const cascaderConfig = computed(() => ({
+  type: 'cascader',
+  text: '数据源方法',
+  name: props.name,
+  labelWidth: '80px',
+  options: methodsOptions.value,
   onChange: (formState: any, dataSourceMethod: [Id, string]) => {
     setParamsConfig(dataSourceMethod, formState);
 
     return dataSourceMethod;
   },
-};
+}));
 
 /**
  * 参数值修改更新
@@ -121,7 +130,7 @@ const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMetho
 const editCodeHandler = () => {
   const [id, name] = props.model[props.name];
 
-  const dataSource = services?.dataSourceService.getDataSourceById(id);
+  const dataSource = dataSourceService?.getDataSourceById(id);
 
   if (!dataSource) return;
 

package/src/fields/DataSourceMocks.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="m-editor-data-source-fields">
+    <MagicTable :data="model[name]" :columns="columns"></MagicTable>
+
+    <div class="m-editor-data-source-fields-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
+    </div>
+
+    <MFormDrawer
+      ref="addDialog"
+      label-width="120px"
+      :title="drawerTitle"
+      :config="formConfig"
+      :values="formValues"
+      :parentValues="model[name]"
+      :disabled="disabled"
+      :width="width"
+      @submit="formChangeHandler"
+    ></MFormDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+
+import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
+import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
+import type { MockSchema } from '@tmagic/schema';
+import { MagicTable } from '@tmagic/table';
+import { getDefaultValueFromFields } from '@tmagic/utils';
+
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceMocks',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      type: 'data-source-mocks';
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const services = inject<Services>('services');
+const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
+const addDialog = ref<InstanceType<typeof MFormDrawer>>();
+const drawerTitle = ref('');
+const formValues = ref<Record<string, any>>({});
+
+const formConfig: FormConfig = [
+  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
+  {
+    name: 'title',
+    text: '名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入字段名称',
+      },
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+  {
+    name: 'enable',
+    text: '启用',
+    type: 'switch',
+  },
+  {
+    name: 'useInEditor',
+    text: '编辑器中使用',
+    type: 'switch',
+  },
+  {
+    name: 'data',
+    text: 'mock数据',
+    type: 'vs-code',
+    language: 'json',
+    options: inject('codeOptions', {}),
+    defaultValue: '{}',
+    height: '400px',
+    onChange: (formState: FormState | undefined, v: string | any) => {
+      if (typeof v !== 'string') return v;
+      return JSON.parse(v);
+    },
+    rules: [
+      {
+        validator: ({ value, callback }) => {
+          if (typeof value !== 'string') return callback();
+
+          try {
+            // 检测json是否存在语法错误
+            JSON.parse(value);
+
+            callback();
+          } catch (error: any) {
+            callback(error);
+          }
+        },
+      },
+    ],
+  },
+];
+
+const columns = [
+  {
+    type: 'expand',
+    component: CodeEditor,
+    props: (row: MockSchema) => ({
+      initValues: row.data,
+      language: 'json',
+      height: '150px',
+      options: {
+        readOnly: true,
+      },
+    }),
+  },
+  {
+    label: '名称',
+    prop: 'title',
+  },
+  {
+    label: '描述',
+    prop: 'description',
+  },
+  {
+    label: '是否启用',
+    prop: 'enable',
+    type: 'component',
+    component: TMagicSwitch,
+    props: (row: MockSchema) => ({
+      modelValue: row.enable,
+      activeValue: true,
+      inactiveValue: false,
+    }),
+    listeners: (row: MockSchema, index: number) => ({
+      'update:modelValue': (v: boolean) => {
+        toggleValue(row, 'enable', v, index);
+      },
+    }),
+  },
+  {
+    label: '编辑器中使用',
+    prop: 'useInEditor',
+    type: 'component',
+    component: TMagicSwitch,
+    props: (row: MockSchema) => ({
+      modelValue: row.useInEditor,
+      activeValue: true,
+      inactiveValue: false,
+    }),
+    listeners: (row: MockSchema, index: number) => ({
+      'update:modelValue': (v: boolean) => {
+        toggleValue(row, 'useInEditor', v, index);
+      },
+    }),
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: MockSchema, index: number) => {
+          formValues.value = {
+            ...row,
+            index,
+          };
+          drawerTitle.value = `编辑${row.title}`;
+          addDialog.value?.show();
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: async (row: MockSchema, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.title}?`, '提示');
+          props.model[props.name].splice(index, 1);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const newHandler = () => {
+  const isFirstRow = props.model[props.name].length === 0;
+  formValues.value = {
+    data: getDefaultValueFromFields(props.model.fields || []),
+    useInEditor: isFirstRow,
+    enable: isFirstRow,
+  };
+  drawerTitle.value = '新增Mock';
+  addDialog.value?.show();
+};
+
+const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
+  if (index > -1) {
+    props.model[props.name][index] = value;
+  } else {
+    props.model[props.name].push(value);
+  }
+
+  addDialog.value?.hide();
+
+  emit('change', props.model[props.name]);
+};
+
+const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: boolean, index: number) => {
+  if (value) {
+    props.model[props.name].forEach((item: MockSchema) => {
+      item[key] = false;
+    });
+  }
+
+  formChangeHandler({
+    ...row,
+    [key]: value,
+    index,
+  });
+};
+</script>

package/src/fields/EventSelect.vue

@@ -69,6 +69,11 @@ const emit = defineEmits(['change']);
 
 const services = inject<Services>('services');
 
+const editorService = services?.editorService;
+const dataSourceService = services?.dataSourceService;
+const eventsService = services?.eventsService;
+const codeBlockService = services?.codeBlockService;
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {
@@ -79,12 +84,12 @@ const eventNameConfig = computed(() => {
     options: (mForm: FormState, { formValue }: any) => {
       let events: EventOption[] = [];
 
-      if (!services) return events;
+      if (!eventsService || !dataSourceService) return events;
 
       if (props.config.src === 'component') {
-        events = services.eventsService.getEvent(formValue.type);
+        events = eventsService.getEvent(formValue.type);
       } else if (props.config.src === 'datasource') {
-        events = services.dataSourceService.getFormEvent(formValue.type);
+        events = dataSourceService.getFormEvent(formValue.type);
       }
 
       return events.map((option) => ({
@@ -113,13 +118,15 @@ const actionTypeConfig = computed(() => {
       {
         text: '代码',
         label: '代码',
-        disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
+        disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
         value: ActionType.CODE,
       },
       {
         text: '数据源',
         label: '数据源',
-        disabled: !services?.dataSourceService.get('dataSources')?.filter((ds) => ds.methods?.length).length,
+        disabled: !dataSourceService
+          ?.get('dataSources')
+          ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
         value: ActionType.DATA_SOURCE,
       },
     ],
@@ -148,10 +155,10 @@ const compActionConfig = computed(() => {
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
-      const node = services?.editorService.getNodeById(model.to);
+      const node = editorService?.getNodeById(model.to);
       if (!node?.type) return [];
 
-      return services?.eventsService.getMethod(node.type).map((option: any) => ({
+      return eventsService?.getMethod(node.type).map((option: any) => ({
         text: option.label,
         value: option.value,
       }));
@@ -166,7 +173,7 @@ const codeActionConfig = computed(() => {
     type: 'code-select-col',
     labelWidth: 0,
     name: 'codeId',
-    disabled: () => !services?.codeBlockService.getEditStatus(),
+    disabled: () => !codeBlockService?.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -193,7 +200,7 @@ const tableConfig = computed(() => ({
       label: '事件名',
       type: eventNameConfig.value.type,
       options: (mForm: FormState, { formValue }: any) =>
-        services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+        eventsService?.getEvent(formValue.type).map((option: any) => ({
           text: option.label,
           value: option.value,
         })),
@@ -208,10 +215,10 @@ const tableConfig = computed(() => ({
       label: '动作',
       type: compActionConfig.value.type,
       options: (mForm: FormState, { model }: any) => {
-        const node = services?.editorService.getNodeById(model.to);
+        const node = editorService?.getNodeById(model.to);
         if (!node?.type) return [];
 
-        return services?.eventsService.getMethod(node.type).map((option: any) => ({
+        return eventsService?.getMethod(node.type).map((option: any) => ({
           text: option.label,
           value: option.value,
         }));

package/src/index.ts

@@ -26,6 +26,7 @@ import DataSourceFieldSelect from './fields/DataSourceFieldSelect.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
 import DataSourceMethods from './fields/DataSourceMethods.vue';
 import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
+import DataSourceMocks from './fields/DataSourceMocks.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
@@ -55,10 +56,11 @@ export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
-export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as LayerPanel } from './layouts/sidebar/layer/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMocks } from './fields/DataSourceMocks.vue';
 export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
@@ -98,6 +100,7 @@ export default {
     app.component('m-fields-code-select-col', CodeSelectCol);
     app.component('m-fields-event-select', EventSelect);
     app.component('m-fields-data-source-fields', DataSourceFields);
+    app.component('m-fields-data-source-mocks', DataSourceMocks);
     app.component('m-fields-key-value', KeyValue);
     app.component('m-fields-data-source-input', DataSourceInput);
     app.component('m-fields-data-source-select', DataSourceSelect);