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

package/dist/utils/base64.d.ts

@@ -0,0 +1,4 @@
+/** 提示图标 */
+export declare const tipIcon = "data:image/webp;base64,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";
+/** 非图片图标 */
+export declare const notImageIcon = "data:image/webp;base64,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";

package/dist/utils/index.d.ts

@@ -0,0 +1,27 @@
+export declare interface SelectItem {
+    label: string;
+    value: any;
+}
+declare type PlainObject<T = any> = {
+    [key: string]: T;
+};
+export declare const changeEnum2Array: (param: PlainObject) => SelectItem[];
+/**
+ *  style图片背景渲染
+ * @param img
+ * @returns
+ */
+export declare function imageStyle(img: string): {
+    width: string;
+    height: string;
+    backgroundImage: string;
+    backgroundSize: string;
+};
+/**
+ *  过滤收藏
+ * @param tree
+ * @param favorites
+ * @returns
+ */
+export declare function favoriteRebuild(tree: any, favorites: any): any;
+export {};

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@cicctencent/low-code-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.9-beta.6",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup --config  && rollup --config ../../scripts/rollup.dts.config.js --bundleConfigAsCjs && node ../../scripts/replace.js"
+  },
+  "peerDependencies": {
+    "@jt/formily": ">= 0.0.78",
+    "v-contextmenu": ">= 3.0.0",
+    "vue": ">= 3.0.0"
+  },
+  "dependencies": {
+    "@jt/ark-util": ">=0.0.30",
+    "@jt/formily": ">= 0.0.78",
+    "@jt/jtui": ">=2.2.11-beta.14",
+    "@cicctencent/low-code-core": "1.1.9-beta.5",
+    "@cicctencent/low-code-validate": "1.1.9-beta.5",
+    "@jt/postmessage-channel": ">=0.1.10",
+    "jm-jsruntime": "^1.0.3",
+    "pinyin-match": "1.2.4",
+    "v-contextmenu": ">= 3.0.0",
+    "vue": ">= 3.0.0",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@formily/grid": "^2.2.29",
+    "@cicctencent/icons-vue": "^0.2.8",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vueuse/core": "9.13.0",
+    "ace-builds": "^1.23.4",
+    "dayjs": "1.8.35",
+    "html2canvas": "^1.4.1",
+    "is-reference": "^3.0.1",
+    "jest-worker": "^29.6.4",
+    "postcss": "^8.4.23",
+    "rollup": "^2.37.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-external-globals": "^0.6.1",
+    "rollup-plugin-inject-process-env": "^1.3.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.66.1",
+    "typescript": "~4.5.5",
+    "vue3-ace-editor": "2.2.3"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,3 @@
+import baseConfig from '../../scripts/rollup.base.js';
+
+export default baseConfig();

package/src/ActivityBar/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="sidebar">
+    <div v-for="bar in barList" :key="bar.name">
+      <el-tooltip :content="bar.title" placement="right">
+        <span
+          :class="['title', modelValue === bar.name ? 'activated' : '']"
+          @click.stop="emits('update:modelValue', bar.name)"
+        >
+          <b class="title-icon">
+            <el-icon :size="20">
+              <component :is="ElIcons[bar.icon]" />
+            </el-icon>
+          </b>
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+//@ts-nocheck
+import { PropType } from 'vue';
+import * as ElIcons from '@cicctencent/icons-vue';
+import { ActivityBarType } from '@cicctencent/low-code-core';
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  barList: {
+    type: Array as PropType<ActivityBarType[]>,
+    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;
+      .el-icon:deep(svg > path) {
+        fill: currentColor;
+      }
+    }
+  }
+  .activated {
+    color: #f0dcc4;
+  }
+}
+</style>

