perf: 合并dev分支，解决组件无法更新数据的问题

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -240,7 +240,7 @@ const beforeUploadHandle = async ({ file }) => {
 // 清除背景
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.BACKGROUND_IAMGE,
+    EditCanvasConfigEnum.BACKGROUND_IMAGE,
     undefined
   )
   chartEditStore.setEditCanvasConfig(
@@ -292,7 +292,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
 
       if(uploadRes.code === ResultEnum.SUCCESS) {
         chartEditStore.setEditCanvasConfig(
-          EditCanvasConfigEnum.BACKGROUND_IAMGE,
+          EditCanvasConfigEnum.BACKGROUND_IMAGE,
           uploadRes.data.objectContent.httpRequest.uri
         )
         chartEditStore.setEditCanvasConfig(

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -62,7 +62,7 @@ import { ref, toRefs } from 'vue'
 import { icon } from '@/plugins'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
-import { chartDataUrl, rankListUrl, numberUrl } from '@/api/mock'
+import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 import { http } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
@@ -82,11 +82,24 @@ const apiList = [
     value: `【图表】${ chartDataUrl }`
   },
   {
-    value: `【表格】${ rankListUrl }`
+    value: `【文本】${ textUrl }`
   },
   {
-    value: `【0~1数字】${ numberUrl }`
-  }
+    value: `【0~100 整数】${ numberIntUrl }`
+  },
+  {
+    value: `【0~1小数】${ numberFloatUrl }`
+  },
+  {
+    value: `【图片地址】${ imageUrl }`
+  },
+  {
+    value: `【排名列表】${ rankListUrl }`
+  },
+  {
+    value: `【滚动表格】${ scrollBoardUrl }`
+  },
+    
 ]
 
 // 选项

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -40,10 +40,4 @@ const selectOptions: SelectCreateDataType[] = [
     value: RequestDataTypeEnum.AJAX
   }
 ]
-</script>
-
-<style></style>
-<style lang="scss" scoped>
-@include go('chart-configurations-data') {
-}
-</style>
+</script>

src/views/chart/ContentConfigurations/index.vue

@@ -123,7 +123,8 @@ const expandHindle = () => {
 
 const selectTarget = computed(() => {
   const selectId = chartEditStore.getTargetChart.selectId
-  if (!selectId) return undefined
+  // 排除多个
+  if (selectId.length !== 1) return undefined
   return chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
 })
 

src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@@ -4,12 +4,9 @@
       class="line"
       v-for="item in line.lineArr"
       :key="item"
-      :class="[
-        item.includes('row') ? 'row' : 'col',
-        line['select'].has(item) && 'visible'
-      ]"
+      :class="[item.includes('row') ? 'row' : 'col', line['select'].has(item) && 'visible']"
       :style="useComponentStyle(line['select'].get(item))"
-  ></div>
+    ></div>
   </div>
 </template>
 
@@ -21,7 +18,7 @@ import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStor
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { CreateComponentType } from '@/packages/index.d'
 import throttle from 'lodash/throttle'
-import cloneDeep  from 'lodash/cloneDeep'
+import cloneDeep from 'lodash/cloneDeep'
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
@@ -53,7 +50,7 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
 }
 
 // * 吸附距离
