sl-sfy-safety/src/views/cameras/preview/components/FenceToolbar/FenceToolbar.vue

<template>
  <div class="toolbar">
    <ToolbarIcon :src="deleteIcon" :active="false" @click="emits('remove')" />
    <ToolbarIcon :src="saveIcon" :active="false" @click="emits('save')" />
    <ElButton type="primary" size="small" @click="toggleEdit">{{
      props.isEdit ? '退出编辑' : '编辑'
    }}</ElButton>
    <div class="fenceDrawingTip" v-if="isEdit"
      >{{ cameraAlgoStore.selectedAlgoDetail?.algoInfo?.name }}算法绘制中</div
    >
  </div>
</template>
<script setup lang="ts">
  import { defineEmits } from 'vue';
  import { ElButton } from 'element-plus';
  import ToolbarIcon from '../ToolbarIcon/ToolbarIcon.vue';
  import saveIcon from '@/assets/images/camera/save.png';
  import deleteIcon from '@/assets/images/camera/delete.png';
  import useCameraAlgoStore from '../../store/useCameraAlgoStore';

  const cameraAlgoStore = useCameraAlgoStore();

  const props = defineProps<{ isEdit: boolean }>();

  const emits = defineEmits<{
    (e: 'toggleEditable', editState: boolean): unknown;
    (e: 'remove'): unknown;
    (e: 'save'): unknown;
  }>();

  const toggleEdit = () => {
    emits('toggleEditable', !props.isEdit);
  };
</script>

<style scoped>
  .toolbar {
    display: flex;

    align-items: center;
    z-index: 10;
    padding: 5px 30px;
    border-radius: 50px;
  }
  .fenceDrawingTip {
    background: #e6f4ff;
    border-radius: 6px;
    border: 1px solid #bae0ff;
    text-align: center;
    font-size: 12px;
    padding: 2px 40px;
    margin-left: 50px;
  }
</style>