epic-designer-gold 0.0.2 → 0.0.4

package/packages/core/components/designer/src/modules/editContainer/previewWidgets.vue

@@ -0,0 +1,390 @@
+<template>
+  <!-- 选中高亮 start  -->
+  <div
+    v-show="showSelector && designer.state.checkedNode?.id !== 'root'"
+    ref="selectorRef"
+    class="epic-checked-widget absolute pointer-events-none z-20"
+    :class="selectorPosition + ' ' + (selectorTransition ? 'transition-all' : '')"
+  >
+    <div class="epic-widget-action-box" ref="actionBoxRef">
+      <div class="epic-widget-action-item whitespace-nowrap">
+        <!-- {{ designer.state.checkedNode?.type }} -->
+        {{
+          pluginManager.getComponentConfingByType(designer.state.checkedNode?.type ?? "")
+            ?.defaultSchema.label
+        }}
+      </div>
+      <!-- 操作按钮 start  -->
+      <div class="flex items-center" v-if="isRemovableAndDraggable">
+        <div
+          title="复制"
+          class="epic-widget-action-item pointer-events-auto"
+          @click="handleCopy"
+        >
+          <EIcon name="icon--epic--copy-all-outline-rounded" />
+        </div>
+        <div
+          title="删除"
+          class="epic-widget-action-item pointer-events-auto"
+          @click="handleDelete"
+        >
+          <EIcon name="icon--epic--delete-outline-rounded" />
+        </div>
+      </div>
+      <!-- 操作按钮 end  -->
+    </div>
+  </div>
+  <!-- 选中高亮 end  -->
+  <!-- 悬停效果 start  -->
+  <div
+    v-show="showHover && designer.state.checkedNode?.id !== designer.state.hoverNode?.id"
+    ref="hoverWidgetRef"
+    class="epic-hover-widget absolute transition-all pointer-events-none z-998"
+  />
+  <!-- 悬停效果 end  -->
+</template>
+<script lang="ts" setup>
+import { DesignerProps } from '../../types'
+import { PageSchema, Designer } from '../../../../../types/epic-designer'
+import { inject, computed, ref, watch, type Ref } from 'vue'
+import { pluginManager, generateNewSchema, Revoke, findSchemaInfoById,  type PageManager } from '@epic-designer/utils'
+import { useStore, useTimedQuery } from '@epic-designer/hooks'
+import { useResizeObserver } from '@vueuse/core'
+import EIcon from '../../../../icon'
+const pageManager = inject('pageManager', {}) as PageManager
+const pageSchema = inject('pageSchema') as PageSchema
+const designer = inject('designer') as Designer
+const designerProps = inject('designerProps') as Ref<DesignerProps>
+  const revoke = inject('revoke') as Revoke
+
+
+const selectorRef = ref<HTMLDivElement | null>(null)
+const hoverWidgetRef = ref<HTMLDivElement | null>(null)
+const actionBoxRef = ref<HTMLDivElement | null>(null)
+
+const showSelector = ref(false)
+const showHover = ref(false)
+const selectorTransition = ref(true)
+
+
+const selectorPosition = ref<'top' | 'center' | 'bottom'>('top')
+
+const { canvasScale, disabledZoom } = useStore()
+
+let kEditRange: HTMLDivElement | null = null
+
+/**
+ * 判断组件是否可移动和可拖拽删除
+ */
+const isRemovableAndDraggable = computed(() => {
+  const schemas = designer.state.checkedNode
+  // 没有id不可编辑
+  if (!schemas?.id) return false
+  // 判断当前节点类型是否允许拖拽删除
+  if (designerProps.value.lockDefaultSchemaEdit && pageManager.defaultComponentIds.value.includes(schemas?.id)) {
+    // 禁止拖拽删除
+    return false
+  }
+  return true
+})
+
+
+/**
+ * 获取选中组件dom元素
+ */
+const getSelectComponentElement = computed<HTMLBaseElement | null>(() => {
+  const componentInstances = pageManager.componentInstances.value
+  const id = designer.state.checkedNode?.id
+
+  // 组件隐藏状态
+  if (designer.state.checkedNode?.componentProps?.hidden) {
+    return null
+  }
+  const componentConfing = pluginManager.getComponentConfingByType(designer.state.checkedNode?.type!) ?? null
+  if (!id || !componentInstances?.[id]) {
+    return null
+  }
+  if (componentConfing?.defaultSchema.input && designer.state.checkedNode?.noFormItem !== true) {
+    return componentInstances[id + 'formItem']?.$el
+  }
+  const componentInstance = componentInstances[id]
+  if (!componentInstance?.$el || componentInstance?.$el.nodeName === '#text' || !componentInstance?.$el.getBoundingClientRect) {
+    return null
+  }
+
+  return componentInstance?.$el
+})
+
+/**
+ * 获取悬停组件dom元素
+ */
+const getHoverComponentElement = computed<HTMLBaseElement | null>(() => {
+  const componentInstances = pageManager.componentInstances.value
+  const id = designer.state.hoverNode?.id
+  const componentConfing = pluginManager.getComponentConfingByType(designer.state.hoverNode?.type!) ?? null
+  if (!id || !componentInstances?.[id]) {
+    return null
+  }
+  if (componentConfing?.defaultSchema.input && designer.state.hoverNode?.noFormItem !== true) {
+    return componentInstances[id + 'formItem']?.$el
+  }
+  const componentInstance = componentInstances[id]
+  if (componentInstance?.$el.nodeName === '#text') {
+    return null
+  }
+  return componentInstance?.$el
+})
+
+const { mutationObserver, observerConfig: DocumentObserverConfig } = initObserve(setSeletorStyle)
+
+const { startTimedQuery, stopTimedQuery } = useTimedQuery(setSeletorStyle)
+
+// 监听选中dom元素变化
+watch(() => getSelectComponentElement.value, (selectComponentElement) => {
+  if (selectComponentElement) {
+    showSelector.value = true
+    // 监听dom元素及子元素的变化
+    mutationObserver.observe(selectComponentElement, DocumentObserverConfig)
+
+    const parentNode = selectComponentElement.parentNode as HTMLBaseElement
+    if (parentNode) {
+      parentNode.ondragstart = () => {
+        selectorTransition.value = false
+        startTimedQuery()
+      }
+      parentNode.ondragend = () => {
+        selectorTransition.value = true
+        stopTimedQuery()
+      }
+    }
+    setSeletorStyle()
+
+
+
+
+
+
+
+  } else {
+    showSelector.value = false
+  }
+})
+
+
+const { mutationObserver: hoverMutationObserver, observerConfig: hoverObserverConfig } = initObserve(setHoverStyle)
+
+// 监听悬停dom元素变化
+watch(() => getHoverComponentElement.value, (hoverComponentElement) => {
+  if (hoverComponentElement) {
+    // 监听dom元素及子元素的变化
+    hoverMutationObserver.observe(hoverComponentElement, hoverObserverConfig)
+    setHoverStyle()
+  }
+})
+
+
+// 添加悬停节点监听，当悬停节点消失超过300ms,则隐藏悬停部件
+let hideTimer: NodeJS.Timeout | number = 0
+watch(() => designer.state.hoverNode?.id, e => {
+  if (e) {
+    showHover.value = true
+    clearTimeout(hideTimer)
+    return
+  }
+
+  hideTimer = setTimeout(() => {
+    showHover.value = false
+  }, 300)
+})
+
+
+
+let oldScrollTop = 0
+let oldScrollLeft = 0
+/**
+ * 设置选择部件 样式 定位 宽高
+ */
+function setSeletorStyle() {
+  const element = getSelectComponentElement.value
+  if (!element || !kEditRange) return
+
+  const { top: offsetY, left: offsetX } = kEditRange?.getBoundingClientRect()
+
+  const { top, left, width, height } = element.getBoundingClientRect()
+
+
+  const scale = !disabledZoom.value ? canvasScale.value : 1
+  // 计算选择器部件位置
+  const selectorTop = top - offsetY + (kEditRange?.scrollTop ?? 0) * scale
+  const selectorLeft = left - offsetX + (kEditRange?.scrollLeft ?? 0) * scale
+
+  const selectorRefHeight = height / scale
+
+  if (selectorRef.value) {
+    selectorRef.value.style.width = `${width / scale}px`
+    selectorRef.value.style.height = `${selectorRefHeight}px`
+    selectorRef.value.style.top = `${selectorTop / scale}px`
+    selectorRef.value.style.left = `${selectorLeft / scale}px`
+    scrollIntoView(selectorTop, selectorLeft)
+
+  }
+
+  // 调整操作调位置 start
+  // 判断actionBoxRef是否有值
+  if (!actionBoxRef.value) {
+    return
+  }
+
+  // 判断actionBoxRef位置是否应该置于底部 距离顶部45px 高度100px
+  if (selectorTop < 45 && selectorRefHeight < 100) {
+    actionBoxRef.value.style.top = ''
+    actionBoxRef.value.style.bottom = '-30px'
+    actionBoxRef.value.style['border-radius'] = '0px 0px 4px 4px'
+    selectorPosition.value = 'bottom'
+
+  } else if (selectorTop < 45) {
+    // 判断actionBoxRef位置置于中间
+    actionBoxRef.value.style.top = '0px'
+    actionBoxRef.value.style['border-radius'] = '0px 0px 4px 0'
+    selectorPosition.value = 'center'
+
+  } else {
+    // actionBoxRef位置置于顶部
+    actionBoxRef.value.style.top = '-30px'
+    actionBoxRef.value.style['border-radius'] = '4px 4px 0px 0px'
+    selectorPosition.value = 'top'
+  }
+  // 调整操作调位置 end
+
+
+
+}
+
+/**
+ * 滚动进入可视区
+ */
+function scrollIntoView(selectorTop: number, selectorLeft: number) {
+  // 自动滚动到元素可视区域 start
+  const element = getSelectComponentElement.value
+  if (!kEditRange || !element) return
+  // 获取两个元素的边界框信息
+  const rect2 = kEditRange.getBoundingClientRect();
+  const { width } = element.getBoundingClientRect()
+
+  const scale = !disabledZoom.value ? canvasScale.value : 1
+
+  // 使selectComponentElement位于可见区域内
+  const newScrollTop = selectorTop / scale - rect2.top
+  let newScrollLeft = selectorLeft / scale - rect2.left + width / scale
+  newScrollLeft < rect2.width && (newScrollLeft = 0)
+  const yMin = kEditRange.scrollTop - rect2.height / 3 + 60
+  const yMax = kEditRange.scrollTop + rect2.height / 3 * 2
+  const xMin = kEditRange.scrollLeft - rect2.width + 200
+  const xMax = kEditRange.scrollLeft + rect2.width - 200
+
+  // 判断定位误差是否小于10px，小于则不处理
+  if (Math.abs(newScrollTop - oldScrollTop) < 10 && Math.abs(newScrollLeft - oldScrollLeft) < 10) return
+  oldScrollTop = newScrollTop
+  oldScrollLeft = newScrollLeft
+  if (newScrollTop > yMin && newScrollTop < yMax && newScrollLeft > xMin && newScrollLeft < xMax) return
+
+  kEditRange.scrollTop = newScrollTop;
+  kEditRange.scrollLeft = newScrollLeft;
+  // 自动滚动到元素可视区域 end
+}
+
+/**
+ * 设置悬停部件 样式 定位 宽高
+ */
+function setHoverStyle() {
+  const element = getHoverComponentElement.value
+
+  if (!element) return
+  const { top: offsetY, left: offsetX } = kEditRange?.getBoundingClientRect() ?? { top: 0, left: 0 }
+  const { top, left, width, height } = element.getBoundingClientRect?.() ?? element.nextElementSibling?.getBoundingClientRect()
+  const scale = !disabledZoom.value ? canvasScale.value : 1
+
+  // 计算选择器部件位置
+  const hoverTop = top - offsetY + (kEditRange?.scrollTop ?? 0) * scale
+  const hoverLeft = left - offsetX + (kEditRange?.scrollLeft ?? 0) * scale
+
+  if (hoverWidgetRef.value) {
+    hoverWidgetRef.value.style.width = `${width / scale}px`
+    hoverWidgetRef.value.style.height = `${height / scale}px`
+    hoverWidgetRef.value.style.top = `${hoverTop / scale}px`
+    hoverWidgetRef.value.style.left = `${hoverLeft / scale}px`
+  }
+}
+
+/**
+ * 实例化观察者对象
+ */
+function initObserve(func: () => void) {
+  const MutationObserver = window.MutationObserver
+
+  const observerConfig = {
+    childList: true,
+    attributes: true,
+    subtree: true
+  }
+
+  // 初始化观察者实例
+  const mutationObserver = new MutationObserver(func)
+
+  return {
+    mutationObserver,
+    observerConfig
+  }
+}
+
+/**
+ * 复制选中节点元素
+ */
+function handleCopy() {
+  const data = findSchemaInfoById(pageSchema.schemas, designer.state.checkedNode?.id ?? 'root')
+  if (!data) {
+    return false
+  }
+  const { list, schema, index } = data
+  const node = generateNewSchema(schema)
+  list.splice(index + 1, 0, node)
+  designer.setCheckedNode(node)
+
+  revoke.push(pageSchema.schemas, '复制组件')
+}
+
+/**
+ * 删除元素
+ */
+function handleDelete() {
+  const data = findSchemaInfoById(pageSchema.schemas, designer.state.checkedNode?.id ?? 'root')
+  if (!data) {
+    return false
+  }
+  let { list, schema: _schema, index } = data
+  list.splice(index, 1)
+  if (index === list.length) {
+    index--
+  }
+  designer.setCheckedNode(list[index])
+  revoke.push(pageSchema.schemas, '删除组件')
+}
+
+// 初始化函数，传入一个指向 Epic 编辑范围的引用
+function handleInit(epicEditRangeRef) {
+  kEditRange = epicEditRangeRef
+  kEditRange?.addEventListener('scroll', () => {
+    setSeletorStyle()
+  })
+
+  // 监听选中元素视窗变化
+  useResizeObserver(getSelectComponentElement, setSeletorStyle)
+  // 监听悬停元素视窗变化
+  useResizeObserver(getHoverComponentElement, setHoverStyle)
+}
+
+
+defineExpose({
+  handleInit
+})
+</script>

