feat: basic framework

src/utils/http.ts

@@ -0,0 +1,26 @@
+import axios, { type AxiosRequestConfig } from "axios";
+import { useUserStore } from "@/stores/UserStore.ts";
+
+const instance = axios.create({
+  baseURL: import.meta.env.VITE_SERVER,
+});
+
+instance.interceptors.request.use((config) => {
+  const store = useUserStore();
+  if (!store.token) {
+    return config;
+  }
+  const token = store.token;
+  if (!token) {
+    return config;
+  }
+  config.headers["token"] = token;
+  return config;
+});
+
+const http = async <T>(config: AxiosRequestConfig): Promise<Result<T>> => {
+  const { data } = await instance.request<Result<T>>(config);
+  return data;
+};
+
+export default http;

src/utils/toast.tsx

@@ -0,0 +1,50 @@
+import { createApp, ref } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+
+export interface ToastOptions {
+  message: string;
+  duration?: number;
+}
+
+export function toast(options: ToastOptions): void {
+  const toastHideFlag = ref(false);
+
+  const toastInstance = () => (
+    <AnimatePresence>
+      {toastHideFlag.value ? null : (
+        <motion.div
+          class="toast toast-top toast-end bg-transparent"
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.25 }}
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+        >
+          <div class="alert">
+            <span>{options.message}</span>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+
+  const toastContainer = document.createElement("div");
+  document.body.appendChild(toastContainer);
+
+  const toastApp = createApp(toastInstance);
+  toastApp.mount(toastContainer);
+
+  setTimeout(
+    () => {
+      toastHideFlag.value = true;
+    },
+    (options.duration || 3000) + 250, // 250ms for start animation
+  );
+
+  setTimeout(
+    () => {
+      toastApp.unmount();
+      document.body.removeChild(toastContainer);
+    },
+    (options.duration || 3000) + 500, // 500ms for end animation
+  );
+}