feat: 新增前进后退按钮，修改粘贴的位置问题

src/layout/components/LayoutHeader/index.vue

@@ -1,15 +1,15 @@
 <template>
   <n-layout-header bordered class="go-header">
     <header class="go-header-box">
-      <div>
+      <div class="header-item left">
         <n-space>
           <slot name="left"></slot>
         </n-space>
       </div>
-      <div>
+      <div class="header-item center">
         <slot name="center"></slot>
       </div>
-      <div>
+      <div class="header-item right">
         <n-space>
           <slot name="ri-left"> </slot>
           <lang-select></lang-select>
@@ -31,11 +31,23 @@ import { ThemeColorSelect } from '@/components/ThemeColorSelect'
 <style lang="scss" scoped>
 @include go(header) {
   &-box {
-    display: flex;
+    display: grid;
-    justify-content: space-between;
+    grid-template-columns: repeat(3, 33.33%);
-    align-items: center;
+    .header-item {
-    padding: 0 60px;
+      display: flex;
+      align-items: center;
+      &.left {
+        justify-content: start;
+      }
+      &.center {
+        justify-content: center;
+      }
+      &.right {
+        justify-content: end;
+      }
+    }
     height: $--header-height;
+    padding: 0 60px;
   }
 }
 </style>

src/plugins/icon.ts

@@ -7,7 +7,7 @@ import {
   Trash as TrashIcon,
   Pencil as PencilIcon,
   HammerOutline as HammerIcon,
-DesktopOutline as DesktopOutlineIcon,
+  DesktopOutline as DesktopOutlineIcon,
   DownloadOutline as DownloadIcon,
   Open as OpenIcon,
   Send as SendIcon,
@@ -47,7 +47,9 @@ DesktopOutline as DesktopOutlineIcon,
   Square as SquareIcon,
   ColorPalette as ColorPaletteIcon,
   Leaf as LeafIcon,
-  ColorWand as ColorWandIcon
+  ColorWand as ColorWandIcon,
+  ArrowBack as ArrowBackIcon,
+  ArrowForward as ArrowForwardIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -172,7 +174,11 @@ const ionicons5 = {
   // 气球
   LeafIcon,
   // 颜色
-  ColorWandIcon
+  ColorWandIcon,
+  // 撤回
+  ArrowBackIcon,
+  // 前进
+  ArrowForwardIcon
 }
 
 const carbon = {

src/store/modules/chartEditStore/chartEditStore.ts

@@ -351,8 +351,8 @@ export const useChartEditStore = defineStore({
           // 生成新 id
           e.id = getUUID()
           // 偏移位置
-          e.attr.x = e.attr.x + 30
+          e.attr.x = this.getMousePosition.x + 30
-          e.attr.y = e.attr.y + 30
+          e.attr.y = this.getMousePosition.y + 30
           return e
         }
         const isCut = recordCharts.type === HistoryActionTypeEnum.CUT

src/views/chart/HeaderLeftBtn/index.vue

@@ -10,7 +10,18 @@
     <n-space>
       <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
         <template #trigger>
-          <n-button :type="styleHandle(item)" size="small" ghost @click="clickHandle(item)">
+          <n-button size="small" ghost :type="styleHandle(item)" @click="clickHandle(item)">
+            <component :is="item.icon"></component>
+          </n-button>
+        </template>
+        <span>{{ item.title }}</span>
+      </n-tooltip>
+
+      <n-divider vertical />
+
+      <n-tooltip v-for="item in historyList" :key="item.key" placement="bottom" trigger="hover">
+        <template #trigger>
+          <n-button size="small" ghost type="primary" :disabled="!item.select" @click="clickHistoryHandle(item)">
             <component :is="item.icon"></component>
           </n-button>
         </template>
@@ -21,25 +32,33 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, Ref, reactive } from 'vue'
+import { toRefs, Ref, reactive, computed } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useRemoveKeyboard } from '../hooks/useKeyboard.hook'
 
-const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+
+const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
 const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
+const chartEditStore = useChartEditStore()
+const chartHistoryStore = useChartHistoryStore()
 
-interface ItemType {
+interface ItemType<T> {
-  key: ChartLayoutStoreEnum
+  key: T
   select: Ref<boolean> | boolean
   title: string
   icon: any
 }
 
-const btnList = reactive<ItemType[]>([
+const btnList = reactive<ItemType<ChartLayoutStoreEnum>[]>([
   {
     key: ChartLayoutStoreEnum.CHARTS,
     select: getCharts,
@@ -60,19 +79,53 @@ const btnList = reactive<ItemType[]>([
   }
 ])
 
+const isBackStack = computed(()=> chartHistoryStore.getBackStack.length> 1)
+
+const isForwardStack = computed(()=> chartHistoryStore.getForwardStack.length> 0)
+
+const historyList = reactive<ItemType<HistoryStackEnum>[]>([
+  {
+    key: HistoryStackEnum.BACK_STACK,
+    // 一定会有初始化画布
+    select: isBackStack,
+    title: '后退',
+    icon: renderIcon(ArrowBackIcon)
+  },
+  {
+    key: HistoryStackEnum.FORWARD_STACK,
+    select: isForwardStack,
+    title: '前进',
+    icon: renderIcon(ArrowForwardIcon)
+  }
+])
+
 
 // store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
-const styleHandle = (item: ItemType) => {
+const styleHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
   if (item.key === ChartLayoutStoreEnum.DETAILS) {
     return item.select ? '' : 'primary'
   }
   return item.select ? 'primary' : ''
 }
 
-const clickHandle = (item: ItemType) => {
+// 布局处理
+const clickHandle = (item: ItemType<ChartLayoutStoreEnum>) => {
   setItem(item.key, !item.select)
 }
 
+// 历史记录处理
+const clickHistoryHandle = (item: ItemType<HistoryStackEnum>) => {
+  switch (item.key) {
+    case HistoryStackEnum.BACK_STACK:
+      chartEditStore.setBack()
+      break;
+    case HistoryStackEnum.FORWARD_STACK:
+      chartEditStore.setForward()
+      break;
+  }
+}
+
+// 返回首页
 const goHomeHandle = () => {
   goDialog({
     message: '返回将不会保存任何操作',
@@ -87,6 +140,5 @@ const goHomeHandle = () => {
 <style lang="scss" scoped>
 .header-left-btn {
   margin-left: -37px;
-  padding-right: 149px;
+ }
-}
 </style>

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

@@ -20,7 +20,7 @@ const KeyboardHandle = (e: KeyboardEvent) => {
   if (isMacRes) return
   const key = e.key.toLowerCase()
 
-  // 删除
+  // 删除（单纯的delete会和其他位置冲突）
   // if (key === keyboardValue.delete) {
   //   chartEditStore.removeComponentList()
   //   return