feat: 更新项目依赖并重构样式管理

- 添加 React Router 和 Tailwind CSS 依赖
- 移除旧的 CSS 文件，改用模块化样式
- 更新 lint-staged 配置以跳过 CSS 文件
- 重构 App 组件以使用新的导航和样式

src/components/business/Navigation/Navigation.module.css

@@ -0,0 +1,15 @@
+@reference "tailwindcss";
+
+.navigation {
+	@apply flex gap-4 p-4 bg-gray-100 border-b border-gray-300;
+}
+
+.link {
+	@apply text-blue-600 no-underline px-4 py-2 rounded transition-colors;
+	@apply hover:bg-gray-200;
+}
+
+.active {
+	@apply bg-blue-100 text-blue-800 font-medium;
+}
+

src/components/business/Navigation/Navigation.tsx

@@ -0,0 +1,42 @@
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "../../../lib/utils.ts";
+import styles from "./Navigation.module.css";
+
+interface NavItem {
+	label: string;
+	path: string;
+}
+
+interface NavigationProps {
+	items?: NavItem[];
+	className?: string;
+}
+
+const defaultItems: NavItem[] = [
+	{ label: "首页", path: "/" },
+	{ label: "关于", path: "/about" },
+];
+
+export function Navigation({
+	items = defaultItems,
+	className,
+}: NavigationProps) {
+	const location = useLocation();
+
+	return (
+		<nav className={cn(styles.navigation, className)}>
+			{items.map((item) => {
+				const isActive = location.pathname === item.path;
+				return (
+					<Link
+						key={item.path}
+						to={item.path}
+						className={cn(styles.link, isActive && styles.active)}
+					>
+						{item.label}
+					</Link>
+				);
+			})}
+		</nav>
+	);
+}

src/components/business/Navigation/index.ts

@@ -0,0 +1 @@
+export { Navigation } from "./Navigation.tsx";

src/components/business/index.ts

@@ -0,0 +1 @@
+export { Navigation } from "./Navigation";

src/components/common/Button/Button.module.css

@@ -0,0 +1,36 @@
+@reference "tailwindcss";
+
+.button {
+	@apply inline-flex items-center justify-center rounded-md font-medium transition-colors;
+	@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+	@apply disabled:pointer-events-none disabled:opacity-50;
+}
+
+.primary {
+	@apply bg-blue-600 text-white hover:bg-blue-700;
+}
+
+.secondary {
+	@apply bg-gray-200 text-gray-900 hover:bg-gray-300;
+}
+
+.outline {
+	@apply border border-gray-300 bg-transparent hover:bg-gray-100;
+}
+
+.ghost {
+	@apply bg-transparent hover:bg-gray-100;
+}
+
+.sm {
+	@apply h-8 px-3 text-sm;
+}
+
+.md {
+	@apply h-10 px-4 text-base;
+}
+
+.lg {
+	@apply h-12 px-6 text-lg;
+}
+

src/components/common/Button/Button.tsx

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "../../../lib/utils.ts";
+import styles from "./Button.module.css";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: "primary" | "secondary" | "outline" | "ghost";
+	size?: "sm" | "md" | "lg";
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant = "primary", size = "md", ...props }, ref) => {
+		return (
+			<button
+				ref={ref}
+				className={cn(styles.button, styles[variant], styles[size], className)}
+				{...props}
+			/>
+		);
+	},
+);
+
+Button.displayName = "Button";

src/components/common/Button/index.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./Button.tsx";
+export { Button } from "./Button.tsx";

src/components/common/index.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./Button";
+export { Button } from "./Button";