+
+
+ );
+};
+
+export default LoginModal;
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index bfce590..c22e9c4 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,97 +1,133 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
interface NavbarProps {
- onLoginClick: () => void;
+ onLoginClick: () => void;
}
const Navbar: React.FC
- {/* 英雄区 */}
-
-
+ // 鼠标释放事件处理
+ const handleMouseUp = () => {
+ if (isDragging) {
+ handleSlideChange(dragX);
+ setIsDragging(false);
+ setDragX(0);
+ }
+ };
- {/* 热门配装推荐 */}
-
-
- {/* 对战数据板块 */}
-
-
-
- );
+ // 鼠标离开事件处理
+ const handleMouseLeave = () => {
+ if (isDragging) {
+ handleSlideChange(dragX);
+ setIsDragging(false);
+ setDragX(0);
+ }
+ };
+
+ // 触摸开始事件处理
+ const handleTouchStart = (e: React.TouchEvent) => {
+ setIsDragging(true);
+ setStartX(e.touches[0].pageX);
+ setDragX(0);
+ setSlideTransition(false);
+ };
+
+ // 触摸移动事件处理
+ const handleTouchMove = (e: React.TouchEvent) => {
+ if (!isDragging) return;
+ const currentX = e.touches[0].pageX;
+ const dragDistance = currentX - startX;
+ setDragX(dragDistance);
+ };
+
+ // 触摸结束事件处理
+ const handleTouchEnd = () => {
+ if (isDragging) {
+ handleSlideChange(dragX);
+ setIsDragging(false);
+ setDragX(0);
+ }
+ };
+
+ // 计算当前显示的幻灯片
+ const getVisibleSlides = () => {
+ const normalizedDragX = dragX / dragThreshold;
+ if (isDragging && Math.abs(normalizedDragX) > 0) {
+ if (dragX > 0) {
+ // 向右拖动，显示上一张
+ const prevIndex = currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
+ return [
+ { index: prevIndex, opacity: Math.min(normalizedDragX, 1) },
+ { index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) },
+ ];
+ } else {
+ // 向左拖动，显示下一张
+ const nextIndex = currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
+ return [
+ { index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) },
+ { index: nextIndex, opacity: Math.min(-normalizedDragX, 1) },
+ ];
+ }
+ }
+ return [{ index: currentSlide, opacity: 1 }];
+ };
+
+ // 即将登场的角色数据
+ 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",
+ description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
+ changes: "基础攻击力 +15%，技能冷却时间 -10%",
+ },
+ {
+ id: 2,
+ name: "元素法师",
+ role: "法师",
+ image:
+ "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
+ description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
+ changes: "法术穿透 +8%，控制效果持续时间 +1秒",
+ },
+ {
+ id: 3,
+ name: "钢铁守卫",
+ role: "坦克",
+ image:
+ "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
+ description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
+ changes: "护甲值 +20%，生命回复速度 +15%",
+ },
+ ];
+
+ const battleData = [
+ {
+ rank: 1,
+ character: "暗影刺客",
+ winRate: "68%",
+ pickRate: "42%",
+ banRate: "38%",
+ },
+ {
+ rank: 2,
+ character: "元素法师",
+ winRate: "62%",
+ pickRate: "38%",
+ banRate: "25%",
+ },
+ {
+ rank: 3,
+ character: "狂战士",
+ winRate: "65%",
+ pickRate: "40%",
+ banRate: "22%",
+ },
+ {
+ rank: 4,
+ character: "钢铁守卫",
+ winRate: "58%",
+ pickRate: "35%",
+ banRate: "18%",
+ },
+ {
+ rank: 5,
+ character: "神射手",
+ winRate: "59%",
+ pickRate: "32%",
+ banRate: "15%",
+ },
+ ];
+ const equipmentBuilds = [
+ {
+ id: 1,
+ character: "暗影刺客",
+ avatar:
+ "https://public.readdy.ai/ai/img_res/5488e233cf11243801c148778a6c1d46.jpg",
+ items: [
+ "暗影匕首",
+ "刺客护甲",
+ "速度之靴",
+ "致命宝石",
+ "隐形披风",
+ "破甲短剑",
+ ],
+ winRate: "68%",
+ usageRate: "42%",
+ tags: ["高爆发", "单体刺杀", "灵活机动"],
+ },
+ {
+ id: 2,
+ character: "元素法师",
+ avatar:
+ "https://public.readdy.ai/ai/img_res/fc1ca2fe0c579530ebb48af702a00a69.jpg",
+ items: [
+ "法师法杖",
+ "魔力长袍",
+ "法术之靴",
+ "魔法水晶",
+ "奥术宝珠",
+ "时间怀表",
+ ],
+ winRate: "62%",
+ usageRate: "38%",
+ tags: ["范围控制", "高法术伤害", "团战核心"],
+ },
+ {
+ id: 3,
+ character: "钢铁守卫",
+ avatar:
+ "https://public.readdy.ai/ai/img_res/f2961785fd8feb60a369a8224515c980.jpg",
+ items: [
+ "守护者盾牌",
+ "重型护甲",
+ "抵抗之靴",
+ "生命宝石",
+ "荆棘背心",
+ "反伤护符",
+ ],
+ winRate: "58%",
+ usageRate: "35%",
+ tags: ["高生存", "团队保护", "前排坦克"],
+ },
+ {
+ id: 4,
+ character: "狂战士",
+ avatar:
+ "https://public.readdy.ai/ai/img_res/09dab9a842b7ba916d91f6ddffed0178.jpg",
+ items: [
+ "狂战斧",
+ "战士护甲",
+ "狂暴之靴",
+ "力量宝石",
+ "嗜血项链",
+ "狂怒手套",
+ ],
+ winRate: "65%",
+ usageRate: "40%",
+ tags: ["高持续伤害", "团战切入", "半肉战士"],
+ },
+ ];
+
+ return (
+
-
+ // 鼠标按下事件处理
+ const handleMouseDown = (e: React.MouseEvent) => {
+ setIsDragging(true);
+ setStartX(e.pageX);
+ setDragX(0);
+ setSlideTransition(false);
+ };
- {/* 最新角色更新区 */}
-
-
-
- {slides.map((slide, index) => (
-
-
-
-
- ))}
-
- 
-
-
-
- {/* 轮播图指示器 */}
-
-
-
-
- {slides[currentSlide].version}
-
-
- - - {slides[currentSlide].title} - - {slides[currentSlide].subtitle} -
-- {slides[currentSlide].description} -
-
-
-
-
-
- {slides.map((_, index) => (
-
-
-
-
- {/* 即将登场 */}
-
-
-
+ // 鼠标移动事件处理
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (!isDragging) return;
+ e.preventDefault();
+ const currentX = e.pageX;
+ const dragDistance = currentX - startX;
+ setDragX(dragDistance);
+ };
- {/* 最新更新 */}
-
-
-
-
-
- 查看全部
-
-
-
-
- 新英雄预告
-
-
- 即将登场
-
- {upcomingCharacters.map((character) => (
-
-
-
- ))}
-
- 
-
-
- {character.role}
-
-
-
-
-
- {character.name}
- 即将登场 -- {character.description} -
-
-
-
- 核心特性
-{character.features}
-
-
-
-
-
-
-
- 查看全部
-
-
-
-
- 平衡性调整
-
-
- 最新更新
-
- {updatedCharacters.map((character) => (
-
-
-
- ))}
-
-
-
-
- {character.role}
-
-
-
-
-
- {character.name}
- 最新更新 -- {character.description} -
-
-
-
- 变更数据
-{character.changes}
-
-
-
-
- 热门配装推荐
- - 更多配装 - - -
- {equipmentBuilds.map((build) => (
-
-
-
- ))}
-
-
-
- 
-
-
-
- - {build.character} -
-
-
- 胜率: {build.winRate}
-
-
- 使用率: {build.usageRate}
-
-
-
-
- 推荐装备
-
- {build.items.map((item, index) => (
-
-
-
- ))}
-
-
-
-
- {build.tags.map((tag, index) => (
-
- {tag}
-
- ))}
-
-
-
-
-
-
- 实时对战数据
- - 查看完整数据 - - -
-
-
-
-
-
-
-
- - 角色使用率排行 -
-
-
-
-
-
- | - 排名 - | -- 角色 - | -- 胜率 - | -- 选取率 - | -- 禁用率 - | -
|---|---|---|---|---|
|
-
- {data.rank}
-
- |
- - {data.character} - | -- {data.winRate} - | -- {data.pickRate} - | -- {data.banRate} - | -
-
-
-
-
-
- - 当前赛季 -
-
- 赛季名称
- 暗影崛起
-
-
- 开始时间
- 2025-03-15
-
-
- 结束时间
- 2025-06-15
-
-
- 剩余时间
- 66 天
-
-
-
-
-
- - 最新比赛结果 -
-
-
-
-
-
- 职业联赛
- 2小时前
-
-
-
-
-
- 龙族战队
-
-
- 3
-
-
- VS
-
- 1
-
- 风暴战队
-
-
-
-
-
- 职业联赛
- 5小时前
-
-
-
-
-
- 火焰战队
-
-
- 3
-
-
- VS
-
- 2
-
- 雷霆战队
-
-
-
-
-
- 职业联赛
- 昨天
-
-
-
-
-
- 幽灵战队
-
- 0
-
- VS
-
-
- 3
-
-
- 星辰战队
-
-
-
+ {/* 背景装饰 */}
+
+
+ {/* 英雄区 */}
+
+
+
+
+ {/* 热门配装推荐 */}
+
+
+
+
+ {/* 对战数据板块 */}
+
+
+
+
+ );
};
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/tsconfig.json b/tsconfig.json
index df6fbac..807e766 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,18 +6,14 @@
"noEmit": true,
"skipLibCheck": true,
"useDefineForClassFields": true,
-
- /* modules */
"module": "ESNext",
"isolatedModules": true,
"resolveJsonModule": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
-
- /* type checking */
"strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true
+ "noUnusedLocals": false,
+ "noUnusedParameters": false
},
"include": ["src", "postcss.config.mjs"]
}
+
+
+
+ {/* 最新角色更新区 */}
+
+
+
+
+
+ {getVisibleSlides().map(({ index, opacity }) => (
+
+
+
+
+ ))}
+
+ ![{slides[index].title}]({slides[index].image})
+
+
+
+ {/* 轮播图指示器 */}
+
+
+
+
+ {slides[currentSlide].version}
+
+
+ + + {slides[currentSlide].title} + + + {slides[currentSlide].subtitle} + +
++ {slides[currentSlide].description} +
+
+
+
+
+
+ {slides.map((_, index) => (
+
+
+
+
+ {/* 即将登场 */}
+
+
+
+
+ {/* 最新更新 */}
+
+
+
+
+
+ 查看全部
+
+
+
+
+ 新英雄预告
+
+
+ 即将登场
+
+ {upcomingCharacters.map((character) => (
+
+
+
+ ))}
+
+
+
+
+
+ {character.role}
+
+
+
+
+
+
+ + {character.name} +
+ + 即将登场 + ++ {character.description} +
+
+
+
+ + 核心特性 +
++ {character.features} +
+
+
+
+
+
+
+
+ 查看全部
+
+
+
+
+ 平衡性调整
+
+
+ 最新更新
+
+ {updatedCharacters.map((character) => (
+
+
+
+ ))}
+
+
+
+
+
+ {character.role}
+
+
+
+
+
+
+ + {character.name} +
+ + 最新更新 + ++ {character.description} +
+
+
+
+ + 变更数据 +
++ {character.changes} +
+
+
+
+
+ 热门配装推荐
+ + 更多配装 + + +
+ {equipmentBuilds.map((build) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ + {build.character} +
+
+
+ 胜率: {build.winRate}
+
+
+ 使用率: {build.usageRate}
+
+
+
+
+ 推荐装备
+
+ {build.items.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
+ {build.tags.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+ 实时对战数据
+ + 查看完整数据 + + +
+
+
+
+
+
+
+
+ + 角色使用率排行 +
+
+
+
+
+
+ | + 排名 + | ++ 角色 + | ++ 胜率 + | ++ 选取率 + | ++ 禁用率 + | +
|---|---|---|---|---|
|
+
+ {data.rank}
+
+ |
+ + {data.character} + | ++ {data.winRate} + | ++ {data.pickRate} + | ++ {data.banRate} + | +
+
+
+
+
+
+ + 当前赛季 +
+
+ 赛季名称
+ 暗影崛起
+
+
+ 开始时间
+ 2025-03-15
+
+
+ 结束时间
+ 2025-06-15
+
+
+ 剩余时间
+ 66 天
+
+
+
+
+
+ + 最新比赛结果 +
+
+
+
+
+
+ 职业联赛
+ 2小时前
+
+
+
+
+
+ 龙族战队
+
+
+ 3
+
+
+ VS
+
+ 1
+
+ 风暴战队
+
+
+
+
+
+ 职业联赛
+ 5小时前
+
+
+
+
+
+ 火焰战队
+
+
+ 3
+
+
+ VS
+
+ 2
+
+ 雷霆战队
+
+
+
+
+
+ 职业联赛
+ 昨天
+
+
+
+
+
+ 幽灵战队
+
+ 0
+
+ VS
+
+
+ 3
+
+
+ 星辰战队
+
+
+