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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.11",
+  "version": "1.2.0-beta.13",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.11",
-    "@tmagic/design": "1.2.0-beta.11",
-    "@tmagic/form": "1.2.0-beta.11",
-    "@tmagic/schema": "1.2.0-beta.11",
-    "@tmagic/stage": "1.2.0-beta.11",
-    "@tmagic/utils": "1.2.0-beta.11",
+    "@tmagic/core": "1.2.0-beta.13",
+    "@tmagic/design": "1.2.0-beta.13",
+    "@tmagic/form": "1.2.0-beta.13",
+    "@tmagic/schema": "1.2.0-beta.13",
+    "@tmagic/stage": "1.2.0-beta.13",
+    "@tmagic/utils": "1.2.0-beta.13",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.11",
-    "@tmagic/form": "1.2.0-beta.11",
+    "@tmagic/design": "1.2.0-beta.13",
+    "@tmagic/form": "1.2.0-beta.13",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/Editor.vue

@@ -319,6 +319,7 @@ export default defineComponent({
 
     provide('services', services);
 
+    provide('codeOptions', props.codeOptions);
     provide(
       'stageOptions',
       reactive({

package/src/components/CodeDraftEditor.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="m-editor-wrapper">
+    <magic-code-editor
+      ref="codeEditor"
+      class="m-editor-container"
+      :init-values="`${codeContent}`"
+      @save="saveCodeDraft"
+      :language="language"
+      :options="codeOptions"
+    ></magic-code-editor>
+    <div class="m-editor-content-bottom" v-if="editable">
+      <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
+      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+    </div>
+    <div class="m-editor-content-bottom" v-else>
+      <TMagicButton type="primary" class="button" @click="close">关闭</TMagicButton>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="MEditorCodeDraftEditor">
+import { computed, inject, ref, watchEffect } from 'vue';
+import type * as monaco from 'monaco-editor';
+
+import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { Id } from '@tmagic/schema';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import MagicCodeEditor from '../layouts/CodeEditor.vue';
+import type { Services } from '../type';
+
+const props = withDefaults(
+  defineProps<{
+    /** 代码id */
+    id: Id;
+    /** 代码内容 */
+    content: string;
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 是否自动保存草稿 */
+    autoSaveDraft?: boolean;
+    /** 编辑器参数 */
+    codeOptions?: Object;
+    /** 编辑器语言 */
+    language?: string;
+  }>(),
+  {
+    editable: true,
+    autoSaveDraft: true,
+  },
+);
+const emit = defineEmits(['save', 'close', 'saveAndClose']);
+
+const services = inject<Services>('services');
+
+const codeContent = ref<string>('');
+const editorContent = ref<string>('');
+const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
+// 原始代码内容
+const originCodeContent = ref<string>('');
+
+const codeOptions = computed(() => ({
+  ...props.codeOptions,
+  readOnly: !props.editable,
+}));
+
+watchEffect(() => {
+  codeContent.value = props.content;
+  if (!originCodeContent.value) {
+    // 暂存原始的代码内容
+    originCodeContent.value = codeContent.value;
+  }
+  // 有草稿时展示上次保存的草稿内容
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (codeDraft) {
+    codeContent.value = codeDraft;
+  }
+});
+
+// 保存草稿
+const saveCodeDraft = async (codeValue: string) => {
+  if (!props.autoSaveDraft) return;
+  if (originCodeContent.value === codeValue) {
+    // 没修改或改回原样 有草稿的话删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+    return;
+  }
+  services?.codeBlockService.setCodeDraft(props.id, codeValue);
+  tMagicMessage.success(`代码草稿保存成功 ${datetimeFormatter(new Date())}`);
+};
+
+// 保存代码
+const saveCode = (): void => {
+  if (!codeEditor.value || !props.editable) return;
+  // 代码内容
+  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+  emit('save', editorContent.value);
+};
+
+// 保存并关闭
+const saveAndClose = (): void => {
+  if (!codeEditor.value || !props.editable) return;
+  // 代码内容
+  editorContent.value = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+  emit('saveAndClose', editorContent.value);
+};
+
+// 关闭弹窗
+const close = async () => {
+  const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
+  if (codeDraft) {
+    tMagicMessageBox
+      .confirm('您有代码修改未保存，是否保存后再关闭？', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      .then(async () => {
+        // 保存之后再关闭
+        saveAndClose();
+      })
+      .catch(() => {
+        // 删除草稿 直接关闭
+        services?.codeBlockService.removeCodeDraft(props.id);
+        emit('close');
+      });
+  } else {
+    emit('close');
+  }
+};
+</script>

package/src/components/FunctionEditor.vue

@@ -0,0 +1,144 @@
+<template>
+  <TMagicCard shadow="never">
+    <template #header>
+      <div class="code-name-wrapper">
+        <div class="code-name-label">代码块名称</div>
+        <TMagicInput class="code-name-input" v-model="codeName" :disabled="!editable" />
+      </div>
+      <div class="code-name-wrapper">
+        <div class="code-name-label">参数定义</div>
+        <m-form-table
+          style="width: 320px"
+          :config="tableConfig"
+          :model="tableModel"
+          :enableToggleMode="false"
+          name="params"
+          prop="params"
+          size="small"
+        >
+        </m-form-table>
+      </div>
+    </template>
+    <CodeDraftEditor
+      :id="id"
+      :content="codeContent"
+      :editable="editable"
+      :autoSaveDraft="autoSaveDraft"
+      :codeOptions="codeOptions"
+      language="javascript"
+      @save="saveCode"
+      @saveAndClose="saveAndClose"
+      @close="close"
+    ></CodeDraftEditor>
+  </TMagicCard>
+</template>
+<script lang="ts" setup name="MEditorFunctionEditor">
+import { inject, provide, ref, watchEffect } from 'vue';
+
+import { TMagicCard, TMagicInput, tMagicMessage } from '@tmagic/design';
+import { CodeParam, Id } from '@tmagic/schema';
+
+import type { Services } from '../type';
+
+import CodeDraftEditor from './CodeDraftEditor.vue';
+
+const tableConfig = {
+  border: true,
+  enableFullscreen: false,
+  name: 'params',
+  items: [
+    {
+      type: 'text',
+      label: '参数名',
+      name: 'name',
+    },
+  ],
+};
+
+const props = withDefaults(
+  defineProps<{
+    id: Id;
+    name: string;
+    content: string;
+    editable?: boolean;
+    autoSaveDraft?: boolean;
+    codeOptions?: object;
+  }>(),
+  {
+    editable: true,
+    autoSaveDraft: true,
+  },
+);
+
+const emit = defineEmits(['change', 'field-input']);
+
+const services = inject<Services>('services');
+
+const codeName = ref<string>('');
+const codeContent = ref<string>('');
+const evalRes = ref(true);
+
+provide('mForm', {
+  $emit: emit,
+  setField: () => {},
+});
+
+const tableModel = ref<{ params: CodeParam[] }>();
+watchEffect(() => {
+  codeName.value = props.name;
+  codeContent.value = props.content;
+});
+
+const initTableModel = () => {
+  const codeDsl = services?.codeBlockService.getCodeDslSync();
+  if (!codeDsl) return;
+  tableModel.value = {
+    params: codeDsl[props.id]?.params || [],
+  };
+};
+
+initTableModel();
+
+// 保存前钩子
+const beforeSave = (codeValue: string): boolean => {
+  try {
+    // eval检测js代码是否存在语法错误
+    // eslint-disable-next-line no-eval
+    eval(codeValue);
+    return true;
+  } catch (e: any) {
+    tMagicMessage.error(e.stack);
+    return false;
+  }
+};
+
+// 保存代码
+const saveCode = async (codeValue: string): Promise<void> => {
+  if (!props.editable) return;
+  evalRes.value = beforeSave(codeValue);
+  if (evalRes.value) {
+    // 存入dsl
+    await services?.codeBlockService.setCodeDslById(props.id, {
+      name: codeName.value,
+      content: codeValue,
+      params: tableModel.value?.params || [],
+    });
+    tMagicMessage.success('代码保存成功');
+    // 删除草稿
+    services?.codeBlockService.removeCodeDraft(props.id);
+  }
+};
+
+// 保存并关闭
+const saveAndClose = async (codeValue: string) => {
+  await saveCode(codeValue);
+  if (evalRes.value) {
+    close();
+  }
+};
+
+// 关闭弹窗
+const close = () => {
+  services?.codeBlockService.setCodeEditorShowStatus(false);
+};
+</script>

package/src/fields/CodeSelect.vue

@@ -1,131 +1,110 @@
 <template>
-  <div class="m-fields-code-select" :key="fieldKey">
-    <TMagicCard shadow="never">
-      <template #header>
-        <m-fields-select
-          :config="selectConfig"
-          :model="model"
-          :prop="prop"
-          :name="name"
-          :size="size"
-          @change="changeHandler"
-        ></m-fields-select>
-      </template>
-      <div class="tool-bar">
-        <TMagicTooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
-          <svg
-            @click="viewHandler"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-            width="15px"
-            height="15px"
-            data-v-65a7fb6c=""
-          >
-            <path
-              fill="currentColor"
-              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
-            ></path>
-          </svg>
-        </TMagicTooltip>
-      </div>
-    </TMagicCard>
+  <div class="m-fields-code-select">
+    <m-form-table
+      :config="tableConfig"
+      :model="model[name]"
+      name="hookData"
+      :enableToggleMode="false"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    >
+    </m-form-table>
   </div>
 </template>
 
 <script lang="ts" setup name="MEditorCodeSelect">
-import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
-import { map, xor } from 'lodash-es';
+import { computed, defineEmits, defineProps, inject, watch } from 'vue';
+import { isEmpty, map } from 'lodash-es';
 
-import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import { FormState, SelectConfig } from '@tmagic/form';
+import { FormItem, TableConfig } from '@tmagic/form';
+import { HookType, Id } from '@tmagic/schema';
 
-import type { Services } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
+import { CodeParamStatement, HookData, Services } from '../type';
 const services = inject<Services>('services');
-const form = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = defineProps<{
   config: {
-    selectConfig?: SelectConfig;
+    tableConfig?: TableConfig;
   };
   model: any;
   prop: string;
   name: string;
-  size: string;
+  size: 'mini' | 'small' | 'medium';
 }>();
+const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
 
-const selectConfig = computed(() => {
+const tableConfig = computed<FormItem>(() => {
   const defaultConfig = {
-    multiple: true,
-    options: async () => {
-      const codeDsl = await services?.codeBlockService.getCodeDsl();
-      if (codeDsl) {
-        return map(codeDsl, (value, key) => ({
-          text: `${value.name}（${key}）`,
-          label: `${value.name}（${key}）`,
-          value: key,
-        }));
-      }
-      return [];
-    },
+    dropSort: true,
+    enableFullscreen: false,
+    border: true,
+    items: [
+      {
+        type: 'select',
+        label: '代码块',
+        name: 'codeId',
+        width: '200px',
+        options: () => {
+          if (codeDsl.value) {
+            return map(codeDsl.value, (value, key) => ({
+              text: `${value.name}（${key}）`,
+              label: `${value.name}（${key}）`,
+              value: key,
+            }));
+          }
+          return [];
+        },
+        onChange: (formState: any, codeId: Id, { model }: any) => {
+          // 参数的items是根据函数生成的，当codeId变化后修正model的值，避免写入其他codeId的params
+          model.params = {};
+        },
+      },
+      {
+        name: 'params',
+        label: '参数',
+        defaultValue: {},
+        itemsFunction: (row: HookData) => getParamsConfig(row.codeId),
+      },
+    ],
   };
   return {
     ...defaultConfig,
-    ...props.config.selectConfig,
+    ...props.config.tableConfig,
   };
 });
-const fieldKey = ref('');
-const multiple = ref(true);
-const lastTagSnapshot = ref<string[]>([]);
 
-watchEffect(async () => {
-  if (!props.model[props.name]) return;
-  const combineNames = await Promise.all(
-    props.model[props.name].map(async (id: string) => {
-      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
-      return name;
-    }),
-  );
-  fieldKey.value = combineNames.join('-');
-});
-
-const changeHandler = async (value: any) => {
-  let codeIds = value;
-  if (typeof value === 'string') {
-    multiple.value = false;
-    codeIds = value ? [value] : [];
-  }
-  await setCombineRelation(codeIds);
-  emit('change', value);
-};
-
-// 同步绑定关系
-const setCombineRelation = async (codeIds: string[]) => {
-  // 组件id
-  const { id = '' } = services?.editorService.get('node') || {};
+watch(
+  () => props.model[props.name],
+  (value) => {
+    // 兼容旧的数据结构
+    if (isEmpty(value)) {
+      // 空值或者空数组
+      props.model[props.name] = {
+        hookType: HookType.CODE,
+        hookData: [],
+      };
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
-  // 兼容单选
-  let opFlag = CodeSelectOp.CHANGE;
-  let diffValues = codeIds;
-  if (multiple.value) {
-    // initValues为表单初始值，当表单内容发生变化时，initValues也会更新，可以理解为上一次表单内容的快照
-    lastTagSnapshot.value = form?.initValues[props.name] || [];
-    opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-    diffValues = xor(codeIds, lastTagSnapshot.value) as string[];
-  }
-  // 记录绑定关系
-  await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
+const changeHandler = async () => {
+  emit('change', props.model[props.name]);
 };
 
-const viewHandler = async () => {
-  if (props.model[props.name].length === 0) {
-    tMagicMessage.error('请先绑定代码块');
-    return;
-  }
-  // 记录当前已被绑定的代码块，为查看弹窗的展示内容
-  await services?.codeBlockService.setCombineIds(props.model[props.name]);
-  await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-  services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
+const getParamsConfig = (codeId: Id) => {
+  if (!codeDsl.value) return [];
+  const paramStatements = codeDsl.value[codeId]?.params;
+  if (isEmpty(paramStatements)) return [];
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    name: paramState.name,
+    text: paramState.name,
+    labelWidth: '100px',
+    type: 'text',
+  }));
 };
 </script>

package/src/layouts/CodeEditor.vue

@@ -12,7 +12,7 @@ const props = withDefaults(
   defineProps<{
     initValues?: string | Object;
     modifiedValues?: string | Object;
-    type?: string;
+    type?: 'diff';
     language?: string;
     options?: {
       [key: string]: any;
@@ -20,7 +20,6 @@ const props = withDefaults(
     autoSave?: boolean;
   }>(),
   {
-    type: '',
     autoSave: true,
     language: 'javascript',
     options: () => ({