fix: 修改选中效果的动画

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

@@ -32,7 +32,7 @@
               class="lock-icon"
               :class="{ color: lockScale }"
               size="18"
-              :depth="3"
+              :depth="2"
             >
               <LockClosedOutlineIcon v-if="lockScale" />
               <LockOpenOutlineIcon v-else />

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

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { useSizeStyle } from '../../hooks/useStyle.hook'
-import { mousedownHandleUnStop } from '../../hooks/useLayout.hook'
+import { mousedownHandleUnStop } from '../../hooks/useDrop.hook'
 
 const size = {
   w: 1920,

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

@@ -4,14 +4,14 @@
 
     <!-- 选中 -->
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
-      <div v-if="select" class="shape-modal-select"></div>
-      <div v-if="select || hover" class="shape-modal-change"></div>
+      <div class="shape-modal-select" :class="{ active: select }" />
+      <div class="shape-modal-change" :class="{ active: select || hover }" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, PropType } from 'vue'
+import { ref, computed, PropType, h } from 'vue';
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { CreateComponentType } from '@/packages/index.d'
@@ -37,8 +37,6 @@ const hover = computed(() => {
 const select = computed(() => {
   return props.item.id === chartEditStore.getTargetChart.selectIndex
 })
-
-
 </script>
 
 <style lang="scss" scoped>
@@ -49,20 +47,29 @@ const select = computed(() => {
     position: absolute;
     top: 0;
     left: 0;
-    .shape-modal-select {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      opacity: 0.1;
-      border-radius: 10px;
-      background-color: v-bind('themeColor');
-    }
+
+    .shape-modal-select,
     .shape-modal-change {
       position: absolute;
       width: 100%;
       height: 100%;
       border-radius: 10px;
-      border: 1px solid v-bind('themeColor');
+      @extend .go-transition-quick;
+    }
+
+    .shape-modal-select {
+      opacity: 0.2;
+      top: 1px;
+      left: 1px;
+      &.active {
+        background-color: v-bind('themeColor');
+      }
+    }
+    .shape-modal-change {
+      border: 1px solid rgba(0, 0, 0, 0);
+      &.active {
+        border: 1px solid v-bind('themeColor');
+      }
     }
   }
 }

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

@@ -4,6 +4,8 @@ import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
+import throttle from 'lodash/throttle'
 
 const chartEditStore = getChartEditStore()
 const { scale } = toRefs(chartEditStore.getEditCanvas)
@@ -39,3 +41,82 @@ export const handleDragOver = (e: DragEvent) => {
   e.stopPropagation()
   if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
 }
+
+
+// 不拦截默认行为点击
+export const mousedownHandleUnStop = (
+  e: MouseEvent,
+  item?: CreateComponentType
+) => {
+  if (item) {
+    chartEditStore.setTargetSelectChart(item.id)
+    return
+  }
+  chartEditStore.setTargetSelectChart(item)
+}
+
+// 移动图表
+export const useMouseHandle = () => {
+  // 点击事件（包含移动事件）
+  const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    chartEditStore.setTargetSelectChart(item.id)
+    const scale = chartEditStore.getEditCanvas.scale
+    const width = chartEditStore.getEditCanvas.width
+    const height = chartEditStore.getEditCanvas.height
+
+    // 获取编辑区域 Dom
+    const editcontentDom = chartEditStore.getEditCanvas.editContentDom
+
+    // 记录图表初始位置
+    const itemAttrX = item.attr.x
+    const itemAttrY = item.attr.y
+
+    // 记录点击初始位置
+    const startX = e.screenX
+    const startY = e.screenY
+
+    // 计算偏移量（处理 scale 比例问题）
+    const mousemove = throttle((moveEvent: MouseEvent) => {
+      let currX = itemAttrX + (moveEvent.screenX - startX) / scale
+      let currY = itemAttrY + (moveEvent.screenY - startY) / scale
+
+      // 位置检测
+      currX = currX < 0 ? 0 : currX
+      currY = currY < 0 ? 0 : currY
+
+      // 预留 20px 边距
+      currX = currX > width - 20 ? width - 20 : currX
+      currY = currY > height - 20 ? height - 20 : currY
+
+      item.attr.x = currX
+      item.attr.y = currY
+    }, 30)
+
+    const mouseup = () => {
+      editcontentDom!.removeEventListener('mousemove', mousemove)
+      editcontentDom!.removeEventListener('mouseup', mouseup)
+    }
+
+    editcontentDom!.addEventListener('mousemove', mousemove)
+    editcontentDom!.addEventListener('mouseup', mouseup)
+  }
+
+  // 进入事件
+  const mouseenterHandle = (e: MouseEvent, item: CreateComponentType) => {
+    e.preventDefault()
+    e.stopPropagation()
+    chartEditStore.setTargetHoverChart(item.id)
+  }
+
+  // 移出事件
+  const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType) => {
+    e.preventDefault()
+    e.stopPropagation()
+    chartEditStore.setTargetHoverChart(undefined)
+  }
+
+  return { mousedownHandle, mouseenterHandle, mouseleaveHandle }
+}

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

