【操盘手端】提示框优化

2025-04-10 17:33:48 +08:00
parent 3dcc4cb966
commit f8f1c9acb4
3 changed files with 54 additions and 8 deletions
--- 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)
    }
  }
--- 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<ApiResponse>(`/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<ApiResponse>('/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<ApiResponse>('/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")
    }
  }
--- 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 = `<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;
 };