```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // 配置常量 // ========================================== const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const MOON_CYCLE = 29.53; const COLORS = { bg: '#0e1b3a', grid: 'rgba(56, 189, 248, 0.1)', textMain: '#e2e8f0', textAccent: '#38bdf8', // 天蓝色高亮 textDim: 'rgba(148, 163, 184, 0.6)', moonLight: '#f1f5f9', moonShadow: '#0f172a', highlight: '#0ea5e9', warning: '#f43f5e' }; // 目标月相数据 const PHASE_DATA = [ { day: 1, name: '初一', label: '新月 (朔)' }, { day: 3, name: '初三', label: '蛾眉月' }, { day: 5, name: '初五', label: '蛾眉月' }, { day: 7, name: '初七', label: '上弦月' }, { day: 10, name: '初十', label: '盈凸月' }, { day: 15, name: '十五', label: '满月 (望)' }, { day: 18, name: '十八', label: '亏凸月' }, { day: 20, name: '二十', label: '亏凸月' }, { day: 23, name: '廿三', label: '下弦月' }, { day: 25, name: '廿五', label: '残月' }, { day: 27, name: '廿七', label: '残月' }, { day: 30, name: '三十', label: '晦' }, ]; export default function LunarPhaseTech() { const [currentDay, setCurrentDay] = useState(1); const [targetDay, setTargetDay] = useState(null); const requestRef = useRef(); const [isDragging, setIsDragging] = useState(false); // ========================================== // 动画循环逻辑 // ========================================== useEffect(() => { // 如果正在拖动，不进行自动动画 if (isDragging) { setTargetDay(null); return; } if (targetDay !== null) { const animate = () => { setCurrentDay(prev => { const diff = targetDay - prev; // 吸附阈值 if (Math.abs(diff) < 0.05) { setTargetDay(null); return targetDay; } // 缓动系数 return prev + diff * 0.1; }); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); } else { if (requestRef.current) cancelAnimationFrame(requestRef.current); } return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [targetDay, isDragging]); const handleSliderChange = (e) => { setIsDragging(true); setCurrentDay(parseFloat(e.target.value)); }; const handleSliderUp = () => { setIsDragging(false); }; // ========================================== // 月相路径计算 (核心算法) // ========================================== /** * 计算月相的SVG路径 d 属性 * 规则： * 1-15 (上半月): 亮面在右。由缺变圆。 * 16-30 (下半月): 亮面在左。由圆变缺。 */ const getMoonPath = (day, radius) => { // 将日期映射到 0~1 的周期 (近似) // 修正：为了视觉效果，我们假设1是朔(全黑)，15是满月(全亮)，30是朔 let progress = (day - 1) / (MOON_CYCLE - 1); // 0 ~ 1 if (progress < 0) progress = 0; if (progress > 1) progress = 1; // 0.5 是满月位置 const isWaxing = progress <= 0.5; // 计算当前半周期的进度 (0 -> 1) // 上半月: 0(新) -> 1(满) // 下半月: 0(满) -> 1(新) const localProgress = isWaxing ? progress * 2 : (progress - 0.5) * 2; let d = ''; if (isWaxing) { // === 上半月 (亮面在右) === // 右半圆始终是亮的边界 (除了新月时) // 左边界是椭圆弧，从右边(x=r)移动到左边(x=-r) // rx: 椭圆长轴。 // localProgress = 0 (新月) -> rx = r (遮住右半圆) -> 实际上我们画的是亮部 // 让我们反过来思考：画亮部。 // 视觉宽度计算： // 初一: 0 // 初七: 半圆 (右边亮) // 十五: 满圆 // 椭圆X轴半径 // 当 localProgress = 0 (新月), rx = -r (与右半圆抵消? 不，新月全黑) // 当 localProgress = 0.5 (上弦), rx = 0 (直线) // 当 localProgress = 1.0 (满月), rx = r (左半圆) const rx = radius * (2 * localProgress - 1); // -r 到 r // 路径构建： // 1. 移动到北极点 (0, -r) // 2. 画右半圆弧到南极点 (0, r) -> 顺时针 // 3. 画椭圆弧回到北极点 // 修正逻辑： // 如果 rx < 0 (初一到初七)，左边界是凹进去的 (sweep=0) // 如果 rx > 0 (初七到十五)，左边界是凸出来的 (sweep=1) const sweep = rx >= 0 ? 1 : 0; // 右半圆弧 (始终存在，定义了外轮廓) d = `M 0 -${radius} A ${radius} ${radius} 0 0 1 0 ${radius}`; // 左侧闭合路径 // A rx ry x-axis-rotation large-arc-flag sweep-flag x y d += ` A ${Math.abs(rx)} ${radius} 0 0 ${sweep} 0 -${radius}`; } else { // === 下半月 (亮面在左) === // 左半圆始终是亮的边界 // 右边界变化 // localProgress: 0(满) -> 1(晦) // rx 从 r (满) -> -r (晦) const rx = radius * (1 - 2 * localProgress); const sweep = rx >= 0 ? 1 : 0; // 左半圆弧 (始终存在) // 从南极点画到北极点，顺时针 d = `M 0 ${radius} A ${radius} ${radius} 0 0 1 0 -${radius}`; // 右侧闭合路径 d += ` A ${Math.abs(rx)} ${radius} 0 0 ${sweep} 0 ${radius}`; } return d; }; // ========================================== // 视觉元素生成 // ========================================== // 星空背景 const stars = useMemo(() => { return Array.from({ length: 150 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5, opacity: Math.random() * 0.7 + 0.1, blink: Math.random() * 4 + 2 })); }, []); // 陨石坑 (装饰) const craters = useMemo(() => { const arr = []; for(let i=0; i<25; i++) { const r = Math.random() * 12 + 2; // 极坐标随机分布，避开边缘 const dist = Math.random() * 100; const theta = Math.random() * Math.PI * 2; arr.push({ cx: Math.cos(theta) * dist, cy: Math.sin(theta) * dist, r: r, op: Math.random() * 0.15 + 0.05 }); } return arr; }, []); // 网格线 const gridLines = useMemo(() => { const lines = []; // 垂直 for(let i=0; i<=VIEW_WIDTH; i+=100) { lines.push(); } // 水平 for(let i=0; i<=VIEW_HEIGHT; i+=100) { lines.push(); } return lines; }, []); return (

); } ```