feat: 更新样式管理和依赖配置

- 移除旧的 CSS 文件，改用 Tailwind CSS 进行样式管理
- 更新 tsconfig 和 Vite 配置以支持路径别名
- 添加 Node 类型定义以增强 TypeScript 支持

src/App.module.css

@@ -1,10 +0,0 @@
-@reference "tailwindcss";
-
-.app {
-	@apply min-h-screen flex flex-col;
-}
-
-.main {
-	@apply flex-1 p-8;
-}
-

src/App.tsx

@@ -1,13 +1,12 @@
 import { Outlet } from "react-router-dom";
-import styles from "./App.module.css";
 import { Navigation } from "./components/business";
-import { cn } from "./lib/utils.ts";
+import { cn } from "./utils";
 
 function App() {
 	return (
-		<div className={cn(styles.app)}>
+		<div className={cn("min-h-screen flex flex-col")}>
 			<Navigation />
-			<main className={cn(styles.main)}>
+			<main className={cn("flex-1 p-8")}>
 				<Outlet />
 			</main>
 		</div>

src/components/business/Navigation/Navigation.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from "react-router-dom";
-import { cn } from "../../../lib/utils.ts";
+import { cn } from "@/utils";
 import styles from "./Navigation.module.css";
 
 interface NavItem {

src/components/common/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, forwardRef } from "react";
-import { cn } from "../../../lib/utils.ts";
+import { cn } from "@/utils";
 import styles from "./Button.module.css";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

src/pages/About/About.module.css

@@ -1,18 +0,0 @@
-@reference "tailwindcss";
-
-.container {
-	@apply text-center;
-}
-
-.title {
-	@apply text-4xl font-bold mb-4;
-}
-
-.description {
-	@apply text-lg mb-4;
-}
-
-.actions {
-	@apply flex gap-4 justify-center;
-}
-

src/pages/About/About.tsx

@@ -1,13 +1,12 @@
 import { Link } from "react-router-dom";
-import { Button } from "../../components/common";
-import styles from "./About.module.css";
+import { Button } from "@/components/common";
 
 export function About() {
 	return (
-		<div className={styles.container}>
-			<h1 className={styles.title}>关于我们</h1>
-			<p className={styles.description}>这是关于页面</p>
-			<div className={styles.actions}>
+		<div className="text-center">
+			<h1 className="mb-4 text-4xl font-bold">关于我们</h1>
+			<p className="mb-4 text-lg">这是关于页面</p>
+			<div className="flex justify-center gap-4">
 				<Link to="/">
 					<Button variant="secondary">返回首页</Button>
 				</Link>

src/pages/Home/Home.module.css

@@ -1,22 +0,0 @@
-.container {
-	text-align: center;
-}
-
-.title {
-	margin-bottom: 1rem;
-	font-size: 2.25rem;
-	line-height: 2.5rem;
-	font-weight: 700;
-}
-
-.description {
-	margin-bottom: 1rem;
-	font-size: 1.125rem;
-	line-height: 1.75rem;
-}
-
-.actions {
-	display: flex;
-	gap: 1rem;
-	justify-content: center;
-}

src/pages/Home/Home.tsx

@@ -1,13 +1,12 @@
 import { Link } from "react-router-dom";
-import { Button } from "../../components/common";
-import styles from "./Home.module.css";
+import { Button } from "@/components/common";
 
 export function Home() {
 	return (
-		<div className={styles.container}>
-			<h1 className={styles.title}>首页</h1>
-			<p className={styles.description}>欢迎来到首页</p>
-			<div className={styles.actions}>
+		<div className="text-center">
+			<h1 className="mb-4 text-4xl font-bold">首页</h1>
+			<p className="mb-4 text-lg">欢迎来到首页</p>
+			<div className="flex justify-center gap-4">
 				<Link to="/about">
 					<Button>关于我们</Button>
 				</Link>

src/utils/assets.ts

@@ -0,0 +1,49 @@
+// 图片资源映射 - 使用静态导入确保构建时包含所有图片
+const imageModules = import.meta.glob(
+	"../assets/images/**/*.{png,jpg,jpeg,gif,svg,webp}",
+	{
+		eager: true,
+	},
+);
+
+// 访问静态图片 - 使用静态导入确保构建后路径正确
+export const getStaticImage = (path: string) => {
+	try {
+		// 确保路径以正确的格式结尾
+		const imagePath =
+			path.endsWith(".png") ||
+			path.endsWith(".jpg") ||
+			path.endsWith(".jpeg") ||
+			path.endsWith(".gif") ||
+			path.endsWith(".svg") ||
+			path.endsWith(".webp")
+				? `../assets/images/${path}`
+				: `../assets/images/${path}.png`;
+
+		// 使用静态导入的模块
+		const module = imageModules[imagePath];
+		if (module && typeof module === "object" && "default" in module) {
+			return (module as { default: string }).default;
+		}
+
+		// 回退到 URL 方式
+		return new URL(imagePath, import.meta.url).href;
+	} catch (error) {
+		console.error("Failed to load image:", path, error);
+		return "";
+	}
+};
+
+// 获取背景图片的专用函数
+export const getBackgroundImage = (path: string) => {
+	const imageUrl = getStaticImage(path);
+	return imageUrl ? `url(${imageUrl})` : "none";
+};
+
+// 获取 public 文件夹中的资源路径（用于 Word 文档等）
+export const getPublicPath = (path: string) => {
+	// 移除开头的斜杠（如果有）
+	const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+	// 使用 Vite 的 BASE_URL 环境变量来处理基础路径
+	return `${import.meta.env.BASE_URL}${cleanPath}`;
+};

src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./assets";
+export * from "./tailwind";