huangzd1997
c3f160afa5
error-bus 提供框架无关的订阅式错误总线：notify/dismiss/clear、负载归一化、 3 条上限截断、订阅返回取消函数防泄漏；GlobalErrorContainer 订阅并渲染可关闭 错误条，挂在 AdminLayout 内容区顶部。
36 lines
773 B
Vue
36 lines
773 B
Vue
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import {
|
|
dismissGlobalError,
|
|
subscribeGlobalError,
|
|
type GlobalErrorItem,
|
|
} from '@/layout/error-bus'
|
|
|
|
const errors = ref<GlobalErrorItem[]>([])
|
|
let unsubscribe: (() => void) | null = null
|
|
|
|
onMounted(() => {
|
|
unsubscribe = subscribeGlobalError((list) => {
|
|
errors.value = list
|
|
})
|
|
})
|
|
onBeforeUnmount(() => {
|
|
unsubscribe?.()
|
|
unsubscribe = null
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="errors.length" class="global-error-stack" role="alert" aria-live="assertive">
|
|
<el-alert
|
|
v-for="item in errors"
|
|
:key="item.id"
|
|
:title="item.message"
|
|
type="error"
|
|
show-icon
|
|
:closable="true"
|
|
@close="dismissGlobalError(item.id)"
|
|
/>
|
|
</div>
|
|
</template>
|