V3

2025-12-27 18:04:01 +03:00
parent 3d1ab34079
commit 50cdd3a945
8 changed files with 4 additions and 1 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,124 @@
+import React, { useState, useMemo } 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 { ChevronRight, ChevronLeft, Box } from 'lucide-react';
+
+const App = () => {
+  const [step, setStep] = useState(1);
+  
+  // State
+  const [config, setConfig] = useState<AppConfig>({
+    drawer: { width: 300, depth: 400, height: 80 },
+    wallThickness: 1.2,
+    printerTolerance: 0.5, 
+  });
+
+  const [splits, setSplits] = useState<LayoutSplits>({
+    x: [],
+    y: []
+  });
+
+  // Derived State: Parts (Мгновенный пересчет без API)
+  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 */}
+      <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>
+
+           {/* Progress Stepper */}
+           <div className="flex items-center gap-4 text-sm font-medium">
+              {[1, 2, 3].map((num) => (
+                <React.Fragment key={num}>
+                    <div 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>
+                    {num < 3 && <div className="w-8 h-[1px] bg-slate-700" />}
+                </React.Fragment>
+              ))}
+           </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <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} />
+            </div>
+        )}
+      </main>
+
+      {/* Footer Navigation */}
+      <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: []});
+                }} 
+                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;