package/src/ComponentTree/components/List.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="component-list">
+    <template v-if="componentTree.length">
+      <el-collapse v-model="activeNames">
+        <template v-for="item in componentTree" :key="item.title">
+          <el-collapse-item :name="item.title" v-if="calc(item)">
+            <template #title>
+              {{ item.title }}
+              <el-icon color="#999999" :size="16">
+                <CaretBottom v-if="activeNames.includes(item.title)" />
+                <CaretRight v-else />
+              </el-icon>
+            </template>
+            <template
+              v-for="subItem in (item.list as ComponentTree[])"
+              :key="subItem.title"
+            >
+              <el-collapse-item
+                class="nested-list"
+                :name="subItem.title"
+                v-if="calc(subItem)"
+              >
+                <template #title>
+                  {{ subItem.title }}
+                  <el-icon color="#999999" :size="16">
+                    <CaretBottom v-if="activeNames.includes(subItem.title)" />
+                    <CaretRight v-else />
+                  </el-icon>
+                </template>
+                <div v-if="subItem.list">
+                  <template
+                    v-for="element in (subItem.list as ComponentTreeItem[])"
+                    :key="element.name"
+                  >
+                    <div
+                      class="component-item"
+                      :style="{
+                        'pointer-events': readOnly ? 'none' : 'auto',
+                      }"
+                      @mousedown="e => onMousedown(e, element)"
+                    >
+                      <div
+                        class="component-img"
+                        :ref="el => imgRefMap.set(element.name, el)"
+                      >
+                        <img :src="element.icon" alt="" />
+                      </div>
+                      <!-- 当前正在移动的组件副本 -->
+                      <div
+                        v-if="element.name === movingComponent.name"
+                        class="component-img-copy"
+                        :style="{
+                          top: `${movingComponent.top}px`,
+                          left: `${movingComponent.left}px`,
+                          cursor: movingComponent.cursor,
+                        }"
+                      >
+                        <img :src="element.icon" alt="" />
+                      </div>
+                      <div class="component-name">
+                        {{ element.title }}
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </el-collapse-item>
+            </template>
+          </el-collapse-item>
+        </template>
+      </el-collapse>
+    </template>
+    <template v-else>
+      <div class="notice">组件库为空</div>
+    </template>
+  </div>
+  <div :class="['drop-area', coverIframe ? 'cover-iframe' : '']"></div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  watch,
+  reactive,
+  inject,
+  Ref,
+} from 'vue';
+import { ComponentTreeItem, ComponentTree } from '@cicctencent/low-code-core';
+import { CaretBottom, CaretRight } from '@cicctencent/icons-vue';
+const props = withDefaults(
+  defineProps<{
+    componentTree?: ComponentTree[];
+    readOnly?: boolean;
+  }>(),
+  {
+    readOnly: false,
+  }
+);
+
+const emits = defineEmits(['dragEnd', 'clickItem']);
+// 默认全部展开
+const activeNames = ref([]);
+// 是否覆盖iframe 为了解决组件拖拽到iframe出现的位置偏差问题
+const coverIframe = ref(false);
+// 组件图片的ref集合
+const imgRefMap = ref(new Map());
+// 当前正在移动的组件位置
+const movingComponent = reactive({
+  name: '',
+  top: 0,
+  left: 0,
+  cursor: 'pointer',
+});
+const iframe = inject<Ref<HTMLIFrameElement>>('iframe');
+watch(
+  () => props.componentTree,
+  list => {
+    const value = [];
+    (list || []).forEach(v => {
+      value.push(v.title);
+      v.list &&
+        v.list.forEach(lv => {
+          value.push(lv.title);
+        });
+    });
+    activeNames.value = value;
+  },
+  { deep: true, immediate: true }
+);
+/* 计算该分类下有多少个组件 */
+const calc = (tree: ComponentTree): number => {
+  if (tree.list.length) {
+    // 不是最后一级分类
+    if ((tree.list[0] as ComponentTree)?.list) {
+      return (tree.list as ComponentTree[])
+        .map(v => calc(v))
+        .reduce((p, c) => p + c);
+    }
+    // 是最后一级分类
+    return tree.list.length;
+  }
+  return 0;
+};
+/**
+ * 由于在跨域的iframe上无法触发drag和drop事件 而仅能触发的dragend事件计算的坐标有误差 因此使用mouse事件替代拖拽事件
+ */
+// 记录鼠标是否移动
+let isMoved = false;
+// 记录鼠标长按是否超过0.5s
+let isLongPress = false;
+// 偏移距离
+const offsetLength = 10;
+// 按下鼠标触发的事件
+const onMousedown = (e: MouseEvent, element: ComponentTreeItem) => {
+  e.preventDefault();
+  const rect = iframe?.value?.getBoundingClientRect?.();
+  // 提高蒙层的层级 盖住iframe
+  coverIframe.value = true;
+  const img = imgRefMap.value.get(element.name);
+  // 长按鼠标超过0.5s则副本自动移出当前位置 向上向下各偏移offsetLength 以提示用户可以拖动组件
+  const timer = setTimeout(() => {
+    isLongPress = true;
+    movingComponent.name = element.name;
+    movingComponent.left = e.clientX - img.offsetWidth / 2 + offsetLength;
+    movingComponent.top = e.clientY - img.offsetHeight / 2 - offsetLength;
+  }, 500);
+  // 移动鼠标触发的事件
+  const move = (ev: MouseEvent) => {
+    isMoved = true;
+    if (!isLongPress) clearTimeout(timer);
+    // 展示组件副本 鼠标移动时让副本组件跟随鼠标
+    movingComponent.name = element.name;
+    movingComponent.left =
+      ev.clientX - img.offsetWidth / 2 + (isLongPress ? offsetLength : 0);
+    movingComponent.top =
+      ev.clientY - img.offsetHeight / 2 - (isLongPress ? offsetLength : 0);
+    // 根据设置鼠标样式
+    if (rect) {
+      if (
+        ev.clientX > rect.left &&
+        ev.clientX < rect.left + rect.width &&
+        ev.clientY > rect.top &&
+        ev.clientY < rect.top + rect.height
+      ) {
+        movingComponent.cursor = 'copy';
+      } else {
+        movingComponent.cursor = 'no-drop';
+      }
+    }
+  };
+  // 抬起鼠标触发的事件
+  const up = (ev: MouseEvent) => {
+    if (!isLongPress) clearTimeout(timer);
+    // 恢复层级
+    coverIframe.value = false;
+    // 鼠标未移动且没有长按为点击事件
+    if (!isMoved && !isLongPress) {
+      emits('clickItem', { key: element.key, value: element });
+    } else {
+      isMoved = false;
+      isLongPress = false;
+      // 恢复默认值
+      movingComponent.name = '';
+      movingComponent.left = 0;
+      movingComponent.top = 0;
+      movingComponent.cursor = 'pointer';
+      const { key, name } = element;
+      const { clientX: x, clientY: y } = ev;
+      emits('dragEnd', { key, value: { x, y, name } }, ev.view === self);
+    }
+    document.removeEventListener('mousemove', move);
+    document.removeEventListener('mouseup', up);
+  };
+  document.addEventListener('mousemove', move);
+  document.addEventListener('mouseup', up);
+};
+</script>
+
+<style lang="scss" scoped>
+.component-list {
+  display: flex;
+  flex-basis: 100px;
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+
+  .notice {
+    text-align: center;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 50px 15px 0;
+  }
+  .component-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    cursor: pointer;
+    .component-img {
+      box-sizing: border-box;
+      width: 100px;
+      min-width: 100px;
+      height: 52px;
+      background-color: rgba(#212121, 0.1);
+      border-radius: 4px;
+      margin-right: 24px;
+      padding: 8px 9px;
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+      }
+    }
+    .component-img-copy {
+      @extend .component-img;
+      /* 由于设置为absolute会被该组件外的其他组件遮盖 因此设置为fixed */
+      position: fixed;
+      z-index: 999;
+      transition: all ease;
+    }
+    .component-name {
+      font-size: 14px;
+      line-height: 24px;
+      color: #4b515e;
+    }
+  }
+}
+.drop-area {
+  background: transparent;
+}
+// 显示在最高层
+.cover-iframe {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+}
+</style>
+<style lang="scss">
+.component-list {
+  .el-collapse {
+    border-top: none;
+    .el-collapse-item__arrow {
+      display: none;
+    }
+    .el-collapse-item__header {
+      border-bottom: none;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px;
+      color: #020202;
+    }
+    .el-collapse-item__wrap {
+      border-bottom: none;
+      .el-collapse-item__content {
+        padding-bottom: 0px;
+        padding-left: 10px;
+      }
+    }
+  }
+  .nested-list {
+    .el-collapse-item__header {
+      font-size: 12px;
+      line-height: 24px;
+      color: #4b515e;
+    }
+    .el-collapse-item__content {
+      padding-left: 0px !important;
+    }
+  }
+}
+</style>

