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

package/src/components/ComponentTreeFavorites/components/Tips.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  tipsInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const guideConfig = computed(() => {
+  return props.tipsInfo?.guideConfig || {};
+});
+
+const skill = computed(() => {
+  return Array.isArray(guideConfig.value?.skill)
+    ? guideConfig.value?.skill
+    : [guideConfig.value?.skill];
+});
+</script>
+
+<template>
+  <div class="component-tips">
+    <el-dialog v-bind="$attrs" :title="tipsInfo?.title">
+      <div class="component-tips--content">
+        <div class="component-tips--content__left">
+          <div>
+            <h1>组件说明:</h1>
+            <p>
+              {{ guideConfig?.explain || '' }}
+            </p>
+          </div>
+          <div style="margin-top: 50px">
+            <h1 style="">配置技巧:</h1>
+            <p
+              style="padding: 0; margin: 0"
+              v-for="item in skill"
+              :key="item"
+            >
+              {{ item || '' }}
+            </p>
+          </div>
+        </div>
+        <div class="component-tips--content__right">
+          <h1>组件配置效果示例</h1>
+          <img :src="guideConfig?.sampleUrl" alt="" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.component-tips {
+  ::v-deep .el-dialog__body {
+    padding: 30px;
+  }
+  ::v-deep .el-dialog__title {
+    color: #1a1a1a;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  ::v-deep .el-dialog {
+    border-radius: 10px;
+  }
+  ::v-deep .el-dialog__header {
+    border-bottom: 1px solid #e6e6e6;
+    padding: 30px 0 16px 0;
+    margin: 0 30px;
+
+    .el-icon {
+      font-size: 24px;
+      color: #1c212d;
+    }
+  }
+  h1 {
+    color: #1a1a1a;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+  &--content {
+    display: flex;
+    &__left {
+      flex-grow: 1;
+      p {
+        color: #1a1a1a;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+      }
+    }
+    &__right {
+      display: flex;
+      flex-direction: column;
+      min-width: 270px;
+      max-width: 270px;
+      margin-left: 80px;
+      img {
+        width: 100%;
+        margin-top: 15px;
+      }
+    }
+  }
+}
+</style>

package/src/components/ComponentTreeFavorites/index.vue

@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import {
+  ref,
+  defineProps,
+  withDefaults,
+  defineEmits,
+  computed,
+  watch,
+} from 'vue';
+import { Search } from '@jt/icons-vue';
+import List from './components/List.vue';
+import { ComponentTreeData, LowCodeKey } from '@jt/low-code-core';
+import AllIcon from '../../assets/img/tool/all.svg';
+import AllSelectIcon from '../../assets/img/tool/all-select.svg';
+import collectionIcon from '../../assets/img/tool/collection-tag.svg';
+import collectionSelectIcon from '../../assets/img/tool/collection-select.svg';
+import { favoriteRebuild } from '../../utils';
+import { cloneDeep } from '@jt/ark-util';
+
+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;
+    favorites?: any[];
+  }>(),
+  {
+    componentTreeData: null,
+    readOnly: false,
+    favorites: [] as any,
+  }
+);
+
+const emits = defineEmits(['addItem', 'dragEnd', 'collect']);
+
+const { onClickItem, onDragEnd, rebuild, listRef, keyword } = useComponentTree(
+  props,
+  emits
+);
+
+// 当前显示的可选择的组件
+const activeComponentTree = computed(() => {
+  if (!props.componentTreeData) return [];
+  const componentTreeData = cloneDeep(props.componentTreeData.value);
+  if (typeValue.value === 1) {
+    return keyword.value
+      ? rebuild(componentTreeData, keyword.value)
+      : componentTreeData;
+  } else {
+    // 先过滤收藏 再过滤搜索筛选
+    return keyword.value
+      ? rebuild(
+          favoriteRebuild(componentTreeData, props.favorites),
+          keyword.value
+        )
+      : favoriteRebuild(componentTreeData, props.favorites);
+  }
+});
+
+const onCollect = async data => {
+  emits('collect', data);
+};
+// 收藏/全部分类
+const typeValue = ref<number>(1);
+</script>
+<template>
+  <div class="component-tree-v2">
+    <div class="component-tree-v2__title">
+      <div class="text_info">组件库</div>
+      <el-input placeholder="请输入" v-model="keyword" :prefix-icon="Search" />
+    </div>
+
+    <div class="component-tree-v2__classify">
+      <div
+        class="classify_item"
+        :class="{ active: typeValue === 1 }"
+        @click="typeValue = 1"
+      >
+        <img :src="typeValue === 1 ? AllSelectIcon : AllIcon" />
+        全部组件
+      </div>
+      <div
+        class="classify_item"
+        :class="{ active: typeValue === 2 }"
+        @click="typeValue = 2"
+      >
+        <img :src="typeValue === 2 ? collectionSelectIcon : collectionIcon" />
+        我的收藏
+      </div>
+      <div
+        class="action"
+        :style="{ left: typeValue === 1 ? '0%' : '50%' }"
+      ></div>
+    </div>
+    <List
+      :componentTree="activeComponentTree"
+      :readOnly="readOnly"
+      @click-item="onClickItem"
+      @drag-end="onDragEnd"
+      ref="listRef"
+      @collect="onCollect"
+      :favorites="favorites"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.component-tree-v2 {
+  box-sizing: border-box;
+  padding: 20px;
+  flex-shrink: 1;
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  &__title {
+    display: flex;
+    align-items: center;
+    .text_info {
+      min-width: 54px;
+      font-size: 18px;
+      font-weight: 500;
+      color: #282f40;
+      line-height: 24px;
+      display: inline-flex;
+      margin-right: 15px;
+    }
+  }
+
+  &__classify {
+    margin-top: 12px;
+    height: 48px;
+    // width: 440px;
+    border-radius: 6px;
+    background: #e6e6e6;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .classify_item {
+      flex: 1;
+      color: #828690;
+      font-size: 16px;
+      line-height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      z-index: 3;
+      img {
+        margin-right: 4px;
+      }
+
+      &.active {
+        font-weight: 700;
+        color: #c79156;
+      }
+    }
+
+    .action {
+      z-index: 2;
+      position: absolute;
+      width: calc(50% - 10px);
+      height: 38px;
+      border-radius: 4px;
+      background: #fff;
+      transition: all 0.3s;
+      margin-left: 5px;
+    }
+  }
+}
+</style>

