42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<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>
|