|
1 | 1 | <script setup lang="ts"> |
2 | 2 | import { computed } from 'vue' |
3 | | -import { STATE_LABELS } from '@/constants/state' |
4 | | -import { STATE_TYPES } from '@/api/enums' |
5 | | -import type { State } from '@/api/types' |
| 3 | +import type { StatusLabelType } from './types' |
6 | 4 |
|
7 | 5 | defineOptions({ name: 'MkStatusLabel' }) |
8 | 6 |
|
9 | 7 | const props = withDefaults( |
10 | 8 | defineProps<{ |
11 | | - active?: boolean // 启用状态 |
| 9 | + type?: StatusLabelType |
| 10 | + label?: string |
| 11 | + active?: boolean |
12 | 12 | activeText?: string |
13 | 13 | inactiveText?: string |
14 | | - status?: State // 多种状态 |
| 14 | + inactiveIcon?: string |
15 | 15 | }>(), |
16 | | - { activeText: '已启用', inactiveText: '已禁用' }, |
| 16 | + { activeText: '已启用', inactiveText: '已禁用', inactiveIcon: 'icon_ban_filled' }, |
17 | 17 | ) |
18 | 18 |
|
19 | | -/* 状态文案与 STATE_LABELS 共用状态键,兼容原有启用/禁用展示。 */ |
20 | | -const statusOptions: Partial<Record<State, { name?: string; loading?: boolean }>> = { |
21 | | - [STATE_TYPES.SUCCESS]: { name: 'icon_succeed_colorful' }, |
22 | | - [STATE_TYPES.FAILURE]: { name: 'icon_close_colorful' }, |
23 | | - [STATE_TYPES.STARTED]: { loading: true }, |
24 | | - [STATE_TYPES.EMBEDDING]: { loading: true }, |
25 | | - [STATE_TYPES.GENERATE]: { loading: true }, |
26 | | - [STATE_TYPES.SYNC]: { loading: true }, |
27 | | - [STATE_TYPES.TOKENIZE]: { loading: true }, |
28 | | - [STATE_TYPES.REVOKE]: { loading: true }, |
29 | | - [STATE_TYPES.PENDING]: { loading: true }, |
30 | | - [STATE_TYPES.REVOKED]: { name: 'icon_close_colorful' }, |
31 | | -} |
32 | | -const presentation = computed(() => { |
33 | | - if (props.status !== undefined) return statusOptions[props.status] |
34 | | - return props.active ? statusOptions[STATE_TYPES.SUCCESS] : undefined |
| 19 | +const displayType = computed(() => props.type ?? (props.active ? 'success' : 'disabled')) |
| 20 | +const displayLabel = computed(() => (props.type !== undefined ? props.label : props.active ? props.activeText : props.inactiveText)) |
| 21 | +const iconName = computed(() => { |
| 22 | + if (displayType.value === 'success') return 'icon_succeed_colorful' |
| 23 | + if (displayType.value === 'failure') return 'icon_close_colorful' |
| 24 | + return props.type === undefined ? props.inactiveIcon : 'icon_ban_filled' |
35 | 25 | }) |
36 | | -const label = computed(() => |
37 | | - props.status !== undefined ? (STATE_LABELS[props.status] ?? props.status) : props.active ? props.activeText : props.inactiveText, |
38 | | -) |
39 | 26 | </script> |
40 | 27 |
|
41 | 28 | <template> |
42 | 29 | <span class="flex-align-center gap-2"> |
43 | | - <LoadingIcon v-if="presentation?.loading" :size="16" /> |
44 | | - <MkIcon v-else-if="presentation?.name" :name="presentation.name" /> |
45 | | - <MkIcon v-else-if="status === undefined && !active" name="icon_ban_filled" class="text-N500!" /> |
46 | | - <span>{{ label }}</span> |
| 30 | + <LoadingIcon v-if="displayType === 'loading'" :size="16" /> |
| 31 | + <MkIcon v-else :name="iconName" :class="{ 'text-N500!': displayType === 'disabled' }" /> |
| 32 | + <span>{{ displayLabel }}</span> |
47 | 33 | </span> |
48 | 34 | </template> |
0 commit comments