@tmagic/editor 1.3.0-alpha.13 → 1.3.0-alpha.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.13",
+  "version": "1.3.0-alpha.14",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.13",
-    "@tmagic/design": "1.3.0-alpha.13",
-    "@tmagic/form": "1.3.0-alpha.13",
-    "@tmagic/schema": "1.3.0-alpha.13",
-    "@tmagic/stage": "1.3.0-alpha.13",
-    "@tmagic/table": "1.3.0-alpha.13",
-    "@tmagic/utils": "1.3.0-alpha.13",
+    "@tmagic/core": "1.3.0-alpha.14",
+    "@tmagic/design": "1.3.0-alpha.14",
+    "@tmagic/form": "1.3.0-alpha.14",
+    "@tmagic/schema": "1.3.0-alpha.14",
+    "@tmagic/stage": "1.3.0-alpha.14",
+    "@tmagic/table": "1.3.0-alpha.14",
+    "@tmagic/utils": "1.3.0-alpha.14",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.13",
-    "@tmagic/form": "1.3.0-alpha.13",
+    "@tmagic/design": "1.3.0-alpha.14",
+    "@tmagic/form": "1.3.0-alpha.14",
     "monaco-editor": "^0.39.0",
     "vue": "^3.3.4"
   },
@@ -81,7 +81,7 @@
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8",
+    "vite": "^4.4.4",
     "vue-tsc": "^1.6.5"
   }
 }

package/src/Editor.vue

@@ -40,10 +40,6 @@
           <template #code-block-panel-tool="{ id, data }">
             <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
           </template>
-
-          <template #code-block-edit-panel-header="{ id }">
-            <slot name="code-block-edit-panel-header" :id="id"></slot>
-          </template>
         </Sidebar>
       </slot>
     </template>

package/src/components/CodeBlockEditor.vue

@@ -0,0 +1,155 @@
+<template>
+  <MFormDrawer
+    ref="fomDrawer"
+    label-width="80px"
+    :title="content.name"
+    :width="size"
+    :config="functionConfig"
+    :values="content"
+    :disabled="disabled"
+    @submit="submitForm"
+    @error="errorHandler"
+    @open="openHandler"
+  ></MFormDrawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+
+import { tMagicMessage } from '@tmagic/design';
+import { ColumnConfig, FormState, MFormDrawer } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
+defineProps<{
+  content: CodeBlockContent;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  submit: [values: CodeBlockContent];
+}>();
+
+const services = inject<Services>('services');
+
+const columnWidth = computed(() => services?.uiService.get('columnWidth'));
+const size = computed(() => (columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600));
+
+const codeEditorHeight = ref('600px');
+
+const defaultParamColConfig: ColumnConfig = {
+  type: 'row',
+  label: '参数类型',
+  items: [
+    {
+      text: '参数类型',
+      labelWidth: '70px',
+      type: 'select',
+      name: 'type',
+      options: [
+        {
+          text: '数字',
+          label: '数字',
+          value: 'number',
+        },
+        {
+          text: '字符串',
+          label: '字符串',
+          value: 'text',
+        },
+        {
+          text: '组件',
+          label: '组件',
+          value: 'ui-select',
+        },
+      ],
+    },
+  ],
+};
+
+const functionConfig = computed(() => [
+  {
+    text: '名称',
+    name: 'name',
+  },
+  {
+    text: '注释',
+    name: 'desc',
+  },
+  {
+    type: 'table',
+    border: true,
+    text: '参数',
+    enableFullscreen: false,
+    name: 'params',
+    maxHeight: '300px',
+    dropSort: false,
+    items: [
+      {
+        type: 'text',
+        label: '参数名',
+        name: 'name',
+      },
+      {
+        type: 'text',
+        label: '注释',
+        name: 'extra',
+      },
+      services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
+    ],
+  },
+  {
+    name: 'content',
+    type: 'vs-code',
+    options: inject('codeOptions', {}),
+    height: codeEditorHeight.value,
+    onChange: (formState: FormState | undefined, code: string) => {
+      try {
+        // 检测js代码是否存在语法错误
+        getConfig('parseDSL')(code);
+
+        return code;
+      } catch (error: any) {
+        tMagicMessage.error(error.message);
+
+        throw error;
+      }
+    },
+  },
+]);
+
+const submitForm = async (values: CodeBlockContent) => {
+  emit('submit', values);
+};
+
+const errorHandler = (error: any) => {
+  tMagicMessage.error(error.message);
+};
+
+const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
+
+const openHandler = () => {
+  setTimeout(() => {
+    if (fomDrawer.value) {
+      const height = fomDrawer.value?.bodyHeight - 468;
+      codeEditorHeight.value = `${height > 100 ? height : 600}px`;
+    }
+  });
+};
+
+defineExpose({
+  show() {
+    fomDrawer.value?.show();
+  },
+
+  hide() {
+    fomDrawer.value?.hide();
+  },
+});
+</script>

