快捷键定义

package.json

@@ -20,6 +20,7 @@
     "dat.gui": "^0.7.9",
     "decimal.js": "^10.5.0",
     "element-plus": "^2.9.10",
+    "hotkeys-js": "^3.13.10",
     "jquery": "^3.6.0",
     "less": "^4.2.1",
     "localforage": "^1.10.0",

src/components/viewMenus/editMenu/EditMenu.ts

@@ -1,63 +0,0 @@
-import { renderIcon } from '@/utils/webutils.ts'
-import { defineMenu } from '@/runtime/DefineMenu.ts'
-import SvgCode from '@/components/icons/SvgCode'
-
-export default defineMenu((menus) => {
-  menus.insertChildren('modelFile',
-    {
-      name: 'modelFile',
-      label: '编辑',
-      icon: renderIcon('ModelFile'),
-      order: 1
-    },
-    [
-      {
-        name: 'find', label: '查找', icon: SvgCode.find, order: 1, tip: 'Ctrl+F', divided: true,
-        click: () => {
-          system.msg('查找')
-        }
-      },
-      {
-        name: 'undo', label: '撤销', icon: SvgCode.undo, order: 2, tip: 'Ctrl+Z', disabled: true,
-        click: () => {
-          system.msg('撤销')
-        }
-      },
-      {
-        name: 'redo', label: '重做', icon: SvgCode.redo, order: 3, tip: 'Ctrl+Y', divided: true,
-        disabled() {
-          return true
-        },
-        click() {
-          system.msg('重做')
-        }
-      },
-      {
-        name: 'copy', label: '复制', icon: SvgCode.copy, order: 4, tip: 'Ctrl+C',
-        disabled() {
-          return true
-        },
-        click() {
-          system.msg('复制')
-        }
-      },
-      {
-        name: 'cut', label: '剪切', icon: SvgCode.cut, order: 5, tip: 'Ctrl+X',
-        disabled() {
-          return true
-        },
-        click() {
-          system.msg('剪切')
-        }
-      },
-      {
-        name: 'paste', label: '粘贴', icon: SvgCode.paste, order: 6, tip: 'Ctrl+V',
-        disabled() {
-          return true
-        },
-        click() {
-          system.msg('粘贴')
-        }
-      }
-    ])
-})

src/designer/Designer.ts

@@ -0,0 +1,3 @@
+export default class Designer {
+
+}

src/designer/ModelView.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="section-canvas">
+    <div class="section-content"></div>
+  </div>
+</template>
+<script>
+export default {}
+</script>

src/designer/menus/EditMenu.ts

@@ -0,0 +1,110 @@
+import { renderIcon } from '@/utils/webutils.ts'
+import { defineMenu } from '@/runtime/DefineMenu.ts'
+import SvgCode from '@/components/icons/SvgCode'
+
+export default defineMenu((menus) => {
+  menus.insertChildren('modelFile',
+    {
+      name: 'modelFile',
+      label: '编辑',
+      icon: renderIcon('ModelFile'),
+      order: 1
+    },
+    [
+      {
+        name: 'find', label: '全局查找', icon: SvgCode.find, order: 1, tip: 'Ctrl+H',
+        click: () => {
+          system.msg('全局查找')
+        }
+      },
+      {
+        name: 'resource', label: '资源定位', icon: SvgCode.find, order: 1.1, tip: 'Ctrl+Shift+R', divided: true,
+        click: () => {
+          system.msg('资源定位')
+        }
+      },
+      {
+        name: 'undo', label: '撤销', icon: SvgCode.undo, order: 2, tip: 'Ctrl+Z', disabled: true,
+        click: () => {
+          system.msg('撤销')
+        }
+      },
+      {
+        name: 'redo', label: '重做', icon: SvgCode.redo, order: 3, tip: 'Ctrl+Y', divided: true,
+        click() {
+          system.msg('重做')
+        }
+      },
+      {
+        name: 'copy', label: '复制', icon: SvgCode.copy, order: 4, tip: 'Ctrl+C',
+        click() {
+          system.msg('复制')
+        }
+      },
+      {
+        name: 'cut', label: '剪切', icon: SvgCode.cut, order: 5, tip: 'Ctrl+X',
+        click() {
+          system.msg('剪切')
+        }
+      },
+      {
+        name: 'paste', label: '粘贴', icon: SvgCode.paste, order: 6, tip: 'Ctrl+V',
+        click() {
+          system.msg('粘贴')
+        }
+      },
+      {
+        name: 'delete', label: '删除', icon: SvgCode.delete, order: 7, tip: 'key-delete', divided: true,
+        click() {
+          system.msg('删除')
+        }
+      },
+      {
+        name: 'edit_property', label: '快速转换', order: 8,
+        children: [
+          {
+            name: 'edit_property_esc', label: '取消', order: 1, tip: 'key-esc',
+            click() {
+              system.msg('ESC')
+            }
+          },
+          {
+            name: 'edit_property_rotate', label: '转向90度', order: 1, tip: 'key-r',
+            click() {
+              system.msg('转向90度')
+            }
+          },
+          {
+            name: 'edit_append', label: '快速添加', tip: 'key-q',
+            click() {
+              system.msg('快速添加')
+            }
+          },
+          {
+            name: 'edit_up', label: '上移', tip: 'key-up',
+            click() {
+              system.msg('↑')
+            }
+          },
+          {
+            name: 'edit_down', label: '下移', tip: 'key-down',
+            click() {
+              system.msg('↓')
+            }
+          },
+          {
+            name: 'edit_left', label: '左移', tip: 'key-left',
+            click() {
+              system.msg('←')
+            }
+          },
+          {
+            name: 'edit_right', label: '右移', tip: 'key-right',
+            click() {
+              system.msg('→')
+            }
+          }
+        ]
+      }
+    ])
+})

