From d76932ae3412fea0094b020f89e4fb5cfb1c98ec Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Wed, 29 Jul 2026 21:46:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E5=8E=9F=E6=9C=89=E7=9A=84=E8=A1=A8=E5=8D=95=E5=8F=8D=E9=A6=88?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Toast.svelte        | 114 +++++++++++++++++++++++++
 src/lib/stores/toast.svelte.ts         |  34 ++++++++
 src/routes/admin/+layout.svelte        |   3 +
 src/routes/admin/files/+page.svelte    |  38 +++------
 src/routes/admin/settings/+page.svelte |  37 ++------
 5 files changed, 173 insertions(+), 53 deletions(-)
 create mode 100644 src/lib/components/Toast.svelte
 create mode 100644 src/lib/stores/toast.svelte.ts

diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
new file mode 100644
index 0000000..ed7ef95
--- /dev/null
+++ b/src/lib/components/Toast.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { toastState } from '$lib/stores/toast.svelte';
+	import { fade, fly } from 'svelte/transition';
+</script>
+
+<div class="toast-container">
+	{#each toastState.messages as msg (msg.id)}
+		<!-- Use fly in and fade out for a sleek animation -->
+		<div
+			class="toast-msg type-{msg.type}"
+			in:fly={{ y: -20, duration: 300 }}
+			out:fade={{ duration: 200 }}
+		>
+			{#if msg.type === 'success'}
+				<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
+					<polyline points="20 6 9 17 4 12"></polyline>
+				</svg>
+			{:else if msg.type === 'error'}
+				<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
+					<circle cx="12" cy="12" r="10"></circle>
+					<line x1="15" y1="9" x2="9" y2="15"></line>
+					<line x1="9" y1="9" x2="15" y2="15"></line>
+				</svg>
+			{:else}
+				<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
+					<circle cx="12" cy="12" r="10"></circle>
+					<line x1="12" y1="16" x2="12" y2="12"></line>
+					<line x1="12" y1="8" x2="12.01" y2="8"></line>
+				</svg>
+			{/if}
+			<span>{msg.text}</span>
+			
+			<button class="toast-close" onclick={() => toastState.remove(msg.id)} aria-label="Close">
+				<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+					<line x1="18" y1="6" x2="6" y2="18"></line>
+					<line x1="6" y1="6" x2="18" y2="18"></line>
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.toast-container {
+		position: fixed;
+		top: 25px;
+		right: 25px;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		pointer-events: none; /* Let clicks pass through empty space */
+	}
+
+	.toast-msg {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 14px 20px;
+		background-color: var(--bg-color, #fff);
+		color: var(--text-color, #222);
+		border: 2px solid var(--text-color, #222);
+		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
+		font-weight: 600;
+		font-size: 0.95rem;
+		min-width: 250px;
+		max-width: 400px;
+		pointer-events: auto; /* Re-enable clicks on the toast itself */
+	}
+
+	.toast-msg.type-success {
+		border-color: #419b38;
+		color: #419b38;
+	}
+
+	.toast-msg.type-success .toast-close {
+		color: #419b38;
+	}
+
+	.toast-msg.type-error {
+		border-color: #d9534f;
+		color: #d9534f;
+	}
+	
+	.toast-msg.type-error .toast-close {
+		color: #d9534f;
+	}
+
+	.toast-icon {
+		flex-shrink: 0;
+	}
+
+	.toast-msg span {
+		flex-grow: 1;
+		word-break: break-word;
+		line-height: 1.4;
+	}
+
+	.toast-close {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: var(--text-muted, #888);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: transform 0.2s;
+	}
+
+	.toast-close:hover {
+		transform: scale(1.1);
+	}
+</style>
diff --git a/src/lib/stores/toast.svelte.ts b/src/lib/stores/toast.svelte.ts
new file mode 100644
index 0000000..4a6f08c
--- /dev/null
+++ b/src/lib/stores/toast.svelte.ts
@@ -0,0 +1,34 @@
+export type ToastType = 'success' | 'error' | 'info';
+
+export interface ToastMessage {
+	id: number;
+	text: string;
+	type: ToastType;
+}
+
+class ToastState {
+	messages = $state<ToastMessage[]>([]);
+	private nextId = 0;
+
+	add(text: string, type: ToastType = 'info', duration: number = 3000) {
+		const id = this.nextId++;
+		this.messages.push({ id, text, type });
+
+		if (duration > 0) {
+			setTimeout(() => {
+				this.remove(id);
+			}, duration);
+		}
+	}
+
+	remove(id: number) {
+		this.messages = this.messages.filter((msg) => msg.id !== id);
+	}
+}
+
+export const toastState = new ToastState();
+
+// Helper export for simpler usage
+export function addToast(text: string, type: ToastType = 'info', duration: number = 3000) {
+	toastState.add(text, type, duration);
+}
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 5635c92..4add4ed 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
+	import Toast from '$lib/components/Toast.svelte';
+	
 	let { children } = $props();
 
 	let scrolled = $state(false);
@@ -58,6 +60,7 @@
 			<span class="user-email">{$page.data.user?.email || 'Admin'}</span>
 		</div>
 	</div>
+	<Toast />
 </header>
 
 <main id="pjax-container" style="padding-top: 58px; min-height: calc(100vh - 120px);">
diff --git a/src/routes/admin/files/+page.svelte b/src/routes/admin/files/+page.svelte
index a757569..a354824 100644
--- a/src/routes/admin/files/+page.svelte
+++ b/src/routes/admin/files/+page.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { ActionData, PageData } from './$types';
+	import { addToast } from '$lib/stores/toast.svelte';
 
 	let { data, form } = $props<{ data: PageData; form: ActionData }>();
 
+	$effect(() => {
+		if (form?.success) {
+			addToast('操作成功！', 'success');
+		} else if (form?.error) {
+			addToast(form.error, 'error');
+		}
+	});
+
 	let isUploading = $state(false);
 	let fileInput: HTMLInputElement;
 
@@ -22,10 +31,10 @@
 		const markdown = isImage ? `![${file.filename}](${url})` : `[${file.filename}](${url})`;
 		
 		navigator.clipboard.writeText(markdown).then(() => {
-			alert('Markdown 链接已复制到剪贴板！');
+			addToast('Markdown 链接已复制到剪贴板！', 'success');
 		}).catch(err => {
 			console.error('Failed to copy: ', err);
-			alert('复制失败，请手动复制。');
+			addToast('复制失败，请手动复制。', 'error');
 		});
 	}
 
@@ -46,13 +55,7 @@
 	<h2>文件管理</h2>
 </div>
 
-{#if form?.error}
-	<div class="alert error">{form.error}</div>
-{/if}
 
-{#if form?.success}
-	<div class="alert success">操作成功！</div>
-{/if}
 
 <div class="upload-zone">
 	<form method="POST" action="?/upload" enctype="multipart/form-data" use:enhance={() => {
@@ -152,22 +155,7 @@
 		font-weight: 800;
 	}
 
-	.alert {
-		padding: 12px 15px;
-		margin-bottom: 20px;
-		border: 2px solid var(--text-color);
-		font-weight: 600;
-	}
-	
-	.alert.error {
-		background-color: #ffcccc;
-		color: #cc0000;
-	}
-	
-	.alert.success {
-		background-color: #d4edda;
-		color: #155724;
-	}
+
 
 	.upload-zone {
 		margin-bottom: 30px;
@@ -298,7 +286,7 @@
 	}
 
 	.delete-btn:hover {
-		background: #ff4444;
+		background: #d9534f;
 		color: white;
 	}
 
diff --git a/src/routes/admin/settings/+page.svelte b/src/routes/admin/settings/+page.svelte
index 11dc259..a495edb 100644
--- a/src/routes/admin/settings/+page.svelte
+++ b/src/routes/admin/settings/+page.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
 	import type { PageData, ActionData } from './$types';
 	import { enhance } from '$app/forms';
+	import { addToast } from '$lib/stores/toast.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 	let activeTab = $state('basic');
+
+	$effect(() => {
+		if (form?.success) {
+			addToast('设置保存成功！', 'success');
+		} else if (form?.error) {
+			addToast(form.error, 'error');
+		}
+	});
 </script>
 
 <div class="admin-page-header">
@@ -16,17 +25,6 @@
 	<button class="tab-btn {activeTab === 'system' ? 'active' : ''}" onclick={() => activeTab = 'system'}>系统与安全</button>
 </div>
 
-{#if form?.success}
-	<div class="success-alert">
-		设置保存成功！
-	</div>
-{/if}
-
-{#if form?.error}
-	<div class="error-alert">
-		{form.error}
-	</div>
-{/if}
 
 <div class="settings-container">
 	{#if activeTab === 'basic'}
@@ -166,23 +164,6 @@
 		border-bottom-color: var(--accent-color, #419b38);
 	}
 
-	.success-alert {
-		padding: 12px 16px;
-		background-color: transparent;
-		border-left: 4px solid #419b38;
-		color: #419b38;
-		margin-bottom: 30px;
-		font-weight: 600;
-	}
-
-	.error-alert {
-		padding: 12px 16px;
-		background-color: transparent;
-		border-left: 4px solid #d9534f;
-		color: #d9534f;
-		margin-bottom: 30px;
-		font-weight: 600;
-	}
 
 	.settings-container {
 		display: grid;