update editor

src/components/PlaceBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
+import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger, NButton } from 'naive-ui'
 import type { PropType } from 'vue'
 import { LockOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
@@ -86,7 +86,10 @@ function onCreateKey(): Key {
   </div>
 
   <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-header">
+      {{ props.place.code }}: {{ props.place.name }}
+    </div>
+    <hr class="hr" />
     <div class="message-content">
       <div v-if="props.place.image">
         <div class="message-image-border">
@@ -104,7 +107,9 @@ function onCreateKey(): Key {
       </span>
     </div>
 
-    <div v-for="application in props.place.applications" v-bind:key="application.name" class="application-block">
+    <hr class="hr" v-if="props.place.applications.length" />
+    <div class="message-footer application-block" v-for="application in props.place.applications"
+      v-bind:key="application.name">
       Приложение: {{ application.name }}
     </div>
 
@@ -130,14 +135,26 @@ function onCreateKey(): Key {
         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>
+      <div>
+        <n-space>
+          <n-space vertical>
+            <img :src="props.place.image" class="message-edit-image">
+            <n-button @click="props.place.image = '', props.place.fileList = null">Убрать картинку</n-button>
+          </n-space>
+          <n-space vertical>
+            <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-space>
+        </n-space>
+      </div>
+
+      <p class="settings-header">Видимость точки</p>
       <n-switch v-model:value="props.place.hidden">
         <template #checked>
           Скрытая точка
@@ -210,6 +227,13 @@ function onCreateKey(): Key {
 </template>
 
 <style scoped>
+.hr {
+  margin: 10px 0;
+  border: dashed 1px;
+  /* border-color: black; */
+  border-color: #eee;
+}
+
 .place-block-hover,
 .place-block {
   margin: 10px 0;
@@ -234,6 +258,7 @@ function onCreateKey(): Key {
 }
 
 .message-content {
+  font-weight: 500;
   white-space: pre-wrap;
 }
 
@@ -316,4 +341,21 @@ function onCreateKey(): Key {
 .message-image {
   width: 100%;
 }
+
+.message-edit-image {
+  width: 135px;
+  height: 135px;
+}
+
+.message-header {
+  font-size: 20px;
+  padding-right: 50px;
+}
+
+.message-footer {
+  padding-right: 50px;
+  font-weight: 400;
+  color: var(--second-color);
+  position: relative;
+}
 </style>