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-08-23 15:23:54 +08:00
parent 20b336cf31
commit 167c57d0a9
7 changed files with 382 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/dist.zip
BIN
View File
Binary file not shown.
ui/src/services/artwork.ts
+13 -1
View File
@@ -56,7 +56,19 @@ class ArtworkService {
*/
async searchArtworks(params: SearchParams): Promise<ApiResponse<{ artworks: Artwork[]; next_url?: string; total: number }>> {
const queryParams = new URLSearchParams();
queryParams.append('keyword', params.keyword);
// 处理关键词搜索
if (params.keyword) {
queryParams.append('keyword', params.keyword);
}
// 处理标签搜索
if (params.tags && params.tags.length > 0) {
params.tags.forEach(tag => {
queryParams.append('tags', tag);
});
}
if (params.type) queryParams.append('type', params.type);
if (params.sort) queryParams.append('sort', params.sort);
if (params.duration) queryParams.append('duration', params.duration);
ui/src/types/index.ts
+2 -1
View File
@@ -114,7 +114,8 @@ export interface DownloadTask {
// 搜索参数
export interface SearchParams {
keyword: string;
keyword?: string;
tags?: string[];
type?: 'all' | 'art' | 'manga' | 'novel';
sort?: 'date_desc' | 'date_asc' | 'popular_desc';
duration?: 'all' | 'within_last_day' | 'within_last_week' | 'within_last_month';
ui/src/views/ArtworkView.vue
+121 -3
View File
@@ -158,13 +158,16 @@
<div class="artwork-tags">
<h3>标签</h3>
<div class="tags-list">
<span
<button
v-for="tag in artwork.tags"
:key="tag.name"
class="tag"
@click="handleTagClick($event, tag.name)"
class="tag tag-clickable"
:class="{ 'tag-selected': selectedTags.includes(tag.name) }"
:title="`搜索标签: ${tag.name} (按住Ctrl键点击选择多个标签，松开Ctrl键搜索)`"
>
{{ tag.name }}
</span>
</button>
</div>
</div>
@@ -534,6 +537,88 @@ const goBackToArtist = () => {
}
};
// 选中的标签状态
const selectedTags = ref<string[]>([]);
const isCtrlPressed = ref(false);
// 处理标签点击
const handleTagClick = (event: MouseEvent, tagName: string) => {
// 阻止默认行为
event.preventDefault();
console.log('标签点击事件:', {
tagName,
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
isCtrlPressed: isCtrlPressed.value
});
// 如果按住Ctrl键，则添加到选中状态（不跳转）
if (event.ctrlKey || event.metaKey || isCtrlPressed.value) {
console.log('检测到Ctrl键，添加到选中状态');
// 切换标签的选中状态
const index = selectedTags.value.indexOf(tagName);
if (index > -1) {
// 如果已选中，则取消选中
selectedTags.value.splice(index, 1);
} else {
// 如果未选中，则添加到选中列表
selectedTags.value.push(tagName);
}
console.log('当前选中的标签:', selectedTags.value);
// 保存到sessionStorage
sessionStorage.setItem('currentSearchTags', JSON.stringify(selectedTags.value));
// 不跳转，只是更新选中状态
} else {
console.log('普通点击，执行单标签搜索');
// 普通点击，只搜索当前标签，清除之前的多标签选择
selectedTags.value = [];
sessionStorage.removeItem('currentSearchTags');
router.push({
path: '/search',
query: {
mode: 'tags',
tag: tagName
}
});
}
};
// 处理键盘事件
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Control' || event.key === 'Meta') {
isCtrlPressed.value = true;
}
};
const handleKeyUp = (event: KeyboardEvent) => {
if (event.key === 'Control' || event.key === 'Meta') {
isCtrlPressed.value = false;
// 当松开Ctrl键时，如果有选中的标签，则跳转到搜索页面
if (selectedTags.value.length > 0) {
console.log('松开Ctrl键，跳转到搜索页面，标签:', selectedTags.value);
router.push({
path: '/search',
query: {
mode: 'tags',
tags: selectedTags.value
}
});
// 清空选中状态
selectedTags.value = [];
sessionStorage.removeItem('currentSearchTags');
}
}
};
// 监听路由变化，重新获取作品详情和导航数据
watch(() => route.params.id, () => {
// 清理之前的任务状态
@@ -573,11 +658,15 @@ onMounted(() => {
// 添加键盘事件监听
document.addEventListener('keydown', handleKeydown);
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
});
// 组件卸载时移除事件监听和清理SSE连接
onUnmounted(() => {
document.removeEventListener('keydown', handleKeydown);
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
stopTaskStreaming();
});
</script>
@@ -841,6 +930,35 @@ onUnmounted(() => {
border-radius: 1rem;
font-size: 0.875rem;
line-height: 1;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.tag-clickable {
background: #e0f2fe;
color: #0369a1;
border: 1px solid #bae6fd;
}
.tag-clickable:hover {
background: #bae6fd;
color: #075985;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tag-selected {
background: #3b82f6 !important;
color: white !important;
border-color: #2563eb !important;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.tag-selected:hover {
background: #2563eb !important;
color: white !important;
}
.artwork-description {
ui/src/views/SearchView.vue
+219 -5
View File
@@ -10,6 +10,9 @@
<button @click="searchMode = 'keyword'" class="tab-btn" :class="{ active: searchMode === 'keyword' }">
关键词搜索
</button>
<button @click="searchMode = 'tags'" class="tab-btn" :class="{ active: searchMode === 'tags' }">
标签搜索
</button>
<button @click="searchMode = 'artwork'" class="tab-btn" :class="{ active: searchMode === 'artwork' }">
作品ID
</button>
@@ -30,6 +33,45 @@
</button>
</div>
<!-- 标签搜索 -->
<div v-if="searchMode === 'tags'" class="tags-search-section">
<div class="tags-input-group">
<input
v-model="tagInput"
type="text"
placeholder="输入标签，按回车或逗号分隔..."
class="search-input"
@keyup.enter="addTag"
@keyup.space="addTag"
@keyup.comma="addTag"
/>
<button @click="addTag" class="search-btn" :disabled="loading">
添加标签
</button>
</div>
<!-- 已添加的标签 -->
<div v-if="searchTags.length > 0" class="tags-display">
<div class="tags-list">
<span
v-for="(tag, index) in searchTags"
:key="index"
class="tag-item"
>
{{ tag }}
<button @click="removeTag(index)" class="tag-remove" title="移除标签">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</button>
</span>
</div>
<button @click="handleTagSearch" class="search-btn" :disabled="loading || searchTags.length === 0">
搜索标签
</button>
</div>
</div>
<!-- 作品ID搜索 -->
<div v-if="searchMode === 'artwork'" class="search-input-group">
<input v-model="artworkId" type="text" placeholder="输入作品ID..." class="search-input"
@@ -122,8 +164,8 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ref, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import artworkService from '@/services/artwork';
import type { Artwork, SearchParams } from '@/types';
@@ -132,13 +174,16 @@ import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
// 搜索状态
const searchKeyword = ref('');
const searchMode = ref<'keyword' | 'artwork' | 'artist'>('keyword');
const searchMode = ref<'keyword' | 'tags' | 'artwork' | 'artist'>('keyword');
const artworkId = ref('');
const artistId = ref('');
const searchTags = ref<string[]>([]);
const tagInput = ref('');
// 关键词搜索参数
const searchType = ref<'all' | 'art' | 'manga' | 'novel'>('all');
@@ -191,7 +236,15 @@ const handleSearch = async () => {
};
const loadMore = async () => {
if (!searchKeyword.value.trim() || loadingMore.value) {
if (loadingMore.value) {
return;
}
// 检查是否有搜索条件
const hasKeyword = searchKeyword.value.trim();
const hasTags = searchTags.value.length > 0;
if (!hasKeyword && !hasTags) {
return;
}
@@ -200,7 +253,6 @@ const loadMore = async () => {
offset.value += 30;
const params: SearchParams = {
keyword: searchKeyword.value.trim(),
type: searchType.value,
sort: searchSort.value,
duration: searchDuration.value,
@@ -208,6 +260,13 @@ const loadMore = async () => {
limit: 30
};
// 根据当前搜索模式添加相应的参数
if (searchMode.value === 'keyword' && hasKeyword) {
params.keyword = searchKeyword.value.trim();
} else if (searchMode.value === 'tags' && hasTags) {
params.tags = searchTags.value;
}
const response = await artworkService.searchArtworks(params);
if (response.success && response.data) {
@@ -261,9 +320,91 @@ const handleArtistSearch = () => {
router.push(`/artist/${id}`);
};
// 标签相关方法
const addTag = () => {
const tag = tagInput.value.trim();
if (tag && !searchTags.value.includes(tag)) {
searchTags.value.push(tag);
tagInput.value = '';
}
};
const removeTag = (index: number) => {
searchTags.value.splice(index, 1);
};
const handleTagSearch = async () => {
if (searchTags.value.length === 0) {
return;
}
try {
loading.value = true;
error.value = null;
offset.value = 0;
hasSearched.value = true;
const params: SearchParams = {
tags: searchTags.value,
type: searchType.value,
sort: searchSort.value,
duration: searchDuration.value,
offset: 0,
limit: 30
};
const response = await artworkService.searchArtworks(params);
if (response.success && response.data) {
searchResults.value = response.data.artworks;
totalResults.value = response.data.total;
} else {
throw new Error(response.error || '标签搜索失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '标签搜索失败';
console.error('标签搜索失败:', err);
} finally {
loading.value = false;
}
};
const clearError = () => {
error.value = null;
};
// 监听路由变化，处理URL参数
watch(() => route.query, () => {
const urlMode = route.query.mode as string;
const urlTag = route.query.tag as string;
const urlTags = route.query.tags;
if (urlMode === 'tags') {
// 自动设置标签搜索模式
searchMode.value = 'tags';
if (urlTags) {
// 处理多个标签
if (Array.isArray(urlTags)) {
searchTags.value = urlTags.filter(tag => tag !== null) as string[];
} else {
searchTags.value = urlTags ? [urlTags] : [];
}
// 保存到sessionStorage
sessionStorage.setItem('currentSearchTags', JSON.stringify(searchTags.value));
} else if (urlTag) {
// 处理单个标签
searchTags.value = [urlTag];
// 清除sessionStorage中的多标签选择
sessionStorage.removeItem('currentSearchTags');
}
// 如果有标签，自动执行搜索
if (searchTags.value.length > 0) {
handleTagSearch();
}
}
}, { immediate: true });
</script>
<style scoped>
@@ -368,6 +509,66 @@ const clearError = () => {
height: 1.25rem;
}
/* 标签搜索样式 */
.tags-search-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tags-input-group {
display: flex;
gap: 0.5rem;
}
.tags-display {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem 0.75rem;
background: #e0f2fe;
color: #0369a1;
border-radius: 1rem;
font-size: 0.875rem;
font-weight: 500;
}
.tag-remove {
display: flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
background: none;
border: none;
color: #0369a1;
cursor: pointer;
border-radius: 50%;
transition: all 0.2s;
}
.tag-remove:hover {
background: #0369a1;
color: white;
}
.tag-remove svg {
width: 0.75rem;
height: 0.75rem;
}
.search-filters {
display: flex;
gap: 1rem;
@@ -496,5 +697,18 @@ const clearError = () => {
.artworks-grid {
grid-template-columns: 1fr;
}
.tags-input-group {
flex-direction: column;
}
.tags-list {
justify-content: flex-start;
}
.tag-item {
font-size: 0.75rem;
padding: 0.375rem 0.625rem;
}
}
</style>