admin/probody
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Небольшие функции и правки стилей

Browse Source
This commit is contained in:
Ilia Miheev
2026-03-25 22:57:01 +03:00
parent 2c490c8359
commit 7818fe062f
7 changed files with 101 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+17 -12
View File
@@ -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
+6
View File
@@ -24,3 +24,9 @@ function highlight() {
onMounted(highlight)
</script>
<style scoped>
pre {
padding-left: 10px;
}
</style>
src/components/CodeView.vue
-1
View File
@@ -12,7 +12,6 @@ const props = defineProps({
default: false
}
})
console.log(props.code)
</script>
<template>
src/components/MovementButtons.vue
+3 -3
View File
@@ -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
+16 -4
View File
@@ -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
+2 -58
View File
@@ -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
+56
View File
@@ -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'
},
]