🆕 添加键盘快捷键功能和快捷键导航

2026-01-09 21:48:11 +00:00 · 2020-12-04 22:48:45 +08:00 · 2020-12-04 22:48:45 +08:00 · 17423fa5e0
commit 17423fa5e0
parent 932c9bb816
12 changed files with 130 additions and 50 deletions
--- a/package.json
+++ b/package.json
@ -68,6 +68,7 @@
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.2",
    "http-server": "^0.12.3",
+    "keymaster": "^1.6.2",
    "qrcode.react": "^1.0.0",
    "react": "^16.12.0",
    "react-codemirror2": "^7.2.1",
--- a/src/components/BasicShop/BasicComponents/Carousel/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Carousel/schema.ts
@ -79,7 +79,7 @@ const Carousel: ICarouselSchema = {
            uid: '001',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/1_1740bd7c3dc.png',
+            url: 'http://49.234.61.19/uploads/1_1740bd7c3dc.png',
          },
        ],
      },
@ -93,7 +93,7 @@ const Carousel: ICarouselSchema = {
            uid: '001',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/2_1740bd8d525.png',
+            url: 'http://49.234.61.19/uploads/2_1740bd8d525.png',
          },
        ],
      },
--- a/src/components/BasicShop/BasicComponents/Header/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Header/schema.ts
@ -70,7 +70,7 @@ const Header: IHeaderSchema = {
        uid: '001',
        name: 'image.png',
        status: 'done',
-        url: 'http://io.nainor.com/uploads/3_1740be8a482.png',
+        url: 'http://49.234.61.19/uploads/3_1740be8a482.png',
      },
    ],
    logoText: '页头Header',
--- a/src/components/BasicShop/BasicComponents/Image/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Image/schema.ts
@ -177,7 +177,7 @@ const Image: IImageSchema = {
        uid: '001',
        name: 'image.png',
        status: 'done',
-        url: 'http://io.nainor.com/uploads/bg_174e470dc22.png',
+        url: 'http://49.234.61.19/uploads/bg_174e470dc22.png',
      },
    ],
    round: 0,
--- a/src/components/BasicShop/BasicComponents/List/schema.ts
+++ b/src/components/BasicShop/BasicComponents/List/schema.ts
@ -90,7 +90,7 @@ const List: IListSchema = {
            uid: '001',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
+            url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
          },
        ],
      },
@ -104,7 +104,7 @@ const List: IListSchema = {
            uid: '002',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
+            url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
          },
        ],
      },
--- a/src/components/BasicShop/BasicComponents/Tab/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Tab/schema.ts
@ -77,7 +77,7 @@ const Tab: ITabSchema = {
            uid: '001',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
+            url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
          },
        ],
      },
@ -92,7 +92,7 @@ const Tab: ITabSchema = {
            uid: '001',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/2_1740c7033a9.png',
+            url: 'http://49.234.61.19/uploads/2_1740c7033a9.png',
          },
        ],
      },
@ -107,7 +107,7 @@ const Tab: ITabSchema = {
            uid: '001',
            name: 'image.png',
            status: 'done',
-            url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
+            url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
          },
        ],
      },
--- a/src/pages/document.ejs
+++ b/src/pages/document.ejs
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <link href="http://io.nainor.com/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
+    <link href="http://49.234.61.19/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5编辑器之神-Dooring</title>
    <meta name="description" content="Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">
--- a/src/pages/editor/Container.tsx
+++ b/src/pages/editor/Container.tsx
@ -16,9 +16,9 @@ import Calibration from 'components/Calibration';
 import DynamicEngine, { componentsType } from 'components/DynamicEngine';
 import FormEditor from 'components/PanelComponents/FormEditor';

-import template1 from 'components/BasicShop/BasicComponents/template';
-import mediaTpl1 from 'components/BasicShop/MediaComponents/template';
-import graphTpl1 from 'components/BasicShop/VisualComponents/template';
+import template from 'components/BasicShop/BasicComponents/template';
+import mediaTpl from 'components/BasicShop/MediaComponents/template';
+import graphTpl from 'components/BasicShop/VisualComponents/template';

 import schemaH5 from 'components/BasicShop/schema';
 import { ActionCreators, StateWithHistory } from 'redux-undo';
