@tmagic/editor 1.4.8 → 1.4.10

package/src/fields/EventSelect.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="m-fields-event-select">
+    <m-form-table
+      v-if="isOldVersion"
+      ref="eventForm"
+      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="size" :disabled="disabled" @click="addEvent()"
+        >添加事件</TMagicButton
+      >
+      <MPanel
+        v-for="(cardItem, index) in model[name]"
+        :key="index"
+        :disabled="disabled"
+        :size="size"
+        :config="actionsConfig"
+        :model="cardItem"
+        :label-width="config.labelWidth || '100px'"
+        @change="onChangeHandler"
+      >
+        <template #header>
+          <MFormContainer
+            class="fullWidth"
+            :config="eventNameConfig"
+            :model="cardItem"
+            :disabled="disabled"
+            :size="size"
+            @change="onChangeHandler"
+          ></MFormContainer>
+          <TMagicButton
+            style="color: #f56c6c"
+            link
+            :icon="Delete"
+            :disabled="disabled"
+            :size="size"
+            @click="removeEvent(index)"
+          ></TMagicButton>
+        </template>
+      </MPanel>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { Delete } from '@element-plus/icons-vue';
+import { has } from 'lodash-es';
+
+import type { EventOption } from '@tmagic/core';
+import { TMagicButton } from '@tmagic/design';
+import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
+import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+
+import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
+import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
+
+defineOptions({
+  name: 'MFieldsEventSelect',
+});
+
+const props = defineProps<FieldProps<EventSelectConfig>>();
+
+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: ChildConfig = {
+    name: 'name',
+    text: '事件',
+    type: (mForm, { formValue }: any) => {
+      if (
+        props.config.src !== 'component' ||
+        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
+      ) {
+        return 'cascader';
+      }
+      return 'select';
+    },
+    labelWidth: '40px',
+    checkStrictly: () => props.config.src !== 'component',
+    valueSeparator: '.',
+    options: (mForm: FormState, { formValue }: any) => {
+      let events: EventOption[] | CascaderOption[] = [];
+
+      if (!eventsService || !dataSourceService) return events;
+
+      if (props.config.src === 'component') {
+        events = eventsService.getEvent(formValue.type);
+
+        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+          const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+          if (pageFragment) {
+            events = [
+              {
+                label: pageFragment.name || '迭代器容器',
+                value: pageFragment.id,
+                children: events,
+              },
+            ];
+            pageFragment.items.forEach((node) => {
+              traverseNode<MComponent | MContainer>(node, (node) => {
+                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
+
+                events.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeEvents,
+                });
+              });
+            });
+
+            return events;
+          }
+        }
+
+        return events.map((option) => ({
+          text: option.label,
+          value: option.value,
+        }));
+      }
+
+      if (props.config.src === 'datasource') {
+        // 从数据源类型中获取到相关事件
+        events = dataSourceService.getFormEvent(formValue.type);
+        // 从数据源类型和实例中分别获取数据以追加数据变化的事件
+        const dataSource = dataSourceService.getDataSourceById(formValue.id);
+        const fields = dataSource?.fields || [];
+        if (fields.length > 0) {
+          return [
+            ...events,
+            {
+              label: '数据变化',
+              value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+              children: getCascaderOptionsFromFields(fields),
+            },
+          ];
+        }
+
+        return events;
+      }
+    },
+  };
+  return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
+});
+
+// 联动类型
+const actionTypeConfig = computed(() => {
+  const defaultActionTypeConfig = {
+    name: 'actionType',
+    text: '联动类型',
+    type: 'select',
+    defaultValue: ActionType.COMP,
+    options: () => [
+      {
+        text: '组件',
+        label: '组件',
+        value: ActionType.COMP,
+      },
+      {
+        text: '代码',
+        label: '代码',
+        disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
+        value: ActionType.CODE,
+      },
+      {
+        text: '数据源',
+        label: '数据源',
+        disabled: !dataSourceService
+          ?.get('dataSources')
+          ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
+        value: ActionType.DATA_SOURCE,
+      },
+    ],
+  };
+  return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
+});
+
+// 联动组件配置
+const targetCompConfig = computed(() => {
+  const defaultTargetCompConfig = {
+    name: 'to',
+    text: '联动组件',
+    type: 'ui-select',
+    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    onChange: (MForm: FormState, v: string, { model }: any) => {
+      model.method = '';
+      return v;
+    },
+  };
+  return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
+});
+
+// 联动组件动作配置
+const compActionConfig = computed(() => {
+  const defaultCompActionConfig: ChildConfig = {
+    name: 'method',
+    text: '动作',
+    type: (mForm, { model }: any) => {
+      const to = editorService?.getNodeById(model.to);
+
+      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
+        return 'cascader';
+      }
+
+      return 'select';
+    },
+    checkStrictly: () => props.config.src !== 'component',
+    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
+    options: (mForm: FormState, { model }: any) => {
+      const node = editorService?.getNodeById(model.to);
+      if (!node?.type) return [];
+
+      let methods: EventOption[] | CascaderOption[] = [];
+
+      methods = eventsService?.getMethod(node.type) || [];
+
+      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+        const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+        if (pageFragment) {
+          methods = [];
+          pageFragment.items.forEach((node: MComponent | MContainer) => {
+            traverseNode<MComponent | MContainer>(node, (node) => {
+              const nodeMethods = (node.type && eventsService?.getMethod(node.type)) || [];
+
+              if (nodeMethods.length) {
+                methods.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeMethods,
+                });
+              }
+            });
+          });
+
+          return methods;
+        }
+      }
+
+      return methods.map((method) => ({
+        text: method.label,
+        value: method.value,
+      }));
+    },
+  };
+  return { ...defaultCompActionConfig, ...props.config.compActionConfig };
+});
+
+// 代码联动配置
+const codeActionConfig = computed(() => {
+  const defaultCodeActionConfig: CodeSelectColConfig = {
+    type: 'code-select-col',
+    text: '代码块',
+    name: 'codeId',
+    notEditable: () => !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',
+    text: '数据源方法',
+    name: 'dataSourceMethod',
+    notEditable: () => !services?.dataSourceService.get('editable'),
+    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
+  };
+  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
+});
+
+// 兼容旧的数据格式
+const tableConfig = computed(() => ({
+  type: 'table',
+  name: 'events',
+  items: [
+    {
+      name: 'name',
+      label: '事件名',
+      type: eventNameConfig.value.type,
+      options: (mForm: FormState, { formValue }: any) =>
+        eventsService?.getEvent(formValue.type).map((option: any) => ({
+          text: option.label,
+          value: option.value,
+        })),
+    },
+    {
+      name: 'to',
+      label: '联动组件',
+      type: 'ui-select',
+    },
+    {
+      name: 'method',
+      label: '动作',
+      type: compActionConfig.value.type,
+      options: (mForm: FormState, { model }: any) => {
+        const node = editorService?.getNodeById(model.to);
+        if (!node?.type) return [];
+
+        return eventsService?.getMethod(node.type).map((option: any) => ({
+          text: option.label,
+          value: option.value,
+        }));
+      },
+    },
+  ],
+}));
+
+// 组件动作组表单配置
+const actionsConfig = computed<PanelConfig>(() => ({
+  type: 'panel',
+  items: [
+    {
+      type: 'group-list',
+      name: 'actions',
+      expandAll: true,
+      enableToggleMode: false,
+      titlePrefix: '动作',
+      items: [
+        actionTypeConfig.value,
+        targetCompConfig.value,
+        compActionConfig.value,
+        codeActionConfig.value,
+        dataSourceActionConfig.value,
+      ],
+    },
+  ],
+}));
+
+// 是否为旧的数据格式
+const isOldVersion = computed(() => {
+  if (props.model[props.name].length === 0) return false;
+  return !has(props.model[props.name][0], 'actions');
+});
+
+// 添加事件
+const addEvent = () => {
+  const defaultEvent = {
+    name: '',
+    actions: [],
+  };
+  if (!props.model[props.name]) {
+    props.model[props.name] = [];
+  }
+  props.model[props.name].push(defaultEvent);
+  onChangeHandler();
+};
+
+// 删除事件
+const removeEvent = (index: number) => {
+  if (!props.name) return;
+  props.model[props.name].splice(index, 1);
+  onChangeHandler();
+};
+
+const onChangeHandler = () => {
+  emit('change', props.model);
+};
+</script>

