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>
|
||||
Reference in New Issue
Block a user