fix css

2024-12-06 22:34:49 +02:00
parent a0aae19fb0
commit 92b4ee1cea
10 changed files with 31 additions and 29 deletions
@@ -0,0 +1,66 @@
+<template>
+  <LayoutWithTabs>
+    <MetaHead>
+      <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
+      <meta
+        name="description"
+        content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
+      />
+    </MetaHead>
+
+    <div class="flex flex-col min-h-full">
+      <!-- Основной контент -->
+      <main class="flex-grow flex flex-col">
+        <section class="flex flex-col flex-grow max-w-prose w-full mx-auto">
+          <ChatComponent userRole="owner" :qr_code_uri="qr_code_uri" :chat="chat">
+            <template #endOfMessages="{ count, lastMessage }">
+              <div
+                v-if="!count"
+                class="flex flex-col items-center justify-center flex-grow text-center text-gray-500"
+              >
+                <h1 class="text-2xl font-bold mb-4">Пока нет сообщений</h1>
+                <p class="text-gray-600">Вы можете начать общение, отправив первое сообщение.</p>
+              </div>
+              <div
+                v-else-if="lastMessage && lastMessage.from === 'owner'"
+                class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 mt-6"
+              >
+                <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
+                <p class="text-gray-600 mt-2">
+                  Вы можете написать ещё одно сообщение или подождать ответа.
+                </p>
+              </div>
+            </template>
+          </ChatComponent>
+        </section>
+      </main>
+
+      <!-- Футер -->
+      <!--    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">-->
+      <!--      <p><a href="/create" class="underline underline-offset-2">Создайте свой QR‑код</a>.</p>-->
+      <!--      <p class="mt-1">-->
+      <!--        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline underline-offset-2"-->
+      <!--          >поддержке</a-->
+      <!--        >.-->
+      <!--      </p>-->
+      <!--    </footer>-->
+    </div>
+  </LayoutWithTabs>
+</template>
+
+<script setup lang="ts">
+import type { MessageDocument } from '@hereconnect/types'
+import ChatComponent from '@/components/ChatComponent.vue'
+import { getQrCodeDocument } from '@/api/qrCode'
+import { useQuery } from '@tanstack/vue-query'
+
+const props = defineProps<{
+  qr_code_uri: MessageDocument['qr_code_uri']
+  chat: MessageDocument['chat']
+}>()
+
+const { data: chatDoc } = useQuery({
+  queryKey: ['qrCode', computed(() => props.qr_code_uri)],
+  queryFn: () => getQrCodeDocument(props.qr_code_uri),
+})
+</script>