fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【操盘手端】提示框优化

Browse Source
This commit is contained in:
Ghost
2025-04-10 17:33:48 +08:00
parent 3dcc4cb966
commit f8f1c9acb4
3 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
Cunkebao/lib/toast.ts
View File

@@ -1,4 +1,4 @@
export const showToast = (message: string, type: 'success' | 'error' = 'success') => {
export const showToast = (message: string, type: 'success' | 'error' | 'loading' = 'success', showIcon: boolean = false) => {
// 创建提示元素
const toast = document.createElement('div');
toast.className = `fixed inset-0 flex items-center justify-center z-50`;
@@ -9,11 +9,32 @@ export const showToast = (message: string, type: 'success' | 'error' = 'success'
// 创建内容框
const content = document.createElement('div');
content.className = `relative bg-black/50 p-4 rounded-lg shadow-lg text-white z-50 min-w-[300px] max-w-[80%]`;
content.className = `relative bg-black/50 rounded-lg shadow-lg text-white z-50 min-w-[160px] max-w-[80%] flex flex-col items-center ${showIcon ? 'p-4 w-[160px] h-[160px]' : 'py-4 px-6'} ${showIcon ? 'gap-2' : ''}`;
if (showIcon) {
// 创建图标
const icon = document.createElement('div');
icon.className = 'w-10 h-10 flex items-center justify-center mt-4';
if (type === 'loading') {
icon.innerHTML = `<svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>`;
} else if (type === 'success') {
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>`;
} else {
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>`;
}
content.appendChild(icon);
}
// 创建消息
const messageElement = document.createElement('p');
messageElement.className = 'text-base text-center';
messageElement.className = `text-sm text-center ${showIcon ? 'mt-2' : ''}`;
messageElement.textContent = message;
// 组装元素
@@ -24,8 +45,13 @@ export const showToast = (message: string, type: 'success' | 'error' = 'success'
// 添加到页面
document.body.appendChild(toast);
// 3秒后自动移除
setTimeout(() => {
toast.remove();
}, 1500);
// 如果不是loading状态,1.5秒后自动移除
if (type !== 'loading') {
setTimeout(() => {
toast.remove();
}, 1500);
}
// 返回toast元素,方便手动移除
return toast;
};