add toast

Author: bot-test-bot

src/components/DataManagement.vue

@@ -125,6 +125,7 @@ import { useI18n } from "vue-i18n";
 import { invoke } from "@tauri-apps/api/core";
 import { save } from "@tauri-apps/plugin-dialog";
 import { snippetApi, initDatabase } from "../services/tauri";
+import { toast } from "../composables/useToast";
 
 const { t } = useI18n();
 
@@ -151,7 +152,7 @@ const exportSnippets = async () => {
 
     if (snippets.length === 0) {
       console.log("没有代码片段可导出");
-      alert("没有代码片段可导出");
+      toast.warning("没有代码片段可导出");
       return;
     }
 
@@ -182,8 +183,10 @@ const exportSnippets = async () => {
           contents: jsonData,
         });
         console.log("文件已保存到:", filePath);
+        toast.success("代码片段导出成功");
       } else {
         console.log("用户取消了文件保存");
+        toast.info("导出已取消");
       }
     } catch (error) {
       console.error("Tauri 文件保存失败，尝试浏览器下载:", error);
@@ -202,12 +205,15 @@ const exportSnippets = async () => {
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
       console.log("使用浏览器下载完成");
+      toast.success("代码片段导出成功");
     }
 
     console.log("导出完成");
   } catch (error) {
     console.error("Failed to export snippets:", error);
-    alert("导出失败: " + error);
+    toast.error(
+      "导出失败: " + (error instanceof Error ? error.message : String(error))
+    );
   } finally {
     isExporting.value = false;
   }
@@ -256,10 +262,16 @@ const handleFileSelect = async (event: Event) => {
     // 重新加载数据统计
     await loadDataStatistics();
 
+    // 显示成功通知
+    toast.success(`成功导入 ${snippets.length} 个代码片段`);
+
     // 清空文件输入
     target.value = "";
   } catch (error) {
     console.error("Failed to import data:", error);
+    toast.error(
+      "导入失败: " + (error instanceof Error ? error.message : String(error))
+    );
   } finally {
     isImporting.value = false;
   }
@@ -281,6 +293,7 @@ const loadDataStatistics = async () => {
     console.log("代码片段数量:", snippetsCount.value);
   } catch (error) {
     console.error("Failed to load data statistics:", error);
+    toast.error("加载数据统计失败");
   }
 };
 

src/components/Toast.vue

@@ -0,0 +1,147 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="fixed top-4 right-4 z-50 max-w-sm">
+      <Transition
+        enter-active-class="transition-all duration-300 ease-out transform"
+        enter-from-class="translate-x-full opacity-0"
+        enter-to-class="translate-x-0 opacity-100"
+        leave-active-class="transition-all duration-200 ease-in transform"
+        leave-from-class="translate-x-0 opacity-100"
+        leave-to-class="translate-x-full opacity-0"
+      >
+        <div
+          v-if="visible"
+          :class="[
+            'px-4 py-3 rounded-lg shadow-lg backdrop-blur-sm border',
+            typeClasses[type],
+          ]"
+        >
+          <div class="flex items-center space-x-2">
+            <div class="flex-shrink-0">
+              <component :is="iconComponent" class="w-5 h-5" />
+            </div>
+            <div class="flex-1">
+              <p class="text-sm font-medium">{{ message }}</p>
+            </div>
+            <button
+              v-if="closable"
+              @click="close"
+              class="flex-shrink-0 ml-2 text-current opacity-60 hover:opacity-100 transition-opacity"
+            >
+              <svg
+                class="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+
+export interface ToastProps {
+  message: string;
+  type?: "success" | "error" | "warning" | "info";
+  duration?: number;
+  closable?: boolean;
+}
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  type: "success",
+  duration: 3000,
+  closable: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const visible = ref(false);
+let timer: NodeJS.Timeout | null = null;
+
+const typeClasses = {
+  success:
+    "bg-green-50/95 dark:bg-green-900/95 text-green-800 dark:text-green-200 border-green-200 dark:border-green-700",
+  error:
+    "bg-red-50/95 dark:bg-red-900/95 text-red-800 dark:text-red-200 border-red-200 dark:border-red-700",
+  warning:
+    "bg-yellow-50/95 dark:bg-yellow-900/95 text-yellow-800 dark:text-yellow-200 border-yellow-200 dark:border-yellow-700",
+  info: "bg-blue-50/95 dark:bg-blue-900/95 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-700",
+};
+
+const iconComponent = computed(() => {
+  switch (props.type) {
+    case "success":
+      return {
+        template: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+        </svg>`,
+      };
+    case "error":
+      return {
+        template: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>`,
+      };
+    case "warning":
+      return {
+        template: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z"></path>
+        </svg>`,
+      };
+    case "info":
+      return {
+        template: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>`,
+      };
+    default:
+      return null;
+  }
+});
+
+const show = () => {
+  visible.value = true;
+
+  if (props.duration > 0) {
+    timer = setTimeout(() => {
+      close();
+    }, props.duration);
+  }
+};
+
+const close = () => {
+  visible.value = false;
+
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+
+  setTimeout(() => {
+    emit("close");
+  }, 200);
+};
+
+onMounted(() => {
+  show();
+});
+
+defineExpose({
+  show,
+  close,
+});
+</script>

