epic-designer-gold 0.0.4 → 0.0.6

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

@@ -1,337 +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 && props.source.length) {
-    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;
-  }
-}

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

@@ -1,50 +0,0 @@
-<template>
-  <div class="flex relative">
-    <div class="epic-action-bar">
-      <ul class="epic-actions-container">
-        <li
-          v-for="(item, index) in activitybars"
-          :key="index"
-          class="epic-action-item"
-          :title="item.title"
-          :class="{ checked: activityBarCheckedIndex === index }"
-          @click="handleClick(item, index)"
-        >
-          <EIcon class="relative" :name="item.icon" />
-          <div class="text-14px">{{ item.title }}</div>
-        </li>
-      </ul>
-    </div>
-    <div class="epic-left-sidebar" :class="{ hide: activityBarCheckedIndex === null }">
-      <div class="epic-sidebar-container">
-        <component :is="sidebarComponent" />
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, computed, shallowRef } from "vue";
-import { pluginManager } from "@epic-designer/utils";
-import { ActivitybarModel } from "@epic-designer/utils";
-import EIcon from "../../../../icon";
-defineOptions({
-  name: "EActivityBar",
-});
-const activitybars = computed(() => {
-  return pluginManager.viewsContainers.activitybars.value.filter((item) => item.visible);
-});
-
-const activityBarCheckedIndex = ref<number | null>(0);
-
-const sidebarComponent = shallowRef<any>(null);
-sidebarComponent.value = activitybars.value[0].component;
-
-function handleClick(item: ActivitybarModel, index: number) {
-  if (activityBarCheckedIndex.value === index) {
-    activityBarCheckedIndex.value = null;
-    return false;
-  }
-  sidebarComponent.value = item.component;
-  activityBarCheckedIndex.value = index;
-}
-</script>

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

@@ -1,124 +0,0 @@
-<template>
-  <div class="epic-attribute-view" :key="checkedNode?.id">
-    <div v-for="item in componentAttributes" :key="item.field">
-      <div v-if="isShow(item)" class="epic-attr-item" :class="item.layout">
-        <div v-if="item.label" class="epic-attr-label" :title="item.label">
-          {{ item.label }}
-        </div>
-        <div class="epic-attr-input" :class="{ 'block!': item.layout === 'vertical' }">
-          <ENode
-            :componentSchema="{
-              ...item,
-              componentProps: {
-                ...item.componentProps,
-                ...(item.field === 'componentProps.defaultValue' ? checkedNode?.componentProps : {}),
-                input: false,
-                field: undefined,
-                hidden: false,
-              },
-              show: true,
-              noFormItem: true,
-            }"
-            :dynamicId="getValueByPath(item.editData ?? checkedNode!, 'componentProps.dynamicId')"
-            :model-value="getValueByPath(item.editData ?? checkedNode!, item.field!)"
-            @update:model-value="handleSetValue($event, item.field!, item, item.editData)"
-            @update:dynamicId="handUpdateType($event, item)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import ENode from "../../../../node/index";
-import { Designer, ComponentSchema, PageSchema } from "../../../../../types/epic-designer";
-import { pluginManager, getValueByPath, setValueByPath, type Revoke } from "@epic-designer/utils";
-import { inject, computed, ref, watchEffect, nextTick } from "vue";
-const designer = inject("designer") as Designer;
-const pageSchema = inject("pageSchema") as PageSchema;
-const revoke = inject("revoke") as Revoke;
-
-const componentConfings = pluginManager.getComponentConfings();
-const checkedNode = computed(() => {
-  return designer.state.checkedNode;
-});
-
-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: checkedNode.value! });
-  }
-
-  return true;
-}
-
-const componentAttributes = ref<ComponentSchema[]>([]);
-watchEffect(() => {
-  const type = designer.state.checkedNode?.type;
-  if (!designer.state.checkedNode || !type) {
-    return [];
-  }
-  const attribute = componentConfings[type]?.config.attribute ?? [];
-
-  componentAttributes.value = [
-    {
-      label: "组件ID",
-      type: "input",
-      field: "id",
-      componentProps: {
-        disabled: true,
-      },
-    },
-    ...attribute,
-  ];
-
-  if (designer.state.checkedNode.id === pageSchema.schemas[0]?.id) {
-    componentAttributes.value.push(
-      ...[
-        {
-          label: "画布宽度",
-          type: "EInputSize",
-          field: "canvas.width",
-          editData: pageSchema,
-        },
-        {
-          label: "画布高度",
-          type: "EInputSize",
-          field: "canvas.height",
-          editData: pageSchema,
-        },
-      ]
-    );
-  }
-});
-
-/**
- * 设置属性值
- */
-function handleSetValue(value: any, field: string, item: ComponentSchema, editData = checkedNode.value) {
-  if (typeof item.onChange === "function") {
-    item.onChange({ value, values: editData!, componentAttributes });
-  }
-  // 判断是否同步修改属性值
-  if (item.changeSync) {
-    setValueByPath(editData!, field, value);
-  } else {
-    nextTick(() => {
-      setValueByPath(editData!, field, value);
-    });
-  }
-  // 将修改过的组件属性推入撤销操作的栈中
-  revoke.push(pageSchema.schemas, "编辑组件属性");
-}
-function handUpdateType(value: any, item: any, editData = checkedNode.value) {
-  // editData!.componentProps.dynamicId = value;
-  nextTick(() => {
-    setValueByPath(editData!, "componentProps.dynamicId", value);
-  });
-}
-</script>