feat(auth): 重构登录页面并添加忘记密码路由
- 重构登录表单 UI,使用 DaisyUI 组件美化界面 - 添加记住我功能和加载状态提示 - 集成 Toast 提示组件用于显示登录结果 - 新增忘记密码页面路由 - 实现全局 Toast 消息提醒功能 - 在根布局中引入 ToastContainer 组件
This commit is contained in:
34
src/lib/components/ToastContainer.svelte
Normal file
34
src/lib/components/ToastContainer.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { toast } from '$lib/stores/toastStore';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
// 映射 Toast 类型到 daisyUI 的 alert 样式类
|
||||
const alertStyles = {
|
||||
info: 'alert-info',
|
||||
success: 'alert-success',
|
||||
warning: 'alert-warning',
|
||||
error: 'alert-error'
|
||||
};
|
||||
|
||||
// 映射 Toast 类型到图标 (可选,为了更像 AntD)
|
||||
const icons = {
|
||||
info: 'ℹ️',
|
||||
success: '✅',
|
||||
warning: '⚠️',
|
||||
error: '❌'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="toast toast-top toast-center z-50">
|
||||
{#each $toast as t (t.id)}
|
||||
<div
|
||||
animate:flip={{ duration: 300 }}
|
||||
transition:fly={{ x: 100, duration: 300 }}
|
||||
class="alert {alertStyles[t.type]} shadow-lg min-w-[200px] flex justify-start"
|
||||
>
|
||||
<span>{icons[t.type]}</span>
|
||||
<span>{t.message}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
39
src/lib/stores/toastStore.ts
Normal file
39
src/lib/stores/toastStore.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export type ToastType = 'success' | 'error' | 'warning' | 'info';
|
||||
|
||||
export interface ToastMessage {
|
||||
id: string;
|
||||
type: ToastType;
|
||||
message: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
const createToastStore = () => {
|
||||
|
||||
const {subscribe, update} = writable<ToastMessage[]>([]);
|
||||
const send = (message:string, type:ToastType = 'info',duration = 3000)=> {
|
||||
const id = crypto.randomUUID();
|
||||
update((toasts) => [...toasts,{id,type,message,duration}])
|
||||
if (duration > 0){
|
||||
setTimeout(()=>{
|
||||
remove(id);
|
||||
},duration)
|
||||
}
|
||||
}
|
||||
const remove = (id:string) => {
|
||||
update((toasts) => toasts.filter(toast => toast.id !== id))
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
success: (msg: string, duration = 3000) => send(msg, 'success', duration),
|
||||
error: (msg: string, duration = 3000) => send(msg, 'error', duration),
|
||||
warning: (msg: string, duration = 3000) => send(msg, 'warning', duration),
|
||||
info: (msg: string, duration = 3000) => send(msg, 'info', duration),
|
||||
remove
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export const toast = createToastStore();
|
||||
Reference in New Issue
Block a user