src/composables/useToast.ts

@@ -0,0 +1,100 @@
+import { ref, createApp } from "vue";
+import Toast from "../components/Toast.vue";
+
+// 全局状态
+const toasts = ref<Array<{ id: string; app: any }>>([]);
+let toastCounter = 0;
+
+export interface UseToastOptions {
+  message: string;
+  type?: "success" | "error" | "warning" | "info";
+  duration?: number;
+  closable?: boolean;
+}
+
+export function useToast() {
+  const showToast = (options: UseToastOptions) => {
+    // 生成唯一ID
+    const id = `toast-${++toastCounter}`;
+
+    // 创建容器元素
+    const container = document.createElement("div");
+    container.id = id;
+    document.body.appendChild(container);
+
+    // 创建Vue应用实例
+    const app = createApp(Toast, {
+      ...options,
+      onClose: () => {
+        // 销毁应用并移除DOM元素
+        setTimeout(() => {
+          app.unmount();
+          if (container.parentNode) {
+            container.parentNode.removeChild(container);
+          }
+          // 从toasts数组中移除
+          const index = toasts.value.findIndex((toast) => toast.id === id);
+          if (index > -1) {
+            toasts.value.splice(index, 1);
+          }
+        }, 300); // 等待动画完成
+      },
+    });
+
+    // 挂载应用
+    app.mount(container);
+
+    // 记录toast实例
+    toasts.value.push({ id, app });
+
+    return {
+      id,
+      close: () => {
+        const toastInstance = app._instance?.exposed;
+        if (toastInstance && typeof toastInstance.close === "function") {
+          toastInstance.close();
+        }
+      },
+    };
+  };
+
+  // 便捷方法
+  const success = (message: string, options?: Partial<UseToastOptions>) => {
+    return showToast({ message, type: "success", ...options });
+  };
+
+  const error = (message: string, options?: Partial<UseToastOptions>) => {
+    return showToast({ message, type: "error", ...options });
+  };
+
+  const warning = (message: string, options?: Partial<UseToastOptions>) => {
+    return showToast({ message, type: "warning", ...options });
+  };
+
+  const info = (message: string, options?: Partial<UseToastOptions>) => {
+    return showToast({ message, type: "info", ...options });
+  };
+
+  // 关闭所有toast
+  const clearAll = () => {
+    toasts.value.forEach((toast) => {
+      const toastInstance = toast.app._instance?.exposed;
+      if (toastInstance && typeof toastInstance.close === "function") {
+        toastInstance.close();
+      }
+    });
+    toasts.value = [];
+  };
+
+  return {
+    showToast,
+    success,
+    error,
+    warning,
+    info,
+    clearAll,
+  };
+}
+
+// 创建全局实例，可以在任何地方导入使用
+export const toast = useToast();

src/i18n/locales/en-US.ts

@@ -124,6 +124,22 @@ export default {
     placeholder: "Clipboard content...",
   },
 
+  // Toast notifications
+  toast: {
+    success: "Success",
+    error: "Error",
+    warning: "Warning",
+    info: "Info",
+    copied: "Copied",
+    saved: "Saved",
+    deleted: "Deleted",
+    updated: "Updated",
+    created: "Created",
+    failed: "Failed",
+    networkError: "Network Error",
+    unknownError: "Unknown Error",
+  },
+
   // Settings
   settings: {
     title: "Settings",

src/i18n/locales/zh-CN.ts

@@ -122,6 +122,22 @@ export default {
     placeholder: "剪贴板内容...",
   },
 
+  // Toast 通知
+  toast: {
+    success: "成功",
+    error: "错误",
+    warning: "警告",
+    info: "信息",
+    copied: "已复制",
+    saved: "已保存",
+    deleted: "已删除",
+    updated: "已更新",
+    created: "已创建",
+    failed: "失败",
+    networkError: "网络错误",
+    unknownError: "未知错误",
+  },
+
   // 设置
   settings: {
     title: "设置",