chenshoulin
4aba003a9e
- Toast 自动关闭支持悬停/聚焦暂停，移开后按剩余时间继续 - 存储异常提示移到 App 级，看板与今日视图都能看到 - 归档隐藏与筛选隐藏分开说明，并提示列内排序暂停原因
46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
import { useToastStore } from '@/stores/toast'
|
|
|
|
const store = useToastStore()
|
|
const { toasts } = storeToRefs(store)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col items-center gap-2 px-4"
|
|
>
|
|
<div
|
|
v-for="toast in toasts"
|
|
: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>
|
|
|
|
<button
|
|
v-if="toast.action"
|
|
type="button"
|
|
class="shrink-0 rounded px-2 py-0.5 text-sm font-medium text-sky-300 transition hover:bg-white/10 dark:text-sky-700 dark:hover:bg-zinc-900/10"
|
|
@click="store.runAction(toast.id)"
|
|
>
|
|
{{ toast.action.label }}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="shrink-0 rounded px-1.5 text-slate-400 transition hover:text-white dark:text-zinc-500 dark:hover:text-zinc-900"
|
|
aria-label="关闭提示"
|
|
@click="store.dismiss(toast.id)"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|