epic-designer-gold 1.0.1 → 1.0.2

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

@@ -1,37 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-<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

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

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

@@ -1,38 +0,0 @@
-<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

@@ -1,503 +0,0 @@
-<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

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