Добавил картинок и подзаголовков для терминов

src/data/terms.js

@@ -1,92 +1,112 @@
-const rawTerms = [
+export const termsItems = [
     {
+        id: 1,
         title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
+        subtitle: 'Экосистема',
         image: '/images/terms/ROS.webp',
+        description: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
         hrefToDoc: 'https://www.ros.org/',
         hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748',
     },
     {
+        id: 2,
         title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
+        subtitle: 'Компьютерное зрение',
         image: '/images/terms/openCV.webp',
+        description: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
         hrefToDoc: 'https://opencv.org/',
         hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893',
     },
     {
+        id: 3,
         title: 'navigate_wait',
-        body: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
+        subtitle: 'Clover',
+        image: '/images/terms/navigate_wait.jpg',
+        description: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
         hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
         hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803',
     },
     {
+        id: 4,
         title: 'Нода (Node)',
-        body: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
+        subtitle: 'ROS',
+        image: '/images/terms/node.jpg',
+        description: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758',
     },
     {
+        id: 5,
         title: 'Топик (Topic)',
-        body: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
+        subtitle: 'ROS',
+        image: '/images/terms/topic.jpg',
+        description: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
     {
+        id: 6,
         title: 'Издатель (Publisher)',
-        body: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
+        subtitle: 'ROS',
+        image: '/images/terms/publisher.jpg',
+        description: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
     {
+        id: 7,
         title: 'Подписчик (Subscriber)',
-        body: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
+        subtitle: 'ROS',
+        image: '/images/terms/subscriber.jpg',
+        description: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
     {
+        id: 8,
         title: 'Сервис',
-        body: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
+        subtitle: 'ROS',
+        image: '/images/terms/service.jpg',
+        description: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206',
     },
     {
+        id: 9,
         title: 'Системы координат',
-        body: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
+        subtitle: 'Навигация',
+        image: '/images/terms/coordinate-system.jpg',
+        description: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://clover.coex.tech/ru/frames.html',
     },
     {
+        id: 10,
         title: 'ArUco-маркер',
-        body: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
+        subtitle: 'Навигация',
         image: '/images/terms/ArUco-marker.webp',
+        description: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html',
     },
     {
+        id: 11,
         title: 'Симулятор (Gazebo)',
-        body: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
+        subtitle: 'Симуляция',
+        image: '/images/terms/gazebo.jpg',
+        description: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
         hrefToCourse: 'https://stepik.org/lesson/2278310/step/1?unit=2312564',
         hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html',
     },
     {
+        id: 12,
         title: 'unregister()',
-        body: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
+        subtitle: 'ROS',
+        image: '/images/terms/subscriber.jpg',
+        description: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
         hrefToCourse: 'https://stepik.org/lesson/2272845/step/1?unit=2307058',
         hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html',
     },
 ]
 
-function toSubtitle(text) {
+export default termsItems
-    if (!text) return ''
-    return text.length > 72 ? `${text.slice(0, 72)}…` : text
-}
-
-export default rawTerms.map((item, index) => ({
-    id: index + 1,
-    title: item.title,
-    subtitle: toSubtitle(item.body),
-    image: item.image ?? '',
-    description: item.body,
-    hrefToDoc: item.hrefToDoc ?? null,
-    hrefToCourse: item.hrefToCourse ?? null,
-}))

src/views/TopicView.vue

@@ -1,16 +1,20 @@
 <script setup>
-import { ref, watch, provide } from 'vue'
+import { ref, watch, provide, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { resolveTopic } from '@/composables/useTopicResolver'
 import MyDropMenu from "@/components/MyDropMenu.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 
+const APP_LOGO = '/images/drone.png'
+
 const route = useRoute()
 const router = useRouter()
 const topic = ref(null)
 const dropMenu = ref(null);
 provide('dropMenu', dropMenu);
 
+const topicImage = computed(() => topic.value?.image || APP_LOGO)
+
 async function loadTopic() {
     topic.value = await resolveTopic(route.params.source, route.params.id)
 
@@ -39,12 +43,12 @@ function goBack() {
             </button>
 
             <div class="topic-view__image">
-                <img :src="topic.image" :alt="topic.title" />
+                <img :src="topicImage" :alt="topic.title" />
             </div>
 
             <div class="topic-view__header">
-                <p v-if="topic.subtitle" class="topic-view__subtitle">{{ topic.subtitle }}</p>
                 <h1 class="topic-view__title">{{ topic.title }}</h1>
+                <p v-if="topic.subtitle" class="topic-view__subtitle">{{ topic.subtitle }}</p>
             </div>
 
             <p class="topic-view__description">{{ topic.description }}</p>