package/src/components/ImageGuide/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="guide-dialog">
+    <el-dialog
+      custom-class="guide-dialog"
+      append-to-body
+      @close="closeDialog"
+      :title="title"
+      :width="width"
+      :modelValue="modelValue"
+    >
+      <!-- 导出2倍图教程 -->
+      <div class="image-export-guide">
+        <div
+          v-for="(item, index) in content"
+          :key="index"
+          class="image-export-guide--item"
+        >
+          <p>{{ item.title }}</p>
+          <div class="image-group">
+            <el-image
+              v-for="img in item.imgs"
+              :key="img.url"
+              :preview-src-list="[]"
+              :src="img.url"
+              :style="img.style"
+              fit="scale-down"
+            ></el-image>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: true,
+    },
+    content: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: Number,
+      default: 520,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const closeDialog = () => {
+      emit("update:modelValue", false);
+    };
+    return { closeDialog };
+  },
+});
+</script>
+
+<style lang="scss">
+.guide-dialog {
+  .el-dialog__body {
+    padding: 32px;
+    overflow-y: scroll;
+  }
+  .image-export-guide {
+    box-sizing: border-box;
+    padding: 16px 137px 24px 22px;
+    background: #f3f3f3;
+    &--item {
+      margin-bottom: 22px;
+      p {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        /* identical to box height, or 171% */
+
+        display: flex;
+        align-items: center;
+
+        color: #000000;
+        margin-bottom: 12px;
+      }
+    }
+    .image-group {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}
+</style>

package/src/components.ts

@@ -0,0 +1,23 @@
+import ComponentTree from './ComponentTree/index.vue';
+import NavTree from './NavTree/index.vue';
+import DataSource from './DataSource/index.vue';
+
+const editorComponents = {
+    ComponentTree,
+    NavTree,
+    DataSource,
+    push(components) {
+        if(components) {
+            for(const name in components) {
+                if(!components.hasOwnProperty(name)) continue;
+                if(this[name]) {
+                    console.warn(`${name}组件已经存在editorComponents`);
+                    continue;
+                }
+                this[name] = components[name];
+            }
+        }
+    }
+};
+
+export { editorComponents };

package/src/composables/useComponentTree.ts

@@ -0,0 +1,38 @@
+import PinyinMatch from 'pinyin-match';
+import { ref } from 'vue';
+export default function (props, emits) {
+    const listRef = ref();
+
+    const keyword = ref('');
+
+
+    /* 拖拽组件 */
+    const onDragEnd = ({ key, value }, isCors) => {
+        emits('dragEnd', { key, value }, isCors);
+    };
+    /* 点击组件 */
+    const onClickItem = ({ key, value }) => {
+        emits('addItem', { key, value });
+    };
+    // 过滤组件库
+    const rebuild = (tree, keyword) => {
+        if (!tree) return [];
+        const newTree = [];
+        tree.forEach(item => {
+            if (PinyinMatch.match(item.title, keyword)) {
+                // 搜到分类展示分类下所有组件
+                newTree.push({ ...item, list: item.list });
+            } else {
+                if (item.list && item.list.length > 0) {
+                    const list = rebuild(item.list, keyword);
+                    if (list && list.length > 0) {
+                        newTree.push({ ...item, list });
+                    }
+                }
+            }
+        });
+        return newTree;
+    };
+
+    return { onDragEnd, onClickItem, rebuild, listRef, keyword }
+}

package/src/config/ace.config.ts

@@ -0,0 +1,22 @@
+import ace from 'ace-builds';
+
+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json';
+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
+
+import modeTypescriptUrl from 'ace-builds/src-noconflict/mode-typescript';
+ace.config.setModuleUrl('ace/mode/typescript', modeTypescriptUrl);
+
+import modeMarkdownUrl from 'ace-builds/src-noconflict/mode-markdown';
+ace.config.setModuleUrl('ace/mode/markdown', modeMarkdownUrl);
+
+import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome';
+ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
+
+import 'ace-builds/src-noconflict/ext-language_tools';
+ace.require('ace/ext/language_tools');
+
+import 'ace-builds/src-noconflict/ext-beautify';
+ace.require('ace/ext/beautify');
+
+import 'ace-builds/src-noconflict/ext-emmet';
+ace.require('ace/ext/emmet');