epic-designer-gold 1.0.1 → 1.0.2

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

@@ -1,250 +0,0 @@
-<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";
-import { he } from "element-plus/es/locale";
-
-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",
-      height: "844px",
-      mode: type,
-    },
-  };
-
-  pageSchema.canvas = canvasConfigs[type];
-  console.log("%c [ pageSchema ]-248", "font-size:13px; background:pink; color:#bf2c9f;", pageSchema);
-}
-</script>

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

@@ -1,16 +0,0 @@
-// 头部
-.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);
-}

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

@@ -1,63 +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 type="primary" 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%;
-}