form-designer-xinyi 1.0.0

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);
+}

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div v-for="(item, index) in colList" :key="index" class="EColEditor-item">
+      <Number v-model:value="item.componentProps.span" v-model="item.componentProps.span" style="width:100%" :min="1"
+        :max="24" />
+      <div v-if="colList.length > 1" class="epic-del-btn">
+        <span @click="handleDelete(index)">
+          <EIcon name="icon-shanchu1" />
+        </span>
+
+      </div>
+    </div>
+    <div class="add-btn" @click="handleAdd">
+      添加
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { pluginManager, getUUID } from '@epic-designer/utils'
+import { ComponentSchema } from '../../types/epic-designer'
+import { computed, PropType } from 'vue'
+import EIcon from '../../components/icon'
+
+const Number = pluginManager.getComponent('number')
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<ComponentSchema[]>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const colList = computed({
+  get() {
+    return props.modelValue
+  },
+  set(e) {
+    emit('update:modelValue', e)
+  }
+})
+
+/**
+ * 新增栅格Col
+ */
+function handleAdd() {
+  const colItem = {
+    type: 'col',
+    children: [],
+    componentProps: {
+      span: 12
+    },
+    id: getUUID()
+  }
+  colList.value.push(colItem)
+}
+
+/**
+ * 删除栅格Col
+ * @param index
+ */
+function handleDelete(index: number) {
+  colList.value = colList.value.filter((item, i) => index !== i)
+}
+
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <Input class="epic-input-size" v-model="size" v-model:value="size" type="number" min="0" placeholder="请输入">
+  <template #suffix>
+    <Select v-model:value="unit" v-model="unit" style="width: 68px" :options="unitArray" />
+  </template>
+  </Input>
+</template>
+<script lang="ts" setup>
+import { pluginManager } from '@epic-designer/utils'
+import { ref, watch, nextTick } from 'vue'
+const Input = pluginManager.getComponent('input')
+const Select = pluginManager.getComponent('select')
+const props = defineProps<{
+  modelValue?: string | number
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+const size = ref<string | null>(null)
+const unit = ref('px')
+const unitArray = [
+  { label: 'px', value: 'px' },
+  { label: '%', value: '%' },
+  { label: 'vw', value: 'vw' },
+  { label: 'vh', value: 'vh' },
+  { label: 'rem', value: 'rem' },
+  { label: 'em', value: 'em' },
+  { label: 'pt', value: 'pt' }
+]
+watch(() => props.modelValue, e => {
+  if (!e) return
+  // 默认传入数值时 单位默认为px
+  if (typeof e === 'number') {
+    size.value = String(e)
+    unit.value = 'px'
+    return
+  }
+  const num = parseFloat(e)
+  // 传入值为空或不正常时
+  if (isNaN(num)) {
+    size.value = null
+    return false
+  }
+  const regex = /^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt){1}$/
+  const match = e.trim().match(regex)
+  size.value = match?.[1] ?? null
+  unit.value = match?.[3] ?? ''
+}, {
+  immediate: true
+})
+
+watch(() => unit.value + size.value, () => {
+  handleUpdate()
+})
+
+function handleUpdate() {
+  nextTick(() => emit('update:modelValue', size.value ? size.value + unit.value : undefined))
+}
+
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <div class="">
+    <div class="py-4 my-2 text-center text-gray-400 bg-white" v-show="!innerValue?.length">暂无选项</div>
+    <!-- <div>
+      <div :class="tree ? 'grid-cols-[16px_auto_auto_16px_16px]' : 'grid-cols-[16px_auto_auto_16px]'"
+        class="option-item grid gap-2 items-center mb-2">
+        <span></span>
+        <div class="text-center">label</div>
+        <div class="text-center">value</div>
+      </div>
+    </div> -->
+    <EOptionItem v-model="innerValue" />
+    <Button @click="handleAdd">添加选项</Button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import EOptionItem from './optionItem.vue'
+import { pluginManager } from '@epic-designer/utils'
+import { provide, reactive } from 'vue';
+import { useVModel } from '@vueuse/core'
+const Button = pluginManager.getComponent('button')
+const props = defineProps<{
+  tree?: boolean,
+  modelValue: Option[],
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const innerValue = useVModel(props, 'modelValue', emit)
+
+interface Option {
+  label: string,
+  value: string,
+  children?: Option[]
+}
+
+
+provide('tree', props.tree)
+
+/**
+ *  添加选项
+ */
+function handleAdd() {
+  const option: Option = reactive({
+    label: "",
+    value: ""
+  })
+  innerValue.value = [...innerValue.value, option]
+}
+
+</script>

package/packages/core/extensions/EOptionsEditor/optionItem.vue

@@ -0,0 +1,72 @@
+<template>
+  <draggable v-model="innerValue" item-key="id" :component-data="{
+    type: 'transition-group',
+  }" group="option-list" handle=".handle" :animation="200">
+    <template #item="{ element: option, index }">
+      <div>
+        <div :class="tree ? 'grid-cols-[16px_auto_auto_16px_16px]' : 'grid-cols-[16px_auto_auto_16px]'"
+          class="option-item grid gap-2 items-center mb-2">
+          <EIcon class="mr-2 text-lg cursor-move handle" name="icon-tuozhuai" />
+          <Input v-model="option.label" v-model:value="option.label" placeholder="label"></Input>
+          <Input v-model="option.value" v-model:value="option.value" placeholder="value"></Input>
+          <EIcon v-if="tree" class="text-lg" name="icon-tianjia1" @click="handleAddChildren(option)" />
+          <EIcon class="text-lg hover:text-red cursor-pointer" name="icon-shanchu1" @click="handleRemove(index)" />
+        </div>
+        <div class="pl-4" v-if="option.children">
+          <EOptionItem v-model="option.children" />
+        </div>
+      </div>
+    </template>
+  </draggable>
+</template>
+
+<script lang="ts" setup>
+import draggable from 'vuedraggable'
+import { pluginManager } from '@epic-designer/utils'
+import { inject } from 'vue';
+import EIcon from '../../components/icon'
+import { useVModel } from '@vueuse/core'
+
+interface Option {
+  label: string,
+  value: string,
+  children?: Option[]
+}
+
+defineOptions({
+  name: 'EOptionItem'
+})
+
+const props = defineProps<{
+  modelValue: Option[],
+}>()
+const Input = pluginManager.getComponent('input')
+const tree = inject('tree', false)
+const emit = defineEmits(['update:modelValue'])
+const innerValue = useVModel(props, 'modelValue', emit)
+
+
+/**
+ *  添加选项子选项
+ */
+function handleAddChildren(option: Option) {
+  const childrenOption: Option = {
+    label: "",
+    value: ""
+  }
+
+  if (option.children) {
+    option.children.push(childrenOption)
+  } else {
+    option.children = [childrenOption]
+  }
+}
+
+/**
+ * 删除选项
+ * @param index 
+ */
+function handleRemove(index: number) {
+  innerValue.value = innerValue.value.filter((_item, i) => i !== index)
+}
+</script>