From ec57de59a8c24f3e6b1bc9a321988ab6c8bb584a Mon Sep 17 00:00:00 2001 From: Aliothmoon Date: Sun, 22 Feb 2026 21:18:11 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=8A=8A=E7=A5=9E=E7=A7=98?= =?UTF-8?q?=E7=94=B5=E5=A1=94=E5=8E=BB=E6=8E=89=E6=94=B9=E4=B8=80=E4=B8=8B?= =?UTF-8?q?=20&=20Hero=E9=A1=B5=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/Hero.tsx | 61 ++- app/components/hero/BackgroundLayer.tsx | 98 ++--- .../hero/InteractiveModelOptimized.tsx | 405 ------------------ 3 files changed, 67 insertions(+), 497 deletions(-) delete mode 100644 app/components/hero/InteractiveModelOptimized.tsx diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 95c5f82..cb78f16 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -21,7 +21,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import Image from "next/image"; -import InteractiveModelOptimized from "./hero/InteractiveModelOptimized"; import BackgroundLayer from "./hero/BackgroundLayer"; import { GITHUB_URLS } from "../constants"; @@ -259,27 +258,27 @@ export default function Hero() { {/* Industrial Background Layer */} -
- {/* Left: Industrial Typography */} -
+
+ {/* Main Content */} +
- - +
+
+
+
+ {t("hero.neuralOnline")}
{/* Logo Icon */} @@ -299,33 +298,32 @@ export default function Hero() { /> -
- +
+ {t("hero.title")} - + {t("hero.subtitle")} - + {t("hero.description")}
- {/* Decorative lines attached to text */} -
-
-
+ {/* Elevated Decorative lines attached to text */} +
+
-
- +
+

{t("hero.tagline")} @@ -345,10 +343,10 @@ export default function Hero() { {!showDownloadOptions ? ( {/* 第一行：主下载 + 展示全部 */}

@@ -535,11 +533,6 @@ export default function Hero() {
- - {/* Right: Interactive Particle Model */} -
- -
); diff --git a/app/components/hero/BackgroundLayer.tsx b/app/components/hero/BackgroundLayer.tsx index ef9dab5..282bf45 100644 --- a/app/components/hero/BackgroundLayer.tsx +++ b/app/components/hero/BackgroundLayer.tsx @@ -1,78 +1,60 @@ "use client"; import { useTranslation } from "react-i18next"; +import { motion } from "framer-motion"; -// 静态背景装饰层 - 已移除视差动画以提升性能 export default function BackgroundLayer() { const { t } = useTranslation(); return ( -
- {/* Hazard Stripes Top/Bottom - 静态版本 */} -
-
- - {/* Vertical Guide Lines - 静态版本 */} -
-
- - {/* Technical Grid */} -
- - {/* Light Mode: Geometric Shapes - 静态版本，保留核心装饰 */} -
- {/* Geometric Shapes - Top Left */} -
-
- - {/* Geometric Shapes - Top Right */} -
-
- - {/* Diagonal Lines - Left Side */} -
-
-
- - {/* Diagonal Lines - Right Side */} -
-
-
- - {/* Corner Brackets - Bottom Left */} -
-
+
+ {/* Ambient Aurora Glows */} +
+
+
+ + {/* Subtle Technical Grid Overlay - very soft */} +
+ + {/* Modern Sci-Fi HUD Accents */} +
+
+ + {t("hero.systemReady")}
-
-
+
+
+
+
+
- {/* Corner Brackets - Bottom Right */} -
-
-
-
-
+
+
+ ID: MaaEnd-V1-RELEASE
- - {/* Technical Pattern - Center Background */} -
-
+
+
+
+
- {/* HUD Elements - 静态版本 */} -
-
- {t("hero.systemReady")} -
-
- ID: MaaEnd-V1-RELEASE + {/* Elegant Large Watermark - subtle integration */} +
+ MaaEnd
- {/* Large Watermark - 静态版本 */} -
- MaaEnd + {/* Floating Particles/Stars */} +
+
+
+
+
); diff --git a/app/components/hero/InteractiveModelOptimized.tsx b/app/components/hero/InteractiveModelOptimized.tsx deleted file mode 100644 index ce5f4d0..0000000 --- a/app/components/hero/InteractiveModelOptimized.tsx +++ /dev/null @@ -1,405 +0,0 @@ -"use client"; - -import { useEffect, useMemo, useRef, useState } from "react"; -import { Canvas, useFrame } from "@react-three/fiber"; -import { Float, OrbitControls, PerspectiveCamera } from "@react-three/drei"; -import * as THREE from "three"; -import { useTheme } from "next-themes"; - -// 性能优化的粒子系统 -const OptimizedArchitectureModel = ({ isDark }: { isDark: boolean }) => { - const count = 5000; // 保持原始粒子数量以维持视觉效果 - const mesh = useRef(null); - - // 使用 useMemo 缓存完整的几何体结构 - const geometry = useMemo(() => { - /* eslint-disable react-hooks/purity */ - // Math.random() is safe here as it's memoized and only runs once on mount - const temp = []; - - // 塔的总高度 - const towerHeight = 8; - const baseY = -4; // 底部位置（往下移动让顶部完整显示） - - // 1. 主塔身 - 底部宽大向上逐渐收窄的锥形结构 (四面体框架) - for (let i = 0; i < count * 0.25; i++) { - const t = Math.random(); // 0 = 底部, 1 = 顶部 - const y = baseY + t * towerHeight * 0.7; - - // 半径随高度减小 (底部2.0, 顶部0.3) - const radius = 2.0 - t * 1.7; - - // 四边形框架的边缘 - const edge = Math.floor(Math.random() * 4); - const baseAngle = (edge / 4) * Math.PI * 2 + Math.PI / 4; - const nextAngle = ((edge + 1) / 4) * Math.PI * 2 + Math.PI / 4; - const lerp = Math.random(); - - const angle = baseAngle + lerp * (nextAngle - baseAngle); - const x = Math.cos(angle) * radius + (Math.random() - 0.5) * 0.05; - const z = Math.sin(angle) * radius + (Math.random() - 0.5) * 0.05; - - temp.push(x, y, z); - } - - // 2. 垂直支撑柱 (四根主柱从底部延伸到顶部) - for (let pillar = 0; pillar < 4; pillar++) { - const angle = (pillar / 4) * Math.PI * 2 + Math.PI / 4; - for (let i = 0; i < count * 0.04; i++) { - const t = Math.random(); - const y = baseY + t * towerHeight * 0.7; - const radius = 2.0 - t * 1.7; - - const x = Math.cos(angle) * radius + (Math.random() - 0.5) * 0.08; - const z = Math.sin(angle) * radius + (Math.random() - 0.5) * 0.08; - - temp.push(x, y, z); - } - } - - // 3. 水平横梁结构 (多层平台) - const platforms = [0.0, 0.25, 0.5, 0.7]; - for (const pLevel of platforms) { - const y = baseY + pLevel * towerHeight * 0.7; - const radius = 2.0 - pLevel * 1.7; - - for (let i = 0; i < count * 0.03; i++) { - const angle = Math.random() * Math.PI * 2; - const r = radius * (0.3 + Math.random() * 0.7); - - const x = Math.cos(angle) * r + (Math.random() - 0.5) * 0.05; - const z = Math.sin(angle) * r + (Math.random() - 0.5) * 0.05; - - temp.push(x, y + (Math.random() - 0.5) * 0.1, z); - } - } - - // 4. 能量环 (围绕塔身的悬浮光环) - const energyRings = [ - { y: baseY + towerHeight * 0.3, radius: 2.8, particles: 0.06 }, - { y: baseY + towerHeight * 0.55, radius: 2.0, particles: 0.05 }, - { y: baseY + towerHeight * 0.75, radius: 1.2, particles: 0.04 }, - ]; - - for (const ring of energyRings) { - for (let i = 0; i < count * ring.particles; i++) { - const angle = Math.random() * Math.PI * 2; - const r = ring.radius + (Math.random() - 0.5) * 0.15; - const x = Math.cos(angle) * r; - const z = Math.sin(angle) * r; - const y = ring.y + (Math.random() - 0.5) * 0.08; - - temp.push(x, y, z); - } - } - - // 5. 顶部天线结构 (细长的能量发射器) - const antennaBase = baseY + towerHeight * 0.7; - const antennaHeight = towerHeight * 0.35; - - // 主天线柱 - for (let i = 0; i < count * 0.08; i++) { - const t = Math.random(); - const y = antennaBase + t * antennaHeight; - - // 天线越往上越细 - const radius = 0.15 - t * 0.12; - const angle = Math.random() * Math.PI * 2; - - const x = Math.cos(angle) * radius + (Math.random() - 0.5) * 0.03; - const z = Math.sin(angle) * radius + (Math.random() - 0.5) * 0.03; - - temp.push(x, y, z); - } - - // 6. 天线顶部能量球 - const topY = antennaBase + antennaHeight; - for (let i = 0; i < count * 0.04; i++) { - const theta = Math.random() * Math.PI * 2; - const phi = Math.random() * Math.PI; - const r = 0.25 + Math.random() * 0.1; - - const x = r * Math.sin(phi) * Math.cos(theta); - const y = topY + r * Math.cos(phi); - const z = r * Math.sin(phi) * Math.sin(theta); - - temp.push(x, y, z); - } - - // 7. 斜向支撑结构 (X形交叉支撑) - for (let level = 0; level < 3; level++) { - const t1 = level * 0.25; - const t2 = (level + 1) * 0.25; - - for (let cross = 0; cross < 4; cross++) { - const angle1 = (cross / 4) * Math.PI * 2 + Math.PI / 4; - const angle2 = ((cross + 1) / 4) * Math.PI * 2 + Math.PI / 4; - - for (let i = 0; i < count * 0.01; i++) { - const lerp = Math.random(); - const t = t1 + lerp * (t2 - t1); - const y = baseY + t * towerHeight * 0.7; - - const radius = 2.0 - t * 1.7; - const angle = angle1 + lerp * (angle2 - angle1); - - const x = Math.cos(angle) * radius * 0.95; - const z = Math.sin(angle) * radius * 0.95; - - temp.push(x, y, z); - } - } - } - - // 8. 悬浮能量粒子 (围绕塔身的浮动粒子) - for (let i = 0; i < count * 0.1; i++) { - const y = baseY + Math.random() * towerHeight; - const distance = 2.5 + Math.random() * 1.5; - const angle = Math.random() * Math.PI * 2; - - const x = Math.cos(angle) * distance; - const z = Math.sin(angle) * distance; - - temp.push(x, y, z); - } - - // 9. 底座结构 (宽大的六边形底座) - for (let i = 0; i < count * 0.06; i++) { - const angle = (Math.floor(Math.random() * 6) / 6) * Math.PI * 2; - const nextAngle = ((Math.floor(Math.random() * 6) + 1) / 6) * Math.PI * 2; - const lerp = Math.random(); - const finalAngle = angle + lerp * (nextAngle - angle); - - const radius = 2.2 + Math.random() * 0.3; - const x = Math.cos(finalAngle) * radius; - const z = Math.sin(finalAngle) * radius; - const y = baseY + (Math.random() - 0.5) * 0.2; - - temp.push(x, y, z); - } - - const geometry = new THREE.BufferGeometry(); - geometry.setAttribute( - "position", - new THREE.BufferAttribute(new Float32Array(temp), 3) - ); - return geometry; - /* eslint-enable react-hooks/purity */ - }, [count]); - - // 优化材质，减少重新创建 - const material = useMemo(() => { - return new THREE.PointsMaterial({ - size: 0.05, - color: isDark ? "#FFD000" : "#00BFFF", - transparent: true, - opacity: 0.8, - sizeAttenuation: true, - blending: isDark ? THREE.AdditiveBlending : THREE.NormalBlending, - }); - }, [isDark]); - - // 优化动画循环 - 保持原始旋转速度 - useFrame(() => { - if (!mesh.current) return; - // Technical rotation - 保持原始速度 - mesh.current.rotation.y -= 0.002; - }); - - // 清理几何体和材质 - useEffect(() => { - return () => { - geometry.dispose(); - material.dispose(); - }; - }, [geometry, material]); - - return ; -}; - -// 简化的全息场组件 -const OptimizedHoloField = ({ isDark }: { isDark: boolean }) => { - const ref = useRef(null); - - // 缓存几何体 - const geometries = useMemo( - () => ({ - outer: new THREE.CylinderGeometry(1.5, 3.5, 10, 6, 1, true), - inner: new THREE.CylinderGeometry(0.8, 0.8, 3, 8, 1, true), - }), - [] - ); - - // 缓存材质 - const materials = useMemo( - () => ({ - outer: new THREE.MeshBasicMaterial({ - color: isDark ? "#00F0FF" : "#008fa6", - wireframe: true, - opacity: 0.04, - transparent: true, - side: THREE.DoubleSide, - }), - inner: new THREE.MeshBasicMaterial({ - color: "#FFD000", - wireframe: true, - opacity: 0.03, - transparent: true, - side: THREE.DoubleSide, - }), - }), - [isDark] - ); - - useFrame((state, delta) => { - if (ref.current) { - ref.current.rotation.y += delta * 0.5; - } - }); - - // 清理资源 - useEffect(() => { - return () => { - Object.values(geometries).forEach((geo) => geo.dispose()); - Object.values(materials).forEach((mat) => mat.dispose()); - }; - }, [geometries, materials]); - - return ( - - - - - ); -}; - -// 主组件 -export default function InteractiveModelOptimized() { - const { theme, systemTheme } = useTheme(); - const [mounted, setMounted] = useState(false); - const [isVisible, setIsVisible] = useState(false); - const containerRef = useRef(null); - - // 延迟挂载以避免水合不匹配 - useEffect(() => { - const timeoutId = setTimeout(() => setMounted(true), 0); - return () => clearTimeout(timeoutId); - }, []); - - // 使用 Intersection Observer 优化性能 - useEffect(() => { - if (!mounted || !containerRef.current) return; - - const observer = new IntersectionObserver( - ([entry]) => { - setIsVisible(entry.isIntersecting); - }, - { threshold: 0.1 } - ); - - observer.observe(containerRef.current); - - return () => observer.disconnect(); - }, [mounted]); - - // 计算有效主题 - const currentTheme = theme === "system" ? systemTheme : theme; - const isDark = currentTheme === "dark"; - - // 防止水合不匹配 - if (!mounted) { - return
; - } - - // 只有在可见时才渲染 Canvas - if (!isVisible) { - return ( -
-
Loading 3D Model...
-
- ); - } - - return ( -
- - - - - - - - - - {/* 优化的光照 */} - - - - - - {/* 简化的 HUD 覆盖层 */} -
- {/* 角落括号 */} -
-
-
-
- - {/* 中心聚焦环 - 使用 CSS 动画而不是 Framer Motion */} -
-
-
- ); -} From 57579b14db0dc7a25e909562ec2c8527066bb007 Mon Sep 17 00:00:00 2001 From: Aliothmoon Date: Sun, 22 Feb 2026 21:26:20 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E4=B8=80?= =?UTF-8?q?=E4=B8=8B=E4=B8=8A=E4=B8=8B=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/Hero.tsx | 42 +++++++++++++---------------------------- locales/en.json | 2 +- locales/zh.json | 2 +- 3 files changed, 15 insertions(+), 31 deletions(-) diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index cb78f16..a6b913b 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -14,7 +14,6 @@ import { Loader2, Monitor, Shield, - Terminal as TerminalIcon, X, } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; @@ -253,34 +252,19 @@ export default function Hero() { return (
{/* Industrial Background Layer */} -
+
{/* Main Content */}
- -
-
-
-
- - {t("hero.neuralOnline")} - - - -
+
{/* Logo Icon */} -
+
{t("hero.title")} - + {t("hero.subtitle")} @@ -312,15 +296,15 @@ export default function Hero() {
{/* Elevated Decorative lines attached to text */} -
-
+
+
@@ -349,9 +333,9 @@ export default function Hero() { className="flex flex-col items-center gap-3 md:flex-row md:flex-wrap md:items-center" > {/* 第一行：主下载 + 展示全部 */} -
+
{/* 主下载按钮 - 自动检测系统 */} -
+