-const minDistance = computed(()=>{
+const minDistance = computed(() => {
   return settingStore.getChartAlignRange
 })
 
@@ -72,9 +69,7 @@ const isSorption = (selectValue: number, componentValue: number) => {
 
 // * 当前目标
 const selectId = computed(() => chartEditStore.getTargetChart.selectId)
-const selectTarget = computed(
-  () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
-)
+const selectTarget = computed(() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()])
 const selectAttr = computed(() => selectTarget.value?.attr || {})
 
 // * 画布坐标
@@ -95,7 +90,7 @@ const canvasPositionList = computed(() => {
 watch(
   () => chartEditStore.getMousePosition,
   throttle(() => {
-    if (!isComputedLine.value) return
+    if (!isComputedLine.value || selectId.value.length !== 1) return
     // 获取目标组件数据
 
     const selectW = selectAttr.value.w
@@ -111,12 +106,12 @@ watch(
     const selectTopY = selectAttr.value.y
     const selectHalfY = selectTopY + selectH / 2
     const selectBottomY = selectTopY + selectH
-    const seletY = [selectTopY, selectHalfY, selectBottomY]
+    const selectY = [selectTopY, selectHalfY, selectBottomY]
 
     line.select.clear()
     line.sorptioned.y = false
     // 循环查询所有组件数据
-    const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => {
+    const componentList = chartEditStore.getComponentList.map((e: CreateComponentType) => {
       return {
         id: e.id,
         attr: e.attr
@@ -127,7 +122,7 @@ watch(
     line.lineArr.forEach(lineItem => {
       componentList.forEach((component: typeof canvasPositionList.value) => {
         // 排除自身
-        if (selectId.value === component.id) return
+        if (selectId.value[0] === component.id) return
         const componentW = component.attr.w
         const componentH = component.attr.h
 
@@ -163,24 +158,15 @@ watch(
           // 顶部
           if (isSorption(selectHalfY, componentTopY)) {
             line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentTopY - selectH / 2
-            )
+            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2)
           }
           if (isSorption(selectHalfY, componentHalfY)) {
             line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentHalfY - selectH / 2
-            )
+            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2)
           }
           if (isSorption(selectHalfY, componentBottomY)) {
             line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentBottomY - selectH / 2
-            )
+            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2)
           }
         }
         if (lineItem.includes('rowb')) {
@@ -191,17 +177,11 @@ watch(
           }
           if (isSorption(selectBottomY, componentHalfY)) {
             line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentHalfY - selectH
-            )
+            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH)
           }
           if (isSorption(selectBottomY, componentBottomY)) {
             line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(
-              selectLeftX,
-              componentBottomY - selectH
-            )
+            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH)
           }
         }
 
@@ -223,24 +203,15 @@ watch(
         if (lineItem.includes('colc')) {
           if (isSorption(selectHalfX, componentLeftX)) {
             line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(
-              componentLeftX - selectW / 2,
-              selectTopY
-            )
+            selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY)
           }
           if (isSorption(selectHalfX, componentHalfX)) {
             line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(
-              componentHalfX - selectW / 2,
-              selectTopY
-            )
+            selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY)
           }
           if (isSorption(selectHalfX, componentRightX)) {
             line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(
-              componentRightX - selectW / 2,
-              selectTopY
-            )
+            selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY)
           }
         }
         if (lineItem.includes('colr')) {
@@ -254,14 +225,14 @@ watch(
           }
           if (isSorption(selectRightX, componentRightX)) {
             line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition( componentRightX - selectW, selectTopY )
+            selectTarget.value.setPosition(componentRightX - selectW, selectTopY)
           }
         }
 
         /*
           * 我也不知道为什么这个不行，还没时间调
           if(lineItem.includes('row')) {
-            seletY.forEach(sY => {
+            selectY.forEach(sY => {
               componentY.forEach(cY => {
                 if (isSorption(sY, cY)) {
                   line.select.set(lineItem, { y: cY })

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -4,19 +4,16 @@
     <!-- 锚点 -->
     <div
       :class="`shape-point ${point}`"
-      v-for="(point, index) in (select? pointList : [])"
+      v-for="(point, index) in select ? pointList : []"
       :key="index"
       :style="usePointStyle(point, index, item.attr, cursorResize)"
       @mousedown="useMousePointHandle($event, point, item.attr)"
-   ></div>
+    ></div>
 
     <!-- 选中 -->
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
       <div class="shape-modal-select" :class="{ active: select }"></div>
-      <div
-        class="shape-modal-change"
-        :class="{ selectActive: select, hoverActive: hover }"
-     ></div>
+      <div class="shape-modal-change" :class="{ selectActive: select, hoverActive: hover }"></div>
     </div>
   </div>
 </template>
@@ -52,8 +49,10 @@ const hover = computed(() => {
   return props.item.id === chartEditStore.getTargetChart.hoverId
 })
 
+// 兼容多值场景
 const select = computed(() => {
-  return props.item.id === chartEditStore.getTargetChart.selectId
+  const id = props.item.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 </script>
 
@@ -79,7 +78,7 @@ const select = computed(() => {
       width: 30px;
       transform: translate(-50%, -30%);
     }
-    &.l, 
+    &.l,
     &.r {
       height: 30px;
     }
@@ -89,9 +88,8 @@ const select = computed(() => {
     &.l {
       transform: translate(-45%, -50%);
     }
-    &.rt, 
-    &.rb
-    {
+    &.rt,
+    &.rb {
       transform: translate(-30%, -30%);
     }
   }

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

@@ -43,7 +43,8 @@ const { image } = toRefs(props.componentData.chartConfig)
 
 // 计算当前选中目标
 const select = computed(() => {
-  return props.componentData.id === chartEditStore.getTargetChart.selectId
+  const id = props.componentData.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 
 const hover = computed(() => {

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

@@ -82,9 +82,21 @@ const macKeyList: Array<string> = [
   macKeyboardValue.save,
 ]
 
+// 处理键盘记录
+const keyRecordHandle = () => {
+  document.onkeydown = throttle((e: KeyboardEvent) => {
+    if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase())
+    else window.$KeyboardActive = new Set([e.key])
+  }, 200)
+
+  document.onkeyup = throttle((e: KeyboardEvent) => {
+    if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase())
+  }, 200)
+}
+
 // 初始化监听事件
 export const useAddKeyboard = () => {
-  const switchHande = (keyboardValue: typeof winKeyboardValue, e: string) => {
+  const switchHandle = (keyboardValue: typeof winKeyboardValue, e: string) => {
     switch (e) {
       // ct+↑
       case keyboardValue.up:
@@ -136,15 +148,20 @@ export const useAddKeyboard = () => {
     }
   }
   winKeyList.forEach((key: string) => {
-    switchHande(winKeyboardValue, key)
+    switchHandle(winKeyboardValue, key)
   })
   macKeyList.forEach((key: string) => {
-    switchHande(macKeyboardValue, key)
+    switchHandle(macKeyboardValue, key)
   })
+
+  keyRecordHandle()
 }
 
 // 卸载监听事件
 export const useRemoveKeyboard = () => {
+  document.onkeydown = () => {};
+  document.onkeyup = () => {};
+
   winKeyList.forEach((key: string) => {
     keymaster.unbind(key)
   })