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

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

src/hooks/index.ts

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

src/hooks/useLocalStorage.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+
+/**
+ * 自定义 Hook：使用 localStorage 存储状态
+ * @param key - localStorage 的 key
+ * @param initialValue - 初始值
+ * @returns [storedValue, setValue] - 存储的值和更新函数
+ */
+export function useLocalStorage<T>(
+	key: string,
+	initialValue: T,
+): [T, (value: T | ((val: T) => T)) => void] {
+	const [storedValue, setStoredValue] = useState<T>(() => {
+		try {
+			const item = window.localStorage.getItem(key);
+			return item ? (JSON.parse(item) as T) : initialValue;
+		} catch (error) {
+			console.error(`Error reading localStorage key "${key}":`, error);
+			return initialValue;
+		}
+	});
+
+	const setValue = (value: T | ((val: T) => T)) => {
+		try {
+			const valueToStore =
+				value instanceof Function ? value(storedValue) : value;
+			setStoredValue(valueToStore);
+			window.localStorage.setItem(key, JSON.stringify(valueToStore));
+		} catch (error) {
+			console.error(`Error setting localStorage key "${key}":`, error);
+		}
+	};
+
+	useEffect(() => {
+		const handleStorageChange = (e: StorageEvent) => {
+			if (e.key === key && e.newValue) {
+				try {
+					setStoredValue(JSON.parse(e.newValue) as T);
+				} catch (error) {
+					console.error(`Error parsing storage event for key "${key}":`, error);
+				}
+			}
+		};
+
+		window.addEventListener("storage", handleStorageChange);
+		return () => {
+			window.removeEventListener("storage", handleStorageChange);
+		};
+	}, [key]);
+
+	return [storedValue, setValue];
+}