'use client'; import React, { useMemo } from 'react'; import { motion } from 'framer-motion'; import * as Lucide from 'lucide-react'; // 中医五行颜色配置 const COLORS = { wood: '#4ade80', // 木 - 绿 fire: '#f87171', // 火 - 红 earth: '#fbbf24', // 土 - 黄 metal: '#94a3b8', // 金 - 银灰 water: '#60a5fa', // 水 - 蓝 ink: '#292524', // 墨 paper: '#fcf9f2' // 纸 }; // 五行数据 const ELEMENTS = [ { name: '木', label: 'Wood', color: COLORS.wood, angle: 0 }, { name: '火', label: 'Fire', color: COLORS.fire, angle: 72 }, { name: '土', label: 'Earth', color: COLORS.earth, angle: 144 }, { name: '金', label: 'Metal', color: COLORS.metal, angle: 216 }, { name: '水', label: 'Water', color: COLORS.water, angle: 288 }, ]; export const NaturalTCM = () => { // 生成背景粒子 const particles = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => ({ x: Math.random() * 100, y: Math.random() * 100, duration: 10 + Math.random() * 20, scale: 0.5 + Math.random() * 0.5 })); }, []); return (

{/* 动态背景 - 模拟气的流动 */} {/* 微小浮游粒子 - 模拟微观能量 */} {particles.map((p, i) => ( ))}

{/* 标题区域 */}

Traditional Chinese Medicine

中医智慧 · 整体观

Balance · Harmony · Energy Flow

{/* 核心动画区域 - 五行与太极 */}

{el.name} {el.label}

); })} {/* 中心太极图 */} {/* 阴（黑）面 */} {/* 阳（白）面边框用于清晰度 */} {/* 阳中之阴 */} {/* 阴中之阳 */}

{/* 卡片区域 */}

{[ { title: "阴阳平衡", sub: "Yin-Yang Balance", desc: "生命活动的根本规律，追求动态平衡。", icon: "Scale", color: COLORS.ink }, { title: "五行相生", sub: "Five Elements", desc: "木火土金水，万物相互资生与制约。", icon: "CircleDashed", color: COLORS.wood }, { title: "气血经络", sub: "Qi & Meridians", desc: "能量流动的网络，连接脏腑与肢体。", icon: "Activity", color: COLORS.fire } ].map((item, i) => { const Icon = Lucide[item.icon] || Lucide.Activity; return (

0{i + 1}

{item.title}

{item.sub}

{item.desc}

) })}

); };