'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 800; // 调色板 const COLORS = { bg: '#0f172a', gold: '#fbbf24', // 金色 goldDim: '#b45309', red: '#dc2626', // 朱红 ink: '#1e293b', // 墨色 text: '#f1f5f9', // 浅灰白 textDim: '#94a3b8' }; // 官职数据 const LORDS = [ { id: 'chengxiang', title: '丞相', role: '文官之首 · 行政', x: 250, y: 300, type: 'civil' }, { id: 'taiwei', title: '太尉', role: '武官之首 · 军事', x: 500, y: 300, type: 'military' }, { id: 'yushi', title: '御史大夫', role: '副丞相 · 监察', x: 750, y: 300, type: 'censor' }, ]; const MINISTERS = [ { title: '奉常', sub: '宗庙礼仪', row: 0, col: 0 }, { title: '郎中令', sub: '宫殿警卫', row: 0, col: 1 }, { title: '卫尉', sub: '宫门屯兵', row: 0, col: 2 }, { title: '太仆', sub: '舆马车驾', row: 1, col: 0 }, { title: '廷尉', sub: '司法刑狱', row: 1, col: 1 }, { title: '典客', sub: '外交民族', row: 1, col: 2 }, { title: '宗正', sub: '皇室亲族', row: 2, col: 0 }, { title: '治粟内史', sub: '租税钱谷', row: 2, col: 1 }, { title: '少府', sub: '皇室财政', row: 2, col: 2 }, ]; export const SanGongJiuQingView = () => { // 动画阶段: 0:初始, 1:皇权印章, 2:三公显现, 3:权力流转, 4:九卿展开 const [phase, setPhase] = useState(0); const [time, setTime] = useState(0); // 动画循环与状态机 useEffect(() => { const startTime = Date.now(); let frameId; const loop = () => { const now = Date.now(); const elapsed = (now - startTime) / 1000; // 秒 setTime(elapsed); // 简化的时间轴控制 (为了演示流畅性，将原需求1-2分钟压缩至约30秒循环) if (elapsed < 1) setPhase(0); else if (elapsed < 5) setPhase(1); // 皇权 else if (elapsed < 12) setPhase(2); // 三公 else if (elapsed < 20) setPhase(3); // 权力流转 else if (elapsed < 32) setPhase(4); // 九卿 else { // 重置循环 // window.location.reload(); // 或者重置状态 } frameId = requestAnimationFrame(loop); }; loop(); return () => cancelAnimationFrame(frameId); }, []); // 辅助函数：计算两点间连线 const getPath = (x1, y1, x2, y2) => `M${x1},${y1} L${x2},${y2}`; // 辅助函数：生成墨水晕染滤镜 const InkFilter = () => ( ); // 1. 皇权部分 const renderEmperor = () => { const isActive = phase >= 1; const scale = isActive ? 1 : 3; const opacity = isActive ? 1 : 0; // 落下时的震动 const shake = (phase === 1 && time < 1.5) ? Math.sin(time * 50) * 5 : 0; return ( {/* 玉玺印章背景 */} {/* 边框 */} {/* 文字 */} 皇帝 {/* 光晕效果 */} {isActive && ( )} ); }; // 2. & 3. 三公连接线与流转 const renderConnections = () => { if (phase < 2) return null; return LORDS.map((lord, i) => { const showFlow = phase >= 3; const startX = VIEW_WIDTH/2; const startY = 160; // 皇帝下方 // 线条样式逻辑 let strokeDash = "0"; let strokeWidth = 2; let strokeColor = COLORS.gold; if (showFlow) { if (lord.type === 'civil') strokeWidth = 6; // 丞相权力大，线粗 if (lord.type === 'military') strokeDash = "10,10"; // 军权受限，虚线 if (lord.type === 'censor') strokeColor = COLORS.red; // 监察，红色 } return ( {/* 基础连线 */} {/* 权力回流动画 (指向皇帝) */} {showFlow && ( )} ); }); }; // 2. 三公节点 const renderLords = () => { if (phase < 2) return null; return LORDS.map((lord, i) => { // 依次淡入 const delay = i * 0.5; const isVisible = (time - 5) > delay; // 简单的时间判断 return ( {/* 背景框 */} {/* 官职名 */} {lord.title} {/* 职能描述 (淡入) */} {lord.role} {/* 装饰性图标/印记 */} ); }); }; // 4. 九卿 const renderMinisters = () => { if (phase < 4) return null; const startY = 450; const gapX = 250; const gapY = 100; const baseX = VIEW_WIDTH / 2; return MINISTERS.map((m, i) => { // 计算位置 const x = baseX + (m.col - 1) * gapX; const y = startY + m.row * gapY; // 级联出现 const delay = i * 0.2; const fadeIn = (time - 20) > delay; // 这里的20是基于phase 4开始的大概时间 return ( {/* 连接线 - 从上方三公区域垂下 (简化视觉，统一从上方落下) */} {/* 牌匾 */} {/* 官名 */} {m.title} {/* 职能图标化文字 */} {m.sub} {/* 装饰点 */} ); }); }; // 背景纹理 const Background = () => ( {/* 淡淡的水墨山水背景暗示，使用大路径 */} ); return (

); };