feat: 新增复制粘贴功能

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

@@ -1,19 +1,17 @@
 <template>
   <div class="go-edit-bottom">
-    <n-space>
-      <n-text>
-        滤镜设置
-      </n-text>
+    <History />
+
+    <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
       <n-popselect :options="shortcutKeyOptions" size="medium">
-        <n-button class="scale-btn" secondary size="mini">
-          <n-icon class="lock-icon" size="18" :depth="3">
+        <n-button class="scale-btn" quaternary size="mini">
+          <n-icon class="lock-icon" size="18" :depth="2">
             <DicomOverlayIcon />
           </n-icon>
         </n-button>
       </n-popselect>
-    </n-space>
-    <n-space class="bottom-ri">
+
       <!-- 缩放比例 -->
       <n-select
         :disabled="lockScale"
@@ -62,13 +60,14 @@
 <script setup lang="ts">
 import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
+import { History } from '../History/index'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
 const { DicomOverlayIcon } = icon.carbon
 import {
   getChartEditStore,
   getChartEditStoreEnum
 } from '../../hooks/useStore.hook'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 // 全局颜色
 const designStore = useDesignStore()
@@ -141,9 +140,25 @@ const shortcutKeyOptions = [
     value: '1'
   },
   {
-    label: 'Ctrl + C 复制',
+    label: 'Delete 删除',
     value: '2'
-  }
+  },
+  {
+    label: 'Ctrl + C 复制',
+    value: '3'
+  },
+  {
+    label: 'Ctrl + X 剪切',
+    value: '4'
+  },
+  {
+    label: 'Ctrl + Z 后退',
+    value: '5'
+  },
+  {
+    label: 'Ctrl + Shift + Z 前进',
+    value: '6'
+  },
 ]
 
 // 监听 scale 变化
@@ -157,7 +172,7 @@ watchEffect(() => {
 <style lang="scss" scoped>
 @include go(edit-bottom) {
   width: 100%;
-  padding: 0 20px;
+  padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;

src/views/chart/ContentEdit/components/History/index.ts

@@ -0,0 +1,3 @@
+import History from './index.vue'
+
+export { History }

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="go-edit-history go-flex-items-center">
+    <n-dropdown
+      @select="handleSelect"
+      :show="showDropdownRef"
+      :options="options"
+      scrollable
+      size="small"
+      placement="top-start"
+      style="max-height: 100vh; overflow-y: auto;"
+    >
+      <n-button
+        class="mr-10"
+        secondary
+        size="small"
+        :disabled="options.length === 0"
+        @click="handleClick"
+      >
+        <span class="btn-text">历史记录</span>
+        <!-- <n-icon class="lock-icon" size="18" :depth="2">
+          <TimeOutlineIcon />
+        </n-icon> -->
+      </n-button>
+    </n-dropdown>
+
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-icon size="21" :depth="3">
+          <HelpOutlineIcon />
+        </n-icon>
+      </template>
+      <span>最多只保留 20 条记录</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { icon } from '@/plugins'
+import { renderIcon } from '@/utils'
+import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { historyActionTypeName } from '@/store/modules/chartHistoryStore/chartHistoryDefine'
+import { CreateComponentType } from '@/packages/index.d'
+import {
+  HistoryItemType,
+  HistoryTargetTypeEnum,
+  HistoryActionTypeEnum
+} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+
+const {
+  TimeOutlineIcon,
+  DesktopOutlineIcon,
+  PencilIcon,
+  TrashIcon,
+  CopyIcon,
+  LayersIcon,
+  DuplicateIcon,
+  HelpOutlineIcon
+} = icon.ionicons5
+const { StackedMoveIcon } = icon.carbon
+const showDropdownRef = ref(false)
+
+const chartHistoryStoreStore = useChartHistoryStoreStore()
+
+// 设置类型对应图标
+const iconHandle = (e: HistoryItemType) => {
+  // 画布编辑
+  if (e.targetType === HistoryTargetTypeEnum.CANVAS) {
+    return renderIcon(DesktopOutlineIcon)
+  }
+  switch (e.actionType) {
+    case HistoryActionTypeEnum.UPDATE:
+      return renderIcon(PencilIcon)
+    case HistoryActionTypeEnum.DELETE:
+      return renderIcon(TrashIcon)
+    case HistoryActionTypeEnum.PASTE:
+      return renderIcon(CopyIcon)
+    case HistoryActionTypeEnum.LARYER:
+      return renderIcon(LayersIcon)
+    case HistoryActionTypeEnum.MOVE:
+      return renderIcon(StackedMoveIcon)
+    case HistoryActionTypeEnum.ADD:
+      return renderIcon(DuplicateIcon)
+    default:
+      return renderIcon(PencilIcon)
+  }
+}
+
+// 设置类型对应文本
+const labelHandle = (e: HistoryItemType) => {
+  // 画布编辑
+  if (e.targetType === HistoryTargetTypeEnum.CANVAS) {
+    return historyActionTypeName[HistoryTargetTypeEnum.CANVAS]
+  }
+  return `${historyActionTypeName[e.actionType]} - ${
+    (e.historyData as CreateComponentType).chartData.title
+  }`
+}
+
+const options = computed(() => {
+  const backStack: HistoryItemType[] = chartHistoryStoreStore.getBackStack
+  const options = backStack.map((e: HistoryItemType) => {
+    return {
+      label: labelHandle(e),
+      key: e.id,
+      icon: iconHandle(e)
+    }
+  })
+  return options
+})
+
+const handleClick = () => {
+  showDropdownRef.value = !showDropdownRef.value
+}
+const handleSelect = (key: string) => {}
+</script>
+
+<style lang="scss" scoped>
+@include go(edit-history) {
+  max-height: 50vh;
+  .mr-10 {
+    margin-right: 10px;
+  }
+  .btn-text {
+    font-size: 12px;
+    margin-right: 3px;
+  }
+}
+</style>