form-designer-xinyi 1.0.0

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

@@ -0,0 +1,258 @@
+<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, watch, nextTick, computed } from 'vue'
+import { DesignerState, ComponentSchema, PageSchema } from '../../../types/epic-designer'
+import { getMatchedById, loadAsyncComponent, revoke, usePageManager, pluginManager, deepCompareAndModify, deepEqual, deepClone } from '@epic-designer/utils'
+import { DesignerProps } from './types'
+import { useShareStore } from '@epic-designer/utils'
+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 props = withDefaults(defineProps<DesignerProps>(), {
+  disabledZoom: false,
+  hiddenHeader: false,
+  lockDefaultSchemaEdit: false,
+  title: "EpicDesigner默认项目",
+  defaultSchema: () => ({
+    schemas: [{
+      type: 'page',
+      id: 'root',
+      label: '页面',
+      children: [],
+      componentProps: {
+        style: {
+          padding: '16px'
+        }
+      }
+    }],
+    script: `const { defineExpose, find } = epic;
+
+function test (){
+    console.log('test')
+}
+
+// 通过defineExpose暴露的函数或者属性
+defineExpose({
+ test
+})`
+  })
+})
+
+// 设置为设计模式
+pageManager.setDesignMode()
+pageManager.setDefaultComponentIds(props.defaultSchema.schemas)
+
+const emits = defineEmits(['ready', 'save', 'reset', 'toggleDeviceMode'])
+
+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: props.defaultSchema.script
+})
+
+// 记录缩放状态 start
+const { disabledZoom } = useShareStore()
+watch(() => props.disabledZoom, newVal => {
+  disabledZoom.value = newVal
+}, {
+  immediate: true
+})
+// 记录缩放状态 end
+
+watch(() => pageSchema.script, e => {
+  if (e && e !== '') {
+    pageManager.setMethods(e)
+  }
+}, {
+  immediate: true
+})
+
+provide('pageSchema', pageSchema)
+provide('pageManager', pageManager)
+provide('designerProps', computed(() => props))
+
+provide('designer', {
+  setCheckedNode,
+  setHoverNode,
+  setDisableHover,
+  handleToggleDeviceMode,
+  reset,
+  state
+})
+
+function init() {
+  // 初始化默认节点
+  pageSchema.schemas = deepClone(props.defaultSchema.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, schema)
+}
+
+/**
+ * 返回当前页面数据的 PageSchema 对象，包含页面当前的 schemas 和 script 数据。
+ */
+function getData(): PageSchema {
+  // 返回一个对象，包含当前 schemas 对象的普通对象表示和当前 script 的值
+  return toRaw(pageSchema)
+}
+
+/**
+ * 重置页面数据为默认数据。
+ */
+function reset() {
+  // 判断数据是否已修改，如果未修改，则取消重置操作
+  if (deepEqual(pageSchema.schemas, props.defaultSchema.schemas) && pageSchema.script === props.defaultSchema.script) return
+
+  // 调用 deepCompareAndModify 函数比较 pageSchema.schemas 和 props.defaultSchema.schemas，进行修改
+  deepCompareAndModify(pageSchema.schemas, props.defaultSchema.schemas)
+  // 更新 script.value
+  pageSchema.script = props.defaultSchema.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({
+  setData,
+  getData,
+  reset,
+  preview: handlePreview
+})
+</script>

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

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

@@ -0,0 +1,79 @@
+// 活动视图切换器
+.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: 20px;
+    }
+
+    &: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

@@ -0,0 +1,44 @@
+<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: actionBarCheckedIndex === index }" @click="handleClick(item, index)">
+          <EIcon prefix="" class="iconfont relative" :name="item.icon" />
+          <div class="text-14px">{{ item.title }}</div>
+        </li>
+      </ul>
+    </div>
+    <div class="epic-left-sidebar" :class="{ hide: actionBarCheckedIndex === 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: "EActionBar",
+});
+const activitybars = computed(() => {
+  return pluginManager.viewsContainers.activitybars.value.filter(item => item.visible)
+})
+
+const actionBarCheckedIndex = ref<number | null>(0);
+
+const sidebarComponent = shallowRef<any>(null);
+sidebarComponent.value = activitybars.value[0].component;
+
+function handleClick(item: ActivitybarModel, index: number) {
+  if (actionBarCheckedIndex.value === index) {
+    actionBarCheckedIndex.value = null;
+    return false;
+  }
+  sidebarComponent.value = item.component;
+  actionBarCheckedIndex.value = index;
+}
+</script>

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