src/runtime/DefineMenu.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue'
+import _ from 'lodash'
 
 export interface MenuOption {
   name: string
@@ -72,6 +72,26 @@ export function getChildrenMenu(name: string) {
 }
 
 /**
+ * 遍历菜单
+ * @param callback 回调函数
+ */
+export function forEachMenu(callback: (menu: MenuOption) => void) {
+  // 递归遍历菜单
+  const traverse = (menu: MenuOption) => {
+    callback(menu)
+    if (menu.children) {
+      _.forEach(menu.children, (child) => {
+        traverse(child)
+      })
+    }
+  }
+
+  _.forEach(_menus.menus, (menu) => {
+    traverse(menu)
+  })
+}
+
+/**
  * 定义一个 Widget
  */
 export function defineMenu(func: (menus: Menus) => void): MenuDefineResult {

src/runtime/System.ts

@@ -2,6 +2,7 @@ import $ from 'jquery'
 import _ from 'lodash'
 import localforage from 'localforage'
 import JSON5 from 'json5'
+import hotkeys from 'hotkeys-js'
 import { defineComponent, h, markRaw, nextTick, reactive, toRaw, unref, type App, createApp } from 'vue'
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
 import { QuestionFilled } from '@element-plus/icons-vue'
@@ -20,6 +21,8 @@ export default class System {
   markRaw = markRaw
   reactive = reactive
   renderIcon = renderIcon
+  hotkeys = hotkeys
+  localforage = localforage
 
   JSON5 = JSON5
   json5 = JSON5

src/utils/webutils.ts

@@ -1,5 +1,4 @@
-import _ from 'lodash'
-import { type Component, h, toRaw } from 'vue'
+import { h } from 'vue'
 import * as AntdIcon from '@vicons/antd'
 import { ElIcon } from 'element-plus'
 import * as FaIcon from '@vicons/fa'

src/views/ModelMain.vue

@@ -64,6 +64,9 @@
                 <el-tab-pane label="2D视图" name="ModelEditor" lazy>
                   <ModelEditor />
                 </el-tab-pane>
+                <el-tab-pane label="3D视图" name="ModelView" lazy>
+                  <ModelView />
+                </el-tab-pane>
                 <el-tab-pane label="模型属性" name="ModelFile" lazy>
                   <el-empty description="暂无数据" />
                 </el-tab-pane>
@@ -115,7 +118,7 @@
       <div class="btns-toolbar btns-toolbar-right">
         <div class="btns btns-top">
           <template v-for="panel in getWidgetBySide('right')">
-            <div class="item" :class="{selected:sectionRightTitle===panel.name}" @click="btnRightMe(panel)"
+            <div class="item" :class="{selected:sectionRightName===panel.name}" @click="btnRightMe(panel)"
                  :title="panel.title">
               <component :is="panel.icon" />
             </div>
@@ -132,16 +135,24 @@ import SplitArea from '@/components/split/split-area.vue'
 
 import Logo from '@/assets/images/logo.png'
 import './ModelMain.less'
-import ModelMainInit from '@/views/ModelMainInit.js'
+import { ModelMainInit, ModelMainCreated, ModelMainMounted, ModelMainUnmounted } from '@/views/ModelMainInit.js'
 import { getRootMenu } from '@/runtime/DefineMenu.js'
 import { getWidgetByName, getWidgetBySide } from '@/runtime/DefineWidget.js'
-import ModelEditor from '@/views/modeleditor/ModelEditor.vue'
+import ModelEditor from '@/designer/ModelEditor.vue'
+import ModelView from '@/designer/ModelView.vue'
 
 ModelMainInit()
 
 export default {
-  components: { ModelEditor, Split, SplitArea },
+  components: { ModelEditor, ModelView, Split, SplitArea },
+  created() {
+    ModelMainCreated()
+  },
   mounted() {
+    ModelMainMounted()
+  },
+  unmounted() {
+    ModelMainUnmounted()
   },
   data() {
     return {

src/views/ModelMainInit.ts

@@ -1,19 +1,22 @@
-import AlarmMeta from '@/components/viewWidgets/alarm/AlarmMeta'
-import LoggerMeta from '@/components/viewWidgets/logger/LoggerMeta'
-import ModeltreeMeta from '@/components/viewWidgets/modeltree/ModeltreeMeta'
-import MonitorMeta from '@/components/viewWidgets/monitor/MonitorMeta'
-import PropertyMeta from '@/components/viewWidgets/property/PropertyMeta'
-import ScriptMeta from '@/components/viewWidgets/script/ScriptMeta'
-import TaskMeta from '@/components/viewWidgets/task/TaskMeta'
-import ToolboxMeta from '@/components/viewWidgets/toolbox/ToolboxMeta'
-
-import FileMenu from '@/components/viewMenus/fileMenu/FileMenu'
-import EditMenu from '@/components/viewMenus/editMenu/EditMenu'
+import _ from 'lodash'
+import hotkeys from 'hotkeys-js'
+import AlarmMeta from '@/designer/viewWidgets/alarm/AlarmMeta'
+import LoggerMeta from '@/designer/viewWidgets/logger/LoggerMeta'
+import ModeltreeMeta from '@/designer/viewWidgets/modeltree/ModeltreeMeta'
+import MonitorMeta from '@/designer/viewWidgets/monitor/MonitorMeta'
+import PropertyMeta from '@/designer/viewWidgets/property/PropertyMeta'
+import ScriptMeta from '@/designer/viewWidgets/script/ScriptMeta'
+import TaskMeta from '@/designer/viewWidgets/task/TaskMeta'
+import ToolboxMeta from '@/designer/viewWidgets/toolbox/ToolboxMeta'
+
+import FileMenu from '@/designer/menus/FileMenu.ts'
+import EditMenu from '@/designer/menus/EditMenu.ts'
+import { forEachMenu } from '@/runtime/DefineMenu.ts'
 
 /**
  * 初始化模型编辑器的基础控件
  */
-export default function ModelMainInit() {
+export function ModelMainInit() {
   AlarmMeta.install()
   LoggerMeta.install()
   ModeltreeMeta.install()
@@ -25,4 +28,56 @@ export default function ModelMainInit() {
 
   FileMenu.install()
   EditMenu.install()
+
+  // hotkeys('ctrl+s', (event) => {
+  //   system.msg('ctrl+s')
+  //   event.preventDefault()
+  // })
+  // hotkeys('ctrl+c', (event) => {
+  //   system.msg('ctrl+c')
+  //   event.preventDefault()
+  // })
+  // hotkeys('ctrl+v', (event) => {
+  //   system.msg('ctrl+v')
+  //   event.preventDefault()
+  // })
+  // hotkeys('ctrl+a', (event) => {
+  //   system.msg('ctrl+a')
+  //   event.preventDefault()
+  // })
+  // hotkeys('up', (event) => {
+  //   system.msg('ArrowUp')
+  //   event.preventDefault()
+  // })
+  // hotkeys('left', (event) => {
+  //   system.msg('ArrowLeft')
+  //   event.preventDefault()
+  // })
+}
+
+export function ModelMainCreated() {
+}
+
+export function ModelMainMounted() {
+  forEachMenu((menu) => {
+    if (typeof menu.click === 'function') {
+      // 如果 menu.tip 中包含 ctrl/shift/alt/key- 等修饰键，并且 click 事件存在，则需要使用 hotkeys 绑定
+      if (menu.tip && /ctrl|shift|alt|key-/i.test(_.toLower(menu.tip))) {
+        // 规格话 tip 描述，比如 ctrl变成^, shift变成⇧, space 变成  alt变成!, key-变成空格
+
+        // key- 可能是 key-r, key-s, 等要处理成 r, s
+        const keyWithoutKey = menu.tip.replace(/key-/, '')
+        hotkeys(keyWithoutKey, (event) => {
+          event.preventDefault()
+          menu.click()
+        })
+        console.log('hotkeys', keyWithoutKey, menu.click)
+      }
+    }
+  })
+}
+
+export function ModelMainUnmounted() {
+  // 移除所有的热键绑定 unbind all
+  hotkeys.unbind()
 }

yarn.lock

@@ -1442,6 +1442,11 @@ hookable@^5.5.3:
   resolved "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz#6cfc358984a1ef991e2518cb9ed4a778bbd3215d"
   integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
 
+hotkeys-js@^3.13.10:
+  version "3.13.10"
+  resolved "http://mirrors.cloud.tencent.com/npm/hotkeys-js/-/hotkeys-js-3.13.10.tgz#429105d76c534b91e65a1e53b92b18447ec82455"
+  integrity sha512-O3ktQfRV5eMDCIxj60enw5FBLQfTiRnX6evXn3UFeWylIcHAXwRkRTeiGX8dg3MKaM7y3SNj6PmcCxrwuoIBtA==
+
 human-signals@^8.0.0:
   version "8.0.1"
   resolved "https://registry.npmmirror.com/human-signals/-/human-signals-8.0.1.tgz#f08bb593b6d1db353933d06156cedec90abe51fb"