快捷键定义

src/designer/viewWidgets/modeltree/ModeltreeMeta.ts

@@ -7,6 +7,7 @@ export default defineWidget({
   title: '模型',
   icon: renderIcon('antd ClusterOutlined'),
   side: 'left',
+  shortcut: 'key-F12',
   order: 1,
   component: ModeltreeView
 })

src/designer/viewWidgets/property/PropertyMeta.ts

@@ -6,6 +6,7 @@ export default defineWidget({
   name: 'property',
   title: '属性',
   icon: renderIcon('element Memo'),
+  shortcut: 'key-F4',
   side: 'right',
   order: 1,
   component: PropertyView

src/runtime/DefineWidget.ts

@@ -6,6 +6,7 @@ export interface WidgetOption {
   name: string
   title?: string
   icon: Component
+  shortcut?: string
   side: WidgetSide
   component: Component
   order?: number
@@ -48,6 +49,10 @@ export function getWidgetByName(name: string): WidgetOption | undefined {
   return _widgetMap.get(name)
 }
 
+export function getAllWidget(): WidgetOption[] {
+  return Array.from(_widgetMap.values()).sort((a, b) => (a.order || 0) - (b.order || 0))
+}
+
 /**
  * 定义一个 Widget
  */

src/utils/webutils.ts

@@ -1,9 +1,23 @@
+import _ from 'lodash'
 import { h } from 'vue'
 import * as AntdIcon from '@vicons/antd'
 import { ElIcon } from 'element-plus'
 import * as FaIcon from '@vicons/fa'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+export function normalizeShortKey(key: string): string {
+  // 如果 menu.tip 中包含 ctrl/shift/alt/key- 等修饰键，并且 click 事件存在，则需要使用 hotkeys 绑定
+  if (key && /ctrl|shift|alt|key-/i.test(_.toLower(key))) {
+    // 规格话 tip 描述，比如 ctrl变成^, shift变成⇧, space 变成  alt变成!, key-变成空格
+
+    // key- 可能是 key-r, key-s, 等要处理成 r, s
+    const v = _.toUpper(key.replace(/key-/, ''))
+    console.log(v)
+    debugger
+    return v
+  }
+}
+
 /**
  * 渲染图标
  */

src/views/ModelMain.vue

@@ -20,7 +20,7 @@
         <div class="btns btns-top">
           <template v-for="panel in getWidgetBySide('left')">
             <div class="item" :class="{selected:sectionLeftName===panel.name}" @click="btnLeftMe(panel)"
-                 :title="panel.title">
+                 :title="panel.title + (panel.shortcut?' (' + panel.shortcut + ')':'')">
               <component :is="panel.icon" />
             </div>
           </template>
@@ -28,7 +28,7 @@
         <div class="btns btns-bottom">
           <template v-for="panel in getWidgetBySide('bottom')">
             <div class="item" :class="{selected:sectionBottomName===panel.name}" @click="btnBottomMe(panel)"
-                 :title="panel.title">
+                 :title="panel.title + (panel.shortcut?' (' + panel.shortcut + ')':'')">
               <component :is="panel.icon" />
             </div>
           </template>
@@ -119,7 +119,7 @@
         <div class="btns btns-top">
           <template v-for="panel in getWidgetBySide('right')">
             <div class="item" :class="{selected:sectionRightName===panel.name}" @click="btnRightMe(panel)"
-                 :title="panel.title">
+                 :title="panel.title + (panel.shortcut?' (' + panel.shortcut + ')':'')">
               <component :is="panel.icon" />
             </div>
           </template>
@@ -137,9 +137,10 @@ import Logo from '@/assets/images/logo.png'
 import './ModelMain.less'
 import { ModelMainInit, ModelMainCreated, ModelMainMounted, ModelMainUnmounted } from '@/views/ModelMainInit.js'
 import { getRootMenu } from '@/runtime/DefineMenu.js'
-import { getWidgetByName, getWidgetBySide } from '@/runtime/DefineWidget.js'
+import { getWidgetByName, getWidgetBySide, getAllWidget } from '@/runtime/DefineWidget.js'
 import ModelEditor from '@/designer/ModelEditor.vue'
 import ModelView from '@/designer/ModelView.vue'
+import { normalizeShortKey } from '@/utils/webutils.ts'
 
 ModelMainInit()
 
@@ -150,6 +151,34 @@ export default {
   },
   mounted() {
     ModelMainMounted()
+
+    // 注册 widget 快捷键
+    const allWidget = getAllWidget()
+
+    allWidget.forEach((widget) => {
+      if (widget?.shortcut && widget?.name && widget?.side) {
+        const shortKey = normalizeShortKey(widget.shortcut)
+        widget.shortcut = shortKey
+        if (shortKey) {
+          system.hotkeys(shortKey, (event) => {
+            if (widget.side === 'left') {
+              this.sectionLeftName = widget.name
+              this.hideLeft = false
+
+            } else if (widget.side === 'right') {
+              this.sectionRightName = widget.name
+              this.hideRight = false
+
+            } else if (widget.side === 'bottom') {
+              this.sectionBottomName = widget.name
+              this.hideBottom = false
+            }
+
+            event.preventDefault()
+          })
+        }
+      }
+    })
   },
   unmounted() {
     ModelMainUnmounted()

src/views/ModelMainInit.ts

@@ -12,6 +12,7 @@ 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'
+import { normalizeShortKey } from '@/utils/webutils.ts'
 
 /**
  * 初始化模型编辑器的基础控件
@@ -61,18 +62,15 @@ 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 = _.upperCase(menu.tip.replace(/key-/, ''))
-        menu.tip = keyWithoutKey
-        hotkeys(keyWithoutKey, (event) => {
+      const shortKey = normalizeShortKey(menu.tip)
+      if (shortKey) {
+        menu.tip = shortKey
+        hotkeys(shortKey, (event) => {
           event.preventDefault()
           menu.click()
         })
-        console.log('hotkeys', keyWithoutKey, menu.click)
+        // console.log('hotkeys', menu.tip, menu.click)
       }
     }
   })