perf: 优化 ctrl 监听

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -172,10 +172,7 @@ export const useMouseHandle = () => {
     e.stopPropagation()
     if (item.status.lock) return
     // 若此时按下了 CTRL, 表示多选
-    if (
-      window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
-      window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)
-    ) {
+    if (window.$KeyboardActive?.ctrl) {
       // 若已选中，则去除
       if (chartEditStore.targetChart.selectId.includes(item.id)) {
         const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
@@ -193,11 +190,7 @@ export const useMouseHandle = () => {
     if (item.status.lock) return
     onClickOutSide()
     // 按下左键 + CTRL
-    if (
-      e.buttons === MouseEventButton.LEFT &&
-      (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
-        window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
-    )
+    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl)
       return
 
     // 按下右键 + 选中多个 + 目标元素是多选子元素

src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue

@@ -142,11 +142,7 @@ const optionsHandle = (
 // 点击
 const clickHandle = (e: MouseEvent) => {
   // 按下左键 + CTRL
-  if (
-    window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
-    window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)
-  )
-    return
+  if (window.$KeyboardActive?.ctrl) return
   // 判断左右键
   expend.value = !expend.value
   mousedownHandle(e, props.componentGroupData)
@@ -157,11 +153,7 @@ const groupMousedownHandle = (e: MouseEvent) => {
   onClickOutSide()
   // 若此时按下了 CTRL, 表示多选
   const id = props.componentGroupData.id
-  if (
-    e.buttons === MouseEventButton.LEFT &&
-    (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
-      window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
-  ) {
+  if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
     // 若已选中，则去除
     if (chartEditStore.targetChart.selectId.includes(id)) {
       const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)

src/views/chart/ContentLayers/index.vue

@@ -166,11 +166,7 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
   onClickOutSide()
   // 若此时按下了 CTRL, 表示多选
   const id = item.id
-  if (
-    e.buttons === MouseEventButton.LEFT &&
-    (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
-      window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
-  ) {
+  if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
     // 若已选中，则去除
     if (chartEditStore.targetChart.selectId.includes(id)) {
       const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
@@ -198,7 +194,6 @@ const changeLayerType = (value: LayerModeEnum) => {
   layerMode.value = value
   chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value)
 }
-
 </script>
 
 <style lang="scss" scoped>

src/views/chart/hooks/useKeyboard.hook.ts

@@ -107,16 +107,17 @@ const macKeyList: Array<string> = [
 
 // 处理键盘记录
 const keyRecordHandle = () => {
-  // 初始化清空
-  if(window.$KeyboardActive) window.$KeyboardActive = new Set([])
-
+  // 默认赋值
+  window.$KeyboardActive = {
+    ctrl: true
+  }
+  
   document.onkeydown = (e: KeyboardEvent) => {
-    if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase())
-    else window.$KeyboardActive = new Set([e.key.toLocaleLowerCase()])
+    if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = true
   }
 
   document.onkeyup = (e: KeyboardEvent) => {
-    if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase())
+    if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = false
   }
 }
 

types/global.d.ts

@@ -6,7 +6,7 @@ interface Window {
   $t: any
   $vue: any
   // 键盘按键记录
-  $KeyboardActive?: Set<string>
+  $KeyboardActive?: { [T: string]: boolean }
 }
 
-declare type Recordable<T = any> = Record<string, T>
+declare type Recordable<T = any> = Record<string, T>