epic-designer-gold 0.0.0 → 0.0.1

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

@@ -0,0 +1,72 @@
+<template>
+  <header class="epic-header relative">
+    <div class="epic-header-item flex-1 items-center flex">
+      <slot name="prefix">
+        <a
+          class="decoration-none items-center flex"
+          href="https://github.com/Kchengz/epic-designer"
+          target="_blank"
+        >
+          <img
+            src="../../../../../static/logo.png"
+            class="w-18px h-18px"
+            alt=""
+            srcset=""
+          />
+          <span class="ml-3">EpicDesigner</span>
+        </a>
+      </slot>
+    </div>
+
+    <div class="epic-header-item flex-1 flex justify-center text-12px">
+      <slot name="title">
+        {{ designerProps.title }}
+      </slot>
+    </div>
+    <div class="epic-header-item flex-1 flex justify-end items-center">
+      <slot name="right-prefix"></slot>
+      <slot name="right-action">
+        <div>
+          <Button size="small" @click="handlePreview">
+            <span class="flex! items-center h-full">
+              <EIcon name="icon--epic--preview-outline" class="mr-4px" />
+              预览
+            </span>
+          </Button>
+        </div>
+        <div class="ml-2">
+          <Button size="small" @click="handleSave">
+            <span class="flex! items-center h-full">
+              <EIcon name="icon--epic--save-outline-rounded" class="mr-4px" />
+              保存
+            </span>
+          </Button>
+        </div>
+      </slot>
+      <slot name="right-suffix"></slot>
+    </div>
+  </header>
+</template>
+<script lang="ts" setup>
+import { inject, type Ref } from 'vue'
+import { pluginManager } from '@epic-designer/utils'
+import EIcon from '../../../../icon'
+import { DesignerProps } from '../../types'
+const emits = defineEmits(['save', 'reset', 'preview'])
+const Button = pluginManager.getComponent('button')
+const designerProps = inject('designerProps') as Ref<DesignerProps>
+
+/**
+ * 预览
+ */
+function handlePreview() {
+  emits('preview')
+}
+
+/**
+ * 触发保存操作
+ */
+function handleSave() {
+  emits('save')
+}
+</script>

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

