Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

package.json

@@ -72,40 +72,61 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@babel/types": "^7.23.9",
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/state": "^6.5.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.36.2",
     "@iconify/iconify": "^3.1.1",
     "@logicflow/core": "^1.2.18",
     "@logicflow/extension": "^1.2.19",
     "@microsoft/signalr": "^8.0.0",
+    "@shikijs/monaco": "^1.1.6",
+    "@turf/turf": "^7.1.0",
     "@vben/hooks": "workspace:*",
+    "@volar/cdn": "~1.11.1",
+    "@volar/monaco": "~1.11.1",
+    "@volar/typescript": "~1.11.1",
+    "@vue/language-service": "1.9.0-alpha.3",
     "@vue/shared": "^3.4.5",
     "@vueuse/core": "^10.7.1",
     "@zxcvbn-ts/core": "^3.0.4",
-    "ant-design-vue": "^4.0.8",
     "animate.css": "^4.1.1",
+    "ant-design-vue": "^4.0.8",
     "axios": "^1.6.4",
-    "color": "^4.2.3",
     "codemirror": "^5.65.16",
+    "color": "^4.2.3",
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
-    "driver.js": "^1.3.1",
     "dom-helpers": "^5.2.1",
+    "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^2.6.0",
     "exceljs": "^4.4.0",
+    "fflate": "^0.8.2",
     "gsap": "^3.11.3",
-    "js-md5": "^0.8.3",
+    "hash-sum": "^2.0.0",
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
     "iconify-icon": "^1.0.8",
-    "lodash-es": "^4.17.21",
+    "js-base64": "3.7.7",
+    "js-md5": "^0.8.3",
+    "jszip": "^3.10.1",
     "keymaster": "^1.6.2",
+    "lodash-es": "^4.17.21",
+    "mars3d": "~3.8.8",
+    "mars3d-cesium": "~1.124.0",
     "mockjs": "^1.1.0",
-    "nprogress": "^0.2.0",
+    "monaco-editor": "^0.33.0",
+    "monaco-editor-core": "^0.46.0",
     "naive-ui": "2.34.3",
+    "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
@@ -113,52 +134,32 @@
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "resize-observer-polyfill": "^1.5.1",
-    "three": "^0.145.0",
     "screenfull": "^6.0.1",
+    "shiki": "^1.1.6",
     "showdown": "^2.1.0",
+    "shpjs": "^6.1.0",
     "sortablejs": "^1.15.1",
+    "sucrase": "^3.35.0",
+    "three": "^0.145.0",
     "tinymce": "^5.10.9",
     "unocss": "0.58.3",
     "uuid": "^9.0.1",
     "vditor": "^3.9.8",
     "vue": "3.3.4",
+    "vue-clipboard3": "^2.0.0",
+    "vue-codemirror": "^6.1.1",
     "vue-color-kit": "^1.0.6",
     "vue-i18n": "^9.8.0",
     "vue-json-pretty": "^2.3.0",
     "vue-router": "^4.2.5",
-    "vue3-lazyload": "^0.2.5-beta",
     "vue-types": "^5.1.1",
+    "vue3-lazyload": "^0.2.5-beta",
     "vue3-sfc-loader": "^0.9.5",
     "vue3-sketch-ruler": "^1.3.3",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.1.0",
     "xe-utils": "^3.5.14",
-    "xlsx": "^0.18.5",
+    "xlsx": "^0.18.5"
-    "jszip":"^3.10.1",
-    "shpjs":"^6.1.0",
-    "js-base64":"3.7.7",
-    "monaco-editor": "^0.33.0",
-    "mars3d": "~3.8.8",
-    "@turf/turf": "^7.1.0",
-    "mars3d-cesium": "~1.124.0",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/language": "^6.10.8",
-    "@codemirror/state": "^6.5.1",
-    "@codemirror/view": "^6.36.2",
-    "@codemirror/basic-setup": "^0.20.0",
-    "vue-codemirror": "^6.1.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "monaco-editor-core": "^0.46.0",
-    "fflate": "^0.8.2",
-    "@volar/cdn": "~1.11.1",
-    "@volar/monaco": "~1.11.1",
-    "@volar/typescript": "~1.11.1",
-    "sucrase": "^3.35.0",
-    "hash-sum": "^2.0.0",
-    "@vue/language-service": "1.9.0-alpha.3",
-    "shiki": "^1.1.6",
-    "@shikijs/monaco": "^1.1.6",
-    "@babel/types": "^7.23.9"
   },
   "devDependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
@@ -177,35 +178,35 @@
     "@types/qs": "^6.9.11",
     "@types/showdown": "^2.0.6",
     "@types/sortablejs": "^1.15.7",
-    "@vicons/carbon": "^0.12.0",
-    "@vicons/ionicons5": "~0.11.0",
     "@vben/eslint-config": "workspace:*",
     "@vben/stylelint-config": "workspace:*",
     "@vben/ts-config": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/vite-config": "workspace:*",
+    "@vicons/carbon": "^0.12.0",
+    "@vicons/ionicons5": "~0.11.0",
     "@vue/compiler-sfc": "^3.4.5",
     "@vue/test-utils": "^2.4.3",
     "cross-env": "^7.0.3",
     "cz-git": "^1.8.0",
     "czg": "^1.8.0",
     "husky": "^8.0.3",
