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

package/src/NavTree/index.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="nav-tree">
+    <div class="nav-tree__added">
+      <el-tree
+        ref="tree"
+        :allow-drop="allowDrop"
+        :allow-drag="allowDrag"
+        :data="navTree"
+        :expand-on-click-node="false"
+        default-expand-all
+        :draggable="!readOnly"
+        node-key="navKey"
+        :props="{ class: customNodeClass }"
+        :current-node-key="activeKey"
+        @node-drop="handleNodeDrop"
+        @node-click="handleNodeClick"
+      >
+        <template #default="{ node, data }">
+          <div
+            :key="data.navKey"
+            :ref="el => treeItems.set(data.navKey, el)"
+            :style="{
+              'pointer-events': readOnly ? 'none' : 'auto',
+            }"
+            v-contextmenu:contextmenu
+            class="tree-item"
+            @contextmenu="openMenu(data)"
+            @mouseenter="data.isHover = data.key.action !== 'slot'"
+            @mouseleave="data.isHover = false"
+          >
+            <img v-if="data.icon" class="tree-icon" :src="data.icon" />
+            <template v-if="data.key?.path !== renameKey?.path">
+              <span>
+                {{ data.title }}
+                <span v-if="data?.componentId">
+                  id: {{ data?.componentId }}
+                </span>
+              </span>
+              <el-icon
+                v-if="data.isHover && data.rightIcon"
+                class="delete-icon"
+                :size="16"
+                color="#c13c2d"
+                @click="onClickIcon($event, data.rightIcon.key)"
+              >
+                <component
+                  :is="IconMap[data.rightIcon.icon]"
+                  v-if="data.rightIcon.icon"
+                />
+              </el-icon>
+            </template>
+            <el-input
+              v-else
+              ref="input"
+              v-model="data.title"
+              @blur="handleHideInput"
+              @change="onSubmitEdit(data)"
+              clearable
+            />
+          </div>
+        </template>
+      </el-tree>
+    </div>
+    <Contextmenu ref="contextmenu">
+      <!-- 从模拟器拿到菜单数据 -->
+      <ContextmenuItem
+        v-for="menu in menuList"
+        :key="menu.key && menu.key.action"
+        @click="handleMenuClick(menu.key)"
+        :style="{ color: menu.color }"
+        :disabled="readOnly"
+      >
+        {{ menu.title }}
+      </ContextmenuItem>
+    </Contextmenu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, computed, ComputedRef, watch } from 'vue';
+import type { ElTree, ElInput } from '@jt/jtui';
+import * as IconMap from '@jt/icons-vue';
+import type Node from '@jt/jtui/es/components/tree/src/model/node';
+import type { DropType } from '@jt/jtui/es/components/tree/src/tree.type';
+import {
+  directive as vContextmenu,
+  Contextmenu,
+  ContextmenuItem,
+} from 'v-contextmenu';
+import 'v-contextmenu/dist/themes/default.css';
+import {
+  Menu,
+  MenuData,
+  NavTreeData,
+  LowCodeKey,
+  ComponentType,
+} from '@jt/low-code-core';
+
+interface NavTree extends NavTreeData {
+  navKey: string;
+  isHover: boolean;
+}
+// 这里用JSON不会缓解删动的情况，因为激活态需要重新渲染
+const props = withDefaults(
+  defineProps<{
+    navTreeData?: {
+      key: LowCodeKey;
+      value: NavTreeData[];
+    };
+    menuData?: MenuData;
+    readOnly?: boolean;
+  }>(),
+  {
+    navTreeData: () => null,
+    menuData: () => [],
+    readOnly: false,
+  }
+);
+
+const emits = defineEmits([
+  'select',
+  'splice',
+  'menuOpen',
+  'menuClick',
+  'submitEdit',
+  'iconClick',
+]);
+
+// 当前激活的导航树的key
+const activeKey = ref('');
+// 当前正在编辑的导航树的key
+const renameKey = ref();
+// 是否由点击导航树激活
+let activateByClick = false;
+
+const input = ref<InstanceType<typeof ElInput>>();
+const tree = ref<InstanceType<typeof ElTree>>();
+const treeItems = ref(new Map());
+
+const menuList = computed(() =>
+  props.menuData.length ? props.menuData : []
+) as ComputedRef<Menu[]>;
+
+const navTree = computed(() => {
+  return props.navTreeData ? expandNavTree(props.navTreeData.value) : [];
+});
+
+watch(activeKey, value => {
+  if (activateByClick) {
+    activateByClick = false;
+    return;
+  }
+  treeItems.value.get(value)?.scrollIntoView?.();
+});
+
+/* 自定义类名函数 */
+const customNodeClass = (data: NavTree, node: Node) => {
+  if (data.activity) {
+    return 'activity';
+  }
+  return null;
+};
+
+/* 扩展导航树 扩展属性 isHover: 是否悬浮 navKey: 字符串键值 */
+const expandNavTree = (tree: NavTreeData[]): NavTree[] =>
+  tree.map(o => {
+    const item = { ...o };
+    const navKey = item.key.module + item.key.action + item.key.path;
+    if (item.activity) {
+      activeKey.value = navKey;
+    }
+
+    if (item.children && item.children.length) {
+      item.children = expandNavTree(item.children);
+    }
+    return { ...item, navKey, isHover: false };
+  });
+
+const allowDrag = (draggingNode: Node) => {
+  const {data} = draggingNode;
+  // 没有children才能拖拽
+  const draggingNodeChild = data?.children;
+  if (
+    draggingNodeChild &&
+    (draggingNodeChild?.length || Object.keys(draggingNodeChild).length)
+  )
+    return false;
+
+  return !data.immobile;
+};
+const allowDrop = (draggingNode: Node, dropNode: Node, type: DropType) => {
+  console.log('allowDrop', draggingNode, dropNode, type, draggingNode.level, dropNode.level, dropNode.data.type);
+  // 页面内的组件不允许拖到页面外
+  const ifOutside = draggingNode.level !== 1 && dropNode.level === 1;
+  // 同级的组件不允许拖到对方里面 如果dropNode是容器 则可以拖动
+  const ifInner =
+    draggingNode.level === dropNode.level &&
+    type === 'inner' &&
+    dropNode.data.type !== ComponentType.Container;
+  if(type !== 'inner' && dropNode.data.immobile){
+    // 不允许拖到与不可移动组件同级的情况（Tab内的容器间）
+    return false;
+  }
+  return !(ifOutside || ifInner);
+};
+
+/* 回车或失去焦点时提交修改 */
+const onSubmitEdit = (data: NavTree) => {
+  emits('submitEdit', renameKey.value, { title: data.title });
+  renameKey.value = null;
+};
+
+const handleHideInput = () => {
+  renameKey.value = null;
+};
+
+/* 点击树节点 */
+const handleNodeClick = (data: NavTree) => {
+  if(data.key !== renameKey.value){
+    handleHideInput()
+  }
+  activateByClick = true;
+  emits('select', data.key);
+};
+/* 打开右键菜单 */
+const openMenu = (data: NavTree) => {
+  emits('menuOpen', data.key);
+};
+/* 点击右键菜单 */
+const handleMenuClick = (key: LowCodeKey) => {
+  if (key.action === 'setPathData') {
+    renameKey.value = key;
+    nextTick(() => {
+      input.value.focus();
+    });
+  } else {
+    emits('menuClick', key);
+  }
+};
+/* 点击悬浮在树节点上显示的删除图标 */
+const onClickIcon = (e, key) => {
+  e.stopPropagation();
+  emits('iconClick', key);
+};
+
+/* 拖动导航树 */
+const handleNodeDrop = (
+  draggingNode: Node,
+  dropNode: Node,
+  dropType: DropType,
+  ev: DragEvent
+) => {
+  emits('splice', {
+    draggingNode: draggingNode?.data,
+    dropNode: dropNode.data,
+    dropType,
+  });
+};
+
+
+defineExpose({
+  handleMenuClick,
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-tree {
+  flex: 0 0 30%;
+  padding: 16px 17px;
+  overflow: auto;
+  // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color: #020202;
+  height: 100%;
+
+  .tree-item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    position: relative;
+    span {
+      margin-left: 3px;
+      font-size: 14px;
+      line-height: 24px;
+      color: #020202;
+    }
+    .tree-icon {
+      width: 20px;
+      height: 18px;
+      object-fit: contain;
+    }
+    .el-input {
+      height: 26px;
+      width: fit-content;
+    }
+    .delete-icon {
+      position: absolute;
+      right: 0;
+      transition: all 0.2s ease;
+    }
+    .delete-icon:hover {
+      font-size: 18px !important;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.nav-tree {
+  .el-tree-node.activity > .el-tree-node__content {
+    background-color: rgba(245, 219, 193, 0.5);
+  }
+  .el-tree-node {
+    padding: 8px 0;
+    .el-tree-node__content {
+      &:hover,
+      &:active {
+        background-color: rgba(245, 219, 193, 0.5);
+      }
+      .el-tree-node__label {
+        flex: 1;
+      }
+      .tree-item span {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+    .el-tree-node__children {
+      .el-tree-node:nth-child(1) {
+        margin-top: 8px;
+      }
+      .tree-item span {
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+  .tree-item .el-input__wrapper {
+    box-shadow: 0 0 0 1px #bf935f inset;
+    padding: 4px 5px 4px 4px;
+    .el-input__inner {
+      color: #50381f;
+    }
+  }
+}
+</style>

package/src/SchemaConfig/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="schema-config">
+    <div>
+      <!-- <p class="title">{{ title }}</p> -->
+      <template v-if="showForm">
+        <VueForm
+          :key="key"
+          :schema="config"
+          :modelValue="data"
+          :readOnly="readOnly"
+          @fileUpload="handleFileUpload"
+          @on-change="onChange($event, schemaData?.key)"
+          ref="vueForm"
+          @openCloud="onOpenCloud"
+          @getData="onGetData"
+          group
+          @preloadCloud="onPreloadCloud"
+          @initValidateRule="onInitValidateRule"
+        />
+      </template>
+      <template v-else>
+        <div class="notice">请在中间画布中选中节点</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { VueForm } from '@jt/formily';
+
+import {
+  ref,
+  computed,
+  withDefaults,
+  defineProps,
+  defineEmits,
+  watch,
+  nextTick,
+} from 'vue';
+import { SchemaData } from '@jt/low-code-core';
+import { cloneDeep, isEqual } from '@jt/ark-util';
+
+const props = withDefaults(
+  defineProps<{
+    schemaData: SchemaData;
+    readOnly?: boolean;
+  }>(),
+  {
+    schemaData: () => ({} as SchemaData),
+    readOnly: false,
+  }
+);
+const emits = defineEmits([
+  'change',
+  'upload',
+  'getData',
+  'openCloud',
+  'preloadCloud',
+  'initValidateRule',
+]);
+const vueForm = ref();
+const config = ref({});
+const data = computed(() => {
+  return props.schemaData?.data ?? {};
+});
+// key  组件 + path
+const key = computed(() => {
+  return props.schemaData?.componentId;
+});
+// 显示表单
+const showForm = ref(false);
+// 标题
+const title = computed(() => props.schemaData?.title ?? '');
+// 控制schema的更新
+watch(
+  () => props.schemaData?.schema,
+  (newVal, oldVal) => {
+    if (!isEqual(newVal, oldVal)) {
+      showForm.value = false;
+      nextTick(() => {
+        config.value = cloneDeep(newVal);
+        showForm.value = true;
+      });
+    }
+  }
+);
+
+// 文件上传
+const handleFileUpload = (file, done, config) => {
+  emits('upload', file, done, config);
+};
+/**
+ *   云组件预加载
+ * @param url
+ */
+const onPreloadCloud = url => {
+  emits('preloadCloud', url);
+};
+
+const onInitValidateRule = rule => {
+  emits('initValidateRule', rule);
+};
+/**
+ * 打开云组件
+ * @param data
+ * @param done
+ */
+const onOpenCloud = (data, done) => {
+  emits('openCloud', data, done);
+};
+/**
+ * 表单change
+ * @param value
+ * @param key
+ */
+const onChange = (value, key) => {
+  emits('change', { key, value });
+};
+/**
+ * 远程数据获取
+ * @param cmdname
+ * @param done
+ * @param cmdParams
+ */
+const onGetData = (cmdname: string, done, cmdParams) => {
+  emits('getData', cmdname, done, cmdParams);
+};
+</script>
+
+<style lang="scss" scoped>
+.schema-config {
+  .title {
+    font-family: 'Noto Sans SC';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    /* identical to box height, or 150% */
+    color: #020202;
+    margin-bottom: 16px;
+  }
+  .notice {
+    text-align: center;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 50px 15px 0;
+  }
+}
+</style>

package/src/SidebarPane/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <div
+      :ref="el => sidePane.set('float', el)"
+      :class="['float-pane', currentType === 'float' ? 'visible' : '']"
+    >
+      <div class="titled-panel">
+        <template v-if="showHeader">
+          <button class="icon-float" @click.stop="currentType = 'fixed'">
+            <svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              width="16"
+              height="16"
+              viewBox="0 0 1024 1024"
+            >
+              <path
+                d="M160.256 816.64C116.224 872.448 102.4 921.6 102.4 921.6s49.152-13.824 104.96-57.856c22.016-17.408 128-112.64 200.704-174.08l-73.728-73.728c-61.44 72.704-157.184 178.688-174.08 200.704zM648.704 209.408L442.368 355.328l226.304 226.304 145.92-206.336 15.872 15.872c20.992 20.992 54.784 20.992 75.776 0s20.992-54.784 0-75.776l-197.12-197.12c-20.992-20.992-54.784-20.992-75.776 0-20.992 20.992-20.992 54.784 0 75.776l15.36 15.36zM247.808 334.848c-9.728 2.048-18.944 6.656-26.624 14.336-20.992 20.992-20.992 54.784 0 75.776l377.856 377.856c20.992 20.992 54.784 20.992 75.776 0 7.68-7.68 12.288-16.896 14.336-26.624L247.808 334.848z"
+              ></path>
+              <path
+                d="M840.704 879.104c-9.728 0-19.456-3.584-27.136-11.264L155.648 210.432c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0L867.84 814.08c14.848 14.848 14.848 39.424 0 54.272-7.168 7.168-16.896 10.752-27.136 10.752z"
+              ></path>
+            </svg>
+          </button>
+          <button class="icon-close" @click="emits('clearActiveBar')">
+            <el-icon :size="16"><Close /></el-icon>
+          </button>
+          <div class="panel-title">
+            <span>{{ name }}</span>
+          </div>
+        </template>
+        <div class="panel-body" :style="{ top: showHeader ? '48px' : 0 }">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+    <div
+      :ref="el => sidePane.set('fixed', el)"
+      :class="['fixed-pane', currentType === 'fixed' ? 'visible' : '']"
+    >
+      <div class="titled-panel">
+        <template v-if="showHeader">
+          <button class="icon-fixed" @click.stop="currentType = 'float'">
+            <svg
+              fill="currentColor"
+              preserveAspectRatio="xMidYMid meet"
+              width="16"
+              height="16"
+              viewBox="0 0 1024 1024"
+            >
+              <path
+                d="M750.848 28.928l245.248 242.944a66.048 66.048 0 1 1-93.184 93.184l-25.6-19.456-249.6 353.792 78.336 78.336a66.048 66.048 0 0 1-93.184 92.672l-460.8-464.64a66.048 66.048 0 0 1 93.184-93.184l76.8 78.336 354.048-249.856-18.176-18.944a66.048 66.048 0 1 1 93.184-93.184zM380.672 732.416l-91.904-90.88c-74.24 89.6-191.488 219.904-212.736 247.04a419.84 419.84 0 0 0-70.656 128 419.84 419.84 0 0 0 128-70.144c27.136-21.248 157.44-138.496 246.528-214.016z"
+              ></path>
+            </svg>
+          </button>
+          <button class="icon-close" @click="emits('clearActiveBar')">
+            <el-icon :size="16"><Close /></el-icon>
+          </button>
+          <div class="panel-title">
+            <span>{{ name }}</span>
+          </div>
+        </template>
+        <div class="panel-body" :style="{ top: showHeader ? '48px' : 0 }">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { Close } from '@jt/icons-vue';
+import { ref, watch, onMounted, defineEmits, withDefaults, defineProps } from 'vue';
+const props = withDefaults(
+  defineProps<{
+    type: 'float' | 'fixed';
+    name: string;
+    showHeader: boolean;
+  }>(),
+  {
+    name: '默认标题',
+    showHeader: true,
+  }
+);
+const emits = defineEmits(['clearActiveBar']);
+const currentType = ref('');
+const sidePane = ref(new Map());
+watch(
+  () => props.type,
+  val => {
+    currentType.value = val;
+  },
+  { immediate: true }
+);
+// 点击空白处隐藏面板
+document.addEventListener(
+  'click',
+  e => {
+    const el = sidePane.value.get(currentType.value);
+    if (el) {
+      const isSelf =
+        el.contains(e.target) ||
+        !(document.querySelector('#app') as any).contains(e.target);
+      if (!isSelf && currentType.value !== 'fixed') {
+        emits('clearActiveBar');
+      }
+    }
+  },
+  false
+);
+</script>
+
+<style lang="scss" scoped>
+.float-pane {
+  position: absolute;
+  width: 300px;
+  top: 0;
+  bottom: 0;
+  left: 46px;
+  z-index: 820;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
+  background-color: #fff;
+  display: none;
+}
+.fixed-pane {
+  position: relative;
+  margin-left: 1px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  height: 100%;
+  width: 300px;
+  flex-shrink: 0;
+  background-color: #fff;
+  display: none;
+}
+.float-pane .titled-panel,
+.fixed-pane .titled-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .icon-float,
+  .icon-fixed {
+    position: absolute;
+    right: 38px;
+    top: 14px;
+    height: auto;
+    z-index: 2;
+    background: transparent;
+    border-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    height: 20px;
+    font-size: 14px;
+    border-width: 0;
+    cursor: pointer;
+  }
+  .icon-close {
+    position: absolute;
+    right: 16px;
+    top: 14px;
+    height: auto;
+    z-index: 2;
+    background: transparent;
+    border-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    height: 20px;
+    font-size: 14px;
+    border-width: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .panel-title {
+    height: 48px;
+    font-size: 16px;
+    padding: 0 15px;
+    color: #0f1726;
+    font-weight: 700;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .panel-body {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: visible;
+    border-top: 1px solid rgba(31, 56, 88, 0.1);
+  }
+}
+.visible {
+  display: block;
+}
+</style>