kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

其他页面增加翻页快捷键

Browse Source
This commit is contained in:
kjqwer
2025-09-10 14:11:46 +08:00
parent 74bdb76dcd
commit 6e71ea3f55
2 changed files with 69 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/views/ArtistView.vue
+34 -6
View File
@@ -120,7 +120,8 @@
<!-- 分页导航 -->
<div v-if="totalPages > 1 && artworks.length > 0" class="pagination">
<button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1">
<button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1"
:title="`上一页(快捷键: ←)`">
<svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
@@ -134,7 +135,8 @@
</button>
</div>
<button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
<button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages"
:title="`下一页(快捷键: →)`">
下一页
<svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
<path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
@@ -599,7 +601,7 @@ const isProcessingPageChange = ref(false);
// 统一的页面变化处理函数
const handlePageChange = async (page: number, isJumpToPage = false) => {
if (isProcessingPageChange.value || page === currentPage.value) return;
isProcessingPageChange.value = true;
try {
// 如果artist还没加载完成，等待加载完成
@@ -616,7 +618,7 @@ const handlePageChange = async (page: number, isJumpToPage = false) => {
};
await waitForArtist();
}
if (artist.value) {
currentPage.value = page;
await fetchArtworks(page, isJumpToPage);
@@ -643,7 +645,7 @@ watch(() => artist.value?.id, (newArtistId, oldArtistId) => {
artworks.value = [];
currentPage.value = 1;
totalPages.value = 0;
// 检查是否有页面参数
const pageParam = route.query.page;
if (pageParam) {
@@ -659,9 +661,32 @@ watch(() => artist.value?.id, (newArtistId, oldArtistId) => {
}
}, { immediate: false });
// 组件卸载时清理缓存
// 键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
// 检查是否在输入框中，如果是则不处理
const target = event.target as HTMLElement;
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT')) {
return;
}
// 只有在有多页且有作品时才处理键盘事件
if (totalPages.value <= 1 || artworks.value.length === 0) {
return;
}
if (event.key === 'ArrowLeft' && currentPage.value > 1) {
event.preventDefault();
goToPage(currentPage.value - 1);
} else if (event.key === 'ArrowRight' && currentPage.value < totalPages.value) {
event.preventDefault();
goToPage(currentPage.value + 1);
}
};
// 组件卸载时清理缓存和事件监听器
onUnmounted(() => {
clearCache();
window.removeEventListener('keydown', handleKeyDown);
});
onMounted(async () => {
@@ -679,6 +704,9 @@ onMounted(async () => {
}
}
// 添加键盘事件监听器
window.addEventListener('keydown', handleKeyDown);
// 恢复滚动位置（延迟执行确保页面内容完全加载）
setTimeout(() => {
restoreScrollPosition(route.fullPath);
ui/src/views/SearchView.vue
+35 -3
View File
@@ -139,7 +139,8 @@
<!-- 分页导航 -->
<div v-if="totalPages > 1" class="pagination-section">
<div class="pagination">
<button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1">
<button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1"
:title="`上一页(快捷键: ←)`">
上一页
</button>
@@ -148,7 +149,8 @@
{{ page }}
</button>
<button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
<button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages"
:title="`下一页(快捷键: →)`">
下一页
</button>
</div>
@@ -197,7 +199,7 @@
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import artworkService from '@/services/artwork';
@@ -751,12 +753,42 @@ watch(() => route.query, () => {
if (urlDuration) searchDuration.value = urlDuration as 'all' | 'within_last_day' | 'within_last_week' | 'within_last_month';
}, { immediate: true });
// 键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
// 检查是否在输入框中，如果是则不处理
const target = event.target as HTMLElement;
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT')) {
return;
}
// 只有在有搜索结果且有多页时才处理键盘事件
if (totalPages.value <= 1 || searchResults.value.length === 0 || searchMode.value === 'artist') {
return;
}
if (event.key === 'ArrowLeft' && currentPage.value > 1) {
event.preventDefault();
goToPage(currentPage.value - 1);
} else if (event.key === 'ArrowRight' && currentPage.value < totalPages.value) {
event.preventDefault();
goToPage(currentPage.value + 1);
}
};
// 组件挂载时恢复滚动位置
onMounted(() => {
// 添加键盘事件监听器
window.addEventListener('keydown', handleKeyDown);
setTimeout(() => {
restoreScrollPosition(route.fullPath);
}, 200);
});
// 组件卸载时移除事件监听器
onUnmounted(() => {
window.removeEventListener('keydown', handleKeyDown);
});
</script>
<style scoped>