-    "lodash": "~4.17.21",
     "lint-staged": "15.2.0",
+    "lodash": "~4.17.21",
     "prettier": "^3.1.1",
     "prettier-plugin-packagejson": "^2.4.8",
     "rimraf": "^5.0.5",
-    "turbo": "^1.11.3",
     "sass": "^1.49.11",
     "sass-loader": "^12.6.0",
+    "turbo": "^1.11.3",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
     "vite": "^4.2.0",
     "vite-plugin-mars3d": "^3.1.3",
     "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vue-echarts": "^6.0.2",
-    "vue-tsc": "^1.8.27",
+    "vue-tsc": "^1.8.27"
-    "vite-plugin-monaco-editor": "^1.1.0"
   },
   "packageManager": "pnpm@8.10.0",
   "engines": {

src/assets/images/chart/zhigan/component/lowerLeft.svg

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="28px" viewBox="0 0 26 28" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-1">
-            <stop stop-color="#00D586" offset="0%"></stop>
-            <stop stop-color="#00AB4E" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="6.17106015%" y1="0%" x2="67.7872653%" y2="117.560409%" id="linearGradient-2">
-            <stop stop-color="#007343" offset="0%"></stop>
-            <stop stop-color="#89E5A1" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1870, -733)">
-            <g id="可视化" transform="translate(-0.5, -1)">
-                <g id="模块" transform="translate(46, 88)">
-                    <g id="标题模块--右侧1" transform="translate(1450, 285)">
-                        <g id="底部背景" transform="translate(0, 0)">
-                            <g id="边框"
-                                transform="translate(199.8663, 194.0447) scale(-1, 1) translate(-199.8663, -194.0447)">
-                                <g id="编组-22" transform="translate(0, 361.9394)">
-                                    <polygon id="路径-11" fill="url(#linearGradient-1)"
-                                        transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
-                                        points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"></polygon>
-                                    <polygon id="装饰线段-" fill="url(#linearGradient-2)" fill-rule="nonzero"
-                                        points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14">
-                                    </polygon>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/packages/components/Icons/Default/Icon/index.vue

@@ -28,7 +28,6 @@
       required: true,
     },
   });
-  console.log(props.chartConfig.option);
   const { w, h } = toRefs(props.chartConfig.attr);
   const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
   // 单击交互

src/packages/components/Zhigan/Zhigan/GeneralHead/svg/title.vue

@@ -3,7 +3,7 @@
     <svg
       :width="props.w"
       :height="props.h"
-      :viewBox="`0 0 ${props.w} ${props.h}`"
+      viewBox="0 0 400 40"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"

src/packages/components/Zhigan/Zhigan/LowerLeft/config.ts

