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>