```javascript 'use client'; import React, { useState, useEffect, useMemo } from 'react'; // --- 配置常量 --- const VIEW_WIDTH = 800; const VIEW_HEIGHT = 500; const COLORS = { bg: "#ebeef4", grid: "#cbd5e1", textMain: "#334155", // Slate 700 textSub: "#64748b", // Slate 500 primary: "#0ea5e9", // Sky 500 (主句) secondary: "#8b5cf6", // Violet 500 (从句) accent: "#f59e0b", // Amber 500 (高亮/逻辑) success: "#10b981", // Emerald 500 (完成) white: "#ffffff", shadow: "rgba(148, 163, 184, 0.4)" }; // 动画阶段 const PHASES = { IDLE: 0, INIT_SYSTEM: 1, SHOW_SENTENCES: 2, SCAN_ANTECEDENT: 3, ANALYZE_RELATION: 4, TRANSFORM_WORD: 5, SPLIT_STRUCTURE: 6, MERGE_CLAUSE: 7, FINALIZE: 8, }; // 缓动函数 const EASE_ELASTIC = "cubic-bezier(0.34, 1.56, 0.64, 1)"; const EASE_SMOOTH = "cubic-bezier(0.4, 0, 0.2, 1)"; // --- 子组件 --- // 单词卡片组件 (Tech UI Style) const WordChip = ({ text, x, y, type, opacity = 1, scale = 1, highlight = false, subLabel = "", width = 60, isGhost = false }) => { const isMain = type === 'main'; const baseColor = highlight ? COLORS.accent : (type === 'success' ? COLORS.success : (isMain ? COLORS.primary : COLORS.secondary)); return ( {/* 阴影 */} {!isGhost && ( )} {/* 卡片主体 */} {/* 高亮光效 */} {highlight && ( )} {/* 文本 */} {text} {/* 底部微型标签 */} {subLabel && ( {subLabel} )} ); }; // 逻辑连接线 const LogicLink = ({ start, end, active }) => { if (!active || !start || !end) return null; const x1 = start.x + start.w / 2; const y1 = start.y + 36; const x2 = end.x + end.w / 2; const y2 = end.y; const path = `M ${x1} ${y1} C ${x1} ${y1 + 40}, ${x2} ${y2 - 40}, ${x2} ${y2}`; return ( {/* 流动粒子 */} ); }; // 扫描仪效果 const Scanner = ({ x, y, width, active }) => { if (!active) return null; return ( ); }; // 步骤指示器 const StatusHUD = ({ phase, ruleText }) => ( {ruleText} {/* 进度条 */} ); export default function RelativeClauseAnimation() { const [phase, setPhase] = useState(PHASES.IDLE); useEffect(() => { let mounted = true; const sequence = async () => { const delay = (ms) => new Promise(r => setTimeout(r, ms)); while (mounted) { setPhase(PHASES.INIT_SYSTEM); await delay(1000); setPhase(PHASES.SHOW_SENTENCES); await delay(2000); setPhase(PHASES.SCAN_ANTECEDENT); await delay(2500); setPhase(PHASES.ANALYZE_RELATION); await delay(2500); setPhase(PHASES.TRANSFORM_WORD); await delay(2000); setPhase(PHASES.SPLIT_STRUCTURE); await delay(1500); setPhase(PHASES.MERGE_CLAUSE); await delay(2000); setPhase(PHASES.FINALIZE); await delay(5000); setPhase(PHASES.IDLE); await delay(500); } }; sequence(); return () => { mounted = false; }; }, []); // --- 布局计算系统 --- const layout = useMemo(() => { // 基础配置 const yMain = 180; const ySub = 300; const gap = 10; // 单词宽度定义 const widths = { the: 50, core: 60, is: 40, stable: 80, controls: 90, net: 50, which: 70 }; // 初始位置 X 计算 const m1_x = 180; const m2_x = m1_x + widths.the + gap; const m3_x = m2_x + widths.core + gap; const m4_x = m3_x + widths.is + gap; const s1_x = 180; const s2_x = s1_x + widths.the + gap; const s3_x = s2_x + widths.core + gap; const s4_x = s3_x + widths.controls + gap; const s5_x = s4_x + widths.the + gap; // 从句整体宽度 const clauseWidth = widths.which + gap + widths.controls + gap + widths.the + gap + widths.net + gap; // 最终形态位置 (Split 后) const m3_x_final = m2_x + widths.core + gap * 2 + clauseWidth; const m4_x_final = m3_x_final + widths.is + gap; // 插入位置 const insert_x = m2_x + widths.core + gap * 2; return { yMain, ySub, widths, pos: { m_The: { x: m1_x, y: yMain }, m_Core: { x: m2_x, y: yMain }, m_Is: { start: m3_x, end: m3_x_final, y: yMain }, m_Stable: { start: m4_x, end: m4_x_final, y: yMain }, s_The: { x: s1_x, y: ySub }, s_Core: { x: s2_x, y: ySub }, s_Controls: { x: s3_x, y: ySub }, s_The2: { x: s4_x, y: ySub }, s_Net: { x: s5_x, y: ySub }, clause: { which: insert_x, controls: insert_x + widths.which + gap, the2: insert_x + widths.which + gap + widths.controls + gap, net: insert_x + widths.which + gap + widths.controls + gap + widths.the + gap } } }; }, []); // --- 状态渲染逻辑 --- const getRenderState = () => { const { pos, widths, yMain, ySub } = layout; const p = phase; // 默认状态 let state = { // Main m_The: { ...pos.m_The, w: widths.the, text: "The", op: 0, type: 'main' }, m_Core: { ...pos.m_Core, w: widths.core, text: "core", op: 0, type: 'main' }, m_Is: { x: pos.m_Is.start, y: yMain, w: widths.is, text: "is", op: 0, type: 'main' }, m_Stable: { x: pos.m_Stable.start, y: yMain, w: widths.stable, text: "stable.", op: 0, type: 'main' }, // Sub s_The: { ...pos.s_The, w: widths.the, text: "The", op: 0, type: 'secondary' }, s_Core: { ...pos.s_Core, w: widths.core, text: "core", op: 0, type: 'secondary' }, s_Controls: { ...pos.s_Controls, w: widths.controls, text: "controls", op: 0, type: 'secondary' }, s_The2: { ...pos.s_The2, w: widths.the, text: "the", op: 0, type: 'secondary' }, s_Net: { ...pos.s_Net, w: widths.net, text: "net", op: 0, type: 'secondary' }, ruleText: "SYSTEM_IDLE...", scanActive: false }; if (p >= PHASES.SHOW_SENTENCES) { Object.keys(state).forEach(k => { if (k.includes('_')) state[k].op = 1; }); state.ruleText = "输入：检测到两个独立句子"; } if (p === PHASES.SCAN_ANTECEDENT) { state.m_Core.hl = true; state.s_Core.hl = true; state.m_Core.sub = "先行词"; state.s_Core.sub = "重复项"; state.scanActive = true; state.ruleText = "扫描：寻找共同名词 (Common Noun)"; } if (p === PHASES.ANALYZE_RELATION) { state.m_Core.hl = true; state.s_Core.hl = true; state.s_Core.sub = "指物 (Thing)"; state.s_The.op = 0.2; state.ruleText = "分析：先行词是'物' → 匹配关系代词 Which/That"; } if (p >= PHASES.TRANSFORM_WORD) { state.s_The.op = 0; state.s_The.w = 0; // Collapse width logically state.s_Core.text = "which"; state.s_Core.type = 'secondary'; // Keep purple for now state.s_Core.w = widths.which; if (p === PHASES.TRANSFORM_WORD) { state.s_Core.hl = true; state.s_Core.sub = "关系代词"; state.ruleText = "转换：重复项替换为关系代词"; } } if (p >= PHASES.SPLIT_STRUCTURE) { state.m_Is.x = pos.m_Is.end; state.m_Stable.x = pos.m_Stable.end; if (p === PHASES.SPLIT_STRUCTURE) { state.ruleText = "结构调整：在先行词后开辟从句空间"; } } if (p >= PHASES.MERGE_CLAUSE) { // Move Sub to Main line state.s_Core.x = pos.clause.which; state.s_Core.y = yMain; state.s_Controls.x = pos.clause.controls; state.s_Controls.y = yMain; state.s_The2.x = pos.clause.the2; state.s_The2.y = yMain; state.s_Net.x = pos.clause.net; state.s_Net.y = yMain; if (p === PHASES.MERGE_CLAUSE) { state.ruleText = "合并：定语从句紧跟先行词"; } } if (p === PHASES.FINALIZE) { state.ruleText = "完成：定语从句修饰先行词"; // Unify colors ['m_The','m_Core','m_Is','m_Stable'].forEach(k => state[k].type = 'success'); ['s_Core','s_Controls','s_The2','s_Net'].forEach(k => state[k].type = 'success'); // Highlight structure state.s_Core.hl = true; // which } return state; }; const s = getRenderState(); return (

); } ```