feat(auth): 重构登录页面并添加忘记密码路由

- 重构登录表单 UI,使用 DaisyUI 组件美化界面
- 添加记住我功能和加载状态提示
- 集成 Toast 提示组件用于显示登录结果
- 新增忘记密码页面路由
- 实现全局 Toast 消息提醒功能
- 在根布局中引入 ToastContainer 组件
This commit is contained in:
Chaos
2025-11-23 07:43:23 +08:00
parent 8c041c1740
commit a71622f797
5 changed files with 190 additions and 32 deletions

View 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>

View 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();