@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

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,37 +29,45 @@
             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>
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorEventSelect">
-import { computed, defineProps, inject } from 'vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 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';
 
-const services = inject<Services>('services');
+defineOptions({
+  name: 'MEditorEventSelect',
+});
+
+const props = defineProps<FieldProps<EventSelectConfig>>();
 
-const props = defineProps<{
-  config: EventSelectConfig;
-  model: any;
-  prop: string;
-  name: string;
-  size: 'small' | 'default' | 'large';
-}>();
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {
@@ -76,7 +89,7 @@ const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     defaultValue: ActionType.COMP,
     options: () => [
@@ -88,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 };
@@ -100,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,
   };
@@ -112,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) => {
@@ -130,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',
@@ -181,8 +214,15 @@ const actionsConfig = computed(() => ({
     {
       type: 'group-list',
       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,21 +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,32 +1,61 @@
 <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>
 
-<script lang="ts" setup name="MEditorUISelect">
+<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';
 
-const props = defineProps<{
-  config: any;
-  model: any;
-  prop: string;
-  name: string;
-}>();
+defineOptions({
+  name: 'MEditorUISelect',
+});
+
+const props = defineProps<FieldProps<any>>();
 
 const emit = defineEmits(['change']);
 
@@ -73,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();
+    },
+  };
+};

package/src/{utils/stage.ts → hooks/use-stage.ts}

@@ -1,12 +1,12 @@
 import { computed } from 'vue';
 
+import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
 import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
-
-import { getGuideLineFromCache } from './editor';
+import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
 const page = computed(() => editorService.get('page'));
@@ -74,11 +74,8 @@ export const useStage = (stageOptions: StageOptions) => {
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
-    editorService.remove(
-      ev.data.map(({ el }) => ({
-        id: el.id,
-      })),
-    );
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
   });
 
   stage.on('select-parent', () => {

package/src/icons/AppManageIcon.vue

@@ -8,4 +8,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorAppManageIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>

package/src/icons/CenterIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H21V6H2V4Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11H18V13H5V11Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 18H21V20H2V18Z" fill="black" fill-opacity="0.9" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCenterIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -1,7 +1,5 @@
 <template>
-  <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
   <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">
@@ -23,4 +21,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorCodeIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>

package/src/index.ts

@@ -22,6 +22,11 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+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 DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -34,6 +39,7 @@ import './theme/index.scss';
 
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
@@ -51,21 +57,31 @@ export { default as LayerPanel } from './layouts/sidebar/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 DataSourceMethods } from './fields/DataSourceMethods.vue';
+export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
+export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
+export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
-export { default as LayoutContainer } from './components/Layout.vue';
+export { default as LayoutContainer } from './components/SplitView.vue';
+export { default as SplitView } from './components/SplitView.vue';
+export { default as Resizer } from './components/Resizer.vue';
+export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 
 const defaultInstallOpt: InstallOptions = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
 };
 
 export default {
-  install: (app: App, opt?: InstallOptions): void => {
+  install: (app: App, opt?: Partial<InstallOptions>): void => {
     const option = Object.assign(defaultInstallOpt, opt || {});
 
     // eslint-disable-next-line no-param-reassign
@@ -81,5 +97,10 @@ export default {
     app.component('m-fields-event-select', EventSelect);
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
   },
 };