@@ -1,8 +1,6 @@
 import { onUnmounted, onMounted } from 'vue'
 import { getChartEditStore } from './useStore.hook'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { CreateComponentType } from '@/packages/index.d'
-import throttle from 'lodash/throttle'
 
 const chartEditStore = getChartEditStore()
 
@@ -29,81 +27,4 @@ export const useLayout = () => {
       removeScale()
     })
   })
-}
-
-// 不拦截默认行为点击
-export const mousedownHandleUnStop = (
-  e: MouseEvent,
-  item?: CreateComponentType
-) => {
-  if (item) {
-    chartEditStore.setTargetSelectChart(item.id)
-    return
-  }
-  chartEditStore.setTargetSelectChart(item)
-}
-
-export const useMouseHandle = () => {
-  // 点击事件（包含移动事件）
-  const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    chartEditStore.setTargetSelectChart(item.id)
-    const scale = chartEditStore.getEditCanvas.scale
-    const width = chartEditStore.getEditCanvas.width
-    const height = chartEditStore.getEditCanvas.height
-
-    // 获取编辑区域 Dom
-    const editcontentDom = chartEditStore.getEditCanvas.editContentDom
-
-    // 记录图表初始位置
-    const itemAttrX = item.attr.x
-    const itemAttrY = item.attr.y
-
-    // 记录点击初始位置
-    const startX = e.screenX
-    const startY = e.screenY
-
-    // 计算偏移量（处理 scale 比例问题）
-    const mousemove = throttle((moveEvent: MouseEvent) => {
-      let currX = itemAttrX + (moveEvent.screenX - startX) / scale
-      let currY = itemAttrY + (moveEvent.screenY - startY) / scale
-
-      // 位置检测
-      currX = currX < 0 ? 0 : currX
-      currY = currY < 0 ? 0 : currY
-
-      // 预留 20px 边距
-      currX = currX > width - 20 ? width - 20 : currX
-      currY = currY > height - 20 ? height - 20 : currY
-
-      item.attr.x = currX
-      item.attr.y = currY
-    }, 30)
-
-    const mouseup = () => {
-      editcontentDom!.removeEventListener('mousemove', mousemove)
-      editcontentDom!.removeEventListener('mouseup', mouseup)
-    }
-
-    editcontentDom!.addEventListener('mousemove', mousemove)
-    editcontentDom!.addEventListener('mouseup', mouseup)
-  }
-
-  // 进入事件
-  const mouseenterHandle = (e: MouseEvent, item: CreateComponentType) => {
-    e.preventDefault()
-    e.stopPropagation()
-    chartEditStore.setTargetHoverChart(item.id)
-  }
-
-  // 移出事件
-  const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType) => {
-    e.preventDefault()
-    e.stopPropagation()
-    chartEditStore.setTargetHoverChart(undefined)
-  }
-
-  return { mousedownHandle, mouseenterHandle, mouseleaveHandle }
-}
+}

src/views/chart/ContentEdit/index.vue

@@ -61,8 +61,8 @@ import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { ShapeBox } from './components/ShapeBox/index'
 
-import { useLayout, useMouseHandle } from './hooks/useLayout.hook'
-import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
+import { useLayout } from './hooks/useLayout.hook'
+import { handleDrop, handleDragOver, useMouseHandle } from './hooks/useDrop.hook'
 import { useContextMenu } from './hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'