49 lines
2.0 KiB
Vue
49 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<a-alert v-if="error" type="error" show-icon :message="defaultMessage" :description="description">
|
|||
|
|
<template v-if="$slots.action || retryText" #action>
|
|||
|
|
<slot name="action">
|
|||
|
|
<a-button size="small" @click="$emit('retry')">{{ retryText }}</a-button>
|
|||
|
|
</slot>
|
|||
|
|
</template>
|
|||
|
|
</a-alert>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
/**
|
|||
|
|
* 错误提示 + 重试按钮
|
|||
|
|
*
|
|||
|
|
* 用于列表/详情/统计等数据加载失败时统一展示错误信息与重试入口。
|
|||
|
|
* 当 error 为 null/undefined/空字符串时不渲染（v-if 由内部控制）。
|
|||
|
|
*
|
|||
|
|
* 设计说明（对齐 channels 模块的 ErrorRetryAlert）：
|
|||
|
|
* - error 可以是 Error 对象、{ message } 对象或字符串，由调用方决定 message/description 的来源
|
|||
|
|
* - message prop 缺省时自动从 error 提取（string 直接用，对象取 .message）
|
|||
|
|
* - retryText 为空字符串时不显示默认重试按钮（适用于不需要重试的场景）
|
|||
|
|
* - 自定义 action 通过 #action slot 传入
|
|||
|
|
*
|
|||
|
|
* 与 EmptyState 的职责区分：
|
|||
|
|
* - EmptyState 仅用于「无数据」场景（语义为空态）
|
|||
|
|
* - ErrorRetryAlert 用于「加载失败」场景（语义为错误态），避免语义误用
|
|||
|
|
*/
|
|||
|
|
const props = defineProps({
|
|||
|
|
// 错误对象（null/undefined/空字符串 时组件不渲染）
|
|||
|
|
error: { type: [Object, Error, String], default: null },
|
|||
|
|
// 错误标题（缺省时自动从 error 提取 message）
|
|||
|
|
message: { type: String, default: '' },
|
|||
|
|
// 错误描述（可选，展示在 message 下方）
|
|||
|
|
description: { type: String, default: '' },
|
|||
|
|
// 重试按钮文案（为空字符串时不显示默认按钮，需用 #action slot 自定义）
|
|||
|
|
retryText: { type: String, default: '重试' }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
defineEmits(['retry'])
|
|||
|
|
|
|||
|
|
const defaultMessage = computed(() => {
|
|||
|
|
if (props.message) return props.message
|
|||
|
|
if (!props.error) return ''
|
|||
|
|
if (typeof props.error === 'string') return props.error
|
|||
|
|
return props.error.message || ''
|
|||
|
|
})
|
|||
|
|
</script>
|