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

页面优化，增加作者搜索功能，若干bug修复

Browse Source
This commit is contained in:
kjqwer
2025-08-24 09:22:44 +08:00
parent 2e368e9771
commit 4b507ab161
15 changed files with 1199 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/views/AboutView.vue
-15
View File
@@ -1,15 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
ui/src/views/ArtistView.vue
+49 -118
View File
@@ -13,7 +13,7 @@
<div v-if="downloadSuccess" class="success-message">
<div class="success-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="success-icon">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</svg>
<span>{{ downloadSuccess }}</span>
</div>
@@ -23,19 +23,15 @@
<!-- 作者信息卡片 -->
<div class="artist-header">
<div class="artist-profile">
<img
:src="getImageUrl(artist.profile_image_urls.medium)"
:alt="artist.name"
class="artist-avatar"
crossorigin="anonymous"
/>
<img :src="getImageUrl(artist.profile_image_urls.medium)" :alt="artist.name" class="artist-avatar"
crossorigin="anonymous" />
<div class="artist-info">
<h1 class="artist-name">{{ artist.name }}</h1>
<p class="artist-account">@{{ artist.account }}</p>
<p v-if="artist.comment" class="artist-comment">{{ artist.comment }}</p>
</div>
</div>
<div class="artist-actions">
<button @click="handleFollow" class="btn btn-primary">
{{ artist.is_followed ? '取消关注' : '关注' }}
@@ -60,29 +56,7 @@
</div>
</div>
<!-- 作者统计 -->
<div class="artist-stats">
<div class="stat-card">
<div class="stat-number">{{ artist.total_illusts }}</div>
<div class="stat-label">插画</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ artist.total_manga }}</div>
<div class="stat-label">漫画</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ artist.total_novels }}</div>
<div class="stat-label">小说</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ artist.total_followers }}</div>
<div class="stat-label">粉丝</div>
</div>
<div class="stat-card">
<div class="stat-number">{{ artist.total_following }}</div>
<div class="stat-label">关注</div>
</div>
</div>
<!-- 作品列表 -->
<div class="artworks-section">
@@ -102,12 +76,7 @@
</div>
<div v-else-if="artworks.length > 0" class="artworks-grid">
<ArtworkCard
v-for="artwork in artworks"
:key="artwork.id"
:artwork="artwork"
@click="handleArtworkClick"
/>
<ArtworkCard v-for="artwork in artworks" :key="artwork.id" :artwork="artwork" @click="handleArtworkClick" />
</div>
<div v-else class="empty-section">
@@ -116,37 +85,24 @@
<!-- 分页导航 -->
<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">
<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"/>
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
上一页
</button>
<div class="page-numbers">
<button
v-for="page in visiblePages"
:key="page"
@click="goToPage(page)"
class="page-number"
:class="{ active: page === currentPage }"
>
<button v-for="page in visiblePages" :key="page" @click="goToPage(page)" class="page-number"
:class="{ active: page === currentPage }">
{{ page }}
</button>
</div>
<button
@click="goToPage(currentPage + 1)"
class="page-btn"
:disabled="currentPage >= totalPages"
>
<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="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
</svg>
</button>
</div>
@@ -207,15 +163,15 @@ const visiblePages = computed(() => {
const maxVisible = 5;
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
let end = Math.min(totalPages.value, start + maxVisible - 1);
if (end - start + 1 < maxVisible) {
start = Math.max(1, end - maxVisible + 1);
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
return pages;
});
@@ -228,17 +184,17 @@ const getCacheKey = (type: string, page: number) => {
const getCache = (key: string) => {
const cached = cache.value.get(key);
const timeout = cacheTimeout.value.get(key);
if (cached && timeout && Date.now() < timeout) {
return cached;
}
// 清除过期缓存
if (cached) {
cache.value.delete(key);
cacheTimeout.value.delete(key);
}
return null;
};
@@ -273,9 +229,9 @@ const fetchArtistInfo = async () => {
try {
loading.value = true;
error.value = null;
const response = await artistService.getArtistInfo(artistId);
if (response.success && response.data) {
artist.value = response.data;
setCache(cacheKey, response.data);
@@ -296,7 +252,7 @@ const fetchArtworks = async (page = 1) => {
const cacheKey = getCacheKey(artworkType.value, page);
const cached = getCache(cacheKey);
if (cached) {
artworks.value = cached.artworks;
totalCount.value = cached.totalCount;
@@ -307,20 +263,20 @@ const fetchArtworks = async (page = 1) => {
try {
artworksLoading.value = true;
const offset = (page - 1) * pageSize.value;
const response = await artistService.getArtistArtworks(artist.value.id, {
type: artworkType.value,
offset: offset,
limit: pageSize.value
});
if (response.success && response.data) {
artworks.value = response.data.artworks;
// 基于 next_url 来判断是否还有更多页面
const hasMore = !!response.data.next_url;
if (page === 1) {
// 第一页，基于是否有下一页来判断总数
if (hasMore) {
@@ -344,9 +300,9 @@ const fetchArtworks = async (page = 1) => {
totalPages.value = Math.max(totalPages.value, page);
}
}
currentPage.value = page;
// 缓存结果
setCache(cacheKey, {
artworks: response.data.artworks,
@@ -383,7 +339,7 @@ const handleFollow = async () => {
try {
const action = artist.value.is_followed ? 'unfollow' : 'follow';
const response = await artistService.followArtist(artist.value.id, action);
if (response.success) {
artist.value.is_followed = !artist.value.is_followed;
// 更新缓存
@@ -408,12 +364,12 @@ const handleDownloadAll = async () => {
type: artworkType.value,
limit: parseInt(downloadLimit.value)
});
if (response.success) {
console.log('下载任务已创建:', response.data);
const limitText = downloadLimit.value === '9999' ? '全部' : downloadLimit.value;
downloadSuccess.value = `下载任务已创建，将下载 ${limitText} 个作品`;
// 3秒后清除成功提示
setTimeout(() => {
downloadSuccess.value = null;
@@ -432,13 +388,13 @@ const handleDownloadAll = async () => {
// 处理图片URL，通过后端代理
const getImageUrl = (originalUrl: string) => {
if (!originalUrl) return '';
// 如果是Pixiv的图片URL，通过后端代理
if (originalUrl.includes('i.pximg.net')) {
const encodedUrl = encodeURIComponent(originalUrl);
return `http://localhost:3000/api/proxy/image?url=${encodedUrl}`;
}
return originalUrl;
};
@@ -466,7 +422,7 @@ watch(() => route.params.id, () => {
// 清除缓存并重新加载
clearCache();
fetchArtistInfo();
// 检查是否有返回的页面信息
const returnPage = parseInt(route.query.page as string);
if (returnPage && returnPage > 0) {
@@ -484,7 +440,7 @@ onUnmounted(() => {
onMounted(async () => {
await fetchArtistInfo();
// 检查是否有返回的页面信息
const returnPage = parseInt(route.query.page as string);
if (returnPage && returnPage > 0) {
@@ -547,6 +503,7 @@ onMounted(async () => {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
@@ -675,33 +632,7 @@ onMounted(async () => {
background: #e5e7eb;
}
.artist-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
border-radius: 0.75rem;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: #3b82f6;
margin-bottom: 0.5rem;
}
.stat-label {
color: #6b7280;
font-size: 0.875rem;
font-weight: 500;
}
.artworks-section {
background: white;
@@ -832,58 +763,58 @@ onMounted(async () => {
.container {
padding: 0 1rem;
}
.artist-header {
flex-direction: column;
align-items: stretch;
}
.artist-profile {
flex-direction: column;
text-align: center;
}
.artist-actions {
flex-direction: row;
}
.download-section {
flex-direction: row;
align-items: center;
gap: 1rem;
}
.download-input-group {
flex-shrink: 0;
}
.btn {
flex: 1;
}
.section-header {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.artworks-grid {
grid-template-columns: 1fr;
}
.pagination {
flex-direction: column;
gap: 1rem;
}
.page-numbers {
order: -1;
}
.page-info {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
</style>
</style>
ui/src/views/ArtistsView.vue
+281 -340
View File
@@ -4,23 +4,10 @@
<div class="page-header">
<h1 class="page-title">作者管理</h1>
<div class="header-actions">
<div class="search-box">
<input
v-model="searchKeyword"
type="text"
placeholder="搜索作者..."
class="search-input"
@keyup.enter="handleSearch"
/>
<button @click="handleSearch" class="search-btn">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</button>
</div>
<button @click="handleRefresh" class="btn btn-secondary" :disabled="artistStore.loading">
<svg viewBox="0 0 24 24" fill="currentColor" class="refresh-icon">
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
</svg>
刷新
</button>
@@ -43,73 +30,31 @@
<div v-if="artistStore.hasFollowingArtists" class="cache-indicator">
<span v-if="artistStore.isDataStale" class="cache-status stale">
<svg viewBox="0 0 24 24" fill="currentColor" class="cache-icon">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
数据已过期
</span>
<span v-else class="cache-status fresh">
<svg viewBox="0 0 24 24" fill="currentColor" class="cache-icon">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</svg>
数据已缓存
</span>
</div>
</div>
<div v-if="artistStore.followingArtists.length > 0" class="artists-grid">
<div
v-for="artist in artistStore.followingArtists"
:key="artist.id"
class="artist-card"
>
<div class="artist-header">
<img
:src="getImageUrl(artist.profile_image_urls.medium)"
:alt="artist.name"
class="artist-avatar"
crossorigin="anonymous"
/>
<div class="artist-info">
<h3 class="artist-name">{{ artist.name }}</h3>
<p class="artist-account">@{{ artist.account }}</p>
</div>
<div class="artist-actions">
<button @click="handleUnfollow(artist.id)" class="btn btn-danger btn-small">
取消关注
</button>
</div>
</div>
<div class="artist-stats">
<div class="stat">
<span class="stat-number">{{ artist.total_illusts }}</span>
<span class="stat-label">插画</span>
</div>
<div class="stat">
<span class="stat-number">{{ artist.total_manga }}</span>
<span class="stat-label">漫画</span>
</div>
<div class="stat">
<span class="stat-number">{{ artist.total_followers }}</span>
<span class="stat-label">粉丝</span>
</div>
</div>
<div class="artist-actions-bottom">
<router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
查看作品
</router-link>
<button @click="handleDownloadArtist(artist.id)" class="btn btn-secondary btn-small">
下载作品
</button>
</div>
</div>
<ArtistCard v-for="artist in artistStore.followingArtists" :key="artist.id" :artist="artist"
:show-follow-button="false" :show-unfollow-button="true" @unfollow="handleUnfollow"
@download="openDownloadDialog" />
</div>
<div v-else class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
<h3>暂无关注的作者</h3>
<p>关注喜欢的作者，在这里管理他们</p>
@@ -119,84 +64,91 @@
</div>
</div>
</div>
</div>
</div>
<!-- 搜索建议 -->
<div v-if="artistStore.searchResults.length > 0" class="section">
<h2 class="section-title">搜索结果</h2>
<div class="artists-grid">
<div
v-for="artist in artistStore.searchResults"
:key="artist.id"
class="artist-card"
>
<div class="artist-header">
<img
:src="getImageUrl(artist.profile_image_urls.medium)"
:alt="artist.name"
class="artist-avatar"
crossorigin="anonymous"
/>
<div class="artist-info">
<h3 class="artist-name">{{ artist.name }}</h3>
<p class="artist-account">@{{ artist.account }}</p>
</div>
<div class="artist-actions">
<button
@click="handleFollow(artist.id)"
class="btn btn-primary btn-small"
:disabled="artist.is_followed"
>
{{ artist.is_followed ? '已关注' : '关注' }}
</button>
</div>
</div>
<div class="artist-stats">
<div class="stat">
<span class="stat-number">{{ artist.total_illusts }}</span>
<span class="stat-label">插画</span>
</div>
<div class="stat">
<span class="stat-number">{{ artist.total_manga }}</span>
<span class="stat-label">漫画</span>
</div>
<div class="stat">
<span class="stat-number">{{ artist.total_followers }}</span>
<span class="stat-label">粉丝</span>
</div>
</div>
<div class="artist-actions-bottom">
<router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
查看作品
</router-link>
<button @click="handleDownloadArtist(artist.id)" class="btn btn-secondary btn-small">
下载作品
</button>
</div>
<!-- 下载弹出框 -->
<div v-if="showDownloadDialog" class="modal-overlay" @click="closeDownloadDialog">
<div class="modal-content" @click.stop>
<div class="modal-header">
<h3>下载作品</h3>
<button @click="closeDownloadDialog" class="modal-close">
<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>
</div>
<div class="modal-body">
<div class="artist-info-modal">
<img :src="selectedArtist?.profile_image_urls.medium" :alt="selectedArtist?.name"
class="artist-avatar-modal" crossorigin="anonymous" />
<div>
<h4>{{ selectedArtist?.name }}</h4>
<p>@{{ selectedArtist?.account }}</p>
</div>
</div>
<div class="download-options">
<div class="download-input-group">
<label for="downloadLimit">下载数量:</label>
<select v-model="downloadLimit" id="downloadLimit" class="download-select">
<option value="10">10个</option>
<option value="30">30个</option>
<option value="50">50个</option>
<option value="100">100个</option>
<option value="200">200个</option>
<option value="500">500个</option>
<option value="9999">全部</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button @click="closeDownloadDialog" class="btn btn-secondary">
取消
</button>
<button @click="handleDownloadArtist" class="btn btn-primary" :disabled="downloading">
{{ downloading ? '下载中...' : '开始下载' }}
</button>
</div>
</div>
</div>
<!-- 下载成功提示 -->
<div v-if="downloadSuccess" class="success-message">
<div class="success-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="success-icon">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</svg>
<span>{{ downloadSuccess }}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { useArtistStore } from '@/stores/artist';
import downloadService from '@/services/download';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtistCard from '@/components/artist/ArtistCard.vue';
const router = useRouter();
const authStore = useAuthStore();
const artistStore = useArtistStore();
// 本地状态
const searchKeyword = ref('');
// 下载弹出框相关
const showDownloadDialog = ref(false);
const selectedArtist = ref<any>(null);
const downloadLimit = ref('50');
const downloading = ref(false);
const downloadSuccess = ref<string | null>(null);
// 获取关注的作者
const fetchFollowingArtists = async () => {
@@ -207,20 +159,6 @@ const fetchFollowingArtists = async () => {
}
};
// 搜索作者
const handleSearch = async () => {
if (!searchKeyword.value.trim()) {
artistStore.clearSearchResults();
return;
}
try {
await artistStore.searchArtists(searchKeyword.value);
} catch (err) {
console.error('搜索失败:', err);
}
};
// 关注作者
const handleFollow = async (artistId: number) => {
try {
@@ -239,15 +177,43 @@ const handleUnfollow = async (artistId: number) => {
}
};
// 下载作者作品
const handleDownloadArtist = async (artistId: number) => {
// 打开下载弹出框
const openDownloadDialog = (artist: any) => {
selectedArtist.value = artist;
showDownloadDialog.value = true;
};
// 关闭下载弹出框
const closeDownloadDialog = () => {
showDownloadDialog.value = false;
selectedArtist.value = null;
downloadLimit.value = '50';
downloading.value = false;
};
// 处理下载
const handleDownloadArtist = async () => {
if (!selectedArtist.value) return;
try {
const response = await downloadService.downloadArtistArtworks(artistId, {
limit: 50
downloading.value = true;
const response = await downloadService.downloadArtistArtworks(selectedArtist.value.id, {
limit: parseInt(downloadLimit.value)
});
if (response.success) {
console.log('下载任务已创建:', response.data);
const limitText = downloadLimit.value === '9999' ? '全部' : downloadLimit.value;
downloadSuccess.value = `下载任务已创建，将下载 ${limitText} 个作品`;
// 关闭弹出框
closeDownloadDialog();
// 3秒后清除成功提示
setTimeout(() => {
downloadSuccess.value = null;
}, 3000);
router.push('/downloads');
} else {
throw new Error(response.error || '下载失败');
@@ -255,6 +221,8 @@ const handleDownloadArtist = async (artistId: number) => {
} catch (err) {
artistStore.error = err instanceof Error ? err.message : '下载失败';
console.error('下载失败:', err);
} finally {
downloading.value = false;
}
};
@@ -267,18 +235,7 @@ const handleRefresh = async () => {
}
};
// 处理图片URL，通过后端代理
const getImageUrl = (originalUrl: string) => {
if (!originalUrl) return '';
// 如果是Pixiv的图片URL，通过后端代理
if (originalUrl.includes('i.pximg.net')) {
const encodedUrl = encodeURIComponent(originalUrl);
return `http://localhost:3000/api/proxy/image?url=${encodedUrl}`;
}
return originalUrl;
};
// 监听数据过期状态，自动刷新
watch(() => artistStore.isDataStale, (isStale) => {
@@ -325,41 +282,6 @@ onMounted(() => {
gap: 1rem;
}
.search-box {
display: flex;
align-items: center;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
overflow: hidden;
}
.search-input {
padding: 0.75rem 1rem;
border: none;
outline: none;
font-size: 1rem;
min-width: 300px;
}
.search-btn {
padding: 0.75rem;
background: #3b82f6;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
.search-btn:hover {
background: #2563eb;
}
.search-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.refresh-icon {
width: 1rem;
height: 1rem;
@@ -429,143 +351,11 @@ onMounted(() => {
.artists-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.artist-card {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.artist-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.artist-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.artist-avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
}
.artist-info {
flex: 1;
}
.artist-name {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
margin: 0 0 0.25rem 0;
}
.artist-account {
color: #6b7280;
font-size: 0.875rem;
margin: 0;
}
.artist-actions {
flex-shrink: 0;
}
.artist-stats {
display: flex;
justify-content: space-around;
margin-bottom: 1rem;
padding: 1rem 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.stat-number {
font-size: 1.25rem;
font-weight: 700;
color: #3b82f6;
}
.stat-label {
font-size: 0.75rem;
color: #6b7280;
text-transform: uppercase;
}
.artist-actions-bottom {
display: flex;
gap: 0.5rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 0.875rem;
flex: 1;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #2563eb;
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.btn-secondary:hover:not(:disabled) {
background: #e5e7eb;
}
.btn-danger {
background: #ef4444;
color: white;
}
.btn-danger:hover {
background: #dc2626;
}
.btn-small {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
}
.empty-section {
text-align: center;
@@ -609,33 +399,184 @@ onMounted(() => {
font-size: 0.75rem;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
border-radius: 1rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 500px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
}
.modal-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
}
.modal-close {
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
color: #6b7280;
transition: color 0.2s;
}
.modal-close:hover {
color: #374151;
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
flex-grow: 1;
}
.artist-info-modal {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.artist-avatar-modal {
width: 4rem;
height: 4rem;
border-radius: 50%;
object-fit: cover;
}
.artist-info-modal h4 {
margin: 0 0 0.25rem 0;
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
}
.artist-info-modal p {
margin: 0;
color: #6b7280;
font-size: 0.875rem;
}
.download-options {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.download-input-group {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.download-input-group label {
font-size: 0.875rem;
color: #374151;
font-weight: 500;
}
.download-select {
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 1rem;
color: #1f2937;
background: white;
cursor: pointer;
transition: border-color 0.2s;
}
.download-select:focus {
outline: none;
border-color: #3b82f6;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
padding: 1.5rem;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
.success-message {
position: fixed;
top: 20px;
right: 20px;
background: #d1fae5;
color: #065f46;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 0.75rem;
z-index: 999;
}
.success-content {
display: flex;
align-items: center;
gap: 0.5rem;
}
.success-icon {
width: 1.25rem;
height: 1.25rem;
}
.success-message span {
font-size: 0.875rem;
font-weight: 500;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.page-header {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.search-input {
min-width: auto;
flex: 1;
}
.artists-grid {
grid-template-columns: 1fr;
}
.artist-header {
flex-direction: column;
text-align: center;
}
.artist-actions-bottom {
flex-direction: column;
}
}
</style>
</style>
ui/src/views/RepositoryView.vue
+49 -62
View File
@@ -12,61 +12,33 @@
<!-- 功能选项卡 -->
<div class="tabs">
<button
class="tab-button"
:class="{ active: activeTab === 'config' }"
@click="activeTab = 'config'"
>
<button class="tab-button" :class="{ active: activeTab === 'config' }" @click="activeTab = 'config'">
配置管理
</button>
<button
class="tab-button"
:class="{ active: activeTab === 'browse' }"
@click="activeTab = 'browse'"
>
<button class="tab-button" :class="{ active: activeTab === 'browse' }" @click="activeTab = 'browse'">
文件浏览
</button>
</div>
<!-- 配置管理 -->
<div v-if="activeTab === 'config'" class="tab-content">
<RepositoryConfigComponent
:config="config"
:migrating="migrating"
:migration-progress="migrationProgress"
:migration-percent="migrationPercent"
:migration-result="migrationResult"
@save-config="saveConfig"
@reset-config="resetConfig"
@select-download-dir="selectDownloadDir"
@test-download-dir="testDownloadDir"
/>
<RepositoryConfigComponent :config="config" :migrating="migrating" :migration-progress="migrationProgress"
:migration-percent="migrationPercent" :migration-result="migrationResult" @save-config="saveConfig"
@reset-config="resetConfig" @select-download-dir="selectDownloadDir" @test-download-dir="testDownloadDir"
@config-saved="handleConfigSaved" />
</div>
<!-- 文件浏览 -->
<div v-if="activeTab === 'browse'" class="tab-content">
<RepositoryBrowse
:artists="artists"
:artworks="artworks"
:current-page="currentPage"
:page-size="pageSize"
:total-items="totalItems"
:view-mode="viewMode"
@update:search-query="handleSearchQuery"
@update:view-mode="handleViewMode"
@select-artist="selectArtist"
@view-artwork="viewArtwork"
@change-page="changePage"
/>
<RepositoryBrowse :artists="artists" :artworks="artworks" :current-page="currentPage" :page-size="pageSize"
:total-items="totalItems" :view-mode="viewMode" @update:search-query="handleSearchQuery"
@update:view-mode="handleViewMode" @select-artist="selectArtist" @view-artwork="viewArtwork"
@change-page="changePage" />
</div>
</div>
<!-- 作品详情模态框 -->
<ArtworkModal
:artwork="selectedArtwork"
@close="closeArtworkModal"
@delete-artwork="deleteArtwork"
/>
<ArtworkModal :artwork="selectedArtwork" @close="closeArtworkModal" @delete-artwork="deleteArtwork" />
</div>
</template>
@@ -150,19 +122,19 @@ const saveConfig = async () => {
.map((ext: string) => ext.trim())
.filter((ext: string) => ext)
}
// 获取当前配置（旧配置）
const oldConfig = await repositoryStore.getConfig()
const oldDownloadDir = oldConfig.downloadDir
// 保存新配置
await repositoryStore.updateConfig(config.value)
// 如果启用了自动迁移，且下载目录发生了变化，执行迁移
if (config.value.autoMigration && oldDownloadDir !== config.value.downloadDir) {
await performAutoMigration(oldDownloadDir)
}
alert('配置保存成功')
} catch (error: any) {
console.error('保存配置失败:', error)
@@ -175,7 +147,7 @@ const resetConfig = async () => {
if (!confirm('确定要重置配置为默认值吗？此操作不可恢复。')) {
return
}
try {
await repositoryStore.resetConfig()
// 重新加载配置
@@ -193,26 +165,26 @@ const performAutoMigration = async (oldDownloadDir: string) => {
migrating.value = true
migrationProgress.value = '正在准备迁移...'
migrationPercent.value = 10
console.log('开始自动迁移:', { oldDir: oldDownloadDir, newDir: config.value.downloadDir })
migrationProgress.value = `正在从 ${oldDownloadDir} 迁移到 ${config.value.downloadDir}...`
migrationPercent.value = 30
// 执行迁移：从旧目录到新目录
const result = await repositoryStore.migrateFromOldToNew(oldDownloadDir, config.value.downloadDir)
migrationResult.value = result
migrationPercent.value = 100
console.log('迁移完成:', result)
// 显示迁移结果
if (result.totalMigrated > 0) {
alert(`迁移完成！成功移动 ${result.totalMigrated} 个目录`)
} else {
alert('迁移完成，但没有找到需要迁移的文件')
}
} catch (error: any) {
console.error('自动迁移失败:', error)
migrationProgress.value = '迁移失败: ' + error.message
@@ -253,12 +225,12 @@ const selectArtist = async (artistName: string) => {
searchQuery.value = ''
currentPage.value = 1
currentArtist.value = artistName // 设置当前查看的作者
// 获取作者作品
const result = await repositoryStore.getArtworksByArtist(artistName, 0, pageSize)
artworks.value = result.artworks
totalItems.value = result.total || result.artworks.length
// 切换到作品视图
viewMode.value = 'artworks'
activeTab.value = 'browse'
@@ -271,17 +243,17 @@ const selectArtist = async (artistName: string) => {
const handleSearchQuery = async (query: string) => {
searchQuery.value = query
currentArtist.value = '' // 搜索时清除当前作者
// 重置分页
currentPage.value = 1
if (query.trim()) {
try {
// 搜索作品
const result = await repositoryStore.searchArtworks(query, 0, pageSize)
artworks.value = result.artworks
totalItems.value = result.total
// 切换到作品视图
viewMode.value = 'artworks'
activeTab.value = 'browse'
@@ -297,7 +269,7 @@ const handleSearchQuery = async (query: string) => {
// 处理视图模式
const handleViewMode = (mode: string) => {
viewMode.value = mode
// 根据视图模式加载相应数据
if (mode === 'artists') {
// 作者模式，确保作者数据已加载
@@ -328,7 +300,7 @@ const deleteArtwork = async (artworkId: string) => {
if (!confirm('确定要删除这个作品吗？此操作不可恢复。')) {
return
}
try {
await repositoryStore.deleteArtwork(artworkId)
alert('作品删除成功')
@@ -345,12 +317,12 @@ const deleteArtwork = async (artworkId: string) => {
// 分页处理
const changePage = async (page: number, options?: { artist?: string }) => {
currentPage.value = page
// 如果传入了作者信息，使用作者特定的分页
if (options?.artist) {
currentArtist.value = options.artist
}
if (searchQuery.value.trim()) {
// 如果有搜索查询，重新搜索
try {
@@ -399,13 +371,13 @@ const validateDirectory = async (path: string) => {
if (!path || path.trim() === '') {
return { valid: false, message: '路径不能为空' }
}
// 检查路径格式
const trimmedPath = path.trim()
if (trimmedPath.includes('..') || trimmedPath.includes('//')) {
return { valid: false, message: '路径格式不正确' }
}
return { valid: true, message: '路径格式正确' }
} catch (error: any) {
return { valid: false, message: '验证失败: ' + error.message }
@@ -421,6 +393,21 @@ const testDownloadDir = async () => {
alert('路径验证失败: ' + validation.message)
}
}
// 处理配置保存后的刷新
const handleConfigSaved = async () => {
try {
// 重新加载所有数据
await loadStats()
await loadConfig()
await loadArtists()
await loadAllArtworks(1)
console.log('配置保存后数据刷新完成')
} catch (error: any) {
console.error('配置保存后刷新数据失败:', error)
}
}
</script>
<style scoped>
@@ -489,4 +476,4 @@ const testDownloadDir = async () => {
padding: 0 1rem;
}
}
</style>
</style>
ui/src/views/SearchView.vue
+64 -48
View File
@@ -36,32 +36,22 @@
<!-- 标签搜索 -->
<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"
/>
<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"
>
<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"/>
<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>
@@ -121,41 +111,49 @@
<ErrorMessage :error="error" @dismiss="clearError" />
</div>
<div v-if="loading" class="loading-section">
<LoadingSpinner text="搜索中..." />
<!-- 作者搜索模式 -->
<div v-if="searchMode === 'artist'" class="artist-search-section">
<ArtistSearch ref="artistSearchRef" @download="handleArtistDownload" />
</div>
<div v-else-if="searchResults.length > 0" class="results-section">
<div class="results-header">
<h2>搜索结果 ({{ totalResults }})</h2>
<div class="results-actions">
<button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
{{ loadingMore ? '加载中...' : '加载更多' }}
</button>
<!-- 作品搜索模式 -->
<div v-else>
<div v-if="loading" class="loading-section">
<LoadingSpinner text="搜索中..." />
</div>
<div v-else-if="searchResults.length > 0" class="results-section">
<div class="results-header">
<h2>搜索结果 ({{ totalResults }})</h2>
<div class="results-actions">
<button @click="loadMore" class="btn btn-secondary" :disabled="loadingMore">
{{ loadingMore ? '加载中...' : '加载更多' }}
</button>
</div>
</div>
<div class="artworks-grid">
<ArtworkCard v-for="artwork in searchResults" :key="artwork.id" :artwork="artwork"
@click="handleArtworkClick" />
</div>
</div>
<div class="artworks-grid">
<ArtworkCard v-for="artwork in searchResults" :key="artwork.id" :artwork="artwork"
@click="handleArtworkClick" />
<div v-else-if="hasSearched" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
<h3>未找到相关作品</h3>
<p>尝试使用不同的关键词或调整搜索条件</p>
</div>
</div>
</div>
<div v-else-if="hasSearched" class="empty-section">
<div class="empty-content">
<svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
<h3>未找到相关作品</h3>
<p>尝试使用不同的关键词或调整搜索条件</p>
</div>
</div>
<div v-else class="welcome-section">
<div class="welcome-content">
<h2>开始搜索</h2>
<p>输入关键词来搜索你喜欢的作品</p>
<div v-else class="welcome-section">
<div class="welcome-content">
<h2>开始搜索</h2>
<p>输入关键词来搜索你喜欢的作品</p>
</div>
</div>
</div>
</div>
@@ -172,6 +170,7 @@ import type { Artwork, SearchParams } from '@/types';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import ErrorMessage from '@/components/common/ErrorMessage.vue';
import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
import ArtistSearch from '@/components/search/ArtistSearch.vue';
const router = useRouter();
const route = useRoute();
@@ -198,6 +197,7 @@ const loadingMore = ref(false);
const error = ref<string | null>(null);
const hasSearched = ref(false);
const offset = ref(0);
const artistSearchRef = ref();
const handleSearch = async () => {
if (!searchKeyword.value.trim()) {
@@ -243,7 +243,7 @@ const loadMore = async () => {
// 检查是否有搜索条件
const hasKeyword = searchKeyword.value.trim();
const hasTags = searchTags.value.length > 0;
if (!hasKeyword && !hasTags) {
return;
}
@@ -317,6 +317,8 @@ const handleArtistSearch = () => {
return;
}
// 切换到作者搜索模式并跳转
searchMode.value = 'artist';
router.push(`/artist/${id}`);
};
@@ -373,16 +375,23 @@ const clearError = () => {
error.value = null;
};
// 处理作者下载
const handleArtistDownload = (artist: any) => {
// 这里可以添加下载作者的逻辑
// 暂时跳转到作者页面
router.push(`/artist/${artist.id}`);
};
// 监听路由变化，处理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)) {
@@ -398,7 +407,7 @@ watch(() => route.query, () => {
// 清除sessionStorage中的多标签选择
sessionStorage.removeItem('currentSearchTags');
}
// 如果有标签，自动执行搜索
if (searchTags.value.length > 0) {
handleTagSearch();
@@ -588,6 +597,13 @@ watch(() => route.query, () => {
padding: 2rem 0;
}
.artist-search-section {
background: white;
border-radius: 0.5rem;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.error-section,
.loading-section {
margin-bottom: 2rem;
ui/src/views/repository/RepositoryConfig.vue
+5
View File
@@ -143,6 +143,7 @@ interface Emits {
(e: 'reset-config'): void
(e: 'select-download-dir'): void
(e: 'test-download-dir'): void
(e: 'config-saved'): void
}
const props = defineProps<Props>()
@@ -165,6 +166,8 @@ const saveConfig = async () => {
saving.value = true
try {
emit('save-config')
// 保存成功后触发刷新事件
emit('config-saved')
} finally {
saving.value = false
}
@@ -173,6 +176,8 @@ const saveConfig = async () => {
// 重置配置
const resetConfig = () => {
emit('reset-config')
// 重置后也触发刷新事件
emit('config-saved')
}
</script>