- 添加用户列表分页、搜索和角色筛选功能 - 实现用户批量选择与操作(删除/封禁) - 引入ofetch库优化API请求处理 - 添加表格加载状态和错误处理组件 - 更新图标组件属性以支持新特性 - 修复页面跳转状态码问题(302改为303) - 优化用户表格UI展示细节与交互体验
29 lines
956 B
Svelte
29 lines
956 B
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition';
|
|
import { flip } from 'svelte/animate';
|
|
import Icon from '$lib/components/icon/Icon.svelte';
|
|
import type { IconId } from '$lib/types/icon-ids.ts';
|
|
import { getContext } from 'svelte';
|
|
import { TOAST_KEY, type ToastState, type ToastType } from '$lib/stores/toast.svelte.ts';
|
|
const toastState = getContext<ToastState>(TOAST_KEY);
|
|
|
|
const toastIconMap: Record<ToastType, IconId> = {
|
|
success: 'success',
|
|
error: 'error',
|
|
warning: 'warning',
|
|
info: 'info'
|
|
};
|
|
</script>
|
|
|
|
<div class="toast toast-top toast-center z-50">
|
|
{#each toastState.toasts as t (t.id)}
|
|
<div
|
|
animate:flip={{ duration: 300 }}
|
|
transition:fly={{ x: 100, duration: 300 }}
|
|
class="alert bg-base-100 text-base-content border-0 shadow-base-300/50 shadow-lg min-w-[200px] flex justify-start"
|
|
>
|
|
<span><Icon Cid={toastIconMap[t.type]} size="24"></Icon></span>
|
|
<span>{t.message}</span>
|
|
</div>
|
|
{/each}
|
|
</div> |