feat(components): figure page

src/pages/figure.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const axes = ['x', 'y', 'z'];
+const projections = [
+  'Без проекции',
+  'Изометрическая',
+  'Диметрическая',
+  'Триметрическая',
+  'Одноточечная перспективная',
+  'Двухточечная перспективная',
+];
+
+const activeProjection = ref<number>(0);
+</script>
+
+<template>
+  <div class="container">
+    <Accordion title="Перемещение">
+      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
+    </Accordion>
+    <Accordion title="Вращение">
+      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
+    </Accordion>
+    <Accordion title="Масштабирование">
+      <FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1"
+                 :defaultValue="1"/>
+    </Accordion>
+    <Accordion title="Проекции">
+      <GridContainer>
+        <GridElement v-for="(projection, i) in projections" :is-active="activeProjection === i" :key="projection"
+                     :title="projection" @click="activeProjection = i"/>
+      </GridContainer>
+    </Accordion>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+}
+</style>