task-13(壳层/路由): 实现全局请求错误提示容器

error-bus 提供框架无关的订阅式错误总线:notify/dismiss/clear、负载归一化、
3 条上限截断、订阅返回取消函数防泄漏;GlobalErrorContainer 订阅并渲染可关闭
错误条,挂在 AdminLayout 内容区顶部。
This commit is contained in:
2026-09-05 12:25:19 +08:00
parent f4f7268045
commit c3f160afa5
5 changed files with 188 additions and 0 deletions
@@ -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>