fix(ui): Toast 撤销可暂停,存储告警提升为全局
- Toast 自动关闭支持悬停/聚焦暂停,移开后按剩余时间继续 - 存储异常提示移到 App 级,看板与今日视图都能看到 - 归档隐藏与筛选隐藏分开说明,并提示列内排序暂停原因
This commit is contained in:
@@ -46,9 +46,7 @@ describe('ToastHost', () => {
|
||||
store.show({ message: '已删除', action: { label: '撤销', run }, duration: 0 })
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const actionButton = wrapper
|
||||
.findAll('button')
|
||||
.find((node) => node.text() === '撤销')
|
||||
const actionButton = wrapper.findAll('button').find((node) => node.text() === '撤销')
|
||||
expect(actionButton).toBeDefined()
|
||||
|
||||
await actionButton?.trigger('click')
|
||||
@@ -70,4 +68,25 @@ describe('ToastHost', () => {
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('[role="status"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('悬停时暂停自动关闭,移开后继续', async () => {
|
||||
vi.useFakeTimers()
|
||||
try {
|
||||
const { store, wrapper } = setup()
|
||||
store.show({ message: '可撤销', duration: 1000 })
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const toast = wrapper.find('[role="status"]')
|
||||
await toast.trigger('mouseenter')
|
||||
|
||||
vi.advanceTimersByTime(10_000)
|
||||
expect(store.toasts).toHaveLength(1)
|
||||
|
||||
await toast.trigger('mouseleave')
|
||||
vi.advanceTimersByTime(1000)
|
||||
expect(store.toasts).toHaveLength(0)
|
||||
} finally {
|
||||
vi.useRealTimers()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -16,6 +16,10 @@ const { toasts } = storeToRefs(store)
|
||||
:key="toast.id"
|
||||
role="status"
|
||||
class="pointer-events-auto flex w-full max-w-sm items-center gap-3 rounded-md bg-slate-800 px-3 py-2 text-sm text-white shadow-panel dark:bg-zinc-100 dark:text-zinc-900"
|
||||
@mouseenter="store.pause(toast.id)"
|
||||
@mouseleave="store.resume(toast.id)"
|
||||
@focusin="store.pause(toast.id)"
|
||||
@focusout="store.resume(toast.id)"
|
||||
>
|
||||
<span class="min-w-0 flex-1 wrap-break-word">{{ toast.message }}</span>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user