21 lines
808 B
TypeScript
21 lines
808 B
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { EffectEngine } from '../effects/effect-engine';
|
|
import { useAppearance } from '../appearance/appearance-store';
|
|
|
|
export function EffectLayer() {
|
|
const ref = useRef<HTMLCanvasElement>(null);
|
|
const engineRef = useRef<EffectEngine | null>(null);
|
|
const appearance = useAppearance();
|
|
// M6 骨架：默认关闭，外观面板后续接入选择
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const eng = new EffectEngine();
|
|
eng.attach(ref.current);
|
|
eng.setColor(appearance.draft.accent);
|
|
eng.setType('off'); // 默认关闭，待外观面板接入开启
|
|
engineRef.current = eng;
|
|
return () => eng.detach();
|
|
}, []);
|
|
return <canvas ref={ref} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }} />;
|
|
}
|