From 04af0e25f17ebd0a090de5a71389ddc3f0d5479f Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Sat, 11 Jul 2026 13:23:11 +0800
Subject: [PATCH] refactor(splash): migrate simple styles to tailwind

---
 .../__tests__/tailwind-components.test.tsx    | 35 +++++++++++++++++++
 .../components/splash-background.module.css   | 12 -------
 .../splash/components/splash-background.tsx   |  5 ++-
 .../components/splash-content.module.css      | 18 ----------
 src/app/splash/components/splash-content.tsx  |  5 ++-
 .../splash/components/splash-logo.module.css  | 10 ------
 src/app/splash/components/splash-logo.tsx     |  5 ++-
 7 files changed, 41 insertions(+), 49 deletions(-)
 create mode 100644 src/app/splash/components/__tests__/tailwind-components.test.tsx
 delete mode 100644 src/app/splash/components/splash-background.module.css
 delete mode 100644 src/app/splash/components/splash-content.module.css
 delete mode 100644 src/app/splash/components/splash-logo.module.css

diff --git a/src/app/splash/components/__tests__/tailwind-components.test.tsx b/src/app/splash/components/__tests__/tailwind-components.test.tsx
new file mode 100644
index 00000000..9662d684
--- /dev/null
+++ b/src/app/splash/components/__tests__/tailwind-components.test.tsx
@@ -0,0 +1,35 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { SplashBackground } from "../splash-background";
+import { SplashContent } from "../splash-content";
+import { SplashLogo } from "../splash-logo";
+
+describe("splash Tailwind components", () => {
+  it("renders SplashLogo with Tailwind wrapper and image classes", () => {
+    const html = renderToStaticMarkup(<SplashLogo />);
+
+    expect(html).toContain("z-[2]");
+    expect(html).toContain("inline-flex");
+    expect(html).toContain("block h-auto w-auto");
+    expect(html).toContain("%2Fimages%2Fsplash%2Fic-logo-home.png");
+  });
+
+  it("renders SplashBackground with Tailwind fill image classes", () => {
+    const html = renderToStaticMarkup(<SplashBackground />);
+
+    expect(html).toContain("absolute");
+    expect(html).toContain("bg-sidebar-background");
+    expect(html).toContain("object-cover");
+    expect(html).toContain("%2Fimages%2Fsplash%2Fpic-bg-home.png");
+  });
+
+  it("renders SplashContent with Tailwind typography classes", () => {
+    const html = renderToStaticMarkup(<SplashContent />);
+
+    expect(html).toContain("flex flex-col gap-md");
+    expect(html).toContain("font-[var(--font-athelas)]");
+    expect(html).toContain("whitespace-pre-line");
+    expect(html).toContain("Welcome to my secret hideout");
+  });
+});
diff --git a/src/app/splash/components/splash-background.module.css b/src/app/splash/components/splash-background.module.css
deleted file mode 100644
index 7e78896f..00000000
--- a/src/app/splash/components/splash-background.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.bg {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: var(--color-sidebar-background);
-  overflow: hidden;
-}
-
-.image {
-  object-fit: cover;
-  object-position: center;
-}
diff --git a/src/app/splash/components/splash-background.tsx b/src/app/splash/components/splash-background.tsx
index ab92ba54..c691f92c 100644
--- a/src/app/splash/components/splash-background.tsx
+++ b/src/app/splash/components/splash-background.tsx
@@ -12,18 +12,17 @@
  *   - 视口 > 540px：MobileShell = 540px，图片 = 540px
  */
 import Image from "next/image";
-import styles from "./splash-background.module.css";
 
 export function SplashBackground() {
   return (
-    <div className={styles.bg}>
+    <div className="absolute inset-0 z-0 overflow-hidden bg-sidebar-background">
       <Image
         src="/images/splash/pic-bg-home.png"
         alt=""
         fill
         priority
         sizes="(max-width: 540px) 100vw, 540px"
-        className={styles.image}
+        className="object-cover object-center"
       />
     </div>
   );
diff --git a/src/app/splash/components/splash-content.module.css b/src/app/splash/components/splash-content.module.css
deleted file mode 100644
index 06c16e7d..00000000
--- a/src/app/splash/components/splash-content.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  z-index: 2;
-}
-
-.title {
-  font-family: var(--font-athelas);
-  font-size: var(--responsive-page-title, var(--font-size-title));
-  font-weight: 700;
-  font-style: italic;
-  line-height: 1.4;
-  color: #ffffff;
-  text-align: left;
-  white-space: pre-line;
-  margin: 0;
-}
diff --git a/src/app/splash/components/splash-content.tsx b/src/app/splash/components/splash-content.tsx
index 7dea7435..fece3703 100644
--- a/src/app/splash/components/splash-content.tsx
+++ b/src/app/splash/components/splash-content.tsx
@@ -1,14 +1,13 @@
 /**
  * Splash 主内容文案
  */
-import styles from "./splash-content.module.css";
 
 const APOSTROPHE = "'";
 
 export function SplashContent() {
   return (
-    <div className={styles.content}>
-      <h1 className={styles.title}>
+    <div className="z-[2] flex flex-col gap-md">
+      <h1 className="m-0 whitespace-pre-line text-left font-[var(--font-athelas)] text-[var(--responsive-page-title)] font-bold italic leading-[1.4] text-white">
         Welcome to my secret hideout~
         {"\n"}It{APOSTROPHE}s just the two of us now.
         {"\n"}Feel free to whisper your
diff --git a/src/app/splash/components/splash-logo.module.css b/src/app/splash/components/splash-logo.module.css
deleted file mode 100644
index 6abba44b..00000000
--- a/src/app/splash/components/splash-logo.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.logo {
-  display: inline-flex;
-  z-index: 2;
-}
-
-.image {
-  display: block;
-  width: auto;
-  height: auto;
-}
diff --git a/src/app/splash/components/splash-logo.tsx b/src/app/splash/components/splash-logo.tsx
index 18001394..e6e18b76 100644
--- a/src/app/splash/components/splash-logo.tsx
+++ b/src/app/splash/components/splash-logo.tsx
@@ -1,16 +1,15 @@
 import Image from "next/image";
-import styles from "./splash-logo.module.css";
 
 export function SplashLogo() {
   return (
-    <div className={styles.logo}>
+    <div className="z-[2] inline-flex">
       <Image
         src="/images/splash/ic-logo-home.png"
         alt="cozsweet"
         width={180}
         height={60}
         priority
-        className={styles.image}
+        className="block h-auto w-auto"
       />
     </div>
   );