epic-designer-gold 1.0.1 → 1.0.2

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

@@ -1,203 +0,0 @@
-<template>
-  <div class="epic-loading-box" v-if="!pluginManager.initialized.value">
-    <!-- <EAsyncLoader /> -->
-  </div>
-  <Suspense v-else @resolve="handleReady">
-    <template #default>
-      <div class="epic-builder-main">
-        <ENode
-          :id="props.id"
-          v-for="(item, index) in pageSchemaReactive.schemas"
-          :key="index"
-          :sourceDateUrl="props.sourceDateUrl"
-          :componentSchema="item"
-        />
-      </div>
-    </template>
-    <template #fallback>
-      <div class="epic-loading-box">
-        <EAsyncLoader />
-      </div>
-    </template>
-  </Suspense>
-</template>
-
-<script lang="ts" setup>
-import ENode from "../../node";
-import { reactive, provide, useSlots, getCurrentInstance, watch, computed, nextTick, inject } from "vue";
-import { PageSchema, FormDataModel } from "../../../types/epic-designer";
-import { loadAsyncComponent, deepCompareAndModify, pluginManager } from "@epic-designer/utils";
-import { useBuilder } from "../hooks/useBuilder";
-import { EventBus } from "@epic-designer/utils";
-
-// 异步加载 EAsyncLoader 组件
-const EAsyncLoader = loadAsyncComponent(() => import("../../asyncLoader/index.vue"));
-
-// 定义事件
-const emit = defineEmits<{
-  change: any;
-  ready: any;
-}>();
-
-// 使用 hooks 获取表单相关方法和状态
-const { ready, pageManager, forms, getData, setData, validate, getForms, setForms, validateAll, getFormInstance } =
-  useBuilder();
-
-// 定义组件的 props 类型
-const props = defineProps<{
-  pageSchema: PageSchema;
-  formData?: FormDataModel;
-  disabled?: boolean;
-  sourceDateUrl: string;
-  id: string;
-}>();
-
-// 定义页面 schema
-const pageSchemaReactive = reactive<PageSchema>({
-  schemas: [],
-});
-
-// 监听 pageSchema 的变化，并更新 pageSchemaReactive
-watch(
-  () => props.pageSchema,
-  (newSchema) => {
-    deepCompareAndModify(pageSchemaReactive, newSchema);
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-// 监听 formData 的变化，并设置表单数据
-watch(
-  () => props.formData,
-  (data) => {
-    if (data) {
-      //将传来的数据做处理 逗号变成数组
-      let data1: any = changeData(data);
-      setData(data1);
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-function changeTree(data: any) {
-  let arr: any = [];
-  data.forEach((el: any) => {
-    if (el.children) {
-      arr = [...arr, ...changeTree(el.children)];
-    }
-    arr.push(el);
-  });
-  return arr;
-}
-function changeData(data: any) {
-  let res = changeTree(props.pageSchema.schemas[0].children);
-  Object.keys(data).forEach((key: any) => {
-    if (key.indexOf("@") < 0) {
-      const obj = res.find((item1: any) => item1.field === key);
-      const dataList = ["datetimerange", "daterange", "monthrange", "dates"];
-      if (
-        ((obj && obj?.type === "checkbox") ||
-          (obj?.type === "select" && obj?.componentProps?.multiple) ||
-          (obj?.type === "cascader" && !obj?.componentProps?.props?.multiple) ||
-          (obj?.type === "date" && dataList.includes(obj?.componentProps?.type))) &&
-        typeof data[key] === "string"
-      ) {
-        data[key] = data[key]?.split(",");
-      } else if (obj?.type === "cascader" && obj?.componentProps?.props?.multiple && typeof data[key] === "string") {
-        // 英文
-        if (data[key].indexOf(";") > -1) {
-          data[key] = data[key].split(";").map((el: string) => el.split(","));
-        } else {
-          data[key] = data[key].split(",");
-        }
-        // 中文
-        if (data[key].indexOf("；") > -1) {
-          data[key] = data[key].split("；").map((el: string) => el.split(","));
-        } else {
-          data[key] = data[key].split(",");
-        }
-      } else if ((obj?.type === "upload-image" || obj?.type === "upload-file") && typeof data[key] === "string") {
-        let nameList: any = [];
-        Object.entries(data).forEach(([key1, value1]) => {
-          if (data[key] === value1 && key1 !== obj.field && key1.indexOf("@") > -1 && key1.indexOf(key) > -1) {
-            nameList = key1.split("@")[1].split(",");
-          }
-        });
-        data[key] = data[key].split(",").map((el, idx) => {
-          return {
-            url: el,
-            name: nameList[idx] || el,
-          };
-        });
-      } else if (obj?.type === "number" || obj?.type === "slider") {
-        data[key] = Number(data[key]);
-      } else if (obj?.type === "switch") {
-        data[key] = typeof data[key] === "boolean" ? data[key] : data[key].indexOf("true") > -1 ? true : false;
-      }
-    }
-  });
-  return data;
-}
-// 监听 pageSchemaReactive.script 的变化，并设置页面方法
-watch(
-  () => pageSchemaReactive.script,
-  (script) => {
-    if (script) {
-      pageManager.setMethods(script, true);
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-// 提供依赖注入的上下文
-provide("slots", useSlots());
-provide("pageManager", pageManager);
-provide("forms", forms);
-provide("pageSchema", pageSchemaReactive);
-provide(
-  "disabled",
-  computed(() => props.disabled)
-);
-// 获取当前实例，并提取 proxy
-const instance = getCurrentInstance();
-const proxy = instance?.proxy;
-
-/**
- * 组件加载完成后的处理函数
- * @returns {void}
- */
-function handleReady() {
-  nextTick(() => {
-    ready.value = true;
-    emit("ready", pageManager);
-
-    // 注入组件实例到 pageManager
-    if (proxy) {
-      pageManager.addComponentInstance("builder", proxy);
-    }
-  });
-}
-EventBus.on("updateformData" + props.id, (e) => {
-  emit("change", e);
-});
-
-// 暴露组件的方法和状态
-defineExpose({
-  ready,
-  pageManager,
-  getData,
-  setData,
-  validate,
-  getForms,
-  setForms,
-  validateAll,
-  getFormInstance,
-});
-</script>

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

@@ -1,4 +0,0 @@
-export interface DesignerProps {
-  disabledZoom?: boolean;
-  hiddenHeader?: boolean;
-}

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

@@ -1,3 +0,0 @@
-import EDesigner from "./src/designer.vue";
-
-export default EDesigner;

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

@@ -1,336 +0,0 @@
-<template>
-  <div class="epic-loading-box" v-if="!pluginManager.initialized.value">
-    <!-- <EAsyncLoader /> -->
-  </div>
-  <Suspense v-else @resolve="handleReady">
-    <template #default>
-      <div class="epic-designer-main">
-        <div class="epic-header-container">
-          <slot name="header">
-            <EHeader @preview="handlePreview" v-if="!props.hiddenHeader" @save="handleSave">
-              <template #header>
-                <slot name="header-prefix"></slot>
-              </template>
-
-              <template #prefix>
-                <slot name="header-prefix"></slot>
-              </template>
-              <template #title>
-                <slot name="header-title"></slot>
-              </template>
-              <template #right-prefix>
-                <slot name="header-right-prefix"></slot>
-              </template>
-              <template #right-action>
-                <slot name="header-right-action"></slot>
-              </template>
-              <template #right-suffix>
-                <slot name="header-right-suffix"></slot>
-              </template>
-            </EHeader>
-          </slot>
-        </div>
-        <div class="epic-split-view-container" :class="{ 'hidden-header': hiddenHeader }">
-          <EActionBar />
-          <EEditContainer />
-          <ERightSidebar />
-        </div>
-        <EPreview ref="previewRef" />
-      </div>
-    </template>
-    <template #fallback>
-      <div class="epic-loading-box">
-        <EAsyncLoader />
-      </div>
-    </template>
-  </Suspense>
-</template>
-<script lang="ts" setup>
-import { ref, provide, reactive, toRaw, nextTick, computed, watchEffect } from "vue";
-import { DesignerState, ComponentSchema, PageSchema } from "../../../types/epic-designer";
-import {
-  getMatchedById,
-  loadAsyncComponent,
-  useRevoke,
-  usePageManager,
-  pluginManager,
-  deepCompareAndModify,
-  deepEqual,
-  deepClone,
-  EventBus,
-} from "@epic-designer/utils";
-import { DesignerProps } from "./types";
-import { useStore } from "@epic-designer/hooks";
-import EPreview from "./modules/preview/index.vue";
-const EHeader = loadAsyncComponent(() => import("./modules/header/index.vue"));
-const EActionBar = loadAsyncComponent(() => import("./modules/actionBar/index.vue"));
-const EEditContainer = loadAsyncComponent(() => import("./modules/editContainer/index.vue"));
-const ERightSidebar = loadAsyncComponent(() => import("./modules/rightSidebar/index.vue"));
-const EAsyncLoader = loadAsyncComponent(() => import("../../asyncLoader/index.vue"));
-const pageManager = usePageManager();
-const revoke = useRevoke();
-
-const props = withDefaults(defineProps<DesignerProps>(), {
-  disabledZoom: false,
-  hiddenHeader: false,
-  lockDefaultSchemaEdit: false,
-  formMode: false,
-  title: "EpicDesigner默认项目",
-  source: [],
-  // basicInfo:{}
-});
-
-// 内部默认页面数据
-let innerDefaultSchema: PageSchema = {
-  schemas: [
-    {
-      type: "form",
-      id: "root",
-      label: "页面",
-      children: [],
-      componentProps: {
-        name: "表单",
-        style: {
-          padding: "16px",
-        },
-      },
-    },
-    // {
-    //   type: "form",
-    //   id: "root",
-    //   label: "表单",
-    //   children: [],
-    //   componentProps: {
-    //     style: {
-    //       margin: "0px",
-    //     },
-    //     name: "default",
-    //     labelWidth: "100px",
-    //     labelLayout: "fixed",
-    //     labelCol: {
-    //       span: 5,
-    //     },
-    //     wrapperCol: {
-    //       span: 19,
-    //     },
-    //   },
-    // },
-  ],
-  script: `const { defineExpose, find } = epic;
-
-function test (){
-    console.log('test')
-}
-
-// 通过defineExpose暴露的函数或者属性
-defineExpose({
- test
-})`,
-};
-
-// 更新初始化数据
-watchEffect(() => {
-  // 如果props.defaultSchema有值，则优先使用props.defaultSchema
-  if (props.defaultSchema) {
-    innerDefaultSchema = props.defaultSchema;
-    return;
-  }
-
-  //如果有传入的数据源，存入数据源
-  if (props.source) {
-    pluginManager.setSourceData(props.source);
-  }
-
-  // 切换表单模式默认schema数据
-  if (props.formMode) {
-    innerDefaultSchema.schemas = pluginManager.formSchemas;
-  }
-});
-
-// 设置为设计模式
-pageManager.setDesignMode();
-pageManager.setDefaultComponentIds(innerDefaultSchema.schemas);
-
-const emits = defineEmits([
-  "ready",
-  "save",
-  "reset",
-  "toggleDeviceMode",
-  "saveSourceData",
-  "deleteSourceData",
-  "updateSourceData",
-]);
-
-const previewRef = ref<InstanceType<typeof EPreview> | null>(null);
-
-const state = reactive<DesignerState>({
-  checkedNode: null,
-  hoverNode: null,
-  disableHover: false,
-  matched: [],
-});
-
-const pageSchema = reactive<PageSchema>({
-  schemas: [],
-  script: innerDefaultSchema.script,
-});
-
-// 记录缩放状态 start
-const { disabledZoom } = useStore();
-watchEffect(() => {
-  disabledZoom.value = props.disabledZoom;
-});
-// 记录缩放状态 end
-
-watchEffect(() => {
-  const script = pageSchema.script;
-  if (script && script !== "") {
-    pageManager.setMethods(script);
-  }
-});
-
-// 提供依赖注入的上下文
-provide("pageSchema", pageSchema);
-provide("revoke", revoke);
-provide("pageManager", pageManager);
-provide(
-  "designerProps",
-  computed(() => props)
-);
-
-provide("designer", {
-  setCheckedNode,
-  setHoverNode,
-  setDisableHover,
-  handleToggleDeviceMode,
-  reset,
-  state,
-});
-EventBus.on("saveSourceData", (e) => {
-  emits("saveSourceData", e);
-});
-
-EventBus.on("deleteSourceData", (e) => {
-  emits("deleteSourceData", e);
-});
-
-EventBus.on("updateSourceData", (e) => {
-  emits("updateSourceData", e);
-});
-
-function init() {
-  // 初始化默认节点
-  pageSchema.schemas = deepClone(innerDefaultSchema.schemas);
-
-  // 选中根节点
-  setCheckedNode(pageSchema.schemas[0]);
-  revoke.push(pageSchema.schemas, "初始化撤销功能");
-}
-
-/**
- * 选中节点
- * @param schema
- */
-async function setCheckedNode(schema: ComponentSchema = pageSchema.schemas[0]) {
-  state.checkedNode = schema;
-  state.matched = getMatchedById(pageSchema.schemas, schema.id!);
-}
-
-/**
- * 设置悬停节点
- * @param schema
- */
-async function setHoverNode(schema: ComponentSchema | null = null) {
-  if (!schema || state.disableHover) {
-    state.hoverNode = null;
-    return false;
-  }
-  if (schema?.id === state.hoverNode?.id) {
-    return false;
-  }
-  // console.log(schema?.id)
-  state.hoverNode = schema;
-}
-
-/**
- * 组件（包含异步组件）加载完成后
- */
-function handleReady() {
-  // 等待DOM更新循环结束后
-  nextTick(() => {
-    emits("ready", { pageManager });
-  });
-}
-
-/**
- * 设置hover状态
- * @param disableHover
- */
-async function setDisableHover(disableHover = false) {
-  state.disableHover = disableHover;
-}
-
-/**
- * 接受一个PageSchema对象作为参数。根据传入的schemas和script属性，更新页面对应的数据
- * @param pageSchema
- */
-function setData(schema: PageSchema) {
-  // 调用 deepCompareAndModify 函数比较 pageSchema 和传入的 schema，进行修改
-  deepCompareAndModify(pageSchema, deepClone(schema));
-}
-
-/**
- * 返回当前页面数据的 PageSchema 对象，包含页面当前的 schemas 和 script 数据。
- */
-function getData(): PageSchema {
-  // 返回一个对象，包含当前 schemas 对象的普通对象表示和当前 script 的值
-  return toRaw(pageSchema);
-}
-
-/**
- * 重置页面数据为默认数据。
- */
-function reset() {
-  // 判断数据是否已修改，如果未修改，则取消重置操作
-  if (deepEqual(pageSchema.schemas, innerDefaultSchema.schemas) && pageSchema.script === innerDefaultSchema.script)
-    return;
-
-  // 调用 deepCompareAndModify 函数比较 pageSchema.schemas 和 innerDefaultSchema.schemas，进行修改
-  deepCompareAndModify(pageSchema.schemas, innerDefaultSchema.schemas);
-  // 更新 script.value
-  pageSchema.script = innerDefaultSchema.script;
-  // 选中根节点
-  setCheckedNode(pageSchema.schemas[0]);
-  revoke.push(pageSchema.schemas, "重置操作");
-
-  emits("reset", pageSchema);
-}
-
-/**
- * 保存数据
- */
-function handleSave() {
-  emits("save", toRaw(pageSchema));
-}
-
-function handleToggleDeviceMode(mode: string) {
-  emits("toggleDeviceMode", mode);
-}
-
-/**
- * 预览
- */
-function handlePreview() {
-  previewRef.value!.handleOpen();
-}
-
-init();
-
-defineExpose({
-  revoke,
-  setData,
-  getData,
-  reset,
-  preview: handlePreview,
-});
-</script>

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

@@ -1,81 +0,0 @@
-@import "./modules/rightSidebar/index.less";
-@import "./modules/outline/index.less";
-@import "./modules/header/index.less";
-@import "./modules/actionBar/index.less";
-@import "./modules/componentView/index.less";
-@import "./modules/editContainer/index.less";
-@import "./modules/attributeView/index.less";
-@import "./modules/preview/index.less";
-@import "./modules/sourceCode/index.less";
-
-.epic-loading-box {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.epic-designer-main {
-  user-select: none;
-  display: flex;
-  flex-direction: column;
-  color: var(--epic-text-main);
-  background: var(--epic-designer-color);
-  font-size: var(--epic-text-md);
-  min-width: 500px;
-  height: 100%;
-  max-height: 100vh;
-  cursor: default;
-
-  div,
-  aside {
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #0000002d;
-      border-radius: 6px;
-      -webkit-box-shadow: none;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-  }
-
-  .epic-split-view-container {
-    display: flex;
-    flex: 1;
-    height: 0;
-    border-top: 1px solid var(--epic-border-color);
-    border-bottom: 1px solid var(--epic-border-color);
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.epic-modal-main {
-  height: calc(100% - 56px);
-  overflow: auto;
-  padding: 12px;
-  border-bottom: 1px solid var(--epic-border-color);
-}
-
-.epic-modal-footer {
-  text-align: right;
-  margin-top: 8px;
-  position: absolute;
-  bottom: 12px;
-  right: 12px;
-
-  .ant-btn {
-    margin-left: 8px;
-  }
-}

package/packages/core/components/designer/src/modules/actionBar/index.less

@@ -1,80 +0,0 @@
-// 活动视图切换器
-.epic-action-bar {
-  width: 56px;
-  background-color: var(--epic-action-bar-color);
-  border-right: 1px solid var(--epic-border-color);
-  border-left: 1px solid var(--epic-border-color);
-
-  .epic-action-item {
-    text-align: center;
-    height: 72px;
-    position: relative;
-    cursor: pointer;
-    color: var(--epic-text-main);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    transition: all .3s;
-
-    > span {
-      font-size: 22px;
-      margin-bottom: 4px;
-    }
-
-    &:hover {
-      color: var(--epic-primary-color);
-    }
-
-    &::before {
-      content: "";
-      height: 80%;
-      width: 80%;
-      border-radius: 6px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: var(--epic-primary-hover-color);
-      opacity: 0;
-      transition: all .3s;
-    }
-
-    &.checked {
-      color: var(--epic-primary-color);
-      // &::after {
-      //   content: "";
-      //   height: 100%;
-      //   width: 2px;
-      //   background-color: var(--epic-primary-color);
-      //   position: absolute;
-      //   top: 0;
-      //   left: 0;
-      // }
-
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-// 左侧栏
-.epic-left-sidebar {
-  width: 320px;
-  background-color: var(--epic-view-color);
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: width 0.3s;
-  border-right: 1px solid var(--epic-border-color);
-
-  .epic-sidebar-container {
-    min-width: 280px;
-    height: 100%;
-  }
-
-  &.hide {
-    width: 0;
-    border: 0;
-  }
-}