页面优化，增加作者搜索功能，若干bug修复
This commit is contained in:
@@ -1,94 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div 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
|
||||
v-if="showFollowButton"
|
||||
@click="handleFollowClick"
|
||||
class="btn btn-primary btn-small"
|
||||
:disabled="artist.is_followed"
|
||||
>
|
||||
{{ artist.is_followed ? '已关注' : '关注' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="showUnfollowButton"
|
||||
@click="handleUnfollowClick"
|
||||
class="btn btn-danger btn-small"
|
||||
>
|
||||
取消关注
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist-actions-bottom">
|
||||
<router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
|
||||
查看作品
|
||||
</router-link>
|
||||
<button @click="handleDownloadClick" class="btn btn-secondary btn-small">
|
||||
下载作品
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Artist {
|
||||
id: number
|
||||
name: string
|
||||
account: string
|
||||
profile_image_urls: {
|
||||
medium: string
|
||||
}
|
||||
is_followed?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
artist: Artist
|
||||
showFollowButton?: boolean
|
||||
showUnfollowButton?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'follow', artistId: number): void
|
||||
(e: 'unfollow', artistId: number): void
|
||||
(e: 'download', artist: Artist): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showFollowButton: false,
|
||||
showUnfollowButton: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 处理关注点击
|
||||
const handleFollowClick = () => {
|
||||
emit('follow', props.artist.id)
|
||||
}
|
||||
|
||||
// 处理取消关注点击
|
||||
const handleUnfollowClick = () => {
|
||||
emit('unfollow', props.artist.id)
|
||||
}
|
||||
|
||||
// 处理下载点击
|
||||
const handleDownloadClick = () => {
|
||||
emit('download', props.artist)
|
||||
}
|
||||
|
||||
// 处理图片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
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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: 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
flex: 1;
|
||||
min-width: 0; /* 防止文本溢出 */
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 0.5rem 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.artist-account {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.artist-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.artist-actions-bottom {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
flex: 1;
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
.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.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artist-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.artist-actions-bottom {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="artist-search">
|
||||
<!-- 搜索表单 -->
|
||||
<div class="search-form">
|
||||
<div class="search-input-group">
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
type="text"
|
||||
placeholder="输入作者名称或账号搜索..."
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<button @click="handleSearch" class="search-btn" :disabled="loading">
|
||||
<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>
|
||||
|
||||
<!-- 搜索选项 -->
|
||||
<div class="search-options">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
v-model="hideFollowedArtists"
|
||||
type="checkbox"
|
||||
class="form-checkbox"
|
||||
/>
|
||||
<span>隐藏已关注的作者</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<div v-if="loading" class="loading-section">
|
||||
<LoadingSpinner text="搜索中..." />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-section">
|
||||
<ErrorMessage :error="error" @dismiss="clearError" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="searchResults.length > 0" class="results-section">
|
||||
<div class="results-header">
|
||||
<h3>搜索结果 ({{ filteredResults.length }})</h3>
|
||||
<div v-if="hideFollowedArtists && searchResults.length !== filteredResults.length" class="filter-info">
|
||||
已隐藏 {{ searchResults.length - filteredResults.length }} 个已关注的作者
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artists-grid">
|
||||
<ArtistCard
|
||||
v-for="artist in filteredResults"
|
||||
:key="artist.id"
|
||||
:artist="artist"
|
||||
:show-follow-button="true"
|
||||
:show-unfollow-button="false"
|
||||
@follow="handleFollow"
|
||||
@download="handleDownload"
|
||||
/>
|
||||
</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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="welcome-section">
|
||||
<div class="welcome-content">
|
||||
<h3>搜索作者</h3>
|
||||
<p>输入作者名称或账号来搜索</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useArtistStore } from '@/stores/artist'
|
||||
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 artistStore = useArtistStore()
|
||||
|
||||
// 搜索状态
|
||||
const searchKeyword = ref('')
|
||||
const hideFollowedArtists = ref(false)
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const hasSearched = ref(false)
|
||||
const searchResults = ref<any[]>([])
|
||||
|
||||
// 计算属性：过滤搜索结果
|
||||
const filteredResults = computed(() => {
|
||||
if (!hideFollowedArtists.value) {
|
||||
return searchResults.value
|
||||
}
|
||||
|
||||
// 获取已关注作者的ID列表
|
||||
const followedIds = new Set(artistStore.followingArtists.map(artist => artist.id))
|
||||
|
||||
// 过滤掉已关注的作者
|
||||
return searchResults.value.filter(artist => !followedIds.has(artist.id))
|
||||
})
|
||||
|
||||
// 执行搜索
|
||||
const handleSearch = async () => {
|
||||
if (!searchKeyword.value.trim()) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
hasSearched.value = true
|
||||
|
||||
await artistStore.searchArtists(searchKeyword.value)
|
||||
searchResults.value = artistStore.searchResults
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '搜索失败'
|
||||
console.error('搜索失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 关注作者
|
||||
const handleFollow = async (artistId: number) => {
|
||||
try {
|
||||
await artistStore.followArtist(artistId)
|
||||
// 更新搜索结果中的关注状态
|
||||
const artist = searchResults.value.find(a => a.id === artistId)
|
||||
if (artist) {
|
||||
artist.is_followed = true
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '关注失败'
|
||||
console.error('关注失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 下载作品
|
||||
const handleDownload = (artist: any) => {
|
||||
// 触发父组件的下载事件
|
||||
emit('download', artist)
|
||||
}
|
||||
|
||||
// 清除错误
|
||||
const clearError = () => {
|
||||
error.value = null
|
||||
}
|
||||
|
||||
// 定义事件
|
||||
interface Emits {
|
||||
(e: 'download', artist: any): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
searchKeyword,
|
||||
clearSearch: () => {
|
||||
searchKeyword.value = ''
|
||||
searchResults.value = []
|
||||
hasSearched.value = false
|
||||
error.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artist-search {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 0.75rem 1rem;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.search-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.search-btn svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.search-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: #3b82f6;
|
||||
}
|
||||
|
||||
.loading-section,
|
||||
.error-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.results-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.results-header h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-info {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.artists-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.empty-section,
|
||||
.welcome-section {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.empty-content,
|
||||
.welcome-content {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-content h3,
|
||||
.welcome-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-content p,
|
||||
.welcome-content p {
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-input-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.artists-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-options {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
+49
-118
@@ -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>
|
||||
+281
-340
@@ -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>
|
||||
@@ -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>
|
||||
+64
-48
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user