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

package/src/SynBarComponent/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="component-tree">
+      <slot></slot>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { Component, onMounted, PropType } from 'vue';
+  const props = defineProps({
+        componentInstance: {
+        },
+    });
+
+    onMounted(()=>{
+        console.log(props);
+        
+    });
+  </script>
+  
+  <style lang="scss" scoped>
+  .component-tree {
+    flex-shrink: 1;
+    padding: 16px 17px;
+    position: relative;
+    height: 100%;
+  
+    display: flex;
+    flex-direction: column;
+  }
+  </style>
+  

package/src/assets/img/header/link.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="30" height="31" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_454_8732" transform="translate(0 -0.00403226) scale(0.0104167 0.0100806)"/>
+</pattern>
+<image id="image0_454_8732" width="96" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABkCAYAAAB5CTUuAAAEKElEQVR4Ae2aS47VMBBFe4FMWABbYMAIBAxh2lLPYI7EiMWAxHYeuqhvqxRV5fNS9nWSshQ5HScu5xyXnaZ5uFWREniQRq/gtxIgngQloASICYjDVwaUADEBcfjKgBIgJiAOXxlQAsQExOErA0qAmIA4fGVACRATEIevDCgBYgLi8JUBJUBMQBy+MqAEiAmIw1cGlAAxAXH4yoASICYgDl8ZcCUBv//8veH48fPX7cPnr7dXr9/8P8fPOK5YumUAgQP63HE1Ec0FYMbPAffaIAvPXaE0FYDZ7AFee+0K2dBMwF74lHR2Cc0EEOC0xvICqFxiuClP77M/n1lCEwHR7F8CGT0HGUvPHnW/SBcQbbprAV5NQroADyCWnS3F64NL0lqRW+Ip7+0i4B5oV5GQLsD7hYsb7taZdgUJ6QK4VNh6K3h7/9klpAvIzACKOLOEdAEerHuXIApA7fXLLEPbUUu6gOgzNAPQnITHp+8ZIbr30U3A1k/RiMSchOiZka+nC8DLRpCyloqo/8enbyOzdsfWRAAieZsx1uwsCe8/fXH/pTWrf5dWg4vNBER7QQ8JDTg167KZAIw4WioyJfBLyNYZX13NiE86biogW4IH1pN8pGWouYAMCRby9GvKtjELSsAkzfZI8PYSC9hrpyS04Rz322ec4ckudckAvh0gcJZO6wiQ9zVFwJFYtq+NwfEp6q4CImAENZUQCbN7gScI7V5mIM40hgK6jdldwBYJFGNrzm70E0GeEzCaBImAJQlzAO3s8WY/ALNEGTSSBJmAOQkQ4MGzy4fX7oGN7vPupbietVRAJAHXvdkNMSxeu12eeB/qkSXIBRAQ4OEgZA8w2/gMZrE9bLsVEN3PZ21mTZ9r/fMQAryX9GbtFJSVNAef/Xt9qiUcWgDArgFPAahHkzCsAIDl7LS1hXnv+UgShhUAuBY8z/F3gIwyJ2FrVu0Zz9ACIkitJWBv6VWGFgAIb999dDMBcjJKJDmr/6UxDi8g2guwJGVBsl9TXOpQ91iKhheAGYT/cmLB2PMsCbZPnpcAk7/RUgFYGRK8TOuxFxwiA+ihpYQSQMoLdUsJXHpsvTCc3c2HygC+bQsJlQGku7LOluD1h2utyyEzgFA8aFw+tsLz+traB8e1pT60ALyoB26rhKiP+gxdOZUigBCxNIujZ3t8guL1Dp8BdBSBtNnAGY0aR/QbMJ7hvey/VX0aAQC0JIEyluqlrMmUcSoBGRJ6wsd4Tydgj4Te8E8rAC+GsnZJwl7Qa81/HtpLdcoMeHm7578ZQwQObrqoCV0FnmM8vQC+6Kh1CRCbKQElQExAHL4yoASICYjDVwaUADEBcfjKgBIgJiAOXxlQAsQExOErA0qAmIA4fGVACRATEIevDCgBYgLi8JUBJUBMQBy+MqAEiAmIw/8DonqrBuQtX8UAAAAASUVORK5CYII="/>
+</defs>
+</svg>

package/src/assets/img/header/preview.svg

@@ -0,0 +1,9 @@
+<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="27" height="25" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_433_6403" transform="translate(-0.00322061) scale(0.0201288 0.0217391)"/>
+</pattern>
+<image id="image0_433_6403" width="50" height="46" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