package/src/ComponentTree/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="component-tree">
+    <!-- <div class="component-tree__title">组件库</div> -->
+    <el-input
+      v-model="keyword"
+      class="search-input"
+      placeholder="请输入组件名称/组件分类名称"
+      :prefix-icon="Search"
+    />
+    <List
+      :componentTree="activeComponentTree"
+      :readOnly="readOnly"
+      @click-item="onClickItem"
+      @drag-end="onDragEnd"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults, defineEmits, computed } from 'vue';
+import { Search } from '@cicctencent/icons-vue';
+import List from './components/List.vue';
+import { ComponentTreeData, LowCodeKey } from '@cicctencent/low-code-core';
+import useComponentTree from '../composables/useComponentTree';
+// 如果直接传对象，会频繁更新DOM，这里传JSON会好很多。在vue内部判断是否需要更新是用：
+// nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)
+const props = withDefaults(
+  defineProps<{
+    componentTreeData?: {
+      key: LowCodeKey;
+      value: ComponentTreeData;
+    };
+    readOnly?: boolean;
+  }>(),
+  {
+    componentTreeData: null,
+    readOnly: false,
+  }
+);
+
+const emits = defineEmits(['addItem', 'dragEnd']);
+const { rebuild, onClickItem, onDragEnd, keyword } = useComponentTree(
+  props,
+  emits
+);
+// 当前显示的可选择的组件
+const activeComponentTree = computed(() => {
+  if (!props.componentTreeData) return [];
+  if (!keyword.value) return props.componentTreeData.value;
+  else {
+    // 返回输入关键字过滤后的组件库
+    return rebuild(props.componentTreeData.value, keyword.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.component-tree {
+  flex-shrink: 1;
+  padding: 16px 17px;
+  position: relative;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  &__title {
+    margin-bottom: 19px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .search-input {
+    margin-bottom: 9px;
+    flex-grow: 0;
+  }
+}
+</style>