package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@imengyu/vue3-context-menu": "^1.5.4",
         "@vueuse/core": "^14.2.1",
         "copy-to-clipboard": "^3.3.3",
         "electron-squirrel-startup": "^1.0.1",
@@ -615,7 +616,6 @@
       "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chalk": "^4.1.1",
         "fs-extra": "^9.0.1",
@@ -1406,6 +1406,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@imengyu/vue-scroll-rect": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.8.tgz",
+      "integrity": "sha512-Mg7rgHlsGPO0tcMFjp1kB2BZ3oRrRtFN8MoE52jTgQnlc+Y0N6ttFnbIxOh2fc9j82uhdQ8zgZcXlFHUXeGnCA==",
+      "license": "MIT"
+    },
+    "node_modules/@imengyu/vue3-context-menu": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.5.4.tgz",
+      "integrity": "sha512-/a6Quyn3V320/Mi6UoH+6wSTBYrln70RovT3iyfoXQQpIHpC7ZPWObzS0BXQTRlWtyJB92XmGDT703UxSO8Tvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@imengyu/vue-scroll-rect": "^0.1.4"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-3.0.1.tgz",
@@ -1737,7 +1752,6 @@
       "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",
@@ -2896,7 +2910,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2963,7 +2976,6 @@
       "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",
@@ -3181,7 +3193,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4488,6 +4499,17 @@
       "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",
@@ -8008,7 +8030,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -8068,7 +8089,6 @@
       "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",
@@ -8122,7 +8142,6 @@
       "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",

package.json

