diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index 7c523fe88c..729bffbb40 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -1,10 +1,6 @@
 <template>
   <div
     :id="previewMainDomId"
-    v-loading="dataLoading"
-    :element-loading-text="$t('panel.data_loading')"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(220,220,220,1)"
     class="bg"
     :style="customStyle"
     @scroll="canvasScroll"
@@ -120,6 +116,7 @@ import { userLoginInfo } from '@/api/systemInfo/userLogin'
 import html2canvas from 'html2canvasde'
 import { queryAll } from '@/api/panel/pdfTemplate'
 import PDFPreExport from '@/views/panel/export/PDFPreExport'
+import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey'
 
 const erd = elementResizeDetectorMaker()
 export default {
@@ -351,6 +348,9 @@ export default {
     }
   },
   created() {
+    if (this.canvasId === 'canvas-main') {
+      listenGlobalKeyDownPreview()
+    }
     // 取消视图请求
     this.$cancelRequest('/chart/view/getData/**')
     this.$cancelRequest('/api/link/viewDetail/**')
@@ -614,7 +614,8 @@ export default {
     },
     downloadAsPDF() {
       this.dataLoading = true
-      const domId = this.canvasInfoTemp
+      this.$emit('change-load-status', true)
+      const domId = this.previewMainDomId
       setTimeout(() => {
         this.exporting = true
         this.backScreenShot = true
@@ -625,6 +626,7 @@ export default {
           html2canvas(document.getElementById(domId)).then(canvas => {
             const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
             this.dataLoading = false
+            this.$emit('change-load-status', false)
             this.exporting = false
             this.backScreenShot = false
             if (snapshot !== '') {
@@ -632,7 +634,7 @@ export default {
               this.pdfExportShow = true
             }
           })
-        }, 1500)
+        }, 2500)
       }, 500)
     },
     closePreExport() {
diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js
index fbcc6c45a3..e9b6694ded 100644
--- a/frontend/src/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@@ -25,6 +25,24 @@ export default {
     }
   },
   mutations: {
+    // 复制到粘贴板
+    copyToClipboard(state) {
+      if (state.curComponent) {
+        Vue.prototype.$copyText('datease-component-' + state.curComponent.id)
+      }
+    },
+    passFromClipboard(state, componentId) {
+      state.componentData.forEach(item => {
+        if (item.id === componentId) {
+          state.copyData = {
+            data: deepCopy(item),
+            index: state.componentData.length
+          }
+        }
+      })
+      state.isCut = false
+      this.commit('paste')
+    },
     copyMultiplexingComponents(state) {
       let pYMax = 0
       const _this = this
@@ -89,10 +107,8 @@ export default {
 
     paste(state, needAdaptor) {
       if (!state.copyData) {
-        toast('请选择组件')
         return
       }
-
       const data = state.copyData.data
       // 仪表板复制的组件默认不在移动端部署中mobileSelected = false
       data.mobileSelected = false
diff --git a/frontend/src/components/canvas/utils/shortcutKey.js b/frontend/src/components/canvas/utils/shortcutKey.js
index 3e1dd16b7f..540c67e8c9 100644
--- a/frontend/src/components/canvas/utils/shortcutKey.js
+++ b/frontend/src/components/canvas/utils/shortcutKey.js
@@ -56,7 +56,27 @@ export function listenGlobalKeyDown() {
     if (keyCode === ctrlKey || keyCode === commandKey) {
       isCtrlOrCommandDown = true
     } else if (isCtrlOrCommandDown) {
-      if (keyCode === zKey || keyCode === yKey || keyCode === vKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
+      if (keyCode === zKey || keyCode === yKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
+        e.preventDefault()
+        unlockMap[keyCode]()
+      }
+    }
+  }
+
+  window.onkeyup = (e) => {
+    if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
+      isCtrlOrCommandDown = false
+    }
+  }
+}
+
+export function listenGlobalKeyDownPreview() {
+  window.onkeydown = (e) => {
+    const { keyCode } = e
+    if (keyCode === ctrlKey || keyCode === commandKey) {
+      isCtrlOrCommandDown = true
+    } else if (isCtrlOrCommandDown) {
+      if (keyCode === enlargeKey) {
         e.preventDefault()
         unlockMap[keyCode]()
       }
@@ -71,12 +91,11 @@ export function listenGlobalKeyDown() {
 }
 
 function copy() {
-  store.commit('copy')
+  store.commit('copyToClipboard')
 }
 
 function paste() {
-  store.commit('paste')
-  store.commit('recordSnapshot')
+
 }
 
 function cut() {
diff --git a/frontend/src/components/widget/deWidget/DeTabs.vue b/frontend/src/components/widget/deWidget/DeTabs.vue
index 6e401c8166..60c25fda40 100644
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/frontend/src/components/widget/deWidget/DeTabs.vue
@@ -470,8 +470,8 @@ export default {
         let switchCount = 1
         // 轮播定时器
         this.timer = setInterval(() => {
-          switchCount++
           const nowIndex = switchCount % this.element.options.tabList.length
+          switchCount++
           this.activeTabName = this.element.options.tabList[nowIndex].name
         }, switchTime)
       }
diff --git a/frontend/src/components/widget/deWidget/TabStyle.vue b/frontend/src/components/widget/deWidget/TabStyle.vue
index c73831ad80..0813f2d94a 100644
--- a/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/frontend/src/components/widget/deWidget/TabStyle.vue
@@ -135,8 +135,9 @@
               type="number"
               size="mini"
               :min="2"
+              :max="3600"
               class="hide-icon-number"
-              @change="styleChange"
+              @change="switchTimeChange"
             >
               <template slot="append">S</template>
             </el-input>
@@ -180,6 +181,14 @@ export default {
       const current = this.$refs[pickKey]
       current && (current.showPicker = true)
     },
+    switchTimeChange() {
+      if (!this.styleInfo.switchTime || this.styleInfo.switchTime < 2) {
+        this.styleInfo.switchTime = 2
+      } else if (this.styleInfo.switchTime && this.styleInfo.switchTime > 3600) {
+        this.styleInfo.switchTime = 3600
+      }
+      this.styleChange()
+    },
     styleChange() {
       this.$store.commit('canvasChange')
     }
diff --git a/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg b/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg
new file mode 100644
index 0000000000..41e752aabf
--- /dev/null
+++ b/frontend/src/icons/svg/percentage-bar-stack-horizontal.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="1663834987781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1963" width="200" height="200"><path transform="rotate(90 319.99999999999994,513.6666870117189) " id="svg_1" d="m-64,641.66667l768,0l0,85.33333l-768,0l0,-85.33333zm21.33333,-341.33334l85.33334,0l0,298.66667l-85.33334,0l0,-298.66667zm640,256l85.33334,0l0,42.66667l-85.33334,0l0,-42.66667zm-533.33333,-213.33333l85.33333,0l0,256l-85.33333,0l0,-256zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333zm106.66666,42.66666l85.33334,0l0,170.66667l-85.33334,0l0,-170.66667zm106.66667,42.66667l85.33333,0l0,128l-85.33333,0l0,-128zm106.66667,42.66667l85.33333,0l0,85.33333l-85.33333,0l0,-85.33333z"/><path transform="rotate(90 551,513.3333129882814) " id="svg_2" opacity="0.6" d="m188.33333,278.66667l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm640,256l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm-533.33333,-213.33334l85.33333,0l0,213.33334l-85.33333,0l0,-213.33334zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333zm106.66666,42.66667l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm106.66667,42.66666l85.33333,0l0,213.33334l-85.33333,0l0,-213.33334zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333z"/><path transform="rotate(90 739,513.6666870117189) " stroke="null" id="svg_3" d="m1016.33333,343l85.33334,0l0,341.33333l-85.33334,0l0,-341.33333zm-640,0l85.33334,0l0,85.33333l-85.33334,0l0,-85.33333zm533.33334,0l85.33333,0l0,298.66667l-85.33333,0l0,-298.66667zm-106.66667,0l85.33333,0l0,256l-85.33333,0l0,-256zm-106.66667,0l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm-106.66666,0l85.33333,0l0,170.66667l-85.33333,0l0,-170.66667zm-106.66667,0l85.33333,0l0,128l-85.33333,0l0,-128z"/></svg>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 47661e6689..5724e5fe61 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1135,6 +1135,7 @@ export default {
     chart_percentage_bar_stack: 'Percentage Stack Bar',
     chart_bar_horizontal: 'Horizontal Bar',
     chart_bar_stack_horizontal: 'Stack Horizontal Bar',
+    chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
     chart_line: 'Base Line',
     chart_line_stack: 'Stack Line',
     chart_pie: 'Pie',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 68a331841e..2342f8577e 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1135,6 +1135,7 @@ export default {
     chart_percentage_bar_stack: '百分比柱狀圖',
     chart_bar_horizontal: '橫嚮柱狀圖',
     chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
+    chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
     chart_line: '基礎摺線圖',
     chart_line_stack: '堆疊摺線圖',
     chart_pie: '餅圖',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 3a441deb21..283a1f5191 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1134,6 +1134,7 @@ export default {
     chart_percentage_bar_stack: '百分比柱状图',
     chart_bar_horizontal: '横向柱状图',
     chart_bar_stack_horizontal: '横向堆叠柱状图',
+    chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
     chart_line: '基础折线图',
     chart_line_stack: '堆叠折线图',
     chart_pie: '饼图',
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index f8a6679f35..4fa88fb8d1 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -112,7 +112,7 @@
               :http-request="upload"
               :file-list="fileList"
             >
-              <i class="el-icon-plus" />
+              <i class="el-icon-plus"/>
             </el-upload>
             <el-dialog
               top="25vh"
@@ -375,6 +375,7 @@ export default {
 }
 
 .main-row {
+  background-size: 100% 100% !important;
   padding-left: 10px;
   height: 250px;
   overflow-y: auto;
diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js
index ef626eeabe..e5a2694c5b 100644
--- a/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -203,6 +203,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   } else {
     delete options.isStack
   }
+  options.isPercent = chart.type.includes('percentage')
   // custom color
   options.color = antVCustomColor(chart)
   if (customAttr.color.gradient) {
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 759f9c09a6..580d202899 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -1,7 +1,7 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
-import { equalsAny } from '@/utils/StringUtils'
+import { equalsAny, includesAny } from '@/utils/StringUtils'
 
 export function getPadding(chart) {
   if (chart.drill) {
@@ -166,11 +166,8 @@ export function getLabel(chart) {
               extStack = JSON.parse(JSON.stringify(chart.extStack))
             }
 
-            if (chart.type === 'bar-stack' ||
-              chart.type === 'line-stack' ||
-              chart.type === 'bar-stack-horizontal' ||
-              chart.type === 'percentage-bar-stack'
-            ) {
+            if (equalsAny(chart.type, 'bar-stack', 'line-stack',
+              'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
               let f
               if (extStack && extStack.length > 0) {
                 f = yAxis[0]
@@ -189,7 +186,10 @@ export function getLabel(chart) {
                 f.formatterCfg = formatterItem
               }
               // 百分比堆叠柱状图保留小数处理
-              if (chart.type === 'percentage-bar-stack') {
+              if (chart.type.includes('percentage')) {
+                if (!param.value) {
+                  return
+                }
                 f.formatterCfg.type = 'percent'
                 f.formatterCfg.decimalCount = l.reserveDecimalCount
                 f.formatterCfg.thousandSeparator = false
@@ -278,10 +278,8 @@ export function getTooltip(chart) {
             }
 
             let obj
-            if (chart.type === 'bar-stack' ||
-              chart.type === 'line-stack' ||
-              chart.type === 'bar-stack-horizontal' ||
-              chart.type === 'percentage-bar-stack') {
+            if (equalsAny(chart.type, 'bar-stack', 'line-stack',
+              'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
               let f
               if (extStack && extStack.length > 0) {
                 obj = { name: param.category, value: param.value }
@@ -301,7 +299,11 @@ export function getTooltip(chart) {
               if (!f.formatterCfg) {
                 f.formatterCfg = formatterItem
               }
-              if (chart.type === 'percentage-bar-stack') {
+              if (chart.type.includes('percentage')) {
+                if (!param.value) {
+                  obj.value = 0
+                  return obj
+                }
                 // 保留小数位数和标签保持一致，这边拿一下标签的配置
                 const l = JSON.parse(JSON.stringify(customAttr.label))
                 f.formatterCfg.type = 'percent'
@@ -329,7 +331,7 @@ export function getTooltip(chart) {
                   res = valueFormatter(param.value, formatterItem)
                 }
               }
-            } else if (chart.type.includes('pie') || chart.type.includes('funnel')) {
+            } else if (includesAny(chart.type, 'pie', 'funnel')) {
               obj = { name: param.field, value: param.value }
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
@@ -339,7 +341,7 @@ export function getTooltip(chart) {
                   res = valueFormatter(param.value, formatterItem)
                 }
               }
-            } else if ((chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) && !chart.type.includes('group')) {
+            } else if (includesAny(chart.type, 'bar', 'line', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
               obj = { name: param.category, value: param.value }
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 9df0f4cf53..6e77d031b6 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -1154,6 +1154,87 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'percentage-bar-stack-horizontal',
+    title: 'chart.chart_percentage_bar_stack_horizontal',
+    icon: 'percentage-bar-stack-horizontal',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'label-selector-ant-v',
+      'tooltip-selector-ant-v',
+      'x-axis-selector-ant-v',
+      'y-axis-selector-ant-v',
+      'title-selector-ant-v',
+      'legend-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'colorPanel',
+        'customColor',
+        'gradient',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position-h',
+        'reserveDecimalCount'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
+  },
   {
     render: 'antv',
     category: 'chart.chart_type_distribute',
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index fe5998d8be..8a0c54f0f0 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -57,6 +57,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
+import { equalsAny } from '@/utils/StringUtils'
 
 export default {
   name: 'ChartComponentG2',
@@ -233,13 +234,13 @@ export default {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
       } else if (chart.type === 'bar-group') {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
-      } else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') {
+      } else if (equalsAny(chart.type, 'bar-stack', 'percentage-bar-stack')) {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
       } else if (chart.type === 'bar-group-stack') {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true)
       } else if (chart.type === 'bar-horizontal') {
         this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
-      } else if (chart.type === 'bar-stack-horizontal') {
+      } else if (equalsAny(chart.type, 'bar-stack-horizontal', 'percentage-bar-stack-horizontal')) {
         this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
       } else if (chart.type === 'line') {
         this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 9266ab5ad6..652a8bdc16 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -130,8 +130,8 @@
                 "
               >
                 <span style="font-size: 12px; color: #c0c0c0">{{
-                  $t('dataset.calc_field')
-                }}</span>
+                    $t('dataset.calc_field')
+                  }}</span>
               </span>
             </template>
           </el-table-column>
@@ -180,8 +180,8 @@
                     />
                   </span>
                   <span style="color: #8492a6; font-size: 12px">{{
-                    data.label
-                  }}</span>
+                      data.label
+                    }}</span>
                 </template>
               </el-cascader>
               <span class="select-svg-icon">
@@ -284,8 +284,8 @@
                     v-if="scope.row.deExtractType === 3"
                     class="field-class"
                   >{{
-                    $t('dataset.value') + '(' + $t('dataset.float') + ')'
-                  }}</span>
+                      $t('dataset.value') + '(' + $t('dataset.float') + ')'
+                    }}</span>
                 </span>
                 <span v-if="scope.row.deExtractType === 5">
                   <svg-icon
@@ -308,8 +308,8 @@
                 "
               >
                 <span style="font-size: 12px; color: #c0c0c0">{{
-                  $t('dataset.calc_field')
-                }}</span>
+                    $t('dataset.calc_field')
+                  }}</span>
               </span>
             </template>
           </el-table-column>
@@ -356,7 +356,7 @@
                         "
                         command="copy"
                       >
-                        <i class="el-icon-document-copy" />
+                        <i class="el-icon-document-copy"/>
                         {{ $t('dataset.copy') }}
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -365,7 +365,7 @@
                         "
                         command="delete"
                       >
-                        <i class="el-icon-delete" />
+                        <i class="el-icon-delete"/>
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </slot>
@@ -470,8 +470,8 @@
                 "
               >
                 <span style="font-size: 12px; color: #c0c0c0">{{
-                  $t('dataset.calc_field')
-                }}</span>
+                    $t('dataset.calc_field')
+                  }}</span>
               </span>
             </template>
           </el-table-column>
@@ -520,8 +520,8 @@
                     />
                   </span>
                   <span style="color: #8492a6; font-size: 12px">{{
-                    data.label
-                  }}</span>
+                      data.label
+                    }}</span>
                 </template>
               </el-cascader>
               <span class="select-svg-icon">
@@ -616,8 +616,8 @@
                     v-if="scope.row.deExtractType === 3"
                     class="field-class"
                   >{{
-                    $t('dataset.value') + '(' + $t('dataset.float') + ')'
-                  }}</span>
+                      $t('dataset.value') + '(' + $t('dataset.float') + ')'
+                    }}</span>
                 </span>
                 <span v-if="scope.row.deExtractType === 5">
                   <svg-icon
@@ -640,8 +640,8 @@
                 "
               >
                 <span style="font-size: 12px; color: #c0c0c0">{{
-                  $t('dataset.calc_field')
-                }}</span>
+                    $t('dataset.calc_field')
+                  }}</span>
               </span>
             </template>
           </el-table-column>
@@ -689,7 +689,7 @@
                         "
                         command="copy"
                       >
-                        <i class="el-icon-document-copy" />
+                        <i class="el-icon-document-copy"/>
                         {{ $t('dataset.copy') }}
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -698,7 +698,7 @@
                         "
                         command="delete"
                       >
-                        <i class="el-icon-delete" />
+                        <i class="el-icon-delete"/>
                         {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </slot>
@@ -742,7 +742,7 @@
 </template>
 
 <script>
-import { post, fieldListDQ, batchEdit, dateformats } from '@/api/dataset/dataset'
+import { batchEdit, dateformats, fieldListDQ, post } from '@/api/dataset/dataset'
 import CalcFieldEdit from './CalcFieldEdit'
 import { getFieldName } from '@/views/dataset/data/utils'
 import msgCfm from '@/components/msgCfm/index'
@@ -839,7 +839,7 @@ export default {
       })
     },
     getFields(item) {
-      if (item.deExtractType == 0) {
+      if (item.deExtractType === 0) {
         const children = this.dateformats
         return [
           { label: this.$t('dataset.text'), value: 0 },
diff --git a/frontend/src/views/link/view/index.vue b/frontend/src/views/link/view/index.vue
index 37bda6356e..2070287ccf 100644
--- a/frontend/src/views/link/view/index.vue
+++ b/frontend/src/views/link/view/index.vue
@@ -1,11 +1,18 @@
 <template>
-  <div style="width: 100%;height: 100vh;background-color: #f7f8fa">
+  <div
+    v-loading="dataLoading"
+    style="width: 100%;height: 100vh;background-color: #f7f8fa"
+    :element-loading-text="$t('panel.data_loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(220,220,220,1)"
+  >
     <Preview
       v-if="show"
       :component-data="mainCanvasComponentData"
       :canvas-style-data="canvasStyleData"
       :panel-info="panelInfo"
       :user-id="user"
+      @change-load-status="setLoading"
     />
   </div>
 </template>
@@ -38,7 +45,8 @@ export default {
     return {
       canvasId: 'canvas-main',
       show: false,
-      panelInfo: {}
+      panelInfo: {},
+      dataLoading: false
     }
   },
   computed: {
@@ -55,6 +63,9 @@ export default {
     this.viewLog()
   },
   methods: {
+    setLoading(status) {
+      this.dataLoading = !!status
+    },
     viewLog() {
       const param = {
         panelId: this.resourceId,
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 87628019b9..f6cc43b511 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -644,7 +644,7 @@ export default {
     },
     // 显示视图工具栏
     showViewToolsAside() {
-      return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view')
+      return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
     },
     showBatchViewToolsAside() {
       return this.batchOptStatus
@@ -790,8 +790,8 @@ export default {
     }
   },
   created() {
-    // Global listening for key events
     listenGlobalKeyDown()
+    document.addEventListener('paste', this.passFromClipboard)
   },
   mounted() {
     this.initWatermark()
@@ -808,6 +808,7 @@ export default {
     this.init(this.$store.state.panel.panelInfo.id)
   },
   beforeDestroy() {
+    document.removeEventListener('paste', this.passFromClipboard)
     bus.$off('component-on-drag', this.componentOnDrag)
     // bus.$off('component-dialog-edit', this.editDialog)
     // bus.$off('button-dialog-edit', this.editButtonDialog)
@@ -821,6 +822,14 @@ export default {
     elx && elx.remove()
   },
   methods: {
+    passFromClipboard(event) {
+      // 获取解析 粘贴的文本
+      const text = (event.clipboardData || window.clipboardData).getData('text')
+      if (text && text.includes('datease-component-')) {
+        event.preventDefault()
+        this.$store.commit('passFromClipboard', text.replace('datease-component-', ''))
+      }
+    },
     initWatermark() {
       if (this.panelInfo.watermarkInfo) {
         userLoginInfo().then(res => {