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

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

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";