@@ -30,6 +30,7 @@
     "vite": "^5.4.21"
   },
   "dependencies": {
+    "@imengyu/vue3-context-menu": "^1.5.4",
     "@vueuse/core": "^14.2.1",
     "copy-to-clipboard": "^3.3.3",
     "electron-squirrel-startup": "^1.0.1",

public/shablons/color.txt

@@ -1,54 +1,45 @@
-class ColorDetect():
-    def __init__(self):
-        self.color = None
+def color_detection(data, print_type='str'):
+    '''определение цвета'''
 
-    def getColor(self):
-        return self.color
+    frame = bridge.imgmsg_to_cv2(data, 'bgr8')
+    height, width = frame.shape[:2]
+    y_start = int(height * 0.33)
+    y_end = int(height * 0.67)
+    x_start = int(width * 0.31)
+    x_end = int(width * 0.69)
 
-    def detect_color_callback(self, data, print_type='str'):
-        '''определение цвета'''
+    cropped_frame = frame[y_start:y_end, x_start:x_end]
     
-        frame = bridge.imgmsg_to_cv2(data, 'bgr8')
-        height, width = frame.shape[:2]
-        y_start = int(height * 0.33)
-        y_end = int(height * 0.67)
-        x_start = int(width * 0.31)
-        x_end = int(width * 0.69)
-
-        cropped_frame = frame[y_start:y_end, x_start:x_end]
-        
-        if cropped_frame.size == 0:
-            return
+    if cropped_frame.size == 0:
+        return
     
 
-        if print_type == 'rgb':
+    if print_type == 'rgb':
 
-            mean_bgr = cv2.mean(cropped_frame)[:3]
-            mean_rgb = (int(mean_bgr[2]), int(mean_bgr[1]), int(mean_bgr[0]))  
-            self.color = str(mean_rgb)
+        mean_bgr = cv2.mean(cropped_frame)[:3]
+        mean_rgb = (int(mean_bgr[2]), int(mean_bgr[1]), int(mean_bgr[0]))  
+        color = str(mean_rgb)
     
 
-        elif print_type == 'str':
+    elif print_type == 'str':
 
-            # Получаем средние значения BGR
-            mean_bgr = cv2.mean(cropped_frame)[:3]
-            b, g, r = int(mean_bgr[0]), int(mean_bgr[1]), int(mean_bgr[2])
+        # Получаем средние значения BGR
+        mean_bgr = cv2.mean(cropped_frame)[:3]
+        b, g, r = int(mean_bgr[0]), int(mean_bgr[1]), int(mean_bgr[2])
         
         
-            if b > g and b > r and b > 100:  
-                self.color = 'blue'
-            elif g > b and g > r and g > 100:  
-                self.color = 'green'
-            elif r > b and r > g and r > 100:  
-                self.color = 'red'
-            else:
-                self.color = None
+        if b > g + 20 and b > r + 20 and b > 100 + 20:  
+            color = 'blue'
+        elif g > b + 20 and g > r + 20 and g > 100:  
+            color = 'green'
+        elif r > b + 20 and r > g + 20 and r > 100:  
+            color = 'red'
+        elif r > 150 and g > 150 and g > 150:
+            color= 'white'
+        else:
+            color = None
 
-#в MAIN для вызова функции должно быть:
-# cd = ColorDetect()
-    #color_sub = rospy.Subscriber('main_camera/image_raw', Image, 
-                              #lambda img: cd.detect_color_callback(img, print_type='rgb'), 
-                              #queue_size=1)
-    # print(cd.getColor())
-    #rospy.sleep(2)
-    #color_sub.unregister()
+<<separator>>
+    color_sub = rospy.Subscriber('main_camera/image_raw', Image, lambda img: color_detection(img, print_type='rgb'), queue_size=1)
+    rospy.sleep(2)
+    color_sub.unregister()

public/shablons/emergency_and_navigate.txt

@@ -13,10 +13,13 @@ import numpy as np
 import math
 import cv2
 
-get_telemetry = rospy.ServiceProxy('get_telemetry', srv.GetTelemetry) #сеовис для получения местонахождения
-navigate = rospy.ServiceProxy('navigate', srv.Navigate) #сервис для полета по указаным координатам
+get_telemetry = rospy.ServiceProxy('get_telemetry', srv.GetTelemetry) #сервис для получения местонахождения
+navigate = rospy.ServiceProxy('navigate', srv.Navigate) #сервис для полета по указанным координатам
 land = rospy.ServiceProxy('land', Trigger) #сервис для посадки
 
+rospy.init_node('flight')
+bridge = CvBridge()
+
 
 def navigate_wait(x=0, y=0, z=1, speed=0.5, frame_id='aruco_map', auto_arm=False, tolerance=0.2,sleep=2):
     """
@@ -85,13 +88,15 @@ def signal_handler(sig, frame):
 
 signal.signal(signal.SIGINT, signal_handler)
 
+<<qr_function>>
+<<ColorDetect>>
 
 def main():
     navigate_wait(z=1,frame_id='body',auto_arm=True) #должно быть. включает моторы и поднимает дрон на метр вверх
     #в дальнейшем не передавать переменной auto_arm значение True
 
     
-<<navigate_wait>>
+<<main>>
 
 
     land() #посадка

public/shablons/qr.txt

@@ -1,26 +1,12 @@
-class QrDetect():
-    def __init__(self):
-        self.qr_data = ''
+def qr_detection(data):
+    cv_image = bridge.imgmsg_to_cv2(data, 'bgr8')
+    barcodes = pyzbar.decode(cv_image)
     
-    def getQrData(self):
-        return self.qr_data
+    if barcodes:
+        qr_data = barcodes[0].data.decode('utf-8')
+        return qr_data
 
-    def qr_detection(self,data):
-        '''сканирование qr кода'''
-        if self.qr_data!= '':
-            return
-        cv_image = bridge.imgmsg_to_cv2(data, 'bgr8')
-        barcodes = pyzbar.decode(cv_image)
-
-        if barcodes:
-            self.qr_data = barcodes[0].data.decode('utf-8')
-
-
-#в MAIN для вызова функции необходимо следующее:
-#1. создаём и вызываем подписчика, который вызывает функцию чтения кьюаркода
-qd = QrDetect()
-qr_sub = rospy.Subscriber('main_camera/image_raw',Image, qd.qr_detection,queue_size=1)
-#2. задаём время работы подписчика (за 1 секунду примерно 20 раз вызывается функция) 
-rospy.sleep(2) 
-#3. выключаем подписчика
-qr_sub.unregister() 
+<<separator>>
+    qr_sub = rospy.Subscriber('main_camera/image_raw', Image, qr_detection, queue_size=1)
+    rospy.sleep(2)
+    qr_sub.unregister()

src/App.vue

@@ -1,16 +1,17 @@
 <script setup>
-import {ref, onMounted} from "vue";
-import izitoast from "./izitoast";
+import {ref, onMounted, h} from "vue";
+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 "./copyToclipboard";
+import copyToclipboard from "./shared/copyToclipboard";
+import ContextMenu from "@imengyu/vue3-context-menu";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([]);
 const isModalVisible = ref(false);
-let finallyText = "";
+let finallyText = ref("");
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -19,6 +20,9 @@ onMounted(() => {
             x: i % 10,
             y: 9 - Math.floor(i / 10),
             index: i,
+            isPlatform: false,
+            isQR: false,
+            BgImg: 'images/ArUco-marker.jpg'
         });
     }
 });
@@ -31,56 +35,89 @@ function setNumber(item) {
         listOfTrips.value.push(item);
         clickCount.value++;
     } else {
-        //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
-        listOfTrips.value.push(item);
-        if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
+        //если нажимаем на ранее отмеченную клетку, то выводится ошибка
+        if (item.variable.at(-1) === clickCount.value - 1) {
             izitoast.error({
                 title: "Ошибка",
                 message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
             });
             return;
         }
-        numbers.value[item.index].variable.push(clickCount.value);
+        listOfTrips.value.push(item);
+        item.variable.push(clickCount.value);
         clickCount.value++;
     }
 }
 
-function saveResult() {
-    let navigate_waites = "";
-    for (const item of listOfTrips.value) {
-    navigate_waites += `\tnavigate_wait(${item.x}, ${item.y})\n`;
+async function saveResult() {
+    finallyText.value = "";
+    const mainCode = ref("");
+    const colorDetectClass = ref("");
+    const QRDetectClass = ref("");
+    const colorDetectCode = ref("");
+    const QRDetectCode = ref("");
+    const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
+    const isUsedQR = listOfTrips.value.some(item => item.isQR);
+
+    if (isUsedPlatform) {
+        const response = await fetch("/shablons/color.txt")
+        let textOfCode = await response.text()
+        textOfCode = textOfCode.split('<<separator>>')
+        colorDetectClass.value = textOfCode[0]
+        colorDetectCode.value += `\t${textOfCode[1].trim()}\n`;
+    }
+
+    if (isUsedQR) {
+        const response = await fetch("/shablons/qr.txt")
+        let textOfCode = await response.text()
+        textOfCode = textOfCode.split('<<separator>>')
+        QRDetectClass.value = textOfCode[0]
+        QRDetectCode.value += `\t${textOfCode[1].trim()}\n`;
+    }
+
+    for (const item of listOfTrips.value) {
+        mainCode.value += `\tnavigate_wait(${item.x}, ${item.y})\n`;
+        if (item.isPlatform) {
+            mainCode.value += colorDetectCode.value + '\n'
+        }
+        if (item.isQR) {
+            mainCode.value += QRDetectCode.value + '\n'
+        }
+    }
+    const response = await fetch("/shablons/emergency_and_navigate.txt")
+    let textOfCode = await response.text()
+    finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
+    if (isUsedPlatform) {
+        finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
+    } else {
+        finallyText.value = finallyText.value.replace("<<ColorDetect>>", '');
+    }
+    if (isUsedQR) {
+        finallyText.value = finallyText.value.replace("<<qr_function>>", QRDetectClass.value);
+    } else {
+        finallyText.value = finallyText.value.replace("<<qr_function>>", '');
     }
-    fetch("/shablons/emergency_and_navigate.txt")
-        .then((response) => response.text())
-        .then((textOfCode) => {
-            finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
-        });
     isModalVisible.value = true;
 }
 
 function cancel() {
-    numbers.value[listOfTrips.value.at(-1).index].variable.pop();
-    listOfTrips.value.pop();
-
     if (clickCount.value === 1) {
         return;
-    } else {
-        clickCount.value--;
     }
+    listOfTrips.value.at(-1).variable.pop();
+    listOfTrips.value.pop();
+    clickCount.value--;
 }
 
 function cleanResult() {
     clickCount.value = 1;
-    numbers.value = [];
+    listOfTrips.value.forEach(item => {
+        item.isPlatform = false;
+        item.isQR = false;
+        item.variable = [];
+        item.BgImg = 'images/ArUco-marker.jpg'
+    })
     listOfTrips.value = [];
-    for (let i = 0; i < 100; i++) {
-        numbers.value.push({
-            variable: [],
-            x: i % 10,
-            y: 9 - Math.floor(i / 10),
-            index: i,
-        });
-    }
 }
 
 // Обрабатываем нажатие Ctrl + Z
@@ -102,10 +139,9 @@ function copyAndToast(text) {
 }
 
 function handleDownloadBtn() {
-    console.log(finallyText)
     // Создание файла
     const downloadUrl = ref('');
-    const blob = new Blob([finallyText], {type: 'text/plain'});
+    const blob = new Blob([finallyText.value], {type: 'text/plain'});
     downloadUrl.value = URL.createObjectURL(blob);
     // Задержка для избежания ошибок в некоторых браузерах
     setTimeout(() => {
@@ -124,18 +160,134 @@ function handleDownloadBtn() {
     })
     isModalVisible.value = false
 }
+
+function createPlatform(item, color) {
+    if (!item.variable.length) {
+        item.variable.push(clickCount.value);
+        listOfTrips.value.push(item)
+        clickCount.value++
+    }
+    item.isPlatform = true;
+    item.isQR = false;
+    item.BgImg = `images/${color}-platform.jpg`
+}
+
+function deletePlatform(item) {
+    item.BgImg = 'images/ArUco-marker.jpg'
+    item.isPlatform = false
+}
+
+function createQR(item) {
+    if (!item.variable.length) {
+        item.variable.push(clickCount.value);
+        listOfTrips.value.push(item)
+        clickCount.value++
+    }
+    item.isPlatform = false;
+    item.isQR = true;
+    item.BgImg = `images/qr.jpg`
+}
+
+function deleteQR(item) {
+    item.BgImg = 'images/ArUco-marker.jpg'
+    item.isQR = true
+}
+
+function deletePointMap(item) {
+    const index = listOfTrips.value.indexOf(item);
+    if (index !== -1) {
+        const deletedIndex = item.variable.at(-1)
+        listOfTrips.value.forEach(square => {
+            square.variable.map(itemVariable => {
+                if (itemVariable === deletedIndex) {
+                    square.variable = []
+                }
+                if (itemVariable > deletedIndex) {
+                    square.variable[square.variable.indexOf(itemVariable)]--
+                }
+            })
+        })
+        listOfTrips.value.splice(index, 1);
+        clickCount.value--
+        item.isQR = false
+        item.isPlatform = false
+        item.BgImg = 'images/ArUco-marker.jpg'
+    }
+}
+function createIcon(src) {
+    return h('img', {
+        src: src,
+        style: {
+            width: '20px',
+            height: '20px',
+        }
+    })
+}
+function onContextMenu(e, item) {
+    ContextMenu.showContextMenu({
+        theme: 'mac dark',
+        x: e.x,
+        y: e.y,
+        items: [
+            {
+                label: "Платформа",
+                icon: createIcon('icons/base_square.webp'),
+                children: [
+                    {
+                        label: "Белая",
+                        onClick: () => createPlatform(item, 'white'),
+                        icon: createIcon('icons/white_square.webp'),
+                    },
+                    {
+                        label: "Синяя",
+                        onClick: () => createPlatform(item, 'blue'),
+                        icon: createIcon('icons/blue_square.webp'),
+                    },
+                    {
+                        label: "Красная",
+                        onClick: () => createPlatform(item, 'red'),
+                        icon: createIcon('icons/red_square.webp'),
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => deletePlatform(item),
+                        icon: createIcon('icons/trash.webp'),
+                    },
+                ]
+            },
+            {
+                label: "QR код",
+                icon: createIcon('icons/qr_code.png'),
+                children: [
+                    {
+                        label: "Добавить",
+                        onClick: () => createQR(item),
+                        icon: createIcon('icons/plus.webp')
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => deleteQR(item),
+                        icon: createIcon('icons/trash.webp')
+
+                    },
+                ],
+            },
+            {
+                label: "Удалить",
+                icon: createIcon('icons/trash.webp'),
+                onClick: () => deletePointMap(item),
+            },
+        ]
+    });
+}
 </script>
 
 <template>
     <div class="wraper">
         <div class="grid">
-            <div
-                class="square"
-                v-for="(item, index) in numbers"
-                :data-key="index"
-                :key="index"
-                @click="setNumber(item)"
-            >
+            <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>
@@ -149,12 +301,8 @@ function handleDownloadBtn() {
     </div>
 
 
-    <MyDialog
-        v-show="isModalVisible"
-        @close="isModalVisible = false"
-        class="dialogWindow"
-        :is-success=listOfTrips.length
-    >
+    <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>
@@ -165,9 +313,9 @@ function handleDownloadBtn() {
         </template>
         <template #footer>
             <div v-if="listOfTrips.length">
-                <button type="button" @click="handleDownloadBtn">Скачать код</button>
-                <button type="button" @click="copyAndToast(finallyText)">Скопировать код</button>
-                <button type="button" @click="isModalVisible = false">ОК</button>
+                <button @click="handleDownloadBtn">Скачать код</button>
+                <button @click="copyAndToast(finallyText)">Скопировать код</button>
+                <button @click="isModalVisible = false">ОК</button>
             </div>
         </template>
     </MyDialog>
@@ -196,14 +344,11 @@ html {
 }
 
 .square {
-    width: var(--side); /* Ширина квадрата */
-    height: var(--side); /* Высота квадрата */
-    background-image: url("images/image.jpg");
+    width: var(--side);
+    height: var(--side);
     background-size: cover;
     border: 3px solid rgb(251, 251, 251);
-    background-color: #e0e0e0;
     cursor: pointer;
-    transition: background-color 0.3s;
     overflow-y: scroll;
 
     background-blend-mode: multiply;
@@ -211,6 +356,7 @@ 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,

src/components/MyDialog.vue

@@ -1,36 +1,37 @@
 <template>
-  <transition name="modal-fade">
-    <div class="modal-backdrop" @click="closeModal">
-      <div class="modal" @click.stop>
-        <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>
-        </header>
-        <section class="modal-body">
-          <slot name="body">Тело по умолчанию</slot>
-        </section>
-        <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
-          <slot name="footer">
-            <button  @click="closeModal">Закрыть</button>
-          </slot>
-        </footer>
-      </div>
-    </div>
-  </transition>
+    <transition name="modal-fade">
+        <div class="modal-backdrop" @click="closeModal">
+            <div class="modal" @click.stop>
+                <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>
+                </header>
+                <section class="modal-body">
+                    <slot name="body">Тело по умолчанию</slot>
+                </section>
+                <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
+                    <slot name="footer">
+                        <button @click="closeModal">Закрыть</button>
+                    </slot>
+                </footer>
+            </div>
+        </div>
+    </transition>
 </template>
 
 <script setup>
 const emit = defineEmits(['close'])
 const props = defineProps({
-  isSuccess: {
-    type: Boolean,
-    required: true
-  }
+    isSuccess: {
+        type: Boolean,
+        required: true
+    }
 })
+
 function closeModal() {
     emit('close');
 }
@@ -38,82 +39,88 @@ function closeModal() {
 
 <style>
 .modal-backdrop {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .modal {
-  background: #2f2f2f;
-  box-shadow: 2px 2px 20px 1px;
-  overflow-x: auto;
-  display: flex;
-  flex-direction: column;
-  max-width: 500px;
-  width: 90%;
-  border-radius: 5px;
+    background: #2f2f2f;
+    box-shadow: 2px 2px 20px 1px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 500px;
+    width: 90%;
+    border-radius: 5px;
 }
 
 .modal-header,
 .modal-footer {
-  padding: 10px;
-  display: flex;
+    padding: 10px;
+    display: flex;
 }
 
 .modal-header {
-  border-bottom: 1px solid #eeeeee;
-  justify-content: space-between;
-}
-.modal-header-success {
-  color: #4AAE9B;
-}
-.modal-header-error {
-  color: red;
+    border-bottom: 1px solid #eeeeee;
+    justify-content: space-between;
 }
 
-.modal-header [type = 'button'] {
-  color: red;
-  font-size: 25px;
+.modal-header-success {
+    color: #4AAE9B;
+}
+
+.modal-header-error {
+    color: red;
+}
+
+.modal-header button {
+    color: red;
+    font-size: 25px;
 }
 
 .modal-footer {
-  justify-content: flex-end;
-  border-top: 1px solid white;
+    justify-content: flex-end;
+    border-top: 1px solid white;
 }
-.modal-footer [type = 'button'] {
-  justify-content: flex-end;
-  border-top: 1px solid white;
-  padding: 5px;
+
+.modal-footer button {
+    justify-content: flex-end;
+    border-top: 1px solid white;
+    padding: 5px;
+    color: white;
 }
-.modal-footer-success [type = 'button'] {
-  background-color: #4AAE9B;
-  border: none;
-  margin: 3px;
+
+.modal-footer-success button {
+    background-color: #4AAE9B;
+    border: none;
+    margin: 3px;
 }
-.modal-footer-error [type = 'button'] {
-  background: red;
-  border: none;
+
+.modal-footer-error button {
+    background: red;
+    border: none;
 }
 
 .modal-body {
-  position: relative;
-  padding: 20px 10px;
-  color: white
+    position: relative;
+    padding: 20px 10px;
+    color: white
 }
 
 .modal-btn-close {
-  border: none;
-  font-size: 20px;
-  padding: 0;
-  cursor: pointer;
-  font-weight: bold;
-  color: red;
-  background: transparent;
+    border: none;
+    font-size: 20px;
+    padding: 0;
+    cursor: pointer;
+    font-weight: bold;
+    color: red;
+    background: transparent;
 }
 </style>   

src/renderer.js

@@ -28,5 +28,6 @@
 
 import { createApp } from 'vue';
 import App from './App.vue';
-
-createApp(App).mount('#app');
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+createApp(App).use(ContextMenu).mount('#app');

src/shared/copyToclipboard.js

@@ -1,5 +1,5 @@
 import copy from 'copy-to-clipboard';
-import iziToast from '@/iziToast.js';
+import iziToast from '@/shared/iziToast.js';
 
 function copyToclipboard(text) {
     try {

src/shared/izitoast.js

@@ -1,4 +1,4 @@
-import iziToast from "izitoast"
+import iziToast from 'iziToast';
 
 iziToast.settings({
     timeout: 3000,