epic-designer-gold 0.0.49 → 1.0.1

package/packages/core/extensions/EActionEditor/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <Collapse v-model="activeNames" v-model:activeKey="activeNames" v-model:expanded-names="activeNames">
+    <CollapseItem v-for="(item) in filterEventList" :key="item.title" :title="item.title" :header="item.title"
+      :name="item.title">
+      <EActionEditorItem v-model="modelValueComputed" :item-events="item.events" :all-events="allEvents"
+        :events="events" @add="handleOpen" @edit="handleOpenEdit" />
+    </CollapseItem>
+  </Collapse>
+  <EActionModal ref="EActionModalRef" @add="handleAdd" @edit="handleEdit" />
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed, ref, nextTick, toRaw, watch } from 'vue'
+import EActionEditorItem from './src/EActionEditorItem.vue'
+import { pluginManager } from '@epic-designer/utils'
+import EActionModal from './src/EActionModal.vue'
+const Collapse = pluginManager.getComponent('Collapse')
+const CollapseItem = pluginManager.getComponent('CollapseItem')
+
+const EActionModalRef = ref<any>(null)
+let editIndex = 0
+const props = defineProps({
+  eventList: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  modelValue: {
+    type: Object as PropType<any>
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValueComputed = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+const activeNames = ref<string[]>([])
+
+// 过滤无事件
+const filterEventList = computed(() => {
+  return props.eventList.filter((item: { events: string | any[]; }) => item.events.length)
+})
+
+const allEvents = computed(() => {
+  return props.eventList.map((item: { events: any; }) => item.events).flat()
+})
+
+
+
+
+const events = ref<any>({})
+
+
+
+
+allEvents.value.forEach((item: any) => {
+
+  events.value[item.type] = computed({
+    get() {
+      return modelValueComputed.value?.[item.type] ?? []
+    },
+    set(e) {
+      if (e && e.length) {
+        modelValueComputed.value[item.type] = e.map(item => toRaw(item))
+      } else {
+        // 事件动作为空时，则清除该事件列表
+        delete modelValueComputed.value[item.type]
+      }
+    }
+  })
+
+})
+
+// 监视 filterEventList.value 的变化
+watch(() => filterEventList.value, (e) => {
+  // 当 filterEventList.value 变化时执行回调函数
+  if (e.length) {
+    // 如果 filterEventList.value 不为空数组
+    // 过滤出满足条件的事件，并将它们的标题存储在 activeNames.value 中
+    activeNames.value = e.filter(item => {
+      // 对于每个事件项，检查其包含的事件类型
+      for (let i = 0; i < item.events.length; i++) {
+        const type = item.events[i].type
+        // 如果 events.value[type] 不为空数组，则返回 true
+        if (events.value[type].length) {
+          return true
+        }
+      }
+      // 如果事件项中没有任何一个事件类型满足条件，则返回 false
+      return false
+    }).map(item => item.title) // 将满足条件的事件项的标题映射成一个新的数组
+  }
+}, {
+  // 配置选项
+  immediate: true // 立即执行一次回调函数
+})
+
+
+
+let currentType: string = ''
+/**
+ * 打开动作配置窗口
+ * @param type
+ */
+function handleOpen(type: string) {
+  EActionModalRef.value?.handleOpen()
+  currentType = type
+}
+
+
+/**
+ * 打开动作配置窗口-编辑
+ * @param {number} index - 要编辑事件的索引
+ * @param {string} type - 事件类型
+ * @param {any} action - 要执行的动作
+ */
+function handleOpenEdit(index: number, type: string, action) {
+  // 如果 EActionModalRef.value 不为 null 或 undefined，则调用其 handleOpenEdit 方法
+  EActionModalRef.value?.handleOpenEdit(action)
+
+  // 将要编辑的事件的索引赋值给 editIndex
+  editIndex = index
+
+  // 将事件的类型赋值给 currentType
+  currentType = type
+}
+
+/**
+ * 编辑事件的函数
+ * @param {any} action - 动作数据
+ */
+function handleEdit(action: any) {
+  // 将编辑后的动作替换掉 events.value[currentType][editIndex]
+  events.value[currentType][editIndex] = action
+
+  // 更新 modelValueComputed.value[currentType]，使用新的数组代替原始数组
+  modelValueComputed.value[currentType] = [...(events.value[currentType] ?? [])]
+}
+
+
+/**
+ * 添加组件事件
+ * @param {any} action - 要执行的动作
+ */
+function handleAdd(action: any) {
+  // 如果 modelValueComputed.value 为 null 或 undefined，则创建一个新的对象
+  if (!modelValueComputed.value) {
+    modelValueComputed.value = { [currentType]: [...(events.value[currentType] ?? []), action] }
+    return
+  }
+
+  // 否则，直接在 modelValueComputed.value[currentType] 中添加新的动作
+  modelValueComputed.value[currentType] = [...(events.value[currentType] ?? []), action]
+}
+
+</script>

package/packages/core/extensions/EActionEditor/src/EActionEditorItem.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-for="item in itemEvents" :key="item.type" class="epic-event-item">
+    <div class="epic-event-info">
+      <div class="epic-event-label" :title="item.describe">
+        {{ item.describe }}
+      </div>
+      <div class="epic-event-btn text-lg flex items-center text-$epic-text-secondary">
+        <EIcon name="icon--epic--add-rounded" @click="handleOpen(item.type)" />
+      </div>
+    </div>
+    <div class="epic-action-editor-main">
+      <draggable v-model="props.events[item.type]" item-key="id" :component-data="{
+        type: 'transition-group',
+      }" group="option-list" handle=".handle" :animation="200">
+        <template #item="{ element: action, index }">
+          <div class="epic-editor-item rounded">
+            <div class="w-36px flex items-center text-lg">
+              <EIcon class="mr-2 text-lg cursor-move handle text-$epic-text-medium" name="icon--epic--drag" />
+            </div>
+            <div class="flex-1">
+              <div v-if="action.type === 'component'">
+                {{ getLabel(action.componentId) }}
+              </div>
+              <div v-else-if="action.type === 'custom'">
+                自定义函数
+              </div>
+              <div v-else-if="action.type === 'public'">
+                公共函数
+              </div>
+              {{ action.methodName }}
+            </div>
+            <div class="epic-action-box text-lg text-$epic-text-medium">
+              <div class="epic-edit-btn" @click="handleEdit(index, item.type, action)">
+                <EIcon name="icon--epic--page-info-outline-rounded" />
+              </div>
+              <div class="epic-del-btn" @click="handleDelete(index, item.type)">
+                <EIcon name="icon--epic--delete-outline-rounded" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </draggable>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType, inject } from 'vue'
+import { findSchemaById } from '@epic-designer/utils'
+import { PageSchema } from '../../../types/epic-designer'
+import EIcon from '../../../components/icon'
+import draggable from 'vuedraggable'
+
+const props = defineProps({
+  itemEvents: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  allEvents: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  modelValue: {
+    type: Object as PropType<any>,
+    default: () => []
+  },
+  events: {
+    type: Object as PropType<any>,
+    default: () => ({})
+  }
+})
+const emit = defineEmits(['add', 'edit', 'update:modelValue'])
+
+const pageSchema = inject('pageSchema') as PageSchema
+
+/**
+ * 打开动作配置窗口
+ * @param type
+ */
+function handleOpen(type: string) {
+  emit('add', type)
+}
+
+/**
+ * 获取组件label
+ * @param id
+ */
+function getLabel(id: string) {
+  const schema = findSchemaById(pageSchema.schemas, id)
+  return schema.label
+}
+
+/**
+ * 删除
+ * @param index
+ */
+function handleDelete(index: number, type: string) {
+  const newEvents = getNewEvents(type)
+  newEvents[type] = props.events[type].filter((_item: any, i: number) => index !== i)
+  if (!newEvents[type]?.length) {
+    delete newEvents[type]
+  }
+  emit('update:modelValue', newEvents)
+}
+
+/**
+ * 修改事件
+ * @param index
+ * @param type
+ * @param action
+ */
+function handleEdit(index: number, type: string, action: any) {
+  emit('edit', index, type, action)
+}
+
+/**
+ * 获取新的事件数据，过滤空数据
+ * @param type
+ */
+function getNewEvents(type: string) {
+  const newEvents: { [type: string]: any } = {}
+  props.allEvents.forEach((item: any) => {
+    if (!props.events[item.type].length) {
+      return false
+    }
+    if (item.type === type) {
+      return false
+    }
+    newEvents[item.type] = props.events[item.type]
+  })
+  return newEvents
+}
+
+</script>

package/packages/core/extensions/EActionEditor/src/EActionModal.vue

@@ -0,0 +1,258 @@
+<template>
+  <Modal
+    v-model="visible"
+    class="w-1200px"
+    width="1200px"
+    @close="handleClose"
+    @ok="handleSave"
+    title="动作配置"
+  >
+    <div class="rounded epic-modal-action-main">
+      <div class="epic-modal-left-panel h-full flex flex-col">
+        <!-- 动作所属对象 start -->
+        <div class="flex flex-1 h-0 flex-col">
+          <div
+            class="fun-btn"
+            :class="{ checked: state.actionItem.type === 'custom' }"
+            @click="toggleMethod('custom')"
+          >
+            自定义函数
+          </div>
+          <div
+            class="fun-btn"
+            :class="{ checked: state.actionItem.type === 'public' }"
+            @click="toggleMethod('public')"
+          >
+            公共函数
+          </div>
+          组件
+          <div class="flex-1 h-0">
+            <ETree
+              v-model:selectedKeys="selectedKeys"
+              :options="pageSchema.schemas"
+              @nodeClick="handleNodeClick"
+            />
+          </div>
+        </div>
+        <!-- 动作选择 start -->
+        <div class="epic-action-select h-30/100 flex flex-col">
+          <div class="mb-2">动作选择</div>
+          <div class="flex-1 overflow-auto pr-8px">
+            <div
+              v-for="item in methodOptions"
+              :class="{ checked: item.value === state.actionItem.methodName }"
+              @click="handleCheckedMethod(item.value)"
+              :key="item.value"
+              class="epic-action-item"
+            >
+              <span>{{ item.label }}</span>
+            </div>
+            <div
+              v-show="!methodOptions?.length"
+              class="text-center pt-42px text-gray-400"
+            >
+              当前组件暂无动作
+            </div>
+          </div>
+        </div>
+        <!-- 动作所属对象 end -->
+        <!-- 动作选择 end -->
+      </div>
+      <!-- 动作配置 start -->
+      <div class="epic-modal-right-panel">
+        <EScriptEdit v-if="state.actionItem.type === 'custom'" />
+        <div
+          v-else-if="actionArgsConfigs.length === 0"
+          class="text-center pt-42px text-gray-400"
+        >
+          暂无配置
+        </div>
+        <EArgsEditor
+          v-else
+          v-model="state.actionItem.args"
+          :actionArgsConfigs="actionArgsConfigs"
+        />
+      </div>
+      <!-- 动作配置 end -->
+    </div>
+  </Modal>
+</template>
+<script lang="ts" setup>
+import {
+  pluginManager,
+  PageManager,
+  deepClone,
+  findSchemaById,
+  getUUID,
+} from "@epic-designer/utils";
+import { ref, inject, toRaw, reactive, computed, nextTick } from "vue";
+import ETree from "../../../components/tree";
+import { ComponentSchema, PageSchema, FormDataModel } from "../../../types/epic-designer";
+import EScriptEdit from "./EScriptEdit.vue";
+import EArgsEditor from "./EArgsEditor.vue";
+
+const Modal = pluginManager.getComponent("modal");
+const isAdd = ref(true);
+const pageSchema = inject("pageSchema") as PageSchema;
+const pageManager = inject("pageManager", {}) as PageManager;
+const visible = ref(false);
+const selectedKeys = ref<string[]>([]);
+const componentSchema = ref<ComponentSchema | null>(null);
+
+const emit = defineEmits(["add", "edit"]);
+
+const methodOptions = computed(() => {
+  // 组件动作列表
+  if (state.actionItem.type === "component") {
+    if (componentSchema.value) {
+      return pluginManager
+        .getComponentConfings()
+        [componentSchema.value.type].config.action?.map((item) => ({
+          label: item.describe,
+          value: item.type,
+        }));
+    }
+    return [];
+  }
+
+  // 自定义函数列表
+  if (state.actionItem.type === "custom") {
+    return Object.entries(pageManager.funcs.value)
+      .filter(([_key, value]) => typeof value === "function")
+      .map(([label]) => ({ label, value: label }));
+  }
+
+  // 公共函数列表
+  if (state.actionItem.type === "public") {
+    return Object.entries(pluginManager.publicMethods).map(([label]) => ({
+      label,
+      value: label,
+    }));
+  }
+
+  return [];
+});
+
+const actionArgsConfigs = computed(() => {
+  if (state.actionItem.type === "component") {
+    if (componentSchema.value) {
+      const action = pluginManager.getComponentConfings()[componentSchema.value.type]
+        .config.action;
+      const actionItem = action?.find(
+        (item) => item.type === state.actionItem.methodName
+      );
+
+      if (actionItem?.argsConfigs) {
+        const index = actionItem.argsConfigs.findIndex(
+          (item) => item.label === "设置数据"
+        );
+        index !== -1 &&
+          (actionItem.argsConfigs[index] = {
+            ...componentSchema.value,
+            label: "设置数据",
+            field: "0",
+            id: getUUID(),
+          } as ComponentSchema);
+      }
+
+      return actionItem?.argsConfigs ?? [];
+    }
+  }
+  return [];
+});
+
+const state = reactive({
+  actionItem: {
+    type: "custom",
+    methodName: "test",
+    componentId: null,
+  } as FormDataModel,
+  cacheData: {},
+});
+
+function handleOpen() {
+  visible.value = true;
+  isAdd.value = true;
+  state.actionItem.type = "custom";
+  state.actionItem.componentId = null;
+  if (methodOptions.value?.length) {
+    handleCheckedMethod(methodOptions.value[0].value);
+  }
+}
+function handleOpenEdit(action: any) {
+  visible.value = true;
+  isAdd.value = false;
+  componentSchema.value = null;
+
+  if (action.componentId) {
+    const schema = findSchemaById(pageSchema.schemas, action.componentId);
+
+    componentSchema.value = schema;
+    selectedKeys.value = [action.componentId];
+  }
+
+  nextTick(() => {
+    state.actionItem.componentId = action.componentId;
+    state.actionItem.methodName = action.methodName;
+    state.actionItem.type = action.type;
+    state.actionItem.args = action.args;
+  });
+}
+function handleSave() {
+  if (!state.actionItem.methodName) {
+    alert("请先选择动作方法");
+    return;
+  }
+  emit(isAdd.value ? "add" : "edit", deepClone(toRaw(state.actionItem)));
+  handleClose();
+}
+
+function handleClose() {
+  visible.value = false;
+  selectedKeys.value = [];
+  // 清空缓存数据
+  state.cacheData = {};
+}
+
+function toggleMethod(type: string) {
+  state.actionItem.componentId = null;
+  state.actionItem.type = type;
+  componentSchema.value = null;
+  state.actionItem.methodName = null;
+
+  selectedKeys.value = [];
+  if (methodOptions.value?.length) {
+    handleCheckedMethod(methodOptions.value[0].value);
+  }
+}
+function handleNodeClick(e: any) {
+  if (state.actionItem.args) {
+    // 存在参数配置，缓存参数配置数据
+    state.cacheData[state.actionItem.componentId + state.actionItem.methodName] =
+      state.actionItem.args;
+  }
+
+  state.actionItem.componentId = e.id;
+  state.actionItem.type = "component";
+  state.actionItem.methodName = null;
+  componentSchema.value = e.componentSchema;
+
+  if (methodOptions.value?.length) {
+    handleCheckedMethod(methodOptions.value[0].value);
+  }
+}
+
+function handleCheckedMethod(value: string) {
+  // activeTab.value = '脚本编辑'
+  state.actionItem.methodName = value;
+
+  // 获取缓存参数配置
+  state.actionItem.args =
+    state.cacheData[state.actionItem.componentId + state.actionItem.methodName];
+}
+
+defineExpose({
+  handleOpen,
+  handleOpenEdit,
+});
+</script>

package/packages/core/extensions/EActionEditor/src/EArgsEditor.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="epic-attribute-view">
+    <div v-for="item in props.actionArgsConfigs" :key="item.field + item.type">
+      <div v-show="isShow(item)" class="epic-attr-item" :class="item.layout">
+        <div class="epic-attr-label" :title="item.label">
+          {{ item.label }}
+        </div>
+        <div class="epic-attr-input">
+          <ENode
+            :componentSchema="{ ...item, componentProps: { ...item.componentProps, input: false, field: undefined, hidden: false }, show: true, noFormItem: true }"
+            :model-value="valueRef[item.field!]" @update:model-value="handleSetValue($event, item.field!)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import ENode from '../../../components/node'
+import { ComponentSchema } from '../../../types/epic-designer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string | null | undefined,
+  actionArgsConfigs: ComponentSchema[]
+}>()
+const emits = defineEmits(['update:modelValue'])
+
+const valueRef = computed<any>(() => {
+  if (props.modelValue) {
+    return JSON.parse(props.modelValue)
+  }
+  return []
+})
+
+
+function isShow(item: ComponentSchema) {
+  // show属性为boolean类型则直接返回
+  if (typeof item.show === 'boolean') {
+    return item.show
+  }
+
+  // show属性为function类型则执行
+  if (typeof item.show === 'function') {
+    return item.show?.({ values: valueRef.value! })
+  }
+  return true
+}
+
+/**
+ * 设置属性值
+ */
+function handleSetValue(value: any, field: string) {
+  const values = [
+    ...JSON.parse(props.modelValue ?? '[]')
+  ]
+  values[field] = value
+  emits('update:modelValue', JSON.stringify(values))
+  // 将修改过的组件属性推入撤销操作的栈中
+}
+
+</script>

package/packages/core/extensions/EActionEditor/src/EScriptEdit.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="pb-2">
+      自定义函数编辑
+    </div>
+    <MonacoEditor ref="monacoEditorRef" autoToggleTheme v-model="pageSchema.script" class="epic-editor flex-1" :config="MonacoEditorConfig"
+      language="javascript" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager } from '@epic-designer/utils'
+import { ref, inject } from 'vue'
+import { PageSchema } from '../../../types/epic-designer'
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const MonacoEditorConfig = {
+  theme: 'vs-light',
+  selectOnLineNumbers: true,
+  minimap: {
+    enabled: false
+  }
+}
+const monacoEditorRef = ref<any>(null)
+const pageSchema = inject('pageSchema') as PageSchema
+
+
+</script>

package/packages/core/extensions/EColEditor/index.less

@@ -0,0 +1,24 @@
+
+.EColEditor-item {
+  display: flex;
+  align-items: center;
+  padding-top: 6px;
+
+  .epic-del-btn {
+      width: 50px;
+      height: 100%;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+          color: #f22;
+      }
+  }
+
+}
+
+.add-btn {
+  cursor: pointer;
+  margin-top: 6px;
+  color: var(--epic-primary-color);
+}