@@ -0,0 +1,7 @@
+.epic-outline {
+    overflow: auto;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  
+  

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="epic-outline">
+    <ETree
+      :options="pageSchema.schemas"
+      draggable
+      :selected-keys="selectedKeys"
+      :hover-key="designer.state.hoverNode?.id"
+      @nodeClick="handleNodeClick"
+    >
+      <template #tree-node="{ schema }">
+        <div
+          class="epic-text-padding flex"
+          :class="{ hidden: schema.componentProps?.hidden }"
+          @mouseenter.stop="designer.setHoverNode(schema)"
+          @mouseleave.stop="designer.setHoverNode(null)"
+        >
+          <span class="max-w-full truncate">
+            <EIcon
+              v-if="schema.componentProps?.hidden"
+              name="icon--epic--visibility-off-outline-rounded"
+              class="translate-y-2px"
+            ></EIcon>
+            {{
+              schema.label ??
+              pluginManager.getComponentConfingByType(schema.type)?.defaultSchema.label
+            }}
+          </span>
+          <span class="epic-node-type-text flex-1 w-0 truncate">
+            {{ schema.id }}
+          </span>
+        </div>
+      </template>
+    </ETree>
+  </div>
+</template>
+<script lang="ts" setup>
+import ETree from "../../../../tree";
+import { inject, computed } from "vue";
+import { PageSchema, Designer } from "../../../../../types/epic-designer";
+import { pluginManager } from "@epic-designer/utils";
+import EIcon from "../../../../../components/icon";
+
+const designer = inject("designer") as Designer;
+const pageSchema = inject("pageSchema") as PageSchema;
+
+// 计算选中节点值
+const selectedKeys = computed(() => {
+  const id = designer.state.checkedNode?.id;
+  return id ? [id] : [];
+});
+
+// 设置选中节点
+function handleNodeClick(e: any) {
+  designer.setCheckedNode(e.componentSchema);
+}
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+  <Modal
+    v-model="visible"
+    title="预览"
+    class="w-900px"
+    width="900px"
+    @close="handleClose"
+    @ok="handleOk"
+    okText="表单数据"
+  >
+    <div class="min-w-750px rounded">
+      <EBuilder :key="EBuilderKey" ref="kb" :page-schema="pageSchema" />
+
+      <!-- 表单数据 start -->
+      <Modal
+        v-model="dataVisible"
+        title="表单数据"
+        class="w-860px"
+        width="860px"
+        @close="handleCloseData"
+        @ok="handleCloseData"
+      >
+        <div class="h-full rounded">
+          <MonacoEditor
+            ref="monacoEditorRef"
+            autoToggleTheme
+            readOnly
+            class="h-full editor"
+            :model-value="formValues"
+          />
+        </div>
+      </Modal>
+      <!-- 表单数据 end -->
+    </div>
+  </Modal>
+</template>
+<script lang="ts" setup>
+import EBuilder from "../../../../builder";
+import { pluginManager, getUUID } from "@epic-designer/utils";
+import { ref, inject, nextTick } from "vue";
+import { PageSchema } from "../../../../../types/epic-designer";
+const MonacoEditor = pluginManager.getComponent("monacoEditor");
+const Modal = pluginManager.getComponent("modal");
+const monacoEditorRef = ref<any>(null);
+
+const visible = ref(false);
+const dataVisible = ref(false);
+const formValues = ref({});
+
+const pageSchema = inject("pageSchema") as PageSchema;
+const kb = ref<any>(null);
+const EBuilderKey = ref("");
+
+function handleCloseData() {
+  dataVisible.value = false;
+}
+
+function handleClose() {
+  visible.value = false;
+}
+
+function handleOpen() {
+  visible.value = true;
+  // 通过修改key重新渲染组件
+  EBuilderKey.value = getUUID();
+}
+
+async function handleOk() {
+  try {
+    // 遍历获取的表单组件名称并进行验证
+    let values = await kb.value.validateAll();
+
+    // 如果没有表单数据，则弹出提示并返回
+    if (!Object.keys(values).length) {
+      alert("请添加表单组件后再尝试！");
+      return;
+    }
+
+    // 如果只有一个表单组件，则将 values 赋值为表单数据的值
+    if (Object.keys(values).length === 1) {
+      values = values["default"];
+    }
+
+    // 将验证后的表单数据转换为 JSON 字符串格式，并赋值给 formValues
+    formValues.value = JSON.stringify(values, null, 2);
+
+    // 在下一次 DOM 更新时，将 formValues 的值设置到 Monaco Editor 中
+    nextTick(() => {
+      monacoEditorRef.value?.setValue(formValues.value);
+    });
+
+    // 显示数据弹窗
+    dataVisible.value = true;
+  } catch (err) {
+    // 捕获并输出错误
+    console.error(err);
+  }
+}
+
+defineExpose({
+  handleOpen,
+});
+</script>

package/packages/core/components/designer/src/modules/rightSidebar/breadcrumb.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="epic-breadcrumb pl-4 py-2 truncate h-40px flex items-center">
+    <span v-for="(item, index) in designer.state.matched" :key="index">
+      <span class="flex items-center" v-if="index > (designer.state.matched.length - 4)">
+        <span v-if="designer.state.matched.length > 3 && index === (designer.state.matched.length - 3)">...</span>
+        <EIcon v-if="index !== 0" class="m-1" name="icon--epic--arrow-forward-ios-rounded" />
+        <span class="node-item cursor-pointer" @click="handleSelect(item)" @mouseenter.stop="designer.setHoverNode(item)"
+          @mouseleave.stop="designer.setHoverNode(null)">
+          {{ item.label ?? pluginManager.getComponentConfingByType(item.type)?.defaultSchema.label }}
+        </span>
+      </span>
+
+    </span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { Designer, ComponentSchema } from '../../../../../types/epic-designer'
+import EIcon from '../../../../icon'
+import { pluginManager } from '@epic-designer/utils'
+const designer = inject('designer') as Designer
+/**
+ * 选中点击节点元素
+ * @param schema
+ */
+function handleSelect(schema: ComponentSchema) {
+  designer.setCheckedNode(schema)
+}
+
+</script>

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

@@ -0,0 +1,74 @@
+.epic-right-sidebar-container {
+  background-color: var(--epic-view-color);
+}
+
+.epic-right-sidebar-hide-btn {
+  background-color: var(--epic-view-color);
+  color: var(--epic-text-helper);
+  // box-shadow: 2px 5px 6px 3px #ffffff36;
+  box-shadow: var(--epic-shadow-color) 0px 1px 4px;
+}
+
+.epic-right-sidebar {
+  background-color: var(--epic-view-color);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: width 0.3s;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--epic-border-color);
+  border-right: 1px solid var(--epic-border-color);
+  &.hide {
+    width: 0;
+    border: 0;
+  }
+
+  .epic-breadcrumb {
+    border-bottom: 1px solid var(--epic-border-color);
+    color: var(--epic-text-main);
+    .iconfont {
+      color: var(--epic-text-secondary);
+      font-size: var(--epic-text-sm);
+    }
+  }
+
+  .epic-actions-container {
+    display: flex;
+
+    .epic-action-item {
+      padding: 8px 8px;
+      flex: 1;
+      text-align: center;
+      border-bottom: 1px solid var(--epic-border-color);
+      cursor: pointer;
+      &::after {
+        content: "";
+        width: 0%;
+        left: 50%;
+      }
+
+      &.checked {
+        color: var(--epic-primary-color);
+        position: relative;
+        transition: 0.3s all;
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background-color: var(--epic-primary-color);
+          transition: 0.3s all;
+        }
+      }
+    }
+  }
+
+  .epic-sidebar-content {
+    flex: 1;
+    overflow: auto;
+  }
+}

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

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="sidebarComponent" class="epic-right-sidebar-container relative">
+    <!-- 折叠按钮 start -->
+    <div
+      class="epic-right-sidebar-hide-btn absolute left--18px top-80px cursor-pointer rounded-full flex justify-center items-center w-28px h-28px z-9"
+      @click="handleHideRight"
+    >
+      <EIcon
+        class="transition-all"
+        :class="{ 'rotate-180': hideRightMain }"
+        name="icon--epic--arrow-forward-ios-rounded"
+      />
+    </div>
+    <div class="w-10px"></div>
+    <!-- 折叠按钮 end -->
+
+    <div class="epic-right-sidebar w-308px" :class="{ hide: hideRightMain }">
+      <div class="w-308px">
+        <EBreadcrumb />
+        <ul class="epic-actions-container">
+          <li
+            v-for="(item, index) in rightSidebars"
+            :key="index"
+            class="epic-action-item"
+            :title="item.title"
+            :class="{ checked: actionBarCheckedIndex === index }"
+            @click="handleClick(item, index)"
+          >
+            {{ item.title }}
+          </li>
+        </ul>
+        <div class="epic-sidebar-content">
+          <component :is="sidebarComponent" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, shallowRef } from "vue";
+import { pluginManager } from "@epic-designer/utils";
+import { RightSidebarModel } from "@epic-designer/utils";
+import EBreadcrumb from "./breadcrumb.vue";
+import EIcon from "../../../../icon";
+
+const hideRightMain = ref(false);
+
+const rightSidebars = computed(() => {
+  return pluginManager.viewsContainers.rightSidebars.value.filter((item) => item.visible);
+});
+
+const actionBarCheckedIndex = ref<number | null>(0);
+const sidebarComponent = shallowRef<any>(null);
+sidebarComponent.value = rightSidebars.value[0]?.component;
+
+function handleHideRight() {
+  hideRightMain.value = !hideRightMain.value;
+}
+
+function handleClick(item: RightSidebarModel, index: number) {
+  if (actionBarCheckedIndex.value === index) {
+    return false;
+  }
+  sidebarComponent.value = item.component;
+  actionBarCheckedIndex.value = index;
+}
+</script>

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

@@ -0,0 +1,7 @@
+.epic-sound-code {
+  height: 100%;
+}
+
+.epic-editor {
+  height: 100%;
+}

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

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

@@ -0,0 +1,51 @@
+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;
+}
+
+/**
+ * 配置项
+ */
+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

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

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

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

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

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

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