epic-designer-gold 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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