add qr-code install instructions

src/components/manage/ManagePlacementInstructions.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="max-w-3xl mx-auto py-6 px-4 md:px-6">
+    <div v-if="isLoading" class="text-gray-500">Загрузка инструкции...</div>
+    <div v-else-if="data" class="markdown">
+      <VueMarkdownIt :source="data" />
+    </div>
+    <p v-else-if="isError" class="text-red-500">Ошибка загрузки инструкции.</p>
+    <p v-else class="text-gray-500">Инструкция для этого типа размещения отсутствует.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VueMarkdownIt } from '@f3ve/vue-markdown-it'
+import { useQuery } from '@tanstack/vue-query'
+import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+
+// Импортируем все инструкции из директории
+const importInstructions = import.meta.glob('/src/content/placementInstructions/*.md', {
+  as: 'raw',
+}) as unknown as Record<string, () => Promise<string>>
+
+const { placement } = defineProps<{ placement: QRCodeDocument['placement'] }>()
+
+// Хук для загрузки инструкции
+async function fetchInstructions(): Promise<string | undefined> {
+  return importInstructions[`/src/content/placementInstructions/${placement}.md`]?.()
+}
+
+// Используем vue-query для управления запросом
+const { isLoading, isError, data } = useQuery({
+  queryKey: ['placementInstructions', computed(() => placement)],
+  queryFn: fetchInstructions,
+})
+</script>
+
+<style scoped>
+.markdown {
+  font-family: 'Inter', sans-serif;
+  line-height: 1.7;
+  color: #333;
+}
+
+.markdown ::v-deep(h1) {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: #111827;
+  font-weight: 700;
+}
+
+.markdown ::v-deep(h2) {
+  font-size: 1.75rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.markdown ::v-deep(h3) {
+  font-size: 1.5rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0.75rem;
+  color: #374151;
+  font-weight: 500;
+}
+
+.markdown ::v-deep(p) {
+  margin-bottom: 1rem;
+  color: #4b5563;
+}
+
+.markdown ::v-deep(ul) {
+  list-style: disc;
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.markdown ::v-deep(ol) {
+  list-style: decimal;
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.markdown ::v-deep(li) {
+  margin-bottom: 0.5rem;
+}
+
+.markdown ::v-deep(a) {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+.markdown ::v-deep(blockquote) {
+  border-left: 4px solid #d1d5db;
+  padding-left: 1rem;
+  color: #6b7280;
+  margin: 1rem 0;
+  font-style: italic;
+}
+
+.markdown ::v-deep(code) {
+  background-color: #f3f4f6;
+  border-radius: 4px;
+  padding: 0.2rem 0.4rem;
+  font-family: 'Courier New', Courier, monospace;
+  color: #1f2937;
+}
+
+.markdown ::v-deep(pre) {
+  background-color: #f9fafb;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  color: #111827;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.markdown ::v-deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+
+.markdown ::v-deep(th),
+.markdown ::v-deep(td) {
+  border: 1px solid #d1d5db;
+  padding: 0.5rem;
+}
+
+.markdown ::v-deep(th) {
+  background-color: #f9fafb;
+  font-weight: 600;
+  text-align: left;
+}
+</style>

src/components/read/ReadContactInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="max-w-lg w-full text-center">
+  <section class="max-w-prose w-full text-center">
     <!-- Контактная информация -->
     <div class="flex items-start bg-gray-100 border rounded-lg p-4">
       <!-- Аватарка Gravatar -->

src/components/read/ReadMessageSender.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="max-w-lg w-full">
+  <section class="max-w-prose w-full">
     <p class="text-gray-600 mb-4 text-center">Выберите сообщение из списка или напишите своё:</p>
 
     <!-- Предустановленные сообщения -->