add images

src/components/PlaceBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch } from 'naive-ui'
+import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
 import type { PropType } from 'vue'
 import { LockOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
@@ -87,7 +87,14 @@ function onCreateKey(): Key {
 
   <div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
     <p>[{{ props.place.code }}] - {{ props.place.name }}</p>
-    <div class="message-content">{{ props.place.text }}</div>
+    <div class="message-content">
+      <div v-if="props.place.image">
+        <div class="message-image-border">
+          <img :src="props.place.image" class="message-image">
+        </div>
+      </div>
+      {{ props.place.text }}
+    </div>
 
     <div v-for="door in props.place.doors" v-bind:key="door.code" class="door-block">
       {{ door.name }} <span v-for="key in door.keys" class="key-block">
@@ -121,6 +128,16 @@ function onCreateKey(): Key {
       </n-input-group>
       <n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
         placeholder="В начале было слово..." />
+
+      <p class="settings-header">Картинка</p>
+      <n-input v-model:value="props.place.image" type="text" placeholder="Не задано" disabled />
+      <n-upload directory-dnd :max="1" v-model:file-list="props.place.fileList">
+        <n-upload-dragger>
+          <n-text style="font-size: 16px">
+            Щелкните или перетащите файл в эту область для загрузки
+          </n-text>
+        </n-upload-dragger>
+      </n-upload>
       <n-switch v-model:value="props.place.hidden">
         <template #checked>
           Скрытая точка
@@ -284,4 +301,19 @@ function onCreateKey(): Key {
   cursor: pointer;
   color: #63e2b7;
 }
+
+.message-image-border {
+  width: 40%;
+  float: left;
+  padding: 7px;
+  margin-right: 15px;
+  background-image: url("@/assets/images/paper_white.jpg");
+  background-size: cover;
+  box-shadow: 0px 3px 15px rgb(98, 98, 98);
+  transform: rotate(-3deg);
+}
+
+.message-image {
+  width: 100%;
+}
 </style>