@ -56,30 +56,6 @@ const Container = (props: {
  const context = useContext(dooringContext);
  const curPoint = pstate ? pstate.curPoint : {};

-  const template = useMemo(() => {
-    if (context.theme === 'h5') {
-      return template1;
-    } else {
-      return template2;
-    }
-  }, [context.theme]);
-
-  const mediaTpl = useMemo(() => {
-    if (context.theme === 'h5') {
-      return mediaTpl1;
-    } else {
-      return mediaTpl2;
-    }
-  }, [context.theme]);
-
-  const graphTpl = useMemo(() => {
-    if (context.theme === 'h5') {
-      return graphTpl1;
-    } else {
-      return graphTpl2;
-    }
-  }, [context.theme]);
-
  // 指定画布的id
  let canvasId = 'js_canvas';

@ -170,7 +146,7 @@ const Container = (props: {
    };
  }, [dispatch]);

-  const importTpl = data => {
+  const importTpl = (data: any) => {
    dispatch({
      type: 'editorModal/importTplData',
      payload: data,
--- a/src/pages/editor/components/CanvasControl/index.less
+++ b/src/pages/editor/components/CanvasControl/index.less
@ -1,8 +1,8 @@
 .sliderWrap {
  position: absolute;
  display: inline-block;
-  right: 10px;
-  bottom: 10px;
+  right: 46px;
+  bottom: 100px;
  height: 32px;
  line-height: 30px;
  background: #ffffff;
@ -35,3 +35,30 @@
    }
  }
 }
+.fastMenu {
+  .boardTit {
+    text-align: center;
+    line-height: 2;
+    font-weight: bold;
+  }
+  .keyRow {
+    margin: 10px;
+    display: flex;
+    .key {
+      margin-right: 30px;
+      code {
+        display: inline-block;
+        border: 1px solid #f0f0f0;
+        border-radius: 2px;
+        padding: 0 3px;
+        color: rgba(94, 41, 41, 0.6);
+        font-size: 12px;
+        margin-right: 3px;
+      }
+    }
+    .text {
+      margin-left: auto;
+      color: #888;
+    }
+  }
+}
--- a/src/pages/editor/components/CanvasControl/index.tsx
+++ b/src/pages/editor/components/CanvasControl/index.tsx
@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
-import { ExpandOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Popover } from 'antd';
+import { ExpandOutlined, InsertRowBelowOutlined } from '@ant-design/icons';
 import styles from './index.less';

 interface CanvasControlProps {
@ -8,27 +9,53 @@ interface CanvasControlProps {
  backSize(event: MouseEvent<HTMLDivElement>): void;
 }

+const fastMenu = (
+  <div className={styles.fastMenu}>
+    <div className={styles.boardTit}>快捷键</div>
+    <div className={styles.keyRow}>
+      <span className={styles.key}>
+        <code>command + c</code>
+        <code>ctrl + c</code>
+      </span>
+      <span className={styles.text}>复制组件</span>
+    </div>
+    <div className={styles.keyRow}>
+      <span className={styles.key}>
+        <code>delete</code>
+        <code>backspace</code>
+      </span>
+      <span className={styles.text}>删除组件</span>
+    </div>
+  </div>
+);
+
 const CanvasControl = (props: CanvasControlProps) => {
  const { scaleNum, handleSlider, backSize } = props;
+  console.log(scaleNum);
  return (
    <div className={styles.sliderWrap}>
      <span
        className={styles.sliderBtn}
        onClick={handleSlider.bind(this, 1)}
        style={
-          scaleNum === 1 ? { pointerEvents: 'none' } : { display: 'initial', marginLeft: '13px' }
+          scaleNum === 1.5 ? { pointerEvents: 'none' } : { display: 'initial', marginLeft: '13px' }
        }
      >
        +
      </span>
-      <span>{scaleNum * 100}%</span>
+      <span>{Math.floor(scaleNum * 10) * 10}%</span>
      <span
        className={styles.sliderBtn}
-        style={scaleNum === 0.1 ? { pointerEvents: 'none' } : { display: 'initial' }}
+        style={scaleNum === 0.5 ? { pointerEvents: 'none' } : { display: 'initial' }}
        onClick={handleSlider.bind(this, 0)}
      >
        -
      </span>
+      <span className={styles.backSize}>
+        <Popover placement="bottom" title={null} content={fastMenu} trigger="hover">
+          <InsertRowBelowOutlined />
+        </Popover>
+      </span>
      <span className={styles.backSize}>
        <ExpandOutlined onClick={backSize} />
      </span>
--- a/src/pages/editor/models/editorModal.js
+++ b/src/pages/editor/models/editorModal.js
@ -1,12 +1,10 @@
 /*
- * @Description:
- * @Version: 2.0
- * @Autor: dragon
- * @Date: 2020-09-24 10:11:24
- * @LastEditors: dragon
- * @LastEditTime: 2020-10-08 16:12:26
+ * @Description: 添加键盘快捷键
+ * @Version: 2.1
+ * @Autor: xuxiaoxi
 */
 import { uuid } from '@/utils/tool';
+import key from 'keymaster';
 const pointData = localStorage.getItem('userData') || '[]';

 function overSave(name, data) {
@ -78,6 +76,38 @@ export default {
        curPoint: null,
      };
    },
+    keyboardCopyPointData(state) {
+      if (state.curPoint) {
+        const { id } = state.curPoint;
+        const pointData = [];
+        state.pointData.forEach(item => {
+          pointData.push({ ...item });
+          if (item.id === id) {
+            pointData.push({ ...item, id: uuid(6, 10) });
+          }
+        });
+        overSave('userData', pointData);
+
+        return {
+          ...state,
+          pointData,
+        };
+      }
+      return state;
+    },
+    keyboardDelPointData(state) {
+      if (state.curPoint) {
+        const { id } = state.curPoint;
+        const pointData = state.pointData.filter(item => item.id !== id);
+        overSave('userData', pointData);
+        return {
+          ...state,
+          pointData,
+          curPoint: null,
+        };
+      }
+      return state;
+    },
    clearAll(state) {
      overSave('userData', []);
      return {
@ -92,5 +122,19 @@ export default {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {});
    },
+    keyEvent({ dispatch, state }) {
+      // 复制
+      key('⌘+c, ctrl+c', () => {
+        dispatch({
+          type: 'editorModal/keyboardCopyPointData',
+        });
+      });
+      // 删除
+      key('delete, backspace', () => {
+        dispatch({
+          type: 'editorModal/keyboardDelPointData',
+        });
+      });
+    },
  },
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -8774,6 +8774,11 @@ keygrip@~1.1.0:
  dependencies:
    tsscmp "1.0.6"

+keymaster@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/keymaster/-/keymaster-1.6.2.tgz#e1ae54d0ea9488f9f60b66b668f02e9a1946c6eb"
+  integrity sha1-4a5U0OqUiPn2C2a2aPAumhlGxus=
+
 keyv@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"