diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index 289774c142..639bb5f740 100644
--- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -274,7 +274,7 @@ export default {
       } else {
         return {
           ...
-            getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
+          getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
           position: 'relative'
         }
       }
diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index 7c523fe88c..9f2dfd1854 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -120,6 +120,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 +352,9 @@ export default {
     }
   },
   created() {
+    if (this.canvasId === 'canvas-main') {
+      listenGlobalKeyDownPreview()
+    }
     // 取消视图请求
     this.$cancelRequest('/chart/view/getData/**')
     this.$cancelRequest('/api/link/viewDetail/**')
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/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 9d34f0a5e5..9b0b7ff39e 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -192,7 +192,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools"/>
+                                <i class="el-icon-s-tools" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -267,7 +267,7 @@
                               @command="chartFieldEdit"
                             >
                               <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools"/>
+                                <i class="el-icon-s-tools" />
                               </span>
                               <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item
@@ -362,7 +362,7 @@
                           style="padding: 6px;"
                         >
                           {{ $t('chart.change_chart_type') }}
-                          <i class="el-icon-caret-bottom"/>
+                          <i class="el-icon-caret-bottom" />
                         </el-button>
                       </el-popover>
                     </span>
@@ -490,8 +490,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                            $t('chart.drag_block_table_data_column')
-                          }}</span>
+                          $t('chart.drag_block_table_data_column')
+                        }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_type_axis') }}</span>
@@ -499,18 +499,18 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_label') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                            $t('chart.drag_block_funnel_split')
-                          }}</span>
+                          $t('chart.drag_block_funnel_split')
+                        }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_label')
-                          }}</span>
+                          $t('chart.drag_block_radar_label')
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                         <span v-else-if="view.type && view.type.includes('treemap')">{{
-                            $t('chart.drag_block_treemap_label')
-                          }}</span>
+                          $t('chart.drag_block_treemap_label')
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_label')
-                          }}</span>
+                          $t('chart.drag_block_word_cloud_label')
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@@ -633,8 +633,8 @@
                     >
                       <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
-                            $t('chart.drag_block_table_data_column')
-                          }}</span>
+                          $t('chart.drag_block_table_data_column')
+                        }}</span>
                         <span
                           v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
                         >{{ $t('chart.drag_block_value_axis') }}</span>
@@ -642,30 +642,30 @@
                           v-else-if="view.type && view.type.includes('pie')"
                         >{{ $t('chart.drag_block_pie_angel') }}</span>
                         <span v-else-if="view.type && view.type.includes('funnel')">{{
-                            $t('chart.drag_block_funnel_width')
-                          }}</span>
+                          $t('chart.drag_block_funnel_width')
+                        }}</span>
                         <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_length')
-                          }}</span>
+                          $t('chart.drag_block_radar_length')
+                        }}</span>
                         <span v-else-if="view.type && view.type.includes('gauge')">{{
-                            $t('chart.drag_block_gauge_angel')
-                          }}</span>
+                          $t('chart.drag_block_gauge_angel')
+                        }}</span>
                         <span
                           v-else-if="view.type && view.type.includes('text')"
                         >{{ $t('chart.drag_block_label_value') }}</span>
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                         <span v-else-if="view.type && view.type.includes('tree')">{{
-                            $t('chart.drag_block_treemap_size')
-                          }}</span>
+                          $t('chart.drag_block_treemap_size')
+                        }}</span>
                         <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                            $t('chart.drag_block_value_axis_main')
-                          }}</span>
+                          $t('chart.drag_block_value_axis_main')
+                        }}</span>
                         <span
                           v-else-if="view.type && view.type === 'liquid'"
                         >{{ $t('chart.drag_block_progress') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_size')
-                          }}</span>
+                          $t('chart.drag_block_word_cloud_size')
+                        }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
                         <i
@@ -1116,7 +1116,7 @@
           class="padding-tab"
           style="width: 350px;"
         >
-          <position-adjust/>
+          <position-adjust />
         </el-tab-pane>
 
       </el-tabs>
@@ -1268,7 +1268,7 @@
       width="800px"
       class="dialog-css"
     >
-      <quota-filter-editor :item="quotaItem"/>
+      <quota-filter-editor :item="quotaItem" />
       <div
         slot="footer"
         class="dialog-footer"
@@ -1295,7 +1295,7 @@
       width="800px"
       class="dialog-css"
     >
-      <dimension-filter-editor :item="dimensionItem"/>
+      <dimension-filter-editor :item="dimensionItem" />
       <div
         slot="footer"
         class="dialog-footer"
diff --git a/frontend/src/views/chart/view/PositionAdjust.vue b/frontend/src/views/chart/view/PositionAdjust.vue
index e8332c8a9d..37023bb46c 100644
--- a/frontend/src/views/chart/view/PositionAdjust.vue
+++ b/frontend/src/views/chart/view/PositionAdjust.vue
@@ -30,8 +30,8 @@
             type="number"
             :min="0"
             :max="maxLeft"
-            @change="leftOnChange"
             class="hide-icon-number"
+            @change="leftOnChange"
           >
             <template slot="append">px</template>
           </el-input>
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 90591d6124..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 },
@@ -852,7 +852,7 @@ export default {
           },
           { label: this.$t('dataset.location'), value: 5 }
         ]
