添加欢迎语

LingLambda · LingLambda · commit 3d45516b42fe · 2025-12-04T15:29:34.000+08:00
diff --git a/src/components/Message.astro b/src/components/Message.astro
@@ -1,31 +1,37 @@
 ---
-
-const { index, btnName, content } = Astro.props as Message;
+const { index } = Astro.props;
 if (!index) {
-  throw Error(btnName + " " + content + " 未定义index！");
+  throw Error(" 未定义index！");
 }
+// 有空时候请完善此组件，应当考虑多通知框情况
 ---
 
-<div class:list={["toast", index]}>
-  {content}
-</div>
-<button class:list={["toastBtn", index]}>{btnName}</button>
-
+<div class:list={["toast", index]} data-index={index}></div>
 <script>
+import type { ToastMessageEvent } from "../utils/types";
+
   const msgBoxs: boolean[] = [true, true, true, true, true];
   /**
    * 将toastBtn绑定到对应的toast上
    * @param event
    */
-  function showToast(event: Event) {
-    // 获取到toast元素
-    const target = event.target as HTMLElement;
-    const classList = target.classList
-      .toString()
-      .replaceAll("toastBtn", "toast");
-    const toast = document
-      .getElementsByClassName(classList)
-      .item(0) as HTMLElement;
+  function showToast(event: ToastMessageEvent) {
+    const toasts = document.getElementsByClassName("toast");
+
+    let toast;
+
+    for (const t of toasts) {
+      const t1 = t as HTMLElement;
+      if (t1.dataset.index && t1.dataset.index === event.index) {
+        toast = t1 as HTMLDivElement;
+      }
+    }
+    if (!toast) {
+      console.log("无法找到指定toast");
+      return;
+    }
+
+    toast.textContent = event.text;
 
     // 判断toast情况
     if (toast.style.top != "-50px" && toast.style.top != "") {
@@ -59,11 +65,9 @@ if (!index) {
     }, 3000);
   }
 
+  document.addEventListener("welcomeEvent", showToast as any);
   document.addEventListener("astro:page-load", () => {
-    const buttons = document.querySelectorAll(".toastBtn");
-    buttons.forEach((button) => {
-      button.addEventListener("click", showToast);
-    });
+    document.addEventListener("welcomeEvent", showToast as any);
   });
 </script>
 
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -5,6 +5,7 @@ import { ClientRouter } from "astro:transitions";
 import gopherImage from "../assets/pilot-bust.svg";
 import { Image } from "astro:assets";
 import BaseHead from "../heads/BaseHead.astro";
+import Message from "../components/Message.astro";
 const { description, keywords, title, canonical, ogType } = Astro.props;
 ---
 
@@ -27,6 +28,7 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
     <title>Ling的小窝{title ? ` - ${title}` : ""}</title>
   </head>
   <body>
+    <Message index="welcome" />
     <div id="container">
       <header id="menu">
         <HeadMenu />
@@ -125,6 +127,31 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
   });
 </script>
 
+<script>
+  import { ToastMessageEvent } from "../utils/types";
+
+  const welcome = () => {
+    console.log("欢迎");
+    // 获取完整的来源 URL
+    let referrer = document.referrer;
+    if (!referrer) {
+      return;
+    }
+    let url = new URL(referrer);
+    console.log("来源域名：", url.hostname);
+    document.dispatchEvent(
+      new ToastMessageEvent(
+        "welcomeEvent",
+        "welcome",
+        `欢迎来自${url.hostname}的访客`
+      )
+    );
+  };
+  window.onload = welcome;
+  const btn = document.getElementById("test") as HTMLButtonElement;
+  btn.addEventListener("click", welcome);
+</script>
+
 <style>
   * {
     box-sizing: border-box; /* 确保所有元素的宽高包含 padding 和 border */
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,7 +6,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
 <BaseLayout
   description="欢迎来到我的小窝！我会在这里放一些编程学习记录和生活随笔，欢迎留下你的评论和友链！"
-  keywords="主页,main,Ling,LingLambda"
+  keywords="主页,main,LingLambda,博客,个人博客,blog"
   title="技术博客与生活分享"
   canonical={import.meta.env.SITE}
 >
@@ -18,18 +18,6 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   </div>
 </BaseLayout>
 
-<!-- <script>
-  window.onload = () => {
-    // 获取完整的来源 URL
-    let referrer = document.referrer;
-    if (!referrer) {
-      return;
-    }
-    let url = new URL(referrer);
-    console.log("来源域名：", url.hostname);
-  };
-</script> -->
-
 <style>
   .content-wrapper {
     padding: 0 1.5rem;
diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -14,10 +14,21 @@ type PlayedGame = {
   playtime_mac_forever: number;
   playtime_linux_forever: number;
   playtime_deck_forever: number;
-}
+};
 
 type Message = {
   index: string;
   btnName: string;
   content: string;
-}
+};
+
+export class ToastMessageEvent extends Event {
+  constructor(
+    type: string,
+    public index: string,
+    public text: string,
+    eventInitDict?: EventInit
+  ) {
+    super(type, eventInitDict);
+  }
+}
