// Shared components & utilities for physics experiments
const { useState, useEffect, useRef, useCallback, useMemo } = React;
// ========== SVG Icon Library ==========
// All line-style icons with consistent stroke-width
const Icons = {
// App logo
Atom: () => (
),
ArrowLeft: () => (
),
ArrowRight: () => (
),
Play: () => (
),
Pause: () => (
),
Refresh: () => (
),
Fire: () => (
),
Bell: () => (
),
BellOff: () => (
),
Check: () => (
),
Shuffle: () => (
),
Grid3x3: () => (
),
X: () => (
),
Warning: () => (
),
// Category icons
CatAcoustics: () => (
),
CatOptics: () => (
),
CatThermal: () => (
),
CatMechanics: () => (
),
CatElectricity: () => (
),
CatElectromagnetism: () => (
),
};
// Simple icon component
function Icon({ name, size = 16, color, style }) {
const Comp = Icons[name];
if (!Comp) return null;
return (
);
}
// ========== Category config ==========
const CATEGORIES = {
acoustics: {
name: '声学',
subtitle: 'Acoustics',
color: '#111114',
icon: 'CatAcoustics',
experiments: [
{ id: 'sound-propagation', name: '声音的产生与传播' },
{ id: 'pitch-frequency', name: '音调与频率' },
{ id: 'loudness-amplitude', name: '响度与振幅' },
]
},
optics: {
name: '光学',
subtitle: 'Optics',
color: '#111114',
icon: 'CatOptics',
experiments: [
{ id: 'pinhole', name: '小孔成像' },
{ id: 'reflection', name: '光的反射定律' },
{ id: 'refraction', name: '光的折射' },
{ id: 'convex-lens', name: '凸透镜成像规律' },
{ id: 'dispersion', name: '光的色散' },
]
},
thermal: {
name: '热学',
subtitle: 'Thermal Physics',
color: '#111114',
icon: 'CatThermal',
experiments: [
{ id: 'thermometer', name: '温度计的使用' },
{ id: 'melting', name: '晶体与非晶体熔化' },
{ id: 'boiling', name: '水的沸腾' },
{ id: 'specific-heat', name: '比热容实验' },
]
},
mechanics: {
name: '力学',
subtitle: 'Mechanics',
color: '#111114',
icon: 'CatMechanics',
experiments: [
{ id: 'measurement', name: '长度与质量测量' },
{ id: 'gravity', name: '重力与质量关系' },
{ id: 'friction', name: '滑动摩擦力' },
{ id: 'inertia', name: '阻力对运动的影响' },
{ id: 'buoyancy', name: '浮力与阿基米德原理' },
{ id: 'liquid-pressure', name: '液体压强' },
{ id: 'lever', name: '杠杆平衡条件' },
{ id: 'pulley', name: '滑轮与滑轮组' },
]
},
electricity: {
name: '电学',
subtitle: 'Electricity',
color: '#111114',
icon: 'CatElectricity',
experiments: [
{ id: 'simple-circuit', name: '简单电路' },
{ id: 'ohms-law', name: '欧姆定律 / 伏安法' },
{ id: 'series-parallel', name: '串并联电路规律' },
{ id: 'rheostat', name: '滑动变阻器' },
{ id: 'electric-power', name: '电功率 P=UI' },
]
},
electromagnetism: {
name: '电磁学',
subtitle: 'Electromagnetism',
color: '#111114',
icon: 'CatElectromagnetism',
experiments: [
{ id: 'magnetic-field', name: '磁体与磁感线' },
{ id: 'oersted', name: '奥斯特实验' },
{ id: 'electromagnet', name: '电磁铁' },
{ id: 'motor', name: '磁场对通电导体的作用' },
{ id: 'induction', name: '电磁感应' },
]
},
};
// ========== Floating formula decor for portal ==========
const FORMULAS = [
'v = s / t',
'ρ = m / V',
'G = m g',
'p = F / S',
'p = ρ g h',
'F浮 = ρ液 g V排',
'F₁L₁ = F₂L₂',
'W = F s',
'P = W / t',
'η = W有 / W总',
'Q = c m Δt',
'I = U / R',
'W = U I t',
'P = U I',
'Q = I² R t',
'v = λ f',
'F = B I L',
'ε = N ΔΦ / Δt',
'f = 1 / T',
'n = c / v',
'1/f = 1/u + 1/v',
'E = m c²',
'F = k x',
'W = ½ m v²',
'Eₚ = m g h',
];
function FormulaBackground() {
// Pre-compute positions (deterministic)
const items = useMemo(() => {
const arr = [];
for (let i = 0; i < FORMULAS.length; i++) {
const formula = FORMULAS[i];
const left = (i * 37 + 13) % 95; // 0-95%
const top = (i * 23 + 7) % 90; // 0-90%
const size = 16 + (i % 5) * 4; // 16-32px
const delay = (i * 0.7) % 12;
const duration = 14 + (i % 8) * 1.5;
const rotate = ((i * 13) % 14) - 7; // -7 to 7 deg
arr.push({ formula, left, top, size, delay, duration, rotate });
}
return arr;
}, []);
return (
{items.map((item, i) => (
{item.formula}
))}
{label}
);
}
function MeterCard({ label, value, unit, sub, full }) {
return (
{label}
{value}{unit}
{sub &&
{sub}
}
);
}
function FormulaBox({ expr, subs }) {
return (
{expr}
{subs && subs.map((s, i) => (
))}
);
}
function ExplainBox({ title, children }) {
return (
{title}
{children}
);
}
function PanelTabBar({ tabs, active, onChange }) {
return (
{tabs.map(t => (
))}
);
}
// ========== Mini Chart ==========
function MiniChart({ data, xLabel, yLabel, color, height = 160, yMin, yMax }) {
const ref = useRef(null);
const chartRef = useRef(null);
useEffect(() => {
if (!ref.current) return;
if (!chartRef.current) {
chartRef.current = echarts.init(ref.current);
}
const chart = chartRef.current;
const lineColor = color || '#111114';
chart.setOption({
grid: { left: 40, right: 12, top: 12, bottom: 24 },
xAxis: {
type: 'category',
name: xLabel || '',
nameLocation: 'end',
nameTextStyle: { fontSize: 10, color: '#8a94a6' },
data: data.map((_, i) => i),
axisLine: { lineStyle: { color: '#e4e7ec' } },
axisLabel: { color: '#8a94a6', fontSize: 10 },
splitLine: { show: false },
axisTick: { show: false },
},
yAxis: {
type: 'value',
name: yLabel || '',
nameTextStyle: { fontSize: 10, color: '#8a94a6' },
min: yMin,
max: yMax,
axisLine: { show: false },
axisLabel: { color: '#8a94a6', fontSize: 10 },
splitLine: { lineStyle: { color: '#eef0f3', type: 'dashed' } },
axisTick: { show: false },
},
series: [{
type: 'line',
data: data,
showSymbol: false,
smooth: true,
lineStyle: { color: lineColor, width: 2 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: lineColor + '33' },
{ offset: 1, color: lineColor + '08' },
])
},
}],
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderColor: '#e4e7ec',
borderWidth: 1,
textStyle: { color: '#1a1d24', fontSize: 12 },
shadowBlur: 8,
shadowColor: 'rgba(0,0,0,0.08)',
}
});
return () => { chart.resize(); };
}, [data, color, xLabel, yLabel, yMin, yMax]);
useEffect(() => {
const handle = () => chartRef.current && chartRef.current.resize();
window.addEventListener('resize', handle);
return () => window.removeEventListener('resize', handle);
}, []);
return ;
}
// Experiment shell that wraps each experiment with standard panel
function ExperimentShell({ category, name, children, panelTabs, panelContent, catColor }) {
const [activeTab, setActiveTab] = useState(panelTabs[0]?.id || 'controls');
return (
{category}
{name}
{children}
{panelTabs.length > 1 && (
{panelTabs.map(t => (
))}
)}
{panelContent(activeTab)}
);
}
// ========== Export to window ==========
Object.assign(window, {
CATEGORIES,
Icons,
Icon,
FormulaBackground,
useState, useEffect, useRef, useCallback, useMemo,
ControlSlider, ControlToggle, MeterCard, FormulaBox, ExplainBox, PanelTabBar,
MiniChart, ExperimentShell,
});