'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const PADDING = 60; const DRAW_AREA_W = VIEW_WIDTH - PADDING * 2; const DRAW_AREA_H = VIEW_HEIGHT - PADDING * 2; // 蒙德里安配色方案 (调整为更具科技感的色调) const COLORS = [ '#f8fafc', // White/Light Grey (Dominant) '#f8fafc', '#f8fafc', '#ef4444', // Tech Red '#3b82f6', // Tech Blue '#eab308', // Tech Yellow '#1e293b', // Dark Grey block ]; // 递归分割算法生成格子 type Block = { id: string; x: number; y: number; w: number; h: number; color: string; delay: number; }; const generateMondrian = (x: number, y: number, w: number, h: number, depth: number, idPrefix: string): Block[] => { // 基础情况：深度耗尽或太小 if (depth <= 0 || w < 40 || h < 40) { // 随机决定颜色，白色/灰色概率更高 const color = Math.random() > 0.7 ? COLORS[Math.floor(Math.random() * (COLORS.length - 3)) + 3] // 彩色 : COLORS[Math.floor(Math.random() * 3)]; // 浅色 return [{ id: idPrefix, x, y, w, h, color, delay: Math.random() * 0.5 // 随机延迟用于动画 }]; } // 决定分割方向 (宽则垂直分割，高则水平分割，或者随机) const isVertical = w > h ? true : h > w ? false : Math.random() > 0.5; const splitRatio = 0.3 + Math.random() * 0.4; // 30% - 70% 之间分割 if (isVertical) { const w1 = Math.floor(w * splitRatio); const w2 = w - w1; return [ ...generateMondrian(x, y, w1, h, depth - 1, `${idPrefix}-0`), ...generateMondrian(x + w1, y, w2, h, depth - 1, `${idPrefix}-1`) ]; } else { const h1 = Math.floor(h * splitRatio); const h2 = h - h1; return [ ...generateMondrian(x, y, w, h1, depth - 1, `${idPrefix}-0`), ...generateMondrian(x, y + h1, w, h2, depth - 1, `${idPrefix}-1`) ]; } }; export const MondrianGenerator = () => { const [blocks, setBlocks] = useState([]); const [iteration, setIteration] = useState(0); const [loadingProgress, setLoadingProgress] = useState(0); // 生成新的布局 useEffect(() => { const timer = setInterval(() => { setIteration(prev => prev + 1); }, 4000); // 每4秒重新生成 return () => clearInterval(timer); }, []); // 当 iteration 变化时计算新的块 useEffect(() => { setLoadingProgress(0); const newBlocks = generateMondrian(0, 0, DRAW_AREA_W, DRAW_AREA_H, 4, `blk-${iteration}`); setBlocks(newBlocks); // 模拟加载进度条动画 let p = 0; const progressInterval = setInterval(() => { p += 2; if (p > 100) { p = 100; clearInterval(progressInterval); } setLoadingProgress(p); }, 20); return () => clearInterval(progressInterval); }, [iteration]); return (

); };