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

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 {
-  key: ChartLayoutStoreEnum
+interface ItemType<T> {
+  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