@@ -5,7 +5,8 @@ import { chartInitConfig } from '@/settings/designSetting'
 import { LowerLeftConfig } from './index'
 
 export const option = {
-  imageStyle: {
+  dataStyle: {
+    backgroud: '#FFFFFF00',
     imageWidth: 26,
     imageHeight: 28,
     bottom: 0,

src/packages/components/Zhigan/Zhigan/LowerLeft/config.vue

@@ -1,25 +1,32 @@
 <template>
   <CollapseItem name="图标设置" :expanded="true">
     <SettingItemBox name="属性设置">
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['rgb']"
+          v-model:value="optionData.dataStyle.backgroud"
+        ></n-color-picker>
+      </SettingItem>
       <SettingItem name="图标宽度">
         <n-input-number
-          v-model:value="optionData.imageStyle.imageWidth"
+          v-model:value="optionData.dataStyle.imageWidth"
           :min="0"
           size="small"
           placeholder="图标宽度"
         />
       </SettingItem>
-      <SettingItem name="图标高度">
+      <!-- <SettingItem name="图标高度">
         <n-input-number
-          v-model:value="optionData.imageStyle.imageHeight"
+          v-model:value="optionData.dataStyle.imageHeight"
           :min="0"
           size="small"
           placeholder="图标高度"
         />
-      </SettingItem>
+      </SettingItem> -->
       <SettingItem name="图标距离右侧的距离">
         <n-input-number
-          v-model:value="optionData.imageStyle.right"
+          v-model:value="optionData.dataStyle.right"
           :min="0"
           size="small"
           placeholder="高度"
@@ -27,7 +34,7 @@
       </SettingItem>
       <SettingItem name="图标距离底部的距离">
         <n-input-number
-          v-model:value="optionData.imageStyle.bottom"
+          v-model:value="optionData.dataStyle.bottom"
           :min="0"
           size="small"
           placeholder="宽度"

src/packages/components/Zhigan/Zhigan/LowerLeft/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="lowerLeft">
     <div class="image">
-      <n-image
+      <Icon :dataStyle="option.dataStyle" />
-        :width="option.imageStyle.imageWidth"
-        :height="option.imageStyle.imageHeight"
-        src="src/assets/images/chart/zhigan/component/lowerLeft.svg"
-      />
     </div>
   </div>
 </template>
@@ -16,6 +12,7 @@
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   import { useChartDataFetch } from '@/hooks';
+  import Icon from './svg/icon.vue';
 
   const props = defineProps({
     chartConfig: {
@@ -27,26 +24,20 @@
   const { w, h } = toRefs(props.chartConfig.attr);
 
   const option = reactive({
-    imageStyle: props.chartConfig.option.imageStyle,
+    dataStyle: props.chartConfig.option.dataStyle,
   });
 </script>
 
 <style lang="scss" scoped>
   .lowerLeft {
+    background: v-bind('`${option.dataStyle.backgroud}`');
     width: v-bind('`${w}px`');
     height: v-bind('`${h}px`');
   }
-
-  .bottom {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    // height: 32px;
-  }
   .image {
     position: absolute;
+    right: v-bind('`${option.dataStyle.right}px`');
+    bottom: v-bind('`${option.dataStyle.bottom}px`');
     bottom: 0px;
-    right: v-bind('`${option.imageStyle.right}px`');
-    bottom: v-bind('`${option.imageStyle.bottom}px`');
   }
 </style>

src/packages/components/Zhigan/Zhigan/LowerLeft/svg/icon.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <svg
+      :width="props.dataStyle.imageWidth"
+      :height="props.dataStyle.imageHeight"
+      viewBox="0 0 26 28"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <linearGradient x1="87.055629%" y1="0%" x2="0%" y2="86.1698764%" id="linearGradient-1">
+          <stop stop-color="#00D586" offset="0%"></stop>
+          <stop stop-color="#00AB4E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient
+          x1="6.17106015%"
+          y1="0%"
+          x2="67.7872653%"
+          y2="117.560409%"
+          id="linearGradient-2"
+        >
+          <stop stop-color="#007343" offset="0%"></stop>
+          <stop stop-color="#89E5A1" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1870, -733)">
+          <g id="可视化" transform="translate(-0.5, -1)">
+            <g id="模块" transform="translate(46, 88)">
+              <g id="标题模块--右侧1" transform="translate(1450, 285)">
+                <g id="底部背景" transform="translate(0, 0)">
+                  <g
+                    id="边框"
+                    transform="translate(199.8663, 194.0447) scale(-1, 1) translate(-199.8663, -194.0447)"
+                  >
+                    <g id="编组-22" transform="translate(0, 361.9394)">
+                      <polygon
+                        id="路径-11"
+                        fill="url(#linearGradient-1)"
+                        transform="translate(3.6525, 22.4974) scale(1, -1) translate(-3.6525, -22.4974)"
+                        points="0 18.8448966 0 26.1499885 7.30509189 18.8448966"
+                      ></polygon>
+                      <polygon
+                        id="装饰线段-"
+                        fill="url(#linearGradient-2)"
+                        fill-rule="nonzero"
+                        points="3.65254594 3.65254594 3.65254594 11.0802231 14.2622788 22.4971686 20.9471886 22.4971686 24.4831325 26.1499885 12.6709441 26.1499885 12.1291089 25.566951 0.488499319 13.0411664 0 12.5155206 2.49903173e-11 -2.59476354e-14"
+                      ></polygon>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps(['dataStyle']);
+</script>

src/packages/components/Zhigan/Zhigan/MeiRiShangBao/config.ts

@@ -10,10 +10,9 @@ const { source } = dataJson;
 export const option = {
   dataset: source,
   dataStyle: {
-    width: 400,
+    listWidth: 363,
-    height: 300,
+    listHeight: 28,
     sortOrder: true,
-    listStyle: {
     titleColor: '#FFFFFF',
     titleFontSize: 16,
     timeColor: '#16E795',
@@ -21,7 +20,8 @@ export const option = {
     numColor: '#73FF73',
     numFontSize: 16,
     marginbottom: 5,
-    }
+    marginleft: 20,
+    marginright: 20,
   }
 }
 

src/packages/components/Zhigan/Zhigan/MeiRiShangBao/config.vue

@@ -5,12 +5,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.titleColor"
+          v-model:value="optionData.dataStyle.titleColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="标题字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.titleFontSize"
+          v-model:value="optionData.dataStyle.titleFontSize"
           :min="0"
           size="small"
           placeholder="标题字体大小"
@@ -20,12 +20,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.timeColor"
+          v-model:value="optionData.dataStyle.timeColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="时间字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.timeFontSize"
+          v-model:value="optionData.dataStyle.timeFontSize"
           :min="0"
           size="small"
           placeholder="时间字体大小"
@@ -35,12 +35,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.numColor"
+          v-model:value="optionData.dataStyle.numColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="类型字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.numFontSize"
+          v-model:value="optionData.dataStyle.numFontSize"
           :min="0"
           size="small"
           placeholder="类型字体大小"
@@ -50,7 +50,7 @@
     <SettingItemBox>
       <SettingItem name="间隔距离">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.marginbottom"
+          v-model:value="optionData.dataStyle.marginbottom"
           :min="0"
           size="small"
           placeholder="间隔距离"

src/packages/components/Zhigan/Zhigan/MeiRiShangBao/index.vue

@@ -8,9 +8,9 @@
         @mouseleave="item.mouseFlag = true"
       >
         <Xinxi
-          :style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
+          :style="{ marginBottom: `${option.dataStyle.marginbottom}px` }"
           :item="item"
-          :listStyle="option.dataStyle.listStyle"
+          :dataStyle="option.dataStyle"
         />
       </div>
     </div>
@@ -75,6 +75,29 @@
     },
     {
       immediate: true,
+      deep: true,
+    },
+  );
+
+  watch(
+    () => w,
+    () => {
+      option.dataStyle.listWidth =
+        w.value - option.dataStyle.marginleft - option.dataStyle.marginright;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+  watch(
+    () => option.dataStyle.listWidth,
+    () => {
+      option.dataStyle.listHeight = 28 * (option.dataStyle.listWidth / 360);
+    },
+    {
+      immediate: true,
+      deep: true,
     },
   );
 </script>

src/packages/components/Zhigan/Zhigan/MeiRiShangBao/svg/xinxi.vue

@@ -2,8 +2,8 @@
   <div>
     <svg
       v-if="props.item.mouseFlag"
-      width="363px"
+      :width="props.dataStyle.listWidth"
-      height="28px"
+      :height="props.dataStyle.listHeight"
       viewBox="0 0 363 28"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -72,24 +72,24 @@
         v-else
         x="5%"
         y="20"
-        :fill="props.listStyle.titleColor"
+        :fill="props.dataStyle.titleColor"
-        :font-size="props.listStyle.titleFontSize"
+        :font-size="props.dataStyle.titleFontSize"
       >
         {{ props.item.key }}
       </text>
       <text
         x="15%"
         y="20"
-        :fill="props.listStyle.titleColor"
+        :fill="props.dataStyle.titleColor"
-        :font-size="props.listStyle.titleFontSize"
+        :font-size="props.dataStyle.titleFontSize"
       >
         {{ props.item.title }}
       </text>
       <text
         x="37%"
         y="20"
-        :fill="props.listStyle.timeColor"
+        :fill="props.dataStyle.timeColor"
-        :font-size="props.listStyle.timeFontSize"
+        :font-size="props.dataStyle.timeFontSize"
       >
         {{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
         {{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
@@ -98,16 +98,16 @@
       <text
         x="85%"
         y="20"
-        :fill="props.listStyle.numColor"
+        :fill="props.dataStyle.numColor"
-        :font-size="props.listStyle.numFontSize"
+        :font-size="props.dataStyle.numFontSize"
       >
         {{ props.item.num }}
       </text>
     </svg>
     <svg
       v-if="!props.item.mouseFlag"
-      width="363px"
+      :width="props.dataStyle.listWidth"
-      height="28px"
+      :height="props.dataStyle.listHeight"
       viewBox="0 0 363 28"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -182,24 +182,24 @@
         v-else
         x="5%"
         y="20"
-        :fill="props.listStyle.titleColor"
+        :fill="props.dataStyle.titleColor"
-        :font-size="props.listStyle.titleFontSize"
+        :font-size="props.dataStyle.titleFontSize"
       >
         {{ props.item.key }}
       </text>
       <text
         x="15%"
         y="20"
-        :fill="props.listStyle.titleColor"
+        :fill="props.dataStyle.titleColor"
-        :font-size="props.listStyle.titleFontSize"
+        :font-size="props.dataStyle.titleFontSize"
       >
         {{ props.item.title }}
       </text>
       <text
         x="37%"
         y="20"
-        :fill="props.listStyle.timeColor"
+        :fill="props.dataStyle.timeColor"
-        :font-size="props.listStyle.timeFontSize"
+        :font-size="props.dataStyle.timeFontSize"
       >
         {{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
         {{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
@@ -208,8 +208,8 @@
       <text
         x="85%"
         y="20"
-        :fill="props.listStyle.numColor"
+        :fill="props.dataStyle.numColor"
-        :font-size="props.listStyle.numFontSize"
+        :font-size="props.dataStyle.numFontSize"
       >
         {{ props.item.num }}
       </text>
@@ -219,5 +219,5 @@
 
 <script setup lang="ts">
   import dayjs from 'dayjs';
-  const props = defineProps(['item', 'listStyle']);
+  const props = defineProps(['item', 'dataStyle']);
 </script>

src/packages/components/Zhigan/Zhigan/ModalButton/config.ts

@@ -15,7 +15,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ModalButtonConfig.key
-  public attr = { ...chartInitConfig, w: 125, h: 45, zIndex: 5 }
+  public attr = { ...chartInitConfig, w: 121, h: 44, zIndex: 5 }
   public chartConfig = cloneDeep(ModalButtonConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Zhigan/Zhigan/ModalButton/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ModalButton">
     <n-button text>
-      <Button :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
+      <Button :w="w" :h="h" :buttonName="option.buttonName" :buttonStyle="option.buttonStyle" />
     </n-button>
   </div>
 </template>

src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue

@@ -3,8 +3,8 @@
     <!-- 黄色 -->
     <svg
       v-if="props.buttonStyle.color == 'yellow'"
-      width="121px"
+      :width="props.w"
-      height="44px"
+      :height="props.h"
       viewBox="0 0 121 44"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -121,9 +121,9 @@
     <!-- 绿色 -->
     <svg
       v-if="props.buttonStyle.color == 'green'"
-      width="141px"
+      :width="props.w"
-      height="44px"
+      :height="props.h"
-      viewBox="0 0 141 44"
+      viewBox="0 0 121 44"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -240,8 +240,8 @@
     <!-- 红色 -->
     <svg
       v-if="props.buttonStyle.color == 'red'"
-      width="121px"
+      :width="props.w"
-      height="44px"
+      :height="props.h"
       viewBox="0 0 121 44"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -359,5 +359,5 @@
 </template>
 
 <script setup lang="ts">
-  const props = defineProps(['buttonName', 'buttonStyle']);
+  const props = defineProps(['buttonName', 'buttonStyle', 'w', 'h']);
 </script>

src/packages/components/Zhigan/Zhigan/ModalFrameClose/config.ts

@@ -5,6 +5,10 @@ import { chartInitConfig } from '@/settings/designSetting'
 import { ModalFrameCloseConfig } from './index'
 
 export const option = {
+  dataStyle:{
+    color: '#005516',
+    fontColor: '#FFFFFF'
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Zhigan/Zhigan/ModalFrameClose/config.vue

@@ -1,4 +1,23 @@
-<template></template>
+<template>
+  <CollapseItem name="按钮设置" :expanded="true">
+    <SettingItemBox name="内容设置">
+      <SettingItem name="按钮颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="X的颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.dataStyle.fontColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
 
 <script setup lang="ts">
   import { PropType, watch, ref } from 'vue';

src/packages/components/Zhigan/Zhigan/ModalFrameClose/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ModalFrameClose">
     <n-button text>
-      <Button :w="w" :h="h" />
+      <Button :w="w" :h="h" :dataStyle="option.dataStyle" />
     </n-button>
   </div>
 </template>
@@ -23,7 +23,9 @@
 
   const { w, h } = toRefs(props.chartConfig.attr);
 
-  const option = reactive({});
+  const option = reactive({
+    dataStyle: props.chartConfig.option.dataStyle,
+  });
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Zhigan/Zhigan/ModalFrameClose/svg/button.vue

@@ -3,7 +3,7 @@
     <svg
       :width="props.w"
       :height="props.h"
-      :viewBox="`0 0 ${props.w} ${props.h}`"
+      viewBox="0 0 52 30"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -46,7 +46,7 @@
                 <path
                   d="M0,0 L16.4866044,27.8390432 C17.0497068,28.627131 18.0567376,29.1100832 19.1444648,29.1137009 L47.7125903,29.1137009 C49.4244221,29.1137009 50.812136,27.9385478 50.812136,26.4889231 L50.812136,0 L0,0 Z"
                   id="形状"
-                  fill="#005516"
+                  :fill="props.dataStyle.color"
                 ></path>
                 <g id="路径">
                   <use
@@ -55,7 +55,7 @@
                     filter="url(#filter-2)"
                     xlink:href="#path-1"
                   ></use>
-                  <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                  <use :fill="props.dataStyle.fontColor" xlink:href="#path-1"></use>
                 </g>
               </g>
             </g>
@@ -67,5 +67,5 @@
 </template>
 
 <script setup lang="ts">
-  const props = defineProps(['w', 'h']);
+  const props = defineProps(['w', 'h', 'dataStyle']);
 </script>

src/packages/components/Zhigan/Zhigan/ModalHead/config.ts

@@ -16,7 +16,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ModalHeadConfig.key
-  public attr = { ...chartInitConfig, w: 321, h: 31, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 320, h: 31, zIndex: -1 }
   public chartConfig = cloneDeep(ModalHeadConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Zhigan/Zhigan/ModalHead/svg/title.vue

@@ -3,7 +3,7 @@
     <svg
       :width="props.w"
       :height="props.h"
-      :viewBox="`0 0 ${props.w} ${props.h}`"
+      viewBox="0 0 320 31"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"

src/packages/components/Zhigan/Zhigan/ModalInfo/index.vue

@@ -4,11 +4,6 @@
       <div v-for="item in option.dataset" :key="item.key">
         <div class="item">
           <div class="title">
-            <!-- <n-image
-              :width="option.dataStyle.dotSize"
-              :height="option.dataStyle.dotSize"
-              src="src/assets/images/chart/zhigan/component/modalInfoDot.svg"
-            /> -->
             <Dot :dotSize="option.titleStyle.dotSize" :dotColor="option.titleStyle.dotColor" />
             <span class="dot">{{ item.title }}</span>
           </div>
@@ -42,6 +37,27 @@
     titleStyle: props.chartConfig.option.titleStyle,
     contentStyle: props.chartConfig.option.contentStyle,
   });
+
+  watch(
+    () => w.value,
+    () => {
+      option.contentStyle.width = w.value - option.dataStyle.marginLeft - option.titleStyle.width;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+  watch(
+    () => option.titleStyle.width,
+    () => {
+      option.contentStyle.width = w.value - option.dataStyle.marginLeft - option.titleStyle.width;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/config.ts

@@ -14,7 +14,8 @@ export const option = {
     marginbottom: 20,
     marginleft: 20,
     marginright: 20,
-    listStyle: {
+    listWidth: 360,
+    listHeight: 110,
     titleColor: '#ffffff',
     titleFontSize: 20,
     typeColor: '#FA521D',
@@ -23,8 +24,7 @@ export const option = {
     positionFontSize: 16,
     timeColor: '#ffffff',
     timeFontSize: 16,
-      marginbottom: 5,
+    listMarginbottom: 0,
-    }
   }
 }
 

src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/config.vue

@@ -39,12 +39,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.titleColor"
+          v-model:value="optionData.dataStyle.titleColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="标题字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.titleFontSize"
+          v-model:value="optionData.dataStyle.titleFontSize"
           :min="0"
           size="small"
           placeholder="标题字体大小"
@@ -54,12 +54,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.typeColor"
+          v-model:value="optionData.dataStyle.typeColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="类型字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.typeFontSize"
+          v-model:value="optionData.dataStyle.typeFontSize"
           :min="0"
           size="small"
           placeholder="类型字体大小"
@@ -69,12 +69,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.positionColor"
+          v-model:value="optionData.dataStyle.positionColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="位置字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.positionFontSize"
+          v-model:value="optionData.dataStyle.positionFontSize"
           :min="0"
           size="small"
           placeholder="位置字体大小"
@@ -84,12 +84,12 @@
         <n-color-picker
           size="small"
           :modes="['rgb']"
-          v-model:value="optionData.dataStyle.listStyle.timeColor"
+          v-model:value="optionData.dataStyle.timeColor"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="时间字体大小">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.timeFontSize"
+          v-model:value="optionData.dataStyle.timeFontSize"
           :min="0"
           size="small"
           placeholder="时间字体大小"
@@ -97,7 +97,7 @@
       </SettingItem>
       <SettingItem name="间隔距离">
         <n-input-number
-          v-model:value="optionData.dataStyle.listStyle.marginbottom"
+          v-model:value="optionData.dataStyle.listMarginbottom"
           :min="0"
           size="small"
           placeholder="间隔距离"

src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/index.vue

@@ -3,9 +3,9 @@
     <div class="list">
       <div v-for="item in option.dataset" :key="item.key">
         <Xinxi
-          :style="{ marginBottom: `${option.dataStyle.listStyle.marginbottom}px` }"
+          :style="{ marginBottom: `${option.dataStyle.listMarginbottom}px` }"
           :item="item"
-          :listStyle="option.dataStyle.listStyle"
+          :dataStyle="option.dataStyle"
         />
       </div>
     </div>
@@ -33,6 +33,28 @@
     dataset: props.chartConfig.option.dataset,
     dataStyle: props.chartConfig.option.dataStyle,
   });
+
+  watch(
+    () => w,
+    () => {
+      option.dataStyle.listWidth =
+        w.value - option.dataStyle.marginleft - option.dataStyle.marginright;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+  watch(
+    () => option.dataStyle.listWidth,
+    () => {
+      option.dataStyle.listHeight = 110 * (option.dataStyle.listWidth / 360);
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="scss" scoped>
@@ -58,7 +80,7 @@
     margin-right: v-bind('`${option.dataStyle.marginright}px`');
   }
 
-  .xinxi {
+  // .xinxi {
-    margin-bottom: v-bind('`${option.dataStyle.listStyle.marginbottom}px`');
+  //   margin-bottom: v-bind('`${option.dataStyle.listMarginbottom}px`');
-  }
+  // }
 </style>

src/packages/components/Zhigan/Zhigan/WeiXingYaoGan/svg/xinxi.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <svg
-      width="356px"
+      :width="props.dataStyle.listWidth"
-      height="105px"
+      :height="props.dataStyle.listHeight"
       viewBox="0 0 356 105"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -202,32 +202,32 @@
       <text
         x="20"
         y="30"
-        :fill="props.listStyle.titleColor"
+        :fill="props.dataStyle.titleColor"
-        :font-size="props.listStyle.titleFontSize"
+        :font-size="props.dataStyle.titleFontSize"
       >
         {{ props.item.title }}
       </text>
       <text
         x="270"
         y="30"
-        :fill="props.listStyle.typeColor"
+        :fill="props.dataStyle.typeColor"
-        :font-size="props.listStyle.typeFontSize"
+        :font-size="props.dataStyle.typeFontSize"
       >
         {{ props.item.type }}
       </text>
       <text
         x="40"
         y="60"
-        :fill="props.listStyle.positionColor"
+        :fill="props.dataStyle.positionColor"
-        :font-size="props.listStyle.positionFontSize"
+        :font-size="props.dataStyle.positionFontSize"
       >
         {{ props.item.position }}
       </text>
       <text
         x="40"
         y="85"
-        :fill="props.listStyle.timeColor"
+        :fill="props.dataStyle.timeColor"
-        :font-size="props.listStyle.timeFontSize"
+        :font-size="props.dataStyle.timeFontSize"
       >
         {{ props.item.time }}
       </text>
@@ -236,5 +236,5 @@
 </template>
 
 <script setup lang="ts">
-  const props = defineProps(['item', 'listStyle']);
+  const props = defineProps(['item', 'dataStyle']);
 </script>

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.ts

@@ -29,15 +29,15 @@ export const option = {
     bottomFontColor3: '#FFFFFF',
     bottomFontSize3: 12,
     lineColor: '#A4F9AB',
-    bottomMarginTop: 0,
+    bottomMarginTop: 16,
     bottomWidth: 80,
-    bottomHeight: 120,
+    bottomHeight: 80 * 97 / 71,
   }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = WuRenJiFeiXingShuJuConfig.key
-  public attr = { ...chartInitConfig, w: 400, h: 200, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 400, h: 240, zIndex: -1 }
   public chartConfig = cloneDeep(WuRenJiFeiXingShuJuConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/config.vue

@@ -24,6 +24,14 @@
           size="small"
         />
       </SettingItem>
+      <SettingItem name="组件宽度">
+        <n-input-number
+          v-model:value="optionData.dataStyle.topWidth"
+          min="0"
+          type="text"
+          size="small"
+        />
+      </SettingItem>
       <SettingItem name="组件间隔">
         <n-input-number v-model:value="optionData.dataStyle.gap" min="0" type="text" size="small" />
       </SettingItem>
@@ -62,7 +70,7 @@
           size="small"
         />
       </SettingItem>
-      <SettingItem name="组件宽度">
+      <!-- <SettingItem name="组件宽度">
         <n-input-number
           v-model:value="optionData.dataStyle.topWidth"
           min="0"
@@ -77,7 +85,7 @@
           type="text"
           size="small"
         />
-      </SettingItem>
+      </SettingItem> -->
     </SettingItemBox>
 
     <SettingItemBox name="下方组件设置">
@@ -130,7 +138,7 @@
           v-model:value="optionData.dataStyle.lineColor"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="距离上方组件的距离">
+      <SettingItem name="距离上方组件距离">
         <n-input-number
           v-model:value="optionData.dataStyle.bottomMarginTop"
           min="0"
@@ -139,7 +147,7 @@
         />
       </SettingItem>
 
-      <SettingItem name="组件宽度">
+      <!-- <SettingItem name="组件宽度">
         <n-input-number
           v-model:value="optionData.dataStyle.bottomWidth"
           min="0"
@@ -154,7 +162,7 @@
           type="text"
           size="small"
         />
-      </SettingItem>
+      </SettingItem> -->
     </SettingItemBox>
   </CollapseItem>
 </template>

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/index.vue

@@ -33,6 +33,19 @@
     dataset: props.chartConfig.option.dataset,
     dataStyle: props.chartConfig.option.dataStyle,
   });
+
+  watch(
+    () => option.dataStyle.topWidth,
+    () => {
+      option.dataStyle.topHeight = option.dataStyle.topWidth;
+      option.dataStyle.bottomWidth = option.dataStyle.topWidth;
+      option.dataStyle.bottomHeight = 97 * (option.dataStyle.bottomWidth / 71);
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/bottom.vue

@@ -3,7 +3,7 @@
     <svg
       :width="props.dataStyle.bottomWidth"
       :height="props.dataStyle.bottomHeight"
-      :viewBox="`0 0 ${props.dataStyle.bottomWidth} ${props.dataStyle.bottomHeight}`"
+      viewBox="0 0 71 97"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"

src/packages/components/Zhigan/Zhigan/WuRenJiFeiXingShuJu/svg/top.vue

@@ -3,7 +3,7 @@
     <svg
       :width="props.dataStyle.topWidth"
       :height="props.dataStyle.topHeight"
-      :viewBox="`0 0 ${props.dataStyle.topWidth} ${props.dataStyle.topHeight}`"
+      viewBox="0 0 71 71"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"

src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.ts

@@ -12,7 +12,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = WuRenJiImageConfig.key
-  public attr = { ...chartInitConfig, w: 401, h: 273, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 400, h: 273, zIndex: -1 }
   public chartConfig = cloneDeep(WuRenJiImageConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Zhigan/Zhigan/WuRenJiImage/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="title">
-    <Tupian :w="w" :h="h" :dataset="option.dataset" />
+    <n-image :width="w" :height="h" :src="option.dataset.url" preview-disabled />
+    <span class="Tupian">
+      <Tupian :w="w" :h="h" />
+    </span>
   </div>
 </template>
 
@@ -31,4 +34,10 @@
     width: v-bind('`${w}px`');
     height: v-bind('`${h}px`');
   }
+  .Tupian {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+  }
 </style>

src/packages/components/Zhigan/Zhigan/WuRenJiImage/svg/tupian.vue

@@ -3,12 +3,11 @@
     <svg
       :width="props.w"
       :height="props.h"
-      :viewBox="`0 0 ${props.w} ${props.h}`"
+      viewBox="0 0 400 273"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
-      <image x="0" y="0" :width="props.w" :height="props.h" :href="props.dataset.url" />
       <defs>
         <linearGradient
           x1="44.8535648%"
@@ -91,5 +90,5 @@
 </template>
 
 <script setup lang="ts">
-  const props = defineProps(['w', 'h', 'dataset']);
+  const props = defineProps(['w', 'h']);
 </script>

src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/config.vue

@@ -74,7 +74,7 @@
           placeholder="标题字体大小"
         ></n-input-number>
       </SettingItem>
-      <SettingItem name="标题宽度">
+      <!-- <SettingItem name="标题宽度">
         <n-input-number
           v-model:value="optionData.dataStyle.titleWidth"
           min="0"
@@ -89,7 +89,7 @@
           type="text"
           size="small"
         />
-      </SettingItem>
+      </SettingItem> -->
 
       <SettingItem name="与标题的间隔距离">
         <n-input-number

src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue

@@ -45,6 +45,18 @@
     dataset: props.chartConfig.option.dataset,
     dataStyle: props.chartConfig.option.dataStyle,
   });
+
+  watch(
+    () => option.dataStyle.videowidth,
+    () => {
+      option.dataStyle.titleWidth = option.dataStyle.videowidth;
+      option.dataStyle.titleHeight = 30 * (option.dataStyle.titleWidth / 181);
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/svg/title.vue

@@ -3,7 +3,7 @@
     <svg
       :height="props.dataStyle.titleHeight"
       :width="props.dataStyle.titleWidth"
-      :viewBox="`0 0 ${props.dataStyle.titleWidth} ${props.dataStyle.titleHeight}`"
+      viewBox="0 0 181 30"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"

src/store/modules/chartEditStore/chartEditStore.ts

@@ -29,6 +29,9 @@ import {
   RequestGlobalConfigType,
   EditCanvasConfigType,
 } from './chartEditStore.d';
+import useClipboard from 'vue-clipboard3';
+
+const { toClipboard } = useClipboard();
 
 const chartHistoryStore = useChartHistoryStore();
 const settingStore = useSettingStore();
@@ -513,7 +516,7 @@ export const useChartEditStore = defineStore({
       this.wrap(true, isHistory);
     },
     // * 复制
-    setCopy(isCut = false) {
+    async setCopy(isCut = false) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return;
@@ -528,7 +531,7 @@ export const useChartEditStore = defineStore({
             type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
           };
           this.setRecordChart(copyData);
-          localStorage.setItem('copyData', JSON.stringify(copyData));
+          await toClipboard(JSON.stringify(copyData));
           window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！');
           loadingFinish();
         }
@@ -542,12 +545,9 @@ export const useChartEditStore = defineStore({
     },
     // * 粘贴
     setParse() {
-      console.log('setParse');
       try {
         loadingStart();
-        const recordCharts = this.getRecordChart
+        const recordCharts = this.getRecordChart;
-          ? this.getRecordChart
-          : JSON.parse(localStorage.getItem('copyData'));
 
         if (recordCharts === undefined) {
           loadingFinish();
@@ -587,6 +587,52 @@ 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/ContentEdit/components/EditTools/index.vue

@@ -64,6 +64,49 @@
   </div>
   <!-- 系统设置 model -->
   <go-system-set v-model:modelShow="globalSettingModel"></go-system-set>
+  <!-- 跨页面粘贴 -->
+  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
+    <n-card
+      :bordered="false"
+      role="dialog"
+      size="small"
+      aria-modal="true"
+      style="width: 1200px; height: 700px"
+    >
+      <template #header>
+        <n-space>
+          <n-text>跨页面粘贴</n-text>
+        </n-space>
+      </template>
+
+      <template #header-extra> </template>
+      <n-layout has-sider sider-placement="right">
+        <n-layout style="height: 580px; padding-right: 20px">
+          <!-- 编辑主体 -->
+          <monaco-editor v-model:modelValue="copyValue" height="480px" language="json" />
+        </n-layout>
+      </n-layout>
+
+      <template #action>
+        <n-space justify="space-between">
+          <div class="go-flex-items-center">
+            <n-tag :bordered="false" type="primary">
+              <template #icon>
+                <n-icon :component="DocumentTextIcon" />
+              </template>
+              说明
+            </n-tag>
+            <n-text class="go-ml-2" depth="2">粘贴复制的组件内容，导入画布</n-text>
+          </div>
+
+          <n-space>
+            <n-button size="medium" @click="closeModel">取消</n-button>
+            <n-button size="medium" type="primary" @click="saveCopyData">导入画布</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
@@ -87,8 +130,17 @@
   import { useSyncUpdate } from './hooks/useSyncUpdate.hook';
   import { BtnListType, TypeEnum } from './index.d';
   import { icon } from '@/plugins';
+  import { MonacoEditor } from '@/components/Pages/MonacoEditor';
 
-  const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CreateIcon } = icon.ionicons5;
+  const {
+    DownloadIcon,
+    ShareIcon,
+    PawIcon,
+    SettingsSharpIcon,
+    CreateIcon,
+    CopyIcon,
+    DocumentTextIcon,
+  } = icon.ionicons5;
   const settingStore = useSettingStore();
   const chartEditStore = useChartEditStore();
   const routerParamsInfo = useRoute();
@@ -179,7 +231,21 @@
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }]);
     }
   };
-
+  const copyValue = ref('');
+  const showModal = ref(false);
+  const copyPageHandle = () => {
+    showModal.value = true;
+  };
+  // 关闭弹窗
+  const closeModel = () => {
+    copyValue.value = '';
+    showModal.value = false;
+  };
+  // 导入画布
+  const saveCopyData = () => {
+    chartEditStore.setCopyData(copyValue.value);
+    closeModel();
+  };
   // 配置列表
   const btnList: BtnListType[] = [
     {
@@ -211,6 +277,13 @@
         globalSettingModel.value = true;
       },
     },
+    {
+      key: 'copy',
+      type: TypeEnum.BUTTON,
+      name: '跨页面粘贴',
+      icon: CopyIcon,
+      handle: copyPageHandle,
+    },
   ];
 </script>
 
@@ -234,6 +307,7 @@
     border-radius: 25px;
     border: 1px solid;
     @include fetch-border-color('hover-border-color-shallow');
+    height: 240px !important;
     &.aside {
       display: flex;
       justify-content: center;