fix: 删除算法修改

src/views/cameras/preview/components/AlgorithmsSetting/AlgoSettingCard.vue

@@ -102,7 +102,7 @@
         <span style="font-size: 12px; margin-left: 5px">S</span>
       </div>
       <div style="display: flex; justify-content: flex-end">
-        <ElButton size="small" @click="handleRemoveAlgo" :disabled="!selectedAlgoId">删除</ElButton>
+        <ElButton size="small" @click="handleRemoveAlgo" :disabled="!selectedAlgoId">取消</ElButton>
         <ElButton size="small" type="primary" @click="handleSave" :disabled="!selectedAlgoId"
           >保存</ElButton
         >
@@ -157,7 +157,7 @@
 
   const emits = defineEmits<{
     (e: 'onSubmit', param: Param): Promise<unknown>;
-    (e: 'onRemove', algoId: number): Promise<unknown>;
+    (e: 'onCancel', algoId: number): Promise<unknown>;
   }>();
 
   const periodCardRefs = ref<any>([]);
@@ -320,7 +320,7 @@
 
   const handleRemoveAlgo = () => {
     if (!selectedAlgoId.value) return;
-    emits('onRemove', selectedAlgoId.value);
+    emits('onCancel', selectedAlgoId.value);
   };
 </script>
 <style scoped>

src/views/cameras/preview/components/AlgorithmsSetting/AlgoTag.vue

@@ -1,25 +1,65 @@
 <template>
-  <div class="tagWrapper">
+  <div
+    class="tagWrapper"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+    :style="{ opacity: isHover ? 0.7 : 1 }"
+  >
     <ElTag
       hit
       :type="props.isActive ? '' : 'info'"
       :class="{ isOpen: props.isOpen, isClose: !props.isOpen }"
-      >{{ props.label }}</ElTag
+      @click="handleHit"
     >
+      {{ props.label }}
+    </ElTag>
+    <el-icon v-show="isHover" color="#8f8f8f" style="margin: 4px" @click="handleRemoveAlgo">
+      <CircleCloseFilled />
+    </el-icon>
   </div>
 </template>
 <script lang="ts" setup>
-  const props = defineProps<{ isActive: boolean; label: string; isOpen: boolean }>();
+  import { CircleCloseFilled } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const props = defineProps<{
+    isActive: boolean;
+    label: string;
+    isOpen: boolean;
+    algoId: number;
+  }>();
+  const emits = defineEmits<{
+    (e: 'onRemove', algoId: number): Promise<unknown>;
+    (e: 'onHit', algoId: number): Promise<unknown>;
+  }>();
+
+  const isHover = ref(false);
+
+  const handleRemoveAlgo = () => {
+    emits('onRemove', props.algoId);
+  };
+
+  const handleHit = () => {
+    emits('onHit', props.algoId);
+  };
 </script>
 <style scoped>
   .tagWrapper {
     margin: 10px 0;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-tag--info.isOpen {
+    background-color: #fafafa;
+    color: #409eff;
+    border-color: #909399;
   }
 
   .el-tag--info.isClose {
     background-color: #fafafa;
-    color: #bfbfbf;
-    border-color: #dadada;
+    color: #909399;
+    border-color: #909399;
   }
 </style>

src/views/cameras/preview/components/AlgorithmsSetting/AlgorithmsSetting.vue

@@ -9,15 +9,17 @@
           v-for="item in cameraAlgoList"
           :key="item.code"
           :label="item.algoInfo?.name"
+          :algo-id="item.algoInfo.id"
           :is-active="item.algoId === selectedAlgoId"
-          @click="handleSelectAlgo(item.algoId)"
+          @on-hit="handleSelectAlgo(item.algoId)"
+          @on-remove="handleRemove"
           :is-open="item.status === ALGO_ENABLED_STATUS.enabled"
         />
       </div>
       <div>
         <AlgoSettingCard
           @on-submit="handleSubmit"
-          @on-remove="handleRemove"
+          @on-cancel="handleCancel"
           v-if="selectedAlgoId"
         />
         <div style="color: #ccc; margin-top: 20px" v-else>请选择左侧算法</div>
@@ -140,9 +142,18 @@
     deleteCameraAlgoApi({ algoId, cameraId: cameraDetailStore.cameraId }).then(() => {
       ElMessage.success('删除成功');
       getCameraAlgoList(cameraDetailStore.cameraId);
-      selectedAlgoId.value = undefined;
+      if (selectedAlgoId.value === algoId) {
+        selectedAlgoId.value = undefined;
+      }
     });
   };
+
+  const handleCancel = (algoId: number) => {
+    if (selectedAlgoId.value !== algoId) {
+      return;
+    }
+    selectedAlgoId.value = undefined;
+  };
 </script>
 <style scoped>
   .algoTagWrapper {