From 0b0adf48ff2eca5ee004c98133d97ef9ab2ba2ae Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 7 Mar 2026 22:38:06 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=81=D1=82=D0=B0=D0=B2=D0=B8=D0=BB=20on?=
 =?UTF-8?q?ContextMenu=20=D0=B2=20App?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |  51 ++++++++++-
 src/components/MyDialog.vue | 165 +++++++++++++++++++-----------------
 src/shared/ContextMenu.js   |  51 -----------
 3 files changed, 136 insertions(+), 131 deletions(-)
 delete mode 100644 src/shared/ContextMenu.js

diff --git a/src/App.vue b/src/App.vue
index e02466f..98c372f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import {useEventListener} from "@vueuse/core";
 import MyDialog from "./components/MyDialog.vue";
 import MyDropMenu from "./components/MyDropMenu.vue";
 import copyToclipboard from "./shared/copyToclipboard";
-import onContextMenu from './shared/ContextMenu'
+import ContextMenu from "@imengyu/vue3-context-menu";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
@@ -159,6 +159,55 @@ function deletePlatform(item) {
     clickCount.value--
 }
 
+function onContextMenu(e, item) {
+    ContextMenu.showContextMenu({
+        theme: 'mac dark',
+        x: e.x,
+        y: e.y,
+        items: [
+            {
+                label: "Платформы",
+                children: [
+                    {
+                        label: "Белая",
+                        onClick: () => createPlatform(item, 'white'),
+                    },
+                    {
+                        label: "Синяя",
+                        onClick: () => createPlatform(item, 'blue'),
+                    },
+                    {
+                        label: "Красная",
+                        onClick: () => createPlatform(item, 'red'),
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => deletePlatform(item),
+                    },
+                ]
+            },
+            {
+                label: "QR код",
+                children: [
+                    {
+                        label: "Добавить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                ],
+            },
+            {
+                label: "Отмена",
+                onClick: () => {
+                    alert('Здесь ещё предстоит написать код')
+                }
+            },
+        ]
+    });
+}
 </script>
 
 <template>
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index ff3d438..c27b895 100644
--- a/src/components/MyDialog.vue
+++ b/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>   
\ No newline at end of file
diff --git a/src/shared/ContextMenu.js b/src/shared/ContextMenu.js
deleted file mode 100644
index f06423a..0000000
--- a/src/shared/ContextMenu.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import ContextMenu from "@imengyu/vue3-context-menu";
-
-export default function onContextMenu(e, item) {
-    ContextMenu.showContextMenu({
-        theme: 'mac dark',
-        x: e.x,
-        y: e.y,
-        items: [
-            {
-                label: "Платформы",
-                children: [
-                    {
-                        label: "Белая",
-                        onClick: () => createPlatform(item, 'white'),
-                    },
-                    {
-                        label: "Синяя",
-                        onClick: () => createPlatform(item, 'blue'),
-                    },
-                    {
-                        label: "Красная",
-                        onClick: () => createPlatform(item, 'red'),
-                    },
-                    {
-                        label: "Удалить",
-                        onClick: () => deletePlatform(item),
-                    },
-                ]
-            },
-            {
-                label: "QR код",
-                children: [
-                    {
-                        label: "Добавить",
-                        onClick: () => alert('Здесь ещё предстоит написать код')
-                    },
-                    {
-                        label: "Удалить",
-                        onClick: () => alert('Здесь ещё предстоит написать код')
-                    },
-                ],
-            },
-            {
-                label: "Отмена",
-                onClick: () => {
-                    alert('Здесь ещё предстоит написать код')
-                }
-            },
-        ]
-    });
-}
\ No newline at end of file