package/src/assets/img/header/redo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1677657356301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2121" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M398.09 256h356.66l-69.41-69.41c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l124.03 124.03c12.5 12.5 12.5 32.75 0 45.25L730.59 434.66c-6.25 6.25-14.44 9.38-22.62 9.38s-16.38-3.12-22.62-9.38c-12.5-12.5-12.5-32.75 0-45.25l69.4-69.41H398.09c-130.66 0-236.97 100.48-236.97 224 0 123.5 106.31 224 236.97 224h327.42c17.67 0 32 14.31 32 32s-14.33 32-32 32H398.09C232.12 832 97.12 702.81 97.12 544c0-158.8 135-288 300.97-288z" fill="#333333" p-id="2122"></path></svg>

package/src/assets/img/header/undo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1677657350855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1976" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M625.91 256H269.25l69.41-69.41c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L169.38 265.38c-12.5 12.5-12.5 32.75 0 45.25l124.03 124.03c6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38c12.5-12.5 12.5-32.75 0-45.25L269.25 320h356.66c130.66 0 236.97 100.48 236.97 224 0 123.5-106.31 224-236.97 224H298.48c-17.67 0-32 14.31-32 32s14.33 32 32 32H625.9c165.97 0 300.97-129.19 300.97-288 0.01-158.8-134.99-288-300.96-288z" fill="#333333" p-id="1977"></path></svg>

package/src/assets/img/tool/all-select.svg

@@ -0,0 +1,9 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 626416">
+<g id="Group 1635092001">
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M4.875 3.375C4.32272 3.375 3.875 3.82272 3.875 4.375V19C3.875 19.5523 4.32272 20 4.875 20H19.5C20.0523 20 20.5 19.5523 20.5 19V14.0625C19.1883 14.0625 18.125 12.9992 18.125 11.6875C18.125 10.3758 19.1883 9.3125 20.5 9.3125V4.375C20.5 3.82272 20.0523 3.375 19.5 3.375H4.875Z" fill="#C79156"/>
+<circle id="Ellipse 45" cx="12.1875" cy="3.375" r="2.375" fill="#C79156"/>
+<circle id="Ellipse 46" cx="3.875" cy="11.6875" r="2.375" fill="#C79156"/>
+</g>
+</g>
+</svg>

package/src/assets/img/tool/all.svg

@@ -0,0 +1,9 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 626416">
+<g id="Group 1635092001">
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M4.875 3.375C4.32272 3.375 3.875 3.82272 3.875 4.375V19C3.875 19.5523 4.32272 20 4.875 20H19.5C20.0523 20 20.5 19.5523 20.5 19V14.0625C19.1883 14.0625 18.125 12.9992 18.125 11.6875C18.125 10.3758 19.1883 9.3125 20.5 9.3125V4.375C20.5 3.82272 20.0523 3.375 19.5 3.375H4.875Z" fill="#828690"/>
+<circle id="Ellipse 45" cx="12.1875" cy="3.375" r="2.375" fill="#828690"/>
+<circle id="Ellipse 46" cx="3.875" cy="11.6875" r="2.375" fill="#828690"/>
+</g>
+</g>
+</svg>

package/src/assets/img/tool/collect.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 626416">
+<rect width="16" height="16" rx="2" fill="#C79156"/>
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M8 13C8 13 4.23831 10.1544 2.83334 8.55556C2.31511 7.96583 2 7.18706 2 6.33333C2 4.49238 3.46525 3 5.27273 3C6.41107 3 7.41368 3.59195 8 4.49011C8.58632 3.59195 9.58893 3 10.7273 3C12.5348 3 14 4.49238 14 6.33333C14 7.18706 13.6849 7.96583 13.1667 8.55556C11.7617 10.1544 8 13 8 13Z" fill="white"/>
+</g>
+</svg>

package/src/assets/img/tool/collection-select.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16C10 16 3.98132 11.447 1.73337 8.88889C0.904205 7.94532 0.400024 6.6993 0.400024 5.33333C0.400024 2.38781 2.74442 0 5.63639 0C7.45775 0 9.06191 0.94712 10 2.38418C10.9381 0.94712 12.5423 0 14.3637 0C17.2556 0 19.6 2.38781 19.6 5.33333C19.6 6.6993 19.0958 7.94532 18.2667 8.88889C16.0187 11.447 10 16 10 16Z" fill="#C79156"/>
+</svg>

package/src/assets/img/tool/collection-tag.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="collection-tag">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10.9999 19C10.9999 19 4.9812 14.447 2.73324 11.8889C1.90408 10.9453 1.3999 9.6993 1.3999 8.33333C1.3999 5.38781 3.7443 3 6.63627 3C8.45762 3 10.0618 3.94712 10.9999 5.38418C11.938 3.94712 13.5422 3 15.3635 3C18.2555 3 20.5999 5.38781 20.5999 8.33333C20.5999 9.6993 20.0957 10.9453 19.2666 11.8889C17.0186 14.447 10.9999 19 10.9999 19Z" fill="#828690"/>
+</g>
+</svg>

