From 90b3b6329fec3205b845198ca6dc539dcde186c8 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 16 六月 2025 17:12:20 +0800
Subject: [PATCH] 页面调整优化
---
src/components/SupplyChainAIMindMap.tsx | 117 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 78 insertions(+), 39 deletions(-)
diff --git a/src/components/SupplyChainAIMindMap.tsx b/src/components/SupplyChainAIMindMap.tsx
index 7646d4c..b69cb9d 100644
--- a/src/components/SupplyChainAIMindMap.tsx
+++ b/src/components/SupplyChainAIMindMap.tsx
@@ -14,6 +14,14 @@
export default function SupplyChainAIMindMap() {
const canvasRef = useRef<HTMLCanvasElement>(null);
+ const nodesRef = useRef<Node[]>([
+ { x: 0.15, y: 0.3, label: '閲囪喘', color: '#6ADBFF', icon: '馃摝' },
+ { x: 0.35, y: 0.3, label: '鐢熶骇', color: '#5E72EB', icon: '馃彮' },
+ { x: 0.65, y: 0.3, label: '閰嶉��', color: '#FF6A88', icon: '馃殮' },
+ { x: 0.85, y: 0.3, label: '瀹㈡埛', color: '#FF9D6A', icon: '馃懃' },
+ { x: 0.85, y: 0.6, label: '闇�姹傞娴�', color: '#FF6A88', icon: '馃搳' },
+ { x: 0.5, y: 0.5, label: '鏅鸿兘鍒嗘瀽寮曟搸', color: '#5E72EB', isAI: true },
+ ]);
useEffect(() => {
const canvas = canvasRef.current;
@@ -88,17 +96,22 @@
targetY: endY,
size: Math.random() * 2 + 1,
color: path.color,
- speed: 0.5 + Math.random() * 1,
+ speed: 0.5 + Math.random() * 0.5, // 闄嶄綆閫熷害
energy: 1,
phase: Math.random() * Math.PI * 2,
- orbitRadius: Math.random() * 20 + 10,
- orbitSpeed: (Math.random() * 0.1 + 0.05) * (Math.random() < 0.5 ? 1 : -1),
+ orbitRadius: Math.random() * 15 + 5, // 鍑忓皬杞ㄩ亾鍗婂緞
+ orbitSpeed: (Math.random() * 0.08 + 0.03) * (Math.random() < 0.5 ? 1 : -1), // 闄嶄綆杞ㄩ亾閫熷害
pathIndex,
lifespan: 0,
- maxLifespan: 150 + Math.random() * 100
+ maxLifespan: 150 + Math.random() * 50 // 鍑忓皯鏈�澶у鍛�
};
particles.push(particle);
+
+ // 闄愬埗绮掑瓙鎬绘暟锛岄槻姝㈡�ц兘闂
+ if (particles.length > 30) {
+ particles.shift();
+ }
};
// 鏇存柊閲忓瓙绮掑瓙
@@ -152,10 +165,18 @@
// 缁樺埗鍦烘櫙
const drawScene = () => {
+ if (!ctx) return;
+
+ // 娓呴櫎鐢诲竷
ctx.clearRect(0, 0, canvas.width, canvas.height);
- // 缁樺埗绉戞妧鎰熻儗鏅�
- drawTechBackground();
+ // 鍑忓皯閲嶅璁＄畻锛岄鍏堣绠楀父鐢ㄥ��
+ const canvasWidth = canvas.width;
+ const canvasHeight = canvas.height;
+ const time = Date.now() * 0.001;
+
+ // 缁樺埗鎶�鏈儗鏅�
+ drawTechBackground(ctx, canvasWidth, canvasHeight, time);
// 缁樺埗鑳介噺鍦鸿矾寰�
drawEnergyFields();
@@ -165,46 +186,52 @@
// 缁樺埗閲忓瓙绮掑瓙
drawQuantumParticles();
+
+ // 缁樺埗AI鑺傜偣
+ const aiNode = nodesRef.current.find(node => node.isAI);
+ if (aiNode) {
+ drawAINode(aiNode.x * canvasWidth, aiNode.y * canvasHeight);
+ }
};
// 缁樺埗绉戞妧鎰熻儗鏅�
- const drawTechBackground = () => {
+ const drawTechBackground = (ctx: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number, time: number) => {
const gridSize = 40;
- const time = Date.now() * 0.001;
- // 缁樺埗鍔ㄦ�佺綉鏍�
+ // 闄嶄綆缃戞牸瀵嗗害锛屼粎缁樺埗杈冨皯鐨勭嚎鏉�
ctx.strokeStyle = 'rgba(70, 130, 180, 0.05)';
ctx.lineWidth = 0.5;
- for (let y = 0; y < canvas.height; y += gridSize) {
+ // 闄嶄綆缃戞牸绾块鐜�
+ for (let y = 0; y < canvasHeight; y += gridSize * 1.5) {
ctx.beginPath();
ctx.moveTo(0, y);
- ctx.lineTo(canvas.width, y);
+ ctx.lineTo(canvasWidth, y);
ctx.stroke();
- // 娣诲姞娉㈠姩鏁堟灉
+ // 瀵规尝鍔ㄦ晥鏋滈噰鏍风巼闄嶄綆
ctx.beginPath();
- for (let x = 0; x < canvas.width; x += 5) {
- const wave = Math.sin(x * 0.02 + time + y * 0.01) * 2;
+ for (let x = 0; x < canvasWidth; x += 10) {
+ const wave = Math.sin(x * 0.01 + time + y * 0.005) * 2;
ctx.lineTo(x, y + wave);
}
ctx.strokeStyle = 'rgba(70, 130, 180, 0.02)';
ctx.stroke();
}
- for (let x = 0; x < canvas.width; x += gridSize) {
+ for (let x = 0; x < canvasWidth; x += gridSize * 1.5) {
ctx.beginPath();
ctx.moveTo(x, 0);
- ctx.lineTo(x, canvas.height);
+ ctx.lineTo(x, canvasHeight);
ctx.strokeStyle = 'rgba(70, 130, 180, 0.05)';
ctx.stroke();
}
- // 娣诲姞闅忔満鍏夌偣
- for (let i = 0; i < 15; i++) {
- const x = Math.random() * canvas.width;
- const y = Math.random() * canvas.height;
- const size = 2 + Math.sin(time * 2 + i) * 1;
+ // 鍑忓皯鍏夌偣鏁伴噺
+ for (let i = 0; i < 10; i++) {
+ const x = Math.random() * canvasWidth;
+ const y = Math.random() * canvasHeight;
+ const size = 2 + Math.sin(time * 1.5 + i) * 1;
const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 2);
gradient.addColorStop(0, 'rgba(106, 219, 255, 0.2)');
@@ -277,16 +304,8 @@
// 缁樺埗鑺傜偣
const drawNodes = () => {
- // 鑺傜偣閰嶇疆
- const nodes: Node[] = [
- { x: 0.15, y: 0.3, label: '閲囪喘', color: '#6ADBFF', icon: '馃摝' },
- { x: 0.35, y: 0.3, label: '鐢熶骇', color: '#5E72EB', icon: '馃彮' },
- { x: 0.65, y: 0.3, label: '閰嶉��', color: '#FF6A88', icon: '馃殮' },
- { x: 0.85, y: 0.3, label: '瀹㈡埛', color: '#FF9D6A', icon: '馃懃' },
- { x: 0.85, y: 0.6, label: '闇�姹傞娴�', color: '#FF6A88', icon: '馃搳' },
- { x: 0.5, y: 0.5, label: '鏅鸿兘鍒嗘瀽寮曟搸', color: '#5E72EB', isAI: true },
- ];
-
+ // 浣跨敤寮曠敤涓殑鑺傜偣鏁版嵁
+ const nodes = nodesRef.current;
const time = Date.now() * 0.001;
nodes.forEach(node => {
@@ -546,33 +565,53 @@
});
};
- // 鍒濆鍖栫矑瀛愮郴缁�
+ // 鍒濆鍖栫矑瀛�
const initParticles = () => {
- for (let i = 0; i < 40; i++) {
+ // 鍑忓皯鍒濆绮掑瓙鏁伴噺
+ for (let i = 0; i < 20; i++) {
setTimeout(() => createQuantumParticle(), i * 100);
}
};
- // 瀹氭湡娣诲姞鏂扮矑瀛�
+ // 瀹氭湡娣诲姞鏂扮矑瀛愶紝闄嶄綆棰戠巼
const particleInterval = setInterval(() => {
- if (particles.length < 50) {
+ if (particles.length < 30) {
createQuantumParticle();
}
- }, 500);
+ }, 800);
// 鍔ㄧ敾寰幆
- const animate = () => {
+ let lastTime = 0;
+ const targetFPS = 30; // 闄嶄綆鐩爣FPS浠ユ彁楂樻�ц兘
+ const frameInterval = 1000 / targetFPS;
+
+ const animate = (timestamp = 0) => {
+ const animationId = requestAnimationFrame(animate);
+
+ // 闄愬埗甯х巼浠ユ彁楂樻�ц兘
+ const deltaTime = timestamp - lastTime;
+ if (deltaTime < frameInterval) {
+ return animationId;
+ }
+
+ // 璁板綍褰撳墠鏃堕棿
+ lastTime = timestamp - (deltaTime % frameInterval);
+
+ // 鏇存柊鍜岀粯鍒�
updateParticles();
drawScene();
- requestAnimationFrame(animate);
+
+ return animationId;
};
initParticles();
- animate();
+ const animationId = animate();
return () => {
window.removeEventListener('resize', setCanvasSize);
clearInterval(particleInterval);
+ // 娓呯悊鍔ㄧ敾甯�
+ cancelAnimationFrame(animationId);
};
}, []);
--
Gitblit v1.9.3