init

frontend/src/components/PrintSettings.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="card">
+    <h2 class="mb-4 text-lg font-semibold text-gray-900">3. Параметры печати</h2>
+
+    <div class="space-y-5">
+      <!-- Infill -->
+      <div>
+        <div class="flex items-center justify-between mb-2">
+          <label class="text-sm font-medium text-gray-700" title="Больше заполнение — прочнее, но тяжелее и дороже">
+            Заполнение
+          </label>
+          <span class="text-sm font-semibold text-primary-600">{{ store.settings.infill_percent }}%</span>
+        </div>
+        <input
+          type="range"
+          :value="store.settings.infill_percent"
+          @input="store.settings.infill_percent = +$event.target.value"
+          min="10" max="100" step="10"
+          class="w-full accent-primary-600"
+        />
+        <div class="mt-1 flex justify-between text-[10px] text-gray-400">
+          <span>10%</span><span>50%</span><span>100%</span>
+        </div>
+      </div>
+
+      <!-- Layer height -->
+      <div>
+        <div class="flex items-center justify-between mb-2">
+          <label class="text-sm font-medium text-gray-700" title="Меньше слой — лучше качество, но дольше печать">
+            Высота слоя
+          </label>
+          <span class="text-sm font-semibold text-primary-600">{{ store.settings.layer_height_mm }} мм</span>
+        </div>
+        <input
+          type="range"
+          :value="store.settings.layer_height_mm"
+          @input="store.settings.layer_height_mm = +parseFloat($event.target.value).toFixed(2)"
+          min="0.08" max="0.4" step="0.04"
+          class="w-full accent-primary-600"
+        />
+        <div class="mt-1 flex justify-between text-[10px] text-gray-400">
+          <span>0.08</span><span>0.2</span><span>0.4</span>
+        </div>
+      </div>
+
+      <!-- Quantity -->
+      <div>
+        <label class="mb-2 block text-sm font-medium text-gray-700">Количество</label>
+        <input
+          type="number"
+          :value="store.settings.quantity"
+          @input="store.settings.quantity = Math.max(1, Math.min(500, +$event.target.value || 1))"
+          min="1" max="500"
+          class="input-field w-28"
+        />
+      </div>
+
+      <!-- Post-processing -->
+      <div>
+        <label class="mb-2.5 block text-sm font-medium text-gray-700">Постобработка</label>
+        <div class="space-y-2">
+          <label v-for="pp in postProcessingOptions" :key="pp.value" class="flex items-center gap-2.5 cursor-pointer">
+            <input
+              type="checkbox"
+              :value="pp.value"
+              :checked="store.settings.post_processing.includes(pp.value)"
+              @change="togglePP(pp.value)"
+              class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+            />
+            <span class="text-sm text-gray-700">{{ pp.label }}</span>
+            <span class="text-xs text-gray-400">{{ pp.price }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useCalculatorStore } from '../stores/calculator'
+
+const store = useCalculatorStore()
+
+const postProcessingOptions = [
+  { value: 'sanding', label: 'Шлифовка', price: '300 ₽/шт' },
+  { value: 'painting', label: 'Покраска', price: '500 ₽/шт' },
+  { value: 'threading', label: 'Нарезка резьбы', price: '200 ₽/шт' },
+  { value: 'acetone_smoothing', label: 'Ацетоновая обработка (ABS)', price: '400 ₽/шт' },
+]
+
+function togglePP(value) {
+  const idx = store.settings.post_processing.indexOf(value)
+  if (idx > -1) {
+    store.settings.post_processing.splice(idx, 1)
+  } else {
+    store.settings.post_processing.push(value)
+  }
+  store.result = null
+}
+</script>