package/src/assets/img/tool/info.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="2" fill="#1A1A1A"/>
+<path d="M8 2.75C9.4845 2.789 10.7209 3.30263 11.7091 4.29088C12.6974 5.27912 13.211 6.5155 13.25 8C13.211 9.4845 12.6974 10.7209 11.7091 11.7091C10.7209 12.6974 9.4845 13.211 8 13.25C6.5155 13.211 5.27912 12.6974 4.29088 11.7091C3.30263 10.7209 2.789 9.4845 2.75 8C2.789 6.5155 3.30263 5.27912 4.29088 4.29088C5.27912 3.30263 6.5155 2.789 8 2.75ZM8.78525 5.97275C8.9885 5.97275 9.1565 5.91225 9.28925 5.79125C9.422 5.67025 9.48838 5.50812 9.48837 5.30487C9.48837 5.10162 9.422 4.9395 9.28925 4.8185C9.1565 4.6975 8.9905 4.637 8.79125 4.637C8.592 4.637 8.426 4.6975 8.29325 4.8185C8.1605 4.9395 8.09412 5.10162 8.09412 5.30487C8.09412 5.50812 8.1605 5.67025 8.29325 5.79125C8.426 5.91225 8.59012 5.97275 8.78562 5.97275H8.78525ZM8.92587 10.1915C8.92587 10.1445 8.92975 10.082 8.9375 10.004C8.94525 9.926 8.94525 9.85175 8.9375 9.78125L8.3165 10.496C8.254 10.5662 8.1895 10.621 8.123 10.6602C8.0565 10.6995 7.99988 10.7112 7.95312 10.6955C7.88287 10.6642 7.85162 10.6095 7.85938 10.5312L8.89062 7.28525C8.92963 7.0665 8.8945 6.879 8.78525 6.72275C8.676 6.5665 8.50025 6.47275 8.258 6.4415C7.9845 6.44925 7.68563 6.5645 7.36137 6.78725C7.03713 7.01 6.75388 7.29325 6.51163 7.637V7.81288C6.50388 7.89113 6.50388 7.96537 6.51163 8.03562L7.13263 7.32088C7.19513 7.25063 7.25962 7.19588 7.32613 7.15663C7.39262 7.11738 7.44537 7.10562 7.48438 7.12138C7.56262 7.16037 7.59 7.22287 7.5665 7.30888L6.54688 10.5433C6.49213 10.7385 6.5195 10.9124 6.629 11.0649C6.7385 11.2174 6.92987 11.3209 7.20312 11.3754C7.59387 11.3676 7.922 11.2544 8.1875 11.0356C8.453 10.8169 8.69912 10.5356 8.92587 10.1919V10.1915Z" fill="white"/>
+</svg>

package/src/assets/img/tool/union.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="2" fill="#1A1A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 13C8 13 4.23831 10.1544 2.83334 8.55556C2.31511 7.96583 2 7.18706 2 6.33333C2 4.49238 3.46525 3 5.27273 3C6.41107 3 7.41368 3.59195 8 4.49011C8.58632 3.59195 9.58893 3 10.7273 3C12.5348 3 14 4.49238 14 6.33333C14 7.18706 13.6849 7.96583 13.1667 8.55556C11.7617 10.1544 8 13 8 13Z" fill="white"/>
+</svg>

