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

增加图片缓存，页数跳转，搜索页面返回query

Browse Source
This commit is contained in:
kjqwer
2025-08-25 14:26:41 +08:00
parent 09b6091293
commit f4b867916b
9 changed files with 1472 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/views/ArtistView.vue
+170 -10
View File
@@ -56,8 +56,6 @@
</div>
</div>
<!-- 作品列表 -->
<div class="artworks-section">
<div class="section-header">
@@ -102,11 +100,23 @@
<button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
下一页
<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" />
<path d="8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
</svg>
</button>
</div>
<!-- 跳转到指定页面 -->
<div v-if="totalPages > 1 && artworks.length > 0" class="jump-to-page">
<div class="jump-input-group">
<label for="jumpPage">跳转到:</label>
<input v-model="jumpPageInput" type="number" id="jumpPage" class="jump-input" :min="1" :max="totalPages"
placeholder="页码" @keyup.enter="handleJumpToPage" />
<button @click="handleJumpToPage" class="jump-btn" :disabled="!jumpPageInput || jumping">
{{ jumping ? '跳转中...' : '跳转' }}
</button>
</div>
</div>
<!-- 页面信息 -->
<div v-if="totalPages > 1 && artworks.length > 0" class="page-info">
<span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
@@ -247,7 +257,7 @@ const fetchArtistInfo = async () => {
};
// 获取作者作品
const fetchArtworks = async (page = 1) => {
const fetchArtworks = async (page = 1, isJumpToPage = false) => {
if (!artist.value) return;
const cacheKey = getCacheKey(artworkType.value, page);
@@ -313,8 +323,14 @@ const fetchArtworks = async (page = 1) => {
throw new Error(response.error || '获取作品列表失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '获取作品列表失败';
console.error('获取作品列表失败:', err);
// 只有在跳转到指定页面失败时才显示错误
if (isJumpToPage) {
error.value = `跳转失败：无法跳转到第 ${page} 页`;
} else {
error.value = err instanceof Error ? err.message : '获取作品列表失败';
}
} finally {
artworksLoading.value = false;
}
@@ -323,12 +339,30 @@ const fetchArtworks = async (page = 1) => {
// 处理类型切换
const handleTypeChange = () => {
currentPage.value = 1;
// 清除URL中的页码参数
router.push({
query: {
...route.query,
page: undefined
}
});
fetchArtworks(1);
};
// 跳转到指定页面
const goToPage = (page: number) => {
if (page < 1 || page > totalPages.value || page === currentPage.value) return;
if (page < 1 || page === currentPage.value) return;
// 更新URL参数
router.push({
query: {
...route.query,
page: page.toString()
}
});
fetchArtworks(page);
};
@@ -407,22 +441,63 @@ const clearError = () => {
error.value = null;
};
// 跳转到指定页面输入框
const jumpPageInput = ref<string | number>('');
const jumping = ref(false);
// 处理跳转到指定页面
const handleJumpToPage = async () => {
const page = parseInt(jumpPageInput.value as string);
if (isNaN(page) || page < 1) {
error.value = '请输入有效的页码';
return;
}
jumping.value = true;
jumpPageInput.value = ''; // 清空输入框
// 更新URL参数
router.push({
query: {
...route.query,
page: page.toString()
}
});
try {
await fetchArtworks(page, true);
} finally {
jumping.value = false;
}
};
// 监听路由变化
watch(() => route.params.id, () => {
// 清除缓存并重新加载
clearCache();
fetchArtistInfo();
// 检查是否有返回的页面信息
// 检查是否有返回的页面信息或指定的页码
const returnPage = parseInt(route.query.page as string);
if (returnPage && returnPage > 0) {
currentPage.value = returnPage;
fetchArtworks(returnPage);
fetchArtworks(returnPage, true);
} else {
fetchArtworks(1);
}
});
// 监听URL查询参数变化
watch(() => route.query.page, (newPage) => {
if (newPage && artist.value) {
const page = parseInt(newPage as string);
if (page > 0 && page !== currentPage.value) {
currentPage.value = page;
fetchArtworks(page, true);
}
}
});
// 组件卸载时清理缓存
onUnmounted(() => {
clearCache();
@@ -431,11 +506,11 @@ onUnmounted(() => {
onMounted(async () => {
await fetchArtistInfo();
// 检查是否有返回的页面信息
// 检查是否有返回的页面信息或指定的页码
const returnPage = parseInt(route.query.page as string);
if (returnPage && returnPage > 0) {
currentPage.value = returnPage;
await fetchArtworks(returnPage);
await fetchArtworks(returnPage, true);
} else {
await fetchArtworks(1);
}
@@ -749,6 +824,73 @@ onMounted(async () => {
font-size: 0.875rem;
}
.jump-to-page {
display: flex;
justify-content: center;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1rem;
background: #f9fafb;
border-radius: 0.5rem;
border: 1px solid #e5e7eb;
}
.jump-input-group {
display: flex;
align-items: center;
gap: 0.75rem;
}
.jump-input-group label {
font-size: 0.875rem;
color: #374151;
font-weight: 500;
white-space: nowrap;
}
.jump-input {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
background: white;
font-size: 0.875rem;
color: #374151;
min-width: 80px;
text-align: center;
transition: border-color 0.2s;
}
.jump-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.jump-btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
background: #3b82f6;
color: white;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 0.875rem;
min-width: 80px;
}
.jump-btn:hover:not(:disabled) {
background: #2563eb;
transform: translateY(-1px);
}
.jump-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
@@ -806,5 +948,23 @@ onMounted(async () => {
gap: 0.5rem;
text-align: center;
}
.jump-to-page {
flex-direction: column;
gap: 0.5rem;
}
.jump-input-group {
flex-direction: column;
align-items: flex-start;
}
.jump-input {
width: 100%;
}
.jump-btn {
width: 100%;
}
}
</style>
ui/src/views/SearchView.vue
+148 -10
View File
@@ -7,16 +7,19 @@
<div class="search-form">
<!-- 搜索类型选择 -->
<div class="search-type-tabs">
<button @click="searchMode = 'keyword'" class="tab-btn" :class="{ active: searchMode === 'keyword' }">
<button @click="handleSearchModeChange('keyword')" class="tab-btn"
:class="{ active: searchMode === 'keyword' }">
关键词搜索
</button>
<button @click="searchMode = 'tags'" class="tab-btn" :class="{ active: searchMode === 'tags' }">
<button @click="handleSearchModeChange('tags')" class="tab-btn" :class="{ active: searchMode === 'tags' }">
标签搜索
</button>
<button @click="searchMode = 'artwork'" class="tab-btn" :class="{ active: searchMode === 'artwork' }">
<button @click="handleSearchModeChange('artwork')" class="tab-btn"
:class="{ active: searchMode === 'artwork' }">
作品ID
</button>
<button @click="searchMode = 'artist'" class="tab-btn" :class="{ active: searchMode === 'artist' }">
<button @click="handleSearchModeChange('artist')" class="tab-btn"
:class="{ active: searchMode === 'artist' }">
作者ID
</button>
</div>
@@ -81,20 +84,20 @@
</div>
<div class="search-filters">
<select v-model="searchType" class="filter-select">
<select v-model="searchType" @change="updateFiltersInUrl" class="filter-select">
<option value="all">全部类型</option>
<option value="art">插画</option>
<option value="manga">漫画</option>
<option value="novel">小说</option>
</select>
<select v-model="searchSort" class="filter-select">
<select v-model="searchSort" @change="updateFiltersInUrl" class="filter-select">
<option value="date_desc">最新</option>
<option value="date_asc">最旧</option>
<option value="popular_desc">最受欢迎</option>
</select>
<select v-model="searchDuration" class="filter-select">
<select v-model="searchDuration" @change="updateFiltersInUrl" class="filter-select">
<option value="all">全部时间</option>
<option value="within_last_day">最近一天</option>
<option value="within_last_week">最近一周</option>
@@ -203,6 +206,14 @@ const handleSearch = async () => {
return;
}
// 更新URL参数
const query: any = { ...route.query };
query.keyword = searchKeyword.value.trim();
query.mode = 'keyword';
// 清除标签相关参数
delete query.tags;
router.push({ query });
try {
loading.value = true;
error.value = null;
@@ -299,6 +310,15 @@ const handleArtworkSearch = () => {
return;
}
// 更新URL参数
const query: any = { ...route.query };
query.artworkId = idStr;
query.mode = 'artwork';
// 清除其他搜索参数
delete query.keyword;
delete query.tags;
router.push({ query });
router.push(`/artwork/${id}`);
};
@@ -316,6 +336,15 @@ const handleArtistSearch = () => {
return;
}
// 更新URL参数
const query: any = { ...route.query };
query.artistId = idStr;
query.mode = 'artist';
// 清除其他搜索参数
delete query.keyword;
delete query.tags;
router.push({ query });
// 切换到作者搜索模式并跳转
searchMode.value = 'artist';
router.push(`/artist/${id}`);
@@ -327,11 +356,80 @@ const addTag = () => {
if (tag && !searchTags.value.includes(tag)) {
searchTags.value.push(tag);
tagInput.value = '';
// 更新URL参数
updateSearchTagsInUrl();
}
};
const removeTag = (index: number) => {
searchTags.value.splice(index, 1);
// 更新URL参数
updateSearchTagsInUrl();
};
// 更新URL中的搜索标签参数
const updateSearchTagsInUrl = () => {
const query: any = { ...route.query };
if (searchTags.value.length > 0) {
query.tags = searchTags.value;
query.mode = 'tags';
} else {
// 如果没有标签，清除相关参数
delete query.tags;
delete query.mode;
}
router.push({ query });
};
// 更新搜索过滤器到URL
const updateFiltersInUrl = () => {
const query: any = { ...route.query };
if (searchType.value !== 'all') query.type = searchType.value;
else delete query.type;
if (searchSort.value !== 'date_desc') query.sort = searchSort.value;
else delete query.sort;
if (searchDuration.value !== 'all') query.duration = searchDuration.value;
else delete query.duration;
router.push({ query });
};
// 处理搜索模式切换
const handleSearchModeChange = (mode: 'keyword' | 'tags' | 'artwork' | 'artist') => {
searchMode.value = mode;
// 清除其他模式的输入
if (mode !== 'keyword') searchKeyword.value = '';
if (mode !== 'tags') {
searchTags.value = [];
tagInput.value = '';
}
if (mode !== 'artwork') artworkId.value = '';
if (mode !== 'artist') artistId.value = '';
// 更新URL参数，清除不相关的参数
const query: any = { ...route.query };
query.mode = mode;
// 根据模式清除不相关的参数
if (mode !== 'keyword') delete query.keyword;
if (mode !== 'tags') {
delete query.tags;
delete query.tag;
}
if (mode !== 'artwork') delete query.artworkId;
if (mode !== 'artist') delete query.artistId;
router.push({ query });
};
const handleTagSearch = async () => {
@@ -339,6 +437,14 @@ const handleTagSearch = async () => {
return;
}
// 更新URL参数
const query: any = { ...route.query };
query.tags = searchTags.value;
query.mode = 'tags';
// 清除关键词相关参数
delete query.keyword;
router.push({ query });
try {
loading.value = true;
error.value = null;
@@ -384,13 +490,37 @@ const handleArtistDownload = (artist: any) => {
// 监听路由变化，处理URL参数
watch(() => route.query, () => {
const urlMode = route.query.mode as string;
const urlKeyword = route.query.keyword as string;
const urlTag = route.query.tag as string;
const urlTags = route.query.tags;
const urlType = route.query.type as string;
const urlSort = route.query.sort as string;
const urlDuration = route.query.duration as string;
const urlArtworkId = route.query.artworkId as string;
const urlArtistId = route.query.artistId as string;
// 恢复搜索模式
if (urlMode) {
searchMode.value = urlMode as 'keyword' | 'tags' | 'artwork' | 'artist';
}
// 恢复关键词
if (urlKeyword) {
searchKeyword.value = urlKeyword;
}
// 恢复作品ID
if (urlArtworkId) {
artworkId.value = urlArtworkId;
}
// 恢复作者ID
if (urlArtistId) {
artistId.value = urlArtistId;
}
// 恢复标签
if (urlMode === 'tags') {
// 自动设置标签搜索模式
searchMode.value = 'tags';
if (urlTags) {
// 处理多个标签
if (Array.isArray(urlTags)) {
@@ -411,7 +541,15 @@ watch(() => route.query, () => {
if (searchTags.value.length > 0) {
handleTagSearch();
}
} else if (urlMode === 'keyword' && urlKeyword) {
// 如果是关键词搜索模式且有关键词，自动执行搜索
handleSearch();
}
// 恢复过滤器
if (urlType) searchType.value = urlType as 'all' | 'art' | 'manga' | 'novel';
if (urlSort) searchSort.value = urlSort as 'date_desc' | 'date_asc' | 'popular_desc';
if (urlDuration) searchDuration.value = urlDuration as 'all' | 'within_last_day' | 'within_last_week' | 'within_last_month';
}, { immediate: true });
</script>