task-13(壳层/路由): 实现全局请求错误提示容器
error-bus 提供框架无关的订阅式错误总线:notify/dismiss/clear、负载归一化、 3 条上限截断、订阅返回取消函数防泄漏;GlobalErrorContainer 订阅并渲染可关闭 错误条,挂在 AdminLayout 内容区顶部。
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user