реализован поиск и постепенный скролл

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+main.py
 
 node_modules
 .DS_Store

src/components/Section.vue

@@ -37,6 +37,7 @@
     <div class="p-4">
       <Stat
         v-for="item in items"
+        :key="item.url"
         :translation_text="item.translation_text"
         :original_text="item.original_text"
         :url="item.url"
@@ -49,51 +50,44 @@
         :viewed="item.viewed"
         :other="item.other"
       />
+      <!-- Sentinel для бесконечного скролла -->
+      <div ref="sentinel" class="h-4"></div>
+      <div v-if="isLoading" class="text-center p-4">Загрузка...</div>
+      <div v-if="!hasMore && items.length > 0" class="text-center p-4">
+        Все загружено
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, nextTick } from "vue";
 import Stat from "./Stat.vue";
 import Time from "./Time.vue";
 import axios from "axios";
 
 const isDarkMode = ref(document.documentElement.classList.contains("dark"));
-// Следим за изменениями класса dark на html
+const sentinel = ref(null);
-onMounted(() => {
+const isLoading = ref(false);
-  // Инициализация при загрузке (если класс ещё не установлен)
+const hasMore = ref(true);
-  isDarkMode.value = document.documentElement.classList.contains("dark");
 
-  const observer = new MutationObserver(() => {
+// Состояния для пагинации
-    isDarkMode.value = document.documentElement.classList.contains("dark");
+let currentFilter = "default";
-  });
+let currentOffset = 0;
-  observer.observe(document.documentElement, {
+const LIMIT = 50;
-    attributes: true,
-    attributeFilter: ["class"],
-  });
-
-  // Загружаем данные при монтировании
-  const initialFilter = props.filter === "all" ? "default" : props.filter;
-  loadItems(initialFilter);
-});
 
 // Состояния страницы и данные для входа
 const items = ref([]);
-// const filter = ref();
 const poisk = ref("");
 
 // Универсальная функция для получения данных
-const fetchData = async (url, targetRef, append = false) => {
+const fetchData = async (url) => {
   try {
     const { data } = await axios.get(url);
-    if (append) {
+    return data;
-      targetRef.value = [...targetRef.value, ...data];
-    } else {
-      targetRef.value = data;
-    }
   } catch (err) {
     console.error(`Ошибка при получении данных с ${url}:`, err);
+    return [];
   }
 };
 
@@ -110,10 +104,10 @@ const fetchTotalCount = async (filterValue) => {
   }
 };
 
