src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onMounted, h } from "vue";
+import {ref, onMounted, h} from "vue";
 import izitoast from "@/shared/izitoast";
-import { useEventListener } from "@vueuse/core";
+import {useEventListener} from "@vueuse/core";
 import MyDialog from "@/components/MyDialog.vue";
 import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
@@ -131,6 +131,12 @@ const handleKeydown = (event) => {
     if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
         event.preventDefault();
         cancel();
+    } else if (event.ctrlKey && event.code === "KeyS") {
+        event.preventDefault();
+        saveResult();
+    } else if (event.code === "Delete") {
+        event.preventDefault();
+        cleanResult();
     }
 };
 useEventListener("keydown", handleKeydown);
@@ -147,7 +153,7 @@ function copyAndToast(text) {
 function handleDownloadBtn() {
     // Создание файла
     const downloadUrl = ref('');
-    const blob = new Blob([finallyText.value], { type: 'text/plain' });
+    const blob = new Blob([finallyText.value], {type: 'text/plain'});
     downloadUrl.value = URL.createObjectURL(blob);
     // Задержка для избежания ошибок в некоторых браузерах
     setTimeout(() => {
@@ -298,7 +304,7 @@ function onContextMenu(e, item) {
     <div v-if="!isCodeViewVisible" class="wraper">
         <div class="grid">
             <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" @click="setNumber(item)"
-                @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
+                 @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -308,7 +314,7 @@ function onContextMenu(e, item) {
             <custom-button @click="cleanResult">Очистить</custom-button>
             <custom-button @click="cancel">Отменить</custom-button>
         </div>
-        <MyDropMenu />
+        <MyDropMenu/>
         <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
             <template #header>
                 <strong v-if="listOfTrips.length">Код готов!</strong>
@@ -320,16 +326,14 @@ function onContextMenu(e, item) {
             </main>
             <template #footer>
                 <div v-if="listOfTrips.length">
-                    <button @click="handleDownloadBtn">Скачать код</button>
                     <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                    <button @click="handleDownloadBtn">Скачать код</button>
                     <button @click="copyAndToast(finallyText)">Скопировать код</button>
                 </div>
             </template>
         </MyDialog>
     </div>
     <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
-
-
 </template>
 
 <style>
@@ -353,7 +357,8 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    padding-top: 10px;
+    //padding: 20% 0;
+    //TODO: рассмотреть вариант
 }
 
 .grid {
@@ -378,9 +383,9 @@ body {
 
     color: white;
     text-shadow: -1px -1px 0 black,
-        1px -1px 0 black,
+    1px -1px 0 black,
-        -1px 1px 0 black,
+    -1px 1px 0 black,
-        1px 1px 0 black;
+    1px 1px 0 black;
     box-sizing: border-box;
 }
 

src/components/CodeBlock.vue

@@ -23,4 +23,10 @@ function highlight() {
 }
 
 onMounted(highlight)
-</script>
+</script>
+
+<style scoped>
+pre {
+    padding-left: 10px;
+}
+</style>

src/components/CodeView.vue

@@ -12,7 +12,6 @@ const props = defineProps({
         default: false
     }
 })
-console.log(props.code)
 </script>
 
 <template>

src/components/MovementButtons.vue

@@ -32,16 +32,16 @@ function scrollToBottom() {
     gap: 2px;
     flex-direction: column;
     position: fixed;
-    right: 25px;
+    right: 15px;
     bottom: calc(50% - 50px);
 }
 
 .movement-buttons > button {
     width: auto;
     font-size: 15px;
-    border: 2px solid white;
+    border: 2px solid #d0d0d0;
     color: white;
-    background-color: #23aae3e2;
+    background-color: #383838;
     height: 50px;
 }
 

src/components/MyDialog.vue

@@ -7,7 +7,7 @@
                         <strong>Заголовок по умолчанию</strong>
                     </slot>
                     <button class="modal-btn-close" @click.stop="onClose"
-                        aria-label="Закрыть модальное окно">
+                            aria-label="Закрыть модальное окно">
                         ×
                     </button>
                 </header>
@@ -26,6 +26,7 @@
 
 <script setup>
 import {defineEmits} from 'vue'
+import {useEventListener} from "@vueuse/core";
 
 const emit = defineEmits({
     close: null,
@@ -46,6 +47,13 @@ function onClose() {
     emit('update:show')
     emit('close')
 }
+
+const handleKeydown = (event) => {
+    if (event.code === "Escape") {
+        emit('update:show')
+    }
+}
+useEventListener("keydown", handleKeydown);
 </script>
 
 <style>
@@ -104,14 +112,15 @@ function onClose() {
 .modal-footer {
     justify-content: flex-end;
     border-top: 1px solid white;
-
 }
 
 .modal-footer button {
     justify-content: flex-end;
     border-top: 1px solid white;
     padding: 5px;
-    color: rgb(0, 0, 0);
+    color: black;
+    font-size: 15px;
+    border-radius: 5px;
 }
 
 .modal-footer-success button {
@@ -146,16 +155,19 @@ function onClose() {
     opacity: 0;
     transform: translateY(20px);
 }
+
 /* Конец появления: на месте и видим */
 .modal-fade-enter-to {
     opacity: 1;
     transform: translateY(0);
 }
+
 /* Начало исчезания: на месте и видим */
 .modal-fade-leave-from {
     opacity: 1;
     transform: translateY(0);
 }
+
 /* Конец исчезания: выше и прозрачный */
 .modal-fade-leave-to {
     opacity: 0;
@@ -165,7 +177,7 @@ function onClose() {
 /* Общие настройки анимации (скорость + плавность) */
 .modal-fade-enter-active,
 .modal-fade-leave-active {
-    transition: transform 0.7s cubic-bezier(.22,.9,.31,1), opacity 0.7s ease;
+    transition: transform 0.7s cubic-bezier(.22, .9, .31, 1), opacity 0.7s ease;
     will-change: transform, opacity;
 }
 </style>

src/components/MyDropMenu.vue

@@ -20,7 +20,7 @@
                 </div>
 
                 <nav class="menu-content">
-                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
+                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
                 </nav>
             </aside>
         </transition>
@@ -47,6 +47,7 @@
 import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import informationForDirectory from "../data/informationForDirectory";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -71,63 +72,6 @@ function openInfoCard(obj) {
     infoCard.value = obj
 }
 
-const links = [
-    {
-        title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
-        hrefToDoc: 'https://www.ros.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
-    },
-    {
-        title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
-        hrefToDoc: 'https://opencv.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
-    },
-    {
-        title: 'navigate_wait',
-        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
-        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
-        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
-    },
-    {
-        title: 'Topic',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Нода',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
-    },
-    {
-        title: 'Издатель',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Подписчик',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Сервис',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
-    },
-    {
-        title: 'Системы координат',
-        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
-        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
-        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
-    },
-]
-
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>

src/data/informationForDirectory.js

@@ -0,0 +1,56 @@
+export default [
+    {
+        title: 'ROS',
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        hrefToDoc: 'https://www.ros.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
+    },
+    {
+        title: 'OpenCV',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        hrefToDoc: 'https://opencv.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
+    },
+    {
+        title: 'navigate_wait',
+        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
+        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
+        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
+    },
+    {
+        title: 'Topic',
+        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Нода',
+        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
+    },
+    {
+        title: 'Издатель',
+        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Подписчик',
+        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Сервис',
+        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
+    },
+    {
+        title: 'Системы координат',
+        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
+        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
+        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
+    },
+]