Add: No toast notification system or success feedback + No corrections/supersession UI

2026-06-27 16:36:35 +08:00
parent efd3974d1f
commit 2d36d1a5dd
15 changed files with 598 additions and 29 deletions
@@ -0,0 +1,52 @@
+<template>
+  <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+    <transition-group name="toast">
+      <div
+        v-for="toast in toasts"
+        :key="toast.id"
+        class="pointer-events-auto rounded-md shadow-lg px-4 py-3 text-sm font-medium flex items-start gap-2"
+        :class="toastClasses[toast.type]"
+      >
+        <span class="flex-1">{{ toast.message }}</span>
+        <button
+          @click="dismiss(toast.id)"
+          class="opacity-60 hover:opacity-100 text-current ml-2 shrink-0"
+        >
+          &times;
+        </button>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toasts } from '../composables/useToast'
+
+const toastClasses: Record<string, string> = {
+  success: 'bg-green-600 text-white',
+  error: 'bg-red-600 text-white',
+  warning: 'bg-yellow-500 text-white',
+  info: 'bg-blue-600 text-white',
+}
+
+function dismiss(id: number) {
+  toasts.value = toasts.value.filter(t => t.id !== id)
+}
+</script>
+
+<style scoped>
+.toast-enter-active {
+  transition: all 0.3s ease-out;
+}
+.toast-leave-active {
+  transition: all 0.2s ease-in;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>