package/src/components/CodeParams.vue

@@ -0,0 +1,59 @@
+<template>
+  <MForm
+    ref="form"
+    :config="codeParamsConfig"
+    :init-values="model"
+    :disabled="disabled"
+    :size="size"
+    :watch-props="false"
+    @change="onParamsChangeHandler"
+  ></MForm>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { FormConfig, MForm } from '@tmagic/form';
+
+import type { CodeParamStatement } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorCodeParams',
+});
+
+const props = defineProps<{
+  model: any;
+  size?: 'small' | 'default' | 'large';
+  disabled?: boolean;
+  name: string;
+  paramsConfig: CodeParamStatement[];
+}>();
+
+const emit = defineEmits(['change']);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const getFormConfig = (items: FormConfig = []) => [
+  {
+    type: 'fieldset',
+    items,
+    legend: '参数',
+    labelWidth: '70px',
+    name: props.name,
+  },
+];
+
+const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig));
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = async () => {
+  try {
+    const value = await form.value?.submitForm(true);
+    emit('change', value);
+  } catch (e) {
+    console.log(e);
+  }
+};
+</script>

package/src/fields/Code.vue

@@ -1,15 +1,18 @@
 <template>
-  <magic-code-editor
-    :style="`height: ${height}`"
+  <MagicCodeEditor
+    :height="config.height"
     :init-values="model[name]"
-    :language="language"
-    :options="config.options"
+    :language="config.language"
+    :options="{
+      ...config.options,
+      readOnly: disabled,
+    }"
     @save="save"
-  ></magic-code-editor>
+  ></MagicCodeEditor>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
   name: 'MEditorCode',
@@ -17,19 +20,24 @@ defineOptions({
 
 const emit = defineEmits(['change']);
 
-const props = defineProps<{
-  model: any;
-  name: string;
-  config: {
-    language?: string;
-    options?: Object;
-    height?: string;
-  };
-  prop: string;
-}>();
-
-const language = computed(() => props.config.language || 'javascript');
-const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
+const props = withDefaults(
+  defineProps<{
+    config: {
+      language?: string;
+      options?: Object;
+      height?: string;
+    };
+    model: any;
+    name: string;
+    prop: string;
+    lastValues?: any;
+    disabled?: boolean;
+    size?: 'small' | 'default' | 'large';
+  }>(),
+  {
+    disabled: false,
+  },
+);
 
 const save = (v: string) => {
   props.model[props.name] = v;

package/src/fields/CodeSelect.vue

@@ -7,18 +7,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import { HookType } from '@tmagic/schema';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorCodeSelect',
 });
 
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 const props = withDefaults(
   defineProps<{
     config: {
@@ -41,7 +45,9 @@ const codeConfig = computed(() => ({
   items: [
     {
       type: 'code-select-col',
+      name: 'codeId',
       labelWidth: 0,
+      disabled: () => !services?.codeBlockService.getEditStatus(),
     },
   ],
 }));

package/src/fields/CodeSelectCol.vue

@@ -9,57 +9,91 @@
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
-      <Icon class="icon" :icon="editable ? Edit : View" @click="editCode"></Icon>
+      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCode(model[name])"></Icon>
     </div>
+
     <!-- 参数填写框 -->
-    <m-form-container :config="codeParamsConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :params-config="paramsConfig"
+      @change="onParamsChangeHandler"
+    ></CodeParams>
+
+    <CodeBlockEditor
+      ref="codeBlockEditor"
+      v-if="codeConfig"
+      :disabled="disabled"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
   </div>
 </template>
 
 <script lang="ts" setup name="">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, FieldsetConfig, FormState } from '@tmagic/form';
-import { Id } from '@tmagic/schema';
+import { createValues } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, Services } from '@editor/type';
+import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
+import { useCodeBlockEdit } from '@editor/utils/use-code-block-edit';
 
 defineOptions({
   name: 'MEditorCodeSelectCol',
 });
 
 const services = inject<Services>('services');
-const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
   defineProps<{
-    config: any;
+    config: CodeSelectColConfig;
     model: any;
     prop: string;
     name: string;
+    lastValues?: any;
+    disabled?: boolean;
     size: 'small' | 'default' | 'large';
   }>(),
-  {},
+  {
+    disabled: false,
+  },
 );
+
+/**
+ * 根据代码块id获取代码块参数配置
+ * @param codeId 代码块ID
+ */
+const getParamItemsConfig = (codeId?: Id): CodeParamStatement[] => {
+  if (!codeDsl.value || !codeId) return [];
+
+  const paramStatements = codeDsl.value[codeId]?.params;
+
+  if (isEmpty(paramStatements)) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
 const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-const editable = computed(() => services?.codeBlockService.getEditStatus());
-const codeParamsConfig = ref<FieldsetConfig>({
-  type: 'fieldset',
-  items: [],
-  legend: '参数',
-  labelWidth: '70px',
-  name: 'params',
-  display: false,
-});
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name]));
+
 const selectConfig = {
   type: 'select',
   text: '代码块',
-  name: 'codeId',
-  labelWidth: '70px',
+  name: props.name,
+  labelWidth: '80px',
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({
@@ -72,68 +106,25 @@ const selectConfig = {
   },
   onChange: (formState: any, codeId: Id, { model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-    model.params = {};
-  },
-};
+    paramsConfig.value = getParamItemsConfig(codeId);
 
-/**
- * 根据代码块id获取代码块参数配置
- * @param codeId 代码块ID
- */
-const getParamItemsConfig = (codeId: Id): CodeParamStatement[] => {
-  if (!codeDsl.value) return [];
-  const paramStatements = codeDsl.value[codeId]?.params;
-  if (isEmpty(paramStatements)) return [];
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
-    text: paramState.name,
-    ...paramState,
-  }));
-};
+    if (paramsConfig.value.length) {
+      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+    } else {
+      model.params = {};
+    }
 
