agent-management/frontend/src/components/agent-thinking/RunReconnectBadge.vue

<script setup>
/**
 * v1.1：断线重连状态徽章
 * 内嵌在 AgentThinkingPanel 顶部，显示当前是否正在重连。
 */
const props = defineProps({
  reconnecting: { type: Boolean, default: false },
})
</script>

<template>
  <div v-if="reconnecting" class="badge">
    <span class="spinner"></span>
    <span>正在重连...</span>
  </div>
</template>

<style scoped>
/* v1.1：重连徽章，深色风格（黄色警告色） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin: 4px 10px;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  font-size: 10px;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
}
.spinner {
  width: 7px;
  height: 7px;
  border: 1.5px solid rgba(251, 191, 36, 0.3);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>