添加控制按钮

src/graphic/Controls/UIControl.js

@@ -121,9 +121,10 @@ export default class UIControl {
     this.layer.recoveryHistory();
   }
 
+  // value 为true则开 false则关
   menu_backgroundImg(value) {
     //
-    this.graphicStateUI.canSetBackImg = !value;
+    this.graphicStateUI.showBackImage = value;
   }
 
   menu_clear() {

src/hook/useGraphic.ts

@@ -16,7 +16,7 @@ const newsletter = ref<{
 export const graphicState = ref({
   canRevoke: false,
   canRecovery: false,
-  canSetBackImg: false
+  showBackImage: false
 })
 
 export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<AccidentPhoto | RoadPhoto>) => {

src/views/graphic/header.vue

@@ -8,10 +8,10 @@
     <div class="actions">
       <div
           v-for="menu in menus"
-          :key="menu.key"
+          :key="menu.text"
           class="action fun-ctrl"
           :class="{disabled: !menu.enable}"
-          @click="uiType.change(menu.key as any)"
+          @click="menu.onClick"
       >
         <ui-icon type="close" />
         <p>{{ menu.text }}</p>
@@ -26,29 +26,39 @@
 <script setup lang="ts">
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
-import {headActionMenuRaw, Mode} from './menus'
-import {graphicState, uiType, UIType} from '@/hook/useGraphic'
+import {Mode} from './menus'
+import {drawRef, graphicState, uiType, UIType,} from '@/hook/useGraphic'
 import {computed} from "vue";
 import {router} from '@/router'
 
+const menus = computed(() => [
+  {
+    key: UIType.GoBack,
+    text: "回退",
+    enable: graphicState.value.canRevoke,
+    onClick: () => drawRef.value.uiControl.menu_revoke()
+  },
+  {
+    key: UIType.GoAhead,
+    text: "前进",
+    enable: graphicState.value.canRecovery,
+    onClick: () => drawRef.value.uiControl.menu_recovery()
+  },
+  {
+    key: UIType.Clear,
+    text: "清除",
+    enable: true,
+    onClick: () => drawRef.value.uiControl.menu_clear()
+  },
+  {
+    key: UIType.BackImageChange,
+    text: `底图${graphicState.value.showBackImage ? '关' : '开'}`,
+    enable: true,
+    onClick: () => drawRef.value.uiControl.menu_backgroundImg(!graphicState.value.showBackImage)
+  }
+])
 
 const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)
-const menus = computed(() =>
-  headActionMenuRaw.map(data => {
-    const base = {
-      ...data,
-      enable: UIType.GoBack === data.key
-        ? graphicState.value.canRevoke
-        : UIType.GoAhead === data.key
-          ? graphicState.value.canRecovery
-          : true
-    }
-    if (base.key === UIType.BackImageChange) {
-      base.text = `底图${graphicState.value.canSetBackImg ? '开' : '关'}`
-    }
-    return base
-  })
-)
 </script>
 
 <style scoped lang="scss">