feat: 新增置顶和置底功能

src/plugins/icon.ts

@@ -37,7 +37,9 @@ import {
   Flash as FlashIcon,
   SettingsSharp as SettingsSharpIcon,
   Home as HomeIcon,
-  Card as CardIcon
+  Card as CardIcon,
+  ChevronUp as ChevronUpIcon,
+  ChevronDown as ChevronDownIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -48,7 +50,9 @@ import {
   Store as StoreIcon,
   Devices as DevicesIcon,
   ObjectStorage as ObjectStorageIcon,
-  DicomOverlay as DicomOverlayIcon
+  DicomOverlay as DicomOverlayIcon,
+  UpToTop as UpToTopIcon,
+  DownToBottom as DownToBottomIcon,
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -128,7 +132,11 @@ const ionicons5 = {
   // 回退
   HomeIcon,
   // 控件(卡片)
-  CardIcon
+  CardIcon,
+  // 上移
+  ChevronUpIcon,
+  // 下移
+  ChevronDownIcon,
 }
 
 const carbon = {
@@ -147,7 +155,11 @@ const carbon = {
   // 我的模板
   ObjectStorageIcon,
   // 键盘
-  DicomOverlayIcon
+  DicomOverlayIcon,
+  // 置顶
+  UpToTopIcon,
+  // 置底
+  DownToBottomIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/store/modules/chartEditStore/chartEditStore.ts

@@ -82,25 +82,70 @@ export const useChartEditStoreStore = defineStore({
     setTargetSelectChart(selectId?:TargetChartType["selectId"]) {
       this.targetChart.selectId = selectId
     },
+    // * 找到目标 id 数据下标位置
+    fetchTargetIndex(): number {
+      const index = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
+      if (index === -1) {
+        window['$message'].success(`操作失败，无法找到此元素`)
+        loadingError()
+      }
+      return index
+    },
     // * 新增组件列表
-    addComponentList<T>(chartData: T): void {
+    addComponentList<T>(chartData: T, isEnd = false): void {
+      if(isEnd) {
+        this.componentList.unshift(chartData)
+        return
+      }
       this.componentList.push(chartData)
     },
     // * 删除组件列表
     removeComponentList(): void {
-      loadingStart()
       try {
-        const i = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
-        if (i !== -1) {
-          this.componentList.splice(i, 1)
+        loadingStart()
+        const index  = this.fetchTargetIndex()
+        if (index !== -1) {
+          this.componentList.splice(index, 1)
+          loadingFinish()
+          return
+        }
+      } catch(value) {
+        loadingError()
+      }
+    },
+    // * 移动数组位置到两端
+    setBothEnds(isEnd = false): void {
+      try {
+        loadingStart()
+        const length = this.getComponentList.length
+        if(length < 2) return
+
+        const index  = this.fetchTargetIndex()
+        if (index !== -1) {
+
+          // 置底排除最底层, 置顶排除最顶层
+          if((isEnd && index === 0) || (!isEnd && index === length - 1 )) { 
+            loadingFinish()
+            return
+          }
+          // 插入两端
+          this.addComponentList(this.getComponentList[index], isEnd)
+          this.getComponentList.splice(isEnd ? index + 1: index, 1)
           loadingFinish()
           return
         }
-        window['$message'].success(`图表删除失败，无法找到此元素`)
       } catch(value) {
         loadingError()
       }
     },
+    // * 置顶
+    setTop(): void {
+      this.setBothEnds()
+    },
+    // * 置底
+    setBottom(): void {
+      this.setBothEnds(true)
+    },
     // * 设置页面样式属性
     setPageStyle<T extends keyof CSSStyleDeclaration>(
       key: T,

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

@@ -6,6 +6,9 @@ import { ConfigType } from '@/packages/index.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import throttle from 'lodash/throttle'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+
+const { onClickoutside } = useContextMenu()
 
 const chartEditStore = getChartEditStore()
 const { scale } = toRefs(chartEditStore.getEditCanvas)
@@ -43,7 +46,7 @@ export const handleDragOver = (e: DragEvent) => {
 }
 
 
-// 不拦截默认行为点击
+// * 不拦截默认行为点击
 export const mousedownHandleUnStop = (
   e: MouseEvent,
   item?: CreateComponentType
@@ -55,13 +58,14 @@ export const mousedownHandleUnStop = (
   chartEditStore.setTargetSelectChart(undefined)
 }
 
-// 移动图表
+// * 移动图表
 export const useMouseHandle = () => {
   // 点击事件（包含移动事件）
   const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
     e.preventDefault()
     e.stopPropagation()
 
+    onClickoutside()
     chartEditStore.setTargetSelectChart(item.id)
     const scale = chartEditStore.getEditCanvas.scale
     const width = chartEditStore.getEditCanvas.width
@@ -82,8 +86,8 @@ export const useMouseHandle = () => {
 
     // 计算偏移量（处理 scale 比例问题）
     const mousemove = throttle((moveEvent: MouseEvent) => {
-      let currX = itemAttrX + (moveEvent.screenX - startX) / scale
-      let currY = itemAttrY + (moveEvent.screenY - startY) / scale
+      let currX = Math.round(itemAttrX + (moveEvent.screenX - startX) / scale)
+      let currY = Math.round(itemAttrY + (moveEvent.screenY - startY) / scale)
 
       // 要预留的距离
       const distance = 50
@@ -108,14 +112,14 @@ export const useMouseHandle = () => {
     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()

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

@@ -9,7 +9,7 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
   const componentStyle = {
     zIndex: index + 1,
     left: `${attr.x}px`,
-    top: `${attr.y}px`,
+    top: `${attr.y}px`
   }
   return componentStyle
 }

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

@@ -1,19 +1,75 @@
 import { ref, nextTick } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType } from '@/packages/index.d'
-import { loadingError } from '@/utils'
+import { renderIcon, loadingError } from '@/utils'
+import { icon } from '@/plugins'
+
+const { CopyIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5
+const { UpToTopIcon, DownToBottomIcon } = icon.carbon
 
 const chartEditStore = useChartEditStoreStore()
 
 enum MenuEnum {
-  DELETE = 'delete'
+  DELETE = 'delete',
+  COPY = 'copy',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  UP = 'up',
+  DOWN = 'down'
 }
 
 export interface MenuOptionsItemType {
-  label: string
-  key: MenuEnum
-  fnHandle: Function
+  type?: string
+  label?: string
+  key: MenuEnum | string
+  icon?: Function
+  fnHandle?: Function
 }
+
+// * 默认选项
+const defaultOptions: MenuOptionsItemType[] = [
+  {
+    label: '删除',
+    key: MenuEnum.DELETE,
+    icon: renderIcon(TrashIcon),
+    fnHandle: chartEditStore.removeComponentList
+  },
+  {
+    label: '复制',
+    key: MenuEnum.COPY,
+    icon: renderIcon(CopyIcon),
+    fnHandle: () => {}
+  },
+  {
+    type: 'divider',
+    key: 'd1'
+  },
+  {
+    label: '置顶',
+    key: MenuEnum.TOP,
+    icon: renderIcon(UpToTopIcon),
+    fnHandle: chartEditStore.setTop
+  },
+  {
+    label: '置底',
+    key: MenuEnum.BOTTOM,
+    icon: renderIcon(DownToBottomIcon),
+    fnHandle: chartEditStore.setBottom
+  },
+  {
+    label: '上移一层',
+    key: MenuEnum.UP,
+    icon: renderIcon(ChevronUpIcon),
+    fnHandle: () => {}
+  },
+  {
+    label: '下移一层',
+    key: MenuEnum.DOWN,
+    icon: renderIcon(ChevronDownIcon),
+    fnHandle: () => {}
+  }
+]
+
 /**
  * * 右键hook
  * @param menuOption
@@ -28,15 +84,6 @@ export const useContextMenu = (menuOption?: {
   const selfOptions = menuOption?.selfOptions
   const optionsHandle = menuOption?.optionsHandle
 
-  // * 默认选项
-  const defaultOptions: MenuOptionsItemType[] = [
-    {
-      label: '删除',
-      key: MenuEnum.DELETE,
-      fnHandle: chartEditStore.removeComponentList
-    }
-  ]
-
   // * 右键选项
   const menuOptions: MenuOptionsItemType[] = selfOptions || defaultOptions
 
@@ -56,7 +103,7 @@ export const useContextMenu = (menuOption?: {
   }
 
   // * 失焦
-  const onClickoutside = (e: MouseEvent) => {
+  const onClickoutside = () => {
     chartEditStore.setRightMenuShow(false)
   }
 
@@ -66,8 +113,16 @@ export const useContextMenu = (menuOption?: {
     const targetItem: MenuOptionsItemType[] = menuOptions.filter(
       (e: MenuOptionsItemType) => e.key === key
     )
-    if (!targetItem) loadingError()
-    if (targetItem.length) targetItem.pop()?.fnHandle()
+
+    menuOptions.forEach((e: MenuOptionsItemType) => {
+      if (e.key === key) {
+        if (e.fnHandle) {
+          e.fnHandle()
+          return
+        }
+        if (!targetItem) loadingError()
+      }
+    })
   }
 
   return {