init

src/pages/Characters.tsx

@@ -1,6 +1,7 @@
 // The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.
 
 import React, { useState, useEffect, useRef } from "react";
+import { useNavigate } from 'react-router-dom';
 
 const Characters: React.FC = () => {
 	const [selectedStars, setSelectedStars] = useState<string>("All Stars");
@@ -40,6 +41,8 @@ const Characters: React.FC = () => {
 		};
 	}, []);
 
+	const navigate = useNavigate();
+
 	const heroes = [
 		{
 			id: 1,
@@ -606,6 +609,10 @@ const Characters: React.FC = () => {
 		return true;
 	});
 
+	const handleCharacterClick = (heroId: number) => {
+		navigate(`/character/${heroId}`);
+	};
+
 	return (
 		<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
 			{/* 背景装饰 */}
@@ -945,6 +952,7 @@ const Characters: React.FC = () => {
 						<div
 							key={hero.id}
 							className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
+							onClick={() => handleCharacterClick(hero.id)}
 						>
 							<div className="relative h-48 overflow-hidden">
 								<img