76 lines
2.8 KiB
Vue
76 lines
2.8 KiB
Vue
<template>
|
|
<JingrowUIBadge :size="size" :theme="_color">
|
|
{{ label }}
|
|
<template #prefix>
|
|
<slot name="prefix"></slot>
|
|
</template>
|
|
<template #suffix>
|
|
<slot name="suffix"></slot>
|
|
</template>
|
|
</JingrowUIBadge>
|
|
</template>
|
|
|
|
<script>
|
|
import { Badge as JingrowUIBadge } from 'jingrow-ui';
|
|
|
|
export default {
|
|
name: 'Badge',
|
|
props: ['label', 'theme', 'size'],
|
|
components: {
|
|
JingrowUIBadge,
|
|
},
|
|
computed: {
|
|
_color() {
|
|
if (this.theme) return this.theme;
|
|
|
|
// 状态配置数组 - 每个配置包含英文、中文、颜色三个属性
|
|
const statusConfigs = [
|
|
// 域名状态
|
|
{ en: 'ok', zh: '正常', color: 'green' },
|
|
{ en: 'clienthold', zh: '锁定', color: 'red' },
|
|
{ en: 'clientupdateprohibited', zh: '更新锁定', color: 'red' },
|
|
{ en: 'clienttransferprohibited', zh: '转移锁定', color: 'red' },
|
|
{ en: 'clientdeleteprohibited', zh: '删除锁定', color: 'red' },
|
|
{ en: 'clientrenewprohibited', zh: '续费锁定', color: 'red' },
|
|
|
|
// 服务器状态
|
|
{ en: 'Pending', zh: '待处理', color: 'orange' },
|
|
{ en: 'Starting', zh: '启动中', color: 'orange' },
|
|
{ en: 'Running', zh: '运行中', color: 'green' },
|
|
{ en: 'Stopping', zh: '停止中', color: 'orange' },
|
|
{ en: 'Stopped', zh: '已停止', color: 'red' },
|
|
{ en: 'Resetting', zh: '重置中', color: 'blue' },
|
|
{ en: 'Upgrading', zh: '升级中', color: 'purple' },
|
|
{ en: 'Disabled', zh: '已禁用', color: 'gray' },
|
|
|
|
// 其他状态
|
|
{ en: 'Approved', zh: '已批准', color: 'green' },
|
|
{ en: 'Recovering', zh: '恢复中', color: 'orange' },
|
|
{ en: 'Recovered', zh: '已恢复', color: 'blue' },
|
|
{ en: 'Broken', zh: '损坏', color: 'red' },
|
|
{ en: 'Installing', zh: '安装中', color: 'orange' },
|
|
{ en: 'Failure', zh: '失败', color: 'red' },
|
|
{ en: 'Fatal', zh: '致命错误', color: 'red' },
|
|
{ en: 'Failed', zh: '失败', color: 'red' },
|
|
{ en: 'Success', zh: '成功', color: 'green' },
|
|
{ en: 'Completed', zh: '已完成', color: 'green' },
|
|
{ en: 'Deployed', zh: '已部署', color: 'green' },
|
|
{ en: 'Expired', zh: '已过期', color: 'red' },
|
|
{ en: 'Paid', zh: '已支付', color: 'green' },
|
|
{ en: 'Unpaid', zh: '未支付', color: 'orange' },
|
|
{ en: 'Rejected', zh: '已拒绝', color: 'red' },
|
|
{ en: 'Active', zh: '激活', color: 'green' },
|
|
{ en: 'Trial', zh: '试用', color: 'orange' },
|
|
{ en: 'Published', zh: '已发布', color: 'green' },
|
|
{ en: 'Owner', zh: '所有者', color: 'blue' },
|
|
{ en: 'Primary', zh: '主要', color: 'green' },
|
|
];
|
|
|
|
// 查找匹配的配置
|
|
const config = statusConfigs.find(item => item.en === this.label || item.zh === this.label);
|
|
return config ? config.color : 'gray';
|
|
},
|
|
},
|
|
};
|
|
</script>
|