优化

src/shared/components/OperationErrorToast.test.ts

@@ -0,0 +1,19 @@
+import { ElMessage } from 'element-plus'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import OperationErrorToast from './OperationErrorToast.vue'
+
+describe('OperationErrorToast', () => {
+  beforeEach(() => vi.restoreAllMocks())
+
+  it('shows an operation error as a dismissible temporary message without page markup', async () => {
+    const error = vi.spyOn(ElMessage, 'error').mockImplementation(() => ({ close: vi.fn() }) as never)
+    const wrapper = mount(OperationErrorToast, { props: { details: { message: '箱号不存在', code: 'A0404' } } })
+
+    expect(error).toHaveBeenCalledWith({ message: '箱号不存在', showClose: true, duration: 4500 })
+    expect(wrapper.html()).toBe('')
+
+    await wrapper.setProps({ details: { message: '保存失败', code: 'A0500' } })
+    expect(error).toHaveBeenLastCalledWith({ message: '保存失败', showClose: true, duration: 4500 })
+  })
+})

src/shared/components/OperationErrorToast.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { ApiErrorDetails } from '@/shared/api/http'
+
+const props = withDefaults(defineProps<{
+  details?: ApiErrorDetails | null
+  message?: string | null
+}>(), {
+  details: null,
+  message: null,
+})
+
+watch(
+  () => props.details?.message || props.message || '',
+  (message, previousMessage) => {
+    if (!message || message === previousMessage) return
+    ElMessage.error({ message, showClose: true, duration: 4500 })
+  },
+  { immediate: true },
+)
+</script>
+
+<template></template>