UI/细节调整

src/components/common/StatusDot.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * 状态点 + 文字。
+ *
+ * 状态色只表达「系统状态」，不得用在可点击元素上（规范 P1）——
+ * 需要表达「可点击」时用 --primary，需要表达状态时用这里。
+ */
+const props = withDefaults(
+  defineProps<{
+    state?: 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+    label?: string
+    /** 持续态（运行中 / 连接中）才开呼吸动效；瞬时状态不要开 */
+    pulse?: boolean
+  }>(),
+  { state: 'neutral', pulse: false }
+)
+
+const dotClass = computed(
+  () =>
+    ({
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-danger',
+      info: 'bg-info',
+      neutral: 'bg-neutral',
+    })[props.state]
+)
+</script>
+
+<template>
+  <span class="inline-flex min-w-0 items-center gap-1.5">
+    <span
+      class="size-2 shrink-0 rounded-full"
+      :class="[dotClass, pulse && 'status-dot-pulse']"
+      aria-hidden="true"
+    />
+    <span v-if="label" class="truncate text-[13px] text-foreground">{{ label }}</span>
+  </span>
+</template>