src/App.vue

@@ -7,12 +7,14 @@ 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++) {
@@ -293,7 +295,7 @@ 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})` }">
@@ -302,31 +304,32 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button class="actions__btn" @click="saveResult">Сохранить</custom-button>
+            <custom-button @click="saveResult">Сохранить</custom-button>
-            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
+            <custom-button @click="cleanResult">Очистить</custom-button>
-            <custom-button class="actions__btn" @click="cancel">Отменить</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="handleDownloadBtn">Скачать код</button>
+                    <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                    <button @click="copyAndToast(finallyText)">Скопировать код</button>
+                </div>
+            </template>
+        </MyDialog>
     </div>
+    <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
 
 
-    <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="handleDownloadBtn">Скачать код</button>
-                <button @click="copyAndToast(finallyText)">Скопировать код</button>
-                <button @click="isModalVisible = false">ОК</button>
-            </div>
-        </template>
-    </MyDialog>
 </template>
 
 <style>

src/components/CodeView.vue

@@ -0,0 +1,40 @@
+<script setup>
+import CustomButton from '@/components/UI/CustomButton.vue'
+
+const props = defineProps({
+    code: {
+        required: true,
+        type: String
+    },
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+console.log(props.code)
+</script>
+
+<template>
+    <div class="code-view" v-if="show">
+        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <pre>
+            {{ code }}
+        </pre>
+        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+    </div>
+</template>
+
+<style scoped>
+.code-view {
+    position: fixed;
+    top: 0;
+    left: 0;
+    //background-image: radial-gradient(#23aae3e2, #222222);
+    background-color: #222222;
+    overflow: auto;
+    color: #eeeeee;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+</style>

src/components/MyDialog.vue

@@ -52,7 +52,7 @@ const props = defineProps({
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 999;
+    z-index: 998;
 }
 
 .modal {