From f8f1c9acb4bbdf176b4cd8a6025f27b2026196cb Mon Sep 17 00:00:00 2001 From: Ghost <106998207@qq.com> Date: Thu, 10 Apr 2025 17:33:48 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=93=8D=E7=9B=98=E6=89=8B=E7=AB=AF?= =?UTF-8?q?=E3=80=91=E6=8F=90=E7=A4=BA=E6=A1=86=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/device-selection-dialog.tsx | 8 +++- Cunkebao/app/workspace/auto-like/page.tsx | 14 +++++++ Cunkebao/lib/toast.ts | 40 +++++++++++++++---- 3 files changed, 54 insertions(+), 8 deletions(-) diff --git a/Cunkebao/app/workspace/auto-like/components/device-selection-dialog.tsx b/Cunkebao/app/workspace/auto-like/components/device-selection-dialog.tsx index 407654ed..cf66849f 100644 --- a/Cunkebao/app/workspace/auto-like/components/device-selection-dialog.tsx +++ b/Cunkebao/app/workspace/auto-like/components/device-selection-dialog.tsx @@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ import { ScrollArea } from "@/components/ui/scroll-area" import { Checkbox } from "@/components/ui/checkbox" import { api } from "@/lib/api" +import { showToast } from "@/lib/toast" interface ServerDevice { id: number @@ -51,6 +52,7 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS }, [open, selectedDevices]) const fetchDevices = async () => { + const loadingToast = showToast("正在加载设备列表...", "loading", true); try { setLoading(true) const response = await api.get<{code: number, msg: string, data: {list: ServerDevice[], total: number}}>('/v1/devices?page=1&limit=100') @@ -65,10 +67,14 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS totalFriend: device.totalFriend || 0 })) setDevices(transformedDevices) + } else { + showToast(response.msg || "获取设备列表失败", "error") } - } catch (error) { + } catch (error: any) { console.error('获取设备列表失败:', error) + showToast(error?.message || "请检查网络连接", "error") } finally { + loadingToast.remove(); setLoading(false) } } diff --git a/Cunkebao/app/workspace/auto-like/page.tsx b/Cunkebao/app/workspace/auto-like/page.tsx index f3efaba6..64be369c 100644 --- a/Cunkebao/app/workspace/auto-like/page.tsx +++ b/Cunkebao/app/workspace/auto-like/page.tsx @@ -83,6 +83,7 @@ export default function AutoLikePage() { const pageSize = 10 const fetchTasks = async (page: number, name?: string) => { + const loadingToast = showToast("正在加载任务列表...", "loading", true); try { setLoading(true) const queryParams = new URLSearchParams({ @@ -105,6 +106,7 @@ export default function AutoLikePage() { console.error("获取任务列表失败:", error) showToast(error?.message || "请检查网络连接", "error") } finally { + loadingToast.remove(); setLoading(false) } } @@ -127,18 +129,22 @@ export default function AutoLikePage() { } const handleDelete = async (taskId: number) => { + const loadingToast = showToast("正在删除任务...", "loading", true); try { const response = await api.delete(`/v1/workbench/delete?id=${taskId}`) if (response.code === 200) { // 删除成功后刷新列表 + loadingToast.remove(); fetchTasks(currentPage, searchName) showToast(response.msg || "已成功删除点赞任务", "success") } else { + loadingToast.remove(); showToast(response.msg || "请稍后再试", "error") } } catch (error: any) { console.error("删除任务失败:", error) + loadingToast.remove(); showToast(error?.message || "请检查网络连接", "error") } } @@ -152,6 +158,7 @@ export default function AutoLikePage() { } const handleCopy = async (taskId: number) => { + const loadingToast = showToast("正在复制任务...", "loading", true); try { const response = await api.post('/v1/workbench/copy', { id: taskId @@ -159,18 +166,22 @@ export default function AutoLikePage() { if (response.code === 200) { // 复制成功后刷新列表 + loadingToast.remove(); fetchTasks(currentPage, searchName) showToast(response.msg || "已成功复制点赞任务", "success") } else { + loadingToast.remove(); showToast(response.msg || "请稍后再试", "error") } } catch (error: any) { console.error("复制任务失败:", error) + loadingToast.remove(); showToast(error?.message || "请检查网络连接", "error") } } const toggleTaskStatus = async (taskId: number, currentStatus: number) => { + const loadingToast = showToast("正在更新任务状态...", "loading", true); try { const response = await api.post('/v1/workbench/update-status', { id: taskId, @@ -186,12 +197,15 @@ export default function AutoLikePage() { )) const newStatus = currentStatus === 1 ? 2 : 1 + loadingToast.remove(); showToast(response.msg || `任务${newStatus === 1 ? "已启动" : "已暂停"}`, "success") } else { + loadingToast.remove(); showToast(response.msg || "请稍后再试", "error") } } catch (error: any) { console.error("更新任务状态失败:", error) + loadingToast.remove(); showToast(error?.message || "请检查网络连接", "error") } } diff --git a/Cunkebao/lib/toast.ts b/Cunkebao/lib/toast.ts index 6db12548..01983ce7 100644 --- a/Cunkebao/lib/toast.ts +++ b/Cunkebao/lib/toast.ts @@ -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 = ` + + `; + } else if (type === 'success') { + icon.innerHTML = ` + + `; + } else { + icon.innerHTML = ` + + `; + } + 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; }; \ No newline at end of file