-/**
- * 根据代码块id获取参数fieldset表单配置
- * @param codeId 代码块ID
- */
-const getCodeParamsConfig = (codeId: Id) => {
-  const paramsConfig = getParamItemsConfig(codeId);
-  // 如果参数没有填值，则使用createValues补全空值
-  if (!props.model.params || isEmpty(props.model.params)) {
-    props.model.params = {};
-    createValues(mForm, paramsConfig, {}, props.model.params);
-  }
-  codeParamsConfig.value = {
-    type: 'fieldset',
-    items: paramsConfig,
-    legend: '参数',
-    labelWidth: '70px',
-    name: 'params',
-    display: !isEmpty(paramsConfig),
-  };
+    return codeId;
+  },
 };
 
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = () => {
+const onParamsChangeHandler = (value: any) => {
+  props.model.params = value.params;
   emit('change', props.model);
 };
 
-// 监听代码块顺序变化以及下拉选择的变化，并更新参数配置
-// TODO onchange在watch之前触发
-watch(
-  () => props.model.codeId,
-  (codeId: Id) => {
-    if (!codeId) return;
-    getCodeParamsConfig(codeId);
-  },
-  {
-    immediate: true,
-  },
-);
-
-// 打开代码编辑框
-const editCode = () => {
-  services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
-};
+const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
 </script>

package/src/fields/DataSourceFields.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="filedColumns"></MagicTable>
+    <MagicTable :data="model[name]" :columns="fieldColumns"></MagicTable>
 
     <div class="m-editor-data-source-fields-footer">
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
@@ -12,6 +12,7 @@
       :config="dataSourceFieldsConfig"
       :values="fieldValues"
       :parentValues="model[name]"
+      :disabled="disabled"
       @submit="fieldChange"
     ></MFormDialog>
   </div>
@@ -35,6 +36,7 @@ const props = withDefaults(
     };
     model: any;
     prop: string;
+    lastValues?: any;
     disabled: boolean;
     name: string;
   }>(),
@@ -50,27 +52,24 @@ const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
 const newHandler = () => {
-  if (!addDialog.value) return;
   fieldValues.value = {};
   filedTitle.value = '新增属性';
-  addDialog.value.dialogVisible = true;
+  addDialog.value?.show();
 };
 
 const fieldChange = ({ index, ...value }: Record<string, any>) => {
-  if (!addDialog.value) return;
-
   if (index > -1) {
     props.model[props.name][index] = value;
   } else {
     props.model[props.name].push(value);
   }
 
-  addDialog.value.dialogVisible = false;
+  addDialog.value?.hide();
 
   emit('change', props.model[props.name]);
 };
 
-const filedColumns = [
+const fieldColumns = [
   {
     label: '属性名称',
     prop: 'title',
@@ -90,13 +89,12 @@ const filedColumns = [
       {
         text: '编辑',
         handler: (row: Record<string, any>, index: number) => {
-          if (!addDialog.value) return;
           fieldValues.value = {
             ...row,
             index,
           };
           filedTitle.value = `编辑${row.title}`;
-          addDialog.value.dialogVisible = true;
+          addDialog.value?.show();
         },
       },
       {