@cicctencent/low-code-editor 0.0.0-stage → 1.1.9-beta.6

package/src/editor.vue

@@ -0,0 +1,380 @@
+<template>
+  <div
+    class="editor"
+    @dragenter="onDragenter"
+    @drop.stop="onDrop(false, $event)"
+    @dragover="onDragover"
+    @dragleave="onDragleave"
+    @click="onClick"
+  >
+    <div
+      class="editor-top"
+      v-if="config?.functionData && !appConfig.hideHeader"
+    >
+      <HeaderBar
+        :scale-percent="viewScalePercent"
+        :function-data="config?.functionData"
+        :read-only="readOnly"
+        @update-scale="onUpdateScale"
+        @editTitle="onEditTitle"
+        @preview="$emit('preview')"
+        @copyUrl="$emit('copyUrl')"
+        @save="$emit('save', project)"
+        @publish="$emit('publish')"
+        @undo="onUndo"
+        @redo="onRedo"
+      ></HeaderBar>
+    </div>
+    <div class="editor-container">
+      <div v-if="!config" class="editor-container__empty">暂无数据</div>
+      <template v-else>
+        <div
+          v-if="!(config.activityBarList && config.activityBarList.length)"
+          class="editor-container__tool"
+        >
+          <NavTree
+            ref="navTreeRef"
+            :key="timestamp"
+            :nav-tree-data="config?.navTreeData"
+            :menu-data="menuData"
+            :read-only="readOnly"
+            @select="onSelect"
+            @menu-open="onMenuOpen"
+            @splice="onSplice"
+            @menu-click="onMenuClick"
+            @submit-edit="onSubmitEdit"
+            @icon-click="onIconClick"
+          />
+          <div class="divider"></div>
+          <slot
+            name="componentTree"
+            :componentTreeData="config?.componentTreeData"
+            :onAddItem="onAddItem"
+            :onDragEnd="onDragEnd"
+            :readOnly="readOnly"
+          >
+            <ComponentTree
+              :componentTreeData="config?.componentTreeData"
+              :read-only="readOnly"
+              @add-item="onAddItem"
+              @drag-end="onDragEnd"
+            />
+          </slot>
+        </div>
+        <template v-else>
+          <ActivityBar
+            v-model="activeBarName"
+            :bar-list="config.activityBarList"
+          ></ActivityBar>
+          <SidebarPane
+            v-if="activeBarName"
+            v-bind="config.primarySidebarData.sidebarPaneConfig"
+            @clear-active-bar="activeBarName = ''"
+          >
+            <component
+              :is="editorComponents[config.primarySidebarData.componentName]"
+              v-bind="config.primarySidebarData.componentProps"
+              @select="onSelect"
+              @menu-open="onMenuOpen"
+              @splice="onSplice"
+              @menu-click="onMenuClick"
+              @submit-edit="onSubmitEdit"
+              @icon-click="onIconClick"
+              @add-item="onAddItem"
+              @drag-end="onDragEnd"
+              @data-source-change="onDataSourceChange"
+              @getEntityList="onGetEntityList"
+              @getMethodList="onGetMethodList"
+            />
+          </SidebarPane>
+        </template>
+      </template>
+      <div class="editor-container__context" @click="onSelectPage">
+        <div
+          class="iframe-box"
+          v-loading="loading"
+          :style="viewIframeBoxStyle"
+          @drop.stop="onDrop(true, $event)"
+          @dragover="onDragover"
+        >
+          <iframe
+            ref="iframe"
+            :src="url"
+            frameborder="0"
+            :style="viewScaleStyle"
+            class="editor-iframe"
+          />
+        </div>
+      </div>
+      <div class="editor-container__schema">
+        <SchemaConfig
+          :schema-data="config?.schemaData"
+          :read-only="readOnly"
+          @change="onSchemaFormChange"
+          @upload="onSchemaUpload"
+          @openCloud="onOpenCloud"
+          @getData="onSchemaGetData"
+          @preloadCloud="onPreloadCloud"
+          @initValidateRule="onInitValidateRule"
+        />
+      </div>
+    </div>
+  </div>
+  <ImageGuide
+    v-if="guideData"
+    :width="1000"
+    :title="guideData.title"
+    v-model="guideVisible"
+    :content="guideData.content"
+  />
+
+  <el-dialog
+    v-model="dialog.visible"
+    :title="dialog.renderData.title"
+    :width="dialog.renderData?.width || '50%'"
+    destroy-on-close
+  >
+    <VueForm
+      :schema="dialog.renderData.schema"
+      :model-value="dialog.renderData.formData"
+      @fileUpload="onSchemaUpload"
+      @on-change="onDialogSchemaChange"
+    ></VueForm>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="onEditDialogCancel">
+          {{ dialog.renderData.cancelButton?.text }}
+        </el-button>
+        <el-button type="primary" @click="onEditDialogConfirm">
+          {{ dialog.renderData.confirmButton?.text }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import {
+  onMounted,
+  watch,
+} from 'vue';
+import { PostMessageOption } from '@jt/postmessage-channel';
+import HeaderBar from './HeaderBar/index.vue';
+import NavTree from './NavTree/index.vue';
+import ComponentTree from './ComponentTree/index.vue';
+import SchemaConfig from './SchemaConfig/index.vue';
+import ImageGuide from './components/ImageGuide/index.vue';
+import ActivityBar from './ActivityBar/index.vue';
+import SidebarPane from './SidebarPane/index.vue';
+import { Project } from '@cicctencent/low-code-core';
+import useEditor from './editor';
+import { editorComponents } from './components';
+import { VueForm } from '@jt/formily';
+import EditorDomain from './domain/EditorDomain';
+
+interface MessageReq {
+  type: string; //消息类型
+  data: any; // 相关数据
+  domain: EditorDomain; // 领域对象
+}
+
+const props = withDefaults(
+  defineProps<{
+    editorData?: Project; //  初始化project项目数，由于这里的数据流比较长，不适宜用v-model
+    url: string; // 模拟器页面url
+    // request?: () => void; // 获取数据方法，这里采用命令字的方式，限制访问的接口
+    request?: Function;
+    postMessageOption?: PostMessageOption;
+    readOnly?: boolean; // 是否有权限操作页面
+    appConfig?: any;
+    categoryList?: any[];
+    navBarComponents?: any;
+    onMessage?: (req: MessageReq) => any;
+  }>(),
+  {
+    readOnly: false,
+    appConfig: { hideHeader: false } as Record<string, any>,
+  }
+);
+
+onMounted(()=>{
+  // 如果有业务层处理的左侧菜单树，则注册进池
+  if(props.navBarComponents) editorComponents.push(props.navBarComponents);
+});
+
+watch(()=>props.navBarComponents, ()=>{
+  editorComponents.push(props.navBarComponents);
+});
+
+const emits = defineEmits([
+  'save',
+  'upload',
+  'publish',
+  'preview',
+  'copyUrl',
+  'editTitle',
+  'autoSave',
+  'updateProject',
+  'updateScreenShot',
+  'openUpload',
+  'getData',
+  'openCloud',
+  'preloadCloud',
+  'editDialogConfirm',
+  'editDialogCancel',
+]);
+
+const {
+  iframe,
+  viewIframeBoxStyle,
+  viewScaleStyle,
+  config,
+  project,
+  menuData,
+  iframeMaskFlag,
+  onUpdateScale,
+  onSelect,
+  onSelectPage,
+  onMenuOpen,
+  onSplice,
+  onMenuClick,
+  onSubmitEdit,
+  onAddItem,
+  onDragEnd,
+  onSchemaFormChange,
+  onDrop,
+  onDragover,
+  onDragenter,
+  onDragleave,
+  onSchemaUpload,
+  fillData,
+  onIconClick,
+  validate,
+  guideVisible,
+  guideData,
+  editTitle,
+  onSchemaGetData,
+  onOpenCloud,
+  onPreloadCloud,
+  onEditTitle,
+  updateNavMenuConf,
+  loading,
+  onUndo,
+  onRedo,
+  viewScalePercent,
+  dialog,
+  onEditDialogConfirm,
+  onEditDialogCancel,
+  onDialogSchemaChange,
+  activeBarName,
+  onDataSourceChange,
+  onGetEntityList,
+  onGetMethodList,
+  onClick,
+  onInitValidateRule,
+  timestamp,
+  send,
+  navTreeRef
+} = useEditor(props, emits);
+
+defineExpose({ fillData, validate, editTitle, updateNavMenuConf, send });
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+
+  &-top {
+    position: relative;
+    box-sizing: border-box;
+    background: #f8f8f8;
+    padding: 9px 23px;
+    display: flex;
+    /* z-index: 3; */
+    overflow-x: auto;
+    flex-shrink: 0;
+    flex-basis: 53px;
+  }
+  &-container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    overflow-y: hidden;
+    position: relative;
+    /* height: calc(100% - 53px); */
+    flex: 9;
+    &__empty {
+      flex: 1 0 410px;
+      display: flex;
+      justify-content: center;
+      margin-top: 11px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #4d5260;
+      line-height: 24px;
+    }
+    &__tool {
+      flex: 1 1 480px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      box-shadow: 0px 2px 12px rgba(216, 222, 235, 0.5);
+      height: 100%;
+      .divider {
+        height: 1px;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    &__context {
+      flex: 1 3 1100px;
+      position: relative;
+      background-color: #e8e8e8;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-top: 20px;
+      overflow: auto;
+      .iframe-box {
+        &.mask {
+          &::before {
+            content: '图片拖到这里上传';
+            z-index: inherit;
+            color: #fff;
+            background-color: rgba(0, 0, 0, 0.3);
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        .editor-iframe {
+          box-sizing: border-box;
+          border: 0;
+          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+          transition: all ease 300ms;
+        }
+      }
+    }
+
+    &__schema {
+      flex: 1 0 364px;
+      box-sizing: border-box;
+      position: relative;
+      padding: 0 0 16px 0;
+      overflow: auto;
+      box-shadow: 0px 2px 12px rgba(216, 222, 235, 0.5);
+    }
+  }
+}
+</style>

package/src/formily/ActivityBar/index.ts

@@ -0,0 +1,23 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+// @ts-ignore
+import JtActivityBar from './index.vue';
+
+export type JtActivityBarProps = typeof JtActivityBar;
+
+const TransformJtActivityBar = transformComponent<JtActivityBarProps>(
+  JtActivityBar,
+  {
+    change: 'update:modelValue',
+  }
+);
+
+export const ActivityBar = connect(
+  TransformJtActivityBar,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default ActivityBar;

package/src/formily/ActivityBar/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="sidebar">
+    <div>
+      <el-tooltip content="大纲树" placement="right">
+        <span
+          :class="['title', modelValue === 'outline' ? 'activated' : '']"
+          @click="emits('update:modelValue', 'outline')"
+        >
+          <b class="title-icon">
+            <svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              width="20"
+              height="20"
+              viewBox="0 0 1024 1024"
+              data-spm-anchor-id="a2q5o.26736379.0.i46.c2202a4b1qWlpv"
+            >
+              <path
+                d="M128 96h512a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V160a64 64 0 0 1 64-64z m32 64a32 32 0 1 0 0 64h448a32 32 0 0 0 0-64H160z m224 576h512a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64z m32 64a32 32 0 0 0 0 64h448a32 32 0 0 0 0-64H416z m-32-384h512a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64z m32 64a32 32 0 0 0 0 64h448a32 32 0 0 0 0-64H416z"
+              ></path>
+            </svg>
+          </b>
+        </span>
+      </el-tooltip>
+    </div>
+    <div>
+      <el-tooltip content="组件库" placement="right">
+        <span
+          :class="['title', modelValue === 'truck' ? 'activated' : '']"
+          @click="emits('update:modelValue', 'truck')"
+        >
+          <b class="title-icon">
+            <svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              width="20"
+              height="20"
+              viewBox="0 0 1024 1024"
+              class="ve-svgicon"
+              style="vertical-align: middle"
+            >
+              <path
+                d="M128 64h288a64 64 0 0 1 64 64v288a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32H160z m448-64h288a64 64 0 0 1 64 64v288a64 64 0 0 1-64 64h-288a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32h-224z m-32 416h288a64 64 0 0 1 64 64v288a64 64 0 0 1-64 64h-288a64 64 0 0 1-64-64v-288a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32v-224a32 32 0 0 0-32-32h-224zM128 544h288a64 64 0 0 1 64 64v288a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64v-288a64 64 0 0 1 64-64z m32 64a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32v-224a32 32 0 0 0-32-32H160z"
+                data-spm-anchor-id="a2q5o.26736379.0.i47.c2202a4b1qWlpv"
+              ></path>
+            </svg>
+          </b>
+        </span>
+      </el-tooltip>
+    </div>
+    <div>
+      <el-tooltip content="数据源" placement="right">
+        <span
+          :class="['title', modelValue === 'datapool' ? 'activated' : '']"
+          @click="emits('update:modelValue', 'datapool')"
+        >
+          <b class="title-icon">
+            <svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              width="20"
+              height="20"
+              viewBox="0 0 1024 1024"
+              class="ve-svgicon"
+              style="vertical-align: middle"
+              data-spm-anchor-id="a2q5o.26736379.0.i1.c2202a4b1qWlpv"
+            >
+              <path
+                d="M400 622.272c-118.912-7.264-220.544-37.504-280-79.712v81.408c0 55.488 121.056 101.568 280 110.4v55.904c-118.912-7.264-220.544-37.44-280-79.744v81.44H64V260C64 151.744 239.488 64 456 64c216.448 0 391.936 87.744 391.936 196v176.832h-56v-75.84c-68.576 56.896-193.408 94.976-335.968 94.976-142.56 0-267.36-38.08-336-94.976v94.976c0 55.488 121.088 101.6 280 110.432v55.872z m56 337.664c-216.512 0-392-75.2-392-168h56c0 61.888 150.4 112 336 112v56z m0-559.968c185.536 0 335.968-62.72 335.968-139.968 0-77.28-150.4-140-336-140-185.568 0-336 62.72-336 140 0 77.248 150.432 139.968 336 139.968z m487.264 367.36l-38.976-22.72c2.176-11.904 3.584-24.064 3.584-36.64a202.72 202.72 0 0 0-3.584-36.672l38.976-22.72c15.968-9.408 21.408-29.888 12.192-45.952l-33.28-58.176a33.152 33.152 0 0 0-45.568-12.32l-39.424 22.976a199.36 199.36 0 0 0-62.592-36.96v-28.576c0-18.528-14.88-33.6-33.312-33.6h-66.624a33.472 33.472 0 0 0-33.344 33.6v28.576a199.36 199.36 0 0 0-62.592 36.96l-39.424-22.976a33.152 33.152 0 0 0-45.536 12.32l-33.28 58.24a33.76 33.76 0 0 0 12.16 45.92l39.008 22.688c-2.304 12.064-3.52 24.352-3.584 36.672 0 12.576 1.376 24.736 3.584 36.672l-38.976 22.72c-16 9.376-21.44 29.856-12.224 45.92l33.312 58.176a33.152 33.152 0 0 0 45.536 12.32l39.424-22.944a198.784 198.784 0 0 0 62.592 36.96v28.544c0 18.56 14.912 33.6 33.344 33.6h66.624a33.472 33.472 0 0 0 33.312-33.6v-28.544a199.36 199.36 0 0 0 62.592-36.96l39.424 22.944a33.216 33.216 0 0 0 45.536-12.32l33.312-58.24a33.76 33.76 0 0 0-12.192-45.888z m-41.376 33.088l-15.36 26.144a15.52 15.52 0 0 1-20.992 5.472l-42.656-24.16a153.984 153.984 0 0 1-84.16 47.808v33.216c0 8.288-6.912 15.04-15.424 15.04h-30.688a15.232 15.232 0 0 1-15.36-15.104V855.68a153.984 153.984 0 0 1-84.192-47.808L550.4 832a15.52 15.52 0 0 1-21.024-5.472l-15.36-26.144a14.88 14.88 0 0 1 5.632-20.544l42.848-24.32a147.2 147.2 0 0 1-8.128-47.584c0-16.704 3.008-32.608 8.16-47.616l-42.88-24.32a14.88 14.88 0 0 1-5.6-20.512l15.36-26.176a15.52 15.52 0 0 1 20.992-5.472l42.656 24.192a153.984 153.984 0 0 1 84.16-47.808V527.04c0-8.32 6.88-15.04 15.392-15.04h30.72c8.48 0 15.36 6.72 15.36 15.104v33.152a153.984 153.984 0 0 1 84.16 47.808l42.688-24.192a15.52 15.52 0 0 1 20.992 5.472l15.36 26.176a14.88 14.88 0 0 1-5.6 20.544l-42.848 24.32c5.024 14.976 8.128 30.88 8.128 47.584 0 16.672-3.04 32.576-8.128 47.584l42.848 24.32a14.88 14.88 0 0 1 5.6 20.544z m-193.92-176.448a84 84 0 1 0 0 168 84 84 0 0 0 0-168z m0 112a28 28 0 1 1 0-56 28 28 0 0 1 0 56z"
+                data-spm-anchor-id="a2q5o.26736379.0.i32.c2202a4b1qWlpv"
+              ></path>
+            </svg>
+          </b>
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+});
+const emits = defineEmits(['update:modelValue']);
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  padding-top: 12px;
+  height: 100%;
+  width: 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  .title {
+    width: 46px;
+    height: 46px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .title-icon {
+      width: 20px;
+      height: 20px;
+      margin: 0;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .activated {
+    color: #0079f2;
+  }
+}
+</style>

package/src/formily/ComponentTree/index.ts

@@ -0,0 +1,22 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+import JtComponentTree from '../../ComponentTree/index.vue';
+
+export type JtComponentTreeProps = typeof JtComponentTree;
+
+const TransformJtComponentTree = transformComponent<JtComponentTreeProps>(
+  JtComponentTree,
+  {
+    change: 'update:modelValue',
+  }
+);
+
+export const ActivityBar = connect(
+  TransformJtComponentTree,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default ActivityBar;

package/src/formily/DataBinding/index.ts

@@ -0,0 +1,22 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+import JtDataBinding from './index.vue';
+
+export type JtDataBindingProps = typeof JtDataBinding;
+
+const TransformJtDataBinding = transformComponent<JtDataBindingProps>(
+  JtDataBinding,
+  {
+    change: 'update:modelValue',
+  }
+);
+
+export const MenuTable = connect(
+  TransformJtDataBinding,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default MenuTable;