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

Merge branch 'miheev-dev' into develop

Browse Source
This commit is contained in:
Ilia Miheev
2026-03-27 14:53:22 +03:00
parent 8d030974c8 2cd9606949
commit a044149c65
15 changed files with 549 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Probody</title> <title>SkyVue</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css">
</head> </head>
<body> <body>
package-lock.json
Generated
+20 -13
View File
@@ -1,11 +1,11 @@
{ {
"name": "probody", "name": "SkyVue",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "probody", "name": "SkyVue",
"version": "1.0.0", "version": "1.0.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@@ -14,6 +14,7 @@
"copy-to-clipboard": "^3.3.3", "copy-to-clipboard": "^3.3.3",
"electron-squirrel-startup": "^1.0.1", "electron-squirrel-startup": "^1.0.1",
"izitoast": "^1.4.0", "izitoast": "^1.4.0",
"prismjs": "^1.30.0",
"vue": "^3.5.28" "vue": "^3.5.28"
}, },
"devDependencies": { "devDependencies": {
@@ -616,6 +617,7 @@
"integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==", "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"chalk": "^4.1.1", "chalk": "^4.1.1",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
@@ -1752,6 +1754,7 @@
"integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==", "integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@inquirer/checkbox": "^3.0.1", "@inquirer/checkbox": "^3.0.1",
"@inquirer/confirm": "^4.0.1", "@inquirer/confirm": "^4.0.1",
@@ -2910,6 +2913,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -2976,6 +2980,7 @@
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1", "fast-uri": "^3.0.1",
@@ -3193,6 +3198,7 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"baseline-browser-mapping": "^2.9.0", "baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759", "caniuse-lite": "^1.0.30001759",
@@ -4499,17 +4505,6 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/encoding": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"iconv-lite": "^0.6.2"
}
},
"node_modules/end-of-stream": { "node_modules/end-of-stream": {
"version": "1.4.5", "version": "1.4.5",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -6832,6 +6827,15 @@
"url": "https://github.com/prettier/prettier?sponsor=1" "url": "https://github.com/prettier/prettier?sponsor=1"
} }
}, },
"node_modules/prismjs": {
"version": "1.30.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/proc-log": { "node_modules/proc-log": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
@@ -8030,6 +8034,7 @@
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==", "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"esbuild": "^0.21.3", "esbuild": "^0.21.3",
"postcss": "^8.4.43", "postcss": "^8.4.43",
@@ -8089,6 +8094,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
"integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==", "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.5.28", "@vue/compiler-dom": "3.5.28",
"@vue/compiler-sfc": "3.5.28", "@vue/compiler-sfc": "3.5.28",
@@ -8142,6 +8148,7 @@
"integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==", "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/eslint-scope": "^3.7.7", "@types/eslint-scope": "^3.7.7",
"@types/estree": "^1.0.8", "@types/estree": "^1.0.8",
package.json
+3 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "probody", "name": "SkyVue",
"productName": "probody", "productName": "SkyVue",
"version": "1.0.0", "version": "1.0.0",
"description": "My Electron application description", "description": "My Electron application description",
"main": ".vite/build/main.js", "main": ".vite/build/main.js",
@@ -35,6 +35,7 @@
"copy-to-clipboard": "^3.3.3", "copy-to-clipboard": "^3.3.3",
"electron-squirrel-startup": "^1.0.1", "electron-squirrel-startup": "^1.0.1",
"izitoast": "^1.4.0", "izitoast": "^1.4.0",
"prismjs": "^1.30.0",
"vue": "^3.5.28" "vue": "^3.5.28"
} }
} }
public/images/logo.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