package/src/fields/KeyValue.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="m-fields-key-value">
+    <div v-if="!showCode">
+      <div class="m-fields-key-value-item" v-for="(item, index) in records" :key="index">
+        <TMagicInput
+          placeholder="key"
+          v-model="records[index][0]"
+          :disabled="disabled"
+          :size="size"
+          @change="keyChangeHandler"
+        ></TMagicInput>
+        <span class="m-fileds-key-value-delimiter">:</span>
+        <TMagicInput
+          placeholder="value"
+          v-model="records[index][1]"
+          :disabled="disabled"
+          :size="size"
+          @change="valueChangeHandler"
+        ></TMagicInput>
+
+        <TMagicButton
+          class="m-fileds-key-value-delete"
+          type="danger"
+          :size="size"
+          :disabled="disabled"
+          circle
+          plain
+          :icon="Delete"
+          @click="deleteHandler(index)"
+        ></TMagicButton>
+      </div>
+
+      <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+        >添加</TMagicButton
+      >
+    </div>
+
+    <MagicCodeEditor
+      v-if="config.advanced && showCode"
+      height="200px"
+      :init-values="model[name]"
+      language="json"
+      :options="{
+        readOnly: disabled,
+      }"
+      :parse="true"
+      @save="save"
+    ></MagicCodeEditor>
+
+    <TMagicButton
+      v-if="config.advanced"
+      size="default"
+      :disabled="disabled"
+      link
+      :icon="CodeIcon"
+      @click="showCode = !showCode"
+    ></TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { Delete, Plus } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicInput } from '@tmagic/design';
+import type { FieldProps, FormItem } from '@tmagic/form';
+
+import CodeIcon from '@editor/icons/CodeIcon.vue';
+import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
+
+defineOptions({
+  name: 'MFieldsKeyValue',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<
+      {
+        type: 'key-value';
+        advanced?: boolean;
+      } & FormItem
+    >
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
+
+const records = ref<[string, string][]>([]);
+const showCode = ref(false);
+
+watchEffect(() => {
+  const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
+
+  for (const [, value] of initValues) {
+    if (typeof value !== 'string') {
+      showCode.value = true;
+      break;
+    }
+  }
+
+  records.value = initValues;
+});
+
+const getValue = () => {
+  const record: Record<string, string> = {};
+  records.value.forEach(([key, value]) => {
+    if (key) {
+      record[key] = value;
+    }
+  });
+  return record;
+};
+
+const keyChangeHandler = () => {
+  emit('change', getValue());
+};
+
+const valueChangeHandler = () => {
+  emit('change', getValue());
+};
+
+const addHandler = () => {
+  records.value.push(['', '']);
+};
+
+const deleteHandler = (index: number) => {
+  records.value.splice(index, 1);
+  emit('change', getValue());
+};
+
+const save = (v: string | any) => {
+  emit('change', v);
+};
+</script>

package/src/fields/PageFragmentSelect.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="m-fields-page-fragment-select">
+    <div class="page-fragment-select-container">
+      <!-- 页面片下拉框 -->
+      <m-form-container
+        class="select"
+        :config="selectConfig"
+        :model="model"
+        :size="size"
+        @change="changeHandler"
+      ></m-form-container>
+      <!-- 编辑按钮 -->
+      <Icon v-if="model[name]" class="icon" :icon="Edit" @click="editPageFragment(model[name])"></Icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+import { FieldProps } from '@tmagic/form';
+import { Id, NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { PageFragmentSelectConfig, Services } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsPageFragmentSelect',
+});
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
+  disabled: false,
+});
+const pageList = computed(() =>
+  services?.editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
+);
+
+const selectConfig = {
+  type: 'select',
+  name: props.name,
+  options: () => {
+    if (pageList.value) {
+      return pageList.value.map((item) => ({
+        text: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+        label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+        value: item.id,
+      }));
+    }
+    return [];
+  },
+};
+const changeHandler = async () => {
+  emit('change', props.model[props.name]);
+};
+
+const editPageFragment = (id: Id) => {
+  services?.editorService.select(id);
+};
+</script>

