fix: 修复 Toast 组件定位及状态管理逻辑

This commit is contained in:
seahi committed 2026-07-29 23:03:34 +08:00
1 parent 20d9ea92fc
commit 8af6ae8864
2 files changed
+8 -2

No files matched your search

+2 -2
View File
@@ -8,7 +8,7 @@
<!-- Use fly in and fade out for a sleek animation --> <!-- Use fly in and fade out for a sleek animation -->
<div <div
class="toast-msg type-{msg.type}" class="toast-msg type-{msg.type}"
in:fly={{ y: -20, duration: 300 }} in:fly={{ y: 20, duration: 300 }}
out:fade={{ duration: 200 }} out:fade={{ duration: 200 }}
> >
{#if msg.type === 'success'} {#if msg.type === 'success'}
@@ -43,7 +43,7 @@
<style> <style>
.toast-container { .toast-container {
position: fixed; position: fixed;
top: 25px; bottom: 25px;
right: 25px; right: 25px;
z-index: 9999; z-index: 9999;
display: flex; display: flex;
+6
View File
@@ -1,3 +1,5 @@
import { untrack } from 'svelte';
export type ToastType = 'success' | 'error' | 'info'; export type ToastType = 'success' | 'error' | 'info';
export interface ToastMessage { export interface ToastMessage {
@@ -11,6 +13,7 @@ class ToastState {
private nextId = 0; private nextId = 0;
add(text: string, type: ToastType = 'info', duration: number = 3000) { add(text: string, type: ToastType = 'info', duration: number = 3000) {
untrack(() => {
const id = this.nextId++; const id = this.nextId++;
this.messages.push({ id, text, type }); this.messages.push({ id, text, type });
@@ -19,10 +22,13 @@ class ToastState {
this.remove(id); this.remove(id);
}, duration); }, duration);
} }
});
} }
remove(id: number) { remove(id: number) {
untrack(() => {
this.messages = this.messages.filter((msg) => msg.id !== id); this.messages = this.messages.filter((msg) => msg.id !== id);
});
} }
} }