diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 3989dc1..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <title>战神纪元</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html> 
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index a749280..3c8f312 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,44 +32,66 @@ const App: React.FC = () => {
     const closeLoginModal = () => {
         setIsLoginModalOpen(false);
     };
-    const characters = [
+
+    // 即将登场的角色数据
+    const upcomingCharacters = [
+        {
+            id: 1,
+            name: "星璇法师",
+            role: "法师",
+            image: "",
+            description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。",
+            features: "星辰轨道 / 时空裂隙 / 引力操控",
+            color: "purple"
+        },
+        {
+            id: 2,
+            name: "炎武士",
+            role: "战士",
+            image: "",
+            description: "融合古代武士精神与现代能量技术的战士。",
+            features: "能量刀刃 / 武士之魂 / 烈焰斩击",
+            color: "red"
+        },
+        {
+            id: 3,
+            name: "生态猎手",
+            role: "射手",
+            image: "https://readdy.ai/api/search-image?query=A%20high-tech%20archer%20character%20with%20sleek%20armor%20and%20holographic%20bow%2C%20nature-themed%20accessories%2C%20standing%20in%20a%20dynamic%20pose%20against%20a%20dark%20misty%20background%20with%20green%20energy%20effects%2C%20high-quality%20gaming%20character%20render%2C%20detailed%20futuristic%20design&width=400&height=500&seq=upcoming3&orientation=portrait",
+            description: "运用生态能量的远程射手，善于控制战场环境。",
+            features: "自然之力 / 生态屏障 / 藤蔓控制",
+            color: "green"
+        }
+    ];
+
+    // 最新更新的角色数据
+    const updatedCharacters = [
         {
             id: 1,
             name: "暗影刺客",
             role: "刺客",
-            image:
-                "https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
+            image: "https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
             description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
-            changes: "基础攻击力 +15%，技能冷却时间 -10%",
+            changes: "基础攻击力 +15%，技能冷却时间 -10%"
         },
         {
             id: 2,
             name: "元素法师",
             role: "法师",
-            image:
-                "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
+            image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
             description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
-            changes: "法术穿透 +8%，控制效果持续时间 +1秒",
+            changes: "法术穿透 +8%，控制效果持续时间 +1秒"
         },
         {
             id: 3,
             name: "钢铁守卫",
             role: "坦克",
-            image:
-                "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
+            image: "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
             description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
-            changes: "护甲值 +20%，生命回复速度 +15%",
-        },
-        {
-            id: 4,
-            name: "狂战士",
-            role: "战士",
-            image:
-                "https://public.readdy.ai/ai/img_res/38093515cf7120e0f8fe258becedcf96.jpg",
-            description: "狂战士获得了全新的怒气系统，可以在战斗中积累更多能量。",
-            changes: "暴击率 +12%，攻击速度 +10%",
-        },
+            changes: "护甲值 +20%，生命回复速度 +15%"
+        }
     ];
+
     const equipmentBuilds = [
         {
             id: 1,
@@ -441,112 +463,40 @@ const App: React.FC = () => {
                                 </a>
                             </div>
                             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                <div
-                                    className="bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-lg overflow-hidden border border-purple-500/30 hover:border-purple-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-purple-500/10 cursor-pointer">
-                                    <div className="relative h-48 overflow-hidden">
-                                        <div
-                                            className="absolute top-0 left-0 bg-gradient-to-r from-purple-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
-                                            <span className="text-white font-medium">法师</span>
+                                {upcomingCharacters.map((character) => (
+                                    <div
+                                        key={character.id}
+                                        className={`bg-gradient-to-br from-${character.color}-500/20 to-blue-500/20 rounded-lg overflow-hidden border border-${character.color}-500/30 hover:border-${character.color}-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-${character.color}-500/10 cursor-pointer`}
+                                    >
+                                        <div className="relative h-40 overflow-hidden">
+                                            <div className={`absolute top-0 left-0 bg-gradient-to-r from-${character.color}-500/80 to-transparent px-4 py-1 rounded-br-lg z-10`}>
+                                                <span className="text-white font-medium">{character.role}</span>
+                                            </div>
+                                            <img
+                                                src={character.image}
+                                                alt={character.name}
+                                                className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
+                                            />
                                         </div>
-                                        <img
-                                            src=""
-                                            alt="星璇法师"
-                                            className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
-                                        />
-                                    </div>
-                                    <div className="p-5">
-                                        <div className="flex items-center justify-between mb-2">
-                                            <h3 className="text-xl font-bold text-white">星璇法师</h3>
-                                            <span className="text-purple-400 text-sm">即将登场</span>
-                                        </div>
-                                        <p className="text-gray-400 mb-4">
-                                            掌控星辰能量的神秘法师，可以操纵时空进行战斗。
-                                        </p>
-                                        <div className="bg-gray-800/50 p-3 rounded-md">
-                                            <p className="text-purple-400 font-medium mb-1">
-                                                核心特性
-                                            </p>
-                                            <p className="text-gray-300">
-                                                星辰轨道 / 时空裂隙 / 引力操控
+                                        <div className="p-4">
+                                            <div className="flex items-center justify-between mb-2">
+                                                <h3 className="text-lg font-bold text-white">{character.name}</h3>
+                                                <span className={`text-${character.color}-400 text-sm`}>即将登场</span>
+                                            </div>
+                                            <p className="text-gray-400 text-sm line-clamp-2 mb-3 leading-tight">
+                                                {character.description}
                                             </p>
+                                            <div className="bg-gray-800/50 p-2 rounded-md">
+                                                <p className={`text-${character.color}-400 font-medium text-xs mb-1`}>核心特性</p>
+                                                <p className="text-gray-300 text-xs line-clamp-1">{character.features}</p>
+                                            </div>
+                                            <button className={`mt-3 w-full py-1.5 bg-${character.color}-500/20 hover:bg-${character.color}-500/30 text-${character.color}-300 rounded-md flex items-center justify-center text-sm`}>
+                                                预约获取
+                                                <i className="fas fa-chevron-right ml-2 text-xs"></i>
+                                            </button>
                                         </div>
-                                        <button
-                                            className="mt-4 w-full py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
-                                            预约获取
-                                            <i className="fas fa-chevron-right ml-2 text-xs"></i>
-                                        </button>
                                     </div>
-                                </div>
-                                <div
-                                    className="bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-lg overflow-hidden border border-red-500/30 hover:border-red-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-red-500/10 cursor-pointer">
-                                    <div className="relative h-48 overflow-hidden">
-                                        <div
-                                            className="absolute top-0 left-0 bg-gradient-to-r from-red-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
-                                            <span className="text-white font-medium">战士</span>
-                                        </div>
-                                        <img
-                                            src=''
-                                            alt="炎武士"
-                                            className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
-                                        />
-                                    </div>
-                                    <div className="p-5">
-                                        <div className="flex items-center justify-between mb-2">
-                                            <h3 className="text-xl font-bold text-white">炎武士</h3>
-                                            <span className="text-red-400 text-sm">即将登场</span>
-                                        </div>
-                                        <p className="text-gray-400 mb-4">
-                                            融合古代武士精神与现代能量技术的战士。
-                                        </p>
-                                        <div className="bg-gray-800/50 p-3 rounded-md">
-                                            <p className="text-red-400 font-medium mb-1">核心特性</p>
-                                            <p className="text-gray-300">
-                                                能量刀刃 / 武士之魂 / 烈焰斩击
-                                            </p>
-                                        </div>
-                                        <button
-                                            className="mt-4 w-full py-2 bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
-                                            预约获取
-                                            <i className="fas fa-chevron-right ml-2 text-xs"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div
-                                    className="bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-lg overflow-hidden border border-green-500/30 hover:border-green-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-green-500/10 cursor-pointer">
-                                    <div className="relative h-48 overflow-hidden">
-                                        <div
-                                            className="absolute top-0 left-0 bg-gradient-to-r from-green-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
-                                            <span className="text-white font-medium">射手</span>
-                                        </div>
-                                        <img
-                                            src="https://readdy.ai/api/search-image?query=A%20high-tech%20archer%20character%20with%20sleek%20armor%20and%20holographic%20bow%2C%20nature-themed%20accessories%2C%20standing%20in%20a%20dynamic%20pose%20against%20a%20dark%20misty%20background%20with%20green%20energy%20effects%2C%20high-quality%20gaming%20character%20render%2C%20detailed%20futuristic%20design&width=400&height=500&seq=upcoming3&orientation=portrait"
-                                            alt="生态猎手"
-                                            className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
-                                        />
-                                    </div>
-                                    <div className="p-5">
-                                        <div className="flex items-center justify-between mb-2">
-                                            <h3 className="text-xl font-bold text-white">生态猎手</h3>
-                                            <span className="text-green-400 text-sm">即将登场</span>
-                                        </div>
-                                        <p className="text-gray-400 mb-4">
-                                            运用生态能量的远程射手，善于控制战场环境。
-                                        </p>
-                                        <div className="bg-gray-800/50 p-3 rounded-md">
-                                            <p className="text-green-400 font-medium mb-1">
-                                                核心特性
-                                            </p>
-                                            <p className="text-gray-300">
-                                                自然之力 / 生态屏障 / 藤蔓控制
-                                            </p>
-                                        </div>
-                                        <button
-                                            className="mt-4 w-full py-2 bg-green-500/20 hover:bg-green-500/30 text-green-300 rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
-                                            预约获取
-                                            <i className="fas fa-chevron-right ml-2 text-xs"></i>
-                                        </button>
-                                    </div>
-                                </div>
+                                ))}
                             </div>
                         </div>
                         {/* 最新更新 */}
@@ -569,18 +519,15 @@ const App: React.FC = () => {
                                     <i className="fas fa-arrow-right ml-2"></i>
                                 </a>
                             </div>
-                            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                                {characters.map((character) => (
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                {updatedCharacters.map((character) => (
                                     <div
                                         key={character.id}
-                                        className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-yellow-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-yellow-500/10 cursor-pointer"
+                                        className="bg-gradient-to-br from-yellow-500/20 to-blue-500/20 rounded-lg overflow-hidden border border-yellow-500/30 hover:border-yellow-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-yellow-500/10 cursor-pointer"
                                     >
-                                        <div className="relative h-48 overflow-hidden">
-                                            <div
-                                                className="absolute top-0 left-0 bg-gradient-to-r from-yellow-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
-                        <span className="text-black font-medium">
-                          {character.role}
-                        </span>
+                                        <div className="relative h-40 overflow-hidden">
+                                            <div className="absolute top-0 left-0 bg-gradient-to-r from-yellow-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
+                                                <span className="text-white font-medium">{character.role}</span>
                                             </div>
                                             <img
                                                 src={character.image}
@@ -588,21 +535,19 @@ const App: React.FC = () => {
                                                 className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
                                             />
                                         </div>
-                                        <div className="p-5">
-                                            <h3 className="text-xl font-bold mb-2 text-white">
-                                                {character.name}
-                                            </h3>
-                                            <p className="text-gray-400 mb-4">
+                                        <div className="p-4">
+                                            <div className="flex items-center justify-between mb-2">
+                                                <h3 className="text-lg font-bold text-white">{character.name}</h3>
+                                                <span className="text-yellow-400 text-sm">最新更新</span>
+                                            </div>
+                                            <p className="text-gray-400 text-sm line-clamp-2 mb-3 leading-tight">
                                                 {character.description}
                                             </p>
-                                            <div className="bg-gray-800 p-3 rounded-md">
-                                                <p className="text-yellow-400 font-medium mb-1">
-                                                    变更数据
-                                                </p>
-                                                <p className="text-gray-300">{character.changes}</p>
+                                            <div className="bg-gray-800/50 p-2 rounded-md">
+                                                <p className="text-yellow-400 font-medium text-xs mb-1">变更数据</p>
+                                                <p className="text-gray-300 text-xs line-clamp-1">{character.changes}</p>
                                             </div>
-                                            <button
-                                                className="mt-4 w-full py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
+                                            <button className="mt-3 w-full py-1.5 bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-300 rounded-md flex items-center justify-center text-sm">
                                                 查看详情
                                                 <i className="fas fa-chevron-right ml-2 text-xs"></i>
                                             </button>