package/src/fields/UISelect.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" link style="padding: 0"
+      >取消</TMagicButton
+    >
+  </div>
+  <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"
+          link
+          @click.stop="deleteHandler"
+        ></TMagicButton>
+      </TMagicTooltip>
+
+      <TMagicTooltip content="点击选中组件" placement="top">
+        <TMagicButton
+          link
+          style="padding: 0; margin: 0"
+          :disabled="disabled"
+          :size="size"
+          @click="selectNode(val)"
+          @mouseenter="highlight(val)"
+          @mouseleave="unhighlight"
+          >{{ `${toName}_${val}` }}</TMagicButton
+        >
+      </TMagicTooltip>
+    </template>
+
+    <TMagicTooltip v-else content="点击此处选择" placement="top">
+      <TMagicButton link style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+        >点击此处选择</TMagicButton
+      >
+    </TMagicTooltip>
+  </div>
+</template>
+
+<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 type { FieldProps, FormItem, FormState } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
+
+import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsUISelect',
+});
+
+const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
+
+const emit = defineEmits(['change']);
+
+const services = inject<Services>('services');
+const mForm = inject<FormState>('mForm');
+const val = computed(() => props.model[props.name]);
+const uiSelectMode = ref(false);
+
+const cancelHandler = () => {
+  if (!services?.uiService) return;
+  services.uiService.set('uiSelectMode', false);
+  uiSelectMode.value = false;
+  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
+};
+
+const clickHandler = ({ detail }: Event & { detail: any }) => {
+  if (detail.id) {
+    props.model[props.name] = detail.id;
+    emit('change', detail.id);
+    mForm?.$emit('field-change', props.prop, detail.id);
+  }
+
+  if (cancelHandler) {
+    cancelHandler();
+  }
+};
+
+const toName = computed(() => {
+  const config = services?.editorService.getNodeById(val.value);
+  return config?.name || '';
+});
+
+const startSelect = () => {
+  if (!services?.uiService) return;
+  services.uiService.set('uiSelectMode', true);
+  uiSelectMode.value = true;
+  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
+};
+
+const deleteHandler = () => {
+  if (props.model) {
+    props.model[props.name] = '';
+    emit('change', '');
+    mForm?.$emit('field-change', props.prop, '');
+  }
+};
+
+const selectNode = async (id: Id) => {
+  await services?.editorService.select(id);
+  services?.editorService.get('stage')?.select(id);
+  services?.stageOverlayService.get('stage')?.select(id);
+};
+
+const highlight = throttle((id: Id) => {
+  services?.editorService.highlight(id);
+  services?.editorService.get('stage')?.highlight(id);
+  services?.stageOverlayService.get('stage')?.highlight(id);
+}, 150);
+
+const unhighlight = () => {
+  services?.editorService.set('highlightNode', null);
+  services?.editorService.get('stage')?.clearHighlight();
+  services?.stageOverlayService.get('stage')?.clearHighlight();
+};
+</script>
+
+<style lang="scss">
+.m-fields-ui-select {
+  cursor: pointer;
+  i {
+    margin-right: 3px;
+  }
+  span {
+    color: #2882e0;
+  }
+}
+</style>