Merge pull request #3926 from dataease/pr@dev@refactor_shortcutkey

refactor(仪表板): 快捷键优化

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -137,7 +137,7 @@
           :target="curComponent.hyperlinks.openMode "
           :href="curComponent.hyperlinks.content "
         >
-          <i class="icon iconfont icon-com-jump" />
+          <i class="icon iconfont icon-com-jump"/>
         </a>
       </span>
 
@@ -243,6 +243,7 @@ export default {
   },
   data() {
     return {
+      systemOS: 'Mac',
       maxImageSize: 15000000,
       boardSetVisible: false,
       linkJumpSetVisible: false,
@@ -362,6 +363,9 @@ export default {
     ])
   },
   mounted() {
+    if (navigator.platform.indexOf('Mac') == -1) {
+      this.systemOS = 'Other'
+    }
     this.initCurFields()
     if (this.element.type === 'view') {
       bus.$on('initCurFields-' + this.element.id, this.initCurFields)

frontend/src/components/canvas/components/editor/SettingMenu.vue

@@ -17,7 +17,8 @@
             v-if="curComponent.type != 'custom-button'"
             icon="el-icon-document-copy"
             @click.native="copy"
-          >{{ $t('panel.copy') }}
+          ><span>{{ $t('panel.copy') }}(<span v-show="systemOS==='Mac'"><i class="icon iconfont icon-command"
+          />+ D</span> <span v-show="systemOS!=='Mac'">Control + D</span>)</span>
           </el-dropdown-item>
           <el-dropdown-item
             icon="el-icon-delete"
@@ -162,6 +163,7 @@ export default {
   components: { CustomTabsSort, HyperlinksDialog },
   data() {
     return {
+      systemOS: 'Mac',
       showCustomSort: false,
       jumpExcludeViewType: [
         'richTextView',
@@ -207,6 +209,11 @@ export default {
       'componentData'
     ])
   },
+  mounted() {
+    if (navigator.platform.indexOf('Mac') == -1) {
+      this.systemOS = 'Other'
+    }
+  },
   methods: {
     openCustomSort() {
       this.showCustomSort = true

frontend/src/components/canvas/utils/shortcutKey.js

@@ -15,7 +15,7 @@ const bKey = 66 // 拆分
 
 const lKey = 76 // 锁定
 
-const dKey = 68 // 删除
+const dKey = 68 // 复制并粘贴
 
 const deleteKey = 46 // 删除
 
@@ -39,7 +39,7 @@ const unlockMap = {
   [xKey]: cut,
   [gKey]: compose,
   [bKey]: decompose,
-  [dKey]: deleteComponent,
+  [dKey]: copyAndPast,
   [deleteKey]: deleteComponent,
   [lKey]: lock,
   [sKey]: save,
@@ -56,7 +56,7 @@ export function listenGlobalKeyDown() {
     if (keyCode === ctrlKey || keyCode === commandKey) {
       isCtrlOrCommandDown = true
     } else if (isCtrlOrCommandDown) {
-      if (keyCode === zKey || keyCode === yKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
+      if (keyCode === zKey || keyCode === yKey || keyCode === dKey || keyCode === sKey || keyCode === enlargeKey) {
         e.preventDefault()
         unlockMap[keyCode]()
       }
@@ -125,6 +125,14 @@ function decompose() {
   }
 }
 
+function copyAndPast() {
+  if (store.state.curComponent) {
+    store.commit('copy')
+    store.commit('paste', false)
+    store.commit('recordSnapshot', 'copyAndPast')
+  }
+}
+
 function deleteComponent() {
   if (store.state.curComponent) {
     store.commit('deleteComponent')

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe644;</span>
+                <div class="name">command</div>
+                <div class="code-name">&amp;#xe644;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe63d;</span>
                 <div class="name">font</div>
@@ -804,9 +810,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1669087400468') format('woff2'),
+  src: url('iconfont.woff2?t=1669699377636') format('woff2'),
-       url('iconfont.woff?t=1669087400468') format('woff'),
+       url('iconfont.woff?t=1669699377636') format('woff'),
-       url('iconfont.ttf?t=1669087400468') format('truetype');
+       url('iconfont.ttf?t=1669699377636') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -832,6 +838,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-command"></span>
+            <div class="name">
+              command
+            </div>
+            <div class="code-name">.icon-command
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-font"></span>
             <div class="name">
@@ -1957,6 +1972,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-command"></use>
+                </svg>
+                <div class="name">command</div>
+                <div class="code-name">#icon-command</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-font"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1669087400468') format('woff2'),
+  src: url('iconfont.woff2?t=1669699377636') format('woff2'),
-       url('iconfont.woff?t=1669087400468') format('woff'),
+       url('iconfont.woff?t=1669699377636') format('woff'),
-       url('iconfont.ttf?t=1669087400468') format('truetype');
+       url('iconfont.ttf?t=1669699377636') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-command:before {
+  content: "\e644";
+}
+
 .icon-font:before {
   content: "\e63d";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1567487",
+      "name": "command",
+      "font_class": "command",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
     {
       "icon_id": "109745",
       "name": "font",

frontend/src/views/panel/edit/index.vue

@@ -798,7 +798,6 @@ export default {
   },
   created() {
     listenGlobalKeyDown()
-    document.addEventListener('paste', this.passFromClipboard)
   },
   mounted() {
     this.initWatermark()
@@ -815,10 +814,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)
     bus.$off('component-dialog-style', this.componentDialogStyle)
     bus.$off('previewFullScreenClose', this.previewFullScreenClose)
     bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
@@ -829,14 +825,6 @@ 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 => {