v0.3.8

2026-08-18 03:57:06 +08:00 · 2026-06-30 10:38:52 +08:00
commit c083be5ec2
312 changed files with 146628 additions and 0 deletions
@@ -0,0 +1,83 @@
+<script setup>
+import { messageState, provideMessage } from "@/composables/useMessage";
+
+provideMessage();
+
+const MESSAGE_THEME = {
+  success: {
+    containerClass: "bg-[#10AD5D] text-white",
+    iconClass: "icon-[dashicons--yes]",
+    iconExtraClass: "",
+  },
+  error: {
+    containerClass: "bg-[#D84C4C] text-white",
+    iconClass: "",
+    iconExtraClass: "",
+  },
+  info: {
+    containerClass: "bg-[#F08A24] text-white",
+    iconClass: "",
+    iconExtraClass: "",
+  },
+  loading: {
+    containerClass: "bg-[#3a3a3a] text-white",
+    iconClass: "icon-[mingcute--loading-fill]",
+    iconExtraClass: "animate-spin",
+  },
+};
+
+function resolveTheme(type) {
+  return MESSAGE_THEME[type] || MESSAGE_THEME.info;
+}
+</script>
+
+<template>
+  <div class="pointer-events-none fixed inset-x-0 top-4 z-[1000] flex justify-center px-4">
+    <Transition name="message-slide" mode="out-in">
+      <div
+        v-if="messageState.current"
+        :key="messageState.current.id"
+        class="pointer-events-auto inline-flex max-w-full items-center gap-2 rounded-full px-4 py-2 text-sm shadow-[0_8px_24px_rgba(0,0,0,0.28)]"
+        :class="resolveTheme(messageState.current.type).containerClass"
+      >
+        <span
+          v-if="resolveTheme(messageState.current.type).iconClass"
+          class="text-[14px]"
+          :class="[
+            resolveTheme(messageState.current.type).iconClass,
+            resolveTheme(messageState.current.type).iconExtraClass,
+          ]"
+        />
+        <span class="leading-none whitespace-nowrap">{{ messageState.current.content }}</span>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.message-slide-enter-active,
+.message-slide-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.message-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+
+.message-slide-enter-to,
+.message-slide-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.message-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+</style>
+
+
+
+
+