@tmagic/editor 1.3.0-alpha.8 → 1.3.0-beta.0

package/src/fields/DataSourceMethods.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="m-editor-data-source-methods">
+    <MagicTable :data="model[name]" :columns="methodColumns"></MagicTable>
+
+    <div class="m-editor-data-source-methods-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="createCodeHandler"
+        >添加</TMagicButton
+      >
+    </div>
+
+    <CodeBlockEditor
+      v-if="codeConfig"
+      ref="codeBlockEditor"
+      :disabled="disabled"
+      :content="codeConfig"
+      :is-data-source="true"
+      @submit="submitCodeHandler"
+    ></CodeBlockEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+import { MagicTable } from '@tmagic/table';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
+import type { CodeParamStatement } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceMethods',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      type: 'data-source-methods';
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+
+const methodColumns = [
+  {
+    label: '名称',
+    prop: 'name',
+  },
+  {
+    label: '描述',
+    prop: 'desc',
+  },
+  {
+    label: '执行时机',
+    prop: 'timing',
+  },
+  {
+    label: '参数',
+    prop: 'params',
+    formatter: (params: CodeParamStatement[]) => params.map((item) => item.name).join(', '),
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: CodeBlockContent) => {
+          editCode(props.model, row.name);
+          emit('change', props.model[props.name]);
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: (row: CodeBlockContent) => {
+          deleteCode(props.model, row.name);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const createCodeHandler = () => {
+  createCode(props.model);
+
+  emit('change', props.model[props.name]);
+};
+
+const submitCodeHandler = (values: CodeBlockContent) => {
+  submitCode(values);
+
+  emit('change', props.model[props.name]);
+};
+</script>

package/src/fields/DataSourceSelect.vue

@@ -0,0 +1,68 @@
+<template>
+  <MSelect
+    :model="model"
+    :name="name"
+    :size="size"
+    :prop="prop"
+    :disabled="disabled"
+    :config="selectConfig"
+    :last-values="lastValues"
+    @change="changeHandler"
+  ></MSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
+
+import { Services } from '../type';
+
+defineOptions({
+  name: 'MEditorDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      type: 'data-source-select';
+      name: string;
+      text: string;
+      placeholder: string;
+      dataSourceType?: string;
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const selectConfig = computed<SelectConfig>(() => {
+  const { type, dataSourceType, ...config } = props.config;
+  return {
+    ...config,
+    type: 'select',
+    valueKey: 'dataSourceId',
+    options: dataSources.value
+      .filter((ds) => !dataSourceType || ds.type === dataSourceType)
+      .map((ds) => ({
+        value: {
+          isBindDataSource: true,
+          dataSourceType: ds.type,
+          dataSourceId: ds.id,
+        },
+        text: ds.title || ds.id,
+      })),
+  };
+});
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

package/src/fields/EventSelect.vue

@@ -3,18 +3,23 @@
     <m-form-table
       v-if="isOldVersion"
       ref="eventForm"
-      :size="props.size"
-      :model="model"
       name="events"
+      :size="size"
+      :disabled="disabled"
+      :model="model"
       :config="tableConfig"
       @change="onChangeHandler"
     ></m-form-table>
 
     <div v-else class="fullWidth">
-      <TMagicButton class="create-button" type="primary" size="small" @click="addEvent()">添加事件</TMagicButton>
+      <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
+        >添加事件</TMagicButton
+      >
       <m-form-panel
         v-for="(cardItem, index) in model[name]"
         :key="index"
+        :disabled="disabled"
+        :size="size"
         :config="actionsConfig"
         :model="cardItem"
         @change="onChangeHandler"
@@ -24,9 +29,18 @@
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
+            :disabled="disabled"
+            :size="size"
             @change="onChangeHandler"
           ></m-form-container>
-          <TMagicButton style="color: #f56c6c" text :icon="Delete" @click="removeEvent(index)"></TMagicButton>
+          <TMagicButton
+            style="color: #f56c6c"
+            text
+            :icon="Delete"
+            :disabled="disabled"
+            :size="size"
+            @click="removeEvent(index)"
+          ></TMagicButton>
         </template>
       </m-form-panel>
     </div>
@@ -39,22 +53,16 @@ import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
 import { TMagicButton } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
-import type { EventSelectConfig, Services } from '@editor/type';
+import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorEventSelect',
 });
 
-const props = defineProps<{
-  config: EventSelectConfig;
-  model: any;
-  prop: string;
-  name: string;
-  size: 'small' | 'default' | 'large';
-}>();
+const props = defineProps<FieldProps<EventSelectConfig>>();
 
 const emit = defineEmits(['change']);
 
@@ -81,7 +89,7 @@ const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     defaultValue: ActionType.COMP,
     options: () => [
@@ -93,8 +101,15 @@ const actionTypeConfig = computed(() => {
       {
         text: '代码',
         label: '代码',
+        disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
         value: ActionType.CODE,
       },
+      {
+        text: '数据源',
+        label: '数据源',
+        disabled: !services?.dataSourceService.get('dataSources')?.filter((ds) => ds.methods?.length).length,
+        value: ActionType.DATA_SOURCE,
+      },
     ],
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
@@ -105,7 +120,7 @@ const targetCompConfig = computed(() => {
   const defaultTargetCompConfig = {
     name: 'to',
     text: '联动组件',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
   };
@@ -117,7 +132,7 @@ const compActionConfig = computed(() => {
   const defaultCompActionConfig = {
     name: 'method',
     text: '动作',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
@@ -135,14 +150,27 @@ const compActionConfig = computed(() => {
 
 // 代码联动配置
 const codeActionConfig = computed(() => {
-  const defaultCodeActionConfig = {
+  const defaultCodeActionConfig: CodeSelectColConfig = {
     type: 'code-select-col',
     labelWidth: 0,
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.CODE,
+    name: 'codeId',
+    disabled: () => !services?.codeBlockService.getEditStatus(),
+    display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
 });
 
+// 数据源联动配置
+const dataSourceActionConfig = computed(() => {
+  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
+    type: 'data-source-method-select',
+    name: 'dataSourceMethod',
+    labelWidth: 0,
+    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
+  };
+  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
+});
+
 // 兼容旧的数据格式
 const tableConfig = computed(() => ({
   type: 'table',
@@ -188,7 +216,13 @@ const actionsConfig = computed(() => ({
       name: 'actions',
       expandAll: true,
       enableToggleMode: false,
-      items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value],
+      items: [
+        actionTypeConfig.value,
+        targetCompConfig.value,
+        compActionConfig.value,
+        codeActionConfig.value,
+        dataSourceActionConfig.value,
+      ],
     },
   ],
 }));

package/src/fields/KeyValue.vue

@@ -21,6 +21,7 @@
         class="m-fileds-key-value-delete"
         type="danger"
         :size="size"
+        :disabled="disabled"
         circle
         plain
         :icon="Delete"
@@ -28,7 +29,9 @@
       ></TMagicButton>
     </div>
 
-    <TMagicButton type="primary" :size="size" plain :icon="Plus" @click="addHandler">添加</TMagicButton>
+    <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+      >添加</TMagicButton
+    >
   </div>
 </template>
 
@@ -37,25 +40,20 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 
 defineOptions({
   name: 'MEditorKeyValue',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'key-value';
       name: string;
       text: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: 'large' | 'default' | 'small';
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/UISelect.vue

@@ -1,13 +1,41 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" text style="padding: 0"
+      >取消</TMagicButton
+    >
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <TMagicTooltip v-if="val" content="清除">
-      <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
-    </TMagicTooltip>
-    <TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
-      <TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton>
+  <div class="m-fields-ui-select" v-else style="display: flex">
+    <template v-if="val">
+      <TMagicTooltip content="清除" placement="top">
+        <TMagicButton
+          style="padding: 0"
+          type="danger"
+          :icon="Close"
+          :disabled="disabled"
+          :size="size"
+          text
+          @click.stop="deleteHandler"
+        ></TMagicButton>
+      </TMagicTooltip>
+
+      <TMagicTooltip content="点击选中组件" placement="top">
+        <TMagicButton
+          text
+          style="padding: 0; margin: 0"
+          :disabled="disabled"
+          :size="size"
+          @click="selectNode(val)"
+          @mouseenter="highlight(val)"
+          @mouseleave="unhightlight"
+          >{{ `${toName}_${val}` }}</TMagicButton
+        >
+      </TMagicTooltip>
+    </template>
+
+    <TMagicTooltip v-else content="点击此处选择" placement="top">
+      <TMagicButton text style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+        >点击此处选择</TMagicButton
+      >
     </TMagicTooltip>
   </div>
 </template>
@@ -15,9 +43,11 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
+import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -25,12 +55,7 @@ defineOptions({
   name: 'MEditorUISelect',
 });
 
-const props = defineProps<{
-  config: any;
-  model: any;
-  prop: string;
-  name: string;
-}>();
+const props = defineProps<FieldProps<any>>();
 
 const emit = defineEmits(['change']);
 
@@ -77,6 +102,21 @@ const deleteHandler = () => {
     mForm?.$emit('field-change', props.prop, '');
   }
 };
+
+const selectNode = async (id: Id) => {
+  await services?.editorService.select(id);
+  services?.editorService.get('stage')?.select(id);
+};
+
+const highlight = throttle((id: Id) => {
+  services?.editorService.highlight(id);
+  services?.editorService.get('stage')?.highlight(id);
+}, 150);
+
+const unhightlight = () => {
+  services?.editorService.set('highlightNode', null);
+  services?.editorService.get('stage')?.clearHighlight();
+};
 </script>
 
 <style lang="scss">

package/src/hooks/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './use-code-block-edit';
+export * from './use-data-source-method';
+export * from './use-stage';

package/src/hooks/use-code-block-edit.ts

@@ -0,0 +1,84 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import type { CodeBlockService } from '@editor/services/codeBlock';
+
+export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeId = ref<string>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  // 新增代码块
+  const createCodeBlock = async () => {
+    if (!codeBlockService) {
+      tMagicMessage.error('新增代码块失败');
+      return;
+    }
+
+    codeConfig.value = {
+      name: '代码块',
+      content: `({app, params}) => {\n  // place your code here\n}`,
+      params: [],
+    };
+
+    codeId.value = await codeBlockService.getUniqueId();
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 编辑代码块
+  const editCode = async (id: string) => {
+    const codeBlock = await codeBlockService?.getCodeContentById(id);
+
+    if (!codeBlock) {
+      tMagicMessage.error('获取代码块内容失败');
+      return;
+    }
+
+    let codeContent = codeBlock.content;
+
+    if (typeof codeContent !== 'string') {
+      codeContent = codeContent.toString();
+    }
+
+    codeConfig.value = {
+      ...cloneDeep(codeBlock),
+      content: codeContent,
+    };
+    codeId.value = id;
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 删除代码块
+  const deleteCode = async (key: string) => {
+    codeBlockService?.deleteCodeDslByIds([key]);
+  };
+
+  const submitCodeBlockHandler = async (values: CodeBlockContent) => {
+    if (!codeId.value) return;
+
+    await codeBlockService?.setCodeDslById(codeId.value, values);
+
+    codeBlockEditor.value?.hide();
+  };
+
+  return {
+    codeId,
+    codeConfig,
+    codeBlockEditor,
+
+    createCodeBlock,
+    editCode,
+    deleteCode,
+    submitCodeBlockHandler,
+  };
+};

package/src/hooks/use-data-source-method.ts

@@ -0,0 +1,100 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { getConfig } from '@editor/utils/config';
+
+export const useDataSourceMethod = () => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  const dataSource = ref<DataSourceSchema>();
+  const dataSourceMethod = ref('');
+
+  return {
+    codeConfig,
+    codeBlockEditor,
+
+    createCode: async (model: DataSourceSchema) => {
+      codeConfig.value = {
+        name: '',
+        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
+        params: [],
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = '';
+
+      codeBlockEditor.value?.show();
+    },
+
+    editCode: async (model: DataSourceSchema, methodName: string) => {
+      const method = model.methods?.find((method) => method.name === methodName);
+
+      if (!method) {
+        tMagicMessage.error('获取数据源方法失败');
+        return;
+      }
+
+      let codeContent = method.content;
+
+      if (typeof codeContent !== 'string') {
+        codeContent = codeContent.toString();
+      }
+
+      codeConfig.value = {
+        ...cloneDeep(method),
+        content: codeContent,
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = methodName;
+
+      codeBlockEditor.value?.show();
+    },
+
+    deleteCode: async (model: DataSourceSchema, methodName: string) => {
+      if (!model.methods) return;
+
+      const index = model.methods.findIndex((method) => method.name === methodName);
+
+      if (index === -1) {
+        return;
+      }
+
+      model.methods.splice(index, 1);
+    },
+
+    submitCode: (values: CodeBlockContent) => {
+      if (!dataSource.value) return;
+
+      if (!dataSource.value.methods) {
+        dataSource.value.methods = [];
+      }
+
+      if (values.content) {
+        // 在保存的时候转换代码内容
+        const parseDSL = getConfig('parseDSL');
+        if (typeof values.content === 'string') {
+          values.content = parseDSL<(...args: any[]) => any>(values.content);
+        }
+      }
+
+      if (dataSourceMethod.value) {
+        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
+        dataSource.value.methods.splice(index, 1, values);
+      } else {
+        dataSource.value.methods.push(values);
+      }
+
+      codeBlockEditor.value?.hide();
+    },
+  };
+};