Merge branch 'miheev-dev' into develop
This commit is contained in:
Ilia Miheev
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Generated
+20
-13
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "probody",
|
||||
"name": "SkyVue",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "probody",
|
||||
"name": "SkyVue",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -14,6 +14,7 @@
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"izitoast": "^1.4.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"vue": "^3.5.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -616,6 +617,7 @@
|
||||
"integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.1",
|
||||
"fs-extra": "^9.0.1",
|
||||
@@ -1752,6 +1754,7 @@
|
||||
"integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@inquirer/checkbox": "^3.0.1",
|
||||
"@inquirer/confirm": "^4.0.1",
|
||||
@@ -2910,6 +2913,7 @@
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2976,6 +2980,7 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -3193,6 +3198,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
@@ -4499,17 +4505,6 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "1.4.5",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
|
||||
@@ -8030,6 +8034,7 @@
|
||||
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.21.3",
|
||||
"postcss": "^8.4.43",
|
||||
@@ -8089,6 +8094,7 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
|
||||
"integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.28",
|
||||
"@vue/compiler-sfc": "3.5.28",
|
||||
@@ -8142,6 +8148,7 @@
|
||||
"integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/eslint-scope": "^3.7.7",
|
||||
"@types/estree": "^1.0.8",
|
||||
|
||||
+3
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "probody",
|
||||
"productName": "probody",
|
||||
"name": "SkyVue",
|
||||
"productName": "SkyVue",
|
||||
"version": "1.0.0",
|
||||
"description": "My Electron application description",
|
||||
"main": ".vite/build/main.js",
|
||||
@@ -35,6 +35,7 @@
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"izitoast": "^1.4.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"vue": "^3.5.28"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
@@ -34,7 +34,7 @@ def color_detection(data, print_type='str'):
|
||||
color = 'green'
|
||||
elif r > b + 20 and r > g + 20 and r > 100:
|
||||
color = 'red'
|
||||
elif r > 150 and g > 150 and g > 150:
|
||||
elif r > 150 and g > 150 and b > 150:
|
||||
color= 'white'
|
||||
else:
|
||||
color = None
|
||||
|
||||
+73
-50
@@ -1,17 +1,20 @@
|
||||
<script setup>
|
||||
import {ref, onMounted, h} from "vue";
|
||||
import izitoast from "./shared/izitoast";
|
||||
import izitoast from "@/shared/izitoast";
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
import MyDialog from "./components/MyDialog.vue";
|
||||
import MyDropMenu from "./components/MyDropMenu.vue";
|
||||
import copyToclipboard from "./shared/copyToclipboard";
|
||||
import MyDialog from "@/components/MyDialog.vue";
|
||||
import MyDropMenu from "@/components/MyDropMenu.vue";
|
||||
import copyToclipboard from "@/shared/copyToclipboard";
|
||||
import ContextMenu from "@imengyu/vue3-context-menu";
|
||||
import CustomButton from '@/components/UI/CustomButton.vue'
|
||||
import CodeView from "@/components/CodeView.vue";
|
||||
|
||||
const numbers = ref([]); // Инициализируем массив с пустыми строками
|
||||
const clickCount = ref(1); // Счетчик нажатий
|
||||
const listOfTrips = ref([]);
|
||||
const isModalVisible = ref(false);
|
||||
let finallyText = ref("");
|
||||
const isCodeViewVisible = ref(false);
|
||||
const finallyText = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
@@ -104,6 +107,9 @@ function cancel() {
|
||||
if (clickCount.value === 1) {
|
||||
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.pop();
|
||||
clickCount.value--;
|
||||
@@ -111,7 +117,7 @@ function cancel() {
|
||||
|
||||
function cleanResult() {
|
||||
clickCount.value = 1;
|
||||
listOfTrips.value.forEach(item => {
|
||||
numbers.value.forEach(item => {
|
||||
item.isPlatform = false;
|
||||
item.isQR = false;
|
||||
item.variable = [];
|
||||
@@ -125,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);
|
||||
@@ -173,8 +185,10 @@ function createPlatform(item, color) {
|
||||
}
|
||||
|
||||
function deletePlatform(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isPlatform = false
|
||||
if (item.isPlatform) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isPlatform = false
|
||||
}
|
||||
}
|
||||
|
||||
function createQR(item) {
|
||||
@@ -189,8 +203,10 @@ function createQR(item) {
|
||||
}
|
||||
|
||||
function deleteQR(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isQR = true
|
||||
if (item.isQR) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isQR = false
|
||||
}
|
||||
}
|
||||
|
||||
function deletePointMap(item) {
|
||||
@@ -214,6 +230,7 @@ function deletePointMap(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
}
|
||||
}
|
||||
|
||||
function createIcon(src) {
|
||||
return h('img', {
|
||||
src: src,
|
||||
@@ -223,6 +240,7 @@ function createIcon(src) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onContextMenu(e, item) {
|
||||
ContextMenu.showContextMenu({
|
||||
theme: 'mac dark',
|
||||
@@ -283,63 +301,71 @@ function onContextMenu(e, item) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wraper">
|
||||
<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})`}">
|
||||
<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})` }">
|
||||
{{ numbers[index].variable.join(", ") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button @click="saveResult">Сохранить</button>
|
||||
<button @click="cleanResult">Очистить</button>
|
||||
<button @click="cancel">Отменить</button>
|
||||
<custom-button @click="saveResult">Сохранить</custom-button>
|
||||
<custom-button @click="cleanResult">Очистить</custom-button>
|
||||
<custom-button @click="cancel">Отменить</custom-button>
|
||||
</div>
|
||||
<MyDropMenu/>
|
||||
<MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
|
||||
<template #header>
|
||||
<strong v-if="listOfTrips.length">Код готов!</strong>
|
||||
<strong v-else>Код не готов!</strong>
|
||||
</template>
|
||||
<main>
|
||||
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
|
||||
<p v-else>Выстройте маршрут перед сохранением кода.</p>
|
||||
</main>
|
||||
<template #footer>
|
||||
<div v-if="listOfTrips.length">
|
||||
<button @click="isCodeViewVisible = true">Предпросмотр</button>
|
||||
<button @click="handleDownloadBtn">Скачать код</button>
|
||||
<button @click="copyAndToast(finallyText)">Скопировать код</button>
|
||||
</div>
|
||||
</template>
|
||||
</MyDialog>
|
||||
</div>
|
||||
|
||||
|
||||
<MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
|
||||
:is-success=Boolean(listOfTrips.length)>
|
||||
<template #header>
|
||||
<strong v-if="listOfTrips.length">Код готов!</strong>
|
||||
<strong v-else>Код не готов!</strong>
|
||||
</template>
|
||||
<template #body>
|
||||
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
|
||||
<p v-else>Выстройте маршрут перед сохранением кода.</p>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="listOfTrips.length">
|
||||
<button @click="handleDownloadBtn">Скачать код</button>
|
||||
<button @click="copyAndToast(finallyText)">Скопировать код</button>
|
||||
<button @click="isModalVisible = false">ОК</button>
|
||||
</div>
|
||||
</template>
|
||||
</MyDialog>
|
||||
<CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
background-image: radial-gradient(#383838e2, #222222);
|
||||
background-image: radial-gradient(#23aae3e2, #222222);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--side: 70px;
|
||||
--side: 75px;
|
||||
}
|
||||
|
||||
.wraper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
//padding: 20% 0;
|
||||
//TODO: рассмотреть вариант
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
padding: 3px;
|
||||
grid-template-columns: repeat(10, var(--side));
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -356,11 +382,11 @@ html {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
text-shadow: -1px -1px 0 black,
|
||||
1px -1px 0 black,
|
||||
-1px 1px 0 black,
|
||||
1px 1px 0 black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.square:hover {
|
||||
@@ -380,19 +406,16 @@ html {
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 10px;
|
||||
margin: 3px 0 0 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
border: 2px solid rgb(251, 251, 251);
|
||||
padding: 15px 30px;
|
||||
font-size: 15px;
|
||||
background-color: #383838;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
transition: 0.3s;
|
||||
padding: 20px 35px;
|
||||
/* background-color: red; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
highlighted.value = Prism.highlight(escaped, Prism.languages['python'], 'python')
|
||||
}
|
||||
|
||||
onMounted(highlight)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
pre {
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
+67
-14
@@ -1,21 +1,22 @@
|
||||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<strong>Заголовок по умолчанию</strong>
|
||||
</slot>
|
||||
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
<button class="modal-btn-close" @click.stop="onClose"
|
||||
aria-label="Закрыть модальное окно">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<section class="modal-body">
|
||||
<slot name="body">Тело по умолчанию</slot>
|
||||
<slot>Тело по умолчанию</slot>
|
||||
</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">
|
||||
<button @click="closeModal">Закрыть</button>
|
||||
<button @click.stop="onClose">Закрыть</button>
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -24,20 +25,42 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(['close'])
|
||||
const props = defineProps({
|
||||
import {defineEmits} from 'vue'
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
|
||||
const emit = defineEmits({
|
||||
close: null,
|
||||
'update:show': false,
|
||||
})
|
||||
defineProps({
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
default: true,
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
function closeModal() {
|
||||
emit('close');
|
||||
function onClose() {
|
||||
emit('update:show')
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (event.code === "Escape") {
|
||||
emit('update:show')
|
||||
}
|
||||
}
|
||||
useEventListener("keydown", handleKeydown);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--successColor: #4ee882
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -48,6 +71,7 @@ function closeModal() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@@ -73,7 +97,7 @@ function closeModal() {
|
||||
}
|
||||
|
||||
.modal-header-success {
|
||||
color: #4AAE9B;
|
||||
color: var(--successColor);
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
@@ -94,11 +118,13 @@ function closeModal() {
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid white;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
color: black;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.modal-footer-success button {
|
||||
background-color: #4AAE9B;
|
||||
background-color: var(--successColor);
|
||||
border: none;
|
||||
margin: 3px;
|
||||
}
|
||||
@@ -123,4 +149,31 @@ function closeModal() {
|
||||
color: red;
|
||||
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>
|
||||
+141
-79
@@ -1,120 +1,182 @@
|
||||
<template>
|
||||
<div class="navigation-wrapper">
|
||||
<!-- Кнопка Бургер -->
|
||||
<button
|
||||
class="burger-btn"
|
||||
@click="toggleMenu"
|
||||
:class="{ 'is-active': isOpen }"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
<div class="navigation-wrapper">
|
||||
<!-- Кнопка Бургер -->
|
||||
<button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
|
||||
<!-- Затемнение заднего фона (Overlay) -->
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="overlay" @click="closeMenu"></div>
|
||||
</transition>
|
||||
<!-- Затемнение заднего фона (Overlay) -->
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="overlay" @click="closeMenu"></div>
|
||||
</transition>
|
||||
|
||||
<!-- Выпадающая панель -->
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
<!-- Выпадающая панель -->
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
|
||||
<nav class="menu-content">
|
||||
<a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
|
||||
<slot>
|
||||
<p class="placeholder">Здесь будут ваши ссылки...</p>
|
||||
</slot>
|
||||
</nav>
|
||||
</aside>
|
||||
</transition>
|
||||
</div>
|
||||
<nav class="menu-content">
|
||||
<custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
|
||||
</nav>
|
||||
</aside>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<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 isModalVisible = ref(false);
|
||||
const infoCard = ref({})
|
||||
|
||||
function handleOkBtn() {
|
||||
isModalVisible.value = false
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.burger-btn {
|
||||
position: fixed; /* Она всегда на одном месте при скролле */
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.508);
|
||||
border: 1px solid #383838;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.508);
|
||||
border: 1px solid #383838;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
h1{
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #383838; /* Ярко-красный цвет для теста */
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #383838;
|
||||
/* Ярко-красный цвет для теста */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Анимация бургера в крестик */
|
||||
.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.is-active .line:nth-child(2) { opacity: 0; }
|
||||
.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
.is-active .line:nth-child(1) {
|
||||
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 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
padding: 0 20px 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(#23aae3e2, #222222);
|
||||
color: white;
|
||||
z-index: 2;
|
||||
padding: 0 20px 20px;
|
||||
overflow-y: scroll;
|
||||
overflow: auto;
|
||||
border-right: white 2px solid;
|
||||
}
|
||||
|
||||
/* Затемнение фона */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
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-from, .slide-leave-to { transform: translateX(-100%); }
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: transform 0.39s ease;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #00e44c;
|
||||
/* цвет текста */
|
||||
font-style: italic;
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.39s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
@@ -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'
|
||||
},
|
||||
]
|
||||
@@ -15,10 +15,12 @@ const createWindow = () => {
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: width,
|
||||
height: height,
|
||||
icon: './public/images/logo.jpg',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
});
|
||||
mainWindow.menuBarVisible = false;
|
||||
|
||||
// and load the index.html of the app.
|
||||
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
|
||||
|
||||
@@ -29,5 +29,9 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
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'
|
||||
createApp(App).use(ContextMenu).mount('#app');
|
||||
|
||||
Reference in New Issue
Block a user