init: 0.1.1

feat: login page && auth required
todo: 断点上传

frontend/src/component/fluid/fluid.tsx

@@ -0,0 +1,124 @@
+import  { useRef, useEffect } from 'react';
+
+export const AnimatedBackground = () => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    // 粒子配置
+    const config = {
+        particleNum: 100,
+        maxSpeed: 1.5,
+        particleRadius: 2,
+        lineWidth: 1.5,
+        lineDistance: 100
+    };
+
+    type Particle = {
+        x: number;
+        y: number;
+        speedX: number;
+        speedY: number;
+        color: string;
+        radius: number;
+    };
+
+    useEffect(() => {
+        const canvas = canvasRef.current!;
+        const ctx = canvas.getContext('2d')!;
+
+        // 设置canvas尺寸
+        const resize = () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        };
+        resize();
+
+        // 创建粒子数组
+        let particles: Particle[] = [];
+        const createParticles = () => {
+            particles = Array.from({ length: config.particleNum }).map(() => ({
+                x: Math.random() * canvas.width,
+                y: Math.random() * canvas.height,
+                speedX: (Math.random() - 0.5) * config.maxSpeed,
+                speedY: (Math.random() - 0.5) * config.maxSpeed,
+                color: `hsl(${Math.random() * 360}, 70%, 60%)`,
+                radius: Math.random() * config.particleRadius + 1
+            }));
+        };
+
+        // 绘制连线
+        const drawLine = (p1: Particle, p2: Particle) => {
+            const dx = p1.x - p2.x;
+            const dy = p1.y - p2.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+
+            if (dist < config.lineDistance) {
+                ctx.beginPath();
+                ctx.strokeStyle = p1.color;
+                ctx.lineWidth = config.lineWidth * (1 - dist / config.lineDistance);
+                ctx.moveTo(p1.x, p1.y);
+                ctx.lineTo(p2.x, p2.y);
+                ctx.stroke();
+            }
+        };
+
+        // 动画循环
+        let animationFrameId: number;
+        const animate = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // 更新粒子位置
+            particles.forEach(particle => {
+                particle.x += particle.speedX;
+                particle.y += particle.speedY;
+
+                // 边界反弹
+                if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
+                if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
+
+                // 绘制粒子
+                ctx.beginPath();
+                ctx.fillStyle = particle.color;
+                ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+                ctx.fill();
+            });
+
+            // 绘制粒子间的连线
+            for (let i = 0; i < particles.length; i++) {
+                for (let j = i + 1; j < particles.length; j++) {
+                    drawLine(particles[i], particles[j]);
+                }
+            }
+
+            animationFrameId = requestAnimationFrame(animate);
+        };
+
+        // 初始化
+        createParticles();
+        animate();
+
+        // 窗口resize处理
+        window.addEventListener('resize', () => {
+            resize();
+            createParticles();
+        });
+
+        // 清理
+        return () => {
+            window.removeEventListener('resize', resize);
+            cancelAnimationFrame(animationFrameId);
+        };
+    }, []);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                zIndex: -1,
+                backgroundColor: '#1a1a1a'
+            }}
+        />
+    );
+};