package/src/components/ComponentTreeFavorites/components/List.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="component-list-favorites__tags">
+    <div
+      v-for="item in tags"
+      class="tag-item"
+      @click="scrollView(item)"
+      :key="item"
+    >
+      {{ item }}
+    </div>
+  </div>
+  <div class="component-list-favorites" ref="listRef">
+    <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)"
+            :data-id="item.title"
+          >
+            <template #title>
+              <el-icon color="#999999" :size="16">
+                <CaretBottom v-if="activeNames.includes(item.title)" />
+                <CaretRight v-else />
+              </el-icon>
+              {{ item.title }}
+            </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>
+                  <!-- <el-icon color="#999999" :size="16">
+                    <CaretBottom v-if="activeNames.includes(subItem.title)" />
+                    <CaretRight v-else />
+                  </el-icon> -->
+                  {{ subItem.title }}
+                </template>
+                <div v-if="subItem.list" class="component-group">
+                  <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 class="tip-box">
+                        <img
+                          :src="InfoIcon"
+                          class="icon"
+                          alt=""
+                          @mousedown.stop.prevent=""
+                          @click.stop.prevent="viewTips(element)"
+                        />
+                        <img
+                          :src="
+                            isFavorite(element?.name)
+                              ? CollectSelectIcon
+                              : CollectIcon
+                          "
+                          class="icon"
+                          alt=""
+                          @mousedown.stop.prevent=""
+                          @click.stop.prevent="handleCollect(element)"
+                        />
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </el-collapse-item>
+            </template>
+          </el-collapse-item>
+        </template>
+      </el-collapse>
+    </template>
+    <template v-else>
+      <div class="notice">组件库为空</div>
+    </template>
+    <Tips v-model="dialog" :tipsInfo="tipsInfo" :width="776" />
+  </div>
+  <div :class="['drop-area', coverIframe ? 'cover-iframe' : '']"></div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, reactive, inject, Ref, computed, onMounted } from 'vue';
+import { ComponentTreeItem, ComponentTree } from '@jt/low-code-core';
+import Tips from './Tips.vue';
+import CollectSelectIcon from '../../../assets/img/tool/collect.svg';
+import CollectIcon from '../../../assets/img/tool/union.svg';
+import InfoIcon from '../../../assets/img/tool/info.svg';
+import { CaretBottom, CaretRight } from '@jt/icons-vue';
+const props = withDefaults(
+  defineProps<{
+    componentTree?: ComponentTree[];
+    readOnly?: boolean;
+    favorites: string[];
+  }>(),
+  {
+    readOnly: false,
+    favorites: [] as any,
+  }
+);
+
+const emits = defineEmits(['dragEnd', 'clickItem', 'collect']);
+// 默认全部展开
+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事件替代拖拽事件
+ */
+const listRef = ref();
+// 记录鼠标是否移动
+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);
+};
+const dialog = ref<boolean>(false);
+const tipsInfo = ref();
+function viewTips(item) {
+  tipsInfo.value = item;
+  dialog.value = true;
+}
+const tags = computed(() => {
+  return props.componentTree.map(it => it.title);
+});
+
+const isFavorite = val => {
+  if (!props.favorites) {
+    return false;
+  }
+  console.log(typeof props.favorites);
+  return props.favorites.includes(val);
+};
+
+const scrollView = (item: string) => {
+  const el = document.querySelector(`[data-id="${item}"]`);
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' });
+  }
+};
+// 收藏/取消收藏
+const handleCollect = item => {
+  emits('collect', item);
+};
+</script>
+
+<style lang="scss" scoped>
+.component-list-favorites__tags {
+  display: flex;
+  column-gap: 4px;
+  flex-wrap: wrap;
+  padding-top: 12px;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 2;
+
+  .tag-item {
+    padding: 5px 10px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    background: #fff;
+    color: #4d5260;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    &:hover {
+      background: #c79156;
+      border: 1px solid #c79156;
+      color: #fff;
+    }
+  }
+}
+.component-list-favorites {
+  display: flex;
+  flex-basis: 100px;
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+
+  &.is_sticky {
+    // padding-top: ;
+  }
+
+  .notice {
+    text-align: center;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 50px 15px 0;
+  }
+  .component-group {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+  }
+  .component-item {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 10px;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+      .tip-box {
+        display: block;
+      }
+    }
+    .tip-box {
+      position: absolute;
+      background: rgba(26, 26, 26, 0.4);
+      width: 100px;
+      height: 100px;
+      left: 0;
+      top: 0;
+      box-sizing: border-box;
+      padding-top: 9px;
+      padding-right: 6px;
+      display: none;
+      border-radius: 4px;
+      .icon {
+        float: right;
+        margin-left: 4px;
+        position: relative;
+        z-index: 1;
+        cursor: pointer;
+      }
+    }
+    .component-img {
+      box-sizing: border-box;
+      width: 100px;
+      min-width: 100px;
+      height: 100px;
+      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: 12px;
+      line-height: 24px;
+      color: #828690;
+    }
+  }
+}
+
+.drop-area {
+  background: transparent;
+}
+// 显示在最高层
+.cover-iframe {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+}
+</style>
+<style lang="scss">
+.component-list-favorites {
+  .el-collapse {
+    margin-top: 20px;
+    border: none;
+    .el-collapse-item__arrow {
+      display: none;
+    }
+    .el-collapse-item__header {
+      color: #282f40;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 120%;
+      height: auto;
+      margin-bottom: 20px;
+      border: none;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      path {
+        fill: #999 !important;
+      }
+    }
+    .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: 14px;
+      line-height: 24px;
+      font-weight: 400;
+      height: auto;
+      color: #282f40;
+      margin-bottom: 4px;
+      border: none;
+    }
+    .el-collapse-item__content {
+      padding-left: 0px !important;
+    }
+  }
+}
+</style>