-const fetchSearchCount = async (query) => {
+const fetchSearchCount = async (query, filterValue) => {
   try {
     const { data } = await axios.get(
-      `http://127.0.0.1:8002/poisk/count?query=${query}`,
+      `http://127.0.0.1:8002/poisk/count?query=${query}&item=${filterValue}`,
     );
     return data.count;
   } catch (err) {
@@ -122,65 +116,153 @@ const fetchSearchCount = async (query) => {
   }
 };
 
-// Основная функция с циклом
+// Начальная загрузка (первые 50 записей)
-const loadItems = async (filterValue, limit = 100) => {
+const loadItems = async (filterValue) => {
-  items.value = []; // очищаем перед загрузкой
+  if (isLoading.value) return;
 
-  let totalCount = 1;
+  isLoading.value = true;
-  let offset = 0;
+  items.value = [];
+  currentFilter = filterValue;
+  currentOffset = 0;
+  hasMore.value = true;
 
-  while (offset < totalCount) {
+  try {
-    await fetchData(
+    const totalCount = await fetchTotalCount(filterValue);
-      `http://127.0.0.1:8002/records_all?item=${filterValue}&offset=${offset}&limit=${limit}`,
+    const data = await fetchData(
-      items,
+      `http://127.0.0.1:8002/records_all?item=${filterValue}&offset=0&limit=${LIMIT}`,
-      true, // включить режим добавления
     );
-    if (offset === 0) {
+    items.value = data;
-      totalCount = await fetchTotalCount(filterValue);
+    currentOffset = LIMIT;
-    }
+    hasMore.value = currentOffset < totalCount;
-    offset += limit;
+  } finally {
+    isLoading.value = false;
   }
 };
 
+// Подгрузка следующих записей (бесконечный скролл)
+const loadMore = async () => {
+  if (isLoading.value || !hasMore.value) return;
+
+  isLoading.value = true;
+
+  try {
+    // Если есть поисковый запрос - используем поиск с фильтром
+    if (poisk.value.trim()) {
+      const totalCount = await fetchSearchCount(poisk.value, currentFilter);
+      const data = await fetchData(
+        `http://127.0.0.1:8002/poisk?query=${poisk.value}&item=${currentFilter}&offset=${currentOffset}&limit=${LIMIT}`,
+      );
+      items.value = [...items.value, ...data];
+      currentOffset += LIMIT;
+      hasMore.value = currentOffset < totalCount;
+    } else {
+      // Иначе обычная загрузка с фильтром
+      const totalCount = await fetchTotalCount(currentFilter);
+      const data = await fetchData(
+        `http://127.0.0.1:8002/records_all?item=${currentFilter}&offset=${currentOffset}&limit=${LIMIT}`,
+      );
+      items.value = [...items.value, ...data];
+      currentOffset += LIMIT;
+      hasMore.value = currentOffset < totalCount;
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Поиск с пагинацией
+const searchItems = async (query, filterValue, loadMoreFlag = false) => {
+  if (isLoading.value && !loadMoreFlag) return;
+
+  if (!loadMoreFlag) {
+    items.value = [];
+    currentOffset = 0;
+    hasMore.value = true;
+  }
+
+  isLoading.value = true;
+
+  try {
+    const totalCount = await fetchSearchCount(query, filterValue);
+    const data = await fetchData(
+      `http://127.0.0.1:8002/poisk?query=${query}&item=${filterValue}&offset=${currentOffset}&limit=${LIMIT}`,
+    );
+
+    if (loadMoreFlag) {
+      items.value = [...items.value, ...data];
+    } else {
+      items.value = data;
+    }
+
+    currentOffset += LIMIT;
+    hasMore.value = currentOffset < totalCount;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Debounce для поиска
 let debounceTimer = null;
 watch(poisk, async (newVal) => {
   clearTimeout(debounceTimer);
   debounceTimer = setTimeout(async () => {
     if (newVal && newVal.trim()) {
-      await searchItems(newVal);
+      currentOffset = 0;
+      await searchItems(newVal, currentFilter);
+    } else {
+      // При пустом поиске - загружаем все записи
+      await loadItems(currentFilter);
     }
   }, 800);
 });
 
-// Основная функция поиска с циклом
-const searchItems = async (poisk, limit = 500) => {
-  items.value = []; // очищаем перед загрузкой
-  let totalCount = 1;
-  let offset = 0;
-
-  while (offset < totalCount) {
-    await fetchData(
-      `http://127.0.0.1:8002/poisk?query=${poisk}&offset=${offset}&limit=${limit}`,
-      items,
-      true, // включить режим добавления
-    );
-
-    if (offset === 0) {
-      totalCount = await fetchSearchCount(poisk); // нужно добавить эндпоинт /poisk/count
-    }
-
-    offset += limit;
-  }
-};
-
 const onfilterItems = (filterValue) => {
   const filter = filterValue === "all" ? "default" : filterValue;
+  currentFilter = filter;
   loadItems(filter);
 };
+
 const props = defineProps({
   filter: {
     type: String,
     default: "all",
   },
 });
+
+// Observer для бесконечного скролла
+let observer = null;
+
+onMounted(() => {
+  // Инициализация при загрузке
+  isDarkMode.value = document.documentElement.classList.contains("dark");
+
+  const mutationObserver = new MutationObserver(() => {
+    isDarkMode.value = document.documentElement.classList.contains("dark");
+  });
+  mutationObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  // Загружаем данные при монтировании
+  const initialFilter = props.filter === "all" ? "default" : props.filter;
+  currentFilter = initialFilter;
+  loadItems(initialFilter);
+
+  // Настройка Intersection Observer для бесконечного скролла
+  nextTick(() => {
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore.value) {
+          loadMore();
+        }
+      },
+      { rootMargin: "100px" },
+    );
+
+    if (sentinel.value) {
+      observer.observe(sentinel.value);
+    }
+  });
+});
 </script>