解决跨页面粘贴，初始组件未展示问题

src/packages/index.ts

@@ -1,23 +1,37 @@
-import { ChartList } from '@/packages/components/Charts/index'
+import { ChartList } from '@/packages/components/Charts/index';
-import { DecorateList } from '@/packages/components/Decorates/index'
+import { DecorateList } from '@/packages/components/Decorates/index';
-import { InformationList } from '@/packages/components/Informations/index'
+import { InformationList } from '@/packages/components/Informations/index';
-import { TableList } from '@/packages/components/Tables/index'
+import { TableList } from '@/packages/components/Tables/index';
-import { PhotoList } from '@/packages/components/Photos/index'
+import { PhotoList } from '@/packages/components/Photos/index';
-import { IconList } from '@/packages/components/Icons/index'
+import { IconList } from '@/packages/components/Icons/index';
-import { DiyList } from '@/packages/components/Diy/index'
+import { DiyList } from '@/packages/components/Diy/index';
-import { UnitsList } from '@/packages/components/Units/index'
+import { UnitsList } from '@/packages/components/Units/index';
-import { ZhiganList } from '@/packages/components/Zhigan/index'
+import { ZhiganList } from '@/packages/components/Zhigan/index';
-import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
+import {
+  PackagesCategoryEnum,
+  PackagesType,
+  ConfigType,
+  FetchComFlagType,
+} from '@/packages/index.d';
 
-const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
+const configModules: Record<string, { default: string }> = import.meta.glob(
-  eager: true
+  './components/**/config.vue',
-})
+  {
-const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
+    eager: true,
-  eager: true
+  },
-})
+);
-const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', {
+const indexModules: Record<string, { default: string }> = import.meta.glob(
-  eager: true
+  './components/**/index.vue',
-})
+  {
+    eager: true,
+  },
+);
+const imagesModules: Record<string, { default: string }> = import.meta.glob(
+  '../assets/images/chart/**',
+  {
+    eager: true,
+  },
+);
 
 // * 所有图表
 export let packagesList: PackagesType = {
@@ -30,33 +44,36 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.DIY]: DiyList,
   [PackagesCategoryEnum.UNITS]: UnitsList,
   [PackagesCategoryEnum.ZHIGAN]: ZhiganList,
-}
+};
 
 // 组件缓存, 可以大幅度提升组件加载速度
-const componentCacheMap = new Map<string, any>()
+const componentCacheMap = new Map<string, any>();
 const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
