feat: 新增快捷键

src/store/modules/action.ts

@@ -18,6 +18,7 @@ type ActionState = {
   // 当前操作索引
   activeIndex: number;
   appKey: number;
+  copyCache: any;
 };
 export const useAcionStore = defineStore({
   id: "action",
@@ -26,6 +27,7 @@ export const useAcionStore = defineStore({
       records: [],
       activeIndex: -1,
       appKey: 0,
+      copyCache: null,
     };
   },
   getters: {
@@ -65,7 +67,6 @@ export const useAcionStore = defineStore({
     },
     /* 重做 */
     actionRedo() {
-      if (this.activeIndex >= this.records.length - 1) return;
       ++this.activeIndex;
       const projectInfo = JSON.parse(this.records[this.activeIndex]);
       this.projectStore.updateProjectInfo(projectInfo);
@@ -316,6 +317,27 @@ export const useAcionStore = defineStore({
       elements?.forEach((item) => {
         this.projectStore.addElement(item, undefined, true);
       });
+    },
+    /* 复制 */
+    actionCopy() {
+      const elements = this.projectStore.currentSelectedElements;
+      this.copyCache = JSON.stringify(elements);
+    },
+    /* 粘贴 */
+    actionPaste() {
+      try {
+        const elements = JSON.parse(this.copyCache);
+        const offsetX = 10;
+        const offsetY = 10;
+        elements.forEach((element: CustomElement) => {
+          element.key = uuid();
+          element.container.props.x += offsetX;
+          element.container.props.y += offsetY;
+          this.projectStore.addElement(element);
+        });
+      } catch (error) {
+        console.log(error);
+      }
     }
   },
 });

src/views/designer/component/MenuBar.vue

@@ -207,6 +207,7 @@ import { AlignEnum } from "@/enum/alignEnum";
 import { LayerEnum } from "@/enum/layerEnum";
 import { useAcionStore } from "@/store/modules/action";
 import { useProjectStore } from "@/store/modules/project";
+import { useKeyPress } from 'vue-hooks-plus';
 
 const actionStore = useAcionStore();
 const projectStore = useProjectStore();
@@ -226,6 +227,24 @@ const handleDeleteElements = () => {
     projectStore.removeElement(key);
   });
 };
+
+/* =========================快捷键=========================== */
+// 撤销/重做
+useKeyPress('ctrl.z', () => !actionStore.undoDisabled && actionStore.actionUndo(), { exactMatch: true });
+useKeyPress('ctrl.shift.z', () => !actionStore.redoDisabled && actionStore.actionRedo(), { exactMatch: true });
+// 组合/取消组合
+useKeyPress('ctrl.g', () => projectStore.selectedElementKeys.length > 1 && actionStore.actionGroup(), { exactMatch: true });
+useKeyPress('ctrl.shift.g', () => !ungroupDisabled.value && actionStore.actionUngroup(), { exactMatch: true });
+// 删除
+useKeyPress('del', () => projectStore.selectedElementKeys.length && handleDeleteElements(), { exactMatch: true });
+// 调整层级
+useKeyPress('ctrl.up', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.UP), { exactMatch: true });
+useKeyPress('ctrl.down', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.DOWN), { exactMatch: true });
+useKeyPress('ctrl.shift.up', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.TOP), { exactMatch: true });
+useKeyPress('ctrl.shift.down', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.BOTTOM), { exactMatch: true });
+// 复制/粘贴
+useKeyPress('ctrl.c', () => projectStore.selectedElementKeys.length && actionStore.actionCopy(), { exactMatch: true });
+useKeyPress('ctrl.v', () => actionStore.actionPaste(), { exactMatch: true });
 </script>
 
 <style scoped></style>

src/views/designer/index.vue

@@ -120,6 +120,17 @@ watch(
   () => loadingPage.value,
   () => {
     appStore.setPageLoading(loadingPage.value);
+  },
+)
+
+watch(
+  () => projectStore.projectInfo.name,
+  (val) => {
+
+    document.title = val || "大屏设计";
+  },
+  {
+    immediate: true
   }
 )