-      }else {
+      } else {
         return [
           { label: this.$t('dataset.text'), value: 0 },
           { label: this.$t('dataset.time'), value: 1 },
@@ -870,7 +870,7 @@ export default {
       item.deType = item.deTypeCascader[0]
       if (item.deTypeCascader.length === 2) { // 时间
         item.dateFormatType = item.deTypeCascader[1]
-        if(item.dateFormatType !== 'custom'){
+        if (item.dateFormatType !== 'custom') {
           item.dateFormat = item.dateFormatType
         }
       }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 41080baef7..f6cc43b511 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -165,8 +165,8 @@
               v-show=" show &&showIndex===1"
               :canvas-id="canvasId"
             />
-            <subject-setting v-show=" show &&showIndex===2"/>
-            <assist-component v-show=" show &&showIndex===3"/>
+            <subject-setting v-show=" show &&showIndex===2" />
+            <assist-component v-show=" show &&showIndex===3" />
           </div>
         </el-drawer>
         <!--PC端画布区域-->
@@ -181,7 +181,7 @@
           :canvas-pid="'0'"
           @canvasScroll="canvasScroll"
         >
-          <canvas-opt-bar slot="optBar"/>
+          <canvas-opt-bar slot="optBar" />
         </de-canvas>
         <!--移动端画布区域 保持宽高比2.5-->
         <el-row
@@ -197,7 +197,7 @@
               :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
             >
-              <el-row class="this_mobile_canvas_top"/>
+              <el-row class="this_mobile_canvas_top" />
               <el-row class="this_mobile_canvas_inner_top">
                 {{ panelInfo.name }}
               </el-row>
@@ -215,7 +215,7 @@
                   :canvas-pid="'0'"
                   :mobile-layout-status="true"
                 >
-                  <canvas-opt-bar slot="optBar"/>
+                  <canvas-opt-bar slot="optBar" />
                 </de-canvas>
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
@@ -245,14 +245,14 @@
                   />
                 </el-col>
               </el-row>
-              <el-row class="this_mobile_canvas_bottom"/>
+              <el-row class="this_mobile_canvas_bottom" />
             </div>
           </el-col>
           <el-col
             :span="16"
             class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
           >
-            <component-wait/>
+            <component-wait />
           </el-col>
         </el-row>
       </de-main-container>
@@ -270,7 +270,7 @@
           />
         </div>
         <div v-if="showBatchViewToolsAside">
-          <chart-style-batch-set/>
+          <chart-style-batch-set />
         </div>
         <div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
           <el-row style="height: 40px">
@@ -283,11 +283,10 @@
                 @click="changeRightDrawOpen(false)"
               />
             </el-tooltip>
-            <span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px"
-            >{{ $t('panel.position_adjust') }}</span>
+            <span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px">{{ $t('panel.position_adjust') }}</span>
           </el-row>
           <el-row>
-            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix"/>
+            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix" />
           </el-row>
         </div>
       </div>
@@ -446,8 +445,7 @@
           />
         </el-col>
         <el-col :span="21">
-          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
-          >{{ $t('panel.panel_cache_use_tips') }}</span>
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
         </el-col>
       </el-row>
       <div
@@ -646,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
@@ -792,8 +790,8 @@ export default {
     }
   },
   created() {
-    // Global listening for key events
     listenGlobalKeyDown()
+    document.addEventListener('paste', this.passFromClipboard)
   },
   mounted() {
     this.initWatermark()
@@ -810,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)
@@ -823,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 => {
@@ -963,11 +970,11 @@ export default {
     showPanel(type) {
       if (this.showIndex === -1 || this.showIndex === type) {
         this.$nextTick(() => {
-            if (this.show) {
-              this.showIndex === -1
-            }
-            this.show = !this.show
+          if (this.show) {
+            this.showIndex === -1
           }
+          this.show = !this.show
+        }
         )
       }
       this.showIndex = type
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 3ae5ce2a0d..2ece545af3 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -174,7 +174,7 @@
                   />
                 </span>
                 <span v-if="data.nodeType === 'folder'">
-                  <svg-icon icon-class="scene"/>
+                  <svg-icon icon-class="scene" />
                 </span>
                 <span
                   :class="data.status"
@@ -211,7 +211,7 @@
                       <el-dropdown-item
                         :command="beforeClickEdit('folder', 'new', data, node)"
                       >
-                        <svg-icon icon-class="scene"/>
+                        <svg-icon icon-class="scene" />
                         <span style="margin-left: 5px">{{ $t('panel.groupAdd') }}</span>
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -334,7 +334,7 @@
             :label="$t('commons.name')"
             prop="name"
           >
-            <el-input v-model="groupForm.name"/>
+            <el-input v-model="groupForm.name" />
           </el-form-item>
         </el-form>
         <div
@@ -345,8 +345,8 @@
             size="mini"
             @click="close()"
           >{{
-              $t('panel.cancel')
-            }}
+            $t('panel.cancel')
+          }}
           </el-button>
           <el-button
             type="primary"
@@ -422,8 +422,8 @@
             size="mini"
             @click="closeMoveGroup()"
           >{{
-              $t('dataset.cancel')
-            }}
+            $t('dataset.cancel')
+          }}
           </el-button>
           <el-button
             :disabled="groupMoveConfirmDisabled"