epic-designer-gold 0.0.3 → 0.0.4

package/packages/core/components/node/src/node.vue

@@ -0,0 +1,400 @@
+<template>
+  <dynamicFormItem
+    v-if="component && show"
+    :hasFormItem="innerSchema.noFormItem !== true && getComponentConfing?.defaultSchema.input"
+    :formItemProps="getFormItemProps"
+    @updateFormItemRef="updateFormItemRef"
+  >
+    <component
+      :is="component"
+      ref="componentInstance"
+      @vue:mounted="handleAddComponentInstance"
+      :model="formData"
+      v-bind="{ ...getComponentProps }"
+      v-model:[getComponentProps.bindModel]="bindValue"
+      :[`onUpdate:${getComponentProps.bindModel}`]="handleUpdate"
+      :[`onUpdate:dynamicId`]="handleUpdateType"
+    >
+      <!-- 嵌套组件递归 start -->
+      <!-- 渲染子组件 start -->
+      <template #node="data">
+        <ENode v-bind="data" />
+      </template>
+      <!-- 渲染子组件 end -->
+      <!-- 渲染布局设计子组件列表 start -->
+      <template #edit-node>
+        <slot name="edit-node" />
+      </template>
+      <!-- 渲染布局设计子组件列表 end -->
+    </component>
+  </dynamicFormItem>
+</template>
+<script lang="ts" setup>
+import {
+  shallowRef,
+  ref,
+  Ref,
+  inject,
+  computed,
+  reactive,
+  useAttrs,
+  onUnmounted,
+  provide,
+  Slots,
+  renderSlot,
+  defineComponent,
+  watch,
+  h,
+  type ComponentPublicInstance,
+  type ComponentInternalInstance,
+  getCurrentInstance,
+  watchEffect,
+} from "vue";
+import {
+  pluginManager,
+  capitalizeFirstLetter,
+  PageManager,
+  deepClone,
+  deepCompareAndModify,
+  deepEqual,
+} from "@epic-designer/utils";
+import { FormDataModel, ComponentSchema } from "../../../types/epic-designer";
+import dynamicFormItem from "./dynamicFormItem.vue";
+
+export interface ComponentNodeInstance extends ComponentPublicInstance {
+  setValue?: (value: any) => void;
+  getValue?: () => any;
+  setAttr?: (key: string, value: any) => any;
+  getAttr?: (key: string) => any;
+}
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+defineOptions({
+  name: "ENode",
+});
+
+const props = defineProps<{
+  componentSchema: ComponentSchema;
+  modelValue?: any;
+  ruleField?: string[];
+  resetFormData?: boolean;
+  name?: string;
+  dynamicId?: string;
+}>();
+// 双向绑定Value
+const bindValue = ref(null);
+// 表单formData数据
+let formData = inject("formData", reactive({})) as FormDataModel;
+
+const slots = inject("slots", {}) as Slots;
+// 接收页面管理对象
+const pageManager = inject("pageManager", {}) as PageManager;
+// 上级组件注入的disabled状态
+const disabled = inject<Ref<boolean> | { value: false }>("disabled", { value: false });
+// 校验前缀字段
+const ruleFieldPrefix = inject<any[] | null>("ruleFieldPrefix", null);
+// 重置表单数据，不设置到表单formData数据
+const resetFormDataInject = inject<boolean>("resetFormData", false);
+
+// 内部schema数据
+let innerSchema = reactive<ComponentSchema>(deepClone(props.componentSchema));
+// 设计模式模式下，添加字段后缀
+addDesignModeSuffix();
+
+// 监听 props.componentSchema 的变化，并在变化时调用 deepCompareAndModify 方法更新内部schema数据
+watch(
+  () => props.componentSchema,
+  (componentSchema) => {
+    // 深度比较对象属性值是否变更, 忽略 children 节点
+    if (deepEqual(innerSchema, componentSchema, ["children"])) {
+      return;
+    }
+    deepCompareAndModify(innerSchema, deepClone(componentSchema));
+    addDesignModeSuffix();
+  },
+  {
+    deep: true,
+  }
+);
+
+/**
+ * 在设计模式下为innerSchema.field添加特殊后缀。
+ * 此函数用于标识在设计模式下使用的字段，通过添加'-design-mode'后缀，
+ * 可以区分运行时和设计时的数据字段，以便在设计工具中进行特殊处理。
+ *
+ * @remarks
+ * 此函数仅在pageManager的isDesignMode为true时执行，确保只在设计模式下影响字段命名。
+ * 如果innerSchema.field已经是字符串类型，则直接追加后缀，否则不进行处理。
+ */
+function addDesignModeSuffix() {
+  // 检查当前是否处于设计模式
+  // 检查是否是设计模式
+  if (pageManager.isDesignMode.value) {
+    // 判断innerSchema.field的类型，仅在是字符串类型时追加后缀
+    // 检查 innerSchema.field 是否为字符串类型
+    if (typeof innerSchema.field === "string") {
+      // 给字段名添加设计模式后缀
+      // 给 innerSchema.field 添加后缀 '-design-mode'
+      innerSchema.field += "-design-mode";
+    }
+  }
+}
+
+// 重置表单数据，移除表单数据引用
+if (props.resetFormData || resetFormDataInject) {
+  formData = {};
+}
+
+// 定义组件的事件
+const emit = defineEmits(["update:modelValue", "change", "update:dynamicId"]);
+
+// 组件实例的引用
+const componentInstance = ref<ComponentNodeInstance>();
+// 表单项的引用
+const formItemRef = ref<ComponentPublicInstance>();
+// 处理子组件传递的 formItemRef
+const updateFormItemRef = (formItemInstance: ComponentPublicInstance) => {
+  formItemRef.value = formItemInstance;
+};
+
+// 传递额外的attrs
+const attrs = useAttrs();
+if (Object.keys(attrs).length) {
+  provide("nodeAttrs", attrs);
+}
+
+// 定义组件及组件props字段
+const component = shallowRef<any>(null);
+
+const show = computed(() => {
+  // hidden 属性优先级最高
+  if (innerSchema.componentProps?.hidden) {
+    return false;
+  }
+
+  // show属性为boolean类型则直接返回
+  if (typeof innerSchema.show === "boolean") {
+    return innerSchema.show;
+  }
+
+  return innerSchema.show?.({ values: formData }) ?? true;
+});
+
+// 获取FormItemProps
+const getFormItemProps = computed<ComponentSchema>(() => {
+  const rules =
+    show.value &&
+    innerSchema.rules?.map((item) => ({
+      ...item,
+      validator: item.validator && pageManager.funcs.value[item.validator], // 自定义校验函数
+    }));
+
+  // 获取校验字段
+  let model: string | string[] | undefined = innerSchema.field;
+
+  if (props.ruleField) {
+    // 设置为父级传入的校验字段
+    model = props.ruleField;
+  } else if (ruleFieldPrefix && innerSchema.field) {
+    // 添加校验字段前缀
+    model = deepClone(ruleFieldPrefix) as [];
+    model.push(innerSchema.field);
+  }
+
+  const formItemProps = {
+    ...innerSchema,
+    rules,
+    rule: rules,
+    field: model,
+  } as ComponentSchema;
+
+  // 移除元素只读属性 children
+  if (formItemProps["children"]) {
+    delete formItemProps["children"];
+  }
+  return formItemProps;
+});
+
+// 获取组件props数据
+const getComponentProps = computed(() => {
+  const bindModel = getComponentConfing.value?.bindModel ?? "modelValue";
+
+  const onEvent: { [type: string]: Function } = {};
+  innerSchema.on &&
+    Object.keys(innerSchema.on).forEach((item) => {
+      onEvent[`on${capitalizeFirstLetter(item)}`] = (...args) => pageManager.doActions(innerSchema.on[item], ...args);
+    });
+  return {
+    ...props,
+    ...innerSchema.componentProps,
+    disabled: disabled?.value || innerSchema.componentProps?.disabled,
+    bindModel,
+    ...onEvent,
+  };
+});
+
+// 获取组件原配置
+const getComponentConfing = computed(() => {
+  return pluginManager.getComponentConfingByType(innerSchema.type) ?? null;
+});
+
+// 获取双向绑定值
+watchEffect(() => {
+  bindValue.value = props.modelValue ?? formData[innerSchema.field ?? ""];
+});
+
+// 更新双向绑定值
+watch(
+  () => bindValue.value,
+  () => {
+    // 值相同时,无需重复更新数据
+    if (bindValue.value === (props.modelValue ?? formData[innerSchema.field ?? ""])) {
+      return;
+    }
+    handleUpdate(bindValue.value);
+  }
+);
+
+// 监听组件实例是否初始化
+watch(
+  () => componentInstance.value,
+  () => {
+    handleAddComponentInstance();
+  },
+  { immediate: true }
+);
+
+// 添加组件实例
+function handleAddComponentInstance() {
+  const instance = (componentInstance.value || proxy) as ComponentNodeInstance;
+  if (innerSchema.id && instance) {
+    // 输入组件则添加setValue方法
+    if (innerSchema.input) {
+      instance.setValue = handleUpdate;
+      instance.getValue = () => {
+        return formData[innerSchema.field!] || props.modelValue;
+      };
+    }
+
+    // 添加属性设置方法
+    instance.setAttr = (key: string, value: any) => {
+      // 初始化 componentProps 属性（如果尚未初始化）
+      if (!innerSchema.componentProps) {
+        innerSchema.componentProps = {};
+      }
+      return (innerSchema.componentProps[key] = value);
+    };
+
+    // 添加获取设置方法
+    instance.getAttr = (key: string) => {
+      return innerSchema.componentProps[key];
+    };
+
+    pageManager.addComponentInstance(innerSchema.id, instance);
+    // 添加实例 及 formItem实例
+    if (getComponentConfing.value?.defaultSchema.input && innerSchema.noFormItem !== true && formItemRef.value) {
+      pageManager.addComponentInstance(innerSchema.id + "formItem", formItemRef.value);
+    }
+  }
+}
+
+/**
+ * 移除组件实例
+ */
+function handleVnodeUnmounted() {
+  if (innerSchema.id) {
+    // 移除实例 及 formItem实例
+    pageManager.removeComponentInstance(innerSchema.id);
+    if (getComponentConfing.value?.defaultSchema.input && innerSchema.noFormItem !== true) {
+      pageManager.removeComponentInstance(innerSchema.id + "formItem");
+    }
+  }
+}
+
+/**
+ * 初始化组件
+ */
+async function initComponent() {
+  // 如果存在默认值，则会在初始化之后赋值
+  if (typeof innerSchema.componentProps?.defaultValue !== "undefined") {
+    const defaultValue = pageManager.isDesignMode.value
+      ? innerSchema.componentProps?.defaultValue
+      : (formData[innerSchema.field!] ?? innerSchema.componentProps?.defaultValue);
+
+    handleUpdate(deepClone(defaultValue));
+  }
+
+  // 组件为slot类型时
+  if (innerSchema.type === "slot") {
+    const slotName = innerSchema.slotName;
+    if (!slotName) return;
+
+    component.value = defineComponent({
+      setup() {
+        return () =>
+          renderSlot(slots, slotName, {
+            componentSchema: innerSchema,
+            model: formData,
+          });
+      },
+    });
+
+    return;
+  }
+
+  // 内置组件
+  const cmp = pluginManager.getComponent(innerSchema.type);
+  // 内部不存在组件
+  if (!cmp) {
+    console.error(`组件${innerSchema.type}未注册`);
+    return;
+  }
+
+  // 如果数据项为函数，则判定为懒加载组件
+  if (typeof cmp === "function") {
+    const res = await cmp();
+    component.value = res.default ?? res;
+  } else {
+    // 否则为预加载组件
+    component.value = cmp;
+  }
+}
+
+/**
+ * 通过函数更新值
+ * @param v value值
+ */
+function handleUpdate(v: any) {
+  emit("update:modelValue", v);
+  emit("change", v);
+  if (innerSchema.field) {
+    formData[innerSchema.field!] = v;
+  }
+}
+function handleUpdateType(v: any) {
+  emit("update:dynamicId", v);
+}
+
+let oldData: string | null = null;
+// 需要监听值变化，重新渲染组件
+watch(
+  () => innerSchema,
+  (newVal) => {
+    // 过滤所有子节点
+    const newData = JSON.stringify({ ...newVal, children: undefined });
+    if (newData === oldData) {
+      return false;
+    }
+    oldData = newData;
+    initComponent();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+// 组件卸载时移除组件实例
+onUnmounted(handleVnodeUnmounted);
+</script>

package/packages/core/components/tree/index.ts

@@ -0,0 +1,2 @@
+import ETree from './src/tree.vue'
+export default ETree

package/packages/core/components/tree/src/index.less

@@ -0,0 +1,117 @@
+.epic-tree {
+  .epic-tree-main {
+    padding-right: 10px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  a {
+    color: var(--epic-text-main);
+    display: flex;
+
+    &:hover {
+      color: var(--epic-text-main);
+    }
+
+    .text {
+      display: inline-block;
+      width: 100%;
+
+      &.hover {
+        background-color: var(--epic-widget-hover-color);
+      }
+
+      &.checked {
+        background: var(--epic-primary-hover-color);
+        color: var(--epic-primary-color);
+      }
+
+      .epic-text-padding {
+        padding: 0 6px;
+        white-space: nowrap;
+        color: var(--epic-text-main);
+
+        &.hidden {
+          color: var(--epic-text-helper);
+        }
+      }
+    }
+  }
+
+  .epic-node-type-text {
+    font-size: var(--epic-text-sm);
+    color: var(--epic-text-disabled);
+    margin-left: 6px;
+  }
+
+  .epic-tree-node {
+    &.level-1 {
+      padding-left: 10px;
+    }
+
+    padding-left: 16px;
+    min-height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    .icon-expanded {
+      position: absolute;
+      left: 8px;
+      transition: transform 0.3s;
+      color: var(--epic-border-color);
+      font-size: var(--epic-text-sm);
+
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .epic-tree-sublist {
+    height: 0;
+    overflow: hidden;
+
+    &.expanded {
+      height: auto;
+    }
+
+    .epic-tree-node {
+      position: relative;
+
+      &::after,
+      &::before {
+        content: "";
+        position: absolute;
+        background: var(--epic-border-color);
+        z-index: 99;
+      }
+
+      &::after {
+        width: 1px;
+        height: 100%;
+        left: 4px;
+        top: 0;
+      }
+
+      &::before {
+        width: 8px;
+        height: 1px;
+        left: 4px;
+        top: 13px;
+      }
+
+      &.expanded::before {
+        display: none;
+      }
+
+      &:last-child {
+        &::after {
+          height: 13px;
+        }
+      }
+    }
+  }
+}

package/packages/core/components/tree/src/tree.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="epic-tree h-full flex flex-col">
+    <!-- 搜素框 start -->
+    <div class="epic-search-box px-10px py-6px">
+      <Input placeholder="搜索节点" clearable allowClear v-model="keyword" v-model:value="keyword">
+      <template #prefix>
+        <EIcon name="icon--epic--search-rounded" />
+      </template>
+      </Input>
+    </div>
+    <!-- 搜素框 end -->
+    <div class="epic-tree-main flex-1 overflow-auto h-0">
+      <ul>
+        <ETreeNodes v-model:schemas="getTreeData" />
+      </ul>
+      <div v-show="!getTreeData.length" class="text-center pt-42px text-gray-400">没有查询到的数据</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ComponentSchema } from '../../../types/epic-designer'
+import type { PropType } from 'vue'
+import { ref, provide, computed, useSlots } from 'vue'
+import ETreeNodes from './treeNodes.vue'
+import EIcon from '../../icon'
+import { pluginManager } from '@epic-designer/utils'
+
+defineOptions({
+  name: 'ETree'
+})
+const slots = useSlots()
+provide('slots', slots)
+
+const Input = pluginManager.getComponent('input')
+
+const keyword = ref("")
+const expandedKeys = ref([])
+const props = defineProps({
+  options: {
+    type: Array as PropType<ComponentSchema[]>,
+    default: () => []
+  },
+  hoverKey: {
+    type: String,
+    default: ''
+  },
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+})
+
+const emits = defineEmits(['update:selectedKeys', 'nodeClick'])
+const selectedKeysComputed = computed({
+  get() {
+    return props.selectedKeys
+  },
+  set(value) {
+    emits('update:selectedKeys', value)
+  }
+})
+
+
+const getTreeData = computed({
+  get() {
+    return filterTreeByLabel(props.options, keyword.value)
+  },
+  set(e) {
+    console.log(e)
+  }
+})
+
+/**
+ * 通过label 过滤节点
+ * @param tree 节点树
+ * @param labelToFilter 过滤关键字
+ */
+function filterTreeByLabel(tree, labelToFilter) {
+  const filteredTree: ComponentSchema[] = [];
+
+  tree.forEach((item: ComponentSchema) => {
+    if (item.label?.includes(labelToFilter)) {
+      filteredTree.push(item);
+    } else if (item.children) {
+      const filteredChildren = filterTreeByLabel(item.children, labelToFilter);
+      if (filteredChildren.length > 0) {
+        // Clone the item and replace its children
+        const clonedItem = { ...item };
+        clonedItem.children = filteredChildren;
+        filteredTree.push(clonedItem);
+      }
+    }
+  });
+
+  return filteredTree;
+}
+
+
+function handleSelect(id: string, componentSchema: ComponentSchema) {
+  selectedKeysComputed.value = [id]
+  emits('nodeClick', { id, componentSchema })
+}
+
+provide('expandedKeys', expandedKeys)
+provide('selectedKeys', selectedKeysComputed)
+provide('treeProps', props)
+provide('handleSelect', handleSelect)
+
+</script>