feat: 添加全局alert，并替换原先是toast

src/components/Alert/Alert.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="fixed left-1/2 top-30 z-50 -translate-x-1/2">
+    <transition
+      name="alert"
+      enter-active-class="alert-enter-active"
+      leave-active-class="alert-leave-active"
+      enter-from-class="alert-enter-from"
+      enter-to-class="alert-enter-to"
+      leave-from-class="alert-leave-from"
+      leave-to-class="alert-leave-to"
+    >
+      <div
+        v-if="alertStore?.alertState.value.visible"
+        :class="alertClasses"
+        class="alert"
+      >
+        <div class="flex items-center gap-2">
+          <!-- Icons for different alert types -->
+          <CheckCircle
+            v-if="alertStore?.alertState.value.type === 'success'"
+            class="h-6 w-6 shrink-0 stroke-current"
+          />
+          <XCircle
+            v-else-if="alertStore?.alertState.value.type === 'error'"
+            class="h-6 w-6 shrink-0 stroke-current"
+          />
+          <AlertTriangle
+            v-else-if="alertStore?.alertState.value.type === 'warning'"
+            class="h-6 w-6 shrink-0 stroke-current"
+          />
+          <Info v-else class="h-6 w-6 shrink-0 stroke-current" />
+          <span>{{ alertStore?.alertState.value.message }}</span>
+        </div>
+        <div class="flex-none">
+          <button
+            class="btn btn-sm btn-circle btn-ghost"
+            @click="alertStore?.hide"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { CheckCircle, XCircle, AlertTriangle, Info, X } from "lucide-vue-next";
+import { useAlertStore } from ".";
+
+const alertStore = useAlertStore();
+
+// Computed classes for different alert types
+const alertClasses = computed(() => {
+  const baseClasses = "shadow-lg max-w-sm";
+
+  switch (alertStore?.alertState.value.type) {
+    case "success":
+      return `${baseClasses} alert-success`;
+    case "error":
+      return `${baseClasses} alert-error`;
+    case "warning":
+      return `${baseClasses} alert-warning`;
+    case "info":
+    default:
+      return `${baseClasses} alert-info`;
+  }
+});
+</script>
+
+<style scoped>
+/* 进入和离开的过渡动画持续时间 */
+.alert-enter-active,
+.alert-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* 进入的起始状态 */
+.alert-enter-from {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+/* 进入的结束状态 */
+.alert-enter-to {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* 离开的起始状态 */
+.alert-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* 离开的结束状态 */
+.alert-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.98);
+}
+</style>

src/components/Alert/index.ts

@@ -0,0 +1,61 @@
+import { ref, computed } from "vue";
+import Alert from "./Alert.vue";
+import { createInjectionState } from "@vueuse/core";
+
+export interface AlertState {
+  visible: boolean;
+  message: string;
+  type: "success" | "error" | "warning" | "info";
+}
+
+// create injectivon state using vueuse
+const [useAlertProvider, useAlertStore] = createInjectionState(() => {
+  const alertState = ref<AlertState>({
+    visible: false,
+    message: "",
+    type: "info",
+  });
+
+  let timeoutId: number | null = null;
+
+  function show(
+    message: string,
+    type: AlertState["type"] = "info",
+    duration = 2000,
+  ) {
+    // Clear existing timeout
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+
+    alertState.value = {
+      visible: true,
+      message,
+      type,
+    };
+
+    // Auto hide after duration
+    if (duration > 0) {
+      timeoutId = window.setTimeout(() => {
+        hide();
+      }, duration);
+    }
+  }
+
+  function hide() {
+    alertState.value.visible = false;
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  }
+
+  return {
+    alertState,
+    show,
+    hide,
+  };
+});
+
+
+export { Alert, useAlertProvider, useAlertStore };