update editor

src/assets/base.css

@@ -15,6 +15,13 @@
   --vt-c-text-light-2: rgb(60 60 60 / 66%);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
+
+  /* Главный цвет */
+  --main-color: rgba(34, 50, 60, 1);
+  /* --second-color: rgb(97, 74, 22); */
+  --second-color: burlywood;
+  --main-back-color: rgba(240, 240, 240, 1);
+  --main-back-item-color: rgba(254, 254, 254, 1);
 }
 
 /* semantic color variables for this project */
@@ -74,4 +81,4 @@ body {
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}

src/components/MessagePaper.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/* код */
+</script>
+
+<template>
+  <div class="main">
+    <div class="message-cloud-3"></div>
+    <div class="message-cloud-2"></div>
+    <div class="message-cloud">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  position: relative;
+}
+
+.message-cloud, .message-cloud-2, .message-cloud-3 {
+  background-color: bisque;
+}
+
+.message-cloud {
+  margin: 15px 0;
+  padding: 16px;
+  font-family: main;
+  color: black;
+  line-height: 20px;
+  font-size: 18px;
+  font-weight: 900;
+  position: relative;
+}
+
+.message-cloud,
+.message-cloud-2,
+.message-cloud-3 {
+  border-radius: 5px;
+  background-image: url("@/assets/images/paper.jpg");
+  background-size: cover;
+  display: flow-root;
+  box-shadow: 0px 0 5px black;
+}
+
+.message-cloud-2,
+.message-cloud-3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.message-cloud-2 {
+  transform: rotate(-3deg);
+  filter: brightness(50%);
+  height: 100%;
+  width: 100%;
+}
+
+.message-cloud-3 {
+  transform: rotate(2deg);
+  filter: brightness(80%);
+  height: 100%;
+  width: 100%;
+}
+</style>

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>