From 971b03620a425726b9c8aa1215c77ef8188fcc99 Mon Sep 17 00:00:00 2001
From: jiangcheng <1141845963@qq.com>
Date: Wed, 12 Oct 2022 11:30:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=BC=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Bars/BarCommon/config.vue          | 54 +++++--------------
 .../Charts/Bars/BarCommon/index.vue           |  2 +-
 .../Charts/Bars/BarCrossrange/index.vue       |  2 +-
 .../Charts/Lines/LineCommon/index.vue         |  2 +-
 .../Lines/LineGradientSingle/config.vue       | 50 +++++------------
 .../Charts/Scatters/ScatterCommon/index.vue   |  2 +-
 .../chart/ContentEdit/hooks/useDrag.hook.ts   | 11 +---
 .../components/LayersGroupListItem/index.vue  | 12 +----
 src/views/chart/ContentLayers/index.vue       |  7 +--
 src/views/chart/hooks/useKeyboard.hook.ts     | 13 ++---
 types/global.d.ts                             |  4 +-
 11 files changed, 46 insertions(+), 113 deletions(-)

diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue
index 64f42591..a8b3a525 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/config.vue
@@ -1,19 +1,10 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    :name="`柱状图-${index + 1}`"
-    :expanded="true"
-  >
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.itemStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
       </SettingItem>
       <SettingItem>
         <n-button size="small" @click="item.itemStyle.color = null"> 恢复默认 </n-button>
@@ -28,11 +19,7 @@
         ></n-input-number>
       </SettingItem>
       <SettingItem name="圆角">
-        <n-input-number
-          v-model:value="item.itemStyle.borderRadius"
-          :min="0"
-          size="small"
-        ></n-input-number>
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
       </SettingItem>
     </SettingItemBox>
     <setting-item-box name="标签">
@@ -43,18 +30,10 @@
         </n-space>
       </setting-item>
       <setting-item name="大小">
-        <n-input-number
-          v-model:value="item.label.fontSize"
-          size="small"
-          :min="1"
-        ></n-input-number>
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.label.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
       </setting-item>
       <setting-item name="位置">
         <n-select
@@ -63,7 +42,7 @@
             { label: 'top', value: 'top' },
             { label: 'left', value: 'left' },
             { label: 'right', value: 'right' },
-            { label: 'bottom', value: 'bottom' },
+            { label: 'bottom', value: 'bottom' }
           ]"
         />
       </setting-item>
@@ -72,23 +51,18 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from "vue";
-import {
-  GlobalSetting,
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from "@/components/Pages/ChartItemSetting";
-import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<GlobalThemeJsonType>,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 
 const seriesList = computed(() => {
-  return props.optionData.series;
-});
+  return props.optionData.series
+})
 </script>
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index 54aaa27b..2c3b8d3c 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -54,7 +54,7 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
     if (!isObject(newData) || !('dimensions' in newData)) return
-    if (newData?.dimensions.length !== oldData?.dimensions.length) {
+    if (Array.isArray(newData?.dimensions)) {
       const seriesArr = []
       for (let i = 0; i < newData.dimensions.length - 1; i++) {
         seriesArr.push(seriesItem)
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index d42ce328..cef123cf 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -53,7 +53,7 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
     if (!isObject(newData) || !('dimensions' in newData)) return
-    if (newData?.dimensions.length !== oldData?.dimensions.length) {
+    if (Array.isArray(newData?.dimensions)) {
       const seriesArr = []
       for (let i = 0; i < newData.dimensions.length - 1; i++) {
         seriesArr.push(seriesItem)
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 8a5c4f44..70955874 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -54,7 +54,7 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
     if (!isObject(newData) || !('dimensions' in newData)) return
-    if (newData?.dimensions.length !== oldData?.dimensions.length) {
+    if (Array.isArray(newData?.dimensions)) {
       const seriesArr = []
       for (let i = 0; i < newData.dimensions.length - 1; i++) {
         seriesArr.push(seriesItem)
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
index 95d08627..60250083 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
@@ -1,12 +1,7 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    name="单折线面积图"
-    :expanded="true"
-  >
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
     <SettingItemBox name="线条">
       <SettingItem name="宽度">
         <n-input-number
@@ -18,11 +13,7 @@
         ></n-input-number>
       </SettingItem>
       <SettingItem name="类型">
-        <n-select
-          v-model:value="item.lineStyle.type"
-          size="small"
-          :options="lineConf.lineStyle.type"
-        ></n-select>
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="实心点">
@@ -44,18 +35,10 @@
         </n-space>
       </setting-item>
       <setting-item name="大小">
-        <n-input-number
-          v-model:value="item.label.fontSize"
-          size="small"
-          :min="1"
-        ></n-input-number>
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.label.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
       </setting-item>
       <setting-item name="位置">
         <n-select
@@ -64,7 +47,7 @@
             { label: 'top', value: 'top' },
             { label: 'left', value: 'left' },
             { label: 'right', value: 'right' },
-            { label: 'bottom', value: 'bottom' },
+            { label: 'bottom', value: 'bottom' }
           ]"
         />
       </setting-item>
@@ -73,24 +56,19 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from "vue";
-import { lineConf } from "@/packages/chartConfiguration/echarts/index";
-import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
-import {
-  GlobalSetting,
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from "@/components/Pages/ChartItemSetting";
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<GlobalThemeJsonType>,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 
 const seriesList = computed(() => {
-  return props.optionData.series;
-});
+  return props.optionData.series
+})
 </script>
diff --git a/src/packages/components/Charts/Scatters/ScatterCommon/index.vue b/src/packages/components/Charts/Scatters/ScatterCommon/index.vue
index 945df53d..91eba114 100644
--- a/src/packages/components/Charts/Scatters/ScatterCommon/index.vue
+++ b/src/packages/components/Charts/Scatters/ScatterCommon/index.vue
@@ -70,7 +70,7 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData, oldData) => {
     if (!isArray(newData)) return
-    if (newData?.length !== oldData?.length) {
+    if (Array.isArray(newData)) {
       replaceMergeArr.value = ['series']
       // eslint-disable-next-line vue/no-mutating-props
       props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 74e006b9..39a67327 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/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
 
     // 按下右键 + 选中多个 + 目标元素是多选子元素
diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
index 587eb85b..ac9892ec 100644
--- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+++ b/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)
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index ec1c4820..0576ab24 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/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>
diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts
index ff32b11e..337ec579 100644
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/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: false
+  }
+  
   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
   }
 }
 
diff --git a/types/global.d.ts b/types/global.d.ts
index 3636172e..cceade09 100644
--- a/types/global.d.ts
+++ b/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>
\ No newline at end of file
+declare type Recordable<T = any> = Record<string, T>