Kris
d38f325577
本次提交包含以下核心改进： 1. 统一组件命名规范：为所有列表页组件添加defineOptions配置组件名 2. 重构侧边导航系统：支持折叠态、路由name跳转、自动激活匹配 3. 新增通用基础组件：ErrorRetryAlert错误重试提示、PermissionButton权限按钮 4. 优化列表页错误处理：替换全局错误提示为统一ErrorRetryAlert组件 5. 增强仪表盘能力：添加自动重试机制、traceId展示、多维度指标统计 6. 完善页面容器功能：支持详情页标签、面包屑优化、权限控制 7. 新增系统健康状态监控：集成健康检查API，展示系统健康状态 8. 优化页面交互：加载态、空态、错误态统一视觉语言
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>
|