-  const key = packageName + categoryName + keyName
+  const key = packageName + categoryName + keyName;
   if (!componentCacheMap.has(key)) {
-    componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
+    componentCacheMap.set(
+      key,
+      import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`),
+    );
   }
-  return componentCacheMap.get(key)
+  return componentCacheMap.get(key);
-}
+};
 
 /**
  * * 获取目标组件配置信息
  * @param targetData
  */
 export const createComponent = async (targetData: ConfigType) => {
-  const { redirectComponent, category, key } = targetData
+  const { redirectComponent, category, key } = targetData;
   // redirectComponent 是给图片组件库和图标组件库使用的
   if (redirectComponent) {
-    const [packageName, categoryName, keyName] = redirectComponent.split('/')
+    const [packageName, categoryName, keyName] = redirectComponent.split('/');
-    const redirectChart = await loadConfig(packageName, categoryName, keyName)
+    const redirectChart = await loadConfig(packageName, categoryName, keyName);
-    return new redirectChart.default()
+    return new redirectChart.default();
   }
-  const chart = await loadConfig(targetData.package, category, key)
+  const chart = await loadConfig(targetData.package, category, key);
-  return new chart.default()
+  return new chart.default();
-}
+};
 
 /**
  * * 获取组件
@@ -64,52 +81,52 @@ export const createComponent = async (targetData: ConfigType) => {
  * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
  */
 const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
-  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
+  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules;
   for (const key in module) {
-    const urlSplit = key.split('/')
+    const urlSplit = key.split('/');
     if (urlSplit[urlSplit.length - 2] === chartName) {
-      return module[key]
+      return module[key];
     }
   }
-}
+};
 
 /**
  * * 获取展示组件
  * @param {ConfigType} dropData 配置项
  */
 export const fetchChartComponent = (dropData: ConfigType) => {
-  const { key } = dropData
+  const { key } = dropData;
-  return fetchComponent(key, FetchComFlagType.VIEW)?.default
+  return fetchComponent(key, FetchComFlagType.VIEW)?.default;
-}
+};
 
 /**
  * * 获取配置组件
  * @param {ConfigType} dropData 配置项
  */
 export const fetchConfigComponent = (dropData: ConfigType) => {
-  const { key } = dropData
+  const { key } = dropData;
-  return fetchComponent(key, FetchComFlagType.CONFIG)?.default
+  return fetchComponent(key, FetchComFlagType.CONFIG)?.default;
-}
+};
 
 /**
  * * 获取图片内容
  * @param {ConfigType} targetData 配置项
  */
 export const fetchImages = async (targetData?: ConfigType) => {
-  if (!targetData) return ''
+  if (!targetData) return '';
   // 正则判断图片是否为 url，是则直接返回该 url
-  if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
+  if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image;
   // 新数据动态处理
-  const { image } = targetData
+  const { image } = targetData;
   // 兼容旧数据
-  if (image.includes('@') || image.includes('base64')) return image
+  if (image.includes('@') || image.includes('base64')) return image;
 
-  const imageName = image.substring(image.lastIndexOf('/') + 1)
+  const imageName = image.substring(image.lastIndexOf('/') + 1);
   for (const key in imagesModules) {
-    const urlSplit = key.split('/')
+    const urlSplit = key.split('/');
     if (urlSplit[urlSplit.length - 1] === imageName) {
-      return imagesModules[key]?.default
+      return imagesModules[key]?.default;
     }
   }
-  return ''
+  return '';
-}
+};

src/store/modules/chartEditStore/chartEditStore.ts

@@ -587,52 +587,7 @@ export const useChartEditStore = defineStore({
         loadingError();
       }
     },
-    // 导入画布
-    setCopyData(data: any) {
-      try {
-        loadingStart();
-        const recordCharts = JSON.parse(data);
 
-        if (recordCharts === undefined) {
-          loadingFinish();
-          return;
-        }
-        const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
-          e = cloneDeep(e);
-          e.attr.x = this.getMousePosition.startX;
-          e.attr.y = this.getMousePosition.startY;
-          // 外层生成新 id
-          e.id = getUUID();
-          // 分组列表生成新 id
-          if (e.isGroup) {
-            (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
-              item.id = getUUID();
-            });
-          }
-
-          return e;
-        };
-        const isCut = recordCharts.type === HistoryActionTypeEnum.CUT;
-        const targetList = Array.isArray(recordCharts.charts)
-          ? recordCharts.charts
-          : [recordCharts.charts];
-        // 多项
-        targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
-          this.addComponentList(parseHandle(e), undefined, true);
-          // 剪切需删除原数据
-          if (isCut) {
-            this.setTargetSelectChart(e.id);
-            this.removeComponentList(undefined, true);
-          }
-        });
-        if (isCut) this.setRecordChart(undefined);
-        window['$message'].success('导入成功！');
-        loadingFinish();
-      } catch (value) {
-        window['$message'].error('导入失败，请检查数据是否正确！');
-        loadingError();
-      }
-    },
     // * 撤回/前进 目标处理
     setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
       // 处理画布

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -17,13 +17,24 @@
         @click="clickHandle(item)"
       >
         <div class="list-header">
-          <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
+          <mac-os-control-btn
+            class="list-header-control-btn"
+            :mini="true"
+            :disabled="true"
+          ></mac-os-control-btn>
           <n-text class="list-header-text" depth="3">
             <n-ellipsis>{{ item.title }}</n-ellipsis>
           </n-text>
         </div>
         <div class="list-center go-flex-center go-transition" draggable="true">
-          <GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
+          <GoIconify
+            v-if="item.icon"
+            class="list-img"
+            :icon="item.icon"
+            color="#999"
+            width="48"
+            style="height: auto"
+          />
           <chart-glob-image v-else class="list-img" :chartConfig="item" />
         </div>
         <div class="list-bottom">
@@ -34,7 +45,11 @@
         <!-- 遮罩 -->
         <div v-if="item.disabled" class="list-model"></div>
         <!-- 工具栏 -->
-        <div v-if="isShowTools(item)" class="list-tools go-transition" @click="deleteHandle(item, index)">
+        <div
+          v-if="isShowTools(item)"
+          class="list-tools go-transition"
+          @click="deleteHandle(item, index)"
+        >
           <n-button text type="default" color="#ffffff">
             <template #icon>
               <n-icon>
@@ -50,265 +65,277 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
+  import { PropType, watch, ref, Ref, computed, nextTick } from 'vue';
-import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
+  import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index';
-import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
+  import { ChartGlobImage } from '@/components/Pages/ChartGlobImage';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+  import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+  import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+  import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
-import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+  import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore';
-import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify, goDialog } from '@/utils'
+  import {
-import { DragKeyEnum } from '@/enums/editPageEnum'
+    componentInstall,
-import { createComponent } from '@/packages'
+    loadingStart,
-import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
+    loadingFinish,
-import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
+    loadingError,
-import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
+    JSONStringify,
-import { GoIconify } from '@/components/GoIconify'
+    goDialog,
-import { icon } from '@/plugins'
+  } from '@/utils';
+  import { DragKeyEnum } from '@/enums/editPageEnum';
+  import { createComponent } from '@/packages';
+  import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d';
+  import { ChatCategoryEnum } from '@/packages/components/Photos/index.d';
+  import { fetchConfigComponent, fetchChartComponent } from '@/packages/index';
+  import { GoIconify } from '@/components/GoIconify';
+  import { icon } from '@/plugins';
 
-import omit from 'lodash/omit'
+  import omit from 'lodash/omit';
 
-const chartEditStore = useChartEditStore()
+  const chartEditStore = useChartEditStore();
-const { TrashIcon } = icon.ionicons5
+  const { TrashIcon } = icon.ionicons5;
 
-const emit = defineEmits(['deletePhoto'])
+  const emit = defineEmits(['deletePhoto']);
-const props = defineProps({
+  const props = defineProps({
-  menuOptions: {
+    menuOptions: {
-    type: Array as PropType<ConfigType[]>,
+      type: Array as PropType<ConfigType[]>,
-    default: () => []
+      default: () => [],
-  }
+    },
-})
+  });
 
-const chartLayoutStore = useChartLayoutStore()
+  const chartLayoutStore = useChartLayoutStore();
-const contentChartsItemBoxRef = ref()
+  const contentChartsItemBoxRef = ref();
 
-// 判断工具栏展示
+  // 判断工具栏展示
-const isShowTools = (item: ConfigType) => {
+  const isShowTools = (item: ConfigType) => {
-  return !item.disabled && item.package === PackagesCategoryEnum.PHOTOS && item.category === ChatCategoryEnum.PRIVATE
+    return (
-}
+      !item.disabled &&
+      item.package === PackagesCategoryEnum.PHOTOS &&
+      item.category === ChatCategoryEnum.PRIVATE
+    );
+  };
 
-// 组件展示状态
+  // 组件展示状态
-const chartMode: Ref<ChartModeEnum> = computed(() => {
+  const chartMode: Ref<ChartModeEnum> = computed(() => {
-  return chartLayoutStore.getChartType
+    return chartLayoutStore.getChartType;
-})
+  });
 
-// 拖拽处理
+  // 拖拽处理
-const dragStartHandle = (e: DragEvent, item: ConfigType) => {
+  const dragStartHandle = (e: DragEvent, item: ConfigType) => {
-  if (item.disabled) return
+    if (item.disabled) return;
-  // 动态注册图表组件
-  componentInstall(item.chartKey, fetchChartComponent(item))
-  componentInstall(item.conKey, fetchConfigComponent(item))
-  // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
-  // 修改状态
-  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
-}
-
-// 拖拽结束
-const dragendHandle = () => {
-  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
-}
-
-// 双击添加
-const dblclickHandle = async (item: ConfigType) => {
-  if (item.disabled) return
-  try {
-    loadingStart()
     // 动态注册图表组件
-    componentInstall(item.chartKey, fetchChartComponent(item))
+    componentInstall(item.chartKey, fetchChartComponent(item));
-    componentInstall(item.conKey, fetchConfigComponent(item))
+    componentInstall(item.conKey, fetchConfigComponent(item));
-    // 创建新图表组件
+    // 将配置项绑定到拖拽属性上
-    let newComponent: CreateComponentType = await createComponent(item)
+    e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])));
-    if (item.redirectComponent) {
+    // 修改状态
-      item.dataset && (newComponent.option.dataset = item.dataset)
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true);
-      newComponent.chartConfig.title = item.title
+  };
-      newComponent.chartConfig.chartFrame = item.chartFrame
-    }
-    // 添加
-    chartEditStore.addComponentList(newComponent, false, true)
-    // 选中
-    chartEditStore.setTargetSelectChart(newComponent.id)
-    loadingFinish()
-  } catch (error) {
-    loadingError()
-    console.log('chartItemBox-index')
-    window['$message'].warning(`图表正在研发中, 敬请期待...`)
-  }
-}
 
-// 单击事件
+  // 拖拽结束
-const clickHandle = (item: ConfigType) => {
+  const dragendHandle = () => {
-  item?.configEvents?.addHandle(item)
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false);
-}
+  };
 
-const deleteHandle = (item: ConfigType, index: number) => {
+  // 双击添加
-  goDialog({
+  const dblclickHandle = async (item: ConfigType) => {
-    message: '是否删除此图片？',
+    console.log('双击添加', item);
-    transformOrigin: 'center',
+    if (item.disabled) return;
-    onPositiveCallback: () => {
+    try {
-      const packagesStore = usePackagesStore()
+      loadingStart();
-      emit('deletePhoto', item, index)
+      // 动态注册图表组件
-      packagesStore.deletePhotos(item, index)
+      componentInstall(item.chartKey, fetchChartComponent(item));
+      componentInstall(item.conKey, fetchConfigComponent(item));
+      // 创建新图表组件
+      let newComponent: CreateComponentType = await createComponent(item);
+      if (item.redirectComponent) {
+        item.dataset && (newComponent.option.dataset = item.dataset);
+        newComponent.chartConfig.title = item.title;
+        newComponent.chartConfig.chartFrame = item.chartFrame;
+      }
+      // 添加
+      chartEditStore.addComponentList(newComponent, false, true);
+      // 选中
+      chartEditStore.setTargetSelectChart(newComponent.id);
+      loadingFinish();
+    } catch (error) {
+      loadingError();
+      console.log('chartItemBox-index');
+      window['$message'].warning(`图表正在研发中, 敬请期待...`);
     }
-  })
+  };
-}
 
-watch(
+  // 单击事件
-  () => chartMode.value,
+  const clickHandle = (item: ConfigType) => {
-  (newValue: ChartModeEnum) => {
+    item?.configEvents?.addHandle(item);
-    if (newValue === ChartModeEnum.DOUBLE) {
+  };
-      nextTick(() => {
+
-        contentChartsItemBoxRef.value.classList.add('miniAnimation')
+  const deleteHandle = (item: ConfigType, index: number) => {
-      })
+    goDialog({
-    }
+      message: '是否删除此图片？',
-  }
+      transformOrigin: 'center',
-)
+      onPositiveCallback: () => {
+        const packagesStore = usePackagesStore();
+        emit('deletePhoto', item, index);
+        packagesStore.deletePhotos(item, index);
+      },
+    });
+  };
+
+  watch(
+    () => chartMode.value,
+    (newValue: ChartModeEnum) => {
+      if (newValue === ChartModeEnum.DOUBLE) {
+        nextTick(() => {
+          contentChartsItemBoxRef.value.classList.add('miniAnimation');
+        });
+      }
+    },
+  );
 </script>
 
 <style lang="scss" scoped>
-/* 列表项宽度 */
+  /* 列表项宽度 */
-$itemWidth: 100%;
+  $itemWidth: 100%;
-$maxItemWidth: 180px;
+  $maxItemWidth: 180px;
-$halfItemWidth: 46%;
+  $halfItemWidth: 46%;
-/* 内容高度 */
+  /* 内容高度 */
-$centerHeight: 100px;
+  $centerHeight: 100px;
-$halfCenterHeight: 50px;
+  $halfCenterHeight: 50px;
 
-@include go('content-charts-item-animation-patch') {
+  @include go('content-charts-item-animation-patch') {
-  padding: 10px;
+    padding: 10px;
-}
+  }
 
-@include go('content-charts-item-box') {
+  @include go('content-charts-item-box') {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  justify-content: space-between;
+    justify-content: space-between;
-  gap: 9px;
+    gap: 9px;
-  transition: all 0.7s linear;
+    transition: all 0.7s linear;
-  .item-box {
+    .item-box {
-    position: relative;
+      position: relative;
-    margin: 0;
+      margin: 0;
-    width: $itemWidth;
+      width: $itemWidth;
-    overflow: hidden;
+      overflow: hidden;
-    border-radius: 6px;
+      border-radius: 6px;
-    cursor: pointer;
+      cursor: pointer;
-    border: 1px solid rgba(0, 0, 0, 0);
+      border: 1px solid rgba(0, 0, 0, 0);
-    @include fetch-bg-color('background-color2');
+      @include fetch-bg-color('background-color2');
-    &:hover {
+      &:hover {
-      @include hover-border-color('background-color4');
+        @include hover-border-color('background-color4');
-      .list-img {
+        .list-img {
-        transform: scale(1.08);
+          transform: scale(1.08);
+        }
+        .list-tools {
+          opacity: 1;
+        }
+      }
+      .list-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 2px 15px;
+        @include fetch-bg-color('background-color3');
+        &-text {
+          font-size: 12px;
+          margin-left: 8px;
+          user-select: none;
+        }
+      }
+      .list-center {
+        padding: 6px 0;
+        height: $centerHeight;
+        overflow: hidden;
+        .list-img {
+          height: 100px;
+          max-width: 140px;
+          border-radius: 6px;
+          object-fit: contain;
+          @extend .go-transition;
+        }
+      }
+      .list-bottom {
+        display: none;
+        .list-bottom-text {
+          font-size: 12px;
+          padding-left: 5px;
+        }
+      }
+      .list-model {
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0);
       }
       .list-tools {
-        opacity: 1;
+        position: absolute;
-      }
+        display: flex;
-    }
+        justify-content: center;
-    .list-header {
+        align-items: center;
-      display: flex;
+        bottom: 0;
-      align-items: center;
+        left: 0;
-      justify-content: space-between;
+        margin: 0 4px 2px;
-      padding: 2px 15px;
+        height: 26px;
-      @include fetch-bg-color('background-color3');
+        width: calc(100% - 8px);
-      &-text {
+        opacity: 0;
-        font-size: 12px;
-        margin-left: 8px;
-        user-select: none;
-      }
-    }
-    .list-center {
-      padding: 6px 0;
-      height: $centerHeight;
-      overflow: hidden;
-      .list-img {
-        height: 100px;
-        max-width: 140px;
         border-radius: 6px;
-        object-fit: contain;
+        backdrop-filter: blur(20px);
+        background-color: rgba(255, 255, 255, 0.15);
+        &:hover {
+          background-color: rgba(232, 128, 128, 0.7);
+        }
+      }
+    }
+    &.single {
+      .item-box {
         @extend .go-transition;
       }
     }
-    .list-bottom {
+    &.double {
-      display: none;
+      .list-header {
-      .list-bottom-text {
+        padding: 2px 5px;
-        font-size: 12px;
+        .list-header-text {
-        padding-left: 5px;
+          display: none;
+        }
+        .list-header-control-btn {
+          transform: scale(0.7);
+        }
       }
-    }
+      .item-box {
-    .list-model {
+        width: $halfItemWidth;
-      z-index: 1;
+        max-width: $maxItemWidth;
-      position: absolute;
+        .list-img {
-      top: 0;
+          max-width: 76px;
-      left: 0;
+        }
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0);
-    }
-    .list-tools {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      bottom: 0;
-      left: 0;
-      margin: 0 4px 2px;
-      height: 26px;
-      width: calc(100% - 8px);
-      opacity: 0;
-      border-radius: 6px;
-      backdrop-filter: blur(20px);
-      background-color: rgba(255, 255, 255, 0.15);
-      &:hover {
-        background-color: rgba(232, 128, 128, 0.7);
       }
-    }
+      .list-center {
-  }
-  &.single {
-    .item-box {
-      @extend .go-transition;
-    }
-  }
-  &.double {
-    .list-header {
-      padding: 2px 5px;
-      .list-header-text {
-        display: none;
-      }
-      .list-header-control-btn {
-        transform: scale(0.7);
-      }
-    }
-    .item-box {
-      width: $halfItemWidth;
-      max-width: $maxItemWidth;
-      .list-img {
-        max-width: 76px;
-      }
-    }
-    .list-center {
-      height: $halfCenterHeight;
-      padding-bottom: 0px;
-      .list-img {
         height: $halfCenterHeight;
-        width: auto;
+        padding-bottom: 0px;
-        transition: all 0.2s;
+        .list-img {
-        object-fit: contain;
+          height: $halfCenterHeight;
+          width: auto;
+          transition: all 0.2s;
+          object-fit: contain;
+        }
+      }
+      .list-bottom {
+        display: block;
       }
     }
-    .list-bottom {
+    /* 缩小展示 */
-      display: block;
+    @keyframes miniAnimation {
+      from {
+        width: $itemWidth * 2;
+      }
+      to {
+        width: $itemWidth;
+      }
+    }
+    &.miniAnimation {
+      animation: miniAnimation 0.5s;
     }
   }
-  /* 缩小展示 */
-  @keyframes miniAnimation {
-    from {
-      width: $itemWidth * 2;
-    }
-    to {
-      width: $itemWidth;
-    }
-  }
-  &.miniAnimation {
-    animation: miniAnimation 0.5s;
-  }
-}
 </style>

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -131,6 +131,11 @@
   import { BtnListType, TypeEnum } from './index.d';
   import { icon } from '@/plugins';
   import { MonacoEditor } from '@/components/Pages/MonacoEditor';
+  import { getUUID, loadingStart, loadingFinish, loadingError, componentInstall } from '@/utils';
+  import { fetchConfigComponent, fetchChartComponent } from '@/packages/index';
+  import cloneDeep from 'lodash/cloneDeep';
+  import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
+  import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d';
 
   const {
     DownloadIcon,
@@ -243,9 +248,69 @@
   };
   // 导入画布
   const saveCopyData = () => {
-    chartEditStore.setCopyData(copyValue.value);
+    setCopyData(copyValue.value);
     closeModel();
   };
+  // 导入画布
+  const setCopyData = (data: any) => {
+    try {
+      loadingStart();
+      const recordCharts = JSON.parse(data);
+
+      if (recordCharts === undefined) {
+        loadingFinish();
+        return;
+      }
+      const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
+        e = cloneDeep(e);
+        e.attr.x = chartEditStore.getMousePosition.startX;
+        e.attr.y = chartEditStore.getMousePosition.startY;
+        // 外层生成新 id
+        e.id = getUUID();
+        // 分组列表生成新 id
+        if (e.isGroup) {
+          (e as CreateComponentGroupType).groupList.forEach(async (item: CreateComponentType) => {
+            item.id = getUUID();
+          });
+        }
+
+        return e;
+      };
+      const createComponentInstall = (e) => {
+        if (e.isGroup) {
+          // 分组
+          e.groupList.forEach(async (item) => {
+            // // 动态注册图表组件
+            componentInstall(item.chartConfig.chartKey, fetchChartComponent(item.chartConfig));
+            componentInstall(item.chartConfig.conKey, fetchConfigComponent(item.chartConfig));
+          });
+        } else {
+          componentInstall(e.chartConfig.chartKey, fetchChartComponent(e.chartConfig));
+          componentInstall(e.chartConfig.conKey, fetchConfigComponent(e.chartConfig));
+        }
+      };
+      const isCut = recordCharts.type === HistoryActionTypeEnum.CUT;
+      const targetList = Array.isArray(recordCharts.charts)
+        ? recordCharts.charts
+        : [recordCharts.charts];
+      // 多项
+      targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
+        createComponentInstall(e);
+        chartEditStore.addComponentList(parseHandle(e), undefined, true);
+        // 剪切需删除原数据
+        if (isCut) {
+          chartEditStore.setTargetSelectChart(e.id);
+          chartEditStore.removeComponentList(undefined, true);
+        }
+      });
+      if (isCut) chartEditStore.setRecordChart(undefined);
+      window['$message'].success('导入成功！');
+      loadingFinish();
+    } catch (value) {
+      window['$message'].error('导入失败，请检查数据是否正确！');
+      loadingError();
+    }
+  };
   // 配置列表
   const btnList: BtnListType[] = [
     {