public/shablons/color.txt
+1 -1
View File
@@ -34,7 +34,7 @@ def color_detection(data, print_type='str'):
color = 'green' color = 'green'
elif r > b + 20 and r > g + 20 and r > 100: elif r > b + 20 and r > g + 20 and r > 100:
color = 'red' color = 'red'
elif r > 150 and g > 150 and g > 150: elif r > 150 and g > 150 and b > 150:
color= 'white' color= 'white'
else: else:
color = None color = None
src/App.vue
+58 -35
View File
@@ -1,17 +1,20 @@
<script setup> <script setup>
import {ref, onMounted, h} from "vue"; import {ref, onMounted, h} from "vue";
import izitoast from "./shared/izitoast"; import izitoast from "@/shared/izitoast";
import {useEventListener} from "@vueuse/core"; import {useEventListener} from "@vueuse/core";
import MyDialog from "./components/MyDialog.vue"; import MyDialog from "@/components/MyDialog.vue";
import MyDropMenu from "./components/MyDropMenu.vue"; import MyDropMenu from "@/components/MyDropMenu.vue";
import copyToclipboard from "./shared/copyToclipboard"; import copyToclipboard from "@/shared/copyToclipboard";
import ContextMenu from "@imengyu/vue3-context-menu"; import ContextMenu from "@imengyu/vue3-context-menu";
import CustomButton from '@/components/UI/CustomButton.vue'
import CodeView from "@/components/CodeView.vue";
const numbers = ref([]); // Инициализируем массив с пустыми строками const numbers = ref([]); // Инициализируем массив с пустыми строками
const clickCount = ref(1); // Счетчик нажатий const clickCount = ref(1); // Счетчик нажатий
const listOfTrips = ref([]); const listOfTrips = ref([]);
const isModalVisible = ref(false); const isModalVisible = ref(false);
let finallyText = ref(""); const isCodeViewVisible = ref(false);
const finallyText = ref("");
onMounted(() => { onMounted(() => {
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
@@ -104,6 +107,9 @@ function cancel() {
if (clickCount.value === 1) { if (clickCount.value === 1) {
return; return;
} }
if (listOfTrips.value.at(-1).variable.length === 1) {
listOfTrips.value.at(-1).BgImg = 'images/ArUco-marker.jpg'
}
listOfTrips.value.at(-1).variable.pop(); listOfTrips.value.at(-1).variable.pop();
listOfTrips.value.pop(); listOfTrips.value.pop();
clickCount.value--; clickCount.value--;
@@ -111,7 +117,7 @@ function cancel() {
function cleanResult() { function cleanResult() {
clickCount.value = 1; clickCount.value = 1;
listOfTrips.value.forEach(item => { numbers.value.forEach(item => {
item.isPlatform = false; item.isPlatform = false;
item.isQR = false; item.isQR = false;
item.variable = []; item.variable = [];
@@ -125,6 +131,12 @@ const handleKeydown = (event) => {
if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) { if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
event.preventDefault(); event.preventDefault();
cancel(); cancel();
} else if (event.ctrlKey && event.code === "KeyS") {
event.preventDefault();
saveResult();
} else if (event.code === "Delete") {
event.preventDefault();
cleanResult();
} }
}; };
useEventListener("keydown", handleKeydown); useEventListener("keydown", handleKeydown);
@@ -173,9 +185,11 @@ function createPlatform(item, color) {
} }
function deletePlatform(item) { function deletePlatform(item) {
if (item.isPlatform) {
item.BgImg = 'images/ArUco-marker.jpg' item.BgImg = 'images/ArUco-marker.jpg'
item.isPlatform = false item.isPlatform = false
} }
}
function createQR(item) { function createQR(item) {
if (!item.variable.length) { if (!item.variable.length) {
@@ -189,8 +203,10 @@ function createQR(item) {
} }
function deleteQR(item) { function deleteQR(item) {
if (item.isQR) {
item.BgImg = 'images/ArUco-marker.jpg' item.BgImg = 'images/ArUco-marker.jpg'
item.isQR = true item.isQR = false
}
} }
function deletePointMap(item) { function deletePointMap(item) {
@@ -214,6 +230,7 @@ function deletePointMap(item) {
item.BgImg = 'images/ArUco-marker.jpg' item.BgImg = 'images/ArUco-marker.jpg'
} }
} }
function createIcon(src) { function createIcon(src) {
return h('img', { return h('img', {
src: src, src: src,
@@ -223,6 +240,7 @@ function createIcon(src) {
} }
}) })
} }
function onContextMenu(e, item) { function onContextMenu(e, item) {
ContextMenu.showContextMenu({ ContextMenu.showContextMenu({
theme: 'mac dark', theme: 'mac dark',
@@ -283,63 +301,71 @@ function onContextMenu(e, item) {
</script> </script>
<template> <template>
<div class="wraper"> <div v-if="!isCodeViewVisible" class="wraper">
<div class="grid"> <div class="grid">
<div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" @click="setNumber(item)"
@click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)" @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
:style="{backgroundImage: `url(${item.BgImg})`}">
{{ numbers[index].variable.join(", ") }} {{ numbers[index].variable.join(", ") }}
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button @click="saveResult">Сохранить</button> <custom-button @click="saveResult">Сохранить</custom-button>
<button @click="cleanResult">Очистить</button> <custom-button @click="cleanResult">Очистить</custom-button>
<button @click="cancel">Отменить</button> <custom-button @click="cancel">Отменить</custom-button>
</div> </div>
<MyDropMenu/> <MyDropMenu/>
</div> <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
<MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
:is-success=Boolean(listOfTrips.length)>
<template #header> <template #header>
<strong v-if="listOfTrips.length">Код готов!</strong> <strong v-if="listOfTrips.length">Код готов!</strong>
<strong v-else>Код не готов!</strong> <strong v-else>Код не готов!</strong>
</template> </template>
<template #body> <main>
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p> <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
<p v-else>Выстройте маршрут перед сохранением кода.</p> <p v-else>Выстройте маршрут перед сохранением кода.</p>
</template> </main>
<template #footer> <template #footer>
<div v-if="listOfTrips.length"> <div v-if="listOfTrips.length">
<button @click="isCodeViewVisible = true">Предпросмотр</button>
<button @click="handleDownloadBtn">Скачать код</button> <button @click="handleDownloadBtn">Скачать код</button>
<button @click="copyAndToast(finallyText)">Скопировать код</button> <button @click="copyAndToast(finallyText)">Скопировать код</button>
<button @click="isModalVisible = false">ОК</button>
</div> </div>
</template> </template>
</MyDialog> </MyDialog>
</div>
<CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
</template> </template>
<style> <style>
* {
font-family: 'Courier New', Courier, monospace;
}
html { html {
background-image: radial-gradient(#383838e2, #222222); background-image: radial-gradient(#23aae3e2, #222222);
font-size: 18px;
}
body {
margin: 0;
} }
:root { :root {
--side: 70px; --side: 75px;
} }
.wraper { .wraper {
display: flex; display: flex;
justify-content: center; justify-content: center;
//padding: 20% 0;
//TODO: рассмотреть вариант
} }
.grid { .grid {
display: grid; display: grid;
padding: 3px; padding: 3px;
grid-template-columns: repeat(10, var(--side)); grid-template-columns: repeat(10, var(--side));
gap: 10px; gap: 5px;
user-select: none; user-select: none;
} }
@@ -356,11 +382,11 @@ html {
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
color: white; color: white;
font-size: 18px;
text-shadow: -1px -1px 0 black, 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;
} }
.square:hover { .square:hover {
@@ -380,19 +406,16 @@ html {
} }
.actions { .actions {
margin-left: 10px; margin: 3px 0 0 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px;
width: 150px;
} }
.actions button { .actions button {
border: 2px solid rgb(251, 251, 251); padding: 20px 35px;
padding: 15px 30px; /* background-color: red; */
font-size: 15px;
background-color: #383838;
color: white;
cursor: pointer;
margin: 5px;
transition: 0.3s;
} }
</style> </style>
src/components/CodeBlock.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<pre><code class="language-python" v-html="highlighted"></code></pre>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import Prism from 'prismjs'
import 'prismjs/components/prism-python'
const props = defineProps({
code: {type: String, required: true},
})
const highlighted = ref('')
function highlight() {
// безопасно экранируем HTML и подсвечиваем через Prism
const escaped = props.code
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
highlighted.value = Prism.highlight(escaped, Prism.languages['python'], 'python')
}
onMounted(highlight)
</script>
<style scoped>
pre {
padding-left: 10px;
}
</style>
src/components/CodeView.vue
+42
View File
@@ -0,0 +1,42 @@
<script setup>
import CustomButton from '@/components/UI/CustomButton.vue'
import CodeBlock from "./CodeBlock.vue";
import MovementButtons from "./MovementButtons.vue";
const props = defineProps({
code: {
required: true,
type: String
},
show: {
type: Boolean,
default: false
}
})
</script>
<template>
<div class="code-view" v-if="show">
<CustomButton
@click.stop="$emit('update:show', false)">
Вернуться к сохранению сгенерированного кода
</CustomButton>
<CodeBlock :code="code" />
<CustomButton
@click.stop="$emit('update:show', false)">
Вернуться к сохранению сгенерированного кода
</CustomButton>
<MovementButtons/>
</div>
</template>
<style scoped>
.code-view {
background-color: #222222;
overflow: auto;
color: #eeeeee;
width: 100%;
height: 100%;
z-index: 999;
}
</style>
src/components/MovementButtons.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div class="movement-buttons">
<button @click="scrollToTop" class="up">↑</button>
<button @click="scrollToBottom" class="down">↓</button>
</div>
</template>
<script setup>
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth' // Плавная прокрутка
});
}
function scrollToBottom() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
}
</script>
<style scoped>
:root {
--btnHeight: 50px;
}
.movement-buttons {
display: flex;
gap: 2px;
flex-direction: column;
position: fixed;
right: 15px;
bottom: calc(50% - 50px);
}
.movement-buttons > button {
width: auto;
font-size: 15px;
border: 2px solid #d0d0d0;
color: white;
background-color: #383838;
height: 50px;
}
@media (max-width: 900px) {
.movement-buttons > button {
width: 30px;
font-size: 15px;
}
}
.up {
border-radius: 10px 10px 0 0;
}
.down {
border-radius: 0 0 10px 10px;
}
</style>
src/components/MyDialog.vue
+65 -12
View File
@@ -1,21 +1,22 @@
<template> <template>
<transition name="modal-fade"> <transition name="modal-fade">
<div class="modal-backdrop" @click="closeModal"> <div class="modal-backdrop" v-if="show" @click.stop="onClose">
<div class="modal" @click.stop> <div class="modal" @click.stop>
<header :class="['modal-header', isSuccess ? 'modal-header-success' : 'modal-header-error']"> <header :class="['modal-header', isSuccess ? 'modal-header-success' : 'modal-header-error']">
<slot name="header"> <slot name="header">
<strong>Заголовок по умолчанию</strong> <strong>Заголовок по умолчанию</strong>
</slot> </slot>
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно"> <button class="modal-btn-close" @click.stop="onClose"
aria-label="Закрыть модальное окно">
× ×
</button> </button>
</header> </header>
<section class="modal-body"> <section class="modal-body">
<slot name="body">Тело по умолчанию</slot> <slot>Тело по умолчанию</slot>
</section> </section>
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success' : 'modal-footer-error']"> <footer :class="['modal-footer', isSuccess ? 'modal-footer-success' : 'modal-footer-error']">
<slot name="footer"> <slot name="footer">
<button @click="closeModal">Закрыть</button> <button @click.stop="onClose">Закрыть</button>
</slot> </slot>
</footer> </footer>
</div> </div>
@@ -24,20 +25,42 @@
</template> </template>
<script setup> <script setup>
const emit = defineEmits(['close']) import {defineEmits} from 'vue'
const props = defineProps({ import {useEventListener} from "@vueuse/core";
const emit = defineEmits({
close: null,
'update:show': false,
})
defineProps({
isSuccess: { isSuccess: {
type: Boolean, type: Boolean,
required: true default: true,
},
show: {
type: Boolean,
default: false
} }
}) })
function closeModal() { function onClose() {
emit('close'); emit('update:show')
emit('close')
} }
const handleKeydown = (event) => {
if (event.code === "Escape") {
emit('update:show')
}
}
useEventListener("keydown", handleKeydown);
</script> </script>
<style> <style>
:root {
--successColor: #4ee882
}
.modal-backdrop { .modal-backdrop {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -48,6 +71,7 @@ function closeModal() {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 998;
} }
.modal { .modal {
@@ -73,7 +97,7 @@ function closeModal() {
} }
.modal-header-success { .modal-header-success {
color: #4AAE9B; color: var(--successColor);
} }
.modal-header-error { .modal-header-error {
@@ -94,11 +118,13 @@ function closeModal() {
justify-content: flex-end; justify-content: flex-end;
border-top: 1px solid white; border-top: 1px solid white;
padding: 5px; padding: 5px;
color: white; color: black;
font-size: 15px;
border-radius: 5px;
} }
.modal-footer-success button { .modal-footer-success button {
background-color: #4AAE9B; background-color: var(--successColor);
border: none; border: none;
margin: 3px; margin: 3px;
} }
@@ -123,4 +149,31 @@ function closeModal() {
color: red; color: red;
background: transparent; background: transparent;
} }
/* Начало появления: ниже и прозрачный */
.modal-fade-enter-from {
opacity: 0;
}
/* Конец появления: на месте и видим */
.modal-fade-enter-to {
opacity: 1;
}
/* Начало исчезания: на месте и видим */
.modal-fade-leave-from {
opacity: 1;
}
/* Конец исчезания: выше и прозрачный */
.modal-fade-leave-to {
opacity: 0;
}
/* Общие настройки анимации (скорость + плавность) */
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: transform 0.7s cubic-bezier(.22, .9, .31, 1), opacity 0.7s ease;
will-change: transform, opacity;
}
</style> </style>
src/components/MyDropMenu.vue
+91 -29
View File
@@ -1,12 +1,7 @@
<template> <template>
<div class="navigation-wrapper"> <div class="navigation-wrapper">
<!-- Кнопка Бургер --> <!-- Кнопка Бургер -->
<button <button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
class="burger-btn"
@click="toggleMenu"
:class="{ 'is-active': isOpen }"
aria-label="Menu"
>
<span class="line"></span> <span class="line"></span>
<span class="line"></span> <span class="line"></span>
<span class="line"></span> <span class="line"></span>
@@ -25,20 +20,43 @@
</div> </div>
<nav class="menu-content"> <nav class="menu-content">
<a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a> <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
<slot>
<p class="placeholder">Здесь будут ваши ссылки...</p>
</slot>
</nav> </nav>
</aside> </aside>
</transition> </transition>
<MyDialog isSuccess v-model:show="isModalVisible" @close="handleOkBtn">
<template #header>
<strong>{{ infoCard.title }}</strong>
</template>
<main>
<p>{{ infoCard.body }}</p>
</main>
<template #footer>
<div class="navigation-wrapper__footer">
<custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
<custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация
</custom-button>
<custom-button @click="handleOkBtn">ОК</custom-button>
</div>
</template>
</MyDialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue'; 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 isOpen = ref(false);
const isModalVisible = ref(false);
const infoCard = ref({})
function handleOkBtn() {
isModalVisible.value = false
isOpen.value = true
}
const toggleMenu = () => { const toggleMenu = () => {
isOpen.value = !isOpen.value; isOpen.value = !isOpen.value;
@@ -48,16 +66,22 @@ const closeMenu = () => {
isOpen.value = false; isOpen.value = false;
}; };
function openInfoCard(obj) {
isModalVisible.value = true
isOpen.value = false
infoCard.value = obj
}
// Экспортируем методы, если захотим управлять меню извне // Экспортируем методы, если захотим управлять меню извне
defineExpose({open: () => (isOpen.value = true), close: closeMenu}); defineExpose({open: () => (isOpen.value = true), close: closeMenu});
</script> </script>
<style scoped> <style scoped>
.burger-btn { .burger-btn {
position: fixed; /* Она всегда на одном месте при скролле */ position: fixed;
top: 20px; top: 20px;
left: 20px; left: 20px;
z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */ z-index: 3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@@ -68,31 +92,52 @@ defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.menu-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.line { .line {
width: 100%; width: 100%;
height: 4px; height: 4px;
background-color: #383838; /* Ярко-красный цвет для теста */ background-color: #383838;
/* Ярко-красный цвет для теста */
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* Анимация бургера в крестик */ /* Анимация бургера в крестик */
.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .is-active .line:nth-child(1) {
.is-active .line:nth-child(2) { opacity: 0; } transform: translateY(6px) rotate(45deg);
.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } }
.is-active .line:nth-child(2) {
opacity: 0;
}
.is-active .line:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Боковая панель */ /* Боковая панель */
.side-panel { .side-panel {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 300px; width: 240px;
height: 100vh; height: 100%;
background: white; background-image: radial-gradient(#23aae3e2, #222222);
z-index: 1000; color: white;
z-index: 2;
padding: 0 20px 20px; padding: 0 20px 20px;
overflow-y: scroll;
overflow: auto;
border-right: white 2px solid;
} }
/* Затемнение фона */ /* Затемнение фона */
@@ -102,19 +147,36 @@ h1{
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 999; z-index: 2;
background-color: #333333;
opacity: 90%;
display: flex;
}
.navigation-wrapper__footer {
display: flex;
gap: 10px;
width: 100%;
} }
/* Анимации появления */ /* Анимации появления */
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; } .slide-enter-active,
.slide-enter-from, .slide-leave-to { transform: translateX(-100%); } .slide-leave-active {
transition: transform 0.39s ease;
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; } .slide-enter-from,
.fade-enter-from, .fade-leave-to { opacity: 0; } .slide-leave-to {
transform: translateX(-100%);
}
.placeholder { .fade-enter-active,
color: #00e44c; .fade-leave-active {
/* цвет текста */ transition: opacity 0.39s ease;
font-style: italic; }
.fade-enter-from,
.fade-leave-to {
opacity: 0;
} }
</style> </style>
src/components/UI/CustomButton.vue
+43
View File
@@ -0,0 +1,43 @@
<script setup>
const props = defineProps({
isSuccess: {
type: Boolean,
required: false
},
to: {
type: String,
default: null
}
})
</script>
<template>
<a v-if="to" :href="props.to" target="_blank" class="btn">
<slot />
</a>
<button v-else class="btn">
<slot />
</button>
</template>
<style scoped>
.btn {
border: 2px solid white;
cursor: pointer;
transition: 0.3s;
padding: 5px;
background-color: #383838;
color: white;
width: 100%;
font-size: 17px;
text-decoration: none;
box-sizing: border-box;
text-align: center;
font-family: 'Courier New', Courier, monospace;
margin: 0;
}
.success {
background-color: var(--successColor);
}
</style>
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'
},
]
src/main.js
+2
View File
@@ -15,10 +15,12 @@ const createWindow = () => {
const mainWindow = new BrowserWindow({ const mainWindow = new BrowserWindow({
width: width, width: width,
height: height, height: height,
icon: './public/images/logo.jpg',
webPreferences: { webPreferences: {
preload: path.join(__dirname, 'preload.js'), preload: path.join(__dirname, 'preload.js'),
}, },
}); });
mainWindow.menuBarVisible = false;
// and load the index.html of the app. // and load the index.html of the app.
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) { if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
src/renderer.js
+4
View File
@@ -29,5 +29,9 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css' import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
import ContextMenu from '@imengyu/vue3-context-menu' import ContextMenu from '@imengyu/vue3-context-menu'
createApp(App).use(ContextMenu).mount('#app'); createApp(App).use(ContextMenu).mount('#app');