refactor: extract StatusDot common component and unify status indicator styles across history, tasks, and agents pages

2026-05-21 15:34:33 +08:00
parent 05e38f08c6
commit 4076924704
4 changed files with 60 additions and 55 deletions
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    state: string
+    title?: string
+  }>(),
+  {
+    state: 'none'
+  }
+)
+
+const dotClasses = computed(() => {
+  switch (props.state) {
+    case 'running':
+      return 'h-2 w-2 bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]'
+    case 'pending':
+      return 'h-2 w-2 bg-blue-400 animate-pulse'
+    case 'success':
+    case 'online':
+      return 'h-1.5 w-1.5 bg-green-500'
+    case 'failed':
+      return 'h-1.5 w-1.5 bg-red-500'
+    case 'timeout':
+      return 'h-1.5 w-1.5 bg-orange-500'
+    case 'cancelled':
+      return 'h-1.5 w-1.5 bg-muted-foreground'
+    case 'offline':
+    case 'none':
+    default:
+      return 'h-1.5 w-1.5 bg-muted-foreground/20'
+  }
+})
+</script>
+
+<template>
+  <div class="rounded-full shrink-0" :class="dotClasses" :title="title"></div>
+</template>