feat: 流程图悬浮框筛选

Author: Windsland52

src/views/flowchart/components/FlowchartNodePopover.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue'
 import { NTag } from 'naive-ui'
 import type { NodeInfo } from '../../../types'
 import { convertFileSrc } from '../utils/nodeImageLookup'
@@ -10,7 +11,7 @@ interface FlowchartPopoverData {
   executionOrder?: number[]
 }
 
-defineProps<{
+const props = defineProps<{
   visible: boolean
   position: { x: number; y: number }
   popoverData: FlowchartPopoverData | null
@@ -23,6 +24,62 @@ const emit = defineEmits<{
   close: []
   'navigate-to-node': [node: NodeInfo]
 }>()
+
+interface PopoverExecutionEntry {
+  info: NodeInfo
+  executionOrder: number
+}
+
+const showAbnormalOnly = ref(false)
+
+const hasFailedAction = (info: NodeInfo): boolean => {
+  if (info.action_details && info.action_details.success === false) return true
+  return (info.node_flow || []).some((item) => item.type === 'action' && item.status === 'failed')
+}
+
+const isAbnormalExecution = (info: NodeInfo): boolean => {
+  return info.status === 'failed' || hasFailedAction(info)
+}
+
+const hasAbnormalEntries = computed(() => {
+  const data = props.popoverData
+  if (!data) return false
+  return data.nodeInfos.some((info) => isAbnormalExecution(info))
+})
+
+const popoverEntries = computed<PopoverExecutionEntry[]>(() => {
+  const data = props.popoverData
+  if (!data) return []
+
+  const entries = data.nodeInfos.map((info, idx) => ({
+    info,
+    executionOrder: data.executionOrder?.[idx] ?? idx + 1,
+  }))
+
+  if (!showAbnormalOnly.value) return entries
+  return entries.filter((entry) => isAbnormalExecution(entry.info))
+})
+
+const toggleAbnormalOnly = () => {
+  if (!hasAbnormalEntries.value) return
+  showAbnormalOnly.value = !showAbnormalOnly.value
+}
+
+watch(
+  () => props.popoverData,
+  () => {
+    showAbnormalOnly.value = false
+  }
+)
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible) {
+      showAbnormalOnly.value = false
+    }
+  }
+)
 </script>
 
 <template>
@@ -33,44 +90,56 @@ const emit = defineEmits<{
   >
     <div class="popover-header">
       <span class="popover-title">{{ popoverData.label }}</span>
+      <button
+        class="popover-filter-btn"
+        type="button"
+        :title="showAbnormalOnly ? '仅显示异常执行（点击显示全部）' : '显示全部执行（点击仅异常）'"
+        :disabled="!hasAbnormalEntries"
+        @click="toggleAbnormalOnly"
+      >
+        <span class="popover-filter-dot" :class="{ 'popover-filter-dot--active': showAbnormalOnly }" />
+      </button>
       <span class="popover-close" @click="emit('close')">&times;</span>
     </div>
     <div class="popover-body">
+      <div v-if="popoverEntries.length === 0" class="popover-empty">
+        暂无异常执行
+      </div>
       <div
-        v-for="(info, idx) in popoverData.nodeInfos"
-        :key="info.node_id"
+        v-for="(entry, idx) in popoverEntries"
+        :key="`${entry.executionOrder}-${entry.info.node_id}-${idx}`"
       >
         <div v-if="popoverData.nodeInfos.length > 1" class="popover-exec-label">
-          执行 #{{ popoverData.executionOrder?.[idx] ?? idx + 1 }}
+          执行 #{{ entry.executionOrder }}
         </div>
         <div class="popover-row">
-          <n-tag size="tiny" :type="getRuntimeStatusTagType(info.status)">
-            {{ getRuntimeStatusText(info.status) }}
+          <n-tag size="tiny" :type="getRuntimeStatusTagType(entry.info.status)">
+            {{ getRuntimeStatusText(entry.info.status) }}
           </n-tag>
-          <span class="popover-time">{{ info.ts }}</span>
-          <span class="popover-locate" @click="emit('navigate-to-node', info)">定位</span>
+          <span class="popover-time">{{ entry.info.ts }}</span>
+          <span class="popover-locate" @click="emit('navigate-to-node', entry.info)">定位</span>
         </div>
-        <div v-if="info.reco_details" class="popover-row">
+        <div v-if="entry.info.reco_details" class="popover-row">
           <span class="popover-label">识别</span>
-          <span>{{ info.reco_details.algorithm }}</span>
-          <span v-if="info.reco_details.box" class="popover-secondary">
-            [{{ info.reco_details.box.join(', ') }}]
+          <span>{{ entry.info.reco_details.algorithm }}</span>
+          <span v-if="entry.info.reco_details.box" class="popover-secondary">
+            [{{ entry.info.reco_details.box.join(', ') }}]
           </span>
         </div>
-        <div v-if="info.action_details" class="popover-row">
+        <div v-if="entry.info.action_details" class="popover-row">
           <span class="popover-label">动作</span>
-          <span>{{ info.action_details.action }}</span>
-          <n-tag size="tiny" :type="info.status === 'running' ? 'warning' : info.action_details.success ? 'success' : 'error'" style="margin-left: 4px">
-            {{ info.status === 'running' ? getRuntimeStatusText(info.status) : info.action_details.success ? '成功' : '失败' }}
+          <span>{{ entry.info.action_details.action }}</span>
+          <n-tag size="tiny" :type="entry.info.status === 'running' ? 'warning' : entry.info.action_details.success ? 'success' : 'error'" style="margin-left: 4px">
+            {{ entry.info.status === 'running' ? getRuntimeStatusText(entry.info.status) : entry.info.action_details.success ? '成功' : '失败' }}
           </n-tag>
         </div>
         <safe-preview-image
-          v-if="nodeImageMap.get(info.node_id)"
-          :src="convertFileSrc(nodeImageMap.get(info.node_id)!)"
+          v-if="nodeImageMap.get(entry.info.node_id)"
+          :src="convertFileSrc(nodeImageMap.get(entry.info.node_id)!)"
           class="popover-img"
         />
         <div
-          v-if="idx < popoverData.nodeInfos.length - 1"
+          v-if="idx < popoverEntries.length - 1"
           class="popover-divider"
         />
       </div>
@@ -105,13 +174,47 @@ const emit = defineEmits<{
 .popover-title {
   font-weight: 600;
   font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.25;
+  flex: 1 1 auto;
   min-width: 0;
 }
 
+.popover-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  margin: 0 8px;
+  flex-shrink: 0;
+}
+
+.popover-filter-btn:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.popover-filter-dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #8f8f8f;
+}
+
+.popover-filter-dot--active {
+  background: #d03050;
+}
+
 .popover-close {
   cursor: pointer;
   font-size: 18px;
@@ -132,6 +235,13 @@ const emit = defineEmits<{
   min-height: 0;
 }
 
+.popover-empty {
+  color: var(--flowchart-popover-secondary);
+  font-size: 12px;
+  text-align: center;
+  padding: 10px 0;
+}
+
 .popover-exec-label {
   font-weight: 600;
   font-size: 11px;