From 51e026118a887408c9db9c79f2d7c514336ea9df Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 4 Jun 2024 16:48:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=9A=E9=80=89command=E9=94=AE=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E4=B8=8D=E5=87=86=E7=A1=AE=E9=80=A0=E6=88=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=89=E6=8B=A9=E4=B8=8D=E5=87=86=E7=A1=AE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RealTimeComponentList.vue                 | 473 ------------------
 core/core-frontend/src/utils/DeShortcutKey.ts |   2 +-
 2 files changed, 1 insertion(+), 474 deletions(-)
 delete mode 100644 core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue

diff --git a/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue b/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
deleted file mode 100644
index 54b85c0df7..0000000000
--- a/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
+++ /dev/null
@@ -1,473 +0,0 @@
-<script lang="ts" setup>
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
-import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
-import { storeToRefs } from 'pinia'
-import { ElIcon, ElRow } from 'element-plus-secondary'
-import Icon from '../icon-custom/src/Icon.vue'
-import { nextTick, ref } from 'vue'
-import draggable from 'vuedraggable'
-import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
-import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
-import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
-import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
-const dropdownMore = ref(null)
-const lockStore = lockStoreWithOut()
-
-const dvMainStore = dvMainStoreWithOut()
-const snapshotStore = snapshotStoreWithOut()
-const layerStore = layerStoreWithOut()
-const composeStore = composeStoreWithOut()
-
-const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
-
-const { componentData, curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
-const getComponent = index => {
-  return componentData.value[componentData.value.length - 1 - index]
-}
-const transformIndex = index => {
-  return componentData.value.length - 1 - index
-}
-const areaDataPush = component => {
-  if (component && !component.isLock && component.isShow) {
-    areaData.value.components.push(component)
-  }
-}
-// shift 选择算法逻辑
-// 1.记录上次点击的laterIndex（初始状态laterIndex=0）;
-// 2.获取当前index curClickIndex;
-// 3.比较laterIndex 和 curClickIndex之间的大小;
-// 4.将[laterIndex,curClickIndex] 或者 [curClickIndex,laterIndex]区域的图层加入areaData.value.components(已包含的不再重复加入);
-const shiftDataPush = curClickIndex => {
-  const areaDataIdArray = areaData.value.components.map(com => com.id)
-  let indexBegin, indexEnd
-  const laterIndexTrans = laterIndex.value === null ? componentData.value.length : laterIndex.value
-  if (laterIndexTrans < curClickIndex) {
-    indexBegin = laterIndexTrans
-    indexEnd = curClickIndex
-  } else {
-    indexBegin = curClickIndex
-    indexEnd = laterIndexTrans
-  }
-  const shiftAreaComponents = componentData.value
-    .slice(indexBegin, indexEnd + 1)
-    .filter(
-      component => !areaDataIdArray.includes(component.id) && !component.isLock && component.isShow
-    )
-  areaData.value.components.push(...shiftAreaComponents)
-  dvMainStore.setCurComponent({ component: null, index: null })
-}
-
-const onClick = (e, index) => {
-  // 初始化点击是 laterIndex=0
-  if (!curComponent.value) {
-    composeStore.setLaterIndex(null)
-  }
-  // ctrl or command 按下时 鼠标点击为选择需要组合的组件(取消需要组合的组件在ComposeShow组件中)
-  if (isCtrlOrCmdDown.value && !areaData.value.components.includes(componentData.value[index])) {
-    areaDataPush(componentData.value[index])
-    if (curComponent.value && curComponent.value.id !== componentData.value[index].id) {
-      areaDataPush(curComponent.value)
-    }
-    dvMainStore.setCurComponent({ component: null, index: null })
-    e.stopPropagation()
-    composeStore.setLaterIndex(index)
-    return
-  }
-  //shift操作逻辑
-  if (isShiftDown.value) {
-    shiftDataPush(index)
-    return
-  }
-
-  //其他情况点击清理选择区域
-  areaData.value.components.splice(0, areaData.value.components.length)
-  setCurComponent(index)
-  composeStore.setLaterIndex(index)
-}
-const setCurComponent = index => {
-  dvMainStore.setCurComponent({ component: componentData.value[index], index })
-}
-
-let nameEdit = ref(false)
-let editComponentId = ref('')
-let inputName = ref('')
-let nameInput = ref(null)
-let curEditComponent = null
-const editComponentName = item => {
-  curEditComponent = curComponent.value
-  editComponentId.value = `#component-label-${item.id}`
-  nameEdit.value = true
-  inputName.value = item.name
-  nextTick(() => {
-    nameInput.value.focus()
-  })
-}
-const closeEditComponentName = () => {
-  nameEdit.value = false
-  if (!inputName.value || !inputName.value.trim()) {
-    return
-  }
-  if (inputName.value.trim() === curEditComponent.name) {
-    return
-  }
-  curEditComponent.name = inputName.value
-  inputName.value = ''
-  curEditComponent = null
-}
-
-const lock = () => {
-  setTimeout(() => {
-    lockStore.lock()
-    snapshotStore.recordSnapshotCache('realTime-lock')
-  })
-}
-
-const unlock = () => {
-  setTimeout(() => {
-    lockStore.unlock()
-    snapshotStore.recordSnapshotCache('realTime-unlock')
-  })
-}
-
-const hideComponent = () => {
-  setTimeout(() => {
-    layerStore.hideComponent()
-    snapshotStore.recordSnapshotCache('realTime-hideComponent')
-  })
-}
-
-const showComponent = () => {
-  setTimeout(() => {
-    layerStore.showComponent()
-    snapshotStore.recordSnapshotCache()
-  })
-}
-
-const dragOnEnd = ({ oldIndex, newIndex }) => {
-  const source = componentData.value[newIndex]
-  const comLength = componentData.value.length
-  // 还原数组
-  componentData.value.splice(newIndex, 1)
-  componentData.value.splice(oldIndex, 0, source)
-  const target = componentData.value[comLength - 1 - oldIndex]
-  // 反向移动数组
-  componentData.value.splice(comLength - 1 - oldIndex, 1)
-  componentData.value.splice(comLength - 1 - newIndex, 0, target)
-  dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
-}
-
-const getIconName = item => {
-  if (item.component === 'UserView') {
-    const viewInfo = canvasViewInfo.value[item.id]
-    return `${viewInfo.type}-origin`
-  } else {
-    return item.icon
-  }
-}
-
-const menuAsideClose = (param, index) => {
-  const iconDom = document.getElementById('close-button')
-  if (iconDom) {
-    iconDom.click()
-  }
-  if (param.opt === 'rename') {
-    setTimeout(() => {
-      editComponentName(getComponent(index))
-    }, 200)
-  }
-}
-
-const handleContextMenu = e => {
-  e.preventDefault()
-  // 获取鼠标点击位置
-  const x = e.clientX
-  const y = e.clientY
-  const customContextMenu = document.createElement('div')
-  customContextMenu.style.position = 'fixed'
-  customContextMenu.style.left = x + 'px'
-  customContextMenu.style.top = y + 'px'
-
-  // 将自定义菜单添加到页面
-  document.body.appendChild(customContextMenu)
-
-  // 为自定义菜单添加事件监听器，例如，点击菜单项后执行的操作
-  customContextMenu.addEventListener('click', () => {
-    // 在这里执行菜单项点击后的操作
-    // 例如，关闭菜单
-    document.body.removeChild(customContextMenu)
-  })
-}
-</script>
-
-<template>
-  <!--为了保持图层视觉上的一致性 这里进行数组的倒序排列 相应的展示和移动按照倒序处理-->
-  <div class="real-time-component-list">
-    <button hidden="true" id="close-button"></button>
-    <el-row class="list-wrap">
-      <div class="list-container" @contextmenu="handleContextMenu">
-        <draggable
-          @end="dragOnEnd"
-          :list="componentData"
-          animation="100"
-          class="drag-list"
-          item-key="id"
-        >
-          <template #item="{ index }">
-            <div
-              :title="getComponent(index)?.name"
-              class="component-item"
-              :class="{
-                'container-item-not-show': !getComponent(index)?.isShow,
-                activated:
-                  (curComponent && curComponent?.id === getComponent(index)?.id) ||
-                  areaData.components.includes(getComponent(index))
-              }"
-              @click="onClick($event, transformIndex(index))"
-            >
-              <el-icon class="component-icon">
-                <Icon :name="getIconName(getComponent(index))"></Icon>
-              </el-icon>
-              <span
-                :id="`component-label-${getComponent(index)?.id}`"
-                class="component-label"
-                @dblclick="editComponentName(getComponent(index))"
-              >
-                {{ getComponent(index)?.name }}
-              </span>
-              <div
-                v-show="!nameEdit || (nameEdit && curComponent?.id !== getComponent(index)?.id)"
-                class="icon-container"
-                :class="{
-                  'icon-container-lock': getComponent(index)?.isLock && getComponent(index)?.isShow,
-                  'icon-container-show': !getComponent(index)?.isShow
-                }"
-              >
-                <el-icon
-                  class="component-base component-icon-display"
-                  v-show="!getComponent(index).isShow"
-                  @click="showComponent"
-                >
-                  <Icon name="dv-eye-close" class="opt-icon"></Icon>
-                </el-icon>
-                <el-icon
-                  class="component-base"
-                  v-show="getComponent(index)?.isShow"
-                  @click="hideComponent"
-                >
-                  <Icon name="dv-show" class="opt-icon"></Icon>
-                </el-icon>
-                <el-icon v-show="!getComponent(index)?.isLock" class="component-base" @click="lock">
-                  <Icon class="opt-icon" name="dv-unlock"></Icon>
-                </el-icon>
-                <el-icon
-                  class="component-base component-icon-display"
-                  v-show="getComponent(index)?.isLock"
-                  @click="unlock"
-                >
-                  <Icon name="dv-lock" class="opt-icon"></Icon>
-                </el-icon>
-                <el-dropdown
-                  ref="dropdownMore"
-                  trigger="click"
-                  placement="bottom-start"
-                  effect="dark"
-                  :hide-timeout="0"
-                >
-                  <span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
-                    <el-icon class="component-base">
-                      <Icon name="dv-more" class="opt-icon"></Icon>
-                    </el-icon>
-                  </span>
-                  <template #dropdown>
-                    <context-menu-aside-details
-                      :element="getComponent(index)"
-                      @close="menuAsideClose($event, index)"
-                    ></context-menu-aside-details>
-                  </template>
-                </el-dropdown>
-              </div>
-              <el-dropdown
-                class="compose-dropdown"
-                trigger="contextmenu"
-                placement="bottom-start"
-                effect="dark"
-                :hide-timeout="0"
-              >
-                <compose-show
-                  :show-border="false"
-                  :element-index="transformIndex(index)"
-                  :element="getComponent(index)"
-                ></compose-show>
-                <template #dropdown>
-                  <context-menu-aside-details
-                    :element="getComponent(index)"
-                    @close="menuAsideClose($event, index)"
-                  ></context-menu-aside-details>
-                </template>
-              </el-dropdown>
-            </div>
-          </template>
-        </draggable>
-        <el-row style="width: 100%; height: 150px"></el-row>
-      </div>
-    </el-row>
-    <Teleport v-if="editComponentId && nameEdit" :to="editComponentId">
-      <input
-        @keydown.stop
-        @keyup.stop
-        ref="nameInput"
-        v-model="inputName"
-        @blur="closeEditComponentName"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.real-time-component-list {
-  white-space: nowrap;
-  .list-wrap {
-    max-height: calc(100% - @component-toolbar-height);
-    overflow-y: auto;
-    width: 100%;
-    .list-container {
-      width: 100%;
-      .component-item {
-        position: relative;
-        height: 30px;
-        width: 100%;
-        cursor: grab;
-        color: @dv-canvas-main-font-color;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        font-size: 12px;
-        padding: 0 2px 0 22px;
-        user-select: none;
-
-        .component-icon {
-          color: #a6a6a6;
-          font-size: 14px;
-        }
-        .component-label {
-          color: #ebebeb;
-        }
-
-        > span.component-label {
-          font-size: 12px;
-          margin-left: 10px;
-          position: relative;
-          min-width: 65px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          input {
-            position: absolute;
-            left: 0;
-            width: 100%;
-            background-color: white;
-            outline: none;
-            border: none;
-            border-radius: 2px;
-            padding: 0 4px;
-            height: 100%;
-          }
-        }
-
-        &:active {
-          cursor: grabbing;
-        }
-
-        &:hover {
-          background-color: rgba(235, 235, 235, 0.1);
-
-          .icon-container {
-            .component-base {
-              opacity: 1;
-            }
-            width: 70px !important;
-          }
-        }
-
-        .icon-container {
-          .component-base {
-            opacity: 0;
-          }
-          width: 0px;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          flex-grow: 1;
-          cursor: none;
-          i {
-            font-size: 16px;
-            cursor: pointer;
-          }
-        }
-      }
-      .activated {
-        background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
-        :deep(.component-icon) {
-          color: var(--ed-color-primary);
-        }
-        :deep(.component-label) {
-          color: var(--ed-color-primary);
-        }
-      }
-    }
-  }
-}
-
-.real-time-component-list :deep(.ed-popper) {
-  background: #303133 !important;
-}
-
-.component-base {
-  cursor: pointer;
-  height: 22px !important;
-  width: 22px !important;
-  border-radius: 4px;
-  padding: 0 4px;
-
-  .opt-icon {
-    font-size: 14px;
-  }
-
-  &:hover {
-    background: rgba(235, 235, 235, 0.1);
-  }
-
-  &:active {
-    background: rgba(235, 235, 235, 0.1);
-  }
-}
-
-.component-icon-display {
-  opacity: 1 !important;
-}
-
-.icon-container-show {
-  width: 70px !important;
-}
-
-.icon-container-lock {
-  width: 45px !important;
-}
-
-.container-item-not-show {
-  color: #5f5f5f !important;
-  :deep(.component-icon) {
-    color: #5f5f5f !important;
-  }
-  :deep(.component-label) {
-    color: #5f5f5f !important;
-  }
-}
-</style>
-
-<style lang="less">
-.compose-dropdown {
-  position: initial !important;
-}
-</style>
diff --git a/core/core-frontend/src/utils/DeShortcutKey.ts b/core/core-frontend/src/utils/DeShortcutKey.ts
index fae894ba77..f48c7c2746 100644
--- a/core/core-frontend/src/utils/DeShortcutKey.ts
+++ b/core/core-frontend/src/utils/DeShortcutKey.ts
@@ -101,7 +101,7 @@ let isShiftDown = false
 // 全局监听按键操作并执行相应命令
 export function listenGlobalKeyDown() {
   window.onkeydown = e => {
-    if (!isInEditor.value || editMode.value === 'preview' || checkDialog()) return
+    if (editMode.value === 'preview' || checkDialog()) return
     const { keyCode } = e
     if (positionMoveKey[keyCode] && curComponent.value) {
       positionMoveKey[keyCode](keyCode)