epic-designer-gold 1.0.0 → 1.0.1

package/packages/core/components/designer/src/modules/sourceCode/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="epic-sound-code">
+    <MonacoEditor ref="monacoEditorRef" autoToggleTheme class="epic-editor" :readOnly="designerProps.sourceCodeReadOnly" :model-value="initModelValue"
+      lineNumbers="off" @update:model-value="setSchemas" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject, ref, toRaw, watch } from 'vue'
+import { pluginManager, deepEqual, deepCompareAndModify } from '@epic-designer/utils'
+import { Designer } from '../../../../../types/epic-designer'
+import { DesignerProps } from '../../types'
+const MonacoEditor = pluginManager.getComponent('monacoEditor')
+const monacoEditorRef = ref<any>(null)
+const designer = inject('designer') as Designer
+const designerProps = inject('designerProps') as DesignerProps
+
+let oldVal: any = {}
+watch(() => designer.state.checkedNode, (newVal: any) => {
+  if (!deepEqual(oldVal, toRaw(newVal))) {
+    monacoEditorRef.value?.setValue(JSON.stringify(newVal, null, 2))
+  }
+}, {
+  deep: true
+})
+
+const initModelValue = JSON.stringify(designer.state.checkedNode, null, 2)
+
+function setSchemas(e: string) {
+  try {
+    if (!designer.state.checkedNode) { return false }
+    oldVal = JSON.parse(e)
+    deepCompareAndModify(designer.state.checkedNode, oldVal)
+  } catch (error) {
+    console.warn("[epic-desinger：源码]异常：", error);
+  }
+}
+</script>

package/packages/core/components/designer/src/types.ts

@@ -0,0 +1,52 @@
+import { PageSchema } from "../../../types/epic-designer";
+
+export interface DesignerProps {
+  disabledZoom?: boolean;
+  hiddenHeader?: boolean;
+  lockDefaultSchemaEdit?: boolean;
+  formMode?: boolean;
+  title?: string;
+  defaultSchema?: PageSchema;
+  sourceCodeReadOnly?: boolean;
+  source?: any;
+  updateSourceId?: string;
+}
+
+/**
+ * 配置项
+ */
+export interface IOptions {
+  isFullScreen?: boolean; // 是否全屏手写 [Boolean] 可选
+  isFullCover?: boolean; // 是否全屏模式下覆盖所有的元素 [Boolean] 可选
+  isDpr?: boolean; // 是否使用dpr兼容高分屏 [Boolean] 可选
+  lastWriteSpeed?: number; // 书写速度 [Number] 可选
+  lastWriteWidth?: number; // 下笔的宽度 [Number] 可选
+  lineCap: CanvasRenderingContext2D["lineCap"]; // 线条的边缘类型 [butt] 平直的边缘 [round] 圆形线帽 [square] 正方形线帽
+  lineJoin: CanvasRenderingContext2D["lineJoin"]; // 线条交汇时边角的类型  [bevel] 创建斜角 [round] 创建圆角 [miter] 创建尖角。
+  canvasWidth?: number | string; // canvas宽度 [Number] 可选
+  canvasHeight?: number; // 高度  [Number] 可选
+  isShowBorder?: boolean; // 是否显示边框 [可选]
+  bgColor?: string; // 背景色 [String] 可选 直接渲染到图片 [移除:这背景色仅仅只是canvas背景,保存的图片仍然是透明的]
+  borderWidth?: number; // 网格线宽度  [Number] 可选
+  borderColor?: string; // 网格颜色  [String] 可选
+  writeWidth?: number; // 基础轨迹宽度  [Number] 可选
+  maxWriteWidth?: number; // 写字模式最大线宽  [Number] 可选
+  minWriteWidth?: number; // 写字模式最小线宽  [Number] 可选
+  writeColor?: string; // 轨迹颜色  [String] 可选
+  isSign?: boolean; // 签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+  imgType?: SImgType; // 下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
+  quality?: number; //  压缩质量 [Number] 可选范围为[0-1]之间, 0.1 表示以10%的质量进行压缩;
+  enableResize?: boolean; //是否启用窗口变化监听 [Boolean] 可选, 此操作在pc端用于监听窗口变化,动态调整画板大小, 自动调整大小的时候会清空画板内容, 移动端使用的时候建议设置为false
+}
+
+/**
+ * 图片格式
+ */
+export type SImgType = "png" | "jpeg" | "webp";
+
+export type SDirection = "left" | "right" | "top" | "bottom";
+
+export interface IPoint {
+  x: number;
+  y: number;
+}

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

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

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

@@ -0,0 +1,28 @@
+<template>
+  <span class="iconfont" :class="computedClass" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: 'EIcon'
+})
+import { computed } from 'vue'
+const props = withDefaults(defineProps<{
+  name: string;
+  prefix?: string;
+}>(), {
+  prefix: ''
+})
+
+const computedClass = computed(() => {
+  let baseClass = props.name;
+  // 兼容iconify处理
+  if (props.name.startsWith('icon--')) {
+    const parts = props.name.split('--');
+    if (parts.length > 1) {
+      baseClass += ` icon--${parts[1]}`;
+    }
+  }
+  return `${props.prefix}${baseClass}`;
+});
+
+</script>

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

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

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

