90 lines
4.6 KiB
TypeScript
90 lines
4.6 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react';
|
||
import { AppConfig, LayoutSplits, GeneratedPart } from './types';
|
||
import { calculateParts } from './services/geometryGenerator';
|
||
import { ConfigStep } from './components/ConfigStep';
|
||
import { LayoutStep } from './components/LayoutStep';
|
||
import { PreviewStep } from './components/PreviewStep';
|
||
import { parseShareUrl } from './utils/share';
|
||
import { ChevronRight, ChevronLeft, Box } from 'lucide-react';
|
||
|
||
const App = () => {
|
||
const [step, setStep] = useState(1);
|
||
|
||
const [config, setConfig] = useState<AppConfig>({
|
||
drawer: { width: 300, depth: 400, height: 80 },
|
||
wallThickness: 1.2,
|
||
printerTolerance: 0.5,
|
||
cornerRadius: 4,
|
||
});
|
||
|
||
// ВАЖНО: Инициализируем partitions
|
||
const [splits, setSplits] = useState<LayoutSplits>({
|
||
x: [],
|
||
y: [],
|
||
partitions: {}
|
||
});
|
||
|
||
useEffect(() => {
|
||
const sharedData = parseShareUrl();
|
||
if (sharedData) {
|
||
setConfig(sharedData.config);
|
||
setSplits({
|
||
x: sharedData.splits.x || [],
|
||
y: sharedData.splits.y || [],
|
||
partitions: sharedData.splits.partitions || {}
|
||
});
|
||
setStep(3);
|
||
window.history.replaceState({}, '', window.location.pathname);
|
||
}
|
||
}, []);
|
||
|
||
const parts: GeneratedPart[] = useMemo(() => {
|
||
return calculateParts(config, splits);
|
||
}, [config, splits]);
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col font-sans text-gray-100 bg-slate-950">
|
||
<header className="bg-slate-900 border-b border-slate-800 p-4 shadow-md sticky top-0 z-50">
|
||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<div className="bg-primary p-2 rounded-lg">
|
||
<Box className="text-white" size={20} />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-xl font-bold tracking-tight">PrintFit</h1>
|
||
<p className="text-xs text-gray-400">Генератор органайзеров</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4 text-sm font-medium">
|
||
{[1, 2, 3].map((num) => (
|
||
<div key={num} className={`flex items-center gap-2 ${step === num ? 'text-primary' : 'text-gray-500'}`}>
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs border ${step === num ? 'border-primary bg-primary/10' : 'border-gray-600'}`}>{num}</span>
|
||
<span className="hidden md:inline">{num === 1 ? 'Настройки' : num === 2 ? 'Макет' : 'Экспорт'}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="flex-1 max-w-7xl mx-auto w-full p-4 md:p-8">
|
||
{step === 1 && <div className="max-w-4xl mx-auto animate-fade-in"><ConfigStep config={config} onChange={setConfig} /></div>}
|
||
{step === 2 && <div className="h-[calc(100vh-200px)] min-h-[500px] animate-fade-in"><LayoutStep config={config} splits={splits} onChange={setSplits} /></div>}
|
||
{step === 3 && <div className="h-[calc(100vh-200px)] min-h-[600px] animate-fade-in"><PreviewStep parts={parts} config={config} splits={splits} /></div>}
|
||
</main>
|
||
|
||
<footer className="bg-slate-900 border-t border-slate-800 p-4 sticky bottom-0 z-50">
|
||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||
<button disabled={step === 1} onClick={() => setStep(s => Math.max(1, s - 1))} className="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold bg-slate-800 text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-700 transition-colors"><ChevronLeft size={18} /> Назад</button>
|
||
<div className="text-sm text-gray-500">{step === 2 && <span className="text-accent font-mono">Ячеек: {parts.length}</span>}</div>
|
||
{step < 3 ? (
|
||
<button onClick={() => setStep(s => Math.min(3, s + 1))} className="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold bg-primary text-white hover:bg-blue-600 shadow-lg shadow-blue-900/20 transition-all active:scale-95">Далее <ChevronRight size={18} /></button>
|
||
) : (
|
||
<button onClick={() => { setStep(1); setSplits({x: [], y: [], partitions: {}}); window.history.replaceState({}, '', window.location.pathname); }} className="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-gray-400 hover:text-white transition-colors border border-transparent hover:border-slate-700">Новый проект</button>
|
||
)}
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default App; |