@@ -0,0 +1,104 @@
+<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 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 }"
+            :model-value="getAttributeValue(item.field!, item.editData ?? checkedNode!)"
+            @update:model-value="handleSetValue($event, item.field!, item, item.editData)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import ENode from '../../../../node/index'
+import { Designer, ComponentSchema, PageSchema } from '../../../../../types/epic-designer'
+import { pluginManager, revoke, getAttributeValue, setAttributeValue } from '@epic-designer/utils'
+import { inject, computed, ref, watch, nextTick } from 'vue'
+const designer = inject('designer') as Designer
+const pageSchema = inject('pageSchema') as PageSchema
+
+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[]>([])
+watch(() => designer.state.checkedNode?.type, () => {
+  const type = designer.state.checkedNode?.type
+  if (!type) {
+    return []
+  }
+  const attribute = componentConfings[type]?.config.attribute ?? []
+
+  componentAttributes.value = [
+    {
+      label: '组件ID',
+      type: 'input',
+      field: 'id',
+      componentProps: {
+        disabled: true
+      }
+    },
+    ...attribute
+  ]
+
+  if (type === 'page') {
+    componentAttributes.value.push(...[
+      {
+        label: '画布宽度',
+        type: 'EInputSize',
+        field: 'canvas.width',
+        editData: pageSchema,
+      },
+      {
+        label: '画布高度',
+        type: 'EInputSize',
+        field: 'canvas.height',
+        editData: pageSchema,
+      }
+    ])
+  }
+}, {
+  immediate: true
+})
+
+/**
+ * 设置属性值
+ */
+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) {
+    setAttributeValue(value, field, editData!)
+  } else {
+    nextTick(() => {
+      setAttributeValue(value, field, editData!)
+    })
+  }
+  // 将修改过的组件属性推入撤销操作的栈中
+  revoke.push(pageSchema.schemas, '编辑组件属性')
+}
+
+</script>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="epic-event-view">
+    <div v-if="checkedNode">
+      <EActionEditor
+        :key="checkedNode.id"
+        :event-list="eventList"
+        :model-value="getAttributeValue(`on`, checkedNode!)"
+        @update:model-value="handleSetValue($event, `on`)"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Designer, PageSchema } from '../../../../../types/epic-designer'
+import { pluginManager, revoke, getAttributeValue, setAttributeValue } from '@epic-designer/utils'
+import { inject, computed } from 'vue'
+const pageSchema = inject('pageSchema') as PageSchema
+const designer = inject('designer') as Designer
+const EActionEditor = pluginManager.getComponent('EActionEditor')
+
+const componentConfings = pluginManager.getComponentConfings()
+const checkedNode = computed(() => {
+  return designer.state.checkedNode
+})
+
+const eventList = computed(() => {
+  const eventList: any = [{
+    title: '生命周期',
+    events: [
+      {
+        type: 'vnodeBeforeMount',
+        describe: 'beforeMount'
+      },
+      {
+        type: 'vnodeMounted',
+        describe: 'mounted'
+      },
+      {
+        type: 'vnodeBeforeUpdate',
+        describe: 'beforeUpdate'
+      },
+      {
+        type: 'vnodeUpdated',
+        describe: 'updated'
+      },
+      {
+        type: 'vnodeBeforeUnmount',
+        describe: 'beforeUnmount'
+      },
+      {
+        type: 'vnodeUnmounted',
+        describe: 'unmounted'
+      },
+      {
+        type: 'vnodeErrorCaptured',
+        describe: 'errorCaptured'
+      }
+    ]
+  }]
+  const events = componentConfings[designer.state.checkedNode?.type ?? '']?.config.event ?? []
+  eventList.unshift({
+    title: '组件事件',
+    events
+  })
+  return eventList
+})
+
+/**
+ * 设置属性值
+ */
+function handleSetValue (value: any, field: string) {
+  setAttributeValue(value, field, checkedNode.value!)
+  // 将修改过的组件属性推入撤销操作的栈中
+  revoke.push(pageSchema.schemas, '编辑组件属性')
+}
+</script>

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

@@ -0,0 +1,36 @@
+// 属性编辑
+.epic-attribute-view,
+.epic-style-view {
+  padding: 16px;
+  .epic-attr-item {
+    display: flex;
+    // align-items  : center;
+    margin-bottom: 12px;
+
+    &.vertical {
+      display: block;
+    }
+
+    // &:hover{
+    //   background-color: var(--epic-primary-color);
+    // }
+    .epic-attr-label {
+      width: 80px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--epic-text-sm);
+      line-height: 32px;
+    }
+
+    .epic-attr-input {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.epic-designer-main .el-collapse .el-collapse-item__header {
+  box-sizing: border-box;
+}