@@ -0,0 +1,38 @@
+<template>
+  <!-- 如果有 FormItem，则包裹 slot，否则直接渲染 slot -->
+  <FormItem
+    ref="formItemRef"
+    @vue:mounted="notifyFormItemMounted "
+    v-if="props.hasFormItem"
+    v-bind="props.formItemProps"
+  >
+    <slot></slot>
+  </FormItem>
+  <!-- 无FormItem start -->
+  <slot v-else></slot>
+  <!-- 无FormItem end -->
+</template>
+
+<script lang="ts" setup>
+import { pluginManager } from "@epic-designer/utils";
+import { ComponentSchema } from "../../../types/epic-designer";
+import { ref } from "vue";
+// 获取插件管理器中的表单项组件
+const FormItem = pluginManager.getComponent("form-item");
+
+const props = defineProps<{
+  hasFormItem?: boolean;
+  formItemProps: ComponentSchema;
+}>();
+
+const emit = defineEmits(["updateFormItemRef"]);
+
+const formItemRef = ref<any>();
+
+/**
+ * 当 FormItem 组件挂载时，向父组件发送 formItemRef
+ */
+const notifyFormItemMounted  = () => {
+  emit("updateFormItemRef", formItemRef.value);
+};
+</script>

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

@@ -0,0 +1,503 @@
+<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:modelValueLabel`]="handleUpdateLabel"
+      :[`onUpdate:dynamicId`]="handleUpdateType"
+    >
+      <!-- 嵌套组件递归 start -->
+      <!-- 渲染子组件 start -->
+      <template #node="data">
+        <ENode :id="props.id" v-bind="data" :sourceDateUrl="props.sourceDateUrl" />
+      </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,
+  onMounted,
+  nextTick,
+} 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";
+import axios from "axios";
+import { EventBus } from "@epic-designer/utils";
+import Cookies from "js-cookie";
+
+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 | number;
+  sourceDateUrl?: string;
+  id: 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<any>(deepClone(props.componentSchema));
+
+// 设计模式模式下，添加字段后缀
+addDesignModeSuffix();
+
+async function getOptions(item: ComponentSchema) {
+  const sourceTypes = ["cascader", "checkbox", "select", "radio"];
+  if (sourceTypes.includes(item.type) && !!item.componentProps.dynamicId && props.sourceDateUrl) {
+    let res1 = await axios({
+      //  || "http://192.168.28.205:3000/dev-api/data-source
+      url: props.sourceDateUrl,
+      method: "get",
+      params: {
+        id: item.componentProps.dynamicId,
+      },
+      headers: {
+        Authorization: "Bearer " + Cookies.get("Admin-Token"),
+      },
+    });
+    const res = res1.data.data;
+
+    let result = await axios({
+      url: res.url,
+      method: res.method,
+      data: JSON.parse(res.body),
+      params: JSON.parse(res.params),
+      headers: {
+        ...JSON.parse(res.headers),
+        Authorization: "Bearer " + Cookies.get("Admin-Token"),
+      },
+    });
+    if (res && res?.dataPath) {
+      const arr = res.dataPath.split(".");
+      const results = arr.reduce((pre: any, cur: any) => {
+        return pre[cur];
+      }, result.data);
+      item.componentProps.options = testArray(results, res.dataKey, res.dataValue);
+    } else {
+      item.componentProps.options = testArray(result.data, res.dataKey, res.dataValue);
+    }
+    return item;
+  }
+  return item;
+}
+
+// 检测数据下拉框之类的数据是否可用
+function testArray(item: any, key: string, value: string) {
+  if (item && Object.prototype.toString.call(item) === "[object Array]") {
+    return item.map((data: any) => {
+      if (data.children && data.children.length) {
+        return {
+          label: data[key],
+          value: data[value] + "",
+          children: testArray(data.children, key, value),
+        };
+      } else {
+        return {
+          label: data[key],
+          value: data[value] + "",
+        };
+      }
+    });
+  } else {
+    // ElMessage.info("请检查数据位置是否配置准确");
+    // 获取的不是数字
+    return [];
+  }
+}
+
+// 监听 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(() => {
+  // const { type } = props.componentSchema;
+  // if (
+  //   type === "checkbox" ||
+  //   (type === "select" && props.componentSchema.componentProps.multiple) ||
+  //   (type === "cascader" && props.componentSchema.componentProps.props.multiple)
+  // ) {
+  //   if (typeof formData[innerSchema.field ?? ""] === "string") {
+  //     bindValue.value = props.modelValue ?? formData[innerSchema.field ?? ""]?.split(",");
+  //   }
+  // } else {
+  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() {
+  // 使用数据源的数据进行加工
+  innerSchema = await getOptions(innerSchema);
+  // 如果存在默认值，则会在初始化之后赋值
+  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;
+  }
+}
+function handleUpdateLabel(v: any) {
+  Object.prototype.toString.call(v);
+  if (Object.prototype.toString.call(v) === "[object Array]") {
+    v.forEach((item: any) => {
+      formData[item.value] = item.label;
+    });
+  } else {
+    formData[v.value] = v.label;
+  }
+
+  EventBus.emit("updateformData" + props.id, formData);
+}
+
+/**
+ * 通过函数更新值
+ * @param v value值
+ */
+function handleUpdate(v: any) {
+  emit("update:modelValue", v);
+  emit("change", v);
+  if (innerSchema.field) {
+    formData[innerSchema.field!] = v;
+  }
+  EventBus.emit("updateformData" + props.id, formData);
+}
+function handleUpdateType(v: any) {
+  emit("update:dynamicId", v);
+}
+
+let oldData: string | null = null;
+// 需要监听值变化，重新渲染组件
+watch(
+  () => innerSchema,
+  async (newVal) => {
+    // 过滤所有子节点
+    const newData = JSON.stringify({
+      ...newVal,
+      children: undefined,
+      componentProps: {
+        ...newVal.componentProps,
+        options: null,
+      },
+    });
+    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