реализован поиск и постепенный скролл
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -6,6 +6,7 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
main.py
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
|
||||
@@ -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
|
||||
onMounted(() => {
|
||||
// Инициализация при загрузке (если класс ещё не установлен)
|
||||
isDarkMode.value = document.documentElement.classList.contains("dark");
|
||||
const sentinel = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
isDarkMode.value = document.documentElement.classList.contains("dark");
|
||||
});
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
|
||||
// Загружаем данные при монтировании
|
||||
const initialFilter = props.filter === "all" ? "default" : props.filter;
|
||||
loadItems(initialFilter);
|
||||
});
|
||||
// Состояния для пагинации
|
||||
let currentFilter = "default";
|
||||
let currentOffset = 0;
|
||||
const LIMIT = 50;
|
||||
|
||||
// Состояния страницы и данные для входа
|
||||
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) {
|
||||
targetRef.value = [...targetRef.value, ...data];
|
||||
} else {
|
||||
targetRef.value = data;
|
||||
}
|
||||
return 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) => {
|
||||
}
|
||||
};
|
||||
|
||||
// Основная функция с циклом
|
||||
const loadItems = async (filterValue, limit = 100) => {
|
||||
items.value = []; // очищаем перед загрузкой
|
||||
// Начальная загрузка (первые 50 записей)
|
||||
const loadItems = async (filterValue) => {
|
||||
if (isLoading.value) return;
|
||||
|
||||
let totalCount = 1;
|
||||
let offset = 0;
|
||||
isLoading.value = true;
|
||||
items.value = [];
|
||||
currentFilter = filterValue;
|
||||
currentOffset = 0;
|
||||
hasMore.value = true;
|
||||
|
||||
while (offset < totalCount) {
|
||||
await fetchData(
|
||||
`http://127.0.0.1:8002/records_all?item=${filterValue}&offset=${offset}&limit=${limit}`,
|
||||
items,
|
||||
true, // включить режим добавления
|
||||
try {
|
||||
const totalCount = await fetchTotalCount(filterValue);
|
||||
const data = await fetchData(
|
||||
`http://127.0.0.1:8002/records_all?item=${filterValue}&offset=0&limit=${LIMIT}`,
|
||||
);
|
||||
if (offset === 0) {
|
||||
totalCount = await fetchTotalCount(filterValue);
|
||||
}
|
||||
offset += limit;
|
||||
items.value = data;
|
||||
currentOffset = LIMIT;
|
||||
hasMore.value = currentOffset < totalCount;
|
||||
} 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>
|
||||
|
||||
Reference in New Issue
Block a user