package/packages/core/components/designer/src/modules/editContainer/toolbar.vue

@@ -0,0 +1,258 @@
+<template>
+  <!-- 工具条 start  -->
+  <div class="epic-edit-toolbar flex items-center justify-between px-2">
+    <!-- 操作按钮 start  -->
+    <div class="flex-1 h-full flex items-center">
+      <template v-for="(action, index) in actionOptions" :key="index">
+        <div v-if="action.divider" class="epic-divider"></div>
+        <div
+          :title="action.title"
+          class="epic-action-item text-base h-90% px-10px flex items-center cursor-pointer"
+          :class="{ disabled: action.disabled }"
+          @click="action.on"
+        >
+          <EIcon :name="action.icon"></EIcon>
+        </div>
+      </template>
+    </div>
+    <!-- 操作按钮 end  -->
+
+    <input
+      type="file"
+      ref="fileRef"
+      accept=".json,.txt"
+      v-show="false"
+      @change="handleFileSelected"
+    />
+
+    <div class="flex-1 h-full flex items-center justify-end">
+      <!-- 缩放操作 start  -->
+      <div v-if="!disabledZoom" class="flex items-center ml-12px">
+        <div class="pr-8px w-82px cursor-pointer">
+          <Select
+            v-model:value="canvasScaleComuted"
+            v-model="canvasScaleComuted"
+            :options="canvasScaleOptions"
+            size="small"
+          ></Select>
+        </div>
+      </div>
+      <!-- 缩放操作 end  -->
+      <!-- 画布类型切换 start -->
+      <div class="epic-device h-28px items-center gap-1 rounded-md border p-2px flex">
+        <template v-for="item in deviceOptions" :key="item.key">
+          <div
+            :title="item.title"
+            class="epic-device-item h-full px-1 flex items-center cursor-pointer text-base transition-colors rounded-sm"
+            :class="{ checked: item.key === checkedKey }"
+            @click="handleSetCanvas(item.key)"
+          >
+            <EIcon :name="item.icon"></EIcon>
+          </div>
+        </template>
+      </div>
+      <!-- 画布类型切换 end -->
+    </div>
+  </div>
+  <EPreviewJson ref="previewJson" />
+  <!-- 工具条 end  -->
+</template>
+<script lang="ts" setup>
+import {
+  pluginManager,
+  Revoke,
+  deepCompareAndModify,
+  convertKFormData,
+} from "@epic-designer/utils";
+import { useStore } from "@epic-designer/hooks";
+import type { PageSchema, Designer } from "../../../../../types/epic-designer";
+import { computed, inject, ref } from "vue";
+import EIcon from "../../../../icon";
+import EPreviewJson from "./previewJson.vue";
+
+const Select = pluginManager.getComponent("select");
+
+const { canvasScale, disabledZoom } = useStore();
+const checkedKey = ref("pc");
+const pageSchema = inject("pageSchema") as PageSchema;
+const designer = inject("designer") as Designer;
+const revoke = inject("revoke") as Revoke;
+const previewJson = ref<InstanceType<typeof EPreviewJson> | null>(null);
+const deviceOptions = [
+  {
+    icon: "icon--epic--computer-outline-rounded",
+    title: "pc",
+    key: "pc",
+  },
+  {
+    icon: "icon--epic--tablet-android-outline-rounded",
+    title: "平板",
+    key: "pad",
+  },
+  {
+    icon: "icon--epic--phone-iphone-outline-sharp",
+    title: "手机",
+    key: "mobile",
+  },
+];
+
+const actionOptions = computed(() => {
+  return [
+    {
+      icon: "icon--epic--code",
+      title: "查看数据",
+      on: () => handlePreview(),
+    },
+    {
+      icon: "icon--epic--exit-to-app-rounded",
+      title: "导入数据",
+      on: handleOpenFileSelector,
+    },
+    {
+      icon: "icon--epic--trash",
+      title: "清空",
+      on: handleReset,
+    },
+    {
+      icon: "icon--epic--undo",
+      title: "撤销",
+      on: handleUndo,
+      disabled: !revoke.recordList.value.length,
+      divider: true,
+    },
+    {
+      icon: "icon--epic--redo",
+      title: "重做",
+      on: handleRedo,
+      disabled: !revoke.undoList.value.length,
+    },
+  ];
+});
+
+const fileRef = ref<HTMLInputElement | null>(null);
+const canvasScaleComuted = computed({
+  get() {
+    return `${(canvasScale.value * 100).toFixed(0)}%`;
+  },
+  set(value) {
+    const percentage = parseFloat(value);
+    canvasScale.value = percentage / 100;
+  },
+});
+
+const canvasScaleOptions = [
+  {
+    label: "60%",
+    value: "60%",
+  },
+  {
+    label: "80%",
+    value: "80%",
+  },
+  {
+    label: "100%",
+    value: "100%",
+  },
+  {
+    label: "120%",
+    value: "120%",
+  },
+  {
+    label: "140%",
+    value: "140%",
+  },
+];
+
+/**
+ * 撤销操作
+ */
+function handleUndo() {
+  const componentSchema = revoke.undo();
+  if (!componentSchema) return;
+  deepCompareAndModify(pageSchema.schemas, componentSchema);
+  designer.setCheckedNode(pageSchema.schemas[0]);
+}
+
+/**
+ * 重做操作
+ */
+function handleRedo() {
+  const componentSchema = revoke.redo();
+  if (!componentSchema) return;
+  deepCompareAndModify(pageSchema.schemas, componentSchema);
+  designer.setCheckedNode(pageSchema.schemas[0]);
+}
+
+/**
+ * 重置页面数据
+ */
+function handleReset() {
+  designer.reset();
+}
+
+// 预览数据
+function handlePreview() {
+  previewJson.value!.handleOpen();
+}
+
+/**
+ * 打开文件选择器
+ */
+function handleOpenFileSelector() {
+  fileRef.value?.click();
+}
+
+// 选择文件
+function handleFileSelected(e) {
+  const file = e.target.files?.[0];
+  if (!file) return;
+  e.target.value = null;
+
+  // 通过json文件导入
+  const reader = new FileReader();
+  reader.readAsText(file);
+  reader.onload = (res) => {
+    handleImporttData(res.target?.result as string);
+  };
+}
+
+/**
+ * 导入数据
+ */
+function handleImporttData(content?: string) {
+  // 导入JSON
+  try {
+    let schema = JSON.parse(content ?? "");
+    if (!schema.schemas) {
+      schema = convertKFormData(schema);
+    }
+
+    // 调用 deepCompareAndModify 函数比较 pageSchema 和传入的 schema，进行修改
+    deepCompareAndModify(pageSchema, schema);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * 设置画布宽高
+ * @param type
+ */
+function handleSetCanvas(type: string) {
+  designer.handleToggleDeviceMode(type);
+  checkedKey.value = type;
+  const canvasConfigs = {
+    pc: {},
+    pad: {
+      width: "780px",
+      mode: type,
+    },
+    mobile: {
+      width: "390px",
+      mode: type,
+    },
+  };
+
+  pageSchema.canvas = canvasConfigs[type];
+}
+</script>

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

@@ -0,0 +1,16 @@
+// 头部
+.epic-header-container {
+  border: 1px solid var(--epic-border-color);
+  border-bottom: 0;
+}
+
+.epic-header,
+.epic-header a {
+  height: 42px;
+  background-color: var(--epic-header-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  color: var(--epic-text-main);
+}